/* ============================================================
   CASOOLA CASINO - design system
   Dark robo-cartoon arcade: deep violet night, riveted steel,
   neon cyan / magenta / gold / lime.
   ============================================================ */

:root {
    /* Surfaces */
    --bg-900: #0d0722;
    --bg-800: #160d35;
    --bg-700: #1e1348;
    --steel-900: #171b2d;
    --steel-800: #20243a;
    --steel-700: #2b3049;
    --steel-500: #474d68;
    --steel-300: #78819f;

    /* Neon */
    --cyan: #3fe3ff;
    --magenta: #ff5cd6;
    --gold: #ffcf3f;
    --lime: #a6ec3f;
    --orange: #ff9340;
    --accent: var(--cyan);

    /* Text */
    --text: #f4f2ff;
    --muted: #cac6ea;
    --ink: #0a0718;

    /* Shape */
    --radius: 18px;
    --radius-sm: 12px;
    --radius-pill: 999px;
    --container: 1200px;

    /* Type */
    --font-display: 'Baloo 2', 'Trebuchet MS', system-ui, sans-serif;
    --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;

    /* Depth */
    --metal: linear-gradient(180deg, #4c5372 0%, #2d3250 46%, #1e2338 100%);
    --metal-dark: linear-gradient(180deg, #2b3049 0%, #191d30 100%);
    --shadow-hard: 0 10px 0 rgba(0, 0, 0, .35), 0 18px 34px rgba(0, 0, 0, .45);

    --header-bottom: 76px;
}

/* ============================================
   OVERFLOW PREVENTION - Safety Net
   ============================================ */

*,
*::before,
*::after {
    box-sizing: border-box;
}

img, video, iframe, embed, object, svg {
    max-width: 100%;
    height: auto;
}

[class*="grid"] > *,
[class*="flex"] > * {
    min-width: 0;
}

pre, code, .code-block, [class*="code"] {
    max-width: 100%;
    overflow-x: auto;
}

pre code,
.code-block code {
    display: block;
    min-width: 0;
}

.table-wrapper,
[class*="table-"] {
    max-width: 100%;
    overflow-x: auto;
}

p, li, td, th {
    overflow-wrap: break-word;
}

details {
    height: fit-content;
}

:where(p, li, blockquote, figcaption, dd, .prose, .seo-text, article)
  a:not([class]) {
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

input, textarea, select {
    max-width: 100%;
}

section {
    overflow: clip;
}

/* ============================================
   BASE
   ============================================ */

html {
    scroll-behavior: smooth;
    scroll-padding-top: 96px;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.65;
    color: var(--text);
    background-color: var(--bg-900);
    background-image:
        radial-gradient(1200px 620px at 50% -8%, rgba(110, 62, 224, .55), transparent 62%),
        radial-gradient(900px 520px at 8% 34%, rgba(29, 132, 184, .18), transparent 72%),
        radial-gradient(1000px 640px at 94% 72%, rgba(255, 92, 214, .13), transparent 72%);
    background-repeat: no-repeat;
    overflow-x: hidden;
}

body.nav-open {
    overflow: hidden;
}

h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 800;
    line-height: 1.12;
    margin: 0 0 .5em;
    letter-spacing: .01em;
}

h1 { font-size: clamp(1.9rem, 6.4vw, 3.4rem); }
h2 { font-size: clamp(1.45rem, 4.2vw, 2.35rem); }
h3 { font-size: clamp(1.1rem, 2.6vw, 1.4rem); }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--cyan); }
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--lime);
    outline-offset: 3px;
    border-radius: 6px;
}

ul, ol { padding-left: 1.2em; }

strong { color: #fff; }

.inline-link {
    color: var(--cyan);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: .18em;
}
.inline-link:hover { color: var(--lime); }

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 200;
    background: var(--lime);
    color: var(--ink);
    padding: 12px 20px;
    font-weight: 700;
    border-radius: 0 0 10px 0;
}
.skip-link:focus { left: 0; }

.container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 16px;
}

.section {
    position: relative;
    padding: 46px 0;
}
.section--tight { padding: 32px 0; }

.lead {
    font-size: 1.06rem;
    color: var(--muted);
}

.text-center { text-align: center; }

.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ============================================
   HEADINGS / TITLE PLATES
   ============================================ */

.heading--plate {
    display: inline-block;
    max-width: 100%;
    padding: .34em .8em;
    color: var(--cyan);
    background: var(--metal);
    border: 2px solid var(--steel-300);
    border-radius: 14px;
    text-shadow: 0 0 14px rgba(63, 227, 255, .55), 0 2px 0 #06121a;
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, .14), 0 6px 0 rgba(0, 0, 0, .4);
}

.heading--gold { color: var(--gold); text-shadow: 0 0 16px rgba(255, 207, 63, .5), 0 2px 0 #2a1600; }
.heading--plain { color: var(--text); }

.section-heading { margin-bottom: 26px; }
.section-heading--center { text-align: center; }
.section-heading--left { text-align: left; }

.section-heading__kicker {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-size: .8rem;
    color: var(--magenta);
    margin-bottom: .4em;
}

/* ============================================
   BUTTONS
   ============================================ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5em;
    min-height: 48px;
    padding: .62em 1.5em;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.02rem;
    line-height: 1.1;
    text-align: center;
    text-decoration: none;
    border-radius: var(--radius-pill);
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform .14s ease, box-shadow .2s ease, background-color .2s ease;
}

.btn--sm { min-height: 44px; padding: .45em 1.1em; font-size: .95rem; }
.btn--lg { min-height: 56px; padding: .72em 2em; font-size: 1.16rem; }
.btn--block { width: 100%; }

.btn--primary {
    color: #10210a;
    background: linear-gradient(180deg, #c6f765 0%, #93dd2d 100%);
    border-color: #defd9c;
    box-shadow: 0 6px 0 #4d7a12, 0 0 26px rgba(166, 236, 63, .45);
}
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 8px 0 #4d7a12, 0 0 34px rgba(166, 236, 63, .6); }
.btn--primary:active { transform: translateY(2px); box-shadow: 0 2px 0 #4d7a12; }

.btn--ghost {
    color: #eafcff;
    background: rgba(12, 22, 44, .82);
    border-color: var(--cyan);
    box-shadow: 0 0 18px rgba(63, 227, 255, .3), inset 0 0 14px rgba(63, 227, 255, .14);
}
.btn--ghost:hover { color: #fff; background: rgba(23, 46, 80, .92); box-shadow: 0 0 26px rgba(63, 227, 255, .5); }

.btn--gold {
    color: #2b1a00;
    background: linear-gradient(180deg, #ffe28a 0%, #ffbe25 100%);
    border-color: #fff0bd;
    box-shadow: 0 6px 0 #946400, 0 0 26px rgba(255, 207, 63, .45);
}
.btn--gold:hover { transform: translateY(-2px); }

.btn--magenta {
    color: #2b0520;
    background: linear-gradient(180deg, #ff9ae5 0%, #ff46cf 100%);
    border-color: #ffd2f3;
    box-shadow: 0 6px 0 #8c1d6e, 0 0 26px rgba(255, 92, 214, .45);
}

.btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.btn-row--center { justify-content: center; }

/* ============================================
   HEADER
   ============================================ */

.site-header {
    position: sticky;
    top: 0;
    z-index: 90;
    padding: 10px 0;
}

.site-header::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(13, 7, 34, .96) 0%, rgba(13, 7, 34, .82) 100%);
    backdrop-filter: blur(8px);
    border-bottom: 2px solid rgba(120, 129, 159, .45);
    z-index: -1;
}

