/*
 * Jokery Casino - design system
 * Dark cinematic violet, acid green, magenta and antique gold.
 */

:root {
    --c-bg: #120a19;
    --c-bg-2: #1a0f24;
    --c-surface: #1e1229;
    --c-surface-2: #2a1a3a;
    --c-graphite: #1c1a22;
    --c-purple: #5a3479;
    --c-purple-2: #42245c;
    --c-purple-3: #2e1a41;
    --c-teal: #1f4a48;
    --c-teal-line: #4fb3a6;
    --c-mint: #c2f3df;
    --c-acid: #b4ff4f;
    --c-acid-glow: rgba(180, 255, 79, 0.45);
    --c-magenta: #e45cff;
    --c-gold: #e3bb52;
    --c-gold-glow: rgba(227, 187, 82, 0.45);
    --c-text: #f4effa;
    --c-text-2: #d6cce3;
    --c-muted: #bcaecd;
    --c-ink: #120a19;

    --f-display: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", Impact, sans-serif;
    --f-body: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

    --container: 75rem;
    --gutter: clamp(0.75rem, 4vw, 2rem);
    --header-crack: 22px;
    --section-pad: clamp(3rem, 7vw, 5.5rem);

    --clip-ribbon: polygon(3% 0, 38% 4%, 70% 0, 100% 3%, 97.5% 26%, 99.2% 50%, 96.8% 76%, 97.5% 100%, 62% 96%, 30% 100%, 0 97%, 2.4% 72%, 0.8% 48%, 3.2% 24%);
    --clip-btn: polygon(14px 0, 100% 2px, calc(100% - 5px) 38%, calc(100% - 1px) 58%, calc(100% - 14px) 100%, 0 calc(100% - 2px), 5px 62%, 1px 42%);
    --clip-para: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
    --clip-notch: polygon(0 5%, 3.5% 0, 42% 0, 50% 9%, 58% 0, 96.5% 0, 100% 5%, 100% 95%, 96.5% 100%, 58% 100%, 50% 91%, 42% 100%, 3.5% 100%, 0 95%);
    --clip-slab: polygon(0 3%, 6% 0, 14% 2%, 22% 0.5%, 31% 2.5%, 42% 0, 55% 2%, 63% 0.5%, 74% 2.5%, 86% 0, 94% 2%, 100% 0.5%, 99% 12%, 100% 25%, 98.5% 40%, 100% 55%, 99% 70%, 100% 84%, 98.5% 97%, 92% 100%, 81% 98%, 70% 100%, 58% 98.5%, 46% 100%, 35% 98%, 24% 100%, 13% 98.5%, 4% 100%, 0 97%, 1% 84%, 0 70%, 1.5% 55%, 0 40%, 1% 25%);
    --clip-header: polygon(0 0, 100% 0, 100% calc(100% - 16px), 94% calc(100% - 8px), 87% calc(100% - 18px), 78% calc(100% - 4px), 69% calc(100% - 14px), 57% 100%, 48% calc(100% - 12px), 37% calc(100% - 3px), 27% calc(100% - 15px), 16% calc(100% - 6px), 7% calc(100% - 17px), 0 calc(100% - 9px));
    --clip-footer: polygon(0 26px, 9% 8px, 18% 30px, 30% 4px, 41% 24px, 52% 0, 63% 22px, 67% 6px, 78% 28px, 89% 6px, 100% 20px, 100% 100%, 0 100%);
}

/* ============================================
   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;
    scroll-padding-top: 6rem;
}

body {
    margin: 0;
    min-width: 320px;
    font-family: var(--f-body);
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--c-text);
    background-color: var(--c-bg);
    background-image:
        radial-gradient(ellipse 70% 40% at 12% 8%, rgba(94, 54, 128, 0.35), transparent 70%),
        radial-gradient(ellipse 60% 40% at 88% 38%, rgba(31, 74, 72, 0.4), transparent 70%),
        radial-gradient(ellipse 70% 40% at 18% 78%, rgba(94, 54, 128, 0.3), transparent 70%),
        linear-gradient(rgba(18, 10, 25, 0.6), rgba(18, 10, 25, 0.6)),
        url("./assets/77f6987608d21e7a5255b0484277abe8.webp");
    background-size: auto, auto, auto, auto, 640px 640px;
    background-repeat: no-repeat, no-repeat, no-repeat, repeat, repeat;
}

body.nav-open {
    overflow: hidden;
}

h1, h2, h3, h4 {
    font-family: var(--f-display);
    font-weight: 700;
    line-height: 1.1;
    color: #fff;
    margin: 0 0 0.6em;
    letter-spacing: 0.01em;
}

h2 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); }
h3 { font-size: clamp(1.3rem, 2.4vw, 1.6rem); text-transform: uppercase; }
h4 { font-size: 1.2rem; }

p { margin: 0 0 1em; }

a { color: var(--c-acid); }
a:hover { color: #d4ff99; }

strong { font-weight: 600; color: #fff; }

a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--c-acid);
    outline-offset: 3px;
}

ul, ol { padding-left: 1.25rem; }
li::marker { color: var(--c-acid); }

.skip-link {
    position: absolute;
    left: 1rem;
    top: -4rem;
    z-index: 100;
    padding: 0.75rem 1.25rem;
    background: var(--c-acid);
    color: var(--c-ink);
    font-weight: 600;
    text-decoration: none;
}
.skip-link:focus { top: 1rem; }

.container {
    width: min(100% - 2 * var(--gutter), var(--container));
    margin-inline: auto;
}

.section {
    position: relative;
    padding-block: var(--section-pad);
}

.section-head {
    text-align: center;
    margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
}
.section-head p {
    max-width: 62ch;
    margin-inline: auto;
    color: var(--c-text-2);
}

.prose p,
.prose li { max-width: 70ch; }
.prose a { color: var(--c-acid); }

.lead {
    font-size: clamp(1.0625rem, 1.6vw, 1.2rem);
    color: var(--c-text);
}

.microline {
    font-size: 0.875rem;
    color: var(--c-muted);
    letter-spacing: 0.03em;
    margin: 0;
}

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

.note {
    font-size: 0.9375rem;
    color: var(--c-muted);
    border-left: 2px solid var(--c-gold);
    padding-left: 0.75rem;
    margin: 0.5rem 0 0;
}

.big-stat {
    font-family: var(--f-display);
    font-weight: 700;
    font-size: clamp(2.6rem, 6vw, 3.8rem);
    line-height: 1;
    color: var(--c-acid);
    text-shadow: 0 0 14px var(--c-acid-glow);
    margin: 0;
}

.split {
    display: grid;
    gap: 2.5rem;
}

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

.icon-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

/* Section-wide background layer: style="--section-bg: url('...')" */
.bg-section {
    position: relative;
    isolation: isolate;
}
.bg-section::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background-image: var(--section-bg, none);
    background-size: cover;
    background-position: var(--section-bg-pos, center);
    background-repeat: no-repeat;
}
.bg-section::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, var(--c-bg) 0%, rgba(18, 10, 25, 0.4) 16%, rgba(18, 10, 25, 0.4) 84%, var(--c-bg) 100%);
}

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

