/*
 * IRIS CASINO - design system
 * Pastel candy world, cream parchment surfaces, plum ink, caramel-gold accents.
 */

:root {
    --plum-950: #2a0f27;
    --plum-900: #3d1a3a;
    --plum-850: #4a2246;
    --plum-800: #4a1f46;
    --plum-700: #5a2a55;
    --plum-600: #6f3a69;
    --ink: #3a1636;
    --ink-soft: #5b2d56;

    --lilac-50: #f8f1fb;
    --lilac-100: #efe4f5;
    --lilac-200: #e2d0ee;
    --lilac-300: #c9b0e2;
    --lilac-on-plum: #ecdcf4;

    --cream: #fdf3e1;
    --cream-2: #f8e8cc;
    --parchment: #f9ecd3;
    --blush: #fbe3ea;
    --peach: #ffd8b5;

    --pink-300: #ff9fcb;
    --pink-500: #ff4f9a;
    --pink-600: #e0337a;
    --strawberry: #c41f4f;
    --caramel: #d39a4f;
    --gold: #e9b949;
    --gold-soft: #f6d78f;
    --sky: #9fdcff;
    --lilac-btn: #bba5ff;
    --link: #a3195c;

    --font-display: "Fredoka", "Baloo 2", "Trebuchet MS", system-ui, sans-serif;
    --font-body: "Nunito", "Segoe UI", system-ui, -apple-system, sans-serif;

    --radius-sm: 12px;
    --radius: 20px;
    --radius-lg: 32px;
    --radius-pill: 999px;

    --shadow-soft: 0 10px 28px rgba(90, 42, 85, 0.18);
    --shadow-pink: 0 18px 46px rgba(255, 79, 154, 0.28);
    --stripe: repeating-linear-gradient(-45deg, var(--pink-500) 0 9px, #ffffff 9px 18px);
    --gold-line: linear-gradient(90deg, #c98b3e, #f3cf7f 20%, #e2a64c 50%, #f3cf7f 80%, #c98b3e);

    --container: 1120px;
    --container-narrow: 880px;
    --gutter: clamp(1rem, 4vw, 2rem);
    --header-bottom: 76px;
}

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

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

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

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

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

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

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

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

details {
    height: fit-content;
}

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

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

section {
    overflow: clip;
}

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    overflow-x: clip;
}

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--ink);
    background: var(--lilac-100);
    overflow-x: clip;
    text-rendering: optimizeLegibility;
}

body.menu-locked {
    overflow: hidden;
}

img {
    display: block;
}

h1, h2, h3, h4 {
    font-family: var(--font-display);
    color: var(--plum-800);
    line-height: 1.15;
    margin: 0 0 0.6em;
    font-weight: 700;
    text-wrap: balance;
}

h1 { font-size: clamp(2rem, 1.3rem + 3.4vw, 3.4rem); }
h2 { font-size: clamp(1.65rem, 1.2rem + 2.1vw, 2.5rem); text-shadow: 0 2px 0 rgba(255, 255, 255, 0.55); }
h3 { font-size: clamp(1.2rem, 1.05rem + 0.7vw, 1.45rem); font-weight: 600; }

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

a { color: var(--link); }
a:hover { color: var(--strawberry); }

:focus-visible {
    outline: 3px solid var(--pink-600);
    outline-offset: 3px;
    border-radius: 6px;
}

strong { font-weight: 800; }

.skip-link {
    position: absolute;
    left: 1rem;
    top: -4rem;
    z-index: 100;
    padding: 0.75rem 1.25rem;
    background: var(--plum-900);
    color: #fff3df;
    border-radius: var(--radius-sm);
    font-weight: 800;
    text-decoration: none;
}

.skip-link:focus { top: 1rem; color: #fff3df; }

.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;
}

.lead {
    font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
    line-height: 1.6;
}

.text-link {
    font-weight: 800;
    color: var(--link);
    text-decoration: underline;
    text-underline-offset: 0.2em;
    text-decoration-thickness: 2px;
}

.text-link:hover { color: var(--strawberry); }

/* ============================================
   LAYOUT
   ============================================ */

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

.container--narrow {
    max-width: calc(var(--container-narrow) + 2 * var(--gutter));
}

.band {
    position: relative;
    isolation: isolate;
    padding-block: clamp(3rem, 7vw, 5.5rem);
}

.band--swirl::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background-color: var(--lilac-100);
    background-image: url("./assets/db9898a6655426ecbd62d15f68d51220.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.band--lilac {
    background: linear-gradient(180deg, var(--lilac-100), var(--lilac-50));
}

.band--plum {
    background: var(--plum-900);
    color: var(--lilac-on-plum);
}

.band--plum h2,
.band--plum h3 {
    color: #fff3df;
    text-shadow: none;
}

.band--plum a:not([class]) { color: #ffd3e8; }
.band--plum a:not([class]):hover { color: #ffffff; }

/* Full-bleed illustrated environment: <img class="band__bg"> as first child */
.band__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: var(--bg-pos, center);
    z-index: -2;
}

.band--haze::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(243, 233, 248, 0.55), rgba(243, 233, 248, 0.25) 40%, rgba(243, 233, 248, 0.55));
}

/* Card that lifts across the seam above it */
.band.band--lift {
    overflow: visible;
    z-index: 5;
}

.band--lift > .container {
    position: relative;
    margin-top: calc(-1 * var(--lift, clamp(4rem, 9vw, 7rem)));
}

.section-head {
    text-align: center;
    max-width: 46rem;
    margin: 0 auto clamp(1.5rem, 4vw, 2.5rem);
}

.section-head h2 { margin: 0; }

.section-head h2::after {
    content: "";
    display: block;
    width: 7rem;
    height: 8px;
    margin: 0.65rem auto 0;
    border-radius: var(--radius-pill);
    background: var(--stripe);
    box-shadow: 0 0 0 2px #ffffff, 0 4px 10px rgba(255, 79, 154, 0.35);
}

.section-head p { margin: 1rem 0 0; }

.split {
    display: grid;
    gap: clamp(1.5rem, 4vw, 2.5rem);
    align-items: center;
}

.media-frame {
    background: var(--cream);
    border: 3px solid var(--caramel);
    border-radius: 26px;
    padding: 8px;
    box-shadow: var(--shadow-soft);
}

.media-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 18px;
}

.art-glow {
    position: relative;
    isolation: isolate;
}

.art-glow::before {
    content: "";
    position: absolute;
    inset: 6%;
    z-index: -1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 111, 170, 0.5), rgba(255, 111, 170, 0) 70%);
    filter: blur(12px);
}

.art-glow--gold::before {
    background: radial-gradient(circle, rgba(246, 205, 110, 0.6), rgba(246, 205, 110, 0) 70%);
}

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

@media (min-width: 1024px) {
    .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .split--wide-left { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
}

/* ============================================
   HEADER & NAVIGATION
   ============================================ */

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
}

.site-header::before,
.site-header::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.site-header::after {
    background: linear-gradient(180deg, rgba(247, 238, 250, 0.78), rgba(247, 238, 250, 0));
}

.site-header::before {
    background: rgba(248, 240, 251, 0.92);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: 0 6px 24px rgba(61, 26, 58, 0.14);
    border-bottom: 3px solid var(--gold);
    opacity: 0;
}

.site-header.is-scrolled::before,
.site-header.menu-open::before {
    opacity: 1;
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 76px;
    padding-block: 0.5rem;
}

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

