/* ============================================================
   MARLI AND MOE — CARE OPERATING SYSTEM
   style.css — design tokens, shared engine, landing page
   Vanilla CSS · no frameworks · relative paths only
   ============================================================ */

/* ---------- 1. Design tokens ---------- */
:root{
  /* palette — warm ink canvas, single electric-warm accent */
  --ink:        #141412;
  --ink-2:      #1b1b19;
  --ink-3:      #232320;
  --paper:      #f7f4ee;
  --paper-dim:  #bdb9ae;
  --muted:      #8e8b84;
  --accent:     #ff5e2b;
  --accent-deep:#d9431a;
  --accent-soft:rgba(255,94,43,.14);
  --hairline:   rgba(247,244,238,.14);
  --hairline-soft: rgba(247,244,238,.08);

  /* light (product) tokens — used by app.html / portal.html via app.css */
  --bg:         #faf9f5;
  --surface:    #ffffff;
  --text:       #1b1a17;
  --text-2:     #5c594f;
  --line:       #e6e3da;
  --ok:         #2f9e6e;
  --warn:       #d98a1f;
  --crit:       #d6453d;
  --info:       #3e7cb1;

  /* type */
  --font-sans: "Neue Haas Grotesk Display","Helvetica Neue",Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --font-mono: ui-monospace,"SF Mono","JetBrains Mono","Roboto Mono",Menlo,Consolas,monospace;

  /* spacing scale (8px base) */
  --s1:.5rem; --s2:1rem; --s3:1.5rem; --s4:2rem; --s6:3rem; --s8:4rem; --s12:6rem; --s16:8rem;

  /* motion */
  --ease-out:  cubic-bezier(.16,1,.3,1);
  --ease-io:   cubic-bezier(.65,0,.35,1);
  --ease-quart:cubic-bezier(.165,.84,.44,1);
  --dur:.6s;

  --radius:14px;
  --pad: clamp(1.25rem, 4vw, 6rem); /* section horizontal padding */
}

/* ---------- 2. Reset & base ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
html.lenis{ scroll-behavior:auto; }          /* JS smooth-scroll takes over */
body{
  background:var(--ink);
  color:var(--paper);
  font-family:var(--font-sans);
  font-size:1rem; line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  min-height:100vh;
}
img,svg,canvas,video{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
ul,ol{ list-style:none; }
::selection{ background:var(--accent); color:var(--ink); }

/* film-grain overlay (SVG turbulence, no external asset) */
body::after{
  content:""; position:fixed; inset:0; z-index:9990; pointer-events:none;
  opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* focus + a11y */
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; }
.skip-link{
  position:fixed; top:-60px; left:1rem; z-index:10001;
  background:var(--accent); color:var(--ink); padding:.6rem 1rem; border-radius:8px;
  font-family:var(--font-mono); font-size:.8rem; transition:top .25s var(--ease-out);
}
.skip-link:focus{ top:1rem; }

/* thin themed scrollbar */
::-webkit-scrollbar{ width:8px; height:8px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:var(--ink-3); border-radius:99px; }
body.is-light ::-webkit-scrollbar-thumb{ background:#d8d4c8; }

/* ---------- 3. Custom cursor ---------- */
.cursor-dot,.cursor-ring{
  position:fixed; top:0; left:0; z-index:10000; pointer-events:none;
  border-radius:50%; transform:translate(-50%,-50%);
}
.cursor-dot{ width:6px; height:6px; background:var(--accent); }
.cursor-ring{
  width:36px; height:36px; border:1px solid var(--paper-dim);
  display:flex; align-items:center; justify-content:center;
  transition:width .3s var(--ease-out),height .3s var(--ease-out),
             background-color .3s,border-color .3s;
}
.cursor-ring .cursor-label{
  font-family:var(--font-mono); font-size:.6rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink); opacity:0; transition:opacity .2s; white-space:nowrap;
}
.cursor-ring.is-active{ width:64px; height:64px; border-color:var(--accent); }
.cursor-ring.has-label{ width:76px; height:76px; background:var(--accent); border-color:var(--accent); }
.cursor-ring.has-label .cursor-label{ opacity:1; }
@media (hover:none),(pointer:coarse){ .cursor-dot,.cursor-ring{ display:none; } }

/* ---------- 4. Preloader ---------- */
.preloader{
  position:fixed; inset:0; z-index:9999; background:var(--ink);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.25rem;
  transition:transform .9s var(--ease-io);
}
.preloader.is-done{ transform:translateY(-100%); }
.preloader__mark{ font-weight:600; letter-spacing:-.02em; font-size:1.35rem; display:flex; align-items:baseline; gap:.5rem; }
.preloader__mark i{ width:9px; height:9px; border-radius:50%; background:var(--accent); display:inline-block; }
.preloader__count{
  font-family:var(--font-mono); font-size:clamp(3rem,9vw,6.5rem); line-height:1;
  font-feature-settings:"tnum"; color:var(--paper); letter-spacing:-.04em;
}
.preloader__bar{ width:min(320px,60vw); height:1px; background:var(--hairline); overflow:hidden; }
.preloader__bar span{ display:block; height:100%; width:0%; background:var(--accent); }
.preloader__tag{ font-family:var(--font-mono); font-size:.68rem; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); }

