/*
  MOBIUS BLOOM DESIGN TOKENS — DECIDED BEFORE IMPLEMENTATION

  COLOR
  --ink-950: #06080D  — deep obsidian; primary canvas, lets the supplied white logo plate feel intentional.
  --ink-850: #0D111A  — carbon plane; surfaces and section transitions without flattening everything to one black.
  --signal-500: #1C64F2 — electric rail; behaves like circuitry / directional continuity, never as a generic flat accent wash.
  --ion-300: #7AD7FF — return signal; reserved for active loop states, data return and precise highlights.
  --star-050: #F6F9FF — star white; primary text and telemetry points drawn from the logo's star-field texture.
  --telemetry-400: #8C96A8 — instrument gray; secondary copy, labels and inactive states.

  TYPE
  Display: Bahnschrift SemiCondensed / Bahnschrift — DIN-derived, engineered, narrow enough to make long systems language feel controlled rather than editorial.
  Body: Aptos / Segoe UI — neutral, high-legibility UI copy that stays out of the way of the system diagrams.
  Mono: Cascadia Mono / Consolas — telemetry, tags and status readouts; technical without using a stock icon language.

  LAYOUT
  Structural idea: a 12-column operating console crossed by one persistent signal rail; asymmetry expresses input → routing → return rather than a centered brochure stack.

  HERO WIREFRAME
  +--------------------------------------------------------------------------------+
  | NAV: mark / sections / CTA                                                    |
  |                                                                                |
  | [7 cols: thesis + actions + signals]      [5 cols: actual logo inside orbit]   |
  | headline wraps like a routing statement       Comm ───────────── Ops           |
  | lede + loop CTA                                 \   LOGO PLATE   /             |
  | 3 operating signals                              Data ───── Intelligence         |
  |                                                                                |
  | < continuous moving sentence / signal return rail >                            |
  +--------------------------------------------------------------------------------+

  HOW IT WORKS WIREFRAME
  +--------------------------------------------------------------------------------+
  | section thesis                                                                 |
  |                                                                                |
  | [sticky 6 cols]                            [scrolling 6 cols]                    |
  |   Communication                              structured interaction             |
  |        ╲      ╱                              operations handoff                 |
  |      [ continuous loop ]                     event data                         |
  |        ╱      ╲                              intelligence → back to comms       |
  |    Data      Intelligence                                                      |
  |                                                                                |
  | scroll position draws path + activates node + updates detail                    |
  +--------------------------------------------------------------------------------+

  SIGNATURE ELEMENT
  The Return Loop: a scroll-driven, continuously drawn four-layer infrastructure loop whose active state moves from Communication → Operations → Data → Intelligence → back to Communication. It is interactive on click and driven by scroll progress, so the core company thesis is physically experienced rather than merely described.
*/

:root {
  --ink-950: #06080D;
  --ink-850: #0D111A;
  --signal-500: #1C64F2;
  --ion-300: #7AD7FF;
  --star-050: #F6F9FF;
  --telemetry-400: #8C96A8;
  --line: rgba(246, 249, 255, 0.11);
  --line-strong: rgba(122, 215, 255, 0.28);
  --panel: rgba(13, 17, 26, 0.72);
  --panel-solid: #0D111A;
  --display: "Bahnschrift SemiCondensed", "Bahnschrift", "Arial Narrow", sans-serif;
  --body: "Aptos", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: "Cascadia Mono", "Consolas", "SFMono-Regular", monospace;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-snap: cubic-bezier(.16, 1, .3, 1);
  --shell: min(1180px, calc(100vw - 48px));
  --radius: 22px;
  --header-h: 76px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--ink-950); }
body {
  margin: 0;
  min-width: 320px;
  color: var(--star-050);
  background:
    radial-gradient(circle at 78% 14%, rgba(28, 100, 242, 0.12), transparent 24rem),
    radial-gradient(circle at 18% 52%, rgba(122, 215, 255, 0.05), transparent 26rem),
    var(--ink-950);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }
button, input, textarea { font: inherit; }
a { color: inherit; }
img { max-width: 100%; display: block; }
button { color: inherit; }
::selection { background: var(--signal-500); color: #fff; }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: fixed;
  top: 10px; left: 10px;
  transform: translateY(-160%);
  z-index: 1000;
  padding: 10px 14px;
  background: var(--star-050);
  color: var(--ink-950);
  border-radius: 8px;
  transition: transform .2s var(--ease);
}
.skip-link:focus { transform: translateY(0); }

:focus-visible {
  outline: 2px solid var(--ion-300);
  outline-offset: 4px;
}

.starfield {
  position: fixed;
  inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: -3;
  opacity: .78;
}

.page-grid {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  opacity: .28;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(to bottom, black, transparent 84%);
}

.signal-rail {
  position: fixed;
  z-index: 50;
  right: 14px;
  top: calc(var(--header-h) + 24px);
  width: 2px;
  height: calc(100vh - var(--header-h) - 48px);
  background: rgba(255,255,255,.08);
  border-radius: 99px;
  overflow: hidden;
  pointer-events: none;
}
.signal-rail span {
  display: block;
  width: 100%; height: 100%;
  transform: scaleY(0);
  transform-origin: top;
  background: linear-gradient(var(--signal-500), var(--ion-300));
  box-shadow: 0 0 18px rgba(122,215,255,.8);
}

.shell { width: var(--shell); margin-inline: auto; }
.section { position: relative; padding: 132px 0; }
.section--tight { padding: 98px 0; }

.section-kicker,
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .13em;
  color: var(--ion-300);
}
.section-kicker::before {
  content: "";
  width: 18px; height: 1px;
  background: currentColor;
  box-shadow: 7px 0 12px currentColor;
}
.section-kicker--light { color: #06152c; }
.eyebrow__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ion-300);
  box-shadow: 0 0 14px var(--ion-300);
}

.display {
  margin: 0;
  font-family: var(--display);
  font-weight: 620;
  letter-spacing: -0.035em;
  line-height: .98;
  text-wrap: balance;
}
.display--hero { font-size: clamp(3.55rem, 6.3vw, 6.8rem); max-width: 980px; }
.display--section { font-size: clamp(2.55rem, 4.7vw, 5rem); max-width: 900px; }

[data-reveal] .reveal-word {
  display: inline-block;
  opacity: 0;
  transform: translate3d(0, .72em, 0) rotateX(28deg);
  transform-origin: 50% 100%;
  transition:
    opacity .72s var(--ease-snap),
    transform .72s var(--ease-snap);
  transition-delay: calc(var(--i) * 26ms);
  will-change: transform, opacity;
}
[data-reveal].is-revealed .reveal-word { opacity: 1; transform: none; }

