/* Anystreet public website. Same palette and type as the game (UiTheme): night navy, mint-to-cyan accent, Barlow.
   Every page sits on a futuristic city at night: SVG skylines in ../img/city, drawn by tools/city/generate.php.
   Glass panels keep text readable over it, and site.js sinks and dims the skyline as the page scrolls. */

@font-face { font-family: "Barlow"; src: url("../fonts/barlow/Barlow-Medium.ttf") format("truetype"); font-weight: 400 500; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../fonts/barlow/Barlow-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../fonts/barlow/Barlow-Bold.ttf") format("truetype"); font-weight: 700 900; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("../fonts/barlow/BarlowCondensed-SemiBold.ttf") format("truetype"); font-weight: 400 600; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("../fonts/barlow/BarlowCondensed-Bold.ttf") format("truetype"); font-weight: 700 900; font-display: swap; }

:root {
    --bg: #03050c;
    --glass: rgba(8, 12, 27, 0.6);
    --glass-strong: rgba(8, 12, 27, 0.8);
    --glass-solid: rgba(7, 10, 23, 0.9);
    --line: rgba(255, 255, 255, 0.08);
    --line-strong: rgba(255, 255, 255, 0.16);
    --text: #f3f7fb;
    --text-2: #aab5c7;
    --text-3: #7f8ba1;
    --accent: #3bf2c6;
    --accent-2: #17b4f2;
    --accent-3: #7c5cff;
    --on-accent: #03141b;
    --danger: #ff4f6b;
    --warning: #ffb547;
    --success: #3ddc97;
    --holo: linear-gradient(100deg, #ffffff 0%, #d2fff3 22%, var(--accent) 48%, var(--accent-2) 74%, var(--accent-3) 100%);
    --brand: linear-gradient(135deg, var(--accent), var(--accent-2));
    --edge: linear-gradient(140deg, rgba(59, 242, 198, 0.5), rgba(23, 180, 242, 0.12) 34%, rgba(255, 255, 255, 0.05) 62%, rgba(124, 92, 255, 0.42));
    --sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.01) 42%, rgba(255, 255, 255, 0));
    --blur: blur(20px) saturate(150%);
    --shadow: 0 30px 80px -40px rgba(0, 0, 0, 0.95);
    --font-body: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-display: "Barlow Condensed", "Barlow", system-ui, sans-serif;
    --radius: 24px;
    --radius-lg: 32px;
    --header: 88px;
    --gutter: clamp(18px, 4vw, 56px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header) + 20px); -webkit-text-size-adjust: 100%; }
