/*
 * Betninja Casino - shared design system
 * Dark-only: deep indigo base, cyan neon, amber lanterns, crimson-maroon bands.
 */

:root {
    --c-bg: #0d0b26;
    --c-bg-deep: #08071a;
    --c-navy: #121037;
    --c-surface: #161443;
    --c-surface-2: #1e1b52;
    --c-plum: #2a1838;
    --c-plum-2: #341f45;
    --c-maroon: #5e1f37;
    --c-maroon-2: #6c2742;
    --c-maroon-deep: #3e1326;
    --c-cyan: #5ce8f2;
    --c-cyan-2: #2cc6db;
    --c-cyan-glow: rgba(92, 232, 242, 0.5);
    --c-cyan-soft: rgba(92, 232, 242, 0.16);
    --c-amber: #ffb84d;
    --c-amber-glow: rgba(255, 170, 60, 0.55);
    --c-coral: #ff7272;
    --c-lilac: #b3a6ff;
    --c-text: #f5f6ff;
    --c-muted: #c3c7e2;
    --c-muted-2: #a4a9cd;
    --c-on-maroon: #f0dbe4;
    --c-line: rgba(150, 160, 220, 0.24);
    --c-ink: #061722;

    --f-body: "Exo 2", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --f-display: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", Impact, sans-serif;
    --f-brand: "Kaushan Script", "Brush Script MT", cursive;

    --radius-s: 8px;
    --radius: 14px;
    --radius-l: 20px;
    --container: 1200px;
    --gutter: clamp(0.85rem, 4vw, 2rem);
    --section-y: clamp(3rem, 7vw, 5.5rem);

    --header-bottom: 64px;
    --header-h: 64px;

    --glow-cyan: 0 0 0 1px rgba(92, 232, 242, 0.22) inset, 0 0 26px rgba(92, 232, 242, 0.3);
    --shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
    --pattern-shuriken: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20width=%27170%27%20height=%27170%27%20viewBox=%270%200%20170%20170%27%3E%3Cg%20fill=%27none%27%20stroke=%27%23d06a9c%27%20stroke-opacity=%27.26%27%20stroke-width=%272.4%27%3E%3Cpath%20d=%27M40%204%20Q44%2030%2052%2034%20L76%2040%20Q50%2044%2046%2052%20L40%2076%20Q36%2050%2028%2046%20L4%2040%20Q30%2036%2034%2028%20Z%27/%3E%3Ccircle%20cx=%2740%27%20cy=%2740%27%20r=%276%27/%3E%3Cg%20transform=%27translate%2886%2084%29%20rotate%2822%2040%2040%29%27%3E%3Cpath%20d=%27M40%204%20Q44%2030%2052%2034%20L76%2040%20Q50%2044%2046%2052%20L40%2076%20Q36%2050%2028%2046%20L4%2040%20Q30%2036%2034%2028%20Z%27/%3E%3Ccircle%20cx=%2740%27%20cy=%2740%27%20r=%276%27/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* ============================================
   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 {
    -webkit-text-size-adjust: 100%;
    scroll-padding-top: calc(var(--header-h) + 12px);
}

@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}

body {
    margin: 0;
    min-width: 320px;
    font-family: var(--f-body);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--c-text);
    background:
        radial-gradient(1200px 600px at 50% -10%, #1b1850 0%, transparent 70%),
        var(--c-bg);
    overflow-x: hidden;
}

body.menu-open { overflow: hidden; }

h1, h2, h3, h4 {
    margin: 0 0 0.6em;
    line-height: 1.15;
    color: var(--c-text);
}

h3 { font-size: 1.2rem; font-weight: 700; }

p { margin: 0 0 1em; }

a { color: var(--c-cyan); }
a:hover { color: #9ff3f9; }

:focus-visible {
    outline: 3px solid var(--c-amber);
    outline-offset: 3px;
    border-radius: 4px;
}

img { display: block; }

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

strong { color: #fff; }

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

.skip-link {
    position: absolute;
    left: 1rem;
    top: -100px;
    z-index: 200;
    padding: 0.75rem 1rem;
    background: var(--c-cyan);
    color: var(--c-ink);
    font-weight: 700;
    border-radius: var(--radius-s);
}
.skip-link:focus { top: 0.75rem; }

.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

/* ============================================
   TYPOGRAPHY UTILITIES
   ============================================ */
.hero-title,
.section-title {
    font-family: var(--f-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: #fff;
}

.hero-title {
    font-size: clamp(2.1rem, 6.5vw, 3.6rem);
    line-height: 1.02;
    margin-bottom: 0.5em;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.5);
}

.section-title {
    font-size: clamp(1.85rem, 4.4vw, 2.8rem);
    line-height: 1.05;
    margin-bottom: 0.55em;
}

.section-head {
    text-align: center;
    max-width: 760px;
    margin: 0 auto clamp(1.75rem, 4vw, 2.75rem);
}

.section-intro,
.lead {
    color: var(--c-muted);
    font-size: 1.05rem;
    max-width: 68ch;
}

.section-head .section-intro { margin-inline: auto; }

.eyebrow {
    display: inline-block;
    margin-bottom: 0.6rem;
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c-cyan);
}

.amber { color: var(--c-amber); font-weight: 700; }

.text-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 600;
    color: var(--c-cyan);
    text-decoration: underline;
    text-underline-offset: 0.2em;
    text-decoration-thickness: 1px;
}
.text-link:hover { color: #a6f5fa; }

.muted { color: var(--c-muted); }

.small-print {
    font-size: 0.875rem;
    color: var(--c-muted-2);
}

/* ============================================
   LAYOUT: SECTIONS, BANDS, SCENES
   ============================================ */
.section {
    position: relative;
    padding-block: var(--section-y);
}

.section--tight { padding-block: clamp(2.25rem, 5vw, 3.5rem); }

.band--navy { background: var(--c-navy); }
.band--deep { background: var(--c-bg-deep); }
.band--plum { background: linear-gradient(180deg, var(--c-plum) 0%, #20142f 100%); }

.band--maroon {
    background:
        var(--pattern-shuriken),
        linear-gradient(160deg, var(--c-maroon-deep) 0%, var(--c-maroon) 55%, var(--c-maroon-2) 100%);
    background-size: 170px 170px, cover;
    color: var(--c-on-maroon);
}
.band--maroon p { color: var(--c-on-maroon); }

.has-seams { overflow: visible; }

/* Section-wide illustrated background (page sets background-image inline) */
.scene {
    position: relative;
    isolation: isolate;
    overflow: clip;
}

.scene__bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    background-color: var(--c-bg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.scene__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(13, 11, 38, 0) 55%, rgba(13, 11, 38, 0.85) 88%, var(--c-bg) 100%);
}

.scene__bg--fade-top::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 22%;
    background: linear-gradient(180deg, var(--c-bg) 0%, rgba(13, 11, 38, 0) 100%);
    z-index: 1;
}

.scene__shade {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}
.scene__shade--left { background: linear-gradient(90deg, rgba(8, 7, 26, 0.88) 0%, rgba(8, 7, 26, 0.55) 45%, rgba(8, 7, 26, 0) 75%); }
.scene__shade--right { background: linear-gradient(270deg, rgba(8, 7, 26, 0.88) 0%, rgba(8, 7, 26, 0.55) 45%, rgba(8, 7, 26, 0) 75%); }
.scene__shade--center { background: radial-gradient(ellipse 60% 55% at 50% 50%, rgba(8, 7, 26, 0.78) 0%, rgba(8, 7, 26, 0.35) 60%, rgba(8, 7, 26, 0) 100%); }

/* ============================================
   SHURIKEN & DIVIDER
   ============================================ */
.shuriken {
    display: inline-block;
    width: 1em;
    height: 1em;
    flex: none;
    color: var(--c-cyan);
}
.shuriken__core { fill: var(--c-bg); }

.divider {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    height: 30px;
    color: var(--c-cyan);
    pointer-events: none;
}

.divider__line {
    flex: 1;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, rgba(92, 232, 242, 0.15) 0%, var(--c-cyan) 30%, var(--c-cyan) 100%);
    box-shadow: 0 0 6px var(--c-cyan-glow), 0 0 16px rgba(92, 232, 242, 0.35);
}
.divider__line:last-child {
    background: linear-gradient(270deg, rgba(92, 232, 242, 0.15) 0%, var(--c-cyan) 30%, var(--c-cyan) 100%);
}

.divider__star {
    width: 30px;
    height: 30px;
    fill: var(--c-cyan);
    filter: drop-shadow(0 0 6px var(--c-cyan)) drop-shadow(0 0 14px rgba(92, 232, 242, 0.6));
}
.divider__star .divider__core { fill: #e9feff; }

.divider--seam {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    transform: translateY(-50%);
}
.divider--seam-bottom {
    top: auto;
    bottom: 0;
    transform: translateY(50%);
}

/* ============================================
   BUTTONS
   ============================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    min-height: 48px;
    padding: 0.6rem 1.35rem;
    border-radius: 10px;
    border: 1.5px solid transparent;
    font-family: var(--f-body);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.btn--primary {
    color: var(--c-ink);
    background: linear-gradient(180deg, #8af2f8 0%, var(--c-cyan) 45%, var(--c-cyan-2) 100%);
    border-color: #b5f8fc;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2) inset, 0 0 18px rgba(92, 232, 242, 0.45);
}
.btn--primary:hover {
    color: var(--c-ink);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35) inset, 0 0 28px rgba(92, 232, 242, 0.7);
}

.btn--outline {
    color: #fff;
    background: rgba(13, 11, 38, 0.6);
    border-color: #cfd3ee;
    box-shadow: 0 0 10px rgba(180, 190, 255, 0.18);
}
.btn--outline:hover {
    color: #fff;
    border-color: var(--c-cyan);
    box-shadow: 0 0 16px rgba(92, 232, 242, 0.4);
}

.btn--ghost {
    color: var(--c-cyan);
    background: transparent;
    text-decoration: underline;
    text-underline-offset: 0.2em;
    padding-inline: 0.5rem;
}

.btn--sm {
    min-height: 44px;
    padding: 0.5rem 1.05rem;
    font-size: 0.95rem;
}

.btn--block { width: 100%; }

.btn__icon {
    width: 1.3em;
    height: 1.3em;
    color: #0b3b4a;
}
.btn__icon .shuriken__core { fill: #c9fbff; }

.btn-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
}

/* ============================================
   HEADER
   ============================================ */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
}

.site-header::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(18, 16, 48, 0.94);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(92, 232, 242, 0.16);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
}

.header-inner {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 64px;
    padding-inline: 0.75rem;
}

.site-brand {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    text-decoration: none;
    color: #fff;
    flex: none;
}

.site-brand__text {
    font-family: var(--f-brand);
    font-size: 1.65rem;
    line-height: 1;
    color: #fff;
    letter-spacing: 0.01em;
    text-shadow: 0 0 14px rgba(92, 232, 242, 0.25), 0 2px 0 rgba(0, 0, 0, 0.4);
}