.site-header__inner {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: space-between;
}

.site-header__pipe {
    display: block;
    height: 6px;
    margin: 8px auto 0;
    max-width: 320px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, var(--cyan), var(--magenta), transparent);
    opacity: .75;
}

.site-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 14px 6px 8px;
    text-decoration: none;
    background: var(--metal);
    border: 2px solid var(--steel-300);
    border-radius: 14px;
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, .12), 0 5px 0 rgba(0, 0, 0, .4);
    min-height: 52px;
}

.site-brand__mark {
    width: 38px;
    height: 38px;
    filter: drop-shadow(0 0 8px rgba(63, 227, 255, .6));
}

.site-brand__text {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.02rem;
    color: var(--gold);
    text-shadow: 0 0 12px rgba(255, 207, 63, .5), 0 2px 0 #2a1600;
    white-space: nowrap;
}

.nav-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    padding: 8px 14px;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: .95rem;
    color: var(--cyan);
    background: var(--metal-dark);
    border: 2px solid var(--steel-300);
    border-radius: 12px;
    cursor: pointer;
}

.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
    display: block;
    width: 22px;
    height: 3px;
    border-radius: 2px;
    background: var(--cyan);
    box-shadow: 0 0 8px rgba(63, 227, 255, .8);
}
.nav-toggle__bars { position: relative; }
.nav-toggle__bars::before,
.nav-toggle__bars::after {
    content: "";
    position: absolute;
    left: 0;
}
.nav-toggle__bars::before { top: -7px; }
.nav-toggle__bars::after { top: 7px; }

.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; box-shadow: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { top: 0; transform: rotate(-45deg); }

.site-nav__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.site-nav__list a {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 6px 14px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--text);
    text-decoration: none;
    border-radius: 10px;
    border: 1px solid rgba(120, 129, 159, .4);
    background: rgba(28, 33, 56, .9);
}
.site-nav__list a:hover,
.site-nav__list a[aria-current="page"] {
    color: var(--cyan);
    border-color: var(--cyan);
    box-shadow: inset 0 0 14px rgba(63, 227, 255, .2);
}

.site-nav__cta {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 16px;
}

.site-header .header-actions { display: none; }

@media (max-width: 1023.98px) {
    .site-nav {
        position: fixed;
        top: var(--header-bottom);
        left: 0;
        right: 0;
        bottom: 0;
        height: auto;
        z-index: 95;
        display: none;
        flex-direction: column;
        padding: 18px 16px 48px;
        background: var(--bg-800);
        border-top: 2px solid var(--steel-500);
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    .site-nav.is-open { display: flex; }
}

@media (min-width: 1024px) {
    .nav-toggle { display: none; }

    .site-nav { display: flex; align-items: center; }

    .site-nav__list {
        flex-direction: row;
        gap: 4px;
        padding: 6px 10px;
        background: var(--metal);
        border: 2px solid var(--steel-300);
        border-radius: 14px;
        box-shadow: inset 0 2px 0 rgba(255, 255, 255, .1), 0 5px 0 rgba(0, 0, 0, .4);
    }
    .site-nav__list a {
        min-height: 40px;
        font-size: .98rem;
        border: 0;
        background: transparent;
    }
    .site-nav__cta { display: none; }

    .site-header .header-actions {
        display: flex;
        gap: 8px;
        padding: 6px 8px;
        background: var(--metal);
        border: 2px solid var(--steel-300);
        border-radius: 14px;
        box-shadow: inset 0 2px 0 rgba(255, 255, 255, .1), 0 5px 0 rgba(0, 0, 0, .4);
    }
    .header-actions .header-cta { white-space: nowrap; }
}

/* ============================================
   PANELS / PLATES
   ============================================ */

.panel {
    --accent: var(--cyan);
    position: relative;
    margin-top: 26px;
    padding: 26px 18px 24px;
    background: var(--metal-dark);
    border: 2px solid var(--steel-500);
    border-radius: var(--radius);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05), var(--shadow-hard);
}

.panel::before,
.panel::after {
    content: "";
    position: absolute;
    left: 16px;
    right: 16px;
    height: 6px;
    background-image: radial-gradient(circle at 3px 3px, #c6d2ef 0 2px, #0d1021 2.6px, transparent 3px);
    background-size: 30px 6px;
    background-repeat: repeat-x;
    opacity: .55;
    pointer-events: none;
}
.panel::before { top: 8px; }
.panel::after { bottom: 8px; }

.panel--cyan { --accent: var(--cyan); }
.panel--magenta { --accent: var(--magenta); }
.panel--gold { --accent: var(--gold); }
.panel--lime { --accent: var(--lime); }
.panel--steel { --accent: var(--steel-300); }

.panel--glow {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05), var(--shadow-hard),
                0 0 34px color-mix(in srgb, var(--accent) 35%, transparent);
    border-color: color-mix(in srgb, var(--accent) 55%, var(--steel-500));
}

.panel__title {
    text-align: center;
    margin: -44px 0 20px;
}

.panel__body > *:last-child { margin-bottom: 0; }

.glass-plate {
    position: relative;
    max-width: 640px;
    margin: 0 auto;
    padding: 24px 20px 22px;
    background: linear-gradient(180deg, rgba(14, 20, 44, .92), rgba(9, 12, 30, .95));
    border: 3px solid var(--steel-300);
    border-radius: 20px;
    box-shadow:
        inset 0 0 26px rgba(0, 0, 0, .8),
        inset 0 0 0 2px rgba(63, 227, 255, .25),
        0 0 44px rgba(63, 227, 255, .35),
        0 16px 34px rgba(0, 0, 0, .55);
}
.glass-plate--gold { box-shadow: inset 0 0 26px rgba(0,0,0,.8), inset 0 0 0 2px rgba(255,207,63,.3), 0 0 44px rgba(255,207,63,.35), 0 16px 34px rgba(0,0,0,.55); }
.glass-plate--magenta { box-shadow: inset 0 0 26px rgba(0,0,0,.8), inset 0 0 0 2px rgba(255,92,214,.3), 0 0 44px rgba(255,92,214,.35), 0 16px 34px rgba(0,0,0,.55); }

.glass-plate__conduit {
    position: absolute;
    inset: -12px;
    pointer-events: none;
}
.glass-plate__conduit svg { width: 100%; height: 100%; }
.glass-plate__body { position: relative; }