body {
    margin: 0; min-height: 100vh; overflow-x: hidden;
    background: var(--bg); color: var(--text);
    font: 500 17px/1.65 var(--font-body);
    -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: #8ff9de; }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { margin: 0; line-height: 1.1; font-weight: 700; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 8px; }
::selection { background: rgba(59, 242, 198, 0.32); color: #fff; }
main { position: relative; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 16px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 12px; background: var(--accent); color: var(--on-accent); font-weight: 700; }
.skip-link:focus { top: 12px; }
.container { width: min(1200px, 100% - 2 * var(--gutter)); margin-inline: auto; }
.narrow { width: min(820px, 100% - 2 * var(--gutter)); margin-inline: auto; }

/* ------------------------------------------------------------------ City backdrop
   Back to front: sky, stars, searchlights, far skyline with the spire's beam, haze, flying traffic, mid skyline with
   twinkling windows and beacons, haze, near skyline, the skyway, then the scroll shade. --d sets each depth's
   parallax share of the --sy (scroll), --px and --py (pointer) values that site.js writes. */
.city {
    --city-h: clamp(300px, 64vh, 780px);
    position: fixed; top: 0; left: 0; right: 0; z-index: -1; height: 100vh; height: 100lvh; overflow: hidden; pointer-events: none;
    background:
        radial-gradient(36% 30% at 50% 74%, rgba(59, 242, 198, 0.13), transparent 70%),
        radial-gradient(80% 48% at 50% 86%, rgba(124, 92, 255, 0.44), transparent 72%),
        radial-gradient(130% 42% at 50% 100%, rgba(255, 79, 216, 0.18), transparent 70%),
        linear-gradient(180deg, #02030a 0%, #040716 26%, #0a0e2e 50%, #191551 68%, #2a1c66 80%, #1b1548 92%, #0b0f2a 100%);
}
.city::after { content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(2, 3, 8, 0.55), transparent 24%), radial-gradient(130% 95% at 50% 42%, transparent 58%, rgba(1, 2, 6, 0.55)); }
.city__stars { position: absolute; inset: 0 0 34% 0; opacity: 0.9;
    background: url("../img/city/stars.svg") 0 0 / 1200px 700px;
    -webkit-mask-image: linear-gradient(#000 30%, transparent); mask-image: linear-gradient(#000 30%, transparent); }
.city__stars::after { content: ""; position: absolute; inset: 0; background: inherit; background-position: 600px 340px; animation: twinkle 7s ease-in-out infinite alternate; }

.city__searchlights span { position: absolute; bottom: calc(var(--city-h) * 0.3); width: 230px; height: 120vh; margin-left: -115px; transform-origin: 50% 100%;
    background: linear-gradient(90deg, transparent 8%, rgba(150, 225, 255, 0.16) 50%, transparent 92%);
    clip-path: polygon(48.5% 100%, 51.5% 100%, 100% 0, 0 0);
    -webkit-mask-image: linear-gradient(to top, #000, transparent 85%); mask-image: linear-gradient(to top, #000, transparent 85%);
    animation: sweep 17s ease-in-out infinite alternate; }
.city__searchlights span:nth-child(1) { left: 22%; --from: -20deg; --to: 4deg; }
.city__searchlights span:nth-child(2) { left: 66%; --from: 14deg; --to: -9deg; animation-duration: 22s; animation-delay: -7s; }
.city__searchlights span:nth-child(3) { left: 86%; --from: -10deg; --to: 12deg; animation-duration: 19s; animation-delay: -12s; opacity: 0.7; }

.city__depth { position: absolute; left: -6%; right: -6%;
    transform: translate3d(calc(var(--px, 0) * var(--d) * -14px), calc(var(--sy, 0) * var(--d) * 64px + var(--py, 0) * var(--d) * -6px), 0); }
.city__depth--far { --d: 0.25; bottom: calc(var(--city-h) * 0.08); height: var(--city-h); }
.city__depth--mid { --d: 0.55; bottom: calc(var(--city-h) * 0.03); height: calc(var(--city-h) * 0.7); }
.city__depth--near { --d: 1; bottom: 0; height: calc(var(--city-h) * 0.4); }
.city__layer { position: absolute; inset: 0; background-repeat: repeat-x; background-position: center bottom; background-size: auto 100%; }
.city__layer--far { background-image: url("../img/city/far.svg"); }
.city__layer--mid { background-image: url("../img/city/mid.svg"); }
.city__layer--twinkle-a { background-image: url("../img/city/mid-twinkle-a.svg"); animation: twinkle 5s ease-in-out infinite alternate; }
.city__layer--twinkle-b { background-image: url("../img/city/mid-twinkle-b.svg"); animation: twinkle 7s ease-in-out -3s infinite alternate-reverse; }
.city__layer--beacons { background-image: url("../img/city/mid-beacons.svg"); animation: beacon 2.4s steps(1, end) infinite; }
.city__layer--near { background-image: url("../img/city/near.svg"); }

/* The spire's needle sits 97% up the far layer, at its centre; the beam fades out before it reaches the header. */
.city__beam { position: absolute; left: 50%; bottom: 97%; width: 130px; margin-left: -65px;
    height: calc(100vh - var(--city-h) * 1.05 - var(--header)); height: calc(100lvh - var(--city-h) * 1.05 - var(--header));
    background: linear-gradient(90deg, transparent, rgba(111, 227, 255, 0.08) 40%, rgba(200, 250, 255, 0.5) 49.3%, #fff 50%, rgba(200, 250, 255, 0.5) 50.7%, rgba(111, 227, 255, 0.08) 60%, transparent);
    -webkit-mask-image: linear-gradient(to top, transparent, #000 5%, #000 30%, transparent); mask-image: linear-gradient(to top, transparent, #000 5%, #000 30%, transparent);
    animation: beam 4.5s ease-in-out infinite alternate; }

.city__haze { position: absolute; left: 0; right: 0; bottom: 0; }
.city__haze--far { height: calc(var(--city-h) * 0.62); background: linear-gradient(to top, rgba(52, 58, 150, 0.62) 8%, rgba(52, 58, 150, 0.22) 50%, rgba(52, 58, 150, 0)); }
.city__haze--mid { height: calc(var(--city-h) * 0.34); background: linear-gradient(to top, rgba(30, 110, 190, 0.34), rgba(30, 110, 190, 0)); }

.city__flyers span { position: absolute; left: 0; top: 22%; width: 84px; height: 2px; border-radius: 2px; opacity: 0;
    background: linear-gradient(90deg, transparent, rgba(111, 227, 255, 0.45) 70%, #fff);
    animation: fly 28s linear infinite; }
.city__flyers span::after { content: ""; position: absolute; right: -2px; top: -1px; width: 4px; height: 4px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px 3px rgba(111, 227, 255, 0.75); }
.city__flyers span:nth-child(2) { top: 33%; width: 56px; animation-duration: 36s; animation-delay: -14s; }
.city__flyers span:nth-child(3) { top: 15%; width: 70px; animation-name: fly-back; animation-duration: 32s; animation-delay: -6s;
    background: linear-gradient(270deg, transparent, rgba(255, 79, 216, 0.45) 70%, #fff); }
.city__flyers span:nth-child(3)::after { left: -2px; right: auto; box-shadow: 0 0 10px 3px rgba(255, 79, 216, 0.7); }
.city__flyers span:nth-child(4) { top: 44%; width: 40px; animation-duration: 24s; animation-delay: -19s; }

.city__skyway { position: absolute; left: 0; right: 0; bottom: 0; height: 64px; }
.city__skyway::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 12px; border-top: 1px solid rgba(150, 230, 255, 0.35);
    background: repeating-linear-gradient(90deg, rgba(150, 230, 255, 0.26) 0 2px, transparent 2px 46px); }
.city__skyway::after { content: ""; position: absolute; left: 0; right: 0; top: 12px; bottom: 0;
    background:
        linear-gradient(rgba(59, 242, 198, 0.9), rgba(59, 242, 198, 0.9)) top / 100% 1px no-repeat,
        repeating-linear-gradient(90deg, rgba(1, 2, 6, 0.9) 0 26px, transparent 26px 220px) 0 30px / 100% 100% no-repeat,
        linear-gradient(#0b1230, #060914 45%, #03050b);
    box-shadow: 0 -2px 22px rgba(59, 242, 198, 0.35); }
.city__lane { position: absolute; left: 0; z-index: 1; width: calc(100% + 1800px); height: 16px; background-repeat: repeat-x; background-size: 1800px 16px; }
.city__lane--a { top: -2px; background-image: url("../img/city/traffic-left.svg"); animation: lane-left 7s linear infinite; }
.city__lane--b { top: 3px; background-image: url("../img/city/traffic-left.svg"); background-position: 640px 0; opacity: 0.55; animation: lane-left 12s linear infinite; }
.city__lane--c { top: 9px; background-image: url("../img/city/traffic-right.svg"); animation: lane-right 9s linear infinite; }
.city__lane--d { top: 14px; background-image: url("../img/city/traffic-right.svg"); background-position: 900px 0; opacity: 0.5; animation: lane-right 14s linear infinite; }

.city__shade { position: absolute; inset: 0; opacity: var(--dim, 0); background: linear-gradient(180deg, rgba(2, 4, 10, 0.5), rgba(2, 4, 10, 0.74)); }

@keyframes twinkle { from { opacity: 0.15; } to { opacity: 1; } }
@keyframes beacon { 0%, 100% { opacity: 0.12; } 78% { opacity: 1; } }
@keyframes beam { from { opacity: 0.55; } to { opacity: 1; } }
@keyframes sweep { from { transform: rotate(var(--from)); } to { transform: rotate(var(--to)); } }
@keyframes fly { 0% { opacity: 0; transform: translate3d(-12vw, 0, 0); } 6%, 94% { opacity: 1; } 100% { opacity: 0; transform: translate3d(112vw, -5vh, 0); } }
@keyframes fly-back { 0% { opacity: 0; transform: translate3d(112vw, 0, 0); } 6%, 94% { opacity: 1; } 100% { opacity: 0; transform: translate3d(-12vw, 4vh, 0); } }
@keyframes lane-left { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-1800px, 0, 0); } }
@keyframes lane-right { from { transform: translate3d(-1800px, 0, 0); } to { transform: translate3d(0, 0, 0); } }

/* ------------------------------------------------------------------ Header */
.site-header { position: sticky; top: 0; z-index: 60; height: var(--header); padding: 12px 0; }
.site-header__inner { position: relative; isolation: isolate; height: 100%; display: flex; align-items: center; gap: 20px; padding: 0 10px 0 12px; border-radius: 20px; }
.site-header__inner::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; border: 1px solid transparent;
    background: linear-gradient(rgba(6, 9, 21, 0.5), rgba(6, 9, 21, 0.5)) padding-box,
        linear-gradient(120deg, rgba(59, 242, 198, 0.4), rgba(255, 255, 255, 0.08) 32%, rgba(255, 255, 255, 0.05) 66%, rgba(124, 92, 255, 0.4)) border-box;
    backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 18px 50px -24px rgba(0, 0, 0, 0.85); transition: background-color 0.3s; }
.site-header.is-scrolled .site-header__inner::before {
    background: linear-gradient(rgba(5, 8, 18, 0.8), rgba(5, 8, 18, 0.8)) padding-box,
        linear-gradient(120deg, rgba(59, 242, 198, 0.45), rgba(255, 255, 255, 0.08) 32%, rgba(255, 255, 255, 0.05) 66%, rgba(124, 92, 255, 0.45)) border-box; }
/* Reading progress, where the browser supports scroll-driven animations. */
.site-header__inner::after { content: ""; position: absolute; left: 22px; right: 22px; bottom: -1px; height: 2px; border-radius: 2px;
    background: var(--brand); box-shadow: 0 0 12px rgba(59, 242, 198, 0.75); transform: scaleX(0); transform-origin: 0 50%; }
@supports (animation-timeline: scroll()) {
    .site-header__inner::after { animation: progress linear both; animation-timeline: scroll(root); }
}
@keyframes progress { to { transform: scaleX(1); } }

.brand { display: inline-flex; align-items: center; gap: 13px; color: var(--text); flex-shrink: 0; }
.brand:hover { color: var(--text); }
.brand__mark { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center;
    background: var(--brand); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3) inset, 0 8px 28px rgba(23, 180, 242, 0.4), 0 0 24px rgba(59, 242, 198, 0.25); }
.brand__mark svg { width: 26px; height: 26px; }
.brand__text { display: grid; line-height: 1; }
.brand__word { font: 700 22px/1 var(--font-display); letter-spacing: 0.26em; }
.brand__tag { font: 600 9.5px/1.2 var(--font-display); letter-spacing: 0.04em; color: var(--accent); margin-top: 5px; }
.nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav a { position: relative; padding: 12px 16px; border-radius: 12px; color: var(--text-2);
    font: 600 14px/1 var(--font-display); letter-spacing: 0.16em; text-transform: uppercase; transition: color 0.2s, background-color 0.2s, box-shadow 0.2s; }
.nav a:hover { color: var(--text); background: rgba(255, 255, 255, 0.05); }
.nav a.is-active { color: var(--text); background: linear-gradient(180deg, rgba(59, 242, 198, 0.15), rgba(59, 242, 198, 0.04)); box-shadow: inset 0 0 0 1px rgba(59, 242, 198, 0.3); }
.nav a.is-active::after { content: ""; position: absolute; left: 50%; bottom: 3px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%;
    background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.nav-toggle { display: none; margin-left: auto; width: 46px; height: 46px; border-radius: 14px; border: 1px solid var(--line-strong);
    background: rgba(255, 255, 255, 0.05); color: var(--text); cursor: pointer; }
.nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after { display: block; width: 20px; height: 2px; margin: auto; border-radius: 2px;
    background: currentColor; position: relative; transition: transform 0.25s, background-color 0.25s; }
.nav-toggle__bars::before, .nav-toggle__bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after { top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { transform: translateY(-6px) rotate(-45deg); }

.status { display: inline-flex; align-items: center; gap: 9px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.04); color: var(--text-3); font: 600 12px/1 var(--font-display); letter-spacing: 0.18em; text-transform: uppercase; }
.status__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-3); }
.status.is-up { color: var(--text-2); }
.status.is-up .status__dot { background: var(--accent); box-shadow: 0 0 0 4px rgba(59, 242, 198, 0.15), 0 0 14px var(--accent); animation: pulse 2.4s ease-in-out infinite; }
.status.is-down .status__dot { background: var(--danger); box-shadow: 0 0 12px var(--danger); }
@keyframes pulse { 50% { box-shadow: 0 0 0 7px rgba(59, 242, 198, 0), 0 0 18px var(--accent); } }

/* ------------------------------------------------------------------ Type and controls */
.eyebrow { display: inline-flex; align-items: center; gap: 12px; color: var(--accent);
    font: 600 13px/1 var(--font-display); letter-spacing: 0.32em; text-transform: uppercase; }
.eyebrow::before { content: ""; width: 28px; height: 2px; border-radius: 2px; background: var(--brand); box-shadow: 0 0 10px rgba(59, 242, 198, 0.8); }
.display { font: 800 clamp(52px, 7.6vw, 116px)/0.88 var(--font-display); text-transform: uppercase; letter-spacing: -0.005em; text-shadow: 0 6px 40px rgba(2, 3, 9, 0.55); }
.display .holo { text-shadow: none; filter: drop-shadow(0 0 30px rgba(59, 242, 198, 0.3)); }
.title { font: 700 clamp(38px, 5.2vw, 68px)/0.95 var(--font-display); text-transform: uppercase; letter-spacing: 0.005em; }
.subtitle { font: 700 clamp(24px, 2.6vw, 32px)/1.1 var(--font-display); text-transform: uppercase; letter-spacing: 0.04em; }
.holo { background: var(--holo); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: holo-shift 9s ease-in-out infinite alternate; }
@keyframes holo-shift { to { background-position: 100% 0; } }
.lead { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.6; color: var(--text-2); max-width: 640px; text-shadow: 0 1px 20px rgba(2, 3, 9, 0.9); }
.muted { color: var(--text-2); }
.fine { color: var(--text-3); font-size: 14px; }

.btn { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 28px;
    border-radius: 999px; border: 1px solid transparent; cursor: pointer; white-space: nowrap;
    font: 700 15px/1 var(--font-display); letter-spacing: 0.2em; text-transform: uppercase;
    transition: translate 0.2s, box-shadow 0.25s, background-color 0.25s, color 0.2s; }
.btn svg { width: 18px; height: 18px; }
.btn:hover { translate: 0 -2px; }
.btn::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
    background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.5) 50%, transparent 70%); transform: translateX(-130%); transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); }
.btn:hover::after { transform: translateX(130%); }
.btn--primary { color: var(--on-accent); background: linear-gradient(135deg, #6ff8d8, var(--accent) 38%, var(--accent-2));
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4) inset, 0 14px 38px -10px rgba(23, 180, 242, 0.65), 0 0 46px -8px rgba(59, 242, 198, 0.55); }
.btn--primary:hover { color: var(--on-accent); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.55) inset, 0 18px 46px -10px rgba(23, 180, 242, 0.75), 0 0 60px -6px rgba(59, 242, 198, 0.7); }
.btn--ghost { color: var(--text); background: linear-gradient(rgba(8, 12, 27, 0.62), rgba(8, 12, 27, 0.62)) padding-box, var(--edge) border-box;
    backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); }