.site-header {
    position: sticky;
    top: 0;
    z-index: 60;
    isolation: isolate;
    padding-block: 0.55rem calc(0.55rem + var(--header-crack));
}
.site-header::before,
.site-header::after {
    content: "";
    position: absolute;
    inset: 0;
    clip-path: var(--clip-header);
    pointer-events: none;
}
.site-header::before {
    z-index: -1;
    background: linear-gradient(180deg, #1f122b 0%, #170d21 100%);
}
.site-header::after {
    z-index: -2;
    top: 3px;
    bottom: -3px;
    background: linear-gradient(90deg, rgba(180, 255, 79, 0.6), rgba(90, 52, 121, 0.9) 45%, rgba(180, 255, 79, 0.5));
}

.site-header__inner {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.site-brand {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-right: auto;
    font-family: var(--f-display);
    font-weight: 700;
    font-size: clamp(1.25rem, 5.2vw, 2.25rem);
    line-height: 1;
    color: var(--c-acid);
    text-decoration: none;
    white-space: nowrap;
    text-shadow: 0 0 6px rgba(180, 255, 79, 0.55), 0 0 18px rgba(180, 255, 79, 0.3);
}
.site-brand:hover { color: #d4ff99; }

.header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.header-actions .header-login { display: none; }

.nav-toggle {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    padding: 0;
    border: 1px solid rgba(180, 255, 79, 0.55);
    background: var(--c-purple-3);
    color: var(--c-acid);
    cursor: pointer;
}
.nav-toggle__bar {
    display: block;
    width: 22px;
    height: 2px;
    background: currentColor;
    transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile drawer */
.site-nav {
    position: fixed;
    top: var(--header-bottom, 4.5rem);
    left: 0;
    right: 0;
    bottom: 0;
    height: auto;
    z-index: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 1.25rem var(--gutter) 2.5rem;
    background: #150c1e;
    border-top: 2px solid rgba(180, 255, 79, 0.45);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
}
.site-nav.is-open {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

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

.site-nav__link {
    display: flex;
    align-items: center;
    min-height: 52px;
    font-family: var(--f-display);
    font-weight: 600;
    font-size: 1.5rem;
    color: var(--c-text);
    text-decoration: none;
    border-bottom: 1px solid rgba(180, 255, 79, 0.14);
}
.site-nav__slash {
    color: var(--c-acid);
    margin-right: 0.1em;
}
.site-nav__link:hover,
.site-nav__link[aria-current="page"] {
    color: var(--c-acid);
    text-shadow: 0 0 10px var(--c-acid-glow);
}

.site-nav__extra { margin-top: 1.5rem; }

.site-nav__secondary {
    display: flex;
    flex-wrap: wrap;
    gap: 0 1.5rem;
    margin-bottom: 1.5rem;
}
.site-nav__secondary a {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    font-weight: 600;
    color: var(--c-text-2);
}

.site-nav__actions {
    display: grid;
    gap: 0.85rem;
}
.site-nav__actions .btn,
.site-nav__actions .btn__body { width: 100%; }

.site-nav__note {
    margin: 1.25rem 0 0;
    font-size: 0.875rem;
    color: var(--c-muted);
}

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

.btn {
    display: inline-flex;
    text-decoration: none;
    color: #fff;
    filter:
        drop-shadow(0 0 1px var(--c-acid))
        drop-shadow(0 0 1px var(--c-acid))
        drop-shadow(0 0 8px var(--c-acid-glow));
    transition: filter 0.2s ease;
}
.btn__body {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0.55em 1.6em;
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 1.1rem;
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-align: center;
    color: #fff;
    background: linear-gradient(100deg, #6b3d90 0%, #4b2a68 60%, #5a3479 100%);
    clip-path: var(--clip-btn);
}
.btn:hover {
    color: #fff;
    filter:
        drop-shadow(0 0 1px var(--c-acid))
        drop-shadow(0 0 1px var(--c-acid))
        drop-shadow(0 0 10px var(--c-acid-glow))
        drop-shadow(0 8px 14px rgba(227, 187, 82, 0.55));
}
.btn:focus-visible { outline-offset: 5px; }

.btn--sm .btn__body {
    min-height: 44px;
    padding: 0.4em 0.95em;
    font-size: 1rem;
}
.btn--lg .btn__body {
    min-height: 58px;
    padding: 0.65em 2.2em;
    font-size: clamp(1.15rem, 2.4vw, 1.4rem);
}

.btn--ghost {
    filter:
        drop-shadow(0 0 1px var(--c-teal-line))
        drop-shadow(0 0 1px var(--c-teal-line));
}
.btn--ghost .btn__body {
    background: #1d1229;
    color: var(--c-mint);
}
.btn--ghost:hover {
    filter:
        drop-shadow(0 0 1px var(--c-acid))
        drop-shadow(0 0 1px var(--c-acid))
        drop-shadow(0 0 8px var(--c-acid-glow));
}

.btn--gold {
    filter:
        drop-shadow(0 0 1px var(--c-gold))
        drop-shadow(0 0 1px var(--c-gold))
        drop-shadow(0 0 8px var(--c-gold-glow));
}

/* ============================================
   RIBBON HEADING
   ============================================ */

.ribbon {
    display: block;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto 1.25rem;
    font-family: var(--f-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1.05;
    color: #fff;
    filter:
        drop-shadow(0 0 1px var(--c-acid))
        drop-shadow(0 0 1px var(--c-acid))
        drop-shadow(0 0 10px rgba(180, 255, 79, 0.3));
}
.ribbon--left { margin-left: 0; }
.ribbon__body {
    display: block;
    padding: 0.32em 1.15em 0.28em;
    text-align: center;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
    background:
        linear-gradient(100deg, rgba(104, 60, 140, 0.95) 0%, rgba(70, 38, 98, 0.95) 55%, rgba(92, 52, 124, 0.95) 100%),
        url("./assets/77f6987608d21e7a5255b0484277abe8.webp") center / 420px 420px;
    clip-path: var(--clip-ribbon);
}
.ribbon--md { font-size: clamp(1.55rem, 3.4vw, 2.5rem); }
.ribbon--lg { font-size: clamp(2rem, 5.6vw, 3.9rem); }
.ribbon--sm { font-size: clamp(1.25rem, 2.4vw, 1.6rem); }

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

.chips { width: 100%; }
.chips__label {
    margin: 0 0 0.6rem;
    font-family: var(--f-display);
    font-weight: 600;
    font-size: 1.15rem;
    color: var(--c-text);
    text-align: center;
}
.chips__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem 0.75rem;
}
.chip {
    transform: skewX(-12deg);
    background: linear-gradient(180deg, #34204a, #2a1838);
    border: 1px solid var(--c-teal-line);
    box-shadow: 0 0 8px rgba(79, 179, 166, 0.25), inset 0 0 12px rgba(0, 0, 0, 0.35);
}
.chip__body {
    display: block;
    transform: skewX(12deg);
    padding: 0.5rem 0.8rem;
    font-family: var(--f-display);
    font-weight: 600;
    font-size: 1.05rem;
    line-height: 1.2;
    text-align: center;
    color: var(--c-text);
}
.chip__value {
    color: var(--c-acid);
    font-weight: 700;
}

.chips--terms { max-width: 24rem; margin-inline: auto; }

.chips--stats .chip { border-color: var(--c-gold); box-shadow: 0 0 8px var(--c-gold-glow); }
.chips--stats .chip__value { font-size: 1.35rem; display: block; }

.chips--row .chips__list,
.chips--pills .chips__list,
.chips--anchors .chips__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.chips--pills .chip__body { padding: 0.45rem 1rem; }

.chip__link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    text-decoration: none;
    color: var(--c-text);
}
.chips--anchors .chip {
    background: linear-gradient(100deg, #5a3479, #42245c);
    border-color: rgba(180, 255, 79, 0.6);
    transition: box-shadow 0.2s ease;
}
.chips--anchors .chip:hover,
.chips--anchors .chip:focus-within {
    box-shadow: 0 0 12px var(--c-acid-glow);
}
.chip__link:hover { color: var(--c-acid); }
.chip__link:focus-visible { outline-offset: 2px; }

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

.hero {
    position: relative;
    isolation: isolate;
    margin-top: calc(-1 * var(--header-crack));
    padding: calc(var(--header-crack) + 1.5rem) 0 clamp(2.5rem, 6vw, 4.5rem);
    --hero-shade: 50% 70%;
}
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background-image: var(--hero-bg, none);
    background-size: cover;
    background-position: var(--hero-bg-pos, center);
    background-repeat: no-repeat;
}
.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(ellipse 60% 55% at var(--hero-shade), rgba(18, 10, 25, 0.62), transparent 72%),
        linear-gradient(180deg, rgba(18, 10, 25, 0.3) 0%, rgba(18, 10, 25, 0.15) 45%, var(--c-bg) 100%);
}

.hero__inner {
    width: min(100% - 2 * var(--gutter), var(--container));
    margin-inline: auto;
    display: grid;
    gap: 1rem;
    align-items: center;
}

.hero__art {
    position: relative;
    z-index: 0;
    justify-self: center;
    width: min(62%, 22rem);
    margin-bottom: -2.5rem;
    pointer-events: none;
}
.hero__art img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

.hero__content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    text-align: center;
}
.hero__content > * { margin-block: 0; }
.hero__content .ribbon { margin-bottom: 0.25rem; }

.hero__sub {
    max-width: 28ch;
    font-family: var(--f-display);
    font-weight: 700;
    font-size: clamp(1.2rem, 2.8vw, 1.85rem);
    line-height: 1.15;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
}

.hero__lead {
    max-width: 54ch;
    color: var(--c-text);
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7);
}

.hero--no-art { padding-top: calc(var(--header-crack) + clamp(3rem, 8vw, 6rem)); }

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

.crumbs__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.25rem;
    font-size: 0.875rem;
    color: var(--c-muted);
}
.crumbs__item + .crumbs__item::before {
    content: "/";
    color: var(--c-acid);
    margin-right: 0.25rem;
}
.crumbs__item a {
    color: var(--c-text-2);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

/* ============================================
   NOTCHED TILE
   ============================================ */

.tile {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    --tile-edge: var(--c-acid);
    --tile-glow: rgba(180, 255, 79, 0.5);
}
.tile--gold {
    --tile-edge: var(--c-gold);
    --tile-glow: rgba(227, 187, 82, 0.5);
}
.tile--teal {
    --tile-edge: var(--c-teal-line);
    --tile-glow: rgba(79, 179, 166, 0.5);
}
.tile__glow {
    filter: drop-shadow(0 0 6px var(--tile-glow));
}
.tile__frame {
    padding: 2px;
    background: var(--tile-edge);
    clip-path: var(--clip-notch);
}
.tile__inner {
    aspect-ratio: 4 / 3;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: radial-gradient(ellipse at 50% 40%, #3a2350 0%, #24152f 60%, #170e1f 100%);
    clip-path: var(--clip-notch);
}
.tile__inner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.tile__inner .emblem {
    width: 40%;
    height: auto;
    color: var(--c-acid);
    filter: drop-shadow(0 0 8px var(--c-acid-glow));
}
.tile__caption-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.tile__label {
    display: block;
    background: linear-gradient(100deg, #5a3479, #42245c);
    clip-path: var(--clip-para);
}
.tile__label-body {
    display: block;
    padding: 0.35rem 0.9rem;
    font-family: var(--f-display);
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    text-align: center;
    color: #fff;
}
.tile__caption {
    font-size: 0.9375rem;
    line-height: 1.45;
    color: var(--c-text-2);
}

/* ============================================
   GOLD CRACKED PANEL
   ============================================ */

.gold-panel {
    position: relative;
    isolation: isolate;
    padding: 2rem clamp(1.1rem, 4vw, 3rem) 2.25rem;
    background: rgba(13, 8, 18, 0.94);
    border: 1.5px solid var(--c-gold);
    box-shadow: 0 0 18px rgba(227, 187, 82, 0.22), inset 0 0 30px rgba(227, 187, 82, 0.07);
}
.gold-panel--headed {
    margin-top: 2rem;
    padding-top: 0;
}
.gold-panel--headed > .ribbon {
    position: relative;
    z-index: 2;
    transform: translateY(-50%);
    margin-bottom: 0;
}
.gold-panel__grid {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 1.5rem;
}
.gold-panel__icon {
    order: -1;
    justify-self: center;
    color: var(--c-mint);
}
.gold-panel__body > :last-child { margin-bottom: 0; }

.crack {
    position: absolute;
    width: clamp(90px, 16vw, 170px);
    height: auto;
    z-index: 0;
    stroke: var(--c-gold);
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 3px rgba(227, 187, 82, 0.7));
    pointer-events: none;
}
.crack--tr { top: -1px; right: -1px; transform: scaleX(-1); }
.crack--bl { bottom: -1px; left: -1px; transform: scaleY(-1); }

/* ============================================
   STONE SLAB
   ============================================ */

.slab-wrap {
    position: relative;
    margin-top: 1rem;
}
.slab-wrap > .ribbon {
    position: relative;
    z-index: 2;
    margin-bottom: -1.5rem;
}
.slab {
    position: relative;
    isolation: isolate;
    padding: 3.25rem clamp(1.1rem, 4vw, 3rem) 2.75rem;
    filter: drop-shadow(0 12px 20px rgba(0, 0, 0, 0.5));
}
.slab::before,
.slab::after {
    content: "";
    position: absolute;
    inset: 0;
    clip-path: var(--clip-slab);
    pointer-events: none;
}
.slab::before {
    z-index: -2;
    background: linear-gradient(135deg, #1f4846 0%, #263b47 42%, #3a2a52 72%, #4a2b60 100%);
}
.slab::after {
    z-index: -1;
    background: url("./assets/77f6987608d21e7a5255b0484277abe8.webp") center / 520px 520px;
    opacity: 0.3;
    mix-blend-mode: luminosity;
}
.slab__cracks {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    fill: none;
    stroke: rgba(6, 3, 10, 0.7);
    stroke-width: 1.4;
    vector-effect: non-scaling-stroke;
    pointer-events: none;
}
.slab__cracks path { vector-effect: non-scaling-stroke; }
.slab__body { position: relative; }
.slab__body > :last-child { margin-bottom: 0; }
.slab__body h3 { color: #fff; }
.slab__body p { color: var(--c-text); }

/* ============================================
   SLAB STRIP (connected fracture)
   ============================================ */

.strip {
    position: relative;
    isolation: isolate;
    display: grid;
    gap: 2rem;
}
.strip__crack {
    position: absolute;
    z-index: 1;
    fill: none;
    stroke: var(--c-gold);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 4px rgba(227, 187, 82, 0.8));
    pointer-events: none;
}
.strip__crack path { vector-effect: non-scaling-stroke; }
.strip__crack--h {
    display: none;
    left: -1%;
    width: 102%;
    top: 2rem;
    height: 1.6rem;
}
.strip__crack--v {
    left: 0.35rem;
    top: 0;
    bottom: 0;
    width: 1.4rem;
    height: 100%;
}
.strip__item {
    position: relative;
    padding: 3.6rem 1.25rem 1.6rem 2.25rem;
}
.strip__item::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(160deg, #33204a 0%, #241532 70%, #1d2a33 100%);
    clip-path: var(--clip-slab);
}
.strip__item > * {
    position: relative;
    z-index: 2;
}
.strip__tag {
    position: absolute;
    top: -0.55rem;
    left: 1.25rem;
    margin: 0;
    transform: skewX(-14deg);
    background: var(--c-acid);
    box-shadow: 0 0 10px var(--c-acid-glow);
}
.strip__tag span {
    display: block;
    transform: skewX(14deg);
    padding: 0.25rem 0.85rem;
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--c-ink);
}
.strip__title {
    font-size: clamp(1.3rem, 2.2vw, 1.55rem);
    margin-bottom: 0.5rem;
}
.strip__text {
    color: var(--c-text-2);
    margin-bottom: 0.5rem;
}
.strip__link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-weight: 600;
    color: var(--c-acid);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

/* ============================================
   STEP TRACK (conduit)
   ============================================ */

.steps {
    position: relative;
    isolation: isolate;
}
.steps__line {
    position: absolute;
    z-index: -2;
    fill: none;
    pointer-events: none;
    filter: drop-shadow(0 0 6px rgba(180, 255, 79, 0.55));
}
.steps__line path { vector-effect: non-scaling-stroke; }
.steps__line--h {
    display: none;
    left: 0;
    width: 100%;
    top: 50%;
    height: 130px;
    transform: translateY(-50%);
}
.steps__line--v {
    top: 0;
    bottom: 0;
    left: 50%;
    width: 90px;
    height: 100%;
    transform: translateX(-50%);
}
.steps__trail {
    stroke: rgba(170, 100, 230, 0.32);
    stroke-width: 26;
    stroke-linecap: round;
}
.steps--lightning .steps__trail {
    stroke: rgba(79, 179, 166, 0.3);
    stroke-width: 16;
}
.steps__core {
    stroke: var(--c-acid);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.steps__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 2.5rem;
}
.step {
    position: relative;
    padding: 2.75rem 1.35rem 1.6rem;
    text-align: left;
}
.step::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(155deg, #4b2a66 0%, #33204a 55%, #26162f 100%);
    clip-path: var(--clip-slab);
}
.step__num {
    position: absolute;
    top: 0.4rem;
    right: 1rem;
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 3.6rem;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 2px var(--c-acid);
    text-shadow: 0 0 12px rgba(180, 255, 79, 0.35);
}
.step__tag {
    display: inline-block;
    margin-bottom: 0.65rem;
    transform: skewX(-14deg);
    background: var(--c-gold);
    box-shadow: 0 0 10px var(--c-gold-glow);
}
.step__tag span {
    display: block;
    transform: skewX(14deg);
    padding: 0.25rem 0.85rem;
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--c-ink);
}
.step__title {
    padding-right: 3rem;
    margin-bottom: 0.4rem;
}
.step__text {
    margin: 0;
    color: var(--c-text-2);
}

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

.faq-list {
    display: grid;
    gap: 0.85rem;
    align-items: start;
}
.faq {
    position: relative;
    isolation: isolate;
}
.faq::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(100deg, #24202c 0%, #1c1a22 60%, #221a2c 100%);
    clip-path: polygon(0 0, 30% 2px, 62% 0, 100% 3px, calc(100% - 2px) 50%, 100% calc(100% - 2px), 64% 100%, 28% calc(100% - 3px), 0 100%);
}
.faq::after {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 3px;
    background: var(--c-acid);
    box-shadow: 0 0 8px var(--c-acid-glow);
}
.faq__q {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 56px;
    padding: 0.9rem 3.4rem 0.9rem 1.35rem;
    font-family: var(--f-display);
    font-weight: 600;
    font-size: clamp(1.15rem, 2vw, 1.3rem);
    line-height: 1.25;
    color: #fff;
    cursor: pointer;
    list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:focus-visible { outline-offset: -4px; }
.faq__q:hover .faq__q-text { color: var(--c-acid); }
.faq__icon {
    position: absolute;
    right: 1.2rem;
    top: 50%;
    width: 18px;
    height: 18px;
    transform: translateY(-50%);
}
.faq__icon::before,
.faq__icon::after {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    width: 18px;
    height: 2px;
    background: var(--c-acid);
    transition: transform 0.2s ease;
}
.faq__icon::after { transform: rotate(90deg); }
.faq[open] .faq__icon::after { transform: rotate(0deg); }
.faq__a {
    margin: 0 0.75rem 0.85rem 1.1rem;
    padding: 1rem 1.15rem;
    background: var(--c-surface-2);
    color: var(--c-text);
}
.faq__a > :last-child { margin-bottom: 0; }
.faq__a a { color: var(--c-acid); }

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

.callout {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 1rem 1.25rem;
    background: var(--c-surface);
    border: 1px solid rgba(227, 187, 82, 0.4);
    border-left: 4px solid var(--c-gold);
    margin: 1.5rem 0;
}
.callout--magenta {
    border-color: rgba(228, 92, 255, 0.45);
    border-left-color: var(--c-magenta);
    box-shadow: 0 0 14px rgba(228, 92, 255, 0.18);
}
.callout--teal {
    border-color: rgba(79, 179, 166, 0.45);
    border-left-color: var(--c-teal-line);
}
.callout__icon { flex: 0 0 auto; color: var(--c-mint); }
.callout__body > :last-child { margin-bottom: 0; }
.callout__title {
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 1.2rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--c-gold);
    margin-bottom: 0.35rem;
}
.callout--magenta .callout__title { color: #f29dff; }
.callout--teal .callout__title { color: var(--c-mint); }

/* ============================================
   ICONS
   ============================================ */

.icon {
    flex: 0 0 auto;
    color: var(--c-mint);
    filter: drop-shadow(0 0 6px rgba(79, 179, 166, 0.6));
}
.icon--sm { width: 1.5rem; height: 1.5rem; }
.icon--md { width: 2.75rem; height: 2.75rem; }
.icon--lg { width: 4rem; height: 4rem; }
.icon--xl { width: clamp(5rem, 12vw, 8rem); height: clamp(5rem, 12vw, 8rem); }

/* ============================================
   CASHBACK METER
   ============================================ */

.meter { margin: 1.5rem 0; }
.meter__label {
    font-family: var(--f-display);
    font-weight: 600;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--c-mint);
    margin-bottom: 1.75rem;
}
.meter__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.4rem;
}
.meter__seg {
    position: relative;
    min-height: 64px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transform: skewX(-14deg);
    color: #fff;
}
.meter__seg > * { transform: skewX(14deg); }
.meter__seg--1 { background: #1d4f4b; }
.meter__seg--2 { background: #276b5f; }
.meter__seg--3 { background: #5e9f3b; color: var(--c-ink); }
.meter__seg--4 { background: var(--c-acid); color: var(--c-ink); box-shadow: 0 0 12px var(--c-acid-glow); }
.meter__seg--5 { background: var(--c-gold); color: var(--c-ink); box-shadow: 0 0 14px var(--c-gold-glow); }
.meter__pct {
    font-family: var(--f-display);
    font-weight: 700;
    font-size: clamp(1.15rem, 3vw, 1.6rem);
    line-height: 1;
}
.meter__level {
    font-size: 0.875rem;
    font-weight: 600;
    margin-top: 0.2rem;
}
.meter__marker {
    position: absolute;
    top: -1.6rem;
    left: 50%;
    translate: -50% 0;
    color: var(--c-gold);
}
.meter__marker .icon { color: var(--c-gold); filter: drop-shadow(0 0 6px var(--c-gold-glow)); }

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

.table-wrap {
    max-width: 100%;
    overflow-x: auto;
}
.jk-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 1rem;
}
.jk-table--wide { min-width: 40rem; }
.jk-table caption {
    text-align: left;
    padding-bottom: 0.6rem;
    font-family: var(--f-display);
    font-weight: 600;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--c-mint);
}
.jk-table th {
    text-align: left;
    padding: 0.75rem 1rem;
    background: var(--c-purple-2);
    color: #fff;
    font-family: var(--f-display);
    font-weight: 600;
    font-size: 1.05rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.jk-table td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgba(180, 255, 79, 0.16);
    color: var(--c-text);
    vertical-align: top;
}
.jk-table tbody tr:nth-child(odd) td,
.jk-table tbody tr:nth-child(odd) th { background: #120a19; }
.jk-table tbody tr:nth-child(even) td,
.jk-table tbody tr:nth-child(even) th { background: #22142e; }
.jk-table tbody th {
    font-family: var(--f-body);
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    font-size: 1rem;
    border-bottom: 1px solid rgba(180, 255, 79, 0.16);
}
.jk-table .num {
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 1.2rem;
    color: var(--c-acid);
}
.jk-table .is-gold {
    color: var(--c-gold);
    text-shadow: 0 0 8px var(--c-gold-glow);
}

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

.cta-band {
    position: relative;
    isolation: isolate;
    padding-block: clamp(3rem, 7vw, 5rem);
    text-align: center;
}
.cta-band::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(ellipse 45% 60% at 50% 55%, rgba(106, 60, 144, 0.45), transparent 70%),
        radial-gradient(ellipse 30% 40% at 50% 60%, rgba(180, 255, 79, 0.12), transparent 70%);
}
.cta-band__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.1rem;
}
.cta-band__inner .ribbon { margin-bottom: 0.25rem; }
.cta-band__text {
    max-width: 52ch;
    margin: 0;
    color: var(--c-text-2);
}

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

.site-footer {
    position: relative;
    isolation: isolate;
    margin-top: clamp(2.5rem, 6vw, 4.5rem);
    padding: 4.5rem 0 1.75rem;
    color: var(--c-text-2);
}
.site-footer::before,
.site-footer::after {
    content: "";
    position: absolute;
    inset: 0;
    clip-path: var(--clip-footer);
    pointer-events: none;
}
.site-footer::before {
    z-index: -1;
    background:
        linear-gradient(160deg, rgba(42, 24, 56, 0.94) 0%, rgba(26, 15, 36, 0.96) 55%, rgba(27, 47, 51, 0.94) 100%),
        url("./assets/77f6987608d21e7a5255b0484277abe8.webp") center / 700px 700px;
}
.site-footer::after {
    z-index: -2;
    top: -3px;
    background: linear-gradient(90deg, rgba(180, 255, 79, 0.5), rgba(90, 52, 121, 0.9) 50%, rgba(227, 187, 82, 0.5));
}

.site-footer__shard {
    position: absolute;
    z-index: 0;
    width: clamp(90px, 14vw, 160px);
    height: auto;
    fill: rgba(194, 243, 223, 0.06);
    stroke: rgba(196, 160, 230, 0.45);
    stroke-width: 1.2;
    stroke-linejoin: round;
    pointer-events: none;
}
.site-footer__shard--tl { top: 2rem; left: 0.5rem; }
.site-footer__shard--br { bottom: 0.5rem; right: 0.5rem; }

.site-footer__grid {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 1.75rem;
}
.site-footer__title {
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 1.15rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #fff;
    margin-bottom: 0.4rem;
}
.site-footer__links {
    list-style: none;
    margin: 0;
    padding: 0;
}
.site-footer__links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--c-text-2);
    text-decoration: none;
}
.site-footer__links a:hover,
.site-footer__links a[aria-current="page"] {
    color: var(--c-acid);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.site-footer__brand p { margin-bottom: 0.6rem; }
.site-footer__wordmark {
    font-family: var(--f-display);
    font-weight: 700;
    font-size: clamp(1.9rem, 4vw, 2.5rem);
    line-height: 1;
    color: var(--c-acid);
    text-shadow: 0 0 6px rgba(180, 255, 79, 0.5), 0 0 18px rgba(180, 255, 79, 0.25);
}
.site-footer__slogan {
    font-family: var(--f-display);
    font-weight: 600;
    font-size: 1.2rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #f29dff;
}

.site-footer__legal {
    position: relative;
    z-index: 1;
    margin-top: 2rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(180, 255, 79, 0.2);
    font-size: 0.9375rem;
    color: var(--c-muted);
}
.site-footer__legal p { margin-bottom: 0.65rem; }
.site-footer__age {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--c-text-2);
}
.badge-18 {
    flex: 0 0 auto;
    display: inline-grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    border: 2px solid var(--c-gold);
    color: var(--c-gold);
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 1.05rem;
    box-shadow: 0 0 10px var(--c-gold-glow);
}

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

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

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

.hero--home { --hero-bg-pos: 28% center; }

.hero__title .ribbon__body { padding-block: 0.38em 0.34em; }
.hero__title-brand {
    display: block;
    font-size: 0.42em;
    letter-spacing: 0.12em;
    color: var(--c-acid);
    text-shadow: 0 0 10px var(--c-acid-glow);
    margin-bottom: 0.15em;
}
.hero__title-main { display: block; }

/* Slots + live showcase */
.showcase__grid { gap: 3.5rem; }
.showcase__col {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
}
.showcase__col::before {
    content: "";
    position: absolute;
    inset: -2rem -1rem;
    z-index: -1;
    background: radial-gradient(ellipse 62% 56% at 50% 45%, rgba(46, 26, 65, 0.88), rgba(46, 26, 65, 0.35) 60%, transparent 78%);
    pointer-events: none;
}
.showcase__col .tile-grid { margin-bottom: 1.75rem; }
.showcase__foot {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    text-align: center;
}
.showcase__foot p:not(.big-stat) {
    max-width: 52ch;
    margin: 0;
    color: var(--c-text);
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.75);
}

