/* FinPartners homepage — kit + shell + sections (assembled 2026-11-04T09:44Z) */

/* ===== kit.css ===== */
/* ══ FinPartners kit — mirrors finpartners.org base.css (g- prefix) + landing layout (l- prefix). Root: .fp ══ */
@property --a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@property --bl { syntax: '<length>'; inherits: false; initial-value: 10px; }
@property --bc { syntax: '<color>'; inherits: false; initial-value: #3A4750; }
.fp {
  --void: #06080A; --deck: #0D1114; --plate: #141A1E; --rail: #1C2429;
  --wire: #27313A; --wire-hi: #3A4750; --wire-input: #5C6B65;
  --ink: #E9EFEA; --ink-2: #AAB6B0; --ink-3: #85928C;
  --volt: #CBFF3A; --volt-chip: #243310; --volt-deep: #A9DB12;
  --loot: #FFD166; --loot-chip: #2B2310;
  --warn: #FF8A34; --warn-chip: #2E1A0B;
  --bad: #FF5268; --bad-chip: #2A1116;
  --frost: #9FC2D4; --frost-chip: #132028; --frost-deep: #5E7784;
  --f-display: 'Science Gothic', 'Arial Narrow', sans-serif;
  --f-text: 'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono: 'Martian Mono', ui-monospace, Menlo, monospace;
  --ease-hud: cubic-bezier(.2, .8, .1, 1);
  --ease-money: cubic-bezier(.16, 1, .3, 1);
  --glow-volt: 0 0 0 1px rgba(203,255,58,.55), 0 0 24px -4px rgba(203,255,58,.45);
  --gut: 24px;
  position: relative; overflow: clip; background: var(--void); color: var(--ink);
  font: 400 16px/1.6 var(--f-text); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
.fp *, .fp *::before, .fp *::after { box-sizing: border-box; }
.fp :focus-visible { outline: 2px solid var(--volt); outline-offset: 3px; }
.fp ::selection { background: var(--volt); color: var(--void); }

/* ── type ── */
.g-h1 { margin: 0; font: 800 96px/.92 var(--f-display); font-stretch: 62%; text-transform: uppercase; letter-spacing: -.005em; text-wrap: balance; }
.g-h2 { margin: 0; font: 700 56px/.96 var(--f-display); font-stretch: 75%; text-transform: uppercase; text-wrap: balance; }
.g-stmt { margin: 0; font: 700 40px/1 var(--f-display); font-stretch: 90%; text-wrap: balance; }
.g-title { margin: 0; font: 700 32px/1 var(--f-display); font-stretch: 75%; text-transform: uppercase; }
.g-h3 { margin: 0; font: 700 22px/28px var(--f-text); letter-spacing: -.005em; text-wrap: balance; }
.g-h4 { margin: 0; font: 700 17px/24px var(--f-text); }
.g-lede { margin: 0; font: 400 20px/30px var(--f-text); color: var(--ink-2); text-wrap: pretty; }
.g-body { margin: 0; font: 400 16px/26px var(--f-text); text-wrap: pretty; }
.g-small { margin: 0; font: 400 14px/21px var(--f-text); }
.g-cap { margin: 0; font: 400 13px/19px var(--f-text); color: var(--ink-3); }
.g-label { font: 600 12px/1.2 var(--f-mono); font-stretch: 87.5%; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.g-label--ix { font-size: 11px; color: var(--ink-3); }
.g-mono { font-family: var(--f-mono); font-stretch: 87.5%; font-variant-numeric: tabular-nums; }
.g-num-xl { font: 500 56px/1 var(--f-mono); font-stretch: 87.5%; font-variant-numeric: tabular-nums; letter-spacing: -.02em; white-space: nowrap; text-shadow: 0 0 18px rgba(203,255,58,.18); }
.g-num-l { font: 500 32px/1 var(--f-mono); font-stretch: 87.5%; font-variant-numeric: tabular-nums; letter-spacing: -.01em; white-space: nowrap; }
.g-num-m { font: 500 20px/1.1 var(--f-mono); font-stretch: 87.5%; font-variant-numeric: tabular-nums; white-space: nowrap; }
.g-num { font: 400 14px/20px var(--f-mono); font-stretch: 87.5%; font-variant-numeric: tabular-nums; white-space: nowrap; }
.g-cur { font-size: .55em; color: var(--ink-2); letter-spacing: 0; }
.g-t-ink { color: var(--ink); } .g-t-2 { color: var(--ink-2); } .g-t-3 { color: var(--ink-3); }
.g-t-volt { color: var(--volt); } .g-t-loot { color: var(--loot); } .g-t-warn { color: var(--warn); }
.g-t-bad { color: var(--bad); } .g-t-frost { color: var(--frost); }
@media (max-width: 720px) {
  .g-h1 { font-size: 52px; line-height: .94; } .g-h2 { font-size: 34px; line-height: 1; }
  .g-stmt { font-size: 28px; line-height: 1.05; } .g-title { font-size: 26px; }
  .g-lede { font-size: 17px; line-height: 26px; } .g-num-xl { font-size: 40px; }
}

/* ── HUD plate: bevel TL+BR, brackets TR+BL that light up lime on hover ── */
.g-plate {
  --cut: 20px; --edge: var(--wire-hi); --fill: var(--deck);
  position: relative; border: 1px solid transparent;
  background:
    linear-gradient(135deg, transparent 50%, var(--edge) 50% calc(50% + 1.2px), transparent calc(50% + 1.2px)) 0 0 / var(--cut) var(--cut) no-repeat border-box,
    linear-gradient(135deg, transparent calc(50% - 1.2px), var(--edge) calc(50% - 1.2px) 50%, transparent 50%) 100% 100% / var(--cut) var(--cut) no-repeat border-box,
    linear-gradient(var(--fill), var(--fill)) padding-box,
    linear-gradient(var(--edge), var(--edge)) border-box;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}
.g-plate::before {
  content: ''; position: absolute; inset: -1px; pointer-events: none; z-index: 2;
  --bl: 10px; --bc: #3A4750;
  background:
    linear-gradient(var(--bc) 0 0) 100% 0 / var(--bl) 2px no-repeat,
    linear-gradient(var(--bc) 0 0) 100% 0 / 2px var(--bl) no-repeat,
    linear-gradient(var(--bc) 0 0) 0 100% / var(--bl) 2px no-repeat,
    linear-gradient(var(--bc) 0 0) 0 100% / 2px var(--bl) no-repeat;
  transition: --bl .16s var(--ease-hud), --bc .16s linear;
}
.g-plate:is(:hover, :focus-within)::before { --bl: 14px; --bc: #CBFF3A; }
.g-plate--sm { --cut: 12px; } .g-plate--xs { --cut: 6px; }
.g-plate--raised { --fill: var(--plate); }
.g-plate--volt { --edge: var(--volt); }
.g-plate--loot { --edge: var(--loot); }
.g-plate--warn { --edge: var(--warn); --fill: var(--warn-chip); }
.g-plate--bad { --edge: var(--bad); --fill: var(--bad-chip); }
.g-plate--frost { --edge: var(--frost); }
.g-plate--quiet::before { display: none; }
.g-plate-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.g-scan { position: relative; isolation: isolate; }
.g-scan::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: repeating-linear-gradient(0deg, rgba(233,239,234,.028) 0 1px, transparent 1px 3px); }
.g-brackets {
  --c: rgba(203,255,58,.9); --l: 16px; --t: 1.5px;
  background:
    linear-gradient(var(--c) 0 0) 0 0 / var(--l) var(--t) no-repeat, linear-gradient(var(--c) 0 0) 0 0 / var(--t) var(--l) no-repeat,
    linear-gradient(var(--c) 0 0) 100% 0 / var(--l) var(--t) no-repeat, linear-gradient(var(--c) 0 0) 100% 0 / var(--t) var(--l) no-repeat,
    linear-gradient(var(--c) 0 0) 0 100% / var(--l) var(--t) no-repeat, linear-gradient(var(--c) 0 0) 0 100% / var(--t) var(--l) no-repeat,
    linear-gradient(var(--c) 0 0) 100% 100% / var(--l) var(--t) no-repeat, linear-gradient(var(--c) 0 0) 100% 100% / var(--t) var(--l) no-repeat;
}
.g-glass { background: rgba(13,17,20,.72); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); box-shadow: inset 0 0 0 1px var(--wire-hi); }

/* ── keys (buttons / link-buttons) ── */
.g-key {
  --cut: 12px;
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 22px; border: 0; margin: 0; cursor: pointer; text-decoration: none; white-space: nowrap;
  font: 700 16px/1 var(--f-text); letter-spacing: .01em; color: #06080A;
  background: linear-gradient(180deg, #DEFF7A, #CBFF3A 48%, #A9DB12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 -3px 0 rgba(6,8,10,.25);
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  transition: translate .09s linear, box-shadow .09s linear, background .16s linear;
}
.g-key:hover { color: #06080A; background: linear-gradient(180deg, #E8FF9C, #D6FF5E 48%, #B4E620); }
.g-key:active { translate: 0 2px; box-shadow: inset 0 1px 0 rgba(255,255,255,.4), inset 0 -1px 0 rgba(6,8,10,.25); }
.g-key:focus-visible { outline: none; box-shadow: inset 0 0 0 2px #06080A, inset 0 0 0 4px #CBFF3A; }
.g-key svg { width: 18px; height: 18px; flex: none; }
.g-key--l { --cut: 14px; min-height: 56px; padding: 0 28px; font-size: 17px; }
.g-key--s { --cut: 8px; min-height: 44px; padding: 0 16px; font-size: 14px; }
.g-key--ghost { color: var(--ink); background: var(--plate); box-shadow: inset 0 0 0 1px var(--wire-input); }
.g-key--ghost:hover { color: var(--ink); background: var(--rail); }
.g-key--quiet { color: var(--ink-2); background: transparent; box-shadow: none; padding: 0 12px; text-decoration: underline; text-decoration-color: var(--wire-input); text-underline-offset: 4px; }
.g-key--quiet:hover { color: var(--ink); background: transparent; }
.g-key--rim { border: 2px solid transparent;
  background: linear-gradient(180deg, #DEFF7A, #CBFF3A 48%, #A9DB12) padding-box,
              conic-gradient(from var(--a), transparent 0 68%, #CBFF3A 80%, #FFFFFF 85%, #CBFF3A 90%, transparent 100%) border-box;
  animation: g-rim 2.8s linear infinite; }

/* ── chips (status, 24px, never interactive) ── */
.g-chip { --cut: 6px; display: inline-flex; align-items: center; gap: 6px; min-height: 24px; padding: 0 8px; white-space: nowrap;
  font: 600 12px/1 var(--f-mono); font-stretch: 87.5%; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-2); background: var(--rail);
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); }
.g-chip svg { width: 14px; height: 14px; flex: none; }
.g-chip--ok { color: var(--volt); background: var(--volt-chip); }
.g-chip--bad { color: var(--bad); background: var(--bad-chip); }
.g-chip--warn { color: var(--warn); background: var(--warn-chip); }
.g-chip--loot { color: var(--loot); background: var(--loot-chip); }
.g-chip--held { color: var(--frost); background: repeating-linear-gradient(135deg, var(--frost-chip) 0 4px, #182A34 4px 8px); }
.g-chip--case { text-transform: none; letter-spacing: .02em; }
.g-oct { display: inline-block; width: 8px; height: 8px; flex: none; background: var(--volt);
  clip-path: polygon(29.3% 0, 70.7% 0, 100% 29.3%, 100% 70.7%, 70.7% 100%, 29.3% 100%, 0 70.7%, 0 29.3%); }

/* ── page layout ── */
.l-wrap { width: 100%; max-width: 1312px; margin: 0 auto; padding: 0 var(--gut); }
.l-sec { position: relative; padding-top: clamp(72px, 7vw, 112px); scroll-margin-top: 72px; }
.l-head { display: flex; flex-direction: column; gap: 16px; margin-bottom: clamp(32px, 4vw, 56px); }
.l-kicker { display: inline-flex; align-items: center; gap: 10px; color: var(--volt); }
.l-kicker::before { content: ''; width: 8px; height: 8px; flex: none; background: var(--volt);
  clip-path: polygon(29.3% 0, 70.7% 0, 100% 29.3%, 100% 70.7%, 70.7% 100%, 29.3% 100%, 0 70.7%, 0 29.3%); }
.l-h2 { font-size: clamp(34px, 3.9vw, 56px); font-stretch: 56%; }
.l-lede { max-width: 720px; }

/* ── 3D helpers ── */
.x-p3d { perspective: 1400px; }
.x-pres { transform-style: preserve-3d; }

/* ── shared keyframes (g- = site's own) ── */
@keyframes g-rim { to { --a: 360deg; } }
@keyframes g-rise { from { opacity: 0; translate: 0 12px; } to { opacity: 1; translate: 0 0; } }
@keyframes g-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes g-type { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes g-ping { 0% { box-shadow: 0 0 0 0 rgba(203,255,58,.6); } 100% { box-shadow: 0 0 0 10px rgba(203,255,58,0); } }
@keyframes g-strike { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes g-flash { 0% { opacity: 0; } 20% { opacity: .55; } 100% { opacity: 0; } }
@keyframes g-sweep { from { translate: 0 -100%; } to { translate: 0 100%; } }
@keyframes g-spin { to { rotate: 360deg; } }
@keyframes g-marquee { to { translate: -50% 0; } }
@keyframes g-chase { 0%, 70%, 100% { opacity: .25; } 80% { opacity: 1; } }

/* ── motion off: the "motion" tweak (.fp--still) and the OS setting ── */
.fp--still *, .fp--still *::before, .fp--still *::after { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  .fp *, .fp *::before, .fp *::after { animation-play-state: paused !important; transition-duration: .01ms !important; }
}

/* ===== shell.css ===== */
/* ══ header (hd-) ══ */
.hd { position: fixed; left: 24px; right: 24px; top: 16px; height: 64px; z-index: 50; display: flex; align-items: center;
  justify-content: space-between; gap: 16px; padding: 0 12px 0 20px; }
.hd-logo { display: inline-flex; align-items: center; min-height: 44px; }
.hd-logo img { display: block; width: auto; height: 21px; }
.hd-nav { display: flex; gap: 4px; }
.hd-act { display: flex; gap: 8px; align-items: center; }
@media (max-width: 1099px) { .hd-nav { display: none; } }
@media (max-width: 720px) {
  .hd { left: 8px; right: 8px; top: 8px; height: 56px; padding: 0 6px 0 14px; }
  .hd .hd-logo img { height: 17px; }
  .hd-cta { display: none; }
}

/* ══ hero (hx-) — the team photo is the whole hero; WebGL depth camera on top of a static fallback ══ */
.hx { position: relative; isolation: isolate; overflow: hidden; background: var(--void);
  --hh: clamp(640px, calc(100vw / 1.7285), 940px);
  --cw: max(100vw, calc(var(--hh) * 1.7285));
  --u: calc(var(--cw) / 1649);
  --t: min(var(--u), calc((var(--hh) - 120px) / 640), 1.3px);
  height: var(--hh); display: flex; flex-direction: column; }
.hx-band { position: absolute; inset: 0; z-index: 0; }
.hx-cam { position: absolute; right: 0; top: calc((var(--hh) - var(--cw) / 1.7285) * .3); width: var(--cw); aspect-ratio: 1649 / 954;
  transform-origin: 62% 42%; }
.hx:not(.is-gl) .hx-cam { animation: hx-drift 34s ease-in-out infinite alternate; }
@keyframes hx-drift { from { scale: 1.02; } to { scale: 1.045; } }
.hx-img, .hx-gl { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.hx-gl { opacity: 0; transition: opacity 1.4s var(--ease-money); }
.hx-gl.is-on { opacity: 1; }
.hx-lay { position: absolute; inset: 0; z-index: 2; pointer-events: none; transform: scale(var(--hx-z, 1)); transform-origin: 50% 50%; }
.hx-neon { position: absolute; display: block; height: auto; mix-blend-mode: screen; opacity: .6; animation: hx-neon 7s linear infinite; }
.hx-neon--sign { left: 89.751%; top: 10.063%; width: 10.249%; translate: calc(var(--hx-px, 0px) * -.33) calc(var(--hx-py, 0px) * -.33); }
.hx-neon--crown { left: 93.39%; top: 66.667%; width: 6.61%; animation-duration: 5.3s; animation-delay: -2.1s;
  translate: calc(var(--hx-px, 0px) * .34) calc(var(--hx-py, 0px) * .34); }
@keyframes hx-neon { 0% { opacity: .55; } 18% { opacity: .85; } 36% { opacity: .6; } 55% { opacity: .9; } 57% { opacity: .15; } 58% { opacity: .9; }
  59.5% { opacity: .25; } 61% { opacity: .95; } 78% { opacity: .7; } 100% { opacity: .55; } }
.hx-note { position: absolute; display: block; height: auto; translate: calc(var(--hx-px, 0px) * .12) calc(var(--hx-py, 0px) * .12);
  -webkit-mask-image: linear-gradient(100deg, #000 42%, transparent 58%); mask-image: linear-gradient(100deg, #000 42%, transparent 58%);
  -webkit-mask-size: 260% 100%; mask-size: 260% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  animation: hx-write 1.6s cubic-bezier(.4,.1,.3,1) .6s both; }
.hx-note--s { left: 30.321%; top: 11.321%; width: 10.916%; }
.hx-note--a { left: 50.576%; top: 11.321%; width: 13.341%; animation-delay: 1.5s; }
.hx-note--v { left: 78.836%; top: 13.417%; width: 9.339%; animation-delay: 2.4s; }
@keyframes hx-write { from { -webkit-mask-position: 100% 0; mask-position: 100% 0; } to { -webkit-mask-position: 0 0; mask-position: 0 0; } }
.hx-veil { position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(90deg, rgb(6 8 10 / .8) 0, rgb(6 8 10 / .52) calc(var(--u) * 330), rgb(6 8 10 / 0) calc(var(--u) * 640)),
    linear-gradient(180deg, rgb(6 8 10 / .55) 0, rgb(6 8 10 / 0) 120px),
    linear-gradient(0deg, var(--void) 0, rgb(6 8 10 / 0) calc(var(--u) * 150)); }
.hx-grid { position: relative; z-index: 4; flex: 1 0 auto; display: flex; align-items: center;
  padding: 96px 24px calc(120 * var(--t)) 44px; pointer-events: none; }
.hx-copy { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: calc(30 * var(--t));
  width: calc(560 * var(--t)); min-width: 0; }
.hx-copy a { pointer-events: auto; }
.hx-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: max(10.5px, calc(12.5 * var(--t))); letter-spacing: .16em; color: var(--ink); }
.hx-h1 { margin: 0 0 .45em; font: 900 calc(60 * var(--t))/1.02 'Rubik', 'Arial Black', sans-serif; letter-spacing: -.01em; text-transform: uppercase;
  color: #fff; text-shadow: 0 2px 30px rgba(6,8,10,.55); white-space: nowrap; }
.hx-hi { position: relative; display: inline-block; color: var(--volt); text-shadow: 0 0 34px rgba(203,255,58,.28), 0 2px 30px rgba(6,8,10,.5); }
.hx-swoosh { position: absolute; left: calc(-1% - 16px); top: 100%; width: 53%; height: auto; aspect-ratio: 1080 / 140; margin-top: calc(.1em - 16px);
  box-sizing: content-box; padding: 16px; filter: drop-shadow(0 0 10px rgba(203,255,58,.3)); max-width: none;
  -webkit-mask-image: linear-gradient(90deg, #000 45%, transparent 55%); mask-image: linear-gradient(90deg, #000 45%, transparent 55%);
  -webkit-mask-size: 240% 100%; mask-size: 240% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  animation: hx-write .8s cubic-bezier(.5,.05,.3,1) .35s both; }
.hx-lede { margin: 0; max-width: 22em; font-size: max(15px, calc(20.5 * var(--t))); line-height: 1.5; color: #D4DBD6; text-wrap: pretty; }
.hx-row { display: flex; gap: calc(20 * var(--t)); align-items: stretch; flex-wrap: wrap; }
.hx-row .g-key--l { min-height: max(48px, calc(58 * var(--t))); padding: 0 calc(30 * var(--t)); font-size: max(15px, calc(17 * var(--t))); }
.hx-go { display: inline-flex; filter: drop-shadow(0 0 14px rgba(203,255,58,.30)); transition: filter .16s var(--ease-hud); }
.hx-go:hover { filter: drop-shadow(0 0 22px rgba(203,255,58,.5)); }
.hx-more { white-space: nowrap; background: rgb(6 8 10 / .62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.hx-perks { list-style: none; margin: 0; padding: 0; display: flex; gap: calc(26 * var(--t)); }
.hx-perk { display: flex; flex-direction: column; align-items: center; gap: calc(12 * var(--t)); min-width: 0; text-align: center; }
.hx-ring { display: grid; place-items: center; width: max(38px, calc(50 * var(--t))); aspect-ratio: 1; border-radius: 50%;
  border: 1.5px solid var(--volt); background: rgb(6 8 10 / .55); box-shadow: 0 0 18px rgba(203,255,58,.18), inset 0 0 10px rgba(203,255,58,.12); }
.hx-ring svg { width: 46%; height: 46%; color: var(--volt); }
.hx-perk b { font: 500 max(12px, calc(15 * var(--t)))/1.25 var(--f-text); color: var(--ink); white-space: nowrap; }
.hx-tagline { position: absolute; left: 44px; bottom: calc(26 * var(--u)); z-index: 4; margin: 0; pointer-events: none;
  font: 500 max(10px, calc(12 * var(--t)))/1 var(--f-mono); letter-spacing: .52em; text-transform: uppercase; color: var(--ink-2); opacity: .85; }
@media (min-width: 1100px) and (max-width: 1279px) { .hx-eyebrow { display: none; } }
@media (max-width: 1099px) {
  .hx { height: auto; display: block; --u: 1px; --t: 1px; }
  .hx-band { position: relative; inset: auto; height: calc(165vw / 1.7285); overflow: hidden; }
  .hx-cam { top: 0; right: auto; left: 50%; width: 165vw; margin-left: calc(-165vw * .6); }
  .hx-veil { background: linear-gradient(180deg, rgb(6 8 10 / .7) 0, rgb(6 8 10 / 0) 96px), linear-gradient(0deg, var(--void) 0, rgb(6 8 10 / 0) 36%); }
  .hx-grid { padding: 8px var(--gut) 48px; }
  .hx-copy { width: 100%; max-width: 620px; gap: 22px; translate: none; }
  .hx-h1 { font-size: clamp(34px, 8.6vw, 58px); white-space: normal; }
  .hx-lede { font-size: 17px; }
  .hx-perks { gap: 12px; width: 100%; justify-content: space-between; }
  .hx-perk b { font-size: 12px; white-space: normal; }
  .hx-tagline { display: none; }
}
@media (max-width: 720px) {
  .hx-row { width: 100%; }
  .hx-row > * { flex: 1 1 100%; }
  .hx-row .g-key--l { width: 100%; }
  .hx-go { display: flex; }
}
.fp--still .hx-note, .fp--still .hx-swoosh { animation: none; -webkit-mask-image: none; mask-image: none; }
@media (prefers-reduced-motion: reduce) {
  .hx-note, .hx-swoosh { animation: none; -webkit-mask-image: none; mask-image: none; }
  .hx .hx-cam { animation: none; }
}

/* ══ final CTA (fin-) — extruded 3D brand mark ══ */
.fin { padding-bottom: clamp(56px, 6vw, 88px); }
.fin-plate { --cut: 28px; padding: clamp(28px, 4vw, 56px) clamp(22px, 4vw, 64px); display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 340px); column-gap: 40px; row-gap: 24px; align-items: center; overflow: hidden; }
.fin-art::before { content: ''; position: absolute; inset: -30% -40%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(203,255,58,.12), transparent 75%); }
.fin-t { position: relative; z-index: 3; display: flex; flex-direction: column; gap: 18px; max-width: 720px; }
.fin-h { font-size: clamp(40px, 5.4vw, 80px); font-stretch: 56%; }
.fin-act { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 8px; }
.fin-art { position: relative; z-index: 2; height: 320px; perspective: 900px; perspective-origin: 50% 40%; }
.fin-floor { position: absolute; left: -40%; right: -40%; bottom: -60px; height: 260px; transform: rotateX(74deg); transform-origin: 50% 100%;
  background-image: linear-gradient(rgba(203,255,58,.22) 1px, transparent 1px), linear-gradient(90deg, rgba(203,255,58,.22) 1px, transparent 1px);
  background-size: 32px 32px; animation: fin-floor 2.6s linear infinite;
  -webkit-mask-image: radial-gradient(60% 70% at 50% 100%, #000 20%, transparent 75%); mask-image: radial-gradient(60% 70% at 50% 100%, #000 20%, transparent 75%); }
@keyframes fin-floor { to { background-position: 0 32px; } }
.fin-orbit { position: absolute; left: 50%; top: 50%; width: 300px; height: 300px; margin: -150px 0 0 -150px; border-radius: 50%;
  border: 1px dashed rgba(203,255,58,.35); transform: rotateX(76deg); animation: fin-orbit 16s linear infinite; }
.fin-orbit::after { content: ''; position: absolute; left: 50%; top: -5px; width: 10px; height: 10px; margin-left: -5px; background: var(--volt);
  box-shadow: 0 0 14px var(--volt); clip-path: polygon(29.3% 0, 70.7% 0, 100% 29.3%, 100% 70.7%, 70.7% 100%, 29.3% 100%, 0 70.7%, 0 29.3%); }
@keyframes fin-orbit { from { transform: rotateX(76deg) rotateZ(0deg); } to { transform: rotateX(76deg) rotateZ(360deg); } }
.fin-num { position: absolute; left: 50%; top: 46%; width: 200px; height: 220px; margin: -110px 0 0 -100px; transform-style: preserve-3d;
  transform: rotateX(10deg) rotateY(-30deg); animation: fin-turn 10s ease-in-out -5s infinite alternate; }
@keyframes fin-turn { from { transform: rotateX(14deg) rotateY(-36deg); } to { transform: rotateX(6deg) rotateY(36deg); } }
.fin-l { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font: 500 220px/1 var(--f-mono); font-stretch: 87.5%; backface-visibility: hidden; }
.fin-l--front { text-shadow: 0 0 28px rgba(203,255,58,.45); }
.fin-glow { position: absolute; left: 50%; top: 80%; width: 240px; height: 56px; margin-left: -120px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(203,255,58,.32), transparent); }
.fin-cap { position: absolute; left: 50%; translate: -50% 0; white-space: nowrap; }
.fin-cap--t { top: 8px; }
.fin-cap--b { bottom: 8px; }
@media (max-width: 900px) {
  .fin-plate { grid-template-columns: minmax(0, 1fr); }
  .fin-art { height: 260px; order: -1; }
  .fin-num { scale: .78; }
  .fin-orbit { width: 230px; height: 230px; margin: -115px 0 0 -115px; }
}
@media (max-width: 720px) { .fin-act .g-key { width: 100%; } }

/* ══ footer (ft-) ══ */
.ft { border-top: 1px solid var(--wire); padding: 40px 0; }
.ft-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 20px; align-items: start; }
.ft-brand { grid-column: span 5; display: flex; flex-direction: column; gap: 12px; }
.ft-brand .hd-logo img { height: 22px; }
.ft-op { grid-column: span 4; display: flex; flex-direction: column; gap: 6px; }
.ft-docs { grid-column: span 3; display: flex; flex-wrap: wrap; column-gap: 16px; }
.ft-docs a { min-height: 44px; display: inline-flex; align-items: center; color: var(--ink-2); text-decoration: underline;
  text-decoration-color: var(--wire-input); text-underline-offset: 4px; }
.ft-docs a:hover { color: var(--ink); text-decoration-color: var(--volt); }
@media (max-width: 720px) {
  .ft { padding: 32px 0; }
  .ft-grid { grid-template-columns: minmax(0, 1fr); }
  .ft-brand, .ft-op, .ft-docs { grid-column: 1 / -1; }
}

/* ===== gateway.css ===== */
/* ══ gw · «Шлюз пройдено» (#za-shlyuzom) — the gate band right under the hero ══
   ONE 3D moment: an indexing conveyor carries applications through an extruded scanner gate.
   Clock: 5 plates · one step = --gw-t (2.2s) · one plate loop = --gw-T (11s).
   Every step: 0–34% all plates and the belt move one slot (350px in Z), 34–100% they dwell.
   At the gate the beam sweeps 40–80% of the step and the verdict stamps at 80–84%.
   Plate k runs at loop phase .12 + .2k (negative delays), so a paused first frame is a whole scene:
   one plate mid-scan, one stamped «Прийнята», three queued. Animated: transform, opacity,
   clip-path, background-position only. No JS. */

.gw {
  --gw-T: 11s;
  --gw-t: 2.2s;
  --gw-ph: -1.32s;
  z-index: 1; /* the tag + laser glow sit on the hero's bottom edge and must paint over it */
}

/* ── threshold: laser line · ruler ticks · light runner · spill · tag ── */
.gw-spill {
  position: absolute;
  left: 0;
  right: 0;
  top: 2px;
  height: 340px;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(46% 100% at 50% 0, rgba(203,255,58,.1), rgba(203,255,58,.025) 52%, transparent 78%),
    repeating-linear-gradient(90deg, rgba(203,255,58,.045) 0 1px, transparent 1px 9px);
  -webkit-mask-image: radial-gradient(52% 100% at 50% 0, #000 10%, transparent 82%);
  mask-image: radial-gradient(52% 100% at 50% 0, #000 10%, transparent 82%);
  opacity: .7;
  animation: gw-breathe 7s ease-in-out infinite alternate;
}
.gw-gl {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 0;
  z-index: 3;
  pointer-events: none;
}
.gw-gl__line {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: var(--volt);
  box-shadow: 0 0 18px rgba(203,255,58,.5), 0 0 3px rgba(203,255,58,.9);
}
.gw-gl__ticks {
  position: absolute;
  left: 0;
  right: 0;
  top: 2px;
  height: 9px;
  background:
    linear-gradient(90deg, rgba(203,255,58,.7) 0 1px, transparent 1px) calc(50% + 48px) 0 / 96px 9px repeat-x,
    linear-gradient(90deg, rgba(203,255,58,.32) 0 1px, transparent 1px) calc(50% + 6px) 0 / 12px 4px repeat-x;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
}
.gw-gl__run {
  position: absolute;
  left: 0;
  right: 0;
  top: -5px;
  height: 12px;
  overflow: hidden;
}
.gw-gl__run > i {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 12px;
  background:
    linear-gradient(90deg, transparent calc(50% - 80px), rgba(246,255,220,.95) 50%, transparent calc(50% + 80px)) 0 5px / 100% 2px no-repeat,
    radial-gradient(110px 6px at 50% 6px, rgba(203,255,58,.5), transparent);
  transform: translateX(-14%);
  animation: gw-run 9s linear infinite;
}
.gw-tag {
  position: absolute;
  left: 50%;
  top: 1px;
  z-index: 4;
  margin: 0;
  transform: translate(-50%, -50%);
}
.gw-tag__in.g-plate {
  --fill: var(--void);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 9px 18px;
}
.gw-tag .g-label {
  font-size: 13px;
  letter-spacing: .16em;
  white-space: nowrap;
}
.gw-tag .g-oct {
  width: 7px;
  height: 7px;
  animation: gw-blink 1.6s ease-in-out infinite;
}
.gw-tag .g-oct:last-child {
  animation-delay: -.8s;
}

/* ── layout: statement + body · scene · operator certificate ── */
.gw-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  grid-template-areas: "copy scene" "op scene";
  column-gap: clamp(32px, 4.4vw, 64px);
  row-gap: 40px;
}
.gw-copy {
  grid-area: copy;
  align-self: end;
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}
.gw-stmt.g-stmt {
  font-size: clamp(30px, 3.2vw, 48px);
  line-height: 1.02;
}
.gw-body {
  max-width: 48ch;
}

/* ── 3D scene: view (perspective + soft edges) › rig (scale per breakpoint) › world (camera drift) ── */
.gw-scene {
  --gw-k: 1;
  grid-area: scene;
  align-self: center;
  position: relative;
  min-width: 0;
  height: calc(600px * var(--gw-k));
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.gw-view {
  position: absolute;
  inset: 0;
  overflow: hidden;
  perspective: calc(1100px * var(--gw-k));
  perspective-origin: 48% 33%;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 6%, #000 92%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 6%, #000 92%, transparent);
}
.gw-rig {
  position: absolute;
  left: 46%;
  top: 42.5%;
  width: 0;
  height: 0;
  transform: scale3d(var(--gw-k), var(--gw-k), var(--gw-k));
  transition: translate .9s var(--ease-money);
}
.gw-world {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  transform: rotateX(-17deg) rotateY(20deg);
  animation: gw-cam 18s ease-in-out infinite alternate;
}

/* floor: wire grid, conveyor lane with rails, lime threshold + light pool under the gate */
.gw-floor {
  position: absolute;
  left: -420px;
  top: -1050px;
  width: 840px;
  height: 2100px;
  overflow: hidden;
  transform: translateY(150px) translateZ(-350px) rotateX(90deg);
  background:
    radial-gradient(210px 140px at 50% 1400px, rgba(203,255,58,.16), rgba(203,255,58,.04) 55%, transparent 78%),
    linear-gradient(90deg, transparent 276px, rgba(203,255,58,.85) 276px 564px, transparent 564px) 0 1399px / 100% 2px no-repeat,
    linear-gradient(90deg, transparent 279px, var(--wire-hi) 279px 281px, rgba(233,239,234,.02) 281px 559px, var(--wire-hi) 559px 561px, transparent 561px),
    linear-gradient(rgba(233,239,234,.05) 1px, transparent 1px) 0 0 / 70px 50px,
    linear-gradient(90deg, rgba(233,239,234,.05) 1px, transparent 1px) 0 0 / 70px 50px;
  -webkit-mask-image: radial-gradient(50% 62% at 50% 64%, #000 40%, transparent 100%);
  mask-image: radial-gradient(50% 62% at 50% 64%, #000 40%, transparent 100%);
}
.gw-belt {
  position: absolute;
  left: 280px;
  top: -350px;
  width: 280px;
  height: 2450px;
  background:
    linear-gradient(rgba(203,255,58,.8) 0 2px, transparent 2px) 6px -1px / 22px 350px repeat-y,
    linear-gradient(rgba(203,255,58,.8) 0 2px, transparent 2px) calc(100% - 6px) -1px / 22px 350px repeat-y,
    linear-gradient(rgba(233,239,234,.09) 0 1px, transparent 1px) 0 0 / 100% 50px repeat-y;
  animation: gw-belt var(--gw-t) linear var(--gw-ph) infinite;
}

/* gate: an open-bottom portal (bevel TL like the plates) — 9 layers stacked in Z + front face + scanner aperture.
   The conveyor passes between the posts, so the floor threshold stays visible. */
.gw-gate {
  position: absolute;
  left: 0;
  top: 14px;
  width: 0;
  height: 0;
}
.gw-gate__l,
.gw-gate__face {
  position: absolute;
  left: -160px;
  top: -136px;
  width: 320px;
  height: 272px;
}
.gw-gate__l,
.gw-gate__sheen {
  clip-path: polygon(24px 0, 320px 0, 320px 272px, 304px 272px, 304px 16px, 30.63px 16px, 16px 30.63px, 16px 272px, 0 272px, 0 24px);
}
.gw-gate__l {
  --z: 0px;
  --c: #1A242A;
  transform: translateZ(var(--z));
  background: linear-gradient(180deg, rgba(233,239,234,.06), rgba(6,8,10,.32)), var(--c);
}
/* layer depth + tone: darker toward the back, so the side walls read as a lit rim */
.gw-gate__l--1 {
  --z: -27px;
  --c: #0E1317;
}
.gw-gate__l--2 {
  --z: -21px;
  --c: #11171B;
}
.gw-gate__l--3 {
  --z: -15px;
  --c: #141B20;
}
.gw-gate__l--4 {
  --z: -9px;
  --c: #171F25;
}
.gw-gate__l--5 {
  --z: -3px;
  --c: #1A242A;
}
.gw-gate__l--6 {
  --z: 3px;
  --c: #1E282F;
}
.gw-gate__l--7 {
  --z: 9px;
  --c: #222D34;
}
.gw-gate__l--8 {
  --z: 15px;
  --c: #263139;
}
.gw-gate__l--9 {
  --z: 21px;
  --c: #2A363E;
}
.gw-gate__face {
  transform: translateZ(27px);
}
.gw-gate__svg {
  position: absolute;
  left: 0;
  top: 0;
  width: 320px;
  height: 272px;
  overflow: visible;
}
.gw-gate__ring {
  fill: var(--plate);
}
.gw-gate__rim {
  fill: none;
  stroke: var(--wire-hi);
  stroke-width: 1;
}
.gw-gate__lip {
  fill: none;
  stroke: rgba(203,255,58,.55);
  stroke-width: 1;
}
.gw-gate__ticks {
  fill: none;
  stroke: var(--wire-hi);
  stroke-width: 6;
  stroke-dasharray: 1 15;
}
.gw-gate__mast {
  fill: none;
  stroke: var(--wire-hi);
  stroke-width: 1;
}
.gw-gate__foot {
  fill: none;
  stroke: rgba(203,255,58,.7);
  stroke-width: 1.5;
}
.gw-gate__sheen {
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 42%, rgba(233,239,234,.09) 48.5%, rgba(203,255,58,.24) 50%, rgba(233,239,234,.09) 51.5%, transparent 58%) 50% 0 / 300% 100% no-repeat;
  animation: gw-sheen 9s linear infinite;
}
.gw-gate__vf.g-brackets {
  --l: 14px;
  position: absolute;
  left: 30px;
  top: 30px;
  width: 260px;
  height: 212px;
}
.gw-gate__sign.g-chip {
  position: absolute;
  left: 50%;
  top: -40px;
  min-height: 26px;
  gap: 8px;
  padding: 0 12px;
  font-size: 11px;
  letter-spacing: .14em;
  transform: translateX(-50%);
}
.gw-led.g-oct {
  width: 7px;
  height: 7px;
  opacity: .35;
  animation: gw-led var(--gw-t) linear var(--gw-ph) infinite;
}
.gw-gate__ap {
  position: absolute;
  left: -144px;
  top: -120px;
  width: 288px;
  height: 256px;
  overflow: hidden;
  transform: translateZ(12px);
  clip-path: polygon(14.63px 0, 100% 0, 100% 100%, 0 100%, 0 14.63px);
  background: repeating-linear-gradient(90deg, rgba(203,255,58,.045) 0 1px, transparent 1px 12px), rgba(203,255,58,.022);
}
.gw-beam {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 48px;
  background: linear-gradient(180deg, transparent, rgba(203,255,58,.07) 45%, rgba(203,255,58,.26) 90%, rgba(246,255,220,.95) 95.8%, var(--volt) 100%);
  transform: translateY(-46px);
  opacity: .55;
  animation: gw-beam var(--gw-t) ease var(--gw-ph) infinite;
}

/* application plates: wrapper moves in Z (never faded: it keeps preserve-3d); leaves fade */
.gw-app {
  position: absolute;
  left: -100px;
  top: -40px;
  width: 200px;
  height: 108px;
  --d: 0s;
  color: var(--volt);
  transform: translateZ(-350px);
  animation: gw-app-z var(--gw-T) linear var(--d) infinite;
}
.gw-app--no {
  color: var(--bad);
}
/* loop phase of each plate at t=0 (= -delay / 11s): 12% gate, 32% verdict slot, 52% / 72% / 92% queue */
.gw-app--at12 {
  --d: -1.32s;
}
.gw-app--at32 {
  --d: -3.52s;
}
.gw-app--at52 {
  --d: -5.72s;
}
.gw-app--at72 {
  --d: -7.92s;
}
.gw-app--at92 {
  --d: -10.12s;
}
.gw-app__face.g-plate {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 11px 13px;
  animation: gw-app-fade var(--gw-T) linear var(--d) infinite;
}
.gw-app__scan {
  position: absolute;
  inset: -1px;
  z-index: 0;
  background: repeating-linear-gradient(180deg, rgba(203,255,58,.14) 0 1px, transparent 1px 3px), rgba(203,255,58,.05);
  clip-path: inset(0 0 100% 0);
  animation: gw-app-scan var(--gw-T) linear var(--d) infinite;
}
.gw-app__row {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.gw-app__k {
  font: 600 9.5px/1 var(--f-mono);
  font-stretch: 87.5%;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.gw-app__id {
  font: 500 12px/1 var(--f-mono);
  font-stretch: 87.5%;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.gw-app__src {
  font: 400 10.5px/1 var(--f-mono);
  font-stretch: 87.5%;
  color: var(--ink-2);
  white-space: nowrap;
}
.gw-app__step {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font: 500 9.5px/1 var(--f-mono);
  font-stretch: 87.5%;
  color: var(--ink-3);
}
.gw-app__step > i {
  display: block;
  width: 9px;
  height: 3px;
  background: var(--ink-3);
}
.gw-app__step > i:nth-child(3) {
  margin-right: 4px;
}
.gw-app__state {
  position: relative;
  z-index: 1;
  margin-top: auto;
  height: 33px;
  padding-top: 8px;
  border-top: 1px solid var(--wire);
}
.gw-app__wait.g-chip {
  gap: 5px;
  padding: 0 10px;
  animation: gw-app-wait var(--gw-T) linear var(--d) infinite;
}
.gw-app__wait > i {
  display: block;
  width: 5px;
  height: 5px;
  background: currentColor;
  clip-path: polygon(29.3% 0, 70.7% 0, 100% 29.3%, 100% 70.7%, 70.7% 100%, 29.3% 100%, 0 70.7%, 0 29.3%);
  animation: gw-blink 1.2s ease-in-out infinite;
}
.gw-app__wait > i:nth-child(2) {
  animation-delay: -.8s;
}
.gw-app__wait > i:nth-child(3) {
  animation-delay: -.4s;
}
.gw-app__verdict {
  position: absolute;
  left: 0;
  top: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 0;
  transform-origin: 0 50%;
  animation: gw-app-verdict var(--gw-T) linear var(--d) infinite;
}
.gw-app__why {
  font: 500 9px/1.2 var(--f-mono);
  font-stretch: 87.5%;
  letter-spacing: .03em;
  color: var(--bad);
}
.gw-app__lit {
  position: absolute;
  left: -1px;
  top: -1px;
  width: 200px;
  height: 108px;
  z-index: 3;
  overflow: visible;
  opacity: 0;
  animation: gw-app-lit var(--gw-T) linear var(--d) infinite;
}
.gw-app__lit polygon {
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
}
.gw-app__floor {
  position: absolute;
  left: -20px;
  top: 108px;
  width: 240px;
  height: 160px;
  transform: rotateX(90deg);
  animation: gw-app-fade var(--gw-T) linear var(--d) infinite;
}
.gw-app__pool {
  position: absolute;
  inset: 0;
  background: radial-gradient(closest-side, rgba(233,239,234,.1), rgba(233,239,234,.035) 55%, transparent);
}
.gw-app__ring {
  position: absolute;
  left: 10px;
  top: -30px;
  width: 220px;
  height: 220px;
  overflow: visible;
  opacity: 0;
  transform: scale(.45);
  animation: gw-app-ring var(--gw-T) linear var(--d) infinite;
}
.gw-app__ring polygon {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

/* ── operator certificate ── */
.gw-op.g-plate {
  --cut: 16px;
  grid-area: op;
  align-self: start;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "main seal" "foot foot";
  gap: 16px 20px;
  padding: 22px 24px 20px;
  transition: transform .32s var(--ease-hud);
}
.gw-op__main {
  grid-area: main;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.gw-op__name.g-h3 {
  margin-top: 2px;
}
.gw-op__code {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
}
.gw-op__code .g-num-m {
  color: var(--ink);
}
.gw-op__foot {
  grid-area: foot;
  padding-top: 14px;
  border-top: 1px dashed var(--wire-hi);
}
.gw-seal {
  grid-area: seal;
  position: relative;
  width: 64px;
  height: 64px;
  color: var(--volt);
}
.gw-seal > svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.gw-seal__base polygon {
  fill: #10160A;
  stroke: currentColor;
  stroke-width: 1.5;
}
.gw-seal__base path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.gw-seal__ring {
  animation: g-spin 36s linear infinite;
}
.gw-seal__ring circle {
  fill: none;
  stroke: var(--wire-input);
  stroke-width: 1;
  stroke-dasharray: 2 3;
}
.gw-op__sheen {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 40%, rgba(233,239,234,.07) 48%, rgba(203,255,58,.1) 50%, rgba(233,239,234,.07) 52%, transparent 60%) 100% 0 / 300% 100% no-repeat;
}

/* ── marquee band: the 7 chips (first run is the real list, second is an aria-hidden copy) ── */
.gw-band {
  position: relative;
  z-index: 1;
  margin-top: clamp(64px, 7vw, 104px);
  border-top: 1px solid var(--wire);
  border-bottom: 1px solid var(--wire);
  background: var(--deck);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.gw-band::before,
.gw-band::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 5px;
  pointer-events: none;
  background: linear-gradient(90deg, var(--wire-hi) 0 1px, transparent 1px) calc(50% + 24px) 0 / 48px 5px repeat-x;
}
.gw-band::before {
  top: 0;
}
.gw-band::after {
  bottom: 0;
}
.gw-band__track {
  display: flex;
  width: max-content;
  animation: g-marquee 64s linear infinite;
}
.gw-band__run {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  padding: 20px 14px 20px 0;
  list-style: none;
}
.gw-band__run > .gw-chip.g-chip {
  min-height: 32px;
  padding: 0 14px 0 12px;
  gap: 10px;
  font-size: 12.5px;
}
.gw-band__run > .gw-chip.g-chip::before {
  content: '';
  width: 7px;
  height: 7px;
  flex: none;
  background: var(--volt);
  clip-path: polygon(29.3% 0, 70.7% 0, 100% 29.3%, 100% 70.7%, 70.7% 100%, 29.3% 100%, 0 70.7%, 0 29.3%);
}

/* ── micro-interactions ── */
.gw-band:hover .gw-band__track {
  animation-play-state: paused;
}
@media (hover: hover) {
  .gw-scene:hover .gw-rig {
    translate: 0 0 calc(36px * var(--gw-k));
  }
  .gw-op.g-plate:hover {
    transform: translateY(-3px);
  }
  .gw-op.g-plate:hover .gw-op__sheen {
    animation: gw-op-sheen 1.1s var(--ease-hud) both;
  }
}

/* ── keyframes (first frame of every loop is a visible, complete state) ── */
@keyframes gw-breathe {
  from { opacity: .7; }
  to { opacity: 1; }
}
@keyframes gw-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: .3; }
}
@keyframes gw-run {
  0% { transform: translateX(-14%); }
  37.6% { transform: translateX(80%); }
  73.6% { transform: translateX(80%); }
  73.61% { transform: translateX(-80%); }
  100% { transform: translateX(-14%); }
}
@keyframes gw-cam {
  from { transform: rotateX(-17deg) rotateY(20deg); }
  to { transform: rotateX(-19deg) rotateY(24deg); }
}
@keyframes gw-belt {
  0% { transform: translateY(0); animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  34%, 100% { transform: translateY(350px); }
}
@keyframes gw-sheen {
  0% { background-position: 50% 0; }
  12% { background-position: 0 0; }
  87.9% { background-position: 0 0; }
  88% { background-position: 100% 0; }
  100% { background-position: 50% 0; }
}
@keyframes gw-beam {
  0%, 34% { transform: translateY(-46px); opacity: .55; }
  40% { transform: translateY(-46px); opacity: 1; animation-timing-function: linear; }
  80%, 84% { transform: translateY(208px); opacity: 1; }
  90% { transform: translateY(208px); opacity: 0; }
  90.1% { transform: translateY(-46px); opacity: 0; }
  100% { transform: translateY(-46px); opacity: .55; }
}
@keyframes gw-led {
  0%, 78% { opacity: .35; }
  81% { opacity: 1; }
  92%, 100% { opacity: .35; }
}
@keyframes gw-app-z {
  0% { transform: translateZ(-350px); animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  6.8% { transform: translateZ(0); }
  20% { transform: translateZ(0); animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  26.8% { transform: translateZ(350px); }
  40% { transform: translateZ(350px); animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  46.8% { transform: translateZ(700px); }
  46.81% { transform: translateZ(-1050px); }
  60% { transform: translateZ(-1050px); animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  66.8% { transform: translateZ(-700px); }
  80% { transform: translateZ(-700px); animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  86.8% { transform: translateZ(-350px); }
  100% { transform: translateZ(-350px); }
}
@keyframes gw-app-fade {
  0%, 40% { opacity: 1; }
  44%, 46.8% { opacity: 0; }
  52% { opacity: .5; }
  60% { opacity: .55; }
  66.8%, 80% { opacity: .82; }
  86.8%, 100% { opacity: 1; }
}
@keyframes gw-app-scan {
  0%, 10.1% { clip-path: inset(0 0 100% 0); opacity: 1; }
  13.4%, 17% { clip-path: inset(0 0 0 0); opacity: 1; }
  24% { clip-path: inset(0 0 0 0); opacity: 0; }
  24.1%, 100% { clip-path: inset(0 0 100% 0); opacity: 0; }
}
@keyframes gw-app-lit {
  0%, 16% { opacity: 0; }
  16.8%, 44% { opacity: 1; }
  46.8%, 100% { opacity: 0; }
}
@keyframes gw-app-wait {
  0%, 16% { opacity: 1; }
  16.3%, 46.8% { opacity: 0; }
  46.9%, 100% { opacity: 1; }
}
@keyframes gw-app-verdict {
  0%, 16% { opacity: 0; transform: scale(1.4); animation-timing-function: cubic-bezier(.2, .8, .1, 1); }
  17.4%, 46.8% { opacity: 1; transform: scale(1); }
  46.9%, 100% { opacity: 0; transform: scale(1.4); }
}
@keyframes gw-app-ring {
  0%, 16% { opacity: 0; transform: scale(.45); }
  16.5% { opacity: .9; transform: scale(.55); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  25% { opacity: 0; transform: scale(1.7); }
  100% { opacity: 0; transform: scale(.45); }
}
@keyframes gw-op-sheen {
  from { background-position: 100% 0; }
  to { background-position: 0 0; }
}

/* ── responsive ── */
@media (max-width: 1299px) {
  .gw-scene {
    --gw-k: .88;
  }
}
@media (max-width: 1099px) {
  .gw-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "copy" "scene" "op";
    row-gap: 32px;
  }
  .gw-copy {
    align-self: start;
    max-width: 760px;
  }
  .gw-scene {
    --gw-k: 1;
  }
  .gw-op.g-plate {
    max-width: 560px;
  }
}
@media (max-width: 899px) {
  .gw-scene {
    --gw-k: .9;
  }
}
@media (max-width: 720px) {
  .gw-spill {
    height: 220px;
  }
  .gw-tag__in.g-plate {
    gap: 10px;
    padding: 7px 13px;
  }
  .gw-tag .g-label {
    font-size: 11px;
    letter-spacing: .13em;
  }
  .gw-grid {
    row-gap: 24px;
  }
  .gw-copy {
    gap: 16px;
  }
  .gw-stmt.g-stmt {
    font-size: 29px;
    line-height: 1.06;
  }
  .gw-scene {
    --gw-k: .56;
    margin-inline: calc(var(--gut) * -1);
  }
  .gw-rig {
    left: 45%;
  }
  .gw-gate__l--x {
    display: none;
  }
  .gw-op.g-plate {
    --cut: 12px;
    gap: 14px 16px;
    padding: 18px;
  }
  .gw-op__name.g-h3 {
    font-size: 18px;
    line-height: 24px;
  }
  .gw-seal {
    width: 48px;
    height: 48px;
  }
  .gw-band {
    margin-top: 48px;
  }
  .gw-band__run {
    gap: 10px;
    padding: 14px 10px 14px 0;
  }
  .gw-band__run > .gw-chip.g-chip {
    min-height: 28px;
    padding: 0 10px;
    gap: 8px;
    font-size: 12px;
  }
}

/* ===== why.css ===== */
/* ══ why · «01 · Чому напряму» (#perevahy) — a 12-col bento of six CSS-3D instruments ══
   Each plate carries one small 3D scene that explains its line:
   1 rail (tokens Заявка → Скоринг → Баланс, lender branch cut off) · 2 chain (middle links drop in Z)
   3 press (verdict stamp comes down in Z) · 4 iso funnel (six octagon slabs, pulse walks down)
   5 fan of offer cards (one tracking beam threads them) · 6 rate on a turning extruded ring.
   Structure of every scene: .why-viz (perspective, clip) › .why-rig (camera, preserve-3d) › parts.
   Parts are centred on the rig by margins (layout), lifted / oriented by transform, animated with
   the individual translate / rotate / scale properties + opacity, so loops never fight placement.
   Hover / focus-within sets --why-on: 1 → the camera re-angles (transition), billboard labels
   counter-rotate in lockstep, the brackets light (kit), the «Для вас» rule draws, a scan sweeps once.
   Every loop is staggered with NEGATIVE delays so a paused first frame is a complete picture. No JS. */

.why { --why-oct: polygon(29.3% 0, 70.7% 0, 100% 29.3%, 100% 70.7%, 70.7% 100%, 29.3% 100%, 0 70.7%, 0 29.3%); }

/* ── bento ── */
.why-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: minmax(240px, auto); gap: 24px; }
.why-grid:focus-visible { outline-offset: 6px; }
.why-card { --why-pad: 24px; --why-on: 0; grid-column: span 3; display: flex; flex-direction: column; min-width: 0; padding: var(--why-pad); }
.why-card--rail, .why-card--funnel { grid-column: span 6; }
.why-card:focus-within { --why-on: 1; }
@media (hover: hover) {
  .why-card:hover { --why-on: 1; }
}

/* ── text ── */
.why-txt { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.why-txt .g-label { transition: color .2s linear; }
.why-card:focus-within .why-txt .g-label { color: var(--volt); }
@media (hover: hover) {
  .why-card:hover .why-txt .g-label { color: var(--volt); }
}
.why-card > .why-txt, .why-cols, .why-fcol > .why-txt { margin-bottom: 22px; }
.why-cols { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 10px 28px; align-items: start; }
.why-foryou { position: relative; margin: auto 0 0; padding-top: 14px; }
.why-foryou .g-label { margin-right: 8px; }
.why-foryou::before, .why-foryou::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--wire); }
.why-foryou::after { background: var(--volt); transform-origin: 0 50%; transform: scaleX(var(--why-on)); transition: transform .7s var(--ease-hud); }

/* ── scene shell: viewport · camera · billboards · floor ── */
.why-viz {
  --why-ax: 58deg; --why-hx: 6deg; --why-az: -20deg; --why-hz: -8deg;
  --why-cx: calc(var(--why-ax) + var(--why-hx) * var(--why-on));
  --why-cz: calc(var(--why-az) + var(--why-hz) * var(--why-on));
  position: relative; flex: none; height: 156px; margin: calc(-1 * var(--why-pad)) calc(-1 * var(--why-pad)) 20px;
  overflow: hidden; overflow: clip; perspective: 800px; pointer-events: none;
}
.why-viz::after { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; translate: 0 -100%;
  background: linear-gradient(180deg, rgba(203,255,58,0) 50%, rgba(203,255,58,.06) 94%, rgba(203,255,58,.45) calc(100% - 1px), rgba(203,255,58,0) 100%); }
.why-card:focus-within .why-viz::after { animation: why-sweep 1.2s cubic-bezier(.2, .8, .1, 1) both; }
@media (hover: hover) {
  .why-card:hover .why-viz::after { animation: why-sweep 1.2s cubic-bezier(.2, .8, .1, 1) both; }
}
.why-rig { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d;
  transform: rotateX(var(--why-cx)) rotateZ(var(--why-cz)); transition: transform .9s var(--ease-money); }
.why-rig div, .why-rig i, .why-rig b, .why-rig svg, .why-rig span { position: absolute; display: block; }
.why-rig div { transform-style: preserve-3d; }
.why-rig svg { overflow: visible; }
.why-rig polygon, .why-rig path { vector-effect: non-scaling-stroke; }
.why-floor { --why-fw: 360px; --why-fh: 260px; left: 0; top: 0; width: var(--why-fw); height: var(--why-fh);
  margin: calc(var(--why-fh) / -2) 0 0 calc(var(--why-fw) / -2); transform: translateZ(-1px);
  background: radial-gradient(circle, rgba(233,239,234,.2) 0 1px, rgba(233,239,234,0) 1.5px) 50% 50% / 18px 18px;
  -webkit-mask: radial-gradient(closest-side, #000 20%, transparent); mask: radial-gradient(closest-side, #000 20%, transparent); }
/* billboard label: anchored at a 3D point, then counter-rotated by the camera so it always faces the reader */
.why-lb { left: 0; top: 0; transform-origin: 0 0; white-space: nowrap; font: 500 13px/19px var(--f-text); color: var(--ink-2);
  transition: transform .9s var(--ease-money); }

/* ══ 1 · rail ══ */
.why-viz--rail { --why-ax: 58deg; --why-hx: 5deg; --why-az: -8deg; --why-hz: -7deg; --why-d: 170px;
  height: 236px; perspective: 900px; perspective-origin: 50% 40%; }
.why-viz--rail .why-rig { top: 43%; }
.why-viz--rail .why-floor { --why-fw: 620px; --why-fh: 320px; transform: translate3d(0, 28px, -1px); }
.why-bed { left: 0; top: 0; width: calc(2 * var(--why-d) + 28px); height: 8px; margin: -4px 0 0 calc(-1 * var(--why-d) - 14px);
  transform: translateZ(.4px); background: repeating-linear-gradient(90deg, rgba(92,107,101,.5) 0 1px, rgba(92,107,101,0) 1px 12px); }
.why-ln { left: 0; top: 0; width: var(--why-d); height: 3px; margin-top: -1.5px; transform: translateZ(1px); }
.why-ln--a { margin-left: calc(-1 * var(--why-d)); background: #3A4750; }
.why-ln--b { background: var(--volt); box-shadow: 0 0 10px rgba(203,255,58,.5); }
.why-br { left: 0; top: 0; width: 2px; height: 20px; margin: 22px 0 0 -1px; transform: translateZ(.8px);
  background: repeating-linear-gradient(180deg, #5C6B65 0 4px, rgba(92,107,101,0) 4px 8px); }
.why-br--2 { margin-top: 54px; }
.why-ghost { left: 0; top: 0; width: 30px; height: 30px; margin: 77px 0 0 -15px; transform: translateZ(.6px); }
.why-ghost polygon { fill: none; stroke: #5C6B65; stroke-width: 1.5; stroke-dasharray: 3 3; }

.why-pad { left: 0; top: 0; width: 36px; height: 36px; margin: -18px 0 0 -18px; }
.why-pad--a { margin-left: calc(-1 * var(--why-d) - 18px); }
.why-pad--b { margin-left: calc(var(--why-d) - 18px); }
.why-pad > i { inset: 0; clip-path: var(--why-oct); }
.why-pad > i:nth-child(1) { transform: translateZ(1.5px); background: #11171B; }
.why-pad > i:nth-child(2) { transform: translateZ(3px); background: #151C21; }
.why-pad > i:nth-child(3) { transform: translateZ(4.5px); background: #192126; }
.why-pf { inset: 0; width: 100%; height: 100%; transform: translateZ(6px); }
.why-pf polygon { fill: #1C2429; stroke: #5C6B65; stroke-width: 1.5; }
.why-pad--s > i:nth-child(1) { background: #131C07; }
.why-pad--s > i:nth-child(2) { background: #18240A; }
.why-pad--s > i:nth-child(3) { background: #1E2C0C; }
.why-pad--s .why-pf polygon { fill: var(--volt-chip); stroke: var(--volt); }
.why-pad--b > i:nth-child(1) { background: #3B500D; }
.why-pad--b > i:nth-child(2) { background: #5E7E11; }
.why-pad--b > i:nth-child(3) { background: #85AE12; }
.why-pad--b .why-pf polygon { fill: var(--volt); stroke: #E2FF8F; stroke-width: 1; }
.why-pad--b .why-pf path { fill: none; stroke: var(--void); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

/* balance ripple + scoring halo: each pulse lands on a token arrival (token clock 7.5s / 3 tokens = 2.5s) */
.why-rip { left: var(--why-d); top: 0; width: 36px; height: 36px; margin: -18px 0 0 -18px; transform: translateZ(6.5px);
  animation: why-rrip 2.5s cubic-bezier(.16, 1, .3, 1) -1.675s infinite; }
.why-rip polygon { fill: none; stroke: var(--volt); stroke-width: 1.5; }
.why-halo { left: 0; top: 0; width: 56px; height: 56px; margin: -28px 0 0 -28px; transform: translateZ(40px);
  animation: g-spin 14s linear infinite, why-rhalo 2.5s linear -.425s infinite; }
.why-halo polygon { fill: none; stroke: var(--volt); stroke-width: 1.5; stroke-dasharray: 12 5; }
.why-halo polygon + polygon { stroke-width: 1; stroke-dasharray: none; stroke-opacity: .4; }

/* tokens: frost (held) before scoring, volt after; absorbed by the balance pad */
.why-tok { left: 0; top: 0; width: 0; height: 0; animation: why-rtok 7.5s linear infinite; }
.why-coin { left: 0; top: 0; width: 18px; height: 18px; margin: -18px 0 0 -9px; transform-origin: 50% 100%;
  transform: translateZ(7px) rotateX(-90deg); }
.why-coin > i { inset: 0; clip-path: var(--why-oct); }
.why-coin > i:nth-child(1) { transform: translateZ(-2.4px); background: #0E1316; }
.why-coin > i:nth-child(2) { transform: translateZ(-1.2px); background: #2A353D; }
.why-cf { background: var(--frost); }
.why-cv { background: var(--volt); transform: translateZ(.3px); opacity: 0; animation: why-rcv 7.5s linear infinite; }
.why-cf::after, .why-cv::after { content: ''; position: absolute; inset: 4px; clip-path: var(--why-oct); background: rgba(6,8,10,.28); }
.why-trail { left: 0; top: 0; width: 46px; height: 3px; margin: -1.5px 0 0 -46px; transform: translateZ(1.6px); opacity: 0;
  background: linear-gradient(90deg, rgba(203,255,58,0), rgba(203,255,58,.9)); animation: why-rtr 7.5s linear infinite; }
.why-tok--1, .why-tok--1 .why-cv, .why-tok--1 .why-trail { animation-delay: -1s; }
.why-tok--2, .why-tok--2 .why-cv, .why-tok--2 .why-trail { animation-delay: -3.5s; }
.why-tok--3, .why-tok--3 .why-cv, .why-tok--3 .why-trail { animation-delay: -6s; }

.why-lb--a, .why-lb--s, .why-lb--b { padding-bottom: 14px; }
.why-lb--a::after, .why-lb--s::after, .why-lb--b::after { content: ''; position: absolute; left: 50%; bottom: 1px; width: 1px; height: 10px;
  background: currentColor; opacity: .5; }
.why-lb--a { transform: translate3d(calc(-1 * var(--why-d)), 0, 8px) rotateZ(calc(-1 * var(--why-cz))) rotateX(calc(-1 * var(--why-cx))) translate(-50%, -100%); }
.why-lb--s { color: var(--ink); transform: translate3d(0, 0, 46px) rotateZ(calc(-1 * var(--why-cz))) rotateX(calc(-1 * var(--why-cx))) translate(-50%, -100%); }
.why-lb--b { color: var(--volt); font-weight: 600; transform: translate3d(var(--why-d), 0, 8px) rotateZ(calc(-1 * var(--why-cz))) rotateX(calc(-1 * var(--why-cx))) translate(-50%, -100%); }
.why-lb--n { width: 190px; white-space: normal; text-align: center; font-weight: 400; color: var(--ink-3);
  transform: translate3d(0, 114px, 0) rotateZ(calc(-1 * var(--why-cz))) rotateX(calc(-1 * var(--why-cx))) translate(-50%, 0); }

/* ══ 2 · chain ══ */
.why-viz--chain { --why-ax: 60deg; --why-hx: 6deg; --why-az: -16deg; --why-hz: -10deg; }
.why-viz--chain .why-rig { top: 46%; }
.why-viz--chain .why-floor { --why-fw: 300px; --why-fh: 220px; }
.why-lk { left: 0; top: 0; width: 50px; height: 24px; margin-top: -12px; color: #5C6B65; }
.why-lk > svg { inset: 0; width: 100%; height: 100%; }
.why-lk > svg + svg { transform: translateZ(-2.2px); color: #27313A; }
.why-lk polygon { fill: none; stroke: currentColor; stroke-width: 4; stroke-linejoin: round; }
.why-lk--0, .why-lk--3 { color: var(--volt); }
.why-lk--0 > svg + svg, .why-lk--3 > svg + svg { color: #4D680F; }
.why-lk--1 > svg + svg, .why-lk--3 > svg + svg { transform: translateZ(2.2px); }
.why-lk--0 { margin-left: -79px; transform: translateZ(12px); animation: why-ck0 10s cubic-bezier(.65, 0, .35, 1) -6.6s infinite; }
.why-lk--1 { margin-left: -43px; transform: translateZ(12px) rotateX(90deg); animation: why-ckm 10s cubic-bezier(.65, 0, .35, 1) -6.6s infinite; }
.why-lk--2 { margin-left: -7px; transform: translateZ(12px); animation: why-ckm 10s cubic-bezier(.65, 0, .35, 1) -6.45s infinite; }
.why-lk--3 { margin-left: 29px; transform: translateZ(12px) rotateX(90deg); animation: why-ck3 10s cubic-bezier(.65, 0, .35, 1) -6.6s infinite; }
.why-lk--1 > svg, .why-lk--2 > svg { animation: why-ckf 10s linear -6.6s infinite; }
.why-lk--2 > svg { animation-delay: -6.45s; }
.why-cfl { left: 0; top: 0; width: 34px; height: 34px; margin: -17px 0 0 -17px; transform: translateZ(12px);
  animation: why-cfl 10s cubic-bezier(.16, 1, .3, 1) -6.6s infinite; }
.why-cfl polygon { fill: none; stroke: var(--volt); stroke-width: 1.5; }
.why-ctk { left: 0; top: 0; width: 12px; height: 12px; margin: -12px 0 0 -6px; transform-origin: 50% 100%;
  transform: translateZ(6px) rotateX(-90deg); clip-path: var(--why-oct); background: var(--volt); animation: why-ctk 10s linear -6.6s infinite; }

/* ══ 3 · press ══ */
.why-viz--stamp { --why-ax: 56deg; --why-hx: 6deg; --why-az: -30deg; --why-hz: -8deg; perspective: 760px; }
.why-viz--stamp .why-rig { left: 38%; top: 60%; }
.why-viz--stamp .why-floor { --why-fw: 260px; --why-fh: 260px; }
.why-slip { left: 0; top: 0; width: 64px; height: 84px; margin: -42px 0 0 -32px; transform: translateZ(.5px);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  background: linear-gradient(#3A4750 0 0) 9px 11px / 30px 3px no-repeat, linear-gradient(#27313A 0 0) 9px 20px / 42px 3px no-repeat,
    linear-gradient(#27313A 0 0) 9px 29px / 24px 3px no-repeat, #141A1E;
  box-shadow: inset 0 0 0 1px #3A4750; }
.why-seal { left: 0; top: 0; width: 34px; height: 34px; margin: 1px 0 0 -17px; transform: translateZ(.8px);
  animation: why-seal 3.5s cubic-bezier(.16, 1, .3, 1) -2.8s infinite; }
.why-seal polygon { fill: none; stroke: #85928C; stroke-width: 1; stroke-dasharray: 2 3; }
.why-imp { left: 0; top: 0; width: 30px; height: 30px; margin: 3px 0 0 -15px; transform: translateZ(1px); }
.why-imp polygon { stroke-width: 1.5; }
.why-imp path { fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.why-imp--ok polygon { fill: var(--volt-chip); stroke: var(--volt); }
.why-imp--ok path { stroke: var(--volt); }
.why-imp--no polygon { fill: var(--bad-chip); stroke: var(--bad); }
.why-imp--no path { stroke: var(--bad); }
.why-imp--ok { animation: why-sok 7s linear -2.8s infinite; }
.why-imp--no { animation: why-sno 7s linear -2.8s infinite; }
.why-sh { left: 0; top: 0; width: 34px; height: 34px; margin: 1px 0 0 -17px; transform: translateZ(1.3px); clip-path: var(--why-oct);
  background: rgba(0,0,0,.6); animation: why-ssh 7s ease-in-out -2.8s infinite; }
.why-stamp { left: 0; top: 0; width: 32px; height: 32px; margin: 2px 0 0 -16px; animation: why-stp 7s ease-in-out -2.8s infinite; }
.why-stamp > i, .why-stamp > b { clip-path: var(--why-oct); }
.why-stamp > i { inset: 0; }
.why-stamp > i:nth-of-type(1) { background: var(--volt); }
.why-stamp > i:nth-of-type(2) { transform: translateZ(2px); background: var(--volt-deep); }
.why-stamp > i:nth-of-type(3) { transform: translateZ(4px); background: #151C21; }
.why-stamp > i:nth-of-type(4) { transform: translateZ(6px); background: #182025; }
.why-stamp > i:nth-of-type(5) { transform: translateZ(8px); background: #1B242A; }
.why-stamp > i:nth-of-type(6) { transform: translateZ(10px); background: #1F282F; }
.why-stamp > i:nth-of-type(7) { transform: translateZ(12px); background: #232D34; }
.why-cap { inset: 0; width: 100%; height: 100%; transform: translateZ(14px); }
.why-cap polygon { fill: #2B3640; stroke: #5C6B65; stroke-width: 1; }
.why-stamp > b { inset: 10px; background: #1C2429; }
.why-stamp > b:nth-of-type(1) { transform: translateZ(17px); }
.why-stamp > b:nth-of-type(2) { transform: translateZ(20.5px); }
.why-stamp > b:nth-of-type(3) { transform: translateZ(24px); }
.why-stamp > b:nth-of-type(4) { transform: translateZ(27.5px); background: #222C33; }
.why-stamp > .why-knob { inset: 5px; transform: translateZ(31px); background: #3A4750; }
.why-knob::after { content: ''; position: absolute; inset: 8px; clip-path: var(--why-oct); background: var(--volt); }
/* verdict readout (2D HUD): neutral chip underneath, coloured chip fades in when its verdict is pressed */
.why-vds { position: absolute; right: 18px; top: 18px; z-index: 2; display: flex; flex-direction: column; gap: 6px; }
.why-vd { display: grid; }
.why-vd > .g-chip { grid-area: 1 / 1; }
.why-vd > .g-chip + .g-chip { animation: why-vok 7s linear -2.8s infinite; }
.why-vd--no > .g-chip + .g-chip { animation-name: why-vno; }

/* ══ 4 · funnel ══ */
.why-fsplit { display: grid; grid-template-columns: minmax(0, 1fr) clamp(240px, 48%, 300px); column-gap: 24px; flex: 1; }
.why-fcol { display: flex; flex-direction: column; min-width: 0; }
.why-viz--funnel { --why-ax: 62deg; --why-hx: 6deg; --why-az: 22.5deg; --why-hz: 0deg; --why-g: calc(26px + 8px * var(--why-on));
  height: auto; min-height: 330px; margin: calc(-1 * var(--why-pad)) calc(-1 * var(--why-pad)) calc(-1 * var(--why-pad)) 0; perspective: 1000px; }
.why-viz--funnel .why-rig { left: calc(50% - 46px); top: calc(50% + 70px); }
.why-viz--funnel .why-floor { --why-fw: 320px; --why-fh: 320px; transform: translateZ(-14px); }
.why-fglow { left: 0; top: 0; width: 130px; height: 130px; margin: -65px 0 0 -65px; transform: translateZ(-10px);
  background: radial-gradient(closest-side, rgba(203,255,58,.3), rgba(203,255,58,0)); animation: why-fgl 4.8s ease-out -4.08s infinite; }
.why-lv { left: 0; top: 0; width: 0; height: 0; transform: translateZ(calc(var(--why-lz) * var(--why-g))); transition: transform .9s var(--ease-money); }
.why-lv--0 { --why-lz: 5; --why-s: 136px; }
.why-lv--1 { --why-lz: 4; --why-s: 116px; }
.why-lv--2 { --why-lz: 3; --why-s: 96px; }
.why-lv--3 { --why-lz: 2; --why-s: 78px; }
.why-lv--4 { --why-lz: 1; --why-s: 62px; }
.why-lv--5 { --why-lz: 0; --why-s: 48px; }
.why-lv > i, .why-lv > svg { left: 0; top: 0; width: var(--why-s); height: var(--why-s); margin: calc(var(--why-s) / -2) 0 0 calc(var(--why-s) / -2); }
.why-lv > i { clip-path: var(--why-oct); }
.why-lv > i:nth-of-type(1) { transform: translateZ(-2px); background: #10161A; }
.why-lv > i:nth-of-type(2) { transform: translateZ(-4px); background: #0A0E11; }
.why-sf polygon { fill: #141A1E; stroke: #3A4750; stroke-width: 1; }
.why-se { transform: translateZ(.6px); opacity: 0; animation: why-fpu 4.8s cubic-bezier(.16, 1, .3, 1) infinite; }
.why-se polygon { fill: none; stroke: var(--volt); stroke-width: 1.5; }
.why-lv--0 .why-se { animation-delay: -.88s; }
.why-lv--1 .why-se { animation-delay: -.56s; }
.why-lv--2 .why-se { animation-delay: -.24s; }
.why-lv--3 .why-se { animation-delay: -4.72s; }
.why-lv--4 .why-se { animation-delay: -4.4s; }
.why-lv--5 .why-se { animation-delay: -4.08s; }
.why-lv--5 > i:nth-of-type(1) { background: #85AE12; }
.why-lv--5 > i:nth-of-type(2) { background: #3B500D; }
.why-lv--5 .why-sf polygon { fill: var(--volt); stroke: #E2FF8F; }
.why-lv--5 .why-sf polygon + polygon { fill: none; stroke: rgba(6,8,10,.4); }
/* label anchored just outside the slab's right vertex: radius .5412·s + 9 at local −22.5° */
.why-fl { transform: translate3d(calc(var(--why-s) * .5 + 8.3px), calc(var(--why-s) * -.2071 - 3.44px), 0)
  rotateZ(calc(-1 * var(--why-cz))) rotateX(calc(-1 * var(--why-cx))) translate(0, -50%); }
.why-fl::before { content: ''; display: inline-block; width: 10px; height: 1px; margin-right: 7px; vertical-align: middle; background: currentColor; opacity: .55; }
.why-lv--5 .why-fl { color: var(--volt); font-weight: 600; }

/* ══ 5 · fan ══ */
.why-viz--fan { --why-ax: -12deg; --why-hx: -4deg; --why-az: -30deg; --why-hz: -14deg; }
.why-viz--fan .why-rig { transform: rotateX(var(--why-cx)) rotateY(var(--why-cz)); }
.why-viz--fan .why-floor { --why-fw: 300px; --why-fh: 240px; transform: translateY(40px) rotateX(90deg); }
.why-oc { left: 0; top: 0; width: 60px; height: 78px; margin-top: -39px;
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
  background: linear-gradient(#3A4750 0 0) 26px 12px / 26px 4px no-repeat, linear-gradient(#27313A 0 0) 8px 26px / 36px 3px no-repeat,
    linear-gradient(#27313A 0 0) 8px 52px / 30px 4px no-repeat, linear-gradient(#1C2429 0 0) 8px 63px / 44px 8px no-repeat, #141A1E;
  box-shadow: inset 0 0 0 1px #3A4750; }
.why-oc--0 { margin-left: -69px; transform: translateZ(60px); }
.why-oc--1 { margin-left: -43px; transform: translateZ(20px); }
.why-oc--2 { margin-left: -17px; transform: translateZ(-20px); }
.why-oc--3 { margin-left: 9px; transform: translateZ(-60px); }
.why-ocl { left: 8px; top: 8px; width: 12px; height: 12px; clip-path: var(--why-oct); background: #5C6B65; }
.why-ocd { left: 25px; top: 34px; width: 10px; height: 10px; clip-path: var(--why-oct); background: #3A4750; }
.why-ocd::after { content: ''; position: absolute; inset: 0; background: var(--volt); opacity: 0; animation: why-ocd 4.8s linear infinite; }
.why-oc--0 .why-ocd::after { animation-delay: -1.086s; }
.why-oc--1 .why-ocd::after { animation-delay: -.472s; }
.why-oc--2 .why-ocd::after { animation-delay: -4.659s; }
.why-oc--3 .why-ocd::after { animation-delay: -4.046s; }
/* the beam: start = card 0 centre − 40px along the card-to-card step (26, 0, −40); yaw = atan(40 / 26) */
.why-tl { left: 0; top: 0; width: 0; height: 0; transform: translate3d(-60.8px, 0, 93.5px) rotateY(56.97deg); }
.why-tl > i { left: 0; top: 0; width: 224px; height: 2px; margin-top: -1px;
  background: linear-gradient(90deg, rgba(203,255,58,0), rgba(203,255,58,.7) 14%, rgba(203,255,58,.7) 86%, rgba(203,255,58,0)); }
.why-tl > i + i { transform: rotateX(90deg); }
.why-tlp { left: 0; top: 0; width: 0; height: 0; animation: why-tlp 4.8s linear -1.6s infinite; }
.why-tlp > i { left: 0; top: 0; width: 26px; height: 4px; margin: -2px 0 0 -13px; opacity: 0;
  background: linear-gradient(90deg, rgba(244,255,214,0), #F4FFD6 50%, rgba(244,255,214,0)); animation: why-tlo 4.8s linear -1.6s infinite; }
.why-tlp > i + i { transform: rotateX(90deg); }

/* ══ 6 · rate ring ══ */
.why-viz--rate { --why-ax: -8deg; --why-hx: -8deg; --why-az: -10deg; --why-hz: 10deg; perspective: 700px; }
.why-viz--rate .why-rig { top: 48%; }
.why-rfl { left: 0; top: 0; width: 150px; height: 150px; margin: -75px 0 0 -75px; transform: translateY(70px) rotateX(90deg);
  background: radial-gradient(closest-side, rgba(203,255,58,.24), rgba(203,255,58,0)); animation: why-rfl 16s linear -2s infinite; }
.why-ring { left: 0; top: 0; width: 116px; height: 116px; margin: -58px 0 0 -58px; animation: why-ry 16s linear -2s infinite; }
.why-ring > svg { inset: 0; width: 100%; height: 100%; }
.why-ring polygon { fill: none; stroke: currentColor; stroke-width: 3; }
.why-ring > svg:nth-child(1) { transform: translateZ(-7.2px); color: var(--volt); }
.why-ring > svg:nth-child(2) { transform: translateZ(-5.6px); color: #85AE12; }
.why-ring > svg:nth-child(3) { transform: translateZ(-4px); color: #4D680F; }
.why-ring > svg:nth-child(4) { transform: translateZ(-2.4px); color: #33450C; }
.why-ring > svg:nth-child(5) { transform: translateZ(-.8px); color: #243310; }
.why-ring > svg:nth-child(6) { transform: translateZ(.8px); color: #243310; }
.why-ring > svg:nth-child(7) { transform: translateZ(2.4px); color: #33450C; }
.why-ring > svg:nth-child(8) { transform: translateZ(4px); color: #4D680F; }
.why-ring > svg:nth-child(9) { transform: translateZ(5.6px); color: #85AE12; }
.why-ring > svg:nth-child(10) { transform: translateZ(7.2px); color: var(--volt); }
.why-price { position: absolute; left: 0; right: 0; top: 48%; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 2px;
  translate: 0 -50%; }
.why-price .g-num-xl { color: var(--ink); font-size: clamp(40px, 3.9vw, 56px); text-shadow: 0 0 18px rgba(203,255,58,.2), 0 2px 14px rgba(6,8,10,.9); }

/* ══ keyframes ══ */
@keyframes why-sweep { from { translate: 0 -100%; opacity: 1; } to { translate: 0 0; opacity: 0; } }
/* rail · one token = 7.5s: spawn at Заявка, slow pass under the halo (x = 0 at 43%), hold on Баланс, sink */
@keyframes why-rtok {
  0% { translate: calc(-1 * var(--why-d)) 0 0; scale: .35 .35 .35; animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  7% { translate: calc(-1 * var(--why-d)) 0 0; scale: 1 1 1; }
  12% { translate: calc(-1 * var(--why-d)) 0 0; scale: 1 1 1; animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  38% { translate: -14px 0 0; scale: 1 1 1; animation-timing-function: linear; }
  48% { translate: 14px 0 0; scale: 1 1 1; animation-timing-function: cubic-bezier(.45, 0, .25, 1); }
  76% { translate: var(--why-d) 0 0; scale: 1 1 1; }
  88% { translate: var(--why-d) 0 0; scale: 1 1 1; animation-timing-function: cubic-bezier(.55, 0, .9, .45); }
  96%, 100% { translate: var(--why-d) 0 -5px; scale: .05 .05 .05; }
}
@keyframes why-rcv { 0%, 41% { opacity: 0; } 45%, 100% { opacity: 1; } }
@keyframes why-rtr { 0%, 44% { opacity: 0; } 54% { opacity: 1; } 76% { opacity: .85; } 86%, 100% { opacity: 0; } }
@keyframes why-rhalo { 0%, 100% { opacity: .5; } 6% { opacity: 1; } 34% { opacity: .5; } }
@keyframes why-rrip { 0% { scale: 1; opacity: 1; } 60% { scale: 2; opacity: 0; } 61% { scale: 1.32; opacity: 0; } 100% { scale: 1.32; opacity: .35; } }
/* chain · 10s: 0–30 tolled pass · 30–42 middle links drop · 44–54 ends lock · 54–82 direct · 82–98 reset */
@keyframes why-ck0 { 0%, 44% { translate: 0 0 0; } 54%, 82% { translate: 41px 0 0; } 90%, 100% { translate: 0 0 0; } }
@keyframes why-ck3 { 0%, 44% { translate: 0 0 0; } 54%, 82% { translate: -41px 0 0; } 90%, 100% { translate: 0 0 0; } }
@keyframes why-ckm { 0%, 30% { translate: 0 0 0; rotate: y 0deg; } 42%, 84% { translate: 0 10px -46px; rotate: y 50deg; } 98%, 100% { translate: 0 0 0; rotate: y 0deg; } }
@keyframes why-ckf { 0%, 30% { opacity: 1; } 40%, 86% { opacity: .14; } 98%, 100% { opacity: 1; } }
@keyframes why-cfl { 0%, 52% { scale: .5; opacity: 0; } 54% { scale: .7; opacity: 1; } 74%, 100% { scale: 2; opacity: 0; } }
@keyframes why-ctk {
  0% { translate: -54px 0 0; scale: 1 1 1; opacity: .2; }
  3% { translate: -54px 0 0; scale: 1 1 1; opacity: 1; animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  10% { translate: -18px 0 2.4px; scale: .8 .8 .8; opacity: .85; animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  17% { translate: 18px 0 4.6px; scale: .62 .62 .62; opacity: .7; animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  25% { translate: 54px 0 6.2px; scale: .48 .48 .48; opacity: .55; }
  29%, 56% { translate: 54px 0 6.2px; scale: .48 .48 .48; opacity: 0; }
  57% { translate: -34px 0 0; scale: 1 1 1; opacity: 0; }
  60% { translate: -34px 0 0; scale: 1 1 1; opacity: 1; animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  76% { translate: 34px 0 0; scale: 1 1 1; opacity: 1; }
  80%, 100% { translate: 34px 0 0; scale: 1 1 1; opacity: 0; }
}
/* press · 7s: contact at 16% (Прийнята) and 66% (Відмова) */
@keyframes why-stp {
  0% { translate: 0 0 44px; scale: 1 1 1; }
  5% { translate: 0 0 48px; }
  10% { translate: 0 0 44px; animation-timing-function: cubic-bezier(.6, 0, .95, .5); }
  16% { translate: 0 0 1px; scale: 1 1 1; animation-timing-function: ease-out; }
  17.5% { translate: 0 0 1px; scale: 1 1 .84; }
  19% { translate: 0 0 1px; scale: 1 1 1; animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  32% { translate: 0 0 44px; }
  42% { translate: 0 0 48px; }
  52%, 60% { translate: 0 0 44px; animation-timing-function: cubic-bezier(.6, 0, .95, .5); }
  66% { translate: 0 0 1px; scale: 1 1 1; animation-timing-function: ease-out; }
  67.5% { translate: 0 0 1px; scale: 1 1 .84; }
  69% { translate: 0 0 1px; scale: 1 1 1; animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  82% { translate: 0 0 44px; }
  91% { translate: 0 0 48px; }
  100% { translate: 0 0 44px; scale: 1 1 1; }
}
@keyframes why-ssh { 0%, 10% { scale: 1.35; opacity: .18; } 16%, 19% { scale: 1; opacity: .75; } 32%, 60% { scale: 1.35; opacity: .18; } 66%, 69% { scale: 1; opacity: .75; } 82%, 100% { scale: 1.35; opacity: .18; } }
@keyframes why-sok { 0%, 16% { opacity: 0; scale: 1.25; } 16.5% { opacity: 1; scale: 1.25; } 24% { scale: 1; } 58% { opacity: 1; scale: 1; } 62%, 100% { opacity: 0; scale: 1; } }
@keyframes why-sno { 0%, 10% { opacity: 1; scale: 1; } 14%, 66% { opacity: 0; scale: 1.25; } 66.5% { opacity: 1; scale: 1.25; } 74%, 100% { opacity: 1; scale: 1; } }
@keyframes why-seal { 0%, 31% { scale: 1; opacity: .55; } 33% { scale: .9; opacity: 1; } 52% { scale: 1.55; opacity: 0; } 53% { scale: 1; opacity: 0; } 72%, 100% { scale: 1; opacity: .55; } }
@keyframes why-vok { 0%, 16% { opacity: 0; scale: 1; } 16.5% { opacity: 1; scale: 1.08; } 22% { scale: 1; } 66% { opacity: 1; } 66.5%, 100% { opacity: 0; scale: 1; } }
@keyframes why-vno { 0%, 16% { opacity: 1; scale: 1; } 16.5%, 66% { opacity: 0; scale: 1; } 66.5% { opacity: 1; scale: 1.08; } 72% { scale: 1; } 100% { opacity: 1; scale: 1; } }
/* funnel · a pulse walks down the six steps every 4.8s, the lit «Конверсії» slab breathes with the last one */
@keyframes why-fpu { 0% { scale: 1; opacity: 1; } 22% { scale: 1.14; opacity: 0; } 23%, 100% { scale: 1; opacity: 0; } }
@keyframes why-fgl { 0% { opacity: 1; } 40%, 100% { opacity: .4; } }
/* fan · the pulse runs the beam in 0–60%; each card's dot lights as it passes */
@keyframes why-tlp { 0% { translate: 0 0 0; } 60%, 100% { translate: 224px 0 0; } }
@keyframes why-tlo { 0% { opacity: 0; } 4%, 56% { opacity: 1; } 62%, 100% { opacity: 0; } }
@keyframes why-ocd { 0%, 46% { opacity: 1; } 52%, 100% { opacity: 0; } }
/* ring · 16s per turn; the floor glow narrows with |cos θ| */
@keyframes why-ry { from { rotate: y 0deg; } to { rotate: y 360deg; } }
@keyframes why-rfl { 0%, 50%, 100% { scale: 1 1; } 12.5%, 37.5%, 62.5%, 87.5% { scale: .72 1; } 25%, 75% { scale: .16 1; } }

/* ══ responsive ══ */
@media (min-width: 1100px) and (max-width: 1279px) {
  .why-cols { grid-template-columns: minmax(0, 1fr); }
  .why-viz--funnel .why-rig { scale: .86 .86 .86; }
  .why-viz--stamp .why-rig { left: 36%; }
}
@media (max-width: 1099px) {
  .why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .why-card { grid-column: auto; }
  .why-card--rail, .why-card--funnel { grid-column: 1 / -1; }
  .why-price .g-num-xl { font-size: 56px; }
}
@media (max-width: 720px) {
  .why-grid { display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gut, 24px); margin-inline: calc(-1 * var(--gut, 24px)); padding: 4px var(--gut, 24px) 16px;
    scrollbar-width: thin; scrollbar-color: var(--wire-hi) transparent; }
  .why-card { --why-pad: 20px; flex: 0 0 min(320px, 86vw); scroll-snap-align: start; }
  .why-cols { grid-template-columns: minmax(0, 1fr); }
  .why-viz--rail { --why-d: 92px; height: 212px; }
  .why-fsplit { grid-template-columns: minmax(0, 1fr); }
  .why-viz--funnel { order: -1; min-height: 0; height: 236px; margin: calc(-1 * var(--why-pad)) calc(-1 * var(--why-pad)) 20px; }
  .why-viz--funnel .why-rig { top: calc(50% + 56px); scale: .8 .8 .8; }
  .why-price .g-num-xl { font-size: 40px; }
}

/* ===== path.css ===== */
/* ══ 02 · Шлях до грошей — lane duel on one tilted 3D track (root .path) ══
   Geometry (desktop/tablet): board tilted rotateX(56deg), perspective 1000px, origin on the front lane.
   Back lane sits 240px deeper -> projected x-scale 0.834, so its label row is 94% * 0.834 = 78.4% wide, centred.
   Loop: 0% = the key moment (direct token landed on «Гроші на балансі», intermediary token waiting at
   «Рішення кредитора»), so the paused first frame is the complete story. */
.path { --path-dur: 10s; --path-tilt: 56deg; --path-crawl: cubic-bezier(.45, .05, .55, .95); }

/* ── duel frame ── */
.path .path-duel { --c: rgba(203,255,58,.5); --l: 14px; position: relative; display: flex; flex-direction: column; padding: 28px 24px 26px; }

/* ── lane blocks (2D, real text) ── */
.path .path-lane { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 14px; }
.path .path-lane--fp { flex-direction: column-reverse; }
.path .path-lane__head { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 14px; row-gap: 6px; }
.path .path-lane__oct { width: 10px; height: 10px; align-self: center; background: var(--frost); }
.path .path-lane--fp .path-lane__oct { background: var(--volt); }
.path .path-lane__s { margin: 0; }
.path .path-vrail { display: none; }

/* step labels: an ordered list laid out on the projected node positions */
.path .path-steps { position: relative; margin: 0; padding: 0; list-style: none; }
.path .path-steps--mid { width: 78.4%; margin-left: 10.8%; height: 64px; }
.path .path-steps--fp { width: 94%; margin-left: 3%; height: 46px; }
.path .path-step { position: absolute; left: var(--x); display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; transform: translateX(-50%); }
.path .path-steps--mid .path-step { bottom: 0; width: 24%; flex-direction: column-reverse; }
.path .path-steps--fp .path-step { top: 0; width: 26%; }
.path .path-step::after { content: ''; position: absolute; left: 50%; width: 1px; height: 7px; background: var(--wire-hi); }
.path .path-steps--mid .path-step::after { top: 100%; margin-top: 3px; }
.path .path-steps--fp .path-step::after { bottom: 100%; margin-bottom: 4px; background: rgba(203,255,58,.45); }
.path .path-steps .path-step--wait::after, .path .path-steps .path-step--held::after { background: var(--frost); }
.path .path-steps .path-step--money::after { background: var(--volt); }
.path .path-step__row { display: inline-flex; align-items: baseline; justify-content: center; gap: 8px; max-width: 100%; }
.path .path-step__ix { flex: none; font: 600 11px/1 var(--f-mono); font-stretch: 87.5%; letter-spacing: .08em; color: var(--ink-3); }
.path .path-steps--fp .path-step__ix { color: var(--volt); }
.path .path-step__name { position: relative; font: 600 15px/20px var(--f-text); color: var(--ink); text-wrap: balance; transition: color .16s linear; }
.path .path-step--todo .path-step__name { color: var(--ink-3); }
.path .path-step--money .path-step__name { color: var(--volt); }
.path .path-step--money .path-step__name::after { content: ''; position: absolute; left: 0; right: 0; bottom: -5px; height: 2px; background: var(--volt); box-shadow: 0 0 10px rgba(203,255,58,.6); animation: path-glint var(--path-dur) linear infinite; }
.path .path-steps--mid .path-step:hover .path-step__name { color: var(--frost); }
.path .path-steps--fp .path-step:hover .path-step__name { color: #E2FF8F; }
.path .path-step .path-wait { color: var(--frost); background: var(--frost-chip); }
.path .path-step .path-held { background: repeating-linear-gradient(135deg, var(--frost-chip) 0 3.5355px, #182A34 3.5355px 7.0711px) 0 0 / 10px 10px; animation: path-hatch 1.4s linear infinite; }

/* ── 3D scene ── */
.path .path-scene { position: relative; z-index: 0; height: 212px; margin-top: -20px; perspective: 1000px; perspective-origin: 50% 166px; pointer-events: none; }
.path .path-deck { position: absolute; left: 3%; width: 94%; top: -118px; height: 328px; transform-origin: 50% 284px; transform: rotateX(var(--path-tilt)); transform-style: preserve-3d; }

/* board: bevelled HUD plate lying flat + three stacked slabs below = visible thickness on the near edge */
.path .path-floor, .path .path-slab { --cut: 28px; position: absolute; inset: 0; display: block;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); }
.path .path-floor { border: 1px solid transparent;
  background:
    linear-gradient(135deg, transparent 50%, var(--wire-hi) 50% calc(50% + 1.2px), transparent calc(50% + 1.2px)) 0 0 / var(--cut) var(--cut) no-repeat border-box,
    linear-gradient(135deg, transparent calc(50% - 1.2px), var(--wire-hi) calc(50% - 1.2px) 50%, transparent 50%) 100% 100% / var(--cut) var(--cut) no-repeat border-box,
    repeating-linear-gradient(90deg, rgba(233,239,234,.045) 0 1px, transparent 1px 32px) padding-box,
    repeating-linear-gradient(0deg, rgba(233,239,234,.045) 0 1px, transparent 1px 32px) padding-box,
    linear-gradient(#0A0E11, #0A0E11) padding-box,
    linear-gradient(var(--wire-hi), var(--wire-hi)) border-box; }
.path .path-slab--1 { transform: translateZ(-4px); background: #1A2227; }
.path .path-slab--2 { transform: translateZ(-8px); background: #12181C; }
.path .path-slab--3 { transform: translateZ(-12px); background: #0C1114; }
.path .path-mark { position: absolute; top: 14px; bottom: 14px; left: var(--x); width: 2px; margin-left: -1px; display: block; transform: translateZ(1.5px);
  background: repeating-linear-gradient(180deg, rgba(233,239,234,.2) 0 6px, transparent 6px 12px); }

/* lanes */
.path .path-track { position: absolute; left: 0; right: 0; height: 0; transform-style: preserve-3d; }
.path .path-track--mid { top: 44px; }
.path .path-track--fp { top: 284px; }
.path .path-strip { --cut: 14px; --edge: var(--wire-hi); --fill: #0F1417;
  position: absolute; left: 10px; right: 10px; top: -34px; height: 68px; display: block; border: 1px solid transparent; transform: translateZ(1px);
  background:
    repeating-linear-gradient(90deg, rgba(233,239,234,.16) 0 1px, transparent 1px 18px) 0 5px / 100% 5px no-repeat padding-box,
    repeating-linear-gradient(90deg, rgba(233,239,234,.16) 0 1px, transparent 1px 18px) 0 calc(100% - 5px) / 100% 5px no-repeat padding-box,
    linear-gradient(135deg, transparent 50%, var(--edge) 50% calc(50% + 1.2px), transparent calc(50% + 1.2px)) 0 0 / var(--cut) var(--cut) no-repeat border-box,
    linear-gradient(135deg, transparent calc(50% - 1.2px), var(--edge) calc(50% - 1.2px) 50%, transparent 50%) 100% 100% / var(--cut) var(--cut) no-repeat border-box,
    linear-gradient(var(--fill), var(--fill)) padding-box,
    linear-gradient(var(--edge), var(--edge)) border-box;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); }
.path .path-track--fp .path-strip { --edge: rgba(203,255,58,.5); --fill: #10170B; }
.path .path-wire { position: absolute; left: 8%; width: 84%; top: -1px; height: 2px; display: block; background: var(--wire-hi); transform: translateZ(2px); }
.path .path-track--fp .path-wire, .path .path-lane--fp .path-wire { background: rgba(203,255,58,.28); }
.path .path-fill { position: absolute; left: 8%; width: 84%; top: -1.5px; height: 3px; display: block; transform-origin: 0 50%; }
.path .path-fill--fp { transform: translateZ(3px) scaleX(.6667); background: var(--volt); box-shadow: 0 0 12px rgba(203,255,58,.55);
  animation: path-fill-fp var(--path-dur) var(--ease-hud) infinite; }
.path .path-fill--mid { transform: translateZ(3px) scaleX(.25); background: var(--ink-2);
  animation: path-fill-mid var(--path-dur) var(--path-crawl) infinite; }

/* pads: bevelled octagon plinths, five stacked slices + lit top face standing up in Z */
.path .path-pad { --c1: #050709; --c2: #141B1F; --c3: #182024; --c4: #1C252A; --c5: #222C32; --rim: var(--wire-input); --face: var(--rail);
  position: absolute; left: var(--x); top: -22px; width: 44px; height: 44px; margin-left: -22px; display: block;
  transform-style: preserve-3d; transition: transform .35s var(--ease-hud); }
.path .path-pad > i, .path .path-pad > b, .path .path-pad > b::after { position: absolute; inset: 0; display: block;
  clip-path: polygon(29.3% 0, 70.7% 0, 100% 29.3%, 100% 70.7%, 70.7% 100%, 29.3% 100%, 0 70.7%, 0 29.3%); }
.path .path-pad > i:nth-child(1) { inset: -4px; background: var(--c1); transform: translateZ(2px); }
.path .path-pad > i:nth-child(2) { background: var(--c2); transform: translateZ(5px); }
.path .path-pad > i:nth-child(3) { background: var(--c3); transform: translateZ(8px); }
.path .path-pad > i:nth-child(4) { background: var(--c4); transform: translateZ(11px); }
.path .path-pad > i:nth-child(5) { background: var(--c5); transform: translateZ(14px); }
.path .path-pad > b { background: var(--rim); transform: translateZ(17px); }
.path .path-pad > b::after { content: ''; inset: 2px; background: var(--face); }
.path .path-pad--todo { --rim: var(--wire-hi); --face: var(--deck); }
.path .path-pad--wait, .path .path-pad--held { --c2: #13212A; --c3: #172833; --c4: #1B2F3B; --c5: #203744; --rim: var(--frost); --face: var(--frost-chip); }
.path .path-pad--held > b::after { background: repeating-linear-gradient(135deg, #132028 0 3.5355px, #1E3440 3.5355px 7.0711px) 0 0 / 10px 10px; animation: path-hatch 1.4s linear infinite; }
.path .path-pad--fp { --c2: #18220A; --c3: #1E2C0B; --c4: #26380D; --c5: #2E4510; --rim: var(--volt); --face: var(--volt-chip); }
.path .path-pad--hero { --c2: #4F6A08; --c3: #62830B; --c4: #7FA60E; --c5: #94C010; --rim: #E2FF8F; --face: linear-gradient(180deg, #DEFF7A, #CBFF3A 50%, #A9DB12); }

/* tokens: runner spans the lane, translateX(%) = position along it; pucks float above the pads */
.path .path-run { position: absolute; left: 0; top: 0; width: 100%; height: 0; display: block; }
.path .path-track .path-run { transform-style: preserve-3d; }
.path .path-run--fp { transform: translateX(64%); animation: path-run-fp var(--path-dur) var(--ease-hud) infinite; }
.path .path-run--mid { transform: translateX(29%); animation: path-run-mid var(--path-dur) var(--path-crawl) infinite; }
.path .path-run > i { position: absolute; display: block; animation: path-blink var(--path-dur) linear infinite; }
.path .path-glow { left: -36px; top: -36px; width: 72px; height: 72px; transform: translateZ(3.5px); background: radial-gradient(closest-side, rgba(203,255,58,.5), rgba(203,255,58,0)); }
.path .path-puck { left: -11px; top: -11px; width: 22px; height: 22px; transform: translateZ(24px); background: linear-gradient(180deg, #DEFF7A, #CBFF3A 50%, #A9DB12);
  clip-path: polygon(29.3% 0, 70.7% 0, 100% 29.3%, 100% 70.7%, 70.7% 100%, 29.3% 100%, 0 70.7%, 0 29.3%); }
.path .path-puck--lo { transform: translateZ(20px); background: #6E8F0E; }
.path .path-run--mid .path-glow { background: radial-gradient(closest-side, rgba(159,194,212,.3), rgba(159,194,212,0)); }
.path .path-run--mid .path-puck { background: linear-gradient(180deg, #E9EFEA, #AAB6B0); }
.path .path-run--mid .path-puck--lo { background: #5E7784; }

/* rings on the floor: waiting (dashed, turning), held (pulsing), money landed (shockwave) */
.path .path-ring { position: absolute; left: var(--x); top: -36px; width: 72px; height: 72px; margin-left: -36px; display: block; }
.path .path-ring > svg { display: block; width: 100%; height: 100%; }
.path .path-ring--wait { color: var(--frost); transform: translateZ(2.5px) rotate(0deg); animation: path-spin 9s linear infinite; }
.path .path-ring--hold { color: var(--frost); opacity: .85; transform: translateZ(2.5px) scale(.9); animation: path-pulse 1.8s var(--ease-money) infinite; }
.path .path-ring--late { animation-delay: -.9s; }
.path .path-ring--shock { color: var(--volt); opacity: .9; transform: translateZ(2.5px) scale(1); animation: path-shock var(--path-dur) var(--ease-money) infinite; }
.path .path-ring--v { top: -18px; width: 36px; height: 36px; margin-left: -18px; }

/* billboards: counter-rotated so they stand upright facing the viewer */
.path .path-bb { position: absolute; left: var(--x); top: 0; width: 0; height: 0; display: block; transform-origin: 0 0; transform: rotateX(calc(var(--path-tilt) * -1)); }
.path .path-bb--ping { transform: rotateX(calc(var(--path-tilt) * -1)) translateZ(6px); }
.path .path-beam { position: absolute; left: -15px; bottom: 12px; width: 30px; height: 64px; display: block; transform-origin: 50% 100%;
  background: linear-gradient(0deg, rgba(203,255,58,.55), rgba(203,255,58,.12) 55%, rgba(203,255,58,0));
  clip-path: polygon(22% 0, 78% 0, 100% 100%, 0 100%); animation: path-beam var(--path-dur) var(--ease-money) infinite; }
.path .path-ping { --cut: 7px; position: absolute; left: 0; bottom: 34px; display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px;
  color: var(--volt); background: var(--volt-chip); box-shadow: inset 0 0 0 1px rgba(203,255,58,.55); transform: translate(-50%, 0);
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  animation: path-ping var(--path-dur) var(--ease-money) infinite; }

/* hover / focus: hovering a lane lifts its pads in Z and lights its strip; a step lifts its own pad higher */
.path .path-duel:has(.path-lane--mid:hover) .path-track--mid .path-pad,
.path .path-duel:has(.path-lane--fp:hover) .path-track--fp .path-pad { transform: translateZ(6px); }
.path .path-duel:has(.path-lane--mid:hover) .path-track--mid .path-strip { --edge: var(--frost); }
.path .path-duel:has(.path-lane--fp:hover) .path-track--fp .path-strip { --edge: var(--volt); }
.path .path-duel:has(.path-a1:hover) .path-track .path-pad--a1, .path .path-duel:has(.path-a2:hover) .path-track .path-pad--a2,
.path .path-duel:has(.path-a3:hover) .path-track .path-pad--a3, .path .path-duel:has(.path-a4:hover) .path-track .path-pad--a4,
.path .path-duel:has(.path-a5:hover) .path-track .path-pad--a5, .path .path-duel:has(.path-b1:hover) .path-track .path-pad--b1,
.path .path-duel:has(.path-b2:hover) .path-track .path-pad--b2, .path .path-duel:has(.path-b3:hover) .path-track .path-pad--b3,
.path .path-duel:has(.path-b4:hover) .path-track .path-pad--b4 { transform: translateZ(16px); }

/* ── choreography (one 10s loop, all in sync; 0% = landed on balance / still waiting for the lender) ── */
@keyframes path-run-fp {
  0%, 16% { transform: translateX(64%); }
  28%, 55% { transform: translateX(92%); }
  56%, 66% { transform: translateX(8%); }
  75%, 86% { transform: translateX(36%); }
  100% { transform: translateX(64%); }
}
@keyframes path-run-mid {
  0%, 14% { transform: translateX(29%); }
  24%, 27% { transform: translateX(50%); }
  38%, 55% { transform: translateX(71%); }
  56%, 72% { transform: translateX(8%); }
  92%, 100% { transform: translateX(29%); }
}
@keyframes path-fill-fp {
  0%, 16% { transform: translateZ(3px) scaleX(.6667); opacity: 1; }
  28%, 50% { transform: translateZ(3px) scaleX(1); opacity: 1; }
  54% { transform: translateZ(3px) scaleX(1); opacity: 0; }
  56% { transform: translateZ(3px) scaleX(0); opacity: 0; }
  58%, 66% { transform: translateZ(3px) scaleX(0); opacity: 1; }
  75%, 86% { transform: translateZ(3px) scaleX(.3333); opacity: 1; }
  100% { transform: translateZ(3px) scaleX(.6667); opacity: 1; }
}
@keyframes path-fill-mid {
  0%, 14% { transform: translateZ(3px) scaleX(.25); opacity: 1; }
  24%, 27% { transform: translateZ(3px) scaleX(.5); opacity: 1; }
  38%, 50% { transform: translateZ(3px) scaleX(.75); opacity: 1; }
  54% { transform: translateZ(3px) scaleX(.75); opacity: 0; }
  56% { transform: translateZ(3px) scaleX(0); opacity: 0; }
  58%, 72% { transform: translateZ(3px) scaleX(0); opacity: 1; }
  92%, 100% { transform: translateZ(3px) scaleX(.25); opacity: 1; }
}
@keyframes path-blink { 0%, 50% { opacity: 1; } 54%, 57% { opacity: 0; } 61%, 100% { opacity: 1; } }
@keyframes path-shock { 0% { transform: translateZ(2.5px) scale(1); opacity: .9; } 22% { transform: translateZ(2.5px) scale(2.3); opacity: 0; } 96% { transform: translateZ(2.5px) scale(.6); opacity: 0; } 100% { transform: translateZ(2.5px) scale(1); opacity: .9; } }
@keyframes path-beam { 0% { transform: scaleY(1); opacity: 1; } 26% { transform: scaleY(1.3); opacity: 0; } 95% { transform: scaleY(.2); opacity: 0; } 100% { transform: scaleY(1); opacity: 1; } }
@keyframes path-ping { 0%, 5% { transform: translate(-50%, 0); opacity: 1; } 30% { transform: translate(-50%, -18px); opacity: 0; } 95% { transform: translate(-50%, 8px); opacity: 0; } 100% { transform: translate(-50%, 0); opacity: 1; } }
@keyframes path-glint { 0% { opacity: 1; } 26%, 95% { opacity: .3; } 100% { opacity: 1; } }
@keyframes path-spin { from { transform: translateZ(2.5px) rotate(0deg); } to { transform: translateZ(2.5px) rotate(360deg); } }
@keyframes path-pulse { 0% { transform: translateZ(2.5px) scale(.9); opacity: .85; } 100% { transform: translateZ(2.5px) scale(1.75); opacity: 0; } }
@keyframes path-hatch { from { background-position: 0 0; } to { background-position: 10px 0; } }

/* ── note under the duel ── */
.path .path-note { position: relative; display: flex; align-items: flex-start; gap: 14px; margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--wire); }
.path .path-note::before { content: ''; position: absolute; left: 0; top: -1px; width: 56px; height: 1px; background: var(--volt); }
.path .path-note__oct { margin-top: 9px; }
.path .path-note__p { max-width: 880px; }

/* ── HUD comparison table ── */
.path .path-cmp { margin-top: 32px; padding: 0; }
.path .path-cmp__box { overflow-x: auto; overscroll-behavior-x: contain; }
.path .path-cmp__box:focus-visible { outline-offset: -4px; }
.path .path-tbl { width: 100%; min-width: 760px; border-collapse: separate; border-spacing: 0; font: 400 15px/22px var(--f-text); color: var(--ink); }
.path .path-tbl th, .path .path-tbl td { padding: 18px 20px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--wire); transition: background-color .16s linear; }
.path .path-tbl thead th { padding-top: 16px; padding-bottom: 16px; vertical-align: bottom; background: var(--plate); border-bottom-color: var(--wire-hi); }
.path .path-tbl thead th:first-child { width: 24%; padding-left: 24px; }
.path .path-tbl thead th:nth-child(2) { width: 36%; }
.path .path-tbl thead .g-label { display: inline-flex; align-items: center; gap: 8px; }
.path .path-tbl tbody th { position: relative; padding-left: 24px; font-weight: 600; color: var(--ink); }
.path .path-tbl tbody th::before { content: ''; position: absolute; left: 9px; top: 26px; width: 6px; height: 6px; background: var(--volt); opacity: 0; transform: scale(.4);
  clip-path: polygon(29.3% 0, 70.7% 0, 100% 29.3%, 100% 70.7%, 70.7% 100%, 29.3% 100%, 0 70.7%, 0 29.3%); transition: opacity .16s linear, transform .2s var(--ease-hud); }
.path .path-tbl tbody td { color: var(--ink-2); }
.path .path-tbl .path-tbl__fp { color: var(--ink); font-weight: 500; background-color: #10150F; box-shadow: inset 1px 0 0 rgba(203,255,58,.32); }
.path .path-tbl thead .path-tbl__fp { background-color: #151D0E; box-shadow: inset 1px 0 0 rgba(203,255,58,.32), inset 0 2px 0 var(--volt); }
.path .path-tbl tbody tr:last-child > * { border-bottom: 0; }
.path .path-tbl tbody tr:hover > * { background-color: var(--plate); }
.path .path-tbl tbody tr:hover > .path-tbl__fp { background-color: #18220F; }
.path .path-tbl tbody tr:hover > th::before { opacity: 1; transform: scale(1); }
.path .path-tbl__ok { display: inline-flex; align-items: flex-start; gap: 10px; }
.path .path-tbl__ok svg { flex: none; width: 16px; height: 16px; margin-top: 3px; color: var(--volt); }
.path .path-disc { margin-top: 14px; }

/* ── tablet: same track, tighter labels ── */
@media (max-width: 1099px) {
  .path .path-duel { padding: 24px 16px 22px; }
  .path .path-lane__t { font-size: 26px; }
  .path .path-steps--mid { height: 92px; }
  .path .path-steps--fp { height: 52px; }
  .path .path-step__name { font-size: 14px; line-height: 18px; }
  .path .path-step .path-wait { min-height: 0; max-width: 100%; padding: 4px 8px; white-space: normal; line-height: 1.3; text-align: left; }
  .path .path-step .path-wait svg { display: none; }
}

/* ── phone: the 3D board gives way to two parallel vertical tracks (same loop, rotated rail) ── */
@media (max-width: 720px) {
  .path .path-scene { display: none; }
  .path .path-duel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 0; background: none; }
  .path .path-lane, .path .path-lane--fp { --cut: 12px; --edge: var(--wire-hi); flex-direction: column; gap: 12px; padding: 14px 10px 16px 12px; border: 1px solid transparent;
    background:
      linear-gradient(135deg, transparent 50%, var(--edge) 50% calc(50% + 1.2px), transparent calc(50% + 1.2px)) 0 0 / var(--cut) var(--cut) no-repeat border-box,
      linear-gradient(135deg, transparent calc(50% - 1.2px), var(--edge) calc(50% - 1.2px) 50%, transparent 50%) 100% 100% / var(--cut) var(--cut) no-repeat border-box,
      linear-gradient(var(--deck), var(--deck)) padding-box,
      linear-gradient(var(--edge), var(--edge)) border-box;
    clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); }
  .path .path-lane--fp { --edge: rgba(203,255,58,.5); }
  .path .path-lane__head { flex-direction: column; align-items: flex-start; gap: 6px; }
  .path .path-lane__oct { align-self: flex-start; }
  .path .path-lane__t { font-size: 22px; line-height: 1; }
  .path .path-lane__s { font-size: 11px; letter-spacing: .08em; }
  .path .path-steps--mid, .path .path-steps--fp { width: auto; height: 400px; margin: auto 0 0; }
  .path .path-steps--mid .path-step, .path .path-steps--fp .path-step { left: 30px; right: 0; top: var(--x); bottom: auto; width: auto; gap: 4px;
    flex-direction: column; align-items: flex-start; text-align: left; transform: translateY(-50%); }
  .path .path-step__row { justify-content: flex-start; gap: 6px; }
  .path .path-step__ix { font-size: 10px; }
  .path .path-step .path-wait, .path .path-step .path-held { min-height: 0; padding: 4px 6px; font-size: 10.5px; line-height: 1.25; white-space: normal; text-align: left; }
  .path .path-step .path-wait svg { display: none; }
  /* station markers on the rail */
  .path .path-step::after, .path .path-steps--mid .path-step::after, .path .path-steps--fp .path-step::after {
    top: 50%; bottom: auto; left: -26px; width: 12px; height: 12px; margin: -6px 0 0; background: var(--wire-input);
    clip-path: polygon(29.3% 0, 70.7% 0, 100% 29.3%, 100% 70.7%, 70.7% 100%, 29.3% 100%, 0 70.7%, 0 29.3%); }
  .path .path-steps--fp .path-step::after { background: rgba(203,255,58,.6); }
  .path .path-steps .path-step--wait::after, .path .path-steps .path-step--held::after { background: var(--frost); }
  .path .path-steps .path-step--todo::after { background: var(--wire-hi); }
  .path .path-steps .path-step--money::after { left: -28px; width: 16px; height: 16px; margin-top: -8px; background: var(--volt); }
  /* rail: a horizontal track rotated 90deg, so the same translateX loop runs top -> bottom */
  .path .path-vrail { display: block; position: absolute; left: 22px; bottom: 16px; width: 0; height: 400px; }
  .path .path-vrail__h { position: absolute; left: 0; top: 0; width: 400px; height: 0; transform-origin: 0 0; transform: rotate(90deg); }
  .path .path-vdot { left: -8px; top: -8px; width: 16px; height: 16px; background: linear-gradient(180deg, #DEFF7A, #CBFF3A 50%, #A9DB12);
    clip-path: polygon(29.3% 0, 70.7% 0, 100% 29.3%, 100% 70.7%, 70.7% 100%, 29.3% 100%, 0 70.7%, 0 29.3%); }
  .path .path-run--mid .path-vdot { background: linear-gradient(180deg, #E9EFEA, #AAB6B0); }
  .path .path-tbl { min-width: 640px; font-size: 14px; line-height: 20px; }
  .path .path-tbl th, .path .path-tbl td { padding: 14px 14px; }
  .path .path-tbl thead th:first-child, .path .path-tbl tbody th { padding-left: 20px; }
  .path .path-tbl tbody th::before { left: 7px; top: 21px; }
}

/* ===== levels.css ===== */
/* ══ 03 · Рівні (lvl-) ══
   3D moment: an isometric CSS-3D tower of five solid HUD blocks (top plate + two real side faces each; the kit's
   TL/BR bevel sits exactly edge-on at rotateZ(-45deg), so no bevel faces are needed). A volt coin hops 0 → 5 along
   the zig-zag in a seamless 14s loop; every block lights and pings as it lands, the HUD track on the right fills in
   sync, then the coin cashes out at the top and re-forms on level 0. Frozen frame (motion off) = "you are on level 0". */

.lvl {
  --lvl-t: 14s;
  --k: 1;
  --lvl-oct: polygon(29.3% 0, 70.7% 0, 100% 29.3%, 100% 70.7%, 70.7% 100%, 29.3% 100%, 0 70.7%, 0 29.3%);
  --lvl-ring: polygon(evenodd, 16.67% 0, 100% 0, 100% 83.33%, 83.33% 100%, 0 100%, 0 16.67%, 16.67% 0, 17.36% 1.67%, 1.67% 17.36%, 1.67% 98.33%, 82.64% 98.33%, 98.33% 82.64%, 98.33% 1.67%, 17.36% 1.67%);
}

/* ── layout ── */
.lvl .lvl-grid { display: grid; grid-template-columns: 520px minmax(0, 1fr); align-items: center; gap: clamp(40px, 5vw, 80px); }
.lvl .lvl-side { min-width: 0; }

/* ── scene: fixed 520×700 stage, scaled as one piece ── */
.lvl .lvl-scene { position: relative; height: calc(700px * var(--k)); overflow: hidden; pointer-events: none; }
.lvl .lvl-view { position: absolute; left: 50%; top: 0; width: 520px; height: 700px; margin-left: -260px;
  perspective: 1800px; transform: scale(var(--k)); transform-origin: 50% 0; }
.lvl .lvl-rig { position: absolute; left: 212px; top: 505px; width: 0; height: 0; transform-style: preserve-3d;
  transform: rotateX(58deg) rotateZ(-45deg);
  animation: lvl-cam 11s cubic-bezier(.45, 0, .55, 1) -5.5s infinite alternate; }

.lvl .lvl-floor { position: absolute; left: -194px; top: -402px; width: 660px; height: 660px; transform: translateZ(-1px);
  background:
    linear-gradient(90deg, rgba(58,71,80,.6) 1px, transparent 1px) 0 0 / 34px 34px,
    linear-gradient(rgba(58,71,80,.6) 1px, transparent 1px) 0 0 / 34px 34px;
  -webkit-mask-image: radial-gradient(closest-side, #000 18%, rgba(0,0,0,.35) 46%, transparent 72%);
  mask-image: radial-gradient(closest-side, #000 18%, rgba(0,0,0,.35) 46%, transparent 72%); }

/* ── blocks: 120×120 plan, height --h; faces −x (left) and +y (right) are the two the camera sees ── */
.lvl .lvl-blk { position: absolute; left: -60px; top: -60px; width: 120px; height: 120px; transform-style: preserve-3d;
  transform: translate3d(var(--x), var(--y), 0); transition: translate .45s var(--ease-hud); }
.lvl .lvl-fl, .lvl .lvl-fr { position: absolute; overflow: hidden; }
.lvl .lvl-fl { left: 0; top: 20px; width: var(--h); height: 100px; transform-origin: 0 50%; transform: rotateY(-90deg);
  background:
    repeating-linear-gradient(90deg, rgba(233,239,234,.035) 0 1px, transparent 1px 4px),
    linear-gradient(90deg, #0A0E11, #172026);
  box-shadow: inset -1px 0 0 #3A4750, inset 0 -1px 0 #33404A, inset 0 1px 0 #1F282E; }
.lvl .lvl-fr { left: 0; top: calc(120px - var(--h)); width: 100px; height: var(--h); transform-origin: 50% 100%; transform: rotateX(-90deg);
  background:
    repeating-linear-gradient(180deg, rgba(233,239,234,.03) 0 1px, transparent 1px 4px),
    linear-gradient(180deg, #10171B, #080B0D);
  box-shadow: inset 0 1px 0 #3A4750, inset 1px 0 0 #2A353D, inset -1px 0 0 #161D22; }
.lvl .lvl-fl-lit, .lvl .lvl-fr-lit { position: absolute; inset: 0; }
.lvl .lvl-fl-lit { background: linear-gradient(270deg, #CBFF3A 0 2px, rgba(203,255,58,.16) 2px, rgba(203,255,58,0) 72px); }
.lvl .lvl-fr-lit { background: linear-gradient(180deg, #CBFF3A 0 2px, rgba(203,255,58,.12) 2px, rgba(203,255,58,0) 72px); }

.lvl .lvl-top { position: absolute; inset: 0; --fill: #1A2329; transform: translateZ(var(--h)); }
.lvl .lvl-top::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(45deg, rgba(233,239,234,.03) 0 1px, transparent 1px 5px); }
.lvl .lvl-top-lit { position: absolute; inset: -1px; z-index: 3; --fill: var(--volt-chip); }
.lvl .lvl-top-lit::before { --bc: #CBFF3A; --bl: 16px; }
.lvl .lvl-b1 .lvl-top::before { --bc: #CBFF3A; }

/* engraved level number: counter-rotated to read horizontally, stretched against the floor foreshortening */
.lvl .lvl-num { position: absolute; left: 44px; top: 76px; z-index: 1; white-space: nowrap;
  font: 500 38px/1 var(--f-mono); font-stretch: 87.5%; letter-spacing: -.03em;
  color: #0A0E11; -webkit-text-stroke: 1px #4A5862; text-shadow: 0 1px 0 rgba(233,239,234,.06);
  transform: translate(-50%, -50%) rotate(45deg) scaleY(1.3); }
.lvl .lvl-top-lit .lvl-num { color: var(--volt); -webkit-text-stroke: 0 transparent; text-shadow: 0 0 14px rgba(203,255,58,.55); }

.lvl .lvl-ring { position: absolute; inset: 0; z-index: 4; background: var(--volt); clip-path: var(--lvl-ring); opacity: 0;
  transform: translateZ(calc(var(--h) + 2px)); animation: lvl-ping var(--lvl-t) linear infinite; }
.lvl .lvl-b1 .lvl-ring { animation-delay: calc(var(--lvl-t) * -.89); }
.lvl .lvl-b2 .lvl-ring { animation-delay: calc(var(--lvl-t) * -.76); }
.lvl .lvl-b3 .lvl-ring { animation-delay: calc(var(--lvl-t) * -.63); }
.lvl .lvl-b4 .lvl-ring { animation-delay: calc(var(--lvl-t) * -.5); }
.lvl .lvl-b5 .lvl-ring { animation-delay: calc(var(--lvl-t) * -.37); }

/* goal beacon on level 5 (billboard: faces the camera) */
.lvl .lvl-beam { position: absolute; left: 36px; top: -56px; width: 48px; height: 116px; opacity: .4;
  transform-origin: 50% 100%; transform: translateZ(var(--h)) rotateZ(45deg) rotateX(-58deg);
  background:
    linear-gradient(90deg, transparent calc(50% - 1px), rgba(203,255,58,.9) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)),
    radial-gradient(42% 62% at 50% 100%, rgba(203,255,58,.32), rgba(203,255,58,0));
  -webkit-mask-image: linear-gradient(to top, #000 8%, transparent);
  mask-image: linear-gradient(to top, #000 8%, transparent);
  animation: lvl-beam var(--lvl-t) linear infinite; }

/* ── level 0 pad ── */
.lvl .lvl-pad { position: absolute; left: -52px; top: -52px; width: 104px; height: 104px; transform-style: preserve-3d; transform: translate3d(0, 136px, 0); }
.lvl .lvl-pad-base { position: absolute; inset: 0; background: #0B1007; transform: translateZ(1px);
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px); }
.lvl .lvl-pad-top { position: absolute; inset: 0; --fill: #10180A; transform: translateZ(4px); }
.lvl .lvl-pad-top::before { --bc: #CBFF3A; --bl: 14px; }
.lvl .lvl-pad-top .lvl-num { left: 36px; top: 68px; font-size: 28px; color: #18230A; -webkit-text-stroke: 1px rgba(203,255,58,.55); }
.lvl .lvl-pad-ring { position: absolute; inset: 0; background: var(--volt); clip-path: var(--lvl-ring); transform: translateZ(5px);
  animation: lvl-here 2.6s var(--ease-hud) infinite; }

/* ── token: plan mover → height mover → billboard → coin (life + bob) → spinning 3-layer octagon ── */
.lvl .lvl-tok, .lvl .lvl-tok-z { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-style: preserve-3d; }
.lvl .lvl-tok { transform: translate3d(10px, 126px, 0); animation: lvl-tok-xy var(--lvl-t) linear infinite; }
.lvl .lvl-tok-z { transform: translateZ(4px); animation: lvl-tok-z var(--lvl-t) linear infinite; }
.lvl .lvl-tok-bb { position: absolute; left: -24px; top: -64px; width: 48px; height: 64px; transform-origin: 50% 100%; transform: rotateZ(45deg) rotateX(-58deg); }
.lvl .lvl-coin { position: absolute; left: 9px; bottom: 12px; width: 30px; height: 30px; perspective: 240px;
  animation: lvl-life var(--lvl-t) linear infinite, lvl-bob 1.3s ease-in-out infinite alternate; }
.lvl .lvl-halo { position: absolute; left: -25px; top: -13px; width: 80px; height: 56px;
  background: radial-gradient(closest-side, rgba(203,255,58,.45), rgba(203,255,58,.12) 55%, rgba(203,255,58,0)); }
.lvl .lvl-spin { position: absolute; inset: 0; transform-style: preserve-3d; animation: lvl-spin 2.6s linear infinite; }
.lvl .lvl-spin > i { position: absolute; inset: 0; clip-path: var(--lvl-oct); }
.lvl .lvl-spin > i:nth-child(1) { background: #6E900C; transform: translateZ(-3px); }
.lvl .lvl-spin > i:nth-child(2) { background: #8DB80F; }
.lvl .lvl-spin > i:nth-child(3) { background: linear-gradient(180deg, #E8FF9C, #CBFF3A 52%, #A9DB12); transform: translateZ(3px); }
.lvl .lvl-spin > i:nth-child(3)::after { content: ''; position: absolute; inset: 8px; background: #5E7F08;
  clip-path: polygon(evenodd, 29.3% 0, 70.7% 0, 100% 29.3%, 100% 70.7%, 70.7% 100%, 29.3% 100%, 0 70.7%, 0 29.3%, 29.3% 0, 34.5% 12.5%, 12.5% 34.5%, 12.5% 65.5%, 34.5% 87.5%, 65.5% 87.5%, 87.5% 65.5%, 87.5% 34.5%, 65.5% 12.5%, 34.5% 12.5%); }

/* "level 0" tag: flat HUD chip in the stage, counter-scaled so it stays 1:1 on phones */
.lvl .lvl-tag { position: absolute; left: 312px; top: 630px; translate: -50% 0; scale: calc(1 / var(--k)); transform-origin: 50% 0; }
.lvl .lvl-tag::before { content: ''; position: absolute; left: 50%; bottom: 100%; width: 1px; height: 12px; background: rgba(203,255,58,.6); }
.lvl .lvl-tag .g-chip { gap: 8px; min-height: 26px; padding: 0 10px; }

/* ── lit states: one keyframe per level, shared by the tower block and its track node ── */
.lvl .lvl-on { opacity: 0; animation: lvl-on1 var(--lvl-t) linear infinite; }
.lvl .lvl-b2 .lvl-on, .lvl .lvl-s2 .lvl-on { animation-name: lvl-on2; }
.lvl .lvl-b3 .lvl-on, .lvl .lvl-s3 .lvl-on { animation-name: lvl-on3; }
.lvl .lvl-b4 .lvl-on, .lvl .lvl-s4 .lvl-on { animation-name: lvl-on4; }
.lvl .lvl-b5 .lvl-on, .lvl .lvl-s5 .lvl-on { animation-name: lvl-on5; }

/* hover a level in the track → its block lifts in Z and its brackets light */
.lvl:has(.lvl-s1:hover) .lvl-b1, .lvl:has(.lvl-s2:hover) .lvl-b2, .lvl:has(.lvl-s3:hover) .lvl-b3,
.lvl:has(.lvl-s4:hover) .lvl-b4, .lvl:has(.lvl-s5:hover) .lvl-b5 { translate: 0 0 14px; }
.lvl:has(.lvl-s1:hover) .lvl-b1 .lvl-top::before, .lvl:has(.lvl-s2:hover) .lvl-b2 .lvl-top::before, .lvl:has(.lvl-s3:hover) .lvl-b3 .lvl-top::before,
.lvl:has(.lvl-s4:hover) .lvl-b4 .lvl-top::before, .lvl:has(.lvl-s5:hover) .lvl-b5 .lvl-top::before { --bl: 16px; --bc: #CBFF3A; }

/* ── HUD track ── */
.lvl .lvl-track { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.lvl .lvl-step { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 18px; padding-bottom: 12px; }
.lvl .lvl-step:last-child { padding-bottom: 0; }
.lvl .lvl-step::before, .lvl .lvl-step::after { content: ''; position: absolute; top: 58px; bottom: -2px; pointer-events: none; }
.lvl .lvl-step::before { left: 23.5px; width: 1px; background: var(--wire-hi); }
.lvl .lvl-step::after { left: 22.5px; width: 3px; background: var(--volt); transform-origin: 50% 0; transform: scaleY(0);
  animation: lvl-seg1 var(--lvl-t) linear infinite; }
.lvl .lvl-s2::after { animation-name: lvl-seg2; }
.lvl .lvl-s3::after { animation-name: lvl-seg3; }
.lvl .lvl-s4::after { animation-name: lvl-seg4; }
.lvl .lvl-s5::before, .lvl .lvl-s5::after { display: none; }

.lvl .lvl-node { position: relative; width: 48px; height: 48px; margin-top: 6px; display: grid; place-items: center;
  background: var(--wire-input); clip-path: var(--lvl-oct); transition: background .2s linear; }
.lvl .lvl-node::before, .lvl .lvl-node-lit::before { content: ''; position: absolute; inset: 1.5px; clip-path: var(--lvl-oct); }
.lvl .lvl-node::before { background: var(--deck); }
.lvl .lvl-node b { position: relative; z-index: 1; font: 500 15px/1 var(--f-mono); font-stretch: 87.5%; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.lvl .lvl-node-lit { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; background: var(--volt); clip-path: var(--lvl-oct); }
.lvl .lvl-node-lit::before { background: var(--volt-chip); }
.lvl .lvl-node-lit b { color: var(--volt); }
.lvl .lvl-s1 .lvl-node { background: rgba(203,255,58,.5); }
.lvl .lvl-s5 .lvl-node { background: var(--volt); }
.lvl .lvl-s5 .lvl-node::before { background: var(--volt-chip); }
.lvl .lvl-s5 .lvl-node > b { color: var(--volt); }
.lvl .lvl-s5 .lvl-node-lit::before { background: var(--volt); }
.lvl .lvl-s5 .lvl-node-lit b { color: #06080A; }
.lvl .lvl-step:not(.lvl-s5):hover .lvl-node { background: var(--ink-2); }

.lvl .lvl-card { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 18px 22px; transition: translate .25s var(--ease-hud); }
.lvl .lvl-step:hover .lvl-card { translate: 6px 0; }
.lvl .lvl-t { margin: 0; font: 700 22px/1.08 var(--f-display); font-stretch: 75%; text-transform: uppercase; letter-spacing: .015em; color: var(--ink); }
.lvl .lvl-t-n { color: var(--ink-2); }
.lvl .lvl-p { color: var(--ink-2); max-width: 56ch; }
.lvl .lvl-opens { margin: 2px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.lvl .lvl-chip { white-space: normal; min-height: 26px; padding: 4px 10px 4px 8px; line-height: 1.3; }
.lvl .lvl-s5 .lvl-card { --fill: #0F1609; }
.lvl .lvl-s5 .lvl-card::before { --bc: #CBFF3A; }
.lvl .lvl-s5 .lvl-t-w { color: var(--volt); }

/* ── footer: status + key ── */
.lvl .lvl-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px;
  margin-top: 28px; padding: 24px 0 0 66px; border-top: 1px solid var(--wire); }
.lvl .lvl-now { display: flex; align-items: center; gap: 14px; flex: 1 1 260px; min-width: 0; }
.lvl .lvl-now-t { color: var(--ink-2); }
.lvl .lvl-meter { display: inline-flex; gap: 3px; flex: none; }
.lvl .lvl-meter > i { width: 10px; height: 18px; background: var(--rail);
  clip-path: polygon(3px 0, 100% 0, 100% calc(100% - 3px), calc(100% - 3px) 100%, 0 100%, 0 3px); }
.lvl .lvl-meter > i:first-child { background: var(--volt); animation: lvl-blink 1.6s ease-in-out infinite; }
.lvl .lvl-go svg { transition: translate .16s var(--ease-hud); }
.lvl .lvl-go:hover svg { translate: 3px 0; }

/* ── responsive: the stage scales as one piece; phones stack tower above the track ── */
@media (max-width: 1099px) {
  .lvl { --k: .78; }
  .lvl .lvl-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}
@media (max-width: 720px) {
  .lvl { --k: .6; }
  .lvl .lvl-grid { gap: 16px; }
  .lvl .lvl-step { grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; }
  .lvl .lvl-node { width: 40px; height: 40px; margin-top: 8px; }
  .lvl .lvl-step::before, .lvl .lvl-step::after { top: 52px; bottom: -4px; }
  .lvl .lvl-step::before { left: 19.5px; }
  .lvl .lvl-step::after { left: 18.5px; }
  .lvl .lvl-card { padding: 16px; }
  .lvl .lvl-t { font-size: 20px; }
  .lvl .lvl-foot { padding-left: 0; }
  .lvl .lvl-go { width: 100%; }
}

/* ── keyframes (cycle: rest 0–5% · hops land at 11/24/37/50/63% · top 63–80% · cash-out 80–88% · re-form 88–100%) ── */
@keyframes lvl-cam {
  from { transform: rotateX(59.5deg) rotateZ(-42deg); }
  to { transform: rotateX(56.5deg) rotateZ(-48deg); }
}
@keyframes lvl-tok-xy {
  0%, 5% { transform: translate3d(10px, 126px, 0); }
  11%, 18% { transform: translate3d(10px, -10px, 0); }
  24%, 31% { transform: translate3d(146px, -10px, 0); }
  37%, 44% { transform: translate3d(146px, -146px, 0); }
  50%, 57% { transform: translate3d(282px, -146px, 0); }
  63%, 88% { transform: translate3d(282px, -282px, 0); }
  88.4%, 100% { transform: translate3d(10px, 126px, 0); }
}
@keyframes lvl-tok-z {
  0%, 5% { transform: translateZ(4px); animation-timing-function: cubic-bezier(.25, .6, .45, 1); }
  8% { transform: translateZ(80px); animation-timing-function: cubic-bezier(.55, 0, .75, .4); }
  11%, 18% { transform: translateZ(36px); animation-timing-function: cubic-bezier(.25, .6, .45, 1); }
  21% { transform: translateZ(136px); animation-timing-function: cubic-bezier(.55, 0, .75, .4); }
  24%, 31% { transform: translateZ(92px); animation-timing-function: cubic-bezier(.25, .6, .45, 1); }
  34% { transform: translateZ(192px); animation-timing-function: cubic-bezier(.55, 0, .75, .4); }
  37%, 44% { transform: translateZ(148px); animation-timing-function: cubic-bezier(.25, .6, .45, 1); }
  47% { transform: translateZ(248px); animation-timing-function: cubic-bezier(.55, 0, .75, .4); }
  50%, 57% { transform: translateZ(204px); animation-timing-function: cubic-bezier(.25, .6, .45, 1); }
  60% { transform: translateZ(304px); animation-timing-function: cubic-bezier(.55, 0, .75, .4); }
  63%, 80% { transform: translateZ(260px); animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
  87%, 88% { transform: translateZ(300px); }
  88.4%, 93% { transform: translateZ(48px); animation-timing-function: cubic-bezier(.55, 0, .75, .4); }
  100% { transform: translateZ(4px); }
}
@keyframes lvl-life {
  0%, 80% { opacity: 1; scale: 1; }
  86%, 92% { opacity: 0; scale: .35; }
  98%, 100% { opacity: 1; scale: 1; }
}
@keyframes lvl-bob { from { translate: 0 0; } to { translate: 0 -4px; } }
@keyframes lvl-spin { to { transform: rotateY(360deg); } }
@keyframes lvl-on1 { 0%, 10.6% { opacity: 0; } 11.4%, 86% { opacity: 1; } 89%, 100% { opacity: 0; } }
@keyframes lvl-on2 { 0%, 23.6% { opacity: 0; } 24.4%, 85% { opacity: 1; } 88%, 100% { opacity: 0; } }
@keyframes lvl-on3 { 0%, 36.6% { opacity: 0; } 37.4%, 84% { opacity: 1; } 87%, 100% { opacity: 0; } }
@keyframes lvl-on4 { 0%, 49.6% { opacity: 0; } 50.4%, 83% { opacity: 1; } 86%, 100% { opacity: 0; } }
@keyframes lvl-on5 { 0%, 62.6% { opacity: 0; } 63.4%, 82% { opacity: 1; } 85%, 100% { opacity: 0; } }
@keyframes lvl-ping {
  0% { opacity: .95; scale: 1; }
  9% { opacity: 0; scale: 1.42; }
  9.1%, 100% { opacity: 0; scale: 1; }
}
@keyframes lvl-here {
  0% { opacity: .75; scale: .72; }
  75%, 100% { opacity: 0; scale: 1.3; }
}
@keyframes lvl-beam { 0%, 62% { opacity: .4; } 64% { opacity: 1; } 80% { opacity: .7; } 88%, 100% { opacity: .4; } }
@keyframes lvl-seg1 { 0%, 18% { transform: scaleY(0); opacity: 1; } 24%, 85% { transform: scaleY(1); opacity: 1; } 88% { transform: scaleY(1); opacity: 0; } 88.1%, 100% { transform: scaleY(0); opacity: 1; } }
@keyframes lvl-seg2 { 0%, 31% { transform: scaleY(0); opacity: 1; } 37%, 84% { transform: scaleY(1); opacity: 1; } 87% { transform: scaleY(1); opacity: 0; } 87.1%, 100% { transform: scaleY(0); opacity: 1; } }
@keyframes lvl-seg3 { 0%, 44% { transform: scaleY(0); opacity: 1; } 50%, 83% { transform: scaleY(1); opacity: 1; } 86% { transform: scaleY(1); opacity: 0; } 86.1%, 100% { transform: scaleY(0); opacity: 1; } }
@keyframes lvl-seg4 { 0%, 57% { transform: scaleY(0); opacity: 1; } 63%, 82% { transform: scaleY(1); opacity: 1; } 85% { transform: scaleY(1); opacity: 0; } 85.1%, 100% { transform: scaleY(0); opacity: 1; } }
@keyframes lvl-blink { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

/* ===== offer.css ===== */
/* ══ 04 · Офер (ofr-) — MiniBank as a real CSS 3D flip card.
   Flip = visually hidden checkbox #ofr-flip + two labels pointing at it. No JS. ══ */
.ofr {
  --ofr-bevel: polygon(22px 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%, 0 22px);
  --ofr-oct: polygon(29.3% 0, 70.7% 0, 100% 29.3%, 100% 70.7%, 70.7% 100%, 29.3% 100%, 0 70.7%, 0 29.3%);
}

/* ── layout ── */
.ofr .ofr-grid { display: grid; grid-template-columns: minmax(0, 472px) minmax(0, 1fr); align-items: center; gap: 40px clamp(48px, 6.5vw, 112px); }
.ofr .ofr-cardcol { position: relative; min-width: 0; }

/* the real control: visually hidden, still focusable (Tab + Space) */
.ofr .ofr-flip { position: absolute; top: 24px; left: 24px; width: 1px; height: 1px; margin: 0; padding: 0; border: 0;
  opacity: 0; pointer-events: none; -webkit-appearance: none; appearance: none; clip-path: inset(50%); }

/* ── stage: perspective + lit grid floor ── */
.ofr .ofr-stage { position: relative; padding: 28px 10px 48px; perspective: 1500px; perspective-origin: 50% 38%; }
.ofr .ofr-floor { position: absolute; left: 0; right: 0; bottom: 0; height: 60%; pointer-events: none;
  transform-origin: 50% 100%; transform: rotateX(80deg);
  background:
    radial-gradient(closest-side, rgba(203,255,58,.22), rgba(203,255,58,0) 75%),
    repeating-linear-gradient(0deg, rgba(233,239,234,.08) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(90deg, rgba(233,239,234,.08) 0 1px, transparent 1px 24px);
  -webkit-mask-image: radial-gradient(closest-side, #000 20%, transparent);
          mask-image: radial-gradient(closest-side, #000 20%, transparent); }

/* idle sway: two nested sine-like loops (alternate) = slow Lissajous drift; frame 0 is already a 3D pose */
.ofr .ofr-sway { transform-style: preserve-3d; animation: ofr-swy 14s ease-in-out infinite alternate; }
.ofr .ofr-tilt { transform-style: preserve-3d; animation: ofr-swx 9s ease-in-out -4s infinite alternate; }
.ofr .ofr-stage:hover .ofr-sway, .ofr .ofr-stage:hover .ofr-tilt,
.ofr .ofr-stage:focus-within .ofr-sway, .ofr .ofr-stage:focus-within .ofr-tilt,
.ofr .ofr-flip:focus-visible ~ .ofr-stage .ofr-sway, .ofr .ofr-flip:focus-visible ~ .ofr-stage .ofr-tilt { animation-play-state: paused; }

/* the card: flips with a transition (works with motion off), lifts in Z on hover */
.ofr .ofr-card { position: relative; display: grid; transform-style: preserve-3d;
  transform: translateZ(0) rotateY(0deg); transition: transform .9s cubic-bezier(.66, 0, .2, 1); }
.ofr .ofr-stage:hover .ofr-card { transform: translateZ(26px) rotateY(0deg); }
.ofr .ofr-flip:checked ~ .ofr-stage .ofr-card { transform: translateZ(0) rotateY(180deg); }
.ofr .ofr-flip:checked ~ .ofr-stage:hover .ofr-card { transform: translateZ(26px) rotateY(180deg); }

/* extruded edge: 5 slices between the faces, lime core visible at the rim and mid-flip */
.ofr .ofr-edge { position: absolute; inset: 0; pointer-events: none; background: #0A0E11;
  clip-path: var(--ofr-bevel); transform: translateZ(var(--z, 0px)); }
.ofr .ofr-edge--deep { background: #1A2A0A; }
.ofr .ofr-edge--core { background: var(--volt); }

/* faces: stacked in one grid cell (height = taller face); every layer hides its back side */
.ofr .ofr-face { --d: 1; grid-area: 1 / 1; position: relative; min-width: 0; display: flex; flex-direction: column; gap: 22px;
  padding: 26px 28px 28px; transform-style: preserve-3d; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.ofr .ofr-face > * { -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.ofr .ofr-face--front { transform: translateZ(5px); visibility: visible; transition: visibility 0s linear 0s; }
.ofr .ofr-face--back { transform: rotateY(180deg) translateZ(5px); visibility: hidden; transition: visibility 0s linear .9s; }
/* outgoing face leaves the tab order only after the turn; incoming face is live at once */
.ofr .ofr-flip:checked ~ .ofr-stage .ofr-face--front { visibility: hidden; transition-delay: .9s; }
.ofr .ofr-flip:checked ~ .ofr-stage .ofr-face--back { visibility: visible; transition-delay: 0s; }

/* depth layers */
.ofr .ofr-z1 { transform: translateZ(calc(var(--d) * 22px)); }
.ofr .ofr-z2 { transform: translateZ(calc(var(--d) * 14px)); }
.ofr .ofr-z3 { transform: translateZ(calc(var(--d) * 40px)); }
.ofr .ofr-z4 { transform: translateZ(calc(var(--d) * 58px)); }

/* plate surface (kit bevel plate + volt edge), scanlines + corner light */
.ofr .ofr-plate { --cut: 22px; position: absolute; inset: 0; pointer-events: none; }
.ofr .ofr-plate::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(233,239,234,.03) 0 1px, transparent 1px 3px),
    radial-gradient(90% 55% at 100% 0%, rgba(203,255,58,.11), rgba(203,255,58,0) 70%); }
.ofr .ofr-plate--back::after {
  background:
    repeating-linear-gradient(0deg, rgba(233,239,234,.03) 0 1px, transparent 1px 3px),
    radial-gradient(90% 50% at 0% 100%, rgba(159,194,212,.07), rgba(159,194,212,0) 70%); }
.ofr .ofr-stage:hover .ofr-plate::before,
.ofr .ofr-flip:focus-visible ~ .ofr-stage .ofr-plate::before { --bl: 20px; --bc: #CBFF3A; }

/* holographic sheen sweep (on the surface, under the type) */
.ofr .ofr-holo { position: absolute; inset: 0; overflow: hidden; pointer-events: none; clip-path: var(--ofr-bevel); transform: translateZ(1px); }
.ofr .ofr-holo > i { position: absolute; top: -10%; bottom: -10%; left: 0; width: 46%;
  background: linear-gradient(90deg, rgba(159,194,212,0) 0%, rgba(159,194,212,.07) 28%, rgba(233,239,234,.13) 50%, rgba(203,255,58,.09) 70%, rgba(203,255,58,0) 100%);
  transform: translateX(-110%) skewX(-16deg);
  animation: ofr-sheen 7.5s cubic-bezier(.45, .05, .3, 1) -1.5s infinite; }

/* big outlined number, lowest floating layer */
.ofr .ofr-ghost { position: absolute; top: 74px; right: 24px; pointer-events: none; -webkit-user-select: none; user-select: none;
  font: 800 150px/.8 var(--f-display); font-stretch: 62%; letter-spacing: -.01em;
  color: transparent; -webkit-text-stroke: 1px rgba(203,255,58,.2);
  transform: translateZ(calc(var(--d) * 8px)); }

/* front content */
.ofr .ofr-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ofr .ofr-no { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.ofr .ofr-seal { position: relative; flex: none; width: 46px; height: 46px; display: grid; place-items: center;
  clip-path: var(--ofr-oct);
  background: conic-gradient(from var(--a), #CBFF3A, #9FC2D4 25%, #E9EFEA 40%, #CBFF3A 55%, #A9DB12 75%, #9FC2D4 90%, #CBFF3A);
  animation: g-rim 6s linear infinite; }
.ofr .ofr-seal > i { position: absolute; inset: 2px; clip-path: var(--ofr-oct); background: radial-gradient(circle at 50% 35%, #26340F, #10160A 75%); }
.ofr .ofr-seal svg { position: relative; width: 22px; height: 22px; color: var(--volt); }

.ofr .ofr-name { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.ofr .ofr-brand { margin: 0; font: 800 64px/.86 var(--f-display); font-stretch: 72%; letter-spacing: -.005em; color: var(--ink); }
.ofr .ofr-dom { font-size: 13px; line-height: 1; letter-spacing: .02em; color: var(--ink-2); }

.ofr .ofr-rate { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.ofr .ofr-rate dd { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
.ofr .ofr-per { font: 500 13px/1.2 var(--f-mono); font-stretch: 87.5%; color: var(--ink-2); }

.ofr .ofr-dl { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; border-bottom: 1px solid var(--wire); }
.ofr .ofr-dl > div { min-width: 0; display: flex; flex-direction: column; gap: 6px; padding: 11px 0 12px; border-top: 1px solid var(--wire); }
.ofr .ofr-dl dt { font-size: 11px; }
.ofr .ofr-dl dd { margin: 0; font: 600 15px/20px var(--f-text); color: var(--ink); }

/* flip controls (labels styled as ghost keys) */
.ofr .ofr-turn { align-self: flex-start; margin-top: auto; -webkit-user-select: none; user-select: none; }
.ofr .ofr-turn svg { transition: transform .5s var(--ease-hud); }
.ofr .ofr-turn:hover svg { transform: rotate(-180deg); }
.ofr .ofr-turn--back { margin-top: 0; flex: none; }
.ofr .ofr-turn--back:hover svg { transform: rotate(180deg); }
.ofr .ofr-flip:focus-visible ~ .ofr-stage .ofr-turn { color: var(--ink); background: var(--rail);
  box-shadow: inset 0 0 0 2px #06080A, inset 0 0 0 4px #CBFF3A; }

/* back content */
.ofr .ofr-bk { display: flex; flex-direction: column; gap: 18px; transform: translateZ(calc(var(--d) * 12px)); }
.ofr .ofr-bk__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ofr .ofr-bk__h { margin: 0; display: inline-flex; align-items: center; gap: 10px; }
.ofr .ofr-bk__code { flex: none; width: 84px; height: 14px; opacity: .9;
  background: repeating-linear-gradient(90deg, var(--wire-hi) 0 2px, transparent 2px 4px, var(--wire-hi) 4px 5px, transparent 5px 9px, var(--wire-hi) 9px 12px, transparent 12px 14px); }

.ofr .ofr-path { position: relative; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ofr .ofr-path::before { content: ''; position: absolute; left: 11px; top: 12px; bottom: 12px; width: 1px; background: var(--wire-input); }
.ofr .ofr-path::after { content: ''; position: absolute; left: 10px; top: 12px; bottom: 12px; width: 3px; pointer-events: none;
  background: linear-gradient(rgba(203,255,58,0), #CBFF3A, rgba(203,255,58,0)) no-repeat 0 0 / 3px 40px;
  animation: ofr-run 3.8s linear -1.7s infinite; }
.ofr .ofr-path li { position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: center; gap: 12px;
  min-height: 30px; font: 400 14px/20px var(--f-text); color: var(--ink-2); }
.ofr .ofr-path b { font-weight: 700; color: var(--ink); }
.ofr .ofr-path em { font-style: normal; color: var(--volt); }
.ofr .ofr-path__n { position: relative; z-index: 1; width: 24px; height: 24px; display: grid; place-items: center;
  font: 600 11px/1 var(--f-mono); font-stretch: 87.5%; font-style: normal; color: var(--ink-2);
  background: var(--wire-input); clip-path: var(--ofr-oct); }
.ofr .ofr-path__n::before { content: ''; position: absolute; inset: 1px; z-index: -1; background: var(--rail); clip-path: var(--ofr-oct); }
.ofr .ofr-path__key .ofr-path__n { color: #06080A; background: var(--volt); }
.ofr .ofr-path__key .ofr-path__n::before { display: none; }
.ofr .ofr-path__key::before { content: ''; position: absolute; left: 0; top: 50%; width: 24px; height: 24px; margin-top: -12px;
  background: rgba(203,255,58,.4); clip-path: var(--ofr-oct); animation: ofr-ping 2.6s ease-out infinite; }

.ofr .ofr-rules { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.ofr .ofr-rule { display: flex; flex-direction: column; gap: 6px; padding-top: 12px; border-top: 1px solid var(--wire); }
.ofr .ofr-rule dt { display: inline-flex; align-items: center; gap: 8px; }
.ofr .ofr-rule dt svg { width: 16px; height: 16px; flex: none; }
.ofr .ofr-rule dd { margin: 0; color: var(--ink-2); }
.ofr .ofr-rule--ok dt { color: var(--volt); }
.ofr .ofr-rule--no dt { color: var(--bad); }

.ofr .ofr-bk__act { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; transform: translateZ(calc(var(--d) * 20px)); }
.ofr .ofr-bk__go { flex: 1 1 auto; }

/* ── side column ── */
.ofr .ofr-side { min-width: 0; max-width: 600px; display: flex; flex-direction: column; align-items: flex-start; gap: 28px; }
.ofr .ofr-lede strong { font-weight: 500; color: var(--ink); }
.ofr .ofr-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ofr .ofr-facts { list-style: none; margin: 0; padding: 0; width: 100%; border-top: 1px solid var(--wire); }
.ofr .ofr-facts li { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 16px;
  min-height: 64px; padding: 12px 0; border-bottom: 1px solid var(--wire); }
.ofr .ofr-facts li::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; pointer-events: none;
  background: var(--volt); transform: scaleX(0); transform-origin: 0 50%; transition: transform .5s var(--ease-hud); }
.ofr .ofr-facts li:hover::after { transform: scaleX(1); }
.ofr .ofr-facts .ofr-facts__no::after { background: var(--bad); }
.ofr .ofr-ico { width: 40px; height: 40px; display: grid; place-items: center; color: var(--ink-2); background: var(--plate);
  box-shadow: inset 0 0 0 1px var(--wire-hi);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  transition: color .16s linear, background-color .16s linear, transform .4s var(--ease-hud); }
.ofr .ofr-ico svg { width: 20px; height: 20px; }
.ofr .ofr-facts li:hover .ofr-ico { color: var(--volt); background-color: var(--volt-chip); transform: translateX(3px); }
.ofr .ofr-facts .ofr-facts__no .ofr-ico,
.ofr .ofr-facts .ofr-facts__no:hover .ofr-ico { color: var(--bad); background-color: var(--bad-chip); }
.ofr .ofr-hl { font-family: var(--f-mono); font-stretch: 87.5%; font-weight: 500; color: var(--volt); white-space: nowrap; }
.ofr .ofr-go { margin-top: 4px; }
.ofr .ofr-go svg { transition: transform .3s var(--ease-hud); }
.ofr .ofr-go:hover svg { transform: translateX(4px); }

/* ── offers 002 / 003 ── */
.ofr .ofr-more { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 24px;
  margin-top: clamp(56px, 6vw, 96px); perspective: 1400px; }
.ofr .ofr-mini { min-width: 0; display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr); align-items: center; gap: 24px;
  padding: 24px; transform: translate3d(0, 0, 0); transition: transform .5s var(--ease-hud); }
.ofr .ofr-mini:hover { transform: translate3d(0, -4px, 16px); }
.ofr .ofr-mini__logo { position: relative; overflow: hidden;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }
.ofr .ofr-mini__logo img { display: block; width: 100%; height: auto; }
.ofr .ofr-mini__logo::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, rgba(233,239,234,0) 35%, rgba(233,239,234,.16) 50%, rgba(233,239,234,0) 65%);
  transform: translateX(-100%); transition: transform .8s var(--ease-hud); }
.ofr .ofr-mini:hover .ofr-mini__logo::after { transform: translateX(100%); }
.ofr .ofr-mini__body { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.ofr .ofr-mini__no { color: var(--ink-2); }
.ofr .ofr-mini__name { color: var(--ink); }
.ofr .ofr-mini__note { max-width: 46ch; }
.ofr .ofr-mini__rate { margin: 4px 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }

/* ── keyframes ── */
@keyframes ofr-swy { from { transform: rotateY(15deg); } to { transform: rotateY(-7deg); } }
@keyframes ofr-swx { from { transform: rotateX(7deg); } to { transform: rotateX(-2deg); } }
@keyframes ofr-swy-s { from { transform: rotateY(9deg); } to { transform: rotateY(-9deg); } }
@keyframes ofr-swx-s { from { transform: rotateX(5deg); } to { transform: rotateX(-2deg); } }
@keyframes ofr-sheen { 0% { transform: translateX(-110%) skewX(-16deg); } 46%, 100% { transform: translateX(330%) skewX(-16deg); } }
@keyframes ofr-run { from { background-position: 0 -40px; } to { background-position: 0 calc(100% + 40px); } }
@keyframes ofr-ping { 0% { transform: scale(1); opacity: .9; } 70%, 100% { transform: scale(2.1); opacity: 0; } }

/* ── responsive ── */
@media (max-width: 1099px) {
  .ofr .ofr-grid { grid-template-columns: minmax(0, 410px) minmax(0, 1fr); column-gap: 48px; }
  .ofr .ofr-brand { font-size: 56px; }
  .ofr .ofr-ghost { font-size: 130px; }
}
@media (max-width: 880px) {
  .ofr .ofr-grid { grid-template-columns: minmax(0, 1fr); }
  .ofr .ofr-cardcol { width: 100%; max-width: 470px; justify-self: center; }
  .ofr .ofr-side { max-width: none; }
}
@media (max-width: 720px) {
  .ofr .ofr-cardcol { max-width: none; }
  .ofr .ofr-stage { padding: 12px 0 36px; perspective: 1100px; }
  .ofr .ofr-sway { animation-name: ofr-swy-s; }
  .ofr .ofr-tilt { animation-name: ofr-swx-s; }
  .ofr .ofr-face { --d: .5; gap: 18px; padding: 22px 20px 22px; }
  .ofr .ofr-brand { font-size: 48px; }
  .ofr .ofr-ghost { top: 64px; right: 18px; font-size: 104px; }
  .ofr .ofr-side { gap: 24px; }
  .ofr .ofr-facts li { grid-template-columns: 36px minmax(0, 1fr); gap: 14px; }
  .ofr .ofr-ico { width: 36px; height: 36px; }
  .ofr .ofr-go { width: 100%; padding: 0 16px; font-size: 16px; white-space: normal; text-align: center; }
  .ofr .ofr-bk__go { min-width: 0; white-space: normal; text-align: center; }
  .ofr .ofr-mini { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 20px; }
  .ofr .ofr-mini__logo { width: 100%; max-width: 240px; }
}

/* ===== rating.css ===== */
/* ══ 05 · Рейтинг (lg-) ═══════════════════════════════════════════════════════════════════════
   The 3D moment: a CSS-3D podium (pillars 2·1·3 built from real faces: front, 45° bevel, top,
   side) standing on a HUD floor, swaying slowly. The neon crown bobs, turns and flickers above
   «1 місце» (screen blend) inside a faint orbit; its flicker is mirrored by the volt light on the
   top faces. In front: a ghost «Без призу» slab and a dashed «Ваше місце» pad with a floor ping.
   No JS. Every loop starts mid-cycle (negative delays), so a paused frame is complete. ══ */

.lg { position: relative; }

/* ── layout: head + rules left, podium + visibility right ── */
.lg-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(32px, 4.4vw, 64px); align-items: start; }
.lg-a, .lg-b { display: flex; flex-direction: column; min-width: 0; }
.lg-b { gap: 36px; }

/* ── rules: hairline rows with an icon key; a volt token runs the hairline on hover ── */
.lg-rules { list-style: none; margin: 0; padding: 0; }
.lg-rule { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 20px; padding: 24px 0; border-top: 1px solid var(--wire); }
.lg-rule:last-child { border-bottom: 1px solid var(--wire); }
.lg-rule::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, var(--volt), rgba(203,255,58,0) 72%);
  transform: scaleX(0); transform-origin: 0 50%; transition: transform .6s var(--ease-hud); }
.lg-rule:hover::before { transform: scaleX(1); }
.lg-rule__side { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.lg-rule__ico.g-plate { --cut: 8px; width: 44px; height: 44px; display: grid; place-items: center; color: var(--volt); transition: translate .3s var(--ease-hud); }
.lg-rule__ico svg { width: 20px; height: 20px; }
.lg-rule:hover .lg-rule__ico { --edge: var(--volt); translate: 0 -2px; }
.lg-rule__ix { font: 600 11px/1 var(--f-mono); font-stretch: 87.5%; letter-spacing: .1em; color: var(--ink-3); }
.lg-rule__c { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.lg-k { font-weight: 600; color: var(--ink); }

/* ── quarters: 4-segment HUD bar (3 month ticks each) + a running rail that loops back ── */
.lg-q { display: flex; flex-direction: column; gap: 8px; }
.lg-q__segs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.lg-q__seg.g-plate { --cut: 8px; display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 10px 12px 20px; transition: translate .3s var(--ease-hud); }
.lg-q__seg::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 8px; height: 5px; pointer-events: none;
  background: linear-gradient(90deg, var(--wire-input) 0 1px, transparent 1px) 0 0 / calc((100% - 1px) / 3) 100% repeat-x; }
.lg-q__seg:hover { --edge: var(--volt); translate: 0 -2px; }
.lg-q__ix { font: 600 11px/1 var(--f-mono); font-stretch: 87.5%; letter-spacing: .1em; color: var(--ink-3); }
.lg-q__m { display: flex; flex-direction: column; font: 500 13px/17px var(--f-text); color: var(--ink-2); }
.lg-q__rail { display: flex; align-items: center; gap: 10px; height: 16px; }
.lg-q__run { flex: 1; height: 2px; background: linear-gradient(90deg, rgba(203,255,58,.55) 0 6px, transparent 6px) 0 0 / 14px 2px repeat-x;
  animation: lg-run 1.6s linear infinite; }
.lg-q__loop { flex: none; width: 16px; height: 16px; color: var(--volt); }

/* ── stage: a fixed 760×540 canvas, centred and clipped; scaled down on small screens ── */
.lg-fig { margin: 0; }
.lg-stage { position: relative; height: 540px; overflow: hidden; overflow: clip; isolation: isolate; }
.lg-stage.g-brackets { --c: rgba(203,255,58,.55); --l: 18px; }
.lg-stage::after { content: ""; position: absolute; left: 32px; right: 32px; bottom: 12px; height: 7px; pointer-events: none;
  background:
    linear-gradient(90deg, var(--wire-hi) 0 1px, transparent 1px) 0 100% / 12px 4px repeat-x,
    linear-gradient(90deg, var(--wire-input) 0 1px, transparent 1px) 0 100% / 60px 7px repeat-x; }
.lg-view { --w: 150px; --d: 120px; --b: 14px; --zc: -20px;
  position: absolute; left: 50%; top: 0; width: 760px; height: 540px; margin-left: -380px;
  perspective: 1200px; perspective-origin: 50% 30%; transform-origin: 50% 0; }
.lg-rig { position: absolute; left: 380px; top: 404px; width: 0; height: 0;
  transform: rotateX(-16deg) rotateY(-19deg);
  animation: lg-sway 18s ease-in-out -9s infinite alternate; }

/* floor: grid + baked contact shadows under each block + a faint volt pool, faded at the rim */
.lg-floor { position: absolute; left: -480px; top: -280px; width: 960px; height: 560px; pointer-events: none;
  transform: rotateX(90deg);
  background:
    radial-gradient(112px 92px at 316px 260px, rgba(0,0,0,.7) 45%, rgba(0,0,0,0)),
    radial-gradient(112px 92px at 480px 260px, rgba(0,0,0,.75) 45%, rgba(0,0,0,0)),
    radial-gradient(112px 92px at 644px 260px, rgba(0,0,0,.7) 45%, rgba(0,0,0,0)),
    radial-gradient(124px 62px at 432px 430px, rgba(0,0,0,.55) 45%, rgba(0,0,0,0)),
    radial-gradient(124px 62px at 622px 430px, rgba(0,0,0,.55) 45%, rgba(0,0,0,0)),
    radial-gradient(300px 190px at 480px 280px, rgba(203,255,58,.1), rgba(203,255,58,0)),
    linear-gradient(90deg, rgba(58,71,80,.6) 0 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(0deg, rgba(58,71,80,.6) 0 1px, transparent 1px) 0 0 / 48px 48px;
  -webkit-mask-image: radial-gradient(closest-side, #000 38%, transparent);
  mask-image: radial-gradient(closest-side, #000 38%, transparent); }

/* ── blocks: real faces; --x/--h per block, --w/--d/--b/--zc from the view (pads override) ── */
.lg-blk { --bv1: .14; --bv2: .38; --la: .14; --lx: 50%; --n: 120px;
  position: absolute; left: calc(var(--x) - var(--w) / 2); bottom: 0; width: var(--w); height: var(--h);
  transform: translateZ(var(--zc)); transition: translate .45s var(--ease-hud); }
.lg-blk:hover { translate: 0 -8px; }
.lg-blk--1 { --bv1: .5; --bv2: .95; --la: .44; --n: 168px; }
.lg-blk--2 { --la: .2; --lx: 86%; --n: 132px; }
.lg-blk--3 { --la: .16; --lx: 14%; --n: 112px; }
.lg-blk--pad { --w: 170px; --d: 70px; --b: 0px; --zc: 150px; }

.lg-fc { position: absolute; display: block; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.lg-fc--front { left: 0; bottom: 0; width: 100%; height: calc(100% - var(--b));
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px; overflow: hidden;
  transform: translateZ(calc(var(--d) / 2));
  background:
    repeating-linear-gradient(0deg, rgba(233,239,234,.024) 0 1px, transparent 1px 4px),
    linear-gradient(180deg, #172025 0%, #0E1316 55%, #0A0D10 100%);
  box-shadow: inset 0 0 0 1px var(--wire), inset 0 1px 0 var(--wire-hi); }
/* 45° bevel between front and top: the edge that catches the volt light (+ a glint that runs along it) */
.lg-fc--bev { left: 0; bottom: calc(100% - var(--b)); width: 100%; height: calc(var(--b) * 1.4142);
  transform-origin: 50% 100%; transform: translateZ(calc(var(--d) / 2)) rotateX(45deg);
  background: linear-gradient(90deg, rgba(203,255,58,var(--bv1)), rgba(203,255,58,var(--bv2)) 50%, rgba(203,255,58,var(--bv1))); }
.lg-fc--bev::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(255,255,255,0) 44%, rgba(255,255,255,.7) 50%, rgba(255,255,255,0) 56%) 120% 0 / 250% 100% no-repeat;
  animation: lg-glint 7s var(--ease-hud) infinite; }
.lg-blk--2 .lg-fc--bev::after { animation-delay: -2.4s; }
.lg-blk--3 .lg-fc--bev::after { animation-delay: -4.6s; }
.lg-fc--top { left: 0; bottom: 100%; width: 100%; height: calc(var(--d) - var(--b));
  transform-origin: 50% 100%; transform: translateZ(calc(var(--d) / 2 - var(--b))) rotateX(90deg);
  background: linear-gradient(0deg, #1B2427, #10161A);
  box-shadow: inset 0 0 0 1px var(--wire-hi); }
/* crown light on the top faces — same flicker timing as the crown */
.lg-fc--top::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 78% 100% at var(--lx) 62%, rgba(203,255,58,var(--la)), rgba(203,255,58,0) 72%);
  animation: lg-flick 5.3s linear -2.1s infinite; }
.lg-fc--side { left: 100%; bottom: 0; width: var(--d); height: 100%;
  transform-origin: 0 50%; transform: translateZ(calc(var(--d) / 2)) rotateY(90deg);
  clip-path: polygon(var(--b) 0, 100% 0, 100% 100%, 0 100%, 0 var(--b));
  background:
    repeating-linear-gradient(0deg, rgba(233,239,234,.035) 0 1px, transparent 1px 10px),
    linear-gradient(180deg, #0F1519, #06080A);
  box-shadow: inset 1px 0 0 var(--wire-hi); }

.lg-blk--1 .lg-fc--front {
  background:
    repeating-linear-gradient(0deg, rgba(233,239,234,.024) 0 1px, transparent 1px 4px),
    linear-gradient(180deg, #1A2617 0%, #0F1513 50%, #0A0D10 100%);
  box-shadow: inset 0 0 0 1px rgba(203,255,58,.26), inset 0 1px 0 rgba(203,255,58,.75); }
.lg-blk--1 .lg-fc--top { box-shadow: inset 0 0 0 1px rgba(203,255,58,.4); }
.lg-blk--1 .lg-fc--side { box-shadow: inset 1px 0 0 rgba(203,255,58,.3); }

/* front-face content: place tag, masked Web ID, a big outlined numeral cropped by the face */
.lg-tag { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.lg-blk--1 .lg-tag { color: var(--volt); }
.lg-blk--2 .g-oct, .lg-blk--3 .g-oct { background: var(--ink-3); }
.lg-id { position: relative; z-index: 1; font: 400 12px/1 var(--f-mono); font-stretch: 87.5%; letter-spacing: .04em; color: var(--ink-2); white-space: nowrap; }
.lg-num { position: absolute; right: 10px; bottom: calc(var(--n) * -.14); pointer-events: none;
  font: 800 var(--n)/.8 var(--f-display); font-stretch: 62%;
  color: transparent; -webkit-text-stroke: 1px rgba(170,182,176,.3); }
.lg-blk--1 .lg-num { -webkit-text-stroke: 1.5px rgba(203,255,58,.55); }

/* pads: ghost «Без призу» slab and the dashed «Ваше місце» pad (marching edges + floor ping) */
.lg-blk--pad .lg-fc--front { align-items: center; justify-content: center; padding: 0 12px; }
.lg-blk--pad .lg-fc--top::after { display: none; }
.lg-blk--ghost .lg-fc--front, .lg-blk--ghost .lg-fc--top, .lg-blk--ghost .lg-fc--side {
  background: rgba(13,17,20,.55); box-shadow: inset 0 0 0 1px rgba(159,194,212,.3); }
.lg-blk--ghost .lg-fc--top { background: rgba(159,194,212,.05); }
.lg-blk--ghost .lg-tag { color: var(--ink-3); }
.lg-blk--you .lg-fc--front { background: rgba(36,51,16,.6); border: 1px dashed rgba(203,255,58,.8); box-shadow: none; }
.lg-blk--you .lg-fc--side { background: rgba(20,28,10,.7); border: 1px dashed rgba(203,255,58,.4); box-shadow: none; }
.lg-blk--you .lg-fc--top { box-shadow: none;
  background:
    linear-gradient(90deg, var(--volt) 0 6px, transparent 6px) 0 0 / 12px 1px repeat-x,
    linear-gradient(90deg, var(--volt) 0 6px, transparent 6px) 0 100% / 12px 1px repeat-x,
    linear-gradient(0deg, var(--volt) 0 6px, transparent 6px) 0 0 / 1px 12px repeat-y,
    linear-gradient(0deg, var(--volt) 0 6px, transparent 6px) 100% 0 / 1px 12px repeat-y;
  background-color: rgba(36,51,16,.5);
  animation: lg-ants 1.4s linear infinite; }
.lg-blk--you .lg-tag { color: var(--volt); }
.lg-ping { position: absolute; left: -10px; top: calc(100% - var(--d) / 2 - 10px); width: calc(100% + 20px); height: calc(var(--d) + 20px);
  box-shadow: inset 0 0 0 1px rgba(203,255,58,.75); pointer-events: none;
  transform: translateY(-1px) rotateX(90deg);
  animation: lg-ping 2.8s var(--ease-money) infinite; }

/* ── halo: neon crown + orbit, a flat overlay screened onto the podium ── */
.lg-halo { position: absolute; left: 386px; top: 94px; width: 0; height: 0; pointer-events: none; mix-blend-mode: screen; }
.lg-orbit { position: absolute; left: -130px; top: -104px; width: 260px; height: 260px; border-radius: 50%;
  box-shadow: inset 0 0 0 2px rgba(203,255,58,.2);
  transform: perspective(700px) rotateX(76deg); }
.lg-orbit__spin { position: absolute; inset: 0; border-radius: 50%; animation: g-spin 16s linear infinite; }
.lg-orbit__spin::before { content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(rgba(203,255,58,0) 0 58%, rgba(203,255,58,.85) 99.4%, rgba(203,255,58,0) 99.4%);
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
  mask: radial-gradient(closest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px)); }
.lg-orbit__spin::after { content: ""; position: absolute; left: calc(50% - 7px); top: -6px; width: 14px; height: 14px; border-radius: 50%;
  background: var(--volt); box-shadow: 0 0 14px 3px rgba(203,255,58,.55); }
.lg-crown { position: absolute; left: -55px; top: -47px; width: 109px; height: 94px;
  animation: lg-bob 6.4s ease-in-out -1.6s infinite; }
.lg-crown::before { content: ""; position: absolute; left: -40px; right: -40px; top: -26px; bottom: -34px;
  background: radial-gradient(closest-side, rgba(203,255,58,.16), rgba(203,255,58,0));
  animation: lg-flick 5.3s linear -2.1s infinite; }
.lg-crown__turn { position: relative; width: 100%; height: 100%; transition: translate .45s var(--ease-hud);
  animation: lg-turn 12s ease-in-out -6s infinite alternate; }
.lg-crown__img { display: block; width: 100%; height: 100%; animation: lg-flick 5.3s linear -2.1s infinite; }
.lg-view:has(.lg-blk--1:hover) .lg-crown__turn { translate: 0 -8px; }

/* ── caption ── */
.lg-cap { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; max-width: 600px; }
.lg-cap .lg-cap__t { display: inline-flex; align-items: center; gap: 10px; color: var(--volt); }
.lg-cap__pad { flex: none; width: 16px; height: 10px; border: 1px dashed var(--volt); }

/* ── visibility matrix ── */
.lg-vis.g-plate { display: flex; flex-direction: column; gap: 24px; padding: 28px 30px 30px; }
.lg-vis__lead { display: flex; align-items: flex-start; gap: 16px; }
.lg-vis__ico { flex: none; width: 40px; height: 40px; display: grid; place-items: center; color: var(--volt); background: var(--volt-chip);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); }
.lg-vis__ico svg { width: 20px; height: 20px; }
.lg-vis .lg-vis__claim { padding-top: 5px; color: var(--ink); }
.lg-vis__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 32px; }
.lg-vis__col { min-width: 0; }
.lg-vis .lg-vis__h { display: flex; align-items: center; gap: 10px; min-height: 28px; margin: 0 0 6px; color: var(--volt); }
.lg-vis .lg-vis__col--hide .lg-vis__h { color: var(--frost); }
.lg-vis__h svg { width: 18px; height: 18px; flex: none; }
.lg-vis__list { list-style: none; margin: 0; padding: 0; }
.lg-vis__it { display: flex; align-items: center; gap: 12px; min-height: 44px; border-top: 1px solid var(--wire); font: 500 16px/22px var(--f-text); color: var(--ink); }
.lg-vis__it svg { width: 16px; height: 16px; flex: none; color: var(--volt); }
.lg-vis__col--hide .lg-vis__it { color: var(--ink-2); }
.lg-vis__col--hide .lg-vis__it svg { color: var(--frost); }
.lg-vis__redact { flex: none; margin-left: auto; width: 56px; height: 10px;
  background: linear-gradient(90deg, #1E3340 0 4px, var(--frost-chip) 4px) 0 0 / 8px 100% repeat-x;
  clip-path: polygon(3px 0, 100% 0, 100% calc(100% - 3px), calc(100% - 3px) 100%, 0 100%, 0 3px);
  animation: lg-redact 2s linear infinite; }

/* ── keyframes ── */
@keyframes lg-sway { from { transform: rotateX(-16deg) rotateY(-26deg); } to { transform: rotateX(-16deg) rotateY(-12deg); } }
@keyframes lg-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
@keyframes lg-turn { from { transform: perspective(420px) rotateY(-26deg); } to { transform: perspective(420px) rotateY(26deg); } }
@keyframes lg-flick { 0% { opacity: .82; } 18% { opacity: .96; } 36% { opacity: .78; } 55% { opacity: 1; } 57% { opacity: .3; } 58% { opacity: .95; } 59.5% { opacity: .4; } 61% { opacity: 1; } 78% { opacity: .88; } 100% { opacity: .82; } }
@keyframes lg-glint { 0% { background-position: 120% 0; } 34%, 100% { background-position: -20% 0; } }
@keyframes lg-ants { to { background-position: 12px 0, -12px 100%, 0 -12px, 100% 12px; } }
@keyframes lg-ping { from { transform: translateY(-1px) rotateX(90deg) scale(1); opacity: .9; } to { transform: translateY(-1px) rotateX(90deg) scale(1.3); opacity: 0; } }
@keyframes lg-run { to { background-position: 14px 0; } }
@keyframes lg-redact { to { background-position: 8px 0; } }

/* ── responsive ── */
@media (min-width: 1100px) and (max-width: 1240px) {
  .lg-stage { height: 486px; }
  .lg-view { scale: .9; }
}
@media (max-width: 1099px) {
  .lg-grid { grid-template-columns: minmax(0, 1fr); }
  .lg-a, .lg-b { display: contents; }
  .lg-head { order: 1; }
  .lg-fig { order: 2; margin-bottom: 48px; }
  .lg-rules { order: 3; }
  .lg-vis { order: 4; margin-top: 48px; }
}
@media (max-width: 720px) {
  .lg-stage { height: 336px; }
  .lg-view { scale: .62; }
  .lg-fc .lg-tag { font-size: 17px; }
  .lg-fc .lg-id { font-size: 16px; }
  .lg-fc--front { gap: 10px; padding: 14px 12px; }
  .lg-rule { grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; padding: 20px 0; }
  .lg-rule__ico.g-plate { width: 40px; height: 40px; }
  .lg-q__segs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lg-vis.g-plate { padding: 22px 18px 24px; }
  .lg-vis__cols { grid-template-columns: minmax(0, 1fr); }
  .lg-vis .lg-vis__claim { font-size: 19px; line-height: 26px; }
}

/* ===== rules.css ===== */
/* ══ 06 · Правила — root .rul, prefix rul- ══
   3D moment: a scanner plane ("firewall") standing across a floating track, seen three-quarter.
   Six tokens fly in depth along the track on ONE shared cycle (--rul-t). Lime tokens pass through
   the plane and continue; MOTIV / BOT / SRC≠ hit it, flash, bounce and drop through the slot.
   World axes inside .rul-rig: X = travel direction, Y = down, Z = across the track.
   Phase map (per token): 0% = mid-approach (always visible) · 25% = at the plane · 70% = respawn far. */

.rul { --rul-t: 9.6s; }

/* ── layout ── */
.rul-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 3vw, 48px); align-items: center; }

/* ── scene shell ── */
.rul-scene { position: relative; height: 540px; overflow: clip; }
.rul-scene.g-brackets { --c: rgba(203,255,58,.42); --l: 18px; --t: 1.5px; }
.rul-view {
  position: absolute; left: 50%; top: 50%; width: 720px; height: 500px; margin: -250px 0 0 -360px;
  perspective: 1000px; perspective-origin: 43% 55%;
}
.rul-rig {
  position: absolute; left: 43%; top: 55%; width: 0; height: 0;
  transform-style: preserve-3d; transform: rotateX(-16deg) rotateY(-46deg);
}
.rul-rig > i, .rul-rig > div { position: absolute; display: block; }

/* ground grid, far below the floating track */
.rul-ground {
  left: -520px; top: -320px; width: 1040px; height: 640px;
  transform: translateY(150px) rotateX(90deg);
  background:
    repeating-linear-gradient(90deg, rgba(233,239,234,.07) 0 1px, transparent 1px 52px),
    repeating-linear-gradient(0deg, rgba(233,239,234,.07) 0 1px, transparent 1px 52px);
  -webkit-mask-image: radial-gradient(closest-side, #000 15%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 15%, transparent 100%);
}

/* track: approach half (with the drop slot right before the plane) + verified half */
.rul-lane { top: -50px; height: 100px; transform: translateY(34px) rotateX(90deg); }
.rul-lane::before { content: ''; position: absolute; inset: 0; animation: rul-flow var(--rul-t) linear infinite; }
.rul-lane--in {
  left: -560px; width: 560px;
  background:
    linear-gradient(90deg, transparent 456px, rgba(255,82,104,.85) 456px 458px, transparent 458px 544px, rgba(255,82,104,.85) 544px 546px, transparent 546px),
    linear-gradient(#3A4750, #3A4750) 0 0 / 100% 1px no-repeat,
    linear-gradient(#3A4750, #3A4750) 0 100% / 100% 1px no-repeat,
    rgba(13,17,20,.88);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 170px, #000 458px, transparent 458px 544px, #000 544px);
  mask-image: linear-gradient(90deg, transparent 0, #000 170px, #000 458px, transparent 458px 544px, #000 544px);
}
.rul-lane--in::before {
  background:
    linear-gradient(90deg, rgba(233,239,234,.24) 0 12px, transparent 12px) 0 50% / 36px 2px repeat-x,
    linear-gradient(90deg, rgba(233,239,234,.07) 0 1px, transparent 1px) 0 0 / 36px 100% repeat-x;
}
.rul-lane--out {
  left: 0; width: 380px;
  background:
    linear-gradient(rgba(203,255,58,.45), rgba(203,255,58,.45)) 0 0 / 100% 1px no-repeat,
    linear-gradient(rgba(203,255,58,.45), rgba(203,255,58,.45)) 0 100% / 100% 1px no-repeat,
    rgba(36,51,16,.6);
  -webkit-mask-image: linear-gradient(90deg, #000 50%, transparent);
  mask-image: linear-gradient(90deg, #000 50%, transparent);
}
.rul-lane--out::before {
  background:
    linear-gradient(90deg, rgba(203,255,58,.7) 0 12px, transparent 12px) 0 50% / 36px 2px repeat-x,
    linear-gradient(90deg, rgba(203,255,58,.09) 0 1px, transparent 1px) 0 0 / 36px 100% repeat-x;
}

/* ── the scanner plane: 240×260 frame in the YZ plane at x = 0, extruded by 4 rim layers ── */
.rul-gate {
  left: -120px; top: -226px; width: 240px; height: 260px;
  transform: rotateY(90deg); transform-style: preserve-3d;
}
.rul-gate__rim, .rul-gate__face { position: absolute; inset: 0; }
.rul-gate__rim {
  background: var(--rc, #141B20); transform: translateZ(var(--z, -4px));
  clip-path: polygon(evenodd, 24px 0, 240px 0, 240px 236px, 216px 260px, 0 260px, 0 24px, 24px 0,
    32px 30px, 226px 30px, 226px 228px, 208px 246px, 14px 246px, 14px 48px, 32px 30px, 24px 0);
}
.rul-gate__field {
  position: absolute; left: 14px; right: 14px; top: 30px; bottom: 14px; overflow: hidden;
  background: repeating-linear-gradient(0deg, rgba(233,239,234,.05) 0 1px, transparent 1px 3px), rgba(203,255,58,.035);
}
/* seamless sweep: 216px pattern period = field height, element is two periods tall */
.rul-gate__sweep {
  position: absolute; left: 0; right: 0; top: -216px; height: 432px;
  background: linear-gradient(180deg, transparent 0 140px, rgba(203,255,58,.09) 204px, rgba(203,255,58,.85) 214px 216px) 0 0 / 100% 216px repeat-y;
  animation: rul-sweep 3.6s linear infinite;
}
/* transient verdict flashes on the field (rest state = off), timed to the token cycle */
.rul-gate__fx { position: absolute; inset: 0; opacity: 0; animation: rul-gok var(--rul-t) linear infinite; }
.rul-gate__fx--ok { background: rgba(203,255,58,.08); box-shadow: inset 0 0 44px -8px rgba(203,255,58,.7); }
.rul-gate__fx--warn { background: rgba(255,138,52,.1); box-shadow: inset 0 0 44px -8px rgba(255,138,52,.8); animation-name: rul-gwarn; }
.rul-gate__fx--bad { background: rgba(255,82,104,.1); box-shadow: inset 0 0 44px -8px rgba(255,82,104,.8); animation-name: rul-gbad; }
.rul-gate__brk { position: absolute; left: 24px; right: 24px; top: 40px; bottom: 24px; }
.rul-gate__brk.g-brackets { --c: rgba(203,255,58,.8); --l: 14px; --t: 1.5px; }
.rul-gate__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.rul-gate__band { fill: #121A1F; }
.rul-gate__edge { fill: none; stroke: #CBFF3A; stroke-width: 1.5; }
.rul-gate__lip { fill: none; stroke: #3A4750; stroke-width: 1; }
.rul-gate__ticks { fill: none; stroke: #5C6B65; stroke-width: 6; stroke-dasharray: 1 7; }
.rul-gate__hd { fill: none; stroke: #3A4750; stroke-width: 4; stroke-dasharray: 6 3; }
.rul-gate__lbl {
  position: absolute; left: 32px; top: 10px; display: flex; align-items: center; gap: 7px; white-space: nowrap;
  font: 600 10px/1 var(--f-mono); font-stretch: 87.5%; letter-spacing: .16em; color: var(--ink-2);
}
.rul-gate__lbl .g-oct { width: 6px; height: 6px; animation: g-chase 2.4s linear infinite; }

/* ── tokens: 64×40 cards parallel to the plane (never intersect it), stagger by negative delay ── */
.rul-tok {
  left: -32px; top: -20px; width: 64px; height: 40px;
  --c: var(--volt); --f: var(--volt-chip);
  animation: rul-tp var(--rul-t) linear infinite; animation-delay: var(--d, 0s);
}
.rul-tok--ok { --c: var(--volt); --f: var(--volt-chip); }
.rul-tok--motiv, .rul-tok--src { --c: var(--warn); --f: var(--warn-chip); animation-name: rul-tb; }
.rul-tok--bot { --c: var(--bad); --f: var(--bad-chip); animation-name: rul-tb; }
.rul-tok > b {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; isolation: isolate;
  font: 600 11px/1 var(--f-mono); font-stretch: 87.5%; letter-spacing: .08em; white-space: nowrap; color: var(--c);
  border: 1px solid transparent;
  background:
    linear-gradient(135deg, transparent 50%, var(--c) 50% calc(50% + 1px), transparent calc(50% + 1px)) 0 0 / 10px 10px no-repeat border-box,
    linear-gradient(135deg, transparent calc(50% - 1px), var(--c) calc(50% - 1px) 50%, transparent 50%) 100% 100% / 10px 10px no-repeat border-box,
    linear-gradient(var(--f), var(--f)) padding-box,
    linear-gradient(var(--c), var(--c)) border-box;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  transition: opacity .3s linear, scale .45s var(--ease-hud);
}
/* face flash at the plane, then a held tint (verified lime / rejected red) */
.rul-tok > b::after {
  content: ''; position: absolute; inset: 0; z-index: -1; background: var(--c); opacity: 0;
  animation: rul-fl var(--rul-t) linear infinite; animation-delay: var(--d, 0s);
}
/* bevelled ring that ripples out on the plane at contact */
.rul-tok::after {
  content: ''; position: absolute; inset: -7px; opacity: 0; border: 1.5px solid var(--c);
  background:
    linear-gradient(135deg, transparent 50%, var(--c) 50% calc(50% + 1.5px), transparent calc(50% + 1.5px)) 0 0 / 14px 14px no-repeat border-box,
    linear-gradient(135deg, transparent calc(50% - 1.5px), var(--c) calc(50% - 1.5px) 50%, transparent 50%) 100% 100% / 14px 14px no-repeat border-box;
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  animation: rul-ring var(--rul-t) linear infinite; animation-delay: var(--d, 0s);
}

/* ── rule plates ── */
.rul-rules { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; perspective: 1200px; }
.rul-rule {
  --tone: var(--warn);
  display: grid; grid-template-columns: 92px minmax(0, 1fr); column-gap: 16px; align-items: start;
  padding: 20px 24px 20px 20px;
  transition: transform .45s var(--ease-hud);
}
.rul-rule--motiv, .rul-rule--src { --tone: var(--warn); }
.rul-rule--bot { --tone: var(--bad); }
.rul-rule--ok { --tone: var(--volt); }
.rul-rule.g-plate--warn { --edge: rgba(255,138,52,.5); }
.rul-rule.g-plate--bad { --edge: rgba(255,82,104,.5); }
.rul-rule.g-plate--volt { --edge: rgba(203,255,58,.55); }
.rul-rule:is(:hover, :focus-within) { --edge: var(--tone); transform: translateZ(14px); }
.rul-rule.g-plate:is(:hover, :focus-within)::before { --bc: var(--tone); }
.rul-rule__tx { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rul-rule__t { color: var(--ink); }
.rul-rule__tag { grid-column: 1; grid-row: 1; justify-self: start; margin-top: 2px; }
.rul-rule__tag.g-chip { background: rgba(6,8,10,.5); }

/* the forbidden noun gets struck through on hover / focus-within */
.rul-x { position: relative; display: inline-block; }
.rul-x::after {
  content: ''; position: absolute; left: -3px; right: -3px; top: 54%; height: 2px; background: var(--tone);
  transform: scaleX(0); transform-origin: 0 50%; transition: transform .5s var(--ease-hud);
}
.rul-rule:is(:hover, :focus-within) .rul-x::after { transform: scaleX(1); }

/* hovering a plate spotlights its tokens in the scene */
.rul:has(.rul-rule:is(:hover, :focus-within)) .rul-tok > b { opacity: .26; }
.rul:has(.rul-rule--motiv:is(:hover, :focus-within)) .rul-tok--motiv > b,
.rul:has(.rul-rule--bot:is(:hover, :focus-within)) .rul-tok--bot > b,
.rul:has(.rul-rule--src:is(:hover, :focus-within)) .rul-tok--src > b,
.rul:has(.rul-rule--ok:is(:hover, :focus-within)) .rul-tok--ok > b { opacity: 1; scale: 1.22; }

/* ── closing statement row ── */
.rul-close {
  position: relative; margin-top: clamp(40px, 5vw, 72px); padding-top: clamp(24px, 3vw, 36px);
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 24px; row-gap: 14px; align-items: start;
}
.rul-close::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background:
    linear-gradient(90deg, #CBFF3A 0 64px, transparent 64px) 0 0 / 640px 1px repeat-x,
    linear-gradient(#27313A, #27313A);
  animation: rul-run 6.4s linear infinite;
}
.rul-close__mk { margin-top: 8px; }
.rul-close__t { max-width: 1040px; line-height: 1.08; }
.rul-close__amt {
  font-family: var(--f-mono); font-stretch: 87.5%; font-weight: 500; font-variant-numeric: tabular-nums;
  letter-spacing: -.02em; white-space: nowrap; color: var(--volt); text-shadow: 0 0 18px rgba(203,255,58,.22);
}

/* ── keyframes (all loops seamless; every content element visible at 0%) ── */
@keyframes rul-flow {
  from { background-position: 0 50%, 0 0; }
  to { background-position: 900px 50%, 900px 0; }
}
@keyframes rul-sweep {
  from { transform: translateY(0); }
  to { transform: translateY(216px); }
}
@keyframes rul-run {
  from { background-position: 0 0, 0 0; }
  to { background-position: 640px 0, 0 0; }
}
/* pass: 900px per cycle; crosses the plane (x = 0) at 26% */
@keyframes rul-tp {
  0% { transform: translate3d(-234px, -6px, 0) rotateY(90deg); opacity: 1; }
  58% { opacity: 1; }
  64% { transform: translate3d(342px, -6px, 0) rotateY(90deg); opacity: 0; }
  70% { transform: translate3d(-504px, -6px, 0) rotateY(90deg); opacity: 0; }
  74% { opacity: 1; }
  100% { transform: translate3d(-234px, -6px, 0) rotateY(90deg); opacity: 1; }
}
/* block: same approach, hits at 25%, bounces back, topples and drops through the slot */
@keyframes rul-tb {
  0% { transform: translate3d(-234px, -6px, 0) rotateY(90deg) rotateX(0deg); opacity: 1; }
  25% { transform: translate3d(-9px, -6px, 0) rotateY(90deg) rotateX(0deg); animation-timing-function: cubic-bezier(.2, .8, .3, 1); }
  28% { transform: translate3d(-40px, -16px, 0) rotateY(90deg) rotateX(14deg); animation-timing-function: cubic-bezier(.5, 0, .9, .5); }
  38% { opacity: 1; }
  46% { transform: translate3d(-66px, 236px, 0) rotateY(90deg) rotateX(104deg); opacity: 0; }
  70% { transform: translate3d(-504px, -6px, 0) rotateY(90deg) rotateX(0deg); opacity: 0; }
  74% { opacity: 1; }
  100% { transform: translate3d(-234px, -6px, 0) rotateY(90deg) rotateX(0deg); opacity: 1; }
}
@keyframes rul-ring {
  0%, 24.6% { opacity: 0; transform: scale(.92); }
  25.3% { opacity: 1; transform: scale(1); animation-timing-function: cubic-bezier(.2, .7, .3, 1); }
  33%, 100% { opacity: 0; transform: scale(2.2); }
}
@keyframes rul-fl {
  0%, 24.6% { opacity: 0; }
  25.3% { opacity: .9; animation-timing-function: cubic-bezier(.2, .7, .3, 1); }
  31%, 62% { opacity: .3; }
  68%, 100% { opacity: 0; }
}
/* gate flashes, phase = (25.3% − token phase): passes 2.0 / 35.3 / 68.6, MOTIV 18.6, SRC 52.0, BOT 85.3 */
@keyframes rul-gok {
  0%, 1.5%, 10.5%, 34.8%, 43.8%, 68.1%, 77.1%, 100% { opacity: 0; }
  2%, 35.3%, 68.6% { opacity: 1; animation-timing-function: cubic-bezier(.2, .7, .3, 1); }
}
@keyframes rul-gwarn {
  0%, 18.1%, 27.1%, 51.5%, 60.5%, 100% { opacity: 0; }
  18.6%, 52% { opacity: 1; animation-timing-function: cubic-bezier(.2, .7, .3, 1); }
}
@keyframes rul-gbad {
  0%, 84.8%, 93.8%, 100% { opacity: 0; }
  85.3% { opacity: 1; animation-timing-function: cubic-bezier(.2, .7, .3, 1); }
}

/* ── responsive: rescale the stage, restack plates ── */
@media (max-width: 1439px) {
  .rul-view { scale: .9; }
  .rul-scene { height: 500px; }
}
@media (max-width: 1279px) {
  .rul-view { scale: .8; }
  .rul-scene { height: 460px; }
  .rul-rule { grid-template-columns: 84px minmax(0, 1fr); padding: 18px 20px 18px 18px; }
  .rul-rule__t { font-size: 19px; line-height: 25px; }
}
@media (max-width: 1099px) {
  .rul-grid { grid-template-columns: minmax(0, 1fr); }
  .rul-view { scale: 1; }
  .rul-scene { height: 520px; }
  .rul-rules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rul-rule { grid-template-columns: minmax(0, 1fr); row-gap: 14px; align-content: start; }
  .rul-rule__tag { grid-row: 1; grid-column: 1; margin-top: 0; }
  .rul-rule__tx { grid-row: 2; grid-column: 1; }
}
@media (max-width: 860px) {
  .rul-view { scale: .84; }
  .rul-scene { height: 440px; }
}
@media (max-width: 720px) {
  .rul-view { scale: .56; }
  .rul-scene { height: 300px; }
  .rul-rules { grid-template-columns: minmax(0, 1fr); }
  .rul-rule { padding: 16px 18px; }
  .rul-close { grid-template-columns: minmax(0, 1fr); }
  .rul-close__mk { margin-top: 0; justify-self: start; }
}
@media (max-width: 420px) {
  .rul-view { scale: .5; }
  .rul-scene { height: 270px; }
}

/* ===== faq.css ===== */
/* ══ 07 · Питання — FAQ accordion + live manager + 3D team fan. Prefix: faq- (root .faq) ══ */

/* ── layout: head spans the top, then team/manager (left) + questions (right) ── */
.faq-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 4vw, 56px);
  align-items: start;
}
.faq-side { container-type: inline-size; display: flex; flex-direction: column; min-width: 0; }

/* ── 3D moment: camera (perspective) → drifting rig → three fanned portrait cards ── */
.faq-team {
  position: relative;
  padding: 54px 0 24px;
  perspective: 1100px;
  perspective-origin: 50% 36%;
}
.faq-fan {
  --ov: min(24px, 4cqw);
  position: relative;
  display: flex; justify-content: center; align-items: flex-start;
  transform-style: preserve-3d;
  transform: rotateX(6deg) rotateY(-5deg);
  animation: faq-drift 18s ease-in-out infinite;
}
@keyframes faq-drift {
  0%, 100% { transform: rotateX(6deg) rotateY(-5deg); }
  50% { transform: rotateX(3deg) rotateY(5deg); }
}

/* floor grid under the fan: a real plane in the same 3D space, flowing toward the viewer */
.faq-floor {
  position: absolute; left: -8%; right: -8%; top: 100%;
  height: 480px; margin-top: -240px;
  pointer-events: none;
  transform: rotateX(90deg);
  background:
    linear-gradient(rgba(203,255,58,.34), rgba(203,255,58,.34)) 50% 50% / 100% 1px no-repeat,
    linear-gradient(rgba(58,71,80,.8) 2px, transparent 2px) 50% 0 / 48px 48px,
    linear-gradient(90deg, rgba(58,71,80,.8) 1px, transparent 1px) 50% 0 / 48px 48px;
  -webkit-mask-image: radial-gradient(closest-side, #000 18%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 18%, transparent 100%);
  animation: faq-floor 8s linear infinite;
}
@keyframes faq-floor { to { background-position: 50% 50%, 50% 48px, 50% 48px; } }

/* card = slot (label) → pose (fan offsets, transitions) → bob (idle float) → frame + name plate + note */
.faq-card {
  --ty: 0px; --tz: 0px; --ry: 0deg; --rz: 0deg; --fx: 0px; --fz: 78px;
  position: relative; display: block; flex: none;
  width: 208px; width: min(208px, 34.5cqw);
  transform-style: preserve-3d;
  cursor: pointer;
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.faq-card + .faq-card { margin-left: calc(var(--ov) * -1); }
.faq-card--1 { --ty: -10px; --tz: -64px; --ry: 18deg; --rz: -3.5deg; --fx: 22px; --fz: 94px; }
.faq-card--3 { --ty: -10px; --tz: -64px; --ry: -18deg; --rz: 3.5deg; --fx: -22px; --fz: 94px; }

.faq-card__pick {
  position: absolute; top: 40%; left: 50%;
  width: 1px; height: 1px; margin: 0; padding: 0; border: 0;
  opacity: 0; pointer-events: none;
}

.faq-card__pose {
  position: relative; display: block;
  transform-style: preserve-3d;
  transform-origin: 50% 100%;
  translate: 0 var(--ty) var(--tz);
  transform: rotateY(var(--ry)) rotateZ(var(--rz));
  transition: translate .6s var(--ease-money), transform .75s var(--ease-hud);
}
/* forward: hover, focus (keyboard / tap) or picked radio — the card straightens and steps out in Z */
.faq-card:hover .faq-card__pose,
.faq-card:focus-within .faq-card__pose,
.faq-card__pick:checked ~ .faq-card__pose {
  translate: var(--fx) -12px var(--fz);
  transform: rotateY(0deg) rotateZ(0deg);
}

.faq-card__bob {
  position: relative; display: block;
  transform-style: preserve-3d;
  animation: faq-bob 7s ease-in-out infinite;
}
.faq-card--1 .faq-card__bob { animation-delay: -1.4s; }
.faq-card--2 .faq-card__bob { animation-duration: 7.8s; animation-delay: -4.2s; }
.faq-card--3 .faq-card__bob { animation-duration: 6.4s; animation-delay: -2.6s; }
@keyframes faq-bob {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -8px; }
}

/* the bevelled HUD frame (kit plate + scanlines); photo inset 1px so the bevel wire shows */
.faq .faq-card__frame {
  --fill: var(--plate);
  display: block;
  aspect-ratio: 4 / 5;
  transition: opacity .35s linear;
}
.faq-card__img {
  position: absolute; inset: 0;
  display: block; width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: 50% 30%;
  pointer-events: none;
  clip-path: polygon(13px 0, 100% 0, 100% calc(100% - 13px), calc(100% - 13px) 100%, 0 100%, 0 13px);
}
.faq-card__sweep {
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(rgba(203,255,58,.55), rgba(203,255,58,.55)) 0 100% / 100% 1px no-repeat,
    linear-gradient(180deg, transparent calc(100% - 26px), rgba(203,255,58,.08));
  animation: g-sweep 6.5s linear infinite;
}
.faq-card--1 .faq-card__sweep { animation-delay: -.9s; }
.faq-card--2 .faq-card__sweep { animation-delay: -4.6s; }
.faq-card--3 .faq-card__sweep { animation-delay: -2.4s; }

.faq-card:hover .faq-card__frame,
.faq-card:focus-within .faq-card__frame,
.faq-card__pick:checked ~ .faq-card__pose .faq-card__frame { --edge: var(--volt); }
.faq-card:hover .faq-card__frame::before,
.faq-card:focus-within .faq-card__frame::before,
.faq-card__pick:checked ~ .faq-card__pose .faq-card__frame::before { --bl: 18px; --bc: #CBFF3A; }
.faq-card__pick:focus-visible ~ .faq-card__pose .faq-card__frame::after { box-shadow: inset 0 0 0 2px var(--volt); }
.faq-fan:has(.faq-card:hover) .faq-card:not(:hover) .faq-card__frame { opacity: .62; }

/* name plate: hangs off the photo's lower edge (keeps the shirt logos clear), floats 18px in front */
.faq-card__cap {
  position: relative;
  display: flex; flex-direction: column; gap: 5px;
  margin: -18px 12px 0;
  padding: 10px 12px 11px;
  background: rgba(6,8,10,.92);
  box-shadow: inset 0 0 0 1px var(--wire-hi);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  translate: 0 0 18px;
  transition: translate .6s var(--ease-money);
}
.faq-card--1 .faq-card__cap { margin-left: -10px; margin-right: calc(var(--ov) + 16px); }
.faq-card--3 .faq-card__cap { margin-left: calc(var(--ov) + 16px); margin-right: -10px; }
.faq .faq-card__name { color: var(--volt); }
.faq-card__note { font: 500 13px/18px var(--f-text); color: var(--ink); text-wrap: balance; }
.faq-card:hover .faq-card__cap,
.faq-card:focus-within .faq-card__cap,
.faq-card__pick:checked ~ .faq-card__pose .faq-card__cap { translate: 0 0 34px; }

/* their handwritten note writes on beside the card when it steps forward */
.faq-card__hand {
  position: absolute; z-index: 3;
  display: block; height: auto; max-width: none;
  pointer-events: none;
  translate: 0 0 48px;
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  transition: opacity .2s linear, clip-path 1.1s cubic-bezier(.4,.1,.3,1);
}
.faq-card--1 .faq-card__hand { width: 108px; top: -34px; right: -50px; }
.faq-card--2 .faq-card__hand { width: 146px; top: -36px; right: -62px; }
.faq-card--3 .faq-card__hand { width: 96px; top: -40px; left: -52px; }
.faq-card:hover .faq-card__hand,
.faq-card:focus-within .faq-card__hand,
.faq-card__pick:checked ~ .faq-card__pose .faq-card__hand { opacity: 1; clip-path: inset(0 0 0 0); }

/* ── live manager plate ── */
.faq-mgr { display: flex; flex-direction: column; gap: 18px; padding: 22px 26px 26px; }
.faq-mgr__head { min-height: 36px; }
.faq-mgr__live { display: inline-flex; align-items: center; gap: 12px; }
.faq-live { position: relative; display: inline-grid; place-items: center; flex: none; width: 8px; height: 8px; }
.faq-live::after {
  content: ''; position: absolute; inset: -6px;
  box-shadow: inset 0 0 0 1px var(--volt);
  animation: faq-ping 2.6s var(--ease-hud) infinite;
}
@keyframes faq-ping {
  0% { transform: scale(.55); opacity: .95; }
  75%, 100% { transform: scale(1.3); opacity: 0; }
}
.faq-mgr__tg {
  display: inline-grid; place-items: center; flex: none;
  width: 36px; height: 36px;
  color: var(--volt); background: var(--volt-chip);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}
.faq-mgr__tg svg { width: 18px; height: 18px; }

.faq-mgr__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "copy" "brief" "key";
  gap: 20px;
}
.faq-mgr__copy { grid-area: copy; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.faq .faq-mgr__h { font-size: 20px; line-height: 27px; }
.faq .faq-mgr__p { font-size: 15px; line-height: 24px; }

.faq-brief { grid-area: brief; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.faq-brief__lbl { margin: 0; }
.faq-brief__list { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--wire); }
.faq-brief__row {
  display: flex; align-items: center; gap: 12px;
  min-height: 44px; padding: 6px 0;
  border-top: 1px solid var(--wire);
}
.faq-brief__row::after {
  content: ''; flex: none; width: 6px; height: 6px; margin-left: auto;
  background-color: var(--wire-hi);
  clip-path: polygon(29.3% 0, 70.7% 0, 100% 29.3%, 100% 70.7%, 70.7% 100%, 29.3% 100%, 0 70.7%, 0 29.3%);
  transition: background-color .2s linear;
}
.faq-brief__row:nth-child(2)::after { transition-delay: .08s; }
.faq-brief__row:nth-child(3)::after { transition-delay: .16s; }
.faq-mgr:hover .faq-brief__row::after,
.faq-mgr:focus-within .faq-brief__row::after { background-color: var(--volt); }
.faq-brief__ico {
  display: inline-grid; place-items: center; flex: none;
  width: 30px; height: 30px;
  color: var(--ink-2);
  box-shadow: inset 0 0 0 1px var(--wire-hi);
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}
.faq-brief__ico svg { width: 16px; height: 16px; }
.faq-brief__txt { min-width: 0; color: var(--ink); }

.faq-cta { grid-area: key; width: 100%; }

/* ── accordion: 8 bevelled plates, mono index, plus → × ── */
.faq-list { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.faq .faq-item { --fill: var(--deck); }
.faq .faq-item[open] { --edge: rgba(203,255,58,.62); --fill: var(--plate); }
.faq-q {
  list-style: none;
  display: grid; grid-template-columns: 30px minmax(0, 1fr) 32px; align-items: center; gap: 14px;
  min-height: 72px; padding: 14px 18px 14px 20px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q__ix {
  font: 600 12px/1 var(--f-mono); font-stretch: 87.5%;
  letter-spacing: .08em; font-variant-numeric: tabular-nums;
  color: var(--volt);
}
.faq-q__t { font: 600 17px/24px var(--f-text); color: var(--ink); text-wrap: pretty; }
.faq-q__ico {
  display: grid; place-items: center;
  width: 32px; height: 32px;
  color: var(--ink-2);
  box-shadow: inset 0 0 0 1px var(--wire-hi);
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
  transition: color .16s linear, background-color .16s linear;
}
.faq-q__ico svg { width: 16px; height: 16px; transition: transform .4s var(--ease-hud); }
.faq-q:hover .faq-q__ico { color: var(--volt); box-shadow: inset 0 0 0 1px var(--volt); }
.faq-item[open] .faq-q__ico { color: var(--void); background-color: var(--volt); box-shadow: none; }
.faq-item[open] .faq-q__ico svg { transform: rotate(135deg); }
.faq .faq-q:focus-visible { outline: 2px solid var(--volt); outline-offset: -10px; }

.faq-a {
  padding: 0 26px 24px 64px;
  transition: opacity .4s var(--ease-hud), translate .4s var(--ease-hud);
}
.faq-a .g-body { max-width: 62ch; }
@starting-style {
  .faq-item[open] .faq-a { opacity: 0; translate: 0 -6px; }
}

/* ── tablet / single column ── */
@media (max-width: 1099px) {
  .faq-grid { grid-template-columns: minmax(0, 1fr); }
  .faq-mgr__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    grid-template-areas: "copy brief" "key brief";
    column-gap: 32px;
  }
  .faq-cta { align-self: end; }
}

/* ── phone: the fan opens up and scales down, plates go under the photos, everything stacks ── */
@media (max-width: 720px) {
  .faq-team { padding: 26px 0 22px; perspective: 820px; overflow-x: clip; }
  .faq-card { width: 30.5cqw; --fz: 44px; }
  .faq-card + .faq-card { margin-left: 3cqw; }
  .faq-card--1 { --ty: -4px; --tz: -34px; --ry: 13deg; --rz: -2deg; --fx: 0px; --fz: 44px; }
  .faq-card--3 { --ty: -4px; --tz: -34px; --ry: -13deg; --rz: 2deg; --fx: 0px; --fz: 44px; }
  .faq-card__cap,
  .faq-card--1 .faq-card__cap,
  .faq-card--3 .faq-card__cap { margin: 8px 0 0; padding: 7px 8px 8px; gap: 3px; translate: 0 0 6px; }
  .faq .faq-card__name { font-size: 10px; letter-spacing: .08em; }
  .faq-card__note { font-size: 12px; line-height: 16px; }
  .faq-card__hand { display: none; }

  .faq-mgr { padding: 18px 18px 20px; }
  .faq-mgr__grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "copy" "brief" "key"; }
  .faq-cta { align-self: auto; }
  .faq .faq-mgr__h { font-size: 18px; line-height: 25px; }

  .faq-q { grid-template-columns: 22px minmax(0, 1fr) 30px; gap: 10px; min-height: 60px; padding: 12px 12px 12px 14px; }
  .faq-q__t { font-size: 15px; line-height: 21px; }
  .faq-q__ico { width: 30px; height: 30px; }
  .faq-a { padding: 0 14px 16px; }
  .faq .faq-a .g-body { font-size: 15px; line-height: 24px; }
}

/* ===== landing-3d: перенос на сайт (Claude 04.11.2026) ===== */
/* <helmet> макета */
body { margin: 0; background: #06080A; }
a { color: #CBFF3A; } a:hover { color: #E2FF8F; }
/* «До змісту»: видно только с клавиатуры */
.fp-skip { position: absolute; left: 12px; top: -80px; z-index: 1000; } .fp-skip:focus { top: 12px; }
/* Независимая проверка 04.11 (ops/claude-fp-landing3d-20261104/review): */
/* — блок не на экране: его бесконечные анимации на паузе (класс ставит landing-3d.js; без JS всё как в макете) */
.fp .is-off, .fp .is-off *, .fp .is-off *::before, .fp .is-off *::after { animation-play-state: paused !important; }
/* — планшет и телефон боком: фото первого экрана не выше 58% экрана, иначе заголовок и кнопка уходят за первый экран; лица в кадре */
@media (max-width: 1099px) { .hx-band { height: min(calc(165vw / 1.7285), 58svh); } .hx-cam { top: calc((min(calc(165vw / 1.7285), 58svh) - 165vw / 1.7285) * .3); } }
/* — 1280–1359px: надпись над заголовком наезжала на записку Сніжани */
@media (min-width: 1280px) and (max-width: 1359px) { .hx-eyebrow { display: none; } }
/* — карточки менеджеров: нажатие ловит карточка, а не плоскость веера */
.faq-fan { pointer-events: none; } .faq-card { pointer-events: auto; }
/* — переход по якорю: раздел не прячется под шапкой (шапка 80px, на телефоне 64px) */
@media (min-width: 721px) { .l-sec { scroll-margin-top: 92px; } }
/* style="…" макета → классы (CSP сайта запрещает inline-стили); тройной класс — сильнее любого правила макета для этих элементов */
.ls-1.ls-1.ls-1 { --x: 71%; }
.ls-2.ls-2.ls-2 { --x: 8%; }
.ls-3.ls-3.ls-3 { --x: 29%; }
.ls-4.ls-4.ls-4 { --x: 50%; }
.ls-5.ls-5.ls-5 { --x: 92%; }
.ls-6.ls-6.ls-6 { --x: 64%; }
.ls-7.ls-7.ls-7 { --x: 36%; }
.ls-8.ls-8.ls-8 { --x: 272px; --y: -272px; --h: 260px; }
.ls-9.ls-9.ls-9 { --x: 272px; --y: -136px; --h: 204px; }
.ls-10.ls-10.ls-10 { --x: 136px; --y: -136px; --h: 148px; }
.ls-11.ls-11.ls-11 { --x: 136px; --y: 0px; --h: 92px; }
.ls-12.ls-12.ls-12 { --x: 0px; --y: 0px; --h: 36px; }
.ls-13.ls-13.ls-13 { --z: -4px; }
.ls-14.ls-14.ls-14 { --z: -2px; }
.ls-15.ls-15.ls-15 { --z: 0px; }
.ls-16.ls-16.ls-16 { --z: 2px; }
.ls-17.ls-17.ls-17 { --z: 4px; }
.ls-18.ls-18.ls-18 { --x: -164px; --h: 172px; }
.ls-19.ls-19.ls-19 { --x: 0px; --h: 230px; }
.ls-20.ls-20.ls-20 { --x: 164px; --h: 130px; }
.ls-21.ls-21.ls-21 { --x: -48px; --h: 38px; }
.ls-22.ls-22.ls-22 { --x: 142px; --h: 30px; }
.ls-23.ls-23.ls-23 { --z: -12px; --rc: #0D1317; }
.ls-24.ls-24.ls-24 { --z: -9px; --rc: #10171B; }
.ls-25.ls-25.ls-25 { --z: -6px; --rc: #141C21; }
.ls-26.ls-26.ls-26 { --z: -3px; --rc: #182127; }
.ls-27.ls-27.ls-27 { --d: -7.04s; }
.ls-28.ls-28.ls-28 { --d: -8.64s; }
.ls-29.ls-29.ls-29 { --d: -0.64s; }
.ls-30.ls-30.ls-30 { --d: -2.24s; }
.ls-31.ls-31.ls-31 { --d: -3.84s; }
.ls-32.ls-32.ls-32 { --d: -5.44s; }
.ls-33.ls-33.ls-33 { transform: translateZ(-30px); color: #1C2A07; }
.ls-34.ls-34.ls-34 { transform: translateZ(-28px); color: #243310; }
.ls-35.ls-35.ls-35 { transform: translateZ(-26px); color: #2B3B0B; }
.ls-36.ls-36.ls-36 { transform: translateZ(-24px); color: #33450C; }
.ls-37.ls-37.ls-37 { transform: translateZ(-22px); color: #3B500D; }
.ls-38.ls-38.ls-38 { transform: translateZ(-20px); color: #445C0E; }
.ls-39.ls-39.ls-39 { transform: translateZ(-18px); color: #4D680F; }
.ls-40.ls-40.ls-40 { transform: translateZ(-16px); color: #577510; }
.ls-41.ls-41.ls-41 { transform: translateZ(-14px); color: #618211; }
.ls-42.ls-42.ls-42 { transform: translateZ(-12px); color: #6B8F12; }
.ls-43.ls-43.ls-43 { transform: translateZ(-10px); color: #769D12; }
.ls-44.ls-44.ls-44 { transform: translateZ(-8px); color: #82AB13; }
.ls-45.ls-45.ls-45 { transform: translateZ(-6px); color: #8EBA12; }
.ls-46.ls-46.ls-46 { transform: translateZ(-4px); color: #9BC912; }
.ls-47.ls-47.ls-47 { transform: translateZ(-2px); color: #A9DB12; }
.ls-48.ls-48.ls-48 { transform: translateZ(0px); color: #CBFF3A; }