.conduit-core { fill: none; stroke: var(--cyan); stroke-width: 3; stroke-linecap: round; }
.conduit-halo { fill: none; stroke: var(--magenta); stroke-width: 9; stroke-linecap: round; opacity: .35; filter: blur(3px); }
.conduit-bolt { fill: #cdd8f3; stroke: #0d1021; stroke-width: 2; }
.conduit-spark { fill: var(--cyan); opacity: .85; }

.conduit-rail,
.cable-harness {
    position: absolute;
    left: 0;
    right: 0;
    display: block;
    pointer-events: none;
    opacity: .75;
}
.conduit-rail { height: 40px; }
.cable-harness { height: 160px; }
.conduit-rail svg,
.cable-harness svg { width: 100%; height: 100%; }

.conduit-rail--magenta .conduit-core,
.cable-harness--magenta .conduit-core { stroke: var(--magenta); }
.conduit-rail--gold .conduit-core,
.cable-harness--gold .conduit-core { stroke: var(--gold); }
.conduit-rail--lime .conduit-core,
.cable-harness--lime .conduit-core { stroke: var(--lime); }

/* ============================================
   HERO
   ============================================ */

.hero {
    position: relative;
    isolation: isolate;
    padding: 38px 0 48px;
    overflow: clip;
}

.hero__bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    background-position: 50% 32%;
    background-size: cover;
    background-repeat: no-repeat;
}

.hero__scrim {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(60% 42% at 50% 56%, rgba(255, 147, 64, .3), transparent 70%),
        linear-gradient(180deg, rgba(13, 7, 34, .72) 0%, rgba(13, 7, 34, .3) 36%, rgba(13, 7, 34, .88) 86%, var(--bg-900) 100%);
}

.hero__inner {
    position: relative;
    text-align: center;
}

.hero h1 {
    color: #fff;
    text-shadow: 0 0 22px rgba(63, 227, 255, .55), 0 4px 0 rgba(6, 10, 26, .9);
}

.hero__lead {
    max-width: 44rem;
    margin: 0 auto 22px;
    color: #ece9ff;
    font-size: 1.05rem;
}

.hero__spacer { height: clamp(140px, 34vw, 340px); }

.hero-kicker {
    display: inline-block;
    margin-bottom: 14px;
    padding: .35em 1em;
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    font-size: .78rem;
    color: var(--ink);
    background: var(--lime);
    border-radius: var(--radius-pill);
    box-shadow: 0 0 18px rgba(166, 236, 63, .5);
}

.burst-glow {
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(760px, 120%);
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(circle, rgba(255, 190, 70, .42) 0%, rgba(255, 147, 64, .22) 32%, transparent 62%),
        radial-gradient(circle, rgba(63, 227, 255, .3) 0%, transparent 56%);
    animation: burst-pulse 5s ease-in-out infinite;
}

@keyframes burst-pulse {
    0%, 100% { opacity: .75; transform: translate(-50%, -50%) scale(1); }
    50% { opacity: 1; transform: translate(-50%, -50%) scale(1.07); }
}

/* Bonus counter (hero) */
.bonus-figure {
    font-family: var(--font-display);
    font-weight: 800;
    line-height: 1.05;
    font-size: clamp(1.6rem, 6.4vw, 2.9rem);
    color: var(--gold);
    text-shadow: 0 0 20px rgba(255, 207, 63, .6), 0 3px 0 #2a1600;
    margin-bottom: .3em;
}
.bonus-figure small {
    display: block;
    font-size: .42em;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--cyan);
    text-shadow: 0 0 14px rgba(63, 227, 255, .6);
}

.countdown {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 0 0 18px;
    list-style: none;
    padding: 0;
}
.countdown li {
    min-width: 64px;
    padding: 8px 6px;
    background: #090d1f;
    border: 2px solid var(--steel-300);
    border-radius: 10px;
    box-shadow: inset 0 0 14px rgba(63, 227, 255, .25);
}
.countdown b {
    display: block;
    font-family: var(--font-display);
    font-size: 1.6rem;
    color: #fff;
    text-shadow: 0 0 12px rgba(63, 227, 255, .8);
}
.countdown span {
    font-size: .72rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
}

/* ============================================
   HOMEPAGE - hero plate, harness, slots room
   ============================================ */

.hero__plate-wrap {
    position: relative;
    isolation: isolate;
}

.hero__fineprint {
    margin: 14px 0 0;
    font-size: .82rem;
    color: #d6d1f2;
}

.harness-wrap { position: relative; }
.harness-wrap .cable-harness {
    top: -18px;
    height: 120px;
    z-index: 0;
}
.harness-wrap__grid { position: relative; z-index: 1; }

.slots-section {
    position: relative;
    isolation: isolate;
}
.slots-section__bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    background-position: 50% 50%;
    background-size: cover;
    background-repeat: no-repeat;
}
.slots-section::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(13, 7, 34, .9) 0%, rgba(13, 7, 34, .66) 40%, rgba(13, 7, 34, .92) 100%);
}
.slots-section__inner { position: relative; }
.slots-section__lead {
    max-width: 48rem;
    margin: 0 auto 26px;
}
.slots-section__actions { margin-top: 26px; }

.slots-frame {
    position: relative;
    padding: 34px 10px;
}
.slots-frame .conduit-rail { height: 34px; }
.slots-frame .conduit-rail:first-child { top: 0; }
.slots-frame .conduit-rail:last-child { bottom: 0; }
.slots-frame__grid { position: relative; z-index: 1; }

/* Sportsbook coupon overlay */
.coupon-media { position: relative; }

.coupon-strip {
    list-style: none;
    display: grid;
    gap: 8px;
    margin: -34px 16px 0;
    padding: 0;
    position: relative;
    z-index: 2;
}
.coupon-strip__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    font-size: .9rem;
    color: #eafcf0;
    background: rgba(9, 13, 28, .94);
    border: 2px solid rgba(166, 236, 63, .6);
    border-radius: 12px;
    box-shadow: 0 0 16px rgba(166, 236, 63, .22);
}
.coupon-strip__slot {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: .78rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--lime);
    padding: 2px 10px;
    border: 1px dashed rgba(166, 236, 63, .7);
    border-radius: 999px;
    white-space: nowrap;
}

.trust-grid { margin-top: 22px; }

/* ============================================
   GRIDS
   ============================================ */

.grid { display: grid; gap: 18px; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 215px), 1fr)); }
.grid--start { align-items: start; }

.card-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 540px) { .card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 768px) { .card-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .card-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

.split {
    display: grid;
    gap: 22px;
    align-items: center;
}
@media (min-width: 900px) {
    .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 34px; }
    .split--media-first > :first-child { order: -1; }
}

/* ============================================
   GAME CARD (CRT cabinet)
   ============================================ */

.game-card {
    --c: var(--cyan);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 10px 12px;
    text-decoration: none;
    color: var(--text);
    background: var(--metal);
    border: 3px solid var(--c);
    border-radius: 16px;
    box-shadow: 0 6px 0 rgba(0, 0, 0, .45), 0 0 0 1px rgba(0, 0, 0, .5) inset;
    transition: transform .16s ease, box-shadow .2s ease;
}
.game-card--magenta { --c: var(--magenta); }
.game-card--gold { --c: var(--gold); }
.game-card--lime { --c: var(--lime); }
.game-card--orange { --c: var(--orange); }

.game-card:hover,
.game-card:focus-visible {
    transform: translateY(-4px);
    box-shadow: 0 10px 0 rgba(0, 0, 0, .45), 0 0 26px color-mix(in srgb, var(--c) 60%, transparent);
}