/* Trust slab */
.trust__grid { gap: 2rem; }
.trust__col {
    display: grid;
    gap: 1.75rem;
    align-content: start;
}
.trust .icon-item h3 { margin-bottom: 0.35rem; }
.trust .icon-item p { margin-bottom: 0.6rem; }
.trust__licence {
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 1.15rem;
    letter-spacing: 0.03em;
    color: var(--c-acid);
}
.trust__action {
    display: flex;
    justify-content: center;
}

/* Responsible gaming */
.responsible .gold-panel__body p { max-width: 68ch; }
.responsible__action { margin-top: 1.5rem; }

@media (max-width: 359px) {
    .btn--sm .btn__body { padding-inline: 0.75em; font-size: 0.95rem; }
    .trust .icon-item { grid-template-columns: minmax(0, 1fr); }
}

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

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

    .chips--stats .chips__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }

    .strip--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
    .strip--3 .strip__crack--h { display: block; }
    .strip--3 .strip__crack--v { display: none; }
    .strip--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1.5rem; }
    .strip--4 .strip__crack--v { display: none; }
    .strip__item { padding-left: 1.35rem; }

    .steps__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.25rem; }
    .steps__line--h { display: block; }
    .steps__line--v { display: none; }

    .site-footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .site-footer__brand { grid-column: 1 / -1; }
}

