/* Home page. Colours come from tokens.css only. */

.home { --neutral: var(--bg-panel); }

/* =========================================================
   HERO — sticky stage scrubbed by scroll (see home.js)
   ========================================================= */
.hero-track { position: relative; height: 390vh; } /* 100vh + HERO_SCROLL_SCREENS in home.js */
.hero-stage { position: sticky; top: 0; height: 100vh; overflow: hidden; background: var(--white); }

/* bars: a shared navy "screen" seen through the funnel of cells */
.hero-bars { position: absolute; inset: 0 0 auto; height: 70vh; z-index: 2; }
.hero-media {
  position: absolute; inset: 0; overflow: hidden;
  background:
    radial-gradient(circle, color-mix(in oklab, var(--navy-700) 80%, transparent) 1.1px, transparent 1.8px) 0 0 / 7px 7px,
    linear-gradient(180deg, color-mix(in oklab, var(--navy) 62%, var(--white)) 0%, var(--navy) 90%);
}
.hero-media::before { /* drifting light */
  content: ""; position: absolute; width: 60%; height: 90%; left: 20%; top: 0;
  background: radial-gradient(ellipse at center, color-mix(in oklab, var(--white) 38%, transparent), transparent 65%);
  animation: drift 16s var(--ease-in-out) infinite alternate;
}
.hero-halftone { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* enter: the ring of halftone bands (hero-intro.js), above the bars, under the copy */
.hero-intro { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; pointer-events: none; }
.hero-intro-logo {
  position: absolute; z-index: 3; font-size: clamp(2.2rem, 1.2rem + 3vw, 4.2rem); opacity: 0; pointer-events: none;
  transform: translate(-50%, -50%) scale(var(--logo-scale, 1));
}
/* once the live halftone runs, it replaces the CSS dots and light */
.hero-media.has-halftone { background: var(--navy); }
.hero-media.has-halftone::before { display: none; }
@keyframes drift { from { transform: translate(-22%, -6%) scale(0.9); } to { transform: translate(24%, 14%) scale(1.15); } }

.hero-grid { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(11, 1fr); grid-template-rows: repeat(5, 1fr); }
.cell { background: var(--white); }
.cell.is-bar { position: relative; overflow: hidden; background: transparent; border-right: 1px solid var(--white); }
.cell.is-bar b { position: absolute; inset: 0; background: var(--white); transform: scaleY(var(--f, 0)); transform-origin: top; }
/* enter: a white cover per bar cell, dropped by home.js once the intro tiles have landed */
.cell.is-bar::after { content: ""; position: absolute; inset: 0; background: var(--white); transform: scaleY(var(--hide, 0)); transform-origin: bottom; }
@media (prefers-reduced-motion: no-preference) {
  .hero-bars:not(.is-entered) .cell.is-bar { --hide: 1; }
  /* failsafe: if home.js never starts the wipe, uncover the bars anyway */
  .hero-bars:not(.is-entering, .is-entered) .cell.is-bar::after { animation: bars-failsafe 600ms var(--ease-out) 2.5s forwards; }
}
@keyframes bars-failsafe { to { transform: scaleY(0); } }

/* tick dial, blended so it only shows on white */
.hero-dial-wrap {
  position: absolute; left: 50%; top: 47vh; z-index: 3; width: min(50vw, 736px); aspect-ratio: 1;
  mix-blend-mode: darken; pointer-events: none;
  transform: translate(-50%, -50%) translateY(var(--dial-y, 0px)) perspective(1400px) rotateX(var(--dial-tilt, 0deg)) scale(var(--dial-scale, 1));
  opacity: calc(var(--dial-op, 1) * 0.1);
}
.hero-dial { width: 100%; height: 100%; overflow: visible; animation: spin 120s linear infinite; }
/* 60 short ticks / 40 dots, shown at 10% opacity */
.dial-ticks { stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; }
.dial-dots { fill: var(--ink); }

/* front copy: slides in as the enter animation lands (--in), fades out as the bars dissolve (--out) */
@property --in { syntax: "<number>"; inherits: false; initial-value: 1; }
.hero-copy, .hero-cta, .scroll-cue {
  opacity: calc((1 - var(--out, 0)) * var(--in));
  translate: 0 calc(var(--out, 0) * 48px + (1 - var(--in)) * 56px);
}
.ticker {
  opacity: calc((1 - var(--out, 0)) * var(--in));
  translate: calc(var(--out, 0) * (100% + 6rem) + (1 - var(--in)) * 64px) 0;
}
@media (prefers-reduced-motion: no-preference) {
  .hero-copy, .ticker, .hero-cta, .scroll-cue { transition: --in 1600ms var(--ease-out); }
  .ticker { transition-delay: 200ms; }
  .hero-cta { transition-delay: 400ms; }
  .scroll-cue { transition-delay: 700ms; }
  /* hidden until the intro is halfway through landing (.is-landing) or skipped (.is-entered) */
  .hero-bars:not(.is-landing, .is-entered) ~ :is(.hero-copy, .ticker, .hero-cta, .scroll-cue) { --in: 0; }
  /* failsafe: if hero-intro.js never starts, bring the copy in anyway */
  .hero-bars:not(.is-entering, .is-entered) ~ :is(.hero-copy, .ticker, .hero-cta, .scroll-cue) { animation: copy-failsafe 800ms var(--ease-out) 2.5s forwards; }
}
@keyframes copy-failsafe { to { --in: 1; } }
@keyframes spin { to { rotate: 360deg; } }

.hero-copy { position: absolute; z-index: 4; left: var(--gutter); bottom: 3.5vh; display: grid; gap: 1.5rem; justify-items: start; }
.hero-title { font-size: var(--text-hero); line-height: 1.02; letter-spacing: -0.035em; }
/* solid dark grey instead of the .heading gradient; the em ("Reality.") keeps its accent */
.hero-title {
  --hero-title-ink: color-mix(in oklab, var(--ink) 72%, var(--slate));
  background: none; color: var(--hero-title-ink); -webkit-text-fill-color: var(--hero-title-ink);
}

/* a self-running display, not a menu: no pointer, no hover-like indent, no hit target.
   The centred row lights up and a small bar under its icon fills while it holds (TICKER_MS in home.js). */
.ticker {
  --row: 47px; --tick: 2200ms;
  position: absolute; z-index: 4; right: var(--gutter); top: 47vh; height: calc(var(--row) * 5);
  padding-left: 48px; overflow: hidden; pointer-events: none; user-select: none;
  mask-image: linear-gradient(180deg, transparent, var(--black) 22%, var(--black) 78%, transparent);
}
.ticker__list { transform: translateY(var(--ty, 0px)); transition: transform 900ms var(--ease-out); }
.ticker__list.no-anim { transition: none; }
.ticker__item {
  position: relative; height: var(--row); display: flex; align-items: center; justify-content: flex-end; gap: 0.9rem;
  font-size: var(--text-sm); font-weight: 300; color: var(--slate);
  opacity: 0.3; filter: blur(0.6px);
  transition: opacity 700ms var(--ease-out), filter 700ms var(--ease-out), color 700ms;
}
.ticker__item.d1 { opacity: 0.6; filter: blur(0.2px); }
.ticker__item.d0 { opacity: 1; filter: none; color: var(--ink); }
/* off-centre icons are bare glyphs; only the live row gets the navy chip */
.ticker__item i {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: var(--radius-xs);
  color: var(--slate); background: transparent; box-shadow: inset 0 0 0 1px var(--line-strong);
  transition: background-color 700ms var(--ease-out), color 700ms, box-shadow 700ms;
}
.ticker__item.d0 i { background: var(--navy); color: var(--white); box-shadow: none; }
.ticker__item svg { width: 16px; height: 16px; }
.ticker__item::after {
  content: ""; position: absolute; right: 0; bottom: 3px; width: 30px; height: 2px; border-radius: 1px;
  background: var(--navy); transform: scaleX(0); transform-origin: left; opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .ticker__item.d0::after { opacity: 0.5; animation: tick-hold var(--tick) linear forwards; }
}
@keyframes tick-hold { to { transform: scaleX(1); } }

/* scroll cue: a label over two chevrons that light up top to bottom, then fade, on a loop */
.scroll-cue {
  position: absolute; z-index: 4; left: 50%; bottom: 2.5vh; transform: translateX(-50%);
  display: grid; justify-items: center; gap: 0.35rem; padding: 0.5rem 0.75rem;
  color: var(--slate); text-decoration: none; transition: color 300ms var(--ease-out);
}
.scroll-cue__label { font-size: var(--text-xs); letter-spacing: 0.02em; }
.scroll-cue__chevrons { display: grid; justify-items: center; color: var(--navy); transition: translate 300ms var(--ease-out); }
.scroll-cue svg { width: 22px; height: 13px; margin-top: -3px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.scroll-cue svg:last-child { opacity: 0.55; }
.scroll-cue:hover { color: var(--ink); }
.scroll-cue:hover .scroll-cue__chevrons { translate: 0 3px; }
.scroll-cue:active .scroll-cue__chevrons { translate: 0 5px; }
@media (prefers-reduced-motion: no-preference) {
  .scroll-cue svg { animation: cue 1.8s var(--ease-in-out) infinite; }
  .scroll-cue svg:last-child { animation-delay: 0.18s; }
}
@keyframes cue {
  0% { opacity: 0; transform: translateY(-6px); }
  35%, 55% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(6px); }
}

.hero-cta { position: absolute; z-index: 4; right: var(--gutter); bottom: 4vh; display: grid; gap: 1rem; justify-items: start; }

/* statement */
.hero-about { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; pointer-events: none; }
.hero-about__text {
  width: min(88%, 980px); text-align: center; color: var(--ink);
  font-size: clamp(1.6rem, 0.9rem + 2.4vw, 3rem); line-height: 1.18; letter-spacing: -0.02em; font-weight: 400;
  translate: 0 var(--about-y, 0px); opacity: var(--about-op, 1);
}
.w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.w > span { display: inline-block; transform: translateY(calc((1 - var(--wp, 0)) * 110%)); }

/* Without scroll scrubbing (reduced motion or no JS): a plain hero, then the statement */
.no-scrub .hero-track, html:not(.js) .hero-track { height: auto; }
.no-scrub .hero-stage, html:not(.js) .hero-stage { position: relative; height: 160vh; }
.no-scrub .hero-about, html:not(.js) .hero-about { inset: 100vh 0 0; }
.no-scrub .scroll-cue, html:not(.js) .scroll-cue { bottom: auto; top: calc(97.5vh - 64px); }
.no-scrub .w > span { transform: none; }

/* Phones: the stage is the visible screen (svh, so the browser bar never hides the button).
   Title, ticker and button stack under the bars in one column; the intro ring and dial
   sit in the middle of the screen; the funnel keeps its 7 middle columns, so fewer, wider bars. */
@media (max-width: 899px) {
  .hero-stage {
    --bars-h: 42vh;
    height: 100vh; height: 100svh;
    display: grid; align-content: start; justify-items: start; row-gap: 1.25rem;
    padding: calc(var(--bars-h) + 1.25rem) var(--gutter) 0;
  }
  @supports (height: 1svh) { .hero-stage { --bars-h: 42svh; } }
  .hero-bars { height: var(--bars-h); }
  .hero-grid { grid-template-columns: 0 0 repeat(7, 1fr) 0 0; }
  .hero-grid > :is(:nth-child(11n + 1), :nth-child(11n + 2), :nth-child(11n + 10), :nth-child(11n)) { visibility: hidden; border: 0; }
  .hero-dial-wrap { width: 56vw; top: 50vh; top: 50svh; }
  .hero-copy, .ticker, .hero-cta { position: relative; inset: auto; }
  .scroll-cue { bottom: 0.75rem; bottom: calc(0.75rem + env(safe-area-inset-bottom)); }
  .hero-title { font-size: clamp(2.4rem, 1.4rem + 5vw, 3.4rem); }
  .ticker { padding-left: 0; --row: 36px; height: calc(var(--row) * 3); }
  .ticker__item { justify-content: flex-end; flex-direction: row-reverse; }
  .ticker__item::after { right: auto; left: 0; bottom: 1px; }
  /* one motion for all three: rise in on entry, slide off to the left on scroll */
  .hero-copy, .ticker, .hero-cta { translate: calc(var(--out, 0) * (-100% - 6rem)) calc((1 - var(--in)) * 56px); }
}

/* =========================================================
   WHY CTRL CV — three panels (layout after the Lattis hero row)
   ========================================================= */
.why { --why-ease: cubic-bezier(0.22, 1, 0.36, 1); }
.why-head { display: grid; justify-items: center; gap: 1.25rem; text-align: center; }
.js .why-head[data-reveal] { transform: translateY(56px); transition-duration: 1.4s; transition-timing-function: var(--why-ease); }
.js .why-head.is-in { transform: none; }
.why-head__desc { max-width: 34rem; color: var(--slate); font-weight: 300; }
#why-heading { font-size: clamp(1.9rem, 0.6rem + 6vw, 5.4rem); white-space: nowrap; }

/* From 960px the row keeps one fixed design (1240px wide) and home.js scales it
   down as a whole, so the cards keep their proportions on smaller screens. */
.why-stage { margin-top: clamp(3rem, 2rem + 3vw, 5rem); }
.why-panels { list-style: none; margin: 0 auto; padding: 0; display: grid; gap: 1rem; max-width: 560px; }
@media (min-width: 960px) {
  .why-stage { display: flex; justify-content: center; align-items: flex-start; height: var(--why-stage-h, auto); }
  .why-panels {
    flex: none; width: 1240px; max-width: none; margin: 0;
    grid-template-columns: 370px 1fr 370px; align-items: end;
    transform-origin: 50% 0; scale: var(--why-scale, 1);
  }
  .why-panels .why-panel__inner { padding: 1.75rem; }
  .why-panels .why-copy h3 { font-size: 1.75rem; }
}
.why-panel { position: relative; z-index: 1; perspective: 1200px; translate: 0 var(--py, 0px); }
.why-panel--center { z-index: 2; }

/* entrance: card 02 slides up, then 01 and 03 slide out from behind it */
@media (min-width: 960px) {
  .js .why-panel { opacity: 0; transition: transform 1.6s var(--why-ease), opacity 900ms var(--why-ease); }
  .js .why-panel--center { transform: translateY(120px); }
  .js .why-panel--research { transform: translateX(100%) scale(0.92); }
  .js .why-panel--scale { transform: translateX(-100%) scale(0.92); }
  .js .why-panel--side { transition-delay: 300ms; transition-duration: 1.1s, 700ms; }
}
@media (max-width: 959px) {
  .js .why-panel { opacity: 0; transform: translateY(64px); transition: transform 1.4s var(--why-ease), opacity 1s var(--why-ease); }
  .js .why-panel--center { transition-delay: 150ms; }
  .js .why-panel--scale { transition-delay: 300ms; }
}
.js .why-panels.is-in .why-panel { opacity: 1; transform: none; }
/* phones: the three cards pin and stack (home.js sets --stick-top and the cover scrub) */
@media (max-width: 959px) {
  .why-panel { position: sticky; top: var(--stick-top, calc(var(--header-h) + 0.75rem)); }
  .why-panel--scale { z-index: 3; }
  .why-panel .why-panel__inner { transform-origin: 50% 0; transition: box-shadow var(--dur) var(--ease-out); }
}
.why-panel__inner {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; gap: 2rem;
  min-height: 460px; padding: clamp(1.25rem, 0.9rem + 1vw, 1.75rem);
  border-radius: var(--radius-lg);
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 700ms var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.why-panel__inner::after { /* dims a card as the next one covers it (phones) */
  content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none;
  background: var(--ink); opacity: var(--dim, 0);
}
.why-panel:hover .why-panel__inner { box-shadow: var(--shadow-lg); }
@media (min-width: 960px) {
  .why-panel--side .why-panel__inner { height: 540px; }
  .why-panel--center .why-panel__inner { height: 620px; }
  .why-panels .why-orb { width: 320px; }
}

/* copy */
.why-copy { position: relative; z-index: 1; display: grid; gap: 0.8rem; max-width: 32ch; }
.why-copy__num { display: inline-flex; align-items: center; gap: 0.6rem; font-size: var(--text-xs); letter-spacing: 0.08em; opacity: 0.7; }
.why-copy__num::after { content: ""; width: 2rem; height: 1px; background: currentColor; }
.why-copy h3 { font-size: var(--text-xl); font-weight: 600; letter-spacing: -0.03em; }
.why-copy p { font-size: var(--text-sm); font-weight: 300; line-height: 1.55; color: var(--text-muted); }

/* dark side panels */
.why-panel--side .why-panel__inner { --text-muted: color-mix(in oklab, var(--white) 72%, transparent); color: var(--white); }
.why-panel--research .why-panel__inner { background: linear-gradient(165deg, var(--ink) 0%, var(--navy-700) 60%, var(--navy) 100%); }
.why-panel--scale .why-panel__inner { background: linear-gradient(195deg, var(--navy) 0%, var(--navy-700) 50%, var(--ink) 100%); }

.why-panel__art { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; }
.why-art__grid { fill: none; stroke: color-mix(in oklab, var(--white) 7%, transparent); }

.why-panel__dots {
  position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(circle, color-mix(in oklab, var(--white) 55%, transparent) 1.2px, transparent 1.7px) 0 0 / 14px 14px;
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 70% 30%, var(--black), transparent 75%);
  mask-image: radial-gradient(ellipse 80% 60% at 70% 30%, var(--black), transparent 75%);
  opacity: 0.45; animation: why-drift 18s linear infinite;
}
@keyframes why-drift { to { background-position: 140px 70px; } }

/* card 01: the research paper sits behind a screen where the model deploys */
@property --pct { syntax: "<integer>"; inherits: false; initial-value: 0; }
.why-ship {
  position: relative; z-index: 2; margin-top: auto;
  display: flex; align-items: flex-start;
  translate: var(--fx, 0px) var(--fy, 0px);
  transition: translate 700ms var(--ease-out), transform var(--dur) var(--ease-out);
  --loop: 9s; --loop-delay: 2.6s;
}
.why-panel:hover .why-ship { transform: translateY(-6px); }

/* the paper */
.why-paper {
  display: flex; flex-direction: column; gap: 0.3rem; padding: 0.6rem;
  flex: none; width: 50%; overflow: hidden;
  border-radius: var(--radius-sm); background: var(--white); color: var(--ink); box-shadow: var(--shadow-lg);
}
.why-paper__venues { display: flex; gap: 0.2rem; margin-bottom: 0.15rem; }
.why-paper__venues span { padding: 0.1rem 0.3rem; border-radius: 3px; border: 1px solid var(--navy-100); background: var(--navy-50); color: var(--navy); font-size: 0.48rem; font-weight: 600; }
.why-paper i { display: block; height: 3px; border-radius: 2px; background: var(--slate-200); transform-origin: left; }
.why-paper .why-paper__title { height: 6px; width: 92%; background: var(--ink-700); }
.why-paper .why-paper__title--short { width: 58%; }
.why-paper__byline { font-size: 0.5rem; font-weight: 600; color: var(--navy); }
.why-paper__body { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem; }
.why-paper__col { display: grid; align-content: start; gap: 4px; }
.why-paper__col i:nth-child(2n) { width: 88%; }
.why-paper__col i:nth-child(3n) { width: 94%; }
.why-paper__col i:last-child { width: 60%; }
.why-paper__fig { width: 100%; height: 22px; padding: 2px; border-radius: 3px; background: var(--navy-50); fill: none; stroke: var(--navy); stroke-width: 1.6; stroke-linejoin: round; }
.js .why-paper i { transform: scaleX(0); transition: transform 1s var(--why-ease) calc(1.6s + var(--i, 0) * 90ms); }
.js .why-panels.is-in .why-paper i { transform: none; }
.why-paper__title--short, .why-paper__col i:nth-child(1) { --i: 1; }
.why-paper__col i:nth-child(2) { --i: 2; }
.why-paper__col i:nth-child(3) { --i: 3; }
.why-paper__col i:nth-child(4) { --i: 4; }
.why-paper__col i:nth-child(5) { --i: 5; }

/* the screen */
.why-pc { position: relative; z-index: 1; flex: none; width: 67%; margin: 3.4rem 0 0 -17%; display: grid; justify-items: center; }
.why-pc__screen {
  width: 100%; padding: 0.6rem; border-radius: var(--radius-sm);
  border: 5px solid var(--ink-800); outline: 1px solid color-mix(in oklab, var(--white) 18%, transparent);
  background: var(--white); color: var(--ink); box-shadow: var(--shadow-lg);
}
.why-pc__stand { width: 14px; height: 12px; background: color-mix(in oklab, var(--white) 30%, transparent); }
.why-pc__stand::after { content: ""; display: block; width: 56px; height: 4px; margin: 12px 0 0 -21px; border-radius: 2px; background: color-mix(in oklab, var(--white) 30%, transparent); }

/* the deploying model, on screen */
.why-deploy { display: flex; flex-direction: column; gap: 0.35rem; }
.why-deploy__head { display: flex; justify-content: space-between; gap: 0.3rem; font-size: 0.52rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--slate); }
.why-deploy__state { display: grid; }
.why-deploy__state b { grid-area: 1 / 1; justify-self: end; font-weight: 600; color: var(--navy); }
.why-deploy__state b + b { opacity: 0; }
.why-deploy__bar { height: 4px; border-radius: 2px; background: var(--navy-50); overflow: hidden; }
.why-deploy__bar i { display: block; height: 100%; background: var(--navy); transform-origin: left; transform: scaleX(0); }
.why-deploy__pct { font-size: 1.15rem; font-weight: 600; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; counter-reset: pct var(--pct); }
.why-deploy__pct::after { content: counter(pct) "%"; }
.why-deploy ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.25rem; font-size: 0.56rem; }
.why-deploy li { display: flex; align-items: center; gap: 0.35rem; white-space: nowrap; }
.why-deploy li i { display: grid; place-items: center; width: 11px; height: 11px; flex: none; border-radius: 50%; background: var(--navy); color: var(--white); font-size: 0.42rem; font-style: normal; }
.why-deploy li .why-live { width: 6px; height: 6px; margin-inline: 2.5px; }
.why-deploy li:last-child { opacity: 0; }

