/*
 * Millioner Casino - design system
 * Art-deco midnight navy + gold, luxury high-roller atmosphere.
 */

:root {
    --navy-950: #0b1028;
    --navy-900: #0f1633;
    --navy-800: #151e45;
    --navy-700: #1a2552;
    --royal: #1c2b63;
    --ivory: #f5efe4;
    --ivory-200: #ece3d1;
    --emerald: #1d4a3a;
    --emerald-700: #163a2d;
    --espresso: #231c1a;

    --gold-100: #f6e2a6;
    --gold-300: #f1d27e;
    --gold: #e9c46a;
    --gold-500: #d9ad52;
    --gold-600: #c99a3e;
    --gold-700: #b8892c;
    --gold-800: #8a6418;

    --cream: #f3ead8;
    --cream-muted: #d8cdb8;
    --ink: #1a1f3a;
    --ink-soft: #3a3f5a;
    --link-ivory: #7b5413;
    --amber: #f0a830;

    --grad-gold: linear-gradient(180deg, #f7df98 0%, #e9c46a 48%, #c99a3e 100%);
    --grad-text: linear-gradient(180deg, #f6dc8e 0%, #e9c46a 50%, #b8892c 100%);
    --grad-card: linear-gradient(180deg, #f5e2a8 0%, #e9c46a 55%, #d3a64c 100%);

    --font-body: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    --font-head: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    --font-logo: 'Playfair Display', Georgia, 'Times New Roman', serif;

    --radius: 12px;
    --radius-pill: 999px;
    --shadow-gold: 0 8px 22px rgba(201, 154, 62, 0.28);
    --shadow-deep: 0 18px 40px rgba(5, 8, 22, 0.55);

    --frame-inset: 4px;
    --frame-gap: 4px;
    --frame-gutter: 10px;
    --fan: 56px;
    --corner: 28px;

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

/* ============================================
   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;
}

[hidden] {
    display: none !important;
}

/* ============================================
   BASE
   ============================================ */
html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
    margin: 0;
    min-width: 320px;
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.65;
    color: var(--cream);
    background-color: var(--navy-900);
    background-image:
        radial-gradient(ellipse at 50% 0%, rgba(28, 43, 99, 0.6) 0%, transparent 60%);
    background-repeat: no-repeat;
    overflow-x: hidden;
}

body.menu-open {
    overflow: hidden;
}

h1, h2, h3, h4 {
    font-family: var(--font-head);
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 0.6em;
    color: var(--gold);
    letter-spacing: -0.01em;
}

h1 { font-size: clamp(1.85rem, 1.3rem + 2.4vw, 2.75rem); }
h2 { font-size: clamp(1.55rem, 1.2rem + 1.5vw, 2.25rem); }
h3 { font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.35rem); }

p {
    margin: 0 0 1em;
}

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

ul, ol {
    margin: 0 0 1em;
    padding-left: 1.25rem;
}

a {
    color: var(--gold);
    text-underline-offset: 0.18em;
}

a:hover {
    color: var(--gold-100);
}

strong {
    font-weight: 600;
}

:focus-visible {
    outline: 2px solid var(--gold-300);
    outline-offset: 3px;
}

.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: 12px;
    top: -60px;
    z-index: 200;
    padding: 10px 16px;
    background: var(--gold);
    color: var(--navy-900);
    font-weight: 600;
    border-radius: var(--radius-pill);
    text-decoration: none;
}

.skip-link:focus {
    top: 12px;
}

.container {
    width: 100%;
    max-width: 1120px;
    margin-inline: auto;
    padding-inline: 14px;
}

.prose {
    max-width: 70ch;
}

/* Gold gradient headline text */
.gold-text,
.band:not(.band--ivory) > .container > h2,
.band:not(.band--ivory) .section-head h2 {
    color: var(--gold);
    background: var(--grad-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ============================================
   BUTTONS & LINKS
   ============================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 48px;
    padding: 0.75rem 1.6rem;
    border-radius: var(--radius-pill);
    font-family: var(--font-head);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.btn--gold {
    background: var(--grad-gold);
    color: var(--navy-900);
    border-color: var(--gold-100);
    box-shadow: var(--shadow-gold), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.btn--gold:hover {
    color: var(--navy-950);
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(233, 196, 106, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.btn--outline {
    background: var(--navy-900);
    color: var(--gold);
    border: 1.5px solid var(--gold);
}

.btn--outline:hover {
    background: var(--navy-800);
    color: var(--gold-100);
}

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

.btn--lg {
    min-height: 54px;
    padding: 0.9rem 2.2rem;
    font-size: 1.0625rem;
}

.text-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 44px;
    font-weight: 600;
    color: var(--gold);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.text-link::after {
    content: "→";
    text-decoration: none;
}

.link-btn {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 0.25rem;
    background: none;
    border: 0;
    color: var(--gold);
    font: inherit;
    text-decoration: underline;
    text-underline-offset: 0.18em;
    cursor: pointer;
}

/* ============================================
   HEADER
   ============================================ */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--navy-900);
    border-bottom: 1px solid rgba(233, 196, 106, 0.22);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    max-width: 1280px;
    min-height: 64px;
    margin-inline: auto;
    padding: 8px 14px;
}

.site-brand,
.footer-brand {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
    text-decoration: none;
    flex-shrink: 0;
}

.site-brand__name {
    font-family: var(--font-logo);
    font-weight: 700;
    font-size: 1.6rem;
    letter-spacing: 0.01em;
    color: var(--gold);
    background: var(--grad-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.site-brand__sub {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 3px;
    font-family: var(--font-head);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--gold);
}

.site-brand__sub::before,
.site-brand__sub::after {
    content: "";
    width: 20px;
    height: 5px;
    border-top: 1px solid var(--gold);
    border-bottom: 1px solid var(--gold);
}

.header-actions {
    display: none;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.menu-toggle {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0;
    background: transparent;
    border: 1.5px solid rgba(233, 196, 106, 0.6);
    border-radius: 10px;
    cursor: pointer;
    flex-shrink: 0;
}

.menu-toggle__bar {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--gold);
    border-radius: 2px;
    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);
    bottom: 0;
    left: 0;
    right: 0;
    height: auto;
    z-index: 99;
    flex-direction: column;
    gap: 24px;
    padding: 20px 20px 32px;
    background: var(--navy-950);
    border-top: 2px solid var(--gold-700);
    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: 48px;
    padding: 6px 4px;
    color: var(--cream);
    font-size: 1.0625rem;
    font-weight: 500;
    text-decoration: none;
    border-bottom: 1px dashed rgba(233, 196, 106, 0.35);
}

.site-nav__link:hover,
.site-nav__link[aria-current="page"] {
    color: var(--gold);
}

.site-nav__actions {
    display: grid;
    gap: 12px;
}

@media (min-width: 400px) {
    .header-actions {
        display: flex;
    }

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

@media (min-width: 768px) {
    .site-header__inner {
        padding: 10px 24px;
        gap: 16px;
    }

    .header-actions .header-login {
        display: inline-flex;
    }

    .site-brand__name {
        font-size: 1.85rem;
    }
}

@media (min-width: 1024px) {
    .site-header__inner {
        min-height: 84px;
    }

    .site-brand__name {
        font-size: 2.1rem;
    }

    .menu-toggle {
        display: none;
    }

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

    .site-nav__list {
        display: flex;
        gap: clamp(16px, 2.2vw, 36px);
    }

    .site-nav__link {
        min-height: 44px;
        border-bottom: 2px solid transparent;
        font-size: 1rem;
    }

    .site-nav__link[aria-current="page"] {
        border-bottom-color: var(--gold);
    }

    .site-nav__actions {
        display: none;
    }

    .header-actions {
        margin-left: 0;
    }
}

/* ============================================
   ART-DECO PAGE FRAME
   ============================================ */
.site-shell {
    position: relative;
    padding: var(--frame-gutter);
}

.deco-frame {
    position: absolute;
    inset: var(--frame-inset);
    z-index: 5;
    pointer-events: none;
    color: var(--gold-600);
}

.deco-frame__outer {
    position: absolute;
    inset: 0;
    border: 1px solid var(--gold-600);
}

.deco-frame__inner {
    position: absolute;
    inset: var(--frame-gap);
    background:
        linear-gradient(var(--gold-600), var(--gold-600)) center top / calc(100% - 2 * var(--corner)) 1px no-repeat,
        linear-gradient(var(--gold-600), var(--gold-600)) center bottom / calc(100% - 2 * var(--corner)) 1px no-repeat,
        linear-gradient(var(--gold-600), var(--gold-600)) left center / 1px calc(100% - 2 * var(--corner)) no-repeat,
        linear-gradient(var(--gold-600), var(--gold-600)) right center / 1px calc(100% - 2 * var(--corner)) no-repeat;
}

.deco-frame__corner {
    position: absolute;
    width: var(--corner);
    height: var(--corner);
    color: var(--gold-600);
}

.deco-frame__corner--tl { top: var(--frame-gap); left: var(--frame-gap); }
.deco-frame__corner--tr { top: var(--frame-gap); right: var(--frame-gap); transform: scaleX(-1); }
.deco-frame__corner--bl { bottom: var(--frame-gap); left: var(--frame-gap); transform: scaleY(-1); }
.deco-frame__corner--br { bottom: var(--frame-gap); right: var(--frame-gap); transform: scale(-1, -1); }

.deco-frame__fan {
    position: absolute;
    width: var(--fan);
    height: var(--fan);
    line-height: 0;
}

.deco-frame__fan svg {
    width: 100%;
    height: 100%;
}

.deco-frame__fan--tl { top: calc(var(--frame-gap) + 2px); left: calc(var(--frame-gap) + 2px); }
.deco-frame__fan--tr { top: calc(var(--frame-gap) + 2px); right: calc(var(--frame-gap) + 2px); transform: scaleX(-1); }
.deco-frame__fan--bl { bottom: calc(var(--frame-gap) + 2px); left: calc(var(--frame-gap) + 2px); transform: scaleY(-1); }
.deco-frame__fan--br { bottom: calc(var(--frame-gap) + 2px); right: calc(var(--frame-gap) + 2px); transform: scale(-1, -1); }

@media (min-width: 768px) {
    :root {
        --frame-inset: 8px;
        --frame-gap: 6px;
        --frame-gutter: 18px;
        --fan: 88px;
    }

    .container {
        padding-inline: 24px;
    }
}

@media (min-width: 1024px) {
    :root {
        --frame-inset: 14px;
        --frame-gap: 8px;
        --frame-gutter: 28px;
        --fan: 120px;
    }
}

/* ============================================
   BANDS (section surfaces)
   ============================================ */
.site-main > section + section {
    border-top: 2px solid var(--gold-700);
}

.band {
    position: relative;
    isolation: isolate;
    padding-block: 56px;
    color: var(--cream);
}

.band--navy { background: var(--navy-900); }
.band--royal { background: var(--royal); }
.band--espresso { background: var(--espresso); }

.band--emerald {
    background:
        radial-gradient(ellipse 60% 70% at 30% 60%, rgba(52, 120, 92, 0.55) 0%, transparent 70%),
        var(--emerald);
}

.band--ivory {
    color: var(--ink);
    background-color: var(--ivory);
    background-image:
        url("data:image/svg+xml,%3Csvg%20xmlns=%27http%3A//www.w3.org/2000/svg%27%20width=%27180%27%20height=%27180%27%3E%3Cfilter%20id=%27n%27%3E%3CfeTurbulence%20type=%27fractalNoise%27%20baseFrequency=%27.85%27%20numOctaves=%272%27%20stitchTiles=%27stitch%27/%3E%3CfeColorMatrix%20values=%270%200%200%200%200.45%200%200%200%200%200.36%200%200%200%200%200.2%200%200%200%200.09%200%27/%3E%3C/filter%3E%3Crect%20width=%27100%25%27%20height=%27100%25%27%20filter=%27url%28%23n%29%27/%3E%3C/svg%3E"),
        radial-gradient(ellipse at 50% 30%, #fbf7ef 0%, var(--ivory) 55%, var(--ivory-200) 100%);
}

.band--ivory h2,
.band--ivory h3 {
    color: #14204d;
}

.band--ivory a:not(.btn) {
    color: var(--link-ivory);
}

.band--ivory a:not(.btn):hover {
    color: #4f350a;
}

.band--image::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background-color: var(--navy-800);
    background-image: var(--band-bg);
    background-position: var(--band-pos, center);
    background-size: cover;
    background-repeat: no-repeat;
}

.band--image::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(11, 16, 40, 0.92) 0%, rgba(11, 16, 40, 0.7) 45%, rgba(11, 16, 40, 0.55) 100%);
}

.band--fade-left::after {
    background: linear-gradient(90deg, rgba(11, 16, 40, 0.95) 0%, rgba(11, 16, 40, 0.82) 50%, rgba(11, 16, 40, 0.4) 100%);
}

.section-head {
    max-width: 760px;
    margin: 0 auto 36px;
    text-align: center;
}

.section-head p {
    color: var(--cream-muted);
}

.band--ivory .section-head p {
    color: var(--ink-soft);
}

.eyebrow {
    display: inline-block;
    margin-bottom: 0.6rem;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold-300);
}

@media (min-width: 1024px) {
    .band {
        padding-block: 80px;
    }
}

/* ============================================
   NOTCHED ART-DECO FRAME (shared primitive)
   ============================================ */
.notch-frame {
    --n: 18px;
    --s: 9px;
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: var(--grad-gold);
}

.notch-frame,
.notch-frame::before {
    clip-path: polygon(
        var(--n) 0, calc(100% - var(--n)) 0,
        calc(100% - var(--n)) var(--s), calc(100% - var(--s)) var(--s), calc(100% - var(--s)) var(--n), 100% var(--n),
        100% calc(100% - var(--n)), calc(100% - var(--s)) calc(100% - var(--n)), calc(100% - var(--s)) calc(100% - var(--s)), calc(100% - var(--n)) calc(100% - var(--s)), calc(100% - var(--n)) 100%,
        var(--n) 100%, var(--n) calc(100% - var(--s)), var(--s) calc(100% - var(--s)), var(--s) calc(100% - var(--n)), 0 calc(100% - var(--n)),
        0 var(--n), var(--s) var(--n), var(--s) var(--s), var(--n) var(--s)
    );
}

.notch-frame::before {
    content: "";
    position: absolute;
    inset: 2px;
    background: linear-gradient(180deg, #18214a 0%, var(--navy-900) 100%);
}

.notch-frame::after {
    content: "";
    position: absolute;
    inset: 12px;
    border: 1px solid rgba(233, 196, 106, 0.6);
}

.notch-frame--card {
    background: var(--gold-700);
}

.notch-frame--card::before {
    inset: 3px;
    background: var(--grad-card);
}

.notch-frame--card::after {
    inset: 7px;
    border-color: rgba(138, 100, 24, 0.55);
}

.notch-frame--ivory::before {
    background: var(--ivory);
}

.notch-frame--ivory::after {
    border-color: var(--gold-600);
}

/* ============================================
   HERO (offer panel over full-bleed scene)
   ============================================ */
.hero {
    position: relative;
    isolation: isolate;
    padding: 84px 0 64px;
    text-align: center;
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -3;
    background-color: var(--navy-800);
    background-image: var(--hero-bg);
    background-position: var(--hero-pos, center);
    background-size: cover;
    background-repeat: no-repeat;
}

.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
        radial-gradient(ellipse 70% 60% at 50% 50%, rgba(11, 16, 40, 0.35) 0%, rgba(11, 16, 40, 0.1) 60%, rgba(11, 16, 40, 0.5) 100%),
        linear-gradient(180deg, rgba(11, 16, 40, 0.25) 0%, transparent 30%, rgba(11, 16, 40, 0.55) 100%);
}

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

.hero__stage {
    position: relative;
    isolation: isolate;
    width: 100%;
    max-width: 480px;
}

.hero__burst {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: -1;
    width: 165%;
    max-width: 780px;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    line-height: 0;
}

.hero__burst svg {
    width: 100%;
    height: 100%;
}

.hero__panel {
    position: relative;
    isolation: isolate;
    padding: 64px 22px 54px;
    color: var(--cream);
    box-shadow: var(--shadow-deep);
}

.hero__medallion {
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: var(--grad-gold);
    color: var(--navy-900);
    border: 3px solid var(--navy-900);
    box-shadow: 0 0 0 2px var(--gold-600), var(--shadow-gold);
    transform: translate(-50%, -55%);
}

.hero__title {
    margin: 0 0 0.5rem;
    color: var(--gold);
    background: var(--grad-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero--offer .hero__title {
    font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.3rem);
    font-weight: 600;
    color: var(--cream);
    background: none;
    -webkit-text-fill-color: currentColor;
}

.hero__eyebrow {
    margin: 0 0 0.75rem;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gold-300);
}

.hero__offer {
    margin: 0 0 1.25rem;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: clamp(1.75rem, 1.2rem + 2.6vw, 2.7rem);
    line-height: 1.14;
    color: var(--gold);
    background: var(--grad-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero__offer span {
    display: block;
}

.hero__note {
    margin: -0.5rem 0 1.1rem;
    font-weight: 600;
    color: var(--gold-100);
}

.hero__split {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    list-style: none;
    margin: 0 0 1.1rem;
    padding: 0;
}

.hero__split li {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0 6px;
    line-height: 1.3;
}

.hero__split li + li {
    border-left: 1px solid var(--gold-600);
}

.hero__split strong {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--gold);
}

.hero__split span {
    font-size: 0.875rem;
    color: var(--cream-muted);
}

.hero__intro {
    margin: 0 auto 1rem;
    max-width: 44ch;
    color: var(--cream);
}

.hero__more {
    margin: 0 0 0.5rem;
}

.hero__micro {
    margin: 0;
    font-size: 0.875rem;
    color: var(--cream-muted);
}

.hero__cta {
    position: absolute;
    left: 50%;
    bottom: 0;
    z-index: 2;
    max-width: calc(100% - 24px);
    transform: translate(-50%, 50%);
}

.hero__cta:hover {
    transform: translate(-50%, calc(50% - 1px));
}

@media (min-width: 768px) {
    .hero {
        padding: 112px 0 92px;
    }

    .hero__panel {
        padding: 72px 40px 62px;
    }

    .hero__medallion {
        width: 96px;
        height: 96px;
    }
}

@media (min-width: 1024px) {
    .hero {
        min-height: 580px;
        display: flex;
        align-items: center;
        padding: 128px 0 100px;
    }

    .hero__container {
        width: 100%;
    }
}

/* ============================================
   DECO CARDS & TILES
   ============================================ */
.card-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 72px 28px;
    justify-items: center;
    margin-top: 56px;
}

.card-grid > * {
    width: 100%;
    max-width: 380px;
}

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

    .card-grid > * {
        max-width: none;
    }

    .card-grid--2 {
        max-width: 760px;
        margin-inline: auto;
    }
}

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

.deco-card {
    position: relative;
    isolation: isolate;
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 16px 16px 0;
    margin-bottom: 26px;
    color: var(--navy-900);
    text-align: center;
    filter: drop-shadow(0 14px 22px rgba(15, 22, 51, 0.28));
}

.deco-card__crown {
    position: absolute;
    bottom: 100%;
    left: 50%;
    z-index: -2;
    width: 128px;
    line-height: 0;
    transform: translate(-50%, 8px);
}

.deco-card__crown svg {
    width: 100%;
    height: auto;
}

.deco-card__media {
    border-radius: 10px;
    overflow: hidden;
    border: 2px solid var(--gold-700);
    aspect-ratio: 10 / 7;
    background: var(--navy-800);
}

.deco-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.deco-card__icon {
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    margin: 8px auto 4px;
    border-radius: 50%;
    background: var(--navy-900);
    color: var(--gold);
    box-shadow: 0 0 0 2px var(--gold-700), 0 0 0 6px rgba(15, 22, 51, 0.15);
}

.deco-card__title {
    margin: 14px 0 10px;
    padding-bottom: 12px;
    font-size: 1.3rem;
    color: var(--navy-900);
    position: relative;
}

.deco-card__title::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 64%;
    height: 5px;
    border-radius: 3px;
    background: var(--navy-900);
    transform: translateX(-50%);
}

