/*
 * Slotoro Casino - shared styles
 * Steampunk-carnival dark theme: deep indigo, riveted steel, brass, cyan glow.
 */

:root {
    --c-bg: #1a1238;
    --c-bg-deep: #120c2a;
    --c-bg-raise: #221a48;
    --c-steel: #2d4568;
    --c-steel-2: #22385a;
    --c-steel-3: #1a2a46;
    --c-steel-edge: #8b9ab3;
    --c-slate: #283657;
    --c-brass: #c9933f;
    --c-brass-light: #f2cd7e;
    --c-brass-dark: #7d5524;
    --c-gold: #ffc85e;
    --c-cyan: #45d6ff;
    --c-cyan-deep: #1a8fb8;
    --c-red: #d0313f;
    --c-green: #3fb865;
    --c-amber: #f3a83c;
    --c-text: #f4efe4;
    --c-muted: #c9cfe2;
    --c-heading: #ffe3a6;
    --c-ink: #2a1700;

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

    --radius: 14px;
    --radius-sm: 8px;
    --shadow: 0 14px 34px rgba(5, 3, 20, 0.55);
    --glow-cyan: 0 0 0 2px rgba(69, 214, 255, 0.55), 0 0 26px rgba(69, 214, 255, 0.45);
    --brass-rule: linear-gradient(90deg, #6c4718, #f2cd7e 20%, #c9933f 50%, #f2cd7e 80%, #6c4718);
    --rivet: radial-gradient(circle, #fbe6b2 0 1.6px, #c08a3c 2.4px 3.4px, #4a3012 4px, transparent 4.8px);

    --container: 1200px;
    --gutter: clamp(16px, 4vw, 32px);
    --section-y: clamp(56px, 8vw, 104px);
    --header-bottom: 64px;
}

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

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

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

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

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

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

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

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

details {
    height: fit-content;
}

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

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

section {
    overflow: clip;
}

/* ============================================
   BASE & TYPOGRAPHY
   ============================================ */

html {
    -webkit-text-size-adjust: 100%;
    scroll-padding-top: calc(var(--header-bottom) + 12px);
}

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

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);
    -webkit-font-smoothing: antialiased;
}

body.menu-open { overflow: hidden; }

main { display: block; overflow-x: clip; }

h1, h2, h3, h4 {
    margin: 0 0 0.5em;
    font-family: var(--f-display);
    font-weight: 700;
    line-height: 1.1;
    color: var(--c-heading);
    letter-spacing: 0.005em;
}

h1 { font-size: clamp(2.1rem, 1.3rem + 3.2vw, 3.6rem); }
h2 { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.6rem); }
h3 { font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); }

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

a { color: var(--c-brass-light); }
a:hover { color: #ffe9b8; }

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

ul, ol { padding-left: 1.25em; margin: 0 0 1em; }
li + li { margin-top: 0.35em; }

:focus-visible {
    outline: 3px solid var(--c-cyan);
    outline-offset: 3px;
}

.svg-sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

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

.skip-link {
    position: absolute;
    left: 12px;
    top: -60px;
    z-index: 200;
    padding: 10px 16px;
    border-radius: 8px;
    background: var(--c-gold);
    color: var(--c-ink);
    font-weight: 600;
    text-decoration: none;
}

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

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

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

.section-head {
    max-width: 780px;
    margin: 0 auto 2.5rem;
    text-align: center;
}

.lead {
    font-size: clamp(1.1rem, 1rem + 0.35vw, 1.25rem);
    color: var(--c-text);
}

.prose { max-width: 72ch; }
.prose a:not([class]) { color: var(--c-brass-light); }

.updated {
    font-size: 0.9375rem;
    color: var(--c-muted);
}

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

.text-link .icon { width: 1em; height: 1em; }

.split {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(24px, 4vw, 56px);
    align-items: center;
}

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

.strip {
    position: relative;
    background: var(--c-bg-deep);
    border-block: 1px solid var(--c-brass-dark);
}

/* ============================================
   ICONS & GEARS
   ============================================ */

.icon {
    display: inline-block;
    flex: none;
    width: 1.25em;
    height: 1.25em;
    vertical-align: middle;
}

.gear {
    display: block;
    color: var(--c-brass);
}

.cog-spin {
    animation: cog-spin 40s linear infinite;
    transform-origin: 50% 50%;
}

.cog-spin--rev { animation-direction: reverse; }

.cog-spin.is-paused,
.is-doc-hidden .cog-spin { animation-play-state: paused; }

@keyframes cog-spin {
    to { transform: rotate(360deg); }
}

/* ============================================
   BUTTONS, CHIPS, CALLOUTS
   ============================================ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    min-height: 48px;
    padding: 0.6em 1.4em;
    border: 2px solid transparent;
    border-radius: 10px;
    font-family: var(--f-display);
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 0.01em;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.btn:hover { filter: brightness(1.08); }
.btn:active { transform: translateY(1px); }

.btn--gold {
    color: var(--c-ink);
    background: linear-gradient(180deg, #ffe08f 0%, #ffc24f 45%, #ef9b28 100%);
    border-color: #fff0c2;
    box-shadow: 0 0 0 2px #8a5a1c, 0 6px 16px rgba(239, 155, 40, 0.35), inset 0 -3px 0 rgba(120, 60, 0, 0.35);
}

.btn--gold:hover { color: var(--c-ink); }

.btn--steel {
    color: #fff;
    background: linear-gradient(180deg, #2b4a72, #1b2f50);
    border-color: var(--c-cyan-deep);
    box-shadow: 0 0 0 1px #0b1430, inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.btn--steel:hover { color: #fff; box-shadow: var(--glow-cyan); }

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

.chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.chip-row > li { margin: 0; }

.chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 8px 18px;
    border: 2px solid transparent;
    border-radius: 999px;
    font-family: var(--f-display);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--c-heading);
    text-decoration: none;
    background:
        linear-gradient(180deg, #24365a, #16213d) padding-box,
        linear-gradient(180deg, #f2cd7e, #7d5524) border-box;
    transition: box-shadow 0.2s ease;
}

a.chip:hover,
a.chip:focus-visible { color: var(--c-heading); box-shadow: var(--glow-cyan); }

.callout {
    padding: 18px 20px;
    border-left: 5px solid var(--c-amber);
    border-radius: 0 10px 10px 0;
    background: #211b45;
    box-shadow: inset 0 0 0 1px rgba(201, 147, 63, 0.3);
}

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

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: linear-gradient(180deg, #22305a 0%, #18183e 100%);
    border-bottom: 3px solid;
    border-image: var(--brass-rule) 1;
    box-shadow: 0 6px 18px rgba(4, 2, 18, 0.55);
}

.site-header__bar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    min-height: 64px;
    padding-block: 4px;
}

.menu-toggle {
    grid-column: 1;
    grid-row: 1;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 2px solid var(--c-brass-dark);
    border-radius: 10px;
    background: linear-gradient(180deg, #2b4a72, #1b2f50);
    cursor: pointer;
}

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

.menu-toggle.is-open .menu-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle.is-open .menu-toggle__bar:nth-child(2) { transform: scaleX(0); }
.menu-toggle.is-open .menu-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.site-brand {
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    position: relative;
    display: block;
    width: 128px;
    text-decoration: none;
}

.site-brand__crest {
    display: block;
    width: 100%;
    height: auto;
}

.site-brand__text {
    position: absolute;
    inset: 0 0 12% 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: var(--f-display);
    font-weight: 700;
    line-height: 0.92;
    text-transform: uppercase;
}

.site-brand__name {
    font-size: 1.12rem;
    letter-spacing: 0.03em;
    color: var(--c-gold);
    text-shadow: 0 1px 0 #7a4a10, 0 0 8px rgba(255, 200, 94, 0.35);
}

.site-brand__sub {
    font-size: 0.66rem;
    letter-spacing: 0.22em;
    color: var(--c-cyan);
}

.header-actions {
    grid-column: 3;
    grid-row: 1;
    display: flex;
    align-items: center;
    gap: 8px;
}

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

@media (max-width: 359px) {
    .header-actions .header-cta { display: none; }
}

/* Mobile drawer */
.site-nav {
    position: fixed;
    top: var(--header-bottom);
    left: 0;
    right: 0;
    bottom: 0;
    height: auto;
    z-index: 99;
    padding: 12px var(--gutter) 32px;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: #140f30;
    visibility: hidden;
    transform: translateY(-10px);
    transition: transform 0.25s ease, visibility 0s linear 0.25s;
}

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

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

.site-nav__list li { margin: 0; }

.site-nav__link {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 6px 4px;
    border-bottom: 1px solid rgba(201, 147, 63, 0.3);
    font-family: var(--f-display);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--c-text);
    text-decoration: none;
}

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

.site-nav__link[aria-current="page"] {
    color: var(--c-gold);
    box-shadow: inset 4px 0 0 var(--c-cyan);
    padding-left: 14px;
}

.site-nav__actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 24px;
}

.site-nav__note {
    margin: 4px 0 0;
    text-align: center;
    font-size: 0.9375rem;
    color: var(--c-muted);
}

@media (min-width: 768px) {
    .site-brand { width: 160px; }
    .site-brand__name { font-size: 1.35rem; }
    .site-brand__sub { font-size: 0.75rem; }
    .header-actions .header-login { display: inline-flex; }
}

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

    .site-header__bar {
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        min-height: 84px;
        gap: 16px;
    }

    .site-nav {
        position: static;
        grid-column: 1;
        grid-row: 1;
        justify-self: start;
        padding: 0;
        overflow: visible;
        background: none;
        visibility: visible;
        transform: none;
        transition: none;
    }

    .site-nav__list {
        display: flex;
        align-items: center;
        gap: clamp(10px, 1.3vw, 24px);
    }

    .site-nav__extra { display: none; }

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

    .site-nav__link[aria-current="page"] {
        padding-left: 0;
        box-shadow: none;
        border-bottom-color: var(--c-cyan);
    }

    .site-nav__actions { display: none; }

    .site-brand { grid-column: 2; width: 200px; }
    .site-brand__name { font-size: 1.7rem; }
    .site-brand__sub { font-size: 0.85rem; }

    .header-actions { grid-column: 3; justify-self: end; gap: 12px; }
}

/* ============================================
   STEEL PANEL, PLAQUE, MEDALLION
   ============================================ */