.game-card__antennas {
    position: absolute;
    top: -12px;
    left: 18px;
    right: 18px;
    height: 12px;
}
.game-card__antennas::before,
.game-card__antennas::after {
    content: "";
    position: absolute;
    bottom: 0;
    width: 3px;
    height: 12px;
    background: var(--steel-300);
    border-radius: 2px;
}
.game-card__antennas::before { left: 4px; transform: rotate(-18deg); box-shadow: 0 -4px 0 -1px var(--c); }
.game-card__antennas::after { right: 4px; transform: rotate(18deg); box-shadow: 0 -4px 0 -1px var(--c); }

.game-card__screen {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    border-radius: 10px;
    background:
        radial-gradient(ellipse at 32% 24%, rgba(130, 236, 255, .45), transparent 55%),
        linear-gradient(170deg, #2c7684 0%, #0f2b33 78%);
    box-shadow: inset 0 0 20px rgba(0, 0, 0, .75), inset 0 0 0 2px rgba(0, 0, 0, .5);
}

.game-card__badge {
    position: absolute;
    top: 6px;
    left: 6px;
    padding: 2px 8px;
    font-family: var(--font-display);
    font-size: .68rem;
    font-weight: 800;
    color: var(--ink);
    background: var(--c);
    border-radius: 999px;
}

.game-card__strip {
    display: block;
    height: 7px;
    border-radius: 4px;
    background: var(--lime);
    box-shadow: 0 0 10px rgba(166, 236, 63, .7);
}

.game-card__title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: .98rem;
    line-height: 1.2;
    color: #fff;
}
.game-card__meta { font-size: .8rem; color: var(--muted); }

/* ============================================
   BONUS CARD
   ============================================ */

.bonus-card {
    --c: var(--gold);
    display: flex;
    flex-direction: column;
    gap: 6px;
    height: 100%;
    padding: 20px 18px;
    background: var(--metal-dark);
    border: 2px solid var(--steel-500);
    border-top: 5px solid var(--c);
    border-radius: var(--radius);
    box-shadow: var(--shadow-hard), 0 0 24px color-mix(in srgb, var(--c) 22%, transparent);
}
.bonus-card--cyan { --c: var(--cyan); }
.bonus-card--magenta { --c: var(--magenta); }
.bonus-card--lime { --c: var(--lime); }
.bonus-card--orange { --c: var(--orange); }

