/* ── Tokens ─────────────────────────────────────────────── */
:root {
  --bg:           #090b12;
  --bg-panel:     #0d1020;
  --bg-card:      #0f1226;
  --bg-chrome:    #050710;
  --fg:           #c8d0e8;
  --fg-dim:       #8892b0;
  --fg-bright:    #eef2ff;
  --accent:       #fbbf24;
  --accent-hover: #fcd34d;
  --accent-dim:   rgba(251,191,36,.12);
  --green:        #34d399;
  --blue:         #60a5fa;
  --purple:       #a78bfa;
  --border:       #1e2538;
  --border-accent:#fbbf2430;
  --c-str:        #86efac;
  --font:         "Space Mono", "IBM Plex Mono", monospace;
  --glow:         0 0 20px rgba(251,191,36,.25), 0 0 40px rgba(251,191,36,.08);
  --glow-sm:      0 0 10px rgba(251,191,36,.2);
  --max-w:        960px;
}

/* ── Light theme (must come AFTER :root to win cascade) ─── */
[data-theme="light"] {
  --bg:           #f8f6f0;
  --bg-panel:     #f2efe8;
  --bg-card:      #edeae1;
  --bg-chrome:    #e9e6dc;
  --fg:           #2c2a26;
  --fg-dim:       #57534e;
  --fg-bright:    #1c1917;
  --accent:       #4f46e5;
  --accent-hover: #4338ca;
  --accent-dim:   rgba(79,70,229,.1);
  --green:        #059669;
  --blue:         #1d4ed8;
  --purple:       #6d28d9;
  --border:       #cdc9be;
  --border-accent:#4f46e540;
  --c-str:        #15803d;
  --glow:         none;
  --glow-sm:      none;
}
[data-theme="light"] body::after { display: none; }
[data-theme="light"] nav { background: rgba(242,239,232,.92); }

/* ── Reset ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-family: var(--font); font-size: 14px; line-height: 1.65; -webkit-font-smoothing: antialiased; background: var(--bg); color: var(--fg); }
body { min-height: 100vh; }
a { color: inherit; text-decoration: none; }

/* ── Scanline overlay ───────────────────────────────────── */
body::after {
  content: "";
  position: fixed; inset: 0;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.025) 0px, rgba(0,0,0,.025) 1px, transparent 1px, transparent 2px);
  pointer-events: none; z-index: 9999;
}

/* ── Nav ─────────────────────────────────────────────────── */
nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(5,7,16,.88);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.nav-inner {
  max-width: var(--max-w); margin: 0 auto;
  padding: 0 24px;
  height: 52px;
  display: flex; align-items: center; justify-content: space-between;
}
.nav-logo {
  font-size: 13px; font-weight: 700; letter-spacing: .08em;
  color: var(--accent); text-shadow: var(--glow-sm);
  display: flex; align-items: center; gap: 8px;
}
.nav-logo-hex { font-size: 16px; opacity: .8; }

/* Desktop nav */
.nav-desktop { display: flex; align-items: center; gap: 4px; }
.nav-link {
  font-size: 11px; letter-spacing: .06em; color: var(--fg-dim);
  padding: 6px 12px; border-radius: 2px; transition: color .15s;
}
.nav-link:hover { color: var(--fg-bright); }

/* Dropdown trigger */
.nav-dd { position: relative; }
.nav-dd-btn {
  display: flex; align-items: center; gap: 5px;
  font-family: var(--font); font-size: 11px; letter-spacing: .06em;
  color: var(--fg-dim); background: none; border: none;
  padding: 6px 12px; border-radius: 2px; cursor: pointer;
  transition: color .15s;
}
.nav-dd-btn:hover, .nav-dd.open .nav-dd-btn { color: var(--fg-bright); }
.nav-caret {
  font-size: 8px; opacity: .5; display: inline-block;
  transition: transform .2s, opacity .2s;
}
.nav-dd.open .nav-caret { transform: rotate(180deg); opacity: .9; }

/* Megamenu panel */
.megamenu {
  position: fixed; top: 52px;
  background: var(--bg-panel);
  border: 1px solid var(--border); border-radius: 4px;
  padding: 8px;
  display: flex; gap: 0;
  opacity: 0; pointer-events: none;
  transform: translateY(-6px);
  transition: opacity .16s, transform .16s;
  box-shadow: 0 20px 60px rgba(0,0,0,.7), 0 0 0 1px var(--border);
  z-index: 500;
}
.nav-dd.open .megamenu { opacity: 1; pointer-events: all; transform: translateY(0); }

/* Panel columns */
.mm-col { display: flex; flex-direction: column; min-width: 200px; padding: 8px; }
.mm-divider { width: 1px; background: var(--border); margin: 8px 4px; flex-shrink: 0; }
.mm-label {
  font-size: 9px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent); opacity: .7;
  padding: 4px 10px 10px;
}
.mm-item {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 9px 10px; border-radius: 3px; color: inherit; text-decoration: none;
  transition: background .12s;
}
.mm-item:hover { background: var(--bg-chrome); }
.mm-icon {
  font-size: 15px; line-height: 1.5; width: 18px;
  text-align: center; flex-shrink: 0; opacity: .8;
}
.mm-title {
  font-size: 11px; font-weight: 700; letter-spacing: .02em;
  color: var(--fg-bright); margin-bottom: 2px;
  transition: color .12s;
}
.mm-item:hover .mm-title { color: var(--accent); }
.mm-desc { font-size: 10px; color: var(--fg-dim); line-height: 1.5; }
.mm-sep { height: 1px; background: var(--border); margin: 6px 10px; }