.deco-card__text {
    margin: 0 0 14px;
    color: var(--ink);
    font-size: 1rem;
    line-height: 1.55;
}

.deco-card__text a {
    color: #3a2706;
}

.deco-card__cta {
    align-self: center;
    margin-top: auto;
    min-width: 150px;
    transform: translateY(50%);
    border-color: var(--gold-700);
    box-shadow: 0 6px 16px rgba(15, 22, 51, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.deco-card__cta:hover {
    transform: translateY(calc(50% - 1px));
}

.tile-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    list-style: none;
    margin: 4px 0 18px;
    padding: 0;
}

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

.tile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    min-height: 80px;
    padding: 10px 4px 7px;
    border-radius: 10px;
    overflow: hidden;
    color: var(--gold-300);
    background: linear-gradient(160deg, #2a3d85 0%, var(--navy-900) 100%);
    box-shadow: inset 0 0 0 1px rgba(246, 226, 166, 0.4), 0 3px 8px rgba(15, 22, 51, 0.35);
}

.tile::before {
    content: "";
    position: absolute;
    inset: 0 0 55% 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
}

.tile:nth-child(4n + 2) { background: linear-gradient(160deg, #6a35a0 0%, #2e1450 100%); }
.tile:nth-child(4n + 3) { background: linear-gradient(160deg, #23805f 0%, #0f3a2c 100%); }
.tile:nth-child(4n + 4) { background: linear-gradient(160deg, #8f2740 0%, #3e0d19 100%); }

.tile__icon {
    position: relative;
}

.tile__label {
    position: relative;
    max-width: 100%;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    background: #ffffff;
    color: var(--navy-900);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

/* ============================================
   LISTS, MEDALLIONS, BADGES
   ============================================ */
.chev-list {
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
    display: grid;
    gap: 18px;
}

.chev-list li {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}

.chev-list .icon {
    color: var(--gold);
    margin-top: 2px;
}

.medallion {
    display: inline-grid;
    place-items: center;
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--navy-900);
    color: var(--gold);
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 1.25rem;
    box-shadow: 0 0 0 2px var(--gold-600), 0 0 0 5px rgba(233, 196, 106, 0.18);
}

.medallion--gold {
    background: var(--grad-gold);
    color: var(--navy-900);
    box-shadow: 0 0 0 2px var(--navy-900), 0 0 0 4px var(--gold-600);
}

.badge-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 28px;
    list-style: none;
    margin: 28px 0 0;
    padding: 0;
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    color: #e3d6b4;
    font-size: 0.9375rem;
    font-weight: 500;
}

.badge .icon {
    color: #d8c79c;
}

.badge-18 {
    display: inline-grid;
    place-items: center;
    flex-shrink: 0;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--grad-gold);
    color: var(--navy-900);
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 1.375rem;
    line-height: 1;
    box-shadow: 0 0 0 3px var(--espresso), 0 0 0 5px var(--gold-600), var(--shadow-gold);
}

.badge-18--sm {
    width: 54px;
    height: 54px;
    font-size: 1.05rem;
    box-shadow: 0 0 0 3px var(--navy-900), 0 0 0 4px var(--gold-600);
}

/* ============================================
   DATA TABLE (stacked cards on mobile)
   ============================================ */
.tbl-wrap {
    margin: 28px 0;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 1rem;
    color: var(--ink);
}

.data-table caption {
    text-align: left;
    font-weight: 600;
    margin-bottom: 10px;
}

.data-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

.data-table tr {
    display: block;
    margin-bottom: 16px;
    padding: 14px 16px;
    background: #fffaf0;
    border: 1px solid var(--gold-600);
    border-radius: var(--radius);
    box-shadow: 0 6px 16px rgba(15, 22, 51, 0.08);
}

.data-table td {
    display: grid;
    grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr);
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(184, 137, 44, 0.35);
    text-align: left;
}

.data-table td:last-child {
    border-bottom: 0;
}

.data-table td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--link-ivory);
}

@media (min-width: 768px) {
    .data-table thead {
        position: static;
        width: auto;
        height: auto;
        overflow: visible;
        clip: auto;
        display: table-header-group;
    }

    .data-table tr {
        display: table-row;
        margin: 0;
        padding: 0;
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .data-table th {
        padding: 14px 16px;
        background: var(--grad-gold);
        color: var(--navy-900);
        font-weight: 700;
        text-align: left;
    }

    .data-table td {
        display: table-cell;
        padding: 14px 16px;
        border-bottom: 1px solid rgba(184, 137, 44, 0.5);
        vertical-align: top;
    }

    .data-table td::before {
        content: none;
    }

    .data-table tbody tr:nth-child(even) td {
        background: rgba(233, 196, 106, 0.08);
    }
}

/* ============================================
   NOTE BOX (compliance callout)
   ============================================ */
.note-box {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 14px;
    margin: 28px 0;
    padding: 18px 18px 18px 16px;
    background: var(--navy-800);
    color: var(--cream);
    border: 1px solid rgba(233, 196, 106, 0.45);
    border-left: 5px solid var(--amber);
    border-radius: 10px;
    text-align: left;
}

.note-box__icon {
    color: var(--amber);
    line-height: 0;
}

.note-box__title {
    margin: 0 0 4px;
    font-weight: 700;
    color: var(--gold-100);
}

.note-box p {
    margin: 0 0 0.5em;
}

.note-box p:last-child {
    margin-bottom: 0;
}

.note-box a {
    color: var(--gold);
}

/* ============================================
   FAQ (native details)
   ============================================ */
.faq-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    max-width: 820px;
    margin-inline: auto;
}

.faq-item {
    border-bottom: 1px dashed rgba(233, 196, 106, 0.55);
}

.faq-item__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 56px;
    padding: 14px 0;
    font-weight: 600;
    font-size: 1.0625rem;
    color: var(--cream);
    cursor: pointer;
    list-style: none;
}

.faq-item__q::-webkit-details-marker {
    display: none;
}

.faq-item__mark {
    position: relative;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1.5px solid var(--gold);
}

.faq-item__mark::before,
.faq-item__mark::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 12px;
    height: 2px;
    background: var(--gold);
    transform: translate(-50%, -50%);
    transition: transform 0.25s ease;
}

