/* ALPHER shared shell.
   Dark, locked. Mint is the only accent and doubles as the gain colour.
   Rose appears for loss and short only. Geist for voice, Geist Mono for every number. */

:root{
  --bg:#0a0b0d; --bg-2:#0f1114; --surface:#14171b; --surface-2:#1a1e23;
  --hair:rgba(255,255,255,.08); --hair-2:rgba(255,255,255,.14);
  --text:#eceef1; --text-2:#b4bac2; --text-3:#7d848e;
  --accent:#5be3a5; --accent-dk:#1f9d6d; --accent-ink:#06271b;
  --loss:#ff6b7a; --glow:rgba(91,227,165,.18);
  --sans:"Geist",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Geist Mono",ui-monospace,Menlo,Consolas,monospace;
  /* every shadow is tinted with the page's own near-black, never pure black */
  --sh-1:0 16px 44px -22px rgba(5,8,11,.92);
  --sh-2:0 26px 70px -30px rgba(5,8,11,.95);
  --hi:inset 0 1px 0 rgba(255,255,255,.075);
  --r-out:24px; --r-in:18px;
  --ease:cubic-bezier(.22,.61,.24,1);
  --pad:clamp(96px,10vw,160px);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans);background:var(--bg);color:var(--text);
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;position:relative;min-height:100dvh;
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--accent);color:var(--accent-ink)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
img,svg{display:block;max-width:100%}

/* fixed background stack: two orbs, a dot grid, a grain plate. none of it scrolls. */
.bg-layer{position:fixed;inset:0;z-index:0;pointer-events:none}
.bg-orbs{background:radial-gradient(46vw 40vw at 84% 4%,rgba(91,227,165,.13),transparent 62%);
  animation:driftA 54s var(--ease) infinite alternate;will-change:transform}
.bg-orbs::before{content:"";position:absolute;inset:0;
  background:radial-gradient(52vw 46vw at 6% 96%,rgba(96,120,150,.11),transparent 64%);
  animation:driftB 72s var(--ease) infinite alternate;will-change:transform}
@keyframes driftA{from{transform:translate3d(0,0,0)}to{transform:translate3d(-3.2vw,2.4vh,0)}}
@keyframes driftB{from{transform:translate3d(0,0,0)}to{transform:translate3d(3vw,-2.6vh,0)}}
@media(prefers-reduced-motion:reduce){.bg-orbs,.bg-orbs::before{animation:none}}
/* vignette: the page edges fall away so the centre column carries the eye */
body::after{content:"";position:fixed;inset:0;z-index:69;pointer-events:none;
  background:radial-gradient(128% 96% at 50% 42%,transparent 52%,rgba(4,6,8,.42) 88%,rgba(4,6,8,.62) 100%)}
.bg-grid{opacity:.04;background-image:radial-gradient(rgba(255,255,255,.9) 1px,transparent 1px);background-size:24px 24px}
.bg-grain{opacity:.03;z-index:70;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>")}

/* section dividers: a hairline that dissolves before it reaches either edge */
.hair-x{position:relative}
.hair-x::before,.hair-x::after{content:"";position:absolute;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--hair-2) 18%,var(--hair-2) 82%,transparent)}
.hair-x::before{top:0}
.hair-x::after{bottom:0}

.wrap{width:100%;max-width:1200px;margin:0 auto;padding:0 clamp(20px,4vw,40px);position:relative;z-index:1}
.tnum{font-variant-numeric:tabular-nums}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.01em}

/* the one small uppercase label allowed above a headline. rationed, see report. */
.eyebrow{display:block;font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.18em;color:var(--accent);margin-bottom:18px}
.h1{font-size:clamp(34px,3.2vw,46px);font-weight:600;line-height:1.08;letter-spacing:-.028em}
.h2{font-size:clamp(30px,4vw,52px);font-weight:600;line-height:1.06;letter-spacing:-.028em;max-width:19ch}
.h3{font-size:19px;font-weight:600;line-height:1.3;letter-spacing:-.015em}
.em{font-style:italic;color:var(--accent);line-height:1.14;padding-bottom:.04em}
.lede{font-size:17px;color:var(--text-2);line-height:1.62;max-width:56ch}
.k{font-size:11.5px;color:var(--text-3);letter-spacing:.01em}

/* double bezel: an inner plate sitting in an outer tray */
.bezel{background:rgba(255,255,255,.04);border:1px solid var(--hair);padding:6px;border-radius:var(--r-out);
  box-shadow:var(--sh-1);transition:border-color .3s var(--ease),box-shadow .3s var(--ease)}
.core{background:var(--surface);border-radius:var(--r-in);box-shadow:var(--hi);overflow:hidden;position:relative}

/* pills */
.btn{display:inline-flex;align-items:center;gap:10px;border-radius:999px;font-size:14px;font-weight:500;
  letter-spacing:-.005em;padding:9px 10px 9px 22px;white-space:nowrap;
  transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease),scale .14s var(--ease)}
/* `scale`, not `transform`: the magnetic CTAs own transform, these two must not fight */
.btn:active{scale:.98}
.btn-primary{background:var(--accent);color:var(--accent-ink);font-weight:600;
  box-shadow:0 8px 26px -14px rgba(91,227,165,.5)}
.btn-primary:hover{background:#74eab4;box-shadow:0 0 0 1px rgba(91,227,165,.34),0 14px 40px -16px rgba(91,227,165,.55)}
.btn-primary .nub{width:28px;height:28px;border-radius:999px;background:rgba(6,39,27,.16);display:grid;place-items:center;flex:none;transition:transform .4s var(--ease),background .4s var(--ease)}
.btn-primary:hover .nub{transform:translate(2px,-1px) scale(1.06);background:rgba(6,39,27,.26)}
.btn-ghost{background:rgba(255,255,255,.03);border:1px solid var(--hair-2);color:var(--text);padding:10px 22px}
.btn-ghost:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.24)}
.btn .nub svg{width:13px;height:13px}

