/* =====================================================================
   VION — web design system · dark industrial (approved 19.10.2026)
   Brand Guidelines v1.0 dark theme: Deep Field #0D1218, cards #14191F,
   text #EDEEF0, labels #8A8F98, indigo on dark #5B3DF0 / #8F6BFF.
   Indigo is rare: CTA, slash-numbers, one accent block per screen,
   the active priority in the attention scene.
   Renders: warm-gray plate #B5B3B1 or cut-out. Radius 0–2px, no shadows.
   Motion: everything is visible without JS / with reduced motion.
   ===================================================================== */

:root {
  --bg: #0D1218;
  --bg-2: #10161D;
  --surface: #14191F;
  --surface-2: #1A2129;
  --text: #EDEEF0;
  --text-2: #A7ACB4;
  --label: #8A8F98;
  --accent: #5B3DF0;
  --accent-hover: #6C51F6;
  --accent-text: #8F6BFF;
  --plate: #B5B3B1;
  --ink: #242424;
  --ink-soft: #54524F;
  --line: rgba(237, 238, 240, .1);
  --line-2: rgba(237, 238, 240, .2);

  --font: "Inter", "Helvetica Neue", Arial, sans-serif;
  --fs-h1: clamp(38px, 3.2vw + 22px, 76px);
  --fs-h2: clamp(30px, 2.4vw + 20px, 56px);
  --fs-display: clamp(30px, 3.4vw + 14px, 68px);
  --fs-lead: clamp(17px, .4vw + 15px, 20px);
  --fs-label: 12px;

  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 40px; --s6: 48px; --s8: 64px; --s10: 80px; --s12: 96px; --s16: 128px;
  --content: 1200px;
  --gutter: 24px;
  --pad: 24px;
  --radius: 2px;
  --header-h: 64px;
  --ease: cubic-bezier(.2, .7, .1, 1);
  --ease-io: cubic-bezier(.4, 0, .2, 1);
}
@media (min-width: 720px)  { :root { --pad: 32px; } }
@media (min-width: 1024px) { :root { --pad: 64px; --header-h: 72px; } }

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-padding-top: calc(var(--header-h) + 16px); -webkit-text-size-adjust: 100%; background: var(--bg); }
body {
  font-family: var(--font); font-size: 16px; line-height: 1.55;
  background: var(--bg); color: var(--text);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  font-feature-settings: "cv11", "ss01";
  overflow-x: hidden;
}
img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--accent); color: #fff; }
:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: var(--pad); top: -100px; z-index: 100; background: var(--text); color: var(--bg); padding: 8px 16px; }
.skip:focus { top: 8px; }

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: calc(var(--content) + 2 * var(--pad)); margin-inline: auto; padding-inline: var(--pad); }
.g12 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--s4); }
.g12 > * { grid-column: 1 / -1; min-width: 0; }
@media (min-width: 1024px) { .g12 { grid-template-columns: repeat(12, minmax(0, 1fr)); } }

.section { position: relative; padding-block: var(--s10); border-top: 1px solid var(--line); }
.section--alt { background: var(--bg-2); }
@media (min-width: 1024px) { .section { padding-block: var(--s16); } }

/* ---------- Type ---------- */
h1, h2, h3 { font-weight: 700; letter-spacing: -.035em; line-height: 1.02; text-wrap: balance; }
h1 { font-size: var(--fs-h1); line-height: .98; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: 20px; font-weight: 600; letter-spacing: -.015em; line-height: 1.25; }
p { text-wrap: pretty; }
.lead { font-size: var(--fs-lead); font-weight: 500; line-height: 1.5; color: var(--text-2); max-width: 34em; }
.muted { color: var(--text-2); }
.num, table, time { font-variant-numeric: tabular-nums; }
.label { font-size: var(--fs-label); font-weight: 500; line-height: 1.4; text-transform: uppercase; letter-spacing: .18em; color: var(--label); }
.slash { font-size: var(--fs-label); font-weight: 600; line-height: 1.4; text-transform: uppercase; letter-spacing: .18em; color: var(--label); }
.slash b, .slash-n { color: var(--accent-text); font-weight: 700; letter-spacing: .06em; margin-right: .6em; font-variant-numeric: tabular-nums; }

.sec-head { margin-bottom: var(--s8); }
.sec-head .slash, .sec-head .label { margin-bottom: var(--s3); }
.sec-head h2 { max-width: 16em; }
.sec-head .lead { margin-top: var(--s3); }
@media (min-width: 1024px) {
  .sec-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); margin-bottom: var(--s10); }
  .sec-head > .slash, .sec-head > .label { grid-column: 1 / span 3; padding-top: 1.1em; margin: 0; }
  .sec-head > h2, .sec-head > .lead { grid-column: 4 / span 9; }
}