.steel {
    position: relative;
    color: var(--c-text);
    border: 3px solid var(--c-steel-edge);
    border-radius: var(--radius);
    background:
        var(--rivet) left 5px top 5px / 12px 12px no-repeat,
        var(--rivet) right 5px top 5px / 12px 12px no-repeat,
        var(--rivet) left 5px bottom 5px / 12px 12px no-repeat,
        var(--rivet) right 5px bottom 5px / 12px 12px no-repeat,
        linear-gradient(165deg, #3b5880 0%, #2a4266 38%, #1d3050 100%);
    box-shadow:
        0 0 0 2px #2c1f0c,
        0 0 0 4px var(--c-brass-dark),
        inset 0 2px 0 rgba(255, 255, 255, 0.14),
        inset 0 -12px 24px rgba(5, 10, 30, 0.45),
        var(--shadow);
}

.plaque {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    margin: 0;
    padding: 0.35em 1.4em;
    border: 3px solid transparent;
    border-radius: 10px;
    font-family: var(--f-display);
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.15;
    color: var(--c-heading);
    text-align: center;
    background:
        linear-gradient(180deg, #2c4064, #18243f) padding-box,
        linear-gradient(180deg, #fbe1a0, #b07a33 55%, #6c4718) border-box;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.plaque::before,
.plaque::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 12px;
    height: 12px;
    margin-top: -6px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #fbe6b2, #b37c33 60%, #5c3c13);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.plaque::before { left: -9px; }
.plaque::after { right: -9px; }

.title-plaque {
    display: flex;
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
    padding: 0.3em 1.3em;
    font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem);
}

.steel-panel {
    padding: 0 clamp(18px, 2.5vw, 28px) 1.75rem;
}

.steel-panel__title {
    display: flex;
    width: fit-content;
    max-width: calc(100% - 16px);
    margin: -1.35rem auto 1.1rem;
}

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

.steel-panel.has-medallion {
    padding-bottom: 3.4rem;
    margin-bottom: 38px;
}

.steel-panel--green {
    background:
        var(--rivet) left 5px top 5px / 12px 12px no-repeat,
        var(--rivet) right 5px top 5px / 12px 12px no-repeat,
        var(--rivet) left 5px bottom 5px / 12px 12px no-repeat,
        var(--rivet) right 5px bottom 5px / 12px 12px no-repeat,
        radial-gradient(ellipse 80% 90% at 85% 60%, rgba(63, 184, 101, 0.38), transparent 70%),
        linear-gradient(165deg, #335a6c 0%, #234459 45%, #193445 100%);
}

.steel-panel--slate {
    background:
        var(--rivet) left 5px top 5px / 12px 12px no-repeat,
        var(--rivet) right 5px top 5px / 12px 12px no-repeat,
        var(--rivet) left 5px bottom 5px / 12px 12px no-repeat,
        var(--rivet) right 5px bottom 5px / 12px 12px no-repeat,
        linear-gradient(170deg, #2f3c5c, #232f4b);
}

.medallion {
    position: absolute;
    left: 50%;
    bottom: 0;
    display: grid;
    place-items: center;
    width: 76px;
    height: 76px;
    transform: translate(-50%, 50%);
    filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.5));
}

.medallion .gear {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    --gear-core: var(--c-cyan);
    --gear-hub: #1b2a4a;
}

.medallion__icon {
    position: relative;
    width: 28px;
    height: 28px;
    color: var(--c-heading);
}

/* ============================================
   CHAIN ROW (shared connector)
   ============================================ */

.chain-row {
    position: relative;
    padding-block: 34px 48px;
    overflow-x: clip;
}

.chain {
    position: absolute;
    z-index: 0;
    pointer-events: none;
}

.chain path {
    fill: none;
    vector-effect: non-scaling-stroke;
    stroke-linecap: round;
}

.chain__base {
    stroke: #3d4a63;
    stroke-width: 3;
}

.chain__links {
    stroke: #9fb0c6;
    stroke-width: 10;
    stroke-dasharray: 12 16;
}

.chain__holes {
    stroke: var(--chain-hole, var(--c-bg));
    stroke-width: 4;
    stroke-dasharray: 6 22;
    stroke-dashoffset: -3;
}

.chain--h {
    display: none;
    left: 0;
    width: 100%;
    top: 50%;
    height: 100px;
    margin-top: -50px;
}

.chain--v {
    left: calc(var(--gutter) - 2px);
    top: 0;
    width: 40px;
    height: 100%;
}

.chain-row__edge {
    position: absolute;
    z-index: 0;
    display: none;
    width: 150px;
    height: 150px;
    top: calc(50% - 75px);
    --gear-core: var(--c-cyan);
    --gear-hub: #142041;
    filter: drop-shadow(0 0 14px rgba(69, 214, 255, 0.35));
}

.chain-row__edge--left { left: -78px; }
.chain-row__edge--right { right: -78px; }

.chain-row__items {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 60px 28px;
    padding-left: calc(var(--gutter) + 36px);
}

.chain-row__items > * { position: relative; z-index: 1; }

.chain-row__cog {
    position: absolute;
    z-index: 0;
    display: none;
    top: -18px;
    left: calc(var(--pos) - 34px);
    width: 68px;
    height: 68px;
}

.chain-row__cog .gear { width: 100%; height: 100%; }

@media (min-width: 768px) {
    .chain--h,
    .chain-row__edge,
    .chain-row__cog { display: block; }

    .chain--v { display: none; }

    .chain-row__items { padding-left: var(--gutter); }

    .chain-row--cols-2 .chain-row__items,
    .chain-row--cols-4 .chain-row__items { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .chain-row--cols-3 .chain-row__items { grid-template-columns: repeat(3, minmax(0, 1fr)); }

    .chain-row--cols-4 .chain-row__cog { display: none; }
}

@media (min-width: 1024px) {
    .chain-row--cols-4 .chain-row__items { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .chain-row--cols-4 .chain-row__cog { display: block; }
}

/* ============================================
   INNER PAGE HERO
   ============================================ */

.page-hero {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    padding-block: 32px 72px;
}

.page-hero__bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    background-color: var(--c-bg);
    background-image: radial-gradient(ellipse at 70% 30%, #3a2a7a 0%, var(--c-bg) 70%);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.page-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(ellipse 50% 60% at 70% 50%, rgba(69, 214, 255, 0.18), rgba(122, 76, 255, 0.12) 45%, transparent 75%);
}

.page-hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 160px;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(26, 18, 56, 0), var(--c-bg));
}

.page-hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    align-items: center;
}

.page-hero__figure {
    width: 100%;
    max-width: 240px;
    margin-inline: auto;
    margin-bottom: -12px;
}

.page-hero__figure:empty { display: none; }

.page-hero__mascot {
    display: block;
    width: 100%;
    height: auto;
    max-height: 300px;
    object-fit: contain;
    filter: drop-shadow(0 10px 24px rgba(10, 4, 30, 0.6));
}

.page-hero__panel {
    position: relative;
    z-index: 1;
    padding: 2.4rem clamp(20px, 3vw, 40px) 2rem;
}

.page-hero__plaque {
    display: flex;
    width: fit-content;
    max-width: calc(100% - 16px);
    margin: -3.5rem auto 1.25rem;
    font-size: 1.05rem;
}

.page-hero__panel h1 { margin-bottom: 0.4em; }

.page-hero__panel .btn { margin-top: 0.5rem; }

@media (min-width: 1024px) {
    .page-hero {
        min-height: 560px;
        padding-block: 56px 88px;
    }

    .page-hero__inner {
        grid-template-columns: minmax(0, 35fr) minmax(0, 65fr);
        gap: clamp(24px, 3vw, 48px);
    }

    .page-hero__figure {
        max-width: none;
        margin: 0;
        align-self: end;
    }

    .page-hero__figure:empty { display: block; }

    .page-hero__mascot { max-height: 540px; }

    .page-hero__panel {
        justify-self: end;
        width: 100%;
        max-width: 680px;
    }
}

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

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

.faq {
    border: 2px solid var(--c-brass-dark);
    border-radius: 10px;
    background: linear-gradient(180deg, #2b4266, #1f3152);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 0 0 1px #0d0a22;
    transition: border-color 0.2s ease;
}

.faq[open] { border-color: var(--c-brass); }

.faq__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 56px;
    padding: 10px 12px 10px 18px;
    cursor: pointer;
    list-style: none;
    border-radius: 8px;
}

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

.faq__summary:focus-visible {
    outline: 3px solid var(--c-cyan);
    outline-offset: 2px;
}

.faq__q {
    margin: 0;
    font-family: var(--f-display);
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--c-text);
}

.faq__toggle {
    position: relative;
    flex: none;
    width: 40px;
    height: 40px;
    transition: transform 0.35s ease;
}

.faq__toggle .gear {
    width: 100%;
    height: 100%;
    --gear-core: var(--c-cyan);
    --gear-hub: #15213d;
}

.faq__toggle::before,
.faq__toggle::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 2.5px;
    border-radius: 2px;
    background: var(--c-heading);
    transform: translate(-50%, -50%);
    transition: transform 0.35s ease;
}

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

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

.faq__a {
    padding: 0 18px 18px;
    color: var(--c-muted);
}

.faq__a a:not([class]) { color: var(--c-brass-light); }

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

.table-wrap {
    border: 2px solid var(--c-brass-dark);
    border-radius: 12px;
    background: var(--c-steel-3);
    box-shadow: var(--shadow);
}

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

.data-table caption {
    caption-side: top;
    padding: 12px 16px;
    text-align: left;
    font-family: var(--f-display);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--c-heading);
    background: linear-gradient(180deg, #2c4064, #1b2844);
    border-bottom: 2px solid var(--c-brass);
}

.data-table thead th {
    padding: 12px 16px;
    text-align: left;
    font-family: var(--f-display);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--c-ink);
    background: linear-gradient(180deg, #f2cd7e, #c08a3c);
}

.data-table tbody th,
.data-table tbody td {
    padding: 12px 16px;
    vertical-align: top;
    border-top: 1px solid rgba(201, 147, 63, 0.35);
}

.data-table tbody th {
    text-align: left;
    font-weight: 600;
    color: var(--c-text);
}