.faq-item__mark::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

.faq-item[open] .faq-item__mark::after {
    transform: translate(-50%, -50%) rotate(0deg);
}

.faq-item__a {
    padding: 0 0 18px;
    color: var(--cream-muted);
}

.band--ivory .faq-item {
    border-bottom-color: rgba(184, 137, 44, 0.7);
}

.band--ivory .faq-item__q {
    color: var(--ink);
}

.band--ivory .faq-item__mark,
.band--ivory .faq-item__mark::before,
.band--ivory .faq-item__mark::after {
    border-color: var(--link-ivory);
}

.band--ivory .faq-item__mark::before,
.band--ivory .faq-item__mark::after {
    background: var(--link-ivory);
}

.band--ivory .faq-item__a {
    color: var(--ink-soft);
}

/* ============================================
   RESPONSIBLE GAMING BAND
   ============================================ */
.rg-band__inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    max-width: 920px;
}

.rg-band__title {
    font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.7rem);
    margin-bottom: 0.4em;
}

.rg-band__text p {
    color: var(--cream);
}

@media (min-width: 768px) {
    .rg-band__inner {
        flex-direction: row;
        align-items: center;
        gap: 32px;
    }

    .badge-18 {
        width: 88px;
        height: 88px;
        font-size: 1.6rem;
    }

    .badge-18--sm {
        width: 54px;
        height: 54px;
        font-size: 1.05rem;
    }
}