.site-brand:hover .site-brand__text { color: #e6fdff; }

.header-actions {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-left: auto;
}

.header-actions .btn {
    min-height: 44px;
    padding: 0.45rem 0.8rem;
    font-size: 0.9rem;
}

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

.menu-toggle {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    flex: none;
    padding: 0;
    border: 1.5px solid rgba(92, 232, 242, 0.5);
    border-radius: 10px;
    background: rgba(13, 11, 38, 0.7);
    cursor: pointer;
}

.menu-toggle__bar {
    display: block;
    width: 20px;
    height: 2px;
    border-radius: 2px;
    background: var(--c-cyan);
    transition: transform 0.25s ease, opacity 0.2s ease;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile drawer */
.site-nav {
    display: none;
    position: fixed;
    top: var(--header-bottom);
    left: 0;
    right: 0;
    bottom: 0;
    height: auto;
    z-index: 99;
    flex-direction: column;
    gap: 1.5rem;
    padding: 1rem var(--gutter) 2rem;
    background: var(--c-bg);
    border-top: 1px solid rgba(92, 232, 242, 0.25);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.site-nav.is-open { display: flex; }

.site-nav__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-nav__link {
    display: flex;
    align-items: center;
    min-height: 52px;
    padding: 0.5rem 0.25rem;
    border-bottom: 1px solid var(--c-line);
    color: #fff;
    font-size: 1.15rem;
    font-weight: 600;
    text-decoration: none;
}

.site-nav__link:hover { color: var(--c-cyan); }

.site-nav__link[aria-current="page"] {
    color: var(--c-cyan);
    text-shadow: 0 0 12px rgba(92, 232, 242, 0.5);
}

.site-nav__actions {
    display: grid;
    gap: 0.75rem;
}

.site-nav__actions .btn { min-height: 52px; width: 100%; }

.site-nav__note {
    margin: 0.25rem 0 0;
    font-size: 0.875rem;
    color: var(--c-muted-2);
    text-align: center;
}

@media (min-width: 400px) {
    .header-inner { padding-inline: var(--gutter); gap: 0.75rem; }
    .site-brand__text { font-size: 1.9rem; }
}

@media (min-width: 768px) {
    .header-actions .header-login { display: inline-flex; }
    .header-actions .btn { padding: 0.5rem 1.1rem; font-size: 1rem; }
}

@media (min-width: 1024px) {
    .header-inner { min-height: 80px; gap: 1.5rem; }
    .site-brand__text { font-size: 2.35rem; }

    .menu-toggle { display: none; }

    .site-nav {
        display: flex;
        position: static;
        flex-direction: row;
        flex: 1;
        justify-content: center;
        padding: 0;
        background: none;
        border: 0;
        overflow: visible;
    }

    .site-nav__list {
        display: flex;
        gap: clamp(1rem, 2.4vw, 2.25rem);
    }

    .site-nav__link {
        position: relative;
        min-height: 44px;
        border: 0;
        font-size: 1.1rem;
    }

    .site-nav__link[aria-current="page"]::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 4px;
        height: 2px;
        background: var(--c-cyan);
        box-shadow: 0 0 8px var(--c-cyan);
    }

    .site-nav__actions { display: none; }

    .header-actions { margin-left: 0; }
    .header-actions .btn { min-height: 48px; padding: 0.55rem 1.3rem; font-size: 1.05rem; }
}

/* ============================================
   NEON PANEL (offer / content panel)
   ============================================ */
.neon-panel {
    position: relative;
    background: rgba(16, 17, 50, 0.9);
    border: 1px solid rgba(92, 232, 242, 0.6);
    border-radius: var(--radius-l);
    box-shadow: 0 0 0 1px rgba(92, 232, 242, 0.14) inset, 0 0 34px rgba(92, 232, 242, 0.28), var(--shadow);
    padding: 2.25rem 1.25rem 1.5rem;
}

.neon-panel__body { position: relative; z-index: 1; }

.neon-panel__star {
    position: absolute;
    z-index: 2;
    top: -26px;
    left: -10px;
    width: 64px;
    height: 64px;
    pointer-events: none;
}

.neon-panel__star::before {
    content: "";
    position: absolute;
    inset: 15%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(92, 232, 242, 0.55) 0%, rgba(92, 232, 242, 0) 70%);
}

.neon-panel__star svg {
    position: relative;
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 0 6px rgba(92, 232, 242, 0.85)) drop-shadow(0 0 18px rgba(92, 232, 242, 0.45));
}