.data-table tbody tr:nth-child(odd) { background: #25385a; }
.data-table tbody tr:nth-child(even) { background: #1d2b49; }

.data-table .is-value {
    text-align: right;
}

.data-table td.is-value {
    color: var(--c-gold);
    font-weight: 600;
}

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

    .data-table caption { display: block; }

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

    .data-table tr {
        padding: 12px 16px;
        border-top: 1px solid rgba(201, 147, 63, 0.45);
    }

    .data-table tbody th,
    .data-table tbody td {
        display: flex;
        justify-content: space-between;
        gap: 14px;
        padding: 5px 0;
        border: 0;
    }

    .data-table tbody th {
        display: block;
        padding-bottom: 6px;
        font-family: var(--f-display);
        font-size: 1.15rem;
        color: var(--c-heading);
    }

    .data-table tbody td::before {
        content: attr(data-label);
        flex: 0 1 45%;
        text-align: left;
        font-weight: 500;
        color: var(--c-muted);
    }
}

/* ============================================
   BADGES, BEZEL, LINK CARDS
   ============================================ */

.rbadge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--f-display);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--c-text);
}

.rbadge__svg {
    flex: none;
    width: 56px;
    height: 56px;
    filter: drop-shadow(0 0 8px rgba(69, 214, 255, 0.25));
}

.bezel {
    position: relative;
    margin: 0;
    padding: 10px;
    border-radius: 16px;
    background:
        var(--rivet) left 0 top 0 / 10px 10px no-repeat,
        var(--rivet) right 0 top 0 / 10px 10px no-repeat,
        var(--rivet) left 0 bottom 0 / 10px 10px no-repeat,
        var(--rivet) right 0 bottom 0 / 10px 10px no-repeat,
        linear-gradient(145deg, #f2cd7e, #b07a33 40%, #6c4718 75%, #c9933f);
    box-shadow: 0 0 0 2px #2c1f0c, var(--shadow);
}

.bezel img {
    display: block;
    width: 100%;
    height: auto;
    border: 2px solid #2c1f0c;
    border-radius: 8px;
}

.bezel__caption {
    padding: 8px 4px 0;
    font-size: 0.9375rem;
    color: var(--c-ink);
}

.link-card {
    padding: 0 18px 22px;
    text-align: center;
    transition: box-shadow 0.2s ease;
}

.link-card__title {
    display: flex;
    width: fit-content;
    max-width: calc(100% - 16px);
    margin: -1.3rem auto 0.9rem;
    font-size: 1.1rem;
}

.link-card__title a {
    color: var(--c-heading);
    text-decoration: none;
}

.link-card__title a::after {
    content: "";
    position: absolute;
    inset: -40px -400px;
}

.link-card { overflow: hidden; }
.link-card .link-card__title { position: static; }
.link-card .link-card__title::before,
.link-card .link-card__title::after { display: none; }

.link-card__title a:hover,
.link-card__title a:focus-visible { text-decoration: underline; }

.link-card:hover,
.link-card:focus-within {
    box-shadow:
        0 0 0 2px #2c1f0c,
        0 0 0 4px var(--c-brass),
        0 0 24px rgba(69, 214, 255, 0.35),
        var(--shadow);
}

.link-card p {
    margin: 0;
    color: var(--c-muted);
}

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

.cta-band {
    position: relative;
    isolation: isolate;
    padding-block: var(--section-y);
    text-align: center;
}

.cta-band::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(ellipse 55% 70% at 50% 55%, rgba(69, 214, 255, 0.16), rgba(122, 76, 255, 0.14) 45%, transparent 75%);
}

.cta-band__cog {
    position: absolute;
    z-index: -1;
    width: 180px;
    height: 180px;
    top: calc(50% - 90px);
    --gear-core: var(--c-cyan);
}

.cta-band__cog--left { left: -110px; }
.cta-band__cog--right { right: -110px; }

.cta-band__panel {
    max-width: 780px;
    margin-inline: auto;
    padding: 0 clamp(20px, 4vw, 48px) 2.25rem;
}

.cta-band__title {
    display: flex;
    width: fit-content;
    max-width: calc(100% - 16px);
    margin: -1.6rem auto 1.25rem;
    font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem);
}

.cta-band__text {
    max-width: 58ch;
    margin-inline: auto;
}

.cta-band__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 1.5rem;
}

.cta-band__note {
    margin-top: 1rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--c-muted);
}

@media (min-width: 768px) {
    .cta-band__cog { width: 240px; height: 240px; top: calc(50% - 120px); }
    .cta-band__cog--left { left: -120px; }
    .cta-band__cog--right { right: -120px; }
}

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

.site-footer {
    position: relative;
    isolation: isolate;
    margin-top: 56px;
    padding: 72px 0 28px;
    color: var(--c-muted);
    background-color: #141a3a;
    border-top: 3px solid;
    border-image: var(--brass-rule) 1;
}

.site-footer::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background-image: url("./assets/d9a30573a7ead98ce9c7bedebbc1a367.webp");
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
}

.site-footer::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(14, 12, 40, 0.78), rgba(14, 12, 40, 0.86));
}

.site-footer__ornament {
    position: absolute;
    top: 0;
    left: 50%;
    display: flex;
    align-items: center;
    transform: translate(-50%, -50%);
}

.site-footer__gear { --gear-core: var(--c-cyan); }
.site-footer__gear--sm { width: 44px; height: 44px; }
.site-footer__gear--lg { width: 84px; height: 84px; margin-inline: -6px; }

.site-footer__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
}

.site-footer__col p { font-size: 1rem; }

.site-footer__title {
    position: relative;
    margin: 0 0 12px;
    padding-bottom: 10px;
    font-family: var(--f-display);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--c-heading);
}

.site-footer__title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 48px;
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(90deg, #ffc24f, #ef9b28);
}

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

.site-footer__links li { margin: 0; }

.site-footer__links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--c-text);
    text-decoration: none;
}

.site-footer__links a:hover {
    color: var(--c-gold);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.site-footer__rg {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 16px 32px;
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid rgba(201, 147, 63, 0.4);
}

.site-footer__rg-title {
    margin: 0;
    font-family: var(--f-display);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--c-heading);
}

.site-footer__copy {
    margin: 24px 0 0;
    text-align: center;
    font-size: 0.9375rem;
    color: var(--c-muted);
}

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

@media (min-width: 1024px) {
    .site-footer { padding-top: 88px; }

    .site-footer::after {
        background: linear-gradient(180deg, rgba(14, 12, 40, 0.62), rgba(14, 12, 40, 0.74));
    }

    .site-footer__inner { max-width: 1120px; }

    .site-footer__grid {
        grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.3fr);
        gap: 40px;
    }
}

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

/* Hero */
.home-hero {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    padding-block: 28px 72px;
    text-align: center;
}

.home-hero__bg {
    position: absolute;
    inset: 0;
    z-index: -3;
    background-color: var(--c-bg);
    background-image: url("./assets/b9dee3ded1908f1b2303ab116da40fc0.webp");
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
}

.home-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background: radial-gradient(ellipse 70% 20% at 50% 9%, rgba(14, 10, 36, 0.62), transparent 75%);
}

.home-hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 160px;
    z-index: -2;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(26, 18, 56, 0), var(--c-bg));
}

.home-hero__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.home-hero__title {
    max-width: 22ch;
    margin: 0 auto 0.6em;
    color: #fff3d6;
    text-shadow: 0 2px 14px rgba(10, 5, 30, 0.85), 0 0 2px rgba(10, 5, 30, 0.9);
}

.home-hero__stage {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.home-hero__mascot {
    position: relative;
    z-index: 1;
    align-self: flex-start;
    width: min(48vw, 220px);
    height: auto;
    margin: 0 0 -60px 4%;
    filter: drop-shadow(0 10px 22px rgba(10, 4, 30, 0.6));
}

.offer-dial {
    position: relative;
    z-index: 2;
    isolation: isolate;
    width: min(86vw, 390px);
    aspect-ratio: 1 / 1;
    container-type: inline-size;
}

.offer-dial::before {
    content: "";
    position: absolute;
    inset: -14%;
    z-index: -2;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(69, 214, 255, 0.34), rgba(122, 76, 255, 0.22) 45%, transparent 70%);
}

.offer-dial__cog {
    position: absolute;
    z-index: -1;
    --gear-core: var(--c-cyan);
    --gear-hub: #16224a;
}