/* ---------- 5. Page transition wipe ---------- */
.wipe{
  position:fixed; inset:0; z-index:9998; background:var(--accent);
  transform:scaleY(0); transform-origin:bottom; pointer-events:none;
}
.wipe.is-in{  animation:wipeIn .55s var(--ease-io) forwards; }
.wipe.is-out{ animation:wipeOut .55s var(--ease-io) forwards; }
@keyframes wipeIn { from{transform:scaleY(0);transform-origin:bottom} to{transform:scaleY(1);transform-origin:bottom} }
@keyframes wipeOut{ from{transform:scaleY(1);transform-origin:top}    to{transform:scaleY(0);transform-origin:top} }

/* ---------- 6. Buttons & links ---------- */
.btn{
  position:relative; display:inline-flex; align-items:center; gap:.6rem;
  padding:.95rem 1.7rem; border-radius:999px; overflow:hidden;
  font-size:.95rem; font-weight:550; letter-spacing:.01em; line-height:1;
  border:1px solid transparent; white-space:nowrap;
  transition:background-color .3s,border-color .3s,color .3s;
}
.btn .btn__swap{ position:relative; display:block; overflow:hidden; height:1em; }
.btn .btn__swap > span{ display:block; transition:transform .38s var(--ease-io); }
.btn .btn__swap > span:last-child{ position:absolute; top:100%; left:0; width:100%; }
.btn:hover .btn__swap > span:first-child{ transform:translateY(-100%); }
.btn:hover .btn__swap > span:last-child { transform:translateY(-100%); }
.btn .arrow{ transition:transform .3s var(--ease-out); display:inline-block; }
.btn:hover .arrow{ transform:translateX(3px); }

.btn--primary{ background:var(--accent); color:var(--ink); }
.btn--primary:hover{ background:var(--accent-deep); color:var(--paper); }
.btn--ghost{ border-color:var(--hairline); color:var(--paper); }
.btn--ghost:hover{ border-color:var(--paper); }
.btn--sm{ padding:.6rem 1.1rem; font-size:.82rem; }

/* underline sweep — grows right→left */
.link-u{
  background:linear-gradient(currentColor,currentColor) 0 100% / 0 1px no-repeat;
  background-position:100% 100%;
  transition:background-size .45s var(--ease-out) .05s;
  padding-bottom:2px;
}
.link-u:hover{ background-size:100% 1px; background-position:0 100%; }

/* eyebrow pill */
.pill{
  display:inline-flex; align-items:center; gap:.55rem;
  font-family:var(--font-mono); font-size:.66rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--paper-dim); border:1px solid var(--hairline); border-radius:999px; padding:.45rem .95rem;
}
.pill i{ width:6px; height:6px; border-radius:50%; background:var(--accent); }
.pill--live i{ animation:pulse 1.6s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{opacity:1; transform:scale(1)} 50%{opacity:.35; transform:scale(.7)} }