@media (min-width: 1024px) {
    /* Header: inline navigation */
    .nav-toggle { display: none; }
    .site-brand { margin-right: auto; }

    .site-nav {
        position: static;
        z-index: auto;
        overflow: visible;
        padding: 0;
        background: none;
        border: 0;
        visibility: visible;
        opacity: 1;
        transform: none;
        transition: none;
        margin-right: 1.25rem;
    }
    .site-nav__list {
        display: flex;
        align-items: center;
        gap: 0.25rem;
    }
    .site-nav__link {
        min-height: 44px;
        padding: 0.35rem 0.7rem;
        font-size: 1.3rem;
        text-transform: lowercase;
        border-bottom: 0;
    }
    .site-nav__extra { display: none; }

    /* Hero split */
    .hero--home {
        min-height: min(92vh, 880px);
        display: flex;
        align-items: center;
        --hero-bg-pos: center;
    }
    .showcase__grid { gap: 4rem; }
    .trust__action { justify-content: flex-start; padding-left: 5rem; }
    .hero__inner { gap: 0; }
    .hero--art-left { --hero-shade: 70% 48%; }
    .hero--art-right { --hero-shade: 30% 48%; }
    .hero--art-left .hero__inner { grid-template-columns: minmax(0, 45fr) minmax(0, 55fr); }
    .hero--art-right .hero__inner { grid-template-columns: minmax(0, 55fr) minmax(0, 45fr); }
    .hero__art {
        width: auto;
        justify-self: stretch;
        margin: 0;
    }
    .hero--art-left .hero__art { margin: 0 -10% 0 -4%; }
    .hero--art-right .hero__art { order: 2; margin: 0 -4% 0 -10%; }
    .hero--no-art { --hero-shade: 72% 50%; }
    .hero--no-art .hero__inner { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
    .hero--no-art .hero__content { grid-column: 2; }

    .split { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem; }

    .gold-panel__grid { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2.5rem; }
    .gold-panel__grid:has(> :only-child) { grid-template-columns: minmax(0, 1fr); }
    .gold-panel__icon { order: 0; }

    .strip--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .strip--4 .strip__crack--h { display: block; }

    .site-footer { padding-top: 5.5rem; }
    .site-footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.5fr); gap: 2rem; }
    .site-footer__brand { grid-column: auto; text-align: right; }
}