.bonus-card__value {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(1.8rem, 5.4vw, 2.5rem);
    line-height: 1.05;
    color: var(--c);
    text-shadow: 0 0 18px color-mix(in srgb, var(--c) 55%, transparent), 0 3px 0 rgba(0, 0, 0, .6);
    margin: 0;
}
.bonus-card__value em {
    display: block;
    font-style: normal;
    font-size: .36em;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
    text-shadow: none;
}
.bonus-card__title { margin: 4px 0 2px; color: #fff; }
.bonus-card__text { color: var(--muted); margin: 0; }
.bonus-card__note {
    margin: 0;
    font-size: .85rem;
    color: #a9a4d2;
}
.bonus-card .btn { margin-top: auto; align-self: flex-start; }

/* ============================================
   STEPS
   ============================================ */

.steps {
    position: relative;
    display: grid;
    gap: 16px;
    list-style: none;
    margin: 0;
    padding: 0;
}
@media (min-width: 860px) {
    .steps--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .steps--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.step-capsule {
    position: relative;
    display: flex;
    gap: 14px;
    padding: 18px 16px;
    background: var(--metal);
    border: 2px solid var(--steel-500);
    border-radius: var(--radius);
    box-shadow: var(--shadow-hard);
}

.step-capsule__disc {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.25rem;
    color: var(--ink);
    background: radial-gradient(circle at 34% 30%, #b8f5ff, var(--cyan));
    border-radius: 50%;
    box-shadow: 0 0 18px rgba(63, 227, 255, .6);
}

.step-capsule__title { margin: 0 0 4px; color: #fff; font-size: 1.08rem; }
.step-capsule__value {
    margin: 0 0 4px;
    font-family: var(--font-display);
    font-weight: 800;
    color: var(--gold);
    font-size: 1.2rem;
}
.step-capsule__text { margin: 0; color: var(--muted); font-size: .96rem; }

/* ============================================
   BENEFIT ROWS + COG BADGE
   ============================================ */

.benefit-row {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}
.benefit-row__title { margin: 0 0 4px; color: var(--cyan); font-size: 1.12rem; }
.benefit-row p { margin: 0 0 6px; color: var(--muted); font-size: .96rem; }

.cog-badge {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    color: var(--cyan);
    background:
        conic-gradient(from 0deg, #596385 0 6%, #39405c 6% 12%) ,
        radial-gradient(circle, #2a3049 56%, transparent 57%);
    border: 2px solid var(--steel-300);
    border-radius: 16px;
    box-shadow: inset 0 0 14px rgba(0, 0, 0, .7), 0 0 16px rgba(63, 227, 255, .25);
}
.cog-badge .icon { filter: drop-shadow(0 0 6px rgba(63, 227, 255, .6)); }

/* ============================================
   TRUST TILES
   ============================================ */

.trust-tile {
    padding: 16px 14px;
    background: linear-gradient(180deg, #2a2f44 0%, #1d2133 100%);
    border: 2px solid #4b5168;
    border-radius: var(--radius-sm);
    color: #ded9f2;
}
.trust-tile__icon { display: inline-flex; color: #9fb0d4; margin-bottom: 6px; }
.trust-tile__title { margin: 0 0 4px; font-size: 1rem; color: #fff; }
.trust-tile p { margin: 0; font-size: .92rem; color: #c3bfd8; }

.age-badge {
    display: inline-grid;
    place-items: center;
    width: 54px;
    height: 54px;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.15rem;
    color: #fff;
    background: #8d1230;
    border: 3px solid #ff6a8c;
    border-radius: 50%;
    box-shadow: 0 0 18px rgba(255, 106, 140, .45);
}

/* ============================================
   FAQ DISCLOSURES
   ============================================ */

.faq-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    align-items: start;
}

.faq-item {
    position: relative;
    background: linear-gradient(180deg, #30364f 0%, #1c2033 100%);
    border: 2px solid var(--steel-500);
    border-radius: 14px;
    box-shadow: 0 6px 0 rgba(0, 0, 0, .35);
}
.faq-item[open] { border-color: var(--cyan); box-shadow: 0 6px 0 rgba(0,0,0,.35), 0 0 22px rgba(63, 227, 255, .25); }

.faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 16px;
    min-height: 56px;
    cursor: pointer;
    list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }

.faq-item__q {
    margin: 0;
    font-size: 1.04rem;
    color: #fff;
    font-family: var(--font-display);
    font-weight: 700;
}

.faq-item__chip {
    position: relative;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: #141828;
    border: 2px solid var(--lime);
    box-shadow: 0 0 10px rgba(166, 236, 63, .35);
}
.faq-item__chip::before,
.faq-item__chip::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 12px;
    height: 3px;
    border-radius: 2px;
    background: var(--lime);
    transform: translate(-50%, -50%);
    transition: transform .2s ease;
}
.faq-item__chip::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-item[open] .faq-item__chip { box-shadow: 0 0 18px rgba(166, 236, 63, .75); }
.faq-item[open] .faq-item__chip::after { transform: translate(-50%, -50%) rotate(0deg); }

.faq-item__a {
    padding: 0 16px 16px;
    color: var(--muted);
}
.faq-item__a > *:last-child { margin-bottom: 0; }

/* ============================================
   FRAMED MEDIA
   ============================================ */

.framed-media {
    --c: var(--cyan);
    margin: 0;
}
.framed-media--magenta { --c: var(--magenta); }
.framed-media--gold { --c: var(--gold); }
.framed-media--lime { --c: var(--lime); }

.framed-media__frame {
    position: relative;
    padding: 10px;
    background: var(--metal);
    border: 3px solid var(--steel-300);
    border-radius: 20px;
    box-shadow:
        inset 0 0 0 2px color-mix(in srgb, var(--c) 60%, transparent),
        0 0 32px color-mix(in srgb, var(--c) 35%, transparent),
        var(--shadow-hard);
}
.framed-media__frame::before,
.framed-media__frame::after {
    content: "";
    position: absolute;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: radial-gradient(circle at 34% 30%, #e6edff, #7b86a8);
    box-shadow: 0 0 0 2px #10131f;
}
.framed-media__frame::before { left: 10px; top: 10px; }
.framed-media__frame::after { right: 10px; bottom: 10px; }

.framed-media__frame img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 12px;
}

.framed-media figcaption {
    margin-top: 10px;
    font-size: .88rem;
    color: var(--muted);
    text-align: center;
}

.integrated-media {
    position: relative;
    display: block;
    margin: 0 auto;
}
.integrated-media img {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 18px 26px rgba(0, 0, 0, .5));
}
.integrated-media::before {
    content: "";
    position: absolute;
    inset: 6% 2%;
    z-index: -1;
    background: radial-gradient(circle, rgba(63, 227, 255, .3) 0%, rgba(255, 92, 214, .16) 44%, transparent 70%);
}

/* ============================================
   TICKER PILLS
   ============================================ */

.ticker-stack {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0 0 0 26px;
    display: grid;
    gap: 10px;
}
.ticker-stack::before {
    content: "";
    position: absolute;
    left: 8px;
    top: 10px;
    bottom: 10px;
    width: 4px;
    border-radius: 3px;
    background: linear-gradient(180deg, var(--cyan), var(--magenta));
    box-shadow: 0 0 14px rgba(63, 227, 255, .5);
}

.ticker-pill {
    --c: var(--cyan);
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    padding: 12px 16px;
    background: #121733;
    border: 2px solid color-mix(in srgb, var(--c) 70%, transparent);
    border-radius: var(--radius-pill);
    box-shadow: inset 0 0 16px color-mix(in srgb, var(--c) 22%, transparent);
}
.ticker-pill--magenta { --c: var(--magenta); }
.ticker-pill--gold { --c: var(--gold); }
.ticker-pill--lime { --c: var(--lime); }

.ticker-pill::before {
    content: "";
    position: absolute;
    left: -22px;
    top: 50%;
    width: 18px;
    height: 3px;
    background: var(--c);
    transform: translateY(-50%);
    opacity: .7;
}
.ticker-pill__bulb {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--c);
    box-shadow: 0 0 12px var(--c);
}
.ticker-pill__label {
    font-family: var(--font-display);
    font-weight: 800;
    color: var(--c);
    text-transform: uppercase;
    letter-spacing: .05em;
}
.ticker-pill__text { color: var(--text); font-size: .94rem; }

/* ============================================
   CHIPS
   ============================================ */

.chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: .4em 1.1em;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: .95rem;
    color: #eef7ff;
    text-decoration: none;
    background: rgba(13, 19, 40, .9);
    border: 2px solid var(--steel-300);
    border-radius: var(--radius-pill);
}
.chip::before {
    content: "";
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--steel-300);
}
.chip.is-active,
.chip:hover {
    color: #fff;
    border-color: var(--cyan);
    box-shadow: 0 0 18px rgba(63, 227, 255, .35), inset 0 0 14px rgba(63, 227, 255, .18);
}
.chip.is-active::before,
.chip:hover::before { background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }

/* ============================================
   RANK ROWS
   ============================================ */

.rank-list {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0 0 0 10px;
    display: grid;
    gap: 12px;
}

.rank-row {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 14px 16px;
    background: linear-gradient(180deg, #262b42 0%, #171b2c 100%);
    border: 2px solid var(--steel-500);
    border-radius: 14px;
}
.rank-row__badge {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.3rem;
    color: var(--ink);
    background: radial-gradient(circle at 34% 30%, #ffe9a6, var(--gold));
    border-radius: 14px;
    box-shadow: 0 0 18px rgba(255, 207, 63, .5);
}
.rank-row__title { margin: 0 0 4px; color: #fff; font-size: 1.05rem; }
.rank-row p { margin: 0 0 8px; color: var(--muted); font-size: .95rem; }
.rank-row__bar {
    display: block;
    height: 6px;
    border-radius: 4px;
    background: #0e1223;
    overflow: hidden;
}
.rank-row__bar i {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--cyan), var(--magenta));
    box-shadow: 0 0 12px rgba(63, 227, 255, .6);
}

/* ============================================
   TABLES
   ============================================ */

.table-wrapper {
    border: 2px solid var(--steel-500);
    border-radius: var(--radius-sm);
    background: #141829;
}

.data-table {
    width: 100%;
    min-width: 560px;
    border-collapse: collapse;
    font-size: .95rem;
}
.data-table caption {
    padding: 12px 14px;
    text-align: left;
    color: var(--muted);
    font-size: .9rem;
}
.data-table thead th {
    position: sticky;
    top: 0;
    padding: 12px 14px;
    text-align: left;
    font-family: var(--font-display);
    font-weight: 800;
    color: var(--cyan);
    background: var(--metal);
    border-bottom: 2px solid var(--steel-300);
    white-space: nowrap;
}
.data-table tbody th,
.data-table tbody td {
    padding: 12px 14px;
    border-bottom: 1px solid rgba(63, 227, 255, .18);
    vertical-align: top;
    text-align: left;
}
.data-table tbody th { color: #fff; font-weight: 700; }
.data-table tbody td { color: var(--muted); }
.data-table tbody tr:nth-child(even) { background: rgba(63, 227, 255, .05); }
.data-table .is-highlight { color: var(--gold); font-weight: 700; text-shadow: 0 0 12px rgba(255, 207, 63, .4); }

/* ============================================
   BREADCRUMBS
   ============================================ */

.breadcrumbs { padding: 14px 0 0; }
.breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: .86rem;
    color: var(--muted);
}
.breadcrumbs li + li::before { content: "/"; margin-right: 6px; color: var(--steel-300); }
.breadcrumbs a { color: var(--cyan); text-decoration: none; }
.breadcrumbs a:hover { text-decoration: underline; }
.breadcrumbs [aria-current="page"] { color: var(--text); }

/* ============================================
   CTA BAND
   ============================================ */

.cta-band { padding: 44px 0 54px; }

.cta-band__console {
    position: relative;
    text-align: center;
    padding: 30px 18px 28px;
    background: var(--metal);
    border: 3px solid var(--steel-300);
    border-radius: 22px;
    box-shadow: var(--shadow-hard), 0 0 40px rgba(166, 236, 63, .22);
}
.cta-band__console::before,
.cta-band__console::after {
    content: "";
    position: absolute;
    left: 18px;
    right: 18px;
    height: 6px;
    background-image: radial-gradient(circle at 3px 3px, #d8e2ff 0 2px, #0d1021 2.6px, transparent 3px);
    background-size: 30px 6px;
    background-repeat: repeat-x;
    opacity: .6;
}
.cta-band__console::before { top: 9px; }
.cta-band__console::after { bottom: 9px; }

.cta-band__text {
    max-width: 44rem;
    margin: 0 auto 18px;
    color: #ebe8ff;
}
.cta-band__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}
.cta-band__note {
    margin: 16px 0 0;
    font-size: .86rem;
    color: #d4cfef;
}

/* ============================================
   STAT SLOTS
   ============================================ */

.stat-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
    gap: 12px;
}
.stat-slot {
    padding: 12px 10px;
    text-align: center;
    background: #0d1227;
    border: 2px solid var(--steel-500);
    border-radius: 12px;
    box-shadow: inset 0 0 16px rgba(63, 227, 255, .14);
}
.stat-slot__value {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.45rem;
    color: var(--gold);
    text-shadow: 0 0 14px rgba(255, 207, 63, .45);
}
.stat-slot__label { margin: 0; font-size: .84rem; color: var(--muted); }

/* ============================================
   CALLOUT
   ============================================ */

.callout {
    position: relative;
    padding: 18px 18px 18px 20px;
    margin: 22px 0;
    background: rgba(255, 207, 63, .08);
    border: 2px solid rgba(255, 207, 63, .55);
    border-radius: var(--radius-sm);
    color: #f6f1dd;
}
.callout--caution::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 8px;
    border-radius: 10px 10px 0 0;
    background: repeating-linear-gradient(45deg, rgba(255, 207, 63, .85) 0 10px, rgba(13, 7, 34, .85) 10px 20px);
    opacity: .5;
}
.callout--caution { padding-top: 24px; }
.callout h3 { color: var(--gold); margin-bottom: .3em; }
.callout p:last-child { margin-bottom: 0; }

/* ============================================
   FOOTER
   ============================================ */

.site-footer {
    position: relative;
    margin-top: 10px;
    padding-bottom: 34px;
}

.footer-cables {
    display: block;
    width: 100%;
    height: 48px;
}

.footer-console { margin-top: 0; }

.footer-grid {
    display: grid;
    gap: 24px;
    margin-bottom: 20px;
}
@media (min-width: 768px) {
    .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 26px; }
}

.footer-brand img { width: 52px; height: 52px; }
.footer-brand__name {
    margin: 6px 0 4px;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.2rem;
    color: var(--gold);
}
.footer-brand__text { color: var(--muted); font-size: .92rem; }

.footer-col__title {
    font-size: 1rem;
    color: var(--cyan);
    margin-bottom: .6em;
}
.footer-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 2px;
}
.footer-col a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--muted);
    text-decoration: none;
    font-size: .95rem;
}
.footer-col a:hover { color: var(--cyan); text-decoration: underline; }

