/* ==========================================================================
   Ehola — Aurora Studio design system (shared across all pages)
   Dark, premium, alive. Native SF body + Unbounded display headlines.
   The HUD pill CSS is preserved verbatim from the original hero — it stays.
   ========================================================================== */

:root{
  /* brand */
  --mint:#5ef2a8; --aqua:#7ad9ff; --gold:#ffce6a;
  --blue:#2b4fd6; --teal:#1189c9; --danger:#ff6b6b;

  /* ink */
  --ink:#eef3fa; --dim:rgba(214,222,234,.70); --faint:rgba(214,222,234,.46);

  /* surfaces */
  --bg:#070b12;
  --card:rgba(255,255,255,.035);
  --card-2:rgba(255,255,255,.055);
  --hair:rgba(255,255,255,.09);
  --hair-2:rgba(255,255,255,.15);
  --glass:rgba(9,13,20,.66);

  /* gradients */
  --grad-brand:linear-gradient(105deg,var(--mint),var(--aqua) 62%);
  --grad-cta:linear-gradient(135deg,var(--mint),var(--aqua));

  /* shadows */
  --sh-cta:0 16px 40px -8px rgba(94,242,168,.42), 0 4px 14px rgba(0,0,0,.4);
  --sh-card:0 24px 60px -28px rgba(0,0,0,.85);
  --sh-lift:0 30px 70px -30px rgba(0,0,0,.9);

  /* radius */
  --r-sm:12px; --r:16px; --r-lg:22px; --r-xl:30px;

  /* type */
  --display:"Unbounded",ui-rounded,"SF Pro Rounded",-apple-system,system-ui,sans-serif;
  --font:ui-rounded,"SF Pro Rounded",-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",system-ui,sans-serif;
  --mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,monospace;

  --maxw:1120px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; overflow-x:clip}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
html,body{margin:0; max-width:100%}
body{
  font-family:var(--font); color:var(--ink); background:var(--bg);
  line-height:1.55; min-height:100vh; -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility; overflow-x:clip;
}
img,svg,video{max-width:100%}

/* --- Aurora atmosphere (fixed, behind everything) --- */
body::before{
  content:""; position:fixed; inset:-20% -10%; z-index:-2; pointer-events:none;
  background:
    radial-gradient(46% 40% at 50% -6%, rgba(94,242,168,.16), transparent 60%),
    radial-gradient(42% 38% at 88% 4%, rgba(122,217,255,.15), transparent 62%),
    radial-gradient(48% 44% at 4% 20%, rgba(43,79,214,.15), transparent 64%),
    radial-gradient(40% 40% at 84% 82%, rgba(255,206,106,.07), transparent 62%);
  animation:aurora-drift 26s ease-in-out infinite alternate;
}
@keyframes aurora-drift{
  0%{transform:translate3d(0,0,0) scale(1)}
  100%{transform:translate3d(0,-2.2%,0) scale(1.06)}
}
/* fine grain */
body::after{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion:reduce){body::before{animation:none}}

a{color:inherit}
img{max-width:100%}
::selection{background:rgba(94,242,168,.28); color:#fff}

/* --- layout --- */
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}
.wrap-narrow{max-width:860px}
.wrap-legal{max-width:820px}
section{position:relative}