/* Glossy candy-letter wordmark */
.wordmark {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    line-height: 0.86;
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: 0.01em;
    filter: drop-shadow(0 2px 0 #7a2558) drop-shadow(0 5px 7px rgba(61, 26, 58, 0.3));
}

.wordmark__iris {
    font-size: clamp(1.9rem, 1.5rem + 1.5vw, 2.6rem);
    color: #c4246f;
}

.wordmark__casino {
    font-size: clamp(1.2rem, 1rem + 0.9vw, 1.65rem);
    color: #d98a22;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .wordmark__iris {
        background: linear-gradient(180deg, #ffa6d6 0%, #ff4f9a 48%, #b81d66 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        -webkit-text-stroke: 1px #fff3df;
    }

    .wordmark__casino {
        background: linear-gradient(180deg, #fff2b8 0%, #f5c04d 55%, #e08a2a 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        -webkit-text-stroke: 1px #8a2f62;
    }
}

.menu-toggle {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 48px;
    height: 48px;
    flex: none;
    padding: 0;
    border: 2px solid var(--caramel);
    border-radius: 16px;
    background: var(--cream);
    color: var(--plum-800);
    cursor: pointer;
    box-shadow: var(--shadow-soft);
}

.menu-toggle__bar {
    display: block;
    width: 22px;
    height: 3px;
    border-radius: 3px;
    background: currentColor;
    transition: transform 0.25s ease, opacity 0.2s ease;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(1) { transform: translateY(8px) 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(-8px) rotate(-45deg); }

/* Mobile drawer */
.site-nav {
    position: fixed;
    top: var(--header-bottom, 76px);
    left: 0;
    right: 0;
    bottom: 0;
    height: auto;
    z-index: 60;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 1.25rem var(--gutter) 2.5rem;
    background: var(--cream);
    border-top: 6px solid var(--pink-500);
    overflow-y: auto;
    overscroll-behavior: contain;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
}

.site-nav.is-open {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s;
}

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

.site-nav__link {
    display: flex;
    align-items: center;
    min-height: 52px;
    padding: 0.25rem 0.25rem;
    border-bottom: 2px dashed #ecc7a0;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.25rem;
    color: var(--plum-800);
    text-decoration: none;
    position: relative;
}

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

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

.site-nav__link[aria-current="page"]::before {
    content: "";
    width: 10px;
    height: 10px;
    margin-right: 0.6rem;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 0 3px rgba(233, 185, 73, 0.35);
}

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

.site-nav__actions .btn { width: 100%; }

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

    .menu-toggle { display: none; }

    .site-nav {
        position: static;
        flex-direction: row;
        align-items: center;
        gap: clamp(1rem, 2vw, 1.75rem);
        padding: 0;
        background: none;
        border: 0;
        overflow: visible;
        visibility: visible;
        opacity: 1;
        transform: none;
        transition: none;
    }

    .site-nav__list {
        flex-direction: row;
        align-items: center;
        gap: clamp(0.75rem, 1.6vw, 1.5rem);
    }

    .site-nav__link {
        min-height: 44px;
        padding: 0 0.15rem;
        border: 0;
        font-size: 1.05rem;
    }

    .site-nav__link[aria-current="page"]::before { content: none; }

    .site-nav__link[aria-current="page"]::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 4px;
        height: 3px;
        border-radius: 3px;
        background: var(--gold);
    }

    .site-nav__actions {
        display: flex;
        gap: 0.6rem;
    }

    .site-nav__actions .btn { width: auto; }
}

/* ============================================
   BUTTONS & CTA
   ============================================ */

.btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 48px;
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-pill);
    border: 2px solid transparent;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.0625rem;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.btn:hover { transform: translateY(-2px); }

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

.btn--candy {
    background: linear-gradient(180deg, #e8418a 0%, #c6215e 55%, #b01b4f 100%);
    border-color: var(--gold);
    color: #ffffff;
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.35), 0 6px 16px rgba(196, 31, 79, 0.35);
}

.btn--candy:hover { color: #ffffff; box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.35), 0 10px 22px rgba(196, 31, 79, 0.45); }

.btn--ghost {
    background: #fff7ea;
    border-color: var(--caramel);
    color: var(--plum-800);
    box-shadow: 0 4px 12px rgba(90, 42, 85, 0.12);
}

.btn--ghost:hover { color: var(--link); }

/* Glossy sky-to-lilac swirl pill */
.btn--swirl {
    min-width: min(100%, 17rem);
    min-height: 58px;
    padding: 0.9rem 2rem;
    overflow: hidden;
    isolation: isolate;
    background: linear-gradient(100deg, #a6e0ff 0%, #b9b3ff 55%, #d9b9ff 100%);
    border: 4px solid #e2a64c;
    color: #3a1638;
    font-size: 1.15rem;
    font-weight: 700;
    box-shadow:
        inset 0 3px 0 rgba(255, 255, 255, 0.75),
        inset 0 -5px 0 rgba(90, 42, 85, 0.18),
        0 0 0 2px #fff1d6,
        0 10px 22px rgba(90, 42, 85, 0.28);
}

.btn--swirl:hover {
    color: #3a1638;
    box-shadow:
        inset 0 3px 0 rgba(255, 255, 255, 0.75),
        inset 0 -5px 0 rgba(90, 42, 85, 0.18),
        0 0 0 2px #fff1d6,
        0 14px 30px rgba(90, 42, 85, 0.35);
}

.btn__swirl {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    z-index: -1;
    fill: none;
    stroke: #ffffff;
    stroke-opacity: 0.55;
    stroke-linecap: round;
}

.btn__label { position: relative; }

.cta-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    margin-top: 1.5rem;
}

.cta-group--center { align-items: center; text-align: center; }

.cta-microline {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: var(--plum-700);
}

.band--plum .cta-microline { color: var(--lilac-on-plum); }

@media (max-width: 479px) {
    .cta-group .btn--swirl { width: 100%; }
}

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

.hero {
    position: relative;
    isolation: isolate;
    padding-top: calc(var(--header-bottom, 76px) + 1.5rem);
    padding-bottom: clamp(5.5rem, 11vw, 9rem);
}

.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(243, 233, 248, 0.25) 0%, rgba(243, 233, 248, 0.72) 38%, rgba(243, 233, 248, 0.86) 100%);
}

.hero__inner {
    display: grid;
    gap: 1.25rem;
    align-items: center;
}

.hero__copy { position: relative; }

.hero__copy h1 { margin-bottom: 0.5em; }

.hero__lead {
    font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.2rem);
    font-weight: 600;
    max-width: 34rem;
    color: var(--ink);
}

.hero__art {
    order: -1;
    justify-self: center;
    width: min(60%, 20rem);
}

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

@media (min-width: 768px) {
    .hero__art { width: min(45%, 22rem); }
}

@media (min-width: 1024px) {
    .hero::after {
        background: radial-gradient(ellipse 52% 72% at 24% 52%, rgba(243, 233, 248, 0.86), rgba(243, 233, 248, 0.45) 62%, rgba(243, 233, 248, 0) 82%);
    }

    .hero__inner {
        grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
        min-height: min(74vh, 640px);
    }

    .hero__art {
        order: 0;
        width: min(100%, 30rem);
    }
}

/* ============================================
   SEAM (gold hairline + lollipop medallions)
   ============================================ */

.seam {
    --med: clamp(44px, 5vw, 72px);
    position: relative;
    z-index: 4;
    height: 4px;
    background: var(--gold-line);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6), 0 -1px 0 rgba(122, 37, 88, 0.15);
}

.seam .medallion {
    position: absolute;
    top: 50%;
    width: var(--med);
    height: var(--med);
    max-width: none;
    transform: translateY(-50%);
    filter: drop-shadow(0 4px 8px rgba(122, 37, 88, 0.3));
}

.seam .medallion:first-child { left: calc(var(--med) * -0.32); }
.seam .medallion:last-child { right: calc(var(--med) * -0.32); }

/* ============================================
   PARCHMENT CARD WITH CANDY-STRIPE BORDER
   ============================================ */

.stripe-card {
    --card-pad: clamp(1.25rem, 4vw, 2.5rem);
    position: relative;
    padding: var(--card-pad);
    border: 10px solid transparent;
    border-radius: var(--radius-lg);
    background:
        linear-gradient(180deg, #fdf4e3, #f7e6c8) padding-box,
        var(--stripe) border-box;
    box-shadow: 0 0 0 3px #f6c1d6, var(--shadow-pink);
    color: var(--ink);
}

.stripe-card--ribbon { margin-top: 2.75rem; }

.ribbon {
    position: relative;
    width: min(calc(100% + 2 * var(--card-pad, 1.5rem)), 34rem);
    min-height: 4.6rem;
    margin: calc(-1 * var(--card-pad, 1.5rem) - 10px - 2.4rem) 0 1.5rem 50%;
    transform: translateX(-50%);
    display: grid;
    place-items: center;
    padding: 0.5rem clamp(2.75rem, 14%, 5rem) 1.15rem;
    text-align: center;
}

.ribbon__shape {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    filter: drop-shadow(0 6px 10px rgba(122, 37, 88, 0.2));
}

.ribbon__text {
    position: relative;
    margin: 0;
    font-size: clamp(1.3rem, 1rem + 1.5vw, 2rem);
    color: var(--plum-800);
    line-height: 1.15;
    text-shadow: none;
}

/* ============================================
   RULES BOX ("Zasady w pigułce")
   ============================================ */

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

.rules-box__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    text-align: center;
}

