/* ==========================================================================
   PHANTOM — Liquid chrome
   --------------------------------------------------------------------------
   Every surface behaves like black chrome: it reflects an environment.
   That environment is always the same one, so the whole page agrees about
   where the light is.

       dark sky   ────────────  top of the panel reflects the ceiling
       HORIZON    ────────────  a hard bright line where sky meets ground
       lit floor  ────────────  bottom reflects the lit ground, softer

   Nothing here is a flat fill with a border. A surface is a reflection.
   ========================================================================== */

/* ==========================================================================
   1. Tokens
   ========================================================================== */
:root{
  /* --- ground -----------------------------------------------------------
     Strictly neutral. Every value here has r == g == b: the moment one
     channel leads, near-black reads as navy or charcoal-blue instead of
     black metal. If you add a token, keep it grey. */
  --void:      #060606;
  --pit:       #030303;
  --sky:       #0d0d0d;
  --steel:     #181818;

  /* --- the reflected environment, as stops ----------------------------- */
  --env-sky-0: #101010;
  --env-sky-1: #141414;
  --env-approach: #2c2c2c;
  --env-horizon:  #7d7d7d;
  --env-flash:    #c4c4c4;
  --env-fall:     #262626;
  --env-floor:    #161616;
  --env-base:     #0b0b0b;

  /* --- chrome surfaces -------------------------------------------------- */
  /* Large panels carry body copy across the horizon, so the reflection has
     to stay under the text rather than compete with it. The hot version is
     for panels that are mostly surface: the CTA slab, the status banner. */
  --chrome-lg: linear-gradient(177deg,
    #101010 0%, #131313 22%, #181818 42%,
    #262626 55.4%, #363636 56.6%, #1e1e1e 58%,
    #151515 74%, #0b0b0b 100%);

  --chrome-lg-hot: linear-gradient(177deg,
    #101010 0%, #131313 22%, #1a1a1a 42%,
    #303030 55.4%, #545454 56.6%, #242424 58%,
    #161616 74%, #0b0b0b 100%);

  /* Controls: black metal, but with NO hard horizon. A bright band across the
     middle of a panel reads as a reflection; across the middle of a pill it
     reads as a line struck through the label. Curvature comes from a smooth
     falloff plus the bevel in the box-shadow. */
  --chrome-md: linear-gradient(180deg,
    #3c3c3c 0%, #272727 16%, #1a1a1a 44%,
    #151515 64%, #1e1e1e 86%, #303030 100%);

  --chrome-md-lit: linear-gradient(180deg,
    #525252 0%, #363636 16%, #252525 44%,
    #1f1f1f 64%, #2c2c2c 86%, #444444 100%);

  /* Same reasoning for the solid button: the crisp silver step below stays on
     the wordmark, where it is the whole point, but not behind button text. */
  --chrome-white-btn: linear-gradient(180deg,
    #ffffff 0%, #f6f6f6 22%, #e4e4e4 52%,
    #d5d5d5 76%, #ececec 100%);

  --chrome-white-btn-lit: linear-gradient(180deg,
    #ffffff 0%, #ffffff 22%, #f2f2f2 52%,
    #e4e4e4 76%, #fbfbfb 100%);

  /* shiny white: the same environment, seen in polished silver */
  --chrome-white: linear-gradient(180deg,
    #ffffff 0%, #f7f7f7 26%, #d2d2d2 46%,
    #ffffff 50.5%, #ededed 57%, #b9b9b9 82%, #f8f8f8 100%);

  --chrome-white-lit: linear-gradient(180deg,
    #ffffff 0%, #ffffff 26%, #e4e4e4 46%,
    #ffffff 50.5%, #fafafa 57%, #cfcfcf 82%, #ffffff 100%);

  /* --- edges ------------------------------------------------------------ */
  --bevel-top: rgba(255,255,255,.30);
  --bevel-bot: rgba(0,0,0,.92);
  --hair:      rgba(255,255,255,.085);
  --hair-soft: rgba(255,255,255,.05);

  /* --- ink -------------------------------------------------------------- */
  --spec:      #ffffff;
  --ash:       #9a9a9a;   /* 7.2:1 on --void */
  --ash-dim:   #868686;   /* 5.6:1 */
  --ash-faint: #7a7a7a;   /* 4.7:1 — the floor */

  /* --- signals ---------------------------------------------------------- */
  --live:      #47e39b;
  --strain:    #f0c14b;
  --down:      #f2545b;

  /* --- metrics ---------------------------------------------------------- */
  --gutter:    clamp(20px, 5vw, 64px);
  --measure:   1240px;
  --narrow:    720px;
  --r-pill:    999px;
  --r-panel:   14px;

  /* --- motion ----------------------------------------------------------- */
  --ease-out:   cubic-bezier(.16,.84,.32,1);
  --ease-io:    cubic-bezier(.65,.02,.2,1);
  --ease-sheen: cubic-bezier(.22,.61,.36,1);
}

/* ==========================================================================
   2. Reset
   ========================================================================== */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--void);
  color:var(--ash);
  font-family:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-variation-settings:"wdth" 100,"wght" 400;
  font-size:1.0625rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg,canvas{ display:block; max-width:100%; }
button{ font:inherit; color:inherit; }
a{ color:var(--spec); text-decoration:none; }
h1,h2,h3,h4,p,ul,ol,figure,dl,dd{ margin:0; }
ul,ol{ padding:0; list-style:none; }

/* --- browser surfaces wear the palette too ------------------------------ */
::selection{ background:var(--env-flash); color:#070707; }
:focus-visible{
  outline:2px solid var(--env-flash);
  outline-offset:3px;
  border-radius:var(--r-pill);
}
html{ scrollbar-color:#333333 var(--pit); scrollbar-width:thin; }
::-webkit-scrollbar{ width:13px; height:13px; }
::-webkit-scrollbar-track{ background:var(--pit); }
::-webkit-scrollbar-thumb{
  border-radius:var(--r-pill);
  border:3px solid var(--pit);
  background:linear-gradient(180deg,#4f4f4f,#242424 52%,#3b3b3b);
}
::-webkit-scrollbar-thumb:hover{ background:linear-gradient(180deg,#6e6e6e,#2d2d2d 52%,#4f4f4f); }

/* ==========================================================================
   The ground: polished black metal
   --------------------------------------------------------------------------
   Four stacked layers, all fixed, all behind the content:
     1. body            deep black base
     2. .metal          broad charcoal highlights, no hue
     3. .metal::before  brushed grain + static gloss streaks
     4. .metal::after   one slow shine drifting across, transform only
   Nothing here uses an image file, and the only thing that animates is a
   translate on a single composited layer.
   ========================================================================== */
.metal{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  overflow:hidden;
  background:
    radial-gradient(150% 95% at 50% -18%, #1b1b1b 0%, #121212 30%, #0a0a0a 58%, #060606 82%),
    radial-gradient(90% 60% at 88% 108%, #141414 0%, transparent 62%);
}
/* brushed grain, plus two broad gloss streaks raked across the sheet.
   The streaks are wide and low-contrast so they read as reflected light
   rather than as stripes. */
.metal::before{
  content:""; position:absolute; inset:0;
  background:
    repeating-linear-gradient(90deg,
      rgba(255,255,255,.015) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg,
      rgba(0,0,0,.22) 0 1px, transparent 1px 7px),
    linear-gradient(101deg,
      transparent 8%, rgba(255,255,255,.028) 21%, transparent 33%),
    linear-gradient(101deg,
      transparent 52%, rgba(255,255,255,.045) 66%, rgba(255,255,255,.012) 74%, transparent 86%);
}
/* the travelling shine */
.metal::after{
  content:""; position:absolute;
  top:-60%; left:-70%; width:60%; height:220%;
  transform:translate3d(0,0,0) rotate(14deg);
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,.018) 26%,
    rgba(255,255,255,.055) 47%,
    rgba(255,255,255,.075) 50%,
    rgba(255,255,255,.045) 54%,
    rgba(255,255,255,.015) 74%,
    transparent 100%);
  animation:metalShine 34s linear infinite;
  will-change:transform;
}
@keyframes metalShine{
  from{ transform:translate3d(0,0,0) rotate(14deg); }
  to  { transform:translate3d(330vw,0,0) rotate(14deg); }
}
@media (prefers-reduced-motion: reduce){
  .metal::after{ animation:none; transform:translate3d(120vw,0,0) rotate(14deg); }
}
.force-motion .metal::after{ animation:metalShine 34s linear infinite; }

/* --- the drift: living background below the hero ------------------------
   Sits between the metal ground and the content. It is a single canvas, so
   this is one composited layer regardless of how many marks are on screen.
   Injected by swarm.js; disable per page with <body data-swarm="off">. */
.swarm{
  position:fixed; inset:0; z-index:-1;
  pointer-events:none;
  contain:strict;
}

/* --- grain -------------------------------------------------------------- */
.grain{
  position:fixed; inset:0; z-index:9000; pointer-events:none;
  opacity:.055;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
}

/* ==========================================================================
   3. Type
   ========================================================================== */
.t-wordmark{
  font-variation-settings:"wdth" 125,"wght" 800;
  font-size:clamp(2.4rem, 9.4vw, 8.2rem);
  line-height:.9;
  letter-spacing:.028em;
  text-transform:uppercase;
  /* split into per-letter inline-blocks, so the browser would happily break
     mid-word without this */
  white-space:nowrap;
  /* the logotype is polished silver — the one place type is a surface */
  background:var(--chrome-white);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  filter:drop-shadow(0 2px 1px rgba(0,0,0,.55)) drop-shadow(0 14px 34px rgba(225,225,225,.13));
}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .t-wordmark{ color:var(--spec); background:none; }
}
.t-display{
  font-variation-settings:"wdth" 118,"wght" 800;
  font-size:clamp(2.3rem, 5.6vw, 4.25rem);
  line-height:1.02; letter-spacing:-.018em; color:var(--spec);
}
.t-h2{
  font-variation-settings:"wdth" 112,"wght" 700;
  font-size:clamp(1.55rem, 2.9vw, 2.15rem);
  line-height:1.12; letter-spacing:-.012em; color:var(--spec);
}
.t-h3{
  font-variation-settings:"wdth" 105,"wght" 700;
  font-size:1.375rem; line-height:1.28; letter-spacing:-.006em; color:var(--spec);
}
.t-lead{
  font-size:clamp(1.0625rem, 1.5vw, 1.25rem);
  line-height:1.58; color:var(--ash); max-width:62ch;
}
.t-micro{
  font-variation-settings:"wdth" 88,"wght" 600;
  font-size:.8125rem; line-height:1.45; color:var(--ash-dim);
}
.t-num{ font-variant-numeric:tabular-nums lining-nums; }
.ink{ color:var(--spec); }
.dim{ color:var(--ash-dim); }
p{ max-width:72ch; }

/* ==========================================================================
   4. Shell
   ========================================================================== */
.wrap{ width:100%; max-width:var(--measure); margin-inline:auto; padding-inline:var(--gutter); }
.wrap-narrow{ max-width:var(--narrow); }
.band{ padding-block:clamp(72px, 11vw, 148px); }
.band-tight{ padding-block:clamp(48px, 7vw, 84px); }

/* a band edge is a chrome seam, not a grey line */
.band + .band{ border-top:1px solid transparent; border-image:linear-gradient(90deg, transparent, rgba(255,255,255,.16) 22%, rgba(255,255,255,.16) 78%, transparent) 1; }
.rule{ height:1px; border:0; margin:0; background:linear-gradient(90deg, transparent, var(--hair) 15%, var(--hair) 85%, transparent); }

.skip{
  position:fixed; top:.75rem; left:.75rem; z-index:9999;
  padding:.7rem 1.4rem;
  background:var(--chrome-white-btn); color:#070707;
  font-variation-settings:"wdth" 100,"wght" 700; font-size:.875rem;
  border-radius:var(--r-pill);
  transform:translateY(-180%);
  transition:transform .24s var(--ease-out);
}
.skip:focus{ transform:none; }

.step-n{
  font-variation-settings:"wdth" 76,"wght" 800;
  font-size:2.6rem; line-height:1; margin-bottom:1.1rem;
  background:linear-gradient(180deg,#9c9c9c,#3b3b3b 58%,#666666);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ==========================================================================
   5. The plate — a slab of black chrome
   ========================================================================== */
.plate{
  position:relative;
  background:var(--chrome-lg);
  border-radius:var(--r-panel);
  box-shadow:
    inset 0 1px 0 var(--bevel-top),
    inset 0 0 0 1px rgba(255,255,255,.055),
    inset 0 -1px 0 var(--bevel-bot),
    0 2px 3px rgba(0,0,0,.6),
    0 18px 44px -14px rgba(0,0,0,.9);
  overflow:hidden;
  isolation:isolate;
}
/* the pointer is a moving light source on the surface */
.plate::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  opacity:0; transition:opacity .5s var(--ease-out);
  background:radial-gradient(520px 300px at var(--mx,50%) var(--my,0%),
    rgba(255,255,255,.14), rgba(255,255,255,.045) 42%, transparent 70%);
}
.plate:hover::before,.plate:focus-within::before{ opacity:1; }
.plate > *{ position:relative; z-index:1; }

/* ==========================================================================
   6. Controls — every one an oval
   ========================================================================== */
.btn{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  padding:.95em 1.9em;
  font-variation-settings:"wdth" 100,"wght" 700;
  font-size:.9375rem;
  color:var(--spec);
  background:var(--chrome-md);
  border:0;
  border-radius:var(--r-pill);
  overflow:hidden;
  isolation:isolate;
  cursor:pointer;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.36),
    inset 0 0 0 1px rgba(255,255,255,.09),
    inset 0 -2px 3px rgba(0,0,0,.7),
    0 2px 4px rgba(0,0,0,.55),
    0 10px 24px -10px rgba(0,0,0,.9);
  /* magnetic pull and press compose in one transform, so neither clobbers
     the other; JS only ever writes --mag-x / --mag-y */
  transform:translate(var(--mag-x,0px), var(--mag-y,0px)) scale(var(--press,1));
  transition:background .3s var(--ease-out), box-shadow .3s var(--ease-out), transform .28s var(--ease-out);
  will-change:transform;
}
.btn:active{ --press:.975; }
.btn.is-pulled{ transition:background .3s var(--ease-out), box-shadow .3s var(--ease-out), transform .08s linear; }
.btn > *{ position:relative; z-index:2; }
/* the sheen: a bar of light that crosses the metal */
.btn::after{
  content:""; position:absolute; z-index:1;
  top:-20%; left:0; width:45%; height:140%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.62) 48%, transparent);
  transform:translateX(-260%) skewX(-20deg);
  transition:transform .75s var(--ease-sheen);
  pointer-events:none;
}
.btn:hover::after,.btn:focus-visible::after{ transform:translateX(360%) skewX(-20deg); }
.btn:hover{
  background:var(--chrome-md-lit);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.5),
    inset 0 0 0 1px rgba(255,255,255,.14),
    inset 0 -2px 3px rgba(0,0,0,.7),
    0 3px 6px rgba(0,0,0,.55),
    0 16px 34px -12px rgba(215,215,215,.22);
}

.btn-solid{
  background:var(--chrome-white-btn);
  color:#070707;
  text-shadow:0 1px 0 rgba(255,255,255,.6);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 0 0 1px rgba(255,255,255,.5),
    inset 0 -2px 3px rgba(140,140,140,.5),
    0 2px 4px rgba(0,0,0,.5),
    0 14px 30px -10px rgba(255,255,255,.24);
}
.btn-solid:hover{
  background:var(--chrome-white-btn-lit);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 0 0 1px rgba(255,255,255,.7),
    inset 0 -2px 3px rgba(140,140,140,.4),
    0 3px 7px rgba(0,0,0,.5),
    0 20px 42px -12px rgba(255,255,255,.34);
}
.btn-solid::after{ background:linear-gradient(100deg, transparent, rgba(255,255,255,.85) 48%, transparent); }

.btn-quiet{
  background:rgba(255,255,255,.02);
  color:var(--ash);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 0 0 1px rgba(255,255,255,.10),
    0 2px 5px rgba(0,0,0,.4);
}
.btn-quiet:hover{
  color:var(--spec);
  background:var(--chrome-md);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.3),
    inset 0 0 0 1px rgba(255,255,255,.14),
    0 3px 8px rgba(0,0,0,.5),
    0 14px 28px -12px rgba(215,215,215,.18);
}

.btn-lg{ padding:1.1em 2.4em; font-size:1rem; }
.btn-block{ display:flex; width:100%; }
.glyph{ width:1.15em; height:1.15em; flex:none; fill:currentColor; }

/* ==========================================================================
   7. Signals
   ========================================================================== */
.dot{
  width:8px; height:8px; border-radius:50%; flex:none;
  background:var(--ash-dim);
  box-shadow:0 0 0 3px rgba(255,255,255,.05);
}
/* An 8px indicator lamp. The bloom is what separates "this is emitting right
   now" from "this is a bullet point", and it is the only colour on the site,
   so it is kept low and tight rather than neon. */
.dot[data-state="live"]{     background:var(--live);   box-shadow:0 0 0 3px rgba(71,227,155,.12),  0 0 7px rgba(71,227,155,.42); }
.dot[data-state="updating"]{ background:var(--strain); box-shadow:0 0 0 3px rgba(240,193,75,.12),  0 0 7px rgba(240,193,75,.42); }
.dot[data-state="down"]{     background:var(--down);   box-shadow:0 0 0 3px rgba(242,84,91,.12),  0 0 7px rgba(242,84,91,.42); }
.dot-pulse{ animation:pulse 2.8s var(--ease-io) infinite; }
@keyframes pulse{ 0%,100%{ opacity:1 } 50%{ opacity:.42 } }
@media (prefers-reduced-motion: reduce){ .dot-pulse{ animation:none } }

.state{
  display:inline-flex; align-items:center; gap:.6em;
  font-variation-settings:"wdth" 88,"wght" 600;
  font-size:.8125rem; color:var(--ash); white-space:nowrap;
}

/* ==========================================================================
   8. Masthead
   ========================================================================== */
.masthead{
  position:fixed; top:0; left:0; right:0; z-index:100;
  transition:background .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.masthead[data-stuck="true"]{
  background:linear-gradient(180deg, rgba(10,10,10,.93), rgba(8,8,8,.88));
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  box-shadow:0 1px 0 rgba(255,255,255,.10), 0 12px 30px -12px rgba(0,0,0,.9);
}
.masthead-in{ display:flex; align-items:center; gap:2rem; height:70px; }
.brand{ display:flex; align-items:center; gap:.65rem; margin-right:auto; color:var(--spec); }
.brand .mark{ width:27px; height:27px; flex:none; filter:drop-shadow(0 1px 3px rgba(228,228,228,.4)); }
.brand-name{
  font-variation-settings:"wdth" 118,"wght" 800;
  font-size:.95rem; letter-spacing:.14em; text-transform:uppercase;
  background:var(--chrome-white);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.nav{ display:flex; align-items:center; gap:1.8rem; }
.nav a:not(.btn){
  position:relative;
  color:var(--ash);
  font-variation-settings:"wdth" 96,"wght" 600;
  font-size:.9rem;
  transition:color .2s var(--ease-out);
}
.nav a:not(.btn)::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:1px;
  background:linear-gradient(90deg, transparent, var(--env-flash), transparent);
  transform:scaleX(0); transition:transform .32s var(--ease-out);
}
.nav a:not(.btn):hover{ color:var(--spec); }
.nav a:not(.btn):hover::after,
.nav a[aria-current="page"]::after{ transform:scaleX(1); }
.nav a[aria-current="page"]{ color:var(--spec); }

.burger{
  display:none; width:42px; height:42px; align-items:center; justify-content:center;
  background:var(--chrome-md); border:0; border-radius:var(--r-pill); cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3), inset 0 0 0 1px rgba(255,255,255,.09), 0 2px 5px rgba(0,0,0,.6);
}
.burger span{ display:block; width:16px; height:1.5px; background:var(--spec); position:relative; }
.burger span::before,.burger span::after{ content:""; position:absolute; left:0; width:16px; height:1.5px; background:var(--spec); }
.burger span::before{ top:-5px; } .burger span::after{ top:5px; }

@media (max-width:880px){
  .burger{ display:flex; }
  .nav{
    position:fixed; inset:70px 0 auto 0;
    flex-direction:column; align-items:stretch; gap:0;
    background:#080808;
    box-shadow:0 1px 0 rgba(255,255,255,.1), 0 28px 56px rgba(0,0,0,.8);
    padding:.5rem var(--gutter) 1.6rem;
    transform:translateY(-10px); opacity:0; pointer-events:none;
    transition:opacity .24s var(--ease-out), transform .24s var(--ease-out);
  }
  .nav[data-open="true"]{ transform:none; opacity:1; pointer-events:auto; }
  .nav a:not(.btn){ padding:.9rem 0; font-size:1.05rem; border-bottom:1px solid var(--hair-soft); }
  .nav a:not(.btn)::after{ display:none; }
  .nav-cta{ margin-top:1.2rem; }
}

/* ==========================================================================
   9. Hero
   ========================================================================== */
.hero{
  position:relative; min-height:100svh;
  display:flex; flex-direction:column; justify-content:flex-end;
  overflow:hidden; isolation:isolate;
}
.hero::before{
  content:""; position:absolute; inset:0; z-index:-2;
  background:
    radial-gradient(120% 74% at 50% 30%, #191919 0%, #0b0b0b 44%, var(--void) 76%);
}
.hero::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(to top,
    var(--void) 0%, rgba(6,6,6,.97) 17%, rgba(6,6,6,.72) 31%,
    rgba(6,6,6,.2) 46%, transparent 60%);
}
#stage{ position:absolute; inset:0; z-index:-2; width:100%; height:100%; }
.hero-fallback{
  position:absolute; top:50%; left:50%; z-index:-2;
  width:min(46vh,380px); transform:translate(-50%,-58%); opacity:0;
}
.no-webgl .hero-fallback{ opacity:1; animation:breathe 7s var(--ease-io) infinite; }
@keyframes breathe{ 0%,100%{ transform:translate(-50%,-58%) scale(1) } 50%{ transform:translate(-50%,-60%) scale(1.02) } }
@media (prefers-reduced-motion: reduce){ .no-webgl .hero-fallback{ animation:none } }

.hero-foot{ position:relative; padding-bottom:clamp(34px, 6vh, 68px); padding-top:2rem; }
.hero-grid{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:clamp(1.5rem,4vw,4rem); }
.hero-line{ margin-top:1.5rem; max-width:36ch; font-size:clamp(1rem,1.35vw,1.1875rem); line-height:1.55; color:var(--ash); }
.hero-actions{ display:flex; gap:.85rem; flex-wrap:wrap; margin-top:1.9rem; }
.hero-meta{ display:flex; flex-direction:column; align-items:flex-end; gap:.55rem; padding-bottom:.4rem; text-align:right; }
@media (max-width:760px){ .hero-grid{ grid-template-columns:1fr; } .hero-meta{ display:none; } }

/* wordmark reveal: each letter rises out of the dark, once, on load.
   The silver has to be re-declared per letter: a transformed child escapes
   the parent's background-clip:text and would paint as nothing. The gradient
   is vertical and every letter shares a line box, so per-letter and
   whole-word are pixel-identical. */
.t-wordmark .ch{
  display:inline-block;
  will-change:transform,opacity;
  background:var(--chrome-white);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .t-wordmark .ch{ color:var(--spec); background:none; }
}
.wm-in .ch{
  opacity:0; transform:translateY(.42em) rotateX(-58deg);
  animation:wmRise .95s var(--ease-out) forwards;
  animation-delay:var(--d,0s);
}
@keyframes wmRise{ to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){
  .wm-in .ch{ opacity:1; transform:none; animation:none; }
}

.cue{
  position:absolute; left:50%; bottom:0; z-index:2;
  width:1px; height:64px; overflow:hidden;
  background:linear-gradient(to bottom, transparent, rgba(255,255,255,.16));
}
.cue::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to bottom, transparent, var(--env-flash));
  animation:drain 2.8s var(--ease-io) infinite;
}
@keyframes drain{ 0%{ transform:translateY(-100%) } 55%,100%{ transform:translateY(100%) } }
@media (prefers-reduced-motion: reduce){ .cue::after{ animation:none; opacity:.35 } }

/* ==========================================================================
   10. Section heads
   ========================================================================== */
.head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:2rem; flex-wrap:wrap;
  padding-bottom:1.9rem; margin-bottom:2.6rem;
  border-bottom:1px solid transparent;
  border-image:linear-gradient(90deg, rgba(255,255,255,.22), rgba(255,255,255,.04) 70%, transparent) 1;
}
.head p{ max-width:46ch; }

/* ==========================================================================
   11. The rack
   ========================================================================== */
.rack{ border-top:1px solid var(--hair-soft); }
.rack-row{
  position:relative; display:grid;
  grid-template-columns:minmax(180px,1fr) minmax(0,1.7fr) auto minmax(88px,auto);
  align-items:center; gap:clamp(1rem,3vw,2.5rem);
  padding:1.6rem 1.5rem 1.6rem clamp(.75rem,2vw,1.5rem);
  border-bottom:1px solid var(--hair-soft);
  color:inherit; overflow:hidden;
  transition:background .3s var(--ease-out);
}
/* hovering a row lights the chrome under it */
.rack-row::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  opacity:0; transition:opacity .35s var(--ease-out);
  background:
    linear-gradient(90deg, rgba(255,255,255,.07), rgba(255,255,255,.012) 55%, transparent),
    radial-gradient(420px 150px at var(--mx,20%) 50%, rgba(255,255,255,.09), transparent 70%);
}
.rack-row > *{ position:relative; z-index:1; }
.rack-row::after{
  content:""; position:absolute; left:0; top:0; bottom:-1px; width:2px; z-index:2;
  background:linear-gradient(180deg, transparent, var(--env-flash) 45%, #fff 50%, var(--env-flash) 55%, transparent);
  transform:scaleY(0); transition:transform .4s var(--ease-out);
}
.rack-row:hover::before,.rack-row:focus-visible::before{ opacity:1; }
.rack-row:hover::after,.rack-row:focus-visible::after{ transform:scaleY(1); }
.rack-row > div:first-child,.rack-row > .rack-what{ transition:transform .3s var(--ease-out); }
.rack-row:hover > div:first-child,.rack-row:focus-visible > div:first-child,
.rack-row:hover > .rack-what,.rack-row:focus-visible > .rack-what{ transform:translateX(12px); }

.rack-name{
  font-variation-settings:"wdth" 116,"wght" 800;
  font-size:clamp(1.25rem,2.2vw,1.7rem); line-height:1.05;
  letter-spacing:-.01em; color:var(--spec);
}
.rack-for{ margin-top:.32rem; }
.rack-what{ font-size:.98rem; line-height:1.5; color:var(--ash); max-width:46ch; }
.rack-price{
  font-variation-settings:"wdth" 100,"wght" 700;
  font-size:1.1rem; color:var(--spec); white-space:nowrap; text-align:right;
}
.rack-price small{ display:block; font-size:.75rem; font-variation-settings:"wdth" 88,"wght" 600; color:var(--ash-dim); }

@media (max-width:900px){
  .rack-row{ grid-template-columns:1fr auto; row-gap:.9rem; column-gap:1.25rem; }
  .rack-row > div:first-child{ grid-column:1; grid-row:1; }
  .rack-what{ grid-column:1 / -1; grid-row:2; }
  .rack-row .state{ grid-column:1; grid-row:3; }
  .rack-price{ grid-column:2; grid-row:3; }
}

/* ==========================================================================
   12. Grids
   ========================================================================== */
.cols{
  display:grid; gap:1px;
  background:linear-gradient(90deg, rgba(255,255,255,.14), rgba(255,255,255,.06));
  border-radius:var(--r-panel); overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 16px 40px -18px rgba(0,0,0,.9);
}
.cols-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.cols > .cell{
  background:linear-gradient(177deg, #0d0d0d, #090909 60%, #0b0b0b);
  padding:clamp(1.6rem,3vw,2.4rem);
  transition:background .35s var(--ease-out);
}
.cols > a.cell:hover{ background:linear-gradient(177deg, #161616, #101010 60%, #131313); }
@media (max-width:820px){ .cols-3{ grid-template-columns:1fr; } }

.duo{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(2rem,5vw,4.5rem); align-items:start; }
@media (max-width:860px){ .duo{ grid-template-columns:1fr; } }

/* ==========================================================================
   13. Product page
   ========================================================================== */
.crumb{ display:flex; gap:.55rem; align-items:center; color:var(--ash-dim); font-size:.8125rem; font-variation-settings:"wdth" 92,"wght" 600; }
.crumb a{ color:var(--ash-dim); transition:color .2s var(--ease-out); }
.crumb a:hover{ color:var(--spec); }

.p-hero{ position:relative; padding-top:clamp(118px,14vh,172px); padding-bottom:clamp(48px,7vw,80px); }
.p-hero::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(85% 120% at 76% -10%, rgba(255,255,255,.085), transparent 58%);
}
.p-grid{ display:grid; grid-template-columns:minmax(0,1fr) 380px; gap:clamp(2rem,5vw,4rem); align-items:start; }
@media (max-width:960px){ .p-grid{ grid-template-columns:1fr; } }
.p-title{ margin-top:1.1rem; }
.p-sub{ margin-top:1.3rem; }

.buy{ padding:1.9rem; position:sticky; top:92px; }
@media (max-width:960px){ .buy{ position:static; } }
.buy-price{ display:flex; align-items:baseline; gap:.55rem; font-variation-settings:"wdth" 118,"wght" 800; font-size:2.8rem; line-height:1; color:var(--spec); }
.buy-price .per{ font-size:.9rem; font-variation-settings:"wdth" 92,"wght" 600; color:var(--ash-dim); }

.tiers{ margin:1.5rem 0; display:grid; gap:.5rem; }
.tier{
  position:relative; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  width:100%; text-align:left;
  padding:.85rem 1.15rem;
  background:rgba(255,255,255,.022);
  border:0; border-radius:var(--r-pill);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);
  cursor:pointer; overflow:hidden;
  transition:background .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.tier:hover{ background:rgba(255,255,255,.06); box-shadow:inset 0 1px 0 rgba(255,255,255,.2), inset 0 0 0 1px rgba(255,255,255,.11); }
.tier[aria-pressed="true"]{
  background:var(--chrome-md);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34), inset 0 0 0 1px rgba(255,255,255,.14), inset 0 -2px 3px rgba(0,0,0,.6), 0 6px 18px -8px rgba(215,215,215,.26);
}
.tier-label{ font-variation-settings:"wdth" 100,"wght" 700; color:var(--spec); font-size:.95rem; }
.tier-note{ display:block; font-size:.75rem; font-variation-settings:"wdth" 88,"wght" 600; color:var(--ash-dim); margin-top:.1rem; }
.tier-cost{ font-variation-settings:"wdth" 100,"wght" 700; color:var(--spec); font-size:1.05rem; }
.buy-note{ margin-top:1.1rem; font-size:.78rem; line-height:1.5; color:var(--ash-dim); text-align:center; max-width:none; }

.spec{ border-top:1px solid var(--hair-soft); }
.spec-row{
  display:grid; grid-template-columns:180px minmax(0,1fr); gap:1.5rem;
  padding:1rem 0; border-bottom:1px solid var(--hair-soft); font-size:.95rem;
  transition:background .25s var(--ease-out);
}
.spec-row:hover{ background:linear-gradient(90deg, rgba(255,255,255,.035), transparent); }
.spec-row dt{ color:var(--ash-dim); font-variation-settings:"wdth" 92,"wght" 600; }
.spec-row dd{ color:var(--spec); }
@media (max-width:600px){ .spec-row{ grid-template-columns:1fr; gap:.25rem; } }

.feats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:1.15rem 2.5rem; }
.feat{ display:grid; grid-template-columns:auto 1fr; gap:.75rem; align-items:start; font-size:.98rem; }
.feat .tick{ width:17px; height:17px; margin-top:.3em; flex:none; stroke:var(--env-flash); }
.feat b{ color:var(--spec); font-variation-settings:"wdth" 100,"wght" 700; }

/* ==========================================================================
   14. Status
   ========================================================================== */
.banner{ display:flex; align-items:center; gap:1.15rem; padding:1.5rem 1.8rem; background:var(--chrome-lg-hot); }
.banner .dot{ width:11px; height:11px; }
.banner-text{ font-variation-settings:"wdth" 112,"wght" 700; font-size:clamp(1.1rem,2vw,1.45rem); color:var(--spec); }
.banner-time{ margin-left:auto; text-align:right; }

.svc{ padding:1.45rem 1.6rem; }
.svc + .svc{ margin-top:.7rem; }
.svc-top{ display:flex; align-items:center; gap:1rem; flex-wrap:wrap; }
.svc-name{ font-variation-settings:"wdth" 108,"wght" 700; color:var(--spec); font-size:1.02rem; }
.svc-state{ margin-left:auto; }

.bars{ display:flex; gap:2px; margin-top:1.05rem; height:32px; align-items:stretch; }
.bar{
  flex:1 1 0; min-width:0; border-radius:2px;
  background:linear-gradient(180deg,#5cf0ae,#2ba46f);
  opacity:.62; transform-origin:bottom;
  transition:opacity .16s var(--ease-out), transform .16s var(--ease-out);
}
.bar:hover{ opacity:1; transform:scaleY(1.16); }
.bar[data-state="updating"]{ background:linear-gradient(180deg,#f7d071,#c9962c); }
.bar[data-state="down"]{ background:linear-gradient(180deg,#ff7278,#c93940); }
.bar[data-state="none"]{ background:rgba(255,255,255,.07); }
.bars-legend{ display:flex; justify-content:space-between; margin-top:.6rem; font-size:.72rem; color:var(--ash-faint); font-variation-settings:"wdth" 88,"wght" 600; }
@media (max-width:700px){ .bar:nth-child(n+61){ display:none; } }

.log{ border-top:1px solid var(--hair-soft); }
.log-item{ display:grid; grid-template-columns:140px minmax(0,1fr); gap:1.5rem; padding:1.25rem 0; border-bottom:1px solid var(--hair-soft); }
.log-item time{ color:var(--ash-dim); font-size:.85rem; font-variation-settings:"wdth" 90,"wght" 600; padding-top:.2rem; }
.log-item h3{ font-size:1.2rem; }
.log-item p{ margin-top:.35rem; font-size:.95rem; }
@media (max-width:600px){ .log-item{ grid-template-columns:1fr; gap:.4rem; } }

/* ==========================================================================
   15. CTA slab
   ========================================================================== */
.slab{ padding:clamp(2.6rem,6vw,4.8rem); text-align:center; background:var(--chrome-lg-hot); }
.slab::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(66% 128% at 50% -8%, rgba(255,255,255,.10), transparent 62%);
}
.slab .t-h2{ max-width:20ch; margin-inline:auto; }
.slab p{ max-width:52ch; margin:1.1rem auto 0; }
.slab .btn{ margin-top:2.2rem; }

/* ==========================================================================
   16. Footer
   ========================================================================== */
.foot{ position:relative; border-top:1px solid var(--hair-soft); padding-block:3.8rem 2.5rem; }
.foot-grid{ display:grid; grid-template-columns:2fr repeat(2,1fr); gap:2.5rem; }
@media (max-width:760px){ .foot-grid{ grid-template-columns:1fr 1fr; } .foot-brand{ grid-column:1/-1; } }
.foot h3{ font-variation-settings:"wdth" 92,"wght" 700; font-size:.8125rem; color:var(--ash-dim); margin-bottom:1.05rem; }
.foot li + li{ margin-top:.62rem; }
.foot a{ color:var(--ash); font-size:.9375rem; transition:color .2s var(--ease-out); }
.foot a:hover{ color:var(--spec); }
.foot-base{
  display:flex; justify-content:space-between; gap:1.5rem; flex-wrap:wrap;
  margin-top:3rem; padding-top:1.5rem; border-top:1px solid var(--hair-soft);
  font-size:.8125rem; color:var(--ash-faint);
}
.foot-note{ max-width:46ch; margin-top:1.15rem; font-size:.85rem; line-height:1.55; color:var(--ash-faint); }

/* ==========================================================================
   17. Reveal
   ========================================================================== */
[data-reveal]{ transition:opacity .8s var(--ease-out), transform .8s var(--ease-out), filter .8s var(--ease-out); }
[data-reveal].pre{ opacity:0; transform:translateY(20px); filter:blur(6px); }
@media (prefers-reduced-motion: reduce){
  [data-reveal].pre{ opacity:1; transform:none; filter:none; transition:none; }
}

/* ==========================================================================
   18. Motion override — ?motion=1 undoes the reduced-motion rules above,
   so the full sequence can be previewed on a machine with OS animation
   effects switched off. Opt-in only; never overrides a visitor's setting.
   ========================================================================== */
.force-motion{ scroll-behavior:smooth; }
.force-motion .dot-pulse{ animation:pulse 2.8s var(--ease-io) infinite; }
.force-motion.no-webgl .hero-fallback{ animation:breathe 7s var(--ease-io) infinite; }
.force-motion .cue::after{ animation:drain 2.8s var(--ease-io) infinite; opacity:1; }
.force-motion [data-reveal].pre{ opacity:0; transform:translateY(20px); filter:blur(6px); transition:opacity .8s var(--ease-out), transform .8s var(--ease-out), filter .8s var(--ease-out); }
.force-motion .wm-in .ch{
  opacity:0; transform:translateY(.42em) rotateX(-58deg);
  animation:wmRise .95s var(--ease-out) forwards; animation-delay:var(--d,0s);
}