.np-star__body { fill: rgba(14, 26, 62, 0.92); stroke: var(--c-cyan); stroke-width: 4; stroke-linejoin: round; }
.np-star__inner { fill: none; stroke: rgba(92, 232, 242, 0.55); stroke-width: 1.6; }
.np-star__dot { fill: var(--c-cyan); }
.np-star__core { fill: var(--c-cyan); }
.np-star__core-hi { fill: #e8feff; }

.neon-panel--top-right .neon-panel__star { left: auto; right: -10px; }

.neon-panel .panel-title {
    font-family: var(--f-display);
    font-weight: 700;
    text-transform: uppercase;
    font-size: clamp(1.7rem, 4vw, 2.5rem);
    line-height: 1.05;
    margin-bottom: 0.5rem;
}

.neon-panel .terms-line {
    margin: 1rem 0 0;
    padding-top: 0.85rem;
    border-top: 1px solid var(--c-line);
    font-size: 0.9rem;
    color: var(--c-muted);
}

@media (min-width: 768px) {
    .neon-panel { padding: 2.5rem 2rem 2rem; }
    .neon-panel__star { width: 96px; height: 96px; top: -40px; left: -24px; }
    .neon-panel--top-right .neon-panel__star { right: -24px; }
}

@media (min-width: 1024px) {
    .neon-panel--left { padding-left: clamp(4.5rem, 7vw, 6rem); }
    .neon-panel--left .neon-panel__star {
        width: clamp(170px, 15vw, 230px);
        height: clamp(170px, 15vw, 230px);
        top: 42%;
        left: 0;
        transform: translate(-58%, -50%);
    }
    .neon-panel--top-right .neon-panel__star,
    .neon-panel--top-left .neon-panel__star {
        width: 128px;
        height: 128px;
        top: -56px;
    }
    .neon-panel--top-right .neon-panel__star { right: -44px; }
    .neon-panel--top-left .neon-panel__star { left: -44px; }
}

/* ============================================
   KIOSK CARDS (pagoda stall)
   ============================================ */
.kiosk-row {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(250px, 80%);
    gap: 1.25rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 0.75rem 0.5rem 1.25rem;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    scrollbar-width: thin;
    scrollbar-color: var(--c-cyan-2) transparent;
}

.kiosk-row > * { scroll-snap-align: center; }

@media (min-width: 768px) {
    .kiosk-row { grid-auto-columns: minmax(260px, 45%); }
}

@media (min-width: 1024px) {
    .kiosk-row {
        grid-auto-columns: minmax(0, 1fr);
        overflow: visible;
        margin-inline: 0;
        padding-inline: 0.5rem;
        gap: clamp(1.25rem, 3vw, 2.75rem);
    }
}

.kiosk {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.kiosk__roof {
    position: relative;
    z-index: 2;
    margin-inline: -5%;
    margin-bottom: -6px;
}

.pagoda-roof {
    display: block;
    width: 100%;
    height: 54px;
}

.pagoda-roof__body { fill: #42507a; }
.pagoda-roof__tiles { fill: none; stroke: #2c3758; stroke-width: 9; stroke-dasharray: 3 8; }
.pagoda-roof__ridge { fill: none; stroke: #6a7aa6; stroke-width: 5; stroke-linecap: round; }
.pagoda-roof__eave {
    fill: none;
    stroke: var(--c-cyan);
    stroke-width: 3;
    vector-effect: non-scaling-stroke;
    filter: drop-shadow(0 0 4px var(--c-cyan));
}

.kiosk__stall {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 0.9rem;
    background: linear-gradient(180deg, #2b1f45 0%, #22173a 100%);
    border: 2px solid var(--c-cyan);
    border-radius: 6px;
    box-shadow: 0 0 14px rgba(92, 232, 242, 0.45), 0 0 34px rgba(92, 232, 242, 0.18);
}

.kiosk__lantern {
    position: absolute;
    top: 14px;
    width: 16px;
    height: 26px;
    border-radius: 8px;
    background: linear-gradient(180deg, #ffe0a0 0%, var(--c-amber) 45%, #f0802a 100%);
    box-shadow: 0 0 12px 3px var(--c-amber-glow), 0 0 30px 8px rgba(255, 150, 40, 0.25);
}
.kiosk__lantern::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -7px;
    width: 2px;
    height: 7px;
    background: #6b4a2a;
    transform: translateX(-50%);
}
.kiosk__lantern--l { left: -9px; }
.kiosk__lantern--r { right: -9px; }

.kiosk__frame {
    border: 4px solid #3b2a4c;
    border-radius: 4px;
    background: #120d22;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(92, 232, 242, 0.25);
    overflow: hidden;
}

.kiosk__frame img {
    width: 100%;
    aspect-ratio: 5 / 3;
    object-fit: cover;
}

.kiosk__info {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 0.9rem;
    background: #2a1838;
    border-top: 1px solid rgba(92, 232, 242, 0.35);
    border-radius: 4px;
}

.kiosk__title {
    margin: 0 0 0.15rem;
    font-size: 1.15rem;
    font-weight: 700;
}

.kiosk__studio {
    margin: 0 0 0.45rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--c-cyan);
}

.kiosk__text {
    flex: 1;
    margin: 0 0 0.75rem;
    font-size: 0.95rem;
    color: var(--c-muted);
}

.kiosk__meta {
    margin: 0 0 0.75rem;
    font-size: 0.875rem;
    color: var(--c-amber);
    font-weight: 600;
}

.kiosk__btn { align-self: flex-start; }

.kiosk__skirt {
    display: grid;
    place-items: center;
    height: 70px;
    margin-inline: 5%;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 30%),
        repeating-linear-gradient(90deg, #3d2b2e 0 22px, #2a1c20 22px 25px);
    border: 2px solid var(--c-cyan);
    border-top: 0;
    border-radius: 0 0 6px 6px;
    box-shadow: 0 0 12px rgba(92, 232, 242, 0.35);
}

.kiosk__emblem {
    width: 44px;
    height: 44px;
    color: var(--c-cyan);
    filter: drop-shadow(0 0 6px var(--c-cyan));
}

/* ============================================
   TILE GRID (payment methods / studios)
   ============================================ */
.tile-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
}

.tile {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 54px;
    padding: 0.5rem 0.6rem;
    background: #fff;
    color: #141533;
    border-radius: var(--radius-s);
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1.2;
    text-align: center;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

@media (min-width: 560px) {
    .tile-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 768px) {
    .tile-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ============================================
   MASCOT GUIDE
   ============================================ */
.mascot {
    position: relative;
    display: inline-block;
    flex: none;
    width: 140px;
    max-width: 100%;
    animation: mascot-bob 4.5s ease-in-out infinite;
    animation-play-state: paused;
}

.mascot::before {
    content: "";
    position: absolute;
    inset: 12% 10%;
    z-index: -1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(92, 232, 242, 0.28) 0%, rgba(92, 232, 242, 0) 70%);
}

.mascot__img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

.mascot--flip .mascot__img { transform: scaleX(-1); }
.mascot--sm { width: 96px; }
.mascot--lg { width: 180px; }

.mascot.is-animating { animation-play-state: running; }
.doc-hidden .mascot { animation-play-state: paused; }

@keyframes mascot-bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-7px); }
}

/* ============================================
   BREADCRUMBS
   ============================================ */
.breadcrumbs { font-size: 0.9rem; margin-bottom: 1rem; }

.breadcrumbs__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.5rem;
    color: var(--c-muted);
}

.breadcrumbs__list li { display: inline-flex; align-items: center; gap: 0.5rem; }
.breadcrumbs__list li + li::before { content: "›"; color: var(--c-cyan); }
.breadcrumbs__list a { color: #e6e9ff; text-decoration: underline; text-underline-offset: 0.2em; }
.breadcrumbs__list [aria-current="page"] { color: var(--c-cyan); font-weight: 600; }

/* ============================================
   CHIPS (category / topic jump links)
   ============================================ */
.chip-row {
    list-style: none;
    margin: 0;
    padding: 0.25rem 0 0.5rem;
    display: flex;
    gap: 0.6rem;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--c-cyan-2) transparent;
}

.chip-row > li { flex: none; }

@media (min-width: 768px) {
    .chip-row { flex-wrap: wrap; overflow: visible; }
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 44px;
    padding: 0.4rem 1rem;
    border: 1.5px solid rgba(92, 232, 242, 0.7);
    border-radius: 999px;
    background: rgba(18, 16, 55, 0.9);
    color: #fff;
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    white-space: nowrap;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.chip:hover,
.chip.is-active {
    color: #fff;
    border-color: var(--c-cyan);
    box-shadow: 0 0 14px rgba(92, 232, 242, 0.45);
}

.chip .shuriken,
.chip .line-icon { width: 18px; height: 18px; color: var(--c-cyan); }

/* ============================================
   LINE ICONS
   ============================================ */
.line-icon {
    width: 28px;
    height: 28px;
    flex: none;
    color: var(--c-cyan);
}

/* ============================================
   GUIDE LIST (check items / tips)
   ============================================ */
.guide-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.75rem;
}

.guide-item {
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
    padding: 1rem 1.1rem;
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-left: 3px solid var(--c-cyan);
    border-radius: 0 var(--radius) var(--radius) 0;
}

.guide-item__bullet {
    width: 22px;
    height: 22px;
    margin-top: 0.15rem;
    filter: drop-shadow(0 0 4px rgba(92, 232, 242, 0.6));
}

.guide-item__body { min-width: 0; }

.guide-item__title {
    margin: 0 0 0.25rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: #fff;
}

.guide-item__text {
    margin: 0 0 0.35rem;
    color: var(--c-muted);
}

.band--maroon .guide-item { background: rgba(20, 12, 34, 0.88); }

/* ============================================
   FAQ ACCORDION
   ============================================ */
.faq-list {
    display: grid;
    gap: 0.75rem;
    align-items: start;
    max-width: 900px;
}

.faq-item {
    align-self: start;
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-left: 3px solid rgba(92, 232, 242, 0.25);
    border-radius: var(--radius);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.faq-item[open] {
    border-left-color: var(--c-cyan);
    box-shadow: -6px 0 18px -10px var(--c-cyan), 0 0 22px rgba(92, 232, 242, 0.12);
}

.faq-item__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 56px;
    padding: 0.9rem 1.1rem;
    cursor: pointer;
    list-style: none;
    border-radius: var(--radius);
}

.faq-item__summary::-webkit-details-marker { display: none; }
.faq-item__summary::marker { content: ""; }

.faq-item__q {
    margin: 0;
    font-family: var(--f-body);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.35;
    text-transform: none;
}

.faq-item__icon {
    width: 24px;
    height: 24px;
    transition: transform 0.3s ease;
}

.faq-item[open] .faq-item__icon {
    transform: rotate(135deg);
    filter: drop-shadow(0 0 5px var(--c-cyan));
}

.faq-item__a {
    padding: 0 1.1rem 1.1rem;
    color: var(--c-muted);
}

.faq-item__a p:last-child { margin-bottom: 0; }

/* ============================================
   TABLES
   ============================================ */
.table-wrap {
    border: 1px solid rgba(92, 232, 242, 0.45);
    border-radius: var(--radius);
    box-shadow: 0 0 22px rgba(92, 232, 242, 0.12);
    background: var(--c-plum);
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.98rem;
}

.data-table caption {
    padding: 0.9rem 1rem 0;
    text-align: left;
    color: var(--c-muted);
    font-size: 0.9rem;
}

.data-table th,
.data-table td {
    padding: 0.85rem 1rem;
    text-align: left;
    vertical-align: top;
}

.data-table thead th {
    color: var(--c-cyan);
    font-weight: 700;
    border-bottom: 2px solid var(--c-cyan);
    white-space: nowrap;
}

.data-table tbody tr:nth-child(odd) { background: #1b1844; }
.data-table tbody tr:nth-child(even) { background: #221e52; }
.data-table tbody th { color: #fff; font-weight: 600; }
.data-table .num { color: var(--c-amber); font-weight: 700; }

@media (max-width: 767px) {
    .data-table--stack thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
    }
    .data-table--stack tr {
        display: block;
        padding: 0.6rem 0;
        border-bottom: 1px solid var(--c-line);
    }
    .data-table--stack th,
    .data-table--stack td {
        display: block;
        padding: 0.3rem 1rem;
    }
    .data-table--stack td[data-label]::before {
        content: attr(data-label);
        display: block;
        font-size: 0.875rem;
        font-weight: 600;
        color: var(--c-cyan);
    }
}

/* ============================================
   CALLOUT
   ============================================ */
.callout {
    display: flex;
    gap: 0.9rem;
    align-items: flex-start;
    padding: 1.1rem 1.2rem;
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-left: 3px solid var(--c-cyan);
    border-radius: 0 var(--radius) var(--radius) 0;
    box-shadow: -6px 0 18px -12px var(--c-cyan);
}

.callout--amber { border-left-color: var(--c-amber); box-shadow: -6px 0 18px -12px var(--c-amber); }
.callout p:last-child { margin-bottom: 0; }

/* ============================================
   SLASH SPLIT BAND
   ============================================ */
.slash-band {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}

.slash-band__half {
    position: relative;
    padding: clamp(2.5rem, 6vw, 4rem) var(--gutter);
}

.slash-band__half--navy { background: #100e2e; }

.slash-band__half--maroon {
    background:
        var(--pattern-shuriken),
        linear-gradient(160deg, var(--c-maroon-deep) 0%, var(--c-maroon) 60%, var(--c-maroon-2) 100%);
    background-size: 170px 170px, cover;
}

.slash {
    position: relative;
    z-index: 3;
    height: 0;
    pointer-events: none;
}

.slash::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -1px;
    height: 2px;
    background: var(--c-cyan);
    box-shadow: 0 0 8px var(--c-cyan), 0 0 18px rgba(92, 232, 242, 0.45);
}

.slash__line { display: none; }

.slash__star {
    position: absolute;
    left: 50%;
    top: 0;
    width: 48px;
    height: 48px;
    transform: translate(-50%, -50%);
    filter: drop-shadow(0 0 8px var(--c-cyan));
}

.slash__star .shuriken { width: 100%; height: 100%; }

@media (min-width: 1024px) {
    .slash-band { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

    .slash-band__half--navy { padding-left: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter))); padding-right: 3rem; }

    .slash-band__half--maroon {
        margin-left: -8vw;
        padding-left: calc(8vw + 2.5rem);
        padding-right: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter)));
        clip-path: polygon(8vw 0, 100% 0, 100% 100%, 0 100%);
    }

    .slash {
        position: absolute;
        top: 0;
        bottom: 0;
        left: calc(50% - 8vw);
        width: 8vw;
        height: auto;
    }

    .slash::before { display: none; }

    .slash__line {
        display: block;
        width: 100%;
        height: 100%;
        overflow: visible;
    }

    .slash__line line {
        stroke: var(--c-cyan);
        stroke-width: 3;
        vector-effect: non-scaling-stroke;
        filter: drop-shadow(0 0 5px var(--c-cyan));
    }

    .slash__star { top: 50%; width: 64px; height: 64px; }
}

/* ============================================
   TRUST STRIP
   ============================================ */
.trust-strip {
    position: relative;
    padding-block: 2.5rem;
    background: linear-gradient(180deg, var(--c-maroon) 0%, #571c33 100%);
    color: var(--c-on-maroon);
}

.trust-strip__title {
    margin-bottom: 1.25rem;
    font-family: var(--f-display);
    font-size: 1.35rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-align: center;
}

.trust-strip__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem 1rem;
}

.trust-item {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
}

.trust-item__icon { width: 34px; height: 34px; filter: drop-shadow(0 0 4px rgba(92, 232, 242, 0.5)); }

.trust-item__label {
    margin: 0;
    font-weight: 700;
    color: #fff;
    line-height: 1.3;
}

.trust-item__sub {
    margin: 0.15rem 0 0;
    font-size: 0.875rem;
    color: var(--c-on-maroon);
}

.trust-strip__note {
    margin: 1.5rem auto 0;
    max-width: 70ch;
    text-align: center;
    color: var(--c-on-maroon);
}

.trust-strip__links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 1.5rem;
    margin: 0.75rem 0 0;
}

.trust-strip .text-link { color: #8ff1f8; min-height: 44px; }

@media (min-width: 1024px) {
    .trust-strip__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .trust-item { justify-content: center; }
}

/* ============================================
   CTA BAND
   ============================================ */
.cta-band {
    position: relative;
    padding-block: clamp(3rem, 7vw, 5rem);
    background:
        radial-gradient(700px 320px at 30% 50%, rgba(92, 232, 242, 0.12) 0%, transparent 70%),
        linear-gradient(180deg, #14123d 0%, var(--c-bg) 100%);
}

.cta-band__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    text-align: center;
}

.cta-band__mascot { width: 120px; }

.cta-band__copy { max-width: 720px; }

.cta-band__text { color: var(--c-muted); font-size: 1.05rem; }

.cta-band__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem 1rem;
    margin-top: 1.25rem;
}

.cta-band__note {
    margin: 1rem 0 0;
    font-size: 0.875rem;
    color: var(--c-muted-2);
}