/* ============================================
   CTA BAND
   ============================================ */
.cta-band {
    text-align: center;
    padding-block: 72px;
}

.cta-band__container {
    display: flex;
    justify-content: center;
}

.cta-band__stage {
    position: relative;
    isolation: isolate;
    width: 100%;
    max-width: 640px;
}

.cta-band__burst {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: -1;
    width: 150%;
    max-width: 900px;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    line-height: 0;
}

.cta-band__burst svg {
    width: 100%;
    height: 100%;
}

.cta-band__panel {
    position: relative;
    isolation: isolate;
    padding: 40px 22px 36px;
    box-shadow: var(--shadow-deep);
}

.cta-band__title {
    font-size: clamp(1.3rem, 1rem + 1.3vw, 1.9rem);
    color: var(--gold);
    background: var(--grad-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.cta-band__text {
    margin-bottom: 1.4rem;
    color: var(--cream);
}

.cta-band__micro {
    margin: 1rem 0 0;
    font-size: 0.875rem;
    color: var(--cream-muted);
}

@media (min-width: 768px) {
    .cta-band__panel {
        padding: 52px 48px 44px;
    }
}

@media (min-width: 1024px) {
    .cta-band {
        padding-block: 96px;
    }
}

/* ============================================
   FOOTER
   ============================================ */
.site-footer {
    position: relative;
    padding: 48px 0 calc(var(--fan) + 8px);
    border-top: 2px solid var(--gold-700);
    background: var(--navy-900);
    text-align: center;
}

.site-footer__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

.footer-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 28px;
    list-style: none;
    margin: 0;
    padding: 0 0 20px;
    border-bottom: 1px solid rgba(233, 196, 106, 0.35);
}

.footer-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--cream);
    font-weight: 500;
    text-decoration: none;
}

