/*
 * Rainbet Casino - shared design system
 * Dark-only crypto-first theme: deep navy, teal / emerald / violet aurora,
 * chamfered glass, hexagon geometry and luminous ribbons.
 */

:root {
    --bg: #0a1230;
    --bg-deep: #060b22;
    --bg-raise: #0f1b44;
    --teal: #2de0c0;
    --emerald: #3ee08a;
    --violet: #8a5cff;
    --cyan: #5ce1ff;
    --magenta: #e05cff;
    --text: #eef4ff;
    --text-soft: #c2cfee;
    --text-muted: #a3b3da;
    --ink: #04122a;
    --line: rgba(92, 225, 255, 0.28);
    --line-strong: rgba(92, 225, 255, 0.62);

    --grad-brand: linear-gradient(90deg, #2de0c0, #3ee08a 55%, #a6f7cf);
    --grad-cta: linear-gradient(90deg, #3ee08a 0%, #2de0c0 45%, #4aa8ff 100%);
    --grad-line: linear-gradient(135deg, rgba(120, 236, 255, 0.9), rgba(45, 224, 192, 0.35) 40%, rgba(62, 224, 138, 0.25) 62%, rgba(138, 92, 255, 0.75));
    --grad-line-bright: linear-gradient(135deg, #a4f3ff, #2de0c0 45%, #3ee08a 70%, #b9a0ff);
    --grad-aurora: linear-gradient(90deg, var(--teal), var(--emerald) 50%, var(--violet));
    --glass-fill: linear-gradient(160deg, rgba(24, 48, 104, 0.8), rgba(10, 20, 54, 0.9));

    --font-head: "Sora", "Segoe UI", system-ui, sans-serif;
    --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

    --container: 1200px;
    --header-h: 68px;
    --header-bottom: 68px;
    --cut: 16px;
    --tip: 24px;
    --hex: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

/* ============================================
   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, dd, dt {
    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 {
    background: var(--bg-deep);
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + 1rem);
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.65;
    color: var(--text);
    background: transparent;
    overflow-x: clip;
    -webkit-font-smoothing: antialiased;
}

/* Shared aurora curtain backdrop behind every page */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background-color: var(--bg);
    background-image: url("./assets/1707bc2bb47ddcd9d965ab6f0c5c4aeb.webp");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    pointer-events: none;
}

body.menu-open {
    overflow: hidden;
}

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

h1 { font-size: clamp(2rem, 1.3rem + 3.4vw, 3.4rem); }
h2 { font-size: clamp(1.55rem, 1.1rem + 2vw, 2.35rem); }
h3 { font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); }
h4 { font-size: 1.0625rem; }

p { margin: 0 0 1em; }

a {
    color: var(--teal);
    text-decoration-thickness: 1px;
}

a:hover { color: #7af0da; }

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

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

main:focus { outline: none; }

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

.mono { font-family: var(--font-mono); font-size: 0.95em; letter-spacing: 0.01em; }

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

.skip-link {
    position: absolute;
    left: 1rem;
    top: -100px;
    z-index: 200;
    padding: 0.75rem 1.25rem;
    background: var(--teal);
    color: var(--ink);
    font-weight: 600;
    border-radius: 8px;
    text-decoration: none;
}

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

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

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

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

.section {
    position: relative;
    padding-block: clamp(3rem, 2rem + 4vw, 5.5rem);
}

.section--tight { padding-block: clamp(2rem, 1.5rem + 2.5vw, 3.5rem); }

.section__head {
    max-width: 780px;
    margin: 0 auto clamp(1.75rem, 3vw, 2.75rem);
    text-align: center;
}

.section__head--left {
    margin-left: 0;
    text-align: left;
}

.section-lead {
    color: var(--text-soft);
    font-size: 1.0625rem;
}

.eyebrow {
    margin: 0 0 0.75rem;
    font-family: var(--font-head);
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--teal);
}

.text-soft { color: var(--text-soft); }

.text-gradient {
    background: var(--grad-brand);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.updated {
    font-size: 0.875rem;
    color: var(--text-muted);
}

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

.grid-2, .grid-3, .grid-4 {
    display: grid;
    gap: 1.25rem;
}

.has-wash { position: relative; isolation: isolate; }

.has-wash::before {
    content: "";
    position: absolute;
    inset: -10% -5%;
    z-index: -1;
    background:
        radial-gradient(ellipse 50% 60% at 30% 50%, rgba(45, 224, 192, 0.12), transparent 70%),
        radial-gradient(ellipse 45% 55% at 75% 50%, rgba(138, 92, 255, 0.12), transparent 70%);
    pointer-events: none;
}

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

@media (min-width: 768px) {
    .container { width: min(100% - 3rem, var(--container)); }
    .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
    .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .split--reverse > :first-child { order: 2; }
    .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ============================================
   SHAPE SYSTEM - clipped gradient line + glass fill
   ============================================ */

.glass,
.chip,
.btn--hex,
.faq-item,
.link-tile,
.hex-badge,
.hex-node,
.stat-chip,
.facts-bar__strip,
.badge-18,
.coin-badge {
    position: relative;
    isolation: isolate;
}

.glass::before,
.chip::before,
.btn--hex::before,
.faq-item::before,
.link-tile::before,
.hex-badge::before,
.hex-node::before,
.stat-chip::before,
.facts-bar__strip::before,
.badge-18::before,
.coin-badge::before,
.glass::after,
.chip::after,
.btn--hex::after,
.faq-item::after,
.link-tile::after,
.hex-badge::after,
.hex-node::after,
.stat-chip::after,
.facts-bar__strip::after,
.badge-18::after,
.coin-badge::after {
    content: "";
    position: absolute;
    z-index: -1;
    clip-path: var(--shape);
    pointer-events: none;
    transition: background 0.3s ease;
}

.glass::before,
.chip::before,
.btn--hex::before,
.faq-item::before,
.link-tile::before,
.hex-badge::before,
.hex-node::before,
.stat-chip::before,
.facts-bar__strip::before,
.badge-18::before,
.coin-badge::before {
    inset: 0;
    background: var(--shape-line, var(--grad-line));
}

.glass::after,
.chip::after,
.btn--hex::after,
.faq-item::after,
.link-tile::after,
.hex-badge::after,
.hex-node::after,
.stat-chip::after,
.facts-bar__strip::after,
.badge-18::after,
.coin-badge::after {
    inset: var(--bw, 1px);
    background: var(--shape-fill, var(--glass-fill));
}

/* Glass panel: chamfered corners */
.glass {
    --shape: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 calc(100% - var(--cut)), 0 var(--cut));
    padding: clamp(1.25rem, 3vw, 2rem);
}

.glass::after,
.facts-bar__strip::after {
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

.glass--glow { box-shadow: 0 0 46px -12px rgba(45, 224, 192, 0.55); }

/* Elongated hexagon: pointed left and right ends */
.glass--hexend {
    --tip: 20px;
    --shape: polygon(var(--tip) 0, calc(100% - var(--tip)) 0, 100% 50%, calc(100% - var(--tip)) 100%, var(--tip) 100%, 0 50%);
    padding-inline: calc(var(--tip) + 1.25rem);
}

/* Chamfered right corners only (card beside hexagon art) */
.glass--right {
    --cut: 36px;
    --shape: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%);
}

@media (min-width: 768px) {
    .glass--hexend { --tip: 32px; }
}

/* Notice panel (hero) */
.notice {
    max-width: 560px;
    margin: 1.75rem auto 0;
    padding: 1.25rem 1.75rem;
    text-align: center;
}

.notice__title {
    margin: 0 0 0.4rem;
    font-family: var(--font-head);
    font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
    font-weight: 700;
    color: var(--text);
}

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

.notice p { color: var(--text-soft); }

/* Callouts with accent bar */
.callout {
    --accent: var(--violet);
    --shape-fill: linear-gradient(90deg, var(--accent) 0 4px, transparent 4px), var(--glass-fill);
    padding: 1.25rem 1.5rem 1.25rem 1.85rem;
}

.callout--teal { --accent: var(--teal); }
.callout--emerald { --accent: var(--emerald); }

.callout--warning {
    --accent: var(--magenta);
    --shape-line: linear-gradient(135deg, #ff8be3, #b05cff 60%, #6d4dff);
    box-shadow: 0 0 40px -14px rgba(224, 92, 255, 0.6);
}

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

/* Two-column compare cards */
.compare {
    display: grid;
    gap: 1rem;
}

.compare__col {
    --accent: var(--teal);
    --cut: 14px;
    --shape-fill: linear-gradient(180deg, var(--accent) 0 3px, transparent 3px), var(--glass-fill);
}

.compare__col--violet { --accent: var(--violet); }

.compare__col h3 { margin-bottom: 0.9rem; }

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

/* Framed media (rectangular images) */
.media-frame {
    --cut: 18px;
    padding: 6px;
    box-shadow: 0 0 50px -16px rgba(45, 224, 192, 0.55);
}

.media-frame img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    object-position: center;
    clip-path: polygon(13px 0, calc(100% - 13px) 0, 100% 13px, 100% calc(100% - 13px), calc(100% - 13px) 100%, 13px 100%, 0 calc(100% - 13px), 0 13px);
}

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

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 44px;
    padding: 0.6rem 1.35rem;
    font-family: var(--font-head);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    color: var(--text);
    background: none;
    border: 0;
    cursor: pointer;
    transition: transform 0.2s ease, filter 0.3s ease, box-shadow 0.3s ease, border-color 0.2s ease, color 0.2s ease;
}

.btn--hex {
    --tip: 20px;
    --shape: polygon(var(--tip) 0, calc(100% - var(--tip)) 0, 100% 50%, calc(100% - var(--tip)) 100%, var(--tip) 100%, 0 50%);
    --shape-line: linear-gradient(90deg, #c6ffe9, #9af4ff 50%, #c5b4ff);
    --bw: 1.5px;
    min-height: 54px;
    padding: 0.95rem 2.8rem;
    font-size: 1.125rem;
    color: var(--ink);
    filter: drop-shadow(0 0 14px rgba(45, 224, 192, 0.5));
}

.btn--hex::after {
    background:
        linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.55) 50%, transparent 70%) -200% 0 / 60% 100% no-repeat,
        var(--grad-cta);
    transition: background-position 0.8s ease;
}

.btn--hex:hover,
.btn--hex:focus-visible {
    color: var(--ink);
    filter: drop-shadow(0 0 24px rgba(45, 224, 192, 0.8));
    transform: translateY(-1px);
}

.btn--hex:hover::after,
.btn--hex:focus-visible::after {
    background-position: 300% 0, 0 0;
}

.btn--hex.btn--sm {
    --tip: 14px;
    min-height: 46px;
    padding: 0.7rem 1.9rem;
    font-size: 1rem;
}

.btn--outline {
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: rgba(10, 18, 48, 0.45);
    padding: 0.55rem 1.3rem;
}

.btn--outline:hover {
    color: var(--text);
    border-color: var(--teal);
    box-shadow: 0 0 16px rgba(45, 224, 192, 0.35);
}

.btn--pill {
    border-radius: 999px;
    padding: 0.55rem 1.4rem;
    color: var(--ink);
    background: linear-gradient(90deg, #3ee08a, #2de0c0 50%, #5ce1ff);
    box-shadow: 0 0 18px rgba(45, 224, 192, 0.45);
}

.btn--pill:hover {
    color: var(--ink);
    box-shadow: 0 0 26px rgba(45, 224, 192, 0.7);
}

.btn--text {
    padding: 0.5rem 0;
    color: var(--teal);
    text-decoration: underline;
    text-underline-offset: 0.2em;
    font-family: var(--font-body);
    font-weight: 600;
}

.btn--text .icon { width: 18px; height: 18px; transition: transform 0.2s ease; }
.btn--text:hover .icon { transform: translateX(3px); }

.cta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.75rem 1.5rem;
    margin-top: 1.75rem;
}

.cta-row--left { justify-content: flex-start; }

.micro-note {
    margin: 1rem 0 0;
    font-size: 0.875rem;
    color: var(--text-soft);
}

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

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

.site-header::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(7, 13, 38, 0.9);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

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

.site-header::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--teal) 15%, var(--emerald) 50%, var(--violet) 85%, transparent);
    box-shadow: 0 0 10px rgba(45, 224, 192, 0.6);
    pointer-events: none;
}