.offer-dial__cog--a { top: -4%; right: -7%; width: 30%; height: 30%; }
.offer-dial__cog--b { top: 20%; right: -15%; width: 18%; height: 18%; color: #a8713a; }

.offer-dial__ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.offer-dial__offer {
    position: absolute;
    inset: 0;
    margin: 0;
    font-family: var(--f-display);
    font-weight: 700;
    line-height: 1.05;
    text-shadow: 0 2px 6px rgba(5, 3, 20, 0.85);
}

.offer-dial__upto,
.offer-dial__amount,
.offer-dial__fs {
    position: absolute;
    left: 18%;
    right: 18%;
    display: block;
    white-space: nowrap;
}

.offer-dial__upto {
    top: 22%;
    font-size: 1.2rem;
    font-size: 6.5cqi;
    color: #bfefff;
}

.offer-dial__amount {
    top: 30%;
    font-size: 1rem;
    font-size: 5.5cqi;
    color: #fff;
}

.offer-dial__fs {
    top: 62.5%;
    font-size: 1.2rem;
    font-size: 6.6cqi;
    color: #bfefff;
}

.offer-dial__reel {
    position: absolute;
    left: 22%;
    right: 22%;
    top: 50%;
    height: 14.5%;
    display: flex;
    padding: 1.1cqi;
    gap: 1cqi;
    transform: translateY(-50%);
    border-radius: 6px;
    background: linear-gradient(180deg, #7d5524, #f2cd7e 50%, #7d5524);
    box-shadow: 0 0 0 2px #2c1f0c, 0 4px 10px rgba(0, 0, 0, 0.5);
}

.reel-tile {
    flex: 1 1 0;
    display: grid;
    place-items: center;
    font-family: var(--f-display);
    font-size: 1.6rem;
    font-size: 9cqi;
    font-weight: 700;
    line-height: 1;
    color: #3a1206;
    border-radius: 3px;
    background: linear-gradient(180deg, #b9ad8e 0%, #fffaf0 28%, #fffaf0 72%, #b9ad8e 100%);
    box-shadow: inset 0 0 0 1px rgba(60, 30, 0, 0.45);
}

.reel-tile--dot { flex: 0 0 5.5%; }

.offer-dial__cta {
    position: absolute;
    left: 50%;
    top: 88.5%;
    display: grid;
    place-items: center;
    width: 25%;
    aspect-ratio: 1 / 1;
    padding: 3%;
    transform: translate(-50%, -50%);
    border: 4px solid transparent;
    border-radius: 50%;
    font-family: var(--f-display);
    font-size: 1rem;
    font-size: 4.7cqi;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 20, 30, 0.8);
    background:
        radial-gradient(circle at 40% 30%, #43c9d9, #157f92 58%, #0b4b5a) padding-box,
        linear-gradient(180deg, #fbe1a0, #b07a33 55%, #6c4718) border-box;
    box-shadow: 0 0 0 2px #2c1f0c, 0 0 22px rgba(69, 214, 255, 0.7);
    transition: box-shadow 0.2s ease, transform 0.15s ease;
}

.offer-dial__cta:hover,
.offer-dial__cta:focus-visible {
    color: #fff;
    box-shadow: 0 0 0 2px #2c1f0c, 0 0 34px rgba(69, 214, 255, 0.95);
}

.home-hero__meta {
    position: relative;
    max-width: 620px;
    margin-top: 18px;
    padding: 8px 12px;
    text-shadow: 0 1px 8px rgba(10, 5, 30, 0.9);
}

.home-hero__meta::before {
    content: "";
    position: absolute;
    inset: -16px -30px;
    z-index: -1;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(14, 10, 36, 0.78), rgba(14, 10, 36, 0) 72%);
}

.home-hero__meta p { margin: 0.4rem 0 0; }

.home-hero__login {
    font-size: 0.9375rem;
    color: var(--c-muted);
}

@media (min-width: 768px) {
    .home-hero__mascot { width: 240px; margin-bottom: -70px; margin-left: 10%; }
    .offer-dial { width: 420px; }
}

@media (min-width: 1024px) {
    .home-hero {
        min-height: calc(100svh - 84px);
        padding-block: 36px 88px;
    }

    .home-hero__bg { background-position: center; }

    .home-hero__stage {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 470px) minmax(0, 1fr);
        align-items: center;
    }

    .home-hero__mascot {
        grid-column: 1;
        grid-row: 1;
        justify-self: end;
        align-self: center;
        width: min(100%, 400px);
        margin: 0 -64px 0 0;
        z-index: 3;
    }

    .offer-dial {
        grid-column: 2;
        grid-row: 1;
        width: 100%;
    }
}

/* Deposit steps */
.home-steps {
    position: relative;
    padding-top: var(--section-y);
    padding-bottom: calc(var(--section-y) * 0.6);
}

.home-steps .section-head { margin-bottom: 1rem; }

.home-steps .steel-panel { text-align: center; }
.home-steps .steel-panel__body { color: var(--c-muted); }

.step-offer {
    margin-bottom: 0.5rem;
    font-family: var(--f-display);
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--c-gold);
}

.home-steps__check {
    max-width: 900px;
    margin-top: 8px;
}

.home-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px 24px;
    margin-top: 1.25rem;
}

/* Popular slots */
.home-slots {
    isolation: isolate;
    padding-top: clamp(40px, 5vw, 64px);
}

.home-slots__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: url("./assets/d00a339be153332d47cc0ad83dc9bedb.webp");
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
}

.home-slots__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(26, 18, 56, 0.1), rgba(26, 18, 56, 0.5));
}

.home-slots__title {
    font-size: clamp(1.35rem, 1.05rem + 1.3vw, 2rem);
}

.home-slots__intro {
    max-width: 60ch;
    margin: 1.1rem auto 3rem;
    text-align: center;
    text-shadow: 0 1px 8px rgba(10, 5, 30, 0.9);
}

.home-slots__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
    max-width: 1060px;
    margin-inline: auto;
}

.slot-cat {
    padding: 0 16px 22px;
    text-align: center;
}

.slot-cat__label {
    display: flex;
    width: fit-content;
    max-width: calc(100% - 16px);
    margin: -1.3rem auto 1rem;
    font-size: 1.15rem;
}

.slot-cat p {
    margin: 0;
    font-size: 1rem;
    color: var(--c-muted);
}

.slot-cat__window {
    position: relative;
    display: block;
    margin: 0 0 34px;
    border: 4px solid transparent;
    border-radius: 8px;
    background: linear-gradient(180deg, #fbe1a0, #b07a33 55%, #6c4718) border-box;
    box-shadow: 0 0 0 2px #2c1f0c, 0 8px 18px rgba(5, 3, 20, 0.5);
    transition: box-shadow 0.2s ease;
}

.slot-cat__window img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 900 / 420;
    object-fit: cover;
    border-radius: 4px;
}

.slot-cat__window::before,
.slot-cat__window::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 8px;
    background: linear-gradient(90deg, #6c4718, #f2cd7e 50%, #6c4718);
    box-shadow: 0 0 0 1px #2c1f0c;
}

.slot-cat__window::before { left: calc(33.333% - 4px); }
.slot-cat__window::after { left: calc(66.667% - 4px); }

.slot-cat__window:hover,
.slot-cat__window:focus-visible {
    box-shadow: 0 0 0 2px #2c1f0c, var(--glow-cyan);
}

.slot-cat__gears {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -20px;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    justify-items: center;
}

.slot-cat__gears .gear {
    width: 38px;
    height: 38px;
    --gear-core: var(--c-cyan);
    --gear-hub: #16224a;
    filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.55));
}

.home-slots__foot {
    max-width: 680px;
    margin: 2.5rem auto 0;
    text-align: center;
    text-shadow: 0 1px 8px rgba(10, 5, 30, 0.9);
}

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

@media (min-width: 1024px) {
    .home-slots { padding-top: 56px; }
    .home-slots__intro { margin-bottom: 3.5rem; }
    .home-slots__grid { gap: 28px; }
}

/* Casino + sportsbook */
.duo {
    position: relative;
    padding-block: 24px;
}

.duo__cog {
    position: absolute;
    z-index: 0;
    top: 50%;
    width: 150px;
    height: 150px;
    margin-top: -75px;
    --gear-core: var(--c-cyan);
    --gear-hub: #142041;
}

.duo__cog--left { left: -100px; }
.duo__cog--right { right: -100px; }