/* ---------- 7. Landing header ---------- */
.site-head{
  position:fixed; top:0; left:0; right:0; z-index:900;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.1rem var(--pad);
  transition:background-color .4s,border-color .4s,backdrop-filter .4s;
  border-bottom:1px solid transparent;
}
.site-head.is-scrolled{
  background:rgba(20,20,18,.72);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
  backdrop-filter:blur(14px) saturate(1.4);
  border-bottom-color:var(--hairline-soft);
}
.brand{ display:flex; align-items:center; gap:.65rem; font-weight:600; letter-spacing:-.01em; font-size:1.02rem; }
.brand__dot{ width:10px; height:10px; border-radius:50%; background:var(--accent); }
.brand small{ font-family:var(--font-mono); font-size:.6rem; letter-spacing:.18em; color:var(--muted); text-transform:uppercase; }
.site-nav{ display:flex; align-items:center; gap:2rem; }
.site-nav a.nav-link{ font-size:.9rem; color:var(--paper-dim); }
.site-nav a.nav-link:hover{ color:var(--paper); }
@media (max-width:860px){ .site-nav .nav-link{ display:none; } }

/* ---------- 8. Hero ---------- */
.hero{
  position:relative; min-height:100vh; min-height:100svh;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:clamp(5.5rem,12vh,8rem) var(--pad) clamp(2rem,5vh,4rem);
  overflow:hidden;
}
#hero-canvas{ position:absolute; inset:0; width:100%; height:100%; }
.hero__fallback{ /* shown when canvas unavailable */
  position:absolute; inset:0;
  background:radial-gradient(60% 55% at 70% 30%, rgba(255,94,43,.16), transparent 65%),
             radial-gradient(40% 40% at 20% 80%, rgba(255,94,43,.07), transparent 60%);
}
.hero__inner{ position:relative; z-index:2; }
.hero__pill{ margin-bottom:1.6rem; }
.hero h1{
  font-size:clamp(3rem,10vw,9rem);
  line-height:.94; letter-spacing:-.045em; font-weight:600;
  max-width:14ch; margin-bottom:1.8rem;
}
.hero h1 .accent{ color:var(--accent); }
.hero h1 .dim{ color:var(--paper-dim); }
.hero__sub{
  max-width:46ch; color:var(--paper-dim); font-size:clamp(1rem,1.4vw,1.2rem);
  margin-bottom:2.4rem;
}
.hero__cta{ display:flex; flex-wrap:wrap; gap:1rem; align-items:center; }
.hero__meta{
  position:relative; z-index:2; margin-top:clamp(2.5rem,6vh,5rem); padding-top:1.4rem;
  border-top:1px solid var(--hairline-soft);
  display:flex; flex-wrap:wrap; gap:2.5rem;
  font-family:var(--font-mono); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
}
.hero__meta b{ color:var(--paper); font-weight:500; display:block; font-size:.78rem; margin-top:.3rem; letter-spacing:.08em; }
.scroll-cue{
  position:absolute; right:var(--pad); bottom:clamp(2rem,5vh,4rem); z-index:2;
  font-family:var(--font-mono); font-size:.62rem; letter-spacing:.3em; text-transform:uppercase; color:var(--muted);
  writing-mode:vertical-rl; display:flex; align-items:center; gap:.8rem;
}
.scroll-cue::after{ content:""; width:1px; height:52px; background:linear-gradient(var(--accent),transparent); animation:cue 2.2s var(--ease-io) infinite; }
@keyframes cue{ 0%{transform:scaleY(0);transform-origin:top} 45%{transform:scaleY(1);transform-origin:top} 55%{transform:scaleY(1);transform-origin:bottom} 100%{transform:scaleY(0);transform-origin:bottom} }
@media (max-width:700px){ .scroll-cue{ display:none; } }

/* split-text primitives (JS wraps chars/lines) */
.g-line{ display:block; overflow:hidden; }
.g-char{ display:inline-block; transform:translateY(110%); transition:transform .8s var(--ease-out); }
.g-char.is-in{ transform:translateY(0); }

/* generic scroll reveal */
[data-reveal]{ opacity:0; transform:translate3d(0,44px,0); transition:opacity .7s ease,transform .9s var(--ease-out); transition-delay:var(--d,0s); }
[data-reveal].is-in{ opacity:1; transform:translateZ(0); }

/* ---------- 9. Marquee ---------- */
.marquee{
  border-top:1px solid var(--hairline-soft); border-bottom:1px solid var(--hairline-soft);
  overflow:hidden; padding:1.1rem 0; background:var(--ink-2);
}
.marquee__track{ display:flex; gap:3rem; width:max-content; animation:marq 36s linear infinite; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
.marquee__track span{
  font-family:var(--font-mono); font-size:.74rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--paper-dim); display:flex; align-items:center; gap:3rem; white-space:nowrap;
}
.marquee__track span::after{ content:""; width:7px; height:7px; border-radius:50%; background:var(--accent); }
@keyframes marq{ to{ transform:translateX(-50%); } }