@media (min-width: 1280px) {
    .site-nav__link { font-size: 1.4rem; padding-inline: 0.85rem; }
}

/* ============================================
   BONUSSER
   ============================================ */

.hero--inner {
    --hero-bg-pos: 30% center;
    overflow: visible;
    z-index: 2;
}
.hero--inner .hero__content .crumbs { margin-bottom: 0.25rem; }
.hero--inner .hero__title .ribbon__body { padding-block: 0.38em 0.34em; }

.welcome .steps { margin-bottom: 2rem; }
.prose-note {
    max-width: 62ch;
    margin: 1.5rem auto 0;
    text-align: center;
    color: var(--c-text-2);
}

/* Terms panel */
.terms-panel .gold-panel__body p { max-width: 70ch; }
.terms-panel .jk-table { min-width: 28rem; }
.terms-panel .jk-table tbody th { width: 38%; }
.terms-panel .example {
    margin-top: 1.25rem;
    padding: 0.85rem 1.1rem;
    background: var(--c-surface-2);
    border-left: 3px solid var(--c-acid);
}

/* Cashback */
.split--media { align-items: center; }
.cashback__text .ribbon { margin-bottom: 1.25rem; }
.cashback__data .jk-table { min-width: 20rem; }
.cashback__data .jk-table tbody th { font-weight: 600; }