.rules-box__icon { color: var(--plum-800); }

.rules-box__icon .icon {
    width: 3.25rem;
    height: 3.25rem;
    stroke-width: 1.5;
}

.rules-box__value {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.5rem);
    line-height: 1;
    color: var(--plum-800);
}

.rules-box__label {
    font-weight: 800;
    font-size: 0.95rem;
    color: var(--plum-700);
}

.rules-box__text {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.45;
}

.rules-box__note {
    margin: 1.5rem 0 0;
    padding-top: 1rem;
    border-top: 2px dashed #e8b9cc;
    text-align: center;
    font-weight: 600;
}

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

/* ============================================
   BONUS PILLS & TAG PILLS
   ============================================ */

.bonus-pills {
    list-style: none;
    margin: 1.25rem 0 0;
    padding: 0;
    display: grid;
    gap: 0.6rem;
    max-width: 24rem;
}

.bonus-pill {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-height: 50px;
    padding: 0.3rem 1rem 0.3rem 0.3rem;
    border-radius: var(--radius-pill);
    background: rgba(90, 42, 85, 0.9);
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.14), 0 6px 14px rgba(61, 26, 58, 0.25);
}

.bonus-pill__pct {
    flex: none;
    min-width: 4.75rem;
    padding: 0.3rem 0.7rem;
    border-radius: var(--radius-pill);
    background: linear-gradient(180deg, #ffe8d3, #ffcfa6);
    border: 2px solid var(--gold);
    color: var(--plum-900);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.15rem;
    text-align: center;
}

.bonus-pill__label {
    color: #fff1da;
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1.25;
}

.bonus-pill__extra {
    display: inline-block;
    color: #ffd8ea;
    font-weight: 800;
}

.tag-pills {
    list-style: none;
    margin: 1.25rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.tag-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 40px;
    padding: 0.3rem 1rem 0.3rem 0.4rem;
    border-radius: var(--radius-pill);
    background: rgba(90, 42, 85, 0.92);
    color: #fff1da;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1rem;
    box-shadow: 0 4px 12px rgba(61, 26, 58, 0.22);
}

.tag-pill:not(:has(.tag-pill__icon)) { padding-left: 1rem; }

.tag-pill__icon {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: linear-gradient(180deg, #ffe8d3, #ffcfa6);
    color: var(--plum-900);
}

.tag-pill__icon .icon { width: 18px; height: 18px; }

/* ============================================
   NEON PROVIDER / MECHANIC TILES
   ============================================ */

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

.neon-tile {
    --neon: #ff6ad5;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0.5rem 0.5rem 0.9rem;
    background: linear-gradient(180deg, #fff6e6, #f8e6c8);
    border-radius: 22px;
    box-shadow: 0 0 0 2px #efcf9c, var(--shadow-soft);
    transition: transform 0.2s ease;
}

.neon-tile:hover { transform: translateY(-3px); }
.neon-tile[hidden] { display: none; }

.neon-tile--magenta { --neon: #ff6ad5; }
.neon-tile--mint { --neon: #5ff5c8; }
.neon-tile--amber { --neon: #ffb547; }
.neon-tile--violet { --neon: #b48bff; }

.neon-tile__panel {
    display: grid;
    place-items: center;
    aspect-ratio: 16 / 10;
    border-radius: 16px;
    background: radial-gradient(circle at 50% 40%, #3b2468 0%, #241443 55%, #170c2c 100%);
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.08), inset 0 -12px 24px rgba(0, 0, 0, 0.35);
}

.neon-tile__glyph {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2.2rem, 1.6rem + 3vw, 3.6rem);
    line-height: 1;
    color: #fff9fe;
    text-align: center;
    padding-inline: 0.4rem;
    text-shadow:
        0 0 3px #ffffff,
        0 0 8px var(--neon),
        0 0 18px var(--neon),
        0 0 36px var(--neon);
}

.neon-tile__glyph:not(:empty) { overflow-wrap: anywhere; }

.neon-tile__name {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--plum-800);
    text-align: center;
    line-height: 1.2;
}

.neon-tile__caption {
    margin: 0;
    padding-inline: 0.4rem;
    font-size: 0.9375rem;
    line-height: 1.4;
    color: var(--ink-soft);
    text-align: center;
}

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

/* ============================================
   PILL ROWS
   ============================================ */

.pill-rows {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.6rem;
}

.pill-row {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-height: 54px;
    padding: 0.45rem 1.1rem 0.45rem 0.45rem;
    border-radius: 26px;
    background: linear-gradient(180deg, #fff6e6, #f9e7c9);
    border: 2px solid #efcf9c;
    box-shadow: 0 4px 12px rgba(90, 42, 85, 0.12);
}

.pill-row__icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: var(--plum-700);
    color: #ffe9c9;
}

.pill-row__icon .icon { width: 22px; height: 22px; }

.pill-row__text {
    line-height: 1.45;
    color: var(--ink);
}

.pill-row__text strong { color: var(--plum-800); }

/* ============================================
   FAQ ACCORDION
   ============================================ */

.faq-list {
    display: grid;
    gap: 0.8rem;
    align-items: start;
}

.faq-item {
    background: linear-gradient(180deg, #fff6e6, #fbecd2);
    border: 2px solid var(--gold);
    border-radius: 22px;
    box-shadow: 0 4px 14px rgba(90, 42, 85, 0.12);
}

.faq-item__q {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 56px;
    padding: 0.85rem 1.25rem;
    cursor: pointer;
    border-radius: 20px;
}

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

.faq-item__title {
    margin: 0;
    font-size: 1.075rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--plum-800);
}

.faq-item__chev {
    flex: none;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    color: var(--plum-700);
    transition: transform 0.25s ease;
}

.faq-item__chev .icon { width: 22px; height: 22px; stroke-width: 2.2; }

.faq-item[open] .faq-item__chev { transform: rotate(180deg); }

.faq-item__a {
    padding: 0 1.25rem 1.15rem;
}

.faq-item__a p { margin: 0; }

/* ============================================
   DATA TABLE
   ============================================ */

.data-table {
    border-radius: 18px;
}

.data-table table {
    width: 100%;
    min-width: 36rem;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 1rem;
}

.data-table caption {
    caption-side: top;
    text-align: left;
    padding: 0 0 0.75rem;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--plum-800);
}

.data-table thead th {
    background: var(--plum-800);
    color: #fff3df;
    text-align: left;
    padding: 0.85rem 1rem;
    font-family: var(--font-display);
    font-weight: 600;
}

.data-table thead th:first-child { border-top-left-radius: 14px; }
.data-table thead th:last-child { border-top-right-radius: 14px; }

.data-table tbody th,
.data-table tbody td {
    padding: 0.85rem 1rem;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid #ecd2b0;
}

.data-table tbody tr:nth-child(odd) { background: #fff7ea; }
.data-table tbody tr:nth-child(even) { background: var(--blush); }

.data-table tbody th {
    font-weight: 800;
    color: var(--plum-800);
}

.data-table tbody tr.is-highlight {
    background: linear-gradient(90deg, #fff1c9, #ffe3a1);
    box-shadow: inset 4px 0 0 var(--gold);
}

@media (max-width: 767px) {
    .data-table table { min-width: 0; }

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

    .data-table table,
    .data-table tbody,
    .data-table tr,
    .data-table tbody th,
    .data-table tbody td {
        display: block;
    }

    .data-table tbody tr {
        margin-bottom: 0.9rem;
        border: 2px solid #efcf9c;
        border-radius: 18px;
        overflow: hidden;
    }

    .data-table tbody th {
        background: linear-gradient(180deg, #ffe8d3, #ffcfa6);
        font-family: var(--font-display);
        font-size: 1.1rem;
        border-bottom: 2px solid var(--gold);
    }

    .data-table tbody td {
        display: grid;
        grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
        gap: 0.75rem;
    }

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

    .data-table tbody td::before {
        content: attr(data-label);
        font-weight: 800;
        color: var(--plum-700);
    }
}

/* ============================================
   STEP TRACK (candy-stripe conduit)
   ============================================ */

.step-track {
    --num: 64px;
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1.5rem;
}

.step-track::before {
    content: "";
    position: absolute;
    left: calc(var(--num) / 2 - 7px);
    top: calc(var(--num) / 2);
    bottom: calc(var(--num) / 2);
    width: 14px;
    border-radius: var(--radius-pill);
    background: var(--stripe);
    box-shadow: 0 0 0 3px #ffffff, 0 0 20px rgba(255, 79, 154, 0.55);
}

.step-track__item {
    position: relative;
    display: grid;
    grid-template-columns: var(--num) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.step-track__num {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: var(--num);
    height: var(--num);
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #ffffff, var(--cream) 60%, var(--cream-2));
    border: 4px solid var(--caramel);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.6rem;
    color: var(--plum-800);
    box-shadow: 0 6px 16px rgba(90, 42, 85, 0.25);
}

.step-track__body {
    padding: 0.9rem 1.1rem;
    border-radius: var(--radius);
    background: rgba(253, 243, 225, 0.95);
    box-shadow: var(--shadow-soft);
}

.step-track__title { margin: 0 0 0.3rem; }
.step-track__body p { margin: 0; }

@media (min-width: 768px) {
    .step-track {
        --num: 84px;
        grid-template-columns: repeat(var(--steps, 4), minmax(0, 1fr));
        gap: 1.25rem;
    }

    .step-track::before {
        left: calc(100% / (var(--steps, 4) * 2));
        right: calc(100% / (var(--steps, 4) * 2));
        top: calc(var(--num) / 2 - 7px);
        bottom: auto;
        width: auto;
        height: 14px;
    }

    .step-track__item {
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;
        text-align: center;
    }

    .step-track__body { width: 100%; }
}

/* ============================================
   INFO CARD, 18+ BADGE, CHIPS, NAME BADGES
   ============================================ */

.info-card {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 1.25rem 1.4rem;
    border-radius: var(--radius);
    border-left: 8px solid var(--plum-700);
    background: var(--cream);
    box-shadow: var(--shadow-soft);
}

.info-card__icon { flex: none; color: var(--plum-700); }
.info-card__icon .icon { width: 2rem; height: 2rem; }
.info-card__body p:last-child { margin-bottom: 0; }

.badge-18 {
    flex: none;
    display: inline-grid;
    place-items: center;
    width: 3.4rem;
    height: 3.4rem;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #ffffff, var(--cream) 65%);
    border: 3px solid var(--gold);
    box-shadow: 0 0 0 3px var(--pink-500);
    color: var(--plum-900);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.15rem;
    line-height: 1;
}

.chip-bar {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    padding: 0.25rem 0.1rem 0.5rem;
    scrollbar-width: thin;
}

.chip {
    flex: none;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0.45rem 1.05rem;
    border-radius: var(--radius-pill);
    border: 2px solid var(--plum-700);
    background: #fff9ef;
    color: var(--plum-800);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1rem;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.chip:hover { background: var(--blush); }

.chip.is-active,
.chip[aria-pressed="true"] {
    background: linear-gradient(180deg, #e8418a, #b81d4f);
    border-color: #9c1846;
    color: #ffffff;
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.3), 0 4px 10px rgba(196, 31, 79, 0.3);
}

.badge-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    justify-content: center;
}

.name-badge {
    position: relative;
    overflow: hidden;
    padding: 0.55rem 1.15rem 0.8rem;
    border-radius: 16px;
    background: var(--cream);
    color: var(--plum-800);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1rem;
    box-shadow: 0 0 0 2px #efcf9c, 0 4px 12px rgba(90, 42, 85, 0.12);
}

.name-badge::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 5px;
    background: var(--stripe);
}

.badge-list--plum .name-badge {
    background: var(--plum-700);
    color: #fff1da;
    border-radius: var(--radius-pill);
    padding: 0.45rem 1.1rem;
    box-shadow: 0 4px 12px rgba(61, 26, 58, 0.25);
}

.badge-list--plum .name-badge::after { content: none; }

/* Icon tiles (payments / responsible gaming on plum bands) */
.icon-tiles {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
}

.icon-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-width: 4.5rem;
    min-height: 3.4rem;
    padding: 0.6rem 0.9rem;
    border-radius: 14px;
    background: #55284f;
    color: #dcc6ec;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    font-size: 0.875rem;
    font-weight: 700;
    text-align: center;
}

.icon-tile .icon { width: 26px; height: 26px; }

.icon-tile--outline {
    background: transparent;
    border: 2px solid #b99ad0;
    color: var(--lilac-on-plum);
}

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

.cta-band__card {
    display: grid;
    gap: 1.25rem;
    justify-items: center;
    text-align: center;
}

.cta-band__mascot {
    width: clamp(7rem, 22vw, 10rem);
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 10px 18px rgba(196, 31, 79, 0.25));
}

.cta-band__body h2 { text-shadow: none; }

.cta-band__body .cta-group { align-items: center; }

@media (min-width: 768px) {
    .cta-band__card {
        grid-template-columns: auto minmax(0, 1fr);
        justify-items: start;
        text-align: left;
        align-items: center;
        gap: 2rem;
    }

    .cta-band__body .cta-group { align-items: flex-start; }
}

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

.site-footer {
    position: relative;
    background: var(--plum-900);
    color: var(--lilac-on-plum);
    padding: clamp(3.5rem, 7vw, 4.5rem) 0 2rem;
    font-size: 1rem;
}

.site-footer > .seam {
    position: absolute;
    top: -2px;
    left: 0;
    right: 0;
}

.site-footer__top {
    display: grid;
    gap: 2rem;
}

.footer-brand {
    display: inline-flex;
    text-decoration: none;
    margin-bottom: 1rem;
    min-height: 48px;
}

.site-footer__desc { max-width: 26rem; }

.site-footer__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.site-footer__title {
    margin: 0 0 0.6rem;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.1rem;
    color: #fff1da;
}

.site-footer__links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
}

.site-footer__link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--lilac-on-plum);
    text-decoration: none;
    font-weight: 700;
}

.site-footer__link:hover {
    color: #ffffff;
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.site-footer__facts {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.6rem;
    line-height: 1.5;
}

.site-footer__facts strong { color: #fff1da; }

.site-footer__rg {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    margin-top: 2.5rem;
    padding: 1.25rem;
    border-radius: var(--radius);
    background: var(--plum-850);
    border: 1px solid #6b3a66;
}

.site-footer__rg p:last-child { margin-bottom: 0; }

.site-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.25rem 1.5rem;
    margin-top: 2rem;
    padding-top: 1.25rem;
    border-top: 1px solid #5e2f59;
    font-size: 0.9375rem;
}

.site-footer__bottom p { margin: 0; }

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

@media (min-width: 1024px) {
    .site-footer__top { grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.8fr) minmax(0, 0.9fr) minmax(0, 1.3fr); }
}

/* ============================================
   COOKIE BANNER (RODO)
   ============================================ */

.cookie-banner {
    position: fixed;
    left: 0.75rem;
    right: 0.75rem;
    bottom: 0.75rem;
    z-index: 80;
    max-width: 34rem;
    margin-inline: auto;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.9rem;
    padding: 1.5rem 1.25rem 1.15rem;
    overflow: hidden;
    border-radius: 24px;
    background: linear-gradient(180deg, #fdf4e3, #f7e6c8);
    color: var(--ink);
    box-shadow: 0 0 0 2px #f6c1d6, 0 18px 50px rgba(61, 26, 58, 0.35);
    animation: cookie-in 0.35s ease-out;
}

.cookie-banner[hidden] { display: none; }

.cookie-banner::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 10px;
    background: var(--stripe);
}

.cookie-banner__mascot {
    width: 56px;
    height: 56px;
    object-fit: contain;
}

.cookie-banner__title {
    margin: 0 0 0.25rem;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.15rem;
    color: var(--plum-800);
}

.cookie-banner__text {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.5;
}

.cookie-banner__actions {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.cookie-banner__actions .btn { flex: 1 1 10rem; }

@media (min-width: 768px) {
    .cookie-banner {
        left: auto;
        right: 1.5rem;
        bottom: 1.5rem;
    }
}

@keyframes cookie-in {
    from { transform: translateY(16px); }
    to { transform: none; }
}

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

/* Seam placed inside a lifted band so its medallions stay visible */
.band--seamed > .seam {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    z-index: 0;
}

.home-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background-color: var(--lilac-100);
    background-image: url("./assets/bb9b97c381f06d58be2f687d8f6ff461.webp");
    background-size: cover;
    background-position: 68% center;
    background-repeat: no-repeat;
}

.home-hero__note {
    max-width: 30rem;
    margin: 0.9rem 0 0;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.5;
    color: var(--ink);
}

.home-hero__more { margin: 0.9rem 0 0; }

@media (min-width: 1024px) {
    .home-hero::before { background-position: center 40%; }

    .home-hero .hero__art {
        justify-self: end;
        width: min(100%, 28rem);
        margin-right: 4%;
    }
}

/* Games: shared meadow environment for slots + live */
.home-games {
    position: relative;
    isolation: isolate;
}

.home-games::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background-color: var(--lilac-100);
    background-image: url("./assets/9fa3cb5a8f43446730df4d2c075e44a6.webp");
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
}

.home-games::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        linear-gradient(180deg, var(--lilac-100) 0%, rgba(239, 228, 245, 0) 10%),
        rgba(243, 233, 248, 0.74);
}