/* ---------- 10. Section scaffolding ---------- */
.section{ padding:var(--s16) var(--pad); position:relative; }
.section__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; margin-bottom:var(--s8); flex-wrap:wrap; }
.section__head h2{ font-size:clamp(2.2rem,5.4vw,4.6rem); line-height:1; letter-spacing:-.035em; font-weight:600; max-width:18ch; }
.section__head h2 .accent{ color:var(--accent); }
.section__index{ font-family:var(--font-mono); font-size:.68rem; letter-spacing:.2em; color:var(--muted); text-transform:uppercase; }

/* ---------- 11. Problem / stats ---------- */
.problem{ border-top:1px solid var(--hairline-soft); }
.problem__grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:1px; background:var(--hairline-soft); border:1px solid var(--hairline-soft); }
.stat{
  background:var(--ink); padding:2.2rem 1.8rem 1.9rem; grid-column:span 3;
  display:flex; flex-direction:column; gap:.9rem; min-height:220px; justify-content:space-between;
  transition:background-color .4s;
}
.stat:hover{ background:var(--ink-2); }
.stat__num{ font-size:clamp(2.6rem,4.6vw,4.2rem); font-weight:600; letter-spacing:-.04em; line-height:1; font-feature-settings:"tnum"; }
.stat__num sup{ font-size:.35em; color:var(--accent); letter-spacing:0; }
.stat__label{ font-family:var(--font-mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); line-height:1.7; }
@media (max-width:1024px){ .stat{ grid-column:span 6; min-height:180px; } }
@media (max-width:560px){ .stat{ grid-column:span 12; min-height:0; } }
.problem__note{ margin-top:2.2rem; max-width:52ch; color:var(--paper-dim); font-size:1.05rem; }
.problem__note b{ color:var(--paper); font-weight:550; }

/* ---------- 12. Sticky stacking module cards ---------- */
.stack{ position:relative; }
.stack__item{
  position:sticky; top:calc(6rem + var(--i)*1.4rem);
  margin-bottom:2.2rem;
}
.module-card{
  background:var(--ink-2); border:1px solid var(--hairline);
  border-radius:20px; padding:clamp(1.6rem,3.5vw,3.2rem);
  display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(1.5rem,4vw,4rem); align-items:center;
  min-height:min(62vh,560px); overflow:hidden; position:relative;
  transform-origin:center top;
}
.module-card::before{
  content:attr(data-num); position:absolute; top:1.4rem; right:1.8rem;
  font-family:var(--font-mono); font-size:.72rem; color:var(--muted); letter-spacing:.2em;
}
.module-card h3{ font-size:clamp(1.7rem,3.2vw,2.7rem); letter-spacing:-.03em; line-height:1.05; margin-bottom:1.1rem; font-weight:600; }
.module-card h3 .accent{ color:var(--accent); }
.module-card p{ color:var(--paper-dim); max-width:44ch; margin-bottom:1.6rem; }
.module-card ul{ display:flex; flex-direction:column; gap:.55rem; }
.module-card ul li{
  font-family:var(--font-mono); font-size:.74rem; letter-spacing:.08em; color:var(--paper-dim);
  display:flex; gap:.7rem; align-items:baseline;
}
.module-card ul li::before{ content:"→"; color:var(--accent); }
.module-card__visual{
  border:1px solid var(--hairline); border-radius:14px; background:var(--ink);
  min-height:280px; padding:1.2rem; display:flex; flex-direction:column; gap:.7rem; justify-content:center;
}
/* mini UI vignettes inside module cards */
.vign-row{ display:flex; align-items:center; gap:.7rem; padding:.62rem .8rem; border:1px solid var(--hairline-soft); border-radius:10px; background:var(--ink-2); }
.vign-row .dot{ width:8px; height:8px; border-radius:50%; background:var(--accent); flex:none; }
.vign-row .dot.ok{ background:var(--ok); } .vign-row .dot.warn{ background:var(--warn); } .vign-row .dot.crit{ background:var(--crit); }
.vign-row .vign-txt{ flex:1; }
.vign-row .vign-txt b{ display:block; font-size:.78rem; font-weight:550; }
.vign-row .vign-txt span{ font-family:var(--font-mono); font-size:.62rem; color:var(--muted); letter-spacing:.06em; }
.vign-bar{ height:6px; border-radius:99px; background:var(--ink-3); overflow:hidden; flex:1; }
.vign-bar i{ display:block; height:100%; border-radius:99px; background:var(--accent); width:var(--w,50%); transition:width 1.2s var(--ease-out); }
.vign-bar i.ok{ background:var(--ok);} .vign-bar i.warn{ background:var(--warn);} .vign-bar i.crit{ background:var(--crit);}
.vign-tag{ font-family:var(--font-mono); font-size:.6rem; letter-spacing:.1em; padding:.28rem .6rem; border-radius:99px; border:1px solid var(--hairline); color:var(--paper-dim); white-space:nowrap; }
.vign-tag.hot{ border-color:var(--accent); color:var(--accent); }
@media (max-width:900px){ .module-card{ grid-template-columns:1fr; min-height:0; } }