.footer-nav a:hover {
    color: var(--gold);
    text-decoration: underline;
}

.footer-legal {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    max-width: 820px;
}

.footer-legal__text p {
    font-size: 0.9375rem;
    color: var(--cream-muted);
}

.footer-legal__text strong {
    color: var(--gold-100);
}

.footer-copy {
    margin: 0;
    font-size: 0.875rem;
    color: var(--cream-muted);
}

@media (min-width: 768px) {
    .footer-legal {
        flex-direction: row;
        align-items: flex-start;
        text-align: left;
    }
}

/* ============================================
   COOKIE BANNER (RODO)
   ============================================ */
.cookie-banner {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 120;
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 760px;
    margin-inline: auto;
    padding: 18px;
    background: var(--navy-950);
    color: var(--cream);
    border: 1px solid var(--gold-600);
    border-radius: 14px;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
}

.cookie-banner__title {
    margin: 0 0 4px;
    font-weight: 700;
    color: var(--gold);
}

.cookie-banner__text {
    margin: 0;
    font-size: 0.9375rem;
    color: var(--cream-muted);
}

.cookie-banner__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.cookie-banner__actions .btn {
    flex: 1 1 140px;
}

@media (min-width: 768px) {
    .cookie-banner {
        flex-direction: row;
        align-items: center;
        bottom: 20px;
        padding: 20px 24px;
    }

    .cookie-banner__actions {
        flex-wrap: nowrap;
        flex-shrink: 0;
    }

    .cookie-banner__actions .btn {
        flex: 0 0 auto;
    }
}