.duo__frame {
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding: 34px 22px;
    background:
        var(--rivet) left 5px top 5px / 12px 12px no-repeat,
        var(--rivet) right 5px top 5px / 12px 12px no-repeat,
        var(--rivet) left 5px bottom 5px / 12px 12px no-repeat,
        var(--rivet) right 5px bottom 5px / 12px 12px no-repeat,
        radial-gradient(ellipse 90% 40% at 50% 100%, rgba(63, 184, 101, 0.42), transparent 75%),
        linear-gradient(180deg, #2f5584 0%, #22406a 42%, #1d4a4a 66%, #1b4a36 100%);
}

.duo__frame::before,
.duo__frame::after {
    content: "";
    position: absolute;
    left: 6%;
    right: 6%;
    height: 7px;
    border-radius: 4px;
    background: var(--brass-rule);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.duo__frame::before { top: -15px; }
.duo__frame::after { bottom: -15px; }

.duo__half h3 {
    font-size: clamp(1.8rem, 1.4rem + 1.2vw, 2.4rem);
    color: var(--c-gold);
}

.duo__half p { color: var(--c-text); }

.duo__gears {
    position: relative;
    width: 100%;
    max-width: 400px;
    margin: 4px auto;
    container-type: inline-size;
}

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

.duo__score {
    position: absolute;
    left: 74.5%;
    top: 6%;
    display: flex;
    gap: 1.2cqi;
    width: 15%;
    transform: translate(-50%, -50%);
}

.duo__score span {
    flex: 1 1 0;
    display: grid;
    place-items: center;
    aspect-ratio: 3 / 4;
    font-family: var(--f-display);
    font-size: 1rem;
    font-size: 4.4cqi;
    font-weight: 700;
    line-height: 1;
    color: var(--c-ink);
    border: 2px solid var(--c-brass);
    border-radius: 3px;
    background: linear-gradient(180deg, #d8ccae, #fffaf0 35%, #fffaf0 65%, #d8ccae);
    box-shadow: 0 0 0 1px #2c1f0c;
}

.home-duo__cta {
    margin: 48px 0 0;
    text-align: center;
}

@media (min-width: 1024px) {
    .duo__frame {
        grid-template-columns: minmax(0, 1fr) minmax(0, 440px) minmax(0, 1fr);
        align-items: center;
        gap: 12px;
        padding: 40px 44px;
        background:
            var(--rivet) left 5px top 5px / 12px 12px no-repeat,
            var(--rivet) right 5px top 5px / 12px 12px no-repeat,
            var(--rivet) left 5px bottom 5px / 12px 12px no-repeat,
            var(--rivet) right 5px bottom 5px / 12px 12px no-repeat,
            radial-gradient(ellipse 45% 90% at 85% 55%, rgba(63, 184, 101, 0.45), transparent 75%),
            linear-gradient(90deg, #2f5584 0%, #22406a 44%, #1f4f45 56%, #1b4a36 100%);
    }

    .duo__gears {
        max-width: none;
        margin: -60px 0;
    }

    .duo__half--sport { text-align: right; }

    .duo__cog { width: 200px; height: 200px; margin-top: -100px; }
    .duo__cog--left { left: -120px; }
    .duo__cog--right { right: -120px; }
}

/* Tournaments + payments */
.home-tp .section-head { margin-bottom: 0; }

.tp-band {
    position: relative;
    display: flex;
    flex-direction: column;
    margin: 110px 0 100px;
    padding: 0 20px;
    text-align: center;
    border-style: solid;
    border-width: 3px 0;
    border-image: var(--brass-rule) 1;
    background: linear-gradient(100deg, #17244a 0%, #1b3d57 50%, #17244a 100%);
    box-shadow: var(--shadow);
}

.tp-medal {
    width: 190px;
    margin: -88px auto 0;
}

.tp-medal img,
.tp-vault img {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 8px 16px rgba(5, 3, 20, 0.55));
}

.tp-col { padding: 20px 0; }

.tp-col h3 {
    font-size: clamp(1.7rem, 1.4rem + 1vw, 2.2rem);
    color: var(--c-gold);
}

.tp-col p { color: var(--c-text); }

.tp-col--pay { border-top: 2px solid var(--c-brass); }

.tp-col__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 18px;
    margin-top: 0.5rem;
}

.btn--pill { border-radius: 999px; margin-top: 0.5rem; }

.pill {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0.3em 1.1em;
    border-radius: 999px;
    font-family: var(--f-display);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--c-ink);
    background: linear-gradient(180deg, #ffe08f, #ffc24f 45%, #ef9b28);
    box-shadow: 0 0 0 2px #8a5a1c;
}

.tp-vault {
    position: relative;
    width: 250px;
    margin: 0 auto -84px;
}

.tp-coins {
    position: absolute;
    left: 0;
    top: 50%;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transform: translateY(-50%);
}

.tp-coin {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border: 3px solid #e9bf6c;
    border-radius: 50%;
    color: #fff;
    box-shadow: 0 0 0 2px #2c1f0c, 0 0 14px rgba(255, 200, 94, 0.35);
}

.tp-coin .icon { width: 24px; height: 24px; }

.tp-coin--crypto { background: radial-gradient(circle at 35% 30%, #ffcf6b, #d98a1e 70%); }
.tp-coin--wallet { background: radial-gradient(circle at 35% 30%, #5aa8ff, #1f5fb8 70%); }
.tp-coin--transfer { background: radial-gradient(circle at 35% 30%, #ffa25a, #c95a1b 70%); }

@media (min-width: 1024px) {
    .tp-band {
        display: grid;
        grid-template-columns: 190px minmax(0, 1fr) minmax(0, 1fr) 230px;
        align-items: center;
        margin: 90px 90px;
        padding: 0;
        text-align: left;
    }

    .tp-medal {
        width: 280px;
        margin: -70px 0 -70px -110px;
    }

    .tp-col { padding: 36px 30px; }

    .tp-col--pay {
        border-top: 0;
        border-left: 2px solid var(--c-brass);
    }

    .tp-col__row { justify-content: flex-start; }

    .tp-vault {
        justify-self: end;
        width: 320px;
        margin: -70px -120px -70px 0;
    }

    .tp-coin { width: 56px; height: 56px; }
}

/* FAQ */
.home-faq__inner {
    max-width: 840px;
    margin-inline: auto;
}

.home-faq__inner > p { margin-bottom: 1.25rem; }
.home-faq .faq-list { margin-top: 1.5rem; }

/* Trust strip */
.home-trust {
    border-style: solid;
    border-width: 3px 0;
    border-image: var(--brass-rule) 1;
    padding-block: clamp(40px, 6vw, 64px);
}

.home-trust__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    align-items: center;
}

.home-trust__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 18px 28px;
}

@media (min-width: 1024px) {
    .home-trust__inner { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 48px; }
    .home-trust__badges { flex-direction: column; }
}

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

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .cog-spin { animation: none !important; }
}

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

.page-hero--bonusser .page-hero__bg {
    background-image: url("./assets/a526ece436ec80de7ad797b9e5fd2050.webp");
    background-position: 30% center;
}

.page-hero--bonusser .page-hero__panel p { color: var(--c-text); }

.bonus-offer {
    font-family: var(--f-display);
    font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.2rem);
    font-weight: 700;
    line-height: 1.1;
    color: var(--c-gold);
}

.bonus-foot {
    font-size: 0.9375rem;
    color: var(--c-muted);
}

.bonus-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 24px;
    margin-top: 0.75rem;
}

.page-hero--bonusser .page-hero__panel .bonus-actions .btn { margin-top: 0; }

/* Worked example gauge strip */
.gauge {
    position: relative;
    max-width: 900px;
    margin: 0 auto 2rem;
    padding: 28px 18px;
}

.gauge__conduit {
    position: absolute;
    left: 36px;
    top: 56px;
    bottom: 56px;
    width: 10px;
    height: calc(100% - 112px);
    z-index: 0;
    filter: drop-shadow(0 0 6px rgba(69, 214, 255, 0.6));
}

.gauge__list {
    position: relative;
    z-index: 1;
    margin: 0;
    padding: 0;
    list-style: none;
}

.gauge__row {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    column-gap: 14px;
    align-items: start;
    margin: 0;
    padding: 12px 0;
}

.gauge__row + .gauge__row { margin-top: 0; }

.gauge__no {
    grid-row: 1 / span 2;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 3px solid #fbe1a0;
    border-radius: 50%;
    font-family: var(--f-display);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--c-ink);
    background: radial-gradient(circle at 35% 30%, #ffe08f, #c08a3c 75%);
    box-shadow: 0 0 0 2px #2c1f0c;
}

.gauge__fig {
    font-family: var(--f-display);
    font-size: clamp(1.9rem, 1.4rem + 2vw, 2.8rem);
    font-weight: 700;
    line-height: 1;
    color: var(--c-gold);
}

.gauge__row p {
    margin: 0.25rem 0 0;
    color: var(--c-text);
}

@media (min-width: 768px) {
    .gauge { padding: 36px 36px; }
    .gauge__conduit { left: 55px; }

    .gauge__row {
        grid-template-columns: 40px 190px minmax(0, 1fr);
        column-gap: 22px;
        align-items: center;
    }

    .gauge__no { grid-row: auto; }
    .gauge__row p { margin: 0; }
}

.bonus-example__note {
    max-width: 900px;
    margin: 0 auto;
}

/* Terms table */
.bonus-terms__head {
    max-width: 780px;
    margin: 0 auto 2rem;
    text-align: center;
}

.bonus-terms .table-wrap {
    max-width: 960px;
    margin-inline: auto;
}

.bonus-terms .data-table .is-value { text-align: left; }
.bonus-terms .data-table td a { color: var(--c-brass-light); }

.bonus-terms__note {
    max-width: 960px;
    margin: 1.25rem auto 0;
    font-size: 0.9375rem;
    color: var(--c-muted);
}

@media (min-width: 768px) {
    .bonus-terms .data-table td:nth-child(2) { white-space: nowrap; }
}

/* Cashback */
.bonus-cashback__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 20px;
    margin-bottom: 0.75rem;
}

.bonus-cashback__head h2 { margin: 0; flex: 1 1 260px; }

.cb-gauge {
    flex: none;
    width: 132px;
    height: auto;
    filter: drop-shadow(0 0 10px rgba(69, 214, 255, 0.35));
}

.bonus-list {
    margin: 0 0 1em;
    padding-left: 1.2em;
}

.bonus-cashback__art {
    position: relative;
    margin: 0;
    isolation: isolate;
}

.bonus-cashback__art::after {
    content: "";
    position: absolute;
    left: 8%;
    right: 8%;
    bottom: -4%;
    height: 40%;
    z-index: -1;
    background: radial-gradient(ellipse at center, rgba(69, 214, 255, 0.4), transparent 70%);
}

.bonus-cashback__art img {
    display: block;
    width: 100%;
    height: auto;
}

/* Weekly + reload pair */
.bonus-weekly .section-head { margin-bottom: 3rem; text-shadow: 0 1px 8px rgba(10, 5, 30, 0.9); }

.bonus-pair {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
    align-items: stretch;
    max-width: 960px;
    margin-inline: auto;
}

.bonus-pair .steel-panel { padding-top: 0.25rem; }

.pair__chain { display: none; }

@media (min-width: 768px) {
    .bonus-pair { grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1fr); gap: 0; }
    .pair__chain { display: block; align-self: center; width: 100%; height: 20px; z-index: 0; }
}

/* Sports bonus */
.bonus-sport__title {
    max-width: 780px;
    margin: 0 auto 2.5rem;
    text-align: center;
}

.bonus-sport__panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    align-items: center;
    max-width: 960px;
    margin-inline: auto;
    padding: 30px clamp(18px, 3vw, 36px);
}

.pitch {
    position: relative;
    display: block;
    width: 150px;
    height: 150px;
    margin-inline: auto;
}

.pitch__ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    --gear-core: var(--c-cyan);
    --gear-hub: #123a3a;
}

.pitch__lines {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 56%;
    height: auto;
    transform: translate(-50%, -50%);
}

.bonus-sport__body .lead { color: var(--c-text); }

@media (min-width: 768px) {
    .bonus-sport__panel { grid-template-columns: 200px minmax(0, 1fr); gap: 32px; }
    .pitch { width: 190px; height: 190px; }
}

/* Tournaments */
.bonus-tourn__art {
    position: relative;
    max-width: 380px;
    margin: 0 auto;
    isolation: isolate;
}

.bonus-tourn__art::before {
    content: "";
    position: absolute;
    inset: -10%;
    z-index: -1;
    background: radial-gradient(circle, rgba(122, 76, 255, 0.5), rgba(122, 76, 255, 0) 68%);
}

.bonus-tourn__art img {
    display: block;
    width: 100%;
    height: auto;
}

/* FAQ spacing */
.bonus-faq { padding-top: 0; }
.bonus-steps .home-steps__check { margin-top: 1.5rem; }

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

.page-hero--spil .page-hero__bg {
    background-image: url("./assets/bf4430cf0c90dba19327ce659384ad86.webp");
    background-position: 70% center;
}

.page-hero--spil .page-hero__panel p { color: var(--c-text); }

/* Category chips */
.spil-cats { padding-bottom: calc(var(--section-y) * 0.5); }

.spil-cats__inner {
    max-width: 880px;
    text-align: center;
}

.spil-cats__inner h2 { margin-bottom: 0.6em; }
.spil-cats__inner > p { margin-bottom: 1rem; }

.cat-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px 10px;
    margin: 1.75rem 0 0;
    padding: 0;
    list-style: none;
}

.cat-chips > li { margin: 0; }

.cat-chip .gear {
    width: 26px;
    height: 26px;
    --gear-core: var(--c-cyan);
    --gear-hub: #16224a;
}

.cat-chips__link { display: none; }

@media (min-width: 768px) {
    .cat-chips { gap: 12px 0; }
    .cat-chips__link { display: block; line-height: 0; }
}

/* Slots grid */
.spil-slots { isolation: isolate; }

.spil-slots__cog {
    position: absolute;
    z-index: -1;
    width: 160px;
    height: 160px;
    top: 38%;
    --gear-core: var(--c-cyan);
    --gear-hub: #142041;
}

.spil-slots__cog--left { left: -100px; }
.spil-slots__cog--right { right: -100px; top: 66%; }

.spil-slots__grid {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
    max-width: 1060px;
    margin-inline: auto;
}

.spil-slots__chain { display: none; }