/* Weekly mini cards */
.mini-grid {
    display: grid;
    gap: 2rem;
    grid-template-columns: minmax(0, 1fr);
}
.mini-grid .strip__tag { background: var(--c-purple); box-shadow: 0 0 10px rgba(228, 92, 255, 0.35); }
.mini-grid .strip__tag span { color: #fff; }
.mini-grid .strip__item { padding-left: 1.5rem; }

/* Bonus shop */
.bonus-shop::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(ellipse 42% 62% at 76% 50%, rgba(180, 255, 79, 0.12), transparent 70%);
    pointer-events: none;
}
.bonus-shop__text p { max-width: 56ch; }
.free-art {
    display: block;
    width: 100%;
    max-width: 30rem;
    height: auto;
    margin-inline: auto;
    object-fit: contain;
    background: none;
    border: 0;
    filter: drop-shadow(0 0 28px rgba(180, 255, 79, 0.3));
}

/* Drops & Wins confetti */
.confetti-head {
    position: relative;
    isolation: isolate;
    padding-block: 1rem;
}
.confetti-head svg {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: -1;
    width: min(100%, 38rem);
    height: auto;
    transform: translate(-50%, -50%);
    pointer-events: none;
}
.confetti-head .ribbon { position: relative; z-index: 1; margin-bottom: 0; }

/* High roller slab */
.hr-slab {
    position: relative;
    display: grid;
    gap: 1rem;
    padding: 1.75rem clamp(1.1rem, 4vw, 3rem) 2rem;
    border: 2px solid var(--c-gold);
    background: linear-gradient(120deg, rgba(227, 187, 82, 0.3) 0%, #2a1a3a 42%, #42245c 100%);
    box-shadow: 0 0 22px var(--c-gold-glow), inset 0 0 30px rgba(227, 187, 82, 0.08);
}
.hr-slab__num {
    margin: 0;
    font-family: var(--f-display);
    font-weight: 700;
    font-size: clamp(4.5rem, 20vw, 9rem);
    line-height: 0.9;
    color: transparent;
    -webkit-text-stroke: 2px var(--c-gold);
    text-shadow: 0 0 18px var(--c-gold-glow);
    text-align: center;
}
.hr-slab__body h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
.hr-slab__body p { max-width: 62ch; }
.hr-slab__body .btn { margin-top: 0.5rem; }

/* FAQ + responsible */
.bonus-faq .faq-list { max-width: 52rem; margin-inline: auto; }
.crazy .callout { max-width: 52rem; margin-inline: auto; }
.crazy .callout__title { font-size: clamp(1.5rem, 3vw, 2rem); }

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

@media (min-width: 1024px) {
    .hero--inner .hero__art { align-self: end; margin-bottom: -8rem; }
    .hero--inner + .section { padding-top: calc(var(--section-pad) + 3rem); }
    .hr-slab { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 2.5rem; }
    .hr-slab__num { text-align: left; }
}

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

.catalog .chips--anchors { margin-bottom: 2.5rem; }
.catalog__head p { text-align: center; }
.catalog__action {
    display: flex;
    justify-content: center;
    margin-top: 0.5rem;
}
.tile-grid--five .tile__caption { font-size: 0.9375rem; }

.catalog-band {
    background: linear-gradient(180deg, transparent 0%, rgba(46, 26, 65, 0.55) 22%, rgba(46, 26, 65, 0.55) 78%, transparent 100%);
}
.providers .chips--pills,
.live .chips--pills,
.table-games .chips--row { margin-top: 1.5rem; }
.live .chips--pills { margin-top: 2.5rem; }

/* Jackpot crown behind heading */
.jackpot-head {
    position: relative;
    isolation: isolate;
    padding-top: 4rem;
    margin-bottom: 1.5rem;
}
.jackpot-head svg {
    position: absolute;
    left: 50%;
    top: 0;
    z-index: -1;
    width: min(100%, 40rem);
    height: auto;
    transform: translateX(-50%);
    overflow: visible;
    pointer-events: none;
}
.jackpot-head__crown {
    fill: rgba(227, 187, 82, 0.2);
    stroke: var(--c-gold);
    stroke-width: 2.4;
    filter: drop-shadow(0 0 6px rgba(227, 187, 82, 0.7));
}
.jackpot-head__ray {
    stroke: rgba(227, 187, 82, 0.6);
    stroke-width: 1.8;
}
.jackpot-head .ribbon { position: relative; z-index: 1; margin-bottom: 0; }
.jackpots .callout { max-width: 46rem; margin-inline: auto; text-align: left; }

/* Framed wide media */
.live-frame {
    width: 100%;
    margin: 0;
    transform: rotate(-1deg);
}
.live-frame--alt { transform: rotate(1deg); }
.live-frame .tile__inner { aspect-ratio: 16 / 9; }
.catalog-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
}
.catalog-text p { max-width: 58ch; }
.catalog-text .btn { margin-top: 0.5rem; }

/* Crash curve */
.crash {
    position: relative;
    isolation: isolate;
}
.crash__curve {
    position: absolute;
    inset: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.crash__curve path {
    stroke: rgba(180, 255, 79, 0.4);
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: miter;
    vector-effect: non-scaling-stroke;
    filter: drop-shadow(0 0 6px rgba(180, 255, 79, 0.5));
}
.crash .callout { max-width: 46rem; margin-inline: auto; text-align: left; }

/* Wagering table */
.wager .gold-panel__body > p { max-width: 70ch; }
.wager .jk-table { min-width: 34rem; }
.wager .jk-table tbody th { width: 36%; }
.wager .jk-table tbody tr.row--crash th,
.wager .jk-table tbody tr.row--crash td { background: #2c1236; }
.wager .jk-table tbody tr.row--crash th { box-shadow: inset 4px 0 0 var(--c-magenta); }
.wager .row--crash .num { color: #f29dff; }
.wager .row--crash .icon {
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.45rem;
    vertical-align: -0.22em;
    color: #f29dff;
    filter: none;
}
.wager .note { max-width: 70ch; margin-top: 1rem; }

/* FAQ */
.spil-faq .faq-list { max-width: 52rem; margin-inline: auto; }

/* Mobile slab */
.mobile .icon-item p { max-width: 62ch; }
.mobile .icon-item .btn { margin-top: 0.5rem; }

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

@media (max-width: 359px) {
    .mobile .icon-item { grid-template-columns: minmax(0, 1fr); }
}

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

.hero--about {
    --hero-bg-pos: 22% center;
    padding-bottom: clamp(3.5rem, 8vw, 6rem);
}
.hero--about::after {
    background:
        linear-gradient(180deg, transparent 0%, transparent 50%, rgba(18, 10, 25, 0.7) 80%, var(--c-bg) 100%),
        linear-gradient(180deg, rgba(18, 10, 25, 0.58), rgba(18, 10, 25, 0.48));
}
.hero--about .hero__title .ribbon__body { padding-block: 0.38em 0.34em; }
.hero--about .hero__content .crumbs { margin-bottom: 0.25rem; }

/* Fact sheet */
.fact-table {
    width: 100%;
    border-collapse: collapse;
}
.fact-table th,
.fact-table td {
    padding: 0.8rem 0.5rem;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid rgba(194, 243, 223, 0.2);
}
.fact-table tr:last-child th,
.fact-table tr:last-child td { border-bottom: 0; }
.fact-table th {
    width: 36%;
    font-family: var(--f-display);
    font-weight: 600;
    font-size: 1.05rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--c-mint);
}
.fact-table td { color: #fff; font-weight: 600; }
.fact-table .is-no {
    color: var(--c-magenta);
    font-family: var(--f-display);
    font-size: 1.35rem;
    font-weight: 700;
    text-transform: uppercase;
    text-shadow: 0 0 10px rgba(228, 92, 255, 0.55);
}

/* Prose groups */
.about-prose p { max-width: 66ch; }
.about-col .ribbon,
.about-icon .ribbon { margin-bottom: 1rem; }
.about-icon .icon-item { gap: 1.25rem; }
.about-icon .callout { margin-block: 1.25rem; }
.license .about-icon .icon-item { max-width: 62rem; margin-inline: auto; }

/* Joker mascot */
.joker { isolation: isolate; }
.joker::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(ellipse 60% 45% at 62% 55%, rgba(31, 74, 72, 0.6), transparent 72%),
        radial-gradient(ellipse 40% 35% at 28% 80%, rgba(180, 255, 79, 0.1), transparent 70%);
    pointer-events: none;
}
.joker__figure {
    margin: 0;
    display: flex;
    justify-content: center;
}
.joker__figure img {
    display: block;
    width: min(78%, 22rem);
    height: auto;
    object-fit: contain;
    background: none;
    border: 0;
    filter: drop-shadow(0 0 24px rgba(180, 255, 79, 0.2));
}

/* FAQ block */
.about-faq .faq-list,
.about-faq .callout { max-width: 52rem; margin-inline: auto; }
.about-faq .faq-list { margin-top: 1rem; }

@media (max-width: 359px) {
    .about-icon .icon-item { grid-template-columns: minmax(0, 1fr); }
}

@media (min-width: 1024px) {
    .hero--about {
        min-height: 34rem;
        display: flex;
        align-items: center;
    }
    .hero--about::after {
        background:
            linear-gradient(180deg, transparent 0%, transparent 55%, rgba(18, 10, 25, 0.7) 82%, var(--c-bg) 100%),
            radial-gradient(ellipse 50% 70% at 72% 50%, rgba(18, 10, 25, 0.62), transparent 75%);
    }
    .split.joker__grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: center; }
}

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

.hero--inner:has(.vip-title) { --hero-bg-pos: 68% center; }

.vip-points__intro { max-width: 66ch; }
.vip-points__grid {
    display: grid;
    gap: 1.75rem;
    margin-top: 1.25rem;
}
.vip-points .icon-item h3 { margin-bottom: 0.35rem; }
.vip-points .icon-item p { max-width: 56ch; margin-bottom: 0; }

.vip-levels .callout { max-width: 52rem; margin-inline: auto; }
.vip-levels .jk-table { min-width: 44rem; }
.vip-levels .jk-table tbody th { white-space: nowrap; }
.vip-levels .note { max-width: 62ch; margin-top: 1rem; }

.stair {
    max-width: 44rem;
    margin: 1.75rem auto 2rem;
}
.stair svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}
.stair__h { display: none; }
.stair__v { max-width: 18rem; margin-inline: auto; }
.stair__steps polygon {
    fill: #5a3479;
    stroke: rgba(228, 92, 255, 0.55);
    stroke-width: 1.5;
    stroke-linejoin: round;
}
.stair__steps polygon:nth-child(even) { fill: #42245c; }
.stair__neon {
    fill: none;
    stroke: var(--c-acid);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 5px var(--c-acid-glow));
}
.stair__spark circle {
    fill: var(--c-gold);
    filter: drop-shadow(0 0 4px var(--c-gold-glow));
}
.stair__nums text {
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 30px;
    text-anchor: middle;
    fill: #fff;
}
.stair__nums--end text { text-anchor: end; font-size: 28px; }
.stair__crown {
    fill: var(--c-gold);
    stroke: #fff3c4;
    stroke-width: 1;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 6px var(--c-gold-glow));
}