.home-games > .band:first-child { padding-bottom: clamp(1.5rem, 4vw, 2.5rem); }
.home-games > .band + .band { padding-top: clamp(1.5rem, 4vw, 2.5rem); }

.home-live__media { margin: 0; }

@media (min-width: 1024px) {
    .home-games::after {
        background:
            linear-gradient(180deg, var(--lilac-100) 0%, rgba(239, 228, 245, 0) 12%),
            linear-gradient(90deg, rgba(243, 233, 248, 0) 0%, rgba(243, 233, 248, 0.62) 22%, rgba(243, 233, 248, 0.62) 78%, rgba(243, 233, 248, 0) 100%);
    }
}

/* Rakeback & VIP meadow */
.home-rakeback {
    padding-bottom: calc(clamp(3rem, 7vw, 5.5rem) + clamp(4rem, 9vw, 7rem));
}

.home-rakeback::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background-color: var(--lilac-100);
    background-image: url("./assets/f8c5ad8f4614495fcf29b0c448e734f3.webp");
    background-size: cover;
    background-position: 60% bottom;
    background-repeat: no-repeat;
}

.home-rakeback::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(180deg, var(--lilac-100) 0%, rgba(239, 228, 245, 0.8) 16%, rgba(239, 228, 245, 0.6) 50%, rgba(239, 228, 245, 0.3) 100%);
}