.spil-card {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.spil-card > p { flex: 1 1 auto; }

.spil-card .slot-cat__window { align-self: stretch; }

.spil-card__cta {
    margin-top: 1.1rem;
    min-width: 120px;
}

.spil-slots__note {
    max-width: 960px;
    margin: 3rem auto 0;
}

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

    .spil-slots__chain {
        display: block;
        position: absolute;
        z-index: 0;
        grid-column: 1 / -1;
        left: 0;
        width: 100%;
        height: 28px;
        margin-top: 10px;
    }

    .spil-slots__chain--top { grid-row: 1; top: 0; }
    .spil-slots__chain--bottom { grid-row: 2; top: 0; }

    .spil-slots__cog { width: 200px; height: 200px; }
    .spil-slots__cog--left { left: -120px; }
    .spil-slots__cog--right { right: -120px; }
}

/* Media + text rows */
.spil-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
    align-items: center;
}

.spil-panel {
    padding: clamp(22px, 3vw, 36px);
}

.spil-panel h2 {
    font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem);
    color: var(--c-gold);
}

.spil-panel p { color: var(--c-text); }
.spil-panel .btn { margin-top: 0.75rem; }

.spil-panel--compact .btn { margin-top: 0; }

.bezel--green {
    box-shadow:
        0 0 0 2px #2c1f0c,
        22px 0 44px -10px rgba(63, 184, 101, 0.55),
        var(--shadow);
}

@media (min-width: 1024px) {
    .spil-row { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; }
    .spil-row--rev { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
    .spil-row--rev .spil-row__media { order: 2; }
}

/* Small illustrated blocks */
.spil-mini {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    align-items: center;
    max-width: 920px;
    margin-inline: auto;
    justify-items: center;
}

.spil-mini > div:not(.phone):not(.spil-pred__art) { width: 100%; }

.spil-gauge {
    width: 170px;
    height: 170px;
    filter: drop-shadow(0 0 12px rgba(69, 214, 255, 0.35));
}

.spil-pred__art {
    position: relative;
    width: 150px;
    height: 150px;
    display: grid;
    place-items: center;
    border-radius: 50%;
}

.spil-pred__ring {
    position: absolute;
    inset: -8px;
    width: calc(100% + 16px);
    height: calc(100% + 16px);
    --gear-core: var(--c-cyan);
    --gear-hub: #16224a;
}

.spil-pred__chart {
    position: relative;
    width: 56%;
    height: 56%;
}

@media (min-width: 768px) {
    .spil-mini { grid-template-columns: 190px minmax(0, 1fr); gap: 40px; justify-items: stretch; }
    .spil-mini--rev { grid-template-columns: 190px minmax(0, 1fr); }
    .spil-gauge,
    .spil-pred__art { justify-self: center; }
}

/* Providers */
.spil-providers .section-head { margin-bottom: 1.75rem; }

.nameplates {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 18px 26px;
    margin: 0;
    padding: 0 12px;
    list-style: none;
}

.nameplates > li { margin: 0; }

/* Phone */
.phone {
    position: relative;
    display: grid;
    place-items: center;
    width: 140px;
    height: 250px;
    padding: 10px;
    border-radius: 28px;
    background: linear-gradient(145deg, #f2cd7e, #b07a33 45%, #6c4718);
    box-shadow: 0 0 0 2px #2c1f0c, var(--shadow);
}

.phone::before {
    content: "";
    position: absolute;
    inset: 10px;
    border-radius: 20px;
    background: radial-gradient(circle at 50% 60%, #26398a, #121a3c 75%);
    box-shadow: inset 0 0 0 2px #2c1f0c;
}

.phone__speaker {
    position: absolute;
    top: 20px;
    left: 50%;
    z-index: 1;
    width: 36px;
    height: 5px;
    border-radius: 3px;
    transform: translateX(-50%);
    background: #2c1f0c;
}

.phone__gear {
    position: relative;
    width: 84px;
    height: 84px;
    --gear-core: var(--c-cyan);
    --gear-hub: #16224a;
}

/* FAQ */
.spil-faq .faq-list { margin-top: 1.5rem; }
.spil-faq__more { margin-top: 1rem; }

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

.page-hero--omos .page-hero__bg {
    background-image: url("./assets/3ae00171bdb9dd9815fe14e8daf4366a.webp");
    background-position: 30% center;
}

.page-hero--omos .page-hero__panel p { color: var(--c-text); }

.page-hero--omos .page-hero__panel::after {
    content: "";
    position: absolute;
    left: 8%;
    right: 8%;
    bottom: -14px;
    height: 34px;
    z-index: -1;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(255, 190, 80, 0.75), rgba(255, 190, 80, 0) 72%);
    filter: blur(8px);
    pointer-events: none;
}

.page-hero--omos .page-hero__panel .text-link { margin-bottom: 0.25rem; }

@media (min-width: 1024px) {
    .page-hero--omos .page-hero__inner {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
}

/* Brand story */
.om-story__wrap {
    position: relative;
    max-width: 880px;
    margin-inline: auto;
    padding-top: 1.4rem;
}

.om-story__wrap .steel-panel {
    position: relative;
    z-index: 1;
}

.om-story .steel-panel__title { font-size: clamp(1.3rem, 1.1rem + 1vw, 1.8rem); }

.om-story__cog {
    position: absolute;
    z-index: 0;
    top: 50%;
    width: 130px;
    height: 130px;
    margin-top: -65px;
    --gear-core: var(--c-cyan);
    --gear-hub: #142041;
}

.om-story__cog--left { left: -80px; }
.om-story__cog--right { right: -80px; }

@media (min-width: 768px) {
    .om-story__cog { width: 190px; height: 190px; margin-top: -95px; }
    .om-story__cog--left { left: -110px; }
    .om-story__cog--right { right: -110px; }
}

/* Mascot */
.om-mascot__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
    align-items: center;
}

.om-ring {
    position: relative;
    width: min(76vw, 340px);
    aspect-ratio: 1 / 1;
    margin: 70px auto 24px;
}

.om-ring::before {
    content: "";
    position: absolute;
    inset: 0;
    border: 14px solid transparent;
    border-radius: 50%;
    background: linear-gradient(180deg, #fbe1a0, #b07a33 55%, #6c4718) border-box;
    -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) padding-box exclude, linear-gradient(#000 0 0);
    filter: drop-shadow(0 0 2px #2c1f0c);
}

.om-ring::after {
    content: "";
    position: absolute;
    inset: 14px;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 55%, rgba(69, 214, 255, 0.28), rgba(122, 76, 255, 0.12) 60%, transparent 75%);
    box-shadow: inset 0 0 36px rgba(69, 214, 255, 0.5);
}

.om-ring img {
    position: absolute;
    z-index: 1;
    left: 50%;
    bottom: -7%;
    width: 96%;
    height: auto;
    transform: translateX(-50%);
    filter: drop-shadow(0 10px 22px rgba(10, 4, 30, 0.6));
}

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

    .om-ring { width: min(100%, 400px); margin-top: 90px; }
}

/* Licence */
.om-licence h2 {
    display: flex;
    align-items: center;
    gap: 14px;
}

.om-gearcheck {
    flex: none;
    width: 48px;
    height: 48px;
    --gear-core: var(--c-cyan);
    --gear-hub: #1b2a4a;
}

.om-licence__text .lead { color: var(--c-text); }

.om-facts .data-table .is-value { text-align: left; }

/* Security */
.om-sec .section-head { margin-bottom: 2.5rem; }

.om-sec__row { position: relative; }

.om-sec__chain {
    display: none;
    left: 14%;
    width: 72%;
    top: 36px;
    height: 40px;
}

.om-sec__list {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.om-sec__item {
    margin: 0;
    text-align: center;
}

.om-sec__badge {
    display: flex;
    justify-content: center;
    margin-bottom: 0.9rem;
}

.om-sec__badge .rbadge__svg { width: 88px; height: 88px; }

.om-sec__item p {
    max-width: 34ch;
    margin-inline: auto;
    color: var(--c-muted);
}

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

/* Support + KYC */
.om-duo .section-head { margin-bottom: 3rem; }

.om-duo__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 56px;
    max-width: 960px;
    margin-inline: auto;
}

.om-duo__grid .steel-panel { padding-top: 0.25rem; }
.om-duo__grid .steel-panel__body > p { color: var(--c-text); }
.om-duo__grid .chip-row { margin-top: 1rem; }

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

/* Responsible gaming */
.om-rg { background: #17113a; }

.om-rg__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    align-items: center;
}

.om-rg__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 20px 32px;
}

.om-rg .rbadge__svg {
    width: 96px;
    height: 96px;
    filter: none;
}

.om-rg__text .lead { color: var(--c-text); }

@media (min-width: 1024px) {
    .om-rg__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 56px; }
    .om-rg__badges { flex-direction: column; align-items: flex-start; }
    .om-rg .rbadge__svg { width: 120px; height: 120px; }
}

/* Read-on links */
.om-links .section-head { margin-bottom: 3rem; }

.om-links__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 48px 24px;
}

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

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

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

.page-hero--vip .page-hero__bg {
    background-image: url("./assets/94ff471c79551eefb5add3e032eb5c7d.webp");
    background-position: 85% center;
}

.page-hero--vip .page-hero__panel p { color: var(--c-text); }

.vip-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 24px;
    margin-top: 0.75rem;
}

.page-hero--vip .page-hero__panel .vip-actions .btn { margin-top: 0; }

.page-hero--vip .page-hero__panel .vip-note {
    margin: 0.5rem 0 0;
    font-size: 0.9375rem;
    color: var(--c-muted);
}

/* How it works */
.vip-how__text .lead { color: var(--c-text); }

.vip-eq {
    padding: 28px clamp(16px, 3vw, 32px) 22px;
    text-align: center;
}

.vip-eq__svg {
    display: block;
    width: 100%;
    max-width: 460px;
    height: auto;
    margin-inline: auto;
}

.vip-eq__cap {
    margin: 1rem 0 0;
    font-family: var(--f-display);
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--c-heading);
}

/* Status chain */
.vip-ranks .section-head { margin-bottom: 2.5rem; }

.rank {
    position: relative;
    display: flex;
    flex-direction: column-reverse;
    gap: 22px;
    max-width: 720px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
    --chain-hole: var(--c-bg-deep);
}

.rank__chain {
    left: 16px;
    top: 0;
    width: 40px;
    height: 100%;
}

.rank__item {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    margin: 0;
}

.rank__medal {
    position: relative;
    display: grid;
    place-items: center;
    justify-self: center;
    width: var(--s);
    height: var(--s);
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.55));
}