.vip-cashback .vip-cashback__text p { max-width: 58ch; }
.vip-cashback .meter__level { font-size: 0.75rem; }
.vip-cashback .note { margin-top: 0.75rem; }

.vip-reload__panel .gold-panel__body p { max-width: 66ch; }
.vip-reload__panel h3 { margin-top: 1.25rem; margin-bottom: 0.35rem; }

.vip-limits__panel .gold-panel__body > p { max-width: 70ch; }
.vip-limits .jk-table { min-width: 36rem; margin-block: 0.5rem 1rem; }
.vip-limits .jk-table tbody th { width: 24%; }
.vip-limits .jk-table td.is-gold {
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 1.25rem;
}

.vip-honest .callout { max-width: 52rem; margin-inline: auto; }
.vip-honest .callout__icon .icon { width: 3rem; height: 3rem; color: #f29dff; filter: drop-shadow(0 0 6px rgba(228, 92, 255, 0.6)); }

.vip-faq .faq-list { max-width: 52rem; margin-inline: auto; }

@media (min-width: 768px) {
    .vip-points__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem; }
    .stair__h { display: block; }
    .stair__v { display: none; }
}

@media (max-width: 359px) {
    .vip-points .icon-item,
    .vip-honest .callout { grid-template-columns: minmax(0, 1fr); }
    .vip-honest .callout { flex-direction: column; }
}

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

.hero--payments { --hero-bg-pos: 30% center; }
.hero--payments .hero__title .ribbon__body { padding-block: 0.38em 0.34em; }
.hero--payments .hero__content .crumbs { margin-bottom: 0.25rem; }
.hero--payments .hero__art::before {
    content: "";
    position: absolute;
    inset: 8% 4% 4%;
    z-index: -1;
    background: radial-gradient(ellipse 55% 50% at 50% 55%, rgba(180, 255, 79, 0.28), transparent 70%);
    pointer-events: none;
}
.hero--payments .hero__content::before {
    content: "";
    position: absolute;
    inset: -1rem -2rem;
    z-index: -1;
    background: radial-gradient(ellipse 60% 45% at 50% 24%, rgba(228, 92, 255, 0.2), transparent 70%);
    pointer-events: none;
}
.hero__deco {
    display: none;
    position: absolute;
    top: -2rem;
    right: 0;
    z-index: -1;
    width: 9rem;
    height: auto;
    stroke: rgba(196, 160, 230, 0.6);
    stroke-width: 1.4;
    fill: rgba(94, 54, 128, 0.12);
    pointer-events: none;
}

.pay-quick .steps { margin-top: 0.5rem; }

/* Method tiles */
.methods__panel {
    position: relative;
    isolation: isolate;
}
.methods__panel::before {
    content: "";
    position: absolute;
    inset: -2rem -1rem;
    z-index: -1;
    background: radial-gradient(ellipse 66% 60% at 50% 50%, rgba(30, 18, 41, 0.92), rgba(30, 18, 41, 0.45) 65%, transparent 82%);
    pointer-events: none;
}
.method-grid {
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem 0.85rem;
}
.method {
    --m-edge: var(--c-acid);
    --m-glow: rgba(180, 255, 79, 0.45);
    filter: drop-shadow(0 0 6px var(--m-glow));
}
.method--gold {
    --m-edge: var(--c-gold);
    --m-glow: rgba(227, 187, 82, 0.45);
}
.method__frame {
    height: 100%;
    padding: 2px;
    background: var(--m-edge);
    clip-path: var(--clip-notch);
}
.method__inner {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.55rem;
    padding: 1.2rem 0.9rem 1.1rem;
    background: linear-gradient(160deg, #3a2350 0%, #24152f 70%, #1a0f24 100%);
    clip-path: var(--clip-notch);
}
.method__name {
    margin: 0;
    font-size: clamp(1.25rem, 2.4vw, 1.5rem);
    line-height: 1.1;
    color: #fff;
}
.method__label {
    display: inline-block;
    padding: 0.2rem 0.9rem;
    font-family: var(--f-display);
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #fff;
    background: linear-gradient(100deg, #5a3479, #42245c);
    clip-path: var(--clip-para);
}
.method__note {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.45;
    color: var(--c-text-2);
}
.method__badge {
    margin-top: auto;
    display: inline-block;
    padding: 0.2rem 0.75rem;
    transform: skewX(-12deg);
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--c-ink);
    background: var(--c-magenta);
    box-shadow: 0 0 10px rgba(228, 92, 255, 0.5);
}
.methods__foot {
    max-width: 66ch;
    margin: 0 auto;
    text-align: center;
    color: var(--c-text);
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.75);
}