.rakeback-scene {
    display: grid;
    gap: 2.5rem;
    align-items: end;
}

.signposts {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.75rem;
}

.signpost {
    position: relative;
    padding-bottom: 1.75rem;
}

.signpost::before,
.signpost::after {
    content: "";
    position: absolute;
    bottom: 0;
    width: 9px;
    height: 2.2rem;
    border-radius: 4px;
    background: linear-gradient(90deg, #a8662c, #d39a4f 50%, #a8662c);
    box-shadow: 0 3px 4px rgba(61, 26, 58, 0.25);
}

.signpost::before { left: 24%; }
.signpost::after { right: 40%; }

.signpost__board {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    min-width: 14rem;
    padding: 0.55rem 4.4rem 0.65rem 1.4rem;
    border-radius: var(--radius-pill);
    border: 3px solid #ffffff;
    background: linear-gradient(180deg, #d4f1ff 0%, #9fdcff 55%, #7cc8f5 100%);
    box-shadow:
        inset 0 3px 0 rgba(255, 255, 255, 0.7),
        inset 0 -4px 0 rgba(90, 42, 85, 0.15),
        0 0 0 2px #e2a64c,
        0 10px 22px rgba(90, 42, 85, 0.28);
}

.signpost--pink .signpost__board {
    background: linear-gradient(180deg, #ffe0ee 0%, #ffa9d0 55%, #ff8cbe 100%);
}

.signpost__value {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem);
    line-height: 1.05;
    color: var(--plum-900);
}

.signpost__caption {
    font-weight: 800;
    font-size: 0.875rem;
    line-height: 1.3;
    color: var(--plum-800);
}

.signpost__chest {
    position: absolute;
    z-index: 2;
    right: -1.4rem;
    top: calc(50% - 0.875rem);
    width: 5.6rem;
    height: auto;
    transform: translateY(-50%);
    filter: drop-shadow(0 6px 8px rgba(122, 37, 88, 0.3));
}

.vip-teaser {
    display: grid;
    justify-items: center;
    gap: 1rem;
    text-align: center;
}

.vip-teaser__art {
    position: relative;
    width: min(100%, 26rem);
}

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

.vip-plaque {
    position: absolute;
    left: 50%;
    top: 30%;
    transform: translate(-50%, -50%);
    margin: 0;
    padding: 0.35rem 1.4rem 0.5rem;
    border-radius: 16px;
    background: linear-gradient(180deg, #fff8ea, #f8e4c4);
    border: 3px solid var(--caramel);
    box-shadow: 0 0 0 2px #ffffff, 0 6px 14px rgba(90, 42, 85, 0.25);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.15rem, 1rem + 0.8vw, 1.5rem);
    line-height: 1.2;
    color: var(--plum-800);
    white-space: nowrap;
}

.vip-levels {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    width: 100%;
    max-width: 26rem;
}

.vip-levels li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 44px;
    padding: 0.35rem 0.8rem 0.35rem 0.35rem;
    border-radius: var(--radius-pill);
    background: var(--plum-700);
    color: #fff1da;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.98rem;
    line-height: 1.2;
    text-align: left;
    box-shadow: 0 4px 12px rgba(61, 26, 58, 0.22);
}

.vip-levels__num {
    flex: none;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: linear-gradient(180deg, #ffe8d3, #ffcfa6);
    border: 2px solid var(--gold);
    color: var(--plum-900);
    font-weight: 700;
    font-size: 0.95rem;
}

.vip-teaser__link { margin: 0; }

@media (min-width: 768px) {
    .signposts {
        flex-direction: row;
        justify-content: space-around;
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .signpost:first-child { margin-top: 5rem; }
}

@media (min-width: 1024px) {
    .home-rakeback::after {
        background: linear-gradient(180deg, var(--lilac-100) 0%, rgba(239, 228, 245, 0.6) 16%, rgba(239, 228, 245, 0.15) 50%, rgba(239, 228, 245, 0) 100%);
    }

    .rakeback-scene {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
        gap: 2rem;
    }

    .signposts { padding-bottom: 2rem; }
}

/* About + FAQ + CTA share one swirl environment */
.home-swirl {
    position: relative;
    isolation: isolate;
    z-index: 5;
}

.home-swirl .band--swirl::before { content: none; }

.about-card {
    padding: 0;
    overflow: hidden;
    display: grid;
}

.about-card__media {
    margin: 0;
    min-width: 0;
}

.about-card__media img {
    width: 100%;
    height: auto;
    max-height: 20rem;
    object-fit: cover;
    object-position: center 40%;
}

.about-card__body {
    padding: clamp(1.5rem, 4vw, 2.5rem);
}

.about-card__body h2 { text-shadow: none; }

.about-facts {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    display: grid;
    gap: 0.5rem;
    font-size: 0.95rem;
    line-height: 1.45;
}

.about-facts li {
    padding: 0.6rem 0.9rem;
    border-radius: 14px;
    background: #fff7ea;
    border: 2px dashed #e8b9cc;
}

.about-facts strong { color: var(--plum-800); }

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

    .about-card__media img {
        height: 100%;
        max-height: none;
    }
}

/* Payments band merged into footer */
.home-pay {
    overflow: visible;
    z-index: 6;
    padding-bottom: 0;
}

.home-pay > .container {
    padding-bottom: 2.25rem;
    border-bottom: 1px solid #5e2f59;
}

.home-pay .section-head h2::after { box-shadow: 0 0 0 2px var(--plum-700); }

.home-pay__rg {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    max-width: 40rem;
    margin: 1.75rem auto 0;
}

.home-pay__rg p {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--lilac-on-plum);
}

.page-home .site-footer > .seam { display: none; }
.page-home .site-footer { padding-top: 2.5rem; }

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

.page-bonusy .band--seamed { overflow: visible; }

.bonusy-hero {
    padding-bottom: clamp(3rem, 7vw, 5rem);
}

.bonusy-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background-color: var(--lilac-100);
    background-image: url("./assets/17e2be86ff4554b5fa8348c02788f4d9.webp");
    background-size: cover;
    background-position: 76% center;
    background-repeat: no-repeat;
}

.bonusy-hero::after {
    background: linear-gradient(180deg, rgba(243, 233, 248, 0.62) 0%, rgba(243, 233, 248, 0.82) 45%, rgba(243, 233, 248, 0.9) 100%);
}

@media (min-width: 1024px) {
    .bonusy-hero::before { background-position: center 40%; }

    .bonusy-hero::after {
        background: linear-gradient(90deg, rgba(243, 233, 248, 0.9) 0%, rgba(243, 233, 248, 0.78) 34%, rgba(243, 233, 248, 0.25) 52%, rgba(243, 233, 248, 0) 62%);
    }

    .bonusy-hero .hero__inner { grid-template-columns: minmax(0, 52fr) minmax(0, 48fr); }
}

.table-card .data-table { overflow-x: auto; }

.table-card { padding: clamp(1rem, 3vw, 1.75rem); }

.pct-chip {
    display: inline-block;
    padding: 0.2rem 0.8rem;
    border-radius: var(--radius-pill);
    background: linear-gradient(180deg, #ffe8d3, #ffcfa6);
    border: 2px solid var(--gold);
    color: var(--plum-900);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.1rem;
}

.table-note {
    max-width: 46rem;
    margin: 1.25rem auto 0;
    text-align: center;
    font-weight: 600;
}

/* Calculation cards */
.calc-grid {
    display: grid;
    gap: 1.25rem;
}

.calc-card {
    padding: 1.4rem 1.4rem 1rem;
    border-radius: var(--radius);
    background: linear-gradient(180deg, #fff6e6, #f9e7c9);
    border: 2px solid #efcf9c;
    box-shadow: var(--shadow-soft);
}

.calc-card h3 { margin-bottom: 0.9rem; }

.calc-card__list {
    margin: 0;
    display: grid;
    gap: 0.6rem;
}

.calc-card__list > div {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.25rem 1rem;
    padding-bottom: 0.55rem;
    border-bottom: 2px dashed #e8b9cc;
}

.calc-card__list dt { font-weight: 700; color: var(--ink-soft); }
.calc-card__list dd { margin: 0; text-align: right; }

.calc-card__num {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.6rem;
    line-height: 1.1;
    color: var(--plum-800);
}

.calc-card__pln {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--ink-soft);
}

.calc-card h3 .calc-card__pln { font-family: var(--font-body); }

.calc-card__bar {
    width: 100%;
    height: auto;
    margin-top: 1rem;
}

.prose-block {
    max-width: 46rem;
    margin: 2rem auto 0;
}

.prose-block p:last-child { margin-bottom: 0; }

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

/* Contribution meters */
.meters {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1.1rem;
}

.meter {
    display: grid;
    gap: 0.4rem;
    align-items: center;
}

.meter__chip {
    justify-self: start;
    padding: 0.3rem 1rem;
    border-radius: var(--radius-pill);
    background: var(--cream);
    color: var(--plum-800);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1rem;
    border: 2px solid var(--gold);
}

.meter__track {
    position: relative;
    display: block;
    height: 22px;
    border-radius: var(--radius-pill);
    background: #55284f;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.35);
    overflow: hidden;
}

.meter__fill {
    display: block;
    height: 100%;
    border-radius: var(--radius-pill);
    background: linear-gradient(90deg, #ff8cbe, #ff4f9a 55%, #c41f4f);
    box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.35);
}

.meter__track--ban {
    background: repeating-linear-gradient(-45deg, #7a2a6c 0 10px, #3d1a3a 10px 20px);
    border: 2px solid #ffd3e8;
}

.meter__val {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.25rem;
    color: #fff3df;
}

.meters__note {
    margin: 1.25rem 0 0;
    text-align: center;
    font-weight: 700;
}

@media (min-width: 768px) {
    .meter { grid-template-columns: 12rem minmax(0, 1fr) 5rem; gap: 1rem; }
    .meter__val { text-align: right; }
}

/* Rakeback */
.rakeback-row {
    display: grid;
    gap: 1.5rem;
    align-items: center;
}

.rakeback-row__jar {
    justify-self: center;
    width: min(55%, 14rem);
}

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

.rate-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding: 1.4rem 1rem;
    border-radius: var(--radius);
    background: linear-gradient(180deg, #fff6e6, #f9e7c9);
    border: 2px solid #efcf9c;
    box-shadow: var(--shadow-soft);
    text-align: center;
}

.rate-card__pct {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2.6rem, 2rem + 2vw, 3.4rem);
    line-height: 1;
    color: var(--plum-800);
}

.rate-card__name {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.15rem;
    color: var(--plum-800);
}

.pill-tag {
    display: inline-block;
    padding: 0.35rem 0.9rem;
    border-radius: var(--radius-pill);
    background: linear-gradient(180deg, #ff7fb7, #e0337a 60%, #c41f4f);
    border: 2px solid #fff;
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.4), 0 4px 10px rgba(196, 31, 79, 0.3);
    color: #fff;
    font-weight: 800;
    font-size: 0.8125rem;
    line-height: 1.25;
}

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

@media (min-width: 1024px) {
    .rakeback-row { grid-template-columns: minmax(0, 1fr) minmax(0, 17rem); gap: 2rem; }
    .rakeback-row__jar { order: 2; width: 100%; }
    .rate-cards { order: 1; }
}

/* Bonus Shop */
.bonusy-shop__art { justify-self: center; width: min(80%, 24rem); }
.bonusy-shop__art img { width: 100%; height: auto; object-fit: contain; }

.bonusy-shop__body h2 { text-shadow: none; }

@media (min-width: 1024px) {
    .bonusy-shop__split { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
    .bonusy-shop__art { width: 100%; }
}

/* Reloads & tournaments */
.mini-cards {
    display: grid;
    gap: 1.25rem;
}

.mini-card {
    position: relative;
    overflow: hidden;
    padding: 1.9rem 1.5rem 1.4rem;
    border-radius: var(--radius);
    background: linear-gradient(180deg, #fff6e6, #f9e7c9);
    border: 2px solid #efcf9c;
    box-shadow: var(--shadow-soft);
}

.mini-card::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 10px;
    background: var(--stripe);
}

.mini-card__icon {
    display: inline-grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin-bottom: 0.6rem;
    border-radius: 16px;
    background: var(--plum-700);
    color: #ffe9c9;
}

.mini-card__icon .icon { width: 28px; height: 28px; }
.mini-card p:last-child { margin-bottom: 0; }

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

/* Checklist */
.check-list {
    list-style: none;
    margin: 0 0 1.75rem;
    padding: 0;
    display: grid;
    gap: 0.7rem;
}

.check-list__item {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 0.75rem 1.25rem 0.75rem 0.75rem;
    border-radius: 28px;
    background: linear-gradient(180deg, #fff6e6, #f9e7c9);
    border: 2px solid #efcf9c;
    box-shadow: 0 4px 12px rgba(90, 42, 85, 0.12);
    line-height: 1.5;
}

.check-list__icon {
    flex: none;
    width: 32px;
    height: 32px;
    margin-top: 0.1rem;
    filter: drop-shadow(0 2px 3px rgba(196, 31, 79, 0.35));
}

/* ============================================
   REDUCED MOTION
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .btn:hover,
    .neon-tile:hover { transform: none; }
}

/* ============================================
   GRY (games catalog)
   ============================================ */

.page-gry .band--seamed {
    overflow: visible;
    z-index: 3;
}

/* Hero */
.gry-hero {
    padding-bottom: clamp(3.5rem, 8vw, 6rem);
}

.gry-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background-color: var(--lilac-100);
    background-image: url("./assets/3ea7340f85f83f17ac3d65e6afed2003.webp");
    background-size: cover;
    background-position: 80% center;
    background-repeat: no-repeat;
}

.gry-hero::after {
    background: linear-gradient(180deg, rgba(243, 233, 248, 0.62) 0%, rgba(243, 233, 248, 0.82) 45%, rgba(243, 233, 248, 0.9) 100%);
}

@media (min-width: 1024px) {
    .gry-hero::before { background-position: center 40%; }

    .gry-hero::after {
        background: linear-gradient(90deg, rgba(243, 233, 248, 0.9) 0%, rgba(243, 233, 248, 0.78) 34%, rgba(243, 233, 248, 0.25) 52%, rgba(243, 233, 248, 0) 62%);
    }

    .gry-hero .hero__inner { grid-template-columns: minmax(0, 45fr) minmax(0, 55fr); }
}

/* Catalog environment */
.gry-catalog {
    position: relative;
    isolation: isolate;
}

.gry-catalog::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background-color: var(--lilac-100);
    background-image: url("./assets/81ee1be5845d9ec23af879ab5fcfa9c8.webp");
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
}

.gry-catalog::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        linear-gradient(180deg, var(--lilac-100) 0%, rgba(239, 228, 245, 0) 8%),
        rgba(243, 233, 248, 0.6);
}

.gry-catalog__intro { padding-bottom: clamp(1rem, 3vw, 1.75rem); }
.gry-catalog__intro .section-head { margin-bottom: 0; }
.gry-slots { padding-top: clamp(1.5rem, 4vw, 2.5rem); }

/* Filter bar */
.filter-bar-wrap {
    position: relative;
    z-index: 6;
    padding-block: 0.25rem;
}

.filter-bar {
    display: grid;
    gap: 0.5rem;
    padding: 0.85rem 1rem;
    background: var(--cream);
    border: 2px solid var(--caramel);
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
}

.filter-group {
    display: grid;
    gap: 0.1rem;
    min-width: 0;
}

.filter-group__label {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--plum-700);
}