.rank__gear {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    --gear-core: var(--c-cyan);
    --gear-hub: #1b2a4a;
}

.rank__no {
    position: relative;
    font-family: var(--f-display);
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1;
    color: #fff;
}

.rank__item--current .rank__medal {
    filter: drop-shadow(0 0 12px rgba(69, 214, 255, 0.85)) drop-shadow(0 4px 6px rgba(0, 0, 0, 0.55));
}

.rank__txt {
    padding: 10px 16px;
    border: 1px solid var(--c-brass-dark);
    border-radius: 10px;
    background: #211b45;
}

.rank__name {
    margin: 0;
    font-family: var(--f-display);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--c-heading);
}

.rank__note {
    margin: 0.15rem 0 0;
    font-size: 0.975rem;
    color: var(--c-muted);
}

@media (min-width: 768px) {
    .rank__item:nth-child(even) .rank__txt { margin-left: 56px; }
    .rank__item { grid-template-columns: 84px minmax(0, 1fr); }
    .rank__chain { left: 22px; }
}

/* Perks table */
.vip-perks .section-head { margin-bottom: 2rem; }

.vip-perks .table-wrap {
    max-width: 960px;
    margin-inline: auto;
}

.vip-perks .data-table .is-value { text-align: left; }

.vip-perks__note {
    max-width: 960px;
    margin: 1.5rem auto 0;
}

@media (min-width: 768px) {
    .vip-perks .data-table th:first-child { width: 30%; }
}

/* Realism */
.vip-real {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    max-width: 900px;
    margin-inline: auto;
    padding: clamp(20px, 3vw, 32px);
    border-left: 5px solid var(--c-amber);
    border-radius: 0 12px 12px 0;
    background: #1d2b49;
    box-shadow: inset 0 0 0 1px rgba(201, 147, 63, 0.3);
}

.vip-real__icon {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border: 2px solid var(--c-brass);
    border-radius: 50%;
    color: var(--c-brass-light);
}

.vip-real__icon .icon { width: 34px; height: 34px; }

.vip-real h2 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem); }
.vip-real .lead { color: var(--c-text); }

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

/* Missing info */
.vip-missing .section-head { margin-bottom: 2rem; }

.vip-missing__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    max-width: 960px;
    margin-inline: auto;
}

.vip-unk {
    padding: 24px 22px;
    border: 2px dashed var(--c-brass);
    border-radius: var(--radius);
    background: #1d2b49;
}

.vip-unk h3 { color: var(--c-gold); }
.vip-unk p { color: var(--c-muted); }

.vip-unk__art {
    position: relative;
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    margin-bottom: 0.9rem;
}

.vip-unk__gear {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    --gear-core: var(--c-cyan);
    --gear-hub: #16224a;
}

.vip-unk__q {
    position: relative;
    width: 30px;
    height: 30px;
    color: var(--c-heading);
}

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

/* VIP Space */
.vip-space .spil-panel .btn { margin-top: 0.5rem; }

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

/* Hero */
.pay-hero {
    position: relative;
    isolation: isolate;
    padding-block: 28px 80px;
    text-align: center;
}

.pay-hero__bg {
    position: absolute;
    inset: 0;
    z-index: -3;
    background-color: var(--c-bg);
    background-image: url("./assets/788439fbe7c90706225fb92a2073da0d.webp");
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
}

.pay-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background: radial-gradient(ellipse 60% 40% at 50% 38%, rgba(69, 214, 255, 0.2), rgba(122, 76, 255, 0.16) 50%, transparent 78%);
}

.pay-hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 200px;
    z-index: -2;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(26, 18, 56, 0), var(--c-bg));
}

.pay-hero__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.pay-hero__mascot {
    position: relative;
    z-index: 1;
    align-self: flex-start;
    width: min(44vw, 200px);
    height: auto;
    margin: 0 0 -48px 2%;
    filter: drop-shadow(0 10px 22px rgba(10, 4, 30, 0.6));
}

.pay-hero__main {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 560px;
}

.pay-medal {
    position: relative;
    width: min(92vw, 520px);
    aspect-ratio: 1 / 1;
    margin-inline: auto;
    container-type: inline-size;
    filter: drop-shadow(0 12px 24px rgba(5, 3, 20, 0.55));
}

.pay-medal__svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.pay-medal__glow {
    animation: pay-pulse 3.6s ease-in-out infinite;
}

.is-doc-hidden .pay-medal__glow { animation-play-state: paused; }

@keyframes pay-pulse {
    0%, 100% { filter: drop-shadow(0 0 3px rgba(69, 214, 255, 0.55)); }
    50% { filter: drop-shadow(0 0 12px rgba(69, 214, 255, 1)); }
}

.pay-medal__content {
    position: absolute;
    inset: 21% 19.5%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.6cqi;
    text-align: center;
}

.pay-medal__content h1 {
    margin: 0;
    font-size: 1.15rem;
    font-size: 6.8cqi;
    line-height: 1.05;
    color: #fff3d6;
    text-shadow: 0 2px 8px rgba(5, 3, 20, 0.9);
}

.pay-medal__fig {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
    font-family: var(--f-display);
    font-weight: 700;
    line-height: 1;
}

.pay-medal__from,
.pay-medal__dkk {
    font-size: 0.95rem;
    font-size: 4.8cqi;
    color: #bfefff;
}

.pay-medal__amount {
    font-size: 2.4rem;
    font-size: 12cqi;
    color: var(--c-gold);
    text-shadow: 0 2px 8px rgba(5, 3, 20, 0.85);
}

.pay-cta {
    position: relative;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 116px;
    height: 116px;
    margin: -58px auto 0;
}

.pay-cta__cog {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    --gear-core: var(--c-cyan);
    --gear-hub: #16224a;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.55));
}

.pay-cta__btn {
    position: relative;
    display: grid;
    place-items: center;
    width: 70%;
    aspect-ratio: 1 / 1;
    padding: 6px;
    border: 3px solid #fff0c2;
    border-radius: 50%;
    font-family: var(--f-display);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    color: var(--c-ink);
    background: linear-gradient(180deg, #ffe08f 0%, #ffc24f 45%, #ef9b28 100%);
    box-shadow: 0 0 0 2px #8a5a1c, 0 0 18px rgba(255, 200, 94, 0.55);
    transition: transform 0.15s ease, filter 0.2s ease;
}

.pay-cta__btn:hover { color: var(--c-ink); filter: brightness(1.08); }
.pay-cta__btn:active { transform: translateY(1px); }

.pay-hero__meta {
    position: relative;
    max-width: 620px;
    margin: 6px auto 0;
    padding: 8px 12px;
    text-shadow: 0 1px 8px rgba(10, 5, 30, 0.9);
}

.pay-hero__meta::before {
    content: "";
    position: absolute;
    inset: -12px -24px;
    z-index: -1;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(14, 10, 36, 0.8), rgba(14, 10, 36, 0) 74%);
}

.pay-hero__rg {
    margin: 0 0 0.75rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--c-muted);
}

@media (min-width: 768px) {
    .pay-hero__mascot { width: 240px; margin-bottom: -70px; margin-left: 8%; }
}

@media (min-width: 1024px) {
    .pay-hero {
        display: flex;
        align-items: center;
        min-height: calc(100svh - 84px);
        padding-block: 40px 100px;
    }

    .pay-hero::before {
        background: radial-gradient(ellipse 48% 56% at 66% 48%, rgba(69, 214, 255, 0.2), rgba(122, 76, 255, 0.16) 50%, transparent 78%);
    }

    .pay-hero__inner {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
        align-items: center;
        gap: 24px;
    }

    .pay-hero__mascot {
        position: relative;
        z-index: 3;
        align-self: center;
        justify-self: end;
        width: min(100%, 380px);
        margin: 0 -56px 0 0;
    }

    .pay-hero__main { justify-self: center; max-width: 600px; }
}

/* Strip panels (deposit / withdrawal) */
.pay-deposit { padding-bottom: 0; }
.pay-withdraw { padding-top: 0; }

.pay-strip { position: relative; }