/* ============================================
   HOMEPAGE SECTIONS
   ============================================ */

/* Game categories (ivory) */
.games-more {
    margin: 8px 0 0;
    text-align: center;
}

/* Bonus Crab (emerald, frameless artwork on bottom edge) */
.crab-band {
    padding-block: 40px 0;
}

.crab {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    align-items: end;
}

.crab__media {
    position: relative;
    isolation: isolate;
    width: 100%;
    max-width: 420px;
    margin-inline: auto;
    line-height: 0;
}

.crab__media::before {
    content: "";
    position: absolute;
    inset: 4% -6% 0;
    z-index: -1;
    background: radial-gradient(closest-side, rgba(246, 214, 130, 0.42) 0%, rgba(233, 196, 106, 0.14) 55%, rgba(233, 196, 106, 0) 100%);
    pointer-events: none;
}

.crab__media img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

.crab__content {
    padding-bottom: 56px;
}

.crab__lead {
    color: var(--cream);
    font-size: 1.0625rem;
}

.crab .chev-list span {
    color: var(--cream);
}

.crab .chev-list strong {
    color: var(--gold-100);
}

@media (min-width: 1024px) {
    .crab-band {
        padding-top: 24px;
    }

    .crab {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 48px;
    }

    .crab__media {
        max-width: 520px;
    }

    .crab__content {
        align-self: center;
        padding-block: 48px 72px;
    }
}

/* VIP / cashback / challenges (lounge background) */
.vip-band {
    text-align: center;
}

.band--image.vip-band::after {
    background: linear-gradient(180deg, rgba(11, 16, 40, 0.94) 0%, rgba(11, 16, 40, 0.84) 50%, rgba(11, 16, 40, 0.6) 100%);
}

.vip-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
    list-style: none;
    margin: 0 auto 36px;
    padding: 0;
    max-width: 1000px;
}

