/* ===========================================================================
   KH MENU — Editorial Frontend
   No boxes. No icon-tile features. No SaaS-cream.
   Editorial type as the main attraction. Animation as storytelling.
   =========================================================================== */

@layer reset, base, layout, type, components, motion, utilities;

@layer reset {
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { -webkit-text-size-adjust: 100%; height: 100%; }
    body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
    img, svg { display: block; max-width: 100%; }
    button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
    input, textarea, select { font: inherit; color: inherit; }
    option { background: var(--bg-soft); color: var(--ink); }
    a { color: inherit; text-decoration: none; }
}

@layer base {
    :root {
        /* Surfaces — tinted, never pure */
        --bg:        oklch(0.13 0.022 250);
        --bg-soft:   oklch(0.17 0.026 250);
        --bg-raised: oklch(0.21 0.030 250);
        --line:      oklch(0.40 0.025 250 / 0.18);
        --line-2:    oklch(0.55 0.030 250 / 0.30);

        /* Inks */
        --ink:       oklch(0.97 0.012 250);
        --ink-dim:   oklch(0.78 0.014 250);
        --ink-quiet: oklch(0.55 0.018 250);
        --ink-faint: oklch(0.36 0.020 250);

        /* Cobalt accent (vom khmenu HUD) */
        --acc:       oklch(0.74 0.180 245);
        --acc-soft:  oklch(0.74 0.180 245 / 0.14);
        --acc-glow:  oklch(0.78 0.200 245 / 0.55);

        /* Type — Minecraft-style pixel fonts (Pixelify Sans inspired by Minecraft) */
        --font-disp: 'Pixelify Sans', 'VT323', monospace;
        --font-mono: 'VT323', 'Pixelify Sans', monospace;

        /* Motion */
        --ease-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
        --ease-expo:  cubic-bezier(0.16, 1, 0.3, 1);
        --ease-cubic: cubic-bezier(0.65, 0, 0.05, 1);
    }

    html, body {
        background: var(--bg);
        color: var(--ink-dim);
        font-family: var(--font-disp);
        font-size: 17px;
        line-height: 1.55;
        letter-spacing: 0;
        image-rendering: pixelated;
        -webkit-font-smoothing: none;
        font-smooth: never;
    }
    body, html, h1, h2, h3, h4, p, span, a, label, input, select, textarea, button, em, strong, code, td, th, summary, div {
        letter-spacing: 0 !important;
    }

    body {
        min-height: 100vh;
        overflow-x: hidden;
    }

    /* Scroll lock waehrend Splash und sonstigen Modi */
    html.lock, body.lock {
        overflow: hidden !important;
        height: 100vh !important;
        touch-action: none;
    }

    ::selection { background: var(--acc); color: var(--bg); }

    /* Hide cursor on interactive surfaces when custom cursor is on */
    html.has-cursor, html.has-cursor * { cursor: none !important; }

    /* Scrollbar */
    ::-webkit-scrollbar { width: 6px; height: 6px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 3px; }
    ::-webkit-scrollbar-thumb:hover { background: var(--ink-faint); }
}

/* ===========================================================================
   TYPE SYSTEM
   =========================================================================== */
@layer type {
    .display {
        font-family: var(--font-disp);
        font-weight: 700;
        line-height: 0.92;
        color: var(--ink);
    }
    .display-xl { font-size: clamp(64px, 12vw, 200px); }
    .display-lg { font-size: clamp(48px, 8vw, 128px); }
    .display-md { font-size: clamp(36px, 5.5vw, 80px); }

    .ed {
        font-family: var(--font-disp);
        font-weight: 500;
    }
    .ed-lg { font-size: clamp(26px, 3vw, 48px); line-height: 1.2; }
    .ed-md { font-size: clamp(22px, 2.4vw, 32px); line-height: 1.3; }
    .ed-sm { font-size: clamp(18px, 1.6vw, 22px); line-height: 1.5; }

    .label {
        font-family: var(--font-mono);
        font-size: 16px;
        font-weight: 400;
        text-transform: uppercase;
        color: var(--ink-quiet);
    }
    .label.acc { color: var(--acc); }

    .num-mono {
        font-family: var(--font-mono);
        font-variant-numeric: tabular-nums;
        font-feature-settings: 'tnum' 1;
    }

    em { font-style: normal; color: var(--acc); }

    /* Char-reveal */
    .char {
        display: inline-block;
        opacity: 0;
        transform: translateY(0.5em);
        transition: opacity 700ms var(--ease-expo), transform 900ms var(--ease-expo);
        will-change: transform, opacity;
    }
    .char.in { opacity: 1; transform: translateY(0); }

    .word-mask { display: inline-block; overflow: hidden; vertical-align: bottom; }
    .word-mask > span {
        display: inline-block;
        transform: translateY(105%);
        transition: transform 900ms var(--ease-expo);
        will-change: transform;
    }
    .word-mask.in > span { transform: translateY(0); }

    /* Hero line-mask slide */
    .line-mask {
        display: block;
        overflow: hidden;
        position: relative;
    }
    .line-mask > .line-inner {
        display: inline-block;
        transform: translateY(108%);
        transition: transform 1100ms var(--ease-expo);
        will-change: transform;
    }
    .line-mask.in > .line-inner { transform: translateY(0); }

    /* Hero hover */
    .hero h1 .ln {
        position: relative;
        cursor: default;
        transition: transform 500ms var(--ease-expo);
    }
    .hero h1 .ln:hover { transform: translateX(8px); }
    .hero h1 .ln:hover em { color: var(--ink); }
}

/* ===========================================================================
   LAYOUT
   =========================================================================== */
@layer layout {
    .pg { padding-inline: clamp(20px, 4vw, 56px); }
    .pg-sm { padding-inline: clamp(20px, 6vw, 96px); }

    section { position: relative; }
}

/* ===========================================================================
   MOTION ELEMENTS
   =========================================================================== */