.pay-strip__panel {
    position: relative;
    padding: 28px clamp(16px, 3vw, 36px) 32px;
    border-style: solid;
    border-width: 5px 0 0;
    border-image: var(--brass-rule) 1;
    background: linear-gradient(100deg, #17244a 0%, #1b3d57 55%, #17244a 100%);
    box-shadow: var(--shadow);
}

.pay-strip--rev .pay-strip__panel {
    border-image: linear-gradient(90deg, rgba(108, 71, 24, 0), #f2cd7e 45%, #c9933f 70%, #6c4718) 1;
    background: linear-gradient(260deg, #17244a 0%, #1b3d57 55%, #17244a 100%);
    border-right: 5px solid var(--c-brass-dark);
}

.pay-strip__panel h2 { color: var(--c-gold); }
.pay-strip__panel .lead { color: var(--c-text); }
.pay-strip__panel .table-wrap { margin-block: 1.5rem; }
.pay-strip__tip { margin-bottom: 0; }

.pay-strip__art {
    position: relative;
    z-index: 2;
    width: 220px;
    margin: 0 auto -36px;
}

.pay-strip__art img {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 10px 20px rgba(5, 3, 20, 0.55));
}

.pay-table .data-table tbody th { color: var(--c-gold); }
.pay-table .data-table tbody tr:nth-child(odd) { background: #1e2a58; }
.pay-table .data-table tbody tr:nth-child(even) { background: #283657; }
.pay-table .data-table tbody th,
.pay-table .data-table tbody td { border-top: 1px solid rgba(201, 147, 63, 0.55); }

@media (min-width: 1024px) {
    .pay-strip--art .pay-strip__panel { padding-right: calc(34% + 16px); }

    .pay-strip__art {
        position: absolute;
        right: -24px;
        top: -40px;
        width: min(36%, 380px);
        margin: 0;
    }
}

.pay-vchain {
    position: relative;
    display: block;
    width: 40px;
    height: 72px;
    margin: 0 auto;
}

/* Crypto */
.pay-crypto__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
    align-items: center;
}

.pay-crypto .lead { color: var(--c-text); }

.coin-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.coin {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 96px;
    height: 96px;
    margin: 0;
    border: 5px solid transparent;
    border-radius: 50%;
    background:
        radial-gradient(circle, #2a2670, #15123a 75%) padding-box,
        linear-gradient(180deg, #fbe1a0, #b07a33 55%, #6c4718) border-box;
    box-shadow: 0 0 0 2px #2c1f0c;
    transition: box-shadow 0.2s ease;
}

.coin:hover,
.coin:focus-within {
    box-shadow: 0 0 0 2px #2c1f0c, 0 0 20px rgba(69, 214, 255, 0.7);
}

.coin__tick {
    font-family: var(--f-display);
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1;
    color: var(--c-gold);
}

.coin__name {
    font-size: 0.8125rem;
    line-height: 1;
    color: var(--c-muted);
}

@media (min-width: 1024px) {
    .pay-crypto__grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 56px; }
    .coin-list { max-width: 420px; justify-self: center; }
}

/* Withdrawal times */
.pay-times__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    align-items: start;
}

.pay-gauge {
    position: relative;
    isolation: isolate;
    width: 100%;
    max-width: 240px;
    margin: 0 auto;
}

.pay-gauge::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(circle, rgba(69, 214, 255, 0.35), rgba(122, 76, 255, 0.18) 55%, transparent 72%);
}

.pay-gauge img {
    display: block;
    width: 100%;
    height: auto;
}

.pay-times .lead { color: var(--c-text); }
.pay-times .table-wrap { margin-block: 1.5rem; }

.pay-times .data-table caption {
    width: fit-content;
    max-width: calc(100% - 24px);
    margin: 14px auto;
    padding: 6px 22px;
    text-align: center;
    border: 2px solid var(--c-brass);
    border-radius: 8px;
    background: linear-gradient(180deg, #2c4064, #18243f);
}

.pay-times .data-table tbody th { color: var(--c-gold); }

@media (min-width: 768px) {
    .pay-fastcol .data-table tbody td:nth-child(2) {
        box-shadow: inset 0 0 14px rgba(69, 214, 255, 0.35), inset 0 0 0 1px rgba(69, 214, 255, 0.5);
    }
}

@media (min-width: 1024px) {
    .pay-times__grid { grid-template-columns: 280px minmax(0, 1fr); gap: 48px; }
    .pay-gauge { max-width: none; position: sticky; top: calc(var(--header-bottom) + 24px); }
}

/* Limits callout */
.pay-limit {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    max-width: 900px;
    margin-inline: auto;
    padding: clamp(20px, 3vw, 32px);
    border-left: 5px solid var(--c-amber);
    border-radius: 0 12px 12px 0;
    background: #1d2b49;
    box-shadow: inset 0 0 0 1px rgba(201, 147, 63, 0.3);
}

.pay-limit h2 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem); }
.pay-limit .lead { color: var(--c-text); }

.pay-limit__icon {
    position: relative;
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
}

.pay-limit__cog {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    --gear-core: var(--c-cyan);
    --gear-hub: #16224a;
}

.pay-limit__lock {
    position: relative;
    width: 28px;
    height: 28px;
    color: var(--c-heading);
}

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

/* 2x rule */
.pay-wager .container {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
    align-items: center;
}

.pay-wager .lead { color: var(--c-text); }

.pay-flow-panel { padding: clamp(16px, 3vw, 28px); }

.pay-flow {
    position: relative;
    width: 100%;
    max-width: 620px;
    margin-inline: auto;
    aspect-ratio: 2 / 1;
    container-type: inline-size;
}

.pay-flow svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
}

.pay-flow__lbl {
    position: absolute;
    transform: translate(-50%, -50%);
    font-family: var(--f-display);
    font-size: 0.8rem;
    font-size: clamp(0.8rem, 3.8cqi, 1.3rem);
    font-weight: 700;
    line-height: 1.05;
    text-align: center;
    white-space: nowrap;
    color: var(--c-text);
    text-shadow: 0 1px 4px rgba(5, 3, 20, 0.85);
}

.pay-flow__lbl--left {
    transform: translate(0, -50%);
    text-align: left;
    color: #f4b8be;
}

@media (min-width: 1024px) {
    .pay-wager .container { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 56px; }
}

/* DKK compare */
.pay-dkk .section-head .lead { color: var(--c-text); }

.pay-compare {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
    max-width: 900px;
    margin-inline: auto;
    padding-top: 0.75rem;
}

.pay-compare .steel-panel { padding-top: 0.25rem; }

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

.pay-compare__list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    padding: 8px 0;
    border-top: 1px solid rgba(201, 147, 63, 0.35);
}

.pay-compare__list li:first-child { border-top: 0; }

.pay-compare__list .icon {
    width: 1.3em;
    height: 1.3em;
    margin-top: 0.15em;
}

.pay-compare__list.is-yes .icon { color: var(--c-gold); }
.pay-compare__list.is-no .icon { color: #e8a0a7; }

@media (min-width: 768px) {
    .pay-compare { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 40px; }
}

/* Related + FAQ */
.pay-related .section-head { margin-bottom: 1rem; }
.pay-related .chain__links { stroke-width: 7; }
.pay-related .chain-row__edge,
.pay-related .chain-row__cog { display: none; }

.pay-faq__more { margin-top: 1rem; }
.pay-faq { padding-top: 0; }

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

/* Hero */
.faq-hero {
    position: relative;
    isolation: isolate;
    padding-block: 56px 64px;
}

.faq-hero__bg {
    position: absolute;
    inset: 0;
    z-index: -3;
    background-color: var(--c-bg);
    background-image: url("./assets/37a2a81487ae7eeb9dc174d241463c63.webp");
    background-size: cover;
    background-position: 60% center;
    background-repeat: no-repeat;
}

.faq-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background: radial-gradient(ellipse 70% 60% at 62% 50%, rgba(69, 214, 255, 0.2), rgba(122, 76, 255, 0.18) 50%, transparent 78%);
}

.faq-hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 150px;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(26, 18, 56, 0), var(--c-bg));
}

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

.faq-hero__heroine {
    width: 100%;
    max-width: 240px;
    height: 260px;
    margin: 0 auto 36px;
    background-image: url("./assets/265f941b70a1acdb7dc7f8beca5b1f82.webp");
    background-size: contain;
    background-position: center bottom;
    background-repeat: no-repeat;
    filter: drop-shadow(0 10px 22px rgba(10, 4, 30, 0.6));
}

.faq-hero__plaque {
    display: block;
    width: 100%;
    padding: 2.3rem clamp(18px, 3vw, 40px) 1.6rem;
    font-family: var(--f-body);
    font-size: 1.0625rem;
    font-weight: 400;
    line-height: 1.6;
    text-align: left;
    color: var(--c-text);
}

.faq-hero__plaque h1 {
    margin-bottom: 0.45em;
    text-align: center;
    font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3rem);
    color: #fff3d6;
    text-shadow: 0 2px 10px rgba(10, 5, 30, 0.8);
}

.faq-hero__cap {
    position: absolute;
    top: -30px;
    left: 50%;
    width: 60px;
    height: 60px;
    margin-left: -30px;
    --gear-core: var(--c-cyan);
    --gear-hub: #16224a;
    filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.6));
}

.faq-hero__chips { margin-top: 1.1rem; }

.faq-hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 24px;
    margin-top: 1.25rem;
}

.faq-hero__updated { margin-top: 1rem; }

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

    .faq-hero__inner {
        grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
        gap: clamp(16px, 2vw, 32px);
        align-items: center;
    }

    .faq-hero__heroine {
        max-width: none;
        height: 100%;
        min-height: 440px;
        margin: 0;
        background-position: left bottom;
    }
}

/* Quick answers */
.faq-quick { padding-bottom: calc(var(--section-y) * 0.4); }
.faq-quick .section-head { margin-bottom: 1rem; }
.faq-quick .steel-panel { text-align: center; }
.faq-quick .steel-panel__body p { color: var(--c-muted); }

/* Topic panels */
.faq-groups { padding-top: calc(var(--section-y) * 0.4); }

.faq-groups__inner {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 72px;
    max-width: 960px;
}

.faq-chain { display: none; }

.faq-group { position: relative; z-index: 1; }

.faq-group .steel { scroll-margin-top: 48px; }

.faq-group .steel-panel { padding-top: 0.25rem; }

.faq-group .steel-panel__title {
    font-size: clamp(1.25rem, 1.05rem + 1vw, 1.8rem);
}

.faq-intro {
    margin-bottom: 1.25rem;
    color: var(--c-text);
}

.faq-more { margin-top: 1rem; }

.faq-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 1.25rem;
    padding: 0;
    list-style: none;
}

.faq-pill {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    margin: 0;
    padding: 0.25em 1em;
    border: 2px solid var(--c-brass);
    border-radius: 999px;
    font-family: var(--f-display);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--c-heading);
    background: #1b1650;
}

.faq-key { margin-bottom: 1.25rem; }

.faq-terms { margin-bottom: 1.5rem; }
.faq-terms .data-table .is-value { text-align: left; }
.faq-terms .data-table tbody tr:nth-child(odd) { background: #1e1a52; }
.faq-terms .data-table tbody tr:nth-child(even) { background: #283657; }
.faq-terms .data-table tbody th,
.faq-terms .data-table tbody td { border-top: 1px solid rgba(201, 147, 63, 0.55); }

#omsaetning-2x.faq {
    border-left: 6px solid var(--c-amber);
}

.faq-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 20px;
    margin-top: 1.25rem;
}

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

/* Calm responsible-gambling panel */
.faq-group--calm .steel {
    border-color: #6c7a96;
    box-shadow:
        0 0 0 2px #2c1f0c,
        0 0 0 4px #5e4a2a,
        var(--shadow);
}

.faq-calm-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 28px;
    margin-bottom: 1.25rem;
}

@media (min-width: 1024px) {
    .faq-groups__inner {
        max-width: calc(var(--container) + 2 * var(--gutter));
        padding-left: calc(var(--gutter) + 64px);
        padding-right: calc(var(--gutter) + 64px);
    }

    .faq-chain {
        display: block;
        left: calc(var(--gutter) + 8px);
        top: 0;
        width: 40px;
        height: 100%;
    }
}

/* Related */
.faq-related__wrap { position: relative; }

.faq-related__chain { display: none; }

.faq-related__grid {
    position: relative;
    z-index: 1;
}

@media (min-width: 1024px) {
    .faq-related__chain {
        display: block;
        left: 4%;
        top: 14px;
        width: 92%;
        height: 40px;
    }

    .faq-related__chain .chain__links { stroke-width: 6; }
}