.vip-col {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.vip-col__icon {
    width: 68px;
    height: 68px;
    margin-bottom: 14px;
}

.vip-col h3 {
    margin-bottom: 0.4em;
}

.vip-col p {
    max-width: 34ch;
    color: var(--cream);
}

.vip-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

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

/* Trust & licence (royal) */
.trust-band {
    text-align: center;
}

.trust-band h2 {
    color: var(--gold);
    background: var(--grad-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.trust-band__text {
    max-width: 780px;
    margin-inline: auto;
}

.trust-band__text p {
    color: var(--cream);
}

.trust-band__link {
    margin: 16px 0 0;
}

/* Responsible gaming + FAQ / about (espresso) */
.site-main > .rg-band + .faq-band {
    border-top: 0;
    padding-top: 8px;
}

.faq-about {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
    align-items: start;
}

.faq-about h2,
.about-block h3 {
    font-size: clamp(1.35rem, 1.15rem + 0.8vw, 1.7rem);
    margin-bottom: 0.5em;
}

.faq-about .faq-list {
    max-width: none;
    margin: 0;
}

.about-block p {
    color: var(--cream);
}

@media (min-width: 1024px) {
    .faq-about {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 64px;
    }
}

/* ============================================
   BONUSY PAGE
   ============================================ */

/* Welcome package: step rail + table (ivory) */
.bonus-footnote {
    margin: 0;
    font-size: 0.9375rem;
    color: var(--ink-soft);
    text-align: center;
}

.step-rail {
    position: relative;
    max-width: 960px;
    margin: 0 auto 8px;
}

.step-rail__list {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 14px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.step-rail__list li {
    display: flex;
    align-items: center;
    gap: 14px;
    font-weight: 600;
    color: var(--ink);
}

.step-rail__line {
    position: absolute;
    z-index: 0;
}

.step-rail__line--v {
    left: 25px;
    top: 26px;
    width: 2px;
    height: calc(100% - 52px);
}

.step-rail__line--h {
    display: none;
}

.step-cell {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 600;
}

.step-num {
    width: 40px;
    height: 40px;
    font-size: 1rem;
}

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

    .step-rail__list li {
        flex-direction: column;
        text-align: center;
        gap: 8px;
    }

    .step-rail__line--v {
        display: none;
    }

    .step-rail__line--h {
        display: block;
        left: 12.5%;
        top: 25px;
        width: 75%;
        height: 2px;
    }
}

/* Bonus Crab: copy left, artwork right */
.crab--reverse .crab__content {
    padding-bottom: 24px;
}

.crab--reverse .crab__content p:not(.crab__lead) {
    color: var(--cream);
}

.crab--reverse .crab__content a {
    color: var(--gold-100);
}

@media (min-width: 1024px) {
    .crab--reverse .crab__content {
        padding-block: 48px 72px;
    }
}

/* Crypto Welcome (navy) */
.crypto {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    align-items: center;
    margin-top: 28px;
}

.crypto__figure {
    padding: 28px 18px;
    text-align: center;
    border: 2px solid var(--gold-600);
    outline: 1px solid rgba(233, 196, 106, 0.5);
    outline-offset: 5px;
    background: linear-gradient(180deg, #18214a 0%, var(--navy-950) 100%);
}

.crypto__eyebrow {
    margin: 0 0 0.4rem;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold-300);
}

.crypto__amount {
    margin: 0 0 0.5rem;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: clamp(3rem, 2rem + 5vw, 4.75rem);
    line-height: 1;
    color: var(--gold);
    background: var(--grad-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.crypto__amount span {
    display: block;
    margin-top: 0.2em;
    font-size: 0.42em;
    line-height: 1.2;
}

.crypto__sub {
    margin: 0;
    color: var(--cream-muted);
    font-size: 0.9375rem;
}

.crypto__body p {
    color: var(--cream);
}

@media (min-width: 1024px) {
    .crypto {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        gap: 56px;
    }
}

/* VIP programme (image band + ladder) */
.vip-prog__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
    align-items: center;
}

.band--image.vip-prog::after {
    background: linear-gradient(180deg, rgba(11, 16, 40, 0.94) 0%, rgba(11, 16, 40, 0.88) 100%);
}

.vip-prog__text p {
    color: var(--cream);
}

.vip-prog__text .chev-list span {
    color: var(--cream);
}

.vip-prog__text .chev-list strong {
    color: var(--gold-100);
}

.vip-prog__warn {
    padding-left: 14px;
    border-left: 3px solid var(--amber);
}

.ladder {
    width: 100%;
    max-width: 440px;
    margin-inline: auto;
}

.ladder__svg {
    display: block;
    width: 100%;
    height: auto;
}

.ladder__labels {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    list-style: none;
    margin: 6px 0 0;
    padding: 0;
}

.ladder__labels li {
    padding: 0 2px;
    text-align: center;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--gold-100);
}

.ladder__note {
    margin: 12px 0 0;
    text-align: center;
    font-size: 0.875rem;
    color: var(--cream-muted);
}

@media (min-width: 1024px) {
    .band--image.vip-prog::after {
        background: linear-gradient(90deg, rgba(11, 16, 40, 0.96) 0%, rgba(11, 16, 40, 0.88) 48%, rgba(11, 16, 40, 0.55) 100%);
    }

    .vip-prog__grid {
        grid-template-columns: minmax(0, 11fr) minmax(0, 9fr);
        gap: 56px;
    }
}

/* Terms (espresso definition list) */
.terms-intro {
    max-width: 780px;
    color: var(--cream);
}

.terms {
    margin: 28px 0 0;
    max-width: 900px;
}

.terms__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
    padding: 16px 0;
    border-bottom: 1px dashed rgba(233, 196, 106, 0.55);
}

.terms__row:first-child {
    border-top: 1px dashed rgba(233, 196, 106, 0.55);
}

.terms dt {
    font-weight: 700;
    color: var(--gold);
}

.terms dd {
    margin: 0;
    color: var(--cream);
}

@media (min-width: 768px) {
    .terms__row {
        grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
        gap: 24px;
    }
}

/* ============================================
   GRY PAGE
   ============================================ */

/* Anchor offsets (header + sticky filter bar) */
[data-game-group],
#megaways-bonus-buy,
#odpowiedzialna-gra,
#dostawcy,
#wskazowki {
    scroll-margin-top: calc(var(--header-h) + 76px);
}

/* Filter intro */
.filter-intro {
    padding-block: 56px 24px;
    text-align: center;
}

.filter-intro h2 {
    font-size: clamp(1.35rem, 1.15rem + 0.8vw, 1.7rem);
}

.filter-intro__text {
    max-width: 560px;
    margin-inline: auto;
    color: var(--cream);
}

.filter-intro__count {
    margin-top: 0.5rem;
    font-size: 0.9375rem;
    color: var(--cream-muted);
}

.filter-intro__count strong {
    color: var(--gold-100);
}

/* Sticky chip bar */
.filter-bar {
    position: sticky;
    top: var(--header-h);
    z-index: 90;
    background: rgba(15, 22, 51, 0.88);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-top: 2px solid var(--gold-700);
    border-bottom: 1px solid var(--gold-600);
}

.filter-bar__list {
    display: flex;
    gap: 10px;
    max-width: 1120px;
    margin: 0 auto;
    padding: 10px 14px;
    list-style: none;
    overflow-x: auto;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}

.chip {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 1.1rem;
    white-space: nowrap;
    border: 1.5px solid var(--gold);
    border-radius: var(--radius-pill);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--gold);
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.chip:hover {
    background: rgba(233, 196, 106, 0.16);
    color: var(--gold-100);
}

.chip.is-active,
.chip.is-active:hover {
    background: var(--grad-gold);
    border-color: var(--gold-100);
    color: var(--navy-900);
}

@media (min-width: 768px) {
    .filter-bar__list {
        justify-content: center;
        padding-inline: 24px;
    }
}

/* Explainer text blocks */
.explain {
    max-width: 760px;
    margin: 0 auto;
}

.explain > .chev-list {
    margin-bottom: 1.2rem;
}

.explain .chev-list strong {
    color: var(--gold-100);
}

/* Live casino: centred emerald glow */
.live-band {
    background:
        radial-gradient(ellipse 65% 60% at 50% 58%, rgba(52, 120, 92, 0.6) 0%, transparent 72%),
        var(--emerald);
}

/* Crash: rising curve behind cards */
.crash-band__curve {
    position: absolute;
    inset: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    max-width: none;
    pointer-events: none;
}

/* Providers panel */
.providers-panel {
    position: relative;
    max-width: 820px;
    margin: 0 auto;
    padding: 36px 22px;
    text-align: center;
    color: var(--ink);
    background: #fffaf0;
    border: 2px solid var(--gold-600);
    outline: 1px solid var(--gold-600);
    outline-offset: -9px;
}

.providers-panel p {
    color: var(--ink);
}

.emblem-row {
    display: flex;
    justify-content: center;
    gap: 26px;
    margin-bottom: 18px;
    color: var(--gold-700);
}

@media (min-width: 768px) {
    .providers-panel {
        padding: 48px 56px;
    }
}

/* Mobile tips: numbered medallions */
.tips-list {
    max-width: 860px;
    margin: 28px 0 0;
    padding: 0;
    list-style: none;
    counter-reset: tip;
    display: grid;
    gap: 18px;
}

.tips-list li {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
    counter-increment: tip;
}

.tips-list li::before {
    content: counter(tip);
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--grad-gold);
    color: var(--navy-900);
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 1.125rem;
    box-shadow: 0 0 0 2px var(--espresso), 0 0 0 4px var(--gold-600);
}