.slash-list { list-style: none; border-top: 1px solid var(--line); }
.slash-list li { display: grid; grid-template-columns: 44px 1fr; gap: var(--s2); padding: 18px 0; border-bottom: 1px solid var(--line); }
.slash-list li::before { content: attr(data-n); color: var(--accent-text); font-weight: 700; font-variant-numeric: tabular-nums; }
.slash-list strong { font-weight: 600; color: var(--text); }
.slash-list span span { color: var(--text-2); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 12px 22px; border-radius: var(--radius);
  font-size: 15px; font-weight: 600; letter-spacing: -.005em; line-height: 1.2;
  text-decoration: none; border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  transition: background-color .25s var(--ease-io), color .25s var(--ease-io), border-color .25s var(--ease-io);
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn--primary { background: var(--accent); color: #fff; }
.btn--primary:hover { background: var(--accent-hover); }
.btn--ghost { color: var(--text); border-color: var(--line-2); background: transparent; }
.btn--ghost:hover { border-color: var(--text); background: rgba(237, 238, 240, .05); }
.btn--sm { min-height: 40px; padding: 8px 14px; font-size: 14px; }
.btn--lg { min-height: 56px; padding: 16px 26px; font-size: 16px; }
.btn--icon { width: 40px; padding: 0; }
.btn .arrow { transition: transform .25s var(--ease-io); }
.btn:hover .arrow { transform: translateX(3px); }
.link { font-weight: 600; text-decoration: none; display: inline-flex; gap: 8px; align-items: center; color: var(--text); }
.link svg { width: 16px; height: 16px; transition: transform .25s var(--ease-io); }
.link:hover svg { transform: translateX(3px); }
.link:hover { text-decoration: underline; }
.icon { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ---------- Header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--header-h);
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.brand img { height: 20px; width: auto; }
.brand .brand__logo { height: 28px; }
.footer__brand .brand__logo { height: 34px; }
.brand__name { font-weight: 700; font-size: 20px; letter-spacing: -.02em; }
.brand__by { display: none; }
@media (min-width: 720px) { .brand__by { display: inline; padding-left: 12px; border-left: 1px solid var(--line-2); } }
.nav { display: flex; align-items: center; gap: var(--s2); }
.nav__links { display: none; gap: var(--s4); margin-right: var(--s2); }
.nav__links a { font-size: 14px; font-weight: 500; color: var(--text-2); text-decoration: none; transition: color .2s; }
.nav__links a:hover, .nav__links a[aria-current] { color: var(--text); }
@media (min-width: 1100px) { .nav__links { display: flex; } }
.progress { position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%; background: var(--accent-text); transform-origin: left; transform: scaleX(var(--p, 0)); }
main { padding-top: var(--header-h); }

/* ---------- Hero: giant type, plate bleeding off the edge, camera breaking out ---------- */
.hero { position: relative; min-height: calc(100svh - var(--header-h)); display: flex; flex-direction: column; overflow: hidden; }
.hero__plate { display: none; }
.hero__grid { position: relative; z-index: 2; display: grid; gap: var(--s5); padding-top: var(--s5); }
.hero__label { margin-bottom: var(--s3); }
.hero h1 { font-size: clamp(32px, 2.4vw + 18px, 56px); line-height: 1.02; letter-spacing: -.04em; max-width: 13em; }
.hero__sub { margin-top: var(--s3); max-width: 30em; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--s4); }
.hero__note { margin-top: var(--s3); font-size: 13px; letter-spacing: .02em; color: var(--label); display: flex; gap: 10px; align-items: center; }
.hero__note::before { content: ""; width: 6px; height: 6px; background: var(--accent-text); flex: none; }
@media (max-width: 719px) { .hero__cta .btn { flex: 1 1 100%; } }
.hero__visual { position: relative; aspect-ratio: 1 / 1; background: var(--plate); margin-inline: calc(-1 * var(--pad)); }
.hero__cam { position: absolute; inset: 6% 8% 4% 10%; will-change: transform; }
.hero__cam img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 28px 22px rgba(36, 36, 36, .28)); }
.lock { position: absolute; left: 1%; top: 9%; width: 23%; height: 25%; pointer-events: none; }
.lock i { position: absolute; width: 16px; height: 16px; border: 0 solid var(--ink); }
.lock i:nth-child(1) { left: 0; top: 0; border-left-width: 2px; border-top-width: 2px; }
.lock i:nth-child(2) { right: 0; top: 0; border-right-width: 2px; border-top-width: 2px; }
.lock i:nth-child(3) { left: 0; bottom: 0; border-left-width: 2px; border-bottom-width: 2px; }
.lock i:nth-child(4) { right: 0; bottom: 0; border-right-width: 2px; border-bottom-width: 2px; }
.lock__tag { position: absolute; left: 0; top: calc(100% + 8px); white-space: nowrap; font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--plate); background: var(--ink); padding: 4px 8px; }
.hud { position: absolute; z-index: 2; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hud b { color: var(--ink); font-weight: 700; }
.hud--a { right: 24px; bottom: 140px; }
.hud--b { right: 24px; bottom: 120px; }
.hud--c { left: 24px; top: 22px; }
.hero__giant { display: none; font-size: 31vw; font-weight: 800; letter-spacing: -.06em; line-height: .74; color: var(--text); margin: var(--s4) 0 0 calc(var(--pad) - .06em); white-space: nowrap; user-select: none; pointer-events: none; }
@media (min-width: 1024px) {
  .hero__plate { display: block; position: absolute; z-index: 1; top: 0; right: 0; bottom: 0; width: 41vw; background: var(--plate); }
  .hero__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); padding-top: var(--s6); flex: 1; }
  .hero__copy { grid-column: 1 / span 6; }
  .hero__copy { grid-row: 1; position: relative; z-index: 3; }
  .hero__visual { grid-column: 8 / span 5; grid-row: 1; background: none; margin: 0; aspect-ratio: 1 / 1.06; align-self: start; }
  .hero__cam { inset: auto; top: 2%; bottom: 0; left: -4%; height: 100%; aspect-ratio: 1400 / 1528; }
  .lock { mix-blend-mode: difference; }
  .lock i { border-color: #fff; }
  .lock__tag { background: #fff; color: #000; top: auto; bottom: 0; left: auto; right: calc(100% + 10px); }
}
.hero__rail { position: relative; z-index: 3; border-top: 1px solid var(--line); margin-top: auto; background: var(--bg); }
.hero__rail .wrap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hero__rail .fact { padding: var(--s3) var(--s2) var(--s3) 0; }
.hero__rail .fact + .fact { padding-left: var(--s2); border-left: 1px solid var(--line); }
.hero__rail .fact:nth-child(3) { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); }
.hero__rail .fact:nth-child(4) { border-top: 1px solid var(--line); }
.fact__v { font-size: clamp(22px, 1.4vw + 14px, 32px); font-weight: 700; letter-spacing: -.035em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.fact__k { margin-top: 6px; font-size: 11px; text-transform: uppercase; letter-spacing: .14em; color: var(--label); line-height: 1.4; }
@media (min-width: 1024px) {
  .hero__rail .wrap { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hero__rail .fact:nth-child(n) { border-top: 0; border-left: 1px solid var(--line); padding: var(--s3) var(--s3); }
  .hero__rail .fact:first-child { border-left: 0; padding-left: 0; }
}

/* ---------- Film: self-hosted video with a custom player ----------
   --grow 0..1 (driven by motion.js) widens the frame from the content
   column to the full screen while it scrolls in. No pinning. */
.film { padding-block: var(--s8) var(--s10); overflow: hidden; }
.film__stage { display: flex; justify-content: center; padding-inline: var(--pad); }
.film__frame {
  --col: min(var(--content), 100vw - 2 * var(--pad));
  --full: min(100vw, (100svh - var(--header-h)) * 16 / 9);
  position: relative; margin: 0; aspect-ratio: 16 / 9; flex: none;
  width: calc(var(--col) + (var(--full) - var(--col)) * var(--grow, 0));
  border-radius: calc(var(--radius) * (1 - var(--grow, 0)));
  background: #000; overflow: hidden; color: #fff;
}
.player__video { width: 100%; height: 100%; object-fit: cover; background: #000; }
.player__video::-webkit-media-controls { display: none !important; }
.player.is-custom .player__video { cursor: pointer; }

/* Big play button (paused / not started) */
.player__big {
  position: absolute; left: 50%; top: 50%; width: 88px; height: 88px; translate: -50% -50%;
  display: grid; place-items: center; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--accent); color: #fff; z-index: 3;
  transition: transform .4s var(--ease), background .2s, opacity .3s var(--ease);
}
.player__big::after { content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 1px solid rgba(143, 107, 255, .55); animation: ring 2.4s var(--ease-io) infinite; }
@keyframes ring { 0% { transform: scale(.9); opacity: 1; } 100% { transform: scale(1.35); opacity: 0; } }
.player__big svg { width: 34px; height: 34px; fill: currentColor; margin-left: 4px; }
.player__big:hover { background: var(--accent-hover); transform: scale(1.06); }
.player.is-playing .player__big { opacity: 0; pointer-events: none; }

/* Bottom control bar: a solid floating panel, readable over any frame */
.player__bar {
  position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 2;
  display: flex; align-items: center; gap: 14px; padding: 6px 8px;
  background: rgba(13, 18, 24, .86); border: 1px solid var(--line-2); border-radius: var(--radius);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.player.is-idle .player__bar { opacity: 0; transform: translateY(8px); pointer-events: none; }
.player.is-idle { cursor: none; }
.player__btn {
  flex: none; width: 40px; height: 40px; display: grid; place-items: center; cursor: pointer;
  border: 0; border-radius: var(--radius); background: transparent; color: #fff;
  transition: background .2s;
}
.player__btn:hover { background: rgba(237, 238, 240, .1); }
.player__btn svg { width: 18px; height: 18px; }
.player__btn .i-play, .player__btn .i-pause { fill: currentColor; }
.player__btn .i-fs, .player__btn .i-exit { fill: none; stroke: currentColor; stroke-width: 1.8; }
.player .i-pause, .player .i-exit, .player.is-playing .i-play, .player.is-fs .i-fs { display: none; }
.player.is-playing .i-pause, .player.is-fs .i-exit { display: block; }
.player__time { flex: none; font-size: 12px; font-variant-numeric: tabular-nums; letter-spacing: .04em; color: rgba(255,255,255,.75); }
.player__time b { color: #fff; font-weight: 600; }
.player__time i { font-style: normal; margin: 0 6px; opacity: .5; }
.player__track { position: relative; flex: 1; height: 28px; cursor: pointer; touch-action: none; }
.player__track::before, .player__buf, .player__fill { content: ""; position: absolute; left: 0; top: 50%; height: 3px; margin-top: -1.5px; border-radius: 2px; }
.player__track::before { right: 0; background: rgba(255,255,255,.2); }
.player__buf { width: calc(var(--buf, 0) * 100%); background: rgba(255,255,255,.35); }
.player__fill { width: calc(var(--p, 0) * 100%); background: var(--accent-text); }
.player__knob { position: absolute; top: 50%; left: calc(var(--p, 0) * 100%); width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #fff; transform: scale(0); transition: transform .2s var(--ease); }
.player__track:hover .player__knob, .player__track:focus-visible .player__knob, .player.is-seeking .player__knob { transform: scale(1); }
.player__track:hover::before, .player__track:hover .player__buf, .player__track:hover .player__fill { height: 5px; margin-top: -2.5px; }
.player :focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }

/* Full screen */
.player:fullscreen { width: 100vw; height: 100vh; aspect-ratio: auto; border-radius: 0; }
.player:fullscreen .player__video { object-fit: contain; }
.player:-webkit-full-screen { width: 100vw; height: 100vh; aspect-ratio: auto; border-radius: 0; }
.player:-webkit-full-screen .player__video { object-fit: contain; }

@media (max-width: 719px) {
  .player__big { width: 64px; height: 64px; }
  .player__big svg { width: 26px; height: 26px; }
  .player__bar { left: 8px; right: 8px; bottom: 8px; gap: 6px; padding: 2px 4px; }
  .player__btn { width: 36px; height: 36px; }
  .player__time { font-size: 11px; }
  .player__time i, .player__time [data-dur] { display: none; }
}

/* ---------- Marquee of report lines ---------- */
.ticker { border-block: 1px solid var(--line); overflow: hidden; padding: 18px 0; background: var(--bg-2); }
.ticker__track { display: flex; gap: 56px; width: max-content; white-space: nowrap; font-size: 15px; color: var(--text-2); }
.ticker__track span { display: inline-flex; gap: 12px; align-items: baseline; }
.ticker__track time { color: var(--label); font-size: 13px; }
.js-motion .ticker__track { animation: ticker 70s linear infinite; }
.ticker:hover .ticker__track { animation-play-state: paused; }
@keyframes ticker { to { transform: translateX(-50%); } }

/* ---------- Manifesto (scroll-lit words) ---------- */
.manifesto__text { font-size: var(--fs-display); font-weight: 700; letter-spacing: -.035em; line-height: 1.08; max-width: 18em; }
.manifesto__text .mw { transition: color .35s var(--ease-io); }
.js-motion .manifesto__text .mw { color: rgba(237, 238, 240, .16); }
.js-motion .manifesto__text .mw.lit { color: var(--text); }

.compare { margin-top: var(--s10); display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); }
.compare__row { display: grid; grid-template-columns: 1fr; gap: var(--s2); padding: var(--s3); background: var(--bg); }
@media (min-width: 720px) { .compare__row { grid-template-columns: 200px 1fr; align-items: baseline; padding: var(--s4); } }
.compare__out { font-size: clamp(17px, .8vw + 13px, 22px); font-weight: 500; line-height: 1.45; letter-spacing: -.01em; min-height: 2.9em; }
.compare__out::before { content: ">>> "; color: var(--label); }
.compare__row--dim .compare__out { color: var(--label); font-style: italic; min-height: 0; }
.compare__row--vion .compare__out { color: var(--text); }
.caret { display: inline-block; width: .5em; height: 1em; background: var(--accent-text); vertical-align: -.12em; margin-left: 3px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* ---------- Pains ---------- */
.pains { display: grid; gap: 1px; background: var(--line); border-block: 1px solid var(--line); }
@media (min-width: 900px) { .pains { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pain { background: var(--bg); padding: var(--s5) var(--s3) var(--s5) 0; display: flex; flex-direction: column; gap: var(--s2); }
@media (min-width: 900px) { .pain { padding: var(--s6) var(--s4); } .pain:first-child { padding-left: 0; } }
.pain__fig { font-size: clamp(44px, 3vw + 24px, 72px); font-weight: 700; letter-spacing: -.045em; line-height: 1; margin: var(--s3) 0 var(--s1); font-variant-numeric: tabular-nums; }
.pain h3 { font-size: 22px; }
.pain p { color: var(--text-2); }

/* ---------- How it works: sticky rail + chapters ---------- */
.how { display: grid; gap: var(--s8); }
@media (min-width: 1024px) { .how { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); } }
.how__rail { display: none; }
@media (min-width: 1024px) {
  .how__rail { display: block; grid-column: 1 / span 3; position: sticky; top: calc(var(--header-h) + 48px); align-self: start; }
  .how__chapters { grid-column: 4 / span 9; }
}
.rail { list-style: none; position: relative; padding-left: 24px; }
.rail::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 1px; background: var(--line-2); }
.rail__fill { position: absolute; left: 0; top: 6px; width: 1px; height: calc((100% - 12px) * var(--rail, 0)); background: var(--accent-text); }
.rail li { padding: 10px 0; }
.rail a { text-decoration: none; display: block; color: var(--label); transition: color .3s; }
.rail a b { display: block; font-size: 26px; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; color: inherit; }
.rail a span { font-size: 13px; }
.rail li.is-active a { color: var(--text); }
.chapter + .chapter { margin-top: var(--s12); padding-top: var(--s12); border-top: 1px solid var(--line); }
.chapter__head { margin-bottom: var(--s5); }
.chapter__head .slash { margin-bottom: var(--s2); }
.chapter__head h3 { font-size: clamp(28px, 1.6vw + 18px, 44px); font-weight: 700; letter-spacing: -.035em; line-height: 1.05; max-width: 16em; }
.chapter__head p { margin-top: var(--s2); }
.chapter__foot { margin-top: var(--s4); display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* Attention scene */
.attn { display: grid; gap: var(--s2); }
@media (min-width: 1100px) { .attn { grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); } }
.scene { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); }
.scene > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.scene .subject { transition: transform .8s var(--ease-io); }
.scene .subject .s-line { stroke: rgba(237, 238, 240, .5); transition: stroke .3s; }
.scene .subject.is-active .s-line { stroke: var(--accent-text); }
.scene__hud { position: absolute; inset: 0; pointer-events: none; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--label); font-variant-numeric: tabular-nums; }
.scene__hud span { position: absolute; }
.scene__hud .tl { left: 14px; top: 12px; } .scene__hud .tr { right: 14px; top: 12px; }
.scene__hud .bl { left: 14px; bottom: 12px; } .scene__hud .br { right: 14px; bottom: 12px; }
.scene__hud b { color: var(--text); font-weight: 600; }
.rec { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #E5484D; margin-right: 6px; vertical-align: 1px; }
.reticle { position: absolute; border: 1.5px solid var(--accent); border-radius: var(--radius); transition: left .8s var(--ease-io), top .8s var(--ease-io), width .8s var(--ease-io), height .8s var(--ease-io); pointer-events: none; }
.reticle::before, .reticle::after { content: ""; position: absolute; width: 8px; height: 8px; border: 2px solid var(--accent-text); }
.reticle::before { left: -3px; top: -3px; border-right: 0; border-bottom: 0; }
.reticle::after { right: -3px; bottom: -3px; border-left: 0; border-top: 0; }
.reticle__tag { position: absolute; left: -1.5px; bottom: calc(100% + 6px); white-space: nowrap; background: var(--accent); color: #fff; padding: 3px 8px; border-radius: var(--radius); font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
@media (max-width: 719px) { .reticle__tag { font-size: 9px; letter-spacing: .08em; } .scene__hud .bl, .scene__hud .br { display: none; } }

.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s3); display: flex; flex-direction: column; }
.panel__head { display: flex; justify-content: space-between; margin-bottom: var(--s2); }
.cands { list-style: none; }
.cand { display: grid; grid-template-columns: 32px 1fr auto; column-gap: 12px; row-gap: 8px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--line); background: var(--surface); transition: transform .3s var(--ease-io); }
.cand:first-child { border-top: 1px solid var(--line); }
.cand__rank { font-size: 12px; font-weight: 700; color: var(--label); font-variant-numeric: tabular-nums; }
.cand__label { font-size: 15px; font-weight: 600; line-height: 1.3; }
.cand__meta { display: block; font-size: 11px; color: var(--label); letter-spacing: .08em; text-transform: uppercase; font-weight: 500; margin-top: 2px; font-variant-numeric: tabular-nums; }
.cand__pct { font-size: 18px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--text-2); }
.cand__bar { grid-column: 2 / -1; height: 3px; background: rgba(237, 238, 240, .08); border-radius: 2px; overflow: hidden; }
.cand__bar i { display: block; height: 100%; background: var(--label); transform-origin: left; transition: transform .3s var(--ease-io), background-color .3s; }
.cand.is-active .cand__rank, .cand.is-active .cand__pct { color: var(--accent-text); }
.cand.is-active .cand__bar i { background: var(--accent); }
.panel__foot { margin-top: auto; padding-top: var(--s3); font-size: 14px; color: var(--text-2); min-height: 6em; }
.panel__event { display: block; color: var(--text); font-weight: 600; opacity: 0; transition: opacity .4s; }
.panel__event.is-on { opacity: 1; }

