/* ============================================================================
   Neuron HQ — Premium Brand Spine  (brand.css)
   ----------------------------------------------------------------------------
   Link this AFTER each page's existing inline <style>. It overrides the legacy
   "rainbow" palette to a disciplined, authoritative premium system and adds the
   premium utility classes the whole site consumes.

   Design direction: ONE authoritative primary (refined violet) + a deep indigo
   companion, ONE restrained secondary (cool cyan, used sparingly). Pink / lime /
   amber / red are DEMOTED to semantic state colors only — never decoration.
   Editorial-premium type (large Cormorant serif display + Space Grotesk body).
   Deep near-black indigo base, generous intentional spacing, restrained motion
   on exponential ease-out, honoring prefers-reduced-motion.

   CSP-SAFE: no @import of external hosts; no external fonts/scripts. Pure CSS.
   ========================================================================== */

/* ----------------------------------------------------------------------------
   1. TOKENS — redefine :root to the disciplined premium palette.
   Specificity of :root here ties the inline <style>; because brand.css loads
   LATER in the cascade, these win. Kept on a single :root so it's one source.
---------------------------------------------------------------------------- */
:root{
  /* Base — deepened to a near-black indigo for authority + contrast headroom */
  --bg:#070512;            /* page base — near-black indigo */
  --bg2:#0d0a22;           /* raised base / section alt */
  --bg3:#120e2e;           /* cards / deepest raised surface */
  --ink:#f4f0ff;           /* primary text (unchanged — high contrast on bg) */
  --ink-soft:#cfc8ec;      /* secondary text — ~7.5:1 on --bg */
  --ink-mute:#9a93bf;      /* tertiary / captions — ~4.7:1 on --bg, AA */

  /* PRIMARY — refined violet, with a deep indigo companion for depth/gradients */
  --violet:#7c5cff;        /* authoritative primary */
  --violet-bright:#9b82ff; /* hover / light-on-dark accent text (>=4.5:1 on bg) */
  --violet-deep:#3a2b8c;   /* deep indigo companion — gradient anchor, glow base */
  --indigo:#1b1545;        /* darkest companion — surfaces, depth */

  /* SECONDARY — cool cyan, the ONE restrained accent (sparingly) */
  --cyan:#5ce8ff;          /* secondary accent */
  --cyan-deep:#1f6f86;     /* cyan depth anchor for gradients */

  /* Lines / surfaces */
  --line:rgba(255,255,255,.08);
  --line-soft:rgba(255,255,255,.05);
  --line-strong:rgba(255,255,255,.14);

  /* SEMANTIC STATE ONLY — these are NOT decorative. Use exclusively for
     success / warning / danger / info states (badges, validation, deltas). */
  --pink:#ff5cb4;          /* retained token name; reserved for rare emphasis */
  --state-success:#5ce8ff; /* success reads as the brand cyan, not lime */
  --state-success-ink:#aef0ff;
  --state-warning:#ffb35c; /* amber — warnings / "partial" only */
  --state-danger:#ff5c7a;  /* red — errors / "no" only */
  --state-info:#9b82ff;    /* violet-bright — informational */
  /* legacy decorative tokens re-pointed so any stray use stays on-palette */
  --lime:var(--state-success);
  --amber:var(--state-warning);
  --red:var(--state-danger);

  /* Premium spacing scale (deeper, intentional rhythm) */
  --space-2xs:.5rem; --space-xs:.75rem; --space-sm:1rem; --space-md:1.5rem;
  --space-lg:2.5rem; --space-xl:4rem; --space-2xl:6rem; --space-3xl:9rem;

  /* Radius + the one signature ease (exponential ease-out) */
  --radius:18px; --radius-lg:24px; --radius-sm:12px;
  --ease-out:cubic-bezier(.16,1,.3,1);     /* exponential-style ease-out */
  --ease-out-soft:cubic-bezier(.22,.61,.36,1);
}

/* ----------------------------------------------------------------------------
   2. BASE OVERRIDES — deepen the atmosphere; refine the body gradient field.
   Removes pink/lime decorative washes; keeps a disciplined violet→cyan field.
---------------------------------------------------------------------------- */
html,body{ background:var(--bg); color:var(--ink); }

