
:root{
 --void:#05060B; --field:#0A0D14; --edge:#141A26;
 --cyan-hi:#96E6F0; --cyan:#7ADCEC; --azure:#50B4E6;
 --blue:#326EBE; --peri:#8B9BF5; --violet:#9B7BF0;
 --aura:linear-gradient(135deg,var(--cyan-hi) 0%,var(--cyan) 24%,var(--azure) 48%,
 var(--blue) 64%,var(--peri) 84%,var(--violet) 100%);
 --mist:#DCE6F0; --haze:#7E8A9C; --dim:#727e96;
 --display:"Space Grotesk","Avenir Next",Avenir,"Segoe UI Variable Display",ui-sans-serif,system-ui,sans-serif;
 --mono:ui-monospace,SFMono-Regular,"JetBrains Mono",Menlo,Consolas,monospace;
 --reveal:1.6s; --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box;border-radius:0;box-shadow:none}
html,body{overflow-x:hidden;max-width:100%}
body{margin:0;background:var(--void);color:var(--mist);
 font-family:var(--display);font-weight:400;font-size:16px;line-height:1.6;
 -webkit-font-smoothing:antialiased}
.w{max-width:1140px;margin:0 auto;padding:0 26px}
a{color:var(--cyan);text-decoration:none}
a:focus-visible,button:focus-visible{outline:2px solid var(--cyan);outline-offset:4px}
.eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;
 color:var(--haze);margin:0}

/* ── HERO ─────────────────────────────────────────────────────────── */
.hero{padding:104px 0 76px;border-bottom:1px solid var(--edge);position:relative}
.line{font-size:clamp(34px,6.4vw,68px);line-height:1.02;letter-spacing:-.03em;
 font-weight:500;margin:26px 0 0;max-width:15ch}
.line .fut{background:var(--aura);-webkit-background-clip:text;background-clip:text;
 color:transparent}
.line .past{color:var(--mist)}
.sub{max-width:52ch;color:var(--haze);font-size:17.5px;margin:26px 0 0;line-height:1.62}
.sub b{color:var(--mist);font-weight:500}

/* ── THE SIGNATURE: one object, two records, one traced answer ────── */
.obj{margin:56px 0 0;border-top:1px solid var(--edge)}
.obj-cap{display:flex;justify-content:space-between;padding:14px 0 22px;
 font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
 color:var(--haze)}
.recs{display:grid;grid-template-columns:1fr 1px 1fr;gap:0;align-items:stretch}
.rec{padding:26px 30px 28px;background:var(--field);border:1px solid var(--edge)}
.rec:last-child{border-left:0}
.split{background:var(--edge)}
.sys{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
 color:var(--azure);margin:0 0 16px}
.val{font-family:var(--mono);font-size:clamp(24px,3.6vw,34px);letter-spacing:-.02em;
 color:var(--mist);line-height:1;margin:0}
.dat{font-family:var(--mono);font-size:11px;color:var(--haze);margin:14px 0 0}

.gap{margin:0;border:1px solid var(--edge);border-top:0;background:var(--void);
 padding:30px;display:grid;grid-template-columns:auto 1fr auto;gap:26px;align-items:center}
.gap-n{font-family:var(--mono);font-size:clamp(26px,4.2vw,40px);letter-spacing:-.02em;
 color:var(--violet);line-height:1;margin:0}
.gap-l{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
 color:var(--violet);margin:0 0 9px}
.gap-t{color:var(--haze);font-size:14.5px;margin:0;max-width:44ch;line-height:1.6}
.gap-b{align-self:stretch;width:1px;background:var(--aura)}

.res{border:1px solid var(--edge);border-top:0;padding:26px 30px;
 display:flex;flex-wrap:wrap;gap:12px 34px;align-items:baseline}
.res .k{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
 color:var(--cyan)}
.res .v{font-family:var(--mono);font-size:14px;color:var(--mist)}

.cta-row{display:flex;flex-wrap:wrap;gap:14px;margin:44px 0 0;align-items:center}
.cta{background:var(--aura);color:var(--void);font-weight:600;font-size:15px;
 padding:15px 28px;display:inline-block;font-family:var(--display);letter-spacing:-.01em}
.cta2{color:var(--haze);font-size:14.5px;padding:15px 0;font-family:var(--mono);
 letter-spacing:.04em}
.cta2:hover{color:var(--mist)}
.terms{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
 color:var(--haze);margin:22px 0 0}