.site-header__aurora {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    height: var(--header-h);
    width: min(100% - 2rem, 1360px);
    margin-inline: auto;
}

.site-brand {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: clamp(1.2rem, 1rem + 1vw, 1.7rem);
    letter-spacing: -0.01em;
    white-space: nowrap;
    text-decoration: none;
}

.site-brand__text {
    color: var(--teal);
    background: var(--grad-brand);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.menu-toggle {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0;
    flex: none;
    border: 1px solid var(--line-strong);
    border-radius: 12px;
    background: rgba(10, 18, 48, 0.6);
    cursor: pointer;
}

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

.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile drawer */
.site-nav {
    position: fixed;
    top: var(--header-bottom);
    left: 0;
    right: 0;
    bottom: 0;
    height: auto;
    z-index: 99;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 1rem 1.25rem 2rem;
    background: var(--bg-deep);
    border-top: 1px solid var(--line);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
}

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

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

.site-nav__list a {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 0.75rem 0.25rem;
    font-family: var(--font-head);
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text);
    text-decoration: none;
    border-bottom: 1px solid rgba(92, 225, 255, 0.14);
}

.site-nav__list a[aria-current="page"] { color: var(--teal); }

.site-nav__actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.site-nav__actions .btn { min-height: 48px; width: 100%; }

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

@media (min-width: 1024px) {
    :root { --header-h: 80px; }

    .menu-toggle { display: none; }

    .site-nav {
        position: static;
        inset: auto;
        z-index: auto;
        padding: 0;
        overflow: visible;
        background: none;
        border: 0;
        visibility: visible;
        opacity: 1;
        transform: none;
        transition: none;
    }

    .site-nav__list {
        display: flex;
        align-items: center;
        gap: clamp(1rem, 2vw, 2.25rem);
    }

    .site-nav__list a {
        position: relative;
        min-height: 44px;
        padding: 0.5rem 0.2rem;
        font-size: 0.9375rem;
        border: 0;
    }

    .site-nav__list a::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 6px;
        height: 2px;
        background: var(--grad-aurora);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.25s ease;
    }

    .site-nav__list a:hover::after,
    .site-nav__list a[aria-current="page"]::after { transform: scaleX(1); }

    .site-nav__actions { display: none; }

    .site-header .header-actions {
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }
}

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

.hero {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    text-align: center;
}

.hero__bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: var(--bg-pos, center);
}

.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(ellipse 60% 45% at 50% 32%, rgba(6, 11, 34, 0.62), transparent 72%),
        linear-gradient(180deg, rgba(10, 18, 48, 0.55) 0%, rgba(10, 18, 48, 0.18) 34%, rgba(10, 18, 48, 0.42) 72%, var(--bg) 100%);
    pointer-events: none;
}

.hero__content {
    max-width: 860px;
    padding-top: calc(var(--header-h) + clamp(2.5rem, 7vw, 5.5rem));
    padding-bottom: clamp(4.5rem, 9vw, 7.5rem);
}

.hero__title {
    text-shadow: 0 2px 24px rgba(4, 10, 30, 0.75);
}

.hero__subtitle {
    max-width: 640px;
    margin: 0 auto;
    font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
    color: var(--text-soft);
    text-shadow: 0 1px 14px rgba(4, 10, 30, 0.8);
}

@media (min-width: 1024px) {
    .hero { min-height: 640px; }
}

/* ============================================
   CHIPS & STAT CHIPS
   ============================================ */

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

.chip {
    --tip: 11px;
    --shape: polygon(var(--tip) 0, calc(100% - var(--tip)) 0, 100% 50%, calc(100% - var(--tip)) 100%, var(--tip) 100%, 0 50%);
    --shape-fill: linear-gradient(rgba(45, 224, 192, 0.16), rgba(45, 224, 192, 0.16)), rgba(9, 18, 48, 0.94);
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0.45rem 1.3rem;
    font-family: var(--font-head);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text);
    text-decoration: none;
}

.chip--link { min-height: 44px; }

.chip--link:hover,
.chip--link:focus-visible {
    color: var(--text);
    --shape-line: var(--grad-line-bright);
}

.stat-chip {
    --tip: 14px;
    --shape: polygon(var(--tip) 0, calc(100% - var(--tip)) 0, 100% 50%, calc(100% - var(--tip)) 100%, var(--tip) 100%, 0 50%);
    --shape-fill: linear-gradient(90deg, rgba(45, 224, 192, 0.18), rgba(138, 92, 255, 0.18)), rgba(9, 18, 48, 0.94);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1.8rem;
    font-family: var(--font-head);
    font-weight: 700;
}

.stat-chip strong { color: var(--teal); }

/* ============================================
   HEX BADGES (icon holders), 18+ BADGE
   ============================================ */