@layer motion {
    /* Reveal */
    .rv {
        opacity: 0;
        transform: translateY(28px);
        transition: opacity 1100ms var(--ease-expo), transform 1100ms var(--ease-expo);
    }
    .rv.in { opacity: 1; transform: none; }

    /* Custom cursor */
    .cursor {
        position: fixed;
        top: 0; left: 0;
        width: 8px; height: 8px;
        border-radius: 50%;
        background: var(--acc);
        pointer-events: none;
        z-index: 9999;
        transform: translate(-50%, -50%);
        transition: width 240ms var(--ease-quart), height 240ms var(--ease-quart),
                    background 240ms, opacity 240ms;
        mix-blend-mode: normal;
        box-shadow: 0 0 14px var(--acc-glow);
    }
    .cursor.hide { opacity: 0; }
    .cursor.hover {
        width: 56px; height: 56px;
        background: transparent;
        border: 1px solid var(--acc);
        box-shadow: none;
    }
    .cursor.click {
        width: 20px; height: 20px;
    }
    @media (pointer: coarse) {
        .cursor { display: none; }
        html.has-cursor, html.has-cursor * { cursor: auto !important; }
    }

    /* Splash */
    .splash {
        position: fixed; inset: 0;
        z-index: 100;
        background: var(--bg);
        display: grid;
        place-items: center;
        transition: clip-path 1200ms var(--ease-cubic);
        clip-path: inset(0 0 0 0);
    }
    .splash.gone {
        clip-path: inset(0 0 100% 0);
        pointer-events: none;
    }
    .splash-inner {
        display: flex; flex-direction: column;
        align-items: center; gap: 28px;
    }
    .splash-mark {
        font-family: var(--font-disp);
        font-weight: 700;
        font-size: clamp(64px, 12vw, 180px);
        color: var(--ink);
        line-height: 1;
        position: relative;
    }
    .splash-mark::after {
        content: '';
        position: absolute;
        bottom: 16%; right: -22px;
        width: 14px; height: 14px;
        border-radius: 50%;
        background: var(--acc);
        box-shadow: 0 0 28px var(--acc-glow);
        animation: splash-pulse 1.6s var(--ease-quart) infinite;
    }
    @keyframes splash-pulse {
        0%, 100% { transform: scale(1); opacity: 1; }
        50% { transform: scale(0.55); opacity: 0.55; }
    }
    .splash-pct {
        font-family: var(--font-mono);
        font-size: 12px;
        font-weight: 500;
        letter-spacing: 0.2em;
        color: var(--ink-quiet);
    }
    .splash-pct .num { color: var(--ink); }

    /* Marquee */
    .marquee {
        position: relative;
        overflow: hidden;
        padding-block: 32px;
        border-top: 1px solid var(--line);
        border-bottom: 1px solid var(--line);
        background: var(--bg);
    }
    .marquee-track {
        display: flex;
        gap: 64px;
        align-items: center;
        white-space: nowrap;
        animation: marquee 60s linear infinite;
        will-change: transform;
    }
    .marquee-track > * { flex: 0 0 auto; }
    .marquee:hover .marquee-track { animation-play-state: paused; }
    @keyframes marquee {
        from { transform: translateX(0); }
        to   { transform: translateX(-50%); }
    }
    .marquee-item {
        font-family: var(--font-disp);
        font-weight: 700;
        font-size: clamp(36px, 5vw, 80px);
        color: var(--ink);
        text-transform: uppercase;
    }
    .marquee-dot {
        width: 14px; height: 14px;
        border-radius: 50%;
        background: var(--acc);
        box-shadow: 0 0 16px var(--acc-glow);
    }
    .marquee.alt .marquee-track { animation-direction: reverse; animation-duration: 80s; }
    .marquee.alt .marquee-item { color: transparent; -webkit-text-stroke: 1.5px var(--ink); }

    /* Scroll progress */
    .progress {
        position: fixed;
        right: 24px; bottom: 24px;
        z-index: 50;
        width: 1px; height: 96px;
        background: var(--line);
        transition: width 280ms var(--ease-expo);
    }
    .progress.flash { width: 4px; animation: prog-flash 1.2s var(--ease-expo); }
    @keyframes prog-flash {
        0%, 100% { box-shadow: 0 0 0 var(--acc-glow); }
        30% { box-shadow: 0 0 24px var(--acc-glow); }
    }
    .progress-fill {
        position: absolute;
        top: 0; left: 0;
        width: 100%; height: 0%;
        background: var(--acc);
        box-shadow: 0 0 8px var(--acc-glow);
        transition: height 80ms linear;
    }
    .progress-pct {
        position: absolute;
        right: 100%; bottom: 0;
        margin-right: 10px;
        font-family: var(--font-mono);
        font-size: 10px;
        letter-spacing: 0.2em;
        color: var(--ink-quiet);
        white-space: nowrap;
    }

    /* Scroll-Unlock FX: Edge-Pulse + Pixel-Mark "READY" */
    .unlock-fx {
        position: fixed;
        inset: 0;
        z-index: 90;
        pointer-events: none;
    }
    .unlock-edge {
        position: absolute;
        background: var(--acc);
        box-shadow: 0 0 24px var(--acc-glow);
        opacity: 0;
        transform: scaleX(0);
    }
    .unlock-edge.top    { top: 0;    left: 0; right: 0; height: 2px; transform-origin: center; }
    .unlock-edge.bottom { bottom: 0; left: 0; right: 0; height: 2px; transform-origin: center; }
    .unlock-edge.left   { left: 0;  top: 0; bottom: 0; width: 2px;  transform: scaleY(0); transform-origin: center; }
    .unlock-edge.right  { right: 0; top: 0; bottom: 0; width: 2px;  transform: scaleY(0); transform-origin: center; }

    .unlock-fx.go .unlock-edge { animation: edge-flash 1400ms var(--ease-expo); }
    .unlock-fx.go .unlock-edge.left,
    .unlock-fx.go .unlock-edge.right { animation: edge-flash-y 1400ms var(--ease-expo); }
    @keyframes edge-flash {
        0%   { transform: scaleX(0); opacity: 0; }
        20%  { transform: scaleX(1); opacity: 1; }
        70%  { transform: scaleX(1); opacity: 0.85; }
        100% { transform: scaleX(1); opacity: 0; }
    }
    @keyframes edge-flash-y {
        0%   { transform: scaleY(0); opacity: 0; }
        20%  { transform: scaleY(1); opacity: 1; }
        70%  { transform: scaleY(1); opacity: 0.85; }
        100% { transform: scaleY(1); opacity: 0; }
    }

    .unlock-mark {
        position: absolute;
        left: 50%; top: 50%;
        transform: translate(-50%, -50%) scale(0.4);
        display: flex; flex-direction: column; align-items: center; gap: 14px;
        color: var(--acc);
        opacity: 0;
        filter: drop-shadow(0 0 14px var(--acc-glow));
    }
    .unlock-mark svg { image-rendering: pixelated; }
    .unlock-mark span {
        font-family: var(--font-disp);
        font-weight: 700;
        font-size: 24px;
        letter-spacing: 0.06em;
        color: var(--acc);
        animation: ready-blink 220ms steps(2, end) infinite;
    }
    @keyframes ready-blink {
        0%, 50% { opacity: 1; }
        51%, 100% { opacity: 0.4; }
    }
    .unlock-fx.go .unlock-mark { animation: mark-pop 1400ms var(--ease-expo); }
    @keyframes mark-pop {
        0%   { transform: translate(-50%, -50%) scale(0.4) translateY(20px); opacity: 0; }
        20%  { transform: translate(-50%, -50%) scale(1.1)  translateY(-10px); opacity: 1; }
        40%  { transform: translate(-50%, -50%) scale(1)    translateY(0); opacity: 1; }
        80%  { transform: translate(-50%, -50%) scale(1)    translateY(0); opacity: 1; }
        100% { transform: translate(-50%, -50%) scale(1.2)  translateY(-30px); opacity: 0; }
    }

    /* Custom cursor blip wenn scroll-free */
    .cursor.blip { animation: cursor-blip 600ms var(--ease-expo); }
    @keyframes cursor-blip {
        0%, 100% { box-shadow: 0 0 14px var(--acc-glow); }
        50% { box-shadow: 0 0 0 12px var(--acc-soft), 0 0 36px var(--acc-glow); }
    }

    /* Magnetic */
    .mag {
        display: inline-block;
        transition: transform 400ms var(--ease-expo);
        will-change: transform;
    }
}

/* ===========================================================================
   COMPONENTS
   =========================================================================== */