/* one loop: bar fills to 100% → status goes Live, then holds */
.why-panels.is-in :is(.why-deploy__bar i, .why-deploy__pct, .why-deploy__state b, .why-deploy li:last-child) {
  animation-duration: var(--loop); animation-timing-function: linear;
  animation-delay: var(--loop-delay); animation-iteration-count: infinite;
}
.why-panels.is-in .why-deploy__bar i { animation-name: why-fill; animation-timing-function: var(--ease-in-out); }
.why-panels.is-in .why-deploy__pct { animation-name: why-count; animation-timing-function: var(--ease-in-out); }
.why-panels.is-in .why-deploy__state b:first-child { animation-name: why-swap-out; }
.why-panels.is-in :is(.why-deploy__state b + b, .why-deploy li:last-child) { animation-name: why-swap-in; }
@keyframes why-fill { 0%, 15% { transform: scaleX(0); } 50%, 100% { transform: scaleX(1); } }
@keyframes why-count { 0%, 15% { --pct: 0; } 50%, 100% { --pct: 100; } }
@keyframes why-swap-out { 0%, 50% { opacity: 1; } 53%, 100% { opacity: 0; } }
@keyframes why-swap-in { 0%, 50% { opacity: 0; } 53%, 100% { opacity: 1; } }

/* light centre panel with the orb */
.why-panel--center .why-panel__inner {
  background:
    radial-gradient(circle, var(--slate-300) 1px, transparent 1.4px) 22px 22px / 44px 44px,
    var(--neutral);
  color: var(--ink);
}
.why-orb {
  position: absolute; z-index: -1; left: 50%; bottom: -6%; width: min(64%, 340px); aspect-ratio: 1;
  translate: calc(-50% + var(--ox, 0px)) var(--oy, 0px);
}
.why-orb > span { position: absolute; inset: 0; border-radius: 50%; }
.why-orb__cool {
  background: radial-gradient(circle at 34% 30%, var(--navy-100) 0%, var(--navy-300) 24%, var(--navy) 58%, var(--navy-700) 100%);
  box-shadow: 0 40px 90px -30px color-mix(in oklab, var(--navy) 70%, transparent);
  animation: why-breathe 7s var(--ease-in-out) infinite alternate;
}
.why-orb__warm {
  background: radial-gradient(circle at 72% 78%, color-mix(in oklab, var(--white) 70%, var(--navy-300)) 0%, transparent 55%);
  opacity: var(--warm, 0.5); mix-blend-mode: screen;
}
.why-orb__clip { overflow: hidden; }
.why-orb__hl {
  position: absolute; left: 18%; top: 12%; width: 45%; height: 40%; border-radius: 50%;
  background: color-mix(in oklab, var(--white) 70%, transparent); filter: blur(28px);
  translate: var(--hx, 0px) var(--hy, 0px);
}
.why-orb::after { /* halftone texture over the sphere */
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in oklab, var(--navy-700) 60%, transparent) 1px, transparent 1.6px) 0 0 / 6px 6px;
  -webkit-mask-image: radial-gradient(circle at 70% 75%, var(--black), transparent 70%);
  mask-image: radial-gradient(circle at 70% 75%, var(--black), transparent 70%);
}
@keyframes why-breathe { to { transform: scale(1.035); } }