.hex-badge {
    --shape: var(--hex);
    --bw: 1.5px;
    --shape-line: linear-gradient(160deg, var(--cyan), var(--teal) 50%, var(--violet));
    --shape-fill: radial-gradient(circle at 50% 35%, rgba(45, 224, 192, 0.24), rgba(8, 16, 44, 0.96) 72%);
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 48px;
    height: 55px;
}

.hex-badge .icon { width: 24px; height: 24px; }

.hex-badge--sm { width: 40px; height: 46px; }
.hex-badge--sm .icon { width: 20px; height: 20px; }
.hex-badge--lg { width: 64px; height: 74px; }
.hex-badge--lg .icon { width: 30px; height: 30px; }

.coin-glyph {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1;
    color: var(--teal);
}

.badge-18 {
    --shape: var(--hex);
    --bw: 1.5px;
    --shape-line: linear-gradient(160deg, #ff9a9a, #e05cff);
    --shape-fill: #1b1236;
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 46px;
    height: 53px;
    font-family: var(--font-head);
    font-size: 0.875rem;
    font-weight: 700;
    color: #ffffff;
}

/* ============================================
   HEX LIST (bulleted with hexagon marks)
   ============================================ */

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

.hex-list li {
    position: relative;
    padding-left: 2.25rem;
}

.hex-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.15em;
    width: 22px;
    height: 25px;
    clip-path: var(--hex);
    background: linear-gradient(160deg, var(--emerald), var(--teal));
}

.hex-list li::after {
    content: "";
    position: absolute;
    left: 7px;
    top: calc(0.15em + 8px);
    width: 9px;
    height: 5px;
    border-left: 2px solid var(--ink);
    border-bottom: 2px solid var(--ink);
    transform: rotate(-45deg);
}

.hex-list--minus li::before { background: linear-gradient(160deg, #b99bff, var(--violet)); }

.hex-list--minus li::after {
    left: 6px;
    top: calc(0.15em + 11px);
    width: 10px;
    height: 0;
    border-left: 0;
    transform: none;
}

.hex-list--info li::before,
.hex-list--warn li::before { background: linear-gradient(160deg, var(--cyan), var(--violet)); }

.hex-list--info li::after,
.hex-list--warn li::after {
    content: "i";
    left: 0;
    top: 0.15em;
    width: 22px;
    height: 25px;
    border: 0;
    transform: none;
    font-family: var(--font-head);
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 25px;
    text-align: center;
    color: var(--ink);
}

.hex-list--warn li::after { content: "!"; }

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

.table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.glass-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
}

.glass-table th,
.glass-table td {
    padding: 0.85rem 1rem;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid rgba(92, 225, 255, 0.2);
}

.glass-table thead th {
    font-family: var(--font-head);
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--teal);
    border-bottom-color: var(--line-strong);
}

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

.glass-table tbody tr:nth-child(even) { background: rgba(138, 92, 255, 0.09); }

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

/* ============================================
   FACTS BAR
   ============================================ */

.facts-section {
    position: relative;
    z-index: 2;
    margin-top: -2.5rem;
    padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
    overflow: clip;
}

.facts-bar {
    position: relative;
    max-width: 1000px;
    margin-inline: auto;
}

.facts-bar__strip {
    --cut: 14px;
    --shape: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 calc(100% - var(--cut)), 0 var(--cut));
    --shape-line: linear-gradient(90deg, rgba(92, 225, 255, 0.9), rgba(45, 224, 192, 0.5) 50%, rgba(138, 92, 255, 0.8));
    list-style: none;
    margin: 0;
    padding: 0.75rem 1.25rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    box-shadow: 0 0 50px -16px rgba(45, 224, 192, 0.55);
}

.facts-bar__cell {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.85rem 0.25rem;
}

.facts-bar__cell + .facts-bar__cell { border-top: 1px solid rgba(92, 225, 255, 0.2); }

.facts-bar__text {
    margin: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.35;
}

.facts-bar__value {
    font-family: var(--font-head);
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text);
}

.facts-bar__note {
    font-size: 0.875rem;
    color: var(--text-soft);
}

.facts-bar__ribbon,
.facts-bar__spark { display: none; }

@media (min-width: 768px) {
    .facts-bar__strip {
        --tip: 40px;
        --shape: polygon(var(--tip) 0, calc(100% - var(--tip)) 0, 100% 50%, calc(100% - var(--tip)) 100%, var(--tip) 100%, 0 50%);
        grid-template-columns: repeat(3, minmax(0, 1fr));
        padding: 1rem calc(var(--tip) + 0.5rem);
    }

    .facts-bar--4 .facts-bar__strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; }

    .facts-bar__cell { padding: 0.75rem 1rem; }

    .facts-bar__cell + .facts-bar__cell { border-top: 0; }

    .facts-bar--3 .facts-bar__cell + .facts-bar__cell::before {
        content: "";
        position: absolute;
        left: 0;
        top: 15%;
        bottom: 15%;
        width: 1px;
        background: linear-gradient(180deg, transparent, var(--line-strong), transparent);
    }
}

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

    .facts-bar--4 .facts-bar__cell + .facts-bar__cell::before {
        content: "";
        position: absolute;
        left: 0;
        top: 15%;
        bottom: 15%;
        width: 1px;
        background: linear-gradient(180deg, transparent, var(--line-strong), transparent);
    }

    .facts-bar__ribbon {
        display: block;
        position: absolute;
        top: 50%;
        width: 50vw;
        height: 130px;
        z-index: -1;
        pointer-events: none;
    }

    .facts-bar__ribbon--left { right: calc(100% - 4px); transform: translateY(-50%); }
    .facts-bar__ribbon--right { left: calc(100% - 4px); transform: translateY(-50%) scaleX(-1); }

    .facts-bar__spark {
        display: block;
        position: absolute;
        top: 50%;
        width: 34px;
        height: 34px;
        margin-top: -17px;
        border-radius: 50%;
        background: radial-gradient(circle, #ffffff 0 12%, rgba(160, 250, 255, 0.85) 25%, rgba(45, 224, 192, 0.35) 50%, transparent 72%);
        z-index: 1;
        pointer-events: none;
    }

    .facts-bar__spark--left { left: -17px; }
    .facts-bar__spark--right { right: -17px; }
}

/* ============================================
   HEX MEDIA & TILES
   ============================================ */

.hex-media {
    aspect-ratio: 0.866;
    filter: drop-shadow(0 0 14px rgba(45, 224, 192, 0.45));
    transition: filter 0.3s ease;
}

.hex-media__ring,
.hex-media__gap,
.hex-media__line,
.hex-media img {
    height: 100%;
    clip-path: var(--hex);
}

.hex-media__ring {
    padding: 4px;
    background: linear-gradient(160deg, var(--teal), var(--cyan) 45%, var(--violet));
}

.hex-media__gap {
    padding: 3px;
    background: #071031;
}

.hex-media__line {
    position: relative;
    padding: 1.5px;
    background: linear-gradient(160deg, #9af4ff, var(--violet));
}

.hex-media img {
    display: block;
    width: 100%;
    object-fit: cover;
    object-position: center;
}

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

.hex-tile {
    position: relative;
    transition: transform 0.3s ease;
}

.hex-tile:hover { transform: translateY(-4px); }

.hex-tile:hover .hex-media { filter: drop-shadow(0 0 24px rgba(45, 224, 192, 0.8)); }

.hex-tile .hex-media__line::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 56%;
    background: linear-gradient(180deg, transparent, rgba(6, 11, 34, 0.94) 45%);
    pointer-events: none;
}

.hex-tile__label {
    position: absolute;
    left: 10%;
    right: 10%;
    bottom: 18%;
    z-index: 2;
    font-family: var(--font-head);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    color: #ffffff;
}

@media (min-width: 768px) {
    .hex-grid { gap: 1.25rem 1rem; }
    .hex-tile__label { left: 14%; right: 14%; }
}

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

/* ============================================
   ART CARD (hexagon art overlapping glass)
   ============================================ */

.art-card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}

.art-card__art {
    position: relative;
    z-index: 2;
    width: min(220px, 64%);
    margin-inline: auto;
}

.art-card__body {
    margin-top: -6rem;
    padding: 7rem 1.5rem 1.75rem;
}

.art-card__body > :last-child { margin-bottom: 0; }

.art-card__body h2,
.art-card__body h3 { margin-bottom: 0.6rem; }

.art-card__body p { color: var(--text-soft); }

@media (min-width: 768px) {
    .art-card {
        grid-template-columns: minmax(0, 40%) minmax(0, 1fr);
        align-items: center;
        padding-block: 1.75rem;
    }

    .art-card__art {
        grid-column: 1;
        grid-row: 1;
        width: 100%;
        margin: -1.75rem 0;
    }

    .art-card__body {
        grid-column: 1 / -1;
        grid-row: 1;
        align-self: stretch;
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin: 0;
        padding: 1.75rem 2.75rem 1.75rem calc(40% + 1.5rem);
    }

    .art-card__body::before { left: 17%; }
    .art-card__body::after { left: calc(17% + 1px); }
}

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

.faq-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 0.75rem;
    max-width: 880px;
    margin-inline: auto;
}

.faq-item {
    --cut: 12px;
    --shape: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 calc(100% - var(--cut)), 0 var(--cut));
    align-self: start;
    transition: box-shadow 0.3s ease;
}

.faq-item:has(details[open]) {
    --shape-line: var(--grad-line-bright);
    --shape-fill: linear-gradient(160deg, rgba(45, 224, 192, 0.14), rgba(10, 20, 54, 0.92) 60%), rgba(10, 20, 54, 0.92);
    box-shadow: 0 0 34px -12px rgba(45, 224, 192, 0.65);
}

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

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

.faq-item summary:focus-visible {
    outline: 2px solid var(--cyan);
    outline-offset: -3px;
}

.faq-item__q {
    margin: 0;
    font-family: var(--font-head);
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.35;
}

.faq-item__icon {
    flex: none;
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
}

.faq-item__icon svg {
    width: 28px;
    height: 28px;
    fill: none;
    stroke-width: 1.6;
    stroke-linecap: round;
}

.faq-item__hex { stroke: var(--cyan); fill: rgba(45, 224, 192, 0.1); }
.faq-item__h,
.faq-item__v { stroke: var(--teal); stroke-width: 2; }

.faq-item__v {
    transform-box: fill-box;
    transform-origin: center;
    transition: transform 0.25s ease;
}

details[open] .faq-item__v { transform: scaleY(0); }

.faq-item__a {
    padding: 0 1.25rem 1.25rem;
    color: var(--text-soft);
}

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

details[open] .faq-item__a { animation: faq-in 0.25s ease; }

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

.faq-more {
    margin-top: 1.5rem;
    text-align: center;
}

/* ============================================
   HEX STEPS (conduit-linked nodes)
   ============================================ */

.hex-steps {
    --node-w: 64px;
    --node-h: 74px;
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1.5rem;
}

.hex-steps::before,
.hex-steps::after {
    content: "";
    position: absolute;
    left: calc(var(--node-w) / 2 - 1.5px);
    top: calc(var(--node-h) / 2);
    bottom: calc(var(--node-h) / 2);
    width: 3px;
    border-radius: 3px;
    pointer-events: none;
}

.hex-steps::before {
    background: linear-gradient(180deg, var(--teal), var(--emerald) 55%, var(--violet));
    box-shadow: 0 0 12px rgba(45, 224, 192, 0.7);
}

.hex-steps::after {
    background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.95), transparent) 0 -80px / 100% 80px no-repeat;
    animation: pulse-y 3.6s linear infinite;
}

@keyframes pulse-y {
    from { background-position: 0 -80px; }
    to { background-position: 0 calc(100% + 80px); }
}

@keyframes pulse-x {
    from { background-position: -120px 0; }
    to { background-position: calc(100% + 120px) 0; }
}

.hex-step {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: var(--node-w) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.hex-node {
    --shape: var(--hex);
    --bw: 1.5px;
    --shape-line: linear-gradient(160deg, var(--cyan), var(--teal) 50%, var(--violet));
    --shape-fill: radial-gradient(circle at 50% 35%, rgba(45, 224, 192, 0.3), rgba(8, 16, 44, 0.97) 70%);
    display: grid;
    place-items: center;
    width: var(--node-w);
    height: var(--node-h);
    filter: drop-shadow(0 0 12px rgba(45, 224, 192, 0.45));
}

.hex-node__num {
    font-family: var(--font-head);
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1;
    color: var(--teal);
    background: var(--grad-brand);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hex-step__body { padding-top: 0.5rem; }

.hex-step__title {
    margin: 0 0 0.35rem;
    font-size: 1.125rem;
}

.hex-step__text {
    margin: 0;
    color: var(--text-soft);
}

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

    .hex-steps::before,
    .hex-steps::after {
        left: calc(100% / (var(--n, 3) * 2));
        right: calc(100% / (var(--n, 3) * 2));
        top: calc(var(--node-h) / 2 - 1.5px);
        bottom: auto;
        width: auto;
        height: 3px;
    }

    .hex-steps::before {
        background: linear-gradient(90deg, var(--teal), var(--emerald) 55%, var(--violet));
    }

    .hex-steps::after {
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.95), transparent) -120px 0 / 120px 100% no-repeat;
        animation-name: pulse-x;
    }

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

    .hex-step__body { padding-top: 0.25rem; }
}

/* ============================================
   RANK LADDER
   ============================================ */

.rank--bronze { --tier: linear-gradient(150deg, #f6c095, #b8692f 55%, #6a3414); --tier-glow: rgba(200, 120, 60, 0.6); }
.rank--silver { --tier: linear-gradient(150deg, #ffffff, #b3bdcc 55%, #677387); --tier-glow: rgba(200, 210, 230, 0.55); }
.rank--gold { --tier: linear-gradient(150deg, #fff0a8, #e9ac2a 55%, #8c5b0a); --tier-glow: rgba(240, 180, 50, 0.6); }
.rank--platinum { --tier: linear-gradient(150deg, #ffffff, #d5def0 55%, #8c9ab8); --tier-glow: rgba(215, 225, 250, 0.55); }
.rank--diamond { --tier: linear-gradient(150deg, #e4fdff, #5ce1ff 55%, #2770d0); --tier-glow: rgba(92, 225, 255, 0.65); }
.rank--infernal { --tier: linear-gradient(150deg, #ffab6b, #d02a5c 55%, #5a1a90); --tier-glow: rgba(224, 69, 122, 0.6); }
.rank--infernal-diamond { --tier: conic-gradient(from 210deg, #ff5c8a, #ffb15c, #ffe95c, #3ee08a, #2de0c0, #5ca8ff, #8a5cff, #ff5c8a); --tier-glow: rgba(185, 140, 255, 0.7); }

.rank-swatch {
    display: inline-block;
    width: 16px;
    height: 18px;
    margin-right: 0.5rem;
    vertical-align: -3px;
    clip-path: var(--hex);
    background: var(--tier);
}

.rank-gem {
    display: inline-grid;
    filter: drop-shadow(0 0 10px var(--tier-glow, rgba(45, 224, 192, 0.5)));
}

.rank-badge {
    position: relative;
    display: block;
    width: 46px;
    height: 53px;
    clip-path: var(--hex);
    background: var(--tier);
}

.rank-badge::after {
    content: "";
    position: absolute;
    inset: 22%;
    clip-path: var(--hex);
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.05) 60%);
}

.rank-gem:has(.rank--bronze) { --tier-glow: rgba(200, 120, 60, 0.6); }
.rank-gem:has(.rank--silver) { --tier-glow: rgba(200, 210, 230, 0.5); }
.rank-gem:has(.rank--gold) { --tier-glow: rgba(240, 180, 50, 0.6); }
.rank-gem:has(.rank--platinum) { --tier-glow: rgba(215, 225, 250, 0.5); }
.rank-gem:has(.rank--diamond) { --tier-glow: rgba(92, 225, 255, 0.65); }
.rank-gem:has(.rank--infernal) { --tier-glow: rgba(224, 69, 122, 0.6); }
.rank-gem:has(.rank--infernal-diamond) { --tier-glow: rgba(185, 140, 255, 0.75); }

.rank-ladder { position: relative; }

.rank-ladder__list {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
}

.rank-ladder__text {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.rank-ladder__name {
    font-family: var(--font-head);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text);
}

.rank-ladder__note {
    font-size: 0.875rem;
    color: var(--text-soft);
}

/* Flat: 4-col grid on mobile, connected row from tablet */
.rank-ladder--flat .rank-ladder__list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.25rem 0.5rem;
}

.rank-ladder--flat .rank-ladder__item {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    text-align: center;
}

@media (min-width: 768px) {
    .rank-ladder--flat .rank-ladder__list { grid-template-columns: repeat(7, minmax(0, 1fr)); }

    .rank-ladder--flat .rank-ladder__list::before {
        content: "";
        position: absolute;
        left: calc(100% / 14);
        right: calc(100% / 14);
        top: 25px;
        height: 3px;
        border-radius: 3px;
        background: linear-gradient(90deg, #c9783f, #c7d0dd, #f0c04a, #dfe7f7, #5ce1ff, #e0457a, #b98aff);
        box-shadow: 0 0 14px rgba(92, 225, 255, 0.55);
    }
}

/* Ascending: vertical stack on mobile, SVG ladder on desktop */
.rank-ladder__svg { display: none; }

.rank-ladder--ascending .rank-ladder__list {
    display: grid;
    gap: 1rem;
}

.rank-ladder--ascending .rank-ladder__list::before {
    content: "";
    position: absolute;
    left: 22px;
    top: 26px;
    bottom: 26px;
    width: 3px;
    border-radius: 3px;
    background: linear-gradient(180deg, #c9783f, #c7d0dd, #f0c04a, #dfe7f7, #5ce1ff, #e0457a, #b98aff);
    box-shadow: 0 0 14px rgba(92, 225, 255, 0.5);
}

.rank-ladder--ascending .rank-ladder__item {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 1rem;
}

@media (min-width: 768px) {
    .rank-ladder__svg {
        display: block;
        width: 100%;
        height: auto;
        overflow: visible;
    }

    .rank-ladder--ascending .rank-ladder__list {
        grid-template-columns: repeat(7, minmax(0, 1fr));
        gap: 0.5rem;
        margin-top: 0.75rem;
    }

    .rank-ladder--ascending .rank-ladder__list::before,
    .rank-ladder--ascending .rank-gem { display: none; }

    .rank-ladder--ascending .rank-ladder__item {
        justify-content: center;
        text-align: center;
    }
}

/* ============================================
   COIN CLUSTER
   ============================================ */

.coin-cluster {
    position: relative;
    width: 100%;
    max-width: 580px;
    aspect-ratio: 16 / 10;
    margin-inline: auto;
}

.coin-cluster .coin-badge {
    --s: clamp(52px, 8vw, 72px);
    --shape: var(--hex);
    --bw: 1.5px;
    --shape-line: linear-gradient(160deg, #a4f3ff, var(--teal) 45%, var(--violet));
    --shape-fill: radial-gradient(circle at 50% 40%, rgba(45, 224, 192, 0.3), rgba(8, 16, 44, 0.95) 72%);
    position: absolute;
    display: grid;
    place-items: center;
    width: var(--s);
    height: calc(var(--s) * 1.155);
    filter: drop-shadow(0 0 14px rgba(45, 224, 192, 0.45));
}

.coin-cluster .coin-badge--lg { --s: clamp(70px, 11vw, 104px); filter: drop-shadow(0 0 22px rgba(45, 224, 192, 0.6)); }
.coin-cluster .coin-badge--sm { --s: clamp(42px, 6vw, 56px); }

.coin-badge__glyph {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: calc(var(--s) * 0.42);
    line-height: 1;
    color: var(--teal);
    background: linear-gradient(160deg, #e8fffb, var(--teal) 55%, var(--emerald));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.coin-cluster .coin-badge:nth-child(1) { left: 4%; top: 22%; }
.coin-cluster .coin-badge:nth-child(2) { left: 27%; top: 0; }
.coin-cluster .coin-badge:nth-child(3) { left: 55%; top: 12%; }
.coin-cluster .coin-badge:nth-child(4) { left: 82%; top: 2%; }
.coin-cluster .coin-badge:nth-child(5) { left: 14%; top: 58%; }
.coin-cluster .coin-badge:nth-child(6) { left: 42%; top: 50%; }
.coin-cluster .coin-badge:nth-child(7) { left: 74%; top: 56%; }

.coin-cluster .coin-badge--lg { animation: coin-float 6s ease-in-out infinite; }
.coin-cluster .coin-badge--md { animation: coin-float 8s ease-in-out infinite; }
.coin-cluster .coin-badge:nth-child(even) { animation-delay: -3s; }

@keyframes coin-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* ============================================
   AURORA RIBBON (section-wide)
   ============================================ */

.has-ribbon {
    position: relative;
    isolation: isolate;
}

.aurora-ribbon {
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    height: min(100%, 460px);
    transform: translateY(-50%);
    z-index: -1;
    pointer-events: none;
}

/* ============================================
   LINK TILES
   ============================================ */

.link-tiles {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
}

.link-tile {
    --tip: 18px;
    --shape: polygon(var(--tip) 0, calc(100% - var(--tip)) 0, 100% 50%, calc(100% - var(--tip)) 100%, var(--tip) 100%, 0 50%);
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-height: 88px;
    justify-content: center;
    padding: 1.1rem 2.1rem;
    color: var(--text);
    text-decoration: none;
    transition: transform 0.25s ease, box-shadow 0.3s ease;
}

.link-tile:hover,
.link-tile:focus-visible {
    color: var(--text);
    transform: translateY(-3px);
    --shape-line: var(--grad-line-bright);
    box-shadow: 0 0 34px -12px rgba(45, 224, 192, 0.7);
}

.link-tile__title {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--font-head);
    font-weight: 600;
    color: var(--teal);
}

.link-tile__title .icon { width: 18px; height: 18px; flex: none; }

.link-tile__text {
    font-size: 0.9375rem;
    color: var(--text-soft);
}

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

@media (min-width: 1024px) {
    .link-tiles { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
}

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

.site-footer {
    position: relative;
    isolation: isolate;
    overflow: clip;
    margin-top: clamp(2rem, 5vw, 4rem);
    padding: 2.75rem 0 2rem;
    background: linear-gradient(180deg, rgba(14, 36, 78, 0.94), rgba(7, 14, 40, 0.98));
    border-top: 1px solid var(--line);
    color: var(--text-soft);
}

.site-footer::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -1px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--teal) 20%, var(--emerald) 50%, var(--violet) 80%, transparent);
    box-shadow: 0 0 16px rgba(45, 224, 192, 0.6);
}

.site-footer__aurora {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 180px;
    z-index: -1;
    pointer-events: none;
}

.footer-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 1.5rem;
    margin-bottom: 1.75rem;
    border-bottom: 1px solid rgba(92, 225, 255, 0.2);
}

.site-brand--footer { font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.6rem); }

.footer-coins {
    display: flex;
    gap: 0.6rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
}

.footer-heading {
    margin: 0 0 0.75rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
}

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

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

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

.footer-col--trust { display: grid; gap: 0.9rem; align-content: start; }
.footer-col--trust .footer-heading { margin-bottom: 0; }

.footer-card {
    --cut: 12px;
    display: flex;
    gap: 0.9rem;
    align-items: flex-start;
    padding: 1rem 1.1rem;
    font-size: 0.875rem;
    line-height: 1.55;
}

.footer-card p { margin: 0; color: var(--text-soft); }

.footer-bottom {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(92, 225, 255, 0.2);
    font-size: 0.875rem;
}

.footer-bottom p { margin: 0; color: var(--text-soft); }

@media (min-width: 768px) {
    .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .footer-col--trust { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .footer-col--trust .footer-heading { grid-column: 1 / -1; }
}

@media (min-width: 1024px) {
    .footer-grid { grid-template-columns: minmax(0, 1.9fr) repeat(3, minmax(0, 1fr)); gap: 2.5rem; }
    .footer-col--trust { grid-column: auto; grid-template-columns: minmax(0, 1fr); }
}

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

/* Rewards / VIP teaser */
.teaser-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 3rem 1.5rem;
}

.art-card__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.25rem;
    margin-top: 0.5rem;
}

.icon-rows {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    display: grid;
    gap: 0.85rem;
}

.icon-rows li {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 0.75rem;
    align-items: start;
}

.icon-rows .icon { margin-top: 2px; }

.icon-rows strong {
    display: block;
    font-family: var(--font-head);
    font-size: 1rem;
}

.icon-rows span {
    display: block;
    font-size: 0.9375rem;
    color: var(--text-soft);
    line-height: 1.5;
}

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

/* Popular slots vignette */
.slots-section { isolation: isolate; }

.slots-section::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(ellipse 55% 50% at 50% 55%, rgba(6, 11, 34, 0.82), rgba(6, 11, 34, 0.45) 55%, transparent 80%);
    pointer-events: none;
}

@media (max-width: 479px) {
    .hex-tile__label { font-size: 0.75rem; left: 8%; right: 8%; }
}

/* Originals feature panel */
.originals {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
    padding: 0 1.25rem 2rem;
}

.originals__frame {
    position: absolute;
    inset: 7rem 0 0;
    z-index: -1;
    padding: 0;
    --shape-fill:
        linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, 0.07) 47%, transparent 56%),
        radial-gradient(ellipse 45% 80% at 96% 55%, rgba(138, 92, 255, 0.34), transparent 70%),
        radial-gradient(ellipse 35% 60% at 80% 30%, rgba(45, 224, 192, 0.16), transparent 70%),
        var(--glass-fill);
    box-shadow: 0 0 60px -18px rgba(45, 224, 192, 0.55);
}

.originals__art {
    position: relative;
    width: min(300px, 78%);
    margin-inline: auto;
}

.originals__art img {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 0 28px rgba(45, 224, 192, 0.45));
}

.originals__halo {
    position: absolute;
    left: -9%;
    top: -9%;
    width: 118%;
    height: 118%;
    max-width: none;
    pointer-events: none;
}

.originals__body p { color: var(--text-soft); }

.originals__chips { justify-content: flex-start; margin-top: 0.25rem; }

.originals__body .cta-row { margin-top: 1.5rem; }

@media (min-width: 1024px) {
    .originals {
        grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
        align-items: center;
        gap: 2.5rem;
        padding: 0 5rem 0 3.5rem;
    }

    .originals__frame {
        inset: 3.25rem 0;
        --tip: 70px;
        --shape: polygon(var(--tip) 0, calc(100% - var(--tip)) 0, 100% 50%, calc(100% - var(--tip)) 100%, var(--tip) 100%, 0 50%);
    }

    .originals__art { width: 100%; max-width: 400px; }

    .originals__body { padding-block: 4.25rem; }
}

/* Payments teaser */
.payments__text .hex-list { margin-bottom: 0.9rem; }

/* Licence / responsible gambling card */
.trust-card {
    --shape-line: linear-gradient(135deg, rgba(92, 225, 255, 0.85), rgba(92, 225, 255, 0.3) 50%, rgba(45, 224, 192, 0.6));
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1rem 1.25rem;
    align-items: start;
    max-width: 940px;
    margin-inline: auto;
}

.trust-card__badges {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.trust-card__body h2 { font-size: clamp(1.3rem, 1.05rem + 1.2vw, 1.85rem); }

.trust-card__body p { color: var(--text-soft); }

.trust-card__body > :last-child { margin-bottom: 0; }

@media (min-width: 768px) {
    .trust-card { gap: 1.5rem 2rem; padding: 2rem 2.5rem; }
}

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

.media-narrow {
    width: min(300px, 78%);
    margin-inline: auto;
}

.rakeboost__steps { margin-top: clamp(2.25rem, 5vw, 3.5rem); }

.rakeboost__text p,
.rakeback__text p { color: var(--text-soft); }

/* Rakeback definition list */
.def-list {
    display: grid;
    gap: 0;
    margin: 1.25rem 0 0;
}

.def-list > div {
    display: grid;
    gap: 0.15rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid rgba(92, 225, 255, 0.2);
}

.def-list > div:first-child { border-top: 1px solid rgba(92, 225, 255, 0.2); }

.def-list dt {
    font-family: var(--font-head);
    font-weight: 600;
    color: var(--teal);
}

.def-list dd {
    margin: 0;
    color: var(--text-soft);
}

@media (min-width: 600px) {
    .def-list > div { grid-template-columns: 9rem minmax(0, 1fr); gap: 1rem; }
}

/* Rakeback flow visual */
.flow-card {
    margin: 0;
    max-width: 520px;
    justify-self: center;
    width: 100%;
}

.flow-card__svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.flow-card__caption {
    display: grid;
    gap: 0.5rem;
    margin-top: 1rem;
    font-size: 0.9375rem;
    color: var(--text-soft);
}

.flow-card__key {
    position: relative;
    padding-left: 1.5rem;
}

.flow-card__key::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 14px;
    height: 4px;
    border-radius: 4px;
}

.flow-card__key--wager::before { height: 8px; top: 0.4em; background: linear-gradient(90deg, var(--violet), var(--cyan)); }
.flow-card__key--back::before { background: linear-gradient(90deg, var(--emerald), var(--teal)); }

/* Recurring rewards */
.reward-card {
    --cut: 14px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
}

.reward-card h3 { margin: 0.5rem 0 0; }

.reward-card p { margin: 0; color: var(--text-soft); }

.reward-card .reward-card__value {
    margin-top: auto;
    padding-top: 0.75rem;
    font-family: var(--font-head);
    font-size: 0.875rem;
    font-weight: 600;
    color: #cdbcff;
}

.reward-note {
    max-width: 780px;
    margin: 1.75rem auto 0;
    text-align: center;
    color: var(--text-soft);
}

/* Rank ladder panel */
.rank-panel {
    max-width: 1000px;
    margin-inline: auto;
}

.rank-panel .section__head { margin-bottom: 1.5rem; }

.rank-panel .rank-ladder__name { overflow-wrap: anywhere; font-size: 0.875rem; }

/* Raffle art card */
.art-card--raffle {
    max-width: 980px;
    margin-inline: auto;
}

.art-card--raffle .stat-chip {
    align-self: flex-start;
    margin-top: 0.25rem;
}

/* Terms table */
.terms-table {
    max-width: 940px;
    margin-inline: auto;
    padding: clamp(0.75rem, 2vw, 1.25rem);
}

.terms-table .glass-table th,
.terms-table .glass-table td { padding: 0.8rem 0.6rem; }

.terms-table .glass-table td { color: var(--text-soft); }

.warn-row {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
}

.warn-row svg {
    flex: none;
    width: 26px;
    height: 30px;
}

.terms-note {
    max-width: 940px;
    margin: 1.5rem auto 0;
    color: var(--text-soft);
}

@media (min-width: 768px) {
    .terms-table .glass-table th,
    .terms-table .glass-table td { padding: 0.9rem 1rem; }
    .terms-table .glass-table tbody th { width: 34%; }
}

/* Tips panel */
.tips-panel {
    max-width: 940px;
    margin-inline: auto;
    box-shadow: -18px 0 46px -22px rgba(45, 224, 192, 0.65);
}

.tips-panel h2 { font-size: clamp(1.3rem, 1.05rem + 1.2vw, 1.85rem); }

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

.check-list li {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 0.75rem;
    align-items: start;
    color: var(--text-soft);
}

.check-list svg {
    width: 28px;
    height: 32px;
    margin-top: -2px;
}

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

.facts-section.lib-section { margin-top: 0; padding-top: clamp(2.5rem, 2rem + 3vw, 4rem); }

.lib-section .reward-note { margin-top: 1.5rem; }

.slots-copy {
    max-width: 780px;
    margin: 2rem auto 0;
    color: var(--text-soft);
}

.slots-copy__note { margin-bottom: 0; }

.live__text p,
.sport__text p { color: var(--text-soft); }

.live__text .hex-list { margin-bottom: 1.25rem; }

.live__text .hex-list strong { color: var(--text); }

.split > .media-frame { box-shadow: 0 0 50px -16px rgba(45, 224, 192, 0.55); }

.sport-chips { justify-content: flex-start; margin: 1.25rem 0 0.5rem; }

/* Originals row */
.orig-row {
    position: relative;
    isolation: isolate;
}

.orig-conduit {
    display: none;
    position: absolute;
    left: -2rem;
    right: -2rem;
    top: 50%;
    width: calc(100% + 4rem);
    max-width: none;
    height: 20px;
    margin-top: -10px;
    z-index: -1;
    pointer-events: none;
}

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

.orig-card {
    --cut: 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    text-align: center;
}

.orig-card h3 { margin: 0.4rem 0 0; }

.orig-card p {
    margin: 0;
    font-size: 0.9375rem;
    color: var(--text-soft);
}

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

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

@media (min-width: 1024px) {
    .orig-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.9rem; }
    .orig-conduit { display: block; }
}

/* Provably fair diagram */
.pf-diagram {
    position: relative;
    width: 100%;
    max-width: 640px;
    margin: 0 auto clamp(2rem, 4vw, 3rem);
}

.pf-diagram svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.pf-label {
    position: absolute;
    font-family: var(--font-head);
    font-size: clamp(0.6875rem, 0.5rem + 0.6vw, 0.9375rem);
    font-weight: 600;
    line-height: 1.2;
    color: var(--text);
}

.pf-label--l {
    right: 68.5%;
    width: 30%;
    text-align: right;
    transform: translateY(-50%);
}

.pf-label--c {
    text-align: center;
    transform: translate(-50%, -100%);
    color: var(--teal);
}

.pf-label--v { color: #cdbcff; }

.pf-note {
    max-width: 780px;
    margin: clamp(1.75rem, 4vw, 2.5rem) auto 0;
}

/* Honest limits panel */
.limits-panel {
    max-width: 940px;
    margin-inline: auto;
}

.limits-panel h2 { font-size: clamp(1.3rem, 1.05rem + 1.2vw, 1.85rem); }

.limits-panel p { color: var(--text-soft); }

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

.limit-list li {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 0.9rem;
    align-items: center;
    color: var(--text-soft);
}

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

/* Brand timeline */
.timeline-wrap {
    position: relative;
    isolation: isolate;
    padding: 1rem 0;
}

.timeline-wrap::before {
    content: "";
    position: absolute;
    inset: -8% -6%;
    z-index: -1;
    background:
        radial-gradient(ellipse 50% 45% at 20% 30%, rgba(45, 224, 192, 0.2), transparent 70%),
        radial-gradient(ellipse 50% 45% at 30% 75%, rgba(138, 92, 255, 0.22), transparent 70%);
    pointer-events: none;
}

.timeline {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1.75rem;
}

.timeline::before {
    content: "";
    position: absolute;
    left: 23px;
    top: 27px;
    bottom: 27px;
    width: 3px;
    border-radius: 3px;
    background: linear-gradient(180deg, var(--teal), var(--emerald) 55%, var(--violet));
    box-shadow: 0 0 12px rgba(45, 224, 192, 0.7);
}

.timeline__item {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.timeline__node {
    width: 48px;
    height: 55px;
    filter: drop-shadow(0 0 10px rgba(45, 224, 192, 0.5));
}

.timeline__date {
    display: block;
    margin-top: 0.35rem;
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--teal);
}

.timeline__item p {
    margin: 0.15rem 0 0;
    color: var(--text-soft);
}

.story__text p { color: var(--text-soft); }

/* Crypto-first badge row */
.badge-row {
    list-style: none;
    margin: 0 auto 2rem;
    padding: 0;
    max-width: 860px;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
}

.badge-row li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    text-align: center;
}

.badge-row .hex-badge { margin-bottom: 0.4rem; filter: drop-shadow(0 0 14px rgba(45, 224, 192, 0.5)); }

.badge-row strong { font-family: var(--font-head); }

.badge-row li > span:last-child {
    font-size: 0.9375rem;
    color: var(--text-soft);
}

.crypto__copy {
    max-width: 780px;
    margin: 0 auto;
    text-align: center;
    color: var(--text-soft);
}

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

/* Licence fact panel */
.fact-panel {
    max-width: 860px;
    margin-inline: auto;
    padding: clamp(1rem, 2.5vw, 1.75rem);
}

.fact-panel__head {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding-bottom: 0.9rem;
    margin-bottom: 0.25rem;
    border-bottom: 1px solid var(--line-strong);
}

.fact-panel__head h3 { margin: 0; font-size: clamp(1rem, 0.95rem + 0.4vw, 1.25rem); }

.fact-panel .glass-table th,
.fact-panel .glass-table td { padding: 0.8rem 0.5rem; }

.fact-panel .glass-table td { color: var(--text-soft); }

.fact-panel .glass-table tbody th { width: 38%; }

@media (min-width: 768px) {
    .fact-panel .glass-table th,
    .fact-panel .glass-table td { padding: 0.9rem 1rem; }
}

/* Licence meaning */
.compare .hex-list { margin-bottom: 0; }

.compare__col .hex-list li { color: var(--text-soft); }

.legal-note {
    max-width: 860px;
    margin: 1.25rem auto 0;
}

/* Security card extras */
.art-card__body .chip-row {
    justify-content: flex-start;
    margin: 0.25rem 0 1rem;
}

.security__tip { margin-bottom: 0; }

/* Responsible gambling panel */
.rg-panel {
    --shape-line: linear-gradient(135deg, rgba(62, 224, 138, 0.9), rgba(45, 224, 192, 0.4) 50%, rgba(92, 225, 255, 0.7));
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem 1.75rem;
    align-items: start;
    max-width: 980px;
    margin-inline: auto;
    box-shadow: 0 0 56px -14px rgba(62, 224, 138, 0.5);
}

.rg-panel__icon {
    display: inline-grid;
    place-items: center;
    filter: drop-shadow(0 0 14px rgba(62, 224, 138, 0.6));
}

.rg-panel__body h2 { font-size: clamp(1.3rem, 1.05rem + 1.2vw, 1.85rem); }

.rg-panel__body p,
.rg-panel__body .hex-list li { color: var(--text-soft); }

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

@media (min-width: 768px) {
    .rg-panel { grid-template-columns: auto minmax(0, 1fr); padding: 2.25rem 2.75rem; }
}

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

.lvl-panel {
    max-width: 900px;
    margin-inline: auto;
    box-shadow: 0 0 50px -16px rgba(45, 224, 192, 0.5);
}

.lvl-svg {
    display: none;
    width: 100%;
    height: auto;
    margin-bottom: 0.75rem;
    overflow: visible;
}

.lvl-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1.25rem;
    counter-reset: lvl;
}

.lvl-steps li {
    position: relative;
    padding-left: 3rem;
    counter-increment: lvl;
}

.lvl-steps li::before {
    content: counter(lvl);
    position: absolute;
    left: 0;
    top: 0;
    width: 34px;
    height: 39px;
    display: grid;
    place-items: center;
    clip-path: var(--hex);
    background: linear-gradient(160deg, var(--cyan), var(--teal) 50%, var(--violet));
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--ink);
}

.lvl-steps h3 { margin-bottom: 0.25rem; font-size: 1.125rem; }

.lvl-steps p { margin: 0; color: var(--text-soft); }

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

    .lvl-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; text-align: center; }

    .lvl-steps li { padding-left: 0; }

    .lvl-steps li::before { display: none; }
}

.vip-table { margin-top: 2rem; }

.vip-table .glass-table tbody th { white-space: nowrap; }

.vip-table .glass-table td { min-width: 9rem; }

.benefit-grid .reward-card .hex-badge { margin-bottom: 0.25rem; }

.limits-panel .limit-list li { align-items: start; }

.warn-hex { width: 32px; height: 37px; }

.suits .compare__col {
    --shape-line: linear-gradient(135deg, rgba(92, 225, 255, 0.9), rgba(45, 224, 192, 0.7));
}

.suits .compare__col--violet {
    --shape-line: linear-gradient(135deg, #b9a0ff, #8a5cff 60%, #e05cff);
}

.suits .hex-list li { color: var(--text-soft); }

.vip-links { margin-top: 2.25rem; }

/* ============================================
   MOTION SAFETY
   ============================================ */

/* ---------- FAQ PAGE ---------- */

.faq-topics {
    max-width: 840px;
    margin: 1.75rem auto 0;
}

.faq-topics .chip-row { justify-content: center; }

.faq-group .section__head { margin-bottom: clamp(1.25rem, 3vw, 2rem); }

.faq-rank {
    max-width: 760px;
    margin: 0 auto 1.75rem;
}

.faq-rank .rank-ladder__name {
    font-size: 0.8125rem;
    overflow-wrap: anywhere;
}

.licence-ref {
    --shape-line: linear-gradient(135deg, rgba(92, 225, 255, 0.85), rgba(45, 224, 192, 0.5) 50%, rgba(138, 92, 255, 0.7));
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.75rem 1.25rem;
    align-items: center;
    max-width: 880px;
    margin: 1.5rem auto;
    box-shadow: 0 0 46px -16px rgba(45, 224, 192, 0.55);
}

.licence-ref__seal {
    display: grid;
    place-items: center;
    filter: drop-shadow(0 0 12px rgba(45, 224, 192, 0.5));
}

.licence-ref__seal svg { width: 52px; height: auto; }

.licence-ref p { margin: 0; }

.licence-ref__label {
    font-family: var(--font-head);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-soft);
}

.licence-ref__num {
    margin: 0.15rem 0;
    font-size: clamp(1.0625rem, 0.95rem + 0.6vw, 1.375rem);
    font-weight: 700;
    color: var(--teal);
    overflow-wrap: anywhere;
}

.licence-ref__meta {
    font-size: 0.875rem;
    color: var(--text-soft);
}

.faq-legal {
    max-width: 880px;
    margin: 1.5rem auto 0;
}

.faq-legal p { color: var(--text-soft); }

/* Provably fair diagram */
.faq-pf-split { align-items: start; }

.faq-pf {
    position: relative;
    width: 100%;
    max-width: 440px;
    margin: 0 auto;
    aspect-ratio: 3 / 2;
    justify-self: center;
}

.faq-pf svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.faq-pf__label {
    position: absolute;
    font-family: var(--font-head);
    font-size: clamp(0.6875rem, 0.55rem + 0.5vw, 0.875rem);
    font-weight: 600;
    line-height: 1.2;
    color: var(--text);
}

.faq-pf__label--in {
    left: 0;
    width: 23%;
    text-align: right;
    transform: translateY(-50%);
}

.faq-pf__label--hash {
    left: 81%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: clamp(0.8125rem, 0.6rem + 0.8vw, 1.125rem);
    color: var(--teal);
}

.faq-pf__flow {
    stroke-dasharray: 6 16;
    animation: faq-pf-flow 1.8s linear infinite;
}

@keyframes faq-pf-flow {
    to { stroke-dashoffset: -44; }
}

/* Cool-off panel */
.cool-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
    align-items: center;
    max-width: 1040px;
    margin-inline: auto;
    box-shadow: 0 0 60px -16px rgba(45, 224, 192, 0.5);
}

.cool-panel__art {
    position: relative;
    width: min(220px, 62%);
    margin: 0.5rem auto;
}

.cool-panel__hex {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 128%;
    height: auto;
    max-width: none;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.cool-panel__art img {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 0 26px rgba(45, 224, 192, 0.5));
}

.cool-panel .faq-list { max-width: none; }

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

@media (min-width: 768px) {
    .cool-panel {
        grid-template-columns: minmax(0, 0.65fr) minmax(0, 1.45fr);
        gap: 2rem;
        padding: 2rem 2.5rem 2rem 1.5rem;
    }

    .cool-panel__art { width: 88%; }
}

/* Dispute deadlines */
.stat-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

/* Closing card */
.faq-end {
    max-width: 860px;
    margin-inline: auto;
}

.faq-end .hex-list { margin-top: 1rem; }

.faq-end .hex-list li { color: var(--text-soft); }

.faq-end .cta-row { margin-top: 1.25rem; }

/* ---------- BETALINGER PAGE ---------- */

.notice.glass--hexend { padding-inline: calc(var(--tip) + 1.25rem); }

.aurora-ribbon--soft { opacity: 0.45; }

.crypto__text p,
.crypto__text .hex-list li { color: var(--text-soft); }

.crypto__text .hex-list strong { color: var(--text); }