body{
  background:
    radial-gradient(1300px 720px at 82% -12%, rgba(124,92,255,.28), transparent 60%),
    radial-gradient(1000px 640px at -8% 26%, rgba(58,43,140,.34), transparent 62%),
    radial-gradient(820px 640px at 50% 116%, rgba(92,232,255,.08), transparent 60%),
    linear-gradient(180deg,#070512 0%, #05040e 100%);
  background-attachment:fixed;
}

/* Subtle grid stays, but quieter on the deeper base */
.grid-bg{
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.025) 1px, transparent 1px);
}

/* ----------------------------------------------------------------------------
   3. GRADIENT UTILITIES — re-disciplined.
   Display gradients are now violet→white or violet→cyan. Pink is removed from
   ALL decorative gradients. Lime/amber gradients re-point to the cyan/violet
   family so any legacy markup using them stays on-brand instead of rainbow.
---------------------------------------------------------------------------- */
.grad-violet{ background:linear-gradient(135deg,var(--violet) 0%, var(--violet-deep) 100%); }
.grad-cyan{   background:linear-gradient(135deg,var(--cyan) 0%, var(--violet) 100%); }
/* legacy decorative gradients → fold into the disciplined system */
.grad-lime{   background:linear-gradient(135deg,var(--cyan) 0%, var(--violet) 100%); }
.grad-amber{  background:linear-gradient(135deg,var(--violet) 0%, var(--violet-deep) 100%); }

/* Display text gradients — violet→white and violet→cyan only (no pink) */
.grad-text{
  background:linear-gradient(120deg,#ffffff 0%, #e7deff 42%, var(--violet-bright) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.grad-text-cyan{
  background:linear-gradient(120deg,#ffffff 0%, var(--cyan) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
/* legacy lime display text → cyan→violet, keeps it premium */
.grad-text-lime{
  background:linear-gradient(120deg,var(--cyan) 0%, var(--violet-bright) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .grad-text,.grad-text-cyan,.grad-text-lime{color:#fff !important}
}

/* ----------------------------------------------------------------------------
   4. GLOW / RING — single disciplined violet glow; cyan reserved + dimmed.
   The pink/amber ring glows are folded into the violet family.
---------------------------------------------------------------------------- */
.ring-glow      { box-shadow:0 26px 70px -22px rgba(124,92,255,.50), inset 0 1px 0 rgba(255,255,255,.14); }
.ring-glow-pink { box-shadow:0 26px 70px -22px rgba(124,92,255,.50), inset 0 1px 0 rgba(255,255,255,.14); }
.ring-glow-amber{ box-shadow:0 26px 70px -22px rgba(124,92,255,.42), inset 0 1px 0 rgba(255,255,255,.14); }
.ring-glow-cyan { box-shadow:0 26px 70px -22px rgba(92,232,255,.30), inset 0 1px 0 rgba(255,255,255,.14); }

/* ----------------------------------------------------------------------------
   5. SURFACES — refined glass + a premium opaque card surface.
---------------------------------------------------------------------------- */
.glass{
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02));
  border:1px solid var(--line); backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}
.glass-strong{
  background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  border:1px solid var(--line-strong); backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);
}

/* Premium card — the default authoritative surface for content blocks */
.card-premium{
  position:relative;
  background:linear-gradient(180deg, rgba(27,21,69,.55), rgba(13,10,34,.65));
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:var(--space-lg);
  transition:transform .5s var(--ease-out), border-color .5s var(--ease-out),
             box-shadow .5s var(--ease-out);
}
/* hairline top sheen reads as crafted, not flat */
.card-premium::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.06), transparent 28%);
  -webkit-mask:linear-gradient(#000,#000);
}
.card-premium:hover{
  transform:translateY(-3px);
  border-color:var(--line-strong);
  box-shadow:0 30px 80px -34px rgba(124,92,255,.45);
}

/* Hairline divider with a soft violet center — quiet section separator */
.rule-premium{
  height:1px;border:0;
  background:linear-gradient(90deg, transparent, rgba(124,92,255,.35), transparent);
}