/* text links: the underline arrives, it is not just switched on */
.ul{position:relative}
.ul::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:right;transition:transform .38s var(--ease)}
.ul:hover::after,.ul.here::after{transform:scaleX(1);transform-origin:left}
@media(prefers-reduced-motion:reduce){.ul::after{transition:none}}

/* live indicator. the only status dot on the site, and it means something. */
.live{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;color:var(--text-2)}
.dot{width:7px;height:7px;border-radius:999px;background:var(--text-3);flex:none;position:relative}
.dot.on{background:var(--accent)}
.dot.off{background:var(--loss)}
.dot.on::after{content:"";position:absolute;inset:0;border-radius:999px;background:var(--accent);animation:ping 2.6s var(--ease) infinite}
@keyframes ping{0%{transform:scale(1);opacity:.5}70%{transform:scale(3.4);opacity:0}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.dot.on::after{animation:none}}

/* nav: a floating glass pill, detached from the top */
.nav{position:fixed;top:0;left:0;right:0;z-index:60;padding:20px clamp(16px,4vw,40px) 0;pointer-events:none}
.nav::before{content:"";position:absolute;left:0;right:0;top:0;height:136px;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,11,13,.78) 0%,rgba(10,11,13,.38) 48%,transparent 100%)}
.navpill{max-width:1100px;margin:0 auto;pointer-events:auto;display:flex;align-items:center;gap:20px;
  height:60px;padding:0 10px 0 18px;border-radius:999px;border:1px solid var(--hair);
  background:rgba(15,17,20,.72);backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);
  box-shadow:var(--hi),0 14px 44px -16px rgba(5,8,11,.92);position:relative}
.brand{display:flex;align-items:center;gap:9px;flex:none}
.brand svg{width:26px;height:26px}
.brand span{font-weight:600;font-size:19px;letter-spacing:-.045em}
.navlinks{display:flex;align-items:center;gap:26px;margin-left:6px}
.navlinks a{position:relative;font-size:13.5px;color:var(--text-2);transition:color .3s var(--ease)}
.navlinks a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;background:var(--accent);
  transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease)}
.navlinks a:hover,.navlinks a.here{color:var(--text)}
.navlinks a:hover::after,.navlinks a.here::after{transform:scaleX(1);transform-origin:left}
@media(prefers-reduced-motion:reduce){.navlinks a::after{transition:none}}
.navright{margin-left:auto;display:flex;align-items:center;gap:12px;padding-right:8px}
.burger{display:none;width:40px;height:40px;border-radius:999px;border:1px solid var(--hair);place-items:center;margin-left:auto;flex:none}
.burger i{display:block;width:15px;height:1.5px;background:var(--text);border-radius:2px;transition:transform .42s var(--ease),opacity .2s ease}
.burger i:first-child{transform:translateY(-3.5px)}
.burger i:last-child{transform:translateY(3.5px)}
.burger.open i:first-child{transform:translateY(1px) rotate(45deg)}
.burger.open i:last-child{transform:translateY(-.5px) rotate(-45deg)}

.sheet{position:fixed;inset:0;z-index:55;background:rgba(10,11,13,.9);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
  display:flex;flex-direction:column;justify-content:center;gap:6px;padding:0 clamp(28px,8vw,64px);
  opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility .4s}
.sheet.open{opacity:1;visibility:visible}
.sheet a{font-size:clamp(28px,8vw,40px);font-weight:600;letter-spacing:-.03em;padding:10px 0;
  opacity:0;transform:translateY(22px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.sheet.open a{opacity:1;transform:none}
.sheet.open a:nth-child(1){transition-delay:.08s}
.sheet.open a:nth-child(2){transition-delay:.14s}
.sheet.open a:nth-child(3){transition-delay:.2s}
.sheet.open a:nth-child(4){transition-delay:.26s}
.sheet .live{margin-top:26px;font-size:14px;transition-delay:.32s}

/* footer */
.foot{margin-top:var(--pad);padding:45px 0 52px;position:relative;z-index:1}
.foot::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--hair-2) 18%,var(--hair-2) 82%,transparent)}
.foot-in{display:flex;align-items:flex-start;justify-content:space-between;gap:32px;flex-wrap:wrap}
.foot .brand span{font-size:17px}
.foot-links{display:flex;gap:26px;flex-wrap:wrap}
.foot-links a{position:relative;font-size:13.5px;color:var(--text-2);transition:color .3s var(--ease)}
.foot-links a::after{content:"";position:absolute;left:0;right:2px;bottom:-3px;height:1px;background:var(--accent);
  transform:scaleX(0);transform-origin:right;transition:transform .38s var(--ease)}
.foot-links a:hover{color:var(--accent)}
.foot-links a:hover::after{transform:scaleX(1);transform-origin:left}
@media(prefers-reduced-motion:reduce){.foot-links a::after{transition:none}}
.foot-note{font-size:12.5px;color:var(--text-3);margin-top:14px;max-width:46ch}
.foot-acct{font-family:var(--mono);font-size:11.5px;color:var(--text-3);margin-top:8px}

/* scroll reveal used where a pin would be overkill */
.rv{opacity:0;transform:translateY(26px)}
.rv.in{opacity:1;transform:none;transition:opacity .8s var(--ease),transform .8s var(--ease)}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}}

@media(max-width:860px){
  .navlinks,.navright{display:none}
  .burger{display:grid}
  .navpill{height:56px;padding:0 8px 0 16px}
}
@media(max-width:560px){
  .brand span{font-size:17px}
  .foot-in{flex-direction:column;gap:22px}
}