.button {
  --mx: 0px;
  --my: 0px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 700;
  letter-spacing: -0.01em;
  cursor: pointer;
  transform: translate3d(var(--mx), var(--my), 0);
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease), transform .14s linear;
  will-change: transform;
}
.button--primary {
  color: white;
  background: linear-gradient(115deg, #1C64F2 0%, #1456d9 58%, #0f3f9f 100%);
  border-color: rgba(122,215,255,.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 13px 34px rgba(28,100,242,.22);
}
.button--primary:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 16px 40px rgba(28,100,242,.34), 0 0 0 1px rgba(122,215,255,.14); }
.button--inverse {
  color: var(--ink-950);
  background: white;
  border-color: rgba(6,8,13,.18);
}
.button--inverse:hover { background: #eaf5ff; }
.button[disabled] { opacity: .62; cursor: wait; }

.text-link,
.nav-menu > a:not(.nav-cta),
.footer__links a {
  position: relative;
  width: fit-content;
  text-decoration: none;
}
.text-link { display: inline-flex; gap: 7px; align-items: center; font-weight: 700; }
.text-link::after,
.nav-menu > a:not(.nav-cta)::after,
.footer__links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -5px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .32s var(--ease);
}
.text-link:hover::after,
.nav-menu > a:not(.nav-cta):hover::after,
.footer__links a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* Loader */
.loader {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: grid;
  place-items: center;
  background: #05070b;
  transition: opacity .36s var(--ease), visibility .36s var(--ease);
}
.loader.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
.loader__skip {
  position: absolute;
  right: 22px; top: 20px;
  border: 0;
  background: transparent;
  color: var(--telemetry-400);
  font-family: var(--mono);
  font-size: 12px;
  cursor: pointer;
  padding: 8px;
}
.loader__skip:hover { color: var(--star-050); }
.loader__mark { width: min(390px, 72vw); position: relative; text-align: center; }
.loader__plate {
  position: relative;
  width: 190px;
  aspect-ratio: 1099 / 1100;
  margin: 0 auto;
  border-radius: 18px;
  overflow: hidden;
  background: white;
  box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 32px 80px rgba(0,0,0,.42);
  opacity: .24;
  animation: loaderPlate 1.18s var(--ease-snap) forwards;
}
.loader__plate > img,
.loader__reveal img { width: 100%; height: 100%; object-fit: contain; }
.loader__reveal {
  position: absolute;
  inset: 0;
  clip-path: inset(0 100% 0 0);
  animation: logoReveal 1.15s .05s var(--ease-snap) forwards;
}
.loader__trace { position: absolute; width: 100%; left: 0; top: 16%; overflow: visible; }
.loader__trace path {
  fill: none;
  stroke: rgba(122,215,255,.58);
  stroke-width: 1.2;
  stroke-dasharray: 710;
  stroke-dashoffset: 710;
  animation: traceDraw 1.2s .03s var(--ease-snap) forwards;
  filter: drop-shadow(0 0 9px rgba(122,215,255,.85));
}
.loader__bead { fill: var(--ion-300); filter: drop-shadow(0 0 8px var(--ion-300)); }
.loader__label {
  margin: 28px 0 0;
  font-family: var(--mono);
  color: var(--telemetry-400);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
@keyframes logoReveal { to { clip-path: inset(0 0 0 0); } }
@keyframes traceDraw { to { stroke-dashoffset: 0; } }
@keyframes loaderPlate { to { opacity: 1; transform: translateY(0) scale(1); } from { transform: translateY(10px) scale(.96); } }

/* Header */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--header-h);
  z-index: 80;
  background: linear-gradient(to bottom, rgba(6,8,13,.92), rgba(6,8,13,.58), transparent);
  backdrop-filter: blur(14px) saturate(120%);
}
.nav { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.brand-link { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; flex: 0 0 auto; }
.brand-mark {
  width: 34px; height: 34px;
  overflow: hidden;
  border-radius: 8px;
  background: white;
  box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 0 28px rgba(28,100,242,.12);
}
.brand-mark img { width: 100%; height: 100%; object-fit: cover; }
.brand-name { font-family: var(--display); font-size: 17px; letter-spacing: .01em; }
.nav-menu { display: flex; align-items: center; gap: 28px; color: #c3cad6; font-size: 14px; }
.nav-menu > a:not(.nav-cta) { padding: 8px 0; }
.nav-cta {
  min-height: 42px;
  padding-inline: 16px;
  border: 1px solid rgba(122,215,255,.22);
  border-radius: 8px;
  color: white;
  text-decoration: none;
  background: rgba(28,100,242,.1);
  font-weight: 700;
}
.nav-toggle { display: none; }

/* Hero */
.hero { padding-top: calc(var(--header-h) + 104px); padding-bottom: 78px; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; }
.hero__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(340px, 5fr); align-items: center; gap: clamp(40px, 5vw, 84px); }
.hero__copy { position: relative; z-index: 2; }
.hero__copy .eyebrow { margin-bottom: 26px; }
.hero__lede { max-width: 760px; margin: 28px 0 0; color: #b6c0cf; font-size: clamp(1.05rem, 1.4vw, 1.28rem); }
.hero__actions { display: flex; align-items: center; gap: 24px; margin-top: 34px; }
.hero__signals { margin: 54px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); max-width: 760px; }
.hero__signals div { background: rgba(6,8,13,.76); padding: 20px; min-height: 114px; }
.hero__signals dt { font-family: var(--display); font-size: clamp(1.9rem, 3vw, 3rem); line-height: 1; color: white; }
.hero__signals dd { margin: 9px 0 0; color: var(--telemetry-400); font-size: 13px; line-height: 1.4; }

.hero__orbit { position: relative; min-height: 560px; display: grid; place-items: center; isolation: isolate; }
.logo-console {
  position: relative;
  z-index: 4;
  width: min(350px, 80%);
  margin: 0;
  overflow: hidden;
  border-radius: 26px;
  background: white;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.15),
    0 32px 80px rgba(0,0,0,.38),
    0 0 70px rgba(28,100,242,.16);
  transform: perspective(1000px) rotateY(-7deg) rotateX(2deg);
}
.logo-console img { width: 100%; aspect-ratio: 1099 / 1100; object-fit: contain; }
.logo-console figcaption {
  display: flex;
  justify-content: space-between;
  padding: 12px 14px;
  border-top: 1px solid #e8edf5;
  color: #667085;
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.logo-console figcaption strong { color: #1C64F2; font-weight: 700; }
.orbit-halo { position: absolute; border: 1px solid rgba(122,215,255,.16); border-radius: 50%; z-index: 1; }
.orbit-halo::after { content: ""; position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--ion-300); box-shadow: 0 0 16px var(--ion-300); top: 50%; left: -4px; transform: translateY(-50%); }
.orbit-halo--outer { width: 470px; height: 470px; animation: orbitSpin 18s linear infinite; }
.orbit-halo--inner { width: 395px; height: 250px; transform: rotate(-25deg); border-color: rgba(28,100,242,.3); animation: orbitTilt 14s linear infinite reverse; }
.orbit-label {
  position: absolute;
  z-index: 5;
  padding: 7px 10px;
  border: 1px solid rgba(255,255,255,.11);
  background: rgba(6,8,13,.78);
  backdrop-filter: blur(10px);
  font-family: var(--mono);
  color: #d9e2ef;
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.orbit-label--one { top: 68px; left: 8%; }
.orbit-label--two { right: 0; top: 36%; }
.orbit-label--three { bottom: 76px; left: 16%; }
.orbit-label--four { right: 8%; bottom: 18%; }
.orbit-readout { position: absolute; z-index: 3; display: flex; gap: 8px; align-items: center; font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.orbit-readout span { color: var(--telemetry-400); }
.orbit-readout strong { color: var(--ion-300); }
.orbit-readout--top { top: 22%; right: 4%; }
.orbit-readout--bottom { bottom: 23%; left: 2%; }
@keyframes orbitSpin { to { transform: rotate(360deg); } }
@keyframes orbitTilt { from { transform: rotate(-25deg); } to { transform: rotate(335deg); } }

.hero__marquee {
  width: 100%;
  overflow: hidden;
  margin-top: 70px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  color: #788397;
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .12em;
  white-space: nowrap;
}
.hero__marquee div { width: max-content; padding: 13px 0; animation: marquee 28s linear infinite; }
.hero__marquee span { color: var(--signal-500); padding: 0 18px; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* Fracture */
.fracture { border-top: 1px solid var(--line); background: linear-gradient(180deg, rgba(13,17,26,.72), rgba(6,8,13,.35)); }
.fracture__intro { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(280px, .6fr); gap: 50px; align-items: end; margin-top: 22px; }
.fracture__intro p { margin: 0; color: var(--telemetry-400); font-size: 1.06rem; }
.fracture__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 52px; }
.fracture-card,
.fit-card {
  --rx: 0deg; --ry: 0deg;
  transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));
  transform-style: preserve-3d;
  transition: transform .16s linear, border-color .3s var(--ease), background .3s var(--ease);
  will-change: transform;
}
.fracture-card {
  position: relative;
  min-height: 285px;
  padding: 28px;
  border: 1px solid var(--line);
  background: rgba(8,11,17,.78);
  overflow: hidden;
}
.fracture-card::after { content: ""; position: absolute; inset: auto 0 0; height: 1px; background: linear-gradient(90deg, transparent, var(--signal-500), transparent); transform: scaleX(.25); opacity: .3; transition: transform .4s var(--ease), opacity .4s var(--ease); }
.fracture-card:hover { border-color: rgba(122,215,255,.24); background: rgba(13,17,26,.94); }
.fracture-card:hover::after { transform: scaleX(1); opacity: .95; }
.fracture-card__pulse { display: block; width: 8px; height: 8px; border-radius: 50%; background: #ff6b6b; box-shadow: 0 0 0 6px rgba(255,107,107,.07); margin-bottom: 54px; }
.fracture-card h3 { margin: 0 0 14px; font-family: var(--display); font-size: 1.52rem; line-height: 1.08; letter-spacing: -.02em; }
.fracture-card p { margin: 0; color: var(--telemetry-400); }

/* Systems loop */
.systems { overflow: clip; }
.systems::before { content: ""; position: absolute; inset: 8% -20% auto; height: 68%; background: radial-gradient(circle, rgba(28,100,242,.11), transparent 58%); pointer-events: none; }
.systems__head { display: grid; grid-template-columns: 1.3fr .7fr; gap: 60px; align-items: end; }
.systems__head > div .section-kicker { margin-bottom: 20px; }
.systems__head > p { margin: 0 0 8px; color: var(--telemetry-400); font-size: 1.06rem; }
.systems__story { display: grid; grid-template-columns: minmax(0, 1fr) minmax(390px, .9fr); gap: 72px; margin-top: 80px; position: relative; }
.loop-stage {
  --twist: 0deg;
  position: sticky;
  top: 116px;
  height: min(74vh, 700px);
  min-height: 580px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  background:
    radial-gradient(circle at 50% 50%, rgba(28,100,242,.14), transparent 38%),
    rgba(8,11,17,.74);
  overflow: hidden;
  isolation: isolate;
}
.loop-stage::before { content: ""; position: absolute; width: 84%; aspect-ratio: 1; border-radius: 50%; border: 1px dashed rgba(255,255,255,.05); transform: rotate(var(--twist)); transition: transform .1s linear; }
.loop-diagram { width: min(590px, 94%); overflow: visible; }
.loop-diagram__ghost { fill: none; stroke: rgba(255,255,255,.1); stroke-width: 2; }
.loop-diagram__progress { fill: none; stroke: url(#none); stroke: var(--ion-300); stroke-width: 3; stroke-linecap: round; }
.loop-diagram__core { fill: rgba(6,8,13,.72); stroke: rgba(122,215,255,.22); stroke-width: 1; }
.loop-diagram__core-label { fill: var(--telemetry-400); font-family: var(--mono); font-size: 11px; letter-spacing: .17em; }
.loop-diagram__core-value { fill: var(--star-050); font-family: var(--display); font-size: 19px; font-weight: 700; letter-spacing: .04em; }
.loop-node {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(6,8,13,.9);
  color: #aab4c3;
  padding: 9px 12px;
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  cursor: pointer;
  transition: color .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease);
}
.loop-node:hover,
.loop-node.is-active { color: white; border-color: rgba(122,215,255,.58); box-shadow: 0 0 26px rgba(28,100,242,.22); transform: scale(1.03); }
.loop-node__index { display: grid; place-items: center; width: 21px; height: 21px; border-radius: 50%; background: rgba(28,100,242,.14); color: var(--ion-300); }
.loop-node--communication { top: 9%; left: 50%; transform: translateX(-50%); }
.loop-node--communication.is-active,
.loop-node--communication:hover { transform: translateX(-50%) scale(1.03); }
.loop-node--operations { top: 47%; right: 2.5%; }
.loop-node--data { bottom: 9%; left: 50%; transform: translateX(-50%); }
.loop-node--data.is-active,
.loop-node--data:hover { transform: translateX(-50%) scale(1.03); }
.loop-node--intelligence { top: 47%; left: 2.5%; }
.loop-stage__meter { position: absolute; left: 18px; right: 18px; bottom: 16px; height: 2px; background: rgba(255,255,255,.08); overflow: hidden; }
.loop-stage__meter span { display: block; width: 100%; height: 100%; transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg, var(--signal-500), var(--ion-300)); }

.systems__steps { position: relative; }
.system-step {
  min-height: 68vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 60px 0;
  opacity: .28;
  transition: opacity .42s var(--ease), transform .42s var(--ease);
}
.system-step.is-active { opacity: 1; }
.system-step__meta { font-family: var(--mono); color: var(--ion-300); font-size: 11px; text-transform: uppercase; letter-spacing: .13em; margin-bottom: 16px; }
.system-step h3 { margin: 0; font-family: var(--display); font-size: clamp(2rem, 3.2vw, 3.5rem); line-height: 1; letter-spacing: -.025em; }
.system-step p { margin: 20px 0 0; color: var(--telemetry-400); font-size: 1.02rem; max-width: 620px; }
.system-step ul { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 9px; }
.system-step li { position: relative; padding-left: 24px; color: #c7d0dc; }
.system-step li::before { content: ""; position: absolute; left: 0; top: .72em; width: 11px; height: 1px; background: var(--signal-500); box-shadow: 0 0 8px var(--signal-500); }

/* Capabilities */
.capabilities { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: rgba(13,17,26,.34); }
.capabilities__grid { display: grid; grid-template-columns: .7fr 1.3fr; gap: 70px; align-items: start; }
.capabilities__intro { position: sticky; top: 120px; }
.capabilities__intro .section-kicker { margin-bottom: 18px; }
.capabilities__intro p { max-width: 470px; color: var(--telemetry-400); }
.capability-stack { border-top: 1px solid var(--line); }
.capability-row { display: grid; grid-template-columns: 180px 1fr; gap: 18px 34px; padding: 30px 0; border-bottom: 1px solid var(--line); transition: padding-left .3s var(--ease), border-color .3s var(--ease); }
.capability-row:hover { padding-left: 12px; border-color: rgba(122,215,255,.28); }
.capability-row__tag { grid-row: 1 / span 2; align-self: start; font-family: var(--mono); color: var(--ion-300); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; }
.capability-row h3 { margin: 0; font-family: var(--display); font-size: 1.7rem; line-height: 1.06; letter-spacing: -.02em; }
.capability-row p { margin: 0; color: var(--telemetry-400); }

/* Whalexy */
.whalexy { padding: 120px 0; }
.whalexy__panel {
  position: relative;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 70px;
  color: #08101e;
  background: linear-gradient(135deg, #f8fbff, #eaf4ff 48%, #dcecff);
  border-radius: 34px;
  padding: clamp(42px, 6vw, 82px);
  overflow: hidden;
  box-shadow: 0 34px 90px rgba(0,0,0,.26);
}
.whalexy__panel::before { content: ""; position: absolute; width: 420px; height: 420px; border-radius: 50%; border: 1px solid rgba(28,100,242,.18); right: -110px; top: -150px; box-shadow: 0 0 0 48px rgba(28,100,242,.035), 0 0 0 96px rgba(28,100,242,.025); }
.whalexy__copy { position: relative; z-index: 2; }
.whalexy__copy .section-kicker { margin-bottom: 18px; }
.whalexy__copy p { color: #506078; font-size: 1.04rem; }
.whalexy__bullets { display: grid; margin: 34px 0 30px; border-top: 1px solid rgba(8,16,30,.12); }
.whalexy__bullets > div { display: grid; grid-template-columns: 46px 110px 1fr; gap: 14px; align-items: baseline; padding: 16px 0; border-bottom: 1px solid rgba(8,16,30,.12); }
.whalexy__bullets span { font-family: var(--mono); font-size: 10px; color: #1C64F2; }
.whalexy__bullets strong { font-family: var(--display); font-size: 1.08rem; }
.whalexy__bullets p { margin: 0; font-size: .92rem; }
.whalexy__signal { display: grid; place-items: center; position: relative; z-index: 2; }
.signal-window { width: min(430px, 100%); border-radius: 18px; background: #08101e; color: white; border: 1px solid rgba(255,255,255,.12); box-shadow: 0 28px 70px rgba(9,29,61,.24); overflow: hidden; transform: rotate(2deg); }
.signal-window__bar { display: flex; gap: 5px; align-items: center; padding: 12px 14px; border-bottom: 1px solid rgba(255,255,255,.09); font-family: var(--mono); color: #728098; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.signal-window__bar span { width: 6px; height: 6px; border-radius: 50%; background: #31405a; }
.signal-window__bar b { margin-left: auto; font-weight: 500; }
.signal-thread { display: grid; gap: 14px; padding: 22px; }
.signal-message { max-width: 82%; padding: 11px 13px; border-radius: 12px; font-size: 13px; line-height: 1.4; }
.signal-message--in { background: #151d2b; }
.signal-message--out { justify-self: end; background: #144dba; }
.signal-route { font-family: var(--mono); color: #6f7c91; font-size: 9px; text-transform: uppercase; letter-spacing: .08em; padding-left: 14px; position: relative; }
.signal-route::before { content: ""; position: absolute; left: 0; top: 4px; width: 5px; height: 5px; border-radius: 50%; background: #2e3950; }
.signal-route--active { color: var(--ion-300); }
.signal-route--active::before { background: var(--ion-300); box-shadow: 0 0 10px var(--ion-300); }
.signal-return { padding: 16px 22px; border-top: 1px solid rgba(255,255,255,.08); display: flex; justify-content: space-between; gap: 20px; font-family: var(--mono); font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
.signal-return span { color: #728098; }
.signal-return strong { color: #9de2ff; text-align: right; }

/* Operating fit */
.fit__head, .team__head { display: grid; grid-template-columns: 1.15fr .85fr; gap: 60px; align-items: end; }
.fit__head .section-kicker, .team__head .section-kicker { margin-bottom: 18px; }
.fit__head > p, .team__head > p { margin: 0 0 6px; color: var(--telemetry-400); }
.fit__split { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 52px; }
.fit-card { min-height: 410px; padding: 34px; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(13,17,26,.82), rgba(8,11,17,.74)); }
.fit-card:hover { border-color: rgba(122,215,255,.28); }
.fit-card__top { display: flex; justify-content: space-between; align-items: center; gap: 20px; font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .09em; color: var(--ion-300); }
.status-dot { display: inline-flex; align-items: center; gap: 8px; color: #8390a3; }
.status-dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ion-300); box-shadow: 0 0 10px rgba(122,215,255,.6); }
.fit-card h3 { margin: 58px 0 24px; font-family: var(--display); font-size: clamp(1.9rem, 3vw, 3rem); line-height: 1; letter-spacing: -.025em; }
.fit-card ul { padding: 0; list-style: none; margin: 0 0 34px; display: grid; gap: 10px; color: var(--telemetry-400); }
.fit-card li { padding-left: 20px; position: relative; }
.fit-card li::before { content: "↳"; position: absolute; left: 0; color: var(--signal-500); }

/* Thesis / stats */
.thesis { background: linear-gradient(180deg, rgba(28,100,242,.08), rgba(6,8,13,0)); border-top: 1px solid rgba(122,215,255,.12); }
.thesis__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 74px; align-items: start; }
.thesis__statement .section-kicker { margin-bottom: 18px; }
.stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.stats-grid article { min-height: 188px; padding: 26px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stats-grid strong { display: block; font-family: var(--display); font-size: clamp(2.5rem, 4.8vw, 5rem); line-height: .92; color: white; }
.stats-grid span { display: block; margin-top: 18px; color: var(--telemetry-400); font-size: 13px; line-height: 1.45; }

/* Team */
.team { border-top: 1px solid var(--line); }
.team__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 48px; }
.team-card { min-height: 310px; padding: 24px; border: 1px solid var(--line); background: rgba(8,11,17,.74); display: flex; flex-direction: column; justify-content: space-between; transition: border-color .3s var(--ease), background .3s var(--ease); }
.team-card:hover { border-color: rgba(122,215,255,.25); background: rgba(13,17,26,.92); }
.team-card__initials { display: grid; place-items: center; width: 66px; height: 66px; border-radius: 50%; border: 1px solid rgba(122,215,255,.28); font-family: var(--display); font-size: 1.6rem; letter-spacing: .03em; box-shadow: inset 0 0 28px rgba(28,100,242,.09); }
.team-card h3 { margin: 0 0 8px; font-family: var(--display); font-size: 1.35rem; }
.team-card p { margin: 0; color: var(--telemetry-400); font-size: 14px; }

/* Careers */
.careers { border-top: 1px solid var(--line); background: linear-gradient(180deg, rgba(28,100,242,.07), rgba(6,8,13,0) 44%); }
.careers__head { display: grid; grid-template-columns: 1.15fr .85fr; gap: 60px; align-items: end; }
.careers__head .section-kicker, .careers__apply-copy .section-kicker { margin-bottom: 18px; }
.careers__head > p { margin: 0 0 6px; color: var(--telemetry-400); }
.careers__roles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 48px; }
.career-role { min-height: 250px; padding: 26px; border: 1px solid var(--line); background: rgba(8,11,17,.7); transition: border-color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease); }
.career-role:hover { border-color: rgba(122,215,255,.28); background: rgba(13,17,26,.9); transform: translateY(-4px); }
.career-role > span { font-family: var(--mono); color: var(--ion-300); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; }
.career-role h3 { margin: 70px 0 12px; font-family: var(--display); font-size: 1.55rem; line-height: 1.08; }
.career-role p { margin: 0; color: var(--telemetry-400); font-size: 14px; }
.careers__apply { display: grid; grid-template-columns: .72fr 1.28fr; gap: 64px; align-items: start; margin-top: 76px; padding-top: 76px; border-top: 1px solid var(--line); }
.careers__apply-copy { position: sticky; top: calc(var(--header-h) + 28px); }
.careers__apply-copy h3 { margin: 0; font-family: var(--display); font-size: clamp(2rem, 3.3vw, 3.3rem); line-height: 1; letter-spacing: -.025em; }
.careers__apply-copy > p { margin-top: 22px; color: var(--telemetry-400); }
.careers__note { display: grid; gap: 6px; margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--line); }
.careers__note span { font-family: var(--mono); color: var(--telemetry-400); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; }
.careers__note strong { font-size: 14px; }
.career-form { padding: 34px; }
.botcheck { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; }

/* Contact */
.contact { border-top: 1px solid var(--line); background: linear-gradient(180deg, rgba(13,17,26,.42), rgba(6,8,13,1)); }
.contact__grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 80px; }
.contact__copy .section-kicker { margin-bottom: 18px; }
.contact__copy > p { color: var(--telemetry-400); max-width: 560px; }
.contact__direct { display: grid; margin-top: 40px; border-top: 1px solid var(--line); }
.contact__direct a, .contact__direct > div { display: flex; justify-content: space-between; gap: 24px; padding: 16px 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.contact__direct span { font-family: var(--mono); color: var(--telemetry-400); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; }
.contact__direct strong { font-size: 14px; text-align: right; }
.contact__direct a:hover strong { color: var(--ion-300); }
.contact-form { padding: 30px; border: 1px solid var(--line); background: rgba(8,11,17,.78); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.contact-form label { display: grid; gap: 8px; margin-bottom: 16px; }
.contact-form label > span { font-family: var(--mono); color: #c6ceda; font-size: 10px; text-transform: uppercase; letter-spacing: .1em; }
.contact-form input, .contact-form textarea, .contact-form select {
  width: 100%;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px;
  background: rgba(255,255,255,.035);
  color: white;
  padding: 13px 14px;
  outline: 0;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
}
.contact-form textarea { resize: vertical; min-height: 150px; }
.contact-form select { appearance: none; cursor: pointer; background-image: linear-gradient(45deg, transparent 50%, #7ad7ff 50%), linear-gradient(135deg, #7ad7ff 50%, transparent 50%); background-position: calc(100% - 18px) 52%, calc(100% - 13px) 52%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 38px; }
.contact-form select option { color: white; background: #0b1019; }
.contact-form label > span em { color: #667286; font-style: normal; letter-spacing: .04em; }
.contact-form input::placeholder, .contact-form textarea::placeholder { color: #596476; }
.contact-form input:focus, .contact-form textarea:focus, .contact-form select:focus { border-color: rgba(122,215,255,.62); box-shadow: 0 0 0 3px rgba(28,100,242,.1); background-color: rgba(255,255,255,.05); }
.contact-form [aria-invalid="true"] { border-color: #ff8383; }
.field-error { min-height: 15px; color: #ff9898; font-size: 11px; }
.form-actions { display: flex; align-items: center; gap: 18px; margin-top: 8px; }
.form-state { margin: 0; color: var(--telemetry-400); font-size: 12px; line-height: 1.45; }
.form-state.is-loading { color: #cbd7e6; }
.form-state.is-success { color: #9de2ff; }
.form-state.is-error { color: #ff9898; }

/* Footer */
.footer { padding: 38px 0 46px; border-top: 1px solid var(--line); background: #05070b; }
.footer__grid { display: grid; grid-template-columns: 1.1fr .9fr .8fr; gap: 40px; align-items: center; }
.footer__brand { display: flex; align-items: center; gap: 14px; }
.footer__mark { width: 48px; height: 48px; border-radius: 10px; overflow: hidden; background: white; }
.footer__mark img { width: 100%; height: 100%; object-fit: cover; }
.footer__brand strong { display: block; font-family: var(--display); }
.footer__brand span { color: var(--telemetry-400); font-size: 12px; }
.footer__links { display: flex; gap: 22px; flex-wrap: wrap; font-size: 13px; color: #c8d0dc; }
.footer__meta { display: grid; gap: 5px; justify-items: end; color: #6f7a8c; font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; text-align: right; }

@media (max-width: 1100px) {
  :root { --shell: min(100% - 40px, 1020px); }
  .brand-name { display: none; }
  .nav-menu { gap: 20px; }
  .hero__grid { grid-template-columns: 1.15fr .85fr; gap: 34px; }
  .hero__orbit { min-height: 500px; }
  .orbit-halo--outer { width: 410px; height: 410px; }
  .logo-console { width: min(310px, 82%); }
  .systems__story { gap: 46px; grid-template-columns: 1fr .85fr; }
  .loop-node { font-size: 10px; }
  .capabilities__grid { grid-template-columns: .8fr 1.2fr; gap: 46px; }
  .whalexy__panel { gap: 46px; }
  .team__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  :root { --header-h: 68px; --shell: min(100% - 32px, 760px); }
  .signal-rail { display: none; }
  .nav-toggle {
    display: grid;
    width: 42px; height: 42px;
    place-content: center;
    gap: 5px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(6,8,13,.78);
    cursor: pointer;
  }
  .nav-toggle span:not(.sr-only) { display: block; width: 17px; height: 1px; background: white; transition: transform .28s var(--ease), opacity .28s var(--ease); }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  .nav-menu {
    position: absolute;
    top: calc(100% - 2px);
    left: 16px; right: 16px;
    display: grid;
    gap: 0;
    padding: 12px;
    border: 1px solid var(--line);
    background: rgba(6,8,13,.97);
    backdrop-filter: blur(18px);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s var(--ease);
  }
  .nav-menu.is-open { opacity: 1; visibility: visible; transform: none; }
  .nav-menu > a:not(.nav-cta) { padding: 13px 10px; border-bottom: 1px solid var(--line); }
  .nav-cta { margin-top: 10px; justify-content: center; }

  .section { padding: 96px 0; }
  .section--tight { padding: 78px 0; }
  .hero { min-height: auto; padding-top: calc(var(--header-h) + 74px); }
  .hero__grid { grid-template-columns: 1fr; }
  .hero__orbit { min-height: 530px; order: -1; margin-bottom: -10px; }
  .logo-console { width: min(330px, 70%); transform: none; }
  .orbit-label--one { top: 48px; left: 12%; }
  .orbit-label--two { right: 4%; }
  .orbit-label--three { bottom: 62px; left: 16%; }
  .orbit-label--four { right: 8%; bottom: 17%; }
  .hero__marquee { margin-top: 54px; }
  .fracture__intro, .systems__head, .fit__head, .team__head, .thesis__grid, .contact__grid { grid-template-columns: 1fr; gap: 28px; }
  .fracture__grid { grid-template-columns: 1fr; }
  .fracture-card { min-height: 230px; }
  .fracture-card__pulse { margin-bottom: 36px; }

  .systems__story { grid-template-columns: 1fr; gap: 34px; }
  .loop-stage { position: relative; top: auto; height: 580px; min-height: 0; }
  .system-step { min-height: auto; padding: 48px 0; opacity: 1; border-bottom: 1px solid var(--line); }
  .capabilities__grid { grid-template-columns: 1fr; gap: 36px; }
  .capabilities__intro { position: relative; top: auto; }
  .capability-row { grid-template-columns: 150px 1fr; }
  .whalexy__panel { grid-template-columns: 1fr; }
  .whalexy__signal { margin-top: 12px; }
  .fit__split { grid-template-columns: 1fr; }
  .stats-grid { max-width: 650px; }
  .contact__grid { gap: 46px; }
  .footer__grid { grid-template-columns: 1fr; gap: 26px; }
  .footer__meta { justify-items: start; text-align: left; }
}

@media (max-width: 600px) {
  :root { --shell: calc(100% - 24px); --radius: 16px; }
  body { font-size: 15px; }
  .section { padding: 78px 0; }
  .section--tight { padding: 66px 0; }
  .display--hero { font-size: clamp(3rem, 15vw, 4.6rem); }
  .display--section { font-size: clamp(2.35rem, 12vw, 3.7rem); }
  .hero { padding-top: calc(var(--header-h) + 44px); }
  .hero__orbit { min-height: 405px; }
  .logo-console { width: min(250px, 72%); border-radius: 18px; }
  .orbit-halo--outer { width: 330px; height: 330px; }
  .orbit-halo--inner { width: 290px; height: 185px; }
  .orbit-label { font-size: 8px; padding: 6px 7px; }
  .orbit-label--one { top: 20px; left: 4%; }
  .orbit-label--two { right: -2%; top: 38%; }
  .orbit-label--three { bottom: 25px; left: 9%; }
  .orbit-label--four { right: 2%; bottom: 14%; }
  .orbit-readout { display: none; }
  .hero__actions { align-items: flex-start; flex-direction: column; gap: 18px; }
  .hero__signals { grid-template-columns: 1fr; }
  .hero__signals div { min-height: auto; }
  .fracture__intro { gap: 22px; }
  .fracture-card { padding: 24px; }

  .loop-stage { height: 450px; }
  .loop-node { padding: 7px 8px; font-size: 8px; gap: 5px; }
  .loop-node__index { width: 18px; height: 18px; }
  .loop-node--operations { right: 1%; }
  .loop-node--intelligence { left: 1%; }
  .system-step h3 { font-size: 2.25rem; }
  .capability-row { grid-template-columns: 1fr; gap: 8px; }
  .capability-row__tag { grid-row: auto; }
  .whalexy { padding: 76px 0; }
  .whalexy__panel { border-radius: 20px; padding: 28px 20px; }
  .whalexy__bullets > div { grid-template-columns: 36px 1fr; }
  .whalexy__bullets p { grid-column: 2; }
  .fit-card { padding: 26px; min-height: 0; }
  .fit-card h3 { margin-top: 42px; }
  .stats-grid { grid-template-columns: 1fr; }
  .team__grid { grid-template-columns: 1fr; }
  .team-card { min-height: 220px; }
  .form-grid { grid-template-columns: 1fr; }
  .contact-form { padding: 22px 18px; }
  .form-actions { align-items: stretch; flex-direction: column; }
  .button { width: 100%; }
  .contact__direct a, .contact__direct > div { flex-direction: column; gap: 5px; }
  .contact__direct strong { text-align: left; overflow-wrap: anywhere; }
  .footer__links { flex-direction: column; gap: 12px; }
}

@media (hover: none), (pointer: coarse) {
  .fracture-card, .fit-card, .magnetic { transform: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .loader { display: none !important; }
  [data-reveal] .reveal-word { opacity: 1 !important; transform: none !important; }
  .starfield { opacity: .42; }
  .orbit-halo, .hero__marquee div { animation: none !important; }
  .system-step { opacity: 1; }
}

/* --------------------------------------------------------------------------
   RESPONSIVENESS + MOTION REFINEMENT PASS
   The first build intentionally spent its motion budget on the loader and loop.
   This pass keeps those signatures, but reduces oversized typography/panels,
   adds soft zero-layout-shift floating motion, cursor-proximity signal light,
   richer in-view choreography, and tighter tablet/mobile behavior.
   -------------------------------------------------------------------------- */

:root {
  --shell: min(1160px, calc(100vw - 48px));
  --float-distance: 8px;
}

/* More controlled scale: still cinematic, no longer billboard-sized. */
.section { padding: 108px 0; }
.section--tight { padding: 82px 0; }
.display--hero { font-size: clamp(2.9rem, 5.15vw, 5.45rem); max-width: 860px; }
.display--section { font-size: clamp(2.15rem, 3.8vw, 4.15rem); max-width: 790px; }

/* Cursor-proximity field: a signal glow, not a replacement cursor. */
.signal-aura {
  position: fixed;
  left: 0;
  top: 0;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
  opacity: 0;
  background: radial-gradient(circle, rgba(122,215,255,.105) 0%, rgba(28,100,242,.055) 32%, transparent 70%);
  filter: blur(10px);
  will-change: transform, opacity;
  transition: opacity .45s var(--ease);
}
body.has-pointer .signal-aura { opacity: 1; }

/* Header compresses earlier and reads more like a precision instrument. */
.site-header { height: 70px; }
:root { --header-h: 70px; }
.nav { gap: 22px; }
.nav-menu { gap: 22px; font-size: 13px; }
.nav-cta { min-height: 40px; padding-inline: 14px; }
.brand-mark { width: 32px; height: 32px; }
.brand-name { font-size: 16px; }

/* Hero balance and signature float. */
.hero { min-height: 92svh; padding-top: calc(var(--header-h) + 78px); padding-bottom: 54px; }
.hero__grid { grid-template-columns: minmax(0, 1.22fr) minmax(300px, .78fr); gap: clamp(34px, 4vw, 68px); }
.hero__lede { max-width: 680px; margin-top: 22px; font-size: clamp(1rem, 1.2vw, 1.16rem); }
.hero__actions { margin-top: 28px; }
.hero__signals { margin-top: 40px; max-width: 680px; }
.hero__signals div { min-height: 98px; padding: 17px 18px; }
.hero__signals dt { font-size: clamp(1.65rem, 2.35vw, 2.45rem); }
.hero__orbit {
  min-height: 500px;
  transform: translate3d(0, var(--orbit-parallax, 0px), 0);
  transition: transform .12s linear;
}
.hero__orbit::before {
  content: "";
  position: absolute;
  z-index: 0;
  width: min(440px, 90%);
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 68%, rgba(122,215,255,.52) 75%, rgba(28,100,242,.10) 82%, transparent 90%);
  -webkit-mask: radial-gradient(circle, transparent 0 48%, #000 49% 50.2%, transparent 51.2%);
  mask: radial-gradient(circle, transparent 0 48%, #000 49% 50.2%, transparent 51.2%);
  opacity: .72;
  animation: signalSweep 8.5s linear infinite;
  filter: drop-shadow(0 0 10px rgba(122,215,255,.24));
}
.logo-console {
  --logo-rx: 2deg;
  --logo-ry: -6deg;
  width: min(305px, 78%);
  transform: perspective(1000px) rotateY(var(--logo-ry)) rotateX(var(--logo-rx));
  animation: floatLogo 6.8s var(--ease) infinite;
}
.orbit-halo--outer { width: 420px; height: 420px; }
.orbit-halo--inner { width: 350px; height: 220px; }
.orbit-label { animation: floatLabel 5.6s var(--ease) infinite; }
.orbit-label--two { animation-delay: -.9s; }
.orbit-label--three { animation-delay: -1.8s; }
.orbit-label--four { animation-delay: -2.7s; }
.hero__marquee { margin-top: 48px; }
.hero__marquee div { animation-duration: 23s; }

@keyframes signalSweep { to { transform: rotate(360deg); } }
@keyframes floatLogo {
  0%, 100% { translate: 0 0; }
  48% { translate: 0 -10px; }
  72% { translate: 0 -5px; }
}
@keyframes floatLabel {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -6px; }
}

/* Cards float independently from their tilt transform using the translate property. */
.fracture__grid { margin-top: 42px; }
.fracture-card { min-height: 250px; padding: 25px; animation: cardFloat 8s var(--ease) infinite; }
.fracture-card:nth-child(2) { animation-delay: -2.4s; }
.fracture-card:nth-child(3) { animation-delay: -4.8s; }
.fracture-card__pulse { margin-bottom: 38px; }
.fracture-card h3 { font-size: 1.42rem; }
.fracture-card:hover { translate: 0 -7px; }

@keyframes cardFloat {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 calc(var(--float-distance) * -1); }
}

/* The loop remains the major scroll signature, now denser and more kinetic. */
.systems__story { grid-template-columns: minmax(0, 1.02fr) minmax(340px, .88fr); gap: 58px; margin-top: 62px; }
.loop-stage { top: 98px; height: min(68vh, 620px); min-height: 510px; border-radius: 18px; }
.loop-stage::after {
  content: "";
  position: absolute;
  width: 82%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(from 90deg, transparent 0 73%, rgba(28,100,242,.12) 78%, rgba(122,215,255,.23) 81%, transparent 86%);
  -webkit-mask: radial-gradient(circle, transparent 0 42%, #000 44% 44.7%, transparent 46%);
  mask: radial-gradient(circle, transparent 0 42%, #000 44% 44.7%, transparent 46%);
  animation: signalSweep 12s linear infinite reverse;
  pointer-events: none;
}
.loop-diagram { width: min(520px, 91%); }
.loop-node { font-size: 10px; padding: 8px 10px; animation: nodeFloat 5.4s var(--ease) infinite; }
.loop-node--operations { animation-delay: -1.3s; }
.loop-node--data { animation-delay: -2.6s; }
.loop-node--intelligence { animation-delay: -3.9s; }
@keyframes nodeFloat { 0%,100% { translate: 0 0; } 50% { translate: 0 -5px; } }
.system-step { min-height: 56vh; padding: 46px 0; }
.system-step h3 { font-size: clamp(1.8rem, 2.75vw, 3rem); }
.system-step.is-active h3 { text-shadow: 0 0 28px rgba(122,215,255,.08); }

/* In-view choreography: individual operational rows, not blanket section fades. */
.capability-row,
.team-card,
.stats-grid article {
  --entry-delay: 0ms;
}
.capability-row.is-inview,
.team-card.is-inview,
.stats-grid article.is-inview {
  animation: elementEnter .72s var(--ease-snap) both;
  animation-delay: var(--entry-delay);
}
@keyframes elementEnter {
  from { opacity: 0; transform: translate3d(0, 22px, 0) scale(.985); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

/* Capabilities and flagship: less oversized, more depth. */
.capabilities__grid { grid-template-columns: .76fr 1.24fr; gap: 58px; }
.capability-row { padding: 24px 0; }
.capability-row h3 { font-size: 1.52rem; }
.whalexy { padding: 92px 0; }
.whalexy__panel { gap: 56px; border-radius: 28px; padding: clamp(34px, 4.4vw, 62px); }
.whalexy__panel::before { animation: productPulse 8s var(--ease) infinite; }
@keyframes productPulse { 0%,100% { scale: 1; opacity: .8; } 50% { scale: 1.07; opacity: 1; } }
.signal-window { width: min(390px, 100%); transform: rotate(1deg); animation: signalWindowFloat 6.4s var(--ease) infinite; }
@keyframes signalWindowFloat {
  0%,100% { translate: 0 0; rotate: 0deg; }
  50% { translate: 0 -9px; rotate: -.5deg; }
}
.signal-message--in { animation: messagePulse 4.8s var(--ease) infinite; }
.signal-message--out { animation: messagePulse 4.8s 1.1s var(--ease) infinite; }
@keyframes messagePulse { 0%,75%,100% { box-shadow: none; } 86% { box-shadow: 0 0 0 1px rgba(122,215,255,.18), 0 8px 24px rgba(28,100,242,.12); } }
.signal-route--active::before { animation: activeDot 1.8s var(--ease) infinite; }
@keyframes activeDot { 0%,100% { scale: 1; opacity: .85; } 50% { scale: 1.45; opacity: 1; } }

/* Fit / stats / team compacted so the site breathes instead of shouting. */
.fit__split { margin-top: 44px; }
.fit-card { min-height: 350px; padding: 29px; animation: cardFloat 9s var(--ease) infinite; }
.fit-card:nth-child(2) { animation-delay: -4.5s; }
.fit-card:hover { translate: 0 -7px; }
.fit-card h3 { margin: 44px 0 20px; font-size: clamp(1.7rem, 2.35vw, 2.55rem); }
.thesis__grid { gap: 58px; }
.stats-grid article { min-height: 158px; padding: 23px; }
.stats-grid strong { font-size: clamp(2.15rem, 3.6vw, 4rem); }
.team__grid { margin-top: 40px; }
.team-card { min-height: 255px; padding: 22px; animation: teamFloat 8.6s var(--ease) infinite; }
.team-card:nth-child(2) { animation-delay: -2s; }
.team-card:nth-child(3) { animation-delay: -4s; }
.team-card:nth-child(4) { animation-delay: -6s; }
@keyframes teamFloat { 0%,100% { translate: 0 0; } 50% { translate: 0 -7px; } }
.team-card:hover { translate: 0 -8px; }
.team-card__initials { width: 58px; height: 58px; font-size: 1.42rem; }

/* Responsive pass: break before layouts feel compressed, not after they break. */
@media (max-width: 1180px) {
  :root { --shell: min(100% - 40px, 1040px); }
  .display--hero { font-size: clamp(2.8rem, 5.4vw, 4.65rem); }
  .hero__grid { grid-template-columns: minmax(0, 1.12fr) minmax(280px, .88fr); gap: 34px; }
  .hero__orbit { min-height: 455px; }
  .orbit-halo--outer { width: 370px; height: 370px; }
  .orbit-halo--inner { width: 320px; height: 205px; }
  .logo-console { width: min(280px, 75%); }
  .systems__story { gap: 44px; grid-template-columns: minmax(0, 1fr) minmax(330px, .88fr); }
  .whalexy__panel { gap: 42px; }
}

@media (max-width: 960px) {
  :root { --header-h: 66px; --shell: min(100% - 32px, 780px); }
  .signal-rail { display: none; }
  .signal-aura { display: none; }
  .brand-name { display: block; }
  .nav-toggle {
    display: grid;
    width: 42px; height: 42px;
    place-content: center;
    gap: 5px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(6,8,13,.86);
    cursor: pointer;
  }
  .nav-toggle span:not(.sr-only) { display: block; width: 17px; height: 1px; background: white; transition: transform .28s var(--ease), opacity .28s var(--ease); }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  .nav-menu {
    position: absolute;
    top: calc(100% - 2px);
    left: 16px; right: 16px;
    display: grid;
    gap: 0;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: rgba(6,8,13,.97);
    backdrop-filter: blur(18px);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s var(--ease);
  }
  .nav-menu.is-open { opacity: 1; visibility: visible; transform: none; }
  .nav-menu > a:not(.nav-cta) { padding: 13px 10px; border-bottom: 1px solid var(--line); }
  .nav-cta { margin-top: 10px; justify-content: center; }

  .section { padding: 86px 0; }
  .section--tight { padding: 70px 0; }
  .display--hero { font-size: clamp(2.75rem, 8.2vw, 4.25rem); }
  .display--section { font-size: clamp(2rem, 6.6vw, 3.45rem); }
  .hero { min-height: auto; padding-top: calc(var(--header-h) + 64px); }
  .hero__grid { grid-template-columns: 1fr; gap: 42px; }
  .hero__copy { max-width: 720px; }
  .hero__orbit { min-height: 430px; max-width: 620px; width: 100%; margin-inline: auto; }
  .logo-console { width: min(270px, 62%); }
  .orbit-label--one { top: 38px; left: 9%; }
  .orbit-label--two { right: 2%; }
  .orbit-label--three { bottom: 44px; left: 13%; }
  .orbit-label--four { right: 6%; bottom: 16%; }
  .hero__marquee { margin-top: 42px; }

  .fracture__intro, .systems__head, .fit__head, .team__head, .thesis__grid, .contact__grid { grid-template-columns: 1fr; gap: 26px; }
  .fracture__grid { grid-template-columns: 1fr; }
  .fracture-card { min-height: 0; }

  .systems__story { grid-template-columns: 1fr; gap: 34px; }
  .loop-stage { position: relative; top: auto; height: 510px; min-height: 0; }
  .system-step { min-height: 0; padding: 40px 0; opacity: 1; border-bottom: 1px solid var(--line); }
  .capabilities__grid { grid-template-columns: 1fr; gap: 34px; }
  .capabilities__intro { position: relative; top: auto; }
  .whalexy__panel { grid-template-columns: 1fr; }
  .whalexy__signal { margin-top: 8px; }
  .fit__split { grid-template-columns: 1fr; }
  .fit-card { min-height: 0; }
  .stats-grid { max-width: 680px; }
  .team__grid { grid-template-columns: repeat(2, 1fr); }
  .contact__grid { gap: 42px; }
  .footer__grid { grid-template-columns: 1fr; gap: 24px; }
  .footer__meta { justify-items: start; text-align: left; }
}

@media (max-width: 640px) {
  :root { --shell: calc(100% - 24px); --radius: 16px; --float-distance: 4px; }
  body { font-size: 15px; }
  .section { padding: 68px 0; }
  .section--tight { padding: 58px 0; }
  .display--hero { font-size: clamp(2.55rem, 12vw, 3.55rem); line-height: 1.01; }
  .display--section { font-size: clamp(1.95rem, 9.4vw, 2.9rem); line-height: 1; }
  .hero { padding-top: calc(var(--header-h) + 40px); }
  .hero__copy .eyebrow { margin-bottom: 18px; }
  .hero__lede { margin-top: 18px; }
  .hero__actions { align-items: flex-start; flex-direction: column; gap: 16px; }
  .hero__signals { grid-template-columns: 1fr; margin-top: 32px; }
  .hero__signals div { min-height: 0; padding: 14px 16px; display: grid; grid-template-columns: 90px 1fr; align-items: center; gap: 12px; }
  .hero__signals dd { margin: 0; }
  .hero__orbit { min-height: 350px; }
  .hero__orbit::before { width: 310px; }
  .logo-console { width: min(218px, 66%); border-radius: 17px; }
  .logo-console figcaption { padding: 9px 10px; font-size: 8px; }
  .orbit-halo--outer { width: 292px; height: 292px; }
  .orbit-halo--inner { width: 250px; height: 158px; }
  .orbit-label { font-size: 7px; padding: 5px 6px; letter-spacing: .05em; }
  .orbit-label--one { top: 14px; left: 1%; }
  .orbit-label--two { right: 0; top: 38%; }
  .orbit-label--three { bottom: 18px; left: 6%; }
  .orbit-label--four { right: 0; bottom: 13%; }
  .orbit-readout { display: none; }

  .fracture-card { padding: 22px; }
  .fracture-card__pulse { margin-bottom: 28px; }
  .loop-stage { height: 390px; border-radius: 14px; }
  .loop-diagram { width: 90%; }
  .loop-node { padding: 6px 7px; font-size: 7px; gap: 5px; letter-spacing: .04em; }
  .loop-node__index { width: 18px; height: 18px; }
  .loop-node--operations { right: 1%; }
  .loop-node--intelligence { left: 1%; }
  .system-step h3 { font-size: 2rem; }
  .capability-row { grid-template-columns: 1fr; gap: 8px; padding: 20px 0; }
  .capability-row__tag { grid-row: auto; }
  .whalexy { padding: 66px 0; }
  .whalexy__panel { border-radius: 20px; padding: 26px 18px; }
  .whalexy__bullets > div { grid-template-columns: 34px 1fr; }
  .whalexy__bullets p { grid-column: 2; }
  .signal-thread { padding: 18px; }
  .fit-card { padding: 24px; }
  .fit-card h3 { margin-top: 36px; }
  .stats-grid { grid-template-columns: 1fr; }
  .stats-grid article { min-height: 132px; }
  .team__grid { grid-template-columns: 1fr; }
  .team-card { min-height: 205px; }
  .form-grid { grid-template-columns: 1fr; }
  .contact-form { padding: 20px 17px; }
  .form-actions { align-items: stretch; flex-direction: column; }
  .button { width: 100%; }
  .contact__direct a, .contact__direct > div { flex-direction: column; gap: 5px; }
  .contact__direct strong { text-align: left; overflow-wrap: anywhere; }
  .footer__links { flex-direction: column; gap: 12px; }
}

@media (max-width: 420px) {
  .brand-name { font-size: 14px; }
  .hero__orbit { min-height: 318px; }
  .hero__orbit::before { width: 280px; }
  .orbit-halo--outer { width: 266px; height: 266px; }
  .orbit-halo--inner { width: 225px; height: 145px; }
  .logo-console { width: 198px; }
  .loop-stage { height: 350px; }
  .loop-node span:last-child { display: none; }
  .loop-node { border-radius: 999px; }
  .system-step h3 { font-size: 1.8rem; }
}

@media (hover: none), (pointer: coarse) {
  .logo-console, .orbit-label, .fracture-card, .fit-card, .team-card, .loop-node, .signal-window { animation: none !important; translate: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .signal-aura { display: none !important; }
  .hero__orbit { transform: none !important; }
  .hero__orbit::before, .loop-stage::after, .whalexy__panel::before,
  .logo-console, .orbit-label, .fracture-card, .fit-card, .team-card,
  .loop-node, .signal-window, .signal-message, .signal-route--active::before {
    animation: none !important;
    translate: none !important;
  }
  .capability-row.is-inview, .team-card.is-inview, .stats-grid article.is-inview { animation: none !important; }
}
.capability-row { transition: border-color .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease); }
.capability-row:hover { padding-left: 0; border-color: rgba(122,215,255,.28); background: linear-gradient(90deg, rgba(28,100,242,.045), transparent 62%); box-shadow: inset 2px 0 0 rgba(122,215,255,.22); }

/* Critical responsive image fix: HTML width/height attributes provide ratio hints,
   but the rendered height must remain fluid. This prevents the transparent 1099×1100
   logo from inheriting a literal 780px CSS height when its container shrinks. */
html { overflow-x: clip; }
img { height: auto; }
.logo-console img { height: auto; }
.hero__orbit { overflow: clip; }
.display--hero { font-size: clamp(2.8rem, 4.7vw, 4.85rem); }

@media (max-width: 960px) {
  .hero__orbit { order: 0; }
}
@media (max-width: 640px) {
  .display--hero { font-size: clamp(2.35rem, 10.5vw, 3.1rem); }
}

/* --------------------------------------------------------------------------
   V3 — STICKY RETURN LOOP + WHALEXY BOOM
   User feedback pass: keep the loop visibly pinned through all four story steps,
   restore an always-visible START → FINISH/RETURN readout, remove the light
   Whalexy card background, and make the product entrance a single high-impact
   boom moment rather than adding animation everywhere.
   -------------------------------------------------------------------------- */

/* Sticky was losing its visual anchor in Chromium because the section itself
   clipped overflow. The story now owns the sticky boundary, not the section. */
.systems { overflow: visible; }
.systems__story {
  align-items: start;
  isolation: isolate;
}
.loop-stage {
  align-self: start;
  position: sticky;
  top: calc(var(--header-h) + 20px);
  z-index: 4;
  height: min(650px, calc(100svh - var(--header-h) - 42px));
  min-height: 510px;
  max-height: 650px;
  overflow: hidden;
  box-shadow: 0 26px 70px rgba(0,0,0,.22), inset 0 0 0 1px rgba(122,215,255,.025);
}
.systems__steps { min-width: 0; }
.system-step { min-height: clamp(430px, 62vh, 650px); }

.loop-stage__status {
  position: absolute;
  z-index: 6;
  top: 16px;
  left: 18px;
  right: 18px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  pointer-events: none;
  font-family: var(--mono);
  font-size: 9px;
  line-height: 1;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: #78869a;
}
.loop-stage__status span:first-child { color: var(--ion-300); }
.loop-stage__status i {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--ion-300);
  box-shadow: 0 0 12px rgba(122,215,255,.8);
  vertical-align: 1px;
  animation: activeDot 1.8s var(--ease) infinite;
}
.loop-stage__meter { bottom: 25px; overflow: visible; }
.loop-stage__meter::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.07);
}
.loop-stage__meter > span {
  position: relative;
  z-index: 1;
  box-shadow: 0 0 16px rgba(122,215,255,.4);
}
.loop-stage__meter-labels {
  position: absolute;
  left: 0;
  right: 0;
  top: 9px;
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 8px;
  line-height: 1;
  letter-spacing: .08em;
  color: #68768b;
}
.loop-stage__meter-labels b { font-weight: 500; }
.loop-stage__meter-labels b:last-child { color: rgba(122,215,255,.8); }

/* Whalexy: no white card/background. The section now lives on the site's dark
   system canvas and the product name becomes the launch event. */
.whalexy {
  padding: 118px 0;
  overflow: clip;
}
.whalexy::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 48%;
  width: min(920px, 80vw);
  aspect-ratio: 1.7;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse, rgba(28,100,242,.105), rgba(122,215,255,.025) 38%, transparent 70%);
  pointer-events: none;
}
.whalexy__panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(380px, .92fr);
  align-items: center;
  gap: clamp(56px, 7vw, 96px);
  padding: 62px 0;
  color: var(--star-050);
  background: transparent;
  border-radius: 0;
  border-top: 1px solid rgba(246,249,255,.11);
  border-bottom: 1px solid rgba(246,249,255,.11);
  box-shadow: none;
  overflow: visible;
}
.whalexy__panel::before { display: none; }
.whalexy__copy p { color: var(--telemetry-400); }
.whalexy__bullets { border-top-color: rgba(246,249,255,.11); }
.whalexy__bullets > div { border-bottom-color: rgba(246,249,255,.11); }
.whalexy__bullets span { color: var(--ion-300); }
.whalexy__visual {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: 30px;
  min-width: 0;
}

.whalexy-boom {
  position: relative;
  width: min(520px, 100%);
  min-height: 180px;
  display: grid;
  place-items: center;
  isolation: isolate;
  perspective: 900px;
}
.whalexy-boom__word {
  position: relative;
  z-index: 4;
  display: block;
  font-family: var(--display);
  font-size: clamp(3.6rem, 6vw, 6.5rem);
  font-weight: 750;
  line-height: .84;
  letter-spacing: -.045em;
  color: #fff;
  text-shadow:
    0 0 10px rgba(122,215,255,.25),
    0 0 34px rgba(28,100,242,.24);
  transform-origin: 50% 50%;
  will-change: transform, filter, opacity;
}
.whalexy-boom__word::after {
  content: "";
  position: absolute;
  inset: -14% -6%;
  background: linear-gradient(108deg, transparent 34%, rgba(255,255,255,.95) 49%, rgba(122,215,255,.9) 52%, transparent 66%);
  transform: translateX(-130%) skewX(-12deg);
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
}
.whalexy-boom__line {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ion-300);
}
.whalexy-boom__ring {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  width: 160px;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(122,215,255,.7);
  transform: translate(-50%, -50%) scale(.2);
  opacity: 0;
  box-shadow: 0 0 30px rgba(28,100,242,.16), inset 0 0 28px rgba(122,215,255,.08);
  pointer-events: none;
}
.whalexy-boom__ring--two { width: 220px; border-color: rgba(28,100,242,.48); }
.whalexy-boom__spark {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  width: 2px;
  height: 58px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(122,215,255,0), rgba(122,215,255,.9), rgba(122,215,255,0));
  transform-origin: 50% 0;
  opacity: 0;
  filter: drop-shadow(0 0 8px rgba(122,215,255,.65));
}
.whalexy-boom__spark--one { transform: rotate(72deg) translateY(-40px); }
.whalexy-boom__spark--two { transform: rotate(205deg) translateY(-46px); }
.whalexy-boom__spark--three { transform: rotate(318deg) translateY(-42px); }

.whalexy-boom.is-boom .whalexy-boom__word { animation: whalexyImpact 1.15s var(--ease-snap) both; }
.whalexy-boom.is-boom .whalexy-boom__word::after { animation: whalexySweep .9s .35s var(--ease-snap) both; }
.whalexy-boom.is-boom .whalexy-boom__line { animation: whalexyLine .75s .46s var(--ease-snap) both; }
.whalexy-boom.is-boom .whalexy-boom__ring--one { animation: whalexyRing 1.05s .12s var(--ease-snap) both; }
.whalexy-boom.is-boom .whalexy-boom__ring--two { animation: whalexyRing 1.22s .2s var(--ease-snap) both; }
.whalexy-boom.is-boom .whalexy-boom__spark { animation: whalexySpark .78s .2s var(--ease-snap) both; }
.whalexy-boom.is-boom .whalexy-boom__spark--two { animation-delay: .27s; }
.whalexy-boom.is-boom .whalexy-boom__spark--three { animation-delay: .34s; }

@keyframes whalexyImpact {
  0% { opacity: 0; transform: translateZ(-240px) scale(.22) rotateX(18deg); filter: blur(16px); letter-spacing: .12em; }
  48% { opacity: 1; transform: translateZ(36px) scale(1.13) rotateX(-2deg); filter: blur(0); letter-spacing: -.055em; }
  68% { transform: translateZ(0) scale(.965); }
  100% { opacity: 1; transform: translateZ(0) scale(1); filter: blur(0); letter-spacing: -.045em; }
}
@keyframes whalexyRing {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.16); }
  28% { opacity: .85; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(3.3); }
}
@keyframes whalexySpark {
  0% { opacity: 0; scale: .3; }
  28% { opacity: 1; }
  100% { opacity: 0; scale: 1.8; translate: 0 -54px; }
}
@keyframes whalexySweep {
  0% { opacity: 0; transform: translateX(-130%) skewX(-12deg); }
  26% { opacity: .95; }
  100% { opacity: 0; transform: translateX(130%) skewX(-12deg); }
}
@keyframes whalexyLine {
  0% { opacity: 0; transform: translate(-50%, 12px); letter-spacing: .42em; }
  100% { opacity: 1; transform: translate(-50%, 0); letter-spacing: .18em; }
}

.whalexy .signal-window {
  width: min(430px, 94%);
  background: rgba(8,16,30,.72);
  border-color: rgba(122,215,255,.18);
  box-shadow: 0 28px 80px rgba(0,0,0,.32), 0 0 50px rgba(28,100,242,.08);
  backdrop-filter: blur(14px);
}

@media (max-width: 960px) {
  .systems { overflow: clip; }
  .loop-stage {
    position: relative;
    top: auto;
    align-self: auto;
    height: 500px;
    min-height: 0;
    max-height: none;
  }
  .system-step { min-height: 0; }
  .whalexy { padding: 86px 0; }
  .whalexy__panel {
    grid-template-columns: 1fr;
    gap: 48px;
    padding: 46px 0;
  }
  .whalexy__visual { order: -1; }
  .whalexy-boom { min-height: 160px; }
}

@media (max-width: 640px) {
  .loop-stage { height: 390px; }
  .loop-stage__status { top: 12px; left: 12px; right: 12px; font-size: 7px; }
  .loop-stage__meter { left: 12px; right: 12px; bottom: 22px; }
  .loop-stage__meter-labels { font-size: 7px; }
  .whalexy { padding: 68px 0; }
  .whalexy__panel { padding: 34px 0; gap: 34px; }
  .whalexy-boom { min-height: 130px; }
  .whalexy-boom__word { font-size: clamp(3rem, 17vw, 4.4rem); }
  .whalexy-boom__line { bottom: 5px; font-size: 7px; letter-spacing: .12em; }
  .whalexy-boom.is-boom .whalexy-boom__line { animation-name: whalexyLineMobile; }
}
@keyframes whalexyLineMobile {
  0% { opacity: 0; transform: translate(-50%, 10px); letter-spacing: .2em; }
  100% { opacity: 1; transform: translate(-50%, 0); letter-spacing: .12em; }
}

@media (prefers-reduced-motion: reduce) {
  .loop-stage__status i,
  .whalexy-boom.is-boom .whalexy-boom__word,
  .whalexy-boom.is-boom .whalexy-boom__word::after,
  .whalexy-boom.is-boom .whalexy-boom__line,
  .whalexy-boom.is-boom .whalexy-boom__ring,
  .whalexy-boom.is-boom .whalexy-boom__spark {
    animation: none !important;
  }
  .whalexy-boom__ring,
  .whalexy-boom__spark { display: none; }
}

/* Sticky compatibility: `overflow-x: hidden` on BODY computes overflow-y to auto
   in Chromium, turning BODY into a non-scrolling overflow ancestor and breaking
   position: sticky. `clip` prevents horizontal bleed without creating that
   scroll container, so the loop remains pinned while the story advances. */
body { overflow-x: clip; overflow-y: visible; }

/* --------------------------------------------------------------------------
   V4 — TRANSPARENT MOTION MARK
   The recreated transparent Mobius Bloom logo is now the actual site asset.
   No white logo plates remain. Motion is built from the mark itself: a bright
   scan passes through the PNG, a second alpha-masked line field travels across
   the ribbon/wordmark, and each placement has restrained levitation. The logo
   silhouette is never redrawn; animation is only light layered over the asset.
   -------------------------------------------------------------------------- */

/* Reusable animated logo surface. */
.motion-logo {
  --logo-px: 0px;
  --logo-py: 0px;
  --line-alpha: .72;
  position: relative;
  display: block;
  isolation: isolate;
  overflow: visible;
  background: transparent !important;
}
.motion-logo > img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  object-fit: contain;
  transform: translate3d(var(--logo-px), var(--logo-py), 0);
  filter:
    drop-shadow(0 0 1px rgba(246,249,255,.18))
    drop-shadow(0 0 12px rgba(28,100,242,.12));
  will-change: transform, filter;
}

/* Bright scan: the same transparent logo is revealed only through a moving
   narrow mask. Because it uses the real PNG, the light follows the actual
   Möbius geometry rather than drawing a fake replacement mark. */
.motion-logo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: url("../assets/logo.png") center / contain no-repeat;
  opacity: .9;
  filter:
    brightness(1.8)
    contrast(1.12)
    saturate(1.65)
    drop-shadow(0 0 7px rgba(122,215,255,.9))
    drop-shadow(0 0 18px rgba(28,100,242,.55));
  -webkit-mask-image: linear-gradient(102deg, transparent 0 34%, #000 43% 55%, transparent 66% 100%);
  mask-image: linear-gradient(102deg, transparent 0 34%, #000 43% 55%, transparent 66% 100%);
  -webkit-mask-size: 260% 100%;
  mask-size: 260% 100%;
  -webkit-mask-position: 180% 0;
  mask-position: 180% 0;
  animation: logoPhotonSweep 3.9s linear infinite;
  will-change: mask-position, -webkit-mask-position, opacity;
}

/* Moving circuitry/star lines clipped to the alpha of the real logo. */
.motion-logo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: var(--line-alpha);
  background:
    repeating-linear-gradient(108deg,
      transparent 0 9px,
      rgba(122,215,255,.08) 9px 10px,
      rgba(246,249,255,.76) 10px 10.8px,
      rgba(28,100,242,.14) 10.8px 12px,
      transparent 12px 20px),
    radial-gradient(circle at 40% 30%, rgba(246,249,255,.95) 0 1px, transparent 1.8px),
    radial-gradient(circle at 72% 58%, rgba(122,215,255,.92) 0 1px, transparent 1.7px);
  background-size: 72px 72px, 41px 47px, 57px 63px;
  -webkit-mask: url("../assets/logo.png") center / contain no-repeat;
  mask: url("../assets/logo.png") center / contain no-repeat;
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 5px rgba(122,215,255,.46));
  animation: logoLineFlow 5.6s linear infinite;
  will-change: background-position, opacity;
}

@keyframes logoPhotonSweep {
  0%, 8% { -webkit-mask-position: 180% 0; mask-position: 180% 0; opacity: 0; }
  18% { opacity: .96; }
  54% { opacity: .74; }
  68%, 100% { -webkit-mask-position: -85% 0; mask-position: -85% 0; opacity: 0; }
}
@keyframes logoLineFlow {
  0% { background-position: 0 0, 0 0, 0 0; opacity: .32; }
  45% { opacity: var(--line-alpha); }
  100% { background-position: 72px -72px, 41px -47px, -57px 63px; opacity: .38; }
}
@keyframes logoLevitate {
  0%, 100% { translate: 0 0; rotate: 0deg; }
  28% { translate: 0 -7px; rotate: -.35deg; }
  62% { translate: 0 -12px; rotate: .4deg; }
  82% { translate: 0 -4px; rotate: .12deg; }
}
@keyframes logoBreath {
  0%, 100% { filter: drop-shadow(0 0 10px rgba(28,100,242,.12)); }
  50% { filter: drop-shadow(0 0 16px rgba(122,215,255,.26)) drop-shadow(0 0 34px rgba(28,100,242,.18)); }
}
@keyframes heroLogoBoom {
  0% { opacity: 0; scale: .42; rotate: -5deg; filter: blur(16px); }
  48% { opacity: 1; scale: 1.11; rotate: 1.4deg; filter: blur(0); }
  70% { scale: .975; rotate: -.45deg; }
  100% { opacity: 1; scale: 1; rotate: 0deg; filter: blur(0); }
}

/* Loader: transparent mark, no white card. */
.loader__plate {
  width: min(236px, 58vw);
  aspect-ratio: 1099 / 1100;
  border-radius: 0;
  overflow: visible;
  background: transparent;
  box-shadow: none;
}
.loader__plate::after { --line-alpha: .88; }
.loader__reveal { z-index: 2; }
.loader__label { margin-top: 36px; }

/* Header mark: tiny but alive. No white square behind it. */
.brand-mark {
  width: 40px;
  height: 40px;
  border-radius: 0;
  overflow: visible;
  background: transparent;
  box-shadow: none;
  flex: 0 0 40px;
  animation: logoLevitate 6.8s var(--ease) infinite;
}
.brand-mark img { width: 100%; height: 100%; object-fit: contain; }
.motion-logo--nav { --line-alpha: .42; }
.motion-logo--nav::before { animation-duration: 6.2s; opacity: .52; }
.motion-logo--nav::after { animation-duration: 8.5s; }

/* Hero logo becomes the floating signature instead of a white image card. */
.logo-console {
  width: min(360px, 82%);
  overflow: visible;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: perspective(1000px) rotateY(var(--logo-ry)) rotateX(var(--logo-rx));
  animation: none;
}
.logo-console::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 14% 8% 12%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 46% 48%, rgba(246,249,255,.11), rgba(122,215,255,.13) 20%, rgba(28,100,242,.13) 42%, transparent 72%);
  filter: blur(24px);
  opacity: .9;
  animation: heroHaloBreath 5.4s var(--ease) infinite;
}
.logo-console::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 48%;
  width: 112%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(122,215,255,.10);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 26px rgba(28,100,242,.018), 0 0 0 54px rgba(122,215,255,.012);
  animation: heroRingBreath 5.8s var(--ease) infinite;
  pointer-events: none;
}
.motion-logo--hero {
  --line-alpha: .92;
  opacity: 1;
  transform-origin: 50% 48%;
}
body.logo-live .motion-logo--hero {
  animation: heroLogoBoom 1.15s var(--ease-snap) both, logoLevitate 6.4s 1.2s var(--ease) infinite;
}
.motion-logo--hero > img {
  animation: logoBreath 4.8s var(--ease) infinite;
}
.logo-console figcaption {
  position: absolute;
  z-index: 6;
  left: 50%;
  bottom: -18px;
  width: max-content;
  min-width: 190px;
  transform: translateX(-50%);
  padding: 9px 12px;
  border: 1px solid rgba(122,215,255,.16);
  border-radius: 999px;
  background: rgba(6,8,13,.62);
  backdrop-filter: blur(14px);
  color: var(--telemetry-400);
  box-shadow: 0 12px 34px rgba(0,0,0,.26), inset 0 0 20px rgba(28,100,242,.035);
}
.logo-console figcaption strong { color: var(--ion-300); }
@keyframes heroHaloBreath { 0%,100%{ scale:.9; opacity:.55; } 50%{ scale:1.08; opacity:1; } }
@keyframes heroRingBreath { 0%,100%{ opacity:.24; scale:.98; } 50%{ opacity:.7; scale:1.04; } }

/* The orbit itself gets moving linework so the logo feels suspended in a live
   signal field, not simply floating beside text. */
.orbit-halo {
  border-style: dashed;
  border-width: 1px;
  box-shadow: inset 0 0 28px rgba(28,100,242,.025);
}
.orbit-halo::before {
  content: "";
  position: absolute;
  inset: 10%;
  border-radius: 50%;
  border: 1px solid rgba(122,215,255,.055);
  border-left-color: rgba(122,215,255,.42);
  border-right-color: rgba(28,100,242,.34);
  animation: signalSweep 5.2s linear infinite reverse;
}
.orbit-label { box-shadow: 0 8px 26px rgba(0,0,0,.26); }

/* Persistent page instrumentation also moves as linework. */
.page-grid { animation: gridDrift 28s linear infinite; }
.signal-rail::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -18px;
  width: 7px;
  height: 34px;
  border-radius: 999px;
  transform: translateX(-50%);
  background: linear-gradient(transparent, rgba(122,215,255,.95), transparent);
  filter: drop-shadow(0 0 8px rgba(122,215,255,.8));
  animation: railPulse 3.4s linear infinite;
}
.section-kicker::before {
  box-shadow: 0 0 10px rgba(122,215,255,.35);
  animation: kickerCurrent 2.8s var(--ease) infinite;
}
@keyframes gridDrift { to { background-position: 64px 64px, 64px 64px; } }
@keyframes railPulse { from { translate: 0 -3vh; opacity:0; } 12%{opacity:1;} 88%{opacity:1;} to { translate: 0 calc(100vh - var(--header-h)); opacity:0; } }
@keyframes kickerCurrent { 0%,100%{ scale:1 .7; opacity:.55;} 50%{ scale:1.45 1; opacity:1;} }

/* Return-loop lines are now visibly alive even before scroll changes progress. */
.loop-diagram { position: relative; z-index: 2; }
.loop-diagram__ghost {
  stroke-dasharray: 3 10;
  animation: loopDashCurrent 11s linear infinite;
}
.loop-diagram__progress {
  animation: loopGlowCurrent 2.2s var(--ease) infinite;
}
.loop-stage::before {
  border-style: dashed;
  animation: stageDashedOrbit 20s linear infinite;
}
.loop-stage__brand {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  width: 118px;
  transform: translate(-50%, -50%);
  opacity: .12;
  --line-alpha: .7;
  filter: saturate(1.3);
  animation: systemLogoPulse 5.6s var(--ease) infinite;
  pointer-events: none;
}
.loop-stage__brand::before { animation-duration: 4.8s; }
.loop-stage__brand::after { animation-duration: 7.2s; }
.loop-node.is-active::after {
  content: "";
  position: absolute;
  inset: -7px;
  border: 1px solid rgba(122,215,255,.28);
  opacity: 0;
  pointer-events: none;
  animation: activeNodeWave 1.8s var(--ease) infinite;
}
@keyframes loopDashCurrent { to { stroke-dashoffset: -130; } }
@keyframes loopGlowCurrent {
  0%,100% { filter: drop-shadow(0 0 4px rgba(122,215,255,.32)); opacity:.78; }
  50% { filter: drop-shadow(0 0 12px rgba(122,215,255,.92)) drop-shadow(0 0 22px rgba(28,100,242,.4)); opacity:1; }
}
@keyframes stageDashedOrbit { to { rotate: 360deg; } }
@keyframes systemLogoPulse { 0%,100%{ scale:.92; opacity:.08;} 50%{ scale:1.04; opacity:.18;} }
@keyframes activeNodeWave { 0%{opacity:.6;scale:.88;} 100%{opacity:0;scale:1.22;} }

/* A little more life in the system cards/rails, still transform/opacity only. */
.fracture-card::after { animation: cardSignalTravel 4.8s linear infinite; transform-origin: left; }
.fracture-card:nth-child(2)::after { animation-delay: -1.6s; }
.fracture-card:nth-child(3)::after { animation-delay: -3.2s; }
@keyframes cardSignalTravel {
  0%,100% { transform: scaleX(.08) translateX(-520%); opacity:.05; }
  46% { transform: scaleX(.36) translateX(0); opacity:.75; }
  70% { transform: scaleX(.18) translateX(350%); opacity:.25; }
}

/* Footer uses the same transparent moving mark. */
.footer__mark {
  width: 58px;
  height: 58px;
  border-radius: 0;
  overflow: visible;
  background: transparent;
  animation: logoLevitate 7.4s var(--ease) infinite;
}
.footer__mark img { width: 100%; height: 100%; object-fit: contain; }
.motion-logo--footer { --line-alpha: .48; }
.motion-logo--footer::before { animation-duration: 6.8s; }

/* Responsive tuning: keep the boom, remove the sense of oversized floating UI. */
@media (max-width: 960px) {
  .logo-console { width: min(300px, 68%); transform: none; }
  .motion-logo--hero { opacity: 1; }
  body.logo-live .motion-logo--hero { animation: logoLevitate 6.4s var(--ease) infinite; }
  .loop-stage__brand { width: 92px; opacity: .09; }
}
@media (max-width: 640px) {
  .brand-mark { width: 36px; height: 36px; flex-basis: 36px; }
  .logo-console { width: min(246px, 69%); }
  .logo-console figcaption { min-width: 168px; bottom: -12px; font-size: 7px; }
  .loop-stage__brand { width: 72px; }
  .footer__mark { width: 50px; height: 50px; }
  .motion-logo::before { animation-duration: 5.4s; }
  .motion-logo::after { animation-duration: 7.4s; opacity: .42; }
}

/* Reduced-motion fallback is static and complete, not merely slower. */
@media (prefers-reduced-motion: reduce) {
  .motion-logo,
  .motion-logo > img,
  .motion-logo::before,
  .motion-logo::after,
  .page-grid,
  .signal-rail::after,
  .section-kicker::before,
  .loop-diagram__ghost,
  .loop-diagram__progress,
  .loop-stage::before,
  .loop-stage__brand,
  .loop-node.is-active::after,
  .fracture-card::after,
  .logo-console::before,
  .logo-console::after,
  .orbit-halo::before {
    animation: none !important;
  }
  .motion-logo::before,
  .motion-logo::after,
  .signal-rail::after,
  .loop-node.is-active::after { display: none !important; }
  .motion-logo--hero { opacity: 1 !important; transform: none !important; }
}

/* --------------------------------------------------------------------------
   V5 — LOGO VISIBILITY + LARGER HERO + STRONGER 3D DEPTH
   User feedback: the "mobius" wordmark was disappearing on dark sections and
   the animated hero mark felt too small. This pass makes the supplied mark
   readable, scales it up across placements, and pushes the signature motion
   further into a 3D floating object while keeping transforms/opacity only.
   -------------------------------------------------------------------------- */

.loader__plate { width: min(264px, 64vw); }
.brand-mark {
  width: 46px;
  height: 46px;
  flex-basis: 46px;
}
.brand-mark,
.footer__mark,
.loop-stage__brand,
.logo-console {
  transform-style: preserve-3d;
}

.hero__orbit {
  min-height: 640px;
  perspective: 1600px;
  perspective-origin: 50% 42%;
}
.orbit-halo--outer { width: 540px; height: 540px; }
.orbit-halo--inner { width: 440px; height: 286px; }
.orbit-label {
  animation: orbitLabelFloat 6.6s var(--ease) infinite;
  box-shadow: 0 16px 44px rgba(0,0,0,.26), inset 0 0 0 1px rgba(122,215,255,.02);
}
.orbit-label--two { animation-delay: -.9s; }
.orbit-label--three { animation-delay: -1.8s; }
.orbit-label--four { animation-delay: -2.7s; }
@keyframes orbitLabelFloat {
  0%,100% { transform: translate3d(0,0,0); }
  50% { transform: translate3d(0,-8px,22px); }
}

.logo-console {
  width: min(470px, 92%);
  --logo-ry: -9deg;
  --logo-rx: 3deg;
  transform: perspective(1500px) rotateY(var(--logo-ry)) rotateX(var(--logo-rx)) translateZ(0);
}
.logo-console::before {
  inset: 9% 4% 7%;
  filter: blur(34px);
  background:
    radial-gradient(circle at 46% 48%, rgba(246,249,255,.14), rgba(122,215,255,.16) 20%, rgba(28,100,242,.20) 46%, transparent 76%);
}
.logo-console::after {
  width: 126%;
  box-shadow: 0 0 0 38px rgba(28,100,242,.018), 0 0 0 78px rgba(122,215,255,.012);
}
.motion-logo--hero {
  --line-alpha: 1;
  transform: translateZ(36px);
}
.motion-logo--hero > img {
  filter:
    drop-shadow(0 0 2px rgba(246,249,255,.24))
    drop-shadow(0 0 16px rgba(122,215,255,.22))
    drop-shadow(0 0 38px rgba(28,100,242,.22));
}
body.logo-live .motion-logo--hero {
  animation: heroLogoBoom 1.2s var(--ease-snap) both, logoLevitate3D 7.4s 1.15s var(--ease) infinite;
}
@keyframes logoLevitate3D {
  0%,100% { transform: translate3d(0,0,0) rotateY(0deg) rotateX(0deg) scale(1); }
  22% { transform: translate3d(0,-10px,20px) rotateY(-3.5deg) rotateX(1.1deg) scale(1.012); }
  52% { transform: translate3d(0,-18px,34px) rotateY(3.2deg) rotateX(-1.4deg) scale(1.02); }
  78% { transform: translate3d(0,-8px,14px) rotateY(-1.8deg) rotateX(.8deg) scale(1.008); }
}

.logo-console figcaption {
  bottom: -22px;
  min-width: 208px;
  box-shadow: 0 18px 40px rgba(0,0,0,.32), inset 0 0 20px rgba(28,100,242,.045);
}

.loop-stage__brand {
  width: 152px;
  opacity: .18;
  transform: translate(-50%, -50%) perspective(1200px) rotateY(-11deg) rotateX(7deg);
  animation: systemLogoFloat3D 6.8s var(--ease) infinite;
}
.loop-stage__brand > img {
  filter: drop-shadow(0 0 12px rgba(122,215,255,.18)) drop-shadow(0 0 26px rgba(28,100,242,.16));
}
@keyframes systemLogoFloat3D {
  0%,100% { transform: translate(-50%, -50%) perspective(1200px) rotateY(-11deg) rotateX(7deg) translateZ(0) scale(.98); opacity: .14; }
  50% { transform: translate(-50%, calc(-50% - 10px)) perspective(1200px) rotateY(8deg) rotateX(-5deg) translateZ(30px) scale(1.04); opacity: .24; }
}

.footer__mark {
  width: 64px;
  height: 64px;
}
.motion-logo--nav,
.motion-logo--footer {
  animation: logoLevitate3D 8.4s var(--ease) infinite;
}

@media (max-width: 960px) {
  .hero__orbit { min-height: 540px; }
  .orbit-halo--outer { width: 470px; height: 470px; }
  .orbit-halo--inner { width: 390px; height: 252px; }
  .logo-console { width: min(390px, 88%); }
  .loop-stage__brand { width: 122px; opacity: .16; }
}

@media (max-width: 640px) {
  .brand-mark { width: 40px; height: 40px; flex-basis: 40px; }
  .hero__orbit { min-height: 430px; }
  .orbit-halo--outer { width: 340px; height: 340px; }
  .orbit-halo--inner { width: 292px; height: 190px; }
  .logo-console { width: min(310px, 84%); }
  .logo-console figcaption { min-width: 176px; bottom: -14px; }
  .loop-stage__brand { width: 96px; opacity: .13; }
  .footer__mark { width: 56px; height: 56px; }
}

@media (max-width: 420px) {
  .hero__orbit { min-height: 365px; }
  .logo-console { width: min(276px, 86%); }
  .loop-stage__brand { width: 84px; }
}

@media (prefers-reduced-motion: reduce) {
  .orbit-label,
  .motion-logo--nav,
  .motion-logo--footer,
  .loop-stage__brand,
  body.logo-live .motion-logo--hero {
    animation: none !important;
  }
}

/* --------------------------------------------------------------------------
   V6 — CINEMATIC IMAGE LAYER
   Bespoke image assets provide a real visual focal point while the existing
   telemetry and supplied mark stay as the brand's functional foreground.
   -------------------------------------------------------------------------- */

.hero {
  overflow: clip;
  isolation: isolate;
}

.hero::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(6,8,13,.97) 0%, rgba(6,8,13,.88) 30%, rgba(6,8,13,.58) 52%, rgba(6,8,13,.12) 78%),
    linear-gradient(180deg, rgba(6,8,13,.52) 0%, transparent 22%, transparent 72%, rgba(6,8,13,.88) 100%),
    radial-gradient(circle at 74% 46%, transparent 0%, rgba(6,8,13,.08) 43%, rgba(6,8,13,.5) 100%);
  pointer-events: none;
}

.hero__grid,
.hero__marquee {
  position: relative;
  z-index: 3;
}

.hero__copy {
  text-shadow: 0 3px 30px rgba(0, 0, 0, .72);
}

.display--hero {
  color: #f7f9ff;
}

.display--hero .reveal-word {
  color: #f7f9ff;
  text-shadow: 0 2px 28px rgba(0,0,0,.58), 0 0 44px rgba(75,106,255,.08);
}

.display--hero .reveal-word:nth-of-type(6n + 1) {
  color: #cfe1ff;
}

.hero__orbit {
  position: relative;
  transform-style: preserve-3d;
}

.hero-art {
  position: absolute;
  z-index: 0;
  inset: -3% 0;
  overflow: hidden;
  transform: translate3d(0, var(--art-scroll, 0px), 0) scale(1.04);
  transform-origin: center;
  opacity: .96;
  filter: saturate(1.12) contrast(1.08);
  transition: transform .32s var(--ease);
}

.hero-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  transform: scale(1.08);
  animation: heroArtDrift 14s var(--ease) infinite alternate;
}

.hero-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 72% 48%, rgba(122,215,255,.08), transparent 28%);
  pointer-events: none;
}

.hero-art__scan {
  position: absolute;
  z-index: 2;
  inset: -30% 0;
  width: 18%;
  background: linear-gradient(90deg, transparent, rgba(197,231,255,.24), transparent);
  filter: blur(10px);
  transform: skewX(-15deg) translateX(-240%);
  animation: heroScan 5.8s 1.1s var(--ease) infinite;
}

.hero-art__flare {
  position: absolute;
  z-index: 3;
  left: 61%;
  top: 50%;
  width: 10px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 14px #fff, 0 0 38px #7ad7ff, 0 0 90px #6c58ff;
  animation: heroFlare 3.8s var(--ease) infinite;
}

.hero__orbit .logo-console {
  width: min(240px, 48%);
  z-index: 5;
  transform: perspective(1500px) rotateY(var(--logo-ry)) rotateX(var(--logo-rx)) translate3d(8%, 31%, 90px);
}

.hero__orbit .orbit-halo { z-index: 2; mix-blend-mode: screen; }
.hero__orbit .orbit-label,
.hero__orbit .orbit-readout { z-index: 6; backdrop-filter: blur(16px); }

.capabilities__art {
  position: relative;
  min-height: 430px;
  margin: 42px 0 0;
  overflow: hidden;
  border: 1px solid rgba(122,215,255,.16);
  border-radius: 2px 72px 2px 2px;
  background: #06080d;
  box-shadow: 0 28px 80px rgba(0,0,0,.38), inset 0 0 60px rgba(28,100,242,.08);
}

.capabilities__art::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  background: linear-gradient(180deg, transparent 52%, rgba(6,8,13,.92)), linear-gradient(90deg, rgba(6,8,13,.16), transparent);
  pointer-events: none;
}

.capabilities__art img {
  width: 100%;
  height: 100%;
  min-height: 430px;
  object-fit: cover;
  object-position: 52% 56%;
  filter: saturate(.96) contrast(1.08);
  transform: scale(1.04);
  transition: transform 1.2s var(--ease), filter .8s var(--ease);
}

.capabilities__art:hover img { transform: scale(1.1); filter: saturate(1.16) contrast(1.08); }

.capabilities__art-label {
  position: absolute;
  z-index: 3;
  left: 22px;
  right: 22px;
  bottom: 20px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: #c9e9ff;
}

.capability-row {
  position: relative;
  overflow: hidden;
}

.capability-row::after {
  content: "";
  position: absolute;
  left: -25%;
  right: -25%;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, #7ad7ff, #ff8c78, transparent);
  transform: translateX(-70%);
  opacity: 0;
  transition: transform .7s var(--ease), opacity .3s var(--ease);
}

.capability-row:hover::after { transform: translateX(36%); opacity: .8; }

@keyframes heroArtDrift {
  from { transform: scale(1.08) translate3d(-1.5%, -1%, 0); }
  to { transform: scale(1.16) translate3d(1.8%, 1.2%, 0); }
}

@keyframes heroScan {
  0%, 18% { transform: skewX(-15deg) translateX(-240%); opacity: 0; }
  32% { opacity: .85; }
  68%, 100% { transform: skewX(-15deg) translateX(760%); opacity: 0; }
}

@keyframes heroFlare {
  0%,100% { scale: .7; opacity: .45; }
  50% { scale: 1.5; opacity: 1; }
}

@media (max-width: 1100px) {
  .hero__orbit .logo-console { width: min(210px, 44%); }
  .capabilities__art { min-height: 360px; }
  .capabilities__art img { min-height: 360px; }
}

@media (max-width: 960px) {
  .hero-art { opacity: .78; }
  .hero-art img { object-position: 61% center; }
  .hero::before {
    background:
      linear-gradient(90deg, rgba(6,8,13,.94), rgba(6,8,13,.68) 58%, rgba(6,8,13,.32)),
      linear-gradient(180deg, rgba(6,8,13,.5), transparent 25%, rgba(6,8,13,.3) 68%, rgba(6,8,13,.9));
  }
  .hero__orbit .logo-console { width: min(220px, 42%); transform: translate3d(4%, 26%, 60px); }
  .capabilities__art { display: none; }
}

@media (max-width: 640px) {
  .hero { padding-top: calc(var(--header-h) + 52px); }
  .hero-art { inset: 0; opacity: .62; transform: none; }
  .hero-art img { object-position: 64% center; transform: scale(1.06); }
  .hero::before {
    background:
      linear-gradient(180deg, rgba(6,8,13,.62) 0%, rgba(6,8,13,.72) 38%, rgba(6,8,13,.92) 78%, #06080d 100%),
      linear-gradient(90deg, rgba(6,8,13,.78), rgba(6,8,13,.36));
  }
  .hero__orbit .logo-console { width: min(180px, 48%); }
  .hero__signals { backdrop-filter: blur(14px); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-art,
  .hero-art img,
  .hero-art__scan,
  .hero-art__flare { animation: none !important; transition: none !important; }
  .hero-art__scan { display: none; }
}

/* Hero symbol: deliberately static and cropped above the embedded wordmark. */
.hero__orbit {
  overflow: visible;
}

.hero__orbit::before { display: none; }

.hero-static-logo {
  position: relative;
  z-index: 5;
  width: min(440px, 35vw, 48vh);
  height: min(660px, 52.5vw, 72vh);
  margin: 0;
  overflow: visible;
  transform: translate3d(-3%, -12%, 0);
  filter: none;
  animation: none;
  pointer-events: none;
}

.hero-static-logo img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  clip-path: none;
  filter: none;
  transform: none;
  animation: none;
}

.hero-static-logo::before,
.hero-static-logo::after { display: none; }

@media (max-width: 960px) {
  .hero-static-logo {
    width: min(360px, 60vw, 40vh);
    height: min(540px, 90vw, 60vh);
    transform: translate3d(-2%, -10%, 0);
  }
}

@media (max-width: 640px) {
  .hero-static-logo {
    width: min(300px, 76vw, 38vh);
    height: min(450px, 114vw, 57vh);
    transform: translate3d(0, -16%, 0);
  }
}

/* --------------------------------------------------------------------------
   V7 — CAPABILITIES COMPOSITION
   A non-sticky editorial visual and a precise 2×2 capability matrix remove
   the orphaned-row / empty-space problem while keeping the section kinetic.
   -------------------------------------------------------------------------- */

.capabilities__grid {
  display: block;
}

.capabilities__head {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, .65fr);
  column-gap: clamp(48px, 8vw, 120px);
  align-items: end;
  margin-bottom: 48px;
}

.capabilities__head .section-kicker {
  grid-column: 1 / -1;
  margin-bottom: 18px;
}

.capabilities__head h2,
.capabilities__head p { margin-bottom: 0; }

.capabilities__head p {
  max-width: 520px;
  color: var(--telemetry-400);
  font-size: 1.05rem;
}

.capabilities__body {
  display: grid;
  grid-template-columns: minmax(340px, .82fr) minmax(0, 1.18fr);
  gap: 22px;
  align-items: stretch;
}

.capabilities__art {
  position: relative;
  min-height: 544px;
  height: 100%;
  margin: 0;
  border-radius: 2px 78px 2px 2px;
  isolation: isolate;
  box-shadow: 0 32px 90px rgba(0,0,0,.44), inset 0 0 80px rgba(28,100,242,.12);
}

.capabilities__art::before {
  z-index: 2;
  background:
    linear-gradient(180deg, rgba(6,8,13,.08) 45%, rgba(6,8,13,.9) 100%),
    linear-gradient(90deg, rgba(6,8,13,.16), transparent 36%, rgba(6,8,13,.12));
}

.capabilities__art::after {
  content: "";
  position: absolute;
  z-index: 4;
  left: -25%;
  top: -20%;
  width: 22%;
  height: 140%;
  background: linear-gradient(90deg, transparent, rgba(190,229,255,.26), transparent);
  filter: blur(14px);
  transform: skewX(-16deg);
  animation: capabilitiesLightSweep 6.4s var(--ease) infinite;
  pointer-events: none;
}

.capabilities__art img {
  min-height: 544px;
  object-position: 52% 53%;
  transform: scale(1.05);
  animation: capabilitiesImageDrift 11s var(--ease) infinite alternate;
}

.capabilities__art:hover img {
  transform: scale(1.1);
  animation-play-state: paused;
}

.capabilities__art-orbit {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 53%;
  width: 68%;
  aspect-ratio: 1;
  border: 1px dashed rgba(122,215,255,.28);
  border-radius: 50%;
  translate: -50% -50%;
  box-shadow: 0 0 30px rgba(28,100,242,.12), inset 0 0 30px rgba(122,215,255,.05);
  animation: capabilitiesOrbit 18s linear infinite;
}

.capabilities__art-orbit::before,
.capabilities__art-orbit::after {
  content: "";
  position: absolute;
  border-radius: 50%;
}

.capabilities__art-orbit::before {
  inset: 12%;
  border: 1px solid rgba(255,143,120,.18);
  border-top-color: rgba(255,143,120,.7);
  animation: capabilitiesOrbit 9s linear infinite reverse;
}

.capabilities__art-orbit::after {
  top: 9%;
  right: 13%;
  width: 7px;
  aspect-ratio: 1;
  background: #bce9ff;
  box-shadow: 0 0 12px #7ad7ff, 0 0 28px rgba(122,215,255,.72);
}

.capabilities__art-label {
  display: flex;
  align-items: center;
  gap: 12px;
}

.capabilities__art-label::before {
  content: "";
  width: 28px;
  height: 1px;
  background: linear-gradient(90deg, #7ad7ff, transparent);
}

.capability-stack {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  border: 0;
  counter-reset: capability;
}

.capability-row {
  counter-increment: capability;
  position: relative;
  display: flex;
  flex-direction: column;
  grid-template-columns: none;
  gap: 0;
  min-height: 266px;
  padding: 28px;
  border: 1px solid var(--line);
  background:
    radial-gradient(circle at 100% 0%, rgba(28,100,242,.1), transparent 40%),
    rgba(8,11,17,.78);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.015);
  transition: transform .45s var(--ease), border-color .35s var(--ease), background .35s var(--ease), box-shadow .45s var(--ease);
}

.capability-row::before {
  content: "0" counter(capability);
  display: block;
  margin: 0 0 auto;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  color: rgba(122,215,255,.6);
}

.capability-row:hover {
  padding-left: 28px;
  transform: translateY(-7px);
  border-color: rgba(122,215,255,.34);
  background:
    radial-gradient(circle at 100% 0%, rgba(95,73,255,.18), transparent 46%),
    linear-gradient(145deg, rgba(20,29,48,.94), rgba(8,11,17,.92));
  box-shadow: 0 24px 60px rgba(0,0,0,.32), inset 0 0 0 1px rgba(122,215,255,.025);
}

.capability-row__tag {
  grid-row: auto;
  margin-bottom: 18px;
  color: var(--ion-300);
}

.capability-row h3 {
  margin: 0 0 14px;
  font-size: clamp(1.38rem, 1.7vw, 1.72rem);
  line-height: 1.1;
}

.capability-row p {
  margin: 0;
  line-height: 1.65;
}

.capability-row::after {
  bottom: -1px;
  height: 2px;
}

@keyframes capabilitiesImageDrift {
  from { transform: scale(1.05) translate3d(-1.5%, -1%, 0); }
  to { transform: scale(1.11) translate3d(1.2%, 1.4%, 0); }
}

@keyframes capabilitiesLightSweep {
  0%, 18% { translate: 0 0; opacity: 0; }
  34% { opacity: .8; }
  70%, 100% { translate: 690% 0; opacity: 0; }
}

@keyframes capabilitiesOrbit { to { rotate: 360deg; } }

@media (max-width: 1100px) {
  .capabilities__head { column-gap: 48px; }
  .capabilities__body { grid-template-columns: minmax(300px, .72fr) minmax(0, 1.28fr); }
  .capability-row { min-height: 246px; padding: 24px; }
  .capability-row:hover { padding-left: 24px; }
}

@media (max-width: 960px) {
  .capabilities__head { grid-template-columns: 1fr; gap: 18px; }
  .capabilities__head .section-kicker { grid-column: auto; }
  .capabilities__body { grid-template-columns: 1fr; }
  .capabilities__art { display: block; min-height: 430px; max-height: 520px; }
  .capabilities__art img { min-height: 430px; }
}

@media (max-width: 640px) {
  .capabilities__head { margin-bottom: 32px; }
  .capabilities__art { min-height: 350px; border-radius: 2px 52px 2px 2px; }
  .capabilities__art img { min-height: 350px; }
  .capability-stack { grid-template-columns: 1fr; }
  .capability-row { min-height: 220px; }
}

@media (prefers-reduced-motion: reduce) {
  .capabilities__art img,
  .capabilities__art::after,
  .capabilities__art-orbit,
  .capabilities__art-orbit::before { animation: none !important; }
}

/* V8 — larger Whalexy product lockup. */
.whalexy-boom {
  width: min(680px, 112%);
  min-height: 236px;
}

.whalexy-boom__word {
  font-size: clamp(5rem, 8vw, 8rem);
  letter-spacing: -.055em;
  text-shadow:
    0 0 12px rgba(122,215,255,.3),
    0 0 44px rgba(28,100,242,.3);
}

.whalexy-boom__line {
  bottom: 12px;
  font-size: 10px;
}

.whalexy-boom__ring { width: 210px; }
.whalexy-boom__ring--two { width: 290px; }

@media (max-width: 960px) {
  .whalexy-boom {
    width: min(720px, 100%);
    min-height: 220px;
  }

  .whalexy-boom__word { font-size: clamp(5rem, 14vw, 7.4rem); }
}

@media (max-width: 640px) {
  .whalexy-boom { min-height: 164px; }
  .whalexy-boom__word { font-size: clamp(3.9rem, 19vw, 5.6rem); }
  .whalexy-boom__line { bottom: 4px; font-size: 7px; }
  .whalexy-boom__ring { width: 150px; }
  .whalexy-boom__ring--two { width: 210px; }
}

/* --------------------------------------------------------------------------
   V9 — RESPONSIVE CONSOLIDATION
   Final breakpoint layer. These rules intentionally live last so legacy
   refinements cannot leak desktop sizing back into tablet and phone layouts.
   -------------------------------------------------------------------------- */

html,
body {
  max-width: 100%;
  overflow-x: clip;
}

.shell,
.hero__copy,
.hero__orbit,
.fracture__intro > *,
.systems__head > *,
.systems__story > *,
.capabilities__head > *,
.capabilities__body > *,
.whalexy__panel > *,
.fit__head > *,
.fit__split > *,
.thesis__grid > *,
.team__head > *,
.team__grid > *,
.careers__head > *,
.careers__roles > *,
.careers__apply > *,
.contact__grid > *,
.footer__grid > * { min-width: 0; }

.display,
.hero__lede,
.system-step h3,
.capability-row h3,
.fit-card h3,
.team-card h3 {
  overflow-wrap: break-word;
  text-wrap: balance;
}

@media (max-width: 1100px) {
  :root { --shell: min(100% - 40px, 980px); }

  .hero__grid {
    grid-template-columns: minmax(0, 1.12fr) minmax(290px, .88fr);
    gap: 28px;
  }

  .hero__signals div { padding: 16px; }
  .systems__story { gap: 34px; }
  .whalexy__panel { gap: 40px; }
  .contact__grid { gap: 48px; }
}

@media (max-width: 960px) {
  :root {
    --header-h: 66px;
    --shell: min(100% - 32px, 760px);
  }

  .section { padding: 78px 0; }
  .section--tight { padding: 64px 0; }

  .display--hero {
    max-width: 14ch;
    font-size: clamp(3rem, 8.4vw, 4.4rem);
    line-height: .99;
  }

  .display--section {
    max-width: 17ch;
    font-size: clamp(2.25rem, 6.4vw, 3.5rem);
    line-height: 1;
  }

  .site-header,
  .nav { min-width: 0; }

  .nav-menu {
    left: 16px;
    right: 16px;
    max-height: calc(100svh - var(--header-h) - 18px);
    overflow-y: auto;
  }

  .hero {
    min-height: auto;
    padding-top: calc(var(--header-h) + 58px);
    padding-bottom: 48px;
  }

  .hero__grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .hero__copy { max-width: 720px; }
  .hero__orbit {
    order: 0;
    width: 100%;
    max-width: 560px;
    min-height: 500px;
    margin: 0 auto;
  }

  .hero-static-logo {
    width: min(320px, 48vw, 38vh);
    height: min(480px, 72vw, 57vh);
    transform: translate3d(0, -4%, 0);
  }

  .hero__marquee { display: none; }

  .fracture__intro,
  .systems__head,
  .fit__head,
  .team__head,
  .careers__head,
  .careers__apply,
  .thesis__grid,
  .contact__grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .fracture__grid { grid-template-columns: 1fr; gap: 12px; margin-top: 34px; }
  .fracture-card { min-height: 0; padding: 26px; }

  .systems__story {
    grid-template-columns: 1fr;
    gap: 28px;
    margin-top: 46px;
  }

  .loop-stage {
    position: relative;
    top: auto;
    width: 100%;
    height: 480px;
    min-height: 0;
    max-height: none;
  }

  .systems__steps { display: grid; gap: 12px; }
  .system-step {
    min-height: 0;
    padding: 30px 26px;
    border: 1px solid var(--line);
    background: rgba(8,11,17,.62);
  }

  .capabilities__head {
    grid-template-columns: 1fr;
    gap: 18px;
    margin-bottom: 34px;
  }

  .capabilities__head .section-kicker { grid-column: auto; margin-bottom: 0; }
  .capabilities__body { grid-template-columns: 1fr; gap: 16px; }
  .capabilities__art { min-height: 420px; max-height: 480px; }
  .capabilities__art img { min-height: 420px; }

  .whalexy { padding: 76px 0; }
  .whalexy__panel {
    grid-template-columns: 1fr;
    gap: 38px;
    padding: 44px 0;
  }

  .whalexy__visual { order: 0; }
  .signal-window { transform: none; }

  .fit__split { grid-template-columns: 1fr; gap: 12px; margin-top: 34px; }
  .fit-card { min-height: 0; }

  .stats-grid { width: 100%; max-width: none; }
  .team__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .team-card { min-height: 230px; }
  .careers__roles { grid-template-columns: 1fr; margin-top: 34px; }
  .career-role { min-height: 0; }
  .career-role h3 { margin-top: 36px; }
  .careers__apply { gap: 38px; margin-top: 54px; padding-top: 54px; }
  .careers__apply-copy { position: static; }

  .contact__grid { gap: 38px; }
  .footer__grid { grid-template-columns: 1fr; gap: 24px; }
}

@media (max-width: 640px) {
  :root {
    --shell: calc(100% - 24px);
    --radius: 14px;
  }

  body { font-size: 15px; }
  .section { padding: 58px 0; }
  .section--tight { padding: 48px 0; }

  .brand-mark {
    width: 34px;
    height: 42px;
    flex-basis: 34px;
  }

  .brand-name { font-size: 13px; white-space: nowrap; }
  .nav-toggle { width: 40px; height: 40px; }

  .display--hero {
    max-width: none;
    font-size: clamp(2.5rem, 10.8vw, 3.25rem);
    line-height: 1;
    letter-spacing: -.04em;
  }

  .display--section {
    max-width: none;
    font-size: clamp(2.05rem, 9vw, 2.75rem);
  }

  .hero {
    padding-top: calc(var(--header-h) + 34px);
    padding-bottom: 34px;
  }

  .hero__copy .eyebrow { margin-bottom: 16px; font-size: 9px; }
  .hero__lede { margin-top: 18px; font-size: 1rem; line-height: 1.55; }
  .hero__actions { margin-top: 26px; gap: 14px; }
  .hero__actions .button { width: 100%; }

  .hero__signals {
    margin-top: 30px;
    grid-template-columns: 1fr;
  }

  .hero__signals div {
    min-height: 0;
    padding: 13px 15px;
    grid-template-columns: 84px 1fr;
  }

  .hero__orbit {
    min-height: 390px;
    margin-top: -8px;
  }

  .hero-static-logo {
    width: min(260px, 70vw, 34vh);
    height: min(390px, 105vw, 51vh);
    transform: none;
  }

  .hero__marquee { display: none; }

  .fracture__grid { margin-top: 28px; }
  .fracture-card { padding: 22px; }

  .systems__story { margin-top: 34px; gap: 20px; }
  .loop-stage { height: 330px; border-radius: 12px; }
  .loop-stage__status { font-size: 7px; }
  .loop-node span:last-child { display: none; }
  .loop-node { border-radius: 999px; }
  .system-step { padding: 24px 20px; }
  .system-step h3 { font-size: clamp(1.65rem, 7vw, 2rem); }
  .system-step p { margin-top: 14px; font-size: .96rem; }

  .capabilities__head { margin-bottom: 26px; }
  .capabilities__art {
    min-height: 310px;
    max-height: 350px;
    border-radius: 2px 48px 2px 2px;
  }
  .capabilities__art img { min-height: 310px; }
  .capabilities__art-orbit { width: 62%; }
  .capability-stack { grid-template-columns: 1fr; gap: 10px; }
  .capability-row,
  .capability-row:hover {
    min-height: 0;
    padding: 22px;
    transform: none;
  }
  .capability-row::before { margin-bottom: 34px; }

  .whalexy { padding: 54px 0; }
  .whalexy__panel { gap: 28px; padding: 30px 0; }
  .whalexy-boom { min-height: 150px; }
  .whalexy-boom__word { font-size: clamp(3.65rem, 18vw, 5rem); }
  .whalexy__bullets > div {
    grid-template-columns: 30px 1fr;
    gap: 8px 12px;
  }
  .whalexy__bullets p { grid-column: 2; }
  .signal-window { width: 100%; }

  .fit__split { margin-top: 28px; }
  .fit-card { padding: 22px; }
  .fit-card h3 { margin-top: 28px; }

  .thesis__grid { gap: 28px; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .stats-grid article { min-height: 120px; padding: 18px; }

  .team__grid { grid-template-columns: 1fr; gap: 10px; margin-top: 30px; }
  .team-card { min-height: 180px; padding: 20px; }

  .careers__roles { margin-top: 28px; }
  .career-role { padding: 22px; }
  .careers__apply { gap: 28px; margin-top: 42px; padding-top: 42px; }
  .career-form { padding: 20px 16px; }

  .contact__grid { gap: 30px; }
  .contact-form { padding: 20px 16px; }
  .form-grid { grid-template-columns: 1fr; gap: 0; }
  .form-actions { flex-direction: column; align-items: stretch; }
  .contact__direct a,
  .contact__direct > div { flex-direction: column; gap: 5px; }

  .footer { padding: 38px 0 26px; }
  .footer__links { flex-direction: column; gap: 10px; align-items: flex-start; }
}

@media (max-width: 420px) {
  :root { --shell: calc(100% - 32px); }

  .brand-name { max-width: 190px; overflow: hidden; text-overflow: ellipsis; }
  .display--hero { font-size: clamp(2.25rem, 10.5vw, 2.75rem); }
  .hero__copy,
  .hero__actions,
  .hero__actions .button,
  .hero__signals { width: 100%; max-width: 100%; }
  .hero__actions { overflow: hidden; }
  .hero__signals div { grid-template-columns: 72px minmax(0, 1fr); }
  .hero__signals dd { min-width: 0; overflow-wrap: anywhere; }
  .hero__orbit { min-height: 350px; }
  .hero-static-logo {
    width: min(230px, 68vw, 31vh);
    height: min(345px, 102vw, 46.5vh);
  }
  .stats-grid { grid-template-columns: 1fr; }
  .stats-grid article { min-height: 105px; }
  .whalexy-boom__line { white-space: normal; width: 92%; text-align: center; }
}

/* Header brand mark is intentionally simple and completely static. */
.brand-mark,
.brand-mark:hover,
.brand-link:hover .brand-mark {
  animation: none !important;
  transform: none !important;
  translate: none !important;
  rotate: none !important;
  scale: 1 !important;
  filter: none !important;
}

.brand-mark::before,
.brand-mark::after { display: none !important; }

.brand-mark img,
.brand-mark:hover img,
.brand-link:hover .brand-mark img {
  animation: none !important;
  transform: none !important;
  translate: none !important;
  rotate: none !important;
  scale: 1 !important;
  filter: none !important;
  transition: none !important;
}

/* V10 — polished header surface and a truly continuous hero signal rail. */
.site-header {
  background: rgba(6, 8, 13, .94);
  border-bottom: 1px solid rgba(122, 215, 255, .11);
  box-shadow: 0 10px 36px rgba(0, 0, 0, .28);
  backdrop-filter: blur(18px) saturate(135%);
  -webkit-backdrop-filter: blur(18px) saturate(135%);
}

.nav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  height: 44px;
  min-height: 44px;
  margin-block: 0;
  padding: 0 20px;
  line-height: 1;
  border-color: rgba(122, 215, 255, .3);
  background: linear-gradient(135deg, rgba(28, 100, 242, .22), rgba(112, 68, 224, .14));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .07),
    0 10px 28px rgba(7, 14, 40, .28);
  white-space: nowrap;
}

.nav-cta:hover {
  border-color: rgba(122, 215, 255, .56);
  background: linear-gradient(135deg, rgba(28, 100, 242, .34), rgba(112, 68, 224, .22));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .1),
    0 12px 34px rgba(28, 100, 242, .2);
}

.hero__marquee {
  position: relative;
  overflow: hidden;
  background: rgba(5, 8, 15, .78);
}

.hero__marquee::before,
.hero__marquee::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  width: clamp(24px, 5vw, 90px);
  pointer-events: none;
}

.hero__marquee::before {
  left: 0;
  background: linear-gradient(90deg, #06080d, transparent);
}

.hero__marquee::after {
  right: 0;
  background: linear-gradient(-90deg, #06080d, transparent);
}

.hero__marquee .hero__marquee-track {
  display: flex;
  width: max-content;
  padding: 13px 0;
  animation: heroMarqueeLoop 30s linear infinite;
  will-change: transform;
}

.hero__marquee .hero__marquee-group {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  padding: 0;
  color: #788397;
}

.hero__marquee .hero__marquee-group i {
  padding: 0 22px;
  color: var(--signal-500);
  font-style: normal;
}

@keyframes heroMarqueeLoop {
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__marquee .hero__marquee-track {
    animation: none !important;
  }
}

/* V11 — a cyan-white charge runs along the hero mark's highlighted outer rail. */
.hero-logo-trace {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  transition: opacity .35s ease;
}

.logo-live .hero-logo-trace { opacity: 1; }

.hero-logo-trace path {
  fill: none;
  stroke: url(#heroTraceGradient);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: .13 .87;
  stroke-dashoffset: 1;
}

.hero-logo-trace__bloom {
  stroke-width: 30;
  opacity: 0;
  filter: url(#heroTraceGlow);
  animation: heroRailCharge 4.2s 1.6s cubic-bezier(.2,.72,.2,1) infinite;
}

.hero-logo-trace__core {
  stroke-width: 9;
  opacity: 0;
  filter: drop-shadow(0 0 8px #7ad7ff) drop-shadow(0 0 18px #1c64f2);
  animation: heroRailCharge 4.2s 1.6s cubic-bezier(.2,.72,.2,1) infinite;
}

.hero-logo-trace__spark {
  fill: #fff;
  opacity: 0;
  filter: drop-shadow(0 0 7px #fff) drop-shadow(0 0 20px #45caff) drop-shadow(0 0 34px #1c64f2);
  animation: heroRailSpark 4.2s 1.6s infinite;
}

@keyframes heroRailCharge {
  0% { stroke-dashoffset: 1; opacity: 0; }
  8% { opacity: 1; }
  62% { opacity: 1; }
  78%, 100% { stroke-dashoffset: -.13; opacity: 0; }
}

@keyframes heroRailSpark {
  0%, 4% { opacity: 0; transform: scale(.55); }
  10%, 68% { opacity: 1; transform: scale(1); }
  78%, 100% { opacity: 0; transform: scale(.35); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-logo-trace { display: none; }
}

/* V12 — keep the opening statement visually connected to the fixed header. */
@media (min-width: 961px) {
  .hero {
    justify-content: flex-start;
    padding-top: calc(var(--header-h) + 14px);
  }

  .hero__grid { align-items: start; }
}

/* Floating WhatsApp contact shortcut. */
.whatsapp-chat {
  position: fixed;
  z-index: 80;
  right: clamp(18px, 2.4vw, 34px);
  bottom: clamp(18px, 2.4vw, 34px);
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  color: #fff;
  background: #25d366;
  border: 1px solid rgba(255, 255, 255, .34);
  border-radius: 50%;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .38), 0 0 0 0 rgba(37, 211, 102, .34);
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.whatsapp-chat svg {
  width: 31px;
  height: 31px;
}

.whatsapp-chat:hover {
  color: #fff;
  background: #20bd5a;
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 16px 38px rgba(0, 0, 0, .42), 0 0 0 7px rgba(37, 211, 102, .13);
}

.whatsapp-chat:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 4px;
}

@media (max-width: 600px) {
  .whatsapp-chat {
    right: 18px;
    bottom: 18px;
    width: 54px;
    height: 54px;
  }

  .whatsapp-chat svg {
    width: 29px;
    height: 29px;
  }
}

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