/* Mobile drawer — hidden on desktop */
.nav-drawer { display: none; }

/* Right-side nav controls */
.nav-right { display: flex; align-items: center; gap: 10px; }
.nav-hamburger {
  display: none;
  background: none; border: 1px solid var(--border);
  color: var(--fg-dim); font-size: 15px; line-height: 1;
  padding: 5px 9px; border-radius: 2px; cursor: pointer;
  font-family: var(--font); transition: border-color .15s, color .15s;
}
.nav-hamburger:hover { border-color: var(--fg-dim); color: var(--fg-bright); }
a.nav-cta {
  font-size: 11px; font-weight: 700; letter-spacing: .08em;
  background: var(--accent); color: #000;
  padding: 6px 14px; border-radius: 2px;
  transition: background .15s, box-shadow .15s;
}
a.nav-cta:hover { background: var(--accent-hover); box-shadow: var(--glow-sm); color: #000; }
.nav-signin {
  font-size: 11px; letter-spacing: .06em; color: var(--fg-dim);
  transition: color .15s;
}
.nav-signin:hover { color: var(--fg-bright); }
.btn-theme-nav {
  background: none; border: 1px solid var(--border); border-radius: 2px;
  padding: 4px 8px; font-size: .75rem; color: var(--fg-dim);
  cursor: pointer; font-family: var(--font); transition: .15s; line-height: 1;
}
.btn-theme-nav:hover { border-color: var(--accent); color: var(--accent); }

/* ── Layout ──────────────────────────────────────────────── */
.container { max-width: var(--max-w); margin: 0 auto; padding: 0 24px; }

/* ── Buttons ─────────────────────────────────────────────── */
.btn-primary {
  font-family: var(--font); font-size: 11px; font-weight: 700;
  letter-spacing: .08em; background: var(--accent); color: #000;
  padding: 10px 22px; border-radius: 2px; border: none; cursor: pointer;
  transition: background .15s, box-shadow .15s; display: inline-block;
}
.btn-primary:hover { background: var(--accent-hover); box-shadow: var(--glow); }
.btn-secondary {
  font-family: var(--font); font-size: 11px; letter-spacing: .08em;
  color: var(--fg-dim); background: transparent;
  padding: 10px 22px; border-radius: 2px;
  border: 1px solid var(--border); display: inline-block;
  cursor: pointer; transition: border-color .15s, color .15s;
}
.btn-secondary:hover { border-color: var(--fg-dim); color: var(--fg-bright); }

/* ── Section ─────────────────────────────────────────────── */
section { padding: 80px 24px; }
.section-inner { max-width: var(--max-w); margin: 0 auto; }
.section-label {
  font-size: 10px; letter-spacing: .14em; color: var(--accent);
  margin-bottom: 12px; opacity: .85;
}
.section-title {
  font-size: clamp(20px, 3vw, 28px); font-weight: 700;
  color: var(--fg-bright); margin-bottom: 14px; letter-spacing: -.01em;
}
.section-sub {
  font-size: 13px; color: var(--fg-dim); line-height: 1.8;
  max-width: 560px; margin-bottom: 52px;
}

/* ── Footer ──────────────────────────────────────────────── */
footer {
  border-top: 1px solid var(--border);
  padding: 32px 24px;
}
.footer-inner {
  max-width: var(--max-w); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 16px;
}
.footer-logo { font-size: 11px; color: var(--accent); font-weight: 700; letter-spacing: .08em; }
.footer-links { display: flex; gap: 24px; }
.footer-links a { font-size: 11px; color: var(--fg-dim); transition: color .15s; }
.footer-links a:hover { color: var(--fg-bright); }
.footer-copy { font-size: 10px; color: var(--fg-dim); opacity: .5; }

/* ── Responsive — nav ───────────────────────────────────── */
@media (max-width: 768px) {
  .nav-desktop { display: none; }
  .nav-hamburger { display: block; }
  .nav-drawer {
    display: none; flex-direction: column;
    border-top: 1px solid var(--border);
    background: var(--bg);
  }
  .nav-drawer.open { display: flex; }
  .nav-drawer a {
    padding: 13px 24px; border-bottom: 1px solid var(--border);
    font-size: 13px; color: var(--fg-dim); letter-spacing: .05em;
  }
  .nav-drawer a:hover { background: var(--bg-panel); color: var(--fg-bright); }
  .nav-drawer .drawer-label {
    font-size: 9px; letter-spacing: .14em; text-transform: uppercase;
    color: var(--accent); opacity: .7;
    padding: 14px 24px 6px;
  }
}