/* ----------------------------------------------------------------------------
   6. EDITORIAL DISPLAY TYPE — large Cormorant serif paired with Space Grotesk.
   Pair on a contrast axis: high-contrast serif display vs geometric sans body.
---------------------------------------------------------------------------- */
.display-serif{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-weight:600;
  font-size:clamp(40px, 7vw, 92px);
  line-height:1.02;
  letter-spacing:-.015em;
  overflow-wrap:break-word;
}
.display-serif-sm{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-weight:600;
  font-size:clamp(28px, 4.5vw, 56px);
  line-height:1.06;
  letter-spacing:-.01em;
}
/* serif emphasis word inside a sans headline (italic, on-accent) */
.serif-accent{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-style:italic; font-weight:600;
  color:var(--violet-bright);
}
/* premium body measure + leading */
.prose-premium{ max-width:64ch; color:var(--ink-soft); line-height:1.7; }
.prose-premium p + p{ margin-top:1.1em; }

/* ----------------------------------------------------------------------------
   7. EYEBROW / SECTION LABEL — restrained mono kicker.
---------------------------------------------------------------------------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:.55em;
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:11px; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  color:var(--violet-bright);
}
.eyebrow::before{
  content:""; width:22px; height:1px; background:var(--violet-bright); opacity:.7;
}
.section-label{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:10px; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-mute);
}

/* ----------------------------------------------------------------------------
   8. PREMIUM BUTTONS — subtle press, exponential ease-out, no bounce.
---------------------------------------------------------------------------- */
.btn{ transition:transform .35s var(--ease-out), box-shadow .35s var(--ease-out), background .3s var(--ease-out); }
.btn:hover{ transform:translateY(-1px); }
.btn:active{ transform:translateY(0) scale(.985); }

/* Primary CTA — authoritative violet with a deep indigo floor */
.btn-premium{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  gap:.5em; padding:.95rem 1.6rem; border-radius:14px;
  font-family:'Space Grotesk',ui-sans-serif,system-ui,sans-serif;
  font-weight:600; font-size:.95rem; color:#fff; cursor:pointer; border:0;
  background:linear-gradient(135deg, var(--violet) 0%, var(--violet-deep) 100%);
  box-shadow:0 14px 36px -14px rgba(124,92,255,.65), inset 0 1px 0 rgba(255,255,255,.22);
  transition:transform .35s var(--ease-out), box-shadow .35s var(--ease-out), filter .3s var(--ease-out);
}
.btn-premium:hover{ transform:translateY(-2px); box-shadow:0 22px 50px -16px rgba(124,92,255,.7), inset 0 1px 0 rgba(255,255,255,.28); filter:brightness(1.04); }
.btn-premium:active{ transform:translateY(0) scale(.985); }

/* Secondary / ghost CTA — quiet, hairline, for the application-style funnel */
.btn-ghost{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  padding:.95rem 1.6rem; border-radius:14px;
  font-family:'Space Grotesk',ui-sans-serif,system-ui,sans-serif;
  font-weight:600; font-size:.95rem; color:var(--ink);
  background:rgba(255,255,255,.03); border:1px solid var(--line-strong);
  transition:transform .35s var(--ease-out), border-color .3s var(--ease-out), background .3s var(--ease-out);
}
.btn-ghost:hover{ transform:translateY(-2px); border-color:rgba(124,92,255,.5); background:rgba(124,92,255,.08); }
.btn-ghost:active{ transform:translateY(0) scale(.985); }