@media (min-width: 768px) {
    .cta-band__inner {
        flex-direction: row;
        justify-content: center;
        text-align: left;
        gap: 2.5rem;
    }
    .cta-band__mascot { width: 160px; }
    .cta-band__actions { justify-content: flex-start; }
}

/* ============================================
   FOOTER
   ============================================ */
.site-footer {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: linear-gradient(180deg, #17143c 0%, #0e0c28 100%);
    color: var(--c-muted);
    padding-bottom: 2rem;
}

.site-footer__pattern {
    position: absolute;
    inset: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.site-footer > .divider { margin-top: 0; }

.footer-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem 1.5rem;
    padding-top: 2.5rem;
    padding-bottom: 2rem;
}

.footer-col__title {
    margin: 0 0 0.6rem;
    font-size: 1.15rem;
    font-weight: 700;
}

.footer-col__title a {
    color: #fff;
    text-decoration: none;
}
.footer-col__title a:hover { color: var(--c-cyan); }

.footer-col__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-col__list a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--c-muted);
    text-decoration: none;
    font-size: 0.95rem;
}
.footer-col__list a:hover { color: var(--c-cyan); text-decoration: underline; }

.footer-legal {
    display: grid;
    gap: 0.9rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--c-line);
}

.site-brand--footer .site-brand__text { font-size: 1.9rem; }

.footer-badges {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.75rem;
}

.footer-badges li {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--c-text);
}

.footer-badges__label { font-weight: 600; }

.footer-badges a { color: var(--c-cyan); text-decoration: underline; text-underline-offset: 0.2em; }

.badge-18 {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 2px solid var(--c-cyan);
    border-radius: 50%;
    color: #fff;
    font-weight: 700;
    font-size: 0.9rem;
    box-shadow: 0 0 10px rgba(92, 232, 242, 0.4);
}

.footer-licence {
    margin: 0;
    font-size: 0.9rem;
    max-width: 90ch;
    color: var(--c-muted);
}

.footer-copy {
    margin: 0.5rem 0 0;
    font-size: 0.9rem;
    color: var(--c-muted-2);
}

.footer-copy a { color: var(--c-cyan); }

@media (min-width: 768px) {
    .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
    .footer-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        padding-top: 3rem;
    }
}

/* ============================================
   HOME: HERO
   ============================================ */
.hero .scene__bg { background-position: 14% center; }

.hero__inner {
    position: relative;
    padding-top: clamp(230px, 64vw, 440px);
    padding-bottom: clamp(2.5rem, 6vw, 4rem);
}

.hero__panel { max-width: 640px; }

.hero__offer {
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.35;
    margin-bottom: 0.85rem;
}

.offer-steps {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    display: grid;
    gap: 0.45rem;
}

.offer-steps li {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.5rem 0.75rem;
    background: #17184a;
    border: 1px solid var(--c-line);
    border-radius: 10px;
}

.offer-steps__num {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1.5px solid var(--c-cyan);
    color: var(--c-cyan);
    font-weight: 700;
    font-size: 0.9rem;
    box-shadow: 0 0 8px rgba(92, 232, 242, 0.4);
}

.hero__lead { color: var(--c-muted); }

.hero__actions .text-link,
.btn-row .text-link { min-height: 44px; }

@media (min-width: 768px) {
    .hero__inner { padding-top: clamp(300px, 46vw, 460px); }
    .hero__panel { margin-left: auto; }
}

@media (min-width: 1024px) {
    .hero .scene__bg { background-position: center 30%; }
    .hero__inner {
        display: grid;
        grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
        align-items: start;
        min-height: clamp(620px, 50vw, 780px);
        padding-top: clamp(3rem, 5vw, 4.5rem);
        padding-bottom: 8rem;
    }
    .hero__panel {
        grid-column: 2;
        max-width: none;
        margin-left: 0;
    }
}

/* ============================================
   HOME: SLOTS ARCHWAY
   ============================================ */
.slots .scene__bg { background-position: center top; }

.slots__stage { max-width: 1060px; }

.slots__more {
    margin: 1.75rem 0 0;
    text-align: center;
}

/* ============================================
   HOME: CRASH & LIVE SPLIT
   ============================================ */
.crash-live .section-title { margin-bottom: 0.4em; }