.tips-list span {
    padding-top: 8px;
    color: var(--cream);
}

.tips-list strong {
    color: var(--gold-100);
}

/* Responsible gaming tools */
.tools-head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    max-width: 900px;
}

.tools-head .badge-18 {
    box-shadow: 0 0 0 3px var(--royal), 0 0 0 5px var(--gold-600), var(--shadow-gold);
}

.tools-head p {
    color: var(--cream);
}

.tools-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    margin: 28px 0 0;
    padding: 0;
    list-style: none;
}

.tool-tile {
    padding: 22px 16px;
    text-align: center;
    background: var(--navy-900);
    border: 1.5px solid var(--gold-600);
    border-radius: var(--radius);
}

.tool-tile__icon {
    display: inline-block;
    margin-bottom: 8px;
    color: var(--gold);
    line-height: 0;
}

.tool-tile h3 {
    font-size: 1.0625rem;
    margin-bottom: 0.4em;
}

.tool-tile p {
    color: var(--cream);
    font-size: 0.9375rem;
}

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

@media (min-width: 768px) {
    .tools-head {
        flex-direction: row;
        align-items: center;
        gap: 32px;
    }
}

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

/* FAQ alignment */
.gry-faq .faq-list {
    margin-left: 0;
}

/* ============================================
   PLATNOSCI PAGE
   ============================================ */

/* Method cell with icon */
.method {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.method .icon {
    flex-shrink: 0;
    color: var(--gold-700);
}

.band--ivory .note-box a {
    color: var(--gold);
}

/* Withdrawal flow (emerald) */
.flow {
    position: relative;
    max-width: 960px;
    margin: 0 auto;
    --tail: 110px;
}

.flow__list {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 28px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.flow__list li {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.flow__list h3 {
    margin-bottom: 0.3em;
    color: var(--gold-100);
}

.flow__list p {
    color: var(--cream);
}

.flow__line {
    position: absolute;
    z-index: 0;
    max-width: none;
    overflow: visible;
}

.flow__line--v {
    display: block;
    left: 20px;
    top: 26px;
    width: 12px;
    height: calc(100% - 26px - var(--tail));
}

.flow__line--h {
    display: none;
}

.flow__after {
    max-width: 760px;
    margin: 36px auto 0;
    color: var(--cream);
    text-align: center;
}

.flow__after a {
    color: var(--gold-100);
}

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

    .flow__list li {
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;
        gap: 14px;
        padding-inline: 14px;
        text-align: center;
    }

    .flow__line--v {
        display: none;
    }

    .flow__line--h {
        display: block;
        left: 16.667%;
        top: 20px;
        width: calc(66.667% - 26px);
        height: 12px;
    }
}

/* KYC cards (espresso) */
.kyc-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.kyc-card {
    padding: 24px 18px;
    text-align: center;
    background: var(--navy-900);
    border: 1.5px solid var(--gold-600);
    border-radius: var(--radius);
    outline: 1px solid rgba(233, 196, 106, 0.35);
    outline-offset: -7px;
}

.kyc-card__icon {
    display: inline-block;
    margin-bottom: 10px;
    color: var(--gold);
    line-height: 0;
}

.kyc-card h3 {
    font-size: 1.125rem;
    margin-bottom: 0.4em;
}

.kyc-card p {
    color: var(--cream);
    font-size: 0.9375rem;
}

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

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

/* Security / vault (navy) */
.vault {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    align-items: center;
}

.vault__content p,
.vault .chev-list span {
    color: var(--cream);
}

.vault .chev-list strong {
    color: var(--gold-100);
}

.vault__media {
    position: relative;
    isolation: isolate;
    width: 100%;
    max-width: 380px;
    margin-inline: auto;
    line-height: 0;
}

.vault__media::before {
    content: "";
    position: absolute;
    inset: -8%;
    z-index: -1;
    background: radial-gradient(closest-side, rgba(246, 214, 130, 0.38) 0%, rgba(233, 196, 106, 0.12) 60%, rgba(233, 196, 106, 0) 100%);
    pointer-events: none;
}

.vault__media img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

@media (min-width: 1024px) {
    .vault {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
        gap: 56px;
    }

    .vault__media {
        max-width: 440px;
    }
}

/* About / licence panel (ivory) */
.providers-panel--left {
    text-align: left;
}

.providers-panel--left h2 {
    text-align: center;
}

.providers-panel--left p {
    max-width: 68ch;
    margin-inline: auto;
}

.providers-panel--left p + p {
    margin-top: 1em;
}

/* ============================================
   REDUCED MOTION
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        transition: none !important;
        animation: none !important;
    }

    .btn--gold:hover,
    .hero__cta:hover,
    .deco-card__cta:hover {
        transform: none;
    }

    .hero__cta,
    .hero__cta:hover {
        transform: translate(-50%, 50%);
    }

    .deco-card__cta,
    .deco-card__cta:hover {
        transform: translateY(50%);
    }
}