.footer-col--actions { display: grid; gap: 10px; align-content: start; }
.footer-col--actions .btn { width: 100%; }

.footer-legal {
    padding-top: 16px;
    border-top: 1px solid rgba(120, 129, 159, .35);
    color: #b9b5d8;
    font-size: .88rem;
}
.footer-legal a { color: var(--cyan); }

.footer-copy {
    margin: 10px 0 0;
    font-size: .84rem;
    color: #9d99bd;
}

/* ============================================
   COOKIE BANNER
   ============================================ */

.cookie-banner {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 120;
}
.cookie-banner[hidden] { display: none; }

.cookie-banner__inner {
    max-width: 920px;
    margin: 0 auto;
    display: grid;
    gap: 12px;
    padding: 16px 18px;
    background: #141829;
    border: 2px solid var(--cyan);
    border-radius: var(--radius);
    box-shadow: 0 0 30px rgba(63, 227, 255, .3), 0 14px 30px rgba(0, 0, 0, .6);
}
.cookie-banner p { margin: 0; font-size: .9rem; color: var(--muted); }
.cookie-banner__actions { display: flex; flex-wrap: wrap; gap: 10px; }

@media (min-width: 768px) {
    .cookie-banner__inner { grid-template-columns: 1fr auto; align-items: center; }
}

/* ============================================
   REVEAL MOTION
   ============================================ */

.js [data-reveal] {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .5s ease, transform .5s ease;
}
.js [data-reveal].is-visible {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .js [data-reveal],
    .js [data-reveal].is-visible { opacity: 1; transform: none; transition: none; }
    .burst-glow { animation: none; }
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}

/* ============================================
   RESPONSIVE REFINEMENTS
   ============================================ */

@media (min-width: 768px) {
    .container { padding: 0 24px; }
    .section { padding: 60px 0; }
    .panel { padding: 32px 26px 30px; }
    .glass-plate { padding: 30px 32px 28px; }
    .hero { padding: 54px 0 64px; }
}

@media (min-width: 1024px) {
    .section { padding: 76px 0; }
    .section--tight { padding: 44px 0; }
    .hero { padding: 70px 0 86px; }
    .hero__spacer { height: 300px; }
    .benefit-row p { font-size: 1rem; }
    .panel__title { margin: -52px 0 26px; }
}

@media (min-width: 1280px) {
    .hero__bg { background-position: 50% 28%; }
}

/* ============================================
   BONUSY PAGE - hero cable arcs, timeline, sport banner
   ============================================ */

.hero-cable-arcs {
    position: absolute;
    left: 50%;
    bottom: -36px;
    transform: translateX(-50%);
    width: min(420px, 90%);
    height: 90px;
    z-index: 0;
    pointer-events: none;
    opacity: .85;
}
.hero-cable-arcs .conduit-core,
.hero-cable-arcs .conduit-halo { stroke: var(--gold); }
.hero-cable-arcs .conduit-spark { fill: var(--gold); animation: spark-flicker 1.8s ease-in-out infinite; }

@keyframes spark-flicker {
    0%, 100% { opacity: .4; }
    50% { opacity: 1; }
}

.timeline-wrap {
    position: relative;
    padding: 18px 0 4px;
}
.timeline-wrap .conduit-rail {
    top: 50%;
    height: 30px;
    transform: translateY(-50%);
    z-index: 0;
}
.timeline-wrap .steps { position: relative; z-index: 1; }