.split-title {
    font-family: var(--f-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-size: 1.5rem;
    color: var(--c-cyan);
}

.split-title--lg {
    font-size: clamp(1.85rem, 4.4vw, 2.8rem);
    color: #fff;
}

.slash-band__half--navy p { color: var(--c-muted); }
.slash-band__half--maroon p { color: var(--c-on-maroon); }
.slash-band__half--maroon .text-link { color: #8ff1f8; }

.crash-viz {
    position: relative;
    max-width: 520px;
    aspect-ratio: 4 / 3;
    margin-top: 1.25rem;
}

.crash-viz__chart {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.crash-viz__curve { filter: drop-shadow(0 0 5px rgba(92, 232, 242, 0.7)); }

.crash-viz__rocket {
    position: absolute;
    left: -2%;
    top: 12%;
    width: 44%;
    height: auto;
    object-fit: contain;
}

.crash-viz__card {
    position: absolute;
    left: 48%;
    top: 16%;
    width: 32%;
    display: grid;
    gap: 0.5rem;
    padding: 0.6rem;
    background: #1a1946;
    border: 1px solid rgba(160, 170, 230, 0.4);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

.crash-viz__bar {
    height: 6px;
    width: 70%;
    border-radius: 4px;
    background: #4a4f7e;
}

.crash-viz__pill {
    height: 18px;
    border-radius: 5px;
    background: var(--c-coral);
    box-shadow: 0 0 10px rgba(255, 114, 114, 0.5);
}

.live-viz {
    position: relative;
    max-width: 560px;
    margin-top: 1.5rem;
}

.live-viz__img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

.chat-mock {
    position: absolute;
    right: 0;
    top: 6%;
    width: 42%;
    display: grid;
    gap: 0.45rem;
    padding: 0.55rem;
    background: #141338;
    border: 1.5px solid var(--c-cyan);
    border-radius: 10px;
    box-shadow: 0 0 18px rgba(92, 232, 242, 0.35);
}

.chat-mock__head,
.chat-mock__row { display: flex; align-items: center; gap: 0.4rem; }

.chat-mock__dot { width: 9px; height: 9px; border-radius: 50%; background: #3ee08a; flex: none; }

.chat-mock__avatar { width: 14px; height: 14px; border-radius: 50%; background: #4a4f7e; flex: none; }

.chat-mock__bubble {
    flex: 1;
    display: grid;
    gap: 4px;
    padding: 0.35rem;
    background: #232457;
    border-radius: 6px;
}

.chat-mock__bubble--short { flex: 0 0 45%; }

.chat-mock__bar { display: block; height: 4px; border-radius: 3px; background: #5a5f92; }
.chat-mock__bar--title { width: 55%; background: #e6e9ff; }
.chat-mock__bar--cyan { width: 60%; background: var(--c-cyan-2); }

.chat-mock__input { padding: 0.35rem; background: #232457; border-radius: 6px; }

/* ============================================
   HOME: SPORTSBOOK
   ============================================ */
.sport { padding-block: var(--section-y); }

.sport .scene__bg { background-position: center 40%; }

.sport__head .section-title,
.sport__head .section-intro { text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8); }

.sport__head .section-intro { color: #dfe2f5; }

.sport-star {
    position: absolute;
    z-index: 0;
    pointer-events: none;
}
.sport-star--1 { width: 72px; height: 72px; top: 8%; left: 6%; color: rgba(92, 232, 242, 0.45); transform: rotate(14deg); }
.sport-star--2 { width: 44px; height: 44px; top: 22%; left: 18%; color: rgba(179, 166, 255, 0.4); transform: rotate(-20deg); }
.sport-star--3 { width: 56px; height: 56px; top: 10%; right: 12%; color: rgba(179, 166, 255, 0.4); transform: rotate(30deg); }
.sport-star--4 { width: 36px; height: 36px; top: 30%; right: 5%; color: rgba(92, 232, 242, 0.4); display: none; }

.sport .container { position: relative; z-index: 1; }

.sport-board-wrap {
    position: relative;
    max-width: 720px;
    margin: 0 auto;
    padding-bottom: 44px;
}

.sport-board {
    position: relative;
    z-index: 1;
    margin-top: 28px;
    padding: 2.4rem 0.9rem 1.25rem;
    background: #10102e;
    border: 3px solid var(--c-cyan);
    border-radius: 18px;
    box-shadow: 0 0 0 1px rgba(92, 232, 242, 0.2) inset, 0 0 30px rgba(92, 232, 242, 0.45), var(--shadow);
}

.sport-board__tab {
    position: absolute;
    left: 50%;
    top: 0;
    margin: 0;
    padding: 2px;
    transform: translate(-50%, -62%);
    background: var(--c-cyan);
    clip-path: polygon(0 0, 100% 0, 88% 100%, 12% 100%);
    filter: drop-shadow(0 0 8px rgba(92, 232, 242, 0.6));
}

.sport-board__tab span {
    display: block;
    padding: 0.3rem 2.4rem 0.4rem;
    background: var(--c-maroon);
    clip-path: polygon(0 0, 100% 0, 88% 100%, 12% 100%);
    font-family: var(--f-display);
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--c-amber);
    white-space: nowrap;
}

.sport-board__cols {
    display: grid;
    gap: 1rem;
}

.sport-col__label {
    margin: 0 0 0.3rem;
    text-align: center;
    font-weight: 600;
    color: var(--c-cyan);
}

.odds-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.45rem;
    padding: 0.55rem 0.6rem;
    background: #1c1b45;
    border-radius: 8px;
}

.odds-row__dot { flex: none; width: 22px; height: 22px; border-radius: 50%; background: #3a3a6e; }

.odds-row__bars { flex: 1; display: grid; gap: 5px; }
.odds-row__bars span { display: block; height: 5px; border-radius: 3px; }
.odds-row__bars span:first-child { width: 60%; background: #eef0ff; }
.odds-row__bars span:last-child { width: 35%; background: #5a5f92; }

.odds-row__label { font-size: 0.8rem; color: var(--c-muted-2); }

.odds-row__slot { flex: none; width: 38px; height: 24px; border-radius: 5px; background: #34346a; }

.sport-board__cta { margin: 1.1rem 0 0; text-align: center; }

.sport-board__btn { border-radius: 999px; padding-inline: 1.8rem; }

.sport-post {
    position: absolute;
    bottom: 0;
    width: 22px;
    height: 48px;
    background: linear-gradient(180deg, #2a2950 0%, #17163a 100%);
    border-radius: 0 0 3px 3px;
}
.sport-post--l { left: 20%; }
.sport-post--r { right: 20%; }

.sport-copy {
    max-width: 820px;
    margin: 1.5rem auto 0;
    padding: 1.25rem;
    background: rgba(10, 9, 32, 0.9);
    border: 1px solid var(--c-line);
    border-radius: var(--radius);
}

.sport-copy p { color: var(--c-muted); }
.sport-copy p:last-child { margin-bottom: 0; }

.sport-features {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
}

.sport-features li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: #fff;
}

.sport-features .line-icon { width: 24px; height: 24px; }

@media (min-width: 768px) {
    .sport-board { padding-inline: 1.4rem; }
    .sport-board__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
    .sport-col { padding-inline: 0.6rem; }
    .sport-col + .sport-col { border-left: 1px solid rgba(92, 232, 242, 0.6); }
    .sport-features { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .sport-star--4 { display: block; }
}

/* ============================================
   HOME: PAYMENTS & SUPPORT
   ============================================ */
.pay__grid {
    display: grid;
    gap: 2.5rem;
}

.pay__col > p { color: var(--c-muted); }

.pay__tiles { margin: 1rem 0 1.25rem; }

.pay-facts {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    display: grid;
    gap: 0.5rem;
}

.pay-facts li {
    display: grid;
    gap: 0.15rem;
    padding: 0.6rem 0.85rem;
    background: var(--c-surface);
    border-left: 3px solid var(--c-cyan);
    border-radius: 0 10px 10px 0;
}

.pay-facts__k { font-weight: 700; color: var(--c-amber); }
.pay-facts__v { color: var(--c-muted); }

.pay__links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.5rem;
}
.pay__links .text-link { min-height: 44px; }

.support-stall {
    position: relative;
    isolation: isolate;
    max-width: 560px;
    margin-inline: auto;
}

.support-stall::before,
.support-stall::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: 18%;
    width: 30%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 170, 60, 0.4) 0%, rgba(255, 170, 60, 0) 70%);
}
.support-stall::before { left: -6%; }
.support-stall::after { right: -6%; }

.support-stall__img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

.chat-card {
    display: grid;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding: 0.75rem 0.9rem;
    background: #161443;
    border: 1px solid rgba(92, 232, 242, 0.6);
    border-radius: 10px;
    box-shadow: 0 0 16px rgba(92, 232, 242, 0.25);
}

.chat-card__title {
    margin: 0;
    font-weight: 700;
    color: var(--c-cyan);
}

.chat-card__bubble {
    display: block;
    height: 14px;
    border-radius: 8px;
    background: #3d4470;
}
.chat-card__bubble--short { width: 60%; }

.support h3 { margin-top: 1.25rem; }
.support p { color: var(--c-muted); }

@media (min-width: 560px) {
    .chat-card {
        position: absolute;
        left: 17%;
        top: 38%;
        width: 44%;
        margin-top: 0;
        padding: 0.6rem 0.75rem;
    }
}

@media (min-width: 1024px) {
    .pay__grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: center;
        gap: 3.5rem;
    }
}

/* ============================================
   HOME: CHECKLIST
   ============================================ */
.check__layout {
    display: grid;
    gap: 1.25rem;
}

.check__mascot { display: flex; justify-content: center; }

.check__body .lead { margin-bottom: 1.5rem; }

@media (min-width: 1024px) {
    .check__layout {
        grid-template-columns: 160px minmax(0, 1fr);
        gap: 2.5rem;
        align-items: start;
    }
    .check__mascot {
        position: sticky;
        top: calc(var(--header-h) + 2rem);
        padding-top: 6rem;
    }
}

/* ============================================
   BONUSSER PAGE
   ============================================ */
.crumb-bar { padding-top: 1rem; background: var(--c-bg); }
.crumb-bar .breadcrumbs { margin-bottom: 0.75rem; }

.bhero .scene__bg { background-position: 70% center; }

.bhero__inner {
    position: relative;
    padding-top: clamp(190px, 54vw, 360px);
    padding-bottom: clamp(2.5rem, 6vw, 4rem);
}

.bhero__panel { max-width: 620px; }

@media (min-width: 1024px) {
    .bhero__inner {
        display: flex;
        align-items: center;
        min-height: clamp(560px, 44vw, 680px);
        padding-top: 4rem;
        padding-bottom: 7rem;
    }
}

/* Welcome steps */
.step-track { position: relative; }

.step-cards {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
    display: grid;
    gap: 1.25rem;
}

.step-cards::before {
    content: "";
    position: absolute;
    top: 2rem;
    bottom: 2rem;
    left: calc(1.25rem + 32px);
    border-left: 2px dashed var(--c-cyan);
    filter: drop-shadow(0 0 4px var(--c-cyan-glow));
}

.step-card {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 1.25rem;
    background: var(--c-navy);
    border: 1.5px solid rgba(92, 232, 242, 0.7);
    border-radius: var(--radius);
    box-shadow: 0 0 18px rgba(92, 232, 242, 0.2);
}

.step-card__badge {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 3px solid var(--c-cyan);
    background: var(--c-bg-deep);
    color: var(--c-amber);
    font-family: var(--f-display);
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 0 14px var(--c-cyan-glow);
}

.step-card__title {
    margin: 0;
    font-family: var(--f-display);
    font-size: 1.7rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.step-card p { margin: 0; color: var(--c-muted); }
.step-card .step-card__plus { color: var(--c-amber); font-weight: 700; }
.step-card .step-card__meta { color: var(--c-amber); font-weight: 600; }
.step-card .text-link { margin-top: auto; min-height: 44px; }

.steps__flight { display: none; }

.steps__cta { margin-top: 1.75rem; text-align: center; }

.steps__code { max-width: 860px; margin: 2rem auto 0; }

@media (min-width: 768px) {
    .step-track { padding-top: 68px; }
    .step-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
    .step-cards::before { display: none; }

    .steps__flight {
        display: block;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        height: 68px;
        pointer-events: none;
        filter: drop-shadow(0 0 5px rgba(92, 232, 242, 0.6));
    }

    .steps__flight svg { display: block; width: 100%; height: 68px; max-width: none; overflow: visible; }

    .steps__star {
        position: absolute;
        top: 68px;
        width: 30px;
        height: 30px;
        transform: translate(-50%, -50%);
        color: var(--c-cyan);
    }
    .steps__star--1 { left: 50%; }
    .steps__star--2 { left: 83.333%; }
}

/* Terms */
.table-wrap--maroon { background: linear-gradient(160deg, var(--c-plum) 0%, var(--c-maroon-deep) 100%); }

.terms__note { max-width: 860px; margin: 1.25rem auto 0; color: var(--c-muted); }

/* Wagering calculator */
.wager__layout {
    display: grid;
    gap: 1rem;
    justify-items: center;
}

.calc {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.calc__tile {
    width: 100%;
    max-width: 280px;
    padding: 1rem;
    text-align: center;
    background: var(--c-surface);
    border: 1.5px solid rgba(92, 232, 242, 0.7);
    border-radius: var(--radius);
    box-shadow: 0 0 16px rgba(92, 232, 242, 0.2);
}

.calc__label { margin: 0 0 0.25rem; font-size: 0.875rem; font-weight: 600; color: var(--c-cyan); }

.calc__value {
    margin: 0;
    font-family: var(--f-display);
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 1.1;
    color: #fff;
}

.calc__tile--result { border-color: var(--c-amber); box-shadow: 0 0 28px var(--c-amber-glow); }
.calc__tile--result .calc__value { color: var(--c-amber); }

.calc__arrow {
    flex: none;
    width: 44px;
    height: 28px;
    color: var(--c-cyan);
    transform: rotate(90deg);
    filter: drop-shadow(0 0 4px var(--c-cyan-glow));
}

.wager__text { max-width: 760px; margin: 1.5rem auto 0; }
.wager__text p { color: var(--c-muted); }

@media (min-width: 768px) {
    .wager__layout { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 1.5rem; }
    .calc { flex-direction: row; justify-content: center; gap: 0.75rem; }
    .calc__tile { flex: 1; width: auto; max-width: 250px; }
    .calc__arrow { transform: none; }
}

/* Free spins track */
.day-track {
    list-style: none;
    margin: 0 0 1.75rem;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1.1rem 0.25rem;
}

.day-track__item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
}

.day-track__item::before {
    content: "";
    position: absolute;
    top: 26px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--c-cyan);
    box-shadow: 0 0 6px var(--c-cyan-glow);
}

.day-track__item:nth-child(5n + 1)::before { left: 50%; }
.day-track__item:nth-child(5n)::before { right: 50%; }

.day-track__dot {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 2px solid var(--c-cyan);
    background: var(--c-bg-deep);
    box-shadow: 0 0 12px rgba(92, 232, 242, 0.4);
}

.day-track__dot .shuriken { width: 26px; height: 26px; }
.day-track__dot .shuriken__core { fill: var(--c-bg-deep); }

.day-track__label { font-size: 0.875rem; font-weight: 600; color: var(--c-muted); white-space: nowrap; }

.fspins__actions { justify-content: center; }

@media (min-width: 768px) {
    .day-track { grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 0.25rem; }
    .day-track__item:nth-child(5n + 1)::before { left: 0; }
    .day-track__item:nth-child(5n)::before { right: 0; }
    .day-track__item:first-child::before { left: 50%; }
    .day-track__item:last-child::before { right: 50%; }
}

/* Ongoing promos */
.promo__layout { position: relative; }

.promo__grid { display: grid; gap: 1rem; position: relative; z-index: 1; }

.promo-card {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 1.25rem;
    background: var(--c-navy);
    border: 1.5px solid rgba(92, 232, 242, 0.7);
    border-radius: var(--radius);
    box-shadow: 0 0 16px rgba(92, 232, 242, 0.18);
}

.promo-card h3 { margin: 0; font-size: 1.25rem; }
.promo-card p { margin: 0; color: var(--c-muted); }
.promo-card__icon { width: 38px; height: 38px; }

.promo-card .promo-card__links {
    margin-top: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.25rem;
}
.promo-card__links .text-link { min-height: 44px; }

.promo__art { display: none; }

@media (min-width: 768px) {
    .promo__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
    .promo__layout { padding-right: 190px; }
    .promo__art {
        display: block;
        position: absolute;
        z-index: 2;
        right: -50px;
        top: 50%;
        width: 340px;
        height: auto;
        transform: translateY(-50%);
        object-fit: contain;
        pointer-events: none;
    }
    .promo__layout::after {
        content: "";
        position: absolute;
        z-index: 0;
        right: -60px;
        top: 50%;
        width: 360px;
        height: 360px;
        transform: translateY(-50%);
        border-radius: 50%;
        background: radial-gradient(circle, rgba(92, 232, 242, 0.28) 0%, rgba(92, 232, 242, 0) 68%);
        pointer-events: none;
    }
}

/* Checklist */
.checklist .section-head { margin-bottom: 3rem; }

.check-panel {
    position: relative;
    max-width: 880px;
    margin-inline: auto;
    padding: 2.75rem 1.25rem 1.5rem;
    background: var(--c-surface);
    border: 1.5px solid rgba(92, 232, 242, 0.6);
    border-radius: var(--radius-l);
    box-shadow: 0 0 26px rgba(92, 232, 242, 0.2), var(--shadow);
}

.check-panel__mascot { position: absolute; top: -48px; right: 0.75rem; width: 84px; }

.check-panel__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.9rem;
}

.check-panel__list li { display: flex; align-items: flex-start; gap: 0.8rem; }
.check-panel__list p { margin: 0; color: var(--c-muted); }

.check-panel__box {
    flex: none;
    width: 22px;
    height: 22px;
    margin-top: 0.2rem;
    border: 2px solid var(--c-cyan);
    border-radius: 5px;
    box-shadow: 0 0 8px rgba(92, 232, 242, 0.4);
}

.check-panel__final {
    margin: 1.25rem 0 0;
    padding-top: 1rem;
    border-top: 1px solid var(--c-line);
    color: var(--c-muted);
}

@media (min-width: 768px) {
    .check-panel { padding: 3rem 2rem 1.75rem; }
    .check-panel__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 2rem; }
    .check-panel__mascot { right: 1.5rem; width: 100px; }
}

/* Bonus FAQ */
.bfaq__list { margin-inline: auto; }

/* ============================================
   SPIL PAGE
   ============================================ */

/* Hero */
.spil-hero .scene__bg { background-position: center 45%; }

.spil-hero__inner {
    position: relative;
    padding-block: clamp(3.5rem, 12vw, 8rem) clamp(4.5rem, 10vw, 7rem);
    text-align: center;
}

.spil-hero__copy {
    max-width: 760px;
    margin-inline: auto;
}

.spil-hero__copy p {
    color: #eef0ff;
    font-size: 1.05rem;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.85);
}

.spil-hero .btn-row { justify-content: center; margin-top: 1.25rem; }

.spil-hero .chip-row {
    flex-wrap: wrap;
    justify-content: center;
    overflow: visible;
    margin-top: 1.5rem;
}

/* Slots */
.spil-slots { background: linear-gradient(180deg, var(--c-bg) 0%, var(--c-navy) 100%); }

.concept-pair {
    display: grid;
    gap: 1rem;
    max-width: 900px;
    margin: 0 auto 2.25rem;
}

.concept-pair .callout h3 { margin: 0 0 0.25rem; font-size: 1.05rem; }
.concept-pair .callout p { color: var(--c-muted); }

@media (min-width: 768px) {
    .concept-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.spil-note {
    max-width: 820px;
    margin: 1.5rem auto 0;
    text-align: center;
    color: var(--c-muted);
}

.spil-actions { justify-content: center; margin-top: 1.5rem; }

/* Live band */
.live-band .slash-band__half { display: flex; flex-direction: column; justify-content: center; }

.live-band .live-copy .btn-row { margin-top: 0.5rem; }

.live-art { max-width: 520px; margin: 0 auto; }

.live-art img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

.live-facts {
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
}

.live-facts li {
    padding: 0.5rem 0.7rem;
    background: rgba(20, 12, 34, 0.9);
    border-left: 3px solid var(--c-cyan);
    border-radius: 0 8px 8px 0;
    color: #fff;
    font-size: 0.9rem;
}

.live-facts strong { display: block; color: var(--c-amber); }

/* Crash */
.crash { background: var(--c-bg-deep); }

.crash__layout {
    display: grid;
    gap: 2.5rem;
    align-items: center;
}

.crash__copy p { color: var(--c-muted); }

.crash-tiles {
    position: relative;
    isolation: isolate;
    margin-top: 1.25rem;
    padding: 2.5rem 0 1.5rem;
}

.crash-tiles__curve {
    position: absolute;
    inset: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
}

.crash-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 0.75rem;
}

.crash-tile {
    padding: 0.8rem;
    background: #161443;
    border: 1.5px solid rgba(92, 232, 242, 0.7);
    border-radius: var(--radius-s);
    box-shadow: 0 0 14px rgba(92, 232, 242, 0.2);
}

.crash-tile .line-icon { margin-bottom: 0.3rem; }
.crash-tile__name { display: block; font-weight: 700; color: #fff; }
.crash-tile__desc { display: block; font-size: 0.85rem; color: var(--c-muted); }

.crash__art {
    position: relative;
    isolation: isolate;
    max-width: 520px;
    margin-inline: auto;
}

.crash__art::before {
    content: "";
    position: absolute;
    inset: 5%;
    z-index: -1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(92, 232, 242, 0.3) 0%, rgba(92, 232, 242, 0) 68%);
}

.crash__art img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

@media (min-width: 1024px) {
    .crash__layout { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 3rem; }
}

/* Sportsbook */
.spil-sport .scene__bg { background-position: 72% center; }

.spil-sport .container { position: relative; }

.sport-panel {
    position: relative;
    max-width: 620px;
    margin-top: 28px;
    padding: 2.6rem 1.25rem 1.5rem;
    background: rgba(10, 9, 32, 0.93);
    border: 2px solid var(--c-cyan);
    border-radius: 18px;
    box-shadow: 0 0 0 1px rgba(92, 232, 242, 0.2) inset, 0 0 30px rgba(92, 232, 242, 0.4), var(--shadow);
}

.sport-panel p { color: var(--c-muted); }
.sport-panel .section-title { margin-top: 0.25rem; }
.sport-panel .sport-features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sport-panel .btn-row { margin-top: 0.5rem; }

@media (min-width: 768px) {
    .sport-panel { padding: 2.8rem 2rem 1.75rem; }
}

/* Providers and RTP */
.spil-providers { background: var(--c-navy); }

.tile-grid.prov__tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 900px;
    margin: 0 auto 2.5rem;
}

@media (min-width: 560px) {
    .tile-grid.prov__tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.prov__grid {
    display: grid;
    gap: 2rem;
    align-items: start;
}

.prov__text p { color: var(--c-muted); }
.prov__text h3 { margin-top: 1.25rem; }
.prov__text h3:first-child { margin-top: 0; }

.rtp-panel {
    padding: 1.25rem;
    background: #0f0d2b;
    border: 1px solid var(--c-line);
    border-left: 4px solid var(--c-amber);
    border-radius: 0 var(--radius) var(--radius) 0;
}

.rtp-panel h3 { margin-bottom: 0.25rem; }
.rtp-panel p { color: var(--c-muted); margin-bottom: 0; }

.rtp-list {
    list-style: none;
    margin: 0.75rem 0 1rem;
    padding: 0;
    display: grid;
    gap: 0.2rem;
}

.rtp-list li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--c-line);
    color: #fff;
}

.rtp-list strong { color: var(--c-amber); white-space: nowrap; }

.spil-links {
    max-width: 900px;
    margin: 2rem auto 0;
    color: var(--c-muted);
    text-align: center;
}

@media (min-width: 1024px) {
    .prov__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 3rem; max-width: 1040px; margin-inline: auto; }
}

/* Mobile / PWA */
.pwa-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    max-width: 900px;
    margin-inline: auto;
    padding: 1.5rem 1.25rem;
    text-align: center;
    background: var(--c-surface);
    border: 1.5px solid rgba(92, 232, 242, 0.6);
    border-radius: var(--radius-l);
    box-shadow: 0 0 26px rgba(92, 232, 242, 0.18), var(--shadow);
}