/* ── THE DUALITY ──────────────────────────────────────────────────── */
section{padding:82px 0;border-bottom:1px solid var(--edge)}
h2{font-size:clamp(24px,3.4vw,36px);font-weight:500;letter-spacing:-.03em;margin:0;
 max-width:20ch;line-height:1.1}
.two{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--edge);
 border:1px solid var(--edge);margin:44px 0 0}
.col{background:var(--field);padding:34px 32px 38px}
.col h3{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
 margin:0 0 24px;font-weight:400}
.col.past h3{color:var(--azure)}
.col.future h3{color:var(--cyan)}
.col ul{list-style:none;margin:0;padding:0}
.col li{padding:15px 0;border-bottom:1px solid var(--edge);color:var(--mist);font-size:16px}
.col li:last-child{border-bottom:0}
.col li span{display:block;color:var(--haze);font-size:13.5px;margin-top:5px;font-family:var(--mono)}

/* ── THE LOOP ─────────────────────────────────────────────────────── */
.loop{display:grid;grid-template-columns:repeat(8,1fr);gap:1px;background:var(--edge);
 border:1px solid var(--edge);margin:44px 0 0}
.st{background:var(--field);padding:22px 16px 26px;position:relative}
.st .n{font-family:var(--mono);font-size:10px;color:var(--haze);letter-spacing:.14em}
.st .t{font-size:14px;margin:12px 0 0;color:var(--mist);line-height:1.35;letter-spacing:-.01em}
.st,.on{background:#0C1119}
.st.on .t{color:var(--cyan)}
.loop-note{color:var(--haze);font-size:15px;margin:26px 0 0;max-width:60ch}

/* ── PROOF STRIP ──────────────────────────────────────────────────── */
.strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1px;
 background:var(--edge);border:1px solid var(--edge);margin:44px 0 0}
.cell{background:var(--field);padding:24px 22px}
.cell .n{font-family:var(--mono);font-size:26px;letter-spacing:-.02em;color:var(--cyan);
 display:block;line-height:1}
.cell .l{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
 color:var(--haze);margin-top:11px;display:block;line-height:1.5}

footer{padding:52px 0 76px;font-family:var(--mono);font-size:11.5px;color:var(--haze);
 line-height:2}
footer a{color:var(--haze)}

@media(max-width:820px){
 .recs{grid-template-columns:1fr}
 .rec:last-child{border-left:1px solid var(--edge);border-top:0}
 .split{display:none}
 .gap{grid-template-columns:1fr;gap:18px}
 .gap-b{width:100%;height:1px}
 .two{grid-template-columns:1fr}
 .loop{grid-template-columns:repeat(2,1fr)}
}
@media(prefers-reduced-motion:no-preference){
 .rv{opacity:0;transform:translateY(12px);animation:rv var(--reveal) var(--ease) both}
 .rv2{animation-delay:.28s}.rv3{animation-delay:.56s}.rv4{animation-delay:.84s}
 @keyframes rv{to{opacity:1;transform:none}}
}

/* R147 HERO CADENCE ---------------------------------------------------------
   "Embracing the future" carries the aura gradient and arrives first. The
   second line is the quieter half of the sentence, so it should not land at
   the same instant or the same weight. It fades in slowly and separately
   after the first line has settled: 2.9s against the 1.6s base reveal,
   starting 0.62s later, with a barely-there upward drift and a slight
   letter-spacing settle so it reads as arriving rather than appearing.
   Deliberately subtle: at full opacity it is identical to before, so nothing
   about the finished state changed, only how it gets there.

   PLACEMENT NOTE: this lives in the page's own head style block, NOT at the
   final closing style tag in the file. The canonical nav block carries that
   one, so appending there put this inside the nav and every nav normalization
   silently stripped it. Caught by measuring the animation rather than
   trusting the class name to still be present. */
.as-past-fade{
  display:inline-block;
  opacity:0;
  transform:translateY(6px);
  letter-spacing:.012em;
  animation:asPastFade 2.9s cubic-bezier(.16,.68,.28,1) .62s both;
  will-change:opacity,transform;
}
@keyframes asPastFade{
  0%{opacity:0;transform:translateY(6px);letter-spacing:.012em;filter:blur(.4px)}
  60%{opacity:.72;filter:blur(0)}
  100%{opacity:1;transform:none;letter-spacing:normal;filter:blur(0)}
}
@media(prefers-reduced-motion:reduce){
  .as-past-fade{animation:none;opacity:1;transform:none;letter-spacing:normal;filter:none}
}