/* ---------- 13. Horizontal scroll journey ---------- */
.journey{ overflow:hidden; position:relative; }
.journey__pin{
  position:sticky; top:0; height:100vh; height:100svh;
  display:flex; flex-direction:column; justify-content:center; overflow:hidden;
}
.journey__track{
  display:flex; gap:1.4rem; padding:0 var(--pad);
  will-change:transform; width:max-content;
}
.j-card{
  width:min(78vw,460px); flex:none; border:1px solid var(--hairline); border-radius:20px;
  background:var(--ink-2); padding:2.2rem 2rem; min-height:380px;
  display:flex; flex-direction:column; justify-content:space-between; gap:2rem;
}
.j-card__stage{ font-family:var(--font-mono); font-size:.66rem; letter-spacing:.22em; color:var(--accent); text-transform:uppercase; }
.j-card h3{ font-size:clamp(1.5rem,2.4vw,2rem); letter-spacing:-.025em; line-height:1.08; font-weight:600; }
.j-card p{ color:var(--paper-dim); font-size:.95rem; }
.j-card__meta{ font-family:var(--font-mono); font-size:.64rem; color:var(--muted); letter-spacing:.12em; text-transform:uppercase; border-top:1px solid var(--hairline-soft); padding-top:1rem; }
.j-card--end{ background:var(--accent); color:var(--ink); border-color:var(--accent); }
.j-card--end p{ color:rgba(20,20,18,.75); }
.j-card--end .j-card__stage{ color:var(--ink); }
.j-card--end .j-card__meta{ border-top-color:rgba(20,20,18,.25); color:rgba(20,20,18,.7); }

/* ---------- 14. Product showcase (CSS-built mockup) ---------- */
.showcase{ border-top:1px solid var(--hairline-soft); }
.mock{
  border:1px solid var(--hairline); border-radius:20px; overflow:hidden;
  background:var(--ink-2);
  transform:scale(.92); opacity:.4; transition:transform 1s var(--ease-out),opacity 1s ease;
}
.mock.is-in{ transform:scale(1); opacity:1; }
.mock__chrome{
  display:flex; align-items:center; gap:.5rem; padding:.85rem 1.2rem;
  border-bottom:1px solid var(--hairline-soft);
}
.mock__chrome i{ width:10px; height:10px; border-radius:50%; background:var(--ink-3); }
.mock__chrome i:first-child{ background:var(--accent); }
.mock__url{
  margin-left:.8rem; flex:1; max-width:340px; text-align:center;
  font-family:var(--font-mono); font-size:.62rem; letter-spacing:.08em; color:var(--muted);
  border:1px solid var(--hairline-soft); border-radius:99px; padding:.3rem 1rem;
}
.mock__body{ display:grid; grid-template-columns:200px 1fr; min-height:460px; }
.mock__rail{ border-right:1px solid var(--hairline-soft); padding:1.2rem .9rem; display:flex; flex-direction:column; gap:.4rem; }
.mock__rail span{
  font-family:var(--font-mono); font-size:.62rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); padding:.5rem .7rem; border-radius:8px;
}
.mock__rail span.on{ background:var(--accent-soft); color:var(--accent); }
.mock__main{ padding:1.4rem; display:flex; flex-direction:column; gap:1rem; }
.mock__kpis{ display:grid; grid-template-columns:repeat(4,1fr); gap:.8rem; }
.mock__kpi{ border:1px solid var(--hairline-soft); border-radius:12px; padding:.9rem; }
.mock__kpi b{ font-size:1.35rem; letter-spacing:-.03em; font-feature-settings:"tnum"; display:block; }
.mock__kpi span{ font-family:var(--font-mono); font-size:.56rem; letter-spacing:.14em; color:var(--muted); text-transform:uppercase; }
.mock__cols{ display:grid; grid-template-columns:repeat(3,1fr); gap:.8rem; flex:1; }
.mock__col{ border:1px solid var(--hairline-soft); border-radius:12px; padding:.8rem; display:flex; flex-direction:column; gap:.6rem; }
.mock__col h4{ font-family:var(--font-mono); font-size:.58rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); display:flex; justify-content:space-between; }
.mock__card{ border:1px solid var(--hairline-soft); border-radius:9px; padding:.6rem .7rem; background:var(--ink); }
.mock__card b{ font-size:.72rem; font-weight:550; display:block; }
.mock__card span{ font-family:var(--font-mono); font-size:.56rem; color:var(--muted); letter-spacing:.05em; }
@media (max-width:860px){ .mock__body{ grid-template-columns:1fr; } .mock__rail{ flex-direction:row; overflow-x:auto; border-right:0; border-bottom:1px solid var(--hairline-soft); } .mock__kpis{ grid-template-columns:repeat(2,1fr);} .mock__cols{ grid-template-columns:1fr; } }