.pwa-card__phone {
    position: relative;
    flex: none;
    width: 96px;
    height: 96px;
}

.pwa-card__phone .pwa-card__outline {
    width: 100%;
    height: 100%;
    stroke-width: 1.1;
}

.pwa-card__phone .pwa-card__add {
    position: absolute;
    left: 50%;
    top: 48%;
    width: 34px;
    height: 34px;
    transform: translate(-50%, -50%);
}

.pwa-card__body h2 { margin-bottom: 0.4em; }
.pwa-card__body p { color: var(--c-muted); }
.pwa-card__body p:last-child { margin-bottom: 0; }

@media (min-width: 768px) {
    .pwa-card { flex-direction: row; text-align: left; gap: 2rem; padding: 1.75rem 2rem; }
}

/* Game FAQ */
.spil-faq .faq-list { margin-inline: auto; }
.spil-faq__more { max-width: 900px; margin: 1.5rem auto 0; color: var(--c-muted); }

/* ============================================
   OM OS PAGE
   ============================================ */

/* Hero */
.ohero .scene__bg { background-position: 74% center; }

.ohero .scene__shade { display: none; }

.ohero__inner {
    position: relative;
    padding-top: clamp(170px, 48vw, 300px);
    padding-bottom: clamp(3rem, 7vw, 5rem);
}

.ohero__copy {
    max-width: 600px;
    padding: 1.25rem;
    background: rgba(8, 7, 26, 0.85);
    border: 1px solid var(--c-line);
    border-radius: var(--radius);
}

.ohero__copy p { color: #eef0ff; }
.ohero__copy .hero-title { font-size: clamp(1.9rem, 6vw, 3.1rem); }

@media (min-width: 768px) {
    .ohero .scene__shade { display: block; }
    .ohero__inner {
        padding-top: clamp(4.5rem, 9vw, 7rem);
        padding-bottom: clamp(6rem, 11vw, 9rem);
    }
    .ohero__copy {
        padding: 0;
        background: none;
        border: 0;
        text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8);
    }
}

/* Story */
.about-split {
    display: grid;
    gap: 2rem;
    align-items: center;
}

.about-split__copy p { color: var(--c-muted); }

.fact-chips {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.fact-chips li {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.9rem 1rem;
    background: var(--c-surface);
    border: 1.5px solid rgba(92, 232, 242, 0.6);
    border-radius: var(--radius);
    box-shadow: 0 0 14px rgba(92, 232, 242, 0.15);
}

.fact-chips strong {
    font-family: var(--f-display);
    font-size: 1.9rem;
    line-height: 1.1;
    color: var(--c-amber);
}

.fact-chips span { color: var(--c-muted); font-size: 0.95rem; }

@media (min-width: 1024px) {
    .about-split { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 3.5rem; }
}

/* Mascot band */
.mascot-band .section-intro { color: var(--c-on-maroon); margin-inline: auto; }

.mascot-stage {
    position: relative;
    isolation: isolate;
    max-width: 920px;
    margin: 0 auto;
}

.mascot-stage::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 40%;
    z-index: -1;
    width: 60%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(92, 232, 242, 0.32) 0%, rgba(92, 232, 242, 0) 68%);
}

.mascot-stage img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

.pose-caps {
    list-style: none;
    margin: 0.25rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
    text-align: center;
}

.pose-chip {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0.2rem 1rem;
    background: rgba(13, 11, 38, 0.85);
    border: 1.5px solid var(--c-cyan);
    border-radius: 999px;
    color: #fff;
    font-weight: 700;
    font-size: 0.95rem;
    box-shadow: 0 0 10px rgba(92, 232, 242, 0.3);
}