/* Chat demo — "ask the camera" */
.chat { display: grid; gap: var(--s2); }
@media (min-width: 900px) { .chat { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: start; } }
.chat__window { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s3); display: flex; flex-direction: column; gap: 12px; min-height: 460px; }
.chat__top { display: flex; justify-content: space-between; padding-bottom: 12px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.msg { max-width: 88%; padding: 12px 14px; border-radius: var(--radius); font-size: 15px; line-height: 1.45; }
.msg small { display: block; margin-top: 6px; font-size: 11px; color: var(--label); letter-spacing: .06em; }
.msg--you { align-self: flex-end; background: var(--surface-2); border: 1px solid var(--line-2); }
.msg--vion { align-self: flex-start; background: var(--bg); border: 1px solid var(--line); }
.msg--vion .who { display: block; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-text); font-weight: 600; margin-bottom: 4px; }
.msg__frame { margin-top: 10px; aspect-ratio: 16 / 9; width: 220px; max-width: 100%; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); display: flex; align-items: flex-end; padding: 8px; font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--label); }
.typing { align-self: flex-start; display: none; gap: 4px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); }
.typing i { width: 5px; height: 5px; border-radius: 50%; background: var(--label); animation: dot 1s infinite; }
.typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; }
.typing.on { display: inline-flex; }
@keyframes dot { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
.js-motion .chat__window [data-seq-item] { opacity: 0; transform: translateY(10px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.js-motion .chat__window [data-seq-item].on { opacity: 1; transform: none; }
.rules { list-style: none; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); }
.rules li { background: var(--bg); padding: var(--s3); display: grid; gap: 6px; }
.rules li strong { font-weight: 600; }
.rules li span { color: var(--text-2); font-size: 15px; }

/* Report preview */
.report { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s3); max-width: 760px; }
@media (min-width: 720px) { .report { padding: var(--s4); } }
.report__head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s2); padding-bottom: var(--s3); border-bottom: 1px solid var(--line); }
.report__title { font-size: 20px; font-weight: 700; letter-spacing: -.02em; line-height: 1.25; margin-top: 6px; }
.report__tag { flex: none; border: 1px solid var(--line-2); color: var(--label); padding: 4px 8px; border-radius: var(--radius); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; }
.report__events { list-style: none; }
.r-ev { display: grid; grid-template-columns: 48px 1fr; column-gap: var(--s2); row-gap: 10px; padding: var(--s2) 0; border-bottom: 1px solid var(--line); }
@media (min-width: 720px) { .r-ev { grid-template-columns: 56px 1fr 104px; align-items: center; } }
.r-ev__time { font-size: 14px; color: var(--label); font-variant-numeric: tabular-nums; transition: opacity .5s; }
.r-ev__text { font-size: 15px; line-height: 1.4; max-width: 60ch; transition: color .5s, background-color .5s; }
.r-ev__status { display: inline-block; margin-top: 8px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; padding: 4px 8px; border-radius: var(--radius); background: rgba(237, 238, 240, .07); color: var(--text); transition: opacity .5s; }
.r-ev__status--alert { background: var(--accent); color: #fff; }
.r-ev__zoom { grid-column: 2 / -1; display: flex; }
@media (min-width: 720px) { .r-ev__zoom { grid-column: 3; grid-row: 1 / span 2; } .r-ev__text-wrap { grid-column: 2; } }
.zoom-ph { width: 104px; aspect-ratio: 4 / 3; border-radius: var(--radius); background: var(--surface-2); border: 1px solid var(--line); display: flex; align-items: flex-end; padding: 6px; font-size: 8px; line-height: 1.3; letter-spacing: .12em; text-transform: uppercase; color: var(--label); transition: opacity .5s; }
.report__summary { padding-top: var(--s3); font-size: 15px; transition: opacity .5s; }
.report__summary span { color: var(--label); }
.report[data-state="idle"] .r-ev:not(.is-in) .r-ev__text { background: rgba(237, 238, 240, .06); color: transparent; border-radius: 2px; }
.report[data-state="idle"] .r-ev:not(.is-in) .r-ev__status,
.report[data-state="idle"] .r-ev:not(.is-in) .r-ev__time,
.report[data-state="idle"] .r-ev:not(.is-in) .zoom-ph { opacity: .2; }
.report[data-state="idle"] .report__summary:not(.is-in) { opacity: 0; }
.no-anim, .no-anim * { transition: none !important; }

/* ---------- Advantages bento ---------- */
.bento { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
@media (min-width: 720px)  { .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .bento { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tile { background: var(--bg); padding: var(--s4) var(--s3); display: flex; flex-direction: column; gap: 12px; min-height: 280px; transition: background-color .3s; }
.tile:hover { background: var(--bg-2); }
.tile .tile__fig { color: var(--text); font-size: clamp(52px, 3vw + 28px, 84px); font-weight: 700; letter-spacing: -.05em; line-height: .95; font-variant-numeric: tabular-nums; margin-bottom: auto; }
.tile .tile__fig small { font-size: .32em; letter-spacing: -.01em; font-weight: 600; color: var(--text-2); margin-left: .2em; }
.tile h3 { margin-top: var(--s3); }
.tile p { color: var(--text-2); font-size: 15px; }

/* ---------- Hardware ---------- */
.hw { display: grid; gap: var(--s4) var(--s3); }
@media (min-width: 900px) { .hw { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.hw-card { display: flex; flex-direction: column; }
.hw-card__plate { position: relative; display: block; aspect-ratio: 5 / 4; background: var(--plate); border-radius: var(--radius); overflow: hidden; color: var(--ink); text-decoration: none; }
.hw-card__plate img { position: absolute; left: 8%; right: 8%; bottom: 0; width: 84%; height: 84%; object-fit: contain; object-position: center bottom; transition: transform .9s var(--ease); filter: drop-shadow(0 24px 24px rgba(36, 36, 36, .22)); }
.hw-card:hover .hw-card__plate img { transform: translateY(-10px) scale(1.03); }
.hw-card__plate .label { position: absolute; left: 20px; top: 18px; color: var(--ink-soft); }
.hw-card__tag { position: absolute; right: 20px; top: 16px; color: var(--ink); font-weight: 700; font-size: 14px; letter-spacing: .02em; }
.hw-card__body { padding-top: var(--s3); display: grid; gap: 12px; }
.hw-card__body h3 { font-size: 34px; font-weight: 700; letter-spacing: -.035em; }
.hw-card__body h3 a { text-decoration: none; }
.hw-specs { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border-block: 1px solid var(--line); margin-top: 4px; }
.hw-specs li { background: var(--bg); padding: 12px 12px 12px 0; display: grid; gap: 2px; }
.hw-specs li:nth-child(even) { padding-left: 12px; }
.hw-specs b { font-size: 17px; font-weight: 600; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.hw-specs span { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--label); }
.hw-card__links { display: flex; gap: var(--s4); flex-wrap: wrap; padding-top: 4px; }

/* ---------- Packages ---------- */
.packs { display: grid; gap: var(--s3); }
@media (min-width: 900px) { .packs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pack { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s4) var(--s3); display: flex; flex-direction: column; gap: var(--s3); transition: border-color .3s; }
.pack:hover { border-color: var(--line-2); }
@media (min-width: 720px) { .pack { padding: var(--s5) var(--s4); } }
.pack__top { display: flex; justify-content: space-between; gap: var(--s2); flex-wrap: wrap; }
.pack h3 { font-size: clamp(26px, 1vw + 20px, 36px); font-weight: 700; letter-spacing: -.035em; line-height: 1.05; }
.pack__model { font-size: 15px; color: var(--text-2); margin-top: -8px; }
.pack ul { list-style: none; display: grid; gap: 10px; }
.pack li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; font-size: 15px; color: var(--text-2); }
.pack li .icon { width: 18px; height: 18px; color: var(--text); margin-top: 2px; }
.pack li strong { color: var(--text); font-weight: 600; }
.pack__price { margin-top: auto; padding-top: var(--s3); border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: baseline; gap: var(--s2); flex-wrap: wrap; }
.pack__price b { font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.terms { margin-top: var(--s3); display: flex; gap: var(--s1) var(--s4); flex-wrap: wrap; }

/* Accent block — one per screen */
.accent-block { background: var(--accent); color: #fff; border-radius: var(--radius); padding: var(--s4); display: grid; gap: var(--s3); align-items: center; margin-top: var(--s3); }
@media (min-width: 900px) { .accent-block { grid-template-columns: 1fr auto; padding: var(--s5); } }
.accent-block .label { color: rgba(255, 255, 255, .78); margin-bottom: 10px; }
.accent-block p:not(.label) { font-size: clamp(22px, 1.2vw + 16px, 32px); font-weight: 700; letter-spacing: -.025em; line-height: 1.12; }
.accent-block .btn { background: #fff; color: var(--bg); }
.accent-block .btn:hover { background: var(--text); }

/* ---------- About ---------- */
.about__text { grid-column: 1 / -1; }
.about__side { grid-column: 1 / -1; }
@media (min-width: 1024px) { .about__text { grid-column: 1 / span 6; } .about__side { grid-column: 8 / span 5; } }
.about__text p + p { margin-top: var(--s2); }
.about__text p { color: var(--text-2); max-width: 36em; }
.about__text .lead { color: var(--text); }
.facts-row { margin-top: var(--s5); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-block: 1px solid var(--line); }
.facts-row div { padding: var(--s3) var(--s2) var(--s3) 0; }
.facts-row div + div { padding-left: var(--s2); border-left: 1px solid var(--line); }
.team { list-style: none; border-top: 1px solid var(--line); }
.team li { display: flex; justify-content: space-between; gap: var(--s2); padding: 16px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.team li span:first-child { font-weight: 600; }
.team li span:last-child { color: var(--text-2); font-size: 15px; }
.honest { margin-top: var(--s4); padding: var(--s3); border: 1px solid var(--line-2); border-radius: var(--radius); }
.honest p:not(.label) { font-size: 18px; font-weight: 600; letter-spacing: -.01em; line-height: 1.35; margin-top: var(--s1); }
.honest p + p:not(.label) { font-size: 15px; font-weight: 400; color: var(--text-2); letter-spacing: 0; }

/* ---------- Guarantees ---------- */
.guar { display: grid; gap: 1px; background: var(--line); border-block: 1px solid var(--line); }
@media (min-width: 720px)  { .guar { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .guar { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.guar__item { background: var(--bg); padding: var(--s5) var(--s3) var(--s5) 0; display: grid; gap: var(--s2); align-content: start; }
@media (min-width: 720px) { .guar__item { padding: var(--s5) var(--s3); } }
.guar__item .guar__n { font-size: 56px; font-weight: 700; letter-spacing: -.05em; line-height: 1; color: var(--accent-text); }
.guar__item h3 { font-size: 19px; }
.guar__item p { color: var(--text-2); font-size: 15px; }

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); padding: 22px 0; font-size: 18px; font-weight: 600; letter-spacing: -.01em; line-height: 1.35; transition: color .2s; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font-weight: 400; font-size: 24px; line-height: 1; color: var(--label); transition: transform .3s var(--ease-io); }
.faq details[open] summary::after { transform: rotate(45deg); color: var(--text); }
.faq summary:hover { color: var(--text-2); }
.faq details p { padding: 0 0 var(--s3); color: var(--text-2); max-width: 40em; }
.faq__head { grid-column: 1 / -1; }
@media (min-width: 1024px) {
  .faq__head { grid-column: 1 / span 4; align-self: start; position: sticky; top: calc(var(--header-h) + 48px); }
  .faq { grid-column: 6 / span 7; }
}

/* ---------- Book a pilot ---------- */
.cta { overflow: hidden; }
.cta__main { grid-column: 1 / -1; position: relative; z-index: 1; }
.cta__form { grid-column: 1 / -1; position: relative; z-index: 1; }
@media (min-width: 1024px) { .cta__main { grid-column: 1 / span 6; } .cta__form { grid-column: 8 / span 5; } }
.cta__main h2 { font-size: clamp(38px, 3.4vw + 18px, 80px); line-height: .98; margin-bottom: var(--s3); }
.cta__main .lead { margin-bottom: var(--s5); }
.cta__btns { display: flex; flex-wrap: wrap; gap: 12px; }
.cta__list { list-style: none; margin-top: var(--s6); display: grid; gap: 14px; }
.cta__list li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; color: var(--text-2); }
.cta__list .icon { width: 20px; height: 20px; color: var(--text); margin-top: 1px; }
.cta__list a { color: var(--text); font-weight: 600; }

.form { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s3); display: grid; gap: var(--s2); }
@media (min-width: 720px) { .form { padding: var(--s4); } }
.form h3 { font-size: 22px; }
.field { display: grid; gap: 6px; }
.field label { font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--label); }
.field label em { font-style: normal; text-transform: none; letter-spacing: 0; opacity: .8; }
.field input, .field select { width: 100%; min-height: 48px; padding: 12px 14px; border-radius: var(--radius); border: 1px solid var(--line-2); background: var(--bg); font-size: 16px; color: var(--text); -webkit-appearance: none; appearance: none; transition: border-color .2s; }
.field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%238A8F98' stroke-width='1.6'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 20px; padding-right: 40px; }
.field select option { background: var(--surface); }
.field input:focus, .field select:focus { outline: none; border-color: var(--accent-text); }
.form__row { display: grid; gap: var(--s2); }
@media (min-width: 720px) { .form__row { grid-template-columns: 1fr 1fr; } }
.form__fine { font-size: 13px; color: var(--label); }
.form__status { font-size: 14px; min-height: 1.5em; color: var(--text-2); }

/* ---------- Product pages ---------- */
.p-hero { position: relative; overflow: hidden; }
.p-hero .g12 { padding-block: var(--s8) var(--s10); align-items: center; }
.p-hero__copy { grid-column: 1 / -1; position: relative; z-index: 1; }
.p-hero__media { grid-column: 1 / -1; position: relative; z-index: 1; }
@media (min-width: 1024px) { .p-hero__copy { grid-column: 1 / span 6; } .p-hero__media { grid-column: 7 / span 6; } }
.p-hero h1 { font-size: clamp(36px, 2.4vw + 22px, 60px); }
.p-hero__plate { position: relative; aspect-ratio: 1 / 1; background: var(--plate); border-radius: var(--radius); }
.p-hero__plate img { position: absolute; inset: 8%; width: 84%; height: 84%; object-fit: contain; filter: drop-shadow(0 24px 24px rgba(36, 36, 36, .22)); }
.crumbs { display: flex; gap: 8px; margin-bottom: var(--s3); }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--text); }

.specs { width: 100%; border-collapse: collapse; font-size: 15px; }
.specs th, .specs td { text-align: left; vertical-align: top; padding: 14px 16px 14px 0; border-bottom: 1px solid var(--line); }
.specs thead th { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; color: var(--label); border-bottom-color: var(--line-2); }
.specs tbody th { font-weight: 500; color: var(--label); width: 36%; }
.specs td { font-weight: 500; }
.specs-wrap { grid-column: 1 / -1; overflow-x: auto; }
.specs-side { grid-column: 1 / -1; }
@media (min-width: 1024px) { .specs-wrap { grid-column: 1 / span 8; } .specs-side { grid-column: 10 / span 3; } }
.doc-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s3); display: grid; gap: 12px; }
.compare-t th:not(:first-child), .compare-t td { width: 32%; }

.hs { grid-column: 1 / -1; }
.hs-list { grid-column: 1 / -1; }
@media (min-width: 1024px) { .hs { grid-column: 1 / span 7; } .hs-list { grid-column: 9 / span 4; align-self: center; } }
.hs__stage { position: relative; background: var(--plate); border-radius: var(--radius); overflow: hidden; }
.hs__stage > img { width: 100%; height: auto; }
.hs__dot { position: absolute; width: 28px; height: 28px; margin: -14px 0 0 -14px; padding: 0; border: 0; background: transparent; cursor: pointer; display: grid; place-items: center; border-radius: 50%; }
.hs__dot::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: #EFEEEC; border: 1.5px solid #3400D3; box-sizing: border-box; transition: background-color .2s; }
.hs__dot::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; border: 1.5px solid #3400D3; opacity: 0; animation: hs-pulse 2.4s var(--ease-io) infinite; }
.hs__dot[aria-expanded="true"]::before { background: #3400D3; }
.hs__dot[aria-expanded="true"]::after { animation: none; opacity: 0; }
@keyframes hs-pulse { 0% { transform: scale(.5); opacity: .8; } 100% { transform: scale(1.4); opacity: 0; } }
.hs__card { position: absolute; z-index: 3; width: min(260px, calc(100% - 24px)); background: var(--bg); color: var(--text); border-radius: var(--radius); padding: 14px 16px; }
.hs__card .label { display: block; margin-bottom: 6px; font-size: 11px; }
.hs__card p { font-size: 14px; font-weight: 500; line-height: 1.4; }
.hs__mobile-card { display: none; margin-top: var(--s2); }
@media (hover: none), (max-width: 719px) {
  .hs__stage .hs__card { display: none; }
  .hs__mobile-card:not(:empty) { display: block; }
  .hs__mobile-card .hs__card { position: static; width: 100%; border: 1px solid var(--line); }
}
.hs-list ol { list-style: none; border-top: 1px solid var(--line); }
.hs-list li { border-bottom: 1px solid var(--line); }
.hs-list button { width: 100%; text-align: left; background: none; border: 0; padding: 14px 0; cursor: pointer; display: grid; grid-template-columns: 40px 1fr; gap: 12px; }
.hs-list button strong { font-weight: 600; display: block; }
.hs-list button span span { color: var(--text-2); font-size: 14px; }
.hs-list button[aria-pressed="true"] strong { color: var(--accent-text); }
.hs__fallback { border: 1.5px dashed var(--accent); padding: var(--s3); border-radius: var(--radius); }

.prose { max-width: 44em; }
.prose h2 { font-size: 24px; letter-spacing: -.02em; margin: var(--s6) 0 var(--s2); }
.prose p, .prose li { color: var(--text-2); }
.prose p + p { margin-top: var(--s2); }
.prose ul { padding-left: 1.2em; display: grid; gap: 8px; margin-top: var(--s2); }
.prose strong { color: var(--text); font-weight: 600; }

/* ---------- Footer ---------- */
.site-footer { padding-block: var(--s10) var(--s4); border-top: 1px solid var(--line); }
.footer__grid { row-gap: var(--s5); }
.footer__brand .brand { margin-bottom: var(--s2); }
.footer__brand p { color: var(--text-2); font-size: 14px; max-width: 26em; }
.footer__col h4 { font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--label); margin-bottom: 12px; }
.footer__col ul { list-style: none; display: grid; gap: 8px; font-size: 15px; }
.footer__col a { text-decoration: none; color: var(--text-2); }
.footer__col a:hover { color: var(--text); }
@media (min-width: 720px) { .footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .footer__brand { grid-column: 1 / -1 !important; } .footer__col { grid-column: auto !important; } }
@media (min-width: 1024px) {
  .footer__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .footer__brand { grid-column: 1 / span 5 !important; }
  .footer__col { grid-column: span 2 !important; }
  .footer__col:first-of-type { grid-column: 7 / span 2 !important; }
}
.legal { margin-top: var(--s6); font-size: 12px; color: var(--label); max-width: 60em; }
.micro { margin-top: var(--s3); padding-top: var(--s2); border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 8px var(--s3); flex-wrap: wrap; font-size: 10px; line-height: 1.8; letter-spacing: .14em; text-transform: uppercase; color: var(--label); font-variant-numeric: tabular-nums; }
.micro a { text-decoration: none; }
.micro a:hover { text-decoration: underline; }


/* ---------- Pains: typographic list ---------- */
.pains-list { list-style: none; border-top: 1px solid var(--line); }
.pains-list li { display: grid; gap: var(--s2); padding: var(--s5) 0; border-bottom: 1px solid var(--line); }
@media (min-width: 1024px) { .pains-list li { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: baseline; padding: var(--s6) 0; } }
.pains-list__n { font-size: 14px; font-weight: 700; color: var(--accent-text); font-variant-numeric: tabular-nums; }
.pains-list__t { font-size: clamp(26px, 2.4vw + 12px, 52px); font-weight: 700; letter-spacing: -.04em; line-height: 1.04; }
.pains-list__d { color: var(--text-2); max-width: 30em; }
@media (min-width: 1024px) {
  .pains-list__n { grid-column: 1 / span 1; }
  .pains-list__t { grid-column: 2 / span 7; }
  .pains-list__d { grid-column: 10 / span 3; }
}

/* ---------- X-ray: studio photo -> exploded render (pinned scrub) ---------- */
.xray { position: relative; background: var(--plate); color: var(--ink); }
.xray__pin { min-height: 100svh; display: flex; align-items: center; padding-block: var(--s10); }
.xray__grid { display: grid; gap: var(--s5); align-items: center; }
@media (min-width: 1024px) {
  .xray__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
  .xray__copy { grid-column: 1 / span 4; }
  .xray__stage { grid-column: 5 / span 8; margin-right: calc(-1 * var(--pad)); }
}
.xray .slash { color: var(--ink-soft); margin-bottom: var(--s3); }
.xray .slash b, .xray .slash-n { color: #3400D3; }
.xray h2 { font-size: clamp(30px, 2vw + 20px, 52px); }
.xray__parts { list-style: none; margin-top: var(--s5); border-top: 1px solid rgba(36, 36, 36, .18); }
.xray__parts li { display: grid; grid-template-columns: 36px 1fr; gap: 8px; padding: 14px 0; border-bottom: 1px solid rgba(36, 36, 36, .18); color: var(--ink-soft); }
.xray__parts li b { display: block; color: var(--ink); font-weight: 600; }
.xray__parts li span span { font-size: 14px; }
.js-motion .xray__parts li { opacity: .4; transition: opacity .4s; }
.js-motion .xray__parts li.is-on { opacity: 1; }
.xray__stage { position: relative; aspect-ratio: 4 / 3; margin: 0; overflow: hidden; border-radius: var(--radius); --x: 50%; }
.xray__stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.xray__b { clip-path: inset(0 0 0 var(--x)); }
.xray__line { position: absolute; top: 0; bottom: 0; left: var(--x); width: 2px; margin-left: -1px; background: var(--ink); }
.xray__line::before { content: "SCAN"; position: absolute; top: 16px; left: 8px; font-size: 10px; font-weight: 700; letter-spacing: .18em; color: var(--ink); }
.xray__cap { position: absolute; left: 16px; right: 16px; bottom: 14px; display: flex; justify-content: space-between; }
.xray__cap .label { color: var(--ink-soft); }

/* ---------- Process (dashed pipeline container) ---------- */
.process { margin-top: var(--s10); border: 1.5px dashed var(--accent); border-radius: var(--radius); padding: var(--s3); display: grid; gap: var(--s3); }
@media (min-width: 720px) { .process { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .process { grid-template-columns: repeat(4, minmax(0, 1fr)); padding: var(--s4); } }
.process__head { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: var(--s2); flex-wrap: wrap; }
.process__step { display: grid; gap: 10px; align-content: start; padding-top: var(--s2); border-top: 1px solid var(--line); }
.process__step h3 { font-size: 19px; }
.process__step p { color: var(--text-2); font-size: 15px; }

/* ---------- Texture sections (detail photo muted by an rgba plate, never a filter) ---------- */
.section--texture { overflow: hidden; }
.texture { position: absolute; top: 0; bottom: 0; right: 0; width: 58%; pointer-events: none; overflow: hidden; }
.texture img { width: 100%; height: 120%; object-fit: cover; object-position: 60% 40%; }
.texture::after { content: ""; position: absolute; inset: 0; background: rgba(13, 18, 24, .8); }
.texture--left { right: auto; left: 0; width: 42%; }
.section--texture .wrap { position: relative; z-index: 1; }
@media (max-width: 1023px) { .texture { width: 100%; } .texture::after { background: rgba(13, 18, 24, .88); } }

/* ---------- Broken grid helpers ---------- */
@media (min-width: 900px) { .hw-card--offset { margin-top: var(--s12); } }

/* ---------- Footer giant wordmark ---------- */
.site-footer { overflow: hidden; }
.footer__giant { display: none; font-size: 30vw; font-weight: 800; letter-spacing: -.06em; line-height: .72; color: var(--surface-2); margin: var(--s8) 0 -.08em calc(var(--pad) - .06em); white-space: nowrap; user-select: none; }

/* ---------- Magnetic CTA ---------- */
.magnetic { will-change: transform; }
.magnetic > * { pointer-events: none; }


/* =====================================================================
   PASS 2 — photo scene, exploded view, CTA button, wave, fixes
   ===================================================================== */

/* ---------- CTA button: label + arrow cell (no gimmicks) ---------- */
.btn--cta, .btn--invert { padding: 0; gap: 0; align-items: stretch; overflow: hidden; }
.btn--cta { background: var(--accent); color: #fff; }
.btn--invert { background: #fff; color: var(--bg); }
.btn__label { display: flex; align-items: center; padding: 0 24px; }
.btn__arrow { display: grid; place-items: center; width: 56px; border-left: 1px solid rgba(255, 255, 255, .28); transition: background-color .25s var(--ease-io); }
.btn--invert .btn__arrow { border-left-color: rgba(13, 18, 24, .15); }
.btn__arrow svg { width: 18px; height: 18px; transition: transform .35s var(--ease); }
.btn--cta:hover { background: var(--accent-hover); }
.btn--cta:hover .btn__arrow { background: rgba(13, 18, 24, .18); }
.btn--invert:hover { background: var(--text); }
.btn--cta:hover .btn__arrow svg, .btn--invert:hover .btn__arrow svg { transform: translateX(4px); }
.btn--sm .btn__label { padding: 0 14px; }
.btn--sm .btn__arrow { width: 40px; }

/* ---------- Attention scene on a documentary photo ---------- */
.scene { aspect-ratio: 3 / 2; background: #000; }
.scene__view { position: absolute; inset: 0; --z: 1; transition: transform 1.1s var(--ease-io), transform-origin 1.1s var(--ease-io); will-change: transform; }
.scene__photo { width: 100%; height: 100%; object-fit: cover; }
.box { position: absolute; border: calc(1.5px / var(--z)) solid rgba(255, 255, 255, .8); transition: border-color .3s; }
.box.is-active { border-color: var(--accent-text); border-width: calc(2px / var(--z)); }
.box__tag { position: absolute; left: calc(-1px / var(--z)); bottom: 100%; transform-origin: left bottom; transform: scale(calc(1 / var(--z))); white-space: nowrap; font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; background: rgba(13, 18, 24, .86); color: #fff; padding: 3px 7px; margin-bottom: 0; }
.box.is-active .box__tag { background: var(--accent); }
.box--r .box__tag { left: auto; right: calc(-1px / var(--z)); transform-origin: right bottom; }
.box--below .box__tag { bottom: auto; top: 100%; transform-origin: left top; }
.scene__hud span { background: rgba(13, 18, 24, .78); padding: 4px 8px; }
.scene__hud .tl { left: 10px; top: 10px; } .scene__hud .tr { right: 10px; top: 10px; }
.scene__hud .bl { left: 10px; bottom: 10px; } .scene__hud .br { right: 10px; bottom: 10px; }
@media (max-width: 719px) { .box__tag { font-size: 8px; letter-spacing: .04em; padding: 2px 5px; } .box:not(.is-active) .box__tag { display: none; } }

/* ---------- Exploded view (scrubbed by scroll, not pinned) ---------- */
.explode { position: relative; border-top: 1px solid var(--line); background: var(--bg); }
.explode__pin { min-height: 100svh; display: flex; align-items: center; padding-block: calc(var(--header-h) + 32px) 48px; }
.explode__grid { display: grid; gap: var(--s5); align-items: center; width: 100%; }
@media (min-width: 1024px) {
  .explode__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
  .explode__copy { grid-column: 1 / span 4; }
  .explode__stage { grid-column: 5 / span 8; }
}
.explode__copy h2 { font-size: clamp(30px, 2vw + 20px, 52px); margin: var(--s3) 0; }
.explode__meter { margin-top: var(--s5); display: flex; align-items: center; gap: 12px; }
.explode__meter i { position: relative; flex: 1; height: 1px; background: var(--line-2); }
.explode__meter b { position: absolute; left: 0; top: -.5px; height: 2px; width: calc(var(--p, 1) * 100%); background: var(--accent-text); }
.explode__stage { position: relative; margin: 0; }
.explode__obj { position: relative; width: 100%; aspect-ratio: 1620 / 1251; }
.part { position: absolute; height: auto; max-width: none; will-change: transform; }
.explode__cap { margin-top: 8px; text-align: right; }
.callout { position: absolute; width: 0; height: 0; z-index: 3; transition: opacity .5s var(--ease); }
.callout__dot { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%; background: var(--bg); border: 2px solid var(--accent-text); }
.callout__text { position: absolute; top: -14px; width: 210px; padding: 8px 12px; background: rgba(13, 18, 24, .9); border: 1px solid var(--line-2); font-size: 12px; line-height: 1.4; color: var(--text-2); }
.callout__text b { display: block; color: var(--text); font-size: 14px; font-weight: 600; margin-bottom: 2px; }
.callout__text .slash-n { margin-right: .5em; }
.callout--r .callout__text { left: 18px; }
.callout--l .callout__text { right: 18px; }
.js-motion .callout { opacity: 0; }
.js-motion .callout.on { opacity: 1; }
@media (max-width: 719px) {
  .callout__text { width: 132px; padding: 5px 7px; font-size: 10px; }
  .callout__text b { font-size: 11px; }
}

/* ---------- Hardware cards: aligned, product never clipped ---------- */
.hw-card__plate img { left: 10%; right: 10%; top: 15%; bottom: 15%; width: 80%; height: 70%; object-position: center; }
.hw-specs li, .hw-specs li:nth-child(even) { padding: 14px 16px; }

/* ---------- Company ---------- */
.company { align-items: center; }
.company__img { grid-column: 1 / -1; position: relative; margin: 0; background: var(--plate); border-radius: var(--radius); overflow: hidden; }
.company__img img { width: 100%; height: auto; }
.company__body { grid-column: 1 / -1; }
@media (min-width: 1024px) { .company__img { grid-column: 1 / span 6; } .company__body { grid-column: 8 / span 5; } }
.company__body .facts-row { margin-top: var(--s5); }

.cta { overflow: visible; }

/* =====================================================================
   MOTION — only when <html class="js-motion"> (set in <head> unless the
   visitor prefers reduced motion). Without it, everything is static.
   ===================================================================== */
.js-motion [data-reveal] { opacity: 0; transform: translateY(32px); transition: opacity 1s var(--ease), transform 1s var(--ease); transition-delay: calc(var(--i, 0) * 90ms); }
.js-motion [data-reveal="fade"] { transform: none; }
.js-motion [data-reveal="scale"] { transform: scale(.94); }
.js-motion [data-reveal].in { opacity: 1; transform: none; }

/* Word-by-word headline reveal */
.js-motion [data-split] .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
.js-motion [data-split] .w > span { display: inline-block; transform: translateY(110%); transition: transform 1s var(--ease); transition-delay: calc(var(--wi, 0) * 45ms); }
.js-motion [data-split].in .w > span { transform: none; }

/* Hero entrance is driven by GSAP (js/motion.js); hidden only until it starts. */
.js-motion .hero__cam img, .js-motion .lock, .js-motion .hud, .js-motion .hero__giant { visibility: hidden; }
.js-motion.motion-ready .hero__cam img, .js-motion.motion-ready .lock, .js-motion.motion-ready .hud, .js-motion.motion-ready .hero__giant { visibility: visible; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .hs__dot::after, .caret { opacity: 0 !important; }
}

/* Exploded view: numbered dots on the render, parts list in the copy column */
.explode__obj .callout__dot { left: -11px; top: -11px; width: 22px; height: 22px; display: grid; place-items: center; font-size: 11px; font-weight: 700; font-style: normal; color: #fff; background: var(--accent); border: 0; font-variant-numeric: tabular-nums; }
.explode__list { list-style: none; margin-top: var(--s4); border-top: 1px solid var(--line); }
.explode__list li { position: static; width: auto; height: auto; display: grid; grid-template-columns: 32px 1fr; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--text-2); transition: opacity .4s var(--ease); }
.explode__list b { display: block; color: var(--text); font-weight: 600; font-size: 14px; }
.js-motion .explode__list li { opacity: .3; }
.js-motion .explode__list li.on { opacity: 1; }
.explode__copy h2 { margin: var(--s2) 0; }
@media (min-width: 1024px) and (max-height: 860px) { .explode__list li { padding: 7px 0; } .explode__copy .muted { display: none; } }
/* Compact report */
@media (min-width: 1024px) {
  #ch-report .r-ev { padding: 10px 0; }
  #ch-report .zoom-ph { width: 84px; aspect-ratio: 16 / 9; }
  #ch-report .r-ev__status { margin-top: 4px; }
  #ch-report .report__head { padding-bottom: 14px; }
  #ch-report .chapter__head { margin-bottom: 24px; }
}
/* Hero: keep copy clear of the giant wordmark */
@media (min-width: 1024px) { .hero__grid { padding-bottom: var(--s6); } .hero__copy { position: relative; z-index: 3; } }
@media (min-width: 1024px) and (max-height: 920px) { .explode__list li { padding: 6px 0; } .explode__copy .muted { display: none; } .explode__copy h2 { font-size: clamp(28px, 1.6vw + 16px, 40px); } }
/* Exploded view on phones: render first, compact list */
@media (max-width: 1023px) {
  .explode__pin { min-height: 0; padding-block: var(--s8); }
  .explode__stage { order: -1; }
  .explode__grid { display: flex; flex-direction: column; }
  .explode__list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
  .explode__list li span span { display: none; }
  .explode__copy .muted, .explode__meter { display: none; }
}

/* =====================================================================
   PASS 3 — report card in hero, use cases, data flow, coverage, exploded view with arrows
   ===================================================================== */

/* Hero: floating morning report (dark UI insert over the plate) */
.hero__report { display: none; }
@media (min-width: 1024px) {
  .hero__report { display: block; position: absolute; z-index: 4; left: calc(59vw - 150px); bottom: 128px; width: 340px; background: var(--bg); border: 1px solid var(--line-2); padding: 16px 18px; }
  .hero__report-top { display: flex; justify-content: space-between; }
  .hero__report-title { font-size: 18px; font-weight: 700; letter-spacing: -.02em; margin: 6px 0 10px; }
  .hero__report ul { list-style: none; }
  .hero__report li { display: grid; grid-template-columns: 40px 1fr auto; gap: 8px; align-items: baseline; padding: 7px 0; border-top: 1px solid var(--line); font-size: 13px; color: var(--text-2); }
  .hero__report time { color: var(--label); font-size: 12px; font-variant-numeric: tabular-nums; }
  .hero__report b, .hero__report i { font-size: 9px; font-style: normal; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; padding: 3px 6px; }
  .hero__report b { background: var(--accent); color: #fff; }
  .hero__report i { background: rgba(237, 238, 240, .07); color: var(--text); }
}
@media (min-width: 1024px) and (max-height: 820px) { .hero__report { bottom: 112px; } .hero__report li:last-child { display: none; } }

/* Use cases */
.usecases { display: grid; gap: var(--s3); }
@media (min-width: 900px) { .usecases { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.usecase { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s3); display: flex; flex-direction: column; gap: 12px; transition: border-color .3s, transform .4s var(--ease); }
.usecase:hover { border-color: var(--line-2); transform: translateY(-4px); }
.usecase__art { aspect-ratio: 16 / 9; background: var(--bg); border: 1px solid var(--line); margin-bottom: var(--s1); color: var(--text-2); display: grid; place-items: center; overflow: hidden; }
.usecase__art svg { width: 92%; height: auto; }
.usecase__mark { stroke: var(--accent-text); stroke-width: 2; fill: none; }
.usecase .cone { transform-box: view-box; }
.js-motion .usecase .cone { animation: cone 6s var(--ease-io) infinite alternate; }
.usecase:nth-child(1) .cone { transform-origin: 250px 30px; }
.usecase:nth-child(2) .cone { transform-origin: 200px 22px; }
.usecase:nth-child(3) .cone { transform-origin: 290px 66px; }
@keyframes cone { from { transform: rotate(-9deg); } to { transform: rotate(7deg); } }
.usecase h3 { font-size: 22px; }
.ticks { list-style: none; display: grid; gap: 8px; margin-top: 4px; }
.ticks li { position: relative; padding-left: 20px; font-size: 15px; color: var(--text-2); }
.ticks li::before { content: ""; position: absolute; left: 0; top: .6em; width: 10px; height: 1.5px; background: var(--text); }

/* Data flow pipeline */
.flow { position: relative; border: 1.5px dashed var(--accent); border-radius: var(--radius); padding: var(--s3); }
@media (min-width: 1024px) { .flow { padding: var(--s4); } }
.flow__head { display: flex; justify-content: space-between; margin-bottom: var(--s3); }
.flow__nodes { position: relative; z-index: 1; list-style: none; display: grid; gap: var(--s2); }
@media (min-width: 900px) { .flow__nodes { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.flow__node { position: relative; background: var(--surface); border: 1px solid var(--line); padding: var(--s3) var(--s2); display: grid; gap: 8px; align-content: start; }
.flow__node b { font-size: 18px; letter-spacing: -.01em; }
.flow__node span:last-child { font-size: 14px; color: var(--text-2); }
.flow__ico { width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid var(--line-2); background: var(--surface); color: var(--text); margin-bottom: 6px; }
.flow__node--out .flow__ico { background: var(--accent); border-color: var(--accent); color: #fff; }
.flow__wire { display: none; }
@media (min-width: 900px) {
  .flow__node:not(:last-child)::after { content: ""; position: absolute; top: calc(var(--s3) + 24px); right: calc(-1 * var(--s2) - 1px); width: var(--s2); height: 2px; background: repeating-linear-gradient(90deg, var(--accent-text) 0 4px, transparent 4px 7px); }
  .js-motion .flow.in .flow__node:not(:last-child)::after { animation: flow 1s linear infinite; background-size: 7px 2px; }
}
@keyframes flow { to { background-position: 7px 0; } }

/* Coverage schematic */
.coverage { display: grid; gap: var(--s3); margin-bottom: var(--s5); }
@media (min-width: 900px) { .coverage { grid-template-columns: 1fr 1fr; } }
.coverage__plan { margin: 0; background: var(--surface); border: 1px solid var(--line); padding: var(--s3); }
.coverage__plan figcaption { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--s2); gap: 12px; }
.coverage__plan figcaption b { font-size: 16px; }
.coverage__plan svg { width: 100%; height: auto; }
.coverage .plan { fill: none; stroke: var(--line-2); stroke-width: 1.5; }
.coverage .plan--obj { fill: rgba(237, 238, 240, .04); }
.coverage .fov { fill: rgba(237, 238, 240, .07); stroke: rgba(237, 238, 240, .3); stroke-dasharray: 4 4; }
.coverage .fov--vion { fill: rgba(143, 107, 255, .16); stroke: var(--accent-text); stroke-dasharray: none; }
.coverage .cam { fill: var(--text); }
.coverage .cam--vion { fill: var(--accent-text); }
.coverage .gap { stroke: var(--label); stroke-width: 2; stroke-dasharray: 3 4; }
.coverage .reach { fill: none; stroke: rgba(143, 107, 255, .3); stroke-dasharray: 2 6; }
.coverage .lockbox { fill: none; stroke: var(--accent-text); stroke-width: 2; }
.coverage .sweep { transform-origin: 200px 130px; transform-box: view-box; }
.js-motion .coverage .sweep { animation: sweep 9s linear infinite; }
@keyframes sweep { to { transform: rotate(360deg); } }
.coverage__note { grid-column: 1 / -1; color: var(--text-2); }

/* Exploded view: centered object, leader arrows to labels */
.explode__pin { padding-block: calc(var(--header-h) + 24px) 32px; }
.explode__head { text-align: center; max-width: 760px; margin: 0 auto var(--s2); }
.explode__head .slash { margin-bottom: var(--s2); }
.explode__head h2 { font-size: clamp(28px, 1.8vw + 18px, 48px); }
.explode__frame { position: relative; margin: 0 auto; height: min(68svh, 720px); max-width: 1200px; }
.explode__obj { position: absolute; left: 50%; top: 47%; height: 66%; aspect-ratio: 1620 / 1251; width: auto; translate: -50% -50%; }
.explode__wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 2; }
.explode__wires path { fill: none; stroke: rgba(237, 238, 240, .6); stroke-width: 1.2; }
.explode__wires circle { fill: var(--accent-text); }
.explode__wires .ah { fill: rgba(237, 238, 240, .6); }
.explode__labels { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.xl { position: absolute; width: 230px; padding: 2px 0; transition: opacity .5s var(--ease); }
.xl b { display: block; font-size: 15px; font-weight: 600; color: var(--text); }
.xl span { display: block; font-size: 12px; color: var(--label); line-height: 1.4; }
.xl--l { left: 0; text-align: right; }
.xl--r { right: 0; }
.js-motion .xl { opacity: 0; }
.js-motion .xl.on { opacity: 1; }
.js-motion .explode__wires g { opacity: 0; transition: opacity .5s var(--ease); }
.js-motion .explode__wires g.on { opacity: 1; }
.explode__cap { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; }
@media (max-width: 1023px) {
  .explode__frame { height: auto; }
  .explode__obj { position: relative; left: auto; top: auto; translate: none; width: 70%; height: auto; margin: 16% auto 20%; }
  .explode__wires { display: none; }
  .explode__labels { position: static; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
  .xl, .xl--l, .xl--r { position: static; width: auto; text-align: left; border-top: 1px solid var(--line); padding-top: 8px; }
  .explode__cap { position: static; margin-top: var(--s3); }
}

/* PASS 4 */
.site-header { z-index: 1000; transform: translateZ(0); }
.hero__report { display: none !important; }
.explode__pin { padding-block: calc(var(--header-h) + 16px) 16px; }
.explode__head { margin-bottom: 0; }
.explode__head h2 { font-size: clamp(26px, 1.4vw + 16px, 40px); }
.explode__cap { position: static; margin-top: 8px; text-align: center; }
@media (min-width: 1024px) {
  .explode__frame { height: calc(100svh - var(--header-h) - 150px); max-height: 860px; }
  .explode__obj { top: 46%; height: 76%; }
}
.hw-card__plate img { top: 17%; bottom: 17%; height: 66%; }

/* PASS 5 — hero shows NEXA framed like its hardware card: whole camera, centred on the plate.
   Centred with flex (GSAP owns the transform of .hero__cam). */
.hero__visual { display: flex; align-items: center; justify-content: center; }
.hero__cam { position: relative; inset: auto; height: 74%; width: auto; aspect-ratio: 1200 / 1310; flex: none; }
.hero__cam img { filter: drop-shadow(0 24px 24px rgba(36, 36, 36, .22)); }
@media (min-width: 1024px) {
  .hero__visual { position: absolute; z-index: 1; grid-column: auto; grid-row: auto; top: 0; bottom: 0; right: calc(50% - 50vw); width: 41vw; height: auto; aspect-ratio: auto; margin: 0; align-self: stretch; }
  .hero__cam { height: min(66%, 600px); }
}

/* PASS 6 — attention scene: field-of-view map (in the panel) keeps every candidate in sight;
   hovering / tapping a candidate turns the lens to it */
.fov { position: relative; width: 100%; aspect-ratio: 3 / 2; margin: 0 0 var(--s2); border: 1px solid var(--line-2); background: #000; overflow: hidden; }
.fov__img { width: 100%; height: 100%; object-fit: cover; opacity: .8; }
.fov__label { position: absolute; z-index: 2; left: 0; bottom: 0; font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-2); background: rgba(13, 18, 24, .82); padding: 3px 7px; }
.fov__box { position: absolute; border: 1px solid rgba(255, 255, 255, .85); transition: border-color .3s, box-shadow .3s; }
.fov__box b { position: absolute; left: -1px; bottom: 100%; min-width: 14px; padding: 0 3px; font-size: 9px; line-height: 14px; font-style: normal; font-weight: 700; text-align: center; color: #fff; background: rgba(13, 18, 24, .9); }
.fov__box.is-active { border-color: var(--accent-text); }
.fov__box.is-active b { background: var(--accent); }
.fov__lens { position: absolute; border: 1.5px solid #fff; box-shadow: 0 0 0 999px rgba(0, 0, 0, .45); transition: all 1.1s var(--ease-io); }
.box.is-hover, .fov__box.is-hover { border-color: #fff; box-shadow: 0 0 0 2px rgba(255, 255, 255, .35); }
.cand { cursor: pointer; transition: background-color .2s; }
.cand.is-peek { background: var(--surface-2); }
.cand:hover .cand__label { color: #fff; }
.panel__head + .fov { margin-top: 4px; }

/* PASS 7 — mobile order: hero photo first (right under the header), then the headline;
   the film follows the ticker. Flex order only, the markup stays as is. */
@media (max-width: 1023px) {
  main { display: flex; flex-direction: column; }
  main > * { flex: none; min-width: 0; }
  main > .hero { order: -3; }
  main > .ticker { order: -2; }
  main > .film { order: -1; padding-top: var(--s5); }
  .hero__grid { padding-top: 0; }
  .hero__visual { order: -1; }
}