:root {
      --bg-0: #05090f;
      --bg-1: #0a1320;
      --bg-2: #0d2236;
      --bg-3: #142a42;
      --surface: rgba(8, 16, 26, 0.88);
      --surface-2: rgba(10, 20, 34, 0.78);
      --stroke: rgba(110, 160, 220, 0.22);
      --ink: #f2f6ff;
      --ink-dim: rgba(242, 246, 255, 0.72);
      --ink-muted: rgba(242, 246, 255, 0.46);
      --accent: #4cc6ff;
      --accent-2: #2f8bff;
      --ok: #43d19d;
      --warn: #f2c36f;
      --bad: #ff7e8b;
      --shadow: rgba(2, 6, 14, 0.6);
    }

    * { box-sizing: border-box; }
    body {
      margin: 0;
      min-height: 100vh;
      font-family: "Space Grotesk", "Segoe UI", sans-serif;
      color: var(--ink);
      background:
        radial-gradient(700px 520px at 12% 10%, rgba(76, 198, 255, 0.2), transparent 60%),
        radial-gradient(640px 420px at 88% 0%, rgba(47, 139, 255, 0.2), transparent 55%),
        linear-gradient(145deg, var(--bg-0) 0%, var(--bg-1) 42%, var(--bg-2) 75%, var(--bg-3) 100%);
    }

    a { color: inherit; text-decoration: none; }
    button, input, textarea, select { font: inherit; }
    h1, h2, h3, p { margin: 0; }

    .bg {
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 0;
    }

    .bg::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image:
        radial-gradient(420px 240px at 14% 22%, rgba(76, 198, 255, 0.22), transparent 70%),
        radial-gradient(380px 220px at 86% 18%, rgba(27, 93, 214, 0.22), transparent 70%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.05), transparent 40%),
        repeating-linear-gradient(120deg, rgba(255, 255, 255, 0.03) 0px, rgba(255, 255, 255, 0.03) 1px, transparent 1px, transparent 6px);
      opacity: 0.82;
    }

    .top {
      position: sticky;
      top: 0;
      z-index: 20;
      display: grid;
      grid-template-columns: auto 1fr auto;
      align-items: center;
      gap: 20px;
      padding: 20px 24px;
      background: rgba(4, 9, 16, 0.82);
      border-bottom: 1px solid rgba(255, 255, 255, 0.06);
      backdrop-filter: blur(18px);
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 12px;
      min-width: 0;
    }

    .brand-mark {
      width: 42px;
      height: 42px;
      border-radius: 14px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-weight: 800;
      color: #06101b;
      background: linear-gradient(135deg, #8dd6ff 0%, #4ba0ff 100%);
      box-shadow: 0 16px 30px rgba(28, 95, 183, 0.36);
    }

    .brand-copy strong {
      display: block;
      font-size: 14px;
      line-height: 1.15;
    }

    .brand-copy span {
      display: block;
      margin-top: 4px;
      font-size: 12px;
      color: var(--ink-dim);
    }

    .tabs {
      justify-self: center;
      display: inline-flex;
      gap: 6px;
      flex-wrap: wrap;
      padding: 6px;
      border-radius: 999px;
      border: 1px solid rgba(120, 170, 230, 0.16);
      background: rgba(10, 20, 32, 0.72);
    }

    .tab {
      padding: 10px 14px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--ink-dim);
    }

    .tab.is-active {
      color: var(--ink);
      background: linear-gradient(135deg, rgba(76, 198, 255, 0.24), rgba(47, 139, 255, 0.18));
      box-shadow: inset 0 0 0 1px rgba(76, 198, 255, 0.35);
    }

    .discord-link {
      justify-self: end;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 10px 14px;
      border-radius: 999px;
      border: 1px solid rgba(120, 170, 230, 0.16);
      background: rgba(10, 20, 32, 0.72);
      color: var(--ink);
      font-size: 13px;
      font-weight: 700;
      white-space: nowrap;
    }

    .discord-glyph {
      width: 28px;
      height: 28px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: rgba(88, 101, 242, 0.22);
      border: 1px solid rgba(88, 101, 242, 0.38);
      font-size: 12px;
      font-weight: 800;
    }

    .wrap {
      position: relative;
      z-index: 1;
      max-width: 1240px;
      margin: 0 auto;
      padding: 28px 24px 56px;
      display: grid;
      gap: 18px;
    }

    .hero {
      display: grid;
      grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
      gap: 16px;
      align-items: start;
    }

    .card {
      border-radius: 22px;
      border: 1px solid var(--stroke);
      background: var(--surface);
      box-shadow: 0 22px 48px var(--shadow);
      padding: 22px;
    }

    .hero-copy,
    .hero-side,
    .grid-2,
    .grid-3,
    .fact-grid,
    .check-grid,
    .timeline,
    .experimental-grid {
      display: grid;
      gap: 12px;
    }

    .kicker {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 7px 12px;
      border-radius: 999px;
      border: 1px solid rgba(76, 198, 255, 0.22);
      background: rgba(76, 198, 255, 0.1);
      color: #d5ebff;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    h1 {
      font-size: clamp(34px, 5vw, 56px);
      line-height: 1.02;
      letter-spacing: -0.04em;
    }

    .lede,
    .muted,
    .check-card p,
    .timeline-card p,
    .exp-card p {
      font-size: 14px;
      line-height: 1.65;
      color: var(--ink-dim);
    }

    .hero-actions,
    .row {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      align-items: center;
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 12px 16px;
      border-radius: 14px;
      border: 1px solid transparent;
      background: linear-gradient(135deg, var(--accent), var(--accent-2));
      color: #04131f;
      font-weight: 800;
      cursor: pointer;
      box-shadow: 0 18px 36px rgba(29, 98, 170, 0.45);
    }

    .btn.ghost {
      background: rgba(8, 16, 28, 0.7);
      color: var(--ink);
      border-color: rgba(120, 170, 230, 0.16);
      box-shadow: none;
    }

    .fact-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .fact-box,
    .check-card,
    .timeline-card,
    .exp-card {
      border-radius: 16px;
      border: 1px solid rgba(120, 170, 230, 0.14);
      background: rgba(8, 16, 28, 0.72);
      padding: 14px;
    }

    .fact-box span,
    .label {
      display: block;
      font-size: 11px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--ink-muted);
    }

    .fact-box strong {
      display: block;
      margin-top: 8px;
      font-size: 18px;
      color: var(--ink);
    }

    .label {
      margin-bottom: 8px;
    }

    .grid-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      align-items: start;
    }

    .grid-3,
    .check-grid,
    .experimental-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .section-head {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 14px;
      margin-bottom: 12px;
    }

    .section-head h2 {
      font-size: 24px;
      letter-spacing: -0.03em;
    }

    .check-card strong,
    .timeline-card strong,
    .exp-card strong {
      display: block;
      margin-bottom: 6px;
      font-size: 15px;
      color: var(--ink);
    }

    .timeline {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .status-line {
      font-size: 13px;
      color: var(--ink-dim);
    }

    .status-line[data-state="ok"] { color: #8cf0cb; }
    .status-line[data-state="error"] { color: #ff9797; }
    .status-line[data-state="loading"] { color: #f7c26a; }

    .form-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }

    .field {
      display: grid;
      gap: 6px;
    }

    .field.span-2 {
      grid-column: span 2;
    }

    .field label {
      font-size: 11px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--ink-muted);
    }

    input,
    textarea,
    select {
      width: 100%;
      border-radius: 14px;
      border: 1px solid rgba(120, 170, 230, 0.18);
      background: rgba(6, 14, 24, 0.88);
      color: var(--ink);
      padding: 12px 14px;
      outline: none;
    }

    textarea {
      min-height: 140px;
      resize: vertical;
    }

    .checklist {
      display: grid;
      gap: 10px;
      margin-top: 6px;
    }

    .checkbox-row {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      padding: 12px 14px;
      border-radius: 14px;
      border: 1px solid rgba(120, 170, 230, 0.14);
      background: rgba(8, 16, 28, 0.62);
    }

    .checkbox-row input {
      width: 16px;
      height: 16px;
      margin-top: 3px;
      padding: 0;
    }

    .checkbox-row strong {
      display: block;
      margin-bottom: 4px;
      font-size: 14px;
    }

    .checkbox-row span {
      display: block;
      font-size: 12px;
      line-height: 1.55;
      color: var(--ink-dim);
    }

    .sub {
      font-size: 12px;
      color: var(--ink-dim);
      line-height: 1.6;
    }

    @media (max-width: 1100px) {
      .hero,
      .grid-2,
      .timeline,
      .fact-grid,
      .check-grid,
      .experimental-grid,
      .form-grid {
        grid-template-columns: 1fr;
      }

      .field.span-2 {
        grid-column: auto;
      }
    }

    @media (max-width: 760px) {
      .top {
        grid-template-columns: 1fr;
        justify-items: start;
      }

      .tabs {
        justify-self: start;
      }

      .discord-link {
        justify-self: start;
      }

      .wrap {
        padding: 22px 16px 44px;
      }

      .card {
        padding: 18px;
        border-radius: 18px;
      }

      .btn,
      input,
      textarea,
      select {
        min-height: 44px;
      }
    }

.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }