/*
 * Winna Casino - shared design system
 * Dark slate-navy canvas, gold circuit accents, chamfered steel/glass frames.
 */

:root {
    --bg: #1e2433;
    --bg-2: #242b3c;
    --bg-deep: #171c28;
    --bg-band: #2a3245;
    --gold: #e0b55a;
    --gold-bright: #f5d68a;
    --gold-deep: #a9822f;
    --steel: #7486a6;
    --steel-light: #b4c2da;
    --steel-dark: #3c4760;
    --gunmetal: #535e74;
    --text: #f1f3f8;
    --muted: #b9c2d3;
    --violet: #9b7bff;
    --cyan: #4fd6e6;
    --emerald: #46d39a;

    --font-head: "Rubik", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
    --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

    --container: 1200px;
    --gutter: clamp(16px, 4vw, 32px);
    --header-bottom: 64px;

    --glow-gold: 0 0 12px rgba(224, 181, 90, 0.45);
    --glow-gold-strong: 0 0 20px rgba(224, 181, 90, 0.75);
    --hairline: linear-gradient(90deg, transparent 0%, rgba(224, 181, 90, 0.35) 18%, var(--gold-bright) 50%, rgba(224, 181, 90, 0.35) 82%, transparent 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 {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-bottom) + 16px);
    overflow-x: clip;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    position: relative;
    min-height: 100vh;
    overflow-x: clip;
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.65;
    color: var(--text);
    background-color: var(--bg);
    background-image: radial-gradient(ellipse 90% 60% at 50% 0%, #283149 0%, rgba(30, 36, 51, 0) 70%);
    background-repeat: no-repeat;
}

body.menu-open {
    overflow: hidden;
}

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

h1 { font-size: clamp(2rem, 1.35rem + 2.6vw, 3rem); letter-spacing: -0.01em; }
h2 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.35rem); }
h3 { font-size: clamp(1.1rem, 1rem + 0.4vw, 1.3rem); font-weight: 600; }

p { margin: 0 0 1em; }

strong { font-weight: 600; color: var(--text); }

a {
    color: var(--gold-bright);
    text-decoration-color: rgba(224, 181, 90, 0.6);
    text-decoration-thickness: 1px;
    transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

a:hover { color: #fff; text-decoration-color: var(--gold-bright); }

:focus-visible {
    outline: 2px solid var(--gold-bright);
    outline-offset: 3px;
    border-radius: 4px;
}

img { display: block; }

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

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

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

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

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

main,
.site-footer {
    position: relative;
    z-index: 1;
}

.section {
    position: relative;
    padding-block: clamp(48px, 7vw, 88px);
}

.section--tight { padding-block: clamp(32px, 5vw, 56px); }

.section-title {
    text-align: center;
    text-shadow: 0 0 18px rgba(224, 181, 90, 0.22);
    margin-bottom: 0.4em;
}

.section-intro {
    max-width: 760px;
    margin: 0 auto clamp(24px, 4vw, 40px);
    text-align: center;
    color: var(--muted);
}

.circuit-rule {
    display: block;
    width: min(320px, 70%);
    height: 12px;
    margin: 0 auto clamp(20px, 3vw, 32px);
    background:
        radial-gradient(circle at 50% 50%, var(--gold-bright) 0 3px, transparent 4px),
        linear-gradient(90deg, transparent, var(--gold) 50%, transparent) center / 100% 1px no-repeat;
    filter: drop-shadow(0 0 4px rgba(224, 181, 90, 0.6));
}

.lead {
    font-size: clamp(1.05rem, 1rem + 0.3vw, 1.18rem);
    color: var(--muted);
}

.prose { max-width: 72ch; }
.prose p, .prose li { color: var(--muted); }
.prose h3 { margin-top: 1.4em; }

.split {
    display: grid;
    gap: clamp(24px, 4vw, 56px);
    align-items: center;
}

.hero {
    position: relative;
    padding-block: clamp(28px, 5vw, 64px) clamp(40px, 6vw, 72px);
}

.hero h1 { margin-bottom: 0.45em; }

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

/* Integrated, frameless artwork with radial glow */
.art {
    position: relative;
    isolation: isolate;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
}

.art::before {
    content: "";
    position: absolute;
    inset: 12% 14%;
    z-index: -1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(224, 181, 90, 0.4) 0%, rgba(224, 181, 90, 0.12) 45%, transparent 70%);
    filter: blur(24px);
    pointer-events: none;
}

.art--cyan::before {
    background: radial-gradient(circle, rgba(79, 214, 230, 0.38) 0%, rgba(79, 214, 230, 0.1) 45%, transparent 70%);
}

.art--violet::before {
    background: radial-gradient(circle at 45% 45%, rgba(155, 123, 255, 0.4) 0%, rgba(224, 181, 90, 0.18) 45%, transparent 72%);
}

.art--teal::before {
    background: radial-gradient(circle at 40% 50%, rgba(224, 181, 90, 0.36) 0%, rgba(70, 200, 190, 0.16) 48%, transparent 72%);
}

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

/* Lists */
.dot-list,
.check-list,
.dash-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1em;
    display: grid;
    gap: 10px;
}

.dot-list li,
.check-list li,
.dash-list li {
    position: relative;
    padding-left: 26px;
    color: var(--muted);
}

.dot-list li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 0.6em;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 8px rgba(224, 181, 90, 0.8);
}

.check-list li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 0.35em;
    width: 7px;
    height: 13px;
    border-right: 2px solid var(--gold);
    border-bottom: 2px solid var(--gold);
    transform: rotate(45deg);
}

.dash-list li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 0.8em;
    width: 12px;
    height: 2px;
    background: var(--steel);
}

/* ============================================
   CHAMFERED FRAME SYSTEM
   ============================================ */

.frame {
    --c: 16px;
    --c-tl: var(--c);
    --c-tr: var(--c);
    --c-br: var(--c);
    --c-bl: var(--c);
    --bw: 2px;
    --frame-bg: linear-gradient(145deg, #aab8d2 0%, #56627c 32%, #8e9cb8 62%, #3f4a62 100%);
    --fill: linear-gradient(160deg, rgba(46, 56, 78, 0.97) 0%, rgba(30, 36, 51, 0.97) 100%);
    position: relative;
    isolation: isolate;
}

.frame::before,
.frame::after {
    content: "";
    position: absolute;
    z-index: -1;
    pointer-events: none;
    clip-path: polygon(
        var(--c-tl) 0,
        calc(100% - var(--c-tr)) 0,
        100% var(--c-tr),
        100% calc(100% - var(--c-br)),
        calc(100% - var(--c-br)) 100%,
        var(--c-bl) 100%,
        0 calc(100% - var(--c-bl)),
        0 var(--c-tl)
    );
}

.frame::before {
    inset: 0;
    background: var(--frame-bg);
}

.frame::after {
    inset: var(--bw);
    background: var(--fill);
}

.frame--gold {
    --frame-bg: linear-gradient(145deg, var(--gold-bright) 0%, var(--gold-deep) 40%, var(--gold) 70%, #8a6a26 100%);
    filter: drop-shadow(0 0 12px rgba(224, 181, 90, 0.4));
}

.frame--glass {
    --c: 22px;
    --bw: 6px;
    --frame-bg: linear-gradient(140deg, #d5dceb 0%, #6b7690 22%, #3e4860 48%, #9aa6bf 72%, #4a556d 100%);
    --fill:
        linear-gradient(180deg, rgba(255, 255, 255, 0.28) 0, rgba(255, 255, 255, 0) 2px),
        linear-gradient(125deg, rgba(255, 255, 255, 0.11) 0%, rgba(255, 255, 255, 0) 30%),
        linear-gradient(180deg, rgba(60, 72, 98, 0.96) 0%, rgba(36, 44, 62, 0.97) 100%);
}

.frame--cut-br {
    --c-tl: 6px;
    --c-tr: 6px;
    --c-bl: 6px;
    --c-br: 30px;
}

.frame--rivets::after {
    background:
        radial-gradient(circle at 16px 16px, #d6dff0 0 2px, transparent 3px),
        radial-gradient(circle at calc(100% - 16px) 16px, #d6dff0 0 2px, transparent 3px),
        radial-gradient(circle at 16px calc(100% - 16px), #d6dff0 0 2px, transparent 3px),
        radial-gradient(circle at calc(100% - 16px) calc(100% - 16px), #d6dff0 0 2px, transparent 3px),
        var(--fill);
}

.frame--hover {
    transition: filter 0.25s ease;
}

.frame--hover:hover,
.frame--hover:focus-within {
    --frame-bg: linear-gradient(145deg, var(--gold-bright) 0%, var(--gold-deep) 40%, var(--gold) 70%, #8a6a26 100%);
    filter: drop-shadow(0 0 12px rgba(224, 181, 90, 0.55));
}

.card {
    padding: clamp(20px, 3vw, 32px);
}

/* Browser window dots */
.win-dots {
    display: inline-flex;
    gap: 6px;
}
.win-dots span {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #ff5f57;
}
.win-dots span:nth-child(2) { background: #febc2e; }
.win-dots span:nth-child(3) { background: #28c840; }

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

.chip {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 6px 16px;
    font-size: 0.9rem;
    color: var(--muted);
    background: rgba(36, 43, 60, 0.9);
    border: 1px solid var(--steel);
    clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 8px 100%, 0 50%);
    transition: color 0.2s ease, border-color 0.2s ease;
}

.chip:hover { color: var(--gold-bright); border-color: var(--gold); }

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

.pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0.6rem 1.6rem;
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 1.05rem;
    line-height: 1.2;
    color: var(--gold-bright);
    background: transparent;
    border: 2px solid var(--gold);
    border-radius: 999px;
    text-decoration: none;
    text-align: center;
    box-shadow: 0 0 10px rgba(224, 181, 90, 0.35), inset 0 0 8px rgba(224, 181, 90, 0.15);
    transition: box-shadow 0.25s ease, background-color 0.25s ease, color 0.25s ease;
}

.pill:hover,
.pill:focus-visible {
    color: #fff;
    background-color: rgba(224, 181, 90, 0.1);
    box-shadow: var(--glow-gold-strong), inset 0 0 12px rgba(224, 181, 90, 0.28);
}

.pill--sm {
    min-height: 44px;
    padding: 0.45rem 1.15rem;
    font-size: 0.95rem;
}

.pill--steel {
    color: var(--steel-light);
    border-color: var(--steel);
    box-shadow: none;
}

.pill--steel:hover,
.pill--steel:focus-visible {
    color: #fff;
    border-color: var(--steel-light);
    background-color: rgba(180, 194, 218, 0.08);
    box-shadow: 0 0 12px rgba(180, 194, 218, 0.35);
}

.pill-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin: 0 0 16px;
}

.pill-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    margin: 0 0 16px;
}

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

.rg-line--center { text-align: center; }

.jump-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 20px 0 0;
}

.jump-links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0.35rem 1rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--gold-bright);
    border: 1px solid rgba(224, 181, 90, 0.7);
    border-radius: 999px;
    text-decoration: none;
    transition: box-shadow 0.2s ease, color 0.2s ease;
}

.jump-links a:hover,
.jump-links a:focus-visible {
    color: #fff;
    box-shadow: var(--glow-gold);
}

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

.site-header {
    position: sticky;
    top: 0;
    z-index: 60;
}

.site-header::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(27, 32, 46, 0.9);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.site-header::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: var(--hairline);
    box-shadow: 0 0 10px rgba(224, 181, 90, 0.6);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 64px;
}

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

.site-brand__text {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: clamp(1.15rem, 1rem + 0.9vw, 1.75rem);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--gold);
    background: linear-gradient(180deg, #fbe3a2 0%, var(--gold) 55%, #b68a36 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 1px 6px rgba(224, 181, 90, 0.3));
}

.nav-toggle {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0;
    background: transparent;
    border: 1px solid rgba(224, 181, 90, 0.6);
    border-radius: 10px;
    cursor: pointer;
}

.nav-toggle__bar {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--gold-bright);
    border-radius: 2px;
    transition: transform 0.25s ease, opacity 0.25s 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);
    left: 0;
    right: 0;
    bottom: 0;
    height: auto;
    z-index: 59;
    display: none;
    flex-direction: column;
    gap: 24px;
    padding: 16px var(--gutter) 40px;
    background: var(--bg-deep);
    border-top: 1px solid rgba(224, 181, 90, 0.35);
    overflow-y: auto;
    overscroll-behavior: contain;
}

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

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

.nav-list li + li { border-top: 1px solid rgba(116, 134, 166, 0.25); }

.nav-link {
    display: flex;
    align-items: center;
    min-height: 48px;
    font-family: var(--font-head);
    font-weight: 500;
    font-size: 1.1rem;
    color: var(--steel-light);
    text-decoration: none;
    text-transform: lowercase;
}

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

.header-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.header-actions .pill { width: 100%; min-height: 48px; }

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

    .site-nav {
        position: static;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 28px;
        padding: 0;
        background: none;
        border: 0;
        overflow: visible;
    }

    .nav-list {
        display: flex;
        align-items: center;
        gap: 4px;
    }

    .nav-list li + li { border-top: 0; }

    .nav-link {
        min-height: 44px;
        padding: 0 12px;
        font-size: 1.05rem;
        position: relative;
    }

    .nav-link[aria-current="page"]::after {
        content: "";
        position: absolute;
        left: 12px;
        right: 12px;
        bottom: 6px;
        height: 1px;
        background: var(--gold);
        box-shadow: var(--glow-gold);
    }

    .header-actions {
        flex-direction: row;
        gap: 10px;
    }

    .header-actions .pill { width: auto; min-height: 44px; }

    .header-inner { min-height: 76px; }
}

/* Breadcrumbs */
.breadcrumbs {
    padding-top: 16px;
}

.breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.875rem;
    color: var(--muted);
}

.breadcrumbs li + li::before {
    content: "›";
    margin-right: 8px;
    color: var(--gold);
}

.breadcrumbs a { color: var(--steel-light); }
.breadcrumbs [aria-current="page"] { color: var(--text); }

/* ============================================
   PAGE-WIDE CIRCUIT MARGINS
   ============================================ */

.circuit-margins {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: none;
    overflow: hidden;
    pointer-events: none;
}

.circuit-margins svg {
    position: absolute;
    top: 0;
    width: 200px;
    height: 100%;
    max-width: none;
    opacity: 0.28;
}

.circuit-margins__side--left { left: 0; }
.circuit-margins__side--right { right: 0; transform: scaleX(-1); }

@media (min-width: 1024px) {
    .circuit-margins { display: block; }
}

@media (min-width: 1440px) {
    .circuit-margins svg { width: 240px; opacity: 0.3; }
}

/* ============================================
   NUMBERED STEPS ON A CIRCUIT TRACE
   ============================================ */

.steps-wrap {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.steps {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 28px;
}

.steps::before {
    content: "";
    position: absolute;
    left: 21px;
    top: 22px;
    bottom: 22px;
    width: 2px;
    background: linear-gradient(180deg, var(--gold-bright), var(--gold-deep));
    box-shadow: 0 0 8px rgba(224, 181, 90, 0.6);
}

.steps__item {
    position: relative;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 16px;
}

.steps__node {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid var(--gold);
    background: var(--bg);
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--gold-bright);
    box-shadow: 0 0 12px rgba(224, 181, 90, 0.5), inset 0 0 8px rgba(224, 181, 90, 0.25);
}

.steps__title {
    margin: 8px 0 6px;
    font-size: 1.1rem;
}

.steps__body p {
    margin: 0;
    color: var(--muted);
}

.steps-gauge {
    padding-left: 0;
}

@media (min-width: 1024px) {
    .steps-wrap {
        flex-direction: row;
        align-items: flex-start;
    }

    .steps {
        flex: 1;
        grid-template-columns: repeat(var(--steps), minmax(0, 1fr));
        gap: 24px;
    }

    .steps::before {
        left: 22px;
        right: calc((100% - (var(--steps) - 1) * 24px) / var(--steps) - 22px);
        top: 21px;
        bottom: auto;
        width: auto;
        height: 2px;
        background: linear-gradient(90deg, var(--gold-bright), var(--gold-deep));
    }

    .steps-wrap--gauge .steps::before { right: -24px; }

    .steps__item {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .steps-gauge {
        flex: none;
        margin-top: -10px;
    }
}

/* ============================================
   RING GAUGE
   ============================================ */

.gauge {
    display: inline-flex;
    line-height: 0;
}

.gauge svg { overflow: visible; }

.gauge__track,
.gauge__fill {
    fill: none;
    stroke-width: 8;
    stroke-linecap: round;
}

.gauge__track { stroke: var(--steel-dark); }

.gauge__fill {
    stroke: var(--gold);
    filter: drop-shadow(0 0 4px rgba(224, 181, 90, 0.7));
}

.gauge__dash { fill: var(--gold); }

.gauge__value {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 24px;
    fill: var(--text);
}

.gauge__unit {
    font-family: var(--font-body);
    font-size: 10px;
    fill: var(--muted);
}

.gauge--animated .gauge__fill {
    stroke-dashoffset: 188.5;
    animation: gauge-sweep 7s cubic-bezier(0.5, 0, 0.3, 1) infinite;
}

@keyframes gauge-sweep {
    0% { stroke-dashoffset: 188.5; }
    80% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: 0; }
}

.is-paused *,
.is-paused,
.is-hidden [data-loop] * {
    animation-play-state: paused !important;
}

/* ============================================
   WARNING / GLASS PANEL
   ============================================ */

.warn-panel {
    padding: clamp(24px, 4vw, 44px) clamp(22px, 5vw, 56px);
}

.warn-panel__head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-bottom: 18px;
    text-align: center;
}

.warn-icon {
    flex: none;
    width: 40px;
    color: var(--gold);
    filter: drop-shadow(0 0 6px rgba(224, 181, 90, 0.6));
}

.warn-panel__title { margin: 0; }

.warn-panel__body { color: var(--muted); }
.warn-panel__body > :last-child { margin-bottom: 0; }

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

.table-wrap {
    max-width: 100%;
    overflow-x: auto;
}

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

.data-table th,
.data-table td {
    padding: 14px 16px;
    text-align: left;
    vertical-align: top;
}

.data-table thead th {
    font-family: var(--font-head);
    font-weight: 600;
    color: var(--gold-bright);
    border-bottom: 1px solid rgba(224, 181, 90, 0.6);
}

.data-table tbody td,
.data-table tbody th {
    border-bottom: 1px solid rgba(116, 134, 166, 0.3);
    color: var(--muted);
}

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

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

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

    .data-table--stack,
    .data-table--stack tbody,
    .data-table--stack tr,
    .data-table--stack td,
    .data-table--stack tbody th {
        display: block;
        width: 100%;
    }

    .data-table--stack tr {
        padding: 12px 0;
        border-bottom: 1px solid rgba(224, 181, 90, 0.35);
    }

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

    .data-table--stack td,
    .data-table--stack tbody th {
        display: grid;
        grid-template-columns: minmax(0, 38%) minmax(0, 1fr);
        gap: 12px;
        padding: 6px 4px;
        border: 0;
    }

    .data-table--stack td::before,
    .data-table--stack tbody th::before {
        content: attr(data-label);
        font-family: var(--font-head);
        font-weight: 600;
        color: var(--gold-bright);
    }
}

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

.faq-list {
    display: grid;
    gap: 14px;
    align-items: start;
    max-width: 880px;
    margin-inline: auto;
}

.faq-item {
    --c: 12px;
}

.faq-item__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 56px;
    padding: 16px 22px;
    cursor: pointer;
    list-style: none;
}

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

.faq-item__summary::after {
    content: "";
    flex: none;
    width: 18px;
    height: 18px;
    background:
        linear-gradient(var(--gold), var(--gold)) center / 100% 2px no-repeat,
        linear-gradient(var(--gold), var(--gold)) center / 2px 100% no-repeat;
    transition: transform 0.2s ease;
}

.faq-item[open] > .faq-item__summary::after { transform: rotate(45deg); }

.faq-item__summary:focus-visible {
    outline: 2px solid var(--gold-bright);
    outline-offset: -4px;
}

.faq-item__q {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
}

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

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

/* ============================================
   COIN MEDALLIONS
   ============================================ */

.coin {
    --coin-size: 84px;
    --c1: #f2cf5c;
    --c2: #a77d14;
    --rim: #ffe9a3;
    --glow: rgba(240, 200, 80, 0.45);
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
}

.coin__disc {
    display: grid;
    place-items: center;
    width: var(--coin-size);
    aspect-ratio: 1;
    border-radius: 50%;
    border: 2px solid var(--rim);
    background:
        radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.55), transparent 38%),
        radial-gradient(circle at 50% 55%, var(--c1), var(--c2) 74%);
    box-shadow:
        0 0 0 4px rgba(10, 14, 22, 0.35),
        0 0 22px var(--glow),
        inset 0 -6px 12px rgba(0, 0, 0, 0.35),
        inset 0 0 0 5px rgba(255, 255, 255, 0.14);
}

.coin__glyph {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: calc(var(--coin-size) * 0.46);
    line-height: 1;
    color: #fff;
    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.45);
}

.coin__caption {
    display: flex;
    flex-direction: column;
    font-size: 0.9rem;
    color: var(--muted);
    line-height: 1.35;
}

.coin__caption strong {
    font-family: var(--font-head);
    color: var(--text);
    letter-spacing: 0.04em;
}

.coin--btc  { --c1: #f7b955; --c2: #b8701a; --rim: #ffd98c; --glow: rgba(247, 170, 60, 0.5); }
.coin--eth  { --c1: #7d9bff; --c2: #33468f; --rim: #b8c8ff; --glow: rgba(110, 140, 255, 0.5); }
.coin--ltc  { --c1: #e3e7ef; --c2: #8790a3; --rim: #ffffff; --glow: rgba(210, 220, 240, 0.4); }
.coin--usdt { --c1: #43d39c; --c2: #137556; --rim: #9ff0cf; --glow: rgba(60, 200, 140, 0.5); }
.coin--bnb  { --c1: #f2cf5c; --c2: #a77d14; --rim: #ffe9a3; --glow: rgba(240, 200, 80, 0.5); }
.coin--sol  { --c1: #9a7bff; --c2: #1f8f86; --rim: #cbbcff; --glow: rgba(150, 120, 255, 0.45); }
.coin--trx  { --c1: #f06a5a; --c2: #8f2418; --rim: #ffb3a8; --glow: rgba(240, 100, 80, 0.45); }
.coin--usdc { --c1: #5a9bf0; --c2: #1d4f97; --rim: #b5d3ff; --glow: rgba(90, 150, 240, 0.45); }
.coin--doge { --c1: #e6c77a; --c2: #9a7a2e; --rim: #f7e3b0; --glow: rgba(230, 200, 120, 0.4); }
.coin--xrp  { --c1: #8d97ad; --c2: #3a4257; --rim: #cfd6e6; --glow: rgba(160, 175, 205, 0.4); }
.coin--steel { --c1: #8e9cb8; --c2: #3f4a62; --rim: #cbd5e8; --glow: rgba(150, 165, 195, 0.35); }

.coin--ltc .coin__glyph { color: #2b3346; text-shadow: none; }

.coin--sm { --coin-size: 36px; gap: 6px; }
.coin--sm .coin__disc { box-shadow: 0 0 10px var(--glow), inset 0 -3px 6px rgba(0, 0, 0, 0.35); }

/* ============================================
   RESPONSIBLE GAMING BAND
   ============================================ */

.rg-band {
    position: relative;
    background: linear-gradient(180deg, var(--bg-band) 0%, #262d40 100%);
    padding-block: clamp(28px, 4vw, 44px);
}

.rg-band::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    background: var(--hairline);
    box-shadow: 0 0 12px rgba(224, 181, 90, 0.7);
}

.rg-band__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    text-align: center;
}

.rg-band__badges {
    display: flex;
    gap: 14px;
    color: var(--text);
}

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

.rg-band__copy p {
    margin: 0;
    color: var(--muted);
}

.rg-band__divider {
    width: 60%;
    height: 1px;
    background: rgba(180, 194, 218, 0.4);
}

.rg-band__phone {
    margin: 0;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.2rem);
    line-height: 1.2;
    color: #fff;
}

.rg-band__label { color: #fff; }

.rg-band__tel {
    color: #fff;
    text-decoration: underline;
    text-decoration-color: rgba(224, 181, 90, 0.7);
    text-underline-offset: 0.18em;
    text-decoration-thickness: 2px;
    white-space: nowrap;
}

.rg-band__tel:hover { color: var(--gold-bright); }

.rg-band--slim { padding-block: 24px; }
.rg-band--slim .rg-band__phone { font-size: clamp(1.25rem, 1.1rem + 0.8vw, 1.6rem); }

@media (min-width: 768px) {
    .rg-band__inner {
        flex-direction: row;
        justify-content: center;
        text-align: left;
        gap: clamp(20px, 3vw, 36px);
    }

    .rg-band__copy { flex: 1 1 auto; max-width: 520px; }

    .rg-band__divider {
        width: 1px;
        height: 64px;
        align-self: center;
    }
}

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

.site-footer {
    background: linear-gradient(180deg, #1b2030 0%, var(--bg-deep) 100%);
    padding-top: clamp(40px, 6vw, 64px);
    color: var(--muted);
    font-size: 0.95rem;
}

.site-footer::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    background: var(--hairline);
    box-shadow: 0 0 10px rgba(224, 181, 90, 0.5);
}

.footer-grid {
    display: grid;
    gap: 32px;
}

.footer-brand .site-brand { margin-bottom: 12px; }
.footer-brand p { max-width: 46ch; color: var(--muted); }

.footer-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--gold-bright);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.footer-nav {
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
}

.footer-link {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    color: var(--steel-light);
    text-decoration: none;
}

.footer-link:hover,
.footer-link[aria-current="page"] {
    color: var(--gold-bright);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.footer-small { font-size: 0.875rem; }
.footer-mail { color: var(--text); }

.footer-rg__badges {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
    color: var(--text);
}

.footer-phone {
    color: var(--text);
    font-weight: 600;
    white-space: nowrap;
}

.footer-bottom {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 32px;
    padding-top: 20px;
    padding-bottom: 28px;
    border-top: 1px solid rgba(116, 134, 166, 0.25);
    font-size: 0.875rem;
}

.footer-bottom p { margin: 0; }

@media (min-width: 768px) {
    .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .footer-bottom { flex-direction: row; justify-content: space-between; }
}

@media (min-width: 1024px) {
    .footer-grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.8fr) minmax(0, 0.9fr) minmax(0, 1.2fr); }
}

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

/* Hero: art · copy · rakeback panel */
.home-hero .container {
    max-width: calc(1320px + 2 * var(--gutter));
}

.home-hero__grid {
    display: grid;
    gap: 28px;
    align-items: center;
}

.home-hero__art {
    width: 100%;
    max-width: 360px;
    margin-inline: auto;
}

.home-hero__eyebrow {
    margin: 0 0 14px;
    padding-left: 12px;
    border-left: 2px solid var(--gold);
    font-family: var(--font-head);
    font-weight: 500;
    font-size: 0.85rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gold-bright);
}

.home-hero h1 {
    font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.5rem);
}

.home-hero__text { color: var(--muted); }

.home-hero .pill-stack { margin-top: 22px; }

/* Rakeback glass panel */
.rb-panel {
    margin-top: 14px;
    padding: 18px clamp(20px, 3vw, 30px) 28px;
}

.rb-panel__tab {
    position: absolute;
    top: -10px;
    left: 44%;
    width: 34%;
    height: 12px;
    background: linear-gradient(180deg, #c3cde3 0%, #6b7690 60%, #4a556d 100%);
    clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 100%, 0 100%);
}

.rb-panel__bar { margin: 0 0 12px 4px; }

.rb-panel__screen {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 22px;
    padding: 16px 18px;
    background: rgba(23, 28, 40, 0.6);
    border: 1px solid rgba(180, 194, 218, 0.35);
    border-radius: 8px;
    box-shadow: inset 0 0 22px rgba(0, 0, 0, 0.35);
}

.rb-chart {
    flex: 1 1 auto;
    width: 100%;
    max-width: 230px;
}

.rb-panel__divider {
    flex: none;
    width: 1px;
    align-self: stretch;
    background: rgba(180, 194, 218, 0.35);
}

.rb-panel__screen .gauge { flex: none; }

.rb-panel__title {
    font-size: clamp(1.3rem, 1.1rem + 0.7vw, 1.6rem);
}

.rb-panel p { color: var(--muted); }

.rb-panel__link {
    font-weight: 600;
    text-underline-offset: 0.15em;
}

@media (min-width: 768px) {
    .home-hero__grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
    .home-hero__art { max-width: 440px; }
    .rb-panel { grid-column: 1 / -1; }
}

@media (min-width: 1024px) {
    .home-hero__grid {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.95fr) minmax(0, 1.2fr);
        gap: clamp(24px, 2.5vw, 40px);
    }
    .home-hero__art { max-width: none; }
    .rb-panel { grid-column: auto; margin-top: 0; }
}

/* Section helpers */
.section-more {
    margin: clamp(24px, 3vw, 36px) 0 0;
    text-align: center;
    font-weight: 600;
}

.section-more--text {
    max-width: 640px;
    margin-inline: auto;
    font-weight: 400;
    color: var(--muted);
}

/* Slots with crystal flank background */
.slots-section {
    isolation: isolate;
}

.slots-section::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background-image: url("./assets/c83c5895b230f7ae2d6e327a2c096821.webp");
    background-size: cover;
    background-position: center 50%;
    background-repeat: no-repeat;
}

.slots-section::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(30, 36, 51, 0.6);
    pointer-events: none;
}

@media (min-width: 1024px) {
    .slots-section::after { background: none; }
}

.slot-grid {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    max-width: 980px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 16px;
}

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

.slot-tile { margin: 0; }

.slot-tile__frame {
    --c: 14px;
    --bw: 3px;
    --frame-bg: linear-gradient(145deg, #c3cde3 0%, #6f7fa3 35%, #a7b4d0 65%, #4b5774 100%);
    padding: 3px;
}

.slot-tile__media {
    position: relative;
    clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px), 0 12px);
}

.slot-tile__media img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}

.slot-tile__media::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 1px solid rgba(196, 178, 255, 0.7);
    background:
        radial-gradient(circle at 10px 10px, #e1e7f5 0 2px, transparent 3px),
        radial-gradient(circle at calc(100% - 10px) 10px, #e1e7f5 0 2px, transparent 3px),
        radial-gradient(circle at 10px calc(100% - 10px), #e1e7f5 0 2px, transparent 3px),
        radial-gradient(circle at calc(100% - 10px) calc(100% - 10px), #e1e7f5 0 2px, transparent 3px);
    pointer-events: none;
}

.slot-tile__caption {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 4px 0;
    font-size: 0.9rem;
    line-height: 1.4;
    color: var(--muted);
}

.slot-tile__caption strong {
    font-family: var(--font-head);
    font-size: 0.98rem;
    color: var(--text);
}

/* Originals cards */
.orig-grid {
    display: grid;
    gap: 24px;
    max-width: 520px;
    margin-inline: auto;
}

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

.orig-card {
    --bw: 2px;
    --fill: linear-gradient(180deg, #232a3b 0%, #1d2331 100%);
    display: flex;
    flex-direction: column;
    padding: 2px 2px 26px;
}

.orig-card:not(.frame--gold) {
    --frame-bg: linear-gradient(160deg, #8c9ec0 0%, #4a5774 50%, #7486a6 100%);
}

.orig-card__media {
    clip-path: polygon(5px 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, 0 100%, 0 5px);
}

.orig-card__media img {
    width: 100%;
    height: auto;
    aspect-ratio: 960 / 560;
    object-fit: cover;
}

.orig-card__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 20px 24px 0;
}

.orig-card__body h3 { margin-bottom: 0.4em; }

.orig-card__body p {
    color: var(--muted);
    margin-bottom: 18px;
}

.orig-card__body .pill {
    align-self: center;
    margin-top: auto;
}

/* Coin bus */
.coin-bus {
    margin-inline: calc(-1 * var(--gutter));
    padding: 8px var(--gutter) 12px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
}

.coin-bus:focus-visible { outline-offset: -2px; }

.coin-bus__track {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    min-width: 560px;
    max-width: 1080px;
    margin-inline: auto;
}

.coin-bus__svg {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    width: 100%;
    height: 84px;
    overflow: visible;
    filter: drop-shadow(0 0 3px rgba(224, 181, 90, 0.55));
}

.coin-bus__track .coin {
    position: relative;
    z-index: 1;
    scroll-snap-align: center;
}

@media (min-width: 768px) {
    .coin-bus {
        margin-inline: 0;
        padding-inline: 0;
        overflow: visible;
    }
    .coin-bus__track { min-width: 0; }
}

/* Honest facts */
.facts-wrap { max-width: calc(1000px + 2 * var(--gutter)); }

.facts-lead { font-size: 1.05rem; }

/* Closing CTA */
.home-cta__inner {
    max-width: calc(720px + 2 * var(--gutter));
    text-align: center;
}

.home-cta__inner > p:not(.rg-line) { color: var(--muted); }

.home-cta__row { justify-content: center; margin-top: 8px; }

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

.bonus-hero__grid {
    display: grid;
    gap: 28px;
    align-items: center;
}

.bonus-hero__art {
    width: 100%;
    max-width: 380px;
    margin-inline: auto;
}

.bonus-hero__art::before {
    background: radial-gradient(circle at 50% 50%, rgba(245, 170, 60, 0.5) 0%, rgba(224, 181, 90, 0.16) 45%, transparent 72%);
}

.bonus-hero__text { color: var(--muted); }

.bonus-hero .pill-row { margin-top: 22px; }

@media (min-width: 768px) {
    .bonus-hero__grid {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
        gap: clamp(24px, 4vw, 56px);
    }
    .bonus-hero__art { max-width: 520px; }
}

/* Compare columns */
.compare {
    display: grid;
    gap: 24px;
    max-width: 920px;
    margin-inline: auto;
}

.compare__col {
    padding: 26px clamp(20px, 3vw, 32px) 28px;
}

.compare__col::before { border-top: 0; }

.compare__col--winna {
    --frame-bg: linear-gradient(180deg, var(--gold-bright) 0, var(--gold) 6px, #6b7690 7px, #3e4860 60%, #4a556d 100%);
}

.compare__col--classic {
    --frame-bg: linear-gradient(180deg, var(--steel) 0, var(--steel) 6px, #56627c 7px, #3f4a62 100%);
}

.compare__col h3 { margin-bottom: 0.8em; }

.compare__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 12px;
}

.compare__list li {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    color: var(--muted);
}

.compare__list svg { margin-top: 0.3em; }

.compare__col--winna .compare__list svg { color: var(--gold-bright); }
.compare__col--classic .compare__list svg { color: var(--steel-light); }

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

/* Rakeback answer */
.rb-answer {
    margin: clamp(28px, 4vw, 44px) auto 0;
}

.rb-answer p { color: var(--muted); }

.rakeback-section .steps-wrap { max-width: 1000px; margin-inline: auto; }

/* VIP layout + tier table */
.vip-layout {
    display: grid;
    gap: 28px;
    align-items: center;
}

.vip-layout__art {
    width: 100%;
    max-width: 300px;
    margin-inline: auto;
}

.vip-layout__note {
    margin: 20px 0 0;
    font-size: 0.95rem;
    color: var(--muted);
}

@media (min-width: 1024px) {
    .vip-layout {
        grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.5fr);
        gap: clamp(28px, 4vw, 56px);
    }
    .vip-layout__art { max-width: none; }
}

.tier-table .tier { --tier: var(--steel); }
.tier-table .tier--t1 { --tier: #7486a6; }
.tier-table .tier--t2 { --tier: #e0b55a; }
.tier-table .tier--t3 { --tier: #d6c39a; }
.tier-table .tier--t4 { --tier: #b9a4ff; }
.tier-table .tier--t5 { --tier: #e3d9ff; }

.tier__tag {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 10px;
    font-family: var(--font-head);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--gold-bright);
    border: 1px solid var(--gold);
    border-radius: 999px;
    white-space: nowrap;
}

@media (min-width: 768px) {
    .tier-table tbody th {
        box-shadow: inset 4px 0 0 var(--tier);
        padding-left: 20px;
        min-width: 150px;
    }
    .tier-table tbody tr:hover td,
    .tier-table tbody tr:hover th { background: rgba(224, 181, 90, 0.05); }
}

@media (max-width: 767.98px) {
    .data-table--stack.tier-table tbody tr {
        margin-bottom: 14px;
        padding: 14px 12px;
        border: 1px solid rgba(116, 134, 166, 0.35);
        border-left: 5px solid var(--tier);
        background: linear-gradient(160deg, rgba(46, 56, 78, 0.9), rgba(30, 36, 51, 0.9));
        clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
    }
    .data-table--stack.tier-table tbody tr:last-child { border-bottom: 1px solid rgba(116, 134, 166, 0.35); }
    .data-table--stack.tier-table tbody th { font-size: 1.05rem; }
}

/* Races + Chat Rain */
.duo {
    display: grid;
    gap: 24px;
    max-width: 920px;
    margin-inline: auto;
}

.duo__card {
    padding: 26px clamp(20px, 3vw, 32px) 30px;
}

.duo__icon {
    margin-bottom: 14px;
}

.duo__card p { color: var(--muted); margin-bottom: 0; }

.duo__caution {
    max-width: 720px;
    margin: clamp(24px, 3vw, 36px) auto 0;
    text-align: center;
    color: var(--muted);
}

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

/* VIP Transfer spec list */
.transfer-wrap { max-width: calc(860px + 2 * var(--gutter)); }

.spec {
    padding: 8px clamp(18px, 3vw, 32px);
}

.spec__list { margin: 0; }

.spec__row {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    column-gap: 16px;
    row-gap: 2px;
    padding: 18px 0;
    border-bottom: 1px solid transparent;
    border-image: var(--hairline) 1;
}

.spec__row:last-child { border-bottom: 0; border-image: none; }

.spec__icon { grid-row: 1 / span 2; color: var(--gold); margin-top: 2px; }

.spec__row dt {
    font-family: var(--font-head);
    font-weight: 600;
    color: var(--gold-bright);
}

.spec__row dd {
    margin: 0;
    color: var(--muted);
}

.transfer-note {
    margin: clamp(20px, 3vw, 28px) 0 0;
    color: var(--muted);
}

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

.spil-hero__grid {
    display: grid;
    gap: 28px;
    align-items: center;
}

.spil-hero__art {
    width: 100%;
    max-width: 380px;
    margin-inline: auto;
}

.spil-hero .jump-links { margin: 4px 0 20px; }

.spil-hero__cta { margin-bottom: 14px; }

@media (min-width: 768px) {
    .spil-hero__grid {
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
        gap: clamp(24px, 4vw, 56px);
    }
    .spil-hero__art { max-width: 520px; }
}

.chip-list--center { justify-content: center; }

.spil-prose {
    max-width: 760px;
    margin: clamp(24px, 3vw, 36px) auto 0;
    color: var(--muted);
}

.spil-center-row { justify-content: center; margin-top: 28px; }

/* Framed media (live + sport) */
.spil-split {
    display: grid;
    gap: 24px;
    align-items: center;
}

.spil-split p { color: var(--muted); }

.media-frame {
    --c: 16px;
    --c-br: 34px;
    --bw: 3px;
    --frame-bg: linear-gradient(145deg, #c3cde3 0%, #6f7fa3 35%, #a7b4d0 65%, #4b5774 100%);
    margin: 0;
    padding: 4px;
    filter: drop-shadow(0 0 14px rgba(224, 181, 90, 0.3));
}

.media-frame__img {
    position: relative;
    clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 30px), calc(100% - 30px) 100%, 12px 100%, 0 calc(100% - 12px), 0 12px);
}

.media-frame__img img {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

.media-frame__img::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 1px solid rgba(196, 178, 255, 0.6);
    background:
        radial-gradient(circle at 10px 10px, #e1e7f5 0 2px, transparent 3px),
        radial-gradient(circle at calc(100% - 10px) 10px, #e1e7f5 0 2px, transparent 3px),
        radial-gradient(circle at 10px calc(100% - 10px), #e1e7f5 0 2px, transparent 3px);
    pointer-events: none;
}

@media (min-width: 1024px) {
    .spil-split {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: clamp(32px, 5vw, 64px);
    }
    .spil-split--flip .media-frame { order: 2; }
}

/* Originals tiles */
.o-grid {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    max-width: 1120px;
    display: grid;
    gap: 20px;
    grid-template-columns: minmax(0, 1fr);
}

.o-grid > li { display: block; }

@media (min-width: 640px) {
    .o-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .o-grid > li:last-child { grid-column: 1 / -1; }
}

@media (min-width: 1024px) {
    .o-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .o-grid > li:last-child { grid-column: auto; }
}

.o-tile {
    --c-tl: 6px;
    --c-tr: 6px;
    --c-bl: 6px;
    --c-br: 26px;
    --accent: var(--violet);
    --accent-glow: rgba(155, 123, 255, 0.6);
    --fill: linear-gradient(180deg, #232a3b 0%, #1d2331 100%);
    --frame-bg: linear-gradient(160deg, #8c9ec0 0%, #4a5774 50%, #7486a6 100%);
    height: 100%;
    padding: 24px 22px 26px;
    transition: filter 0.25s ease;
}

.o-tile--cyan { --accent: var(--cyan); --accent-glow: rgba(79, 214, 230, 0.55); }
.o-tile--emerald { --accent: var(--emerald); --accent-glow: rgba(70, 211, 154, 0.55); }

.o-tile:hover,
.o-tile:focus-within {
    --frame-bg: linear-gradient(145deg, var(--accent) 0%, #3e4860 55%, var(--accent) 100%);
    filter: drop-shadow(0 0 14px var(--accent-glow));
}

.o-tile__glyph {
    display: block;
    width: 80px;
    height: 80px;
    margin-bottom: 14px;
    color: var(--gold);
    filter: drop-shadow(0 0 5px rgba(224, 181, 90, 0.5));
}

.o-tile h3 { margin-bottom: 0.35em; }
.o-tile p { margin: 0; color: var(--muted); font-size: 0.95rem; }

.plinko-note {
    --c: 14px;
    max-width: 860px;
    margin: clamp(28px, 4vw, 44px) auto 0;
    padding: 24px clamp(20px, 3vw, 32px);
}

.plinko-note h3 { color: var(--gold-bright); }
.plinko-note p { margin: 0; color: var(--muted); }

.orig-limits__title {
    max-width: 860px;
    margin: clamp(28px, 4vw, 44px) auto 8px;
}

.orig-limits__intro {
    max-width: 860px;
    margin: 0 auto 16px;
    color: var(--muted);
}

.orig-limits {
    --c: 14px;
    max-width: 860px;
    margin-inline: auto;
    padding: 12px clamp(12px, 2vw, 24px);
}

/* Verification flow */
.flow {
    --c: 16px;
    max-width: 840px;
    margin: 0 auto 28px;
    padding: clamp(16px, 3vw, 28px);
}

.flow svg { display: block; width: 100%; height: auto; }
.flow__v { max-width: 340px; margin-inline: auto; }
.flow__h { display: none !important; }

@media (min-width: 768px) {
    .flow__v { display: none !important; }
    .flow__h { display: block !important; }
}

.flow__box {
    fill: #242b3c;
    stroke: var(--steel);
    stroke-width: 1.5;
}

.flow__box--out { stroke: var(--gold); }

.flow__hex {
    fill: #2a3245;
    stroke: var(--gold-bright);
    stroke-width: 2;
    filter: drop-shadow(0 0 8px rgba(224, 181, 90, 0.7));
}

.flow__trace {
    fill: none;
    stroke: var(--gold);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.flow__pulse {
    fill: none;
    stroke: var(--gold-bright);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 4 36;
    animation: flow-pulse 2.4s linear infinite;
}

@keyframes flow-pulse {
    to { stroke-dashoffset: -80; }
}

.flow__label {
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 14px;
    fill: var(--text);
    text-anchor: middle;
}

.spil-glossary {
    max-width: 760px;
    margin: 0 auto clamp(28px, 4vw, 44px);
}

#verificer .steps-wrap { max-width: 1060px; margin-inline: auto; }

/* CTA secondary link */
.bonus-cta__link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 8px;
    font-weight: 600;
}

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

.about-hero__grid {
    display: grid;
    gap: 28px;
    align-items: center;
}

.about-hero__art {
    width: 100%;
    max-width: 360px;
    margin-inline: auto;
}

@media (min-width: 768px) {
    .about-hero__grid {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
        gap: clamp(24px, 4vw, 56px);
    }
    .about-hero__art { max-width: 500px; }
}

.about-prose {
    max-width: 760px;
    margin-inline: auto;
}

.about-prose p { color: var(--muted); }
.about-prose--after { margin-top: clamp(24px, 3vw, 36px); }
.about-prose--faq { margin-bottom: 24px; }

/* Timeline */
.tl {
    max-width: 760px;
    margin: clamp(24px, 4vw, 40px) auto 0;
}

.tl svg { width: 100%; height: auto; overflow: visible; }
.tl .tl__h { display: none; }
.tl .tl__v { display: block; max-width: 300px; margin-inline: auto; }

@media (min-width: 768px) {
    .tl .tl__v { display: none; }
    .tl .tl__h { display: block; }
}

.tl__node {
    fill: var(--bg);
    stroke: var(--gold-bright);
    stroke-width: 2.5;
    filter: drop-shadow(0 0 5px rgba(224, 181, 90, 0.7));
}

.tl__dot { fill: var(--gold); }

.tl__label text {
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 15px;
    fill: var(--text);
}

/* Operator fact card */
.fact-card {
    --c: 18px;
    max-width: 960px;
    margin: clamp(24px, 4vw, 40px) auto 0;
    padding: 10px clamp(12px, 2vw, 24px);
}

.fact-card .data-table tbody td,
.fact-card .data-table tbody th {
    border-bottom-color: rgba(224, 181, 90, 0.45);
}

.fact-card .data-table tbody tr:last-child td,
.fact-card .data-table tbody tr:last-child th { border-bottom: 0; }

/* Licence comparison */
.xcompare {
    display: grid;
    gap: 24px;
    max-width: 960px;
    margin: clamp(24px, 4vw, 40px) auto 0;
}

.xcol { padding: 24px clamp(20px, 3vw, 32px) 30px; }

.xcol--tobique { --frame-bg: linear-gradient(145deg, #c3cde3 0%, #6f7fa3 40%, #a7b4d0 70%, #4b5774 100%); }
.xcol--dk { --frame-bg: linear-gradient(145deg, #4d5871 0%, #384157 100%); }

.xcol h3 { margin-bottom: 0.8em; }

.xcol__list { margin: 0; display: grid; gap: 14px; }

.xcol__row {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    column-gap: 14px;
    row-gap: 2px;
}

.xcol__row svg { grid-row: 1 / span 2; margin-top: 0.25em; }
.xcol__row--yes svg { color: var(--gold-bright); }
.xcol__row--no svg { color: var(--steel); }

.xcol__row dt {
    font-family: var(--font-head);
    font-weight: 600;
    color: var(--text);
}

.xcol__row dd { margin: 0; color: var(--muted); }

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

/* Dispute stepper */
.steps--arrow {
    max-width: 1000px;
    margin: clamp(24px, 4vw, 40px) auto 0;
}

.steps--arrow::before { bottom: 12px; }

.steps--arrow::after {
    content: "";
    position: absolute;
    left: 15px;
    bottom: 0;
    width: 14px;
    height: 12px;
    background: var(--gold);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.steps__node--svg {
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
}

.steps__node--svg svg { width: 44px; height: 44px; overflow: visible; }

.dnode {
    fill: var(--bg);
    stroke: var(--gold);
    stroke-width: 2;
    filter: drop-shadow(0 0 4px rgba(224, 181, 90, 0.6));
}

.dnum {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 18px;
    fill: var(--gold-bright);
}

@media (min-width: 1024px) {
    .steps--arrow::before { right: 0; bottom: auto; }
    .steps--arrow::after {
        left: auto;
        right: -4px;
        bottom: auto;
        top: 15px;
        width: 12px;
        height: 14px;
        clip-path: polygon(0 0, 100% 50%, 0 100%);
    }
}

/* Reputation */
.rep {
    display: grid;
    gap: 28px;
    align-items: center;
    max-width: 860px;
    margin: clamp(24px, 4vw, 40px) auto 0;
}

.rep__gauge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
}

.rep__cap { margin: 0; font-size: 0.9rem; color: var(--muted); }

.rep h3 { margin-bottom: 0.7em; }

.rep .chip { height: auto; }

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

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

.pay-hero__grid {
    display: grid;
    gap: 24px;
    align-items: center;
}

.pay-hero__art {
    width: 100%;
    max-width: 300px;
    margin-inline: auto;
}

.pay-hero__art::before {
    background: radial-gradient(circle at 50% 50%, rgba(245, 170, 60, 0.45) 0%, rgba(70, 200, 190, 0.16) 48%, transparent 72%);
}

.pay-hero__text { color: var(--muted); }

.pay-hero .pill-row { margin-top: 22px; }

@media (min-width: 768px) {
    .pay-hero__grid {
        grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
        gap: clamp(24px, 4vw, 56px);
    }
    .pay-hero__art { max-width: 540px; }
}

/* Coin table */
.coin-table {
    --c: 18px;
    max-width: 960px;
    margin: 0 auto;
    padding: 10px clamp(12px, 2vw, 24px);
}

.coin-table .data-table tbody td,
.coin-table .data-table tbody th {
    border-bottom-color: rgba(224, 181, 90, 0.35);
}

.coin-table .data-table tbody tr:last-child td,
.coin-table .data-table tbody tr:last-child th { border-bottom: 0; }

.pay-coin {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.pay-coin .coin { flex: none; }

/* Networks */
.net-wrap {
    max-width: 960px;
    margin-inline: auto;
}

.net-trace {
    display: none;
    width: 100%;
    height: 36px;
    filter: drop-shadow(0 0 3px rgba(224, 181, 90, 0.55));
}

.net-row {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.net-badge {
    --c: 12px;
    --bw: 1.5px;
    --accent: var(--gold);
    --frame-bg: var(--accent);
    padding: 14px 16px 16px;
}

.net-badge strong {
    display: block;
    margin-bottom: 4px;
    font-family: var(--font-head);
    font-size: 1.1rem;
    color: var(--accent);
}

.net-badge span {
    display: block;
    font-size: 0.88rem;
    line-height: 1.45;
    color: var(--muted);
}

.net-badge--eth { --accent: #7d9bff; }
.net-badge--trx { --accent: #ff7a5c; }
.net-badge--sol { --accent: #a58bff; }
.net-badge--bnb { --accent: var(--gold); }

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

.pay-steps { max-width: 1060px; margin-inline: auto; }

/* Buy + swap cards */
.pay-cards {
    display: grid;
    gap: 24px;
    max-width: 920px;
    margin-inline: auto;
}

.pay-card {
    padding: 26px clamp(20px, 3vw, 32px) 30px;
}

.pay-card__icon {
    width: 64px;
    height: 64px;
    margin-bottom: 14px;
    color: var(--gold);
    filter: drop-shadow(0 0 5px rgba(224, 181, 90, 0.5));
}

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

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

/* Withdrawal stat cards */
.stat-grid {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    max-width: 900px;
    display: grid;
    gap: 20px;
    grid-template-columns: minmax(0, 1fr);
}

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

.stat-card {
    --c-tl: 6px;
    --c-tr: 6px;
    --c-bl: 6px;
    --c-br: 26px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 28px 24px 24px;
}

.stat-card__value {
    padding-right: 36px;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.3rem);
    line-height: 1.15;
    color: var(--gold-bright);
    text-shadow: 0 0 14px rgba(224, 181, 90, 0.35);
}

.stat-card__label { color: var(--muted); }

.stat-card__orn {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 36px;
    height: 36px;
    color: var(--gold);
}

/* KYC */
.kyc-panel {
    --c-tl: 6px;
    --c-tr: 6px;
    --c-bl: 6px;
    --c-br: 30px;
    max-width: 860px;
    margin: 0 auto clamp(28px, 4vw, 44px);
    padding: clamp(22px, 3vw, 32px);
}

.kyc-panel h3 { color: var(--gold-bright); }

.kyc-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 14px;
}

.kyc-list li {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    color: var(--muted);
}

.kyc-list svg { margin-top: 0.1em; }

.trig {
    position: relative;
    list-style: none;
    margin: 0 auto;
    padding: 0;
    max-width: 760px;
    display: grid;
    gap: 24px;
}

.trig::before {
    content: "";
    position: absolute;
    left: 11px;
    top: 12px;
    bottom: 12px;
    width: 2px;
    background: linear-gradient(180deg, var(--gold-bright), var(--gold-deep));
    box-shadow: 0 0 8px rgba(224, 181, 90, 0.6);
}

.trig li {
    position: relative;
    display: flex;
    flex-direction: column;
    padding-left: 44px;
    color: var(--muted);
}

.trig strong {
    font-family: var(--font-head);
    color: var(--gold-bright);
}

.trig__node {
    position: absolute;
    left: 0;
    top: 0;
    width: 24px;
    height: 24px;
    border: 2px solid var(--gold);
    border-radius: 50%;
    background: var(--bg);
    box-shadow: 0 0 10px rgba(224, 181, 90, 0.55), inset 0 0 6px rgba(224, 181, 90, 0.25);
}

@media (min-width: 768px) {
    .trig { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
    .trig::before {
        left: 16.6%;
        right: 16.6%;
        top: 11px;
        bottom: auto;
        width: auto;
        height: 2px;
        background: linear-gradient(90deg, var(--gold-bright), var(--gold-deep));
    }
    .trig li { align-items: center; padding: 40px 8px 0; text-align: center; }
    .trig__node { left: 50%; transform: translateX(-50%); }
}

/* Support */
.support-card {
    display: grid;
    gap: 16px;
    align-items: center;
    max-width: 860px;
    margin-inline: auto;
    padding: 24px clamp(22px, 3vw, 36px);
}

.support-card__icons {
    display: flex;
    gap: 14px;
    color: var(--gold);
    filter: drop-shadow(0 0 5px rgba(224, 181, 90, 0.5));
}

.support-card__title { font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.7rem); margin-bottom: 0.3em; }

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

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

.pay-faq .section-more { margin-top: clamp(28px, 4vw, 40px); }

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

/* Atmosphere layer behind all sections */
.faq-atmosphere {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: url("./assets/7e2c5bb69b14a3824984070e58cb0ccb.webp");
    background-size: 100% auto;
    background-repeat: repeat-y;
    background-position: center top;
}

.faq-atmosphere::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(23, 28, 40, 0) 0%, rgba(23, 28, 40, 0.78) 20%, rgba(23, 28, 40, 0.78) 80%, rgba(23, 28, 40, 0) 100%);
}

/* Hero */
.faq-hero__grid {
    display: grid;
    gap: 28px;
    align-items: center;
}

.faq-hero__art {
    width: 100%;
    max-width: 320px;
    margin-inline: auto;
}

.faq-hero__text { color: var(--muted); }

@media (min-width: 768px) {
    .faq-hero__grid {
        grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
        gap: clamp(24px, 4vw, 56px);
    }
    .faq-hero__art { max-width: 480px; }
}

.faq-term {
    --c: 18px;
    --bw: 2px;
    --frame-bg: linear-gradient(145deg, var(--gold-bright) 0%, #56627c 30%, #8e9cb8 62%, var(--gold-deep) 100%);
    --fill:
        linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0, rgba(255, 255, 255, 0) 2px),
        linear-gradient(125deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 32%),
        linear-gradient(180deg, rgba(60, 72, 98, 0.95) 0%, rgba(30, 36, 51, 0.97) 100%);
    margin: 22px 0 6px;
    padding: 14px clamp(18px, 3vw, 26px) 18px;
}

.faq-term__bar { margin: 0 0 12px; }

.faq-term__list { margin: 0; }

.faq-term__list li { color: var(--text); }

/* Group headings */
.faq-group__head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-bottom: 0.4em;
}

.faq-group__head .section-title { margin-bottom: 0; }

/* Accordion look: chamfered steel glass with gold top highlight */
.faq-group .faq-item {
    --c: 14px;
    --bw: 2px;
    --frame-bg: linear-gradient(145deg, #c9a85c 0%, #56627c 30%, #8e9cb8 60%, #a9822f 100%);
    --fill:
        linear-gradient(180deg, rgba(245, 214, 138, 0.85) 0, rgba(245, 214, 138, 0) 2px),
        linear-gradient(125deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0) 30%),
        linear-gradient(180deg, rgba(50, 60, 84, 0.97) 0%, rgba(30, 36, 51, 0.98) 100%);
}

.faq-group .faq-item[open] {
    filter: drop-shadow(0 0 10px rgba(224, 181, 90, 0.3));
}

.faq-item__a p { margin: 0 0 0.9em; }

.faq-item__a ul,
.faq-item__a ol {
    margin: 0 0 1em;
    padding-left: 1.25rem;
    display: grid;
    gap: 6px;
}

.faq-item__a strong { color: var(--text); }

/* Help group: brighter glass with green-cyan edge */
.faq-group--help .faq-item {
    --frame-bg: linear-gradient(145deg, var(--emerald) 0%, #3e5a66 45%, var(--cyan) 100%);
    --fill:
        linear-gradient(180deg, rgba(160, 255, 230, 0.7) 0, rgba(160, 255, 230, 0) 2px),
        linear-gradient(125deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 32%),
        linear-gradient(180deg, rgba(60, 86, 106, 0.98) 0%, rgba(38, 54, 70, 0.98) 100%);
    filter: drop-shadow(0 0 12px rgba(70, 211, 154, 0.3));
}

.faq-group--help .faq-item[open] {
    filter: drop-shadow(0 0 16px rgba(79, 214, 230, 0.4));
}

/* VIP hex chain */
.tier-chain,
.net-chain {
    max-width: 640px;
    margin: 0 auto clamp(24px, 4vw, 36px);
}

.tier-chain svg,
.net-chain svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.tier-chain__h { display: none !important; }
.tier-chain__v { max-width: 320px; margin-inline: auto; }

@media (min-width: 640px) {
    .tier-chain__h { display: block !important; }
    .tier-chain__v { display: none !important; }
}

.tc-line {
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    filter: drop-shadow(0 0 3px rgba(224, 181, 90, 0.55));
}

.vh {
    fill: #242b3c;
    stroke-width: 2.2;
    stroke-linejoin: round;
}

.vh--1 { stroke: #7f8ca6; }
.vh--2 { stroke: #a09a8c; }
.vh--3 { stroke: #bfa86f; filter: drop-shadow(0 0 3px rgba(224, 181, 90, 0.3)); }
.vh--4 { stroke: #d3b062; filter: drop-shadow(0 0 5px rgba(224, 181, 90, 0.5)); }
.vh--5 { stroke: #e5c070; filter: drop-shadow(0 0 7px rgba(224, 181, 90, 0.65)); }
.vh--6 { stroke: #f5d68a; filter: drop-shadow(0 0 10px rgba(245, 214, 138, 0.85)); }

.tc-num text {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 16px;
    fill: var(--text);
    text-anchor: middle;
}

.chain-cap {
    margin-top: 10px;
    text-align: center;
    font-size: 0.9rem;
    color: var(--muted);
}

/* Network coin badges */
.net-chain { max-width: 560px; }

.nc-trace path {
    fill: none;
    stroke: #e0b55a;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.nc-trace { filter: drop-shadow(0 0 3px rgba(224, 181, 90, 0.55)); }

.nc-node circle {
    fill: #1e2433;
    stroke: #f5d68a;
    stroke-width: 1.5;
}

.nc-label text {
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 22px;
    fill: var(--text);
    text-anchor: middle;
}

/* Closing CTA panel */
.faq-cta {
    --c: 24px;
    --bw: 3px;
    max-width: 880px;
    margin-inline: auto;
    padding: clamp(28px, 5vw, 52px) clamp(20px, 6vw, 72px);
    text-align: center;
}

.faq-cta h2 { margin-bottom: 0.5em; }

.faq-cta > p { color: var(--muted); max-width: 620px; margin-inline: auto; }

.faq-cta__row {
    justify-content: center;
    margin-top: 8px;
}

.faq-cta__row .pill {
    filter: drop-shadow(0 10px 16px rgba(224, 181, 90, 0.35));
}

.faq-cta__rg {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: var(--text);
}

.faq-cta__rg .rg-line { color: var(--steel-light); }

.faq-cta__stub {
    display: none;
    position: absolute;
    top: 50%;
    width: 80px;
    height: 40px;
    transform: translateY(-50%);
    filter: drop-shadow(0 0 3px rgba(224, 181, 90, 0.55));
}

.faq-cta__stub--l { left: 0; }
.faq-cta__stub--r { right: 0; }

@media (min-width: 768px) {
    .faq-cta__stub { display: block; }
}

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

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

    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }

    .gauge--animated .gauge__fill {
        animation: none;
        stroke-dashoffset: 0;
    }
}

/* ============================================
   SITEMAP
   ============================================ */

.sm-atmosphere {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: url("./assets/7e2c5bb69b14a3824984070e58cb0ccb.webp");
    background-size: 100% auto;
    background-repeat: repeat-y;
    background-position: center top;
}

.sm-atmosphere::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(23, 28, 40, 0) 0%, rgba(23, 28, 40, 0.82) 20%, rgba(23, 28, 40, 0.82) 80%, rgba(23, 28, 40, 0) 100%);
}

.sm-hero__inner {
    max-width: calc(760px + 2 * var(--gutter));
    text-align: center;
}

.sm-hero h1 { margin-bottom: 0.3em; }

.sm-rule {
    display: block;
    width: min(420px, 80%);
    height: 1px;
    margin: 0 auto 24px;
    background: var(--hairline);
    box-shadow: 0 0 8px rgba(224, 181, 90, 0.5);
}

.sm-hero__text { color: var(--muted); }

.sm-wrap {
    max-width: 1000px;
    margin-inline: auto;
}

.sm-top {
    display: none;
    width: 100%;
    height: auto;
    margin-bottom: -2px;
    filter: drop-shadow(0 0 3px rgba(224, 181, 90, 0.55));
}

.sm-grid {
    position: relative;
    display: grid;
    gap: 24px;
    padding-left: 20px;
}

/* Trunk trace: left side on mobile, gutter on desktop */
.sm-grid::before {
    content: "";
    position: absolute;
    left: 7px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, var(--gold-bright), var(--gold-deep));
    box-shadow: 0 0 8px rgba(224, 181, 90, 0.6);
}

.sm-grid::after {
    content: "";
    position: absolute;
    left: 3px;
    bottom: -4px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--bg);
    border: 2px solid var(--gold-bright);
    box-shadow: 0 0 8px rgba(224, 181, 90, 0.7);
}

.sm-panel {
    --c: 14px;
    --c-br: 30px;
    --bw: 2px;
    --frame-bg: linear-gradient(145deg, rgba(245, 214, 138, 0.95) 0%, #56627c 32%, #8e9cb8 62%, var(--gold-deep) 100%);
    --fill:
        linear-gradient(180deg, rgba(245, 214, 138, 0.7) 0, rgba(245, 214, 138, 0) 2px),
        linear-gradient(125deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0) 32%),
        linear-gradient(180deg, rgba(50, 60, 84, 0.97) 0%, rgba(30, 36, 51, 0.98) 100%);
    padding: 24px clamp(20px, 3vw, 30px) 28px;
}

.sm-node {
    position: absolute;
    top: 32px;
    left: -12px;
    width: 12px;
    height: 12px;
    transform: scaleX(-1);
    overflow: visible;
}

.sm-panel__title {
    margin-bottom: 0.8em;
    color: var(--gold-bright);
}

.sm-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 16px;
}

.sm-links li {
    position: relative;
    padding-left: 22px;
}

.sm-links li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 0.5em;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #f0a93c;
    box-shadow: 0 0 8px rgba(240, 169, 60, 0.8);
}

.sm-links a {
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--text);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.sm-links a:hover,
.sm-links a:focus-visible {
    color: var(--gold-bright);
    border-bottom-color: var(--gold);
}

.sm-links__desc {
    display: block;
    margin-top: 2px;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--muted);
}

.sm-panel__note {
    margin: 18px 0 0;
    padding-top: 14px;
    border-top: 1px solid rgba(224, 181, 90, 0.35);
    font-size: 0.92rem;
    color: var(--muted);
}

@media (min-width: 768px) {
    .sm-top { display: block; }

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

    .sm-grid::before {
        left: calc(50% - 1px);
        top: 0;
    }

    .sm-grid::after {
        left: calc(50% - 5px);
        bottom: -4px;
    }

    .sm-node { left: auto; right: -12px; transform: none; }
    .sm-panel:nth-child(even) .sm-node { left: -12px; right: auto; transform: scaleX(-1); }
}

/* Footer-style note band */
.sm-note {
    position: relative;
    padding-block: clamp(26px, 4vw, 40px);
    background: linear-gradient(180deg, #1a2031 0%, var(--bg-deep) 100%);
}

.sm-note::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    background: var(--hairline);
    box-shadow: 0 0 12px rgba(224, 181, 90, 0.7);
}

.sm-note__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    max-width: calc(860px + 2 * var(--gutter));
    text-align: center;
}

.sm-badge {
    position: relative;
    flex: none;
    display: grid;
    place-items: center;
    width: 60px;
    height: 60px;
    border: 3px solid var(--text);
    border-radius: 50%;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 1.35rem;
    color: var(--text);
}

.sm-badge::after {
    content: "+";
    position: absolute;
    top: -12px;
    right: -10px;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--bg-deep);
    font-size: 1.3rem;
    line-height: 1;
    color: var(--gold-bright);
}

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

.sm-note__copy p {
    margin: 0 0 0.6em;
    color: var(--muted);
}

.sm-note__copy p:last-child { margin-bottom: 0; }

.sm-note__tel {
    color: #fff;
    font-weight: 600;
    white-space: nowrap;
}

@media (min-width: 768px) {
    .sm-note__inner {
        flex-direction: row;
        align-items: center;
        gap: 28px;
        text-align: left;
    }
}