.filter-bar__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    padding-top: 0.5rem;
    border-top: 2px dashed #e8b9cc;
}

.gry-status {
    margin: 0;
    font-weight: 800;
    font-size: 0.95rem;
    color: var(--plum-800);
}

@media (min-width: 1024px) {
    .filter-bar-wrap {
        position: sticky;
        top: calc(var(--header-bottom, 96px) + 0.5rem);
    }

    .filter-group {
        grid-template-columns: 6.5rem minmax(0, 1fr);
        align-items: center;
    }
}

/* Grid */
.gry-grid .neon-tile { height: 100%; }

.gry-empty {
    margin: 1.5rem auto 0;
    max-width: 36rem;
    padding: 0.9rem 1.25rem;
    border-radius: var(--radius);
    background: var(--cream);
    border: 2px dashed var(--caramel);
    text-align: center;
    font-weight: 700;
}

.gry-empty[hidden] { display: none; }

.gry-note { margin-top: clamp(1.5rem, 4vw, 2.5rem); }

/* Live */
.gry-live__media { margin: 0; }

/* Crash */
.crash-scene {
    position: relative;
    isolation: isolate;
    display: grid;
    gap: 1.5rem;
    align-items: center;
}

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

.crash-scene__curve path {
    fill: none;
    stroke: var(--pink-500);
    stroke-width: 6;
    stroke-linecap: round;
    stroke-dasharray: 1 16;
    vector-effect: non-scaling-stroke;
}