.btn--ghost::after { background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.12) 50%, transparent 70%); }
.btn--ghost:hover { color: #fff; box-shadow: 0 0 34px rgba(59, 242, 198, 0.2); }
.btn--danger { color: #fff; background: linear-gradient(135deg, #ff4f6b, #d62d50); box-shadow: 0 14px 38px -10px rgba(255, 79, 107, 0.55); }
.btn--danger:hover { color: #fff; box-shadow: 0 18px 46px -10px rgba(255, 79, 107, 0.7); }
.btn[disabled] { opacity: 0.55; cursor: progress; translate: none; }
.actions { display: flex; flex-wrap: wrap; gap: 14px; }

.chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line-strong);
    background: rgba(8, 12, 27, 0.55); color: var(--text-2); font: 600 12.5px/1 var(--font-display); letter-spacing: 0.16em; text-transform: uppercase;
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.chip--accent { color: var(--accent); border-color: rgba(59, 242, 198, 0.42); background: rgba(10, 40, 40, 0.5); }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }

/* ------------------------------------------------------------------ Glass cards */
.card { position: relative; border-radius: var(--radius); padding: 30px; border: 1px solid transparent;
    background: var(--sheen) padding-box, linear-gradient(var(--glass), var(--glass)) padding-box, var(--edge) border-box;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), var(--shadow);
    backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); }