/* floating UI cards */
.why-float {
  position: relative; z-index: 2; margin-top: auto;
  padding: 1rem; border-radius: var(--radius-md);
  background: var(--white); color: var(--ink); box-shadow: var(--shadow-lg);
  font-size: var(--text-sm);
  translate: var(--fx, 0px) var(--fy, 0px);
  transition: translate 700ms var(--ease-out), transform var(--dur) var(--ease-out);
}
.why-panel:hover .why-float { transform: translateY(-6px); }
.why-float__head { font-size: var(--text-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--slate); }
.why-float__mono { margin-left: auto; font-size: var(--text-xs); color: var(--slate); font-variant-numeric: tabular-nums; }


.why-live { position: relative; width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--navy); }
.why-live::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--navy); animation: why-pulse 2s var(--ease-out) infinite; }
@keyframes why-pulse { to { transform: scale(3); opacity: 0; } }

.why-float--pill { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1.1rem; border-radius: 999px; }
.why-pill__text { font-weight: 500; }
.why-float--pill .why-float__mono { white-space: nowrap; }
@media (max-width: 479px) { .why-float--pill .why-float__mono { display: none; } }
@media (max-width: 959px) { .why-panel--center .why-panel__inner { min-height: 520px; } }

.why-float__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.4rem; }
.why-float__tag { padding: 0.2rem 0.5rem; border-radius: var(--radius-xs); background: var(--navy); color: var(--white); letter-spacing: 0.08em; }
.why-float--list ul { list-style: none; margin: 0; padding: 0; }
.why-float--list li { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0; border-top: 1px solid var(--line); }
.why-float--list li:first-child { border-top: 0; }
.why-float--list i { display: grid; place-items: center; width: 18px; height: 18px; flex: none; border-radius: 50%; background: var(--navy); color: var(--white); font-size: 0.62rem; font-style: normal; }