.sport-banner {
    position: relative;
    display: grid;
    gap: 18px;
    align-items: center;
    padding: 26px 20px;
    background: var(--metal-dark);
    border: 2px solid var(--lime);
    border-radius: var(--radius);
    box-shadow: var(--shadow-hard), 0 0 30px rgba(166, 236, 63, .3);
}
@media (min-width: 700px) {
    .sport-banner { grid-template-columns: auto 1fr; }
}
.sport-banner__value {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(2rem, 7vw, 3.2rem);
    line-height: 1.05;
    color: var(--lime);
    text-shadow: 0 0 20px rgba(166, 236, 63, .55), 0 3px 0 rgba(0, 0, 0, .55);
    white-space: nowrap;
}
.sport-banner__value small {
    display: block;
    font-size: .32em;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
    text-shadow: none;
}

/* ============================================================
   GRY PAGE - filter bar, crash curve, tag pills, rank spine
   ============================================================ */

.filter-bar {
    margin: 0 0 6px;
}

.catalog-hero__rail {
    position: relative;
    height: 36px;
    margin-top: 14px;
}

.hero-drop-cables {
    height: 44px;
    margin-top: -6px;
    opacity: .7;
}
.hero-drop-cables svg { width: 100%; height: 100%; }

.filter-row { margin-bottom: 22px; }

button.chip {
    appearance: none;
    -webkit-appearance: none;
    font: inherit;
    cursor: pointer;
}

.card-filter-item { display: contents; }
.card-filter-item.is-hidden { display: none; }

.tag-row { justify-content: flex-start; margin: 14px 0 0; }
.tag-pill { cursor: default; }

.crash-curve {
    display: block;
    width: 100%;
    max-width: 320px;
    height: auto;
    margin: 14px auto 0;
}
.crash-curve__dots {
    stroke: var(--muted);
    stroke-width: 2;
    opacity: .5;
}
.crash-curve__path {
    stroke: var(--magenta);
    stroke-width: 4;
    stroke-linecap: round;
    filter: drop-shadow(0 0 8px rgba(255, 92, 214, .7));
}
.crash-curve__node {
    fill: var(--gold);
    filter: drop-shadow(0 0 10px rgba(255, 207, 63, .85));
}

.rank-list {
    position: relative;
    padding-left: 28px;
}
.rank-list::before {
    content: "";
    position: absolute;
    left: 10px;
    top: 10px;
    bottom: 10px;
    width: 4px;
    border-radius: 3px;
    background: linear-gradient(180deg, var(--cyan), var(--magenta));
    box-shadow: 0 0 14px rgba(63, 227, 255, .5);
}
.rank-row {
    position: relative;
}
.rank-row::before {
    content: "";
    position: absolute;
    left: -18px;
    top: 28px;
    width: 14px;
    height: 3px;
    background: var(--cyan);
    opacity: .7;
}

/* ============================================================
   PLATNOSCI PAGE - pipe flow, payment cards, speed dots
   ============================================================ */

.pipe-flow {
    position: absolute;
    left: 50%;
    bottom: -40px;
    transform: translateX(-50%);
    width: min(520px, 94%);
    height: 90px;
    z-index: 0;
    pointer-events: none;
    opacity: .9;
}
.pipe-flow svg { width: 100%; height: 100%; }
.pipe-flow .conduit-core,
.pipe-flow .conduit-halo { stroke: var(--gold); }
.pipe-flow .conduit-bolt { fill: #cdd8f3; stroke: #0d1021; stroke-width: 2; }
.pipe-flow .pipe-coin {
    fill: var(--gold);
    filter: drop-shadow(0 0 10px rgba(255, 207, 63, .85));
    animation: spark-flicker 2.2s ease-in-out infinite;
}

.payment-card {
    --c: var(--cyan);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 18px 16px 20px;
    background: var(--metal);
    border: 2px solid var(--steel-500);
    border-radius: var(--radius);
    box-shadow: var(--shadow-hard);
}
.payment-card--gold { --c: var(--gold); }
.payment-card--magenta { --c: var(--magenta); }
.payment-card--lime { --c: var(--lime); }
.payment-card--orange { --c: var(--orange); }
.payment-card--cyan { --c: var(--cyan); }

.payment-card__dot {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--c);
    box-shadow: 0 0 10px var(--c);
}
.payment-card__icon {
    display: inline-flex;
    color: var(--c);
    filter: drop-shadow(0 0 6px color-mix(in srgb, var(--c) 60%, transparent));
}
.payment-card__slot {
    display: block;
    height: 34px;
    border-radius: 8px;
    background: #0d1021;
    border: 2px solid color-mix(in srgb, var(--c) 55%, var(--steel-500));
    box-shadow: inset 0 0 14px color-mix(in srgb, var(--c) 30%, transparent);
}
.payment-card__title { margin: 2px 0 0; color: #fff; font-size: 1.05rem; }
.payment-card__text { margin: 0; color: var(--muted); font-size: .92rem; }

.speed-dot {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    white-space: nowrap;
}
.speed-dot::before {
    content: "";
    width: 9px;
    height: 9px;
    border-radius: 50%;
}
.speed-dot--fast { color: var(--lime); }
.speed-dot--fast::before { background: var(--lime); box-shadow: 0 0 10px var(--lime); }
.speed-dot--medium { color: var(--gold); }
.speed-dot--medium::before { background: var(--gold); box-shadow: 0 0 10px var(--gold); }
.speed-dot--slow { color: var(--orange); }
.speed-dot--slow::before { background: var(--orange); box-shadow: 0 0 10px var(--orange); }
.speed-dot--none { color: var(--steel-300); }
.speed-dot--none::before { background: var(--steel-300); }

/* ============================================================
   FAQ PAGE - anchor chips, spine accordion, scoreboard, legal panel,
   payment conduit, CRT tag chips, quick links
   ============================================================ */

.faq-anchor-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin: 18px 0 0;
}
.faq-anchor-chip {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: .4em 1em;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: .88rem;
    color: #eafcff;
    text-decoration: none;
    background: rgba(13, 19, 40, .85);
    border: 2px solid var(--cyan);
    border-radius: var(--radius-pill);
    box-shadow: 0 0 14px rgba(63, 227, 255, .3);
}
.faq-anchor-chip:hover { background: rgba(23, 46, 80, .92); box-shadow: 0 0 22px rgba(63, 227, 255, .5); }

.faq-group { position: relative; padding-left: 26px; }
.faq-group::before {
    content: "";
    position: absolute;
    left: 8px;
    top: 6px;
    bottom: 6px;
    width: 4px;
    border-radius: 3px;
    background: linear-gradient(180deg, var(--cyan), var(--magenta));
    box-shadow: 0 0 14px rgba(63, 227, 255, .45);
}
.faq-group .faq-item { position: relative; margin-left: 0; }
.faq-group .faq-item::before {
    content: "";
    position: absolute;
    left: -24px;
    top: 24px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--cyan);
    box-shadow: 0 0 10px var(--cyan);
}