.card--strong { background: var(--sheen) padding-box, linear-gradient(var(--glass-strong), var(--glass-strong)) padding-box, var(--edge) border-box; }
.spotlight { overflow: hidden; isolation: isolate; transition: translate 0.3s, box-shadow 0.35s; }
.spotlight::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity 0.35s;
    background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(59, 242, 198, 0.14), transparent 60%); }
.spotlight:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09), var(--shadow), 0 0 0 1px rgba(59, 242, 198, 0.18), 0 20px 60px -30px rgba(59, 242, 198, 0.45); }
.spotlight:hover::before { opacity: 1; }
.icon-tile { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; margin-bottom: 22px; color: var(--accent);
    background: linear-gradient(135deg, rgba(59, 242, 198, 0.18), rgba(23, 180, 242, 0.06));
    box-shadow: 0 0 0 1px rgba(59, 242, 198, 0.32) inset, 0 0 28px rgba(59, 242, 198, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.12); }
.icon-tile svg { width: 26px; height: 26px; }
.card h3 { font: 700 23px/1.15 var(--font-display); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 10px; }
.card p { color: var(--text-2); margin: 0; }
.grid { display: grid; gap: 20px; }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ------------------------------------------------------------------ Sections */
.section { position: relative; padding: clamp(60px, 8vw, 110px) 0; }
.section--tight { padding: clamp(28px, 4vw, 52px) 0; }
.section-head { display: grid; gap: 18px; margin-bottom: 52px; max-width: 760px; }
.section-head--center { margin-inline: auto; text-align: center; justify-items: center; }
.divider { height: 1px; border: 0; margin: 0; background: linear-gradient(90deg, transparent, var(--line-strong), transparent); }

/* Hero */
.hero { position: relative; min-height: calc(100vh - var(--header)); min-height: calc(100svh - var(--header)); display: grid; align-items: center;
    padding: clamp(28px, 5vh, 64px) 0 clamp(96px, 15vh, 160px); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero__copy { position: relative; isolation: isolate; display: grid; gap: 26px; justify-items: start; }
.hero__copy::before { content: ""; position: absolute; inset: -14% -16% -16% -24%; z-index: -1; pointer-events: none;
    background: radial-gradient(closest-side, rgba(3, 5, 12, 0.7), rgba(3, 5, 12, 0.36) 62%, transparent); }
.hero .display span { display: block; white-space: nowrap; }

.hud { position: relative; isolation: isolate; aspect-ratio: 1 / 1.02; width: 100%; max-width: 520px; justify-self: end; border-radius: var(--radius-lg); padding: 22px;
    border: 1px solid transparent; overflow: hidden;
    background: radial-gradient(120% 90% at 30% 20%, rgba(59, 242, 198, 0.12), transparent 60%) padding-box,
        linear-gradient(rgba(4, 8, 19, 0.58), rgba(4, 8, 19, 0.58)) padding-box, var(--edge) border-box;
    backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 50px 120px -40px rgba(23, 180, 242, 0.5), 0 0 80px -30px rgba(124, 92, 255, 0.5); }
/* A scan line sweeping the display, and corner brackets. */
.hud::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 22%; z-index: 1; pointer-events: none;
    background: linear-gradient(180deg, transparent, rgba(59, 242, 198, 0.04) 70%, rgba(59, 242, 198, 0.16) 97%, transparent); animation: scan 7s linear infinite; }
.hud::after { content: ""; position: absolute; inset: 12px; z-index: 1; pointer-events: none; opacity: 0.75;
    background:
        linear-gradient(var(--accent), var(--accent)) left top / 18px 2px no-repeat, linear-gradient(var(--accent), var(--accent)) left top / 2px 18px no-repeat,
        linear-gradient(var(--accent), var(--accent)) right top / 18px 2px no-repeat, linear-gradient(var(--accent), var(--accent)) right top / 2px 18px no-repeat,
        linear-gradient(var(--accent-3), var(--accent-3)) left bottom / 18px 2px no-repeat, linear-gradient(var(--accent-3), var(--accent-3)) left bottom / 2px 18px no-repeat,
        linear-gradient(var(--accent-3), var(--accent-3)) right bottom / 18px 2px no-repeat, linear-gradient(var(--accent-3), var(--accent-3)) right bottom / 2px 18px no-repeat; }