/* --- site header (sticky glass) --- */
.site-header{position:sticky; top:0; z-index:50; transition:background .3s ease, border-color .3s ease, backdrop-filter .3s}
.site-header::after{content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:transparent; transition:background .3s}
.site-header.scrolled{background:var(--glass); backdrop-filter:saturate(150%) blur(16px); -webkit-backdrop-filter:saturate(150%) blur(16px)}
.site-header.scrolled::after{background:var(--hair)}
.topbar{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 0}
.brand{display:inline-flex; align-items:center; gap:11px; font-weight:800; font-size:19px; letter-spacing:-.01em; color:var(--ink); text-decoration:none}
.brand img{width:auto; height:30px; filter:drop-shadow(0 4px 14px rgba(94,242,168,.35))}
.nav{display:flex; align-items:center; gap:6px}
.nav a{font-size:14px; color:var(--dim); text-decoration:none; padding:9px 12px; border-radius:10px; transition:color .18s, background .18s}
.nav a:hover{color:var(--ink); background:rgba(255,255,255,.05)}
.nav .nav-cta{color:#04160d; background:var(--grad-cta); font-weight:750; padding:9px 16px; box-shadow:0 8px 22px -8px rgba(94,242,168,.5)}
.nav .nav-cta:hover{background:var(--grad-cta); filter:brightness(1.04)}
@media(max-width:720px){.nav a:not(.nav-cta){display:none}}

/* --- buttons --- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px; text-decoration:none;
  font-family:var(--font); font-weight:750; font-size:16px; line-height:1; padding:16px 24px; border-radius:14px;
  border:1px solid transparent; cursor:pointer; transition:transform .16s ease, box-shadow .2s ease, filter .2s, background .2s}
.btn-primary{color:#04160d; background:var(--grad-cta); box-shadow:var(--sh-cta)}
.btn-primary:hover{transform:translateY(-2px); filter:brightness(1.05); box-shadow:0 22px 50px -10px rgba(94,242,168,.5)}
.btn-ghost{color:var(--ink); background:rgba(255,255,255,.04); border-color:var(--hair-2)}
.btn-ghost:hover{transform:translateY(-2px); background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.28)}
.btn-sm{padding:12px 18px; font-size:14px; border-radius:12px}
.btn svg{flex:none}

/* --- eyebrow / badges --- */
.eyebrow{display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--aqua)}
.eyebrow::before{content:""; width:22px; height:1px; background:linear-gradient(90deg,transparent,var(--aqua))}
.badge{display:inline-flex; align-items:center; gap:8px; padding:7px 13px 7px 11px; border-radius:999px;
  background:rgba(255,255,255,.045); border:1px solid var(--hair-2); font-size:13px; color:var(--dim); font-weight:600}
.badge .dot-live{width:7px; height:7px; border-radius:50%; background:var(--mint); box-shadow:0 0 0 0 rgba(94,242,168,.7); animation:live-pulse 2s infinite}
@keyframes live-pulse{0%{box-shadow:0 0 0 0 rgba(94,242,168,.55)}70%{box-shadow:0 0 0 7px rgba(94,242,168,0)}100%{box-shadow:0 0 0 0 rgba(94,242,168,0)}}

/* --- headings / prose --- */
h1,h2,h3{letter-spacing:-.02em}
.display{font-family:var(--display); font-weight:800; letter-spacing:-.03em; line-height:1.02}
.grad{background:var(--grad-brand); -webkit-background-clip:text; background-clip:text; color:transparent}
.section-head{max-width:640px; margin:0 0 34px}
.section-head h2{font-family:var(--display); font-weight:700; font-size:clamp(28px,4.6vw,42px); line-height:1.06; margin:14px 0 12px; letter-spacing:-.03em}
.section-head p{color:var(--dim); font-size:clamp(15px,2vw,18px); margin:0}
.section-pad{padding:64px 0}
@media(max-width:640px){.section-pad{padding:46px 0}}

/* --- cards --- */
.card{position:relative; background:var(--card); border:1px solid var(--hair); border-radius:var(--r-lg); padding:24px;
  box-shadow:var(--sh-card); transition:transform .2s ease, border-color .2s, box-shadow .2s, background .2s}
.card::before{content:""; position:absolute; inset:0 0 auto 0; height:1px; border-radius:inherit;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent)}
.card-hover:hover{transform:translateY(-4px); border-color:var(--hair-2); background:var(--card-2); box-shadow:var(--sh-lift)}

/* --- HUD pill (PRESERVED VERBATIM — the signature element) --- */
.pill{display:inline-flex; align-items:center; justify-content:center; gap:4px; width:160px; height:44px; padding:0 18px; border-radius:999px;
  background:linear-gradient(180deg,rgba(38,47,64,.92),rgba(12,16,24,.96)); border:1px solid var(--hair);
  box-shadow:0 18px 50px rgba(94,242,168,.16), inset 0 1px 0 rgba(255,255,255,.14); position:relative;
  transition:width .34s cubic-bezier(.34,1.2,.5,1)}
