/* v2 light homepage concept (/v2/). Spec: DESIGN.md "v2 light homepage concept". Light by default, [data-theme=dark]
   switches the tokens. Round 2 (2026-10-20): the header and footer are navy in both themes, every band in between is
   light and full bleed with its own treatment, and the logo's dissolving squares run through the page (.pxedge, .btn-px,
   [data-pxr], the footer mosaic). */

@font-face { font-family: "Exo 2"; src: url("/assets/fonts/exo2-latin-var.woff2") format("woff2"); font-weight: 300 800; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("/assets/fonts/montserrat-latin-var.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }

:root {
  --bg: #F6F8FB; --bg-2: #EAF1F8; --surface: #FFFFFF; --white: #FFFFFF; --ink: #0A1428; --ink-2: #2A3A55; --muted: #4D5D78;
  --line: #DCE3EE; --line-2: #C6D2E2; --accent: #00BBFF; --accent-ink: #0062B3; --cyan: #00E6FF;
  --acc-grad: linear-gradient(100deg, #0062B8 0%, #0094E8 55%, #00B4F5 100%);
  --navy: #0A1428; --navy-2: #0C1830; --navy-ink: #E8EEF9; --navy-muted: #A9BAD8; --navy-line: #22345A;
  --win: #FFFFFF; --win-ink: #0A1428; --win-muted: #5B6B85; --win-line: #E6ECF4; --win-2: #F3F6FA;
  --tint: #EEF4FB; --tint-2: #E3ECF8; --dusk: #E4E9FA; --grid: rgba(10, 52, 110, .06);
  --shadow: 0 30px 60px -30px rgba(10, 20, 40, .28), 0 12px 24px -16px rgba(10, 20, 40, .18);
  --grain-op: .045; --grain-blend: multiply;
  --ease: cubic-bezier(.2, 0, 0, 1); --ease-in: cubic-bezier(.3, 0, 1, 1);
  --t-quick: 160ms; --t-std: 340ms; --t-slow: 560ms; --t-head: 640ms;
  --wrap: min(1240px, 100% - 32px);
  /* spacing scale (round 6): steps, then the rhythm tokens every band, heading block and grid reads */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --sp-10: 128px;
  --sec-y: clamp(72px, 8.4vw, 120px); --sec-y-tight: clamp(56px, 6vw, 88px); --head-gap: clamp(32px, 3.6vw, 56px); --grid-gap: clamp(16px, 1.8vw, 24px); --blk-gap: 24px;
  --f-head: "Exo 2", "Exo 2 Fallback", Arial, sans-serif; --f-body: "Montserrat", "Montserrat Fallback", Arial, sans-serif;
  color-scheme: light;
}
[data-theme="dark"] {
  --bg: #070F20; --bg-2: #0A1428; --surface: #0E1A33; --white: #0D1930; --ink: #E8EEF9; --ink-2: #C3D0E6; --muted: #98A9C6;
  --line: #1B2B4A; --line-2: #26395E; --accent-ink: #4FD1FF;
  --acc-grad: linear-gradient(100deg, #00A8F0 0%, #00C8FF 50%, #00E6FF 100%);
  --navy: #0B172E; --navy-2: #0E1C38;
  --win: #0F1C36; --win-ink: #E8EEF9; --win-muted: #98A9C6; --win-line: #1E2F50; --win-2: #13223F;
  --tint: #0A1630; --tint-2: #0D1B38; --dusk: #0E1636; --grid: rgba(120, 205, 255, .06);
  --shadow: 0 30px 60px -30px rgba(0, 0, 0, .6), 0 12px 24px -16px rgba(0, 0, 0, .5);
  --grain-op: .07; --grain-blend: overlay;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 90px; overflow-x: clip; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 500 17px/1.6 var(--f-body); -webkit-font-smoothing: antialiased; overflow-x: clip; transition: background-color var(--t-std) var(--ease), color var(--t-std) var(--ease); }
body::after { content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: var(--grain-op); mix-blend-mode: var(--grain-blend);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-family: var(--f-head); font-weight: 800; letter-spacing: -.025em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 200; background: var(--ink); color: var(--bg); padding: 10px 16px; }
.skip:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.wrap { width: var(--wrap); margin-inline: auto; }

/* ---------- type ---------- */
.kicker { display: inline-flex; align-items: center; gap: 10px; font: 700 12px/1.2 var(--f-head); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin-bottom: 18px; }
.kicker::before { content: ""; width: 7px; height: 7px; background: var(--accent); flex: none; }
.kicker:has(.live)::before { display: none; }
.live { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 rgba(0, 187, 255, .5); animation: live 3.2s var(--ease) infinite; }
@keyframes live { 0% { box-shadow: 0 0 0 0 rgba(0, 187, 255, .55); } 70%, 100% { box-shadow: 0 0 0 7px rgba(0, 187, 255, 0); } }
.display { font-size: clamp(42px, 7.1vw, 108px); line-height: .98; letter-spacing: -.04em; }
.display-2 { font-size: clamp(38px, 6vw, 88px); line-height: 1; letter-spacing: -.035em; }
.h2 { font-size: clamp(32px, 4.4vw, 60px); line-height: 1.02; letter-spacing: -.03em; }
.lead { font-size: clamp(17px, 1.35vw, 19px); color: var(--ink-2); max-width: 56ch; margin-top: 22px; }
.ln { display: block; perspective: 700px; }
.ln-i { display: inline-block; transform-origin: 0 50%; }
.acc { background: var(--acc-grad); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .06em; }
.tlink { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; font: 700 15px/1.2 var(--f-head); color: var(--accent-ink); text-decoration: none; }
.tlink .arr { width: 16px; height: 16px; transition: transform var(--t-quick) var(--ease); }
.tlink:hover .arr { transform: translateX(5px); }

/* ---------- chamfered buttons (pixila's cut corners, our pixel square instead of its diamond) ---------- */
.btn { --c: 12px; position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px;
  font: 700 15px/1 var(--f-head); letter-spacing: .02em; text-decoration: none; border: 0; cursor: pointer;
  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c));
  transition: transform var(--t-quick) var(--ease), background-color 100ms var(--ease), color 100ms var(--ease); }
.btn .arr { width: 16px; height: 16px; transition: transform 240ms var(--ease); }
.btn:hover .arr { transform: translateX(5px); }
.btn:active { transform: scale(.97); }
.btn-solid { background: var(--accent); color: #0A1428; }
.btn-solid:hover { background: var(--cyan); }
.btn-cut { background: var(--ink); color: var(--ink); }
.btn-cut::before { content: ""; position: absolute; inset: 1.5px; z-index: -1; background: var(--bg); transition: background-color 100ms var(--ease);
  clip-path: polygon(calc(var(--c) - .6px) 0, 100% 0, 100% calc(100% - var(--c) + .6px), calc(100% - var(--c) + .6px) 100%, 0 100%, 0 calc(var(--c) - .6px)); }
.btn-cut:hover { color: var(--bg); }
.btn-cut:hover::before { background: var(--ink); }
.btn-cut .px { width: 9px; height: 9px; background: var(--accent); transform: rotate(45deg); transition: transform 240ms var(--ease); }
.btn-cut:hover .px { transform: rotate(225deg) scale(1.1); }
.btn-sm { min-height: 42px; padding: 0 18px; font-size: 14px; --c: 9px; }
.btn-lg { min-height: 62px; padding: 0 34px; font-size: 17px; }

/* ---------- header (round 3b, refined round 3c): floating glass bar with pixel-stepped corners ---------- */
/* Light glass on the light theme, dark glass on the dark theme (Abraham, 2026-10-20). The bar, the mega panel and
   the phone sheet share one stepped shape and a 1 px stepped border ring (clip-path evenodd), so the pixel corners
   keep a clean edge. Logo: the official master on light, the chrome cut on dark (both only resized). */
.no-js .tabs { display: none; }
.no-js .pan + .pan { border-top: 1px solid var(--win-line); }
.hdr { --h-glass: rgba(255, 255, 255, .86); --h-panel: rgba(255, 255, 255, .95); --h-ring: rgba(10, 30, 70, .11); --h-hl: rgba(255, 255, 255, .95);
  --h-ink: #0A1428; --h-ink-2: #2A3A55; --h-muted: #46566F; --h-hover: rgba(0, 112, 201, .07); --h-dots: rgba(10, 50, 110, .16); --h-acc: #005FAD; --h-focus: #0A1428; --h-px: #00A8F0;
  --h-pill-ring: #C9D6E8; --h-pill: #FFFFFF; --h-pill-h: #EEF5FD; --h-ic: rgba(0, 112, 201, .08); --h-shadow: 0 18px 40px -22px rgba(10, 30, 70, .35);
  position: fixed; top: 12px; left: 0; right: 0; z-index: 60; pointer-events: none; color: var(--h-ink); transition: transform 420ms var(--ease); }
[data-theme="dark"] .hdr { --h-glass: rgba(9, 18, 38, .66); --h-panel: rgba(10, 20, 42, .9); --h-ring: rgba(120, 205, 255, .16); --h-hl: rgba(255, 255, 255, .06);
  --h-ink: #E8EEF9; --h-ink-2: #C3D0E6; --h-muted: #A9BAD8; --h-hover: rgba(255, 255, 255, .06); --h-dots: rgba(169, 186, 216, .22); --h-acc: #4FD1FF; --h-focus: #7FEFFF; --h-px: #00E6FF;
  --h-pill-ring: #2B4270; --h-pill: #0C1830; --h-pill-h: #15295A; --h-ic: rgba(255, 255, 255, .05); --h-shadow: 0 18px 40px -22px rgba(0, 0, 0, .7); }
.hdr.is-hidden { transform: translateY(calc(-100% - 44px)); }
/* focus ring in the header's own ink, so it shows on light and dark glass (Codex, round 3c) */
.hdr :focus-visible { outline: 2px solid var(--h-focus); outline-offset: 2px; }
.hdr:focus-within { transform: none; }
.hdr-bar { position: relative; isolation: isolate; pointer-events: auto; width: min(1400px, 100% - 28px); margin-inline: auto; }
.hdr-bar::before, .hdr-bar::after, .mm-panel, .mm-panel::after, .hdr-sheet, .hdr-sheet::after { --s: 6px; --s2: 12px; }
/* glass layer (behind the content) and the stepped 1 px ring (on top of the glass) */
.hdr-bar::before, .mm-panel, .hdr-sheet { -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6); clip-path: polygon(var(--s2) 0, calc(100% - var(--s2)) 0, calc(100% - var(--s2)) var(--s), calc(100% - var(--s)) var(--s), calc(100% - var(--s)) var(--s2), 100% var(--s2), 100% calc(100% - var(--s2)), calc(100% - var(--s)) calc(100% - var(--s2)), calc(100% - var(--s)) calc(100% - var(--s)), calc(100% - var(--s2)) calc(100% - var(--s)), calc(100% - var(--s2)) 100%, var(--s2) 100%, var(--s2) calc(100% - var(--s)), var(--s) calc(100% - var(--s)), var(--s) calc(100% - var(--s2)), 0 calc(100% - var(--s2)), 0 var(--s2), var(--s) var(--s2), var(--s) var(--s), var(--s2) var(--s)); }
.hdr-bar::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--h-glass); box-shadow: inset 0 1px 0 var(--h-hl); }
.hdr-bar::after, .mm-panel::after, .hdr-sheet::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--h-ring); clip-path: polygon(evenodd, var(--s2) 0, calc(100% - var(--s2)) 0, calc(100% - var(--s2)) var(--s), calc(100% - var(--s)) var(--s), calc(100% - var(--s)) var(--s2), 100% var(--s2), 100% calc(100% - var(--s2)), calc(100% - var(--s)) calc(100% - var(--s2)), calc(100% - var(--s)) calc(100% - var(--s)), calc(100% - var(--s2)) calc(100% - var(--s)), calc(100% - var(--s2)) 100%, var(--s2) 100%, var(--s2) calc(100% - var(--s)), var(--s) calc(100% - var(--s)), var(--s) calc(100% - var(--s2)), 0 calc(100% - var(--s2)), 0 var(--s2), var(--s) var(--s2), var(--s) var(--s), var(--s2) var(--s), var(--s2) 0, calc(var(--s2) + 1px) 1px, calc(100% - var(--s2) - 1px) 1px, calc(100% - var(--s2) - 1px) calc(var(--s) + 1px), calc(100% - var(--s) - 1px) calc(var(--s) + 1px), calc(100% - var(--s) - 1px) calc(var(--s2) + 1px), calc(100% - 1px) calc(var(--s2) + 1px), calc(100% - 1px) calc(100% - var(--s2) - 1px), calc(100% - var(--s) - 1px) calc(100% - var(--s2) - 1px), calc(100% - var(--s) - 1px) calc(100% - var(--s) - 1px), calc(100% - var(--s2) - 1px) calc(100% - var(--s) - 1px), calc(100% - var(--s2) - 1px) calc(100% - 1px), calc(var(--s2) + 1px) calc(100% - 1px), calc(var(--s2) + 1px) calc(100% - var(--s) - 1px), calc(var(--s) + 1px) calc(100% - var(--s) - 1px), calc(var(--s) + 1px) calc(100% - var(--s2) - 1px), 1px calc(100% - var(--s2) - 1px), 1px calc(var(--s2) + 1px), calc(var(--s) + 1px) calc(var(--s2) + 1px), calc(var(--s) + 1px) calc(var(--s) + 1px), calc(var(--s2) + 1px) calc(var(--s) + 1px), calc(var(--s2) + 1px) 1px); }
/* soft shadow under the bar, drawn as a blurred stepped plate behind it (a clipped element cannot cast a box-shadow) */
.hdr-shadow { position: absolute; left: 30px; right: 30px; bottom: -10px; height: 26px; z-index: -3; background: var(--h-shadow-c, rgba(10, 30, 70, .18)); filter: blur(16px); pointer-events: none; }
[data-theme="dark"] .hdr-shadow { --h-shadow-c: rgba(0, 0, 0, .45); }
.hdr-row { height: 64px; display: flex; align-items: center; gap: 18px; padding: 0 18px 0 20px; }
.hdr-logo { position: relative; display: block; flex: none; width: 146px; }
.hdr-logo img { display: block; width: 146px; height: auto; }
.hdr-logo .lg-dark { display: none; }
[data-theme="dark"] .hdr-logo .lg-light { display: none; }
[data-theme="dark"] .hdr-logo .lg-dark { display: block; }
.hdr-nav { display: flex; align-items: center; gap: 2px; margin-left: 8px; }
.hdr-lnk { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 10px 13px; font: 600 15px/1 var(--f-head); color: var(--h-ink-2); text-decoration: none; cursor: pointer; list-style: none; transition: color 90ms var(--ease); }
.hdr-lnk::-webkit-details-marker { display: none; }
/* pixel hover: a square switches on beside the label and the underline builds from squares (90 ms, steps) */
.hdr-lnk::before { content: ""; position: absolute; left: 2px; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; background: var(--h-px); transform: scale(0); transition: transform 90ms var(--ease); }
.hdr-lnk::after { content: ""; position: absolute; left: 13px; right: 13px; bottom: 3px; height: 2px; background: repeating-linear-gradient(90deg, var(--h-px) 0 3px, transparent 3px 6px); transform: scaleX(0); transform-origin: left; transition: transform 90ms steps(6, end); }
.hdr-lnk:hover, .mm[open] > .hdr-lnk, .hdr-lnk:focus-visible { color: var(--h-ink); }
.hdr-lnk:hover::before, .mm[open] > .hdr-lnk::before, .hdr-lnk:focus-visible::before { transform: scale(1); }
.hdr-lnk:hover::after, .mm[open] > .hdr-lnk::after, .hdr-lnk:focus-visible::after { transform: scaleX(1); }
.mm-chev { width: 11px; height: 11px; transition: transform 200ms var(--ease); }
.mm[open] .mm-chev, .ms[open] .mm-chev { transform: rotate(180deg); }
.hdr-act { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.theme-btn { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 0; border: 0; background: transparent; color: var(--h-ink); cursor: pointer; position: relative; isolation: isolate; transition: transform var(--t-quick) var(--ease); }
.theme-btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--h-pill-ring); --s: 4px; --s2: 8px; clip-path: polygon(evenodd, var(--s2) 0, calc(100% - var(--s2)) 0, calc(100% - var(--s2)) var(--s), calc(100% - var(--s)) var(--s), calc(100% - var(--s)) var(--s2), 100% var(--s2), 100% calc(100% - var(--s2)), calc(100% - var(--s)) calc(100% - var(--s2)), calc(100% - var(--s)) calc(100% - var(--s)), calc(100% - var(--s2)) calc(100% - var(--s)), calc(100% - var(--s2)) 100%, var(--s2) 100%, var(--s2) calc(100% - var(--s)), var(--s) calc(100% - var(--s)), var(--s) calc(100% - var(--s2)), 0 calc(100% - var(--s2)), 0 var(--s2), var(--s) var(--s2), var(--s) var(--s), var(--s2) var(--s), var(--s2) 0, calc(var(--s2) + 1px) 1px, calc(100% - var(--s2) - 1px) 1px, calc(100% - var(--s2) - 1px) calc(var(--s) + 1px), calc(100% - var(--s) - 1px) calc(var(--s) + 1px), calc(100% - var(--s) - 1px) calc(var(--s2) + 1px), calc(100% - 1px) calc(var(--s2) + 1px), calc(100% - 1px) calc(100% - var(--s2) - 1px), calc(100% - var(--s) - 1px) calc(100% - var(--s2) - 1px), calc(100% - var(--s) - 1px) calc(100% - var(--s) - 1px), calc(100% - var(--s2) - 1px) calc(100% - var(--s) - 1px), calc(100% - var(--s2) - 1px) calc(100% - 1px), calc(var(--s2) + 1px) calc(100% - 1px), calc(var(--s2) + 1px) calc(100% - var(--s) - 1px), calc(var(--s) + 1px) calc(100% - var(--s) - 1px), calc(var(--s) + 1px) calc(100% - var(--s2) - 1px), 1px calc(100% - var(--s2) - 1px), 1px calc(var(--s2) + 1px), calc(var(--s) + 1px) calc(var(--s2) + 1px), calc(var(--s) + 1px) calc(var(--s) + 1px), calc(var(--s2) + 1px) calc(var(--s) + 1px), calc(var(--s2) + 1px) 1px); transition: background-color 100ms; }
.theme-btn:hover::before { background: var(--h-acc); }
.theme-btn:active { transform: scale(.94); }
.theme-btn svg { width: 19px; height: 19px; grid-area: 1 / 1; transition: transform var(--t-slow) var(--ease), opacity var(--t-std) var(--ease); }
.theme-btn .moon { opacity: 0; transform: rotate(-90deg) scale(.6); }
[data-theme="dark"] .theme-btn .sun { opacity: 0; transform: rotate(90deg) scale(.6); }
[data-theme="dark"] .theme-btn .moon { opacity: 1; transform: none; }
.hdr-lang { font: 700 13px/1 var(--f-head); letter-spacing: .1em; text-decoration: none; color: var(--h-muted); padding: 8px 4px; }
.hdr-lang:hover { color: var(--h-acc); }
/* phone pill: the chamfered-button technique (outer = border colour, inner plate 1 px in) */
.hdr-pill { --c: 8px; position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 16px; font: 700 14px/1 var(--f-head); letter-spacing: .02em; color: var(--h-ink); text-decoration: none; white-space: nowrap; background: var(--h-pill-ring);
  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); transition: color 100ms var(--ease); }