@keyframes scan { from { transform: translateY(-100%); } to { transform: translateY(460%); } }
.hud__map { position: absolute; inset: 0; width: 100%; height: 100%; }
.hud__top, .hud__bottom { position: absolute; z-index: 2; left: 22px; right: 22px; display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.hud__top { top: 22px; }
.hud__bottom { bottom: 22px; align-items: flex-end; }
.hud__panel { padding: 14px 16px; border-radius: 16px; background: rgba(4, 7, 16, 0.66); border: 1px solid var(--line-strong);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.hud__label { font: 600 11px/1 var(--font-display); letter-spacing: 0.3em; color: var(--text-3); text-transform: uppercase; }
.hud__value { margin-top: 8px; font: 700 30px/1 var(--font-display); letter-spacing: 0.04em; }
.hud__value small { font-size: 0.5em; color: var(--text-2); letter-spacing: 0.16em; margin-left: 4px; }
.hud__value--accent { color: var(--accent); text-shadow: 0 0 18px rgba(59, 242, 198, 0.6); }
.hud__instruction { display: flex; align-items: center; gap: 14px; }
.hud__arrow { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--brand); color: var(--on-accent); box-shadow: 0 0 22px rgba(59, 242, 198, 0.4); }
.hud__arrow svg { width: 26px; height: 26px; }
.route-line { stroke-dasharray: 9 7; animation: dash 1.4s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -32; } }

.ticker { position: relative; overflow: hidden; border-block: 1px solid var(--line); background: rgba(5, 8, 18, 0.55);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.ticker__track { display: flex; width: max-content; animation: ticker 40s linear infinite; }
.ticker__item { display: inline-flex; align-items: center; gap: 22px; padding: 20px 22px; white-space: nowrap;
    font: 700 15px/1 var(--font-display); letter-spacing: 0.34em; text-transform: uppercase; color: var(--text-2); }
.ticker__item::after { content: ""; width: 7px; height: 7px; transform: rotate(45deg); background: var(--accent); box-shadow: 0 0 12px var(--accent); }
@keyframes ticker { to { transform: translateX(-50%); } }

/* Stats strip */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-radius: var(--radius); border: 1px solid transparent;
    background: var(--sheen) padding-box, linear-gradient(var(--glass), var(--glass)) padding-box, var(--edge) border-box;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), var(--shadow); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); }
.stat { position: relative; display: grid; align-content: start; gap: 8px; padding: clamp(22px, 3vw, 34px) clamp(20px, 2.6vw, 34px); }
.stat + .stat::before { content: ""; position: absolute; left: 0; top: 20%; bottom: 20%; width: 1px; background: linear-gradient(transparent, var(--line-strong), transparent); }
.stat__value { font: 800 clamp(38px, 4.2vw, 56px)/0.95 var(--font-display); letter-spacing: 0.01em; }
.stat__label { color: var(--text-2); font-size: 15px; }

/* Bento features */
.bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.bento__item { display: flex; flex-direction: column; min-height: 236px; }
.bento__item--hero { grid-column: span 2; grid-row: span 2; }
.bento__item--wide { grid-column: span 2; }
.bento__item p { max-width: 46ch; }
.bento__map { width: 100%; max-width: 560px; height: auto; margin-top: auto; padding-top: 26px; }
.bento__terrain { position: absolute; z-index: -1; left: -10%; right: -10%; bottom: -40%; height: 90%; pointer-events: none; opacity: 0.75;
    background-image: linear-gradient(rgba(59, 242, 198, 0.3) 1px, transparent 1px), linear-gradient(90deg, rgba(59, 242, 198, 0.3) 1px, transparent 1px);
    background-size: 36px 36px; transform: perspective(360px) rotateX(64deg); transform-origin: 50% 0;
    -webkit-mask-image: radial-gradient(70% 90% at 50% 0%, #000 15%, transparent 75%); mask-image: radial-gradient(70% 90% at 50% 0%, #000 15%, transparent 75%);
    animation: terrain 2.6s linear infinite; }
@keyframes terrain { to { transform: perspective(360px) rotateX(64deg) translateY(36px); } }
.bento__glyph { position: absolute; z-index: -1; right: -22px; bottom: -26px; width: 170px; height: 170px; color: var(--accent); opacity: 0.07;
    stroke-width: 1.2; transition: opacity 0.35s, transform 0.5s; }
.bento__item:hover .bento__glyph { opacity: 0.14; transform: rotate(-8deg) scale(1.05); }

/* Steps */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.card.step { padding-top: 116px; }
.step__num { position: absolute; top: 28px; left: 30px; font: 800 72px/0.8 var(--font-display); color: transparent;
    -webkit-text-stroke: 1.5px rgba(59, 242, 198, 0.6); text-shadow: 0 0 26px rgba(59, 242, 198, 0.25); }
.step:not(:last-child)::after { content: ""; position: absolute; top: 56px; right: -19px; width: 20px; height: 2px; z-index: 1;
    background: var(--brand); box-shadow: 0 0 10px rgba(59, 242, 198, 0.8); }

.formula { display: grid; gap: 12px; }
.formula__row { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; padding: 16px 18px; border-radius: 14px;
    background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line); transition: border-color 0.25s, background-color 0.25s; }
.formula__row:hover { border-color: var(--line-strong); background: rgba(255, 255, 255, 0.05); }
.formula__row strong { font: 700 15px/1.2 var(--font-display); letter-spacing: 0.16em; text-transform: uppercase; }
.formula__row span { color: var(--text-2); text-align: right; }
.formula__row--plus { border-color: rgba(61, 220, 151, 0.28); background: rgba(61, 220, 151, 0.06); }
.formula__row--plus strong { color: var(--success); }
.formula__row--minus strong { color: #ff8a9c; }
.scoring { align-items: center; }

.banner { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 22px; align-items: center; padding: 26px 30px; border-radius: var(--radius);
    background: linear-gradient(110deg, rgba(255, 181, 71, 0.14), rgba(255, 79, 107, 0.08)), rgba(8, 10, 22, 0.66); border: 1px solid rgba(255, 181, 71, 0.38);
    box-shadow: var(--shadow); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); }