/* ---------- 15. Numbers band ---------- */
.numbers{ border-top:1px solid var(--hairline-soft); display:grid; grid-template-columns:repeat(3,1fr); }
.num{
  padding:clamp(2rem,4vw,4rem) var(--pad); border-right:1px solid var(--hairline-soft);
}
.num:last-child{ border-right:0; }
.num b{ font-size:clamp(2.6rem,6vw,5.4rem); font-weight:600; letter-spacing:-.045em; line-height:1; display:block; font-feature-settings:"tnum"; }
.num b i{ font-style:normal; color:var(--accent); }
.num span{ font-family:var(--font-mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); display:block; margin-top:1rem; line-height:1.8; }
@media (max-width:860px){ .numbers{ grid-template-columns:1fr; } .num{ border-right:0; border-bottom:1px solid var(--hairline-soft); } }

/* ---------- 16. Final CTA + footer ---------- */
.cta-band{
  position:relative; overflow:hidden; text-align:center;
  padding:var(--s16) var(--pad);
  background:radial-gradient(70% 90% at 50% 120%, rgba(255,94,43,.22), transparent 65%), var(--ink);
  border-top:1px solid var(--hairline-soft);
}
.cta-band h2{ font-size:clamp(2.6rem,7vw,6.5rem); letter-spacing:-.04em; line-height:.98; font-weight:600; margin-bottom:1.4rem; }
.cta-band p{ color:var(--paper-dim); max-width:48ch; margin:0 auto 2.6rem; }
.cta-band .hero__cta{ justify-content:center; }
.site-foot{
  border-top:1px solid var(--hairline-soft); padding:3.5rem var(--pad) 2.5rem;
  display:flex; flex-direction:column; gap:3rem;
}
.site-foot__top{ display:flex; justify-content:space-between; gap:3rem; flex-wrap:wrap; }
.site-foot__brand{ font-size:clamp(2.2rem,6vw,4.5rem); font-weight:600; letter-spacing:-.04em; line-height:1; }
.site-foot__brand i{ color:var(--accent); font-style:normal; }
.site-foot__cols{ display:flex; gap:4rem; flex-wrap:wrap; }
.site-foot__col h5{ font-family:var(--font-mono); font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin-bottom:1rem; }
.site-foot__col li{ margin-bottom:.55rem; font-size:.92rem; color:var(--paper-dim); }
.site-foot__col li a:hover{ color:var(--paper); }
.site-foot__base{
  display:flex; justify-content:space-between; gap:1.5rem; flex-wrap:wrap;
  border-top:1px solid var(--hairline-soft); padding-top:1.6rem;
  font-family:var(--font-mono); font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted);
}

/* ---------- 17. Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  html{ scroll-behavior:auto; }
  [data-reveal],.g-char{ opacity:1 !important; transform:none !important; }
  .marquee__track{ animation:none; }
  .scroll-cue::after{ animation:none; }
}