/* Withdrawal times slab table */
.slab-table {
    position: relative;
    isolation: isolate;
    padding: 1.5rem clamp(0.9rem, 3vw, 1.75rem) 1.75rem;
    filter: drop-shadow(0 12px 20px rgba(0, 0, 0, 0.45));
}
.slab-table::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background: linear-gradient(145deg, #2a2832 0%, #1c1a22 55%, #24202c 100%);
    clip-path: var(--clip-slab);
}
.slab-table__cracks {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    fill: none;
    stroke: rgba(180, 255, 79, 0.28);
    stroke-width: 1.4;
    pointer-events: none;
}
.slab-table__cracks path { vector-effect: non-scaling-stroke; }
.slab-table .jk-table { min-width: 34rem; }
.slab-table .jk-table th { background: linear-gradient(100deg, #6b3d90, #4b2a68); }
.slab-table .jk-table td,
.slab-table .jk-table tbody th { border-bottom-color: rgba(180, 255, 79, 0.35); }
.pay-sub { margin-top: 2rem; }
.pay-sub-text { max-width: 70ch; }

/* Limits table */
.limits-table .col-free { box-shadow: inset 2px 0 0 var(--c-acid), inset -2px 0 0 var(--c-acid); }
.limits-table .col-vip { box-shadow: inset 0 0 16px rgba(228, 92, 255, 0.18); }
.limits-table .col-vip-first { box-shadow: inset 2px 0 0 var(--c-gold), inset 0 0 16px rgba(228, 92, 255, 0.18); }
.limits-table .col-vip-last { box-shadow: inset -2px 0 0 var(--c-gold), inset 0 0 16px rgba(228, 92, 255, 0.18); }
.limits-table td.is-gold {
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 1.2rem;
}
.pay-limits .note { max-width: 70ch; margin-top: 1rem; }
.pay-limits .pay-sub-text { margin-top: 1.25rem; }

/* KYC */
.kyc__grid {
    display: grid;
    gap: 1.25rem;
    align-items: center;
}
.kyc__icons {
    display: flex;
    gap: 1rem;
    justify-content: center;
}
.kyc .icon { width: 4rem; height: 4rem; color: #8fc9bf; }
.kyc__copy p { max-width: 62ch; }

/* Bonus exclusion banner */
.exclude {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1rem;
    align-items: center;
    padding: 1.75rem clamp(1rem, 4vw, 2.5rem) 2rem;
    color: #fff;
}
.exclude::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(100deg, #8a2aa6 0%, #5a2380 55%, #42245c 100%);
    clip-path: polygon(1.5% 0, 100% 4%, 98.5% 100%, 0 94%);
}
.exclude::after {
    content: "";
    position: absolute;
    left: 3%;
    right: 3%;
    bottom: 0;
    height: 3px;
    background: var(--c-acid);
    box-shadow: 0 0 12px var(--c-acid-glow);
}
.exclude .icon { width: 3rem; height: 3rem; color: #fff; filter: drop-shadow(0 0 6px rgba(228, 92, 255, 0.7)); }
.exclude__body h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); margin-bottom: 0.4rem; text-transform: uppercase; }
.exclude__body p { max-width: 70ch; margin: 0; color: #fff; }
.exclude__body a { color: var(--c-acid); }

/* Currency */
.currency__panel {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 2rem clamp(1.1rem, 4vw, 3rem) 2.25rem;
    background: #1a0f24;
    border: 1px solid rgba(188, 174, 205, 0.35);
}
.currency__panel::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: min(70%, 20rem);
    height: min(100%, 12rem);
    z-index: -1;
    background:
        linear-gradient(45deg, rgba(194, 243, 223, 0.06) 25%, transparent 25%, transparent 75%, rgba(194, 243, 223, 0.06) 75%) 0 0 / 40px 40px,
        linear-gradient(45deg, rgba(194, 243, 223, 0.06) 25%, transparent 25%, transparent 75%, rgba(194, 243, 223, 0.06) 75%) 20px 20px / 40px 40px;
    clip-path: polygon(35% 0, 100% 0, 100% 100%);
    pointer-events: none;
}
.currency__panel p { max-width: 66ch; margin-bottom: 0; }

.pay-faq .faq-list { max-width: 52rem; margin-inline: auto; }

@media (min-width: 768px) {
    .hero__deco { display: block; }
    .kyc__grid { grid-template-columns: auto minmax(0, 1fr); gap: 2rem; }
    .kyc__icons { flex-direction: column; }
    .kyc .icon { width: 5rem; height: 5rem; }
    .exclude { grid-template-columns: auto minmax(0, 1fr); gap: 1.5rem; }
    .exclude .icon { width: 4.5rem; height: 4.5rem; }
}

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

@media (max-width: 359px) {
    .exclude { grid-template-columns: minmax(0, 1fr); }
}

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

.hero--faq { --hero-bg-pos: 18% center; }
.hero--faq .hero__title .ribbon__body { padding-block: 0.38em 0.34em; }
.hero--faq .hero__content .crumbs { margin-bottom: 0.25rem; }
.hero--faq .hero__art::before {
    content: "";
    position: absolute;
    inset: 6% 2% 4%;
    z-index: -1;
    background: radial-gradient(ellipse 50% 46% at 50% 38%, rgba(180, 255, 79, 0.3), transparent 70%);
    pointer-events: none;
}
.hero--faq .hero__art img {
    -webkit-mask-image: linear-gradient(180deg, #000 68%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 68%, transparent 100%);
}
.hero--faq .hero__content::before {
    content: "";
    position: absolute;
    inset: -1rem -2rem;
    z-index: -1;
    background: radial-gradient(ellipse 60% 45% at 50% 22%, rgba(228, 92, 255, 0.22), transparent 70%);
    pointer-events: none;
}
.hero__slogan {
    margin: 0;
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 1.35rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--c-acid);
    text-shadow: 0 0 10px var(--c-acid-glow);
}

/* Category groups with one continuous crack */
.faq-wrap { position: relative; }
.faq-wrap__crack {
    display: none;
    position: absolute;
    left: 0;
    top: 0;
    width: 1.5rem;
    height: 100%;
    fill: none;
    stroke: var(--c-teal-line);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 4px rgba(79, 179, 166, 0.75));
    pointer-events: none;
}
.faq-wrap__crack path { vector-effect: non-scaling-stroke; }
.faq-group { padding-block: clamp(2rem, 5vw, 3.25rem); }
.faq-group .ribbon { margin-bottom: 1rem; }
.faq-group__intro {
    max-width: 66ch;
    margin: 0 0 1.5rem;
    color: var(--c-text);
}
.faq-group .chips--row { justify-content: flex-start; margin: 0 0 1.25rem; }
.faq-group .chips--row .chips__list { justify-content: flex-start; }
.faq-group .faq-list { max-width: 56rem; }
.faq-group .callout { max-width: 56rem; }

.faq-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.75rem;
    align-items: start;
}
.faq-row .icon {
    width: 2.5rem;
    height: 2.5rem;
    margin-top: 0.7rem;
    color: #8fc9bf;
    filter: drop-shadow(0 0 5px rgba(79, 179, 166, 0.5));
}

.faq-responsible .gold-panel__body > .faq-group__intro { max-width: 68ch; }
.faq-responsible .gold-panel { margin-top: 2rem; }

/* Related link tiles */
.link-tiles {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
}
.link-tile {
    --lt-edge: var(--c-acid);
    --lt-glow: rgba(180, 255, 79, 0.45);
    filter: drop-shadow(0 0 6px var(--lt-glow));
    transition: transform 0.2s ease;
}
.link-tile--gold {
    --lt-edge: var(--c-gold);
    --lt-glow: rgba(227, 187, 82, 0.45);
}
.link-tile:hover,
.link-tile:focus-within { transform: translateY(-4px); }
.link-tile__frame {
    display: flex;
    height: 100%;
    padding: 2px;
    background: var(--lt-edge);
    clip-path: var(--clip-notch);
    text-decoration: none;
    color: #fff;
}
.link-tile__frame:focus-visible { outline-offset: -6px; }
.link-tile__inner {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 1.4rem 1.15rem 1.4rem;
    background: linear-gradient(160deg, #3a2350 0%, #24152f 70%, #1a0f24 100%);
    clip-path: var(--clip-notch);
}
.link-tile__title {
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 1.6rem;
    line-height: 1.1;
    text-transform: uppercase;
    color: #fff;
}
.link-tile__text {
    color: var(--c-text-2);
    font-size: 0.9375rem;
    line-height: 1.45;
}
.link-tile__go {
    margin-top: auto;
    padding-top: 0.5rem;
    font-weight: 600;
    color: var(--lt-edge);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

@media (min-width: 768px) {
    .faq-wrap { padding-left: 2.5rem; }
    .faq-wrap__crack { display: block; }
    .faq-row { gap: 1.1rem; }
    .faq-row .icon { width: 3.5rem; height: 3.5rem; margin-top: 0.3rem; }
    .link-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
    .hero--faq {
        min-height: 36rem;
        display: flex;
        align-items: center;
    }
    .link-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 359px) {
    .faq-row { grid-template-columns: minmax(0, 1fr); }
    .faq-row .icon { margin-top: 0; }
}

@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;
        transition-delay: 0s !important;
    }
    .site-nav { transform: none; }
}