.banner__icon { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; color: var(--warning);
    background: rgba(255, 181, 71, 0.12); box-shadow: 0 0 0 1px rgba(255, 181, 71, 0.4) inset, 0 0 30px rgba(255, 181, 71, 0.2); }
.banner__icon svg { width: 28px; height: 28px; }
.banner h2, .banner h3 { font: 700 24px/1.1 var(--font-display); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 6px; color: #ffd28f; }
.banner p { margin: 0; color: var(--text-2); }

.cta { text-align: center; padding: clamp(52px, 7vw, 92px) clamp(24px, 5vw, 70px) clamp(120px, 13vw, 170px); overflow: hidden; isolation: isolate; }
.cta::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 58%; z-index: -1; opacity: 0.6;
    background: url("../img/city/mid.svg") center bottom / auto 100% repeat-x;
    -webkit-mask-image: linear-gradient(transparent, #000 65%); mask-image: linear-gradient(transparent, #000 65%); }
.cta::after { content: ""; position: absolute; inset: auto -20% -50% -20%; height: 110%; z-index: -2;
    background: radial-gradient(closest-side, rgba(124, 92, 255, 0.32), rgba(59, 242, 198, 0.12) 55%, transparent); }
.cta .actions { justify-content: center; margin-top: 30px; }
.cta .lead { margin-inline: auto; }
.cta .title { margin: 16px 0 18px; }

/* ------------------------------------------------------------------ Page hero (inner pages) */
.page-hero { position: relative; padding: clamp(48px, 8vw, 110px) 0 clamp(36px, 5vw, 64px); }
.page-hero .container { position: relative; isolation: isolate; }
.page-hero .container::before { content: ""; position: absolute; inset: -30% -10% -30% -20%; z-index: -1; max-width: 900px; pointer-events: none;
    background: radial-gradient(closest-side, rgba(3, 5, 12, 0.66), rgba(3, 5, 12, 0.3) 60%, transparent); }
.page-hero .title { margin: 18px 0 20px; text-shadow: 0 6px 40px rgba(2, 3, 9, 0.55); }
.page-hero .chips { margin-top: 26px; }

/* Legal */
.legal { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: clamp(24px, 4vw, 48px); align-items: start; padding-bottom: 110px; }
.toc { position: sticky; top: calc(var(--header) + 20px); display: grid; gap: 4px; padding: 18px; border-radius: var(--radius); border: 1px solid transparent;
    background: var(--sheen) padding-box, linear-gradient(var(--glass), var(--glass)) padding-box, var(--edge) border-box;
    box-shadow: var(--shadow); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); }
.toc__label { font: 600 11px/1 var(--font-display); letter-spacing: 0.32em; color: var(--text-3); text-transform: uppercase; padding: 4px 10px 12px; }
.toc a { display: flex; gap: 10px; padding: 8px 10px; border-radius: 10px; color: var(--text-2); font-size: 14.5px; line-height: 1.35; transition: color 0.2s, background-color 0.2s; }
.toc a:hover { color: var(--text); background: rgba(255, 255, 255, 0.05); }
.toc a span { color: var(--accent); font: 700 13px/1.35 var(--font-display); letter-spacing: 0.06em; min-width: 20px; }
.toc a.is-active { color: var(--text); background: rgba(59, 242, 198, 0.1); box-shadow: inset 2px 0 0 var(--accent); }
.prose { max-width: 860px; overflow-wrap: break-word; padding: clamp(24px, 4vw, 52px); border-radius: var(--radius-lg); border: 1px solid transparent;
    background: var(--sheen) padding-box, linear-gradient(var(--glass-solid), var(--glass-solid)) padding-box, var(--edge) border-box;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), var(--shadow); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); }
.prose .card, .prose .banner { backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; }
.prose .card { background: linear-gradient(rgba(59, 242, 198, 0.07), rgba(59, 242, 198, 0.02)) padding-box, linear-gradient(rgba(6, 9, 21, 0.94), rgba(6, 9, 21, 0.94)) padding-box, var(--edge) border-box; }
.prose > section { padding: 34px 0; border-top: 1px solid var(--line); }
.prose > section:first-of-type { border-top: 0; padding-top: 0; }
.prose h2 { display: flex; align-items: baseline; gap: 16px; font: 700 clamp(26px, 2.6vw, 32px)/1.1 var(--font-display); letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 18px; }
.prose h2 .num { font-size: 0.62em; color: var(--accent); letter-spacing: 0.12em; text-shadow: 0 0 14px rgba(59, 242, 198, 0.55); }
.prose h3 { font: 700 19px/1.25 var(--font-display); letter-spacing: 0.1em; text-transform: uppercase; margin: 26px 0 10px; color: var(--text); }
.prose p, .prose li { color: var(--text-2); }
.prose strong { color: var(--text); font-weight: 600; }
.prose ul { margin: 0 0 1em; padding-left: 0; list-style: none; display: grid; gap: 10px; }
.prose ul li { position: relative; padding-left: 24px; }
.prose ul li::before { content: ""; position: absolute; left: 2px; top: 0.62em; width: 7px; height: 7px; transform: rotate(45deg); background: var(--accent); box-shadow: 0 0 10px rgba(59, 242, 198, 0.7); }
.summary { margin-bottom: 44px; }
.summary h2 { font: 700 15px/1 var(--font-display); letter-spacing: 0.3em; text-transform: uppercase; color: var(--accent); margin-bottom: 18px; }
.summary ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.summary li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; color: var(--text-2); }
.summary li svg { width: 22px; height: 22px; color: var(--accent); margin-top: 2px; }
.prose .summary li { padding-left: 0; }
.prose .summary li::before { content: none; }
.legal-note { margin-bottom: 44px; }
.data-table { width: 100%; border-collapse: collapse; margin: 8px 0 18px; font-size: 15.5px; }
.data-table th, .data-table td { text-align: left; vertical-align: top; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.data-table th { font: 600 12px/1.2 var(--font-display); letter-spacing: 0.24em; text-transform: uppercase; color: var(--text-3); background: rgba(255, 255, 255, 0.02); }
.data-table td:first-child { color: var(--text); font-weight: 600; width: 32%; }
.data-table td { color: var(--text-2); }
.data-table tbody tr { transition: background-color 0.2s; }
.data-table tbody tr:hover { background: rgba(255, 255, 255, 0.025); }
.table-wrap { overflow-x: auto; border-radius: 16px; border: 1px solid var(--line); background: rgba(3, 5, 12, 0.35); }
.table-wrap .data-table { margin: 0; }
.table-wrap .data-table tr:last-child td { border-bottom: 0; }

/* Notices */
.notice { padding: 16px 20px; border-radius: 16px; border: 1px solid rgba(255, 181, 71, 0.4); background: rgba(40, 28, 10, 0.72); color: #ffd28f; font-size: 15px;
    backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); }