.mascot-copy {
    max-width: 780px;
    margin: 2rem auto 0;
}

.mascot-copy p { color: var(--c-on-maroon); }

/* Licence */
.licence__layout {
    display: grid;
    gap: 2.25rem;
    align-items: start;
}

.licence__copy p { color: var(--c-muted); }
.licence__copy h3 { margin-top: 1.25rem; }

.check-list {
    margin: 0;
    padding-left: 1.2rem;
    display: grid;
    gap: 0.5rem;
    color: var(--c-muted);
}

.licence-panel {
    background: #0f0e2e;
    border: 1.5px solid var(--c-cyan);
    border-radius: var(--radius-l);
    box-shadow: 0 0 26px rgba(92, 232, 242, 0.25), var(--shadow);
    overflow: hidden;
}

.licence-panel__head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.1rem;
    border-bottom: 1px solid rgba(92, 232, 242, 0.4);
    background: var(--c-surface);
}

.licence-panel__head .line-icon { width: 34px; height: 34px; }

.licence-panel__title {
    margin: 0;
    font-family: var(--f-display);
    font-size: 1.4rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #fff;
}

.fact-table {
    width: 100%;
    border-collapse: collapse;
}

.fact-table th,
.fact-table td {
    padding: 0.8rem 1.1rem;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--c-line);
}

.fact-table thead th {
    font-size: 0.875rem;
    color: var(--c-muted);
    font-weight: 600;
}

.fact-table tbody th { color: #fff; font-weight: 600; }
.fact-yes { color: var(--c-cyan); font-weight: 700; }
.fact-no { color: var(--c-coral); font-weight: 700; }

.licence-panel__note { margin: 0; padding: 1rem 1.1rem; }

@media (min-width: 1024px) {
    .licence__layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3.5rem; }
}

/* Secure cards */
.secure__divider { margin-bottom: 1.75rem; }

.info-cards {
    display: grid;
    gap: 1.1rem;
}

.info-card {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.25rem;
    background: var(--c-navy);
    border: 1.5px solid rgba(92, 232, 242, 0.6);
    border-radius: var(--radius);
    box-shadow: 0 0 16px rgba(92, 232, 242, 0.15);
}

.info-card .line-icon { width: 36px; height: 36px; }
.info-card h3 { margin: 0; }
.info-card p { margin: 0; color: var(--c-muted); }

.secure__more { margin: 1.5rem 0 0; text-align: center; color: var(--c-muted); }

@media (min-width: 768px) {
    .info-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; }
}

/* Soft CTA */
.soft-cta { background: var(--c-bg); }
.soft-cta .callout { max-width: 900px; margin-inline: auto; }
.soft-cta .callout .line-icon { width: 34px; height: 34px; margin-top: 0.1rem; }
.soft-cta .callout p { color: var(--c-muted); }
.soft-cta .btn-row { margin-top: 0.75rem; }

/* Support + sister */
.support-sister .lead { margin-bottom: 1.75rem; }

.two-facts {
    display: grid;
    gap: 1.1rem;
}

.fact-block {
    padding: 1.25rem;
    background: rgba(13, 11, 38, 0.7);
    border: 1px solid var(--c-line);
    border-left: 3px solid var(--c-cyan);
    border-radius: 0 var(--radius) var(--radius) 0;
}

.fact-block h3 { margin: 0.4rem 0 0.4rem; }
.fact-block p { margin: 0; color: var(--c-muted); }

@media (min-width: 768px) {
    .two-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
}

/* Responsible */
.care-panel {
    display: grid;
    gap: 1.25rem;
    max-width: 960px;
    margin-inline: auto;
    padding: 1.5rem 1.25rem;
    background: rgba(20, 12, 34, 0.88);
    border: 1.5px solid rgba(240, 219, 228, 0.35);
    border-radius: var(--radius-l);
    box-shadow: var(--shadow);
}

.care-panel__badges {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.care-panel__badges .line-icon { width: 40px; height: 40px; }
.care-panel__badges .badge-18 { width: 52px; height: 52px; font-size: 1.05rem; }
.care-panel__body p { color: var(--c-on-maroon); }
.care-panel__body p:last-child { margin-bottom: 0; }

@media (min-width: 768px) {
    .care-panel {
        grid-template-columns: 150px minmax(0, 1fr);
        gap: 2rem;
        padding: 2rem;
    }
    .care-panel__badges { flex-direction: column; align-items: flex-start; }
}

/* FAQ */
.om-faq .faq-list { margin-inline: auto; }
.om-faq__more { max-width: 900px; margin: 1.5rem auto 0; color: var(--c-muted); }

/* ============================================
   VIP PAGE
   ============================================ */

/* Hero */
.vip-hero .scene__bg { background-position: 72% center; }
.vip-hero .scene__shade { display: none; }

.vip-hero__inner {
    position: relative;
    padding-top: clamp(190px, 52vw, 320px);
    padding-bottom: clamp(3rem, 7vw, 5rem);
}

.vip-hero__copy {
    max-width: 580px;
    padding: 1.25rem;
    background: rgba(8, 7, 26, 0.88);
    border: 1px solid var(--c-line);
    border-radius: var(--radius);
}

.vip-hero__copy p { color: #eef0ff; }
.vip-hero__copy .hero-title { font-size: clamp(1.9rem, 6vw, 3.1rem); }
.vip-hero__copy .btn-row .text-link { min-height: 44px; }

@media (min-width: 768px) {
    .vip-hero .scene__shade { display: block; }
    .vip-hero__inner {
        padding-top: clamp(4rem, 8vw, 6.5rem);
        padding-bottom: clamp(6rem, 10vw, 8.5rem);
    }
    .vip-hero__copy {
        padding: 0;
        background: none;
        border: 0;
        text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8);
    }
}

/* Mechanics */
.vip-mech .section-intro { color: var(--c-on-maroon); margin-inline: auto; }

.vip-mech__top {
    display: grid;
    gap: 1.75rem;
    align-items: center;
    max-width: 900px;
    margin: 0 auto 1.5rem;
}

.vip-wheel { margin: 0 auto; text-align: center; }
.vip-wheel svg { width: min(240px, 70vw); height: auto; margin-inline: auto; filter: drop-shadow(0 0 14px rgba(92, 232, 242, 0.35)); }
.vip-wheel figcaption { margin-top: 0.5rem; color: var(--c-on-maroon); }

.vip-bars-panel {
    padding: 1.25rem;
    background: rgba(20, 12, 34, 0.88);
    border: 1.5px solid rgba(92, 232, 242, 0.5);
    border-radius: var(--radius);
}

.vip-bars-panel h3 { margin-bottom: 0.9rem; }
.vip-bars-panel .small-print { color: var(--c-on-maroon); margin-bottom: 0; }

.vip-bars { display: grid; gap: 0.8rem; margin-bottom: 1rem; }

.vip-bar {
    height: 12px;
    border-radius: 999px;
    background: #2a2760;
    overflow: hidden;
}

.vip-bar span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--c-cyan-2), var(--c-cyan));
    box-shadow: 0 0 10px var(--c-cyan-glow);
}

.vip-avatars { margin: 0 auto 2rem; max-width: 760px; }
.vip-avatars img { width: 100%; height: auto; object-fit: contain; }

.vip-cards { display: grid; gap: 1rem; }

.vip-card {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.25rem;
    background: rgba(20, 12, 34, 0.88);
    border: 1.5px solid rgba(92, 232, 242, 0.55);
    border-radius: var(--radius);
}

.vip-card .line-icon { width: 36px; height: 36px; }
.vip-card h3 { margin: 0; }
.vip-card p { margin: 0; color: var(--c-on-maroon); }
.vip-card .text-link { min-height: 32px; }