@layer components {

    /* --- Top frame ------------------------------------------------------- */
    .frame {
        position: fixed;
        top: 24px; left: 24px; right: 24px;
        z-index: 40;
        display: grid;
        grid-template-columns: auto 1fr auto;
        align-items: center;
        gap: 32px;
        pointer-events: none;
    }
    .frame > * { pointer-events: auto; }
    .frame-mark {
        font-family: var(--font-mono);
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: var(--ink);
        position: relative;
    }
    .frame-mark::after {
        content: '';
        position: absolute; right: -14px; top: 50%; transform: translateY(-50%);
        width: 6px; height: 6px;
        border-radius: 50%;
        background: var(--acc);
        box-shadow: 0 0 10px var(--acc-glow);
        animation: heartbeat 2.4s ease-in-out infinite;
    }
    @keyframes heartbeat {
        0%, 100% { transform: translateY(-50%) scale(1); }
        50% { transform: translateY(-50%) scale(0.5); }
    }
    .frame-time {
        justify-self: center;
        font-family: var(--font-mono);
        font-size: 11px;
        letter-spacing: 0.16em;
        color: var(--ink-quiet);
        text-transform: uppercase;
    }
    .frame-cta {
        display: flex; gap: 14px;
        font-family: var(--font-mono);
        font-size: 11px;
        letter-spacing: 0.14em;
        text-transform: uppercase;
    }
    .frame-cta a { color: var(--ink-quiet); transition: color 200ms; }
    .frame-cta a:hover { color: var(--ink); }
    .frame-cta a.acc { color: var(--ink); position: relative; padding-right: 18px; }
    .frame-cta a.acc::after {
        content: '↗';
        position: absolute; right: 0; top: 50%; transform: translateY(-55%);
        color: var(--acc);
    }

    @media (max-width: 720px) {
        .frame { top: 16px; left: 16px; right: 16px; gap: 16px; grid-template-columns: auto 1fr; }
        .frame-time { display: none; }
    }

    /* --- Hero ------------------------------------------------------------ */
    .hero {
        min-height: 100vh;
        padding-block: 30vh 12vh;
        display: flex; flex-direction: column;
        justify-content: flex-end;
        position: relative;
    }
    .hero h1 {
        font-family: var(--font-disp);
        font-weight: 700;
        font-size: clamp(56px, 13vw, 220px);
        line-height: 0.92;
        color: var(--ink);
    }
    .hero h1 .ln { display: block; }
    .hero h1 .ln.indent { padding-left: clamp(60px, 12vw, 240px); }
    .hero h1 em { color: var(--acc); }

    .hero-foot {
        margin-top: clamp(40px, 6vw, 80px);
        display: grid;
        grid-template-columns: 2fr 1fr 1fr;
        gap: 32px;
        padding-top: 24px;
        border-top: 1px solid var(--line);
        align-items: end;
    }
    .hero-foot .lead {
        max-width: 56ch;
        font-family: var(--font-disp);
        font-weight: 500;
        font-size: clamp(16px, 1.4vw, 19px);
        line-height: 1.5;
        color: var(--ink-dim);
    }
    .hero-foot .meta { display: flex; flex-direction: column; gap: 6px; }
    .hero-foot .meta .v { font-family: var(--font-disp); font-weight: 700; font-size: 24px; color: var(--ink); letter-spacing: -0.015em; }
    .hero-foot .meta .l { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-quiet); }

    @media (max-width: 720px) {
        .hero { padding-block: 24vh 8vh; }
        .hero h1 .ln.indent { padding-left: 24px; }
        .hero-foot { grid-template-columns: 1fr; gap: 20px; }
    }

    /* --- Bridge (animierte Pixel-Szene zwischen Hero und Manifesto) ------ */
    .bridge {
        position: relative;
        min-height: 70vh;
        overflow: hidden;
        display: grid;
        place-items: center;
        padding-block: 80px;
        border-top: 3px solid var(--line);
        border-bottom: 3px solid var(--line);
        background:
            radial-gradient(ellipse 60% 60% at 50% 50%, var(--acc-soft), transparent 70%),
            var(--bg);
    }

    /* Subtle background grid */
    .bridge::before {
        content: '';
        position: absolute; inset: 0;
        background-image:
            linear-gradient(var(--line) 1px, transparent 1px),
            linear-gradient(90deg, var(--line) 1px, transparent 1px);
        background-size: 32px 32px;
        opacity: 0.4;
        pointer-events: none;
        mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 30%, transparent 80%);
        -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 30%, transparent 80%);
    }

    /* Floating pixels drifting diagonally */
    .bridge-pixels {
        position: absolute; inset: 0;
        pointer-events: none;
    }
    .bridge-pixels span {
        position: absolute;
        width: 6px; height: 6px;
        background: var(--acc);
        opacity: 0;
        animation: pixel-drift 9s linear infinite;
    }
    .bridge-pixels span:nth-child(1)  { left: 8%;  top: 100%; animation-delay: 0s;   }
    .bridge-pixels span:nth-child(2)  { left: 16%; top: 100%; animation-delay: 1.2s; width: 4px; height: 4px; }
    .bridge-pixels span:nth-child(3)  { left: 24%; top: 100%; animation-delay: 2.4s; }
    .bridge-pixels span:nth-child(4)  { left: 32%; top: 100%; animation-delay: 3.6s; width: 8px; height: 8px; }
    .bridge-pixels span:nth-child(5)  { left: 40%; top: 100%; animation-delay: 4.8s; }
    .bridge-pixels span:nth-child(6)  { left: 60%; top: 100%; animation-delay: 0.6s; width: 4px; height: 4px; }
    .bridge-pixels span:nth-child(7)  { left: 68%; top: 100%; animation-delay: 1.8s; }
    .bridge-pixels span:nth-child(8)  { left: 76%; top: 100%; animation-delay: 3.0s; width: 8px; height: 8px; }
    .bridge-pixels span:nth-child(9)  { left: 84%; top: 100%; animation-delay: 4.2s; }
    .bridge-pixels span:nth-child(10) { left: 92%; top: 100%; animation-delay: 5.4s; }
    .bridge-pixels span:nth-child(11) { left: 12%; top: 100%; animation-delay: 6.0s; width: 4px; height: 4px; }
    .bridge-pixels span:nth-child(12) { left: 88%; top: 100%; animation-delay: 7.2s; width: 8px; height: 8px; }
    @keyframes pixel-drift {
        0%   { transform: translateY(0) translateX(0); opacity: 0; }
        15%  { opacity: 0.85; }
        85%  { opacity: 0.85; }
        100% { transform: translateY(-110vh) translateX(40px); opacity: 0; }
    }

    /* === SIGNAL FIELD — animierte Frequency-Wave Visualization === */
    .signal {
        position: relative;
        z-index: 2;
        width: min(80vw, 880px);
        height: clamp(280px, 36vw, 380px);
        margin: 0 auto;
        opacity: 0;
        display: grid;
        grid-template-rows: 1fr auto auto;
        gap: 16px;
    }

    /* Frequency bars container */
    .signal-wave,
    .signal-wave-bg {
        position: relative;
        display: flex;
        align-items: end;
        justify-content: space-between;
        gap: 2px;
        height: 100%;
        padding: 0 4px;
    }
    .signal-wave-bg {
        position: absolute;
        inset: 0;
        opacity: 0.25;
    }
    .signal-wave > span,
    .signal-wave-bg > span {
        flex: 1;
        background: var(--acc);
        transform-origin: bottom;
        transform: scaleY(var(--h, 0.4));
        animation: signal-bar var(--dur, 1.6s) ease-in-out infinite;
        animation-delay: var(--delay, 0s);
        box-shadow: 0 0 6px var(--acc-glow);
    }
    .signal-wave-bg > span {
        background: oklch(0.55 0.030 245 / 0.5);
        box-shadow: none;
    }
    @keyframes signal-bar {
        0%, 100% { transform: scaleY(calc(var(--h) * 0.4)); }
        50%      { transform: scaleY(var(--h)); }
    }

    /* Stats row below the wave — symmetrisch zentriert */
    .signal-stats {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
        padding-top: 16px;
        border-top: 2px solid var(--line);
        text-align: center;
    }
    .signal-stat {
        display: flex; flex-direction: column; gap: 6px;
        align-items: center;
        justify-content: center;
    }
    .signal-stat .lbl {
        font-family: var(--font-mono);
        font-size: 11px;
        color: var(--ink-quiet);
        text-transform: uppercase;
        letter-spacing: 0.14em;
    }
    .signal-stat .val {
        font-family: var(--font-disp);
        font-weight: 700;
        font-size: clamp(24px, 2.6vw, 36px);
        color: var(--ink);
        line-height: 1;
        font-variant-numeric: tabular-nums;
        font-feature-settings: 'tnum' 1;
        white-space: nowrap;
    }
    .signal-stat .val sub {
        font-family: var(--font-mono);
        font-size: 13px;
        font-weight: 400;
        color: var(--ink-quiet);
        margin-left: 2px;
    }
    .signal-stat .val-pre {
        font-family: var(--font-disp);
        font-weight: 700;
        color: var(--acc);
        margin-right: 2px;
    }
    .signal-stat .val.ok { color: oklch(0.78 0.165 145); animation: signal-blink 1.6s ease-in-out infinite; }
    @keyframes signal-blink {
        0%, 100% { opacity: 1; }
        50%      { opacity: 0.55; }
    }

    /* Bottom tag */
    .signal-tag {
        font-family: var(--font-mono);
        font-size: 11px;
        color: var(--ink-quiet);
        text-transform: uppercase;
        letter-spacing: 0.18em;
        text-align: center;
        padding-top: 4px;
    }
    .signal-tag::before { content: '⟪ '; color: var(--acc); }
    .signal-tag::after  { content: ' ⟫'; color: var(--acc); }

    /* Reveal animation */
    .signal.in { animation: signal-fly-in 1400ms var(--ease-expo) forwards; }
    @keyframes signal-fly-in {
        0%   { opacity: 0; transform: translateY(28px); }
        100% { opacity: 1; transform: translateY(0); }
    }

    .bridge { justify-items: center; padding-inline: clamp(20px, 4vw, 56px); }
    @media (max-width: 720px) {
        .signal { width: 100%; height: 240px; }
        .signal-stats { gap: 12px; }
    }

    /* Bottom hint */
    .bridge-bottom {
        position: absolute;
        bottom: 32px; left: 50%; transform: translateX(-50%);
        display: flex; flex-direction: column; align-items: center; gap: 14px;
    }
    .bridge-line {
        width: 1px; height: 48px;
        background: linear-gradient(to bottom, transparent, var(--acc));
        animation: line-grow 2s var(--ease-expo) infinite;
    }
    @keyframes line-grow {
        0%   { transform: scaleY(0); transform-origin: top; opacity: 0; }
        50%  { transform: scaleY(1); opacity: 1; }
        100% { transform: scaleY(1); transform-origin: bottom; opacity: 0; }
    }
    .bridge-hint {
        font-family: var(--font-mono);
        font-size: 14px;
        color: var(--ink-quiet);
        animation: hint-blink 1.6s steps(2, end) infinite;
    }
    @keyframes hint-blink {
        0%, 50% { opacity: 0.3; }
        51%, 100% { opacity: 1; }
    }

    @media (max-width: 720px) {
        .bridge { min-height: 50vh; }
        .bridge-stage { width: 220px; height: 220px; }
        .bridge-mark svg { width: 60px; height: 60px; }
    }

    /* --- Info-Band (Statement + Pixel-Keycap demo) ----------------------- */
    .info-band {
        max-width: 1280px;
        margin: 0 auto;
        padding-block: 96px clamp(96px, 14vw, 160px);
        display: grid;
        grid-template-columns: 1.4fr 1fr;
        gap: clamp(40px, 8vw, 120px);
        align-items: center;
        border-top: 3px solid var(--line);
    }
    .info-text h3 {
        font-family: var(--font-disp);
        font-weight: 700;
        font-size: clamp(40px, 6vw, 88px);
        line-height: 0.95;
        color: var(--ink);
        margin-bottom: 28px;
    }
    .info-text h3 em { color: var(--acc); }
    .info-text p {
        font-family: var(--font-disp);
        font-size: clamp(16px, 1.3vw, 19px);
        line-height: 1.55;
        color: var(--ink-quiet);
        max-width: 44ch;
    }

    /* Pixel-Keycap — F8 wie eine echte mechanische Taste */
    .info-key {
        position: relative;
        width: clamp(180px, 22vw, 280px);
        height: clamp(180px, 22vw, 280px);
        margin-left: auto;
        perspective: 600px;
    }
    .key-cap {
        position: relative;
        width: 100%; height: 100%;
        background: var(--bg-soft);
        border: 4px solid var(--ink);
        display: grid;
        place-items: center;
        box-shadow:
            inset 0 -10px 0 oklch(0.10 0.020 250),
            0 12px 0 var(--ink),
            0 18px 0 oklch(0.06 0.020 250),
            0 28px 48px var(--acc-glow);
        animation: key-press 3.6s var(--ease-quart) infinite;
        transition: transform 200ms var(--ease-expo), box-shadow 200ms var(--ease-expo);
        cursor: pointer;
    }
    .key-cap:hover {
        animation-play-state: paused;
        transform: translateY(10px);
        box-shadow:
            inset 0 -4px 0 oklch(0.10 0.020 250),
            0 4px 0 var(--ink),
            0 6px 0 oklch(0.06 0.020 250),
            0 10px 28px var(--acc-glow);
    }
    .key-corner {
        position: absolute;
        width: 12px; height: 12px;
        background: var(--acc);
    }
    .key-corner.tl { top: 8px;    left: 8px;    }
    .key-corner.tr { top: 8px;    right: 8px;   }
    .key-corner.bl { bottom: 8px; left: 8px;    }
    .key-corner.br { bottom: 8px; right: 8px;   }
    .key-label {
        font-family: var(--font-disp);
        font-weight: 700;
        font-size: clamp(72px, 12vw, 132px);
        color: var(--ink);
        line-height: 1;
    }
    .key-cap:hover .key-label { color: var(--acc); }

    @keyframes key-press {
        0%, 88%, 100% {
            transform: translateY(0);
            box-shadow:
                inset 0 -10px 0 oklch(0.10 0.020 250),
                0 12px 0 var(--ink),
                0 18px 0 oklch(0.06 0.020 250),
                0 28px 48px var(--acc-glow);
        }
        92%, 96% {
            transform: translateY(10px);
            box-shadow:
                inset 0 -4px 0 oklch(0.10 0.020 250),
                0 4px 0 var(--ink),
                0 6px 0 oklch(0.06 0.020 250),
                0 10px 28px var(--acc-glow);
        }
    }

    .key-shadow {
        position: absolute;
        bottom: -40px; left: 10%;
        width: 80%; height: 30px;
        background: radial-gradient(ellipse, var(--acc-glow), transparent 70%);
        filter: blur(12px);
        opacity: 0.6;
        animation: shadow-breathe 3.6s var(--ease-quart) infinite;
    }
    @keyframes shadow-breathe {
        0%, 88%, 100% { opacity: 0.6; transform: scaleX(1); }
        92%, 96%      { opacity: 0.3; transform: scaleX(0.7); }
    }

    @media (max-width: 720px) {
        .info-band { grid-template-columns: 1fr; padding-block: 64px 96px; }
        .info-key { margin: 0 auto; }
    }

    /* --- Manifesto ------------------------------------------------------- */
    .manifesto {
        padding-block: clamp(120px, 18vw, 240px);
        max-width: 1280px;
        margin: 0 auto;
    }
    .manifesto-eyebrow {
        display: flex; align-items: center; gap: 16px;
        margin-bottom: 64px;
        opacity: 0;
        transform: translateY(12px);
        transition: opacity 800ms var(--ease-expo), transform 800ms var(--ease-expo);
    }
    .manifesto-eyebrow.lit { opacity: 1; transform: translateY(0); }
    .manifesto-eyebrow::after {
        content: ''; flex: 1; height: 1px;
        background: var(--line);
    }
    .manifesto h2 {
        font-family: var(--font-disp);
        font-weight: 500;
        font-size: clamp(28px, 4.4vw, 64px);
        letter-spacing: -0.02em;
        line-height: 1.18;
        color: var(--ink-dim);
        max-width: 22ch;
    }
    .manifesto h2 strong { font-weight: 800; color: var(--ink); }
    .manifesto h2 em { color: var(--acc); }

    /* --- Categories (4 unique boxes with motion graphics) ---------------- */
    .cats {
        padding-block: clamp(96px, 14vw, 200px);
    }
    .cats-h {
        font-family: var(--font-disp);
        font-weight: 700;
        font-size: clamp(56px, 10vw, 160px);
        line-height: 0.92;
        color: var(--ink);
        margin-bottom: 80px;
    }
    .cats-h em { color: var(--acc); }

    .cat-grid {
        display: grid;
        grid-template-columns: 1.2fr 1fr;
        grid-auto-rows: minmax(280px, auto);
        gap: 14px;
    }
    @media (max-width: 880px) { .cat-grid { grid-template-columns: 1fr; } }

    .cat {
        position: relative;
        overflow: hidden;
        background: var(--bg-soft);
        border: 3px solid var(--line);
        padding: 32px;
        transition: border-color 240ms var(--ease-expo), transform 360ms var(--ease-expo);
        display: flex;
        align-items: flex-end;
        min-height: 280px;
        color: var(--acc); /* used by SVG strokes */
    }
    .cat:hover {
        border-color: var(--acc);
        transform: translateY(-6px);
    }
    .cat:hover .cat-bg { opacity: 1; }
    .cat:hover h3 { color: var(--acc); }

    /* Pixel "chunky" corner ticks */
    .cat::before, .cat::after {
        content: '';
        position: absolute;
        width: 18px; height: 18px;
        border: 3px solid var(--ink);
        transition: border-color 240ms;
    }
    .cat::before { top: -3px; left: -3px; border-right: none; border-bottom: none; }
    .cat::after  { bottom: -3px; right: -3px; border-left: none; border-top: none; }
    .cat:hover::before, .cat:hover::after { border-color: var(--acc); }

    .cat-bg {
        position: absolute;
        inset: 0;
        opacity: 0.55;
        transition: opacity 600ms var(--ease-expo);
        pointer-events: none;
    }
    .cat-bg svg {
        position: absolute;
        inset: 0;
        width: 100%; height: 100%;
    }

    .cat-body {
        position: relative;
        z-index: 2;
    }
    .cat-tag {
        display: inline-block;
        font-family: var(--font-mono);
        font-size: 14px;
        color: var(--ink-quiet);
        background: var(--bg);
        padding: 4px 10px;
        border: 2px solid var(--line);
        margin-bottom: 16px;
    }
    .cat:hover .cat-tag { color: var(--acc); border-color: var(--acc); }
    .cat h3 {
        font-family: var(--font-disp);
        font-weight: 700;
        font-size: clamp(36px, 4.4vw, 64px);
        line-height: 0.95;
        color: var(--ink);
        margin-bottom: 20px;
        transition: color 320ms var(--ease-expo);
    }
    .cat ul {
        list-style: none;
        display: flex; flex-wrap: wrap; gap: 8px 14px;
    }
    .cat ul li {
        font-family: var(--font-mono);
        font-size: 16px;
        color: var(--ink-dim);
        background: var(--bg);
        padding: 6px 12px;
        border: 2px solid var(--line);
        position: relative;
        transition: color 240ms, border-color 240ms, background 240ms;
    }
    .cat ul li::before {
        content: '> ';
        color: var(--acc);
    }
    .cat:hover ul li {
        border-color: var(--line-2);
    }
    .cat ul li:hover {
        color: var(--ink);
        border-color: var(--acc);
        background: var(--acc-soft);
    }

    /* ===== Box A: MOVEMENT — animated SVG trajectory ===== */
    .cat-mvm .cat-bg path,
    .cat-mvm .cat-bg circle {
        color: var(--acc);
    }
    .cat-mvm:hover .cat-bg svg { animation: mvm-shake 600ms var(--ease-quart); }
    @keyframes mvm-shake {
        0%, 100% { transform: translate(0); }
        25% { transform: translate(-2px, 1px); }
        50% { transform: translate(2px, -1px); }
        75% { transform: translate(-1px, 2px); }
    }

    /* ===== Box B: VEHICLES — pixel grid with random blinks ===== */
    .cat-bg-grid {
        background-image:
            linear-gradient(var(--line) 1px, transparent 1px),
            linear-gradient(90deg, var(--line) 1px, transparent 1px);
        background-size: 24px 24px;
        background-position: -1px -1px;
    }
    .cat-bg-grid::before, .cat-bg-grid::after {
        content: '';
        position: absolute;
        width: 24px; height: 24px;
        background: var(--acc);
        opacity: 0;
        animation: blink 3.2s steps(2, end) infinite;
    }
    .cat-bg-grid::before { top: 30%; left: 22%; animation-delay: 0.4s; }
    .cat-bg-grid::after  { top: 64%; left: 70%; animation-delay: 1.6s; }
    @keyframes blink {
        0%, 60%, 100% { opacity: 0; }
        61%, 70% { opacity: 0.4; }
    }
    .cat-veh:hover .cat-bg-grid::before,
    .cat-veh:hover .cat-bg-grid::after {
        animation-duration: 1.2s;
    }

    /* ===== Box C: SERVER — scanlines + moving beam ===== */
    .cat-bg-scan {
        background: repeating-linear-gradient(
            to bottom,
            transparent 0px,
            transparent 3px,
            var(--acc-soft) 3px,
            var(--acc-soft) 4px
        );
    }
    .cat-bg-scan .beam {
        position: absolute;
        left: 0; right: 0;
        height: 28px;
        background: linear-gradient(180deg, transparent, var(--acc-soft), transparent);
        animation: beam-scroll 4s linear infinite;
    }
    @keyframes beam-scroll {
        0%   { top: -10%; }
        100% { top: 110%; }
    }
    .cat-srv:hover .cat-bg-scan .beam { animation-duration: 1.4s; }

    /* ===== Box D: PRODUCTION — radar concentric rings ===== */
    .cat-bg-radar {
        display: grid;
        place-items: center;
    }
    .cat-bg-radar span {
        position: absolute;
        border-radius: 50%;
        border: 2px solid var(--acc);
        width: 60px; height: 60px;
        animation: radar-pulse 3.6s var(--ease-expo) infinite;
        opacity: 0;
    }
    .cat-bg-radar span:nth-child(1) { animation-delay: 0s; }
    .cat-bg-radar span:nth-child(2) { animation-delay: 0.9s; }
    .cat-bg-radar span:nth-child(3) { animation-delay: 1.8s; }
    .cat-bg-radar span:nth-child(4) { animation-delay: 2.7s; }
    @keyframes radar-pulse {
        0%   { transform: scale(0.4); opacity: 0; }
        15%  { opacity: 0.8; }
        100% { transform: scale(6); opacity: 0; }
    }
    .cat-prd:hover .cat-bg-radar span { animation-duration: 1.6s; }

    @media (max-width: 880px) {
        .cat { min-height: 240px; padding: 24px; }
        .cat h3 { font-size: 36px; }
    }

    /* --- Plans (3 unique boxes with motion graphics + Akira-style price) - */
    .plans {
        padding-block: clamp(120px, 18vw, 240px);
    }
    .plans-h {
        font-family: var(--font-disp);
        font-weight: 700;
        font-size: clamp(56px, 10vw, 160px);
        line-height: 0.92;
        color: var(--ink);
        margin-bottom: 80px;
    }
    .plans-h em { color: var(--acc); }
    .plans-foot {
        margin-top: 40px;
        font-family: var(--font-disp);
        font-size: clamp(16px, 1.4vw, 18px);
        line-height: 1.55;
        color: var(--ink-quiet);
        max-width: 64ch;
    }

    .plan-grid {
        display: grid;
        grid-template-columns: 1fr 1.3fr 1fr;
        gap: 14px;
    }
    @media (max-width: 880px) { .plan-grid { grid-template-columns: 1fr; } }

    .plan {
        position: relative;
        overflow: hidden;
        background: var(--bg-soft);
        border: 3px solid var(--line);
        padding: 40px 32px;
        min-height: 380px;
        display: flex;
        align-items: flex-end;
        color: var(--acc);
        transition: border-color 240ms var(--ease-expo), transform 360ms var(--ease-expo), background 360ms;
    }
    .plan:hover {
        border-color: var(--acc);
        transform: translateY(-8px);
        background: oklch(0.20 0.030 250);
    }
    .plan:hover .plan-bg { opacity: 1; }
    .plan:hover h3 { color: var(--acc); }

    /* Pixel chunky corners */
    .plan::before, .plan::after {
        content: '';
        position: absolute;
        width: 18px; height: 18px;
        border: 3px solid var(--ink);
        transition: border-color 240ms;
        z-index: 3;
    }
    .plan::before { top: -3px; left: -3px; border-right: none; border-bottom: none; }
    .plan::after  { bottom: -3px; right: -3px; border-left: none; border-top: none; }
    .plan:hover::before, .plan:hover::after { border-color: var(--acc); }

    .plan-bg {
        position: absolute;
        inset: 0;
        opacity: 0.6;
        transition: opacity 600ms var(--ease-expo);
        pointer-events: none;
    }

    .plan-body { position: relative; z-index: 2; width: 100%; }
    .plan-tag {
        display: inline-block;
        font-family: var(--font-mono);
        font-size: 14px;
        color: var(--ink-quiet);
        background: var(--bg);
        padding: 4px 10px;
        border: 2px solid var(--line);
        margin-bottom: 18px;
    }
    .plan:hover .plan-tag { color: var(--acc); border-color: var(--acc); }
    .plan h3 {
        font-family: var(--font-disp);
        font-weight: 700;
        font-size: clamp(36px, 4.4vw, 64px);
        line-height: 0.95;
        color: var(--ink);
        margin-bottom: 14px;
        transition: color 320ms var(--ease-expo);
    }
    .plan p {
        font-family: var(--font-disp);
        font-size: 16px;
        line-height: 1.55;
        color: var(--ink-quiet);
        max-width: 36ch;
        margin-bottom: 28px;
    }
    .plan-price-row {
        display: flex; align-items: baseline; gap: 10px;
        padding-top: 20px;
        border-top: 2px solid var(--line);
    }
    /* AKIRA-style price (Bungee = chunky, blocky, all-caps display) */
    .plan-price {
        font-family: 'Bungee', 'Pixelify Sans', monospace;
        font-weight: 400;
        font-size: clamp(40px, 5vw, 72px);
        line-height: 1;
        color: var(--ink);
        text-transform: uppercase;
    }
    .plan-period {
        font-family: var(--font-mono);
        font-size: 18px;
        color: var(--ink-quiet);
    }
    .plan:hover .plan-price { color: var(--acc); text-shadow: 4px 4px 0 var(--bg), 4px 4px 14px var(--acc-glow); }
    .plan:hover .plan-price-row { border-top-color: var(--acc); }

    /* Featured plan extras */
    .plan-feat { background: var(--bg-soft); }
    .plan-feat .plan-price { color: var(--acc); }
    .plan-feat .plan-best {
        position: absolute;
        top: 16px; right: 16px;
        z-index: 3;
        font-family: 'Bungee', monospace;
        font-size: 13px;
        color: var(--bg);
        background: var(--acc);
        padding: 6px 12px;
        animation: best-blink 2.4s steps(2, end) infinite;
    }
    @keyframes best-blink {
        0%, 70% { transform: rotate(2deg); }
        71%, 80% { transform: rotate(-2deg); }
    }

    /* ===== Plan A: TRIAL — vertical bars ticking down ===== */
    .plan-bg-bars {
        display: flex;
        align-items: flex-end;
        gap: 8px;
        padding: 24px;
    }
    .plan-bg-bars span {
        flex: 1;
        height: 30%;
        background: var(--acc);
        opacity: 0.18;
        animation: bar-tick 2.8s var(--ease-quart) infinite;
    }
    .plan-bg-bars span:nth-child(1) { animation-delay: 0s; }
    .plan-bg-bars span:nth-child(2) { animation-delay: 0.15s; }
    .plan-bg-bars span:nth-child(3) { animation-delay: 0.30s; }
    .plan-bg-bars span:nth-child(4) { animation-delay: 0.45s; }
    .plan-bg-bars span:nth-child(5) { animation-delay: 0.60s; }
    .plan-bg-bars span:nth-child(6) { animation-delay: 0.75s; }
    .plan-bg-bars span:nth-child(7) { animation-delay: 0.90s; }
    .plan-bg-bars span:nth-child(8) { animation-delay: 1.05s; }
    @keyframes bar-tick {
        0%, 100% { height: 20%; }
        50% { height: 70%; }
    }
    .plan-trial:hover .plan-bg-bars span { animation-duration: 1.2s; }

    /* ===== Plan B: PREMIUM — rotating spotlight ===== */
    .plan-bg-spot {
        background:
            repeating-linear-gradient(
                45deg,
                transparent 0,
                transparent 12px,
                var(--acc-soft) 12px,
                var(--acc-soft) 13px
            );
    }
    .plan-bg-spot .spot {
        position: absolute;
        top: 50%; left: 50%;
        width: 200%; height: 200%;
        transform-origin: center;
        background: conic-gradient(from 0deg, transparent, var(--acc-soft) 12%, transparent 24%);
        animation: spot-rot 8s linear infinite;
        margin-left: -100%; margin-top: -100%;
    }
    @keyframes spot-rot {
        from { transform: rotate(0deg); }
        to   { transform: rotate(360deg); }
    }
    .plan-premium:hover .plan-bg-spot .spot { animation-duration: 2.5s; }

    /* ===== Plan C: LIFETIME — drifting pixel stars ===== */
    .plan-bg-stars span {
        position: absolute;
        width: 6px; height: 6px;
        background: var(--acc);
        animation: star-drift 6s var(--ease-quart) infinite;
        opacity: 0;
    }
    .plan-bg-stars span:nth-child(1) { left: 10%; animation-delay: 0s; }
    .plan-bg-stars span:nth-child(2) { left: 22%; animation-delay: 0.6s; }
    .plan-bg-stars span:nth-child(3) { left: 34%; animation-delay: 1.2s; }
    .plan-bg-stars span:nth-child(4) { left: 46%; animation-delay: 1.8s; }
    .plan-bg-stars span:nth-child(5) { left: 58%; animation-delay: 2.4s; }
    .plan-bg-stars span:nth-child(6) { left: 70%; animation-delay: 3.0s; }
    .plan-bg-stars span:nth-child(7) { left: 82%; animation-delay: 3.6s; }
    .plan-bg-stars span:nth-child(8) { left: 16%; animation-delay: 4.2s; width: 4px; height: 4px; }
    .plan-bg-stars span:nth-child(9) { left: 64%; animation-delay: 4.8s; width: 8px; height: 8px; }
    @keyframes star-drift {
        0%   { top: -8px; opacity: 0; }
        15%  { opacity: 0.9; }
        85%  { opacity: 0.9; }
        100% { top: 110%; opacity: 0; }
    }
    .plan-life:hover .plan-bg-stars span { animation-duration: 2.2s; }

    @media (max-width: 880px) {
        .plan { min-height: 320px; padding: 32px 24px; }
        .plan h3 { font-size: 36px; }
    }

    /* --- FAQ als Trading Cards ------------------------------------------ */
    .qna {
        padding-block: clamp(96px, 14vw, 200px);
        max-width: 1280px; margin: 0 auto;
    }
    .qna h2 {
        font-family: var(--font-disp);
        font-weight: 700;
        font-size: clamp(40px, 6vw, 96px);
        line-height: 0.95;
        color: var(--ink);
        margin-bottom: 80px;
    }
    .qna h2 em { color: var(--acc); }

    .card-deck {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: clamp(20px, 3vw, 40px) clamp(16px, 2.4vw, 28px);
        padding-top: 16px;
    }
    @media (max-width: 1080px) { .card-deck { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 640px)  { .card-deck { grid-template-columns: 1fr; } }

    /* Minimal pixel-card — eine markante Geste pro Karte */
    .qcard {
        position: relative;
        display: flex; flex-direction: column;
        gap: 16px;
        padding: 32px 28px 28px;
        background: var(--bg-soft);
        border: 3px solid var(--line);
        transform: rotate(var(--tilt, 0deg));
        transition: transform 380ms var(--ease-expo), border-color 280ms var(--ease-expo);
        cursor: default;
        overflow: hidden;
        min-height: 280px;
    }
    .qcard:hover {
        transform: rotate(0deg) translateY(-8px);
        border-color: var(--acc);
        z-index: 5;
    }
    .qcard:hover .qcard-bignum { color: var(--acc); transform: translateX(0); }
    .qcard:hover .qcard-corner { background: var(--acc); }

    /* Two pixel corners only (TL + BR) für minimalen Akzent */
    .qcard-corner {
        position: absolute;
        width: 12px; height: 12px;
        background: var(--ink-faint);
        transition: background 280ms;
    }
    .qcard-corner.tl { top: 4px;    left: 4px;    }
    .qcard-corner.br { bottom: 4px; right: 4px;   }

    /* Riesiges Index-Number als visuelle Geste — kein Symbol-Spam */
    .qcard-bignum {
        position: absolute;
        right: -12px; bottom: -32px;
        font-family: var(--font-disp);
        font-weight: 700;
        font-size: clamp(140px, 16vw, 220px);
        line-height: 1;
        color: var(--ink-faint);
        opacity: 0.30;
        transform: translateX(8px);
        transition: color 360ms, transform 480ms var(--ease-expo);
        pointer-events: none;
        user-select: none;
    }

    /* Type tag — schlank */
    .qcard-tag {
        font-family: var(--font-mono);
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: var(--acc);
    }

    /* Card title — die Frage */
    .qcard h3 {
        font-family: var(--font-disp);
        font-weight: 700;
        font-size: clamp(22px, 2vw, 28px);
        line-height: 1.05;
        color: var(--ink);
        margin: 0;
    }

    /* Body text — die Antwort */
    .qcard p {
        font-family: var(--font-disp);
        font-weight: 400;
        font-size: 15px;
        line-height: 1.55;
        color: var(--ink-quiet);
        flex: 1;
        max-width: 36ch;
        position: relative;
        z-index: 1;
    }
    .qcard p code {
        font-family: var(--font-mono);
        background: var(--bg);
        padding: 1px 6px;
        font-size: 13px;
        color: var(--acc);
    }

    /* --- Closer (editorial split + chunky game-button) ------------------ */
    .closer {
        padding-block: clamp(120px, 18vw, 240px);
        position: relative;
        overflow: hidden;
    }
    .closer::before {
        content: '';
        position: absolute; inset: 0;
        background:
            radial-gradient(ellipse 70% 50% at 70% 50%, var(--acc-soft), transparent 60%);
        pointer-events: none;
    }
    .closer-grid {
        position: relative;
        display: grid;
        grid-template-columns: 1.3fr 1fr;
        gap: clamp(40px, 6vw, 96px);
        align-items: center;
        max-width: 1280px;
        margin: 0 auto;
    }
    .closer-eyebrow {
        font-family: var(--font-mono);
        font-size: 12px;
        color: var(--acc);
        text-transform: uppercase;
        letter-spacing: 0.18em;
        display: inline-block;
        margin-bottom: 28px;
    }
    .closer h2 {
        font-family: var(--font-disp);
        font-weight: 700;
        font-size: clamp(48px, 7vw, 112px);
        line-height: 0.9;
        color: var(--ink);
        margin-bottom: 32px;
    }
    .closer h2 em { color: var(--acc); }
    .closer h2 .ln { display: block; }
    .closer h2 .ln + .ln { padding-left: clamp(40px, 8vw, 100px); margin-top: 12px; }
    .closer h2 .caret {
        display: inline-block;
        margin-left: 8px;
        color: var(--acc);
        animation: caret-blink 1.1s steps(2, end) infinite;
    }
    @keyframes caret-blink {
        0%, 50% { opacity: 1; }
        51%, 100% { opacity: 0; }
    }
    .closer p {
        font-family: var(--font-disp);
        font-weight: 500;
        font-size: clamp(15px, 1.3vw, 18px);
        line-height: 1.55;
        color: var(--ink-quiet);
        max-width: 44ch;
    }

    /* Right: chunky pixel game-button */
    .closer-right {
        display: flex; flex-direction: column;
        align-items: center;
        gap: 24px;
    }
    .game-btn {
        position: relative;
        display: inline-flex;
        align-items: center; justify-content: center;
        gap: 14px;
        width: clamp(220px, 22vw, 320px);
        height: clamp(120px, 13vw, 180px);
        font-family: var(--font-disp);
        font-weight: 700;
        font-size: clamp(44px, 5vw, 72px);
        color: var(--bg);
        background: var(--acc);
        border: 4px solid var(--ink);
        text-transform: lowercase;
        letter-spacing: 0;
        cursor: pointer;
        box-shadow:
            inset 0 -8px 0 oklch(0.55 0.150 245 / 0.5),
            0 10px 0 var(--ink),
            0 16px 0 oklch(0.06 0.020 250),
            0 26px 60px var(--acc-glow);
        transition: transform 160ms var(--ease-quart), box-shadow 160ms var(--ease-quart);
    }
    .game-btn:hover {
        transform: translateY(8px);
        box-shadow:
            inset 0 -3px 0 oklch(0.55 0.150 245 / 0.5),
            0 2px 0 var(--ink),
            0 6px 0 oklch(0.06 0.020 250),
            0 12px 40px var(--acc-glow);
    }
    .game-btn:active { transform: translateY(12px); }

    .game-btn-corner {
        position: absolute;
        width: 14px; height: 14px;
        background: var(--ink);
    }
    .game-btn-corner.tl { top: 6px;    left: 6px;    }
    .game-btn-corner.tr { top: 6px;    right: 6px;   }
    .game-btn-corner.bl { bottom: 6px; left: 6px;    }
    .game-btn-corner.br { bottom: 6px; right: 6px;   }

    .game-btn-arrow {
        font-size: clamp(20px, 2.4vw, 32px);
        color: var(--bg);
        animation: btn-arrow 1.2s ease-in-out infinite;
    }
    .game-btn-arrow.left  { animation-delay: 0s;   }
    .game-btn-arrow.right { animation-delay: 0.6s; }
    @keyframes btn-arrow {
        0%, 100% { transform: translateX(0); opacity: 0.55; }
        50%      { transform: translateX(4px); opacity: 1; }
    }
    .game-btn:hover .game-btn-arrow { animation-duration: 0.5s; }

    /* Meta below button */
    .closer-meta {
        display: flex; flex-direction: column; gap: 6px;
        align-items: center;
        font-family: var(--font-mono);
        font-size: 11px;
        letter-spacing: 0.16em;
        color: var(--ink-quiet);
        text-transform: uppercase;
    }
    .closer-meta-row { display: flex; align-items: center; gap: 8px; }
    .closer-meta-row .dot {
        width: 8px; height: 8px;
        background: oklch(0.78 0.165 145);
        box-shadow: 0 0 10px oklch(0.78 0.165 145);
        animation: closer-meta-blink 1.6s ease-in-out infinite;
    }
    @keyframes closer-meta-blink {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.4; }
    }

    @media (max-width: 880px) {
        .closer-grid { grid-template-columns: 1fr; gap: 56px; }
        .closer h2 .ln + .ln { padding-left: 24px; }
    }

    /* --- Footer --------------------------------------------------------- */
    .foot {
        padding: clamp(40px, 6vw, 80px) clamp(20px, 4vw, 56px);
        border-top: 1px solid var(--line);
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        gap: 32px;
        align-items: end;
        font-family: var(--font-mono);
        font-size: 11px;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--ink-quiet);
    }
    .foot-locs { display: flex; gap: 24px; flex-wrap: wrap; }
    .foot-locs span { color: var(--ink); }
    .foot-mid { color: var(--ink-quiet); justify-self: center; }
    .foot-links { display: flex; gap: 24px; justify-self: end; flex-wrap: wrap; }
    .foot-links a:hover { color: var(--ink); }

    @media (max-width: 720px) {
        .foot { grid-template-columns: 1fr; gap: 24px; }
        .foot-mid, .foot-links { justify-self: start; }
    }

    /* --- Auth / Dashboard / Admin (kept minimal, editorial) ------------- */
    .auth-wrap {
        max-width: 480px;
        margin: 18vh auto 96px;
        padding-inline: 24px;
    }
    .auth-wrap h1 {
        font-family: var(--font-disp);
        font-weight: 800;
        font-size: clamp(40px, 6vw, 64px);
        letter-spacing: -0.035em;
        line-height: 0.95;
        color: var(--ink);
        margin-bottom: 12px;
    }
    .auth-wrap h1 em { color: var(--acc); }
    .auth-wrap .sub {
        font-family: var(--font-disp);
        font-size: 15px;
        color: var(--ink-quiet);
        margin-bottom: 40px;
        max-width: 40ch;
        line-height: 1.55;
    }

    label {
        display: block;
        font-family: var(--font-mono);
        font-size: 10.5px;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.16em;
        color: var(--ink-quiet);
        margin-bottom: 12px;
    }
    input, select, textarea {
        width: 100%;
        padding: 16px 0;
        font-family: var(--font-disp);
        font-size: 17px;
        background: transparent;
        border: none;
        border-bottom: 1px solid var(--line-2);
        color: var(--ink);
        outline: none;
        transition: border-color 300ms var(--ease-expo);
    }
    input:focus, select:focus, textarea:focus {
        border-bottom-color: var(--acc);
    }
    input::placeholder { color: var(--ink-faint); }
    .field { margin-bottom: 28px; }

    .btn {
        display: inline-flex; align-items: center; gap: 14px;
        padding: 18px 32px;
        font-family: var(--font-mono);
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        border-radius: 999px;
        transition: transform 400ms var(--ease-expo), background 300ms;
    }
    .btn-primary {
        background: var(--acc);
        color: var(--bg);
    }
    .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 18px 40px var(--acc-glow); }
    .btn-ghost {
        color: var(--ink);
        border: 1px solid var(--line-2);
    }
    .btn-ghost:hover { border-color: var(--acc); color: var(--acc); }
    .btn-sm { padding: 10px 18px; font-size: 11px; }

    .error-box {
        font-family: var(--font-mono);
        font-size: 12px;
        color: oklch(0.65 0.220 20);
        padding: 12px 0;
        border-top: 1px solid oklch(0.65 0.220 20 / 0.40);
        border-bottom: 1px solid oklch(0.65 0.220 20 / 0.40);
        margin: 16px 0;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }
    .success-box {
        font-family: var(--font-mono);
        font-size: 12px;
        color: oklch(0.78 0.165 145);
        padding: 12px 0;
        border-top: 1px solid oklch(0.78 0.165 145 / 0.40);
        border-bottom: 1px solid oklch(0.78 0.165 145 / 0.40);
        margin: 16px 0;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    /* Dashboard */
    .dash-wrap { max-width: 980px; margin: 18vh auto 96px; padding-inline: clamp(20px, 4vw, 48px); }
    .dash-eyebrow { display: flex; gap: 12px; align-items: center; margin-bottom: 24px; }
    .dash-h {
        font-family: var(--font-disp);
        font-weight: 800;
        font-size: clamp(36px, 5vw, 64px);
        letter-spacing: -0.035em;
        line-height: 0.95;
        color: var(--ink);
        margin-bottom: 56px;
    }
    .dash-h em { color: var(--acc); }
    .dash-section {
        padding-block: 40px;
        border-bottom: 1px solid var(--line);
    }
    .dash-section h3 {
        font-family: var(--font-mono);
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.18em;
        color: var(--acc);
        margin-bottom: 24px;
    }
    .dash-section p {
        font-family: var(--font-disp);
        font-size: 16px;
        line-height: 1.6;
        color: var(--ink-dim);
        max-width: 60ch;
        margin-bottom: 24px;
    }
    .kv {
        display: grid;
        grid-template-columns: 180px 1fr;
        gap: 16px 32px;
    }
    .kv .k {
        font-family: var(--font-mono);
        font-size: 11px;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--ink-quiet);
        padding-top: 4px;
    }
    .kv .v {
        font-family: var(--font-mono);
        font-size: 14px;
        color: var(--ink);
        word-break: break-all;
    }
    code {
        font-family: var(--font-mono);
        background: var(--bg-soft);
        padding: 3px 8px;
        font-size: 12.5px;
        color: var(--acc);
        border-radius: 3px;
    }

    .badge {
        display: inline-block;
        padding: 4px 10px;
        font-family: var(--font-mono);
        font-size: 9.5px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.14em;
        border-radius: 999px;
    }
    .badge-active   { background: oklch(0.78 0.165 145 / 0.16); color: oklch(0.78 0.165 145); }
    .badge-revoked  { background: oklch(0.65 0.220 20 / 0.16);  color: oklch(0.65 0.220 20); }
    .badge-expired  { background: oklch(0.55 0.018 250 / 0.20); color: var(--ink-quiet); }
    .badge-locked   { background: oklch(0.80 0.170 70 / 0.16);  color: oklch(0.80 0.170 70); }
    .badge-free     { background: var(--acc-soft);              color: var(--acc); }

    /* Admin tables */
    .stats-row {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
        gap: 0;
        border-block: 1px solid var(--line);
        margin-bottom: 32px;
    }
    .stat-cell {
        padding: 24px 0;
        padding-right: 24px;
        border-right: 1px solid var(--line);
    }
    .stat-cell:last-child { border-right: none; }
    .stat-cell .v {
        font-family: var(--font-disp);
        font-weight: 800;
        font-size: 36px;
        letter-spacing: -0.035em;
        line-height: 1;
        color: var(--ink);
    }
    .stat-cell .l {
        margin-top: 8px;
        font-family: var(--font-mono);
        font-size: 10px;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--ink-quiet);
    }

    table { width: 100%; border-collapse: collapse; font-size: 13px; }
    th, td { padding: 14px 12px; text-align: left; border-bottom: 1px solid var(--line); }
    th { font-family: var(--font-mono); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-quiet); }
    tr:hover td { background: var(--acc-soft); }
    td .key-cell { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-dim); }

    .row-actions { display: flex; gap: 6px; flex-wrap: wrap; }

    /* Hidden util */
    .hidden { display: none !important; }
    .text-mono { font-family: var(--font-mono); }
    .text-muted { color: var(--ink-quiet); }
    .text-center { text-align: center; }
}

/* ===========================================================================
   UTILITIES
   =========================================================================== */
@layer utilities {
    /* Reduced motion fallback */
    @media (prefers-reduced-motion: reduce) {
        *, *::before, *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
        }
        .splash { display: none; }
        .marquee-track { animation: none !important; }
        .char, .word-mask > span, .rv {
            opacity: 1 !important; transform: none !important;
        }
    }

    /* Focus state for accessibility (re-enabled) */
    :focus-visible {
        outline: 2px solid var(--acc);
        outline-offset: 4px;
    }
}