/* ═══════════════════════════════════════════════════════════════════════════
 *  groundhub.de · Landing sections ("Concourse")
 *  Hero (split-flap board, phone mockup, approach lights) · Tour (Check-in →
 *  Security → Gate → Boarding) with 8 demos · FlyDUS FIDS · feature tiles ·
 *  steps · trust · boarding-pass finale.
 *
 *  Motion rules: base styles = final state. Animations only exist inside
 *  (prefers-reduced-motion: no-preference) and are paused while a demo is
 *  off-screen (.js .dframe:not(.is-live)). Always-dark objects use the fixed
 *  --night-* colours from site.css so text never ends up dark-on-dark.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ─── HERO ────────────────────────────────────────────────────────────────── */
.hero { position: relative; isolation: isolate; overflow: clip; padding: clamp(24px, 6vw, 72px) 0 clamp(150px, 18vw, 220px); }
.hero-sky {
    position: absolute; inset: 0; z-index: -2; pointer-events: none;
    background:
        radial-gradient(70% 55% at 85% 8%, rgba(31, 107, 255, .14), transparent 70%),
        radial-gradient(55% 45% at 5% 0%, rgba(255, 204, 0, .16), transparent 70%);
}
.hero-sky::after { /* apron grid, fading out */
    content: ""; position: absolute; inset: 0;
    background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: radial-gradient(90% 70% at 50% 0%, #000 0%, transparent 75%); mask-image: radial-gradient(90% 70% at 50% 0%, #000 0%, transparent 75%);
}
html[data-theme="dark"] .hero-sky {
    background:
        radial-gradient(70% 55% at 85% 5%, rgba(77, 141, 255, .20), transparent 70%),
        radial-gradient(50% 40% at 5% 0%, rgba(255, 210, 31, .10), transparent 70%),
        linear-gradient(180deg, #070B16 0%, var(--bg) 70%);
}
.hero-grid { display: grid; gap: clamp(40px, 7vw, 64px); align-items: center; }
@media (min-width: 1024px) { .hero-grid { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: 48px; } }
.hero-copy { min-width: 0; }

.hero-chip {
    display: inline-flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 14px 0 12px; border-radius: var(--r-pill);
    background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2), var(--shadow-1);
    font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-2);
}
.hero-chip-dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px var(--green-soft); }
.hero-title { margin-top: 22px; font-size: clamp(46px, 11.6vw, 96px); font-weight: 700; letter-spacing: -.055em; line-height: .95; }
.hero-title .l1 { display: block; }
.hero-title .l2 { position: relative; display: inline-block; color: var(--text-3); z-index: 0; }
.hero-title .l2::after { /* runway-marker highlight */
    content: ""; position: absolute; z-index: -1; left: .02em; right: .06em; bottom: -.07em; height: .085em; border-radius: .06em;
    background: var(--signal); transform-origin: left center;
}
.hero-sub { margin-top: 24px; max-width: 34em; font-size: clamp(17px, 2.2vw, 20px); line-height: 1.55; color: var(--text-2); text-wrap: pretty; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero-cta .btn { flex: 1 1 auto; }
@media (min-width: 560px) { .hero-cta .btn { flex: 0 0 auto; } }
@media (max-width: 379px) { .hero-cta .btn { padding: 0 18px; font-size: 15px; } }
.hero-meta { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 20px; margin-top: 22px; color: var(--text-2); font-size: 14.5px; font-weight: 550; }
.hero-meta li { display: inline-flex; align-items: center; gap: 7px; }
.hero-meta i { color: var(--green); font-size: 17px; }
.hero-cue {
    position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 2;
    display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: var(--r-pill);
    background: var(--glass); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: inset 0 0 0 1px var(--glass-line);
    color: var(--text); font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap;
}

/* Split-flap board (always dark) */
.flapboard {
    container-type: inline-size;
    margin-top: 36px; padding: 12px; border-radius: 22px;
    background: linear-gradient(180deg, var(--night-2), var(--night)); color: var(--night-text);
    box-shadow: 0 30px 70px -34px rgba(5, 8, 16, .75), inset 0 0 0 1px rgba(255, 255, 255, .06), inset 0 1px 0 rgba(255, 255, 255, .06);
}
.fb-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 6px 12px; font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--night-yellow); }
.fb-title { display: inline-flex; align-items: center; gap: 8px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fb-title i { font-size: 16px; }
.fb-clock { color: var(--night-text); font-size: 13px; letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.fb-grid { display: grid; gap: 8px; }
.fb-cell { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 14px; background: rgba(255, 255, 255, .035); box-shadow: inset 0 0 0 1px var(--night-line); }
.fb-lbl { width: 50px; flex: none; font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--night-dim); }
.fb-flap { font-size: 18px; font-size: clamp(14px, calc((100cqi - 124px) / 7.4), 28px); gap: 1px; }
.fb-flap .flap-c { color: var(--night-text); background: var(--night-3); }
.fb-cell:nth-child(2) .flap-c { color: var(--night-yellow); }
.fb-status.is-go .flap-c { color: #34D399; }
.fb-status.is-info .flap-c { color: #7FAEFF; }
.fb-status.is-board .flap-c { color: var(--night-yellow); }
.fb-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 6px 2px; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--night-dim); }
.fb-foot b { color: var(--night-text); }
.fb-dots { display: inline-flex; gap: 5px; }
.fb-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .18); transition: background-color .3s, transform .3s var(--spring); }
.fb-dots i.is-on { background: var(--night-yellow); transform: scale(1.25); }
@container (min-width: 520px) {
    .fb-grid { grid-template-columns: repeat(3, auto); justify-content: space-between; }
    .fb-cell { flex-direction: column; align-items: flex-start; gap: 8px; }
    .fb-lbl { width: auto; }
    .fb-flap { font-size: clamp(13px, calc((100cqi - 140px) / 22.4), 24px); }
}