.scoreboard-card {
    position: relative;
    max-width: 480px;
    margin: 0 auto 26px;
    padding: 20px 22px;
    text-align: center;
    background: linear-gradient(180deg, rgba(14, 20, 44, .95), rgba(9, 12, 30, .97));
    border: 2px solid var(--gold);
    border-radius: var(--radius);
    box-shadow: 0 0 34px rgba(255, 92, 214, .35), inset 0 0 20px rgba(0, 0, 0, .7);
    overflow: hidden;
}
.scoreboard-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(0deg, rgba(63, 227, 255, .08) 0 2px, transparent 2px 4px);
    pointer-events: none;
}
.scoreboard-card__value {
    position: relative;
    margin: 0;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(1.8rem, 6vw, 2.6rem);
    color: var(--gold);
    text-shadow: 0 0 20px rgba(255, 207, 63, .6), 0 3px 0 rgba(0,0,0,.6);
}
.scoreboard-card__value small {
    display: block;
    font-size: .38em;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--cyan);
    text-shadow: none;
}
.scoreboard-card__text {
    position: relative;
    margin: 6px 0 0;
    color: var(--muted);
    font-size: .92rem;
}

.legal-panel {
    position: relative;
    margin-top: 26px;
    padding: 28px 18px 24px;
    background: linear-gradient(180deg, #2c1f14 0%, #1b1309 100%);
    border: 2px solid var(--gold);
    border-radius: var(--radius);
    box-shadow: var(--shadow-hard), inset 0 0 24px rgba(0, 0, 0, .5);
    overflow: clip;
}
.legal-panel::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 10px;
    background: repeating-linear-gradient(45deg, rgba(255, 207, 63, .85) 0 10px, transparent 10px 20px);
    opacity: .5;
}
.legal-panel__grid {
    display: grid;
    gap: 22px;
    align-items: start;
}
@media (min-width: 860px) {
    .legal-panel__grid { grid-template-columns: minmax(0, 1fr) 220px; }
}
.legal-panel__figure { display: flex; justify-content: center; }
.legal-panel__figure img { width: 100%; max-width: 220px; height: auto; }

.pay-wrap { position: relative; }
.pay-conduit {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: .5;
}
.pay-conduit svg { width: 100%; height: 100%; }
.pay-grid {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 18px;
    align-items: start;
}
@media (min-width: 860px) {
    .pay-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.pay-col { display: grid; gap: 12px; align-items: start; }
.pay-col__title {
    margin: 0 0 4px;
    font-size: 1.05rem;
    color: var(--cyan);
}

.game-tag-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin: 0 0 22px;
}
.game-tag {
    --c: var(--cyan);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 128px;
    padding: 8px;
    background: var(--metal);
    border: 2px solid var(--c);
    border-radius: 12px;
    box-shadow: 0 5px 0 rgba(0, 0, 0, .4);
}
.game-tag--cyan { --c: var(--cyan); }
.game-tag--magenta { --c: var(--magenta); }
.game-tag--gold { --c: var(--gold); }
.game-tag--lime { --c: var(--lime); }
.game-tag--orange { --c: var(--orange); }
.game-tag__screen {
    position: relative;
    display: block;
    height: 46px;
    border-radius: 8px;
    background: radial-gradient(ellipse at 30% 20%, rgba(130, 236, 255, .4), transparent 55%), linear-gradient(170deg, #2c7684 0%, #0f2b33 78%);
    box-shadow: inset 0 0 14px rgba(0, 0, 0, .7);
    overflow: hidden;
}
.game-tag__screen::after {
    content: "";
    position: absolute;
    top: 0;
    left: -40%;
    width: 40%;
    height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .25), transparent);
    transform: skewX(-18deg);
}
.game-tag__strip { display: block; height: 5px; border-radius: 3px; background: var(--lime); box-shadow: 0 0 8px rgba(166, 236, 63, .7); }
.game-tag__label { font-family: var(--font-display); font-weight: 700; font-size: .82rem; color: #fff; text-align: center; }

.quick-link-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px 14px;
    text-decoration: none;
    background: var(--metal);
    border: 2px solid var(--steel-500);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-hard);
    color: var(--text);
    transition: transform .14s ease, box-shadow .2s ease;
}
.quick-link-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hard), 0 0 20px rgba(63, 227, 255, .35); }
.quick-link-card__title { margin: 0; color: var(--cyan); font-size: 1.02rem; }
.quick-link-card p { margin: 0; color: var(--muted); font-size: .88rem; }

/* ============================================================
   VIP PAGE - rank pips, tier ladder, manager figure, leaderboard
   ============================================================ */

.rank-pips {
    display: flex;
    justify-content: center;
    gap: 8px;
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
}
.rank-pips li {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--steel-500);
}
.rank-pips li:nth-child(2) { background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
.rank-pips li:nth-child(3) { background: var(--lime); box-shadow: 0 0 9px var(--lime); }
.rank-pips li:nth-child(4) { background: var(--magenta); box-shadow: 0 0 10px var(--magenta); }
.rank-pips li:nth-child(5) {
    width: 14px;
    height: 14px;
    background: var(--gold);
    box-shadow: 0 0 14px var(--gold);
}

.tier-ladder { position: relative; }
.tier-ladder .cable-harness { top: -14px; height: 110px; z-index: 0; }
.tier-ladder__grid { position: relative; z-index: 1; }

.tier-card {
    --c: var(--steel-300);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: 100%;
    padding: 18px 16px;
    background: var(--metal);
    border: 2px solid var(--steel-500);
    border-radius: var(--radius);
    box-shadow: var(--shadow-hard);
}
.tier-card--rookie { --c: var(--steel-300); }
.tier-card--spark { --c: var(--cyan); }
.tier-card--turbo { --c: var(--lime); }
.tier-card--elite { --c: var(--magenta); }
.tier-card--mega {
    --c: var(--gold);
    border-color: var(--gold);
    box-shadow: var(--shadow-hard), 0 0 26px rgba(255, 207, 63, .35);
}

.tier-card__title { margin: 0; color: #fff; font-size: 1.05rem; }
.tier-card__bar {
    display: block;
    height: 6px;
    border-radius: 4px;
    background: #0e1223;
    overflow: hidden;
}
.tier-card__bar i {
    display: block;
    height: 100%;
    background: var(--c);
    box-shadow: 0 0 10px var(--c);
}
.tier-card__text { margin: 0; color: var(--muted); font-size: .92rem; }

.manager-figure-wrap {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 220px;
}
.manager-glow {
    position: absolute;
    inset: -8%;
    z-index: -1;
    background: radial-gradient(circle, rgba(255, 207, 63, .32) 0%, rgba(63, 227, 255, .16) 46%, transparent 72%);
}
.manager-figure {
    display: block;
    width: 100%;
    max-width: 320px;
    height: auto;
    filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .5));
}

.leaderboard-strip {
    list-style: none;
    display: grid;
    gap: 8px;
    margin: 16px 0 0;
    padding: 0;
}
.leaderboard-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    font-size: .9rem;
    color: #f3ecff;
    background: rgba(9, 13, 28, .94);
    border: 2px solid rgba(255, 92, 214, .55);
    border-radius: 12px;
    box-shadow: 0 0 14px rgba(255, 92, 214, .18);
}
.leaderboard-row__rank {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: .85rem;
    color: var(--ink);
    background: var(--gold);
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(255, 207, 63, .6);
}
.leaderboard-row > span:nth-child(2) { flex: 1; }
.leaderboard-row__slot {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: .76rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--magenta);
    padding: 2px 10px;
    border: 1px dashed rgba(255, 92, 214, .7);
    border-radius: 999px;
    white-space: nowrap;
}