.crash-scene__copy h2 { text-align: left; }

.crash-scene__art {
    justify-self: center;
    width: min(70%, 18rem);
}

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

@media (min-width: 1024px) {
    .crash-scene { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 2rem; }
    .crash-scene__art { width: min(100%, 26rem); justify-self: end; }
}

/* Availability */
.gry-availability .section-head { margin-bottom: 1.25rem; }

/* Responsible gaming flowing into footer */
.gry-rg {
    padding-bottom: 0;
    z-index: 6;
}

.gry-rg > .container {
    padding-bottom: 2.25rem;
    border-bottom: 1px solid #5e2f59;
}

.gry-rg .section-head h2::after { box-shadow: 0 0 0 2px var(--plum-700); }
.gry-rg .icon-tiles { margin-bottom: 0; }

.page-gry .site-footer > .seam { display: none; }
.page-gry .site-footer { padding-top: 2.5rem; }

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

.page-vip .site-footer > .seam { display: none; }
.page-vip .site-footer { padding-top: 2.5rem; }

/* Hero: dark regal environment, copy on the calm left side */
.vip-hero {
    padding-bottom: clamp(3rem, 7vw, 5rem);
}

.vip-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background-color: var(--plum-950);
    background-image: url("./assets/89f9dfbfeecb73e1384497a3d693fdfc.webp");
    background-size: cover;
    background-position: 72% center;
    background-repeat: no-repeat;
}

.vip-hero::after {
    background: linear-gradient(180deg, rgba(42, 15, 39, 0.7) 0%, rgba(42, 15, 39, 0.78) 100%);
}

.vip-hero h1 {
    color: #fff3df;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
}

.vip-hero .hero__lead { color: var(--lilac-on-plum); }
.vip-hero .cta-microline { color: var(--lilac-on-plum); }

@media (min-width: 1024px) {
    .vip-hero::before { background-position: center; }

    .vip-hero::after {
        background: linear-gradient(90deg, rgba(42, 15, 39, 0.6) 0%, rgba(42, 15, 39, 0.4) 40%, rgba(42, 15, 39, 0) 58%);
    }

    .vip-hero .hero__inner {
        grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
        min-height: min(56vh, 480px);
    }
}

/* Tier pills with crowns joined by a dotted gold line */
.tier-pills {
    position: relative;
    list-style: none;
    margin: clamp(1.5rem, 4vw, 2.25rem) 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
    max-width: 46rem;
}

.tier-pill {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 48px;
    padding: 0.35rem 0.9rem 0.35rem 0.7rem;
    border-radius: var(--radius-pill);
    background: var(--plum-900);
    border: 2px solid var(--caramel);
    color: #fff1da;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.2;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.3);
}

.tier-crown {
    flex: none;
    width: var(--crown, 20px);
    height: var(--crown, 20px);
    color: var(--gold);
}

@media (min-width: 768px) {
    .tier-pills {
        display: flex;
        justify-content: space-between;
        gap: 0.75rem;
    }

    .tier-pills::before {
        content: "";
        position: absolute;
        left: 1.5rem;
        right: 1.5rem;
        top: 50%;
        border-top: 3px dotted var(--caramel);
        z-index: 0;
    }

    .tier-pill { font-size: 1.05rem; }
}

/* Ladder environment */
.vip-ladder {
    padding-block: clamp(3rem, 7vw, 5rem);
}

.vip-ladder::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background-color: var(--plum-950);
    background-image: url("./assets/8d28ee2db69026839a006a7e858a30a1.webp");
    background-size: cover;
    background-position: 70% bottom;
    background-repeat: no-repeat;
}

.vip-ladder::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(42, 15, 39, 0.92) 0%, rgba(42, 15, 39, 0.78) 30%, rgba(42, 15, 39, 0.35) 100%);
}

.vip-ladder .section-head h2 {
    color: #fff3df;
    text-shadow: none;
}

.vip-ladder .section-head h2::after { box-shadow: 0 0 0 2px var(--plum-700), 0 4px 10px rgba(255, 79, 154, 0.35); }
.vip-ladder .section-head p { color: var(--lilac-on-plum); }

.ladder-wrap {
    position: relative;
}

.ladder__line {
    position: absolute;
    left: 0.6rem;
    top: 1.5rem;
    width: 16px;
    height: calc(100% - 3rem);
    max-width: none;
}

.ladder__line path {
    fill: none;
    stroke: var(--gold);
    stroke-width: 3;
    stroke-dasharray: 2 7;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

.ladder {
    list-style: none;
    margin: 0;
    padding: 0 0 0 3rem;
    display: grid;
    gap: 1.25rem;
}

.ladder__step { position: relative; }

.ladder__step::before {
    content: "";
    position: absolute;
    left: -2.35rem;
    top: 1.6rem;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--gold);
    border: 3px solid var(--plum-900);
    box-shadow: 0 0 0 2px var(--gold);
}

.plaque {
    height: 100%;
    padding: 1.1rem 1.2rem 1.15rem;
    border: 6px solid transparent;
    border-radius: var(--radius);
    background:
        linear-gradient(180deg, #fdf4e3, #f7e6c8) padding-box,
        var(--stripe) border-box;
    box-shadow: 0 0 0 2px #f6c1d6, 0 14px 30px rgba(42, 15, 39, 0.4);
    color: var(--ink);
}

.plaque__top {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-bottom: 0.5rem;
}

.plaque__crown {
    flex: none;
    width: var(--crown, 24px);
    height: var(--crown, 24px);
    color: #b9791f;
}

.plaque h3 {
    margin: 0;
    font-size: 1.3rem;
    line-height: 1.1;
}

.plaque__rank {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.8rem;
    font-weight: 800;
    color: var(--plum-700);
}

.plaque p {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.5;
}

.ladder__step--top .plaque {
    box-shadow: 0 0 0 3px var(--gold), 0 0 34px rgba(246, 205, 110, 0.55), 0 14px 30px rgba(42, 15, 39, 0.4);
}

@media (min-width: 1024px) {
    .ladder__line,
    .ladder__step::before { display: none; }

    .ladder {
        padding: 0;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 1rem;
        align-items: start;
    }

    .ladder__step:nth-child(1) { margin-top: 12rem; }
    .ladder__step:nth-child(2) { margin-top: 8rem; }
    .ladder__step:nth-child(3) { margin-top: 4rem; }
    .ladder__step:nth-child(4) { margin-top: 0; }
}

/* Benefits table */
.vip-benefits .section-head { max-width: 52rem; }

/* Rakeback + crown */
.vip-combo__split { align-items: center; }

.vip-combo__art {
    justify-self: center;
    width: min(80%, 22rem);
    background: transparent;
}

.vip-combo__art::before {
    inset: -6%;
    filter: blur(6px);
}

.vip-combo .pill-row__text { line-height: 1.6; }

/* Responsible gaming flowing into footer */
.vip-rg {
    overflow: visible;
    z-index: 6;
    padding-bottom: 0;
}

.vip-rg > .container {
    padding-bottom: 2.25rem;
    border-bottom: 1px solid #5e2f59;
}

.vip-rg .section-head h2::after { box-shadow: 0 0 0 2px var(--plum-700); }
.vip-rg .section-head p { color: var(--lilac-on-plum); }
.vip-rg .icon-tiles { margin-bottom: 0; }

/* ============================================
   PŁATNOŚCI
   ============================================ */

.page-platnosci .band--seamed {
    overflow: visible;
    z-index: 3;
}

/* Hero */
.platnosci-hero {
    padding-bottom: clamp(3.5rem, 8vw, 6rem);
}

.platnosci-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background-color: var(--lilac-100);
    background-image: url("./assets/d49eec044425f4e121c573ecc3239511.webp");
    background-size: cover;
    background-position: 82% center;
    background-repeat: no-repeat;
}