.notice code { color: #fff; }
.notice--dev { margin-top: 26px; }

/* ------------------------------------------------------------------ Support */
.help-card { display: grid; gap: 14px; color: var(--text); }
.help-card:hover { color: var(--text); translate: 0 -4px; }
.help-card__go { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; color: var(--accent); font: 700 13px/1 var(--font-display); letter-spacing: 0.24em; text-transform: uppercase; }
.help-card__go svg { width: 16px; height: 16px; transition: transform 0.2s; }
.help-card:hover .help-card__go svg { transform: translateX(4px); }
.faq { display: grid; gap: 12px; }
.faq details { border-radius: 18px; border: 1px solid var(--line); background: rgba(7, 10, 23, 0.74); transition: border-color 0.25s, background-color 0.25s; }
.faq details:hover { border-color: var(--line-strong); }
.faq details[open] { border-color: rgba(59, 242, 198, 0.38); background: linear-gradient(rgba(59, 242, 198, 0.05), rgba(59, 242, 198, 0.05)), rgba(7, 10, 23, 0.84); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 20px 22px;
    font: 600 18px/1.35 var(--font-body); color: var(--text); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
    background: linear-gradient(var(--accent), var(--accent)) center / 12px 2px no-repeat, linear-gradient(var(--accent), var(--accent)) center / 2px 12px no-repeat, rgba(59, 242, 198, 0.06);
    border: 1px solid rgba(59, 242, 198, 0.4); transition: transform 0.3s; }
.faq details[open] summary::after { transform: rotate(135deg); }
.faq .answer { padding: 0 22px 20px; color: var(--text-2); }
.faq .answer p:last-child { margin-bottom: 0; }
.faq-group { margin-top: 56px; }
.faq-group h2 { margin-bottom: 20px; text-shadow: 0 2px 24px rgba(2, 3, 9, 0.9); }
.contact { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 26px; align-items: center; }
.contact .subtitle { margin: 14px 0 12px; }
.contact .copy-row { margin-top: 20px; }
.copy-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.mono { font-family: ui-monospace, "Cascadia Code", "SF Mono", Consolas, monospace; font-size: 0.95em; }
.software-title { margin: 14px 0 22px; }

/* ------------------------------------------------------------------ Forms */
.form { display: grid; gap: 16px; }
.field { display: grid; gap: 8px; }
.field label { font: 600 12.5px/1 var(--font-display); letter-spacing: 0.24em; text-transform: uppercase; color: var(--text-2); }
.input { width: 100%; min-height: 54px; padding: 0 18px; border-radius: 14px; border: 1px solid var(--line-strong); background: rgba(2, 4, 10, 0.66);
    color: var(--text); font: 500 17px/1 var(--font-body); transition: border-color 0.2s, box-shadow 0.2s; }
.input::placeholder { color: var(--text-3); }
.input:focus { outline: none; border-color: rgba(59, 242, 198, 0.7); box-shadow: 0 0 0 4px rgba(59, 242, 198, 0.14), 0 0 24px rgba(59, 242, 198, 0.12); }
.check { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: start; color: var(--text-2); font-size: 15.5px; cursor: pointer; }
.check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--danger); }
.form-status { min-height: 1.6em; margin: 0; font-size: 15.5px; color: var(--accent); }
.form-status.is-error { color: #ff8a9c; }
.form-status.is-success { color: var(--success); }
.danger-zone { border-color: transparent; background: var(--sheen) padding-box, linear-gradient(var(--glass-strong), var(--glass-strong)) padding-box,
    linear-gradient(135deg, rgba(255, 79, 107, 0.6), rgba(255, 79, 107, 0.08) 50%, rgba(255, 181, 71, 0.4)) border-box; }
.danger-title { margin: 14px 0 18px; }
.erase-list { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 12px; }
.erase-list li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; color: var(--text-2); }
.erase-list svg { width: 22px; height: 22px; color: #ff8a9c; margin-top: 2px; }
.reset summary { cursor: pointer; font: 700 18px/1.2 var(--font-display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text); }
.reset summary::marker { color: var(--accent); }
.reset[open] summary { margin-bottom: 18px; }
.reset-form { margin: 22px 0 12px; }
.split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 24px; align-items: start; padding-bottom: 110px; }

/* ------------------------------------------------------------------ Error pages */
.error-page { min-height: calc(100vh - var(--header) - 260px); display: grid; place-items: center; text-align: center; padding: 70px 0 120px; }
.error-page > div { position: relative; isolation: isolate; }
.error-page > div::before { content: ""; position: absolute; inset: -12% -18%; z-index: -1; pointer-events: none;
    background: radial-gradient(closest-side, rgba(3, 5, 12, 0.72), rgba(3, 5, 12, 0.3) 62%, transparent); }
.glitch { position: relative; font: 800 clamp(120px, 24vw, 280px)/0.8 var(--font-display); letter-spacing: 0.02em; color: var(--text);
    text-shadow: 0 0 60px rgba(59, 242, 198, 0.35), 0 0 120px rgba(124, 92, 255, 0.3); }