/* in view: chips and rows check in one after another */
.js .why-float--list li {
  opacity: 0; transform: translateY(6px);
  transition: opacity 800ms var(--why-ease), transform 800ms var(--why-ease);
  transition-delay: calc(1.6s + var(--i, 0) * 180ms);
}
.js .why-float.is-in li { opacity: 1; transform: none; }
.why-float--list li:nth-child(2) { --i: 1; }
.why-float--list li:nth-child(3) { --i: 2; }
.why-float--list li:nth-child(4) { --i: 3; }
.js .why-float--list i { transform: scale(0); transition: transform 400ms var(--ease-out); transition-delay: calc(1.75s + var(--i, 0) * 180ms); }
.js .why-float.is-in i { transform: none; }

/* =========================================================
   SOLUTIONS — sticky stacked cards (see home.js createStack)
   ========================================================= */
.solutions {
  --enter: cubic-bezier(0.22, 1, 0.36, 1);
  --pop: cubic-bezier(0.34, 1.56, 0.64, 1);
}
.solutions__head { display: grid; gap: 1.25rem 4rem; align-items: end; margin-bottom: clamp(2.5rem, 2rem + 3vw, 4.5rem); }
.solutions__lead { max-width: 36ch; color: var(--slate); font-weight: 300; }
@media (min-width: 900px) { .solutions__head { grid-template-columns: 1.3fr 1fr; } }

.stack { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(1.5rem, 1rem + 2vw, 3rem); }
.stack-card__inner {
  position: relative; overflow: hidden; display: grid;
  border-radius: var(--radius-lg); border: 1px solid var(--line);
  box-shadow: 0 -24px 60px -36px color-mix(in oklab, var(--ink) 45%, transparent);
  transform-origin: 50% 0;
}
.stack-card__inner::after { /* dims a card as the next one covers it */
  content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none;
  background: var(--ink); opacity: var(--dim, 0);
}
/* phones: pinned where home.js says (--stick-top), so a tall card is read in full first */
@media (max-width: 899px) {
  .stack-card { position: sticky; top: var(--stick-top, calc(var(--header-h) + 0.75rem)); }
}
@media (min-width: 900px) {
  .stack-card { position: sticky; top: calc(var(--header-h) + 1.25rem + var(--i) * 18px); }
  .stack-card__inner { height: min(560px, calc(100vh - var(--header-h) - 4rem)); grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); will-change: transform; }
}

.stack-card__text { display: flex; flex-direction: column; gap: 1rem; padding: clamp(1.5rem, 1rem + 2vw, 3rem); }
.stack-card__num { margin-bottom: auto; padding-bottom: 1.5rem; font-size: clamp(2.6rem, 1.8rem + 2vw, 3.8rem); line-height: 1; letter-spacing: -0.04em; }
.stack-card__num small { margin-left: 0.4rem; font-size: 1rem; letter-spacing: 0; opacity: 0.55; }
.stack-card h3 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem); font-weight: 600; letter-spacing: -0.03em; }
.stack-card__text > p:not(.stack-card__num) { max-width: 48ch; font-size: var(--text-sm); font-weight: 300; line-height: 1.6; color: var(--text-muted); }


.stack-card__visual { position: relative; min-height: 300px; overflow: hidden; border-top: 1px solid var(--line); }
@media (min-width: 900px) { .stack-card__visual { min-height: 0; border-top: 0; border-left: 1px solid var(--line); } }
.stack-card__visual > svg { position: absolute; inset: 8% 6%; width: 88%; height: 84%; }
/* depth: the visual leans toward the pointer (set by home.js) */
.stack-card__visual > * { translate: calc(var(--mx, 0) * 10px) calc(var(--my, 0) * 8px); transition: translate 600ms var(--enter); }

/* card themes */
.stack-card--os .stack-card__inner, .stack-card--rnd .stack-card__inner {
  --text-muted: color-mix(in oklab, var(--white) 70%, transparent); --line: var(--dark-line);
  color: var(--white);
}
.stack-card--os .stack-card__inner { background: linear-gradient(160deg, var(--ink) 0%, var(--ink-800) 55%, var(--navy-700) 100%); }
.stack-card--embed .stack-card__inner { background: var(--neutral); }
.stack-card--rnd .stack-card__inner { background: linear-gradient(200deg, var(--navy) 0%, var(--navy-700) 60%, var(--ink) 100%); }
.stack-card--partner .stack-card__inner { background: var(--white); }

.viz-dot { position: relative; width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--navy-300); }
.viz-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: why-pulse 2s var(--ease-out) infinite; }

