/* ============================================================================
   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; }

/* Wordmark dot — small brand mark accent next to "Neuron HQ" */
.brand-dot{
  width:9px;height:9px;border-radius:999px;flex-shrink:0;
  background:radial-gradient(circle at 30% 30%, #fff, var(--violet) 55%, var(--violet-deep));
  box-shadow:0 0 14px rgba(124,92,255,.7);
}

/* ----------------------------------------------------------------------------
   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.
---------------------------------------------------------------------------- */
: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; }
}