/* ----------------------------------------------------------------------------
   9. NAV — refine link contrast + a primary-link treatment for "AI Agents".
---------------------------------------------------------------------------- */
.nav-link{ font-size:14px; color:var(--ink-soft); transition:color .25s var(--ease-out); }
.nav-link:hover{ color:#fff; }
/* the one promoted nav item (AI Agents) reads as the primary destination */
.nav-link-primary{
  font-size:14px; font-weight:600; color:var(--violet-bright);
  transition:color .25s var(--ease-out);
}
.nav-link-primary:hover{ color:#fff; }

/* Brand monogram — the neuron-"N" mark next to the "Neuron HQ" wordmark (icon.svg) */
.brand-dot{
  width:24px;height:24px;border-radius:7px;flex-shrink:0;
  background:url("/icon.svg") center/contain no-repeat;
  box-shadow:0 8px 20px -10px rgba(124,92,255,.65);
}

/* ----------------------------------------------------------------------------
   10. SEMANTIC STATE HELPERS — the ONLY sanctioned use of pink/amber/red.
---------------------------------------------------------------------------- */
.state-success{ color:var(--state-success-ink); }
.state-warning{ color:var(--state-warning); }
.state-danger{  color:var(--state-danger); }
.badge{
  display:inline-flex;align-items:center;gap:.4em;
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:11px;font-weight:600;letter-spacing:.04em;
  padding:.3em .7em;border-radius:999px;border:1px solid var(--line-strong);
  background:rgba(124,92,255,.10); color:var(--violet-bright);
}
.badge-success{ background:rgba(92,232,255,.10); color:var(--state-success-ink); border-color:rgba(92,232,255,.3); }
.badge-warning{ background:rgba(255,179,92,.10); color:var(--state-warning); border-color:rgba(255,179,92,.3); }
.badge-danger { background:rgba(255,92,122,.10); color:var(--state-danger);  border-color:rgba(255,92,122,.3); }
/* comparison-table state ink (legacy .y/.n/.p re-disciplined) */
.y{ color:var(--state-success-ink); font-weight:700; }
.p{ color:var(--state-warning); }
.n{ color:var(--state-danger); }

/* ----------------------------------------------------------------------------
   11. MOTION HERO — CSS-only aurora/mesh background (no external libs).
   Drop <div class="aurora"><span></span><span></span><span></span></div>
   as the first child of a `position:relative` hero section.
---------------------------------------------------------------------------- */
.aurora{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0;
         -webkit-mask:radial-gradient(120% 100% at 50% 0%, #000 55%, transparent 100%);
         mask:radial-gradient(120% 100% at 50% 0%, #000 55%, transparent 100%); }
.aurora span{ position:absolute; display:block; border-radius:50%; filter:blur(70px); opacity:.55;
              will-change:transform; mix-blend-mode:screen; }
.aurora span:nth-child(1){ width:48vw;height:48vw;left:-6vw;top:-12vw;
  background:radial-gradient(circle, rgba(124,92,255,.85), transparent 65%);
  animation:aurora-a 22s var(--ease-out-soft) infinite alternate; }
.aurora span:nth-child(2){ width:42vw;height:42vw;right:-8vw;top:-6vw;
  background:radial-gradient(circle, rgba(58,43,140,.9), transparent 65%);
  animation:aurora-b 26s var(--ease-out-soft) infinite alternate; }
.aurora span:nth-child(3){ width:36vw;height:36vw;left:34vw;top:6vw;
  background:radial-gradient(circle, rgba(92,232,255,.35), transparent 65%);
  animation:aurora-c 30s var(--ease-out-soft) infinite alternate; }
@keyframes aurora-a{ 0%{transform:translate3d(0,0,0) scale(1)} 100%{transform:translate3d(8vw,4vw,0) scale(1.15)} }
@keyframes aurora-b{ 0%{transform:translate3d(0,0,0) scale(1)} 100%{transform:translate3d(-6vw,6vw,0) scale(1.1)} }
@keyframes aurora-c{ 0%{transform:translate3d(0,0,0) scale(1)} 100%{transform:translate3d(-4vw,-3vw,0) scale(1.2)} }

/* a quieter conic "mesh" alternative for inner sections */
.mesh-soft{ position:absolute; inset:0; pointer-events:none; z-index:0; opacity:.5;
  background:
    radial-gradient(40% 50% at 20% 20%, rgba(124,92,255,.22), transparent 70%),
    radial-gradient(40% 50% at 80% 30%, rgba(92,232,255,.10), transparent 70%),
    radial-gradient(50% 60% at 50% 100%, rgba(58,43,140,.3), transparent 70%); }

/* keep hero content above the motion layer */
.hero-content{ position:relative; z-index:1; }

/* ----------------------------------------------------------------------------
   12. FOCUS RINGS — premium, accessible, keyboard-only.
---------------------------------------------------------------------------- */
/* Skip link (and any .sr-only that gains focus) reveals on keyboard focus
   so keyboard users can see + use "Skip to main content" (WCAG 2.4.7). */
.sr-only:focus,.sr-only:focus-within{
  position:fixed;top:8px;left:8px;width:auto;height:auto;
  clip:auto;clip-path:none;margin:0;overflow:visible;white-space:normal;
  padding:10px 16px;background:#fff;color:#000;border-radius:8px;
  z-index:9999;font-weight:600;
}
:where(a,button,input,textarea,select,[tabindex]):focus-visible{
  outline:2px solid var(--violet-bright);
  outline-offset:3px;
  border-radius:6px;
}
.focus-ring:focus-visible{
  outline:2px solid var(--cyan);
  outline-offset:3px;
}

/* ----------------------------------------------------------------------------
   13. UTILITY HELPERS — spacing rhythm + thin-line list marks (no rainbow).
---------------------------------------------------------------------------- */
.section-pad{ padding-top:var(--space-2xl); padding-bottom:var(--space-2xl); }
.stack-lg > * + *{ margin-top:var(--space-md); }
.lead{ font-size:clamp(18px,2.2vw,22px); line-height:1.55; color:var(--ink-soft); }
.tick{ color:var(--violet-bright); } /* replaces colored ▸/✓ marks */

/* ----------------------------------------------------------------------------
   14. REDUCED MOTION — disable all decorative motion; keep content visible.
---------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .aurora span{ animation:none !important; }
  .reveal,.reveal-stagger > *{ opacity:1 !important; transform:none !important; }
  .floaty,.marquee-track,.shine::after{ animation:none !important; }
}

/* ----------------------------------------------------------------------------
   15. LIGHT THEME — high-contrast opt-in (data-theme="light" on <html>).
   Toggled by /theme.js. Every text/UI pair targets WCAG AA on the light base.
   Re-tokens the palette AND overrides the hardcoded white Tailwind utilities the
   pages use (text-white/*, bg-white/*, border-white/*), which don't flip on their own.
---------------------------------------------------------------------------- */
:root[data-theme="light"]{
  --bg:#f5f4fb;            /* near-white, faint violet */
  --bg2:#ecdaf7; --bg2:#ebe8f6;
  --bg3:#ffffff;
  --ink:#16132e;          /* ~15:1 on --bg */
  --ink-soft:#3c3661;     /* ~8.6:1 — AA for body */
  --ink-mute:#574f7d;     /* ~5.3:1 — AA for small text */
  --violet:#7c5cff;       /* fills/buttons (white text on it = AA) */
  --violet-bright:#5a3ee0;/* accent TEXT on light — ~4.8:1 AA */
  --violet-deep:#3a2b8c; --indigo:#1b1545;
  --cyan:#0c6e85;         /* cyan as TEXT on light — 5.36:1 AA */
  --cyan-deep:#1f6f86;
  --line:rgba(22,19,46,.12); --line-soft:rgba(22,19,46,.07); --line-strong:rgba(22,19,46,.20);
  --state-success-ink:#0c6e85; --state-warning:#9a5b00; --state-danger:#c01d3a; --state-info:#5a3ee0;
}
:root[data-theme="light"] body{
  background:
    radial-gradient(1300px 720px at 82% -12%, rgba(124,92,255,.14), transparent 60%),
    radial-gradient(1000px 640px at -8% 26%, rgba(124,92,255,.08), transparent 62%),
    linear-gradient(180deg,#f7f6fc 0%, #efedf8 100%);
}
:root[data-theme="light"] .grid-bg{
  background-image:
    linear-gradient(rgba(22,19,46,.05) 1px, transparent 1px),
    linear-gradient(90deg,rgba(22,19,46,.05) 1px, transparent 1px);
}
/* surfaces → light cards with definition (shadow instead of dark glow) */
:root[data-theme="light"] .glass{ background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.7)); border:1px solid var(--line); box-shadow:0 2px 10px rgba(22,19,46,.05); }
:root[data-theme="light"] .glass-strong{ background:rgba(255,255,255,.92); border:1px solid var(--line-strong); box-shadow:0 8px 30px rgba(22,19,46,.08); }
:root[data-theme="light"] .card-premium{ background:linear-gradient(180deg,#ffffff,#f4f2fc); border:1px solid var(--line); box-shadow:0 6px 24px -12px rgba(22,19,46,.18); }
:root[data-theme="light"] .card-premium:hover{ border-color:var(--line-strong); box-shadow:0 18px 50px -22px rgba(124,92,255,.4); }
:root[data-theme="light"] .ring-glow{ box-shadow:0 18px 50px -24px rgba(124,92,255,.4), inset 0 1px 0 rgba(255,255,255,.6); }
:root[data-theme="light"] .site-header{ background:rgba(247,246,252,.86) !important; border-bottom:1px solid var(--line); }
/* display gradients → dark on light so they're visible */
:root[data-theme="light"] .grad-text{ background:linear-gradient(120deg,#2a1f6b 0%, #5a3ee0 100%); -webkit-background-clip:text;background-clip:text;color:transparent; }
:root[data-theme="light"] .grad-text-cyan{ background:linear-gradient(120deg,#15123a 0%, #0f7d97 100%); -webkit-background-clip:text;background-clip:text;color:transparent; }
:root[data-theme="light"] .btn-ghost{ color:var(--ink); background:rgba(22,19,46,.03); border:1px solid var(--line-strong); }
:root[data-theme="light"] .btn-ghost:hover{ background:rgba(124,92,255,.08); border-color:rgba(124,92,255,.5); }
:root[data-theme="light"] .badge{ background:rgba(124,92,255,.10); color:#5a3ee0; border-color:rgba(124,92,255,.28); }
/* CTA fill: the light --violet stop (#7c5cff) gives white only 4.35:1; darken so white text clears AA 4.5:1 (WCAG 1.4.3) */
:root[data-theme="light"] .btn-premium{ background:linear-gradient(135deg,#6a49f0 0%, var(--violet-deep) 100%); }
/* Tailwind hardcoded white/black utilities — remap for the light base (AA) */
:root[data-theme="light"] .text-white{ color:var(--ink) !important; }
:root[data-theme="light"] [class*="text-white/"]{ color:var(--ink-soft) !important; }
:root[data-theme="light"] [class*="bg-white/"]{ background-color:rgba(22,19,46,.04) !important; }
:root[data-theme="light"] [class*="border-white/"]{ border-color:var(--line) !important; }
/* theme toggle control */
.theme-toggle{ position:fixed; left:18px; bottom:18px; z-index:60;
  display:inline-grid; place-items:center; width:42px; height:42px; border-radius:14px;
  border:1px solid var(--line-strong); background:var(--bg3); color:var(--ink-soft);
  box-shadow:0 8px 26px -10px rgba(0,0,0,.5); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  cursor:pointer; transition:color .25s var(--ease-out), background .25s var(--ease-out), border-color .25s, transform .25s var(--ease-out); }
.theme-toggle:hover{ color:var(--ink); border-color:rgba(124,92,255,.5); background:rgba(124,92,255,.10); transform:translateY(-2px); }
.theme-toggle:hover{ color:var(--ink); border-color:rgba(124,92,255,.5); background:rgba(124,92,255,.08); }
.theme-toggle .i-sun{ display:none; } .theme-toggle .i-moon{ display:block; }
:root[data-theme="light"] .theme-toggle .i-sun{ display:block; } :root[data-theme="light"] .theme-toggle .i-moon{ display:none; }

/* ===== Resources nav dropdown (native <details> disclosure — keyboard-accessible, no JS) ===== */
.nav-dd{ display:inline-block; }
.nav-dd>summary{ list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:5px; }
.nav-dd>summary::-webkit-details-marker{ display:none; }
.nav-dd>summary::marker{ content:""; }
.nav-dd[open]>summary{ color:#fff; }
.nav-dd-menu a{ color:rgba(255,255,255,.86); }
.nav-dd-menu a:hover{ background:rgba(255,255,255,.07); color:#fff; }
:root[data-theme="light"] .nav-dd-menu{ background:#fff !important; border-color:var(--border-strong) !important; box-shadow:0 16px 34px -12px rgba(16,18,24,.18) !important; }
:root[data-theme="light"] .nav-dd-menu a{ color:var(--ink-soft) !important; }
:root[data-theme="light"] .nav-dd-menu a:hover{ background:var(--surface-3) !important; color:var(--ink) !important; }

/* =====================================================================
   CONSOLIDATED PRIMARY NAV (mobile-first, 2026-07-04)
   3 grouped dropdowns + CTA on desktop; logo + hamburger on mobile.
   One markup block shared across every page; active state set by the nav's
   inline script via location.pathname. Theme-aware via --nav-strong so the
   active/open/hover trigger flips colour instead of hardcoding white.
   ===================================================================== */
.site-nav{ position:relative; z-index:40; --nav-strong:#fff; }
:root[data-theme="light"] .site-nav{ --nav-strong:var(--indigo,#1b1545); }

/* --- desktop: top-level dropdown triggers (base colour is theme-aware) --- */
.nav-top{
  list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:6px;
  font-size:14px; font-weight:500; color:var(--ink-soft,rgba(244,240,255,.7));
  padding:8px 12px; border-radius:10px; white-space:nowrap;
  transition:color .2s var(--ease-out,ease), background .2s var(--ease-out,ease);
}
.nav-top::-webkit-details-marker{ display:none; }
.nav-top::marker{ content:""; }
/* strong states use one variable so light + dark both read correctly.
   summary.nav-top keeps specificity above the legacy .nav-dd[open]>summary rule. */
.nav-top:hover,
.nav-dd[open] > summary.nav-top,
.nav-dd[data-active] > summary.nav-top{ color:var(--nav-strong); background:rgba(127,127,140,.10); }
.nav-dd[data-active] > .nav-top{ position:relative; }
.nav-dd[data-active] > .nav-top::after{
  content:""; position:absolute; left:12px; right:12px; bottom:2px; height:2px;
  border-radius:2px; background:linear-gradient(90deg,var(--violet,#7c5cff),var(--pink,#ff5cb4));
}
.nav-top:focus-visible{ outline:2px solid var(--violet-bright,#9b82ff); outline-offset:2px; }
.nav-caret{ font-size:10px; opacity:.65; transition:transform .2s var(--ease-out,ease); }
.nav-dd[open] .nav-caret{ transform:rotate(180deg); }

/* --- dropdown panel --- */
.nav-dd{ position:relative; display:inline-block; }
.nav-dd-menu{
  position:absolute; top:100%; left:0; margin-top:8px; min-width:248px;
  background:#140f30; border:1px solid rgba(255,255,255,.12); border-radius:14px;
  padding:8px; z-index:70; box-shadow:0 20px 44px -14px rgba(0,0,0,.75);
  display:flex; flex-direction:column; gap:2px;
}
.nav-item{
  display:block; padding:9px 12px; border-radius:10px; text-decoration:none;
  font-size:14px; color:rgba(255,255,255,.86); line-height:1.35;
}
.nav-item b{ display:block; font-weight:600; color:#fff; font-size:14px; }
.nav-item span{ display:block; font-size:12px; color:var(--ink-mute,rgba(255,255,255,.5)); margin-top:1px; }
.nav-item:hover, .nav-item:focus-visible{ background:rgba(124,92,255,.16); color:#fff; outline:none; }
.nav-item[aria-current="page"]{ background:rgba(124,92,255,.16); }
.nav-item[aria-current="page"] b{ color:#cbb8ff; }

/* --- mobile slide-down menu groups --- */
.m-group{ padding:12px 10px 3px; font-size:11px; text-transform:uppercase; letter-spacing:.09em; color:var(--ink-mute,rgba(255,255,255,.45)); }
.m-link{ display:block; padding:11px 12px; border-radius:10px; font-size:15px; color:var(--ink-soft,rgba(244,240,255,.82)); text-decoration:none; }
.m-link b{ font-weight:600; color:var(--nav-strong); }
.m-link:hover, .m-link[aria-current="page"]{ background:rgba(127,127,140,.12); color:var(--nav-strong); }

/* --- light theme: only the panel + items need explicit remaps --- */
:root[data-theme="light"] .nav-dd-menu{ background:#fff; border-color:var(--line-strong); box-shadow:0 20px 44px -16px rgba(22,19,46,.22); }
:root[data-theme="light"] .nav-item{ color:var(--ink-soft); }
:root[data-theme="light"] .nav-item b{ color:var(--ink); }
:root[data-theme="light"] .nav-item span{ color:var(--ink-mute); }
:root[data-theme="light"] .nav-item:hover, :root[data-theme="light"] .nav-item[aria-current="page"]{ background:rgba(124,92,255,.12); color:var(--ink); }
:root[data-theme="light"] .nav-item[aria-current="page"] b{ color:var(--violet-bright); }