.deposit__note {
    max-width: 780px;
    margin: 0 auto 2.25rem;
}

.payout-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    max-width: 1080px;
    margin-inline: auto;
    padding-top: 0;
}

.payout-panel__art {
    position: relative;
    z-index: 2;
    width: min(240px, 66%);
    margin: -2.5rem auto 0;
}

.payout-panel__art img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 0 28px rgba(45, 224, 192, 0.5));
}

.payout-panel__body p { color: var(--text-soft); }

.payout-panel__body .hex-list li { color: var(--text-soft); }

.payout-panel__body .hex-list strong { color: var(--text); }

.pay-timeline {
    position: relative;
    list-style: none;
    margin: 1.75rem 0 0;
    padding: 0;
    display: grid;
    gap: 1rem;
}

.pay-timeline::before {
    content: "";
    position: absolute;
    left: 21px;
    top: 26px;
    bottom: 26px;
    width: 3px;
    border-radius: 3px;
    background: linear-gradient(180deg, var(--teal), var(--emerald) 40%, var(--cyan) 70%, var(--violet));
    box-shadow: 0 0 12px rgba(45, 224, 192, 0.6);
}

.pay-timeline li {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 0.9rem;
    align-items: center;
}

.pay-timeline__hex {
    width: 44px;
    height: 51px;
    filter: drop-shadow(0 0 8px rgba(45, 224, 192, 0.45));
}