/* ---- 01 Operating system: data drops in, the core processes it, results ship out (stall driven by home.js) ---- */
.viz-os {
  --os-body: var(--navy);
  --os-deep: var(--navy-700);
  --os-edge: color-mix(in oklab, var(--white) 18%, transparent);
  background: radial-gradient(circle, color-mix(in oklab, var(--white) 9%, transparent) 1px, transparent 1.5px) 0 0 / 22px 22px;
}
.viz-os > svg { inset: 5% 4% 13%; width: 92%; height: 82%; } /* keeps the status line clear */
@media (max-width: 899px) { .stack-card--os .stack-card__visual { min-height: 360px; } }
.os-body { fill: url(#os-g-body); stroke: var(--os-edge); stroke-width: 1.2; }
.os-shine { fill: url(#os-g-shine); }
.os-glow { fill: url(#os-g-glow); }
.os-shadows ellipse { fill: color-mix(in oklab, var(--black) 45%, transparent); filter: blur(4px); }
/* gradient stops: colours come from the tokens */
.os-stop-body-a { stop-color: color-mix(in oklab, var(--navy) 78%, var(--navy-300)); }
.os-stop-body-b { stop-color: var(--navy-700); }
.os-stop-light-a { stop-color: var(--white); }
.os-stop-light-b { stop-color: var(--navy-50); }
.os-stop-accent-a { stop-color: var(--navy-300); }
.os-stop-accent-b { stop-color: color-mix(in oklab, var(--navy-300) 45%, var(--navy)); }
.os-stop-gear-a { stop-color: var(--white); }
.os-stop-gear-b { stop-color: var(--navy-100); }
.os-stop-dark-a { stop-color: var(--ink-800); }
.os-stop-dark-b { stop-color: var(--ink); }
.os-stop-pipe-a { stop-color: color-mix(in oklab, var(--navy-700) 80%, var(--navy-300)); }
.os-stop-pipe-b { stop-color: var(--ink-800); }
.os-stop-shine-0 { stop-color: var(--white); stop-opacity: 0; }
.os-stop-shine-1 { stop-color: var(--white); stop-opacity: 0.45; }
.os-stop-glow-a { stop-color: var(--navy-300); stop-opacity: 0.22; }
.os-stop-glow-b { stop-color: var(--navy-300); stop-opacity: 0; }
.os-funnel { fill: url(#os-g-accent); }
.os-in { fill: var(--white); }
.os-in__cut { fill: var(--navy); }
.os-pipes path { fill: none; stroke: url(#os-g-pipe); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; }
.os-flow path { fill: none; stroke: var(--navy-300); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 0.1 12; }
.os-vent rect { fill: var(--os-deep); }
.os-keys rect { fill: var(--navy-300); }
.os-screen, .os-dial { fill: url(#os-g-light); }
.os-chart__area { fill: url(#os-g-accent); opacity: 0.35; }
.os-chart__line { fill: none; stroke: var(--navy); stroke-width: 2; stroke-linejoin: round; }
.os-needle { stroke: var(--navy); stroke-width: 2; stroke-linecap: round; transform-box: view-box; transform-origin: 303px 102px; }
.os-leds circle { fill: var(--navy-300); transition: opacity 300ms var(--enter); }
.os-slider { fill: var(--os-deep); }
.os-slider__knob { fill: var(--white); }
.os-alert { opacity: 0; transition: opacity 300ms var(--enter); }
.os-alert circle { fill: var(--white); }
.os-alert text { font-size: 11px; font-weight: 800; text-anchor: middle; fill: var(--ink); }
.os-panel { fill: url(#os-g-light); }
.os-panel__dot { fill: var(--navy); }
.os-panel__bar { fill: var(--slate-200); }
.os-panel__img { fill: var(--navy-100); }
.os-panel__lines { fill: none; stroke: var(--slate-300); stroke-width: 3; stroke-linecap: round; }
.os-switch__track { fill: url(#os-g-dark); }
.os-switch__knob { fill: var(--white); transition: transform 400ms var(--enter); }
.os-window { fill: url(#os-g-dark); }
.os-gear--light path { fill: url(#os-g-gear); }
.os-gear--accent path { fill: url(#os-g-accent); }
.os-gear__hole { fill: var(--ink-800); }
.os-gear--panel .os-gear__hole { fill: var(--white); }
.os-gear--panel path { fill: url(#os-g-accent); }
.os-gear-wrap, .os-coupling rect, .os-item, .os-in { transform-box: fill-box; transform-origin: center; }
.os-coupling rect { fill: url(#os-g-accent); }
.os-belt { fill: url(#os-g-dark); stroke: var(--os-edge); stroke-width: 1; }
.os-chain { fill: none; stroke: color-mix(in oklab, var(--white) 85%, transparent); stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 8 6; }
.os-chain--low { stroke: color-mix(in oklab, var(--white) 40%, transparent); }
.os-roller { fill: var(--navy-300); stroke: var(--os-deep); stroke-width: 2; }
.os-item { fill: url(#os-g-accent); opacity: 0; }
.os-bezel { fill: url(#os-g-dark); stroke: color-mix(in oklab, var(--white) 22%, transparent); stroke-width: 1; }
.os-mscreen { fill: url(#os-g-light); }
.os-tiles rect { fill: var(--navy-100); }
.os-tiles rect:nth-child(3n + 1) { fill: var(--navy); }
.os-tiles rect:nth-child(3n + 2) { fill: var(--navy-300); }
.os-stand { fill: color-mix(in oklab, var(--white) 30%, transparent); }
.os-term { fill: url(#os-g-dark); stroke: color-mix(in oklab, var(--white) 22%, transparent); stroke-width: 1; }
.os-term__text { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 8px; fill: color-mix(in oklab, var(--white) 80%, transparent); white-space: pre; }
.os-term__ok { fill: var(--navy-300); }
.os-cursor { fill: var(--navy-300); }
.viz-os__status { position: absolute; left: 1.5rem; bottom: 1.25rem; display: flex; align-items: center; gap: 0.6rem; font-size: var(--text-xs); color: color-mix(in oklab, var(--white) 75%, transparent); }
.viz-os__swap { display: grid; }
.viz-os__swap b { grid-area: 1 / 1; font-weight: 400; transition: opacity 300ms var(--enter); }
.viz-os__swap b + b { opacity: 0; }

/* running: every part loops while card 01 is in front */
.stack-card--os.is-active .os-in { animation: os-fall 2.4s linear infinite; }
.stack-card--os.is-active .os-in--b { --x: -12px; animation-delay: -0.8s; }
.stack-card--os.is-active .os-in--c { --x: 12px; animation-delay: -1.6s; }
.stack-card--os.is-active .os-flow path { animation: os-flow 0.7s linear infinite; }
.stack-card--os.is-active .os-chart { animation: os-chart 4s linear infinite; }
.stack-card--os.is-active .os-needle { animation: os-needle 1.8s var(--ease-in-out) infinite alternate; }
.stack-card--os.is-active .os-leds circle { animation: os-blink 1.2s steps(1) infinite; }
.stack-card--os.is-active .os-leds circle:nth-child(2) { animation-delay: 0.4s; }
.stack-card--os.is-active .os-leds circle:nth-child(3) { animation-delay: 0.8s; }
.stack-card--os.is-active .os-slider__knob { animation: os-slide 2.4s var(--ease-in-out) infinite alternate; }
.stack-card--os.is-active .os-gear--panel { animation: os-spin 3s linear infinite; }
.stack-card--os.is-active .os-gear--a { animation: os-spin 4s linear infinite; }
/* 12 → 9 teeth: the small gear turns 12/9 as far, the other way */
.stack-card--os.is-active .os-gear--b { animation: os-spin-b 4s linear infinite; }
.stack-card--os.is-active .os-coupling rect { animation: os-squeeze 0.8s var(--ease-in-out) infinite alternate; }
.stack-card--os.is-active .os-coupling rect:nth-child(2n) { animation-delay: -0.4s; }
.stack-card--os.is-active .os-chain { animation: os-chain 0.7s linear infinite; }
.stack-card--os.is-active .os-chain--low { animation-direction: reverse; }
.stack-card--os.is-active .os-item { animation: os-convey 3s linear infinite; }
.stack-card--os.is-active .os-item--b { animation-delay: -1s; }
.stack-card--os.is-active .os-item--c { animation-delay: -2s; }
.stack-card--os.is-active .os-tiles rect { animation: os-tile 3s var(--ease-in-out) infinite; }
.stack-card--os.is-active .os-tiles rect:nth-child(2) { animation-delay: 0.5s; }
.stack-card--os.is-active .os-tiles rect:nth-child(3) { animation-delay: 1s; }
.stack-card--os.is-active .os-tiles rect:nth-child(4) { animation-delay: 1.5s; }
.stack-card--os.is-active .os-tiles rect:nth-child(5) { animation-delay: 2s; }
.stack-card--os.is-active .os-tiles rect:nth-child(6) { animation-delay: 2.5s; }
.stack-card--os.is-active .os-cursor { animation: os-blink 1s steps(1) infinite; }

/* stalled: everything holds, the switch flips off and the fault is flagged, then it recovers */
.viz-os.is-stalled .os-run { animation-play-state: paused; }
.viz-os.is-stalled .os-alert, .viz-os.is-stalled .viz-os__swap b + b { opacity: 1; }
.viz-os.is-stalled .viz-os__swap b:first-child { opacity: 0; }
.viz-os.is-stalled .os-leds circle { animation: none; opacity: 0.15; }
.viz-os.is-stalled .os-switch__knob { transform: translateY(-18px); }

@keyframes os-fall {
  0% { translate: var(--x, 0px) 0; opacity: 0; scale: 1; }
  12% { opacity: 1; }
  70% { opacity: 1; scale: 1; }
  88%, 100% { translate: var(--x, 0px) 60px; opacity: 0; scale: 0.5; }
}
@keyframes os-flow { to { stroke-dashoffset: -12.1; } }
@keyframes os-chart { to { translate: -84px 0; } }
@keyframes os-needle { from { rotate: -55deg; } to { rotate: 55deg; } }
@keyframes os-blink { 50% { opacity: 0.25; } }
@keyframes os-slide { to { translate: 36px 0; } }
@keyframes os-spin { to { rotate: 360deg; } }
@keyframes os-spin-b { to { rotate: -480deg; } }
@keyframes os-squeeze { to { scale: 1 0.82; } }
@keyframes os-chain { to { stroke-dashoffset: -14; } }
@keyframes os-convey { 0% { translate: 0 0; opacity: 0; } 10% { opacity: 1; } 85% { opacity: 1; } 100% { translate: 150px 0; opacity: 0; } }
@keyframes os-tile { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* ---- 02 Embedded: your workflow is a puzzle; the Ctrl CV piece is cut to fit the gap ---- */
.viz-embed {
  display: flex; flex-direction: column; justify-content: center; gap: 1.5rem; padding: clamp(1.5rem, 1rem + 2vw, 3rem);
  background:
    radial-gradient(ellipse 70% 60% at 55% 45%, color-mix(in oklab, var(--white) 70%, transparent), transparent 70%),
    linear-gradient(160deg, var(--neutral), color-mix(in oklab, var(--navy-50) 60%, var(--neutral)));
}
.viz-embed::before { /* fine paper grain */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.35; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.17 0 0 0 0 0.27 0 0 0 0 0.41 0 0 0 0.22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.viz-embed > * { position: relative; }
.viz-embed__team { display: flex; align-items: center; justify-content: space-between; }
.viz-embed__label { font-size: var(--text-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--slate); }
.viz-embed__people { display: flex; }
.viz-embed__people i { display: grid; place-items: center; width: 36px; height: 36px; margin-left: -10px; border-radius: 50%; border: 2px solid var(--neutral); background: linear-gradient(160deg, var(--slate-200), var(--slate-300)); box-shadow: var(--shadow-sm); font-size: 0.68rem; font-weight: 700; font-style: normal; }
.viz-embed__people .viz-embed__cv { background: var(--navy); color: var(--white); }
.viz-embed > svg.viz-pz { position: relative; inset: auto; width: 100%; height: auto; max-height: 380px; overflow: visible; }
.viz-pz__shadow { fill: color-mix(in oklab, var(--ink) 18%, transparent); filter: blur(8px); }
.viz-pz__glow { fill: url(#pz-g-glow); opacity: 0; }
.viz-pz__gap { fill: color-mix(in oklab, var(--navy-100) 55%, transparent); stroke: var(--navy-300); stroke-width: 1.4; stroke-dasharray: 4 4; }
.viz-pz__piece path { fill: url(#pz-g-piece); stroke: color-mix(in oklab, var(--slate) 22%, var(--white)); stroke-width: 1; stroke-linejoin: round; filter: drop-shadow(0 3px 4px color-mix(in oklab, var(--ink) 9%, transparent)); }
.viz-pz__piece text { font-size: 9.5px; font-weight: 600; text-anchor: middle; fill: var(--ink-700); }
.viz-pz__cv path { fill: url(#pz-g-cv); stroke: color-mix(in oklab, var(--white) 45%, transparent); stroke-width: 1.5; filter: drop-shadow(0 12px 14px color-mix(in oklab, var(--navy) 35%, transparent)); }
.viz-pz__cv text { font-size: 12px; font-weight: 700; text-anchor: middle; fill: var(--white); }
.viz-pz__cv .viz-pz__cv-sub { font-size: 7.5px; font-weight: 500; fill: color-mix(in oklab, var(--white) 75%, transparent); }
.viz-pz__piece, .viz-pz__cv { transform-box: fill-box; transform-origin: center; }
.pz-stop-piece-a { stop-color: var(--white); }
.pz-stop-piece-b { stop-color: color-mix(in oklab, var(--navy-50) 70%, var(--slate-200)); }
.pz-stop-cv-a { stop-color: var(--navy-300); }
.pz-stop-cv-b { stop-color: var(--navy); }
.pz-stop-glow-a { stop-color: var(--navy-300); stop-opacity: 0.45; }
.pz-stop-glow-b { stop-color: var(--navy-300); stop-opacity: 0; }
.viz-embed__done { display: flex; align-items: center; gap: 0.6rem; font-size: var(--text-sm); font-weight: 500; }
.viz-embed__done i { display: grid; place-items: center; width: 22px; height: 22px; flex: none; border-radius: 50%; background: var(--navy); color: var(--white); font-size: 0.7rem; font-style: normal; }
/* resting state, transitions back quickly */
.js .viz-embed__cv { opacity: 0; transform: translateX(28px) scale(0.6); transition: opacity 300ms var(--enter), transform 300ms var(--enter); }
.js .viz-pz__piece { opacity: 0; translate: var(--sx) var(--sy); transition: opacity 300ms var(--enter), translate 300ms var(--enter); }
.js .viz-pz__cv { opacity: 0; }
.js .viz-pz__gap { transition: opacity 300ms var(--enter); }
.stack-card--embed.is-active .viz-pz__gap { opacity: 0; transition-delay: 0.35s; }
.js .viz-embed__done { opacity: 0; transform: translateY(10px); transition: opacity 300ms var(--enter), transform 300ms var(--enter); }
/* active: your pieces settle → the engineer joins → the Ctrl CV piece swings in and snaps into the gap */
.stack-card--embed.is-active .viz-embed__cv { opacity: 1; transform: none; transition: opacity 250ms var(--enter) 0.15s, transform 350ms var(--pop) 0.15s; }
.stack-card--embed.is-active .viz-pz__piece { opacity: 1; translate: 0 0; transition: opacity 300ms var(--enter) calc(var(--k) * 0.03s), translate 400ms var(--enter) calc(var(--k) * 0.03s); }
.stack-card--embed.is-active .viz-pz__cv { animation: pz-snap 450ms var(--enter) 0.15s both; }
.stack-card--embed.is-active .viz-pz__glow { animation: pz-glow 500ms var(--enter) 0.4s both; }
.stack-card--embed.is-active .viz-embed__done { opacity: 1; transform: none; transition: opacity 300ms var(--enter) 0.35s, transform 300ms var(--enter) 0.35s; }
@keyframes pz-snap {
  0% { opacity: 0; translate: 90px -80px; rotate: 18deg; }
  25% { opacity: 1; }
  70% { translate: 0 -12px; rotate: 0deg; }
  84% { translate: 0 1.5px; }
  100% { opacity: 1; translate: 0 0; rotate: 0deg; }
}
@keyframes pz-glow { 0% { opacity: 0; } 35% { opacity: 1; } 100% { opacity: 0.45; } }

/* ---- 03 Research: data lands in the window on the main screen; analyses pop out around it ---- */
.viz-rnd__glow { fill: url(#rnd-g-glow); }
.viz-rnd__floor { fill: color-mix(in oklab, var(--black) 40%, transparent); filter: blur(6px); }
.viz-rnd__frame { fill: url(#rnd-g-frame); }
.viz-rnd__screen { fill: url(#rnd-g-light); }
.viz-rnd__bezel { fill: url(#rnd-g-dark); stroke: color-mix(in oklab, var(--white) 22%, transparent); stroke-width: 1; }
.viz-rnd__laptop-base { fill: color-mix(in oklab, var(--white) 70%, var(--navy-300)); }
.viz-rnd__card { fill: var(--white); filter: drop-shadow(0 8px 12px color-mix(in oklab, var(--black) 30%, transparent)); }
.viz-rnd__titlebar { fill: var(--navy-50); }
.viz-rnd__dot { fill: var(--navy-100); }
.viz-rnd__title { font-size: 6.5px; font-weight: 600; letter-spacing: 0.02em; fill: var(--slate); }
.viz-rnd__axis { fill: none; stroke: var(--slate-300); stroke-width: 1; }
.viz-rnd__text-lines { fill: none; stroke: var(--slate-200); stroke-width: 2.5; stroke-linecap: round; }
.viz-rnd__text-lines--faint { stroke: var(--navy-100); }
.viz-rnd__src { fill: var(--navy-300); }
.viz-rnd__tgt { fill: var(--white); stroke: var(--navy); stroke-width: 1.1; }
.viz-rnd__fit { fill: none; stroke: var(--navy); stroke-width: 1.8; stroke-linecap: round; stroke-dasharray: 100; }
.viz-rnd__bar { fill: url(#rnd-g-bar); }
.viz-rnd__curve { fill: none; stroke: var(--navy); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 100; }
.viz-rnd__curve--b { stroke: var(--navy-300); }
.viz-rnd__cell { fill: var(--navy); }
.viz-rnd__ring-track { fill: none; stroke: var(--navy-50); stroke-width: 3; }
.viz-rnd__ring { fill: none; stroke: var(--navy); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 100; rotate: -90deg; transform-box: fill-box; transform-origin: center; }
.viz-rnd__paper { transform-box: fill-box; transform-origin: center; rotate: 4deg; }
.viz-rnd__badge circle { fill: var(--white); filter: drop-shadow(0 6px 8px color-mix(in oklab, var(--black) 30%, transparent)); }
.viz-rnd__badge path { fill: var(--navy); }
.viz-rnd__badge .viz-rnd__stroke { fill: none; stroke: var(--navy); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.viz-rnd__src, .viz-rnd__tgt, .viz-rnd__bar, .viz-rnd__pop, .viz-rnd__window, .viz-rnd__grounded { transform-box: fill-box; }
.viz-rnd__src, .viz-rnd__tgt, .viz-rnd__pop { transform-origin: center; }
.viz-rnd__bar { transform-origin: bottom; }
.rnd-stop-light-a { stop-color: var(--white); }
.rnd-stop-light-b { stop-color: var(--navy-50); }
.rnd-stop-dark-a { stop-color: var(--ink-800); }
.rnd-stop-dark-b { stop-color: var(--ink); }
.rnd-stop-frame-a { stop-color: var(--navy-300); }
.rnd-stop-frame-b { stop-color: color-mix(in oklab, var(--navy-300) 40%, var(--navy)); }
.rnd-stop-bar-a { stop-color: var(--navy-300); }
.rnd-stop-bar-b { stop-color: var(--navy); }
.rnd-stop-glow-a { stop-color: var(--navy-300); stop-opacity: 0.28; }
.rnd-stop-glow-b { stop-color: var(--navy-300); stop-opacity: 0; }
.viz-rnd__chip { position: absolute; right: 1.5rem; bottom: 1.25rem; padding: 0.4rem 0.8rem; border-radius: 999px; background: var(--white); color: var(--navy); font-size: var(--text-xs); box-shadow: var(--shadow-md); }
.viz-rnd__swap { display: grid; }
.viz-rnd__swap b { grid-area: 1 / 1; font-weight: 600; }
/* resting state */
.js .viz-rnd__window { opacity: 0; translate: 0 18px; transition: opacity 300ms var(--enter), translate 300ms var(--enter); }
.js .viz-rnd__src { opacity: 0; transition: opacity 250ms var(--enter); }
.js .viz-rnd__tgt { opacity: 0; translate: var(--dx) var(--dy); transition: opacity 250ms var(--enter), translate 250ms var(--enter); }
.js .viz-rnd__fit, .js .viz-rnd__curve, .js .viz-rnd__ring { stroke-dashoffset: 100; transition: stroke-dashoffset 250ms var(--enter); }
.js .viz-rnd__bar { scale: 1 0; transition: scale 250ms var(--enter); }
.js .viz-rnd__cell { opacity: 0; transition: opacity 250ms var(--enter); }
.js .viz-rnd__grounded { opacity: 0; translate: 0 14px; transition: opacity 250ms var(--enter), translate 250ms var(--enter); }
.js .viz-rnd__pop { opacity: 0; scale: 0.6; transition: opacity 250ms var(--enter), scale 250ms var(--enter); }
.js .viz-rnd__swap b { transition: opacity 250ms var(--enter), filter 250ms var(--enter); }
.js .viz-rnd__swap b + b { opacity: 0; filter: blur(2px); }
/* active: window slides in → data lands and aligns → fit draws → analyses pop out → everything floats.
   Cards 02–04 finish building in about 0.6s so the visual is complete moments after the card settles. */
.stack-card--rnd.is-active .viz-rnd__window { opacity: 1; translate: 0 0; transition: opacity 250ms var(--enter), translate 350ms var(--enter); }
.stack-card--rnd.is-active .viz-rnd__src { opacity: 1; transition: opacity 250ms var(--enter) calc(0.05s + var(--k) * 10ms); }
.stack-card--rnd.is-active .viz-rnd__tgt { opacity: 1; translate: 0 0; transition: opacity 250ms var(--enter) calc(0.1s + var(--k) * 10ms), translate 350ms var(--enter) calc(0.15s + var(--k) * 10ms); }
.stack-card--rnd.is-active .viz-rnd__fit { stroke-dashoffset: 0; transition: stroke-dashoffset 300ms var(--enter) 0.35s; }
.stack-card--rnd.is-active .viz-rnd__pop { opacity: 1; scale: 1; transition: opacity 250ms var(--enter) calc(0.2s + var(--p) * 0.05s), scale 350ms var(--pop) calc(0.2s + var(--p) * 0.05s); }
.stack-card--rnd.is-active .viz-rnd__grounded { opacity: 1; translate: 0 0; transition: opacity 250ms var(--enter) 0.3s, translate 350ms var(--enter) 0.3s; }
.stack-card--rnd.is-active .viz-rnd__float { animation: rnd-float 3.6s var(--ease-in-out) calc(0.8s + var(--f) * -0.9s) infinite alternate; }
.stack-card--rnd.is-active .viz-rnd__bar { scale: 1 1; transition: scale 350ms var(--pop) calc(0.2s + var(--k) * 0.02s); }
.stack-card--rnd.is-active .viz-rnd__curve { stroke-dashoffset: 0; transition: stroke-dashoffset 350ms var(--enter) 0.25s; }
.stack-card--rnd.is-active .viz-rnd__curve--b { transition-delay: 0.3s; }
.stack-card--rnd.is-active .viz-rnd__cell { opacity: var(--v); transition: opacity 250ms var(--enter) calc(0.25s + var(--k) * 8ms); }
.stack-card--rnd.is-active .viz-rnd__ring { stroke-dashoffset: 18; transition: stroke-dashoffset 400ms var(--enter) 0.25s; }
.stack-card--rnd.is-active .viz-rnd__swap b:first-child { opacity: 0; filter: blur(2px); transition-delay: 0.3s; }
.stack-card--rnd.is-active .viz-rnd__swap b + b { opacity: 1; filter: none; transition-delay: 0.35s; }
@keyframes rnd-float { from { translate: 0 0; } to { translate: 0 -4px; } }

/* ---- 04 Partnership: quality dips with drift, each retrain lifts it higher ---- */
.viz-partner__live { position: absolute; right: 1.5rem; top: 1.25rem; z-index: 1; display: flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.75rem; border-radius: 999px; background: var(--navy-50); color: var(--navy); font-size: var(--text-xs); font-weight: 500; }
.viz-partner__live .viz-dot { background: var(--navy); }
.viz-partner__grid { fill: none; stroke: var(--line); }
.viz-partner__stop { stop-color: var(--navy); stop-opacity: 0.2; }
.viz-partner__stop--end { stop-opacity: 0; }
.viz-partner__area { fill: url(#partner-fill); }
.viz-partner__line { fill: none; stroke: var(--navy); stroke-width: 2.5; stroke-linejoin: round; stroke-dasharray: 100; }
.viz-partner__marks circle { fill: var(--white); stroke: var(--navy); stroke-width: 2; }
.viz-partner__marks text { font-size: 11px; font-weight: 700; fill: var(--navy); text-anchor: middle; }
.viz-partner__marks g { transform-box: fill-box; transform-origin: center; }
.viz-partner__axis text { font-size: 10px; fill: var(--slate); text-anchor: middle; }
.viz-partner__axis text:first-child { text-anchor: start; }
.viz-partner__axis text:last-child { text-anchor: end; }
.viz-partner__caption { position: absolute; left: 1.5rem; bottom: 1.25rem; font-size: var(--text-xs); color: var(--slate); }
.js .viz-partner__line { stroke-dashoffset: 100; transition: stroke-dashoffset 300ms var(--enter); }
.js .viz-partner__area { opacity: 0; transition: opacity 300ms var(--enter); }
.js .viz-partner__marks g { transform: scale(0); transition: transform 250ms var(--enter); }
.stack-card--partner.is-active .viz-partner__line { stroke-dashoffset: 0; transition: stroke-dashoffset 600ms cubic-bezier(0.45, 0, 0.25, 1); }
.stack-card--partner.is-active .viz-partner__area { opacity: 1; transition: opacity 350ms var(--enter) 0.25s; }
.stack-card--partner.is-active .viz-partner__marks g { transform: none; transition: transform 250ms var(--pop) calc(0.12s + var(--k) * 0.1s); }

@media (prefers-reduced-motion: reduce) {
  .stack-card__visual > * { translate: none; }
}

/* =========================================================
   TESTIMONIALS & PARTNERS
   ========================================================= */
/* the CTA follows directly on the same white, so one section gap is enough */
.testimonials { padding-bottom: calc(var(--space-section) * 0.5); }
.center-head { display: grid; justify-items: center; text-align: center; gap: 1.25rem; margin-bottom: clamp(2.5rem, 2rem + 2vw, 3.5rem); }
.center-head__desc { max-width: 44ch; color: var(--slate); font-weight: 300; font-size: var(--text-sm); }
.center-head__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; margin-top: 0.5rem; }
/* full-bleed row that slides left continuously; the first card starts in line with the page container.
   home.js moves the track with a transform, clones cards for a seamless loop and handles drag. */
.quotes { --quote-gap: clamp(1rem, 0.6rem + 1.4vw, 1.75rem); --quote-edge: max(var(--gutter), (100% - var(--max)) / 2); overflow: hidden; overflow: clip; }
.quotes__track { display: flex; gap: var(--quote-gap); width: max-content; padding: 0.5rem var(--quote-edge); }
.quotes.is-ready .quotes__track { touch-action: pan-y; cursor: grab; will-change: transform; }
.quotes.is-dragging .quotes__track { cursor: grabbing; user-select: none; }
.quotes__track img { -webkit-user-drag: none; }
.quotes .quote { flex: none; }
/* no JS: a plain swipeable row */
.quotes:not(.is-ready) { overflow-x: auto; scroll-snap-type: x mandatory; }
.quotes:not(.is-ready) .quote { scroll-snap-align: start; }

.quotes__controls { display: flex; justify-content: center; gap: 0.5rem; margin-top: 1.5rem; }
.quotes__controls[hidden] { display: none; }
.quotes__btn {
  display: grid; place-items: center; width: 44px; height: 44px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-xs); background: var(--white); color: var(--ink); cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
.quotes__btn[hidden] { display: none; }
.quotes__btn svg { width: 18px; height: 18px; }
.quotes__btn:hover { background: var(--navy); border-color: var(--navy); color: var(--white); }
.quotes__btn:active { transform: scale(0.96); }

/* the photo fills the whole card; the message card sits on top of it */
.quote {
  position: relative; isolation: isolate; display: flex; flex-direction: column;
  width: min(84vw, 760px); padding: 160px 0.75rem 0.75rem;
  border-radius: var(--radius-lg); overflow: hidden;
}
.quote__media {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(135deg, var(--navy-100), var(--navy-300) 55%, var(--navy));
}
.quote__media img { width: 100%; height: 100%; object-fit: cover; }
.quote__card {
  flex: 1; display: flex; flex-direction: column; gap: 1rem; padding: 1.5rem 1.25rem 1.25rem;
  background: var(--white); border-radius: var(--radius-md); box-shadow: var(--shadow-md);
}
@media (min-width: 760px) {
  .quote { flex-direction: row; justify-content: flex-end; padding: 1rem; }
  .quote__card { flex: 0 1 58%; }
}
.quote__mark { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--navy); color: var(--white); }
.quote__mark svg { width: 16px; height: 16px; }
.quote figcaption strong { display: block; font-weight: 500; text-transform: uppercase; letter-spacing: 0.01em; }
.quote figcaption span { font-size: var(--text-xs); color: var(--slate); font-weight: 300; }
.quote blockquote { flex: 1; padding: 0.75rem 0 0.75rem 1rem; border-left: 2px solid var(--line-strong); border-bottom: 1px solid var(--line); font-size: var(--text-sm); line-height: 1.6; }
.quote__btn {
  position: relative; isolation: isolate; overflow: hidden; display: block; text-align: center;
  padding: 0.75rem; border-radius: var(--radius-xs); border: 1px solid var(--line-strong); font-size: var(--text-sm);
  transition: color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
/* navy wipe: fills in from the left on hover, leaves to the right */
.quote__btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--navy);
  transform: scaleX(0); transform-origin: right; transition: transform var(--dur) var(--ease-out);
}
.quote__btn:hover, .quote__btn:focus-visible { color: var(--white); border-color: var(--navy); }
.quote__btn:hover::before, .quote__btn:focus-visible::before { transform: scaleX(1); transform-origin: left; }

@media (prefers-reduced-motion: reduce) {
  .quote__btn::before { transition: none; }
}

.partners { margin-top: clamp(3rem, 2rem + 3vw, 5rem); }
.partners__bar { padding: 0.55rem 0.9rem; background: var(--neutral); border-radius: var(--radius-xs) var(--radius-xs) 0 0; }
.partners__label { display: inline-flex; align-items: center; gap: 0.6rem; font-size: var(--text-xs); color: var(--slate); }
.partners__label svg { width: 14px; height: 14px; color: var(--navy-300); }
.partners__row { display: grid; grid-template-columns: repeat(2, 1fr); border: 1px solid var(--line); }
@media (min-width: 760px) { .partners__row { grid-template-columns: repeat(4, 1fr); } }
.partners__row li { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.partners__row a { display: grid; place-items: center; height: clamp(76px, 4.5rem + 1.5vw, 96px); color: var(--slate); transition: color var(--dur), background var(--dur); }
.partners__row a:hover { color: var(--ink); background: var(--neutral); }
/* multiply drops the logos' white backgrounds into the cell colour, including the hover tint */
.partners__logo { width: auto; height: auto; max-width: 52%; max-height: clamp(26px, 1.4rem + 1vw, 40px); object-fit: contain; mix-blend-mode: multiply; transition: transform var(--dur) var(--ease-out); }
.partners__logo--tall { max-height: clamp(40px, 2.2rem + 1.2vw, 58px); }
.partners__row a:hover .partners__logo { transform: scale(1.04); }

/* =========================================================
   CTA + app mock
   ========================================================= */
.home-cta { background: linear-gradient(180deg, var(--white) 75%, color-mix(in oklab, var(--navy) 15%, var(--white))); padding-bottom: 0; }
.app { display: grid; max-width: 920px; margin-inline: auto; padding: 0.6rem 0.6rem 0; border: 1px solid var(--line); border-bottom: 0; border-radius: var(--radius-md) var(--radius-md) 0 0; background: color-mix(in oklab, var(--white) 70%, transparent); }
@media (min-width: 700px) { .app { grid-template-columns: 190px 1fr; } }
.app__side { display: none; padding: 1rem 0.5rem; }
@media (min-width: 700px) { .app__side { display: block; } }
.app__side li { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0.75rem; font-size: var(--text-sm); border-radius: var(--radius-xs); }
.app__side li:first-child { background: var(--neutral); }
.app__side svg { width: 16px; height: 16px; color: var(--slate); }
.app__main { display: grid; justify-items: center; align-content: center; gap: 0.85rem; min-height: 340px; padding: 2rem; text-align: center; border-radius: var(--radius-sm) var(--radius-sm) 0 0; background: var(--neutral); border: 1px solid var(--line); border-bottom: 0; }
.app__logo { display: inline-flex; align-items: baseline; gap: 2px; padding: 1rem; border-radius: 50%; background: var(--white); box-shadow: var(--shadow-sm); font-weight: 600; letter-spacing: -0.04em; }
.app__logo i { width: 5px; height: 5px; border-radius: 50%; background: var(--navy); }
.app__title { font-size: var(--text-xl); letter-spacing: -0.02em; }
.app__sub { font-size: var(--text-xs); color: var(--slate); }
.app__btn { padding: 0.45rem 0.9rem; border-radius: var(--radius-xs); background: var(--navy); color: var(--white); font-size: var(--text-xs); text-decoration: none; transition: background-color 150ms ease, transform 150ms ease; }
.app__btn:hover { background: color-mix(in oklab, var(--navy) 82%, var(--white)); }
.app__btn:active { transform: scale(0.97); }
.app__btn:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .hero-media::before, .hero-dial,
  .why-orb__cool, .why-panel__dots, .why-live::after { animation: none; }
}