.glitch::before, .glitch::after { content: attr(data-text); position: absolute; inset: 0; mix-blend-mode: screen; text-shadow: none; }
.glitch::before { color: var(--accent); animation: glitch-a 2.8s infinite steps(1); }
.glitch::after { color: var(--accent-3); animation: glitch-b 3.4s infinite steps(1); }
@keyframes glitch-a { 0%, 86%, 100% { transform: none; clip-path: none; opacity: 0.55; } 88% { transform: translate(-6px, 2px); clip-path: inset(10% 0 55% 0); } 92% { transform: translate(5px, -3px); clip-path: inset(60% 0 8% 0); } }
@keyframes glitch-b { 0%, 80%, 100% { transform: none; clip-path: none; opacity: 0.5; } 83% { transform: translate(6px, -2px); clip-path: inset(30% 0 40% 0); } 89% { transform: translate(-5px, 3px); clip-path: inset(5% 0 75% 0); } }
.error-title { margin: 18px 0 16px; }
.error-page .lead { margin-inline: auto; }
.error-page .actions { justify-content: center; margin-top: 30px; }
.recalc { display: inline-flex; align-items: center; gap: 12px; margin-top: 26px; color: var(--text-2); font: 600 14px/1 var(--font-display); letter-spacing: 0.3em; text-transform: uppercase; }
.recalc__bar { width: 120px; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.recalc__bar::after { content: ""; display: block; width: 40%; height: 100%; background: var(--brand); box-shadow: 0 0 10px var(--accent); animation: recalc 1.4s ease-in-out infinite; }
@keyframes recalc { from { transform: translateX(-100%); } to { transform: translateX(250%); } }

/* ------------------------------------------------------------------ Footer */
.site-footer { position: relative; padding: 30px 0 28px; }
.footer-panel { position: relative; border-radius: var(--radius-lg); padding: clamp(28px, 4vw, 48px); border: 1px solid transparent;
    background: var(--sheen) padding-box, linear-gradient(rgba(5, 8, 18, 0.66), rgba(5, 8, 18, 0.66)) padding-box, var(--edge) border-box;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), var(--shadow); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 40px; }
.footer-col h2 { font: 600 12px/1 var(--font-display); letter-spacing: 0.32em; text-transform: uppercase; color: var(--text-3); margin-bottom: 18px; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer-col a { color: var(--text-2); transition: color 0.2s; }
.footer-col a:hover { color: var(--text); }
.footer-about p { color: var(--text-2); max-width: 360px; margin-top: 18px; }
.footer-safety { margin-top: 18px; display: inline-flex; align-items: center; gap: 10px; color: #ffd28f; font: 600 13px/1 var(--font-display); letter-spacing: 0.22em; text-transform: uppercase; }
.footer-safety svg { width: 18px; height: 18px; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--line); color: var(--text-3); font-size: 14px; }

/* ------------------------------------------------------------------ Motion */
.rise { animation: rise 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.rise--1 { animation-delay: 0.08s; }
.rise--2 { animation-delay: 0.16s; }
.rise--3 { animation-delay: 0.24s; }
.rise--4 { animation-delay: 0.32s; }
@keyframes rise { from { opacity: 0; transform: translateY(26px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
/* Scroll reveals finish within the first 240px of entry, so tall cards are never half-faded while being read. */
@keyframes reveal { from { opacity: 0; transform: translateY(36px) scale(0.985); } to { opacity: 1; transform: none; } }
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .reveal { animation: reveal ease-out both; animation-timeline: view(); animation-range: entry 0 entry 240px; }
    }
}

/* ------------------------------------------------------------------ Responsive */
@media (max-width: 1020px) {
    .hero__grid, .split { grid-template-columns: minmax(0, 1fr); }
    .hero { min-height: 0; }
    .hud { max-width: 560px; justify-self: center; }
    .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bento__item--hero { grid-row: auto; }
    .steps { grid-template-columns: minmax(0, 1fr); }
    .step:not(:last-child)::after { top: auto; right: auto; bottom: -19px; left: 56px; width: 2px; height: 20px; }
    .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .stat:nth-child(3)::before { content: none; }
    .stat:nth-child(n + 3) { border-top: 1px solid var(--line); }
    .legal { grid-template-columns: minmax(0, 1fr); }
    .toc { position: static; }
    .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
    .nav-toggle { display: grid; place-items: center; }
    .nav { position: absolute; top: calc(100% + 10px); left: 0; right: 0; display: none; flex-direction: column; align-items: stretch; gap: 4px; margin: 0; padding: 10px;
        border-radius: 20px; border: 1px solid var(--line-strong); background: rgba(5, 8, 18, 0.92);
        box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.85); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); }
    .nav.is-open { display: flex; }
    .nav a { padding: 16px 14px; font-size: 16px; }
    .nav a.is-active::after { left: auto; right: 16px; bottom: 50%; margin: 0 0 -2px; }
    .site-header .status { display: none; }
}
@media (max-width: 640px) {
    :root { --header: 80px; }
    body { font-size: 16px; }
    .city { --city-h: clamp(260px, 50vh, 440px); }
    .city__searchlights span:nth-child(3), .city__flyers span:nth-child(n + 3) { display: none; }
    .site-header { padding: 10px 0; }
    .brand__mark { width: 38px; height: 38px; }
    .brand__word { font-size: 20px; }
    .grid--2, .grid--3, .grid--4, .footer-grid, .contact, .bento { grid-template-columns: minmax(0, 1fr); }
    .bento__item--hero, .bento__item--wide { grid-column: auto; }
    .bento__item { min-height: 0; }
    .card { padding: 22px; }
    .card.step { padding-top: 98px; }
    .step__num { top: 22px; left: 22px; font-size: 62px; }
    .step:not(:last-child)::after { left: 46px; }
    .stat { padding: 20px 18px; }
    .banner { grid-template-columns: minmax(0, 1fr); }
    .hud { padding: 16px; }
    .hud__top, .hud__bottom { left: 16px; right: 16px; }
    .hud__top { top: 16px; }
    .hud__bottom { bottom: 16px; }
    .hud__panel { padding: 11px 12px; }
    .hud__value { font-size: 22px; }
    .hud__arrow { width: 38px; height: 38px; }
    .formula__row { flex-direction: column; gap: 6px; }
    .formula__row span { text-align: left; }
    .data-table td:first-child { width: auto; }
    .actions .btn { width: 100%; }
    .copy-row .btn { width: 100%; white-space: normal; text-align: center; padding-block: 12px; overflow-wrap: anywhere; }
    .prose { padding: 22px 18px; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
    .hud::before { content: none; }
}
@media (prefers-reduced-transparency: reduce) {
    :root { --glass: rgba(7, 10, 23, 0.94); --glass-strong: rgba(7, 10, 23, 0.97); --glass-solid: rgba(7, 10, 23, 0.97); }
}
@media (forced-colors: active) {
    .city { display: none; }
}
@media print {
    .city, .site-header, .site-footer, .toc { display: none; }
    body { background: #fff; color: #000; }
    .prose { background: none; border: 0; box-shadow: none; padding: 0; }
}