.pay-timeline strong {
    display: block;
    font-family: var(--font-head);
    font-size: 0.9375rem;
}

.pay-timeline__sub {
    display: block;
    font-size: 0.875rem;
    color: var(--text-soft);
}

.pay-brackets {
    display: grid;
    gap: 0.6rem;
    margin-top: 1.25rem;
}

.pay-bracket {
    margin: 0;
    padding: 0.55rem 0.75rem;
    text-align: center;
    font-family: var(--font-head);
    font-size: 0.9375rem;
    font-weight: 600;
    border: 2px solid var(--teal);
    border-top-width: 0;
    border-radius: 0 0 10px 10px;
    color: var(--text);
    background: rgba(45, 224, 192, 0.1);
    box-shadow: 0 8px 24px -14px rgba(45, 224, 192, 0.7);
}

.payout-panel__body .pay-bracket--violet {
    border-color: var(--violet);
    color: var(--text-soft);
    background: rgba(138, 92, 255, 0.1);
    box-shadow: 0 8px 24px -14px rgba(138, 92, 255, 0.7);
}

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

    .pay-timeline::before {
        left: 12.5%;
        right: 12.5%;
        top: 24px;
        bottom: auto;
        width: auto;
        height: 3px;
        background: linear-gradient(90deg, var(--teal), var(--emerald) 35%, var(--cyan) 65%, var(--violet));
    }

    .pay-timeline li {
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;
        text-align: center;
        gap: 0.5rem;
    }

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

@media (min-width: 1024px) {
    .payout-panel {
        grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.5fr);
        gap: 1.5rem;
        align-items: center;
        padding: 2.25rem 2.5rem 2.25rem 0;
    }

    .payout-panel__art {
        width: calc(100% + 1.25rem);
        margin: 0 0 0 -1.25rem;
    }
}

.limits-glow { isolation: isolate; }

.limits-glow::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(ellipse 55% 60% at 50% 55%, rgba(138, 92, 255, 0.22), transparent 72%);
    pointer-events: none;
}

.pay-card-grid {
    max-width: 940px;
    margin-inline: auto;
}

.limits-note {
    max-width: 940px;
    margin: 1.5rem auto 0;
    color: var(--text-soft);
}

.fiat-panel {
    max-width: 900px;
    margin-inline: auto;
}

.fiat-panel p { color: var(--text-soft); }

.fiat-panel > :last-child { margin-bottom: 0; }

.fiat-icons {
    position: relative;
    isolation: isolate;
    list-style: none;
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    max-width: 440px;
    margin: 0 auto 1.5rem;
    padding: 0;
}

.fiat-icons::before {
    content: "";
    position: absolute;
    left: 12%;
    right: 12%;
    top: 36px;
    height: 3px;
    z-index: -1;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--teal), var(--emerald) 50%, var(--violet));
    box-shadow: 0 0 14px rgba(45, 224, 192, 0.7);
}

.fiat-icons li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.875rem;
    color: var(--text-soft);
}

.kyc-panel {
    --shape-line: linear-gradient(135deg, rgba(92, 225, 255, 0.85), rgba(45, 224, 192, 0.5) 50%, rgba(62, 224, 138, 0.7));
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem 2rem;
    align-items: center;
    max-width: 980px;
    margin-inline: auto;
    box-shadow: 0 0 56px -14px rgba(45, 224, 192, 0.5);
}

.kyc-panel__shield {
    display: grid;
    place-items: center;
    filter: drop-shadow(0 0 18px rgba(45, 224, 192, 0.55));
}

.kyc-panel__body h2 { font-size: clamp(1.3rem, 1.05rem + 1.2vw, 1.85rem); }

.kyc-panel__body p,
.kyc-panel__body .hex-list li { color: var(--text-soft); }

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

@media (min-width: 768px) {
    .kyc-panel { grid-template-columns: auto minmax(0, 1fr); padding: 2.25rem 2.75rem; }
}

.net-warning {
    --shape-line: linear-gradient(135deg, #ff8be3, #b05cff 60%, #6d4dff);
    --shape-fill: linear-gradient(100deg, rgba(224, 92, 255, 0.2), rgba(138, 92, 255, 0.12) 55%, transparent), var(--glass-fill);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem 1.5rem;
    align-items: start;
    max-width: 1000px;
    margin-inline: auto;
    box-shadow: 0 0 46px -14px rgba(224, 92, 255, 0.6);
}

.net-warning .hex-badge { --shape-line: linear-gradient(160deg, #ff8be3, #b05cff 60%, #6d4dff); }

.net-warning__body h2 { font-size: clamp(1.3rem, 1.05rem + 1.2vw, 1.85rem); }

.net-warning__body p { color: var(--text-soft); }

.net-warning__body > :last-child { margin-bottom: 0; }

@media (min-width: 768px) {
    .net-warning { grid-template-columns: auto minmax(0, 1fr); padding: 2rem 2.5rem; }
}

.js [data-anim]:not(.is-inview),
.js [data-anim]:not(.is-inview)::before,
.js [data-anim]:not(.is-inview)::after,
.js [data-anim]:not(.is-inview) * {
    animation-play-state: paused !important;
}

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

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

    .hex-steps::after { display: none; }
}