:root {
  --bg: #08111c; --panel: #0f1b2a; --line: #263b52; --text: #eaf1fa; --muted: #a6bdce;
  --accent: #286ce3; --accent-line: #4388fb;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif; line-height: 1.5; }
.top { padding: 20px 16px; max-width: 1040px; width: 100%; margin: 0 auto; }
.brand { font-weight: 750; font-size: 17px; letter-spacing: -.01em; }
.mark { color: var(--accent-line); }
main { flex: 1; width: 100%; max-width: 1040px; margin: 0 auto; padding: 32px 16px 48px; }
.hero { max-width: 680px; margin-bottom: 40px; }
.eyebrow { margin: 0 0 12px; color: var(--accent-line); font-size: 12px; font-weight: 700; letter-spacing: .08em; }
h1 { margin: 0 0 16px; font-size: clamp(28px, 5vw, 42px); line-height: 1.15; letter-spacing: -.02em; }
.lead { margin: 0; color: var(--muted); font-size: 17px; }
.environments { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.env { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 24px; display: flex; flex-direction: column; gap: 8px; }
.env h2 { margin: 4px 0 0; font-size: 20px; }
.env p { margin: 0 0 12px; color: var(--muted); font-size: 14px; flex: 1; }
.badge { align-self: flex-start; font-size: 11px; font-weight: 750; letter-spacing: .06em; padding: 4px 8px; border-radius: 6px; }
.badge.dev { background: #1f3a2a; color: #7ee0a1; }
.badge.prod { background: #3a2a1f; color: #f2b277; }
.button { display: block; text-align: center; padding: 12px 16px; border-radius: 9px; font-weight: 650; font-size: 14px;
  text-decoration: none; background: var(--accent); border: 1px solid var(--accent-line); color: #fff; }
.button:hover { background: #3781f4; }
.button.disabled { background: #1b2b3d; border-color: #3d5874; color: #7f95aa; cursor: not-allowed; }
code { font-size: 13px; color: var(--text); }
footer { padding: 24px 16px; text-align: center; color: #7f95aa; font-size: 13px; border-top: 1px solid #16263a; }
.top { display: flex; justify-content: space-between; align-items: center; }
.role { font-size: 12px; font-weight: 650; color: #a6bdce; border: 1px solid #263b52; border-radius: 999px; padding: 4px 10px; }
.link { text-align: center; color: #83b9ff; font-size: 13px; font-weight: 600; text-decoration: none; padding: 6px; }
.link:hover { color: #fff; }