@media (min-width: 768px) {
    .vip-mech__top { grid-template-columns: auto minmax(0, 1fr); gap: 3rem; }
    .vip-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
    .vip-cards { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .vip-card { grid-column: span 2; }
    .vip-card:nth-child(4) { grid-column: 2 / span 2; }
    .vip-card:nth-child(5) { grid-column: 4 / span 2; }
}

/* Transparency panel */
.vip-ask {
    display: grid;
    gap: 1rem;
    max-width: 960px;
    margin-inline: auto;
    padding: 1.5rem 1.25rem;
    background: var(--c-navy);
    border: 1px solid var(--c-line);
    border-left: 4px solid var(--c-amber);
    border-radius: 0 var(--radius-l) var(--radius-l) 0;
    box-shadow: var(--shadow);
}

.vip-ask__mascot { display: flex; justify-content: center; }
.vip-ask__body p { color: var(--c-muted); }

.vip-ask__list {
    list-style: none;
    counter-reset: ask;
    margin: 0 0 1.25rem;
    padding: 0;
    display: grid;
    gap: 0.6rem;
}

.vip-ask__list li {
    counter-increment: ask;
    position: relative;
    padding: 0.7rem 0.9rem 0.7rem 3rem;
    background: #1b1844;
    border-radius: 10px;
    color: #fff;
}

.vip-ask__list li::before {
    content: counter(ask);
    position: absolute;
    left: 0.8rem;
    top: 0.65rem;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border: 1.5px solid var(--c-amber);
    border-radius: 50%;
    color: var(--c-amber);
    font-weight: 700;
    font-size: 0.9rem;
}

@media (min-width: 768px) {
    .vip-ask { grid-template-columns: 130px minmax(0, 1fr); gap: 2rem; padding: 2rem; align-items: start; }
    .vip-ask__mascot { padding-top: 5rem; }
}

/* Reload + Telegram */
.vip-duo { display: grid; gap: 1.1rem; max-width: 960px; margin-inline: auto; }

.vip-duo__card {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 1.4rem;
    background: var(--c-surface);
    border: 1.5px solid rgba(92, 232, 242, 0.7);
    border-radius: var(--radius);
    box-shadow: 0 0 18px rgba(92, 232, 242, 0.18);
}

.vip-duo__card .line-icon { width: 40px; height: 40px; }
.vip-duo__card h3 { margin: 0; }
.vip-duo__card p { margin: 0; color: var(--c-muted); }

.vip-duo__link { margin: 1.5rem 0 0; text-align: center; }
.vip-duo__link .text-link { min-height: 44px; }

@media (min-width: 768px) {
    .vip-duo { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
}

/* Status vs spend */
.vip-status__inner { max-width: 820px; }
.vip-status p { color: var(--c-muted); }
.vip-status .callout { margin-top: 1.5rem; }
.vip-status .callout .line-icon { width: 32px; height: 32px; color: var(--c-amber); }

/* Budget tips */
.vip-tips__inner { max-width: 820px; }
.vip-tips .lead { color: var(--c-on-maroon); }
.vip-tips p { color: var(--c-on-maroon); }
.vip-tips .text-link { color: #8ff1f8; }

.tip-rows {
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
    display: grid;
    gap: 0.7rem;
}

.tip-row {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 0.9rem 1.1rem;
    background: rgba(20, 12, 34, 0.88);
    border-left: 3px solid var(--c-cyan);
    border-radius: 0 var(--radius) var(--radius) 0;
    color: var(--c-on-maroon);
}

.tip-row__icon { width: 22px; height: 22px; margin-top: 0.2rem; color: var(--c-cyan); }
.tip-row__icon .shuriken__core { fill: rgba(20, 12, 34, 1); }

/* FAQ */
.vip-faq .faq-list { margin-inline: auto; }

/* ============================================
   BETALINGER PAGE
   ============================================ */

/* Hero */
.phero .scene__bg { background-position: 16% center; }

.phero__inner {
    position: relative;
    padding-top: clamp(200px, 56vw, 380px);
    padding-bottom: clamp(2.5rem, 6vw, 4rem);
}

.phero__panel { max-width: 620px; }
.phero__lead { color: var(--c-muted); }

@media (min-width: 768px) {
    .phero__inner { padding-top: clamp(300px, 46vw, 440px); }
    .phero__panel { margin-left: auto; }
}

@media (min-width: 1024px) {
    .phero .scene__bg { background-position: center 30%; }
    .phero__inner {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        min-height: clamp(620px, 48vw, 760px);
        padding-top: 4.5rem;
        padding-bottom: 7rem;
    }
    .phero__panel { width: min(620px, 52%); max-width: none; margin-left: 0; }
}

/* Deposit */
.deposit__groups { max-width: 900px; margin-inline: auto; }

.pay-panel {
    max-width: 900px;
    margin: 1.5rem auto 0;
    padding: 1.25rem;
    background: var(--c-bg);
    border: 1px solid var(--c-line);
    border-bottom: 2px solid var(--c-cyan);
    border-radius: var(--radius-l);
    box-shadow: 0 14px 24px -18px var(--c-cyan-glow);
}

.pay-panel__caps { display: grid; gap: 0.5rem; margin-top: 1.1rem; }
.pay-panel__caps span { display: block; height: 8px; border-radius: 4px; background: #3a3f72; }
.pay-panel__caps span:last-child { width: 60%; }

.deposit__note,
.withdraw__note {
    max-width: 900px;
    margin: 1.5rem auto 0;
    color: var(--c-muted);
}

/* Withdrawal booth */
.booth { max-width: 900px; margin-inline: auto; }
.booth .kiosk__roof { margin-inline: -2%; }
.booth__stall { padding: 1.1rem; }
.booth__stall .table-wrap { background: var(--c-plum); border-color: var(--c-cyan); }
.booth .data-table .num { white-space: nowrap; }

/* Minimum withdrawal */
.minw__layout { display: grid; gap: 2rem; align-items: center; }
.minw__copy p { color: var(--c-muted); }
.minw__calc { margin-inline: auto; }

@media (min-width: 1024px) {
    .minw__layout { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 3.5rem; }
}

/* KYC */
.kyc__top { display: grid; gap: 2rem; align-items: center; margin-bottom: 2.5rem; }
.kyc__copy p { color: var(--c-muted); }
.kyc__art img { width: 100%; max-width: 420px; height: auto; margin-inline: auto; object-fit: contain; }

.kyc-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
    display: grid;
    gap: 1.25rem;
}

.kyc-steps::before {
    content: "";
    position: absolute;
    top: 1rem;
    bottom: 1rem;
    left: calc(1rem + 13px);
    border-left: 2px solid var(--c-cyan);
    filter: drop-shadow(0 0 5px var(--c-cyan-glow));
}

.kyc-line { display: none; }

.kyc-card {
    position: relative;
    z-index: 1;
    padding: 1rem;
    background: var(--c-navy);
    border: 1.5px solid rgba(92, 232, 242, 0.6);
    border-radius: var(--radius);
    box-shadow: 0 0 16px rgba(92, 232, 242, 0.15);
}

.kyc-card .kyc-card__node {
    display: block;
    width: 26px;
    height: 26px;
    margin-bottom: 0.5rem;
    color: var(--c-cyan);
    filter: drop-shadow(0 0 6px var(--c-cyan));
}

.kyc-card h3 { margin-bottom: 0.35rem; font-size: 1.1rem; }
.kyc-card p { margin: 0; color: var(--c-muted); }

@media (min-width: 1024px) {
    .kyc__top { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 3rem; }
    .kyc-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); padding-top: 30px; }
    .kyc-steps::before { display: none; }
    .kyc-line {
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 0;
        width: 100%;
        height: 60px;
        filter: drop-shadow(0 0 6px var(--c-cyan-glow));
        pointer-events: none;
    }
    .kyc-card { padding-top: 1.75rem; }
    .kyc-card .kyc-card__node {
        position: absolute;
        top: -15px;
        left: 50%;
        width: 30px;
        height: 30px;
        margin: 0;
        transform: translateX(-50%);
    }
}

/* Statement callout */
.stmt { background: var(--c-bg); }
.stmt .callout { max-width: 900px; margin-inline: auto; }
.stmt .callout .line-icon { width: 34px; height: 34px; margin-top: 0.1rem; }
.stmt .callout p { color: var(--c-muted); }
.stmt__title { font-size: 1.3rem; margin-bottom: 0.4em; }

/* Crypto vs bank */
.cvb .slash-band__half--navy,
.cvb .slash-band__half--maroon { overflow: hidden; }

.cvb .slash-band__half > * { position: relative; z-index: 1; }

.cvb .slash-band__half > .cvb__curve {
    position: absolute;
    z-index: 0;
    right: 0;
    bottom: 0;
    width: 70%;
    max-width: 420px;
    height: auto;
    pointer-events: none;
}

.cvb .slash-band__half > .cvb__star {
    position: absolute;
    z-index: 0;
    top: 1rem;
    right: 1rem;
    width: 90px;
    height: 90px;
    color: rgba(208, 106, 156, 0.5);
    pointer-events: none;
}

.cvb-list {
    margin: 0 0 1rem;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.5rem;
}

.cvb-list li {
    padding: 0.5rem 0.8rem;
    background: rgba(20, 12, 34, 0.88);
    border-left: 3px solid var(--c-cyan);
    border-radius: 0 8px 8px 0;
    color: #fff;
}

/* Limits */
.limits__inner { max-width: 820px; }
.limits__inner p { color: var(--c-muted); }
.limits .pay-facts { margin-block: 1.25rem; }

/* FAQ */
.pfaq .faq-list { margin-inline: auto; }
.pfaq__more {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.5rem;
    max-width: 900px;
    margin: 1.5rem auto 0;
}
.pfaq__more .text-link { min-height: 44px; }

/* ============================================
   FAQ PAGE
   ============================================ */

/* Hero */
.fhero .scene__bg { background-position: 82% center; }

.fhero__inner {
    position: relative;
    padding-top: clamp(200px, 58vw, 380px);
    padding-bottom: clamp(2.5rem, 6vw, 4rem);
}

.fhero__panel { max-width: 640px; }

.fhero__lead { color: var(--c-muted); }

.fhero__jump {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 1.1rem;
    margin: 0 0 1rem;
    color: var(--c-muted);
    font-size: 0.95rem;
}

.fhero__jump .text-link { min-height: 44px; }

@media (min-width: 768px) {
    .fhero__inner { padding-top: clamp(280px, 40vw, 420px); }
}

@media (min-width: 1024px) {
    .fhero .scene__bg { background-position: center 35%; }
    .fhero__inner {
        display: flex;
        align-items: center;
        min-height: clamp(580px, 46vw, 720px);
        padding-top: 4.5rem;
        padding-bottom: 7rem;
    }
    .fhero__panel { width: min(640px, 54%); max-width: none; }
}

/* Topic chips */
.faq-topics {
    padding-block: clamp(2rem, 5vw, 3rem) 1rem;
    background: var(--c-bg);
}

.faq-topics .section-head { margin-bottom: 1rem; }
.faq-topics .section-title { font-size: clamp(1.6rem, 3.6vw, 2.2rem); }
.faq-topics .chip-row { justify-content: flex-start; }

.chip .chip__star { display: none; }

.chip.is-active .chip__star {
    display: inline-block;
    filter: drop-shadow(0 0 5px var(--c-cyan));
}

@media (min-width: 768px) {
    .faq-topics .chip-row { justify-content: center; }
}

/* Groups */
.faq-group__head {
    max-width: 900px;
    margin-bottom: 1.5rem;
}

.faq-group__head .section-title { font-size: clamp(1.6rem, 3.6vw, 2.3rem); }

.faq-group__intro {
    max-width: 68ch;
    margin: 0;
    color: var(--c-muted);
    font-size: 1.05rem;
}

.faq-group__body {
    display: grid;
    gap: 1.5rem;
    align-items: start;
}

.faq-group .faq-list { max-width: 900px; }

.faq-item__a a { font-weight: 600; }

/* Worked example */
.faq-stat {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem 0.75rem;
    margin: 1rem 0 0.25rem;
    padding: 0.9rem 0.75rem;
    background: #10102e;
    border: 1px solid rgba(92, 232, 242, 0.45);
    border-radius: var(--radius);
    box-shadow: 0 0 16px rgba(92, 232, 242, 0.12);
}

.faq-stat__fig {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 72px;
    text-align: center;
}

.faq-stat__num {
    font-family: var(--f-display);
    font-size: 1.8rem;
    line-height: 1.1;
    color: var(--c-cyan);
}

.faq-stat__lbl { font-size: 0.8rem; color: var(--c-muted); }

.faq-stat__op {
    flex: none;
    width: 22px;
    height: 22px;
    fill: none;
    stroke: var(--c-muted);
    stroke-width: 2;
    stroke-linecap: round;
}

/* Ansvarligt spil group */
.faq-group--care {
    background: linear-gradient(180deg, #1c1a55 0%, #171547 100%);
}

.faq-group--care .faq-item { background: #141238; }

.faq-care-art {
    position: relative;
    isolation: isolate;
    max-width: 420px;
    margin: 0 auto;
}

.faq-care-art::before {
    content: "";
    position: absolute;
    inset: 8%;
    z-index: -1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(92, 232, 242, 0.3) 0%, rgba(92, 232, 242, 0) 68%);
}

.faq-care-art img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

@media (min-width: 1024px) {
    .faq-group--care .faq-group__body {
        grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
        gap: 3rem;
        align-items: center;
    }
    .faq-group--care .faq-list { max-width: none; }
}

/* ============================================
   REVEAL (one-way, JS-gated, motion-safe)
   ============================================ */
@media (prefers-reduced-motion: no-preference) {
    .js .reveal {
        opacity: 0;
        transform: translateY(16px);
        transition: opacity 0.5s ease, transform 0.5s ease;
    }
    .js .reveal.is-revealed {
        opacity: 1;
        transform: none;
    }
}

/* ============================================
   REDUCED MOTION
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}