/* Phone mockup — everything in em so the whole device scales smoothly */
.hero-visual { position: relative; display: flex; justify-content: center; min-width: 0; }
.phone {
    position: relative; flex: none;
    font-size: clamp(8.4px, 2.7vw, 10.6px);
    width: 30em; height: 61.5em; padding: .85em; border-radius: 5em;
    background: linear-gradient(150deg, #3A4150 0%, #12151C 30%, #0B0D12 70%, #2A303B 100%);
    box-shadow: inset 0 0 0 .14em rgba(255, 255, 255, .12), 0 3em 6em -2.4em rgba(5, 8, 16, .55), 0 1.2em 2.4em -1.2em rgba(5, 8, 16, .35);
}
@media (min-width: 1024px) { .phone { font-size: clamp(10px, .95vw, 11.6px); } }
.phone-btn { position: absolute; width: .32em; border-radius: .2em; background: #2A303B; }
.phone-btn.b1 { left: -.28em; top: 11em; height: 3em; }
.phone-btn.b2 { left: -.28em; top: 15.5em; height: 5.4em; }
.phone-btn.b3 { right: -.28em; top: 14em; height: 8em; }
.phone-screen { position: relative; height: 100%; overflow: hidden; border-radius: 4.2em; background: var(--bg); color: var(--text); }
.phone-screen::before { content: ""; position: absolute; inset: 0 0 auto; height: 28em; pointer-events: none; background: radial-gradient(120% 70% at 50% -10%, var(--bg-glow), transparent 70%); }

.mk-status { position: relative; display: flex; align-items: center; justify-content: space-between; height: 4.8em; padding: .6em 2.6em 0; font-size: 1em; }
.mk-status > span:first-child { font-size: 1.5em; font-weight: 650; letter-spacing: -.02em; }
.mk-island { position: absolute; left: 50%; top: 1.1em; width: 9.6em; height: 2.8em; margin-left: -4.8em; border-radius: 2em; background: #000; }
.mk-sys { display: inline-flex; gap: .45em; font-size: 1.4em; }
.mk-app { position: relative; padding: .4em 1.6em 0; }
.mk-bar { display: flex; align-items: center; gap: .8em; }
.mk-avatar { width: 2.95em; height: 2.95em; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 1.15em; font-weight: 700; color: var(--signal-ink); background: linear-gradient(140deg, #FFE266 0%, var(--signal) 45%, #FF9F1C 100%); }
.mk-search { flex: 1; min-width: 0; display: flex; align-items: center; gap: .5em; height: 2.9em; padding: 0 1.1em; border-radius: 2em; background: var(--fill-2); color: var(--text-3); font-size: 1.2em; font-weight: 500; }
.mk-ibtn { width: 3.4em; height: 3.4em; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--fill-2); font-size: 1em; }
.mk-ibtn i { font-size: 1.6em; }
.mk-hello { margin-top: 1.6em; }
.mk-eyebrow { display: block; font-family: var(--mono); font-size: .95em; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.mk-hello b { display: block; margin-top: .3em; font-size: 2.5em; font-weight: 700; letter-spacing: -.04em; line-height: 1.05; }
.mk-hello b span { color: var(--text-3); }

.mk-pass { position: relative; margin-top: 1.5em; border-radius: 2.2em; overflow: hidden; color: var(--pass-text); background: linear-gradient(165deg, var(--pass-bg) 0%, var(--pass-bg-2) 100%); box-shadow: var(--shadow-2), inset 0 0 0 1px var(--line); }
html[data-theme="dark"] .mk-pass { background: radial-gradient(100% 70% at 100% 0%, rgba(255, 210, 31, .12), transparent 60%), radial-gradient(80% 60% at 0% 100%, rgba(91, 149, 255, .16), transparent 60%), linear-gradient(165deg, var(--pass-bg) 0%, var(--pass-bg-2) 100%); }
.mk-stripe { height: .5em; background: repeating-linear-gradient(-45deg, var(--signal) 0 .8em, #0A0E18 .8em 1.6em); }
.mk-pass-top { display: flex; align-items: center; justify-content: space-between; gap: .8em; padding: 1.2em 1.5em 0; }
.mk-brand { display: inline-flex; align-items: center; gap: .5em; min-width: 0; font-family: var(--mono); font-size: .85em; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--pass-dim); white-space: nowrap; }
.mk-brand i { color: var(--signal-text); font-size: 1.3em; }
.mk-chip { display: inline-flex; align-items: center; gap: .5em; height: 2.2em; padding: 0 .9em; border-radius: 2em; font-family: var(--mono); font-size: .85em; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.mk-chip i { width: .55em; height: .55em; border-radius: 50%; background: currentColor; }
.mk-chip--green { background: var(--green-soft); color: var(--green); }
.mk-route { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1em; padding: 1.4em 1.5em .4em; }
.mk-route .end { text-align: right; }
.mk-time { display: block; font-family: var(--mono); font-size: 2.4em; font-weight: 650; letter-spacing: -.04em; line-height: 1; }
.mk-lbl { display: block; margin-top: .5em; font-family: var(--mono); font-size: .85em; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--pass-dim); }
.mk-path { position: relative; height: 3.4em; }
.mk-path::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: .16em; margin-top: -.08em; background: repeating-linear-gradient(90deg, var(--pass-line) 0 .4em, transparent .4em .8em); }
.mk-path::after { content: ""; position: absolute; left: 0; top: 50%; width: 43%; height: .16em; margin-top: -.08em; border-radius: .1em; background: var(--signal); box-shadow: 0 0 .8em var(--signal-glow); }
.mk-plane { position: absolute; z-index: 1; left: 43%; top: 50%; width: 2.4em; height: 2.4em; margin: -1.2em 0 0 -1.2em; border-radius: 50%; display: grid; place-items: center; background: var(--signal); color: var(--signal-ink); box-shadow: 0 0 0 .32em var(--signal-soft); }
.mk-plane i { font-size: 1.3em; transform: rotate(90deg); }
.mk-dur { position: absolute; left: 50%; bottom: -.5em; transform: translateX(-50%); font-family: var(--mono); font-size: .85em; font-weight: 600; color: var(--pass-dim); white-space: nowrap; }
.mk-perf { position: relative; height: 2em; }
.mk-perf::before { content: ""; position: absolute; left: 1.6em; right: 1.6em; top: 50%; border-top: .16em dashed var(--pass-line); }
.mk-perf::after { content: ""; position: absolute; left: -1em; right: -1em; top: 50%; height: 2em; margin-top: -1em; background: radial-gradient(circle at 0 50%, var(--bg) 0 1em, transparent 1.05em), radial-gradient(circle at 100% 50%, var(--bg) 0 1em, transparent 1.05em); }
.mk-grid { display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; gap: .5em; padding: 0 1.5em 1.1em; }
.mk-k { display: block; font-family: var(--mono); font-size: .75em; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--pass-dim); white-space: nowrap; }
.mk-v { display: block; margin-top: .35em; font-size: 1.1em; font-weight: 650; letter-spacing: -.01em; white-space: nowrap; }
.mk-v.sig { color: var(--signal-text); }
.mk-foot { display: flex; align-items: center; justify-content: space-between; gap: 1em; padding: 0 1.5em 1.4em; }
.mk-barcode { flex: 1; max-width: 14em; height: 2.6em; opacity: .8; background: repeating-linear-gradient(90deg, var(--pass-text) 0 .12em, transparent .12em .3em, var(--pass-text) .3em .52em, transparent .52em .62em, var(--pass-text) .62em .7em, transparent .7em 1em); }
.mk-code { font-family: var(--mono); font-size: .95em; font-weight: 600; color: var(--pass-dim); white-space: nowrap; }

.mk-qa { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4em; margin-top: 1.8em; }
.mk-qa span { display: flex; flex-direction: column; align-items: center; gap: .6em; font-size: 1.05em; font-weight: 550; color: var(--text); }
.mk-qa i { width: 2.4em; height: 2.4em; border-radius: 50%; display: grid; place-items: center; font-size: 1.75em; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1); }

.mk-salary {
    margin-top: 1.8em; padding: 1.6em; border-radius: 2.2em; color: #fff;
    background: radial-gradient(120% 90% at 100% 0%, rgba(255, 210, 31, .35), transparent 55%), radial-gradient(90% 80% at 0% 100%, rgba(91, 149, 255, .45), transparent 60%), linear-gradient(150deg, #1A2346 0%, #0E1428 60%, #0A0E1C 100%);
    box-shadow: var(--shadow-2);
}
.mk-salary-top { display: flex; align-items: center; justify-content: space-between; gap: .8em; }
.mk-salary .mk-eyebrow { color: rgba(255, 255, 255, .72); }
.mk-pill { height: 2.2em; display: inline-flex; align-items: center; padding: 0 .9em; border-radius: 2em; background: rgba(255, 255, 255, .14); font-size: .9em; font-weight: 600; white-space: nowrap; }
.mk-amount { display: flex; align-items: baseline; margin-top: .6em; font-size: 4.2em; font-weight: 700; letter-spacing: -.05em; line-height: 1; font-variant-numeric: tabular-nums; }
.mk-amount .ap { font-size: .6em; opacity: .55; margin-right: .06em; font-weight: 500; }
.mk-amount .dec { font-size: .52em; letter-spacing: -.02em; }
.mk-amount .cur { font-size: .52em; margin-left: .2em; opacity: .75; }
.mk-salary-sub { margin-top: .7em; font-size: 1.1em; color: rgba(255, 255, 255, .78); }
.mk-bar-p { height: .55em; margin-top: 1.2em; border-radius: 1em; background: rgba(255, 255, 255, .14); overflow: hidden; }
.mk-bar-p i { display: block; width: 50%; height: 100%; border-radius: inherit; background: var(--signal); }
.mk-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: .9em; margin-top: 1em; padding-bottom: 9em; }
.mk-tile { display: flex; flex-direction: column; gap: .5em; padding: 1.3em; border-radius: 2em; background: var(--surface); border: 1px solid var(--line); }
.mk-tile .mk-k { color: var(--text-3); display: flex; align-items: center; gap: .4em; }
.mk-tile b { font-size: 2.6em; font-weight: 700; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.mk-tile small { font-size: .5em; color: var(--text-3); margin-left: .1em; }
.mk-sub { font-size: 1em; color: var(--text-3); }
.mk-tabbar {
    position: absolute; left: 1.4em; right: 1.4em; bottom: 1.6em; height: 5.6em; padding: .5em;
    display: grid; grid-template-columns: repeat(5, 1fr); align-items: stretch;
    border-radius: 3em; background: var(--glass); -webkit-backdrop-filter: saturate(180%) blur(16px); backdrop-filter: saturate(180%) blur(16px);
    border: 1px solid var(--glass-line); box-shadow: var(--shadow-3);
}
.mk-tabbar span { position: relative; display: grid; place-items: center; border-radius: 3em; color: var(--text-3); font-size: 2.1em; }
.mk-tabbar span.on { background: var(--fill-2); color: var(--text); }
.mk-tabbar span.on::before { content: ""; position: absolute; top: .12em; left: 50%; width: .18em; height: .18em; margin-left: -.09em; border-radius: 50%; background: var(--signal); box-shadow: 0 0 .3em var(--signal-glow); }

/* floating callouts around the phone (desktop only) */
.hfloat {
    position: absolute; z-index: 2; display: none; align-items: center; gap: 12px; padding: 12px 18px 12px 12px; border-radius: 20px;
    background: var(--glass); -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px);
    border: 1px solid var(--glass-line); box-shadow: var(--shadow-3); white-space: nowrap;
}
.hfloat .row-ico { width: 40px; height: 40px; }
.hfloat-k { display: block; font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.hfloat b { display: block; margin-top: 2px; font-size: 16px; font-weight: 700; letter-spacing: -.02em; }
.hfloat--net { left: -6%; top: 60%; }
.hfloat--pdf { right: -4%; bottom: 14%; }
@media (min-width: 1024px) { .hfloat { display: flex; } }
@media (min-width: 1024px) and (max-width: 1180px) { .hfloat--net { left: -12%; } .hfloat--pdf { right: -10%; } }

/* Approach lights + runway (decor, behind the hero) */
.approach {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: -1; height: clamp(200px, 30vw, 360px);
    perspective: 340px; perspective-origin: 50% 0%; pointer-events: none;
    -webkit-mask-image: linear-gradient(to top, #000 55%, transparent); mask-image: linear-gradient(to top, #000 55%, transparent);
}
.approach-plane {
    --lamp: #FFC700; --lamp-core: #FFF3C4; --edge: rgba(255, 199, 0, .9);
    position: absolute; left: 50%; bottom: 0; width: 760px; height: 1300px; margin-left: -380px;
    transform-origin: 50% 100%; transform: rotateX(76deg);
}
html[data-theme="dark"] .approach-plane { --lamp: #FFD21F; --lamp-core: #FFFFFF; --edge: rgba(255, 236, 170, .95); }
.approach-plane::before { /* runway surface */
    content: ""; position: absolute; left: 41%; right: 41%; bottom: 300px; top: 0;
    background: linear-gradient(to top, var(--fill-2), var(--fill)); border-radius: 4px;
}
.rwy-edge { position: absolute; bottom: 300px; top: 0; width: 14px; background: radial-gradient(circle, var(--lamp-core) 0 2px, var(--edge) 3px, transparent 6px) 50% 0 / 14px 64px repeat-y; }
.rwy-edge.l { left: calc(41% - 7px); }
.rwy-edge.r { right: calc(41% - 7px); }
.rwy-center { position: absolute; left: 50%; bottom: 300px; top: 0; width: 6px; margin-left: -3px; opacity: .55; background: repeating-linear-gradient(to bottom, var(--text-3) 0 46px, transparent 46px 100px); }
.rwy-thr { position: absolute; left: 41%; right: 41%; bottom: 292px; height: 14px; background: radial-gradient(circle, #6EF0B4 0 2px, rgba(52, 211, 153, .85) 3px, transparent 6px) 0 50% / 18px 14px repeat-x; }
.als { position: absolute; left: 50%; bottom: 0; width: 120px; height: 290px; margin-left: -60px; }
.als i {
    position: absolute; left: 0; right: 0; bottom: calc(var(--n) * 31px + 6px); height: 14px; opacity: .5;
    background: radial-gradient(circle, var(--lamp-core) 0 2.5px, var(--lamp) 3.5px, transparent 7px) 50% 50% / 24px 14px repeat-x;
}
@media (prefers-reduced-motion: no-preference) {
    .rwy-edge { animation: gh-rwy-move 1.6s linear infinite; }
    .rwy-center { animation: gh-rwy-center 1.6s linear infinite; }
    .als i { animation: gh-als 2.2s linear infinite; animation-delay: calc(var(--n) * .07s); }
    .hero-title .l2::after { animation: gh-mark 1.1s .5s var(--ease-out) both; }
    .hero-chip-dot { animation: gh-ping 2s ease-out infinite; }
    .hero-cue i { animation: gh-cue 1.8s var(--ease-in-out) infinite; }
    .hfloat--net { animation: gh-floaty 6s ease-in-out infinite; }
    .hfloat--pdf { animation: gh-floaty 7s ease-in-out -2s infinite; }
    .mk-plane { animation: gh-bob 3s ease-in-out infinite; }
}
@keyframes gh-rwy-move { to { background-position: 50% 64px; } }
@keyframes gh-rwy-center { to { background-position: 0 100px; } }
@keyframes gh-als { 0% { opacity: 1; transform: scaleX(1.06); } 7% { opacity: .5; transform: none; } 100% { opacity: .5; } }
@keyframes gh-mark { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes gh-ping { 0% { box-shadow: 0 0 0 0 var(--green-soft); } 70%, 100% { box-shadow: 0 0 0 9px transparent; } }
@keyframes gh-cue { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }
@keyframes gh-floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* ─── TOUR ────────────────────────────────────────────────────────────────── */
.tour { padding-bottom: clamp(40px, 8vw, 80px); }
.jrail { position: sticky; top: calc(var(--sat) + var(--nav-h)); z-index: 30; padding: 8px var(--site-gutter); pointer-events: none; border-bottom: 1px solid transparent; transition: background-color .3s var(--ease-out), border-color .3s var(--ease-out), -webkit-backdrop-filter .3s, backdrop-filter .3s; }
/* Once stuck, the rail continues the header's glass so no content peeks through between them */
.jrail.is-stuck { background: var(--glass); -webkit-backdrop-filter: saturate(180%) blur(22px); backdrop-filter: saturate(180%) blur(22px); border-bottom-color: var(--line); }
.jrail.is-stuck .jrail-inner { box-shadow: none; }
body:has(.jrail.is-stuck) .snav.is-scrolled { border-bottom-color: transparent; }
.jrail-inner {
    position: relative; pointer-events: auto; max-width: 640px; margin: 0 auto; padding: 4px;
    border-radius: var(--r-pill); background: var(--glass); -webkit-backdrop-filter: saturate(180%) blur(22px); backdrop-filter: saturate(180%) blur(22px);
    border: 1px solid var(--glass-line); box-shadow: var(--shadow-2);
}
.jrail-stops { position: relative; z-index: 1; list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; }
.jrail-stops a {
    display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 40px; padding: 0 6px; border-radius: var(--r-pill);
    color: var(--text-2); font-size: 12.5px; font-weight: 650; letter-spacing: -.005em; text-decoration: none; white-space: nowrap;
    transition: background-color .35s var(--ease-out), color .25s;
}
.jrail-stops a i { display: none; font-size: 17px; }
.jrail-stops a:hover { color: var(--text); }
.jrail-stops a.is-active { background: var(--signal); color: var(--signal-ink); }
.jrail-stops a.is-done { color: var(--text); }
@media (min-width: 520px) { .jrail-stops a { font-size: 14px; } .jrail-stops a i { display: inline; } }
.jrail-track { position: absolute; left: 22px; right: 22px; bottom: -1px; height: 2px; border-radius: 2px; background: transparent; }
.jrail-fill { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--p, 0) * 100%); border-radius: inherit; background: var(--signal); box-shadow: 0 0 8px var(--signal-glow); }
.jrail-plane { position: absolute; top: 50%; left: calc(var(--p, 0) * 100%); width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; display: grid; place-items: center; background: var(--signal); color: var(--signal-ink); font-size: 11px; box-shadow: 0 0 0 3px var(--signal-soft); }
.jrail-plane i { transform: rotate(90deg); }

.stage { padding-top: clamp(56px, 9vw, 112px); scroll-margin-top: 64px; }
.stage:first-child { padding-top: clamp(28px, 4vw, 48px); }
.wsign { /* airport wayfinding sign — always dark with signal yellow */
    display: flex; align-items: center; gap: 14px; width: fit-content; max-width: 100%;
    padding: 10px 16px 10px 10px; border-radius: 14px;
    background: linear-gradient(180deg, #171D2A, #10141E); color: var(--night-yellow);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07), 0 16px 40px -20px rgba(5, 8, 16, .7);
}
.wsign-ico { width: 46px; height: 46px; flex: none; border-radius: 10px; display: grid; place-items: center; font-size: 27px; background: var(--night-yellow); color: #0A0E18; }
.wsign-txt { min-width: 0; display: flex; flex-direction: column; font-size: clamp(22px, 4vw, 30px); font-weight: 700; letter-spacing: -.025em; line-height: 1.05; }
.wsign-sub { margin-top: 4px; font-size: 13.5px; font-weight: 500; letter-spacing: 0; line-height: 1.3; color: var(--night-text-2); }
.wsign-gates { display: flex; align-items: center; gap: 8px; margin-left: 4px; padding-left: 14px; border-left: 1px solid rgba(255, 255, 255, .14); font-family: var(--mono); font-size: 15px; font-weight: 700; letter-spacing: .06em; white-space: nowrap; align-self: stretch; }
.wsign-gates i { display: none; }
@media (min-width: 480px) { .wsign-gates { margin-left: 10px; padding-left: 18px; } .wsign-gates i { display: inline; } }

.demo { display: grid; gap: 28px; align-items: center; padding-top: clamp(36px, 6vw, 72px); }
@media (min-width: 960px) {
    .demo { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(48px, 6vw, 88px); }
    .demo--rev .demo-copy { order: 2; }
}
.demo-copy { min-width: 0; }
.demo-eyebrow { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); }
.demo-eyebrow .chip { height: 22px; font-size: 10px; }
.demo-title { margin-top: 14px; font-size: clamp(30px, 5vw, 50px); font-weight: 700; letter-spacing: -.045em; line-height: 1.04; text-wrap: balance; }
.demo-title .soft { color: var(--text-3); }
.demo-text { margin-top: 16px; max-width: 52ch; font-size: 17px; line-height: 1.6; color: var(--text-2); text-wrap: pretty; }
.demo-text strong { color: var(--text); font-weight: 650; }
.demo-list { list-style: none; display: grid; gap: 10px; margin-top: 20px; }
.demo-list li { position: relative; padding-left: 32px; color: var(--text-2); font-size: 15.5px; line-height: 1.5; }
.demo-list li::before { content: ""; position: absolute; left: 0; top: .08em; width: 22px; height: 22px; border-radius: 7px; background: var(--signal); }
.demo-list li::after { content: ""; position: absolute; left: 7px; top: calc(.08em + 6px); width: 8px; height: 5px; border-left: 2px solid var(--signal-ink); border-bottom: 2px solid var(--signal-ink); transform: rotate(-45deg); }
.demo-hint { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; color: var(--text-2); font-size: 14.5px; }
.demo-hint i { font-size: 18px; color: var(--signal-text); }
.demo-visual { min-width: 0; }

/* Demo frame */
.dframe {
    container-type: inline-size;
    position: relative; isolation: isolate; overflow: clip;
    padding: 60px clamp(14px, 3.4vw, 30px) clamp(18px, 3.4vw, 30px);
    border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-2);
}
html[data-theme="dark"] .dframe { background: var(--surface-2); }
.dframe::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(var(--line-2) 1px, transparent 1.5px); background-size: 18px 18px; -webkit-mask-image: radial-gradient(80% 70% at 50% 40%, #000, transparent); mask-image: radial-gradient(80% 70% at 50% 40%, #000, transparent); }
.dframe-label {
    position: absolute; left: 16px; top: 16px; display: inline-flex; align-items: center; gap: 8px; max-width: calc(100% - 32px);
    height: 28px; padding: 0 12px; border-radius: var(--r-pill); background: var(--surface-3);
    font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dframe-label::before { content: ""; width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--signal); box-shadow: 0 0 6px var(--signal-glow); }

/* Pause looping demo animations while off-screen (JS adds .is-live when visible) */
.js .dframe:not(.is-live) *, .js .dframe:not(.is-live) *::before, .js .dframe:not(.is-live) *::after { animation-play-state: paused !important; }

/* D1 · calendar */
.dv-cal { position: relative; max-width: 440px; margin: 0 auto; padding-bottom: 4px; }
.dvc-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.dvc-nav { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--fill-2); font-size: 16px; }
.dvc-month { text-align: center; }
.dvc-month b { display: block; font-size: 19px; font-weight: 700; letter-spacing: -.02em; }
.dvc-month span { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .1em; color: var(--text-3); }
.dvc-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.dvc-wd { padding-bottom: 4px; text-align: center; font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); }
.dvc-wd.we { color: var(--text-3); }
.dvc-d { position: relative; min-height: 66px; padding: 6px 1px 10px; border-radius: 12px; display: flex; flex-direction: column; align-items: center; gap: 2px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2); font-variant-numeric: tabular-nums; }
html[data-theme="dark"] .dvc-d { background: var(--surface-3); }
.dvc-d b { font-size: 14px; font-weight: 650; line-height: 1.2; }
.dvc-d .t { font-family: var(--mono); font-size: 9.5px; font-weight: 600; line-height: 1.25; letter-spacing: -.04em; color: var(--text-2); }
.dvc-d .t + .t { color: var(--text-3); }
.dvc-d .k { margin-top: auto; font-family: var(--mono); font-size: 9.5px; font-weight: 700; letter-spacing: .04em; }
.dvc-d.has::after { content: ""; position: absolute; left: 50%; bottom: 5px; width: 14px; height: 3px; margin-left: -7px; border-radius: 2px; background: var(--c); }
.dvc-d.k-d { --c: var(--blue); }
.dvc-d.k-z { --c: var(--violet); background: var(--violet-soft); box-shadow: none; }
.dvc-d.k-u { --c: var(--teal); background: var(--teal-soft); box-shadow: none; }
.dvc-d.k-k { --c: var(--red); background: var(--red-soft); box-shadow: none; }
.dvc-d.k-u .k { color: var(--teal); }
.dvc-d.k-k .k { color: var(--red); }
.dvc-d.is-empty { background: transparent; }
.dvc-d.is-empty.we b { color: var(--text-3); }
.dvc-d.is-target { box-shadow: inset 0 0 0 2px var(--signal), 0 6px 18px -8px var(--signal-glow); }
.dvc-tap { position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: var(--signal-soft); box-shadow: 0 0 0 2px var(--signal); opacity: 0; pointer-events: none; }
.dvc-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 14px; font-size: 12.5px; color: var(--text-2); }
.dvc-legend span { display: inline-flex; align-items: center; gap: 6px; }
.dvc-legend span::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--c); }
.dvc-sheet {
    position: absolute; left: -4px; right: -4px; bottom: -10px; z-index: 3; padding: 8px 16px 16px;
    border-radius: 22px 22px 16px 16px; background: var(--surface); box-shadow: 0 -1px 0 var(--line-2), var(--shadow-3);
    transform: translateY(125%);
}
html[data-theme="dark"] .dvc-sheet { background: var(--surface-3); }
.dvc-grab { display: block; width: 36px; height: 4px; margin: 0 auto 10px; border-radius: 2px; background: var(--line-3); }
.dvc-sheet-title b { display: block; font-size: 17px; font-weight: 700; letter-spacing: -.02em; }
.dvc-sheet-title span { font-size: 13px; color: var(--text-2); }
.dvc-times { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.dvc-times > span { flex: 1; padding: 8px 12px; border-radius: 12px; background: var(--fill); }
.dvc-times small { display: block; font-size: 11px; color: var(--text-2); }
.dvc-times b { font-family: var(--mono); font-size: 18px; font-weight: 650; }
.dvc-times > i { color: var(--text-3); }
.dvc-kinds { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.dvc-kinds span { height: 30px; display: inline-flex; align-items: center; padding: 0 12px; border-radius: var(--r-pill); background: var(--fill-2); font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.dvc-kinds span.on { background: var(--surface-inv); color: var(--text-inv); }
.dvc-save { display: flex; align-items: center; justify-content: center; height: 42px; margin-top: 12px; border-radius: var(--r-pill); background: var(--signal); color: var(--signal-ink); font-weight: 650; font-size: 14.5px; }
@media (prefers-reduced-motion: no-preference) {
    .dv-cal .dvc-tap { animation: gh-cal-tap 7s var(--ease-out) infinite; }
    .dv-cal .dvc-sheet { animation: gh-cal-sheet 7s var(--ease-out) infinite; }
    .dv-cal .is-target .t, .dv-cal .is-target::after { animation: gh-cal-fill 7s var(--ease-out) infinite; }
    .dv-cal .dvc-save { animation: gh-cal-save 7s var(--ease-out) infinite; }
}
@keyframes gh-cal-tap { 0%, 8% { opacity: 0; transform: scale(.4); } 12% { opacity: 1; transform: scale(1); } 22%, 100% { opacity: 0; transform: scale(1.7); } }
@keyframes gh-cal-sheet { 0%, 16% { transform: translateY(125%); } 26%, 58% { transform: translateY(0); } 66%, 100% { transform: translateY(125%); } }
@keyframes gh-cal-fill { 0%, 62% { opacity: 0; } 68%, 94% { opacity: 1; } 100% { opacity: 0; } }
@keyframes gh-cal-save { 0%, 50% { transform: none; } 53% { transform: scale(.94); } 57%, 100% { transform: none; } }

/* D2 · PDF import */
.dv-pdf { display: grid; gap: 16px; align-items: center; }
@container (min-width: 460px) { .dv-pdf { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 20px; } }
.pdf-page { /* paper is always white — explicit dark ink */
    position: relative; overflow: hidden; padding: 12px 12px 10px; border-radius: 10px;
    background: #FFFFFF; color: #0A0E18; box-shadow: 0 16px 40px -18px rgba(10, 14, 24, .45), 0 0 0 1px rgba(10, 14, 24, .08);
    transform: rotate(-1.6deg);
}
.pdf-head { display: flex; align-items: center; gap: 6px; padding-bottom: 8px; margin-bottom: 4px; border-bottom: 2px solid #0A0E18; font-family: var(--mono); font-size: 10.5px; font-weight: 700; color: #0A0E18; }
.pdf-head i { color: #C93A3F; font-size: 16px; }
.pdf-row { display: flex; align-items: center; gap: 8px; padding: 6px 2px; border-bottom: 1px dashed #D5DAE3; font-family: var(--mono); font-size: 10.5px; color: #485063; }
.pdf-row b { font-weight: 600; color: #0A0E18; white-space: nowrap; }
.pdf-row i { flex: 1; height: 4px; border-radius: 2px; background: #E9ECF1; }
.pdf-row em { font-style: normal; white-space: nowrap; }
.pdf-row.hit em { color: #0A0E18; font-weight: 700; }
.pdf-scan { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: #FFCC00; box-shadow: 0 0 12px 3px rgba(255, 204, 0, .7); opacity: 0; }
.pdf-out { display: grid; gap: 8px; }
.pdf-out-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.pdf-badge { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: var(--r-pill); background: var(--green-soft); color: var(--green); font-size: 12.5px; font-weight: 650; }
.pdf-prev { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); }
.pdf-shift { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 8px 12px; border-radius: 12px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
html[data-theme="dark"] .pdf-shift { background: var(--surface-3); }
.pdf-d { font-size: 14px; color: var(--text-2); white-space: nowrap; }
.pdf-d b { color: var(--text); font-weight: 650; }
.pdf-t { margin-left: auto; font-family: var(--mono); font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.pdf-shift i { color: var(--green); font-size: 18px; }
.pdf-more { font-size: 13px; color: var(--text-2); padding-left: 4px; }
.pdf-btn { display: flex; align-items: center; justify-content: center; height: 42px; border-radius: var(--r-pill); background: var(--signal); color: var(--signal-ink); font-size: 14.5px; font-weight: 650; }
@media (prefers-reduced-motion: no-preference) {
    .dv-pdf .pdf-scan { animation: gh-pdf-scan 6s var(--ease-in-out) infinite; }
    .dv-pdf .pdf-shift { animation: gh-pdf-in 6s var(--ease-out) infinite backwards; animation-delay: calc(1s + var(--i) * .45s); }
    .dv-pdf .pdf-btn { animation: gh-pdf-btn 6s var(--ease-out) infinite; }
}
@keyframes gh-pdf-scan { 0% { top: 8%; opacity: 0; } 6% { opacity: 1; } 46% { top: 96%; opacity: 1; } 52%, 100% { top: 96%; opacity: 0; } }
@keyframes gh-pdf-in { 0% { opacity: 0; transform: translateX(-14px); } 8% { opacity: 1; transform: none; } 70% { opacity: 1; transform: none; } 78%, 100% { opacity: 0; transform: none; } }
@keyframes gh-pdf-btn { 0%, 55% { box-shadow: 0 0 0 0 var(--signal-glow); transform: none; } 60% { transform: scale(.96); } 64% { box-shadow: 0 0 0 10px transparent; transform: none; } 100% { box-shadow: 0 0 0 0 transparent; } }

/* D3 · code verification */
.dv-code { position: relative; display: grid; gap: 14px; justify-items: center; max-width: 420px; margin: 0 auto; }
.code-notif {
    width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 20px;
    background: var(--glass); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border: 1px solid var(--glass-line); box-shadow: var(--shadow-2);
}
.code-app { width: 38px; height: 38px; flex: none; border-radius: 10px; display: grid; place-items: center; background: var(--signal); color: var(--signal-ink); font-size: 20px; }
.code-msg { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 13.5px; line-height: 1.35; }
.code-msg b { font-weight: 650; }
.code-msg span { color: var(--text-2); overflow-wrap: anywhere; }
.code-when { align-self: flex-start; font-size: 12px; color: var(--text-2); }
.code-lbl { margin-top: 4px; font-size: 14px; color: var(--text-2); }
.code-cells { display: grid; grid-template-columns: repeat(6, minmax(0, 48px)); gap: 7px; justify-content: center; width: 100%; }
.code-cells span { height: 58px; border-radius: 14px; display: grid; place-items: center; background: var(--surface-2); box-shadow: inset 0 0 0 1.5px var(--signal); }
html[data-theme="dark"] .code-cells span { background: var(--surface-3); }
.code-cells b { font-family: var(--mono); font-size: 25px; font-weight: 650; }
.code-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; font-size: 13px; color: var(--text-2); }
.code-meta span { display: inline-flex; align-items: center; gap: 6px; }
.code-ok { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 16px; border-radius: var(--r-pill); background: var(--green-soft); color: var(--green); font-weight: 650; font-size: 14.5px; }
.code-ok i { font-size: 18px; }
@media (prefers-reduced-motion: no-preference) {
    .dv-code .code-notif { animation: gh-code-notif 7s var(--ease-out) infinite; }
    .dv-code .code-cells span { animation: gh-code-box 7s var(--ease-out) infinite backwards; animation-delay: calc(var(--i) * .22s); }
    .dv-code .code-cells b { animation: gh-code-digit 7s var(--ease-out) infinite backwards; animation-delay: calc(var(--i) * .22s); }
    .dv-code .code-ok { animation: gh-code-ok 7s var(--spring) infinite; }
}
@keyframes gh-code-notif { 0% { opacity: 0; transform: translateY(-24px) scale(.96); } 6%, 72% { opacity: 1; transform: none; } 80%, 100% { opacity: 0; transform: translateY(-24px) scale(.96); } }
@keyframes gh-code-box { 0%, 18% { box-shadow: inset 0 0 0 1.5px var(--line-2); } 22%, 84% { box-shadow: inset 0 0 0 1.5px var(--signal); } 90%, 100% { box-shadow: inset 0 0 0 1.5px var(--line-2); } }
@keyframes gh-code-digit { 0%, 18% { opacity: 0; transform: translateY(8px) scale(.6); } 23%, 84% { opacity: 1; transform: none; } 90%, 100% { opacity: 0; } }
@keyframes gh-code-ok { 0%, 50% { opacity: 0; transform: scale(.6); } 56%, 84% { opacity: 1; transform: none; } 90%, 100% { opacity: 0; transform: scale(.9); } }

/* D4 · gross pay segments */
.dv-gross { display: grid; gap: 22px; }
.gr-chart { display: grid; gap: 10px; }
.gr-axis, .gr-lane { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; align-items: center; }
@container (min-width: 460px) { .gr-axis, .gr-lane { grid-template-columns: 118px minmax(0, 1fr); } }
.gr-ticks { position: relative; height: 18px; margin: 0 8px; }
.gr-ticks span { position: absolute; left: calc(var(--n) / 8 * 100%); top: 0; transform: translateX(-50%); font-family: var(--mono); font-size: 10.5px; font-weight: 600; color: var(--text-2); white-space: nowrap; }
.gr-ticks span.mid { color: var(--amber); }
.gr-ticks span:not(.mid):nth-child(even) { visibility: hidden; }
@container (min-width: 460px) { .gr-ticks span:not(.mid):nth-child(even) { visibility: visible; } }
.gr-name { font-size: 12.5px; font-weight: 650; color: var(--text); white-space: nowrap; }
.gr-track { position: relative; height: 28px; margin: 0 8px; border-radius: 8px; background: var(--fill) linear-gradient(90deg, var(--line-2) 1px, transparent 1px) 0 0 / 12.5% 100%; }
.gr-track::after { content: ""; position: absolute; left: 25%; top: -6px; bottom: -6px; border-left: 2px dashed var(--amber); opacity: .7; }
.gr-bar { position: absolute; top: 4px; bottom: 4px; left: calc(var(--a) / 8 * 100%); width: calc((var(--b) - var(--a)) / 8 * 100%); border-radius: 6px; transform-origin: left center; }
.gr-bar.base { background: var(--blue); }
.gr-bar.night { background: var(--violet); }
.gr-bar.sun { background: var(--amber); }
.gr-sum { display: grid; gap: 2px; }
.gr-sum > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.gr-sum dt { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; font-size: 14.5px; font-weight: 600; }
.gr-sum dt small { font-size: 12.5px; font-weight: 500; color: var(--text-2); font-family: var(--mono); }
.gr-sum dd { font-family: var(--mono); font-size: 14.5px; font-weight: 650; white-space: nowrap; font-variant-numeric: tabular-nums; }
.gr-sum .tot { border-bottom: 0; padding-top: 12px; }
.gr-sum .tot dt { font-size: 15.5px; }
.gr-sum .tot dd { font-family: var(--font); font-size: clamp(24px, 6cqi, 30px); font-weight: 700; letter-spacing: -.04em; }
.gr-dot { width: 10px; height: 10px; flex: none; border-radius: 3px; }
.gr-dot.base { background: var(--blue); } .gr-dot.night { background: var(--violet); } .gr-dot.sun { background: var(--amber); }
@media (prefers-reduced-motion: no-preference) {
    .js .demo-visual:not(.is-in) .gr-bar { transform: scaleX(0); }
    .js .demo-visual .gr-bar { transition: transform 1.1s var(--ease-out); }
    .js .demo-visual .gr-bar.night { transition-delay: .35s; }
    .js .demo-visual .gr-bar.sun { transition-delay: .7s; }
}

/* D5 · net ticket */
.dv-net { max-width: 460px; margin: 0 auto; }
.net-ticket { position: relative; padding: 18px 20px 20px; border-radius: 22px; color: var(--pass-text); background: linear-gradient(165deg, var(--pass-bg), var(--pass-bg-2)); box-shadow: var(--shadow-2), inset 0 0 0 1px var(--line); }
html[data-theme="dark"] .net-ticket { background: radial-gradient(90% 60% at 100% 0%, rgba(52, 211, 153, .10), transparent 60%), linear-gradient(165deg, var(--pass-bg), var(--pass-bg-2)); }
.net-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 10px; font-family: var(--mono); font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--pass-dim); }
.net-head i { color: var(--green); font-size: 15px; }
.net-head .chip { height: 22px; font-size: 10px; }
.net-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px dashed var(--pass-line); font-size: 14.5px; }
.net-row span { color: var(--text-2); }
.net-row b { font-family: var(--mono); font-weight: 650; white-space: nowrap; font-variant-numeric: tabular-nums; }
.net-row.neg b { color: var(--red); }
.net-row.pos b { color: var(--green); }
.net-perf { position: relative; height: 26px; margin: 4px -20px; }
.net-perf::before { content: ""; position: absolute; left: 22px; right: 22px; top: 50%; border-top: 2px dashed var(--pass-line); }
.net-perf::after { content: ""; position: absolute; inset: 0 -13px; background: radial-gradient(circle at 0 50%, var(--surface) 0 13px, transparent 13.5px), radial-gradient(circle at 100% 50%, var(--surface) 0 13px, transparent 13.5px); }
html[data-theme="dark"] .net-perf::after { background: radial-gradient(circle at 0 50%, var(--surface-2) 0 13px, transparent 13.5px), radial-gradient(circle at 100% 50%, var(--surface-2) 0 13px, transparent 13.5px); }
.net-total { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.net-total > span { font-family: var(--mono); font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--pass-dim); }
.net-total b { font-size: clamp(30px, 9cqi, 40px); font-weight: 700; letter-spacing: -.045em; line-height: 1; color: var(--green); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (prefers-reduced-motion: no-preference) {
    .js .demo-visual:not(.is-in) .net-row { opacity: 0; transform: translateY(8px); }
    .js .demo-visual .net-row { transition: opacity .5s var(--ease-out), transform .6s var(--ease-out); transition-delay: calc(.25s + var(--i) * .18s); }
}

/* D6 · AZK */
.dv-azk { display: grid; gap: 18px; max-width: 460px; margin: 0 auto; }
.azk-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.azk-k { font-family: var(--mono); font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); }
.azk-val { font-size: clamp(36px, 11cqi, 48px); font-weight: 700; letter-spacing: -.05em; line-height: 1; color: var(--green); font-variant-numeric: tabular-nums; }
.azk-val small { font-size: .45em; color: var(--text-2); letter-spacing: 0; }
.azk-gauge { padding-top: 20px; }
.azk-track { position: relative; height: 12px; border-radius: 99px; background: var(--fill-2); }
.azk-track::before { /* filled 0 → marker */ content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: calc(var(--m, 55%) - 50%); border-radius: 0 99px 99px 0; background: var(--green); }
.azk-zero { position: absolute; left: 50%; top: -5px; bottom: -5px; width: 2px; margin-left: -1px; background: var(--text-3); border-radius: 2px; }
.azk-thr { position: absolute; right: 0; top: -6px; bottom: -6px; width: 2px; background: var(--amber); }
.azk-thr em { position: absolute; right: -2px; bottom: calc(100% + 4px); font-style: normal; font-family: var(--mono); font-size: 10.5px; font-weight: 600; color: var(--amber); white-space: nowrap; }
.azk-mark { position: absolute; top: 50%; left: var(--m, 55%); width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: var(--surface); box-shadow: 0 0 0 3px var(--green), var(--shadow-2); }
.azk-scale { display: flex; justify-content: space-between; margin-top: 10px; font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--text-2); }
.azk-led { display: grid; gap: 8px; }
.azk-row { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 6px 12px 6px 6px; border-radius: 14px; background: var(--surface-2); }
html[data-theme="dark"] .azk-row { background: var(--surface-3); }
.azk-row .row-ico { width: 38px; height: 38px; font-size: 18px; }
.azk-l { flex: 1; min-width: 0; font-size: 14.5px; font-weight: 600; }
.azk-row b { font-family: var(--mono); font-size: 14.5px; font-weight: 650; white-space: nowrap; }
.azk-row b.plus { color: var(--green); }
.azk-row b.minus { color: var(--amber); }
@property --m { syntax: "<percentage>"; inherits: true; initial-value: 55%; }
@media (prefers-reduced-motion: no-preference) {
    .js .demo-visual.is-in .azk-gauge { animation: gh-azk 3s var(--ease-in-out) .3s both; }
    .js .demo-visual:not(.is-in) .azk-row { opacity: 0; transform: translateX(-10px); }
    .js .demo-visual .azk-row { transition: opacity .5s var(--ease-out), transform .6s var(--ease-out); transition-delay: calc(.3s + var(--i) * .7s); }
}
@keyframes gh-azk { 0% { --m: 50%; } 25% { --m: 72.5%; } 55% { --m: 62.5%; } 85%, 100% { --m: 55%; } }

/* D7 · home layout reorder */
.dv-home { display: grid; gap: 8px; max-width: 440px; margin: 0 auto; }
.hl-row { position: relative; display: flex; align-items: center; gap: 10px; height: 60px; padding: 0 12px 0 4px; border-radius: 16px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
html[data-theme="dark"] .hl-row { background: var(--surface-3); }
.hl-grip { width: 28px; display: grid; place-items: center; color: var(--text-3); font-size: 20px; flex: none; }
.hl-ico { width: 36px; height: 36px; flex: none; border-radius: 11px; display: grid; place-items: center; background: var(--fill-2); font-size: 18px; }
.hl-main { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.hl-main b { font-size: 14.5px; font-weight: 650; }
.hl-main small { font-size: 12.5px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hl-size { display: inline-flex; padding: 2px; border-radius: 99px; background: var(--fill-2); flex: none; }
.hl-size span { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 99px; font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--text-2); }
.hl-size span.on { background: var(--surface); color: var(--text); box-shadow: 0 1px 4px rgba(0, 0, 0, .14); }
.hl-switch { position: relative; width: 40px; height: 24px; flex: none; border-radius: 99px; background: var(--green); }
.hl-switch::after { content: ""; position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(0, 0, 0, .2); }
.hl-2 { z-index: 2; }
@media (prefers-reduced-motion: no-preference) {
    .dv-home .hl-2 { animation: gh-hl-lift 7s var(--ease-in-out) infinite; }
    .dv-home .hl-0, .dv-home .hl-1 { animation: gh-hl-down 7s var(--ease-in-out) infinite; }
}
@keyframes gh-hl-lift {
    0%, 10% { transform: none; box-shadow: inset 0 0 0 1px var(--line); }
    16% { transform: scale(1.03); box-shadow: var(--shadow-3); }
    38% { transform: translateY(-136px) scale(1.03); box-shadow: var(--shadow-3); }
    44%, 60% { transform: translateY(-136px); box-shadow: inset 0 0 0 1px var(--line); }
    66% { transform: translateY(-136px) scale(1.03); box-shadow: var(--shadow-3); }
    88% { transform: scale(1.03); box-shadow: var(--shadow-3); }
    94%, 100% { transform: none; box-shadow: inset 0 0 0 1px var(--line); }
}
@keyframes gh-hl-down { 0%, 18% { transform: none; } 38%, 66% { transform: translateY(68px); } 86%, 100% { transform: none; } }

/* D8 · theme live switch (scoped tokens, independent of the page theme) */
.tdemo { display: grid; gap: 16px; justify-items: center; }
.tdemo-seg { display: inline-flex; padding: 4px; gap: 4px; border-radius: var(--r-pill); background: var(--fill-2); }
.tdemo-seg button { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 20px; border: 0; border-radius: var(--r-pill); background: none; color: var(--text-2); font-size: 15px; font-weight: 650; transition: background-color .3s var(--ease-out), color .2s, box-shadow .3s; }
.tdemo-seg button[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: 0 2px 10px -2px rgba(0, 0, 0, .2), 0 0 0 1px var(--line); }
html[data-theme="dark"] .tdemo-seg button[aria-pressed="true"] { background: var(--surface-3); }
.tscope {
    --ts-bg: #EEF0F4; --ts-surface: #FFFFFF; --ts-text: #0A0E18; --ts-text-2: #485063; --ts-line: rgba(10, 14, 24, .08); --ts-fill: rgba(10, 14, 24, .07); --ts-acc: #8A6100; --ts-acc-bg: rgba(255, 204, 0, .25);
    width: 100%; max-width: 440px; padding: 18px; border-radius: 24px; background: var(--ts-bg); color: var(--ts-text);
    box-shadow: inset 0 0 0 1px var(--ts-line);
    transition: background-color .55s var(--ease-out), color .4s;
}
.tscope[data-scope="dark"] { --ts-bg: #05070C; --ts-surface: #121722; --ts-text: #F3F5F9; --ts-text-2: #A3ABBB; --ts-line: rgba(255, 255, 255, .09); --ts-fill: rgba(255, 255, 255, .09); --ts-acc: #FFD21F; --ts-acc-bg: rgba(255, 210, 31, .16); }
.ts-card { padding: 20px; border-radius: 20px; background: var(--ts-surface); box-shadow: inset 0 0 0 1px var(--ts-line); transition: background-color .55s var(--ease-out); }
.ts-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ts-eyebrow { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ts-text-2); }
.ts-chip { height: 24px; display: inline-flex; align-items: center; padding: 0 10px; border-radius: 99px; background: var(--ts-acc-bg); color: var(--ts-acc); font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.ts-h { margin-top: 12px; font-size: 24px; font-weight: 700; letter-spacing: -.035em; color: var(--ts-text); }
.ts-p { margin-top: 6px; font-size: 14.5px; line-height: 1.5; color: var(--ts-text-2); }
.ts-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.ts-stats div { padding: 12px 14px; border-radius: 14px; background: var(--ts-fill); }
.ts-stats span { display: block; font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ts-text-2); }
.ts-stats b { display: block; margin-top: 4px; font-size: 22px; font-weight: 700; letter-spacing: -.03em; color: var(--ts-text); font-variant-numeric: tabular-nums; }
.ts-bar { height: 6px; margin-top: 16px; border-radius: 99px; background: var(--ts-fill); overflow: hidden; }
.ts-bar i { display: block; width: 92%; height: 100%; border-radius: inherit; background: #FFCC00; }
.tdemo-site { --h: 40px; color: var(--text); }

/* ─── FLYDUS (always-dark terminal panel) ─────────────────────────────────── */
.flydus {
    position: relative; isolation: isolate; overflow: clip;
    display: grid; gap: 36px; padding: clamp(24px, 5vw, 60px);
    border-radius: clamp(26px, 4vw, 40px); color: var(--night-text);
    background: radial-gradient(70% 60% at 100% 0%, rgba(77, 141, 255, .22), transparent 70%), radial-gradient(60% 50% at 0% 100%, rgba(255, 210, 31, .12), transparent 70%), linear-gradient(160deg, #0C1222 0%, #070A12 60%, #05070C 100%);
    box-shadow: var(--shadow-3), inset 0 0 0 1px rgba(255, 255, 255, .06);
}
@media (min-width: 1040px) { .flydus { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: 48px; } }
.flydus-glow { position: absolute; z-index: -1; inset: auto -10% -30% 30%; height: 60%; background: radial-gradient(closest-side, rgba(255, 210, 31, .10), transparent); pointer-events: none; }
.flydus-copy { min-width: 0; }
.flydus-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--night-yellow); }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: #34D399; box-shadow: 0 0 0 4px rgba(52, 211, 153, .18); }
.flydus-title { margin-top: 14px; font-size: clamp(34px, 5.6vw, 58px); font-weight: 700; letter-spacing: -.045em; line-height: 1.02; color: var(--night-text); text-wrap: balance; }
.flydus-title span { color: var(--night-text-2); }
.flydus-sub { margin-top: 16px; max-width: 50ch; font-size: 17px; line-height: 1.6; color: var(--night-text-2); }
.flydus-feats { list-style: none; display: grid; gap: 10px 20px; margin: 22px 0 28px; }
@media (min-width: 560px) { .flydus-feats { grid-template-columns: 1fr 1fr; } }
.flydus-feats li { display: flex; align-items: center; gap: 10px; color: var(--night-text); font-size: 15.5px; font-weight: 550; }
.flydus-feats i { color: #34D399; font-size: 19px; flex: none; }
.flydus-copy .btn { white-space: normal; text-align: center; line-height: 1.2; }
.flydus-board { min-width: 0; }
.fids { container-type: inline-size; overflow: hidden; border-radius: 20px; background: #090C14; font-family: var(--mono); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07), 0 40px 80px -40px rgba(0, 0, 0, .9); }
.fids-top { display: flex; align-items: center; gap: 12px; padding: 14px 16px; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--night-yellow); }
.fids-title { display: inline-flex; align-items: center; gap: 8px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fids-title i { font-size: 16px; }
.fids-live { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; color: #34D399; letter-spacing: .12em; }
.fids-live i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.fids-clock { color: var(--night-text); font-size: 14px; letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.fids-head, .fids-row {
    display: grid; align-items: center; gap: 2px 10px; padding: 0 14px;
    grid-template-columns: 3em minmax(0, 1fr) 2.6em 6.6em;
    grid-template-areas: "t f g s" "t d g s";
}
.fids-head { grid-template-areas: "t f g s"; height: 30px; font-size: 9.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--night-dim); border-top: 1px solid var(--night-line); border-bottom: 1px solid var(--night-line); }
.fids-head span:nth-child(1) { grid-area: t; } .fids-head span:nth-child(2) { grid-area: f; } .fids-head span:nth-child(3) { display: none; } .fids-head span:nth-child(4) { grid-area: g; } .fids-head span:nth-child(5) { grid-area: s; text-align: right; }
.fids-row { min-height: 58px; padding-top: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--night-line); font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.fids-row:nth-child(odd) { background: rgba(255, 255, 255, .02); }
.fids-row .t { grid-area: t; color: var(--night-yellow); font-size: 14px; }
.fids-row .f { grid-area: f; display: flex; align-items: center; gap: 8px; color: var(--night-text); white-space: nowrap; }
.fids-row .d { grid-area: d; color: var(--night-text-2); font-family: var(--font); font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fids-row .g { grid-area: g; color: var(--night-text); font-weight: 700; }
.fids-row .s { grid-area: s; text-align: right; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--night-text-2); white-space: nowrap; }
.fids-row .s.go { color: #34D399; } .fids-row .s.soon { color: var(--night-yellow); } .fids-row .s.amber { color: #FFB224; } .fids-row .s.red { color: #FF7A7F; } .fids-row .s.blue { color: #7FAEFF; }
.al { width: 24px; height: 24px; flex: none; border-radius: 7px; display: grid; place-items: center; background: var(--al); color: var(--al-ink, #fff); font-style: normal; font-size: 9.5px; font-weight: 700; letter-spacing: .02em; }
.fids .flap { font-size: 13px; }
.fids .flap-c { background: var(--night-3); color: var(--night-text); min-width: .7em; }
@container (min-width: 540px) {
    .fids-head, .fids-row { grid-template-columns: 3.4em 7.4em minmax(0, 1fr) 3em 7.6em; grid-template-areas: "t f d g s"; }
    .fids-head span:nth-child(3) { display: block; grid-area: d; }
    .fids-row { min-height: 50px; }
    .fids-row .d { font-family: var(--mono); font-weight: 600; color: var(--night-text); text-transform: uppercase; letter-spacing: .02em; }
}
.fids-sec { display: flex; align-items: center; gap: 12px; padding: 14px 16px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--night-text-2); }
.fids-sec-k { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.fids-sec-k i { font-size: 15px; }
.fids-sec-bars { flex: 1; display: flex; align-items: flex-end; gap: 3px; height: 26px; min-width: 40px; }
.fids-sec-bars i { flex: 1; max-width: 10px; height: calc(var(--h) * 10%); border-radius: 2px; background: rgba(255, 210, 31, .5); }
.fids-sec-bars i:nth-child(7) { background: var(--night-yellow); }
.fids-sec-v { color: var(--night-yellow); font-size: 14px; letter-spacing: .02em; white-space: nowrap; }
@container (max-width: 419px) {
    .fids .al, .fids-en { display: none; }
    .fids-sec { flex-wrap: wrap; justify-content: space-between; }
    .fids-sec-bars { order: 3; flex-basis: 100%; }
}
@media (max-width: 420px) { .flydus-copy .btn { padding: 0 18px; font-size: 15px; } }
.fids-note { margin-top: 12px; text-align: center; font-size: 13px; color: var(--night-text-2); }
@media (prefers-reduced-motion: no-preference) {
    .fids-row .s.soon, .fids-row .s.red { animation: gh-blink 1.4s steps(2, jump-none) infinite; }
    .fids-live i { animation: gh-beacon 1.6s ease-in-out infinite; }
    .js .flydus-board:not(.is-in) .fids-row { opacity: 0; transform: translateY(6px); }
    .js .flydus-board .fids-row { transition: opacity .45s var(--ease-out), transform .5s var(--ease-out); transition-delay: calc(.2s + var(--i) * .09s); }
    .js .flydus-board:not(.is-in) .fids-sec-bars i { transform: scaleY(0); }
    .js .flydus-board .fids-sec-bars i { transform-origin: bottom; transition: transform .6s var(--spring-soft); transition-delay: calc(.6s + var(--i) * .04s); }
}

/* ─── FEATURE TILES ───────────────────────────────────────────────────────── */
.ftiles { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.ftile {
    position: relative; display: flex; flex-direction: column; gap: 10px; padding: 20px 20px 22px;
    border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1);
}
@media (hover: hover) {
    .ftile { transition: translate .45s var(--spring), box-shadow .3s, border-color .3s; }
    .ftile:hover { translate: 0 -4px; box-shadow: var(--shadow-2); border-color: var(--line-2); }
    .ftile:hover .ftile-ico { transform: rotate(-6deg) scale(1.06); }
}
.ftile-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.ftile-ico { width: 46px; height: 46px; flex: none; border-radius: 13px; display: grid; place-items: center; font-size: 23px; transition: transform .45s var(--spring); }
.ftile-title { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 17px; font-weight: 650; letter-spacing: -.018em; line-height: 1.25; }
.ftile-title .chip { height: 22px; font-size: 10px; }
.ftile-desc { font-size: 14.5px; line-height: 1.5; color: var(--text-2); }

/* ─── STEPS ───────────────────────────────────────────────────────────────── */
.steps { position: relative; }
.steps-list { list-style: none; display: grid; gap: 14px; }
@media (min-width: 900px) { .steps-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; padding-top: 44px; } }
.step { position: relative; padding: 24px; border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1); }
.step-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.step-num { font-family: var(--mono); font-size: clamp(44px, 6vw, 58px); font-weight: 700; letter-spacing: -.06em; line-height: 1; }
.step-tag { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: var(--r-pill); background: var(--signal); color: var(--signal-ink); font-family: var(--mono); font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.step-title { margin-top: 18px; font-size: 22px; font-weight: 700; letter-spacing: -.028em; }
.step-desc { margin-top: 8px; font-size: 15.5px; line-height: 1.55; color: var(--text-2); }
.steps-path { display: none; }
@media (min-width: 900px) {
    .steps-path { display: block; position: absolute; left: calc(100% / 6); right: calc(100% / 6); top: 14px; height: 2px; background: repeating-linear-gradient(90deg, var(--line-3) 0 6px, transparent 6px 12px); }
    .steps-fill { position: absolute; inset: 0; background: var(--signal); box-shadow: 0 0 8px var(--signal-glow); transform-origin: left center; }
    .steps-plane { position: absolute; top: 50%; left: 100%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; display: grid; place-items: center; background: var(--signal); color: var(--signal-ink); font-size: 16px; box-shadow: 0 0 0 4px var(--signal-soft); }
    .steps-plane i { transform: rotate(90deg); }
}
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) and (min-width: 900px) {
        .steps-fill { animation: gh-steps-fill linear both; animation-timeline: view(); animation-range: entry 30% cover 55%; }
        .steps-plane { animation: gh-steps-plane linear both; animation-timeline: view(); animation-range: entry 30% cover 55%; }
    }
}
@keyframes gh-steps-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes gh-steps-plane { from { left: 0%; } to { left: 100%; } }

/* ─── TRUST ───────────────────────────────────────────────────────────────── */
.trust { display: grid; gap: 12px; }
@media (min-width: 820px) { .trust { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
.trust-item { padding: clamp(22px, 3vw, 30px); border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1); }
.trust-ico { width: 54px; height: 54px; border-radius: 15px; display: grid; place-items: center; font-size: 27px; }
.trust-item h3 { margin-top: 18px; font-size: 21px; font-weight: 700; letter-spacing: -.025em; }
.trust-item p { margin-top: 8px; font-size: 15.5px; line-height: 1.55; color: var(--text-2); }
.trust-item a { color: var(--text); font-weight: 600; text-decoration: underline; text-decoration-color: var(--line-3); }

/* ─── FINALE (boarding pass CTA) ──────────────────────────────────────────── */
.finale-sec { padding-bottom: clamp(56px, 8vw, 96px); }
.finale {
    position: relative; overflow: hidden; max-width: 1000px; margin: 0 auto;
    border-radius: clamp(26px, 4vw, 38px); color: var(--pass-text);
    background: linear-gradient(165deg, var(--pass-bg) 0%, var(--pass-bg-2) 100%);
    box-shadow: var(--shadow-3), inset 0 0 0 1px var(--line);
}
html[data-theme="dark"] .finale { background: radial-gradient(90% 70% at 100% 0%, rgba(255, 210, 31, .13), transparent 60%), radial-gradient(70% 60% at 0% 100%, rgba(91, 149, 255, .18), transparent 60%), linear-gradient(165deg, var(--pass-bg) 0%, var(--pass-bg-2) 100%); box-shadow: var(--shadow-3), inset 0 1px 0 rgba(255, 255, 255, .06); }
.finale-stripe { height: 8px; background: repeating-linear-gradient(-45deg, var(--signal) 0 12px, #0A0E18 12px 24px); }
.finale-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px clamp(20px, 4.4vw, 44px) 0; }
.finale-brand { display: inline-flex; align-items: center; gap: 8px; min-width: 0; font-family: var(--mono); font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--pass-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.finale-brand i { color: var(--signal-text); font-size: 16px; }
.finale-route { display: grid; grid-template-columns: auto minmax(40px, 1fr) auto; align-items: center; gap: clamp(12px, 3vw, 24px); padding: 24px clamp(20px, 4.4vw, 44px) 0; }
.finale-route b { display: block; font-family: var(--mono); font-size: clamp(38px, 10vw, 80px); font-weight: 700; letter-spacing: -.05em; line-height: .95; }
.finale-route b + span { display: block; margin-top: 8px; font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--pass-dim); }
.finale-route .end { text-align: right; }
.finale-path { position: relative; height: 40px; }
.finale-path::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: repeating-linear-gradient(90deg, var(--pass-line) 0 6px, transparent 6px 12px); }
.finale-plane { position: absolute; top: 50%; left: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; display: grid; place-items: center; background: var(--signal); color: var(--signal-ink); font-size: 18px; box-shadow: 0 0 0 5px var(--signal-soft), 0 8px 20px -6px var(--signal-glow); }
.finale-plane i { transform: rotate(90deg); }
.finale-body { padding: clamp(26px, 4vw, 40px) clamp(20px, 4.4vw, 44px) 4px; }
.finale-title { font-size: clamp(32px, 5.6vw, 56px); font-weight: 700; letter-spacing: -.045em; line-height: 1.02; text-wrap: balance; }
.finale-title span { color: var(--text-3); }
.finale-sub { margin-top: 14px; font-size: clamp(16px, 2vw, 19px); color: var(--text-2); }
.finale-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.finale-cta .btn { flex: 1 1 auto; }
@media (min-width: 560px) { .finale-cta .btn { flex: 0 0 auto; } }
.finale-tel { font-family: var(--mono); font-size: 15px; }
.finale-note { margin-top: 16px; font-size: 14.5px; color: var(--text-2); }
.finale-perf { position: relative; height: 34px; margin-top: 22px; }
.finale-perf::before { content: ""; position: absolute; left: 26px; right: 26px; top: 50%; border-top: 2px dashed var(--pass-line); }
.finale-perf::after { content: ""; position: absolute; left: -17px; right: -17px; top: 0; bottom: 0; background: radial-gradient(circle at 0 50%, var(--bg) 0 17px, transparent 17.5px), radial-gradient(circle at 100% 50%, var(--bg) 0 17px, transparent 17.5px); }
.finale-grid { display: grid; grid-template-columns: repeat(2, auto); justify-content: space-between; gap: 16px 20px; padding: 0 clamp(20px, 4.4vw, 44px) 18px; }
@media (min-width: 440px) { .finale-grid { grid-template-columns: repeat(4, auto); } }
.finale-grid span { display: block; font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--pass-dim); }
.finale-grid b { display: block; margin-top: 5px; font-size: 17px; font-weight: 650; }
.finale-grid b.sig { color: var(--signal-text); }
.finale-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 0 clamp(20px, 4.4vw, 44px) 26px; }
.finale-barcode { flex: 1; max-width: 320px; height: 42px; opacity: .85; background: repeating-linear-gradient(90deg, var(--pass-text) 0 2px, transparent 2px 5px, var(--pass-text) 5px 9px, transparent 9px 11px, var(--pass-text) 11px 12px, transparent 12px 16px, var(--pass-text) 16px 19px, transparent 19px 22px); }
.finale-code { font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--pass-dim); white-space: nowrap; }
@media (prefers-reduced-motion: no-preference) {
    .finale-plane { animation: gh-finale-fly 6s var(--ease-in-out) infinite; }
}
@keyframes gh-finale-fly { 0%, 100% { left: 18%; } 50% { left: 82%; } }

/* Section rhythm tweaks */
.flydus-sec { padding-top: clamp(40px, 7vw, 96px); }
.how { padding-top: clamp(56px, 9vw, 120px); }