/* NewEra · planet edition
   Dark, quiet, expensive. The planet does the shouting; type and glass stay calm. */

:root {
  --bg: #02030a;
  --bg-2: #060a1c;
  --ink: #eef1ff;
  --ink-2: #c3cae9;
  --muted: #8189b3;
  --faint: #4b5384;
  --line: rgba(150, 170, 255, 0.11);
  --line-2: rgba(150, 170, 255, 0.22);
  --royal: #173dc9;
  --bright: #2d6aff;
  --ice: #a9c1ff;
  --cyan: #7fe3ff;
  --violet: #9a8cff;
  --glass: rgba(10, 15, 38, 0.42);
  --glass-hi: rgba(255, 255, 255, 0.06);
  --iri: linear-gradient(100deg, #f6f7ff 0%, #bccdff 28%, #6d93ff 52%, #a596ff 76%, #8ae6ff 100%);
  --studio: radial-gradient(55% 42% at 50% 30%, rgba(140, 200, 255, 0.42), transparent 72%), radial-gradient(120% 85% at 50% 30%, #2f66f5 0%, #1a3fc7 34%, #0d1f78 62%, #060b2e 100%);
  --sans: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --serif: 'Cormorant Garamond', 'Times New Roman', serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;
  --pad: clamp(16px, 4.2vw, 64px);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --nav-h: 76px;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 300 16px/1.65 var(--sans);
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
::selection { background: rgba(45, 106, 255, 0.45); color: #fff; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
img, svg { display: block; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 1px solid var(--cyan); outline-offset: 4px; border-radius: 6px; }

.wrap { width: 100%; max-width: 1360px; margin: 0 auto; padding: 0 var(--pad); position: relative; }

/* ---------- Stage layers ---------- */
#globe { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.haze {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(60vw 40vw at 12% -8%, rgba(23, 61, 201, 0.22), transparent 70%),
    radial-gradient(50vw 40vw at 105% 30%, rgba(154, 140, 255, 0.08), transparent 70%),
    radial-gradient(80vw 50vw at 50% 120%, rgba(45, 106, 255, 0.12), transparent 70%);
}
.grain {
  position: fixed; inset: -50%; z-index: 50; pointer-events: none; opacity: 0.07;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grain 1.2s steps(6) infinite;
}
/* Resting (site.js): the window is in the background or idle, so looping animations hold still. */
.is-resting *, .is-resting *::before, .is-resting *::after { animation-play-state: paused !important; }
@keyframes grain {
  0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -3%); }
  60% { transform: translate(-2%, -1%); } 80% { transform: translate(3%, 3%); } 100% { transform: translate(0, 0); }
}
.orb-fallback { display: none; }
.no-webgl .orb-fallback {
  display: block; position: fixed; z-index: 0; pointer-events: none;
  width: 130vmax; height: 130vmax; left: 50%; top: 62vh; transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, #0b1a5c 0%, #050a24 45%, #02030a 66%);
  box-shadow: 0 0 120px 20px rgba(45, 106, 255, 0.35), inset 0 2px 60px rgba(127, 227, 255, 0.25);
}

.scrollbar { position: fixed; top: 0; left: 0; right: 0; height: 1px; z-index: 60; pointer-events: none; }
.scrollbar i { display: block; height: 100%; background: var(--iri); transform-origin: 0 50%; transform: scaleX(0); }

.cursor { position: fixed; left: 0; top: 0; z-index: 70; pointer-events: none; display: none; }
.has-cursor .cursor { display: block; }
.cursor i {
  display: block; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%;
  border: 1px solid rgba(169, 193, 255, 0.35);
  background: radial-gradient(circle, rgba(45, 106, 255, 0.18), transparent 70%);
  transition: transform 0.5s var(--ease), border-color 0.3s, background 0.3s;
}
.cursor.hot i { transform: scale(1.7); border-color: rgba(127, 227, 255, 0.55); background: radial-gradient(circle, rgba(127, 227, 255, 0.14), transparent 70%); }
.is-dragging, .is-dragging * { cursor: grabbing !important; user-select: none; }

main, .foot { position: relative; z-index: 3; }

/* ---------- Boot ---------- */
.boot {
  position: fixed; inset: 0; z-index: 100; background: var(--bg);
  display: grid; place-items: center;
  transition: opacity 0.7s var(--ease-io), visibility 0.7s, filter 0.7s var(--ease-io);
}
.boot.done { opacity: 0; visibility: hidden; filter: blur(10px); pointer-events: none; } /* clicks reach the page while it fades */
.boot__core { display: grid; justify-items: center; gap: 22px; }
.boot__mark { width: 54px; height: 48px; animation: breathe 2.4s var(--ease-io) infinite; filter: drop-shadow(0 0 24px rgba(45, 106, 255, 0.6)); }
@keyframes breathe { 50% { opacity: 0.55; transform: scale(0.96); } }
.boot__name { font: 300 13px/1 var(--mono); letter-spacing: 0.6em; padding-left: 0.6em; color: var(--ink); }
.boot__name span { color: var(--muted); }
.boot__log { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; justify-items: center; min-height: 72px; }
.boot__log li {
  font: 400 11px/1 var(--mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted);
  opacity: 0; transform: translateY(6px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.boot__log li::before { content: '▸ '; color: var(--cyan); }
.boot__log li.on { opacity: 1; transform: none; }
.boot__bar { position: absolute; left: var(--pad); right: var(--pad); bottom: 44px; height: 1px; background: var(--line); }
.boot__bar i { display: block; height: 100%; background: var(--iri); transform-origin: 0 50%; transform: scaleX(0); box-shadow: 0 0 12px rgba(127, 227, 255, 0.6); }
.boot__pct { position: absolute; right: var(--pad); bottom: 58px; font: 400 12px/1 var(--mono); letter-spacing: 0.2em; color: var(--ink-2); }

/* ---------- Nav ---------- */
.nav {
  position: fixed; top: 14px; left: 50%; z-index: 40;
  width: min(1360px, calc(100% - 2 * var(--pad) + 32px)); transform: translateX(-50%);
  height: 60px; padding: 0 10px 0 20px; border-radius: 999px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  border: 1px solid transparent;
  transition: background 0.6s var(--ease), border-color 0.6s var(--ease), backdrop-filter 0.6s, opacity 1s var(--ease), translate 1s var(--ease);
  opacity: 0; translate: 0 -12px;
}
.booted .nav { opacity: 1; translate: 0 0; transition-delay: 0s, 0s, 0s, 0.5s, 0.5s; }
.nav.scrolled {
  background: rgba(6, 9, 26, 0.55); border-color: var(--line);
  backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%);
}
.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand__mark { width: 30px; height: 27px; }
.brand__word { font: 500 14px/1 var(--sans); letter-spacing: 0.32em; display: inline-flex; align-items: baseline; gap: 8px; }
.brand__word small { font: 400 9px/1 var(--mono); letter-spacing: 0.2em; color: var(--muted); }
.nav__links { display: flex; gap: 4px; }
.nav__links a {
  position: relative; padding: 10px 14px; font-size: 13.5px; font-weight: 400; color: var(--ink-2); border-radius: 999px;
  transition: color 0.3s, background 0.3s;
}
.nav__links a:hover { color: var(--ink); background: rgba(255, 255, 255, 0.04); }
.nav__links a.on, .nav__links a[aria-current='page'] { color: var(--ink); }
.nav__links a.on::after, .nav__links a[aria-current='page']::after { content: ''; position: absolute; left: 50%; bottom: 4px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
.nav__end { display: flex; align-items: center; gap: 10px; }
.lang { display: inline-flex; padding: 3px; border-radius: 999px; border: 1px solid var(--line); }
.lang button { font: 500 11px/1 var(--mono); letter-spacing: 0.12em; padding: 8px 10px; border-radius: 999px; color: var(--muted); transition: color 0.3s, background 0.3s; }
.lang button[aria-pressed='true'] { color: var(--ink); background: rgba(169, 193, 255, 0.12); }
.burger { display: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-2); position: relative; }
.burger i { position: absolute; left: 14px; right: 14px; height: 1px; background: var(--ink); transition: transform 0.5s var(--ease); }
.burger i:first-child { top: 18px; } .burger i:last-child { top: 25px; }
.menu-open .burger i:first-child { transform: translateY(3.5px) rotate(45deg); }
.menu-open .burger i:last-child { transform: translateY(-3.5px) rotate(-45deg); }

.menu {
  position: fixed; inset: 0; z-index: 35; padding: calc(var(--nav-h) + 40px) var(--pad) 40px;
  background: rgba(2, 3, 10, 0.86); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  display: flex; flex-direction: column; justify-content: space-between;
  opacity: 0; transition: opacity 0.5s var(--ease);
}
.menu[hidden] { display: none; }
.menu:not([hidden]) { visibility: hidden; pointer-events: none; }
.menu-open .menu { opacity: 1; visibility: visible; pointer-events: auto; }
.menu nav { display: grid; gap: 4px; }
.menu a { display: flex; align-items: baseline; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.menu a span { font: 400 11px/1 var(--mono); color: var(--muted); letter-spacing: 0.15em; }
.menu a[aria-current='page'] b { color: var(--cyan); }
.menu a b { font: 200 clamp(32px, 9vw, 52px)/1.15 var(--sans); letter-spacing: -0.03em; }
.menu__foot { font: 400 12px/1 var(--mono); color: var(--muted); letter-spacing: 0.1em; }

.rail {
  position: fixed; right: calc(var(--pad) * 0.45); top: 50%; z-index: 30; transform: translateY(-50%);
  display: grid; gap: 14px; opacity: 0; transition: opacity 1s var(--ease) 0.8s;
}
.booted .rail { opacity: 1; }
.rail a { font: 400 10px/1 var(--mono); letter-spacing: 0.1em; color: var(--faint); display: flex; align-items: center; justify-content: flex-end; gap: 8px; transition: color 0.4s; }
.rail a::before { content: ''; width: 10px; height: 1px; background: currentColor; transition: width 0.5s var(--ease); }
.rail a.on { color: var(--ink); }
.rail a.on::before { width: 26px; background: var(--cyan); }

/* ---------- Type ---------- */
.display {
  margin: 0; font-weight: 200; font-size: clamp(50px, 8.2vw, 148px); line-height: 1.02; letter-spacing: -0.045em;
  text-wrap: balance;
}
.display .line { display: block; }
.display em, .h2 em, .statement em, .clients__v em, .leader__name em, .leadc__name em, .lstrip__name em, .foot__big em, .board__h em, .dir__name em {
  font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -0.01em;
  font-size: 1.1em; line-height: 0.9; padding: 0.06em 0.06em 0.1em 0;
  background: var(--iri); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: sheen 9s var(--ease-io) infinite alternate;
}
@keyframes sheen { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
.display--md { font-size: clamp(44px, 7.2vw, 124px); }
.h2 { margin: 0; font-weight: 200; font-size: clamp(36px, 5.2vw, 84px); line-height: 1.06; letter-spacing: -0.04em; text-wrap: balance; }
.lede { color: var(--ink-2); font-size: clamp(16px, 1.25vw, 18.5px); line-height: 1.7; max-width: 52ch; margin: 0; }
.eyebrow {
  margin: 0 0 28px; display: inline-flex; align-items: center; gap: 14px;
  font: 400 11px/1 var(--mono); letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted);
}
.eyebrow b { font-weight: 500; color: var(--cyan); }
.eyebrow::after { content: ''; width: 48px; height: 1px; background: linear-gradient(90deg, var(--line-2), transparent); order: 3; }
.eyebrow span { order: 2; }
.eyebrow b { order: 1; }

/* ---------- Reveal ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(26px); filter: blur(10px); }
.js [data-reveal].in {
  opacity: 1; transform: none; filter: none;
  transition: opacity 1.3s var(--ease) var(--d, 0s), transform 1.3s var(--ease) var(--d, 0s), filter 1.3s var(--ease) var(--d, 0s);
}
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { transform: none; filter: none; }
  .js [data-reveal].in { transition: opacity 0.4s linear; }
  .display em, .h2 em, .board__h em, .dir__name em { animation: none; }
  .grain { animation: none; }
}

/* ---------- Buttons ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  height: 54px; padding: 0 28px; border-radius: 999px; white-space: nowrap;
  font: 400 14px/1 var(--sans); letter-spacing: 0.02em;
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease), background 0.5s, border-color 0.5s;
}
.btn .ico { width: 15px; height: 15px; transition: transform 0.5s var(--ease); }
.btn:hover .ico { transform: translateX(4px); }
.btn--primary {
  color: var(--ink); border: 1px solid transparent;
  background: linear-gradient(180deg, rgba(23, 61, 201, 0.55), rgba(8, 14, 44, 0.9)) padding-box, var(--iri) border-box;
  box-shadow: 0 10px 40px -12px rgba(45, 106, 255, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.btn--primary::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.22) 50%, transparent 70%);
  background-size: 250% 100%; background-position: 120% 0; transition: background-position 1s var(--ease);
}
.btn--primary:hover { box-shadow: 0 14px 60px -10px rgba(45, 106, 255, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.25); }
.btn--primary:hover::after { background-position: -20% 0; }
.btn--ghost { border: 1px solid var(--line-2); background: rgba(255, 255, 255, 0.025); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: var(--ink-2); }
.btn--ghost:hover { border-color: rgba(169, 193, 255, 0.45); color: var(--ink); }
.btn--sm { height: 44px; padding: 0 18px; font-size: 13px; }

.glass {
  background: linear-gradient(160deg, rgba(20, 28, 64, 0.5), rgba(6, 9, 26, 0.45));
  border: 1px solid var(--line);
  backdrop-filter: blur(22px) saturate(150%); -webkit-backdrop-filter: blur(22px) saturate(150%);
  box-shadow: inset 0 1px 0 var(--glass-hi), 0 30px 80px -40px rgba(0, 0, 0, 0.8);
}

/* ---------- Hero ---------- */
.hero { position: relative; min-height: 100svh; min-height: max(100svh, 640px); display: flex; flex-direction: column; }
.hero__inner { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: calc(var(--nav-h) + clamp(24px, 6vh, 80px)); }
.chain { margin: 0 0 8px; white-space: nowrap; display: inline-flex; align-items: center; gap: 12px; font: 400 11px/1 var(--mono); letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-2); }
.chain i { position: relative; width: 44px; height: 1px; background: var(--line-2); overflow: hidden; }
.chain i::after { content: ''; position: absolute; inset: 0; width: 40%; background: linear-gradient(90deg, transparent, var(--cyan), transparent); animation: flow 2.2s linear infinite; }
.chain i:last-of-type::after { animation-delay: 1.1s; }
@keyframes flow { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
.badge {
  position: relative; margin: 0 0 30px; display: inline-flex; align-items: center; gap: 11px; padding: 10px 18px 10px 14px; border-radius: 999px;
  font: 400 11px/1.3 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); overflow: hidden;
  background: linear-gradient(rgba(6, 10, 28, 0.85), rgba(6, 10, 28, 0.85)) padding-box, linear-gradient(90deg, rgba(127, 227, 255, 0.7), rgba(45, 106, 255, 0.35), rgba(154, 140, 255, 0.7)) border-box;
  border: 1px solid transparent; box-shadow: 0 0 34px -8px rgba(45, 106, 255, 0.75);
}
.badge i { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); animation: ping 2s var(--ease) infinite; }
.badge::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, 0.16) 50%, transparent 65%); background-size: 250% 100%; animation: shimmer 5s var(--ease-io) infinite; pointer-events: none; }
@keyframes shimmer { 0%, 60% { background-position: 130% 0; } 100% { background-position: -30% 0; } }
.hero .display { text-shadow: 0 0 80px rgba(2, 3, 10, 0.9); }
.hero__sub { margin: 28px 0 0; max-width: 46ch; color: var(--ink-2); font-size: clamp(15px, 1.2vw, 18px); line-height: 1.7; }
.hero__cta { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

.hud { position: absolute; bottom: 30px; display: grid; gap: 9px; font: 400 10.5px/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); opacity: 0; transition: opacity 1.2s var(--ease) 1s; }
.booted .hud { opacity: 1; }
.hud--bl { left: var(--pad); }
.hud--br { right: calc(var(--pad) + 76px); justify-items: end; }  /* clear of Era's button in the corner */
.live { display: inline-flex; align-items: center; gap: 10px; color: var(--ink-2); }
.live i { width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 0 rgba(127, 227, 255, 0.6); animation: ping 2s var(--ease) infinite; }
.live b { font-weight: 400; }
@keyframes ping { 70% { box-shadow: 0 0 0 9px rgba(127, 227, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(127, 227, 255, 0); } }
.scrollcue { display: inline-flex; align-items: center; gap: 12px; color: var(--ink-2); }
.scrollcue b { font-weight: 400; }
.scrollcue i { position: relative; width: 1px; height: 34px; background: var(--line-2); overflow: hidden; }
.scrollcue i::after { content: ''; position: absolute; left: 0; right: 0; height: 40%; background: var(--cyan); animation: drop 1.8s var(--ease-io) infinite; }
@keyframes drop { from { transform: translateY(-100%); } to { transform: translateY(260%); } }
.drag { display: none; }
.has-cursor .drag { display: inline; }

/* ---------- Band ---------- */
.band { position: relative; z-index: 3; overflow: hidden; border-block: 1px solid var(--line); background: rgba(2, 3, 10, 0.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.band__track { display: flex; width: max-content; animation: marquee 48s linear infinite; }
.band span { display: inline-flex; align-items: center; gap: 36px; padding: 22px 0 22px 36px; font: 200 clamp(20px, 2.2vw, 30px)/1 var(--sans); letter-spacing: -0.01em; color: var(--ink-2); white-space: nowrap; }
.band span::after { content: ''; width: 7px; height: 7px; transform: rotate(45deg); border: 1px solid var(--ice); opacity: 0.6; }
.band span:nth-child(3n + 2) { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--ice); }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .band__track { animation-duration: 240s; } }

/* ---------- About ---------- */
.about { padding: clamp(110px, 18vh, 200px) 0 clamp(80px, 12vh, 140px); }
.about__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.about__text { max-width: 760px; }
.statement { margin: 0 0 40px; font-weight: 200; font-size: clamp(30px, 3.9vw, 60px); line-height: 1.18; letter-spacing: -0.035em; }
.statement .w { color: rgba(238, 241, 255, 0.14); transition: color 0.6s var(--ease), text-shadow 0.6s var(--ease); }
.statement .w.on { color: var(--ink); text-shadow: 0 0 30px rgba(127, 160, 255, 0.25); }
.vision { margin-top: 44px; padding: 26px 28px; border-radius: 22px; max-width: 600px; display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: start; }
.vision__k { margin: 3px 0 0; font: 400 10.5px/1.4 var(--mono); letter-spacing: 0.22em; text-transform: uppercase; color: var(--cyan); }
.vision__v { margin: 0; color: var(--ink-2); line-height: 1.7; }
.vision__leg { grid-column: 1 / -1; margin: 2px 0 0; display: flex; align-items: center; gap: 12px; font: 400 10px/1.4 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.vision__leg i { flex: none; width: 28px; height: 1px; background: repeating-linear-gradient(90deg, var(--ice) 0 4px, transparent 4px 8px); }
.clients { margin-top: 64px; padding-top: 30px; border-top: 1px solid var(--line); display: grid; grid-template-columns: 180px 1fr; gap: 18px 40px; align-items: baseline; }
.clients__k { margin: 0; font: 400 10.5px/1.4 var(--mono); letter-spacing: 0.2em; text-transform: uppercase; color: var(--cyan); }
.clients__v { margin: 0; font: 200 clamp(26px, 2.6vw, 40px)/1.25 var(--sans); letter-spacing: -0.03em; max-width: 17em; text-wrap: balance; }
.sectors { grid-column: 2; list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.sectors li { display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px 9px 12px; border-radius: 99px; background: var(--glass); border: 1px solid var(--line); font-size: 14px; color: var(--ink-2); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.sectors svg { width: 18px; height: 18px; fill: none; stroke: var(--cyan); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.phero .sectors { margin: 30px 0 0; }
.clients__logos { grid-column: 2; list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 26px 46px; }
.clients__logos img { height: calc(28px * var(--k, 1)); width: auto; filter: brightness(0) invert(1); opacity: 0.8; transition: opacity 0.4s; }
.clients__logos img:hover { opacity: 1; }
.clients__word { font: 700 23px/1 var(--sans); letter-spacing: -0.02em; color: #fff; opacity: 0.8; }
.clients__note { grid-column: 2; margin: 4px 0 0; color: var(--muted); font-size: 14px; line-height: 1.6; }

.stats { margin: clamp(70px, 12vh, 130px) 0 0; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); }
.stats > div { padding: 30px 24px 0 0; position: relative; }
.stats > div + div { padding-left: 24px; border-left: 1px solid var(--line); }
.stats dt { font: 200 clamp(46px, 5.6vw, 92px)/1 var(--sans); letter-spacing: -0.05em; background: linear-gradient(180deg, #fff, #8ea7e8); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; }
.stats dd { margin: 14px 0 0; font: 400 11px/1.5 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.pedigree { margin-top: 70px; display: flex; flex-wrap: wrap; align-items: center; gap: 18px 40px; }
.pedigree p { margin: 0; font: 400 11px/1.4 var(--mono); letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.pedigree ul { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; grid-template-columns: repeat(5, auto); justify-content: space-between; align-items: center; gap: 34px 40px; }
.pedigree .lg { opacity: 0.6; }

/* ---------- Ecosystem ---------- */
.eco { position: relative; height: 440vh; }
.eco__stick { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; flex-direction: column; justify-content: space-between; padding: calc(var(--nav-h) + 40px) 0 40px; pointer-events: none; }
.eco__stick a, .eco__stick button, .eco__stick .panel { pointer-events: auto; }
.eco__head { max-width: 1360px; }
.eco__head .h2 { max-width: 9.5em; }
.eco__sub { margin: 22px 0 0; max-width: 40ch; color: var(--ink-2); line-height: 1.7; font-size: 15.5px; }
.legend { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 10px; font: 400 10.5px/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.legend li { display: flex; align-items: center; gap: 12px; }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex: none; }
.dot--live { background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }
.dot--dev { border: 1px solid var(--ice); }
.eco__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.panel { width: min(470px, 100%); padding: 26px 28px 22px; border-radius: 24px; }
.panel__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.panel__idx { font: 400 11px/1 var(--mono); letter-spacing: 0.18em; color: var(--muted); }
.panel__idx b { color: var(--ink); font-weight: 500; }
.pill { font: 500 10px/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; padding: 7px 11px; border-radius: 999px; border: 1px solid var(--line-2); }
.pill--live { color: var(--cyan); border-color: rgba(127, 227, 255, 0.35); background: rgba(127, 227, 255, 0.07); }
.pill--dev { color: var(--ice); }
.panel__tag { margin: 0 0 8px; font: italic 400 20px/1.1 var(--serif); color: var(--ice); }
.panel__name { margin: 0; font: 300 clamp(24px, 2.3vw, 32px)/1.18 var(--sans); letter-spacing: -0.025em; }
.panel__desc { margin: 14px 0 0; color: var(--ink-2); font-size: 15px; line-height: 1.7; min-height: 5.1em; }
.panel.swap .panel__tag, .panel.swap .panel__name, .panel.swap .panel__desc { animation: swap 0.8s var(--ease) both; }
.panel.swap .panel__name { animation-delay: 0.04s; }
.panel.swap .panel__desc { animation-delay: 0.08s; }
@keyframes swap { from { opacity: 0; transform: translateY(10px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
.ticks { margin-top: 22px; display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; }
.tick { height: 22px; position: relative; }
.tick::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 2px; border-radius: 2px; background: var(--line-2); transition: background 0.4s, box-shadow 0.4s; }
.tick:hover::before { background: rgba(169, 193, 255, 0.45); }
.tick.on::before { background: var(--iri); box-shadow: 0 0 12px rgba(127, 227, 255, 0.6); }
.eco__hint { margin: 0; display: inline-flex; align-items: center; gap: 12px; font: 400 10.5px/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.eco__hint i { width: 1px; height: 28px; background: var(--line-2); position: relative; overflow: hidden; }
.eco__hint i::after { content: ''; position: absolute; left: 0; right: 0; height: 40%; background: var(--cyan); animation: drop 1.8s var(--ease-io) infinite; }

.sats { position: fixed; inset: 0; z-index: 4; pointer-events: none; }
.sat { position: absolute; left: 0; top: 0; opacity: 0; will-change: transform, opacity; pointer-events: none; }
.sat__in {
  position: absolute; left: 0; top: 0; transform: translate(14px, -50%);
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 8px; border-radius: 999px; white-space: nowrap;
  background: rgba(6, 10, 30, 0.55); border: 1px solid var(--line); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font: 400 12px/1 var(--sans); color: var(--ink-2); transition: border-color 0.4s, color 0.4s, background 0.4s, box-shadow 0.4s;
}
.sat.flip .sat__in { transform: translate(calc(-100% - 14px), -50%); }
.sat__n { font: 500 9.5px/1 var(--mono); letter-spacing: 0.08em; color: var(--muted); padding: 4px 5px; border-radius: 999px; background: rgba(169, 193, 255, 0.08); }
.sat--live .sat__n { color: var(--cyan); }
.sat:hover .sat__in { border-color: var(--line-2); color: var(--ink); }
.sat.is-focus .sat__in { color: var(--ink); border-color: rgba(127, 227, 255, 0.45); background: rgba(10, 22, 60, 0.75); box-shadow: 0 0 30px -6px rgba(45, 106, 255, 0.8); }
/* ---------- Ecosystem holograms (holo.js): a scene of each domain at work, projected from its satellite ---------- */
.holo { position: absolute; z-index: 2; right: calc(var(--pad) + 36px); top: 50%; translate: 0 -58%; width: min(440px, 31vw); pointer-events: none; opacity: 0; transition: opacity 0.8s var(--ease); perspective: 1400px; }
.holo.is-on { opacity: 1; }
.holo__zoom { position: relative; }
.holo__frame {
  position: relative; overflow: hidden; padding: 12px 14px 10px; border-radius: 14px; border: 1px solid rgba(127, 227, 255, 0.34);
  background: radial-gradient(120% 90% at 50% 110%, rgba(45, 106, 255, 0.28), transparent 70%), linear-gradient(180deg, rgba(10, 32, 80, 0.62), rgba(4, 9, 32, 0.56));
  box-shadow: 0 0 46px -10px rgba(127, 227, 255, 0.5), inset 0 0 34px rgba(127, 227, 255, 0.1);
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
  transform: rotateY(-14deg) rotateX(5deg); animation: holo-flicker 7s steps(1) infinite;
}
.holo__frame::before { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: repeating-linear-gradient(180deg, rgba(127, 227, 255, 0.06) 0 1px, transparent 1px 3px); }
.holo__frame::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 34%; z-index: 2; pointer-events: none; background: linear-gradient(180deg, transparent, rgba(127, 227, 255, 0.12), transparent); animation: holo-sweep 4.8s linear infinite; }
.holo__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 6px; font: 500 9.5px/1.3 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--cyan); text-shadow: 0.6px 0 rgba(255, 80, 120, 0.45), -0.6px 0 rgba(80, 200, 255, 0.6); }
.holo__id { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.holo__st { display: inline-flex; align-items: center; gap: 6px; flex: none; white-space: nowrap; color: #3ff0b4; }
.holo__st::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #3ff0b4; box-shadow: 0 0 8px #3ff0b4; }
.holo__st.is-dev { color: var(--violet); }
.holo__st.is-dev::before { background: transparent; border: 1px solid var(--violet); box-shadow: none; }
.holo__scene > svg { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 0 5px rgba(127, 227, 255, 0.55)); }
/* Satellite labels behind the hologram fade, so it reads as solid; the focused one stays lit. */
.sat.is-occluded { opacity: 0.08 !important; pointer-events: none !important; }
.holo__note { margin: 4px 0 0; text-align: right; font: 400 8.5px/1.3 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: rgba(127, 227, 255, 0.5); }
.holo__pad { position: absolute; left: 12%; right: 12%; bottom: -24px; height: 24px; border-radius: 50%; background: radial-gradient(closest-side, rgba(127, 227, 255, 0.5), rgba(45, 106, 255, 0.14) 60%, transparent); filter: blur(2px); }
.holo__beam { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; overflow: visible; pointer-events: none; transition: opacity 0.6s; }
.holo__ray { stroke: rgba(190, 240, 255, 0.75); stroke-width: 1; stroke-dasharray: 2 6; animation: holo-flow 0.9s linear infinite; }

.holo svg .hl { fill: none; stroke: #7fe3ff; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.holo svg .hl2 { fill: none; stroke: rgba(127, 227, 255, 0.36); stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; }
.holo svg .hf { fill: rgba(127, 227, 255, 0.07); }
.holo svg .hd { fill: #e6fbff; }
.holo svg .hd--v { fill: #c6bdff; }
.holo svg .hb { fill: rgba(127, 227, 255, 0.42); }
.holo svg .hq { fill: rgba(127, 227, 255, 0.85); }
.holo svg .ht { font: 500 8.5px var(--mono); letter-spacing: 0.12em; fill: rgba(190, 236, 255, 0.85); text-transform: uppercase; }
.holo svg .ht--c { fill: #fff; font-size: 8px; }
.holo svg .h-flow { fill: none; stroke: rgba(127, 227, 255, 0.5); stroke-width: 1.1; stroke-dasharray: 3 6; animation: holo-flow 1.1s linear infinite; }
.holo svg .h-route { fill: none; stroke: rgba(127, 227, 255, 0.4); stroke-width: 1.2; stroke-dasharray: 5 6; animation: holo-flow 2.2s linear infinite; }
.holo svg .h-lane { fill: none; stroke: #bff4ff; stroke-width: 1.8; stroke-linecap: round; stroke-dasharray: 10 230; animation: holo-lane 1.8s linear infinite; }
.holo svg .h-pulse, .holo svg .h-bar, .holo svg .h-spin, .holo svg .h-ab, .holo svg .h-fill, .holo svg .h-type, .holo svg .h-eta, .holo svg .h-needle, .holo svg .h-bub { transform-box: fill-box; }
.holo svg .h-pulse { transform-origin: center; animation: holo-pulse 2.4s ease-out infinite; }
.holo svg .h-blink { animation: holo-blink 1.6s ease-in-out infinite; }
.holo svg .h-bar { transform-origin: 50% 100%; animation: holo-bar 2.8s ease-in-out infinite; }
.holo svg .h-spin { transform-origin: center; animation: holo-spin 9s linear infinite; }
.holo svg .h-spin--slow { animation-duration: 14s; }
.holo svg .h-draw { stroke-dasharray: 1 1; animation: holo-draw 3.6s var(--ease) infinite; }
.holo svg .h-scan { fill: none; stroke: #bff4ff; stroke-width: 1.6; animation: holo-scan 2.2s ease-in-out infinite alternate; }
.holo svg .h-tap { animation: holo-tap 2.6s var(--ease) infinite; }
.holo svg .h-feed { animation: holo-feed 9s linear infinite; }
.holo svg .h-type { transform-origin: 0 50%; animation: holo-type 3s steps(12) infinite; }
.holo svg .h-eta { fill: none; stroke: #7fe3ff; stroke-width: 2; transform-origin: 0 50%; animation: holo-eta 5s linear infinite; }
.holo svg .h-ad { opacity: 0; animation: holo-ad 6s linear infinite; }
.holo svg .h-cone { fill: rgba(127, 227, 255, 0.08); animation: holo-blink 2.7s ease-in-out infinite; }
.holo svg .h-gauge { fill: none; stroke: #7fe3ff; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1 1; animation: holo-gauge 4s var(--ease) infinite; }
.holo svg .h-needle { transform-origin: 50% 90.6%; animation: holo-needle 4s var(--ease) infinite; }
.holo svg .h-check { fill: none; stroke: #7fe3ff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 17; animation: holo-check 2.7s ease infinite; }
.holo svg .h-fill { fill: rgba(127, 227, 255, 0.5); transform-origin: 0 50%; animation: holo-fill 3.2s ease-in-out infinite; }
.holo svg .h-bub { animation: holo-up 2.4s linear infinite; }
.holo svg .h-ab { transform-origin: 50% 100%; animation: holo-ab 3s ease-in-out infinite alternate; }
.holo svg .h-ab--b { animation-direction: alternate-reverse; }
@keyframes holo-flicker { 0%, 41%, 43%, 76%, 78%, 100% { opacity: 1; } 42% { opacity: 0.78; } 77% { opacity: 0.9; } }
@keyframes holo-sweep { from { transform: translateY(-110%); } to { transform: translateY(320%); } }
@keyframes holo-flow { to { stroke-dashoffset: -18; } }
@keyframes holo-lane { to { stroke-dashoffset: -240; } }
@keyframes holo-pulse { 0% { opacity: 0.85; transform: scale(0.7); } 100% { opacity: 0; transform: scale(1.9); } }
@keyframes holo-blink { 50% { opacity: 0.25; } }
@keyframes holo-bar { 0%, 100% { transform: scaleY(0.4); } 50% { transform: scaleY(1); } }
@keyframes holo-spin { to { transform: rotate(360deg); } }
@keyframes holo-draw { 0% { stroke-dashoffset: 1; opacity: 1; } 55%, 85% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes holo-scan { from { transform: translateY(0); } to { transform: translateY(48px); } }
@keyframes holo-tap { 0%, 100% { transform: translateY(0); } 45%, 60% { transform: translateY(14px); } }
@keyframes holo-feed { from { transform: translate(4px, 0); } to { transform: translate(4px, -156px); } }
@keyframes holo-type { 0% { transform: scaleX(0); } 60%, 100% { transform: scaleX(1); } }
@keyframes holo-eta { 0% { transform: scaleX(0); } 90%, 100% { transform: scaleX(1); } }
@keyframes holo-ad { 0% { opacity: 0; } 4%, 30% { opacity: 1; } 34%, 100% { opacity: 0; } }
@keyframes holo-gauge { 0% { stroke-dashoffset: 1; } 60%, 100% { stroke-dashoffset: 0.22; } }
@keyframes holo-needle { 0% { transform: rotate(-88deg); } 60%, 100% { transform: rotate(52deg); } }
@keyframes holo-check { 0%, 10% { stroke-dashoffset: 17; } 40%, 100% { stroke-dashoffset: 0; } }
@keyframes holo-fill { 0% { transform: scaleX(0); } 30%, 100% { transform: scaleX(1); } }
@keyframes holo-up { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(-50px); opacity: 0; } }
@keyframes holo-ab { from { transform: scaleY(0.45); } to { transform: scaleY(0.95); } }
@media (max-width: 1100px) { .holo { width: min(380px, 40vw); right: var(--pad); } }
@media (max-width: 900px) {
  /* Narrow screens: the hologram floats over the planet between the heading and the panel; no cone. */
  .holo__beam { display: none; }
  .holo { left: var(--pad); right: var(--pad); width: auto; max-width: 440px; margin: 0 auto; top: 47%; translate: 0 -50%; }
  .holo__frame { transform: none; }
}
@media (max-width: 900px) and (max-height: 760px) { .holo { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .holo__frame, .holo__frame::after, .holo__ray, .holo svg * { animation: none !important; }
  .holo svg .h-ad:first-of-type, .holo svg .h-draw { opacity: 1; stroke-dashoffset: 0; }
}

/* ---------- Process ---------- */
.process { padding: clamp(120px, 20vh, 220px) 0; }
.process__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(30px, 5vw, 80px); }
.process__head { grid-column: 2; max-width: 760px; }
.process__head .lede { margin-top: 28px; }
.steps { grid-column: 2; list-style: none; margin: 60px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; position: relative; }
.steps::before {
  content: ''; position: absolute; left: 28px; right: 28px; top: 44px; height: 1px; z-index: 1;
  background: linear-gradient(90deg, var(--cyan), var(--bright), var(--violet)); opacity: 0.5;
}
.step { position: relative; padding: 30px 26px 30px; border-radius: 22px; min-height: 280px; display: flex; flex-direction: column; gap: 60px; overflow: hidden; }
.step__n { position: relative; z-index: 2; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font: 500 10px/1 var(--mono); color: var(--bg); background: var(--ice); box-shadow: 0 0 0 6px rgba(169, 193, 255, 0.08), 0 0 24px rgba(127, 227, 255, 0.5); }
.step h3 { margin: 0 0 12px; font: 200 clamp(28px, 2.3vw, 36px)/1.1 var(--sans); white-space: nowrap; letter-spacing: -0.035em; }
.step p { margin: 0; color: var(--ink-2); font-size: 15px; line-height: 1.7; }
.step::after { content: ''; position: absolute; right: -40px; bottom: -40px; width: 160px; height: 160px; border-radius: 50%; background: radial-gradient(circle, rgba(45, 106, 255, 0.2), transparent 70%); pointer-events: none; }

/* ---------- Why ---------- */
.why { padding: clamp(110px, 18vh, 200px) 0; }
.why__head { text-align: center; display: grid; justify-items: center; margin-bottom: clamp(50px, 8vh, 90px); }
.why__head .h2 { max-width: 13em; }
.why__head .lede { margin-top: 24px; text-align: center; }

/* ---------- Home: one AI brain (agents.js) ---------- */
/* The canvas behind the stage draws the core (centred in .aix__core) and a stream to each role button; --streams: 0
   turns the streams off where the roles stack under the core. data-side on .aix is p or e for the active role. */
.aix {
  --streams: 1;
  position: relative; display: grid; align-items: center;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px) minmax(0, 1fr);
  grid-template-areas: "p core e" "con con con";
  gap: 6px clamp(40px, 7vw, 120px);
}
.aix__fx { position: absolute; inset: -220px 0 -60px; width: 100%; height: calc(100% + 280px); pointer-events: none; }
.aix__side { position: relative; z-index: 1; display: grid; gap: 12px; }
.aix__side--p { grid-area: p; justify-items: end; }
.aix__side--e { grid-area: e; justify-items: start; }
.aix__core { grid-area: core; position: relative; z-index: 1; aspect-ratio: 1; display: grid; align-items: end; justify-items: center; pointer-events: none; }
.aix__label { margin: 0; display: grid; justify-items: center; gap: 7px; font: 500 11px/1.2 var(--mono); letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); text-align: center; }
.aix__label b { font-weight: 500; color: #fff; }
.aix__k { margin: 0 0 4px; display: inline-flex; align-items: center; gap: 10px; font: 500 11px/1 var(--mono); letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); }
.aix__k i { width: 6px; height: 6px; border-radius: 50%; }
.aix__side--p .aix__k i { background: var(--violet); box-shadow: 0 0 10px var(--violet); }
.aix__side--e .aix__k i { background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }
.aix__role {
  --ac: var(--cyan);
  display: inline-flex; align-items: center; gap: 14px; padding: 7px 22px 7px 7px; border-radius: 99px; cursor: pointer;
  font: 400 15px/1.2 var(--sans); color: var(--ink-2); background: var(--glass); border: 1px solid var(--line);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  transition: color 0.4s, border-color 0.4s, box-shadow 0.6s var(--ease);
}
.aix__side--p .aix__role { --ac: var(--violet); flex-direction: row-reverse; padding: 7px 7px 7px 22px; }
.aix__ico { flex: none; width: 74px; height: 74px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(closest-side, rgba(255, 255, 255, 0.05), transparent); border: 1px solid var(--line); transition: color 0.4s, border-color 0.4s, background-color 0.4s; }
.aix__fig { width: 84%; height: 84%; display: block; }
.aix__ico svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.aix__role:hover { color: #fff; border-color: var(--line-2); }
.aix__role.is-on { color: #fff; border-color: color-mix(in srgb, var(--ac) 60%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--ac) 22%, transparent), 0 12px 44px -12px var(--ac); }
.aix__role.is-on .aix__ico { color: var(--ac); border-color: color-mix(in srgb, var(--ac) 55%, transparent); background: color-mix(in srgb, var(--ac) 12%, transparent); }
.aix__role:focus-visible { outline: 2px solid var(--ac); outline-offset: 3px; }

/* The agent console. */
.aix__con {
  --ac: var(--cyan);
  grid-area: con; position: relative; z-index: 1; justify-self: center; width: min(100%, 660px); min-height: 376px; margin-top: 8px;
  padding: 16px 24px 22px; border-radius: 22px; background: rgba(5, 8, 24, 0.74); border: 1px solid var(--line-2);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  font: 400 13.5px/1.6 var(--mono); color: var(--ink-2);
}
.aix[data-side="p"] .aix__con { --ac: var(--violet); }
.cs__bar { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; margin-bottom: 16px; border-bottom: 1px solid var(--line); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.cs__bar b { font-weight: 500; color: #fff; }
.cs__bar > * { white-space: nowrap; }
.cs__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ac); box-shadow: 0 0 10px var(--ac); animation: cs-blink 1.6s ease-in-out infinite; }
.cs__who::before { content: '·'; margin-right: 10px; color: var(--faint); }
.cs__sim { margin-left: auto; padding: 3px 9px; border: 1px solid var(--line-2); border-radius: 99px; font-size: 10px; }
.cs__goal { position: relative; margin: 0 0 14px; padding-left: 22px; min-height: 1.6em; font-size: 15.5px; color: #fff; }
.cs__p { position: absolute; left: 0; color: var(--ac); }
.cs__caret { display: inline-block; width: 8px; height: 1.05em; margin-left: 3px; vertical-align: -0.15em; background: var(--ac); animation: cs-blink 1s steps(1) infinite; }
.cs__plan { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cs__step { display: flex; align-items: center; gap: 12px; color: var(--faint); transition: color 0.4s; }
.cs__step.is-run, .cs__step.is-done { color: var(--ink-2); }
.cs__ic { position: relative; flex: none; width: 15px; height: 15px; border-radius: 50%; border: 1.5px solid currentColor; opacity: 0.6; }
.cs__step.is-run .cs__ic { opacity: 1; border-color: var(--ac); border-right-color: transparent; animation: cs-spin 0.7s linear infinite; }
.cs__step.is-done .cs__ic { opacity: 1; border-color: var(--ac); background: var(--ac); }
.cs__step.is-done .cs__ic::after { content: ''; position: absolute; left: 3.6px; top: 1.2px; width: 3.2px; height: 6.4px; border: solid var(--bg); border-width: 0 1.6px 1.6px 0; transform: rotate(45deg); }
.cs__step--human em { margin-left: auto; padding: 3px 9px; border-radius: 99px; border: 1px solid var(--line-2); font: inherit; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.cs__step--human.is-run em { color: #fff; border-color: var(--ac); animation: cs-blink 1s ease-in-out infinite; }
.cs__step--human.is-done em { color: var(--bg); background: var(--ac); border-color: transparent; }
.cs__out { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); opacity: 0; transform: translateY(8px); transition: opacity 0.6s, transform 0.8s var(--ease); }
.cs__out.is-on { opacity: 1; transform: none; }
.cs__out > span { font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ac); }
.cs__out p { margin: 6px 0 12px; font: 300 19px/1.45 var(--sans); letter-spacing: -0.01em; color: #fff; }
.cs__out ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.cs__out li { padding: 4px 11px; border-radius: 99px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line); font-size: 11px; color: var(--ink-2); }
@keyframes cs-spin { to { transform: rotate(360deg); } }
@keyframes cs-blink { 50% { opacity: 0.25; } }

/* Principles, a quiet spec row under the stage. */
.tenets { margin-top: clamp(64px, 10vh, 110px); }
.tenets__k { margin: 0 0 18px; text-align: center; font: 500 11px/1 var(--mono); letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); }
.tenets ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); }
.tenets li { padding: 24px 26px 0; border-left: 1px solid var(--line); }
.tenets li:first-child { padding-left: 0; border-left: 0; }
.tenets li > span { font: 500 10.5px/1 var(--mono); letter-spacing: 0.16em; color: var(--cyan); }
.tenets h3 { margin: 12px 0 8px; font: 400 17px/1.35 var(--sans); letter-spacing: -0.01em; color: #fff; }
.tenets p { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.65; }
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.card { position: relative; padding: 28px 26px 30px; border-radius: 24px; min-height: 360px; display: flex; flex-direction: column; overflow: hidden; isolation: isolate; transition: border-color 0.5s, transform 0.8s var(--ease); }
.card::before {
  content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity 0.5s;
  background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 0%), rgba(45, 106, 255, 0.22), transparent 60%);
}
.card:hover { border-color: var(--line-2); transform: translateY(-4px); }
.card:hover::before { opacity: 1; }
.card__ico { width: 44px; height: 44px; fill: none; stroke: var(--ice); stroke-width: 1; filter: drop-shadow(0 0 10px rgba(127, 160, 255, 0.4)); }
.card__n { margin-top: 64px; font: 400 10.5px/1 var(--mono); letter-spacing: 0.16em; color: var(--cyan); }
.card h3 { margin: 14px 0 12px; font: 300 22px/1.3 var(--sans); letter-spacing: -0.02em; }
.card p { margin: 0; color: var(--ink-2); font-size: 14.5px; line-height: 1.7; }

/* ---------- Achievements ---------- */
.ach { padding: clamp(110px, 18vh, 200px) 0 clamp(80px, 12vh, 140px); }
.ach__head { max-width: 820px; }
.meter { margin-top: 60px; display: flex; align-items: center; gap: 28px; max-width: 640px; }
.meter__num { font: 200 clamp(70px, 8vw, 128px)/0.9 var(--sans); letter-spacing: -0.06em; }
.meter__num small { font-size: 0.4em; color: var(--muted); letter-spacing: -0.02em; }
.meter__body { flex: 1; }
.meter__body p { margin: 0 0 14px; font: 400 11px/1.5 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2); }
.meter__bar { height: 2px; background: var(--line-2); border-radius: 2px; overflow: hidden; }
.meter__bar i { display: block; height: 100%; width: 100%; background: var(--iri); transform-origin: 0 50%; transform: scaleX(0); transition: transform 2s var(--ease) 0.4s; box-shadow: 0 0 12px var(--cyan); }
.meter.in .meter__bar i { transform: scaleX(1); }
.lists { margin-top: 40px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; max-width: 860px; }
.list { padding: 26px 28px 14px; border-radius: 24px; }
.list__k { margin: 0 0 12px; display: flex; align-items: center; gap: 12px; font: 400 10.5px/1 var(--mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-2); }
.list ul { list-style: none; margin: 0; padding: 0; }
.list li { border-top: 1px solid var(--line); }
.list__a { display: grid; grid-template-columns: 34px 1fr; align-items: baseline; padding: 15px 0; }
.list__a span { font: 400 10.5px/1 var(--mono); color: var(--muted); }
.list__a b { font-weight: 300; font-size: 16px; transition: color 0.3s; }
.list__a:hover b { color: var(--cyan); }
.list__a em { grid-column: 2; font: italic 400 16px/1.2 var(--serif); color: var(--ice); margin-top: 4px; }
.values { margin-top: clamp(90px, 14vh, 160px); }
/* Values: three glass monoliths. A light runs round each edge, a glyph draws itself in, a huge numeral sits behind, and
   the site's spotlight and tilt follow the pointer. The tilt lives on the inner card so it never fights the reveal. */
@property --vang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.values__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.value__card {
  position: relative; isolation: isolate; overflow: hidden; height: 100%; min-height: 440px; display: flex; flex-direction: column;
  padding: 36px 34px 38px; border-radius: 28px;
  transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 0.7s var(--ease), box-shadow 0.7s var(--ease), border-color 0.7s;
}
.value__card:hover { border-color: transparent; box-shadow: inset 0 1px 0 var(--glass-hi), 0 50px 120px -50px rgba(45, 106, 255, 0.8); }
.value__card::before {
  content: ''; position: absolute; inset: 0; z-index: -1; padding: 1px; border-radius: inherit; pointer-events: none;
  background: conic-gradient(from var(--vang), transparent 0deg, rgba(127, 227, 255, 0.95) 40deg, rgba(154, 140, 255, 0.8) 80deg, transparent 130deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0.55; animation: val-orbit 8s linear infinite; transition: opacity 0.6s;
}
.value:nth-child(2) .value__card::before { animation-delay: -2.7s; }
.value:nth-child(3) .value__card::before { animation-delay: -5.4s; }
.value__card:hover::before { opacity: 1; }
@keyframes val-orbit { to { --vang: 360deg; } }
.value__card::after {
  content: ''; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background: radial-gradient(460px circle at var(--mx, 50%) var(--my, 0%), rgba(45, 106, 255, 0.24), transparent 62%), radial-gradient(120% 70% at 50% 0%, rgba(127, 227, 255, 0.07), transparent 70%);
}
.value__no {
  position: absolute; top: 6px; right: 20px; z-index: -1; pointer-events: none;
  font: 200 clamp(120px, 11vw, 190px)/1 var(--sans); letter-spacing: -0.07em; color: transparent; -webkit-text-stroke: 1px rgba(150, 170, 255, 0.16);
  transform: translate3d(calc(var(--px, 0) * -14px), calc(var(--py, 0) * -10px), 0); transition: transform 0.6s var(--ease), -webkit-text-stroke-color 0.6s;
}
.value__card:hover .value__no { -webkit-text-stroke-color: rgba(127, 227, 255, 0.45); }
.value__glyph {
  width: 148px; height: 148px; margin: -6px 0 0 -8px; overflow: visible; filter: drop-shadow(0 0 12px rgba(127, 227, 255, 0.6));
  transform: translate3d(calc(var(--px, 0) * 8px), calc(var(--py, 0) * 6px), 0); transition: transform 0.6s var(--ease);
}
.value__glyph * { fill: none; stroke: var(--cyan); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.value__glyph [pathLength] { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
/* Keyframes, not transitions: a transition delay built from calc() and variables never fired in Chrome here. */
.value.in .value__glyph [pathLength] { animation: val-draw 1.8s var(--ease) 0.35s both; }
.value.in .value__glyph .gd2 { animation-delay: 0.55s; }
.value.in .value__glyph .gd3 { animation-delay: 0.75s; }
.value.in .value__glyph .g-line, .value.in .value__glyph .g-rise { animation-delay: 1.3s; }
@keyframes val-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.value__glyph .g-core, .value__glyph .g-dot { fill: var(--cyan); stroke: none; }
.value__glyph .g-pulse { opacity: 0; transform-box: fill-box; transform-origin: center; }
.value.in .value__glyph .g-pulse { animation: val-ripple 3.2s var(--ease) 1.8s infinite; }
@keyframes val-ripple { 0% { opacity: 0.9; transform: scale(1); } 100% { opacity: 0; transform: scale(3.6); } }
.value__glyph .g-tangle { stroke: var(--violet); }
.value.in .value__glyph .g-tangle { animation: val-tangle 3.6s var(--ease) 0.3s both; }
@keyframes val-tangle { 0% { stroke-dashoffset: 1; opacity: 0.9; } 45% { stroke-dashoffset: 0; opacity: 0.9; } 100% { stroke-dashoffset: 0; opacity: 0.16; } }
.value__glyph .g-line, .value__glyph .g-rise { stroke-width: 2.4; }
.value__glyph .g-dot { opacity: 0; }
.value.in .value__glyph .g-dot { animation: val-fade 0.6s ease 2.4s both; }
@keyframes val-fade { from { opacity: 0; } to { opacity: 1; } }
.value__glyph .g-bar { fill: rgba(127, 227, 255, 0.12); transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(0); }
.value.in .value__glyph .g-bar { animation: val-grow 1.2s var(--ease) 0.4s both; }
.value.in .value__glyph .g-bar:nth-of-type(2) { animation-delay: 0.6s; }
.value.in .value__glyph .g-bar:nth-of-type(3) { animation-delay: 0.8s; }
@keyframes val-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.value h3 { margin: auto 0 14px; padding: 40px 0 0.08em; font: italic 400 clamp(46px, 4.6vw, 76px)/1 var(--serif); letter-spacing: -0.01em; background: var(--iri); -webkit-background-clip: text; background-clip: text; color: transparent; }
.value p { margin: 0; color: var(--ink-2); max-width: 30ch; font-size: 15.5px; line-height: 1.7; }
@media (prefers-reduced-motion: reduce) {
  .value__card::before, .value.in .value__glyph .g-pulse { animation: none; }
  .value.in .value__glyph [pathLength], .value.in .value__glyph .g-bar, .value.in .value__glyph .g-dot { animation-duration: 0.01s; animation-delay: 0s; }
}

/* ---------- Careers ---------- */
.careers { min-height: 100svh; display: flex; align-items: flex-start; padding: clamp(110px, 18vh, 200px) 0 clamp(80px, 10vh, 120px); }
.careers__inner { display: flex; flex-direction: column; align-items: center; text-align: center; }
.eyebrow--c::before { content: ''; width: 48px; height: 1px; background: linear-gradient(270deg, var(--line-2), transparent); order: 0; }
.careers .display { text-shadow: 0 0 80px rgba(2, 3, 10, 0.9); }
.careers__sub { margin: 26px 0 0; max-width: 46ch; color: var(--ink-2); font-size: clamp(15px, 1.2vw, 18px); line-height: 1.7; }
.signal { margin-top: clamp(80px, 22vh, 260px); width: min(860px, 100%); padding: 26px; border-radius: 28px; display: grid; grid-template-columns: 1fr 1.15fr; gap: 26px; align-items: center; text-align: left; }
.signal__t { margin: 0 0 6px; font: italic 400 28px/1.1 var(--serif); color: var(--ink); }
.signal__d { margin: 0; color: var(--ink-2); font-size: 14px; line-height: 1.65; }
.signal__field { display: flex; gap: 8px; padding: 6px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(2, 3, 10, 0.5); }
.signal__field input { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; padding: 0 16px; font-size: 15px; color: var(--ink); }
.signal__field input::placeholder { color: var(--faint); }
.signal__field:focus-within { border-color: rgba(127, 227, 255, 0.45); box-shadow: 0 0 0 4px rgba(127, 227, 255, 0.07); }
.signal__field .btn { height: 46px; padding: 0 20px; }
.signal__note { grid-column: 1 / -1; margin: 0; font: 400 10.5px/1.5 var(--mono); letter-spacing: 0.1em; color: var(--muted); }
.signal__note.is-ok { color: var(--cyan); }
.signal__note.is-bad { color: #ff9fb2; }
.signal[hidden] { display: none; }

/* ---------- Footer ---------- */
.foot { padding: 80px 0 28px; border-top: 1px solid var(--line); background: linear-gradient(180deg, rgba(2, 3, 10, 0.6), rgba(2, 3, 10, 0.95) 40%); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); overflow: hidden; }
.foot__grid { display: grid; grid-template-columns: 1.4fr 1.3fr 1fr 0.9fr; gap: 40px; }
.foot__grid p { margin: 0 0 8px; color: var(--ink-2); font-size: 14.5px; line-height: 1.7; }
.foot__k { font: 400 10.5px/1 var(--mono) !important; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted) !important; margin-bottom: 18px !important; }
.foot__tag { margin-top: 22px !important; font: italic 400 20px/1.4 var(--serif) !important; color: var(--ice) !important; }
.foot__grid .foot__legal { margin-top: 22px; max-width: 42ch; font-size: 12.5px; line-height: 1.65; color: var(--muted); }
.foot__links { display: grid; gap: 6px; }
.foot__links a, .u { color: var(--ink-2); background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size 0.5s var(--ease), color 0.3s; }
.foot__links a:hover, .u:hover { color: var(--ink); background-size: 100% 1px; }
.foot__word {
  margin: 70px 0 10px; font: 200 clamp(80px, 17.5vw, 290px)/0.8 var(--sans); letter-spacing: -0.06em; text-align: center; white-space: nowrap;
  background: linear-gradient(180deg, rgba(238, 241, 255, 0.5), rgba(45, 106, 255, 0.12) 70%, transparent);
  -webkit-background-clip: text; background-clip: text; color: transparent; user-select: none;
}
.foot__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; padding-top: 22px; border-top: 1px solid var(--line); font: 400 10.5px/1.4 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.clock { display: inline-flex; align-items: center; gap: 8px; }
.clock i { width: 5px; height: 5px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
.clock b { color: var(--ink); font-weight: 400; font-variant-numeric: tabular-nums; }
.totop:hover { color: var(--ink); }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .nav__links { display: none; }
  .burger { display: inline-block; }
  .rail { display: none; }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .card { min-height: 300px; }
  .foot__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .clients { grid-template-columns: 1fr; }
  .clients__logos, .clients__note { grid-column: 1; }
  .about__grid { grid-template-columns: 1fr; }
  .process__grid { grid-template-columns: 1fr; }
  .process__head, .steps { grid-column: 1; }
  .steps { grid-template-columns: 1fr; }
  .steps::before { left: 41px; right: auto; top: 44px; bottom: 44px; width: 1px; height: auto; background: linear-gradient(180deg, var(--cyan), var(--bright), var(--violet)); }
  .step { min-height: 0; flex-direction: row; gap: 22px; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stats > div:nth-child(3) { border-left: 0; padding-left: 0; }
  .stats > div:nth-child(n + 3) { margin-top: 10px; border-top: 1px solid var(--line); }
  .lists { grid-template-columns: 1fr; }
  .values__row { grid-template-columns: 1fr; gap: 14px; }
  .value__card { min-height: 0; padding: 28px 26px 30px; }
  .value h3 { padding-top: 26px; }
  .value__no { font-size: 120px; }
  .value__glyph { width: 104px; height: 104px; }
  .journey .jline { padding-left: 40px; gap: 26px; }
  .journey .jline::before { left: 9px; top: 0; bottom: 0; width: 2px; height: auto; background: linear-gradient(180deg, rgba(150, 170, 255, 0.05), rgba(150, 170, 255, 0.28) 10%, rgba(150, 170, 255, 0.28) 90%, rgba(150, 170, 255, 0.05)); }
  .journey .jline__fill { left: 9px; top: 0; width: 2px; height: calc(100% * var(--p, 0)); }
  .journey .jline__comet { left: 10px; top: calc(100% * var(--p, 0)); width: 2px; height: 140px; transform: translate(-50%, -100%); background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.95)); }
  .journey .jline__comet::after { right: auto; left: 50%; top: auto; bottom: -7px; margin: 0 0 0 -7px; }
  .journey .jnode { padding: 0; }
  .journey .jnode::before, .journey .jnode::after { left: -40px; top: 6px; }
  .journey .jnode__k { font-size: 34px; }
  .journey .jnode__card { margin-top: 14px; }
  .signal { grid-template-columns: 1fr; }
  .eco__head .h2 { font-size: clamp(32px, 8.4vw, 52px); }
  .eco__sub, .legend { display: none; }
  .eco__hint { display: none; }
  .eco__stick { padding-top: calc(var(--nav-h) + 16px); padding-bottom: 18px; }
  .panel { padding: 20px 20px 16px; border-radius: 20px; }
  .panel__desc { min-height: 0; font-size: 14px; }
  .panel__top { margin-bottom: 14px; }
  .sat__in { padding: 4px; }
  .sat__t { display: none; }
  .sat.is-focus .sat__t { display: inline; padding-right: 6px; }
}
@media (max-width: 640px) {
  .chain { display: none; }
  .badge { font-size: 9.5px; letter-spacing: 0.12em; padding: 9px 14px 9px 12px; text-align: left; }
  :root { --nav-h: 64px; }
  .nav { top: 10px; height: 54px; padding: 0 6px 0 16px; }
  .nav .btn--primary { display: none; }
  .brand__word small { display: none; }
  .hud--br { display: none; }
  .hud { bottom: 20px; }
  .hero__cta .btn { width: 100%; }
  .hero__cta { width: 100%; max-width: 360px; }
  .chain { font-size: 9.5px; letter-spacing: 0.18em; gap: 8px; }
  .chain i { width: 22px; }
  .cards { grid-template-columns: 1fr; }
  .card { min-height: 0; }
  .card__n { margin-top: 30px; }
  .foot__grid { grid-template-columns: 1fr; gap: 28px; }
  .vision { grid-template-columns: 1fr; gap: 10px; }
  .meter { gap: 18px; }
  .signal__field { flex-direction: column; border-radius: 22px; }
  .signal__field input { height: 46px; }
  .panel__name { font-size: 22px; }
}

/* =====================================================================
   Multi-page additions
   ===================================================================== */

/* ---------- Page flow ---------- */
main { transition: opacity 0.42s var(--ease-io), transform 0.6s var(--ease-io); }
.is-leaving main { opacity: 0; transform: translateY(-14px); }
.warp { position: fixed; inset: 0; z-index: 46; pointer-events: none; overflow: hidden; }
.warp i {
  position: absolute; left: 0; right: 0; top: 0; height: 2px; opacity: 0;
  background: linear-gradient(90deg, transparent, var(--cyan) 30%, #fff 50%, var(--violet) 70%, transparent);
  box-shadow: 0 0 30px 6px rgba(127, 227, 255, 0.45);
}
.warp.go i { animation: warp 0.95s var(--ease-io); }
@keyframes warp { 0% { opacity: 0; transform: translateY(-4px); } 12% { opacity: 1; } 100% { opacity: 0; transform: translateY(100vh); } }
.boot.quick .boot__log, .boot.quick .boot__bar, .boot.quick .boot__pct, .boot.quick .boot__name { display: none; }
.menu__foot { color: var(--muted); }

/* ---------- Text link ---------- */
.link {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 34px; padding-bottom: 7px;
  font: 400 14.5px/1 var(--sans); letter-spacing: 0.01em; color: var(--ink);
  background: linear-gradient(90deg, var(--cyan), var(--bright), var(--violet)) 0 100% / 100% 1px no-repeat;
  transition: gap 0.5s var(--ease);
}
.link .ico { width: 15px; height: 15px; transition: transform 0.5s var(--ease); }
.link:hover { gap: 14px; }
.link:hover .ico { transform: translateX(3px); }
.linkrow { display: flex; flex-wrap: wrap; gap: 0 36px; }

/* ---------- Page hero ---------- */
.phero { position: relative; min-height: 100svh; min-height: max(100svh, 620px); display: flex; align-items: center; padding: calc(var(--nav-h) + 40px) 0 90px; }
.phero > .wrap { width: 100%; }
.phero__body { max-width: 780px; }
.phero--r .phero__body { margin-left: auto; max-width: 700px; }
.display--pg { font-size: clamp(44px, 6.2vw, 108px); line-height: 1.04; }
.phero__sub { margin: 30px 0 0; max-width: 48ch; color: var(--ink-2); font-size: clamp(16px, 1.25vw, 19px); line-height: 1.75; }
.hero__cta--l { justify-content: flex-start; }

/* ---------- Home: ecosystem preview ---------- */
.orbitp { min-height: 100svh; display: flex; align-items: center; padding: calc(var(--nav-h) + 40px) 0 80px; }
.orbitp > .wrap { width: 100%; }
.orbitp__body { max-width: 470px; }
.orbitp .lede { margin-top: 26px; }
.process__link { grid-column: 2; justify-self: start; }

/* ---------- Home: leadership teaser ---------- */
.leadp { padding: clamp(110px, 18vh, 200px) 0 clamp(90px, 14vh, 160px); }
.leadp__grid { margin-top: 56px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; max-width: 1040px; }
.leadc, .lstrip { position: relative; overflow: hidden; isolation: isolate; transition: border-color 0.5s, transform 0.8s var(--ease); }
.leadc::before, .lstrip::before {
  content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity 0.5s;
  background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 0%), rgba(45, 106, 255, 0.22), transparent 60%);
}
.leadc:hover, .lstrip:hover { border-color: var(--line-2); transform: translateY(-3px); }
.leadc:hover::before, .lstrip:hover::before { opacity: 1; }
.leadc { display: grid; grid-template-columns: 128px minmax(0, 1fr) auto; gap: 24px; align-items: center; padding: 14px 26px 14px 14px; border-radius: 26px; }
.leadc__ph, .lstrip__ph { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: 18px; overflow: hidden; isolation: isolate; background: var(--studio); }
.leadc__ph img, .lstrip__ph img {
  position: absolute; left: 50%; top: var(--t-top, auto); bottom: var(--t-bot, 0); width: var(--t-w, 100%); max-width: none; height: auto;
  transform: translateX(-50%); transform-origin: 50% 25%; transition: transform 1.2s var(--ease);
}
.leadc:hover .leadc__ph img, .lstrip:hover .lstrip__ph img { transform: translateX(-50%) scale(1.05); }
.leadc__logos { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 8px; }
.leadc__logos .lg { --lg-h: 15px; opacity: 0.6; }
.lstrip .leadc__logos .lg { --lg-h: 18px; }
.leadc:hover .leadc__logos .lg, .lstrip:hover .leadc__logos .lg { opacity: 0.92; }
.leadc__body, .lstrip__body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.leadc__role { font: 400 10.5px/1.4 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--cyan); }
.leadc__name { font: 200 clamp(26px, 2.4vw, 36px)/1.05 var(--sans); letter-spacing: -0.035em; }
.leadc__line { color: var(--ink-2); font-size: 14px; line-height: 1.6; }
.leadc__go { width: 18px; height: 18px; color: var(--ice); transition: transform 0.5s var(--ease); }
.leadc:hover .leadc__go { transform: translateX(4px); }

/* ---------- About: leaders ---------- */
.leaders { padding: clamp(110px, 18vh, 200px) 0 clamp(70px, 10vh, 120px); }
.leaders__head { margin-bottom: clamp(56px, 10vh, 110px); }
.leaders__lead { margin: 26px 0 0; max-width: 62ch; color: var(--ink-2); font-size: clamp(16px, 1.2vw, 18.5px); line-height: 1.75; }
.leader { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(44px, 7vh, 80px) clamp(32px, 6vw, 110px); align-items: center; margin-bottom: clamp(100px, 17vh, 190px); }
.leader__ph, .leader__body { grid-row: 1; }
.leader__ph { grid-column: 1; }
.leader__body { grid-column: 2; }
.leader--flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.leader--flip .leader__ph { grid-column: 2; }
.leader--flip .leader__body { grid-column: 1; }

/* Portrait: the person in full colour on a lit studio backdrop. Logo chips from their career orbit the portrait,
   passing behind it and coming round in front, like the satellites around the planet (positions set in features.js). */
.leaders { overflow-x: clip; }
.leader__ph {
  --orx: 62cqw; --ory: 11cqw;
  position: relative; margin: 0; aspect-ratio: 4 / 5; container-type: inline-size;
  transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 0.7s var(--ease);
}
.leader__frame {
  position: absolute; inset: 0; z-index: 1; border-radius: 30px; overflow: hidden; isolation: isolate;
  border: 1px solid var(--line-2);
  background: radial-gradient(135% 60% at 50% 122%, transparent 64%, rgba(169, 193, 255, 0.5) 64.4%, rgba(127, 227, 255, 0.1) 65%, transparent 68%), var(--studio);
  box-shadow: 0 50px 120px -50px rgba(45, 106, 255, 0.7);
}
.leader__frame::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1.5px) 0 0 / 16px 16px;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 65%); mask-image: linear-gradient(180deg, #000, transparent 65%);
}
.leader__frame::after {
  content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(180deg, transparent 80%, rgba(2, 3, 10, 0.35)), linear-gradient(125deg, rgba(255, 255, 255, 0.1), transparent 40%);
}
.leader__cut {
  position: absolute; left: 50%; bottom: -1px; z-index: 2; width: var(--cut-w, 80%); max-width: none; height: auto;
  transform: translate3d(calc(-50% + var(--px, 0) * 10px), calc(var(--py, 0) * 4px), 0); transition: transform 0.9s var(--ease);
  filter: drop-shadow(0 0 34px rgba(127, 227, 255, 0.25));
}
.leader__glare { position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 0; transition: opacity 0.5s; background: radial-gradient(420px circle at var(--gx, 50%) var(--gy, 30%), rgba(255, 255, 255, 0.12), transparent 60%); }
.leader__ph:hover .leader__glare { opacity: 1; }
.orbit__ring { position: absolute; left: calc(50% - var(--orx)); width: calc(var(--orx) * 2); top: calc(var(--oy) * 1.25cqw - var(--ory)); height: calc(var(--ory) * 2); overflow: visible; pointer-events: none; fill: none; transform: rotate(var(--otilt, 0deg)); }
.orbit__ring path { stroke: rgba(169, 193, 255, 0.85); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.orbit__ring--back { z-index: 0; opacity: 0.45; }
.orbit__ring--front { z-index: 2; opacity: 0.9; filter: drop-shadow(0 0 6px rgba(127, 227, 255, 0.7)); }
.orbit__items { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; pointer-events: none; }
.orbit__items li {
  position: absolute; left: 0; top: 0; display: grid; place-items: center; height: 40px; padding: 0 16px; border-radius: 999px;
  border: 1px solid rgba(169, 193, 255, 0.3); background: rgba(6, 10, 32, 0.62); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 12px 30px -12px rgba(0, 0, 0, 0.7); will-change: transform, opacity;
}
.orbit__items .lg { --lg-h: 15px; opacity: 1; }
.leader__role { margin: 0; font: 400 11px/1.4 var(--mono); letter-spacing: 0.2em; text-transform: uppercase; color: var(--cyan); }
.leader__name { margin: 16px 0 0; font: 200 clamp(54px, 7.4vw, 128px)/0.98 var(--sans); letter-spacing: -0.055em; }
.leader__line { margin: 22px 0 0; max-width: 30ch; font: italic 400 clamp(24px, 2.1vw, 34px)/1.25 var(--serif); color: var(--ice); text-wrap: balance; }
.leader__bio { margin: 22px 0 0; max-width: 58ch; color: var(--ink-2); font-size: clamp(15px, 1.1vw, 17px); line-height: 1.8; }
.leader__stats { margin: 34px 0 0; padding-top: 26px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 26px 56px; }
.leader__stats dt { font: 200 clamp(42px, 4.2vw, 68px)/1 var(--sans); letter-spacing: -0.045em; background: linear-gradient(180deg, #fff, #8ea7e8); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; }
.leader__stats .ai dt { background-image: var(--iri); background-size: 200% 100%; animation: sheen 7s linear infinite alternate; }
.leader__stats dd { margin: 12px 0 0; max-width: 20ch; font: 400 10.5px/1.5 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }

/* Track record under each portrait: one column per career chapter. */
.leader__cv { grid-column: 1 / -1; grid-row: 2; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.leader__cv > div { position: relative; padding: 24px 24px 4px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.leader__cv > div:first-child { padding-left: 0; border-left: 0; }
.leader__cv > div::before {
  content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 1px; transform: scaleX(0); transform-origin: left;
  background: linear-gradient(90deg, var(--cyan), var(--bright) 55%, transparent); box-shadow: 0 0 12px rgba(127, 227, 255, 0.45);
  transition: transform 1.4s var(--ease);
}
.leader__cv.in > div::before { transform: scaleX(1); }
.leader__cv > div:nth-child(2)::before { transition-delay: 0.15s; }
.leader__cv > div:nth-child(3)::before { transition-delay: 0.3s; }
.leader__cv > div:nth-child(4)::before { transition-delay: 0.45s; }
.leader__cv dt { font: 400 10.5px/1.4 var(--mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.leader__cv dd { margin: 0; }
.lgs { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; min-height: 40px; margin: 18px 0 14px; }
.leader__cv .lg { --lg-h: 22px; }
.lgs__t { font: italic 400 clamp(22px, 1.8vw, 28px)/1.1 var(--serif); color: var(--ink); }
.cv__d { display: block; max-width: 34ch; color: var(--ink-2); font-size: 13.5px; line-height: 1.65; }

/* Logos render as white silhouettes so a dozen brand palettes read as one set. */
.lg { display: block; width: auto; height: calc(var(--lg-h, 24px) * var(--k, 1)); object-fit: contain; filter: brightness(0) invert(1); opacity: 0.86; transition: opacity 0.4s var(--ease); }
/* Optical sizes: long wordmarks run smaller; compact marks and lockups with small type run larger. */
.lg--accenture { --k: 1.1; }
.lg--pwc { --k: 1.2; }
.lg--lse, .lg--masan { --k: 1.25; }
.lg--vng, .lg--geniebook { --k: 0.85; }
.lg--tiki { --k: 0.9; }
.lg--tasco { --k: 0.7; }
.lg--cake { --k: 1.5; }
.lg--be, .lg--ila { --k: 1.15; }
.lg--nab { --k: 1.3; }
.lg--espressif { --k: 1.1; }
.lg--unicloud { --k: 0.8; }
.lg--oppo { --k: 0.95; }
.lg--shinhan, .lg--york { --k: 0.9; }
.lg--techcombank { --k: 0.75; }
.lg--shopiness { --k: 1.6; }
.lg--vetc { --k: 1; }
/* Xanh SM's name sits under its wing mark, so it runs large to stay legible. */
.lg--xanhsm { --k: 1.35; }
.lg--lazada { --k: 1.1; }
/* Monash is a crest beside two stacked lines, so like Vingroup it runs large to stay legible. */
.lg--monash { --k: 1.8; }
/* Vingroup only comes as a stacked lockup, so it runs large to keep the name legible. */
.lg--vingroup { --k: 1.9; }
.leader__cv .lg:hover, .pedigree .lg:hover { opacity: 1; }
.leaders .pedigree { margin-top: 0; padding-top: 44px; border-top: 1px solid var(--line); flex-direction: column; align-items: flex-start; gap: 28px; }

/* Directors: four cards under the two leader features, same studio portraits at card size. */
.board { margin: 0 0 clamp(90px, 14vh, 150px); }
.board__head { max-width: 780px; margin-bottom: 40px; }
.board__k { margin: 0; font: 400 11px/1.4 var(--mono); letter-spacing: 0.2em; text-transform: uppercase; color: var(--cyan); }
.board__h { margin: 14px 0 0; font: 200 clamp(32px, 3.4vw, 54px)/1.06 var(--sans); letter-spacing: -0.04em; text-wrap: balance; }
.board__h em { display: inline-block; }
.board__p { margin: 18px 0 0; max-width: 60ch; color: var(--ink-2); font-size: clamp(15px, 1.1vw, 17px); line-height: 1.75; }
.board__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.board__group + .board__group { margin-top: 34px; }
.board__g { margin: 0 0 14px; font: 400 10.5px/1.4 var(--mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
/* Directors whose photo has not arrived yet: initials in the studio frame. */
.dir__ph--tbd { display: grid; place-items: center; }
.dir__init { position: relative; z-index: 1; font: italic 400 clamp(54px, 5vw, 84px)/1 var(--serif); color: rgba(236, 242, 255, 0.92); text-shadow: 0 0 40px rgba(127, 227, 255, 0.45); }
.dir { position: relative; display: flex; flex-direction: column; padding: 12px 12px 22px; border-radius: 26px; overflow: hidden; isolation: isolate; transition: border-color 0.5s, transform 0.8s var(--ease); }
.dir::before {
  content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity 0.5s;
  background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 0%), rgba(45, 106, 255, 0.22), transparent 60%);
}
.dir:hover { border-color: var(--line-2); transform: translateY(-3px); }
.dir:hover::before { opacity: 1; }
.dir__ph { position: relative; margin: 0; aspect-ratio: 4 / 5; border-radius: 18px; overflow: hidden; isolation: isolate; background: var(--studio); }
.dir__ph::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1.5px) 0 0 / 14px 14px;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 60%); mask-image: linear-gradient(180deg, #000, transparent 60%);
}
.dir__ph::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 78%, rgba(2, 3, 10, 0.35)), linear-gradient(125deg, rgba(255, 255, 255, 0.1), transparent 40%); }
/* --t-w scales a cutout, --t-top/--t-bot place it, --t-x shifts it sideways: set per photo in about.html so every
   director's eyes sit on one line, about 29% down the frame. */
.dir__ph img {
  position: absolute; left: calc(50% + var(--t-x, 0%)); top: var(--t-top, auto); bottom: var(--t-bot, -1px); width: var(--t-w, 100%); max-width: none; height: auto;
  transform: translateX(-50%); transform-origin: 50% 25%; transition: transform 1.2s var(--ease);
  filter: drop-shadow(0 0 26px rgba(127, 227, 255, 0.22));
}
.dir:hover .dir__ph img { transform: translateX(-50%) scale(1.04); }
.dir__top { padding: 22px 10px 0; }
.dir__role { margin: 0; font: 400 10.5px/1.45 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--cyan); }
.dir__name { margin: 10px 0 0; font: 200 clamp(26px, 2.1vw, 34px)/1.08 var(--sans); letter-spacing: -0.035em; }
.dir__name em { display: block; width: fit-content; }
.dir__line { margin: 10px 0 0; font: italic 400 clamp(17px, 1.3vw, 20px)/1.3 var(--serif); color: var(--ice); }
.dir__more { flex: 1; display: flex; flex-direction: column; padding: 0 10px; }
.dir__bio { margin: 14px 0 0; color: var(--ink-2); font-size: 13.5px; line-height: 1.65; }
.dir__stat { margin: auto 0 0; padding-top: 20px; display: flex; align-items: center; gap: 14px; }
.dir__stat b { flex: none; font: 200 36px/1 var(--sans); letter-spacing: -0.045em; background: linear-gradient(180deg, #fff, #8ea7e8); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* Vietnamese writes the unit out ("20 triệu", "250 triệu USD"): it sits small beside the figure. */
.dir__stat b small { margin-left: 0.2em; font-size: 0.42em; letter-spacing: 0; }
.dir__stat span { font: 400 10px/1.5 var(--mono); letter-spacing: 0.13em; text-transform: uppercase; color: var(--muted); }
.dir__logos { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.dir__logos .lg { --lg-h: 14px; opacity: 0.6; }
.dir:hover .dir__logos .lg { opacity: 0.92; }
@media (min-width: 1101px) {
  /* Long titles wrap to two lines; reserve both so every name sits on the same line. */
  .dir__role { min-height: 2.9em; display: flex; align-items: flex-end; }
}
@media (max-width: 1100px) {
  /* Two columns of compact cards: portrait beside the name, story underneath. */
  .board__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dir { display: grid; grid-template-columns: 132px minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 18px; padding: 12px 16px 20px 12px; }
  .dir__ph { grid-column: 1; grid-row: 1; }
  .dir__top { grid-column: 2; grid-row: 1; align-self: center; padding: 0; }
  .dir__more { grid-column: 1 / -1; grid-row: 2; padding: 0 4px; }
}
@media (max-width: 640px) {
  .board__head { margin-bottom: 28px; }
  .board__grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .dir { grid-template-columns: 108px minmax(0, 1fr); column-gap: 16px; padding: 12px 14px 20px 12px; }
  .dir__name { font-size: 26px; }
  .dir__line { font-size: 17px; }
}

/* ---------- About: values + journey ---------- */
.valuesec { padding: clamp(110px, 18vh, 200px) 0 clamp(80px, 12vh, 140px); }
.valuesec .values__row { margin-top: 56px; }
.journey { position: relative; min-height: 100svh; padding: clamp(110px, 18vh, 200px) 0 clamp(320px, 46vh, 460px); }
.jline { position: relative; margin-top: 70px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.jline::before { content: ''; position: absolute; left: 0; right: 0; top: 7px; height: 1px; background: var(--line-2); }
.jline__fill { position: absolute; left: 0; top: 7px; height: 1px; width: calc(100% * var(--p, 0)); background: linear-gradient(90deg, var(--cyan), var(--bright), var(--violet)); box-shadow: 0 0 14px rgba(127, 227, 255, 0.7); }
.jnode { position: relative; padding: 40px 28px 0 0; }
.jnode::before { content: ''; position: absolute; left: 0; top: 1px; width: 13px; height: 13px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--bg); transition: background 0.6s, box-shadow 0.6s, border-color 0.6s; }
.jnode.on::before { background: var(--cyan); border-color: transparent; box-shadow: 0 0 0 6px rgba(127, 227, 255, 0.12), 0 0 20px var(--cyan); }
.jnode__k { margin: 0; font: 500 11px/1 var(--mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); transition: color 0.6s; }
.jnode.on .jnode__k { color: var(--cyan); }
.jnode__t { margin: 16px 0 10px; font: 200 clamp(24px, 2.2vw, 34px)/1.15 var(--sans); letter-spacing: -0.03em; }
.jnode__d { margin: 0; max-width: 28ch; color: var(--ink-2); font-size: 14.5px; line-height: 1.7; }
.jline--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.journey .hero__cta { margin-top: 60px; }
/* About journey: a light rail with a comet at the scroll head, stations that ignite as it passes, big gradient years and a
   glass card per chapter; the vision gets its own glow. Scoped to .journey because careers shares .jline. */
.journey .jline { margin-top: 84px; gap: 0 18px; }
.journey .jline::before { top: 9px; height: 2px; background: linear-gradient(90deg, rgba(150, 170, 255, 0.05), rgba(150, 170, 255, 0.28) 18%, rgba(150, 170, 255, 0.28) 82%, rgba(150, 170, 255, 0.05)); }
.journey .jline__fill { top: 9px; height: 2px; box-shadow: 0 0 14px rgba(127, 227, 255, 0.9), 0 0 42px rgba(45, 106, 255, 0.6); }
.journey .jline__comet {
  position: absolute; left: calc(100% * var(--p, 0)); top: 10px; width: 180px; height: 2px; pointer-events: none;
  transform: translate(-100%, -50%); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.95)); opacity: clamp(0, calc(var(--p, 0) * 30), 1);
}
.journey .jline__comet::after {
  content: ''; position: absolute; right: -7px; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; background: #fff;
  box-shadow: 0 0 10px #fff, 0 0 26px var(--cyan), 0 0 70px var(--bright); animation: comet-throb 1.6s ease-in-out infinite;
}
@keyframes comet-throb { 50% { box-shadow: 0 0 14px #fff, 0 0 38px var(--cyan), 0 0 110px var(--bright); } }
.journey .jnode { padding: 46px 0 0; }
.journey .jnode::before { top: 0; width: 20px; height: 20px; background: var(--bg-2); }
.journey .jnode.on::before {
  border-color: transparent; background: radial-gradient(circle, #fff 0 22%, var(--cyan) 48%, var(--bright) 100%);
  box-shadow: 0 0 0 7px rgba(127, 227, 255, 0.1), 0 0 26px var(--cyan), 0 0 64px rgba(45, 106, 255, 0.7);
}
.journey .jnode::after { content: ''; position: absolute; left: 0; top: 0; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--cyan); opacity: 0; pointer-events: none; }
.journey .jnode.on::after { animation: jn-ignite 1.5s var(--ease) both; }
@keyframes jn-ignite { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(5.5); } }
.journey .jnode__k { font: 200 clamp(30px, 2.9vw, 50px)/1.05 var(--sans); letter-spacing: -0.045em; text-transform: none; color: rgba(150, 170, 255, 0.24); }
.journey .jnode.on .jnode__k { color: transparent; background: var(--iri); -webkit-background-clip: text; background-clip: text; }
.journey .jnode__card {
  position: relative; margin-top: 20px; padding: 22px 20px 24px; border-radius: 20px; opacity: 0.36; transform: translateY(18px) scale(0.98);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease), border-color 0.9s, box-shadow 0.9s;
}
.journey .jnode.on .jnode__card { opacity: 1; transform: none; border-color: rgba(127, 227, 255, 0.26); box-shadow: inset 0 1px 0 var(--glass-hi), 0 34px 70px -34px rgba(45, 106, 255, 0.6); }
.journey .jnode__t { margin: 0 0 10px; font-size: clamp(21px, 1.7vw, 27px); }
.journey .jnode__d { max-width: none; font-size: 14px; }
.journey .jnode--vision .jnode__card { background: linear-gradient(160deg, rgba(45, 106, 255, 0.24), rgba(154, 140, 255, 0.1) 60%, rgba(6, 9, 26, 0.5)); }
.journey .jnode--vision.on::before { box-shadow: 0 0 0 9px rgba(154, 140, 255, 0.14), 0 0 34px var(--violet), 0 0 90px rgba(127, 227, 255, 0.65); }
.journey .jnode--vision .jnode__t { background: var(--iri); -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (prefers-reduced-motion: reduce) {
  .journey .jline__comet::after, .journey .jnode.on::after { animation: none; }
  .journey .jnode__card { transition: none; }
}

/* ---------- Forward-Deployed: compare ---------- */
.compare { padding: clamp(110px, 18vh, 200px) 0; }
.compare__head { text-align: center; display: grid; justify-items: center; margin-bottom: clamp(44px, 7vh, 70px); }
.compare__head .h2 { max-width: 14em; }
.cmp { max-width: 1060px; margin: 0 auto; border-radius: 28px; overflow: hidden; }
.cmp__row { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.2fr) minmax(0, 1.3fr); }
.cmp__row + .cmp__row { border-top: 1px solid var(--line); }
.cmp__row > span { padding: 22px 28px; }
.cmp__k { align-self: center; font: 400 10.5px/1.5 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.cmp__a { color: var(--muted); font-size: 15.5px; line-height: 1.5; }
.cmp__b { position: relative; padding-left: 52px !important; color: var(--ink); font-size: 15.5px; line-height: 1.5; background: linear-gradient(90deg, rgba(45, 106, 255, 0.16), rgba(127, 227, 255, 0.05)); }
.cmp__b::before { content: ''; position: absolute; left: 26px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }
.cmp__row--head > span { padding-top: 26px; padding-bottom: 18px; font: 400 10.5px/1.4 var(--mono); letter-spacing: 0.18em; text-transform: uppercase; }
.cmp__row--head .cmp__b { color: var(--cyan); }
.cmp__row--head .cmp__b::before { display: none; }

/* ---------- Forward-Deployed: method ---------- */
.method { padding: clamp(110px, 18vh, 200px) 0; }
.method__body { max-width: 680px; }
.msteps { list-style: none; position: relative; margin: 56px 0 0; padding: 0; }
.msteps::before, .msteps::after { content: ''; position: absolute; left: 21px; top: 22px; width: 1px; }
.msteps::before { bottom: 22px; background: var(--line-2); }
.msteps::after { height: calc((100% - 44px) * var(--p, 0)); background: linear-gradient(180deg, var(--cyan), var(--bright), var(--violet)); box-shadow: 0 0 14px rgba(127, 227, 255, 0.7); }
.mstep { position: relative; z-index: 1; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 26px; padding-bottom: 46px; }
.mstep:last-child { padding-bottom: 0; }
.mstep__n { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font: 500 11px/1 var(--mono); color: var(--muted); border: 1px solid var(--line-2); background: var(--bg); transition: background 0.6s, color 0.6s, box-shadow 0.6s, border-color 0.6s; }
.mstep.on .mstep__n { color: var(--bg); background: var(--ice); border-color: transparent; box-shadow: 0 0 0 6px rgba(169, 193, 255, 0.08), 0 0 26px rgba(127, 227, 255, 0.55); }
.mstep h3 { margin: 4px 0 10px; font: 200 clamp(30px, 3vw, 46px)/1.05 var(--sans); letter-spacing: -0.04em; color: var(--muted); transition: color 0.6s; }
.mstep.on h3 { color: var(--ink); }
.mstep p { margin: 0; max-width: 46ch; color: var(--ink-2); line-height: 1.7; }

/* ---------- Forward-Deployed: scope ---------- */
.deploy { min-height: 100svh; display: flex; align-items: center; padding: calc(var(--nav-h) + 40px) 0 80px; }
.deploy > .wrap { width: 100%; }
.deploy__body { max-width: 540px; }
.deploy .lede { margin-top: 26px; }
.dchips { list-style: none; margin: 34px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.dchip {
  display: flex; align-items: center; gap: 10px; height: 100%; padding: 13px 14px; border-radius: 14px;
  border: 1px solid var(--line); background: rgba(8, 12, 32, 0.5); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  font-size: 13.5px; line-height: 1.35; color: var(--ink-2); transition: border-color 0.4s, color 0.4s, transform 0.5s var(--ease);
}
.dchip > span { font: 500 10px/1 var(--mono); color: var(--muted); }
.dchip b { font-weight: 400; }
.dchip:hover { border-color: rgba(127, 227, 255, 0.4); color: var(--ink); transform: translateY(-2px); }

/* ---------- Forward-Deployed: led by ---------- */
.leadstrip { padding: clamp(100px, 16vh, 180px) 0; }
.lstrip { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 36px; align-items: center; max-width: 1000px; padding: 16px 36px 16px 16px; border-radius: 30px; }
.lstrip__ph { border-radius: 20px; }
.lstrip__name { font: 200 clamp(34px, 3.6vw, 56px)/1 var(--sans); letter-spacing: -0.045em; }
.lstrip__p { margin-top: 6px; max-width: 60ch; color: var(--ink-2); font-size: 15.5px; line-height: 1.75; }
.lstrip__more { margin-top: 10px; display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink); }
.lstrip__more .ico { width: 15px; height: 15px; transition: transform 0.5s var(--ease); }
.lstrip:hover .lstrip__more .ico { transform: translateX(4px); }

/* ---------- Closing sections ---------- */
.ctaend .display--md { font-size: clamp(40px, 5.8vw, 100px); }
.signal--l { margin-top: 56px; }

/* ---------- Footer call to action ---------- */
.foot__cta { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 30px 40px; align-items: end; padding-bottom: 64px; margin-bottom: 64px; border-bottom: 1px solid var(--line); }
.foot__big { margin: 0; font: 200 clamp(40px, 5.6vw, 92px)/1.04 var(--sans); letter-spacing: -0.045em; text-wrap: balance; }
.foot__sub { margin: 18px 0 0; max-width: 46ch; color: var(--ink-2); line-height: 1.7; }

/* Narrow screens: orbit previews sit under the copy, not beside it. */
@media (max-aspect-ratio: 9/10) {
  .orbitp, .deploy { align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .leader__stats .ai dt { animation: none; }
  main { transition: opacity 0.2s linear; }
  .is-leaving main { transform: none; }
}

/* ---------- Case studies ---------- */
.csidx { list-style: none; margin: 46px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.csidx a { display: inline-flex; align-items: center; gap: 12px; padding: 12px 18px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(2, 3, 10, 0.4); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-size: 14px; color: var(--ink-2); transition: border-color 0.4s, color 0.4s, transform 0.6s var(--ease); }
.csidx span { font: 500 10.5px/1 var(--mono); color: var(--cyan); }
.csidx b { font-weight: 400; }
.csidx a:hover { border-color: rgba(127, 227, 255, 0.4); color: var(--ink); transform: translateY(-2px); }

.case { position: relative; padding: clamp(110px, 18vh, 200px) 0 clamp(60px, 10vh, 120px); }
.case__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(36px, 6vw, 110px); align-items: start; }
.case__head { position: sticky; top: calc(var(--nav-h) + 40px); }
.case__n { margin: 0; display: flex; align-items: center; gap: 14px; font: 400 11px/1 var(--mono); letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.case__n b { font: 200 clamp(56px, 6vw, 92px)/0.8 var(--sans); letter-spacing: -0.05em; background: linear-gradient(180deg, #fff, #8ea7e8); -webkit-background-clip: text; background-clip: text; color: transparent; }
.case__t { margin: 26px 0 0; font: 200 clamp(32px, 3.3vw, 54px)/1.08 var(--sans); letter-spacing: -0.035em; text-wrap: balance; }
.case__t em { font: italic 400 1.06em/1 var(--serif); letter-spacing: -0.01em; background: var(--iri); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: 0.06em; }
.case__client { margin: 28px 0 0; display: flex; gap: 12px; align-items: flex-start; }
.case__client .ico { flex: none; width: 18px; height: 18px; margin-top: 2px; fill: none; stroke: var(--cyan); stroke-width: 1.4; }
.case__client b { display: block; font-weight: 400; font-size: 15px; color: var(--ink); }
.case__client small { display: block; margin-top: 4px; font: 400 10px/1.4 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.case__dom { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.case__dom a { display: inline-flex; align-items: center; gap: 9px; padding: 9px 13px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 12.5px; color: var(--ink-2); transition: border-color 0.4s, color 0.4s; }
.case__dom span { font: 500 10px/1 var(--mono); color: var(--muted); }
.case__dom b { font-weight: 400; }
.case__dom a:hover { border-color: rgba(127, 227, 255, 0.4); color: var(--ink); }
.case__body { display: grid; gap: 18px; }
.case__blk { padding: 6px 0 22px; border-bottom: 1px solid var(--line); }
.case__k { margin: 0 0 16px; font: 400 10.5px/1.4 var(--mono); letter-spacing: 0.2em; text-transform: uppercase; color: var(--cyan); }
.case__p { margin: 0; max-width: 60ch; color: var(--ink); font-size: clamp(17px, 1.35vw, 20px); line-height: 1.7; }
.case__steps { list-style: none; margin: 0; padding: 0; counter-reset: st; display: grid; gap: 14px; }
.case__steps li { counter-increment: st; position: relative; padding-left: 46px; color: var(--ink-2); font-size: 15.5px; line-height: 1.7; }
.case__steps li::before { content: counter(st, decimal-leading-zero); position: absolute; left: 0; top: 3px; font: 500 11px/1 var(--mono); color: var(--cyan); padding: 5px 7px; border-radius: 6px; border: 1px solid rgba(127, 227, 255, 0.25); }
.case__blk--out { padding: 26px 28px 28px; border: 1px solid var(--line-2); border-radius: 24px; }
.case__outs { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.case__outs li { position: relative; padding-left: 30px; font-size: clamp(16px, 1.2vw, 18px); line-height: 1.6; color: var(--ink); }
.case__outs li::before { content: ''; position: absolute; left: 2px; top: 0.55em; width: 12px; height: 7px; border-left: 1.5px solid var(--cyan); border-bottom: 1.5px solid var(--cyan); transform: rotate(-45deg); }

/* Home: case-study teaser */
.casep { padding: clamp(110px, 18vh, 200px) 0 clamp(80px, 12vh, 140px); }
.casep__grid { margin: 56px 0 36px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.casec { position: relative; display: flex; flex-direction: column; gap: 14px; min-height: 260px; padding: 26px 26px 28px; border-radius: 26px; overflow: hidden; isolation: isolate; transition: border-color 0.5s, transform 0.8s var(--ease); }
.casec::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity 0.5s; background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 0%), rgba(45, 106, 255, 0.22), transparent 60%); }
.casec:hover { border-color: var(--line-2); transform: translateY(-4px); }
.casec:hover::before { opacity: 1; }
.casec__n { font: 200 54px/0.9 var(--sans); letter-spacing: -0.05em; background: linear-gradient(180deg, #fff, #8ea7e8); -webkit-background-clip: text; background-clip: text; color: transparent; }
.casec__k { font: 400 10.5px/1.4 var(--mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--cyan); }
.casec__t { font: 300 21px/1.35 var(--sans); letter-spacing: -0.02em; color: var(--ink); }
.casec__go { margin-top: auto; width: 18px; height: 18px; color: var(--ice); transition: transform 0.5s var(--ease); }
.casec:hover .casec__go { transform: translateX(4px); }

/* ---------- Forms (enquiry, application) ---------- */
.fform { padding: clamp(22px, 2.4vw, 34px); border-radius: 30px; border: 1px solid var(--line-2); }
.fform__t { margin: 0 0 22px; font: 300 24px/1.2 var(--sans); letter-spacing: -0.02em; }
.fform__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 14px; }
.fld { display: grid; gap: 8px; min-width: 0; }
.fld--wide { grid-column: 1 / -1; }
.fld[hidden] { display: none; }
.fld label { font: 400 10.5px/1.4 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.fld--req label::after { content: ' *'; color: var(--cyan); }
.fld input, .fld select, .fld textarea {
  width: 100%; min-width: 0; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line-2); background: rgba(2, 3, 10, 0.55);
  font: 400 15px/1.4 var(--sans); color: var(--ink); outline: 0; transition: border-color 0.3s, box-shadow 0.3s;
}
.fld textarea { resize: vertical; min-height: 110px; }
.fld select { appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--ice) 50%), linear-gradient(135deg, var(--ice) 50%, transparent 50%);
  background-position: calc(100% - 20px) 52%, calc(100% - 15px) 52%; background-size: 5px 5px; background-repeat: no-repeat; }
.fld select option { background: #0a0f26; color: var(--ink); }
.fld input::placeholder, .fld textarea::placeholder { color: var(--faint); }
.fld input:focus, .fld select:focus, .fld textarea:focus { border-color: rgba(127, 227, 255, 0.45); box-shadow: 0 0 0 4px rgba(127, 227, 255, 0.07); }
.fld input[type='file'] { padding: 12px; font-size: 13px; color: var(--ink-2); }
.fld input[type='file']::file-selector-button { margin-right: 12px; padding: 8px 14px; border: 1px solid var(--line-2); border-radius: 999px; background: rgba(255, 255, 255, 0.05); color: var(--ink); font: inherit; cursor: pointer; }
.fform__foot { margin-top: 22px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.fform__fine { margin: 14px 0 0; max-width: 44ch; font-size: 12.5px; line-height: 1.6; color: var(--muted); }
.fform__foot .fform__fine { margin: 0; }
.fform__note { margin: 14px 0 0; min-height: 1.4em; font-size: 14px; color: var(--ink-2); }
.fform__note.is-ok { color: var(--cyan); }
.fform__note.is-bad { color: #ff9aa8; }

/* ---------- Contact ---------- */
.contact { position: relative; min-height: 100svh; padding: calc(var(--nav-h) + 70px) 0 clamp(80px, 12vh, 140px); }
.contact__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(36px, 6vw, 100px); align-items: start; }
.contact__intro .display--pg { font-size: clamp(42px, 5vw, 84px); }
.next3 { list-style: none; margin: 44px 0 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.next3 li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px 12px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.next3 span { grid-row: span 2; font: 500 11px/1.6 var(--mono); color: var(--cyan); }
.next3 b { font-weight: 400; font-size: 16px; }
.next3 p { margin: 0; color: var(--ink-2); font-size: 14.5px; line-height: 1.6; }
.paths { padding: clamp(60px, 10vh, 110px) 0 clamp(300px, 44vh, 440px); }
.paths__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.pathc { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 26px; border-radius: 26px; overflow: hidden; isolation: isolate; transition: border-color 0.5s, transform 0.8s var(--ease); }
a.pathc:hover { border-color: var(--line-2); transform: translateY(-3px); }
.pathc__k { font: 400 10.5px/1.4 var(--mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--cyan); }
.pathc__t { font: 300 22px/1.3 var(--sans); letter-spacing: -0.02em; overflow-wrap: anywhere; }
.pathc__d { color: var(--ink-2); font-size: 14.5px; line-height: 1.6; }
.pathc__go { position: absolute; right: 24px; top: 26px; width: 18px; height: 18px; color: var(--ice); transition: transform 0.5s var(--ease); }
a.pathc:hover .pathc__go { transform: translateX(4px); }

/* ---------- Careers: Future Talent, roles, apply ---------- */
.tp { padding: clamp(110px, 18vh, 200px) 0 clamp(80px, 12vh, 140px); }
.tp__head .lede { margin-top: 24px; }
.jline--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.perks8 { list-style: none; margin: 70px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.perks8 li { display: grid; gap: 8px; align-content: start; padding: 26px 24px 26px 0; border-bottom: 1px solid var(--line); }
.perks8 li:not(:nth-child(4n + 1)) { padding-left: 24px; border-left: 1px solid var(--line); }
.perks8 b { font: 300 19px/1.3 var(--sans); letter-spacing: -0.015em; }
.perks8 span { color: var(--ink-2); font-size: 14px; line-height: 1.6; }

.roles { padding: clamp(110px, 18vh, 200px) 0 clamp(80px, 12vh, 140px); }
.roles__head .lede { margin-top: 24px; }
.roles__list { margin-top: 50px; display: grid; gap: 10px; }
.role { border: 1px solid var(--line-2); border-radius: 22px; overflow: hidden; transition: border-color 0.4s; }
.role[open] { border-color: rgba(127, 227, 255, 0.3); }
.role__sum { list-style: none; cursor: pointer; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto 28px; align-items: center; gap: 16px; padding: 22px 24px; }
.role__sum::-webkit-details-marker { display: none; }
.role__sum:hover .role__t { color: #fff; }
.role__sum:focus-visible { outline: 2px solid var(--cyan); outline-offset: -2px; border-radius: 22px; }
.role__n { font: 500 11px/1 var(--mono); color: var(--cyan); }
.role__t { font: 300 clamp(19px, 1.7vw, 24px)/1.25 var(--sans); letter-spacing: -0.02em; color: var(--ink); transition: color 0.3s; }
.role__meta { font: 400 10.5px/1.4 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.role__pm { position: relative; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line-2); }
.role__pm::before, .role__pm::after { content: ''; position: absolute; left: 50%; top: 50%; width: 10px; height: 1px; background: var(--ink); transform: translate(-50%, -50%); transition: transform 0.4s var(--ease); }
.role__pm::after { transform: translate(-50%, -50%) rotate(90deg); }
.role[open] .role__pm::after { transform: translate(-50%, -50%) rotate(0deg); }
.role__body { padding: 0 24px 28px 84px; }
.role__lead { margin: 0; max-width: 70ch; color: var(--ink-2); font-size: 15.5px; line-height: 1.7; }
.role__stack { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.role__stack li { padding: 7px 11px; border-radius: 999px; border: 1px solid var(--line-2); font: 400 10.5px/1 var(--mono); letter-spacing: 0.08em; color: var(--ice); }
.role__cols { margin-top: 26px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.role__k { margin: 0 0 12px; font: 400 10.5px/1.4 var(--mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--cyan); }
.role__ul { margin: 0; padding: 0 0 0 18px; display: grid; gap: 8px; color: var(--ink-2); font-size: 14px; line-height: 1.6; }
.role__ul li::marker { color: var(--faint); }
.role__apply { margin-top: 26px; }
.rolex { scroll-margin-top: 140px; margin-top: 24px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 30px; padding: 24px 26px; border-radius: 22px; border: 1px dashed var(--line-2); }
.rolex__t { margin: 0 0 6px; font: 300 20px/1.3 var(--sans); }
.rolex__d { margin: 0; max-width: 62ch; color: var(--ink-2); font-size: 14.5px; line-height: 1.65; }

.apply { position: relative; padding: clamp(110px, 18vh, 200px) 0 clamp(320px, 46vh, 460px); }
.apply__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(36px, 6vw, 100px); align-items: start; }
.apply .display--md { font-size: clamp(40px, 5.2vw, 88px); margin-top: 22px; }
.apply .careers__sub { margin-left: 0; text-align: left; }
/* Careers: the hiring process under the apply intro (same list style as the contact page). */
.hire__k { margin: 44px 0 0; font: 500 11px/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--cyan); }
.apply .next3.hire { margin-top: 16px; max-width: 52ch; }
.hire__fair { margin: 18px 0 0; max-width: 52ch; color: var(--muted); font-size: 13.5px; line-height: 1.65; }
.why .linkrow { margin-top: 6px; }

/* ---------- Forward-Deployed: data and security ---------- */
.secp { padding: clamp(110px, 18vh, 200px) 0 clamp(80px, 12vh, 140px); }
.secp__head { max-width: 760px; }
.secp__head .lede { margin-top: 24px; }
.secg { list-style: none; margin: 56px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; max-width: 1080px; }
.secg__i { padding: 28px 28px 30px; border-radius: 24px; border: 1px solid var(--line-2); }
.secg__i span { font: 500 11px/1 var(--mono); color: var(--cyan); }
.secg__i h3 { margin: 18px 0 10px; font: 300 22px/1.3 var(--sans); letter-spacing: -0.02em; }
.secg__i p { margin: 0; color: var(--ink-2); font-size: 14.5px; line-height: 1.7; }


/* ---------- Spatial photos: the team on About, the Year End Party on Careers ---------- */
/* spatial.js runs an AI scan on first sight (a 3D point cloud of the room, then a fly-in), then redraws the photo
   with depth parallax. The <img> and the photo pass share one crop: cover, focal point --fx/--fy, overscan --os
   (room for the parallax at the edges). .is-gl means WebGL holds the photo and has taken over from the <img>; until
   then, and whenever WebGL fails on a device, the <img> shows. data-phase is standby, scan, build or live. */
.team3d { padding: clamp(96px, 14vh, 160px) 0 clamp(80px, 12vh, 140px); }
.team3d__head { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 0 64px; align-items: end; }
.team3d__head .eyebrow { grid-column: 1 / -1; }
.team3d__head .lede { justify-self: end; max-width: 40ch; padding-bottom: 0.5em; }
.spatial {
  --fx: 0.5; --fy: 0.86; --os: 1.05;
  position: relative; width: min(100% - 2 * var(--pad), 1560px); aspect-ratio: 16 / 9; margin: clamp(36px, 6vh, 60px) auto 0;
  border-radius: 28px; overflow: hidden; isolation: isolate; background: var(--bg-2);
  box-shadow: 0 60px 140px -60px rgba(45, 106, 255, 0.55), 0 30px 80px -40px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(127, 227, 255, 0);
  transition: box-shadow 0.9s var(--ease);
}
/* While the scan runs the panel lights up at the edge. */
.spatial[data-phase="scan"], .spatial[data-phase="build"] {
  box-shadow: 0 60px 140px -60px rgba(45, 106, 255, 0.7), 0 30px 80px -40px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(127, 227, 255, 0.45), 0 0 90px -20px rgba(127, 227, 255, 0.55);
}
.spatial img, .spatial canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.spatial img {
  object-fit: cover; object-position: calc(var(--fx) * 100%) calc(var(--fy) * 100%);
  transform: scale(var(--os)); transform-origin: calc(var(--fx) * 100%) calc(var(--fy) * 100%);
}
.spatial img, .spatial canvas { transition: opacity 0.6s var(--ease); }
.spatial canvas { opacity: 0; }
.spatial.is-gl img { opacity: 0; }
.spatial.is-gl canvas { opacity: 1; }
/* Hairline edge, and soft shades at the very top and bottom so the HUD reads; faces sit between them. */
.spatial::after {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  background: linear-gradient(180deg, rgba(2, 3, 10, 0.5), rgba(2, 3, 10, 0) 22%, rgba(2, 3, 10, 0) 86%, rgba(2, 3, 10, 0.4));
}
/* Viewfinder corners. */
.spatial__frame { position: absolute; z-index: 3; inset: 14px; pointer-events: none; opacity: 0; transition: opacity 0.6s; }
.spatial.is-gl .spatial__frame { opacity: 1; }
.spatial__frame i { position: absolute; width: 22px; height: 22px; border: 0 solid rgba(255, 255, 255, 0.7); transition: border-color 0.6s; }
.spatial__frame i:nth-child(1) { top: 0; left: 0; border-width: 1.5px 0 0 1.5px; border-top-left-radius: 14px; }
.spatial__frame i:nth-child(2) { top: 0; right: 0; border-width: 1.5px 1.5px 0 0; border-top-right-radius: 14px; }
.spatial__frame i:nth-child(3) { bottom: 0; left: 0; border-width: 0 0 1.5px 1.5px; border-bottom-left-radius: 14px; }
.spatial__frame i:nth-child(4) { bottom: 0; right: 0; border-width: 0 1.5px 1.5px 0; border-bottom-right-radius: 14px; }
.spatial[data-phase="scan"] .spatial__frame i, .spatial[data-phase="build"] .spatial__frame i { border-color: var(--cyan); }
/* Scan progress along the top edge. */
.spatial__bar {
  position: absolute; z-index: 3; left: 0; right: 0; top: 0; height: 2px; pointer-events: none;
  transform: scaleX(var(--p, 0)); transform-origin: 0 50%; opacity: 0; transition: opacity 0.6s;
  background: linear-gradient(90deg, rgba(127, 227, 255, 0), var(--cyan)); box-shadow: 0 0 14px var(--cyan);
}
.spatial[data-phase="scan"] .spatial__bar, .spatial[data-phase="build"] .spatial__bar { opacity: 1; }
.spatial__hud {
  position: absolute; z-index: 3; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 0 clamp(30px, 2.8vw, 44px); pointer-events: none;
  font: 500 11px/1.2 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 255, 255, 0.9);
}
.spatial__hud--top { top: clamp(24px, 2.4vw, 34px); }
.spatial__hud--bot { bottom: clamp(24px, 2.4vw, 34px); text-shadow: 0 1px 12px rgba(2, 3, 10, 0.9); opacity: 0; transition: opacity 0.6s; }
.spatial.is-gl .spatial__hud--bot { opacity: 1; }
.spatial__hud > * { display: inline-flex; align-items: center; gap: 10px; }
.spatial__hud b { font-weight: 500; color: rgba(255, 255, 255, 0.55); }
.spatial__num { font-variant-numeric: tabular-nums; color: #fff; }
.spatial__geo .geo__c { color: rgba(255, 255, 255, 0.6); }
.spatial__geo .geo__c::before { content: '·'; margin-right: 10px; color: rgba(255, 255, 255, 0.4); }
.spatial__geo i { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 12px var(--cyan); }
/* Status chip; once the scan is done it doubles as the rescan button. */
.spatial__tag {
  pointer-events: auto; padding: 7px 12px; border-radius: 99px; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit;
  background: rgba(2, 3, 10, 0.4); border: 1px solid rgba(255, 255, 255, 0.16); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  cursor: pointer; transition: border-color 0.4s, background-color 0.4s;
}
.spatial__tag svg { width: 14px; height: 14px; fill: none; stroke: var(--cyan); stroke-width: 1.2; stroke-linejoin: round; }
.spatial:not(.is-gl) .spatial__tag { display: none; }
.spatial .st { display: none; }
.spatial .st--live, .spatial[data-phase="scan"] .st--scan, .spatial[data-phase="build"] .st--build { display: inline; }
.spatial[data-phase="scan"] .st--live, .spatial[data-phase="build"] .st--live { display: none; }
.spatial[data-phase="scan"] .spatial__tag, .spatial[data-phase="build"] .spatial__tag { border-color: rgba(127, 227, 255, 0.6); }
.spatial[data-phase="scan"] .spatial__tag svg, .spatial[data-phase="build"] .spatial__tag svg { animation: sp-pulse 0.9s ease-in-out infinite alternate; }
@keyframes sp-pulse { from { opacity: 0.35; } to { opacity: 1; } }
.st--re { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.spatial[data-phase="live"] .spatial__tag:is(:hover, :focus-visible) { border-color: rgba(127, 227, 255, 0.6); background: rgba(2, 3, 10, 0.6); }
.spatial[data-phase="live"] .spatial__tag:is(:hover, :focus-visible) .st--live { display: none; }
.spatial[data-phase="live"] .spatial__tag:is(:hover, :focus-visible) .st--re { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
.team3d__foot { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px 32px; margin-top: 24px; }
.team3d__note { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; }
.team3d__foot .link { margin-top: 0; }
.team3d__foot .linkrow { gap: 16px 36px; }
.team3d__note b { font-weight: 500; color: var(--ink); }
/* Careers: the Year End Party photo gets the same spatial treatment, between the statement and the newsletter. */
.life .about__text .statement { margin-bottom: 0; }
.team3d__note .hint--touch { display: none; }
@media (pointer: coarse) {
  .team3d__note .hint--fine { display: none; }
  .team3d__note .hint--touch { display: inline; }
}
/* Responsive rules for the multi-page components. Kept last so they win over the base rules above. */
@media (max-width: 900px) {
  .leader, .leader--flip { grid-template-columns: 1fr; gap: 34px; }
  .leader .leader__ph, .leader .leader__body, .leader .leader__cv { grid-column: auto; grid-row: auto; }
  .leader__ph { width: 100%; max-width: 460px; }
  .leader__cv { grid-template-columns: 1fr 1fr; }
  .leader__cv > div { padding-top: 22px; padding-bottom: 20px; }
  .leader__cv > div:nth-child(odd) { padding-left: 0; border-left: 0; }
  .leader__cv > div:nth-child(even) { padding-left: 20px; padding-right: 0; border-left: 1px solid var(--line); }
  .pedigree ul { grid-template-columns: repeat(5, auto); gap: 30px 24px; }
  .leadp__grid { grid-template-columns: 1fr; }
  .jline { grid-template-columns: 1fr; gap: 34px; padding-left: 34px; }
  .jline::before { left: 6px; right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
  .jline__fill { left: 6px; top: 0; width: 1px; height: calc(100% * var(--p, 0)); }
  .jnode { padding: 0; }
  .jnode::before { left: -34px; top: 2px; }
  .cmp__row { grid-template-columns: 1fr 1fr; }
  .cmp__k { grid-column: 1 / -1; padding-bottom: 0 !important; }
  .cmp__row--head .cmp__k { display: none; }
  .cmp__row > span { padding: 16px 18px; }
  .cmp__b { padding-left: 36px !important; }
  .cmp__b::before { left: 16px; }
  .lstrip { grid-template-columns: 130px minmax(0, 1fr); gap: 22px; padding: 12px 22px 12px 12px; }
  .foot__cta { grid-template-columns: 1fr; }
  .process__link { grid-column: 1; }
  .phero--r .phero__body { margin-left: 0; }
}
@media (max-width: 640px) {
  .leadc { grid-template-columns: 88px minmax(0, 1fr) auto; gap: 16px; padding: 10px 16px 10px 10px; }
  .leadc__name { font-size: 24px; }
  .dchips { grid-template-columns: 1fr; }
  .lstrip { grid-template-columns: 1fr; }
  .lstrip__ph { max-width: 180px; }
  .leader__stats { gap: 22px 36px; }
  .leader__cv { grid-template-columns: 1fr; }
  .leader__cv > div:nth-child(even) { padding-left: 0; border-left: 0; }
  .pedigree ul { grid-template-columns: repeat(3, auto); gap: 26px 20px; }
  .journey { padding-bottom: 300px; }
  .linkrow { flex-direction: column; gap: 0; }
}

/* Responsive rules for case studies, contact, careers and security. */
@media (max-width: 1100px) {
  .perks8 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .perks8 li:not(:nth-child(4n + 1)) { padding-left: 0; border-left: 0; }
  .perks8 li:nth-child(even) { padding-left: 24px; border-left: 1px solid var(--line); }
  .role__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .case__grid, .contact__grid, .apply__grid { grid-template-columns: 1fr; }
  .case__head { position: static; }
  .casep__grid, .paths__grid { grid-template-columns: 1fr; }
  .casec { min-height: 0; }
  .jline--3 { grid-template-columns: 1fr; }
  .secg { grid-template-columns: 1fr; }
  .role__sum { grid-template-columns: 34px minmax(0, 1fr) 28px; }
  .role__meta { grid-column: 2; grid-row: 2; white-space: normal; }
  .role__pm { grid-column: 3; grid-row: 1 / span 2; }
  .role__body { padding: 0 20px 24px; }
  .role__cols { grid-template-columns: 1fr; gap: 22px; }
}
@media (max-width: 640px) {
  .fform__grid { grid-template-columns: 1fr; }
  .perks8 { grid-template-columns: 1fr; }
  .perks8 li:nth-child(even) { padding-left: 0; border-left: 0; }
  .case__blk--out { padding: 22px 20px; }
  .csidx a { padding: 10px 14px; font-size: 13px; }
  .apply { padding-bottom: 300px; }
}
@media (max-width: 640px) {
  .leader__ph { --orx: 56cqw; --ory: 10cqw; width: 82%; margin-inline: auto; }
  .orbit__items li { height: 34px; padding: 0 12px; }
  .orbit__items .lg { --lg-h: 13px; }
}
@media (max-width: 900px) {
  .team3d__head { grid-template-columns: 1fr; }
  .team3d__head .lede { justify-self: start; margin-top: 18px; }
}
@media (max-width: 640px) {
  .spatial { --fy: 0.5; aspect-ratio: 4 / 3; border-radius: 18px; }
  .spatial__frame { inset: 9px; }
  .spatial__frame i { width: 14px; height: 14px; }
  .spatial__hud { font-size: 9.5px; letter-spacing: 0.12em; padding: 0 20px; }
  .spatial__hud--top { top: 16px; }
  .spatial__hud--bot { bottom: 16px; }
  .spatial__geo .geo__c, .spatial__view { display: none; }
  .spatial[data-phase="live"] .spatial__hud--bot { opacity: 0; }
  .spatial__tag { padding: 5px 9px; }
}
@media (max-width: 900px) {
  .aix { --streams: 0; grid-template-columns: minmax(0, 1fr); grid-template-areas: "core" "p" "e" "con"; gap: 14px; }
  .aix__core { width: min(300px, 74vw); justify-self: center; }
  .aix__side { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
  .aix__side .aix__k { width: 100%; justify-content: center; margin: 6px 0 0; }
  .aix__side--p .aix__role { flex-direction: row; padding: 6px 14px 6px 6px; }
  .aix__role { padding: 6px 14px 6px 6px; font-size: 14px; gap: 9px; }
  .aix__ico { width: 46px; height: 46px; }
  .aix__ico svg { width: 15px; height: 15px; }
  .aix__con { padding: 14px 16px 18px; font-size: 12.5px; min-height: 440px; }
  .cs__goal { font-size: 14px; }
  .cs__out p { font-size: 17px; }
  .tenets ul { grid-template-columns: 1fr 1fr; }
  .tenets li:nth-child(3) { padding-left: 0; border-left: 0; }
}
@media (max-width: 560px) {
  .cs__bar { letter-spacing: 0.1em; }
  .cs__bar b, .cs__who::before { display: none; }
  .cs__step--human { flex-wrap: wrap; }
  .cs__step--human em { margin-left: 27px; }
  .tenets ul { grid-template-columns: 1fr; }
  .tenets li { padding-left: 0; border-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .cs__dot, .cs__caret, .cs__step.is-run .cs__ic, .cs__step--human.is-run em { animation: none; }
}

/* ---------- Home: team pedigree band (team credibility, never shown as clients) ---------- */
.pband { position: relative; z-index: 3; display: flex; align-items: center; border-block: 1px solid var(--line); background: rgba(2, 3, 10, 0.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.pband__k { flex: none; margin: 0; padding: 0 28px 0 var(--pad); font: 500 10.5px/1.5 var(--mono); letter-spacing: 0.2em; text-transform: uppercase; color: var(--cyan); white-space: nowrap; }
.pband__view { position: relative; flex: 1; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.pband__track { display: flex; align-items: center; width: max-content; animation: marquee 60s linear infinite; }
.pband__track .lg { --lg-h: 22px; height: calc(var(--lg-h) * var(--k, 1)); width: auto; margin: 26px 0 26px 64px; filter: brightness(0) invert(1); opacity: 0.72; }
.pband:hover .pband__track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .pband__track { animation-duration: 300s; } }
@media (max-width: 640px) {
  .pband { flex-direction: column; align-items: stretch; }
  .pband__k { padding: 16px var(--pad) 0; white-space: normal; }
  .pband__track .lg { --lg-h: 18px; margin: 18px 0 20px 40px; }
}

/* Real results, relative numbers only. */
.results { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: clamp(30px, 5vh, 48px) 0 clamp(26px, 4vh, 40px); border-block: 1px solid var(--line); }
.result { padding: 26px 26px 24px 0; display: grid; gap: 8px; }
.result + .result { padding-left: 26px; border-left: 1px solid var(--line); }
.result b { font: 200 clamp(44px, 5vw, 76px)/1 var(--sans); letter-spacing: -0.04em; background: linear-gradient(180deg, #fff, #8ea7e8); -webkit-background-clip: text; background-clip: text; color: transparent; }
.result span { color: var(--ink-2); font-size: 15px; }
.results__note { grid-column: 1 / -1; margin: 0; padding: 14px 0; border-top: 1px solid var(--line); font: 400 11px/1.5 var(--mono); letter-spacing: 0.08em; color: var(--muted); }
.case__metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 22px; margin: 14px 0 20px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.case__metrics div { display: grid; gap: 6px; }
.case__metrics b { font: 200 clamp(34px, 3.4vw, 52px)/1 var(--sans); letter-spacing: -0.04em; color: #fff; }
.case__metrics span { color: var(--ink-2); font-size: 14px; line-height: 1.5; }
@media (max-width: 640px) {
  .results { grid-template-columns: 1fr; }
  .result + .result { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
  .sectors { grid-column: 1; }
}

/* ---------- Ecosystem: inside the products (products.js) ---------- */
/* The window is laid out at 1120 x 640 and scaled to the frame with --s, so it reads like a screenshot at any width. */
.links2 { display: flex; flex-wrap: wrap; gap: 0 34px; }
.prod { padding: clamp(100px, 16vh, 180px) 0; }
.prod__head { display: grid; gap: 18px; max-width: 760px; margin-bottom: clamp(28px, 5vh, 48px); }
.prod__head .lede { margin: 0; }
.prod__tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.prod__tabs button { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; border-radius: 99px; border: 1px solid var(--line); background: var(--glass); color: var(--ink-2); font: 400 14px/1.2 var(--sans); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: color 0.4s, border-color 0.4s, box-shadow 0.6s var(--ease); }
.prod__tabs button span { font: 500 10.5px/1 var(--mono); letter-spacing: 0.1em; color: var(--cyan); }
.prod__tabs button:hover { color: #fff; border-color: var(--line-2); }
.prod__tabs button.is-on { color: #fff; border-color: rgba(127, 227, 255, 0.55); box-shadow: 0 0 0 1px rgba(127, 227, 255, 0.18), 0 12px 40px -14px var(--cyan); }
.prod__frame { position: relative; aspect-ratio: 1120 / 640; }
.prod__shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 16px; }
.prod__shots button { position: relative; overflow: hidden; text-align: left; padding: 12px 16px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--glass); color: var(--ink-2); font: 400 14px/1.3 var(--sans); transition: color 0.4s, border-color 0.4s; }
.prod__shots button span { display: block; margin-bottom: 6px; font: 500 10.5px/1 var(--mono); letter-spacing: 0.1em; color: var(--cyan); }
.prod__shots button:hover, .prod__shots button.is-on { color: #fff; border-color: var(--line-2); }
.prod__shots button i { position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: linear-gradient(90deg, var(--bright), var(--cyan)); transform: scaleX(0); transform-origin: 0 50%; }
.prod__shots button.is-on i { transform: scaleX(1); opacity: 0.35; }
.prod__shots button.is-run i { opacity: 1; animation: shot var(--dwell, 6.5s) linear both; }
@keyframes shot { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.ui-win {
  position: absolute; left: 0; top: 0; width: 1120px; height: 640px; transform: scale(var(--s, 1)); transform-origin: 0 0;
  display: flex; flex-direction: column; overflow: hidden; border-radius: 18px; background: #070b1d; border: 1px solid rgba(150, 170, 255, 0.2);
  box-shadow: 0 60px 140px -60px rgba(45, 106, 255, 0.6), 0 30px 80px -40px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  font: 400 13px/1.45 var(--sans); color: #c9d2f2; letter-spacing: 0;
}
.ui-top { flex: none; height: 40px; display: flex; align-items: center; gap: 8px; padding: 0 16px; border-bottom: 1px solid rgba(150, 170, 255, 0.12); background: rgba(255, 255, 255, 0.02); }
.ui-top > i { width: 11px; height: 11px; border-radius: 50%; background: rgba(255, 255, 255, 0.16); }
.ui-top > span { flex: 1; text-align: center; font-size: 12px; color: #8d97c0; }
.ui-top > em { font: 500 10px/1 var(--mono); font-style: normal; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cyan); border: 1px solid rgba(127, 227, 255, 0.45); border-radius: 99px; padding: 5px 10px; }
.ui-app { flex: 1; min-height: 0; display: grid; grid-template-columns: 200px 1fr; }
.ui-side { display: flex; flex-direction: column; padding: 18px 14px; border-right: 1px solid rgba(150, 170, 255, 0.1); background: rgba(255, 255, 255, 0.015); }
.ui-brand { display: flex; align-items: center; gap: 10px; margin: 0 0 20px; padding: 0 6px; }
.ui-brand svg { width: 24px; height: 22px; }
.ui-brand b { font-weight: 600; font-size: 14px; color: #fff; }
.ui-side ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.ui-side li { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 9px; color: #8d97c0; }
.ui-side li i { width: 13px; height: 13px; border-radius: 4px; border: 1.5px solid currentColor; opacity: 0.7; }
.ui-side li.on { color: #fff; background: rgba(127, 227, 255, 0.08); }
.ui-side li.on i { border-color: var(--cyan); opacity: 1; }
.ui-user { margin: auto 0 0; display: flex; align-items: center; gap: 10px; padding: 0 6px; font-size: 12px; color: #8d97c0; }
.ui-user i { width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #7fe3ff, #2d6aff 60%, #173dc9); }
.ui-main { min-width: 0; padding: 18px 22px; display: flex; flex-direction: column; gap: 14px; overflow: hidden; }
.ui-head { display: flex; align-items: center; gap: 14px; }
.ui-head h4 { margin: 0; font-weight: 500; font-size: 19px; color: #fff; letter-spacing: -0.01em; }
.ui-head p { margin: 3px 0 0; display: flex; align-items: center; gap: 8px; font-size: 12px; color: #8d97c0; }
.ui-chip { margin-left: auto; }
.ui-search { margin-left: auto; width: 210px; padding: 8px 12px; border-radius: 9px; border: 1px solid rgba(150, 170, 255, 0.14); color: #5e6890; font-size: 12px; }
.ui-chip + .ui-search { margin-left: 0; }
.ui-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.ui-card { min-width: 0; display: flex; flex-direction: column; padding: 14px 16px; border-radius: 12px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(150, 170, 255, 0.12); }
.ui-kpi span { font-size: 12px; color: #8d97c0; }
.ui-kpi b { display: block; margin: 6px 0 4px; font-weight: 300; font-size: 26px; line-height: 1.15; letter-spacing: -0.02em; color: #fff; }
.ui-kpi em { font: 400 11.5px/1.3 var(--mono); font-style: normal; color: #8d97c0; }
.ui-kpi em.up { color: #5fe0a8; }
.ui-kpi em.down { color: #ff8a8a; }
.ui-row { flex: 1; min-height: 0; display: grid; gap: 12px; }
.ui-k { margin: 0 0 10px; display: flex; align-items: center; gap: 8px; font-weight: 500; font-size: 12.5px; color: #dfe5ff; }
.ui-k .ui-live { margin-left: auto; }
.ui-legend { display: flex; gap: 16px; margin: -4px 0 8px; font-size: 11px; color: #8d97c0; }
.ui-legend span::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--cyan); }
.ui-legend span.k2::before { background: var(--violet); }
.ui-chart { display: block; flex: 1; width: 100%; height: auto; min-height: 120px; overflow: visible; }
.ui-grid { stroke: rgba(150, 170, 255, 0.08); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ui-line { fill: none; stroke: var(--cyan); stroke-width: 2.2; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.ui-line--2 { stroke: var(--violet); opacity: 0.65; stroke-width: 1.6; }
.ui-area { fill: rgba(127, 227, 255, 0.07); }
.ui-band { fill: rgba(95, 224, 168, 0.07); stroke: rgba(95, 224, 168, 0.35); stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.ui-peak { fill: #ff8a8a; stroke: rgba(255, 138, 138, 0.35); stroke-width: 8; }
.ui-xs { display: flex; justify-content: space-between; margin-top: 6px; font: 400 10px/1 var(--mono); color: #5e6890; }
.ui-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.ui-table th { text-align: left; padding: 0 10px 8px 0; font-weight: 500; font-size: 11px; color: #6f7aa6; border-bottom: 1px solid rgba(150, 170, 255, 0.12); white-space: nowrap; }
.ui-table td { padding: 9px 10px 9px 0; border-bottom: 1px solid rgba(150, 170, 255, 0.07); white-space: nowrap; color: #c9d2f2; }
.ui-table tr:last-child td { border-bottom: 0; }
.ui-pill { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 99px; font-weight: 500; font-size: 11px; white-space: nowrap; }
.ui-pill--ok { color: #5fe0a8; background: rgba(95, 224, 168, 0.1); }
.ui-pill--warn { color: #ffc46b; background: rgba(255, 196, 107, 0.1); }
.ui-pill--bad { color: #ff8a8a; background: rgba(255, 138, 138, 0.1); }
.ui-pill--info { color: var(--cyan); background: rgba(127, 227, 255, 0.1); }
.ui-conf { display: inline-flex; align-items: center; gap: 8px; font: 400 11.5px/1 var(--mono); }
.ui-conf i { width: 56px; height: 4px; border-radius: 2px; background: rgba(150, 170, 255, 0.12); overflow: hidden; }
.ui-conf b { display: block; height: 100%; background: linear-gradient(90deg, var(--bright), var(--cyan)); }
/* Masked personal data: shown the way staff see it, with a lock. */
.ui-mask { color: #9aa6d6; letter-spacing: 0.04em; }
.ui-mask::after { content: ''; display: inline-block; width: 9px; height: 10px; margin-left: 6px; vertical-align: -1px; background: currentColor; opacity: 0.8;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 10'><path d='M2 4V3a2.5 2.5 0 0 1 5 0v1h.5A1.5 1.5 0 0 1 9 5.5v3A1.5 1.5 0 0 1 7.5 10h-6A1.5 1.5 0 0 1 0 8.5v-3A1.5 1.5 0 0 1 1.5 4H2Zm1 0h3V3a1.5 1.5 0 0 0-3 0v1Z'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 10'><path d='M2 4V3a2.5 2.5 0 0 1 5 0v1h.5A1.5 1.5 0 0 1 9 5.5v3A1.5 1.5 0 0 1 7.5 10h-6A1.5 1.5 0 0 1 0 8.5v-3A1.5 1.5 0 0 1 1.5 4H2Zm1 0h3V3a1.5 1.5 0 0 0-3 0v1Z'/></svg>") center / contain no-repeat; }
.ui-acts { display: flex; gap: 8px; margin-top: 12px; }
.ui-btn { display: inline-flex; align-items: center; padding: 8px 14px; border-radius: 9px; font-weight: 500; font-size: 12px; color: #fff; background: linear-gradient(180deg, var(--bright), var(--royal)); white-space: nowrap; }
.ui-btn--ghost { background: none; border: 1px solid rgba(150, 170, 255, 0.22); color: #c9d2f2; }
.ui-btn--sm { padding: 6px 10px; font-size: 11px; }
.ui-bars { display: grid; gap: 14px; margin-top: 6px; }
.ui-bar { display: grid; grid-template-columns: 96px 1fr 54px; align-items: center; gap: 10px; font-size: 12px; }
.ui-bar i { height: 8px; border-radius: 4px; background: rgba(150, 170, 255, 0.08); overflow: hidden; }
.ui-bar b { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--bright), var(--cyan)); transform-origin: 0 50%; }
.ui-bar em { font: 400 11.5px/1 var(--mono); font-style: normal; text-align: right; color: #dfe5ff; }
.ui-list { list-style: none; margin: 0; padding: 0; }
.ui-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid rgba(150, 170, 255, 0.07); font-size: 12.5px; }
.ui-list li:last-child { border-bottom: 0; }
.ui-list em { font-style: normal; color: #8d97c0; }
.ui-offer { display: grid; gap: 4px; margin-bottom: 14px; padding: 12px 14px; border-radius: 10px; border: 1px solid rgba(127, 227, 255, 0.25); background: rgba(127, 227, 255, 0.05); }
.ui-offer b { font-weight: 500; font-size: 16px; color: #fff; }
.ui-offer > span:first-of-type { font-size: 12px; color: var(--cyan); }
.ui-offer p { margin: 2px 0 8px; font-size: 12px; color: #8d97c0; }
.ui-offer .ui-btn { justify-self: start; }
.ui-profile { display: grid; justify-items: start; align-content: start; gap: 10px; }
.ui-ava { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; border: 1px dashed rgba(127, 227, 255, 0.45); }
.ui-ava i { width: 46px; height: 46px; border-radius: 50%; background: radial-gradient(circle at 50% 38%, rgba(127, 227, 255, 0.5) 0 7px, transparent 8px), radial-gradient(ellipse 15px 11px at 50% 92%, rgba(127, 227, 255, 0.5) 0 100%, transparent 101%), rgba(127, 227, 255, 0.06); }
.ui-profile > b { font-weight: 500; font-size: 16px; }
.ui-profile dl { width: 100%; margin: 6px 0 0; display: grid; gap: 8px; }
.ui-profile dl div { display: flex; justify-content: space-between; gap: 10px; padding-bottom: 8px; border-bottom: 1px solid rgba(150, 170, 255, 0.07); }
.ui-profile dt { color: #6f7aa6; }
.ui-profile dd { margin: 0; }
.ui-note { margin: 4px 0 0; display: flex; align-items: center; gap: 6px; font-size: 11px; color: #6f7aa6; }
.ui-note i { width: 7px; height: 7px; border-radius: 50%; background: #5fe0a8; }
.ui-chat { display: flex; flex-direction: column; gap: 12px; height: 100%; }
.ui-msg { display: flex; gap: 10px; max-width: 76%; }
.ui-msg p { margin: 0; padding: 10px 14px; font-size: 13px; }
.ui-msg--me { align-self: flex-end; }
.ui-msg--me p { color: #fff; border-radius: 14px 14px 4px 14px; background: linear-gradient(180deg, var(--bright), var(--royal)); }
.ui-msg--ai > div { padding: 0; }
.ui-msg--ai p { border-radius: 14px 14px 14px 4px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(150, 170, 255, 0.14); }
.ui-ai { flex: none; width: 28px; height: 28px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #7fe3ff 30%, #2d6aff 70%); box-shadow: 0 0 16px rgba(127, 227, 255, 0.5); }
.ui-mini { display: flex; align-items: flex-end; gap: 16px; margin: 10px 0 6px 2px; }
.ui-mini span { display: grid; justify-items: center; gap: 3px; font-size: 10.5px; color: #8d97c0; }
.ui-mini b { width: 26px; border-radius: 4px 4px 0 0; background: linear-gradient(180deg, var(--cyan), var(--bright)); }
.ui-mini b.neg { background: #ff8a8a; }
.ui-mini em { font: 400 10.5px/1 var(--mono); font-style: normal; color: #dfe5ff; }
.ui-msg small { display: block; margin-left: 2px; font-size: 10.5px; color: #6f7aa6; }
.ui-typing { display: flex; gap: 4px; padding-left: 38px; }
.ui-typing i { width: 6px; height: 6px; border-radius: 50%; background: #8d97c0; animation: ui-dot 1.2s ease-in-out infinite; }
.ui-typing i:nth-child(2) { animation-delay: 0.15s; }
.ui-typing i:nth-child(3) { animation-delay: 0.3s; }
.ui-input { margin-top: auto; display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(150, 170, 255, 0.16); color: #5e6890; }
.ui-input i { width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(180deg, var(--cyan), var(--bright)); }
.ui-doc { padding: 16px; display: grid; place-items: center; }
.ui-paper { position: relative; width: 300px; height: 360px; padding: 22px 22px; border-radius: 6px; background: #edf0f7; color: #2b3352; display: flex; flex-direction: column; gap: 9px; font-size: 11px; box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.8); }
.ui-paper > b { font-weight: 700; font-size: 12px; letter-spacing: 0.04em; color: #1a2140; margin-bottom: 6px; }
.ui-paper > i { display: block; height: 7px; border-radius: 3px; background: #c9cfdf; }
.ui-paper > i.s { width: 60%; }
.ui-paper .hl { align-self: flex-start; padding: 2px 6px; border-radius: 4px; outline: 1.5px solid rgba(45, 106, 255, 0.9); background: rgba(45, 106, 255, 0.1); color: #1a2140; }
.ui-paper .ui-mask { color: #4a5478; }
.ui-paper .tot { margin-top: auto; align-self: flex-end; font-weight: 700; font-size: 13px; }
.ui-alerts { display: grid; gap: 10px; align-content: start; }
.ui-alert { display: grid; grid-template-columns: 52px 1fr; gap: 12px; align-items: start; }
.ui-score { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font: 500 15px/1 var(--mono); border: 2px solid currentColor; }
.ui-alert--bad .ui-score { color: #ff8a8a; }
.ui-alert--warn .ui-score { color: #ffc46b; }
.ui-alert--ok .ui-score { color: #5fe0a8; }
.ui-alert b { font-weight: 500; font-size: 13.5px; color: #fff; }
.ui-alert p { margin: 3px 0 8px; font-size: 12px; color: #8d97c0; }
.ui-alert div div { display: flex; gap: 6px; }
.ui-report { display: grid; gap: 14px; align-content: start; }
.ui-sec b { font-weight: 500; font-size: 13px; color: #fff; }
.ui-sec p { margin: 4px 0 6px; font-size: 12px; color: #8d97c0; }
.ui-sec i { display: block; height: 6px; margin-top: 6px; width: 92%; border-radius: 3px; background: rgba(150, 170, 255, 0.1); }
.ui-sec i.s { width: 62%; }
.ui-flow { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.ui-flow li { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: #8d97c0; }
.ui-flow li i { flex: none; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid #3a4470; }
.ui-flow li.is-ok { color: #dfe5ff; }
.ui-flow li.is-ok i { border: 0; background: #5fe0a8; }
.ui-flow li.is-warn { color: #fff; }
.ui-flow li.is-warn i { border: 2px solid #ffc46b; animation: ui-pulse 1.4s ease-in-out infinite; }
.ui-plan { display: block; width: 100%; height: auto; }
.ui-plan .z { fill: rgba(255, 255, 255, 0.02); stroke: rgba(150, 170, 255, 0.16); }
.ui-plan .z2 { fill: rgba(127, 227, 255, 0.035); stroke: rgba(150, 170, 255, 0.12); }
.ui-plan text { fill: #6f7aa6; font: 400 14px var(--sans); }
.ui-plan .dv--ok { fill: #5fe0a8; }
.ui-plan .dv--warn { fill: #ffc46b; animation: ui-pulse 1.4s ease-in-out infinite; }
.ui-plan .dv--bad { fill: #ff8a8a; animation: ui-pulse 1s ease-in-out infinite; }
.ui-live { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #5fe0a8; box-shadow: 0 0 0 0 rgba(95, 224, 168, 0.6); animation: ui-ping 1.6s ease-out infinite; }
/* Each screen settles in: header, figures, then the body; lines draw and bars grow. */
.ui-win.is-in .ui-head, .ui-win.is-in .ui-kpis, .ui-win.is-in .ui-row { animation: ui-in 0.6s var(--ease) both; }
.ui-win.is-in .ui-kpis { animation-delay: 0.06s; }
.ui-win.is-in .ui-row { animation-delay: 0.12s; }
.ui-win.is-in .ui-line { stroke-dashoffset: 1; animation: ui-draw 1.4s var(--ease) 0.25s forwards; }
.ui-win.is-in .ui-bar b, .ui-win.is-in .ui-conf b { animation: ui-grow 1s var(--ease) 0.3s both; }
.ui-win.is-in .ui-paper .hl { animation: ui-hl 0.5s var(--ease) both; animation-delay: calc(0.5s + var(--d) * 0.35s); }
.ui-win.is-in .ui-sec { animation: ui-in 0.6s var(--ease) both; animation-delay: calc(0.2s + var(--d) * 0.12s); }
@keyframes ui-in { from { opacity: 0; transform: translateY(10px); } }
@keyframes ui-draw { to { stroke-dashoffset: 0; } }
@keyframes ui-grow { from { transform: scaleX(0); } }
@keyframes ui-hl { from { outline-color: transparent; background-color: transparent; } }
@keyframes ui-dot { 0%, 100% { opacity: 0.25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }
@keyframes ui-pulse { 50% { opacity: 0.35; } }
@keyframes ui-ping { to { box-shadow: 0 0 0 8px rgba(95, 224, 168, 0); } }
@media (max-width: 640px) {
  .prod__tabs { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--pad) * -1); padding: 0 var(--pad) 4px; scrollbar-width: none; }
  .prod__tabs button { flex: none; }
  .prod__shots { grid-template-columns: 1fr; }
  .prod__shots button { padding: 10px 14px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .ui-win.is-in *, .ui-live, .ui-typing i, .ui-plan .dv--warn, .ui-plan .dv--bad, .ui-flow li.is-warn i { animation: none !important; }
  .ui-win .ui-line { stroke-dashoffset: 0; }
}

/* ---------- Privacy (6 Oct 2026): the notice, footer links, consent boxes, the policy page ---------- */
.consent {
  position: fixed; left: max(16px, calc(var(--pad) * 0.6)); bottom: 16px; z-index: 34; width: min(400px, calc(100% - 32px));
  display: grid; gap: 10px; padding: 20px 22px; border-radius: 22px; border-color: var(--line-2);
  background: linear-gradient(160deg, rgba(16, 23, 58, 0.94), rgba(5, 8, 22, 0.95));
  animation: consent-in 0.7s var(--ease) both;
}
.consent[hidden] { display: none; }
.consent__t { margin: 0; font: 500 10.5px/1.4 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--cyan); }
.consent__p { margin: 0; color: var(--ink-2); font-size: 13.5px; line-height: 1.65; }
.consent__p a, .fcheck a, .fform__alt a, .fform__alt button, .legal__body a, .faq__i a, .secg__i a, .nxc__note a {
  color: var(--ink); text-decoration: underline; text-decoration-color: rgba(127, 227, 255, 0.5); text-underline-offset: 3px;
}
.consent__btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.consent__btns .btn { height: 42px; padding: 0 22px; font-size: 13px; }
@keyframes consent-in { from { opacity: 0; transform: translateY(18px); } }
@media (prefers-reduced-motion: reduce) { .consent { animation: none; } }
@media (max-width: 640px) {
  .consent { left: 12px; right: 12px; bottom: 12px; width: auto; }
  .consent__btns .btn { flex: 1; }
}

.foot__pol { display: inline-flex; flex-wrap: wrap; gap: 6px 18px; }
.foot__pol a, .foot__pol button {
  padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit;
  cursor: pointer; transition: color 0.3s;
}
.foot__pol a:hover, .foot__pol button:hover { color: var(--ink); }

/* Consent boxes: never ticked in advance (silence is not consent under Vietnamese law). */
.fcheck { display: flex; align-items: flex-start; gap: 12px; margin-top: 16px; color: var(--ink-2); font-size: 13px; line-height: 1.6; cursor: pointer; }
.fcheck + .fcheck { margin-top: 10px; }
.fcheck input {
  appearance: none; -webkit-appearance: none; flex: none; display: grid; place-items: center; width: 18px; height: 18px; margin: 2px 0 0;
  border: 1px solid var(--line-2); border-radius: 5px; background: rgba(255, 255, 255, 0.04); cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.fcheck input::after { content: ''; width: 9px; height: 5px; border: 2px solid #02030a; border-top: 0; border-right: 0; transform: translateY(-1px) rotate(-45deg); opacity: 0; }
.fcheck input:checked { background: var(--cyan); border-color: var(--cyan); }
.fcheck input:checked::after { opacity: 1; }
.fcheck input:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.fform__alt { margin: 8px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; color: var(--muted); font-size: 13px; }
.fform__alt[hidden] { display: none; }
.fform__alt button { padding: 0; border: 0; background: none; font: inherit; cursor: pointer; }

/* The policy page: the summary stays beside the text on wide screens. */
.legal { padding: calc(var(--nav-h) + clamp(50px, 9vh, 90px)) 0 clamp(80px, 12vh, 140px); }
.legal__grid { display: grid; grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.5fr); gap: 44px 56px; align-items: start; }
.legal__head { grid-column: 1 / -1; max-width: 860px; }
.legal__upd { margin: 20px 0 0; font: 400 10.5px/1.4 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.legal__sum { position: sticky; top: calc(var(--nav-h) + 30px); padding: 26px 26px 28px; border-radius: 22px; }
.legal__k { margin: 0 0 16px; font: 500 10.5px/1.4 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--cyan); }
.legal__sum ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.legal__sum li { position: relative; padding-left: 18px; color: var(--ink-2); font-size: 14.5px; line-height: 1.6; }
.legal__sum li::before { content: ''; position: absolute; left: 0; top: 0.6em; width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }
.legal__docs { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--line); scroll-margin-top: calc(var(--nav-h) + 30px); }
.legal__doc {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; margin: 0 0 10px; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: 14px; color: var(--ink); text-decoration: none; transition: border-color 0.3s, background 0.3s;
}
.legal__doc:hover { border-color: rgba(127, 227, 255, 0.45); background: rgba(36, 71, 240, 0.12); }
.legal__doc b { display: block; font-weight: 500; font-size: 14px; line-height: 1.45; }
.legal__doc small { display: block; margin-top: 4px; font: 400 10.5px/1.5 var(--mono); letter-spacing: 0.04em; color: var(--muted); }
.legal__ico { width: 18px; height: 18px; margin-top: 1px; fill: none; stroke: var(--cyan); stroke-width: 1.5; stroke-linejoin: round; }
.legal__note { margin: 4px 0 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.legal__body { max-width: 820px; padding: clamp(26px, 4vw, 52px); border-radius: 26px; }
.legal__body h2 { margin: 40px 0 12px; font: 300 clamp(20px, 1.8vw, 25px)/1.3 var(--sans); letter-spacing: -0.02em; color: var(--ink); scroll-margin-top: calc(var(--nav-h) + 30px); }
.legal__body h2:first-child { margin-top: 0; }
.legal__body p, .legal__body li { color: var(--ink-2); font-size: 15px; line-height: 1.8; }
.legal__body p { margin: 0 0 12px; }
.legal__body b { font-weight: 500; color: var(--ink); }
.legal__body ul { margin: 0 0 12px; padding-left: 20px; }
.legal__body li { margin: 4px 0; }
.legal__body li::marker { color: var(--cyan); }
.legal__body .legal__actions { margin: 36px 0 0; }
@media (max-width: 900px) {
  .legal__grid { grid-template-columns: 1fr; gap: 28px; }
  .legal__sum { position: static; }
}

/* Contact: questions buyers ask before the first meeting. */
.faq { padding: clamp(30px, 6vh, 70px) 0 clamp(70px, 11vh, 130px); }
.faq__head { max-width: 760px; }
.faq__list { max-width: 920px; margin: 40px 0 0; border-top: 1px solid var(--line); }
.faq__i { border-bottom: 1px solid var(--line); }
.faq__i summary {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 0; list-style: none; cursor: pointer;
  font: 300 clamp(17px, 1.45vw, 20px)/1.4 var(--sans); color: var(--ink);
}
.faq__i summary::-webkit-details-marker { display: none; }
.faq__i summary::after { content: '+'; flex: none; font: 200 26px/1 var(--sans); color: var(--cyan); transition: transform 0.4s var(--ease); }
.faq__i[open] summary::after { transform: rotate(45deg); }
.faq__i summary:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; border-radius: 6px; }
.faq__i p { max-width: 70ch; margin: -4px 0 24px; color: var(--ink-2); font-size: 15px; line-height: 1.75; }

/* Security rule 05 spans both columns; the experienced card says what the job involves. */
.secg__i--wide { grid-column: 1 / -1; }
.rolex__k { margin: 18px 0 8px; font: 500 10.5px/1.4 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--cyan); }
.rolex__list { margin: 0; padding: 0 0 0 18px; max-width: 70ch; color: var(--ink-2); font-size: 14px; line-height: 1.65; }
.rolex__list li { margin: 4px 0; }
.rolex__list li::marker { color: var(--cyan); }

/* ---------- Era, the site guide (era.js): avatar button, greeting, chat panel, and the highlight she leaves ---------- */
.era { position: fixed; right: max(14px, calc(var(--pad) * 0.5)); bottom: 18px; z-index: 34; display: grid; justify-items: end; gap: 12px; pointer-events: none; }
.era > * { pointer-events: auto; }
.era__fab {
  position: relative; width: 64px; height: 64px; padding: 0; border-radius: 50%; border: 1px solid transparent; cursor: pointer;
  background: linear-gradient(#060a1c, #060a1c) padding-box, var(--iri) border-box;
  box-shadow: 0 14px 40px -10px rgba(45, 106, 255, 0.8), 0 0 0 6px rgba(127, 227, 255, 0.06);
  animation: era-float 5s ease-in-out infinite; transition: transform 0.4s var(--ease), box-shadow 0.4s;
}
.era__fab:hover { transform: translateY(-2px) scale(1.05); box-shadow: 0 18px 50px -10px rgba(45, 106, 255, 0.95), 0 0 0 8px rgba(127, 227, 255, 0.1); }
.era__fab:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; }
/* Signs that she is there to help, kept quiet: a chat badge that "types" now and then, a soft pulse until she has been
   opened once, and an "Ask Era" label on hover or keyboard focus. */
.era__badge {
  position: absolute; right: -5px; bottom: -3px; display: flex; align-items: center; justify-content: center; gap: 2px;
  width: 25px; height: 19px; border-radius: 10px 10px 10px 3px; border: 2px solid #060a1c;
  background: linear-gradient(160deg, #a8f2ff, #4d8dff); box-shadow: 0 0 12px rgba(127, 227, 255, 0.75);
}
.era__badge b { width: 3px; height: 3px; border-radius: 50%; background: #071440; animation: era-type 5s ease-in-out infinite; }
.era__badge b:nth-child(2) { animation-delay: 0.15s; }
.era__badge b:nth-child(3) { animation-delay: 0.3s; }
@keyframes era-type { 0%, 62%, 100% { transform: none; } 68% { transform: translateY(-2px); } 74% { transform: none; } }
.era__fab::after {
  content: ''; position: absolute; inset: -1px; border-radius: 50%; pointer-events: none; border: 1px solid rgba(127, 227, 255, 0.7);
  opacity: 0; animation: era-ping 6s ease-out 3s infinite;
}
@keyframes era-ping { 0% { opacity: 0.8; transform: scale(1); } 22% { opacity: 0; transform: scale(1.7); } 100% { opacity: 0; transform: scale(1.7); } }
.era--met .era__fab::after, .era.is-open .era__fab::after, .era__fab:hover::after, .era__fab:focus-visible::after { animation: none; }
.era__tag {
  position: absolute; right: calc(100% + 12px); top: 50%; padding: 8px 14px; border-radius: 999px; white-space: nowrap; pointer-events: none;
  font: 500 12.5px/1 var(--sans); color: var(--ink); border: 1px solid var(--line-2);
  background: linear-gradient(160deg, rgba(20, 30, 74, 0.96), rgba(6, 9, 26, 0.96)); box-shadow: 0 14px 40px -14px rgba(0, 0, 0, 0.8);
  opacity: 0; transform: translate(8px, -50%); transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}
.era__fab:hover .era__tag, .era__fab:focus-visible .era__tag { opacity: 1; transform: translate(0, -50%); }
.era.is-open .era__tag { display: none; }
@media (hover: none) { .era__tag { display: none; } }
.era.is-open .era__fab { animation: none; }
@keyframes era-float { 50% { transform: translateY(-4px); } }

.era__hello {
  position: relative; max-width: 270px; padding: 12px 34px 12px 14px; border-radius: 16px 16px 4px 16px; border: 1px solid var(--line-2);
  background: linear-gradient(160deg, rgba(20, 30, 74, 0.96), rgba(6, 9, 26, 0.96)); box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.8);
  color: var(--ink-2); font-size: 13.5px; line-height: 1.55; cursor: pointer; animation: consent-in 0.6s var(--ease) both;
}
.era__hello[hidden] { display: none; }
.era__hello p { margin: 0; }
.era__hello b { color: var(--cyan); font-weight: 500; }
.era__x { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--muted); cursor: pointer; }
.era__x::before, .era__close::before { content: '\00d7'; font: 300 20px/1 var(--sans); }
.era__x:hover, .era__close:hover { color: var(--ink); }

.era__panel {
  width: min(390px, calc(100vw - 28px)); height: min(580px, calc(100svh - 130px)); display: flex; flex-direction: column; overflow: hidden;
  border-radius: 24px; border: 1px solid var(--line-2); background: linear-gradient(170deg, rgba(14, 21, 56, 0.97), rgba(4, 6, 18, 0.98));
  box-shadow: 0 40px 100px -30px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(127, 227, 255, 0.05); animation: consent-in 0.45s var(--ease) both;
}
.era__panel[hidden] { display: none; }
.era__head { display: flex; align-items: center; gap: 12px; padding: 14px 14px 12px 16px; border-bottom: 1px solid var(--line); }
.era__ava { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: radial-gradient(circle at 50% 75%, rgba(45, 106, 255, 0.5), #060a1c 70%); box-shadow: 0 0 0 2px rgba(127, 227, 255, 0.35), 0 0 22px rgba(45, 106, 255, 0.6); }
.era__ava .mc { width: 46px; height: 46px; margin-top: -8px; }
.era__who { flex: 1; min-width: 0; }
.era__name { margin: 0; font: 300 19px/1.1 var(--sans); letter-spacing: -0.01em; color: var(--ink); }
.era__role { margin: 4px 0 0; font: 400 10px/1.3 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--cyan); }
.era__close { width: 34px; height: 34px; padding: 0; border: 1px solid var(--line-2); border-radius: 50%; background: rgba(255, 255, 255, 0.03); color: var(--ink-2); cursor: pointer; }
.era__log { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 16px 14px 8px; overscroll-behavior: contain; }
.era-m { max-width: 88%; padding: 11px 14px; border-radius: 16px; font-size: 14px; line-height: 1.6; color: var(--ink-2); }
.era-m p { margin: 0; }
.era-m--bot { align-self: flex-start; border-bottom-left-radius: 5px; background: rgba(255, 255, 255, 0.045); border: 1px solid var(--line); }
.era-m--me { align-self: flex-end; border-bottom-right-radius: 5px; color: var(--ink); background: linear-gradient(160deg, rgba(45, 106, 255, 0.55), rgba(23, 61, 201, 0.55)); }
.era-m .era-m__src { margin-bottom: 8px; font: 400 10px/1.4 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--cyan); }
.era-m__q { margin: 0; padding-left: 12px; border-left: 2px solid rgba(127, 227, 255, 0.6); color: var(--ink); }
.era-m__go { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.era-m__go a { padding: 7px 12px; border-radius: 999px; border: 1px solid rgba(127, 227, 255, 0.35); color: var(--ink); font-size: 12.5px; text-decoration: none; transition: background 0.3s, border-color 0.3s; }
.era-m__go a::after { content: ' \2192'; color: var(--cyan); }
.era-m__go a:hover { background: rgba(127, 227, 255, 0.08); border-color: rgba(127, 227, 255, 0.6); }
.era-typing::before { content: '\2022\2022\2022'; letter-spacing: 3px; color: var(--cyan); animation: era-blink 1s ease-in-out infinite; }
@keyframes era-blink { 50% { opacity: 0.3; } }
.era__chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 14px 4px; }
.era-chip {
  padding: 7px 11px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, 0.03); color: var(--ink-2);
  font: 400 12.5px/1.2 var(--sans); cursor: pointer; transition: color 0.3s, border-color 0.3s, background 0.3s;
}
.era-chip:hover { color: var(--ink); border-color: rgba(127, 227, 255, 0.5); background: rgba(127, 227, 255, 0.06); }
.era__ask { display: flex; gap: 8px; padding: 10px 14px 6px; }
.era__ask input {
  flex: 1; min-width: 0; height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, 0.04);
  color: var(--ink); font: 400 14px/1 var(--sans); outline: 0; transition: border-color 0.3s, box-shadow 0.3s;
}
.era__ask input:focus { border-color: rgba(127, 227, 255, 0.5); box-shadow: 0 0 0 4px rgba(127, 227, 255, 0.07); }
.era__ask input::placeholder { color: var(--faint); }
.era__ask button {
  flex: none; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border-radius: 50%; border: 1px solid transparent; cursor: pointer; color: var(--ink);
  background: linear-gradient(180deg, rgba(23, 61, 201, 0.75), rgba(8, 14, 44, 0.95)) padding-box, var(--iri) border-box;
}
.era__ask .ico { width: 16px; height: 16px; }
.era__note { margin: 0; padding: 4px 16px 12px; color: var(--faint); font-size: 11px; line-height: 1.5; }

/* What Era points to, once the visitor arrives there. */
.era-spot { border-radius: 10px; animation: era-spot 2.8s var(--ease) both; }
@keyframes era-spot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(127, 227, 255, 0); background-color: transparent; }
  15%, 70% { box-shadow: 0 0 0 6px rgba(127, 227, 255, 0.22), 0 0 40px rgba(127, 227, 255, 0.35); background-color: rgba(127, 227, 255, 0.07); }
}
@media (prefers-reduced-motion: reduce) {
  .era__fab, .era__hello, .era__panel, .era__fab::after, .era__badge b { animation: none; }
  .era-spot { animation: none; outline: 2px solid var(--cyan); outline-offset: 6px; }
}
@media (max-width: 640px) {
  .era { right: 12px; bottom: 12px; }
  .hud--bl { right: 84px; }  /* the hero's location lines wrap before Era's button */
  .era__fab { width: 56px; height: 56px; }
  .era.is-open { left: 8px; right: 8px; bottom: 8px; }
  .era.is-open .era__fab { display: none; }
  .era__panel { width: 100%; height: min(80svh, 640px); }
  /* The privacy notice takes the bottom of a phone screen; Era waits until it is answered. */
  body:has(#consent:not([hidden])) .era { display: none; }
}

/* ---------- Contact: Era's brief (brief.js), read in the browser and sent with the enquiry ---------- */
.fform__era { margin: -12px 0 20px; max-width: 52ch; font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }
.ebrief { grid-column: 1 / -1; display: grid; justify-items: start; gap: 8px; padding: 16px 18px; border-radius: 16px; border: 1px solid rgba(127, 227, 255, 0.28); background: linear-gradient(180deg, rgba(45, 106, 255, 0.12), rgba(127, 227, 255, 0.04)); animation: ebrief-in 0.5s var(--ease); }
.ebrief[hidden] { display: none; }
.ebrief__k { display: flex; align-items: center; gap: 10px; margin: 0 0 2px; font: 500 10.5px/1.4 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--cyan); }
.ebrief__k .mc { flex: none; width: 28px; height: 28px; margin: -6px 0 -2px; }
.ebrief__l { margin: 4px 0 0; font: 400 10px/1.4 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.ebrief__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ebrief__chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 999px; border: 1px solid rgba(127, 227, 255, 0.3); background: rgba(2, 3, 10, 0.35); font-size: 12.5px; color: var(--ink); }
.ebrief__chip b { font: 500 10px/1 var(--mono); color: var(--cyan); }
.ebrief__case { font-size: 13.5px; line-height: 1.5; color: var(--ink); text-decoration: underline; text-decoration-color: rgba(127, 227, 255, 0.45); text-underline-offset: 3px; }
.ebrief__hint { margin: 4px 0 0; font-size: 13px; line-height: 1.55; color: var(--ink-2); }
.ebrief__fine { margin: 2px 0 0; font-size: 11.5px; line-height: 1.55; color: var(--muted); }
@keyframes ebrief-in { from { opacity: 0; transform: translateY(6px); } }
.fld--hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.foot__mail span { display: block; margin-bottom: 3px; font: 400 10px/1.4 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }

/* ---------- Careers: experienced roles (the HR system's portal once data-hrm is set) ---------- */
.rolex__cta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
[data-hrm-on][hidden], [data-hrm-off][hidden] { display: none; }

/* ---------- Home: all eight case studies ---------- */
.casep__grid--8 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.casep__grid--8 .casec { min-height: 220px; padding: 22px 22px 24px; }
.casep__grid--8 .casec__n { font-size: 44px; }
.casep__grid--8 .casec__t { font-size: 18px; }
@media (max-width: 1100px) { .casep__grid--8 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .casep__grid--8 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .casep__grid--8 .casec { gap: 10px; padding: 16px 16px 18px; border-radius: 20px; }
  .casep__grid--8 .casec__n { font-size: 32px; }
  .casep__grid--8 .casec__t { font-size: 15px; }
  .casep__grid--8 .casec__k { letter-spacing: 0.1em; }
}
@media (prefers-reduced-motion: reduce) { .ebrief { animation: none; } }

/* ---------- Era, the guide and mascot (mascot.js): an explorer that flies one step ahead, at home in the chat button --
   The drawing is in the shared chrome (.era__mc), sitting in the button with its antenna star poking out of the ring.
   Its parts move on their own clocks with rests between, so the small SVG repaints only now and then; the hover and the
   hops move the whole drawing, which the compositor handles. */
.era { gap: 22px; }
.era__panel { height: min(580px, calc(100svh - 140px)); }
.era__fab { box-shadow: inset 0 -14px 24px -8px rgba(45, 106, 255, 0.55), 0 14px 40px -10px rgba(45, 106, 255, 0.8), 0 0 0 6px rgba(127, 227, 255, 0.06); }
.era__fab:hover { box-shadow: inset 0 -14px 24px -8px rgba(45, 106, 255, 0.7), 0 18px 50px -10px rgba(45, 106, 255, 0.95), 0 0 0 8px rgba(127, 227, 255, 0.1); }
.era__mc { position: absolute; left: 1px; top: -12px; width: 62px; height: 62px; pointer-events: none; }
.era__mc.is-away { visibility: hidden; }
.mc { display: block; width: 100%; height: 100%; overflow: visible; }
.era__mc .mc, .mcbig .mc { animation: mc-hover 3.6s ease-in-out infinite; filter: drop-shadow(0 6px 12px rgba(45, 106, 255, 0.5)); }
.era__fab:hover .era__mc .mc, .mcbig:hover .mc { animation: mc-hop 0.6s var(--ease) both; }
.era__mc.is-landing .mc { animation: mc-land 0.65s var(--ease) both; }
@keyframes mc-hover { 50% { transform: translateY(-3px); } }
@keyframes mc-hop { 0% { transform: none; } 35% { transform: translateY(-9px) rotate(-6deg); } 70% { transform: translateY(1px) rotate(3deg); } 100% { transform: none; } }
@keyframes mc-land { 0% { transform: translateY(-6px) rotate(-10deg) scale(1.05); } 55% { transform: translateY(2px) rotate(4deg) scale(0.97); } 100% { transform: none; } }
/* Parts: a blink, a glance each way, the star twinkling, the scarf rippling, the jet flickering, a wave now and then. */
.mc__eyes { transform-origin: 60px 49px; animation: mc-blink 5.2s infinite; }
@keyframes mc-blink { 0%, 93%, 100% { transform: none; } 95% { transform: scaleY(0.1); } }
.mc__look { animation: mc-look 10s ease-in-out infinite; }
@keyframes mc-look { 0%, 26%, 82%, 100% { transform: none; } 32%, 46% { transform: translate(-3.5px, 0.5px); } 54%, 72% { transform: translate(3px, -1px); } }
.mc__star { transform-origin: 64px 6px; animation: mc-twinkle 3.2s ease-in-out infinite; }
@keyframes mc-twinkle { 0%, 60%, 100% { transform: none; } 75% { transform: scale(1.35) rotate(45deg); } }
.mc__tails { transform-origin: 87px 76px; animation: mc-scarf 2.8s ease-in-out infinite; }
@keyframes mc-scarf { 0%, 100% { transform: none; } 50% { transform: rotate(-7deg) scaleX(1.05); } }
.mc__jet { transform-origin: 60px 106px; animation: mc-jet 1.6s ease-in-out infinite; }
@keyframes mc-jet { 50% { transform: scale(0.82, 0.9); opacity: 0.7; } }
.mc__fin--l { transform-origin: 28px 70px; }
.mc__fin--r { transform-origin: 92px 70px; animation: mc-wave 12s ease-in-out infinite 3s; }
@keyframes mc-wave { 0%, 88%, 100% { transform: none; } 91%, 97% { transform: rotate(-26deg); } 94% { transform: rotate(-6deg); } }
/* Happy: smiling eyes and fins flapping, when the chat opens and when Era talks. */
.mc__happy, .mc__scope { display: none; }
.mc.is-cheer .mc__eyes { display: none; }
.mc.is-cheer .mc__happy { display: inline; }
.mc.is-cheer .mc__fin--l { animation: mc-cheer-l 0.35s ease-in-out 4 alternate; }
.mc.is-cheer .mc__fin--r { animation: mc-cheer-r 0.35s ease-in-out 4 alternate; }
@keyframes mc-cheer-l { to { transform: rotate(28deg); } }
@keyframes mc-cheer-r { to { transform: rotate(-28deg); } }
/* In flight: leaning in, scarf straight out, jet bright, a light trail behind. */
.mc.is-flying .mc__all, .mc.is-cruise .mc__all { transform: rotate(-12deg); transform-origin: 60px 60px; }
.mc.is-flying .mc__tails { animation-duration: 0.5s; }
.mc.is-flying .mc__jet { animation: none; transform: scale(1.3, 1.1); }
.mcfly { position: fixed; left: 0; top: 0; z-index: 35; width: 50px; height: 50px; pointer-events: none; will-change: transform; transform: translate3d(-200px, 0, 0); }
.mcfly::before {
  content: ''; position: absolute; left: 66%; top: 60%; width: 150%; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, rgba(127, 227, 255, 0.85), rgba(45, 106, 255, 0.35) 45%, transparent);
}
.mcfly .mc { filter: drop-shadow(0 8px 16px rgba(45, 106, 255, 0.55)); }
/* The 404 page: Era searching through a spyglass. */
.mc.is-lost .mc__scope { display: inline; }
.mc.is-lost .mc__look { animation: none; transform: translate(-3px, -2px); }
.mc.is-lost .mc__fin--l { transform: rotate(48deg); }

/* About 05: Era's story beside a window on the planet's horizon. */
.mcsec { position: relative; padding: clamp(110px, 18vh, 200px) 0 clamp(80px, 12vh, 140px); }
.mcsec__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(36px, 5vw, 96px); align-items: center; }
.mcsec__p { margin: 26px 0 0; max-width: 56ch; color: var(--ink-2); font-size: clamp(15px, 1.15vw, 18px); line-height: 1.8; }
.mcsec__p + .mcsec__p { margin-top: 16px; }
.mcsec__facts { margin: 36px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.mcsec__facts div { padding: 18px 18px 0 0; }
.mcsec__facts dt { font: 400 10.5px/1.4 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--cyan); }
.mcsec__facts dd { margin: 8px 0 0; color: var(--ink); font-size: 14.5px; line-height: 1.5; }
.mchz { position: relative; margin: 0; width: 100%; max-width: 560px; aspect-ratio: 1; justify-self: end; }
.mchz__scene { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 0 44px rgba(45, 106, 255, 0.28)); }
.mchz__route { animation: mc-route 5s linear infinite; }
@keyframes mc-route { to { stroke-dashoffset: -45; } }
.mchz__stars .tw { animation: mc-tw 3.4s ease-in-out infinite; }
.mchz__stars .tw:nth-child(3n) { animation-delay: -1.2s; }
.mchz__stars .tw:nth-child(3n + 1) { animation-delay: -2.3s; }
@keyframes mc-tw { 50% { opacity: 0.25; } }
.mchz__goal { transform-origin: 334px 72px; animation: mc-goal 4s ease-in-out infinite; }
@keyframes mc-goal { 50% { transform: scale(1.14); opacity: 0.85; } }
.mchz.is-off *, .nf__mc.is-off * { animation-play-state: paused !important; }
.mcbig { position: absolute; left: 25%; top: 24%; width: 46%; aspect-ratio: 1; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 50%; }
.mcbig .mc { filter: drop-shadow(0 18px 40px rgba(45, 106, 255, 0.55)); }
.mcsay {
  position: absolute; left: 58%; bottom: 74%; z-index: 2; width: max-content; max-width: min(300px, 72vw); margin: 0; padding: 12px 16px; pointer-events: none;
  border-radius: 18px 18px 18px 5px; border: 1px solid var(--line-2); background: linear-gradient(160deg, rgba(20, 30, 74, 0.96), rgba(6, 9, 26, 0.96));
  box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.8); color: var(--ink); font-size: 14px; line-height: 1.55;
  opacity: 0; transform: translateY(8px) scale(0.96); transform-origin: 0 100%; transition: opacity 0.4s var(--ease), transform 0.5s var(--ease);
}
.mcsay.on { opacity: 1; transform: none; }
@media (max-width: 900px) {
  .mcsec__grid { grid-template-columns: minmax(0, 1fr); }
  .mchz { justify-self: center; max-width: 440px; margin-top: 10px; }
}
@media (max-width: 640px) {
  .mcsec__facts { grid-template-columns: minmax(0, 1fr); }
  .mcsec__facts div { padding: 14px 0; border-bottom: 1px solid var(--line); }
  .mchz { width: 92%; }
  .mcsay { left: 36%; max-width: min(210px, 54vw); font-size: 13px; }
}

/* 404: the page is beyond the horizon; Era is out looking and brings the visitor home. */
.nf { position: relative; min-height: 100svh; min-height: max(100svh, 620px); display: flex; align-items: center; padding: calc(var(--nav-h) + 40px) 0 90px; }
.nf > .wrap { width: 100%; }
.nf__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(30px, 5vw, 80px); align-items: center; }
.nf__code { margin: 0 0 18px; font: 200 clamp(64px, 9vw, 140px)/0.9 var(--sans); letter-spacing: -0.06em; background: var(--iri); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nf__mc { position: relative; margin: 0; width: 100%; max-width: 360px; aspect-ratio: 1; justify-self: center; }
.nf__mc .mcbig { left: 0; top: 0; width: 100%; }
.nf__mc .mcsay { left: 50%; bottom: 96%; }
@media (max-width: 900px) {
  .nf__grid { grid-template-columns: minmax(0, 1fr); }
  .nf__mc { order: -1; max-width: 190px; justify-self: start; margin-left: 4%; }
  .nf__mc .mcsay { left: 88%; bottom: 52%; max-width: min(180px, 44vw); }
}
@media (prefers-reduced-motion: reduce) {
  .mc, .mc *, .mchz__route, .mchz__stars .tw, .mchz__goal { animation: none !important; }
}

/* ---------- Nexa AI (nexa.html) ----------
   The hero stops short of the fold so the demo shows on the first screen. The theatre (nexa-demo.js) draws each scene
   at 1920x1080 inside .nxd__comp and scales it through .nxd__cam; the scenes' own styles assume the browser defaults,
   so the site's type, colour and border-box sizing are reset inside it. */
.nxhero { min-height: 0; padding-bottom: clamp(30px, 5vh, 56px); }
.nxhero .phero__body { max-width: 820px; }
.nxhero__foot { margin-top: clamp(28px, 4.5vh, 46px); display: flex; flex-wrap: wrap; align-items: center; gap: 18px 30px; }
.nxstat { margin: 0; display: flex; align-items: center; gap: 14px; }
.nxstat b { font-weight: 200; font-size: clamp(32px, 3.2vw, 44px); line-height: 1; letter-spacing: -0.03em; color: #fff; }
.nxstat span { max-width: 22ch; font-size: 13px; line-height: 1.4; color: var(--ink-2); }
.nxjobs { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.nxjobs a { display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: 99px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, 0.03); font-size: 13px; color: var(--ink-2); transition: color 0.3s, border-color 0.3s, background 0.3s; }
.nxjobs a::before { content: ''; width: 5px; height: 5px; margin-right: 9px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
.nxjobs a:hover { color: #fff; border-color: rgba(127, 227, 255, 0.5); background: rgba(127, 227, 255, 0.06); }

.nxs { padding: clamp(36px, 6vh, 72px) 0 clamp(80px, 12vh, 140px); }
.nxs__head { display: grid; gap: 18px; max-width: 860px; margin-bottom: clamp(24px, 4vh, 40px); }
.nxs__head .eyebrow { margin: 0; }

/* The whole player (frame, controls) fits one screen on a desktop; the chapter list below shares its width. */
.nxd { position: relative; max-width: max(720px, calc((100svh - 250px) * 16 / 9 + 22px)); margin-inline: auto; }
.nxd__frame {
  position: relative; padding: 10px; border-radius: 22px; border: 1px solid var(--line-2);
  background: linear-gradient(170deg, rgba(30, 44, 110, 0.45), rgba(6, 9, 26, 0.62));
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  box-shadow: inset 0 1px 0 var(--glass-hi), 0 50px 140px -50px rgba(45, 106, 255, 0.75), 0 30px 80px -40px rgba(0, 0, 0, 0.9);
}
.nxd__frame::before {
  content: ''; position: absolute; inset: 12% 6% -12%; z-index: -1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(33, 60, 194, 0.55), transparent); filter: blur(34px);
}
.nxd__hud { display: flex; align-items: center; gap: 16px; padding: 4px 8px 12px; font: 400 10.5px/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.nxd__live { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); white-space: nowrap; }
.nxd__live i { width: 7px; height: 7px; border-radius: 50%; background: #5fe0a8; box-shadow: 0 0 10px #5fe0a8; transition: background 0.3s, box-shadow 0.3s; }
.nxd.is-paused .nxd__live i { background: var(--muted); box-shadow: none; }
.nxd__note { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nxd__count { margin-left: auto; color: var(--ink-2); white-space: nowrap; }
.nxd__stage {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 14px; cursor: pointer; isolation: isolate;
  background-color: #213cc2;
  background-image: linear-gradient(rgba(255, 255, 255, 0.13) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.13) 1px, transparent 1px);
  background-size: 3.3333% 5.9259%;
}
.nxd__cam { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; transform-origin: 0 0; }
.nxd__comp {
  position: absolute; inset: 0; overflow: hidden; color: #000; letter-spacing: normal; text-align: left; text-transform: none;
  font: 400 16px/normal -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}
.nxd__comp *, .nxd__comp *::before, .nxd__comp *::after { box-sizing: content-box; }
.nxd__comp img, .nxd__comp svg { display: inline; }
.nxd__comp [data-scene] { visibility: hidden; }
.nxd__poster { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 22px; background: inherit; transition: opacity 0.6s var(--ease), visibility 0.6s; }
.nxd__poster img { width: clamp(84px, 13%, 170px); height: auto; }
.nxd__spin { width: 24px; height: 24px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.25); border-top-color: #fff; opacity: 0; animation: nxspin 0.9s linear infinite; transition: opacity 0.3s; }
.nxd.is-loading .nxd__spin { opacity: 1; }
.nxd.is-ready .nxd__poster { opacity: 0; visibility: hidden; }
@keyframes nxspin { to { transform: rotate(1turn); } }
.nxd__sub {
  position: absolute; left: 50%; bottom: 4.5%; z-index: 2; width: max-content; max-width: min(88%, 900px); margin: 0; transform: translateX(-50%);
  padding: 7px 14px; border-radius: 10px; background: rgba(4, 8, 32, 0.74); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  color: #fff; font: 400 clamp(12px, 1.4vw, 18px)/1.45 var(--sans); text-align: center; text-wrap: balance; pointer-events: none; opacity: 0;
}
.nxd__fail { position: absolute; left: 0; right: 0; bottom: 14%; margin: 0; padding: 0 20px; text-align: center; font-size: 14px; color: #fff; }
.nxd__big {
  position: absolute; left: 50%; top: 50%; z-index: 3; width: clamp(54px, 7.5vw, 84px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center;
  color: #fff; background: rgba(8, 14, 50, 0.5); border: 1px solid rgba(255, 255, 255, 0.4); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.6); opacity: 0; visibility: hidden; transform: translate(-50%, -50%) scale(0.9);
  transition: opacity 0.3s, visibility 0.3s, transform 0.5s var(--ease), background 0.3s;
}
.nxd__big svg { width: 40%; margin-left: 7%; fill: currentColor; }
.nxd__big:hover { background: rgba(23, 61, 201, 0.75); }
.nxd.is-paused:not(.is-failed) .nxd__big { opacity: 1; visibility: visible; transform: translate(-50%, -50%) scale(1); }
.nxd__bar { display: grid; grid-template-columns: auto minmax(0, 15rem) minmax(0, 1fr) auto auto auto; align-items: center; gap: 14px; padding: 12px 6px 4px; }
.nxd__btn { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: var(--ink); border: 1px solid var(--line-2); background: rgba(255, 255, 255, 0.04); transition: background 0.3s, border-color 0.3s, color 0.3s; }
.nxd__btn:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(169, 193, 255, 0.45); }
.nxd__btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.nxd__play svg { fill: currentColor; stroke: none; }
.nxd__i-play, .nxd.is-paused .nxd__i-pause, .nxd__i-sound, .nxd.is-sound .nxd__i-mute { display: none; }
.nxd.is-paused .nxd__i-play, .nxd.is-sound .nxd__i-sound { display: block; }
.nxd.is-sound [data-nx="sound"] { border-color: rgba(127, 227, 255, 0.55); color: var(--cyan); }
.nxd__now { min-width: 0; display: grid; gap: 5px; }
.nxd__now b { font: 500 14px/1.2 var(--sans); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nxd__now span { min-height: 1.2em; font: 400 10.5px/1.2 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--cyan); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nxd__track { position: relative; height: 30px; cursor: pointer; touch-action: none; border-radius: 6px; outline: none; }
.nxd__track:focus-visible { box-shadow: 0 0 0 2px rgba(127, 227, 255, 0.5); }
.nxd__rail, .nxd__fill { position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px; border-radius: 3px; }
.nxd__rail { background: rgba(169, 193, 255, 0.16); }
.nxd__fill { background: linear-gradient(90deg, var(--bright), var(--cyan)); box-shadow: 0 0 12px rgba(127, 227, 255, 0.45); transform: scaleX(0); transform-origin: 0 50%; }
.nxd__ticks i { position: absolute; top: 50%; width: 2px; height: 9px; margin: -4.5px 0 0 -1px; border-radius: 2px; background: rgba(238, 241, 255, 0.5); }
.nxd__time { font: 400 11.5px/1 var(--mono); color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.nxd__chapters { margin-top: 22px; }
.nxd__chapters ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.nxd__ch {
  position: relative; width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 13px 16px;
  overflow: hidden; border-radius: 12px; text-align: left; border: 1px solid var(--line); background: var(--glass); color: var(--ink-2);
  font: 400 14px/1.3 var(--sans); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: color 0.3s, border-color 0.3s, background 0.3s;
}
.nxd__ch:hover { color: #fff; border-color: var(--line-2); }
.nxd__ch[aria-current] { color: #fff; border-color: rgba(127, 227, 255, 0.45); background: linear-gradient(160deg, rgba(36, 71, 240, 0.3), rgba(6, 9, 26, 0.5)); }
.nxd__chn { font: 500 10.5px/1 var(--mono); letter-spacing: 0.1em; color: var(--cyan); }
.nxd__chd { font: 400 11px/1 var(--mono); color: var(--muted); }
.nxd__chp { position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: linear-gradient(90deg, var(--bright), var(--cyan)); transform: scaleX(0); transform-origin: 0 50%; }
.nxd__ch:not([aria-current]) .nxd__chp { display: none; }
.nxd__frame:fullscreen { display: flex; flex-direction: column; justify-content: center; padding: 2vh 3vw; border: 0; border-radius: 0; background: #02030a; }
.nxd__frame:fullscreen > * { width: min(100%, calc((100vh - 150px) * 16 / 9)); margin-left: auto; margin-right: auto; }

.nxc { padding: clamp(90px, 14vh, 160px) 0; }
.nxc__head { display: grid; gap: 18px; max-width: 820px; margin-bottom: clamp(28px, 5vh, 48px); }
.nxc__head .eyebrow { margin: 0; }
.nxc__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.nxc__note { margin: 22px 0 0; color: var(--muted); font-size: 14px; line-height: 1.6; }
.nxc__row {
  position: relative; display: grid; grid-template-columns: 3rem minmax(0, 19rem) minmax(0, 1fr) auto; align-items: center; gap: 26px; padding: 22px 26px;
  border-radius: 16px; color: var(--ink-2); transition: border-color 0.4s, transform 0.6s var(--ease);
}
.nxc__row::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 0.4s; background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), rgba(127, 227, 255, 0.09), transparent 70%); }
.nxc__row:hover { border-color: var(--line-2); transform: translateX(4px); }
.nxc__row:hover::before { opacity: 1; }
.nxc__n { font: 500 11px/1 var(--mono); letter-spacing: 0.14em; color: var(--cyan); }
.nxc__t { font-weight: 300; font-size: clamp(19px, 1.7vw, 25px); line-height: 1.25; letter-spacing: -0.015em; color: var(--ink); }
.nxc__d { font-size: 15px; line-height: 1.6; }
.nxc__go { display: inline-flex; align-items: center; gap: 10px; padding: 9px 14px; border-radius: 99px; border: 1px solid var(--line-2); font: 400 11px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); white-space: nowrap; transition: border-color 0.4s; }
.nxc__go .ico { width: 13px; height: 13px; }
.nxc__row:hover .nxc__go { border-color: rgba(127, 227, 255, 0.55); }

@media (max-width: 1100px) {
  .nxd__bar { grid-template-columns: auto minmax(0, 11rem) minmax(0, 1fr) auto auto auto; }
}
@media (max-width: 900px) {
  .nxd__bar { grid-template-columns: auto minmax(0, 1fr) auto auto auto; row-gap: 4px; }
  .nxd__track { grid-column: 1 / -1; grid-row: 2; }
  .nxc__row { grid-template-columns: 2.2rem minmax(0, 1fr); gap: 8px 14px; padding: 18px; }
  .nxc__d, .nxc__go { grid-column: 2; }
  .nxc__go { justify-self: start; margin-top: 6px; }
}
@media (max-width: 640px) {
  .nxhero__foot { gap: 16px; }
  .nxd__frame { padding: 6px; border-radius: 16px; }
  .nxd__stage { border-radius: 10px; }
  .nxd__hud { padding: 4px 6px 10px; gap: 10px; }
  .nxd__note { display: none; }
  .nxd__sub { bottom: 3%; padding: 4px 9px; border-radius: 7px; font-size: 11.5px; line-height: 1.35; }
  .nxd__bar { gap: 10px; padding: 10px 2px 2px; }
  .nxd__btn { width: 36px; height: 36px; }
  .nxd__time { display: none; }
  .nxd__chapters ol { grid-template-columns: 1fr; gap: 8px; }
  .nxjobs a { height: 30px; padding: 0 12px; font-size: 12.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .nxd__spin { animation: none; }
  .nxc__row, .nxc__row:hover { transform: none; }
}