.platnosci-hero::after {
    background: linear-gradient(180deg, rgba(243, 233, 248, 0.66) 0%, rgba(243, 233, 248, 0.84) 45%, rgba(243, 233, 248, 0.92) 100%);
}

@media (min-width: 1024px) {
    .platnosci-hero::before { background-position: center 40%; }

    .platnosci-hero::after {
        background: linear-gradient(90deg, rgba(243, 233, 248, 0.92) 0%, rgba(243, 233, 248, 0.8) 36%, rgba(243, 233, 248, 0.2) 52%, rgba(243, 233, 248, 0) 62%);
    }

    .platnosci-hero .hero__inner {
        grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
        min-height: min(60vh, 520px);
    }
}

/* Method tiles */
.pay-tiles {
    list-style: none;
    margin: 0 0 clamp(1.5rem, 4vw, 2.5rem);
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem;
}

.pay-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1.2rem 0.8rem 1rem;
    border-radius: 22px;
    background: linear-gradient(180deg, #fff6e6, #f8e6c8);
    box-shadow: 0 0 0 2px #efcf9c, var(--shadow-soft);
    text-align: center;
}

.pay-tile__icon {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--plum-700);
    color: #ffe9c9;
}

.pay-tile__icon .icon { width: 30px; height: 30px; }

.pay-tile__name {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.05rem;
    line-height: 1.2;
    color: var(--plum-800);
}

.pay-tile__caption {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.4;
    color: var(--ink-soft);
}

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

/* EUR / PLN strip */
.pay-eur__copy h2 { text-shadow: none; }

.fx-card { padding: clamp(1.1rem, 3vw, 1.75rem); }

.fx-card__head {
    display: flex;
    justify-content: space-between;
    margin: 0 0 0.4rem;
    font-weight: 800;
    font-size: 0.85rem;
    letter-spacing: 0.06em;
    color: var(--plum-700);
}

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

.fx-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.7rem 0;
    border-bottom: 2px dashed #e8b9cc;
}

.fx-row__num {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
    line-height: 1.1;
    color: var(--plum-800);
}

.fx-row__arrow {
    flex: 1 1 auto;
    min-width: 2.5rem;
    max-width: 5rem;
    height: 24px;
}

.fx-card__note {
    margin: 0.9rem 0 0;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.45;
}

/* Crypto */
.pay-crypto__copy h2 { text-shadow: none; }
.pay-crypto__copy .badge-list { justify-content: flex-start; margin-top: 1.25rem; }

.pay-crypto__art {
    justify-self: center;
    width: min(75%, 22rem);
    background: transparent;
}

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

@media (min-width: 1024px) {
    .pay-crypto__art { width: min(100%, 26rem); justify-self: end; }
}

/* Withdrawal time: candy-stripe conduit */
.conduit {
    --medal: 72px;
    position: relative;
}

.conduit__line {
    position: absolute;
    max-width: none;
    z-index: 0;
    pointer-events: none;
    filter: drop-shadow(0 0 7px rgba(255, 79, 154, 0.65));
}

.conduit__line line {
    fill: none;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

.conduit__base { stroke: var(--pink-500); stroke-width: 14; }
.conduit__stripe { stroke: #ffffff; stroke-width: 14; stroke-dasharray: 7 14; stroke-linecap: butt; }

.conduit__line--v {
    display: block;
    left: calc(var(--medal) / 2 - 7px);
    top: calc(var(--medal) / 2);
    bottom: calc(var(--medal) / 2);
    width: 14px;
    height: auto;
}

.conduit__line--h { display: none; }

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

.pay-step {
    display: grid;
    grid-template-columns: var(--medal) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.pay-step__medal {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: var(--medal);
    height: var(--medal);
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #ffffff, var(--cream) 60%, var(--cream-2));
    border: 4px solid var(--caramel);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.7rem;
    color: var(--plum-800);
    box-shadow: 0 6px 16px rgba(90, 42, 85, 0.25);
}

.pay-step__body {
    padding: 0.9rem 1.1rem;
    border-radius: var(--radius);
    background: rgba(253, 243, 225, 0.96);
    box-shadow: var(--shadow-soft);
}

.pay-step__body h3 { margin: 0 0 0.3rem; }
.pay-step__body p { margin: 0; font-size: 0.97rem; line-height: 1.5; }

@media (min-width: 768px) {
    .conduit { --medal: 84px; }

    .conduit__line--v { display: none; }

    .conduit__line--h {
        display: block;
        left: 12.5%;
        right: 12.5%;
        top: calc(var(--medal) / 2 - 7px);
        width: auto;
        height: 14px;
    }

    .pay-steps {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 1.25rem;
        align-items: stretch;
    }

    .pay-step {
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;
        align-content: start;
        text-align: center;
    }

    .pay-step__body { width: 100%; height: 100%; }
}

/* Support speech bubble */
.support-scene {
    display: grid;
    gap: 2rem;
    justify-items: center;
    align-items: center;
}

.support-scene__mascot {
    width: clamp(6.5rem, 24vw, 10rem);
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 10px 18px rgba(196, 31, 79, 0.25));
}

.bubble {
    position: relative;
    width: 100%;
    padding: clamp(1.25rem, 3.5vw, 2rem);
    border: 3px solid var(--caramel);
    border-radius: 28px;
    background: linear-gradient(180deg, #fdf4e3, #f7e6c8);
    box-shadow: var(--shadow-soft);
}

.bubble__tail {
    position: absolute;
    width: 26px;
    height: 28px;
    max-width: none;
    top: -23px;
    left: 50%;
    transform: translateX(-50%) rotate(90deg);
}

.bubble > p { margin: 0 0 1rem; }

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

.bubble__list li {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.5rem 0.9rem;
    border-radius: 14px;
    background: #fff7ea;
    border: 2px dashed #e8b9cc;
    line-height: 1.4;
}

.bubble__list .icon {
    flex: none;
    width: 24px;
    height: 24px;
    color: var(--plum-700);
}

.bubble .bubble__note {
    margin: 0;
    font-weight: 700;
    color: var(--plum-800);
}

@media (min-width: 768px) {
    .support-scene { grid-template-columns: auto minmax(0, 1fr); gap: 2.25rem; }

    .support-scene__mascot { width: 10rem; }

    .bubble__tail {
        top: 3rem;
        left: -23px;
        transform: none;
    }

    .bubble__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Operator card */
.operator-card h2 { text-shadow: none; }

.operator-card__intro {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.1rem;
}

.operator-card__intro p { margin: 0; }

.fact-rows {
    margin: 0 0 1.1rem;
    display: grid;
    gap: 0.5rem;
}

.fact-row {
    display: grid;
    gap: 0.15rem;
    padding: 0.6rem 0.9rem;
    border-radius: 14px;
    background: #fff7ea;
    border: 2px dashed #e8b9cc;
    line-height: 1.45;
}

.fact-row dt {
    font-weight: 800;
    color: var(--plum-800);
}

.fact-row dd { margin: 0; }

@media (min-width: 640px) {
    .fact-row {
        grid-template-columns: 9rem minmax(0, 1fr);
        gap: 1rem;
        align-items: baseline;
    }
}