.pill.trans{width:84px}
.pill::after{content:""; position:absolute; left:50%; bottom:-14px; transform:translateX(-50%); width:150px; height:34px; border-radius:50%; filter:blur(15px); transition:background .25s ease; background:radial-gradient(56% 64% at 50% 60%,rgba(122,217,255,.55),rgba(94,242,168,.34) 48%,transparent 72%)}
.pill .bars{display:flex; align-items:center; gap:4px; height:24px; transition:opacity .18s ease}
.pill .bars i{display:block; width:3px; height:24px; border-radius:3px; transform:scaleY(.22); transform-origin:center; background:linear-gradient(180deg,var(--aqua),var(--mint))}
.pill.rec .bars i{animation:recwave var(--d,1s) ease-in-out var(--dl,0s) infinite}
@keyframes recwave{0%,100%{transform:scaleY(.22)}50%{transform:scaleY(var(--pk,1))}}
.pill .think{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:7px; opacity:0; transition:opacity .18s ease; pointer-events:none}
.pill .think i{width:7px; height:7px; border-radius:999px; background:linear-gradient(145deg,#ffe3a0,var(--gold)); box-shadow:0 0 8px rgba(255,206,106,.6)}
.pill.trans .bars{opacity:0}.pill.trans .think{opacity:1}.pill.trans .think i{animation:think-bounce 1.05s ease-in-out infinite}.pill.trans .think i:nth-child(2){animation-delay:.15s}.pill.trans .think i:nth-child(3){animation-delay:.3s}
.pill.trans::after{background:radial-gradient(56% 64% at 50% 60%,rgba(255,206,106,.62),rgba(255,206,106,.3) 48%,transparent 72%)}
@keyframes think-bounce{0%,100%{transform:translateY(0) scale(.82); opacity:.55}40%{transform:translateY(-4px) scale(1); opacity:1}}

/* --- keycap --- */
kbd{font-family:var(--font); display:inline-flex; align-items:center; justify-content:center; min-width:1.9em; padding:.12em .5em;
  border-radius:7px; background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.05));
  border:1px solid var(--hair-2); border-bottom-width:2px; font-size:.92em; font-weight:700; color:var(--ink)}

/* --- footer --- */
.site-footer{border-top:1px solid var(--hair); margin-top:40px}
.footer-grid{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:18px; padding:30px 0}
.footer-brand{display:flex; align-items:center; gap:11px; font-weight:800; color:var(--ink)}
.footer-brand img{height:26px}
.footer-links{display:flex; flex-wrap:wrap; gap:6px 4px}
.footer-links a{color:var(--dim); text-decoration:none; font-size:13.5px; padding:6px 10px; border-radius:9px; transition:color .18s,background .18s}
.footer-links a:hover{color:var(--ink); background:rgba(255,255,255,.05)}
.footer-note{padding:0 0 40px; color:var(--faint); font-size:12.5px}

/* --- reveal-on-scroll --- */
.reveal{opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1; transform:none}
.reveal[data-d="1"]{transition-delay:.08s}
.reveal[data-d="2"]{transition-delay:.16s}
.reveal[data-d="3"]{transition-delay:.24s}
.reveal[data-d="4"]{transition-delay:.32s}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1; transform:none; transition:none}}

/* --- legal / prose pages --- */
.prose{max-width:820px; margin:0 auto; padding:8px 24px 70px}
.prose .eyebrow{margin:26px 0 12px}
.prose h1{font-family:var(--display); font-weight:700; font-size:clamp(30px,5vw,46px); letter-spacing:-.03em; line-height:1.06; margin:0 0 8px}
.prose .meta{font-size:14px; color:var(--faint); margin:0 0 26px}
.prose h2{font-size:20px; margin:32px 0 10px; letter-spacing:-.01em}
.prose p, .prose li{color:var(--dim); font-size:15.5px; line-height:1.65}
.prose a{color:var(--aqua); text-decoration:none}
.prose a:hover{text-decoration:underline}
.prose ul, .prose ol{padding-left:20px; margin:10px 0}
.prose li{margin:7px 0}
.prose .box{background:var(--card); border:1px solid var(--hair); border-radius:var(--r-lg); padding:20px 22px; margin:22px 0}
.prose .box::before{content:""; display:block}
.prose .box p{margin:0; color:var(--ink); font-size:16px}
.prose table{width:100%; border-collapse:collapse; margin:14px 0 4px; font-size:14.5px; color:var(--dim)}
.prose td{border-bottom:1px solid var(--hair); padding:11px 0; vertical-align:top}
.prose td:first-child{color:var(--ink); width:38%; padding-right:16px; font-weight:600}
.backlink{font-size:14px; color:var(--dim); text-decoration:none}
.backlink:hover{color:var(--ink)}

/* --- small helpers --- */
.mono{font-family:var(--mono)}
.center{text-align:center}
.muted{color:var(--dim)}
.hairline{height:1px; background:var(--hair); border:0; margin:0}