.hdr-pill::before { content: ""; position: absolute; inset: 1px; z-index: -1; background: var(--h-pill); transition: background-color 100ms var(--ease);
  clip-path: polygon(calc(var(--c) - .4px) 0, 100% 0, 100% calc(100% - var(--c) + .4px), calc(100% - var(--c) + .4px) 100%, 0 100%, 0 calc(var(--c) - .4px)); }
.hdr-pill:hover { color: var(--h-acc); }
.hdr-pill:hover::before { background: var(--h-pill-h); }
.hdr-cta { --pxf: #7FEFFF; }
/* second row: status line, a divider made of squares with one lit pixel scanning along it */
.hdr-strip { position: relative; display: flex; align-items: center; gap: 18px; height: 34px; padding: 0 16px 0 20px; overflow: hidden; transition: height 280ms var(--ease), opacity 280ms var(--ease); }
.hdr-strip::before { content: ""; position: absolute; top: 0; left: 20px; right: 16px; height: 2px; background: repeating-linear-gradient(90deg, var(--h-dots) 0 2px, transparent 2px 6px); }
.hs-scan { position: absolute; top: 0; left: 20px; right: 16px; height: 2px; background: linear-gradient(var(--h-px), var(--h-px)) no-repeat 0 0 / 10px 2px; }
.hs-lbl { display: inline-flex; align-items: center; gap: 9px; font: 700 11px/1 var(--f-head); letter-spacing: .2em; text-transform: uppercase; color: var(--h-muted); white-space: nowrap; }
.hs-lbl i { width: 6px; height: 6px; background: #1FBF6A; }
.hs-txt { flex: 1; min-width: 0; text-align: center; font-size: 13px; color: var(--h-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hs-go { display: inline-flex; align-items: center; gap: 6px; font: 700 12.5px/1 var(--f-head); color: var(--h-acc); text-decoration: none; white-space: nowrap; }
.hs-go .arr { width: 13px; height: 13px; }
.hs-go:hover .arr { transform: translateX(3px); }
.hdr.is-scrolled .hdr-strip { height: 0; opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .hs-scan { animation: hsScan 7s linear infinite; }
  .hs-lbl i { animation: hsBlink 2s cubic-bezier(.45, 0, .55, 1) infinite; }
}
@keyframes hsScan { from { background-position: 0 0; } to { background-position: 100% 0; } }
@keyframes hsBlink { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
/* mega menu: a <details> disclosure; the panel spans the bar and opens with a stepped (pixel) wipe */
.mm { position: static; }
.mm > summary { list-style: none; }
.mm-panel { position: absolute; top: calc(100% + 10px); left: 0; right: 0; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, .74fr); gap: 26px; padding: 26px 26px 24px; color: var(--h-ink); background: var(--h-panel);
  -webkit-mask: linear-gradient(#000 0 0) top / 100% 100% no-repeat; mask: linear-gradient(#000 0 0) top / 100% 100% no-repeat; }
.mm-lbl { margin-bottom: 10px; padding-left: 10px; font: 700 11px/1 var(--f-head); letter-spacing: .2em; text-transform: uppercase; color: var(--h-muted); }
.mm-svc { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.mm-item { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 10px; text-decoration: none; color: inherit; transition: background-color 90ms var(--ease); }
.mm-item:hover, .mm-row:hover, .mm-item:focus-visible, .mm-row:focus-visible { background: var(--h-hover); }
.mm-item::before, .mm-row::before { content: ""; position: absolute; left: 0; top: 0; width: 4px; height: 4px; background: var(--h-px); transform: scale(0); transition: transform 90ms var(--ease); }
.mm-item:hover::before, .mm-row:hover::before, .mm-item:focus-visible::before, .mm-row:focus-visible::before { transform: scale(1); }
.mm-ic { --c: 7px; flex: none; width: 46px; height: 46px; display: grid; place-items: center; color: var(--h-acc); background: var(--h-ic);
  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); }
.mm-ic .ico { width: 32px; height: 32px; }
.mm-tx b, .mm-row b { display: block; font: 700 14.5px/1.2 var(--f-head); color: var(--h-ink); }
.mm-tx small, .mm-row small { display: block; margin-top: 4px; font-size: 12.5px; line-height: 1.42; color: var(--h-muted); }
.mm-ind ul { display: grid; gap: 0; }
.mm-row { position: relative; display: block; padding: 7px 10px; text-decoration: none; color: inherit; transition: background-color 90ms var(--ease); }
.mm-row small { margin-top: 2px; font-size: 12px; }
.mm-all { display: inline-flex; align-items: center; gap: 6px; margin: 12px 0 0 10px; font: 700 13px/1 var(--f-head); color: var(--h-acc); text-decoration: none; }
.mm-all .arr { width: 13px; height: 13px; transition: transform 200ms var(--ease); }
.mm-all:hover .arr { transform: translateX(3px); }
.mm-feat { --c: 14px; position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; gap: 10px; padding: 22px 20px; text-decoration: none; color: #fff;
  background: linear-gradient(165deg, #0B3470 0%, #0A1F44 55%, #0A1428 100%); clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); }
.mm-feat-px .pxg { position: absolute; inset: 0; z-index: -1; display: grid; grid-template-columns: repeat(7, 1fr); grid-auto-rows: 1fr; pointer-events: none; }
.mm-feat-px .pxg i { background: var(--cyan); opacity: 0; transition: opacity 90ms var(--ease) var(--d, 0ms); }
.mm-feat:hover .pxg i, .mm-feat:focus-visible .pxg i { opacity: .16; }
.mm-feat-k { font: 700 11px/1 var(--f-head); letter-spacing: .2em; text-transform: uppercase; color: var(--cyan); }
.mm-feat b { font: 800 21px/1.15 var(--f-head); letter-spacing: -.01em; }
.mm-feat small { font-size: 13px; line-height: 1.5; color: #B9C8E4; }
.mm-feat-mk { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.mm-feat-mk i { --c: 6px; display: grid; place-items: center; width: 38px; height: 38px; background: #fff; color: #0A1428; clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); }
.mm-feat-mk .mk { width: 20px; height: 20px; }
.mm-feat-mk .mk .mk-ink { fill: #0A1428; }
.mm-feat-go { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 8px; font: 700 13px/1 var(--f-head); color: var(--cyan); }
.mm-feat-go .arr { width: 13px; height: 13px; }
@media (prefers-reduced-motion: no-preference) {
  .mm[open] .mm-panel { animation: pxWipe 240ms steps(8, end) both; }
  .mm[open] .mm-panel li, .mm[open] .mm-feat, .mm[open] .mm-lbl, .mm[open] .mm-all { animation: mmItem 200ms var(--ease) both; animation-delay: calc(60ms + var(--i, 0) * 30ms); }
  .mm.is-closing .mm-panel { animation: mmOut 160ms var(--ease-in) both; }
}
@keyframes pxWipe { from { -webkit-mask-size: 100% 0%; mask-size: 100% 0%; } to { -webkit-mask-size: 100% 100%; mask-size: 100% 100%; } }
@keyframes mmItem { from { opacity: 0; transform: translateY(8px); } }
@keyframes mmOut { to { opacity: 0; transform: translateY(-4px); } }
/* phone menu: a matching stepped glass sheet below the bar */
.hdr-m { display: none; }
.hdr-m > summary { list-style: none; width: 42px; height: 42px; display: grid; place-content: center; gap: 6px; cursor: pointer; position: relative; isolation: isolate; }
.hdr-m > summary::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--h-pill-ring); --s: 4px; --s2: 8px; clip-path: polygon(evenodd, var(--s2) 0, calc(100% - var(--s2)) 0, calc(100% - var(--s2)) var(--s), calc(100% - var(--s)) var(--s), calc(100% - var(--s)) var(--s2), 100% var(--s2), 100% calc(100% - var(--s2)), calc(100% - var(--s)) calc(100% - var(--s2)), calc(100% - var(--s)) calc(100% - var(--s)), calc(100% - var(--s2)) calc(100% - var(--s)), calc(100% - var(--s2)) 100%, var(--s2) 100%, var(--s2) calc(100% - var(--s)), var(--s) calc(100% - var(--s)), var(--s) calc(100% - var(--s2)), 0 calc(100% - var(--s2)), 0 var(--s2), var(--s) var(--s2), var(--s) var(--s), var(--s2) var(--s), var(--s2) 0, calc(var(--s2) + 1px) 1px, calc(100% - var(--s2) - 1px) 1px, calc(100% - var(--s2) - 1px) calc(var(--s) + 1px), calc(100% - var(--s) - 1px) calc(var(--s) + 1px), calc(100% - var(--s) - 1px) calc(var(--s2) + 1px), calc(100% - 1px) calc(var(--s2) + 1px), calc(100% - 1px) calc(100% - var(--s2) - 1px), calc(100% - var(--s) - 1px) calc(100% - var(--s2) - 1px), calc(100% - var(--s) - 1px) calc(100% - var(--s) - 1px), calc(100% - var(--s2) - 1px) calc(100% - var(--s) - 1px), calc(100% - var(--s2) - 1px) calc(100% - 1px), calc(var(--s2) + 1px) calc(100% - 1px), calc(var(--s2) + 1px) calc(100% - var(--s) - 1px), calc(var(--s) + 1px) calc(100% - var(--s) - 1px), calc(var(--s) + 1px) calc(100% - var(--s2) - 1px), 1px calc(100% - var(--s2) - 1px), 1px calc(var(--s2) + 1px), calc(var(--s) + 1px) calc(var(--s2) + 1px), calc(var(--s) + 1px) calc(var(--s) + 1px), calc(var(--s2) + 1px) calc(var(--s) + 1px), calc(var(--s2) + 1px) 1px); }
.hdr-m > summary::-webkit-details-marker, .ms > summary::-webkit-details-marker { display: none; }
.hdr-m > summary span { width: 16px; height: 1.6px; background: var(--h-ink); transition: transform var(--t-std) var(--ease); }
.hdr-m[open] > summary span:first-child { transform: translateY(3.8px) rotate(45deg); }
.hdr-m[open] > summary span:last-child { transform: translateY(-3.8px) rotate(-45deg); }
.hdr-sheet { position: absolute; top: calc(100% + 8px); left: 0; right: 0; isolation: isolate; max-height: calc(100svh - 132px); overflow-y: auto; overscroll-behavior: contain; padding: 10px 18px 22px; color: var(--h-ink); background: var(--h-panel);
  -webkit-mask: linear-gradient(#000 0 0) top / 100% 100% no-repeat; mask: linear-gradient(#000 0 0) top / 100% 100% no-repeat; }
.ms > summary, .ms-lnk { display: flex; align-items: center; justify-content: space-between; padding: 15px 2px; font: 700 20px/1 var(--f-head); color: var(--h-ink); text-decoration: none; cursor: pointer; list-style: none;
  background: repeating-linear-gradient(90deg, var(--h-dots) 0 2px, transparent 2px 6px) bottom / 100% 2px no-repeat; }
.ms > summary .mm-chev { width: 14px; height: 14px; }
.ms-list { display: grid; padding: 6px 0 10px; }
.ms-list a { display: block; padding: 9px 4px 9px 12px; text-decoration: none; color: inherit; border-left: 2px solid var(--h-px); }
.ms-list b { display: block; font: 700 15.5px/1.25 var(--f-head); color: var(--h-ink); }
.ms-list small { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.4; color: var(--h-muted); }
.ms-list .ms-all { font: 700 14px/1 var(--f-head); color: var(--h-acc); padding-top: 12px; }
.ms-act { display: grid; gap: 10px; margin-top: 18px; }
.ms-act .hdr-pill { min-height: 48px; }
@media (prefers-reduced-motion: no-preference) {
  .hdr-m[open] .hdr-sheet { animation: pxWipe 300ms steps(10, end) both; }
  .hdr-m[open] .hdr-sheet > * { animation: mmItem 200ms var(--ease) both; animation-delay: 90ms; }
  .hdr-m[open] .hdr-sheet > :nth-child(2) { animation-delay: 120ms; } .hdr-m[open] .hdr-sheet > :nth-child(3) { animation-delay: 150ms; }
  .hdr-m[open] .hdr-sheet > :nth-child(4) { animation-delay: 180ms; } .hdr-m[open] .hdr-sheet > :nth-child(5) { animation-delay: 210ms; }
  .hdr-m[open] .hdr-sheet > :nth-child(n+6) { animation-delay: 240ms; }
}

/* ---------- main sits over the footer ---------- */
#main { position: relative; z-index: 2; background: var(--bg); transition: background-color var(--t-std) var(--ease); }
.ftr-fixed #main { box-shadow: 0 40px 60px -20px rgba(0, 0, 0, .35); }

/* ---------- hero ---------- */
.hero { position: relative; min-height: max(760px, 100svh); padding: 168px 0 40px; display: flex; flex-direction: column; align-items: center; overflow: hidden; }
.hero-field { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.hero-px { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.hero-px i { position: absolute; width: 10px; height: 10px; background: var(--accent); filter: blur(.6px); opacity: 0; }
.hero-in { position: relative; z-index: 2; width: var(--wrap); text-align: center; display: flex; flex-direction: column; align-items: center; }
.hero-in .ln-i { transform-origin: 50% 50%; }
.hero-sub { max-width: 62ch; margin-top: 26px; font-size: clamp(17px, 1.4vw, 20px); color: var(--ink-2); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 34px; }
.corner { position: absolute; z-index: 2; font: 700 11px/1 var(--f-head); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.corner.c1 { top: 134px; left: 32px; } .corner.c2 { top: 134px; right: 32px; }
.corner.c3 { bottom: 34px; left: 32px; } .corner.c4 { bottom: 34px; right: 32px; }
/* lead timeline (round 3b): four events on a pixel-stepped path that climbs to "Booked" */
.flow { position: relative; z-index: 2; width: var(--wrap); max-width: 1180px; margin-top: 124px; }   /* round 4: room for the floating rider above the line; round 5: the rider is 112 px (was 92) so the pointing arm reads */
.flow-plane { position: relative; transform-style: preserve-3d; will-change: transform; }
.flow-path { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.fp-base { fill: none; stroke: var(--line-2); stroke-width: 2; stroke-dasharray: 4 4; }
.fp-lit { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: square; filter: drop-shadow(0 0 6px rgba(0, 187, 255, .55)); }
.flow-packet { position: absolute; left: 0; top: 0; width: 12px; height: 12px; margin: -6px 0 0 -6px; background: var(--cyan); box-shadow: 0 0 0 3px rgba(0, 230, 255, .22), 0 0 18px 4px rgba(0, 200, 255, .55); opacity: 0; pointer-events: none; }
.flow-steps { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; align-items: start; }
.fl-step { --lift: calc((3 - var(--i)) * 34px); position: relative; padding-top: var(--lift); display: grid; justify-items: start; gap: 18px; }
.fl-node { position: relative; width: 20px; height: 20px; margin-left: 18px; background: var(--bg); border: 2px solid var(--line-2); transition: background-color 240ms var(--ease), border-color 240ms var(--ease), box-shadow 240ms var(--ease); }
.fl-node i { position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px 0 0 -2px; background: var(--cyan); opacity: 0; }
.fl-card { --c: 12px; position: relative; isolation: isolate; width: 100%; padding: 16px 18px 17px; text-align: left; background: var(--line-2);
  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); }
.fl-card::before { content: ""; position: absolute; inset: 1px; z-index: -1; background: var(--surface);
  clip-path: polygon(calc(var(--c) - .4px) 0, 100% 0, 100% calc(100% - var(--c) + .4px), calc(100% - var(--c) + .4px) 100%, 0 100%, 0 calc(var(--c) - .4px)); }
.fl-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 9px; }
.fl-k { font: 700 10.5px/1 var(--f-head); letter-spacing: .18em; text-transform: uppercase; color: var(--accent-ink); }
.fl-t { font: 700 12px/1 var(--f-head); font-variant-numeric: tabular-nums; color: var(--muted); }
.fl-main { display: flex; align-items: center; gap: 8px; font: 700 15.5px/1.25 var(--f-head); color: var(--ink); }
.fl-src { flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; color: var(--ink); }
.fl-src:empty { display: none; }
.fl-src .mk { width: 18px; height: 18px; }
.fl-sub { margin-top: 5px; font-size: 13px; line-height: 1.4; color: var(--ink-2); }
.fl-ok { flex: none; width: 18px; height: 18px; color: #12A85A; stroke-dasharray: 20; stroke-dashoffset: 0; }
.flow-cap { margin-top: 20px; font-size: 12px; color: var(--muted); text-align: center; }
/* lit state: every node on (no JS, reduced motion, and each step as the packet arrives) */
.flow.is-lit .fl-node, .fl-step.on .fl-node { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 4px rgba(0, 187, 255, .16), 0 0 18px rgba(0, 187, 255, .45); }
.fl-step:last-child.on .fl-node, .flow.is-lit .fl-step:last-child .fl-node { background: #2BD67B; border-color: #2BD67B; box-shadow: 0 0 0 4px rgba(43, 214, 123, .18), 0 0 18px rgba(43, 214, 123, .5); }
@media (prefers-reduced-motion: no-preference) {
  .flow.is-run .fl-card { opacity: 0; transform: translateY(20px); }
  .flow.is-run .fl-step.on .fl-card { opacity: 1; transform: none; transition: transform 340ms var(--ease) 80ms, opacity 340ms var(--ease) 80ms; }
  .flow.is-run .fl-step.out .fl-card { opacity: 0; transform: translateY(8px); transition: transform 220ms var(--ease-in) calc(var(--o, 0) * 40ms), opacity 220ms var(--ease-in) calc(var(--o, 0) * 40ms); }
  .flow.is-run .fl-step.on .fl-node { animation: nodeOn 240ms var(--ease) both; }
  .flow.is-run .fl-step.on .fl-node i { animation: burst 400ms var(--ease) both; }
  .flow.is-run .fl-step.on .fl-node i:nth-child(1) { --bx: -12px; --by: -12px; } .flow.is-run .fl-step.on .fl-node i:nth-child(2) { --bx: 12px; --by: -12px; }
  .flow.is-run .fl-step.on .fl-node i:nth-child(3) { --bx: 12px; --by: 12px; } .flow.is-run .fl-step.on .fl-node i:nth-child(4) { --bx: -12px; --by: 12px; }
  .flow.is-run .fl-step:last-child .fl-ok { stroke-dashoffset: 20; }
  .flow.is-run .fl-step:last-child.on .fl-ok { stroke-dashoffset: 0; transition: stroke-dashoffset 320ms var(--ease) 260ms; }
}
/* no JS: the SVG path is never measured, so CSS draws the staircase between the lit nodes (Codex, round 3b) */
.no-js .fl-step:not(:last-child)::after, .no-js .fl-step:not(:last-child)::before { content: ""; position: absolute; pointer-events: none; border: 0 solid var(--accent); }
.no-js .fl-step:not(:last-child)::after { left: 28px; top: calc(var(--lift) - 24px); width: calc(50% + 13px); height: 34px; border-bottom-width: 2px; border-right-width: 2px; }
.no-js .fl-step:not(:last-child)::before { left: calc(28px + 50% + 13px); top: calc(var(--lift) - 24px); width: calc(50% + 3px); border-top-width: 2px; }
@media (max-width: 979px) {
  .no-js .fl-step:not(:last-child)::after { left: 9px; top: 50%; width: 0; height: calc(100% + 14px); border-bottom-width: 0; border-right-width: 2px; }
  .no-js .fl-step:not(:last-child)::before { display: none; }
}
/* round 3e + round 4: the mascot rider. It floats 36 px above the line with a soft shadow ON the line, turns through a
   9-frame yaw sprite (Higgsfield turntable, tools/v2/key_turn.py), banks into the turns and pitches on the climbs, all
   driven by v2.js heroFlow() from the path's own heading. Numbers: DESIGN.md "Round 4". */
.flow-rider { --rs: 112px; --rise: 34px; position: absolute; left: 0; top: 0; z-index: 3; width: var(--rs); height: var(--rs); margin: calc(-1 * (var(--rs) + var(--rise)) + 6px) 0 0 calc(var(--rs) / -2); pointer-events: none; will-change: transform; perspective: 520px; }
.no-js .flow-rider, .no-js .flow-shadow { display: none; }
.fr-in { display: block; width: 100%; height: 100%; transform-origin: 50% 88%; transform-style: preserve-3d; transition: opacity 260ms var(--ease), scale 260ms var(--ease); }
.flow-rider .m-stage { width: 100%; filter: drop-shadow(0 12px 14px rgba(0, 120, 220, .26)); animation: none; }
[data-theme="dark"] .flow-rider .m-stage { filter: drop-shadow(0 0 9px rgba(0, 200, 255, .5)) drop-shadow(0 10px 12px rgba(0, 0, 0, .4)); }
.m-stage > .fr-spr { opacity: 0; background: url("/assets/img/v2/mascot-glide@2x.webp") 0 0 / 900% 100% no-repeat; }   /* round 5: the neutral glide pose (arms down), not the old raised-hand pose */
.flow-rider.spr-on .m-poster { opacity: 0; }
.flow-rider.spr-on .m-stage > .fr-spr { opacity: 1; }
/* round 5: while a point or celebrate clip plays (v2.js adds .clip) the clip layer replaces the sprite; the clips start and end on sprite frame 0 */
.flow-rider.clip .m-stage > .fr-spr { opacity: 0; }
.flow-rider.gone .fr-in { opacity: 0; scale: .85; transition: opacity 220ms var(--ease-in), scale 220ms var(--ease-in); }
/* the shadow lies on the line under the rider; it spreads and softens when the rider lifts (counter-motion, choreography.md L19) */
.flow-shadow { position: absolute; left: 0; top: 0; z-index: 2; width: 54px; height: 13px; margin: -6px 0 0 -27px; border-radius: 50%; pointer-events: none; opacity: 0; filter: blur(1.5px);
  background: radial-gradient(50% 50% at 50% 50%, rgba(0, 50, 120, .4), rgba(0, 50, 120, 0) 72%); transition: opacity 260ms var(--ease); will-change: transform; }
[data-theme="dark"] .flow-shadow { background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0) 72%); }
.flow-shadow.on { opacity: 1; }
/* round 5: two chevrons bounce twice between the rider and the node while it points down at it (v2.js adds .pt for 1.5 s) */
.fr-ping { position: absolute; left: 50%; bottom: -24px; width: 16px; height: 24px; margin-left: -8px; opacity: 0; pointer-events: none; }
.fr-ping::before, .fr-ping::after { content: ""; position: absolute; left: 3px; width: 9px; height: 9px; border-right: 3px solid var(--accent); border-bottom: 3px solid var(--accent); transform: rotate(45deg); }
.fr-ping::before { top: 0; } .fr-ping::after { top: 10px; opacity: .55; }
@media (prefers-reduced-motion: no-preference) { .flow-rider.pt .fr-ping { animation: pingDown 1400ms cubic-bezier(.2, 0, 0, 1) both; } }
@keyframes pingDown { 0% { opacity: 0; translate: 0 -8px; } 18% { opacity: 1; translate: 0 0; } 36% { translate: 0 6px; } 54% { translate: 0 0; } 72% { translate: 0 6px; opacity: 1; } 100% { opacity: 0; translate: 0 8px; }
}
.flow-shadow i { position: absolute; inset: 0; border-radius: inherit; background: inherit; }
@media (prefers-reduced-motion: no-preference) {
  .flow-rider:not(.gone) .m-stage { animation: riderFloat 1700ms cubic-bezier(.45, 0, .55, 1) infinite; }
  .flow-rider.hop .fr-in { animation: riderHop 420ms both; }
  .flow-shadow.hop i { animation: shadowHop 420ms both; }
  .flow.is-run .fl-step.on .fl-node::after { content: ""; position: absolute; inset: -3px; border: 2px solid var(--accent); pointer-events: none; animation: nodeRing 720ms var(--ease) both; }
  .flow.is-run .fl-step:last-child.on .fl-node::after { border-color: #2BD67B; }
}
@keyframes riderFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5px; } }
@keyframes riderHop { 0% { translate: 0 0; scale: 1.05 .95; animation-timing-function: cubic-bezier(.2, 0, 0, 1); } 16% { scale: 1; }
  48% { translate: 0 calc(var(--hop, 14px) * -1); animation-timing-function: cubic-bezier(.175, .885, .32, 1.275); } 100% { translate: 0 0; scale: 1; } }
@keyframes shadowHop { 0%, 100% { scale: 1; opacity: 1; } 48% { scale: 1.28 1.1; opacity: .55; } }
@keyframes nodeRing { 0% { opacity: .85; transform: scale(1); } 100% { opacity: 0; transform: scale(2.9); } }
@keyframes nodeOn { 0% { transform: scale(.6); } 70% { transform: scale(1.03); } 100% { transform: scale(1); } }
@keyframes burst { 0% { opacity: 1; transform: translate(0, 0); } 100% { opacity: 0; transform: translate(var(--bx), var(--by)); } }
.hero-stats { position: relative; z-index: 2; width: var(--wrap); max-width: 1080px; margin-top: auto; padding-top: 70px; display: grid; grid-template-columns: repeat(4, 1fr); }
.hero-stats li { padding: 18px 22px; border-left: 1px solid var(--line-2); display: grid; gap: 4px; align-content: start; }
.hero-stats li:first-child { border-left: 0; }
.hero-stats strong { font: 800 30px/1 var(--f-head); letter-spacing: -.02em; }
.hero-stats span { font-size: 13.5px; color: var(--muted); line-height: 1.35; }
.hero-stats .stars { color: #F5B400; font-size: 13px; letter-spacing: 2px; }
.scroll-cue { position: absolute; z-index: 2; left: 50%; bottom: 10px; width: 34px; height: 34px; margin-left: -17px; color: var(--muted); animation: cue 2.4s var(--ease) infinite; }
@keyframes cue { 0%, 100% { transform: translateY(0); opacity: .5; } 50% { transform: translateY(6px); opacity: 1; } }

/* ---------- tilted client strip ----------
   Round 4: the logos keep their ORIGINAL colours, so the strip changed instead. Light theme: near-white glass with thin
   cyan pixel edges; dark theme: a navy strip. Each logo is the file made for that background (tools/v2/client_logos.py),
   never a plate behind it. Tilt, one looping row and the scroll-velocity speed-up are unchanged. */
.marquee { --mq-bg: linear-gradient(180deg, rgba(255, 255, 255, .94), rgba(255, 255, 255, .8)); --mq-ink: #0A1428; --mq-edge: rgba(0, 187, 255, .75); --mq-glow: rgba(0, 187, 255, .28);
  position: relative; z-index: 3; background: var(--mq-bg); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); color: var(--mq-ink);
  transform: rotate(-1.6deg) scale(1.04); margin: 10px 0 0; padding: 17px 0; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(0, 187, 255, .22), 0 14px 34px -18px var(--mq-glow), 0 -10px 30px -22px var(--mq-glow); }
/* round 5 (his words: "the white bar with the logo original colors works better"): the strip stays a LIGHT strip in dark mode too, a
   near-opaque white-to-ice gradient so the original colours always read, with a brighter cyan glow to sit on the navy page */
[data-theme="dark"] .marquee { --mq-bg: linear-gradient(180deg, #FFFFFF, #EEF4FC); --mq-ink: #0A1428; --mq-edge: rgba(0, 187, 255, .85); --mq-glow: rgba(0, 200, 255, .5);
  box-shadow: 0 0 0 1px rgba(0, 214, 255, .45), 0 16px 40px -14px var(--mq-glow), 0 -12px 34px -18px var(--mq-glow); }
/* pixel edges: a row of 6 px squares along the top and bottom, a thin cyan line behind them */
.marquee::before, .marquee::after { content: ""; position: absolute; left: 0; right: 0; height: 6px; z-index: 2; pointer-events: none;
  background: linear-gradient(90deg, var(--mq-edge) 0 6px, transparent 6px 16px) 0 0 / 16px 6px repeat-x; opacity: .85; }
.marquee::before { top: 0; -webkit-mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee::after { bottom: 0; background-position: 8px 0; -webkit-mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.mq-track { display: flex; width: max-content; will-change: transform; }
.mq-set { display: flex; align-items: center; gap: 26px; padding-right: 26px; font: 700 15px/1 var(--f-head); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.mq-lbl { color: var(--mq-ink); opacity: .72; }
.mq-sep { width: 8px; height: 8px; background: var(--accent); }
.v2-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
/* logo row: equal visual area, even spacing, original colours */
.mq-logos { display: grid; gap: 14px; padding: 20px 0 19px; }
.mq-row { overflow: hidden; }
.mq-logos .mq-set { gap: 44px; padding-right: 44px; margin: 0; list-style: none; }
.mq-logos .mq-set li { flex: none; display: flex; align-items: center; }
.mq-logos .mq-sep { width: 6px; height: 6px; opacity: .8; }
.mq-logo img { display: block; width: auto; height: var(--h); }

/* ---------- AI search scene ---------- */
.search { position: relative; padding-top: 150px; background: linear-gradient(180deg, var(--bg) 0%, var(--tint) 48%, var(--tint) 100%); }
.search-head { max-width: 1240px; }
.search-stage { position: relative; height: 560vh; }   /* round 4: three steps (30%), then four group beats (17.5% each) */
.search-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; align-items: center; overflow: hidden; }
.search-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 60px; align-items: center; }
.steps { display: grid; gap: 8px; counter-reset: s; }
.step { position: relative; padding: 22px 0 22px 28px; border-left: 1.5px solid var(--line); transition: opacity var(--t-std) var(--ease), border-color var(--t-std) var(--ease); }
.steps-anim .step { opacity: .38; }
.steps-anim .step.on { opacity: 1; border-color: var(--accent); }
.step-n { display: block; font: 700 12px/1 var(--f-head); letter-spacing: .16em; color: var(--accent-ink); margin-bottom: 10px; }
.step h3 { font-size: clamp(21px, 1.8vw, 26px); line-height: 1.15; font-weight: 700; letter-spacing: -.015em; }
.step p { margin-top: 10px; color: var(--ink-2); font-size: 16px; max-width: 46ch; }
.step .tlink { margin-top: 12px; }
.search-rail { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--line); }
.search-rail i { display: block; height: 100%; width: 100%; background: var(--accent); transform: scaleX(0); transform-origin: 0 50%; }
.phone-wrap { position: relative; isolation: isolate; display: grid; place-items: center; min-height: 640px; }
/* the soft panel behind the phone (the Comrade reference) */
.phone-wrap::before { content: ""; position: absolute; z-index: -1; left: -4%; right: -18vw; top: 50%; height: 460px; transform: translateY(-50%); border-radius: 28px 0 0 28px; background: linear-gradient(160deg, var(--tint-2), color-mix(in srgb, var(--tint-2) 55%, var(--surface))); border: 1px solid var(--line); border-right: 0; }
.chip-mk { width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--line); font-style: normal; }
.mk { width: 24px; height: 24px; display: block; }
.mk .mk-ink { fill: var(--ink); }
.phone { position: relative; z-index: 2; width: 300px; height: 612px; border-radius: 48px; background: #060D1C; padding: 11px; box-shadow: 0 0 0 1.5px #1D2C4B inset, var(--shadow), 0 60px 120px -40px rgba(0, 120, 220, .35); }
.ph-notch { position: absolute; z-index: 3; top: 21px; left: 50%; width: 92px; height: 26px; margin-left: -46px; background: #060D1C; border-radius: 20px; }
.ph-bar { position: absolute; z-index: 2; top: 24px; left: 34px; right: 34px; display: flex; justify-content: space-between; font: 700 13px/1 var(--f-head); color: var(--win-ink); }
.ph-ico { width: 24px; height: 11px; border: 1.5px solid currentColor; border-radius: 3px; opacity: .7; }
.ph-app { height: 100%; border-radius: 38px; background: var(--win); color: var(--win-ink); padding: 66px 18px 18px; display: flex; flex-direction: column; gap: 12px; overflow: hidden; }
.ph-title { font: 700 14px/1 var(--f-head); color: var(--win-muted); }
.spark { color: var(--accent); }
.ph-q { position: relative; min-height: 68px; padding: 12px 14px; border-radius: 16px; background: var(--win-2); border: 1px solid var(--win-line); font: 600 14.5px/1.4 var(--f-body); }
.caret { display: inline-block; width: 1.5px; height: 16px; margin-left: 1px; background: var(--accent); vertical-align: -3px; animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.ph-think { display: flex; gap: 5px; height: 10px; padding-left: 4px; }
.ph-think i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: think 1s var(--ease) infinite; }
.ph-think i:nth-child(2) { animation-delay: .15s; } .ph-think i:nth-child(3) { animation-delay: .3s; }
@keyframes think { 0%, 100% { transform: translateY(0); opacity: .4; } 50% { transform: translateY(-4px); opacity: 1; } }
.ph-intro { font-size: 13.5px; color: var(--win-muted); }
.ph-res { display: grid; gap: 9px; }
.res { position: relative; display: flex; align-items: center; gap: 11px; padding: 11px 12px; border-radius: 14px; border: 1px solid var(--win-line); background: var(--win); }
.res-av { width: 34px; height: 34px; flex: none; border-radius: 10px; display: grid; place-items: center; font: 800 15px/1 var(--f-head); background: var(--win-2); color: var(--win-muted); }
.res-txt { display: grid; gap: 3px; min-width: 0; }
.res-txt b { font: 700 14px/1.15 var(--f-head); }
.res-txt small { font-size: 11.5px; color: var(--win-muted); line-height: 1.3; }
.res { transition: box-shadow var(--t-std) var(--ease), border-color var(--t-std) var(--ease); }
.res.you.lit, .no-js .res.you { border-color: transparent; box-shadow: 0 0 0 2px var(--accent), 0 14px 30px -12px rgba(0, 187, 255, .5); }
.res.you .res-av { background: var(--acc-grad); color: #fff; }
.res-tag { transition: opacity var(--t-std) var(--ease), transform var(--t-std) var(--ease); }
.js .res.you:not(.lit) .res-tag { opacity: 0; transform: translateY(4px); }
.res-tag { position: absolute; top: -9px; right: 10px; padding: 4px 8px; border-radius: 6px; background: var(--accent); color: #0A1428; font: 800 10px/1 var(--f-head); letter-spacing: .08em; text-transform: uppercase; }
.ph-call { margin-top: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.ph-call span { text-align: center; padding: 11px 0; border-radius: 12px; font: 700 12.5px/1 var(--f-head); background: var(--win-2); }
.ph-call span:first-child { background: var(--accent); color: #0A1428; }

/* ---------- services: pinned horizontal track ---------- */
.svc { position: relative; background: var(--bg-2); overflow-x: clip; transition: background-color var(--t-std) var(--ease); }
.svc-lines { position: absolute; inset: auto 0 0; width: 100%; height: 70%; pointer-events: none; }
.svc-lines path { fill: none; stroke: var(--accent); stroke-width: 1.2; vector-effect: non-scaling-stroke; opacity: .55; }
.svc-pin { position: relative; height: 100vh; height: 100svh; display: flex; align-items: center; gap: 64px; padding-left: max(16px, calc((100vw - 1240px) / 2)); }
.svc-intro { flex: none; width: 380px; }
.svc-track { display: flex; gap: 26px; padding: 8px 10vw 18px 4px; overflow-x: auto; scroll-snap-type: x proximity; }
.svc-track .card { scroll-snap-align: start; }
.svc-pin-on .svc-track { overflow: visible; padding-top: 0; padding-bottom: 0; will-change: transform; }
.card { --c: 26px; position: relative; isolation: isolate; flex: none; width: 344px; height: 478px; padding: 28px; display: flex; flex-direction: column; text-decoration: none; color: var(--ink); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line);
  clip-path: polygon(0 0, calc(100% - var(--c)) 0, 100% var(--c), 100% 100%, var(--c) 100%, 0 calc(100% - var(--c))); transition: transform 240ms var(--ease); }
.card::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity 100ms var(--ease);
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 30%), rgba(0, 187, 255, .16), transparent 62%); }
.card:hover::after, .card:focus-visible::after { opacity: 1; }
.card:hover { transform: translateY(-4px); }
.card-n { font: 700 12px/1 var(--f-head); letter-spacing: .2em; color: var(--muted); }
.card-obj { display: grid; place-items: center; height: 190px; margin: 4px 0 6px; color: var(--accent-ink); border-radius: 18px; background: radial-gradient(70% 70% at 50% 45%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 72%); }
.card-mascot .m-stage { width: 190px; animation: none; filter: drop-shadow(0 16px 24px rgba(0, 140, 230, .28)); }
.card-obj .ico { width: 124px; height: 124px; filter: drop-shadow(var(--sx, 0px) var(--sy, 10px) var(--sb, 14px) rgba(0, 140, 230, .32)); }
/* ---------- service card animations (round 4): hand-built SVG, animated by v2.js icons() with the Web Animations API.
   Everything below is the RESTING frame (the composed final state): reduced motion and no JS stop here. ---------- */
.ani-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.card-obj { position: relative; }
.card-obj .ani { width: 100%; max-width: 236px; height: auto; overflow: visible; filter: drop-shadow(var(--sx, 0px) var(--sy, 8px) 12px rgba(0, 140, 230, .22)); }
.ani { --ani-glass: rgba(255, 255, 255, .97); --ani-glass-line: rgba(10, 110, 220, .38); --ani-ink: #0A1428; }
[data-theme="dark"] .ani { --ani-glass: rgba(60, 100, 170, .5); --ani-glass-line: rgba(130, 210, 255, .55); --ani-ink: #E8EEF9; }
.ani * { transform-box: fill-box; transform-origin: center; }
.ani .glass { fill: var(--ani-glass); stroke: var(--ani-glass-line); stroke-width: 1.6; }
.ani .glow { fill: #18A6FF; opacity: .26; filter: url(#ag-blur); }
.ani .f-c { fill: url(#ag-c); } .ani .f-d { fill: url(#ag-d); }
.ani .sh { fill: rgba(10, 90, 200, .16); filter: blur(3px); }
.ani .px { fill: #00BBFF; opacity: .7; }
.ani .rec-t { fill: var(--ani-ink); }
.ani .cursor { fill: #0A1428; stroke: #fff; stroke-width: 1.4; stroke-linejoin: round; }
.ani .ring, .ani .hit, .ani .rec-ring { fill: none; stroke: #18A6FF; stroke-width: 2.4; opacity: 0; }
.ani .rec-ring { stroke: #E5304D; }
.ani .btn-fill { fill: url(#ag-c); opacity: 0; } .ani .btn-fill2 { fill: #fff; }
.ani .rec-dot { fill: url(#ag-r); }
.ani .glare, .ani .burst rect { opacity: 0; }
.ani .burst rect { fill: #00BBFF; }
.ani .arrow { transform-box: view-box; transform-origin: 108px 98px; }
.ani .leg { transform-origin: 50% 0; }
.ani .rip { fill: none; stroke: #18A6FF; stroke-width: 2.4; opacity: 0; }
.ani .rip.r1 { opacity: .5; transform: scale(3.2); } .ani .rip.r2 { opacity: .26; transform: scale(4.6); }
.ani .pin-sh { fill: rgba(10, 60, 160, .3); }
.ani .pinbody { transform-origin: 50% 100%; }
.ani .n { opacity: 0; } .ani .n3 { opacity: 1; }
.ani .trayf, .ani .tray { transform-origin: 50% 100%; }
.card-mascot .ani { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; pointer-events: none; filter: none; }
.card-mascot { overflow: visible; }

.card-body { display: flex; flex-direction: column; flex: 1; }
.card h3 { font-size: 26px; line-height: 1.08; font-weight: 700; letter-spacing: -.02em; }
.card-txt { margin-top: 12px; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.card-foot { margin-top: auto; padding-top: 18px; border-top: 1px dashed var(--line-2); display: flex; justify-content: space-between; align-items: center; font: 700 14px/1 var(--f-head); }
.card-foot .price { color: var(--accent-ink); }
.card-foot .more { display: inline-flex; gap: 6px; align-items: center; }
.card-foot .arr { width: 15px; transition: transform 240ms var(--ease); }
.card:hover .card-foot .arr { transform: translateX(5px); }

/* ---------- work: list scrolls inside a sticky panel ---------- */
.work { position: relative; }
.work { padding: 120px 0; }
.work.work-on { padding: 0; }
.work-on .work-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; align-items: center; overflow: hidden; }
.work-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 72px; align-items: center; }
.work-panel { position: relative; }
.work-list { display: grid; gap: 64px; padding: 0 30px 30px 0; perspective: 1200px; }
.work-on .work-panel { height: 100vh; height: 100svh; overflow: hidden; -webkit-mask: linear-gradient(transparent, #000 14%, #000 86%, transparent); mask: linear-gradient(transparent, #000 14%, #000 86%, transparent); }
.work-on .work-list { padding: 22vh 30px 22vh 0; will-change: transform; }
/* round 3 item 1: the copy block sits at the vertical centre beside the project panel (it was pinned to the top) */
.work-copy { align-self: start; position: sticky; top: max(110px, calc(50vh - 170px)); }
.work-on .work-copy { position: static; align-self: center; }
.proj { position: relative; display: block; text-decoration: none; color: inherit; isolation: isolate; transform-origin: 50% 50%; }
.proj-frame { position: relative; display: block; border-radius: 14px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); padding-top: 30px; }
.proj-frame img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; transition: transform var(--t-slow) var(--ease); }
.proj:hover .proj-frame img { transform: scale(1.03); }
.proj-frame::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 100ms var(--ease); mix-blend-mode: soft-light;
  background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(0, 200, 255, .9), transparent 60%); }
.proj:hover .proj-frame::after { opacity: 1; }
.proj-dots { position: absolute; top: 11px; left: 14px; display: flex; gap: 6px; }
.proj-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-2); }
.proj-phone { position: absolute; right: -18px; bottom: -26px; width: 104px; border-radius: 16px; overflow: hidden; border: 4px solid #060D1C; box-shadow: var(--shadow); background: #060D1C; }
.proj-phone img { aspect-ratio: 9 / 19; object-fit: cover; object-position: top; }
.proj-tab { --c: 14px; position: absolute; left: -1px; bottom: -22px; display: grid; gap: 4px; padding: 12px 30px 12px 18px; background: var(--navy); color: var(--navy-ink);
  clip-path: polygon(0 0, calc(100% - var(--c)) 0, 100% var(--c), 100% 100%, 0 100%); }
.proj-tab b { font: 700 16px/1 var(--f-head); letter-spacing: .04em; text-transform: uppercase; color: var(--cyan); }
.proj-tab small { font-size: 12.5px; color: var(--navy-muted); }
.work-copy .btn { margin-top: 30px; }

/* ---------- results band ---------- */
/* light grid-paper band; the dashboard itself is a dark app window in both themes (round-2 item 6) */
.results { padding: 130px 0 110px; background-color: var(--surface); background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 48px 48px; background-position: center top;
  --win: #0F1C36; --win-ink: #E8EEF9; --win-muted: #98A9C6; --win-line: #1E2F50; --win-2: #13223F; }
.res-head { text-align: center; display: flex; flex-direction: column; align-items: center; }
.res-head .ln-i { transform-origin: 50% 50%; }
.res-head .lead { text-align: center; }
.tabs { position: relative; margin: 50px auto 0; width: min(880px, 100%); display: grid; grid-template-columns: repeat(4, 1fr); padding: 7px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 14px 30px -22px rgba(10, 20, 40, .35); }
.tab-fill { position: absolute; top: 7px; bottom: 7px; left: 0; width: 0; border-radius: 999px; background: var(--accent); transition: transform 370ms cubic-bezier(.215, .61, .355, 1), width 370ms cubic-bezier(.215, .61, .355, 1); }
.tab { position: relative; z-index: 1; min-height: 50px; border: 0; background: none; cursor: pointer; border-radius: 999px; font: 700 16px/1 var(--f-head); color: var(--ink-2); transition: color 200ms var(--ease); overflow: hidden; }
.tab[aria-selected="true"] { color: #0A1428; }
.tab-prog { position: absolute; left: 22%; right: 22%; bottom: 7px; height: 2px; background: rgba(10, 20, 40, .35); transform: scaleX(0); transform-origin: 0 50%; }
.dash { margin-top: 40px; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .6fr); gap: 56px; align-items: center; }
.dash-win { position: relative; border-radius: 16px; overflow: hidden; background: var(--win); color: var(--win-ink); box-shadow: 0 0 0 1px #1E2F50, 0 40px 80px -30px rgba(10, 20, 40, .55); min-height: 400px; }
.win-bar { display: flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; background: var(--win-2); border-bottom: 1px solid var(--win-line); }
.win-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--win-line); }
.win-bar span { margin-left: 12px; font: 600 12px/1 var(--f-body); color: var(--win-muted); }
.pan { padding: 22px 24px; }
.pan[hidden] { display: none; }
.leads { width: 100%; border-collapse: collapse; font-size: 14px; }
.leads th { text-align: left; font: 700 11.5px/1 var(--f-head); letter-spacing: .1em; text-transform: uppercase; color: var(--win-muted); padding: 0 10px 14px; }
.leads td { padding: 14px 10px; border-top: 1px solid var(--win-line); white-space: nowrap; }
.leads td.mono { font-variant-numeric: tabular-nums; color: var(--win-muted); }
.leads tr { transition: transform 200ms var(--ease); }
.pill { display: inline-block; padding: 6px 11px; border-radius: 999px; font: 700 12px/1 var(--f-head); }
.pill.booked { background: rgba(18, 183, 106, .16); color: #3DDC97; }
.pill.qualified { background: rgba(0, 150, 230, .18); color: #4FD1FF; }
.pill.new { background: rgba(245, 160, 0, .16); color: #FFC24D; }
.roi { display: grid; grid-template-columns: 190px 1fr; gap: 26px; }
.kpis { display: grid; gap: 10px; }
.kpis li { padding: 12px 14px; border-radius: 12px; background: var(--win-2); display: grid; gap: 4px; }
.kpis span { font-size: 12px; color: var(--win-muted); }
.kpis strong { font: 800 26px/1 var(--f-head); letter-spacing: -.02em; }
.kpis em { font: 700 12px/1 var(--f-head); font-style: normal; }
.kpis em.up, .kpis em.down { color: #3DDC97; }
.chart-legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; color: var(--win-muted); margin-bottom: 14px; }
.chart-legend span::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 6px; vertical-align: 0; }
.l1::before { background: #0070C9; } .l2::before { background: #00BBFF; } .l3::before { background: #9BE7FF; }
.bars { height: 280px; display: flex; align-items: flex-end; gap: 10px; padding-bottom: 22px; border-bottom: 1px solid var(--win-line); background: repeating-linear-gradient(to top, var(--win-line) 0 1px, transparent 1px 70px); }
.bar { position: relative; flex: 1; height: var(--h); display: flex; flex-direction: column; border-radius: 6px 6px 2px 2px; overflow: visible; transform-origin: 50% 100%; cursor: default; outline-offset: 2px; }
.bar i { display: block; min-height: 2px; } .bar i:first-child { border-radius: 6px 6px 0 0; }
.bar .s1 { background: #0070C9; } .bar .s2 { background: #00BBFF; } .bar .s3 { background: #9BE7FF; }
.bar .mo { position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%); font-size: 11px; color: var(--win-muted); }
.bar .tip { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translate(-50%, 4px); white-space: nowrap; padding: 6px 9px; border-radius: 8px; background: #E8EEF9; color: #0A1428; font: 700 11.5px/1 var(--f-head); opacity: 0; pointer-events: none; transition: opacity 100ms, transform 160ms var(--ease); }
.bar:hover .tip, .bar:focus .tip { opacity: 1; transform: translate(-50%, 0); }
.bar:hover i, .bar:focus i { filter: brightness(1.12); }
.chan { display: grid; gap: 16px; padding: 10px 4px; }
.chan li { display: grid; grid-template-columns: 190px 1fr 40px; gap: 16px; align-items: center; font-size: 14.5px; }
.chan-bar { height: 12px; border-radius: 99px; background: var(--win-2); overflow: hidden; }
.chan-bar i { display: block; height: 100%; width: var(--w); border-radius: 99px; background: linear-gradient(90deg, #0070C9, #00BBFF); transform-origin: 0 50%; }
.chan strong { font: 800 18px/1 var(--f-head); text-align: right; }
.aiv-h { font: 700 11.5px/1 var(--f-head); letter-spacing: .1em; text-transform: uppercase; color: var(--win-muted); margin: 4px 0 14px; }
.rings { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 24px; }
.rings li { position: relative; display: grid; justify-items: center; gap: 8px; padding: 14px 6px; border-radius: 12px; background: var(--win-2); text-align: center; }
.rings svg { width: 64px; height: 64px; transform: rotate(-90deg); }
.rings circle { fill: none; stroke: var(--win-line); stroke-width: 4; }
.rings .ring-v { stroke: #00BBFF; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--v)); }
.rings strong { position: absolute; top: 34px; font: 800 18px/1 var(--f-head); }
.rings span { font-size: 12px; color: var(--win-muted); }
.tips { display: grid; gap: 9px; }
.tips li { display: flex; gap: 10px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--win-line); font-size: 14px; line-height: 1.45; }
.tips li span { color: var(--accent); }
.dash-say { font: 600 clamp(24px, 2.4vw, 34px)/1.22 var(--f-head); letter-spacing: -.015em; }
.dash-cap { margin-top: 26px; font-size: 13px; color: var(--muted); text-align: center; }

/* ---------- 2 AM demo ---------- */
.demo { position: relative; padding: 140px 0 130px; background: linear-gradient(180deg, var(--surface) 0%, var(--bg) 30%, var(--dusk) 100%); }
.demo-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: center; }
.chat { position: relative; isolation: isolate; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); padding: 18px 20px 24px; overflow: hidden; }
.chat::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity 100ms; background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), rgba(0, 187, 255, .12), transparent 65%); }
.chat:hover::after { opacity: 1; }
.chat-top { display: flex; align-items: center; gap: 10px; padding-bottom: 14px; border-bottom: 1px solid var(--line); font: 700 14px/1 var(--f-head); }
.chat-dot { width: 9px; height: 9px; border-radius: 50%; background: #12B76A; box-shadow: 0 0 0 4px rgba(18, 183, 106, .18); }
.chat-sw { margin-left: auto; display: flex; padding: 3px; border-radius: 99px; background: var(--bg-2); }
.chat-sw button { border: 0; background: none; cursor: pointer; padding: 7px 13px; border-radius: 99px; font: 700 12px/1 var(--f-head); color: var(--muted); }
.chat-sw button[aria-pressed="true"] { background: var(--accent); color: #0A1428; }
.thread[hidden] { display: none; }
.thread { display: grid; gap: 10px; padding-top: 16px; min-height: 300px; align-content: start; }
.th-time { text-align: center; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.msg { max-width: 82%; padding: 12px 15px; border-radius: 18px; font-size: 15px; line-height: 1.45; }
.msg.out { justify-self: end; background: var(--accent); color: #0A1428; border-bottom-right-radius: 6px; }
.msg.in { justify-self: start; background: var(--bg-2); border-bottom-left-radius: 6px; }

/* ---------- founder ---------- */
.founder { padding: var(--sec-y) 0; background: var(--dusk); }
.faq { background: var(--bg); }
.f-card { --c: 40px; margin: 0; display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); background: var(--surface); color: var(--ink); overflow: hidden;
  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); }
.f-img { position: relative; isolation: isolate; overflow: hidden; min-height: 520px; transform-style: preserve-3d; }
.f-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; position: absolute; inset: 0; transform: scale(1.04); transition: transform var(--t-slow) var(--ease); }
.f-img::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 100ms; mix-blend-mode: soft-light; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 40%), rgba(120, 220, 255, .9), transparent 60%); }
.f-img:hover::after { opacity: 1; }
.f-txt { margin: 0; padding: clamp(36px, 5vw, 76px); display: flex; flex-direction: column; justify-content: center; }
.f-txt .kicker { color: var(--muted); }
.f-q { font: 800 96px/.6 var(--f-head); color: var(--accent); height: 44px; }
.f-quote { font: 600 clamp(21px, 2vw, 28px)/1.38 var(--f-head); letter-spacing: -.01em; }
.f-txt footer { margin-top: 34px; display: grid; gap: 4px; }
.f-txt footer b { font: 700 20px/1.2 var(--f-head); }
.f-txt footer span { font-size: 14px; color: var(--muted); }
.f-txt .tlink { margin-top: 16px; }

/* ---------- FAQ ---------- */
.faq { padding: var(--sec-y) 0; }
.faq-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 72px; align-items: start; }
.faq-head { position: sticky; top: 110px; }
.qa { border-top: 1px solid var(--line); }
.qa:last-child { border-bottom: 1px solid var(--line); }
.qa summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 24px; padding: 24px 0; font: 700 clamp(18px, 1.5vw, 21px)/1.3 var(--f-head); }
.qa summary::-webkit-details-marker { display: none; }
.plus { position: relative; flex: none; width: 22px; height: 22px; margin-top: 2px; transition: transform 150ms var(--ease); }
.plus::before, .plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 1.8px; margin: -.9px 0 0 -7px; background: var(--accent-ink); }
.plus::after { transform: rotate(90deg); }
.qa[open] .plus { transform: rotate(45deg); }
.qa-a { padding: 0 44px 26px 0; color: var(--ink-2); }
.qa[open] .qa-a { animation: qa 200ms var(--ease) 50ms both; }
@keyframes qa { from { opacity: 0; transform: translateY(6px); } }
.qa-a a { color: var(--accent-ink); }

/* ---------- final CTA ---------- */
.final { position: relative; padding: 200px 0 150px; overflow-x: clip;
  background: radial-gradient(48% 60% at 12% 30%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%), radial-gradient(40% 55% at 92% 80%, color-mix(in srgb, #7A5CFF 10%, transparent), transparent 70%), var(--bg); }
.final-grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 64px; align-items: center; }
.final-copy { position: relative; }
.final .display-2 { font-size: clamp(34px, 3.4vw, 52px); }
.final-call { margin-top: 26px; font: 600 16px/1.4 var(--f-head); color: var(--ink-2); }
.final-call a { color: var(--accent-ink); font-weight: 800; text-decoration: none; white-space: nowrap; }

/* ---------- footer ---------- */
.ftr { position: relative; z-index: 1; background: var(--navy); color: var(--navy-ink); overflow: hidden; }
.ftr-fixed .ftr { position: fixed; left: 0; right: 0; bottom: 0; }
.ftr-mesh { position: absolute; inset: 0; width: 100%; height: 100%; }
.ftr-in { position: relative; z-index: 2; width: min(1400px, 100% - 32px); margin-inline: auto; min-height: min(100vh, 900px); display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 40px; pointer-events: none; }
.ftr-copy { pointer-events: auto; }
/* the photo's cut edges (his back, the arm, the bottom) land on the viewport's left edge and the footer's bottom */
.ftr-art { position: absolute; z-index: 1; left: 0; bottom: 0; top: 64px; width: min(54vw, 860px); }
.portrait { position: absolute; inset: 0; width: 100%; height: 100%; }
.ftr-copy { grid-column: 2; align-self: center; padding: 96px 0 28px; }
.ftr-logo { width: 200px; height: auto; margin-bottom: 20px; }
.ftr .kicker { color: var(--navy-muted); }
.ftr .h2 { color: #fff; }
.ftr .acc { background: linear-gradient(100deg, #00BBFF, #00E6FF); -webkit-background-clip: text; background-clip: text; }
.ftr-contact { margin-top: 20px; display: grid; gap: 12px; }
.ftr-contact li { display: flex; align-items: center; gap: 12px; font: 700 clamp(20px, 1.8vw, 26px)/1.2 var(--f-head); }
.ftr-contact svg { width: 20px; height: 20px; color: var(--cyan); flex: none; }
.ftr-contact a { text-decoration: none; }
.ftr-contact a:hover { color: var(--cyan); }
.ftr-area { margin-top: 18px; font-size: 14px; color: var(--navy-muted); }
.ftr-cols { margin-top: 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.plus-list li { position: relative; padding-left: 20px; }
.plus-list li::before { content: "+"; position: absolute; left: 0; color: var(--cyan); font: 700 15px/1.65 var(--f-head); }
.plus-list a { font: 600 14.5px/1.65 var(--f-head); text-decoration: none; text-transform: uppercase; letter-spacing: .05em; color: var(--navy-muted); transition: color 100ms; }
.plus-list a:hover { color: #fff; }
.ftr-soc { margin-top: 20px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.ftr-soc a { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--navy-line); border-radius: 10px; color: var(--navy-ink); transition: border-color 100ms, color 100ms; }
.ftr-soc a:hover { border-color: var(--cyan); color: var(--cyan); }
.ftr-soc svg { width: 18px; height: 18px; }
.ftr-soc .ftr-gbp { width: auto; padding: 0 14px; font: 700 13px/1 var(--f-head); text-decoration: none; }
.ftr-legal { margin-top: 20px; font-size: 12.5px; color: var(--navy-muted); }
.ftr-legal a { color: inherit; }

/* ---------- reveal start states (only with JS and motion allowed) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js [data-flip] .ln-i { opacity: 0; transform: translateY(24px) rotateX(-80deg) rotateY(3deg); }
  .js [data-flip].in .ln-i { opacity: 1; transform: none; transition: transform var(--t-head) var(--ease) calc(var(--fb, 0ms) + var(--i, 0) * 90ms), opacity var(--t-std) var(--ease) calc(var(--fb, 0ms) + var(--i, 0) * 90ms); }
  .js [data-words] .w { display: inline-block; opacity: 0; transform: translateY(12px); }
  .js [data-words].in .w { opacity: 1; transform: none; transition: transform var(--t-std) var(--ease) calc(var(--i, 0) * 14ms + var(--wb, 120ms)), opacity var(--t-std) var(--ease) calc(var(--i, 0) * 14ms + var(--wb, 120ms)); }
  .js [data-rise] { opacity: 0; transform: translate(-5px, 24px); }
  .js [data-rise].in { opacity: 1; transform: none; transition: transform var(--t-slow) var(--ease) var(--d, 0ms), opacity var(--t-std) var(--ease) var(--d, 0ms); }
  .js .ph-res .res, .js .ph-intro, .js .ph-call { opacity: 0; transform: translateY(14px); }
  .js .ph-think { opacity: 0; }
}

/* ---------- tablet / phone ---------- */
@media (max-width: 1100px) {
  .hdr-nav { gap: 0; } .hdr-lnk { padding-inline: 10px; } .hdr-act > .hdr-pill { display: none; }
  .mm-panel { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } .mm-feat { display: none; }
}
@media (max-width: 979px) {
  html { scroll-padding-top: 80px; }
  .hdr { top: 10px; }
  .mq-logo img { height: calc(var(--h) * .8); } .mq-logos .mq-set { gap: 32px; padding-right: 32px; } .mq-logos { gap: 10px; padding: 13px 0; }
  .hdr-bar { width: calc(100% - 20px); }
  .hdr-row { height: 60px; padding: 0 9px 0 16px; gap: 10px; }
  .hdr-nav, .hdr-cta, .hdr-lang, .hdr-act > .hdr-pill { display: none; }
  .hdr-m { display: block; }
  .hdr-logo, .hdr-logo img { width: 128px; }
  .hdr-strip { height: 32px; padding: 0 14px 0 16px; justify-content: space-between; }
  .hdr-strip::before, .hs-scan { left: 16px; right: 14px; }
  .hs-txt { display: none; }
  .hero { padding-top: 136px; min-height: auto; }
  .flow { margin-top: 96px; max-width: 520px; }
  .flow-steps { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .fl-step { --lift: 0px; grid-template-columns: 20px minmax(0, 1fr); align-items: center; gap: 16px; padding-top: 0; }
  .fl-node { margin-left: 0; }
  .fl-card { padding: 13px 15px 14px; }
  .flow-rider { --rs: 64px; --rise: 20px; margin-left: calc(var(--rs) / -2 + 14px); }   /* the line runs down the left edge: the rider floats beside it, not over the screen edge */
  .flow-shadow { width: 38px; height: 10px; margin: -5px 0 0 -19px; }
  .corner { display: none; }
  .hero-stats { grid-template-columns: repeat(2, 1fr); padding-top: 48px; }
  .hero-stats li:nth-child(3) { border-left: 0; }
  .hero-stats li:nth-child(n+3) { border-top: 1px solid var(--line-2); }
  .search { padding-top: 96px; }
  .search-stage { height: 480vh; }
  .search-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .phone-wrap { order: -1; min-height: 0; }
  .phone { transform: scale(var(--ph-s, .8)); transform-origin: 50% 0; margin-bottom: calc(612px * (var(--ph-s, .8) - 1)); }
  .step { padding: 14px 0 14px 18px; opacity: 1; }
  .steps-anim .steps { position: relative; min-height: 168px; }
  .steps-anim .step { position: absolute; inset: 0 0 auto; padding: 4px 0 0 18px; opacity: 0; transform: translateY(10px); transition: opacity 280ms var(--ease), transform 280ms var(--ease); pointer-events: none; }
  .steps-anim .step.on { opacity: 1; transform: none; pointer-events: auto; }
  .step h3 { font-size: 20px; } .step p { font-size: 15px; margin-top: 6px; }
  .svc-pin { height: auto; flex-direction: column; align-items: stretch; gap: 36px; padding: 96px 0 80px; }
  .svc-intro { width: auto; padding: 0 16px; }
  .svc-track { overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 16px 18px; scrollbar-width: none; transform: none !important; }
  .svc-track::-webkit-scrollbar { display: none; }
  .card { width: min(84vw, 340px); height: 440px; scroll-snap-align: start; }
  .card-obj { height: 160px; }
  .work { height: auto !important; padding: 96px 0 80px; }
  .work-sticky { position: static; height: auto; display: block; overflow: visible; }
  .work-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .work-copy { order: -1; position: static; }
  .work-panel { height: auto; overflow: visible; -webkit-mask: none; mask: none; margin: 0 -16px; }
  .work-list { display: flex; gap: 22px; padding: 6px 16px 40px; overflow-x: auto; scroll-snap-type: x mandatory; transform: none !important; scrollbar-width: none; }
  .work-list::-webkit-scrollbar { display: none; }
  .proj { flex: none; width: 82vw; scroll-snap-align: start; }
  .proj-phone { width: 74px; right: -6px; bottom: -14px; }
  .results { padding: 96px 0 84px; }
  .tabs { grid-template-columns: repeat(4, max-content); overflow-x: auto; border-radius: 16px; scrollbar-width: none; }
  .tab { padding: 0 16px; font-size: 14.5px; min-height: 44px; }
  .tab-fill { top: 7px; bottom: 7px; }
  .dash { grid-template-columns: 1fr; gap: 26px; }
  .dash-say { order: -1; font-size: 21px; min-height: 3.8em; }
  .dash-win { min-height: 0; }
  .pan { padding: 16px; overflow-x: auto; }
  .leads { font-size: 13px; } .leads td, .leads th { padding-left: 6px; padding-right: 6px; }
  .leads th:nth-child(3), .leads td:nth-child(3) { display: none; }
  .roi { grid-template-columns: 1fr; }
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .bars { height: 200px; gap: 6px; }
  .chan li { grid-template-columns: 1fr 34px; gap: 6px 10px; }
  .chan-n { grid-column: 1 / -1; font-size: 13.5px; }
  .rings { grid-template-columns: repeat(2, 1fr); }
  .demo { padding: 96px 0 84px; }
  .demo-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .f-card { grid-template-columns: 1fr; --c: 28px; }
  .f-img { min-height: 0; aspect-ratio: 4 / 3.6; }
  .faq-grid { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .faq-head { position: static; }
  .final { padding: 80px 0 110px; }
  .ftr { display: flex; flex-direction: column; }
  .ftr-in { grid-template-columns: 1fr; min-height: 0; gap: 0; }
  .ftr-art { position: relative; order: 2; top: auto; width: 100%; aspect-ratio: 900 / 1125; max-height: 88vh; }
  .ftr-copy { grid-column: 1; padding: 80px 0 30px; }
}
@media (max-width: 520px) {
  .btn { width: 100%; }
  .hero-cta { width: 100%; }
  .hero-stats strong { font-size: 24px; }
  .hero-stats li { padding: 14px 12px; }
  .f-q { font-size: 72px; height: 34px; }
}

/* =====================================================================================================================
   ROUND 2 (2026-10-20): pixel system, AI-search explainer, showreel, mascot, lead form. Motion numbers: DESIGN.md
   "v2 round 2" table.
   ===================================================================================================================== */

/* ---------- pixel edge: the logo's dissolving squares as a boundary (macro pxedge in home_v2.j2) ---------- */
.pxedge { position: absolute; left: 0; z-index: 3; display: block; width: 100%; overflow: visible; pointer-events: none; }
.pxedge.up { bottom: calc(100% - 1px); transform: scaleY(-1); }
.pxedge.down { top: calc(100% - 1px); }
.pxedge .q, .pxedge .tw { fill: var(--pxc, var(--bg)); transition: fill var(--t-std) var(--ease); }
.pxedge .tw { opacity: 0; animation: tw 6s cubic-bezier(.4, 0, .2, 1) infinite; animation-delay: calc(var(--tw, 0ms) * -1); }
@keyframes tw { 0%, 76% { opacity: 0; } 86% { opacity: 1; } 100% { opacity: 0; } }
.main-edge { --pxc: var(--bg); }

/* ---------- pixel fill on buttons: squares switch on in a seeded random order (hover in under 100 ms) ---------- */
.btn-px { isolation: isolate; }
.btn-px .pxg { position: absolute; inset: 0; z-index: -1; display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: 1fr; pointer-events: none; }
.btn-px .pxg i { background: var(--pxf, var(--cyan)); opacity: 0; transition: opacity 90ms var(--ease) var(--d, 0ms); }
.btn-px:hover .pxg i, .btn-px:focus-visible .pxg i { opacity: 1; }
.btn-px.btn-solid:hover { background: var(--accent); }
.btn-t { display: inline-flex; align-items: center; gap: 10px; }

/* ---------- pixel reveal on media ([data-pxr]): a grid of squares in the band colour dissolves away ---------- */
.pxr { position: absolute; inset: 0; z-index: 2; display: grid; pointer-events: none; }
.pxr i { background: var(--pxr-c, var(--surface)); transition: opacity 160ms var(--ease-in) var(--d, 0ms); }
[data-pxr].in .pxr i { opacity: 0; }

/* ---------- what is an LLM (white band, node field, dictionary entry) ---------- */
.llm { position: relative; z-index: 1; --pxc: var(--surface); background: var(--surface); padding: 120px 0 130px; transition: background-color var(--t-std) var(--ease); }
.llm-fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.llm-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); gap: 72px; align-items: end; }
.dict { margin: 40px 0 0; padding: 30px 32px 28px; border-radius: 22px; background: color-mix(in srgb, var(--surface) 86%, transparent); border: 1px solid var(--line); box-shadow: var(--shadow); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.dict dt { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; }
.dict dd { margin: 0; }
.dict-term { font: 800 clamp(58px, 6.4vw, 92px)/.9 var(--f-head); letter-spacing: -.045em; background: var(--acc-grad); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .04em; }
.dict-say { font: 600 15px/1 var(--f-body); color: var(--muted); letter-spacing: .08em; }
.dict-kind { margin-top: 12px; font: italic 600 15px/1.4 var(--f-body); color: var(--accent-ink); }
.dict-def { margin-top: 14px; font: 600 clamp(19px, 1.6vw, 23px)/1.45 var(--f-head); color: var(--ink); letter-spacing: -.01em; max-width: 34ch; }
.dict-models ul { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.dict-models li { display: inline-flex; align-items: center; gap: 9px; padding: 8px 14px 8px 9px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); font: 600 14px/1 var(--f-head); color: var(--ink-2); }
.dict-models .mk { width: 20px; height: 20px; }
.llm-steps { display: grid; gap: 14px; }
.llm-steps li { position: relative; padding: 24px 26px 24px 80px; border-radius: 18px; background: color-mix(in srgb, var(--bg) 88%, transparent); border: 1px solid var(--line); }
.llm-n { --c: 8px; position: absolute; left: 24px; top: 22px; width: 38px; height: 38px; display: grid; place-items: center; font: 800 13px/1 var(--f-head); color: #0A1428; background: var(--accent);
  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); }
.llm-steps h3 { font-size: clamp(19px, 1.6vw, 22px); line-height: 1.2; font-weight: 700; letter-spacing: -.015em; }
.llm-steps p { margin-top: 8px; color: var(--ink-2); font-size: 15.5px; }
.llm-note { margin-top: 22px; padding-left: 14px; border-left: 3px solid var(--accent); font-size: 14.5px; color: var(--muted); max-width: 54ch; }
.llm-body .tlink { margin-top: 18px; }

/* ---------- showreel: full-bleed video band ---------- */
.reel { position: relative; z-index: 2; --pxc: #050B18; background: #050B18; color: #fff; min-height: 88vh; min-height: 88svh; display: flex; align-items: flex-end; }
.reel-media { position: absolute; inset: 0; overflow: hidden; clip-path: inset(var(--ri, 0px) round var(--rr, 0px)); }
.reel-vid { display: block; width: 100%; height: 100%; object-fit: cover; background: #050B18; }
.reel-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5, 11, 24, .2) 0%, rgba(5, 11, 24, 0) 32%, rgba(5, 11, 24, .84) 100%), linear-gradient(90deg, rgba(5, 11, 24, .6), rgba(5, 11, 24, 0) 62%); }
.reel-copy { position: relative; padding: 180px 0 100px; }
.reel .kicker { color: #C9D6EE; }
.reel .display-2 { color: #fff; }
.reel .acc { background: linear-gradient(100deg, #00BBFF, #00E6FF); -webkit-background-clip: text; background-clip: text; }
.reel .lead { color: #DDE6F6; max-width: 48ch; }
.reel-ctl { display: flex; align-items: center; gap: 18px; margin-top: 28px; }
.reel-btn { display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 18px 0 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .38); background: rgba(5, 11, 24, .45); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; font: 700 14px/1 var(--f-head); cursor: pointer; transition: border-color 100ms, transform var(--t-quick) var(--ease); }
.reel-btn:hover { border-color: var(--cyan); }
.reel-btn:active { transform: scale(.97); }
.rb-i { position: relative; width: 14px; height: 14px; }
.rb-i::before { content: ""; position: absolute; inset: 1px 0 1px 2px; background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.reel-btn[data-playing] .rb-i::before { clip-path: polygon(0 0, 36% 0, 36% 100%, 0 100%, 0 0, 64% 0, 100% 0, 100% 100%, 64% 100%, 64% 0); }
.reel-lbl { font: 700 12px/1 var(--f-head); letter-spacing: .18em; text-transform: uppercase; color: #C9D6EE; }

/* ---------- 2 AM: the bot loop and its speech bubble (from the live home page) ---------- */
.demo-also { display: flex; align-items: center; gap: 10px; margin-top: 18px; font-size: 15px; color: var(--ink-2); }
.demo-flag { flex: none; padding: 5px 7px; border-radius: 6px; border: 1px solid var(--line-2); font: 800 11px/1 var(--f-head); letter-spacing: .1em; color: var(--accent-ink); }
.demo-stage { position: relative; padding-top: 168px; }
.bot { position: absolute; z-index: 3; left: -24px; top: 0; display: flex; flex-direction: column; align-items: center; pointer-events: none; }
/* round 3: transparent mascot stage (no dark box). Poster below, the playing clip (video or WebGL canvas) on top. */
.m-stage { display: block; position: relative; width: 180px; aspect-ratio: 1; pointer-events: auto; cursor: default; filter: drop-shadow(0 22px 34px rgba(0, 140, 230, .28)); }
.m-stage > * { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.m-stage > video, .m-stage > canvas { opacity: 0; }
.m-stage > .on { opacity: 1; }
.m-stage > .m-poster.off { opacity: 0; }
.bot .m-stage { width: 196px; margin-top: -24px; }
@media (prefers-reduced-motion: no-preference) {
  .m-stage { animation: mascotFloat 4.6s cubic-bezier(.45, 0, .55, 1) infinite; }
  /* bubble pops 80 ms after the gesture starts (DESIGN.md round 3: emergent entrance, Playful ease, 260 ms) */
  .is-say > .bot-bub, .is-say > .mascot-bub { transform-origin: 50% 100%; animation: bubPop 260ms cubic-bezier(.175, .885, .32, 1.275) 80ms both; }
  /* one CTA attention cycle while the mascot points (0.97 to 1.03, 2500 ms) */
  .al-btn.is-nudge { animation: ctaNudge 2500ms cubic-bezier(.45, 0, .55, 1) 1; }
}
@media (prefers-reduced-motion: reduce) { .is-say > .bot-bub, .is-say > .mascot-bub { animation: bubFade 130ms ease-out both; } }
@keyframes bubPop { from { opacity: 0; transform: translateY(8px) scale(.85); } to { opacity: 1; transform: none; } }
@keyframes bubFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ctaNudge { 0%, 100% { transform: scale(1); } 25% { transform: scale(1.03); } 75% { transform: scale(.97); } }
.bot-bub, .mascot-bub { position: relative; margin-bottom: 12px; padding: 9px 14px; border-radius: 13px; background: var(--navy); color: var(--navy-ink); font: 600 12.5px/1.4 var(--f-head); text-align: center; max-width: 210px; box-shadow: 0 14px 34px -16px rgba(10, 20, 40, .6); }
.bot-bub b, .mascot-bub b { color: var(--cyan); font-weight: 800; }
.bot-bub::after, .mascot-bub::after { content: ""; position: absolute; bottom: -6px; left: 50%; width: 12px; height: 12px; margin-left: -6px; background: var(--navy); transform: rotate(45deg); }
.chat { z-index: 1; }

/* ---------- final: the mascot peeks over the form's top edge (round 5) ----------
   The peek clip is cropped so its cut line (the ledge, where the hands rest) is at 86% of the frame; the bottom 16% hides behind
   the form, so the hands sit on the form's top edge and the mascot looks across it. Bubble to its left, tail on the right. */
.final-form { position: relative; }
.final-peek { --ps: 210px; position: absolute; z-index: 0; right: 7%; top: calc(var(--ps) * -.84); width: var(--ps); pointer-events: none; }
.final-form .adm-lead { z-index: 1; }
.final-peek .m-stage { width: var(--ps); animation: none; filter: drop-shadow(0 -6px 22px rgba(0, 150, 235, .3)); }
.final-peek .mascot-bub { position: absolute; z-index: 1; right: 88%; top: 18%; width: max-content; max-width: 200px; margin: 0; text-align: left; }
.final-peek .mascot-bub::after { left: auto; right: -6px; bottom: 16px; margin: 0; }
@keyframes mascotFloat { 0%, 100% { transform: translateY(0) rotate(-1.4deg); } 50% { transform: translateY(-13px) rotate(1.8deg); } }

/* ---------- branded lead form (adm-lead, markup and script from the live page; styles re-themed light/dark) ---------- */
.adm-lead { --al-c1: #00BBFF; --al-c2: #00E6FF; --al-ink: var(--ink); --al-dim: var(--muted); --al-line: var(--line-2); --al-field: var(--bg); --al-on: #00121a;
  position: relative; text-align: left; color: var(--al-ink); background: var(--surface); border: 1px solid var(--line); border-radius: 24px; padding: clamp(22px, 3.4vw, 36px); box-shadow: var(--shadow); }
[data-theme="dark"] .adm-lead { --al-ink: #eaf2ff; --al-dim: rgba(234, 242, 255, .66); --al-line: rgba(140, 180, 240, .22); --al-field: rgba(255, 255, 255, .045); background: linear-gradient(165deg, rgba(13, 26, 51, .94), rgba(7, 14, 28, .97)); border-color: rgba(140, 180, 240, .22); }
.adm-lead::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none; background: linear-gradient(135deg, rgba(0, 200, 255, .6), rgba(0, 187, 255, .05) 40%, rgba(0, 187, 255, 0) 60%, rgba(0, 200, 255, .4));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; }
.adm-lead .al-head { margin-bottom: 22px; }
.adm-lead .al-kicker { display: inline-flex; align-items: center; gap: 8px; font: 700 12px/1.2 var(--f-head); letter-spacing: .2em; text-transform: uppercase; color: var(--accent-ink); }
.adm-lead .al-kicker::before { content: ""; width: 7px; height: 7px; background: var(--accent); }
.adm-lead .al-sub { margin: 10px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--al-dim); }
.adm-lead .al-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.adm-lead .al-full { grid-column: 1 / -1; }
.adm-lead .al-f { display: block; margin: 0; }
.adm-lead .al-f > span, .adm-lead .al-set > legend { display: block; margin: 0 0 7px 2px; padding: 0; font: 700 11.5px/1.2 var(--f-head); letter-spacing: .12em; text-transform: uppercase; color: var(--al-dim); }
.adm-lead .al-f > span em, .adm-lead .al-set > legend em { font-style: normal; text-transform: none; letter-spacing: 0; font-weight: 500; opacity: .75; margin-left: 6px; }
.adm-lead input:not([type=checkbox]):not([type=radio]), .adm-lead textarea { width: 100%; margin: 0; font: 500 15px/1.35 var(--f-body); color: var(--al-ink); background: var(--al-field); border: 1px solid var(--al-line); border-radius: 12px; padding: 13px 14px; outline: none; -webkit-appearance: none; appearance: none; transition: border-color 200ms, box-shadow 200ms; }
.adm-lead textarea { min-height: 96px; resize: vertical; }
.adm-lead input::placeholder, .adm-lead textarea::placeholder { color: var(--al-dim); opacity: .7; }
.adm-lead input:focus, .adm-lead textarea:focus { border-color: var(--al-c1); box-shadow: 0 0 0 3px rgba(0, 187, 255, .18); }
.adm-lead .al-f.bad input { border-color: #E5484D; box-shadow: 0 0 0 3px rgba(229, 72, 77, .16); }
.adm-lead .al-set { border: 0; padding: 0; margin: 18px 0 0; min-width: 0; }
.adm-lead .al-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.adm-lead .al-opts label { position: relative; cursor: pointer; }
.adm-lead .al-opts input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.adm-lead .al-opts span { display: inline-flex; align-items: center; gap: 7px; padding: 9px 15px; border-radius: 999px; border: 1px solid var(--al-line); background: var(--al-field); font: 600 13px/1.2 var(--f-body); color: var(--al-dim); transition: color 160ms, border-color 160ms, background-color 160ms; }
.adm-lead .al-opts span::before { content: ""; width: 6px; height: 6px; background: var(--al-line); transition: background-color 160ms; }
.adm-lead .al-opts label:hover span { color: var(--al-ink); border-color: var(--al-c1); }
.adm-lead .al-opts input:checked + span { color: var(--al-on); background: linear-gradient(100deg, var(--al-c2), var(--al-c1)); border-color: transparent; font-weight: 700; }
.adm-lead .al-opts input:checked + span::before { background: var(--al-on); }
.adm-lead .al-opts input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.adm-lead .al-notes { margin-top: 18px; }
.adm-lead .al-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.adm-lead .al-btn { --pxf: rgba(255, 255, 255, .5); position: relative; width: 100%; margin-top: 20px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; overflow: hidden; border: 0; border-radius: 14px; padding: 17px 24px; cursor: pointer;
  font: 800 15.5px/1 var(--f-head); letter-spacing: .02em; color: var(--al-on); background: linear-gradient(100deg, var(--al-c2), var(--al-c1)); transition: transform var(--t-quick) var(--ease), opacity 200ms; box-shadow: 0 14px 34px -16px rgba(0, 170, 240, .7); }
.adm-lead .al-btn:active { transform: scale(.98); }
.adm-lead .al-btn[disabled] { opacity: .6; cursor: wait; transform: none; }
.adm-lead .al-btn svg { width: 18px; height: 18px; transition: transform 240ms var(--ease); }
.adm-lead .al-btn:hover svg { transform: translateX(4px); }
.adm-lead .al-note { margin: 14px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--al-dim); text-align: center; }
.adm-lead .al-note b { color: var(--al-ink); font-weight: 700; }
.adm-lead .al-note a, .adm-lead .al-err a, .adm-lead .al-done a { color: var(--accent-ink); font-weight: 700; }
.adm-lead .al-err { display: none; margin: 14px 0 0; padding: 12px 14px; border-radius: 12px; font-size: 13.5px; line-height: 1.5; color: #B42318; background: rgba(229, 72, 77, .08); border: 1px solid rgba(229, 72, 77, .3); }
[data-theme="dark"] .adm-lead .al-err { color: #ffb3b3; }
.adm-lead.is-err .al-err { display: block; }
.adm-lead .al-done { display: none; text-align: center; padding: 28px 6px 10px; }
.adm-lead .al-check { width: 64px; height: 64px; margin: 0 auto 18px; border-radius: 50%; display: grid; place-content: center; background: linear-gradient(100deg, var(--al-c2), var(--al-c1)); }
.adm-lead .al-check svg { width: 30px; height: 30px; stroke: var(--al-on); }
.adm-lead .al-done h3 { margin: 0 0 10px; font-size: clamp(22px, 3vw, 30px); line-height: 1.1; color: var(--al-ink); }
.adm-lead .al-done p { margin: 0 auto; max-width: 38ch; font-size: 15px; line-height: 1.65; color: var(--al-dim); }
.adm-lead.is-done .al-body { display: none; }
.adm-lead.is-done .al-done { display: block; animation: alIn 340ms var(--ease); }
@keyframes alIn { from { opacity: 0; transform: translateY(10px); } }

/* ---------- round 2: reveal start states ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .dict-models li { opacity: 0; transform: translateY(14px); }
  .js .dict.in .dict-models li { opacity: 1; transform: none; transition: transform var(--t-std) var(--ease) calc(240ms + var(--i, 0) * 60ms), opacity var(--t-std) var(--ease) calc(240ms + var(--i, 0) * 60ms); }
}

/* ---------- round 2: tablet / phone ---------- */
@media (max-width: 979px) {
  .llm { padding: 96px 0 90px; }
  .llm-grid { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .dict { padding: 24px 22px; }
  .llm-steps li { padding: 20px 18px 20px 68px; }
  .llm-n { left: 16px; top: 18px; width: 34px; height: 34px; }
  .reel { min-height: 0; }
  .reel-copy { padding: 240px 0 70px; }
  .phone-wrap::before { left: -16px; right: -16px; height: 74%; border-radius: 22px; border-right: 1px solid var(--line); }
  .demo-stage { padding-top: 150px; }
  .bot { left: auto; right: 4px; }
  .bot .m-stage { width: 150px; margin-top: -18px; }
  .final { padding: 96px 0 110px; }
  .final-grid { grid-template-columns: minmax(0, 1fr); gap: 128px; }   /* room for the peeking mascot above the form */
  .final-copy { display: flex; flex-direction: column; }
  .final-peek { --ps: 140px; right: 5%; }
  .final-peek .mascot-bub { max-width: 168px; top: 12%; }
  .ftr-logo { width: 170px; }
}
@media (max-width: 560px) {
  .adm-lead .al-grid { grid-template-columns: 1fr; }
  .adm-lead { padding: 22px 18px; }
}

/* ---------- round 4: the platforms (four groups, one scroll beat each) and the phone scenes ----------
   Desktop: the left column holds the three steps, then crossfades to the group card while the phone stays and switches
   screen. Without JS or with reduced motion all of it is listed and every group shows. */
.search-left { position: relative; display: grid; }
.search-left > * { grid-area: 1 / 1; min-width: 0; }
.grp-wrap { align-self: center; }
.grp-lbl { font: 700 12px/1 var(--f-head); letter-spacing: .16em; text-transform: uppercase; color: var(--accent-ink); margin-bottom: 14px; }
.grp-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.grp-tabs li { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface); font: 700 12.5px/1 var(--f-head); color: var(--muted); transition: background-color var(--t-std) var(--ease), color var(--t-std) var(--ease), border-color var(--t-std) var(--ease); }
.grp-tabs li.on { background: var(--accent); border-color: var(--accent); color: #0A1428; }
.grp-stack { position: relative; display: grid; }
.grp { grid-area: 1 / 1; min-width: 0; }
.grp-h { font-size: clamp(22px, 1.95vw, 28px); line-height: 1.14; font-weight: 700; letter-spacing: -.015em; }
.grp-k { display: block; margin-bottom: 10px; font: 700 12px/1 var(--f-head); letter-spacing: .16em; text-transform: uppercase; color: var(--accent-ink); }
.grp-p { margin-top: 12px; max-width: 48ch; font-size: 16px; color: var(--ink-2); }
.gchips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.gchip { display: inline-flex; align-items: center; gap: 10px; padding: 6px 15px 6px 6px; border-radius: 15px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 9%, transparent), 0 10px 22px -14px rgba(10, 20, 40, .28); font: 600 14.5px/1 var(--f-head); color: var(--ink-2); white-space: nowrap; }
.gchip .chip-mk { width: 34px; height: 34px; border-radius: 10px; }
.gchip .mk { width: 20px; height: 20px; }
.chip-none { font-size: 16px; line-height: 1; color: var(--muted); }
.grp-cap { margin-top: 20px; font-size: 12px; color: var(--muted); }
/* scripted (JS on, motion allowed): the stage is pinned and the beats crossfade */
.groups-anim .grp-wrap { opacity: 0; pointer-events: none; }
.groups-anim .grp { opacity: 0; pointer-events: none; transition: opacity 340ms var(--ease); }   /* no transform here: the chips position against .search-grid on wide screens */
.groups-anim .grp.on { opacity: 1; pointer-events: auto; }
.groups-anim .gchip { opacity: 0; transform: translateY(12px); }
.groups-anim .grp.on .gchip { opacity: 1; transform: none; transition: opacity 340ms var(--ease) calc(120ms + var(--i) * 60ms), transform 340ms var(--ease) calc(120ms + var(--i) * 60ms); }
.groups-anim .grp-tabs li.on { transition-delay: 0ms; }
/* wide screens (1400 px and up): the chips leave the card and sit on the soft panel to the right of the phone, as in the Comrade reference */
.groups-anim .phone-wrap::before { opacity: var(--pan, 0); }
@media (min-width: 1400px) {
  .groups-anim .search-grid { position: relative; }
  .groups-anim .search-left { position: static; } .groups-anim .grp-stack { position: static; }
  .groups-anim .gchips { z-index: 3; position: absolute; left: calc(72.5% + 186px); top: 50%; width: 226px; margin: 0; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: 12px; transform: translateY(-50%); }
  .groups-anim .gchip:nth-child(even) { margin-left: 12px; }
  .groups-anim .gchip { font-size: 15px; }
}
/* the phone: scenes stack on the screen, only the active one shows */
.ph-sc { display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.groups-anim .ph-app { position: relative; }
.groups-anim .ph-sc { position: absolute; inset: 66px 18px 18px; opacity: 0; pointer-events: none; transition: opacity 300ms var(--ease); }
.groups-anim .ph-sc.on { opacity: 1; pointer-events: auto; }
.groups-anim .ph-sc [data-ph] { opacity: 0; transform: translateY(14px); }
.groups-anim .ph-sc.on [data-ph] { opacity: 1; transform: none; transition: opacity 340ms var(--ease) calc(160ms + var(--k, 0) * 120ms), transform 340ms var(--ease) calc(160ms + var(--k, 0) * 120ms); }
.groups-anim .ph-sc.ph-ai [data-ph] { opacity: 1; transform: none; }
.ph-maps.on .pn.you::before { content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 2px solid var(--accent); animation: pinPulse 1.8s var(--ease) 600ms infinite; }
@keyframes pinPulse { 0% { opacity: .8; transform: scale(.5); } 100% { opacity: 0; transform: scale(1.7); } }
.ph-sc:not(.ph-ai) { display: none; }
.groups-anim .ph-sc:not(.ph-ai) { display: flex; }
.ph-sc .ph-title { display: flex; align-items: center; gap: 8px; }
.ph-sc .ph-title .mk { width: 18px; height: 18px; }
.ph-map { position: relative; height: 142px; flex: none; border-radius: 16px; border: 1px solid var(--win-line); overflow: hidden;
  background: linear-gradient(90deg, transparent 47%, rgba(255, 255, 255, .85) 47% 53%, transparent 53%), linear-gradient(0deg, transparent 38%, rgba(255, 255, 255, .85) 38% 46%, transparent 46%), linear-gradient(140deg, #CFE3F8, #E4EEF9 55%, #D5EBDD); }
[data-theme="dark"] .ph-map { background: linear-gradient(90deg, transparent 47%, rgba(120, 170, 230, .22) 47% 53%, transparent 53%), linear-gradient(0deg, transparent 38%, rgba(120, 170, 230, .22) 38% 46%, transparent 46%), linear-gradient(140deg, #16294A, #1A3157 55%, #16382F); }
.pn { position: absolute; width: 14px; height: 14px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: #8FA6C4; opacity: .85; }
.pn2 { left: 18%; top: 28%; } .pn3 { left: 74%; top: 56%; } .pn4 { left: 30%; top: 66%; }
.pn.you { left: 52%; top: 34%; width: 26px; height: 26px; margin: -13px 0 0 -13px; background: var(--acc-grad); opacity: 1; box-shadow: 0 8px 16px -6px rgba(0, 150, 230, .6); }
.pn.you::after { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: #fff; }
.ph-card, .ph-ad { padding: 13px 14px; border-radius: 16px; border: 1px solid var(--win-line); background: var(--win); box-shadow: 0 0 0 2px var(--accent), 0 14px 30px -14px rgba(0, 187, 255, .45); }
.pc-n { display: flex; align-items: center; justify-content: space-between; gap: 8px; font: 700 14.5px/1.2 var(--f-head); }
.pc-r { font: 700 13px/1 var(--f-head); color: var(--win-muted); white-space: nowrap; }
.ph-sc i, .rv-b i { font-style: normal; }
.pc-r i, .rv-top i, .rv-b i { color: #F5B400; letter-spacing: 1px; }
.pc-s { margin-top: 5px; font-size: 11.5px; color: var(--win-muted); }
.pc-ok { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; }
.pc-ok li { padding: 5px 9px 5px 22px; position: relative; border-radius: 8px; background: var(--win-2); font: 700 11px/1 var(--f-head); color: var(--win-ink); }
.pc-ok li::before { content: ""; position: absolute; left: 8px; top: 50%; width: 5px; height: 9px; margin-top: -6px; border: solid #12A85A; border-width: 0 2px 2px 0; transform: rotate(40deg); }
.ph-q2 { min-height: 0; }
.ph-ad { display: grid; gap: 6px; }
.ad-top { display: flex; justify-content: space-between; font: 700 10.5px/1 var(--f-head); letter-spacing: .06em; text-transform: uppercase; color: var(--win-muted); }
.ad-top b { color: var(--win-ink); }
.ad-h { font: 700 15px/1.25 var(--f-head); color: var(--accent-ink); }
.ad-s { font-size: 12px; color: var(--win-muted); }
.ad-btn { justify-self: start; margin-top: 4px; padding: 10px 18px; border-radius: 10px; background: var(--accent); color: #0A1428; font: 800 12.5px/1 var(--f-head); }
.ph-org { display: grid; gap: 8px; padding: 4px 2px; }
.ph-org i { display: block; height: 9px; border-radius: 5px; background: var(--win-line); } .ph-org i:nth-child(2) { width: 72%; } .ph-org i:nth-child(3) { width: 46%; }
.ph-toast { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 14px; background: var(--navy); color: var(--navy-ink); font: 600 12px/1.25 var(--f-head); box-shadow: 0 14px 30px -14px rgba(10, 20, 40, .6); }
.ph-toast b { color: #fff; } .ph-toast small { display: block; margin-top: 2px; font-size: 10.5px; color: var(--navy-muted); }
.pt-i { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; background: var(--accent); color: #0A1428; }
.pt-i svg { width: 16px; height: 16px; }
.rv-top { display: flex; align-items: center; gap: 12px; padding: 4px 2px 8px; }
.rv-top strong { font: 800 40px/1 var(--f-head); letter-spacing: -.02em; }
.rv-top span { display: grid; gap: 4px; } .rv-top small { font-size: 11.5px; color: var(--win-muted); }
.rv-list { display: grid; gap: 9px; }
.rv-list li { display: flex; gap: 11px; align-items: center; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--win-line); background: var(--win); }
.rv-av { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font: 800 14px/1 var(--f-head); background: var(--win-2); color: var(--win-muted); }
.rv-b { display: grid; gap: 2px; min-width: 0; } .rv-b b { font: 700 13px/1.1 var(--f-head); } .rv-b small { font-size: 11.5px; color: var(--win-muted); }
.rv-b i { font-size: 11px; }
/* no JS and reduced motion: nothing is pinned, every card is listed under the steps */
.no-js .search-stage, .rm-static .search-stage { height: auto; }
.no-js .search-sticky, .rm-static .search-sticky { position: static; height: auto; padding: 40px 0 80px; }
.no-js .search-left, .rm-static .search-left { display: block; }
.no-js .grp-wrap, .rm-static .grp-wrap { margin-top: 34px; }
.no-js .grp-tabs, .rm-static .grp-tabs { display: none; }
.no-js .grp-stack, .rm-static .grp-stack { display: block; }
.no-js .grp, .rm-static .grp { grid-area: auto; opacity: 1; transform: none; }
.no-js .grp, .rm-static .grp { margin-bottom: 30px; }
@media (max-width: 979px) {
  .groups-anim .search-left { min-height: 292px; }
  .grp-tabs { display: none; }   /* the kicker names the group and the rail shows progress, so phones skip the pills */
  .grp-lbl { display: none; }
  .grp-h { font-size: 18px; } .grp-k { margin-bottom: 6px; font-size: 11px; }
  .grp-p { font-size: 13.5px; margin-top: 6px; max-width: none; }
  .gchips { gap: 6px; margin-top: 10px; } .gchip { padding: 4px 10px 4px 4px; gap: 7px; font-size: 12px; border-radius: 12px; }
  .gchip .chip-mk { width: 26px; height: 26px; border-radius: 8px; } .gchip .mk { width: 15px; height: 15px; }
  .grp-cap { margin-top: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .search-stage { height: auto; }
  .search-sticky { position: static; height: auto; padding: 40px 0 80px; }
}
[data-theme="dark"] .card { background: linear-gradient(160deg, #11223F 0%, #0C1A34 70%); }