/*
 * Winna Casino - design system
 * Dark-only Web3 look: deep indigo-navy, cyan + violet neon, amber accents.
 */

:root {
    --bg: #15162a;
    --bg-deep: #0f1020;
    --bg-2: #1e1f36;
    --surface: #22243f;
    --surface-2: #2a2c4b;
    --surface-zebra: #262846;
    --border: #383b63;
    --text: #eef0ff;
    --muted: #b3b8db;
    --cyan: #3fe0ff;
    --cyan-deep: #1fb6d9;
    --blue: #2563d9;
    --violet: #8b5cf6;
    --violet-soft: #b79bff;
    --magenta: #e15cf0;
    --teal: #2dd4bf;
    --amber: #f5b83d;
    --silver: #c9d3e6;

    --font-head: "Exo 2", "Segoe UI", system-ui, sans-serif;
    --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

    --container: 1120px;
    --gutter: clamp(1rem, 4vw, 2rem);
    --radius: 14px;
    --radius-sm: 10px;
    --section-space: clamp(3rem, 7vw, 5.5rem);

    --glow-cyan: 0 0 18px rgba(63, 224, 255, .35);
    --glow-violet: 0 0 22px rgba(139, 92, 246, .35);
    --border-grad: linear-gradient(135deg, rgba(139, 92, 246, .85), rgba(63, 224, 255, .85));
    --header-bottom: 64px;
}

/* ============================================
   OVERFLOW PREVENTION - Safety Net
   ============================================ */
*,
*::before,
*::after {
    box-sizing: border-box;
}

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

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

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

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

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

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

details {
    height: fit-content;
}

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

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

section {
    overflow: clip;
}

/* ============================================
   Base & typography
   ============================================ */
html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-bottom) + 12px);
}

body {
    margin: 0;
    min-width: 320px;
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.65;
    color: var(--text);
    background-color: var(--bg);
    background-image:
        radial-gradient(1100px 600px at 88% -5%, rgba(139, 92, 246, .14), transparent 60%),
        radial-gradient(900px 520px at -10% 35%, rgba(63, 224, 255, .06), transparent 60%),
        linear-gradient(rgba(139, 92, 246, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(139, 92, 246, .035) 1px, transparent 1px);
    background-size: auto, auto, 64px 64px, 64px 64px;
    -webkit-font-smoothing: antialiased;
}

body.menu-open {
    overflow: hidden;
}

h1, h2, h3, h4 {
    font-family: var(--font-head);
    font-weight: 700;
    line-height: 1.18;
    color: #fff;
    margin: 0 0 .75rem;
    letter-spacing: .005em;
}

h1 { font-size: clamp(2rem, 1.35rem + 3vw, 3.25rem); }
h2 { font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.4rem); }
h3 { font-size: clamp(1.15rem, 1.05rem + .45vw, 1.35rem); font-weight: 600; }
h4 { font-size: 1.05rem; font-weight: 600; }

p {
    margin: 0 0 1rem;
}

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

a {
    color: var(--cyan);
}

a:hover {
    color: #9cf0ff;
}

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

code, .mono {
    font-family: var(--font-mono);
    font-size: .9em;
    color: #9cf0ff;
}

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

.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: 100;
    padding: .75rem 1rem;
    background: var(--cyan);
    color: var(--bg-deep);
    font-weight: 600;
    border-radius: 8px;
    text-decoration: none;
}

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

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

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

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

.eyebrow {
    display: inline-block;
    margin: 0 0 .75rem;
    font-family: var(--font-head);
    font-size: .875rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--cyan);
}

.section-head {
    max-width: 720px;
    margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.section-head--center {
    margin-inline: auto;
    text-align: center;
}

.section-head__intro {
    color: var(--muted);
    font-size: 1.0625rem;
    margin: 0;
}

.prose {
    max-width: 72ch;
}

.prose p,
.prose li {
    color: var(--muted);
}

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

.prose h3 {
    margin-top: 1.75rem;
}

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

.label-note {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: .875rem;
    color: var(--amber);
}

/* Layout helpers */
.grid {
    display: grid;
    gap: clamp(1rem, 2vw, 1.5rem);
    grid-template-columns: minmax(0, 1fr);
}

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

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

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

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

.card {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: clamp(1.25rem, 2.5vw, 1.75rem);
}

.card--glow {
    border: 1px solid transparent;
    background:
        linear-gradient(var(--surface), var(--surface)) padding-box,
        var(--border-grad) border-box;
}

/* ============================================
   Buttons
   ============================================ */
.btn {
    --cut: 18px;
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 48px;
    padding: .75rem 2.4rem;
    font-family: var(--font-head);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: .04em;
    color: #fff;
    text-align: center;
    text-decoration: none;
    background: none;
    border: 0;
    cursor: pointer;
    filter: drop-shadow(0 0 8px rgba(63, 224, 255, .45));
    transition: filter .2s ease, transform .2s ease, color .2s ease;
}

.btn::before,
.btn::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    clip-path: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% 50%, calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 50%);
}

.btn::before {
    background: linear-gradient(90deg, var(--cyan), #8fb4ff 50%, var(--cyan));
}

.btn::after {
    inset: 2px;
    clip-path: polygon(calc(var(--cut) - 1px) 0, calc(100% - var(--cut) + 1px) 0, 100% 50%, calc(100% - var(--cut) + 1px) 100%, calc(var(--cut) - 1px) 100%, 0 50%);
}

.btn--primary::after {
    padding: 2px;
    background:
        linear-gradient(180deg, #2a6ae0 0%, #1f4fc8 55%, #3a2fb4 100%) content-box,
        #0f1430;
}

.btn--primary:hover,
.btn--primary:focus-visible {
    color: #fff;
    filter: drop-shadow(0 0 14px rgba(63, 224, 255, .7));
}

.btn--outline {
    color: var(--cyan);
    filter: drop-shadow(0 0 6px rgba(63, 224, 255, .3));
}

.btn--outline::before {
    background: linear-gradient(90deg, var(--cyan), var(--violet));
}

.btn--outline::after {
    inset: 1.5px;
    background: #17182f;
}

.btn--outline:hover,
.btn--outline:focus-visible {
    color: #fff;
    filter: drop-shadow(0 0 12px rgba(63, 224, 255, .6));
}

.btn--lg {
    --cut: 22px;
    min-height: 56px;
    padding: .9rem 3rem;
    font-size: 1.0625rem;
}

.btn--sm {
    --cut: 14px;
    min-height: 44px;
    padding: .55rem 1.6rem;
    font-size: .95rem;
}

.btn--pill {
    --cut: 12px;
    min-height: 44px;
    padding: .5rem 1.4rem;
    font-size: .9rem;
}

.btn:focus-visible {
    outline: none;
}

.btn:focus-visible::before {
    background: #fff;
}

.text-link {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    min-height: 44px;
    font-weight: 600;
    color: var(--cyan);
    text-decoration: underline;
    text-decoration-color: rgba(63, 224, 255, .45);
    text-underline-offset: .25em;
}

.text-link svg {
    transition: transform .2s ease;
}

.text-link:hover svg {
    transform: translateX(3px);
}

/* ============================================
   Header
   ============================================ */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: #1a1b31;
    border-bottom: 1px solid rgba(139, 92, 246, .22);
    box-shadow: 0 8px 28px rgba(5, 6, 20, .35);
}

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

.site-brand {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    min-height: 44px;
    color: #fff;
    text-decoration: none;
    flex: none;
}

.site-brand__mark {
    width: 38px;
    height: 38px;
    filter: drop-shadow(0 0 6px rgba(63, 224, 255, .45));
}

.site-brand__text {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.site-brand__name {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 1.25rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.site-brand__sub {
    font-family: var(--font-head);
    font-weight: 600;
    font-size: .75rem;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--cyan);
    margin-top: .2rem;
}

.menu-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(63, 224, 255, .4);
    border-radius: 10px;
    cursor: pointer;
}

.menu-toggle__bar {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--cyan);
    border-radius: 2px;
    transition: transform .25s ease, opacity .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); }

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

/* Mobile drawer */
@media (max-width: 1023.98px) {
    .site-nav {
        position: fixed;
        top: var(--header-bottom);
        bottom: 0;
        left: 0;
        right: 0;
        height: auto;
        z-index: 49;
        display: none;
        flex-direction: column;
        gap: 1.5rem;
        padding: 1rem var(--gutter) 2rem;
        background: var(--bg-deep);
        border-top: 1px solid rgba(139, 92, 246, .22);
        overflow-y: auto;
        overscroll-behavior: contain;
    }

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

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

    .site-nav__link {
        display: flex;
        align-items: center;
        min-height: 52px;
        padding: .25rem .25rem;
        font-family: var(--font-head);
        font-size: 1.125rem;
        font-weight: 600;
        color: var(--text);
        text-decoration: none;
        border-bottom: 1px solid rgba(139, 92, 246, .2);
    }

    .site-nav__link[aria-current="page"] {
        color: var(--cyan);
        box-shadow: inset 3px 0 0 var(--cyan);
        padding-left: .9rem;
    }

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

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

    .menu-toggle {
        display: none;
    }

    .site-nav {
        flex: 1;
        display: flex;
        justify-content: center;
    }

    .site-nav__list {
        display: flex;
        align-items: center;
        gap: clamp(1.25rem, 2.4vw, 2.25rem);
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .site-nav__link {
        position: relative;
        display: inline-flex;
        align-items: center;
        min-height: 48px;
        font-family: var(--font-head);
        font-weight: 600;
        font-size: 1rem;
        color: #cfd3f2;
        text-decoration: none;
        transition: color .2s ease;
    }

    .site-nav__link::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 4px;
        height: 3px;
        border-radius: 2px;
        background: var(--cyan);
        box-shadow: 0 0 10px rgba(63, 224, 255, .8);
        transform: scaleX(0);
        transition: transform .2s ease;
    }

    .site-nav__link:hover {
        color: #fff;
    }

    .site-nav__link[aria-current="page"] {
        color: #fff;
    }

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

    .site-nav__actions {
        display: none;
    }

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

    .header-login {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        font-family: var(--font-head);
        font-weight: 600;
        color: #fff;
        text-decoration: none;
    }

    .header-login:hover {
        color: var(--cyan);
    }

    .header-divider {
        width: 1px;
        height: 22px;
        background: rgba(201, 211, 230, .45);
    }
}

/* ============================================
   Hero
   ============================================ */
.hero {
    position: relative;
    isolation: isolate;
    overflow: clip;
}

.hero__bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 72% top;
}

.hero__title {
    margin-bottom: 1rem;
}

.hero__text {
    font-size: clamp(1.0625rem, 1rem + .3vw, 1.2rem);
    color: #d3d7f3;
    max-width: 560px;
    margin-bottom: 1.75rem;
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.5rem;
    margin-bottom: 1.25rem;
}

/* Scene hero (full-bleed raster) */
.hero--scene::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(21, 22, 42, 0) 0%, rgba(21, 22, 42, .25) 28%, rgba(21, 22, 42, .92) 52%, var(--bg) 66%);
}

.hero--scene .hero__inner {
    padding-top: clamp(220px, 60vw, 420px);
    padding-bottom: clamp(2.5rem, 6vw, 4rem);
}

@media (min-width: 768px) {
    .hero--scene .hero__inner {
        padding-top: clamp(300px, 46vw, 440px);
    }
}

@media (min-width: 1024px) {
    .hero__bg {
        background-position: var(--hero-pos, 70% center);
    }

    .hero--scene::before {
        background:
            linear-gradient(90deg, rgba(21, 22, 42, .94) 0%, rgba(21, 22, 42, .78) 28%, rgba(21, 22, 42, .2) 52%, rgba(21, 22, 42, 0) 68%),
            linear-gradient(180deg, rgba(21, 22, 42, .35) 0%, rgba(21, 22, 42, 0) 18%, rgba(21, 22, 42, 0) 72%, var(--bg) 100%);
    }

    .hero--scene .hero__inner {
        display: flex;
        align-items: center;
        min-height: clamp(560px, 46vw, 720px);
        padding-block: 5rem 6rem;
    }

    .hero--scene .hero__copy {
        max-width: min(46%, 560px);
    }
}

/* Split hero (transparent integrated artwork) */
.hero--split .hero__inner,
.hero--compact .hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    padding-block: 1.5rem clamp(2.5rem, 6vw, 4rem);
}

.hero__art {
    position: relative;
    order: -1;
    height: clamp(220px, 64vw, 400px);
}

.hero__art::before {
    content: "";
    position: absolute;
    inset: 8% 10%;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(139, 92, 246, .45), rgba(63, 224, 255, .14) 55%, transparent 100%);
    filter: blur(10px);
}

.hero__art-layer {
    position: absolute;
    inset: 0;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 62%, transparent 100%);
    mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 62%, transparent 100%);
}

.hero--compact .hero__art {
    height: clamp(180px, 50vw, 300px);
}

@media (min-width: 1024px) {
    .hero--split .hero__inner,
    .hero--compact .hero__inner {
        grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
        align-items: center;
        gap: 2rem;
        min-height: 560px;
        padding-block: 3rem 4rem;
    }

    .hero--compact .hero__inner {
        min-height: 420px;
    }

    .hero__art {
        order: 0;
        align-self: stretch;
        height: auto;
        min-height: 440px;
    }

    .hero--compact .hero__art {
        min-height: 340px;
    }
}

.chip-18 {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
    padding: .35rem .85rem;
    font-size: .875rem;
    font-weight: 500;
    color: var(--text);
    background: rgba(30, 31, 54, .9);
    border: 1px solid rgba(201, 211, 230, .35);
    border-radius: 999px;
}

.chip-18__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--amber);
}

/* Breadcrumbs */
.breadcrumbs__list {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem .5rem;
    list-style: none;
    padding-block: .75rem;
    margin-block: 0;
    font-size: .875rem;
    color: var(--muted);
}

.breadcrumbs__item + .breadcrumbs__item::before {
    content: "›";
    margin-right: .5rem;
    color: var(--violet-soft);
}

.breadcrumbs a {
    color: var(--muted);
    text-decoration: underline;
    text-underline-offset: .2em;
}

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

/* ============================================
   Hex icons
   ============================================ */
.hex-icon {
    --tone: var(--cyan);
    display: inline-flex;
    flex: none;
    color: var(--tone);
    filter: drop-shadow(0 0 8px color-mix(in srgb, var(--tone) 55%, transparent));
}

.hex-icon--violet { --tone: var(--violet-soft); }
.hex-icon--amber { --tone: var(--amber); }
.hex-icon--teal { --tone: var(--teal); }
.hex-icon--magenta { --tone: var(--magenta); }

.hex-icon__fill {
    fill: #191a33;
}

.hex-icon__ring {
    fill: none;
    stroke: var(--tone);
    stroke-width: 2.4;
    stroke-linejoin: round;
}

.hex-icon__inner {
    fill: none;
    stroke: var(--tone);
    stroke-width: 1;
    stroke-opacity: .4;
    stroke-linejoin: round;
}

.icon {
    flex: none;
    color: var(--cyan);
}

/* ============================================
   Game cards (Winna Originals)
   ============================================ */
.game-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.game-grid--detailed {
    grid-template-columns: minmax(0, 1fr);
}

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

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

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

@media (min-width: 1024px) and (max-width: 1199.98px) {
    .game-grid--detailed { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1200px) {
    .game-grid--detailed { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

.game-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .6rem;
    padding: 1.4rem 1rem 1.25rem;
    text-align: center;
    border: 1px solid transparent;
    border-radius: 12px;
    background:
        linear-gradient(180deg, #252846, #1d1f38) padding-box,
        var(--border-grad) border-box;
    box-shadow: inset 0 0 24px rgba(139, 92, 246, .12);
    transition: box-shadow .25s ease, transform .25s ease;
}

.game-card:hover {
    box-shadow: inset 0 0 24px rgba(139, 92, 246, .18), 0 0 22px rgba(63, 224, 255, .22);
}

.game-card__name {
    margin: .25rem 0 0;
    font-size: 1.25rem;
    font-weight: 700;
}

.game-card__text {
    margin: 0;
    font-size: .95rem;
    color: var(--muted);
}

.game-card__cta {
    margin-top: auto;
    padding-top: .5rem;
}

/* ============================================
   Slot cards
   ============================================ */
.slot-card {
    display: flex;
    flex-direction: column;
    padding: .55rem .55rem .9rem;
    border: 1px solid transparent;
    border-radius: 10px;
    background:
        linear-gradient(180deg, #262946, #1e2039) padding-box,
        var(--border-grad) border-box;
    box-shadow: inset 0 0 18px rgba(63, 224, 255, .08);
    transition: box-shadow .25s ease;
}

.slot-card:hover {
    box-shadow: inset 0 0 18px rgba(63, 224, 255, .12), 0 0 20px rgba(63, 224, 255, .35);
}

.slot-card__frame {
    overflow: hidden;
    border-radius: 7px;
    border: 1px solid rgba(201, 211, 230, .12);
    aspect-ratio: 640 / 420;
    background: #14152a;
}

.slot-card__frame img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.slot-card__title {
    margin: .75rem .35rem .2rem;
    font-size: 1.0625rem;
}

.slot-card__caption {
    margin: 0 .35rem;
    font-size: .875rem;
    color: var(--muted);
    line-height: 1.5;
}

/* ============================================
   Community cards (Races / Chat Rain)
   ============================================ */
.community-card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: linear-gradient(135deg, #25284a 0%, #1e2039 100%);
}

.community-card__body {
    position: relative;
    z-index: 1;
    padding: 1.5rem 1.5rem .5rem;
}

.community-card__title {
    font-size: 1.5rem;
    margin-bottom: .5rem;
}

.community-card__text {
    color: var(--muted);
    margin-bottom: .5rem;
}

.community-card__art {
    position: relative;
    height: 190px;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 30%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 30%);
}

.community-card__art img,
.community-card__art svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
}

.community-card--chat {
    padding-bottom: 4.5rem;
}

.chat-bar {
    position: absolute;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.chat-bar__input {
    flex: 1;
    min-width: 0;
    padding: .65rem .9rem;
    font-size: .875rem;
    color: var(--muted);
    background: #15162b;
    border: 1px solid var(--border);
    border-radius: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-bar__send {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    flex: none;
    border-radius: 8px;
    background: #1c2a48;
    border: 1px solid rgba(63, 224, 255, .5);
    box-shadow: 0 0 10px rgba(63, 224, 255, .3);
}

@media (min-width: 768px) {
    .community-card {
        min-height: 230px;
    }

    .community-card__body {
        max-width: 56%;
        padding: 1.5rem;
    }

    .community-card__art {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 50%;
        height: auto;
        -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 35%);
        mask-image: linear-gradient(90deg, transparent 0%, #000 35%);
    }

    .community-card__art img,
    .community-card__art svg {
        object-position: right bottom;
    }

    .chat-bar {
        right: 1.25rem;
        left: 1.25rem;
    }
}

/* ============================================
   Coin strip
   ============================================ */
.coin-strip {
    position: relative;
    padding-block: 1.5rem;
}

.coin-strip__circuit {
    position: absolute;
    top: 50%;
    width: min(30%, 420px);
    height: auto;
    display: none;
    pointer-events: none;
    transform: translateY(-50%);
}

.coin-strip__circuit--left {
    left: 0;
}

.coin-strip__circuit--right {
    right: 0;
    transform: translateY(-50%) scaleX(-1);
}

.coin-strip__band {
    position: relative;
    z-index: 1;
    max-width: 980px;
    margin-inline: auto;
    padding: 1.5rem var(--gutter);
    background: linear-gradient(90deg, rgba(21, 22, 42, 0), rgba(30, 31, 54, .92) 12%, rgba(30, 31, 54, .92) 88%, rgba(21, 22, 42, 0));
}

.coin-strip__band::before,
.coin-strip__band::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--cyan) 20%, var(--cyan) 80%, transparent);
    box-shadow: 0 0 12px rgba(63, 224, 255, .7);
}

.coin-strip__band::before { top: 0; }
.coin-strip__band::after { bottom: 0; }

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

.coin {
    display: flex;
    align-items: center;
    gap: .7rem;
}

.coin__badge {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    flex: none;
    border-radius: 50%;
    font-family: var(--font-head);
    box-shadow: inset 0 -3px 6px rgba(0, 0, 0, .25), 0 0 14px var(--coin-glow, rgba(63, 224, 255, .3));
}

.coin__badge svg {
    width: 48px;
    height: 48px;
}

.coin--btc .coin__badge { --coin-glow: rgba(247, 147, 26, .45); background: radial-gradient(circle at 35% 30%, #ffc56e, #f7931a 55%, #a85a00); }
.coin--eth .coin__badge { --coin-glow: rgba(110, 120, 255, .45); background: radial-gradient(circle at 35% 30%, #a9b4ff, #627eea 55%, #3b3fa8); }
.coin--ltc .coin__badge { --coin-glow: rgba(201, 211, 230, .4); background: radial-gradient(circle at 35% 30%, #ffffff, #c9cfdb 55%, #7d8597); }
.coin--usdt .coin__badge { --coin-glow: rgba(38, 161, 123, .45); background: radial-gradient(circle at 35% 30%, #6ee0b6, #26a17b 55%, #12684d); }
.coin--trx .coin__badge { --coin-glow: rgba(235, 0, 41, .4); background: radial-gradient(circle at 35% 30%, #ff7a8c, #e5132e 55%, #8f0016); }

.coin__meta {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.coin__ticker {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 1.25rem;
    color: #fff;
}

.coin__name {
    font-size: .875rem;
    color: var(--muted);
}

.coin-strip--compact {
    padding-block: .5rem;
}

.coin-strip--compact .coin-strip__band {
    padding-block: 1rem;
}

.coin-strip--compact .coin__badge,
.coin-strip--compact .coin__badge svg {
    width: 40px;
    height: 40px;
}

.coin-strip--compact .coin__ticker {
    font-size: 1.0625rem;
}

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

@media (min-width: 900px) {
    .coin-strip__list {
        display: flex;
        justify-content: space-between;
        gap: 0;
    }

    .coin {
        flex: 1;
        justify-content: center;
        padding-inline: .75rem;
    }

    .coin + .coin {
        border-left: 1px solid rgba(201, 211, 230, .25);
    }
}

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

/* ============================================
   VIP tier track
   ============================================ */
.tier-track {
    --node: 44px;
    --gem: 40px;
    margin: 2rem 0 0;
}

.tier-track__stage {
    position: relative;
}

.tier-track__rail {
    position: absolute;
    top: 6px;
    bottom: 6px;
    left: calc(var(--node) / 2 - 8px);
    width: 16px;
    background: var(--violet);
    clip-path: polygon(50% 0, 100% 10px, 100% calc(100% - 10px), 50% 100%, 0 calc(100% - 10px), 0 10px);
    filter: drop-shadow(0 0 6px rgba(139, 92, 246, .6));
}

.tier-track__rail::before {
    content: "";
    position: absolute;
    inset: 2px;
    background: #12132a;
    clip-path: inherit;
}

.tier-track__fill {
    position: absolute;
    top: 3px;
    left: 3px;
    right: 3px;
    height: calc(var(--fill) - 6px);
    background: linear-gradient(180deg, var(--cyan), #6c8dff 60%, var(--violet));
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), 50% 100%, 0 calc(100% - 8px));
    box-shadow: 0 0 16px rgba(63, 224, 255, .7);
}

.tier-track__list {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 1.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.tier-track__item {
    --tone: var(--violet-soft);
    display: grid;
    grid-template-columns: var(--node) var(--gem) minmax(0, 1fr);
    align-items: center;
    gap: .85rem;
}

.tier-track__item--cyan { --tone: var(--cyan); }
.tier-track__item--violet { --tone: var(--violet-soft); }
.tier-track__item--amber { --tone: var(--amber); }
.tier-track__item--silver { --tone: var(--silver); }

.tier-track__node {
    grid-column: 1;
    grid-row: 1;
    width: var(--node);
    height: var(--node);
}

.tier-track__node path {
    fill: #1a1b33;
    stroke: var(--tone);
    stroke-width: 2;
    stroke-linejoin: round;
}

.tier-track__node .tier-track__node-core {
    fill: none;
    stroke-width: 1.4;
}

.tier-track__item:not(.is-lit) .tier-track__node {
    opacity: .85;
}

.tier-track__item.is-lit .tier-track__node {
    filter: drop-shadow(0 0 8px var(--tone));
}

.tier-track__gem {
    grid-column: 2;
    grid-row: 1;
    width: var(--gem);
    height: var(--gem);
    filter: drop-shadow(0 0 6px var(--tone));
}

.tier-track__label {
    grid-column: 3;
    grid-row: 1;
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 1.0625rem;
    color: #fff;
}

.tier-track__caption {
    margin-top: 1.25rem;
    font-size: .875rem;
    color: var(--muted);
    text-align: center;
}

@media (min-width: 768px) {
    .tier-track__rail {
        top: calc(var(--gem) + .6rem + var(--node) / 2 - 9px);
        bottom: auto;
        left: 0;
        right: 0;
        width: auto;
        height: 18px;
        clip-path: polygon(0 50%, 14px 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 14px 100%);
    }

    .tier-track__fill {
        top: 3px;
        bottom: 3px;
        left: 6px;
        right: auto;
        height: auto;
        width: calc(var(--fill) - 6px);
        background: linear-gradient(90deg, var(--cyan), #6c8dff 60%, var(--violet));
        clip-path: polygon(0 50%, 10px 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 10px 100%);
    }

    .tier-track__list {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 1rem;
    }

    .tier-track__item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: .6rem;
        text-align: center;
    }

    .tier-track__gem { order: 1; }
    .tier-track__node { order: 2; }
    .tier-track__label { order: 3; }
}

.tier-track--compact {
    --node: 34px;
    --gem: 30px;
    margin-top: 1.25rem;
}

.tier-track--compact .tier-track__label {
    font-size: .95rem;
}

/* ============================================
   18+ badge, responsible gambling panels
   ============================================ */
.badge-18 {
    flex: none;
    color: var(--text);
    font-family: var(--font-head);
}

.rg-panel {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.rg-panel__body {
    flex: 1;
    min-width: 0;
    padding: 1rem 1.2rem;
    background: var(--surface);
    border: 1px solid rgba(63, 224, 255, .28);
    border-radius: 14px;
}

.rg-panel__title {
    margin: 0 0 .25rem;
    font-family: var(--font-head);
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #fff;
}

.rg-panel__text {
    margin: 0;
    font-size: .9375rem;
    color: var(--muted);
    line-height: 1.55;
}

.info-panel {
    --tone: var(--amber);
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem 1.35rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--tone);
    border-radius: 12px;
}

.info-panel--cyan {
    --tone: var(--cyan);
    background: #252848;
}

.info-panel__icon {
    flex: none;
}

.info-panel__title {
    margin: 0 0 .35rem;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 1.0625rem;
    color: #fff;
}

.info-panel__body {
    min-width: 0;
}

.info-panel__body p {
    color: var(--muted);
}

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

/* ============================================
   Accordion (details/summary)
   ============================================ */
.accordion {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    border-top: 1px solid rgba(63, 224, 255, .22);
}

.accordion__label {
    margin: 0 0 .5rem;
    font-family: var(--font-head);
    font-size: .875rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--violet-soft);
}

.faq-item {
    border-bottom: 1px solid rgba(63, 224, 255, .22);
}

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

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

.faq-item__summary:hover .faq-item__q {
    color: var(--cyan);
}

.faq-item__q {
    margin: 0;
    font-family: var(--font-body);
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.4;
    color: #fff;
    transition: color .2s ease;
}

.faq-item__chev {
    display: inline-flex;
    flex: none;
    color: var(--cyan);
    transition: transform .25s ease;
}

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

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

.faq-item__a p,
.faq-item__a li {
    color: var(--muted);
}

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

/* ============================================
   Step lists with conduit
   ============================================ */
.step-list {
    --tone: var(--cyan);
    position: relative;
    display: grid;
    gap: 1rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.step-list--violet {
    --tone: var(--violet-soft);
}

.step-list::before {
    content: "";
    position: absolute;
    left: 21px;
    top: 23px;
    bottom: 23px;
    width: 4px;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--tone) 0%, var(--tone) 75%, transparent 100%);
    box-shadow: 0 0 14px var(--tone), 0 0 4px var(--tone);
}

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

.step__marker {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
}

.step__marker svg {
    position: absolute;
    inset: 0;
    width: 46px;
    height: 46px;
    filter: drop-shadow(0 0 6px var(--tone));
}

.step__marker path {
    fill: #181932;
    stroke: var(--tone);
    stroke-width: 2;
    stroke-linejoin: round;
}

.step__num {
    position: relative;
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 1rem;
    color: #fff;
}

.step__body {
    padding: 1rem 1.15rem;
    background: var(--surface);
    border: 1px solid color-mix(in srgb, var(--tone) 35%, transparent);
    border-radius: 12px;
}

.step__title {
    margin: 0 0 .35rem;
    font-size: 1.0625rem;
}

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

@media (min-width: 1024px) {
    .step-list--mirror::before {
        left: auto;
        right: 21px;
    }

    .step-list--mirror .step {
        grid-template-columns: minmax(0, 1fr) 46px;
    }

    .step-list--mirror .step__marker {
        order: 2;
    }
}

/* ============================================
   Link cards
   ============================================ */
.link-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    height: 100%;
    padding: 1.35rem 1.35rem 3rem;
    color: var(--text);
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: 12px;
    background:
        linear-gradient(180deg, #252846, #1e2039) padding-box,
        var(--border-grad) border-box;
    transition: box-shadow .25s ease;
}

.link-card__title {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 1.2rem;
    color: #fff;
}

.link-card__text {
    color: var(--muted);
    font-size: .95rem;
}

.link-card__arrow {
    position: absolute;
    right: 1.25rem;
    bottom: 1rem;
    display: inline-flex;
    color: var(--cyan);
    transition: transform .2s ease, filter .2s ease;
}

.link-card:hover {
    color: var(--text);
    box-shadow: 0 0 22px rgba(63, 224, 255, .25);
}

.link-card:hover .link-card__arrow {
    transform: translateX(4px);
    filter: drop-shadow(0 0 6px var(--cyan));
}

/* ============================================
   Tables & comparison cards
   ============================================ */
.table-wrap {
    border: 1px solid transparent;
    border-radius: var(--radius);
    background:
        linear-gradient(var(--surface), var(--surface)) padding-box,
        var(--border-grad) border-box;
}

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

.data-table caption {
    padding: 1rem 1.1rem 0;
    text-align: left;
    color: var(--muted);
    font-size: .875rem;
}

.data-table th,
.data-table td {
    padding: .85rem 1.1rem;
    text-align: left;
    vertical-align: top;
}

.data-table thead th {
    font-family: var(--font-head);
    font-weight: 600;
    color: #fff;
    background: rgba(139, 92, 246, .12);
    border-bottom: 2px solid var(--cyan);
}

.data-table tbody th {
    font-weight: 600;
    color: #fff;
}

.data-table tbody td {
    color: var(--muted);
}

.data-table tbody tr:nth-child(even) {
    background: var(--surface-zebra);
}

.data-table .col-cyan {
    background-image: linear-gradient(rgba(63, 224, 255, .06), rgba(63, 224, 255, .06));
}

.data-table .col-violet {
    background-image: linear-gradient(rgba(139, 92, 246, .08), rgba(139, 92, 246, .08));
}

.data-table .row-accent > :first-child {
    box-shadow: inset 3px 0 0 var(--cyan);
}

@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 th,
    .data-table--stack td {
        display: block;
        width: 100%;
    }

    .data-table--stack tr {
        padding: .5rem 0;
        border-bottom: 1px solid var(--border);
    }

    .data-table--stack tbody tr:nth-child(even) {
        background: transparent;
    }

    .data-table--stack tbody th {
        padding-bottom: .25rem;
        font-family: var(--font-head);
        font-size: 1.0625rem;
        color: var(--cyan);
    }

    .data-table--stack td {
        display: grid;
        grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
        gap: .75rem;
        padding: .45rem 1.1rem;
    }

    .data-table--stack td::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--text);
    }
}

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

.compare-card__col {
    padding: 1.25rem 1.35rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
}

.compare-card__col--cyan {
    border-top: 3px solid var(--cyan);
    background-image: linear-gradient(rgba(63, 224, 255, .05), rgba(63, 224, 255, 0) 60%);
}

.compare-card__col--violet {
    border-top: 3px solid var(--violet);
    background-image: linear-gradient(rgba(139, 92, 246, .07), rgba(139, 92, 246, 0) 60%);
}

.compare-card__title {
    margin-bottom: .75rem;
    font-size: 1.2rem;
}

.compare-card__col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.compare-card__col li {
    padding: .5rem 0;
    color: var(--muted);
    border-bottom: 1px solid rgba(201, 211, 230, .1);
}

.compare-card__col li:last-child {
    border-bottom: 0;
}

.compare-card__col li strong {
    display: block;
    color: #fff;
}

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

.fact-table {
    margin: 0;
    padding: .5rem 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-top: 2px solid var(--cyan);
    border-radius: var(--radius);
}

.fact-row {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: .25rem .9rem;
    align-items: start;
    padding: .9rem 1.25rem;
    border-bottom: 1px solid rgba(201, 211, 230, .1);
}

.fact-row:last-child {
    border-bottom: 0;
}

.fact-row .icon {
    grid-row: span 2;
    margin-top: .15rem;
}

.fact-row dt {
    font-size: .875rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--violet-soft);
}

.fact-row dd {
    margin: 0;
    color: #fff;
}

.fact-row--flag {
    box-shadow: inset 3px 0 0 var(--amber);
}

@media (min-width: 768px) {
    .fact-row {
        grid-template-columns: 28px minmax(0, 200px) minmax(0, 1fr);
        align-items: center;
    }

    .fact-row .icon {
        grid-row: auto;
        margin-top: 0;
    }
}

/* ============================================
   Footer
   ============================================ */
.site-footer {
    background: var(--bg-deep);
    border-top: 1px solid rgba(139, 92, 246, .22);
    padding-top: clamp(2.75rem, 6vw, 4rem);
}

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

.site-footer__title {
    font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem);
    max-width: 30ch;
}

.site-footer__intro {
    color: var(--muted);
    max-width: 62ch;
    margin-bottom: 2rem;
}

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

.site-footer__heading {
    margin: 0 0 .5rem;
    font-family: var(--font-head);
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #fff;
}

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

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

.site-footer__links a:hover {
    color: var(--cyan);
    text-decoration: underline;
}

.footer-facts {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: .7rem 1.5rem;
    list-style: none;
    margin: .5rem 0 1.25rem;
    padding: 0;
}

.footer-facts li {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    font-size: .9375rem;
    color: var(--muted);
    line-height: 1.45;
}

.site-footer__note {
    font-size: .9375rem;
    color: var(--muted);
    margin-bottom: 1.5rem;
}

.site-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .5rem 1.5rem;
    margin-top: 2.5rem;
    padding-block: 1.5rem;
    border-top: 1px solid rgba(201, 211, 230, .12);
    font-size: .875rem;
    color: var(--muted);
}

.site-footer__bottom p {
    margin: 0;
}

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

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

/* ============================================
   Homepage
   ============================================ */
.rb-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
    align-items: center;
}

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

.rb-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0 1.25rem;
}

.rb-diagram {
    position: relative;
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
}

.rb-diagram::before {
    content: "";
    position: absolute;
    left: 24%;
    right: 24%;
    top: 4%;
    bottom: 30%;
    z-index: 0;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(139, 92, 246, .5), rgba(63, 224, 255, .12) 60%, transparent 100%);
    filter: blur(14px);
}

.rb-diagram__svg {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: auto;
}

.rb-diagram__crystal {
    position: absolute;
    z-index: 2;
    left: 27.9%;
    top: 8.5%;
    width: 44.2%;
    height: 63.8%;
    object-fit: contain;
    pointer-events: none;
}

.rb-diagram__label {
    font-family: var(--font-head);
    font-size: 17px;
    font-weight: 600;
    fill: #fff;
}

.rb-diagram__badge-text {
    font-size: 18px;
    letter-spacing: .03em;
}

.rb-diagram__glyph {
    font-family: var(--font-head);
    font-size: 24px;
    font-weight: 700;
}

.rb-diagram__glow-cyan { filter: drop-shadow(0 0 5px rgba(63, 224, 255, .7)); }
.rb-diagram__glow-magenta { filter: drop-shadow(0 0 5px rgba(225, 92, 240, .7)); }
.rb-diagram__glow-violet { filter: drop-shadow(0 0 6px rgba(139, 92, 246, .8)); }
.rb-diagram__glow-teal { filter: drop-shadow(0 0 6px rgba(45, 212, 191, .7)); }

.rb-example {
    padding: 1.25rem 1.35rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-top: 2px solid var(--violet);
    border-radius: var(--radius);
}

.rb-example__title {
    margin-bottom: .25rem;
}

.rb-example__list {
    margin: .75rem 0 1rem;
}

.rb-example__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: .55rem 0;
    border-bottom: 1px solid rgba(201, 211, 230, .12);
}

.rb-example__row dt {
    color: var(--muted);
    font-size: .95rem;
}

.rb-example__row dd {
    margin: 0;
    font-family: var(--font-mono);
    color: #fff;
    white-space: nowrap;
}

.rb-example__row--total {
    border-bottom: 0;
}

.rb-example__row--total dt {
    color: #fff;
    font-weight: 600;
}

.rb-example__row--total dd {
    color: var(--cyan);
}

.rb-example__text {
    margin: 0;
    font-size: .95rem;
    color: var(--muted);
}

@media (min-width: 1024px) {
    .rb-grid {
        grid-template-columns: minmax(0, .9fr) minmax(0, 1.25fr) minmax(0, .9fr);
        gap: 2rem;
    }
}

.crystal-stage {
    position: relative;
    isolation: isolate;
}

.crystal-stage__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center top;
}

.crystal-stage__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, var(--bg) 0%, rgba(21, 22, 42, 0) 14%, rgba(21, 22, 42, 0) 84%, var(--bg) 100%);
}

.vip-teaser .tier-track {
    max-width: 980px;
    margin-inline: auto;
}

.home-link-row {
    display: flex;
    justify-content: center;
    margin-top: 1.25rem;
}

.home-link-row--start {
    justify-content: flex-start;
}

.coin-note {
    max-width: 680px;
    margin: 1.5rem auto 0;
    text-align: center;
    color: var(--muted);
}

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

.trust-copy p {
    color: var(--muted);
}

.trust-copy .fact-table {
    margin-top: 1.5rem;
}

.fact-row--inline {
    grid-template-columns: minmax(0, 1fr);
}

.fact-row--inline dt {
    display: flex;
    align-items: center;
    gap: .6rem;
}

.fact-row--inline dt .icon {
    margin-top: 0;
}

.trust-side {
    display: grid;
    gap: 1.5rem;
    align-content: start;
}

/* ============================================
   Bonusser page
   ============================================ */
.band {
    background: linear-gradient(180deg, rgba(30, 31, 54, .75), rgba(30, 31, 54, .45));
    border-block: 1px solid rgba(139, 92, 246, .14);
}

.check-list {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
}

.check-list li {
    position: relative;
    padding: .35rem 0 .35rem 1.5rem;
    color: var(--muted);
}

.check-list li::before {
    content: "";
    position: absolute;
    left: .15rem;
    top: .85rem;
    width: 8px;
    height: 8px;
    background: var(--cyan);
    box-shadow: 0 0 8px rgba(63, 224, 255, .7);
    transform: rotate(45deg);
}

.flow {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr) 28px minmax(0, 1fr);
    gap: .25rem;
    align-items: start;
    margin: 1.5rem 0;
    padding: 1.25rem .75rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-top: 2px solid var(--cyan);
    border-radius: var(--radius);
}

.flow__node {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    text-align: center;
}

.flow__node svg {
    width: clamp(56px, 16vw, 92px);
    height: auto;
    filter: drop-shadow(0 0 6px rgba(63, 224, 255, .45));
}

.flow__label {
    font-family: var(--font-head);
    font-weight: 600;
    font-size: .9rem;
    color: #fff;
}

.flow__num {
    font-family: var(--font-mono);
    font-size: .75rem;
    color: var(--cyan);
    overflow-wrap: anywhere;
}

.flow__arrow {
    display: flex;
    margin-top: clamp(22px, 6vw, 38px);
    filter: drop-shadow(0 0 5px rgba(63, 224, 255, .7));
}

.flow__arrow svg {
    width: 28px;
    height: 20px;
}

.flow__caption {
    grid-column: 1 / -1;
    margin-top: .75rem;
    text-align: center;
}

@media (min-width: 768px) {
    .flow {
        padding-inline: 2rem;
        grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1fr) 48px minmax(0, 1fr);
    }

    .flow__arrow svg {
        width: 48px;
    }

    .flow__label {
        font-size: 1.05rem;
    }

    .flow__num {
        font-size: .95rem;
    }
}

.rb-after {
    margin-top: 1.5rem;
}

.status-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
    align-items: center;
}

.status-split__art {
    position: relative;
}

.status-split__art::before {
    content: "";
    position: absolute;
    inset: 10% 6%;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(139, 92, 246, .45), rgba(63, 224, 255, .08) 70%, transparent 100%);
    filter: blur(14px);
}

.status-split__art img {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

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

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

.perk__art {
    display: block;
    width: 100%;
    max-width: 220px;
    height: auto;
    margin-bottom: 1rem;
    filter: drop-shadow(0 0 6px rgba(63, 224, 255, .35));
}

.perk__title {
    font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem);
}

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

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

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

.risk-title {
    margin-bottom: 1.25rem;
}

.bonus-cta {
    margin-top: 2.5rem;
}

.home-cta__title {
    margin-bottom: .5rem;
}

.home-cta__text {
    color: var(--muted);
    margin-bottom: 1.25rem;
}

@media (min-width: 768px) {
    .fact-row--inline {
        grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
    }
}

@media (min-width: 1024px) {
    .trust-grid {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
        gap: 3rem;
        align-items: start;
    }

    .trust-side {
        padding-top: 3.5rem;
    }
}

/* ============================================
   Spil page
   ============================================ */
.cat-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.cat-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .5rem;
    height: 100%;
    padding: 1rem;
    color: var(--text);
    text-decoration: none;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: border-color .2s ease, box-shadow .2s ease;
}

.cat-card:hover {
    color: var(--text);
    border-color: var(--cyan);
    box-shadow: 0 0 18px rgba(63, 224, 255, .22);
}

.cat-card__title {
    margin: .25rem 0 0;
    font-size: 1.1rem;
}

.cat-card__text {
    margin: 0;
    font-size: .9rem;
    color: var(--muted);
}

@media (min-width: 1024px) {
    .cat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .cat-card { padding: 1.35rem; }
}

.media-frame {
    position: relative;
    margin: 0;
}

.media-frame::before {
    content: "";
    position: absolute;
    inset: 8%;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(139, 92, 246, .4), transparent 100%);
    filter: blur(18px);
}

.media-frame img {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.pf-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
    align-items: start;
}

.pf-note {
    max-width: 72ch;
    margin: 2rem 0 0;
    color: var(--muted);
}

.hash-chain {
    position: relative;
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
}

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

.hash-chain__list::before {
    content: "";
    position: absolute;
    top: 1rem;
    bottom: 1rem;
    left: calc((100% - 2.75rem) / 2 - 2px);
    width: 4px;
    background: repeating-linear-gradient(180deg, var(--cyan) 0 10px, transparent 10px 14px);
    filter: drop-shadow(0 0 5px rgba(63, 224, 255, .8));
}

.hash-chain__list::after {
    content: "";
    position: absolute;
    top: 1.6rem;
    bottom: 1.6rem;
    right: 1.5rem;
    width: 1rem;
    border: 2px dashed var(--violet-soft);
    border-left: 0;
    border-radius: 0 12px 12px 0;
}

.hash-chain__list li {
    position: relative;
    z-index: 1;
    isolation: isolate;
    padding: .95rem 1.2rem;
    text-align: center;
    font-family: var(--font-mono);
    font-size: .875rem;
    color: #fff;
    background: linear-gradient(90deg, var(--cyan), var(--violet));
    clip-path: polygon(15px 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 15px 100%, 0 50%);
}

.hash-chain__list li::before {
    content: "";
    position: absolute;
    inset: 2px;
    z-index: -1;
    background: #181932;
    clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 14px 100%, 0 50%);
}

.hash-chain__return {
    position: absolute;
    top: 0;
    right: 0;
    height: calc(100% - 3.2rem);
    display: flex;
    align-items: center;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-family: var(--font-mono);
    font-size: .875rem;
    color: var(--violet-soft);
}

.hash-chain figcaption {
    margin-top: 1.25rem;
}

@media (min-width: 1024px) {
    .pf-layout {
        grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr);
        gap: 3rem;
    }
}

.cta-panel {
    text-align: center;
}

.cta-panel p {
    color: var(--muted);
    max-width: 52ch;
    margin: 0 auto 1.5rem;
}

/* ============================================
   Om os page
   ============================================ */
.chain-figure {
    margin: 0;
    text-align: center;
}

.chain-figure svg {
    display: block;
    width: 100%;
    max-width: 520px;
    height: auto;
    margin-inline: auto;
}

.chain-figure__glow {
    filter: blur(5px);
    opacity: .6;
}

.chain-figure__conduit {
    filter: drop-shadow(0 0 5px rgba(63, 224, 255, .8));
}

.chain-figure__num {
    font-family: var(--font-mono);
    font-size: 24px;
}

.chain-figure__label {
    font-family: var(--font-head);
    font-size: 18px;
    font-weight: 600;
}

.chain-figure figcaption {
    margin-top: .75rem;
    font-size: .9rem;
}

.compare-wrap {
    margin-block: 1.5rem 2rem;
}

.about-sub h3 {
    margin-top: 1.5rem;
    margin-bottom: .35rem;
}

.about-sub h3:first-child {
    margin-top: 0;
}

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

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

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

/* ============================================
   VIP page
   ============================================ */
.vip-circuit {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: min(78%, 560px);
    height: auto;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(135deg, #000 0%, #000 35%, transparent 80%);
    mask-image: linear-gradient(135deg, #000 0%, #000 35%, transparent 80%);
}

.vip-table-wrap {
    max-width: 980px;
    margin: 2.5rem auto 0;
}

.vip-tier-note {
    max-width: 72ch;
    margin: 1.5rem auto 0;
    text-align: center;
    color: var(--muted);
}

.vip-stage .crystal-stage__bg {
    background-position: center;
}

.vip-rb-grid {
    align-items: start;
}

.cmp-after {
    margin-top: 1.5rem;
}

.status-wrap {
    max-width: 860px;
}

.status-badges {
    margin: 0 0 2rem;
}

.status-badges svg {
    display: block;
    width: 100%;
    max-width: 520px;
    height: auto;
    margin-inline: auto;
}

.status-badges__glow {
    filter: drop-shadow(0 0 6px rgba(63, 224, 255, .65));
}

.status-badges__label {
    font-family: var(--font-head);
    font-size: 15px;
    font-weight: 600;
    fill: #fff;
}

.status-note {
    margin: 1.75rem 0 0;
    color: var(--muted);
}

.vip-faq__wrap {
    max-width: 860px;
}

.vip-cta .cta-panel h2 {
    margin-bottom: .75rem;
}

/* ============================================
   Betalinger page
   ============================================ */
.pay-circuit {
    display: none;
    position: absolute;
    left: 0;
    bottom: 1rem;
    z-index: -1;
    width: min(46%, 460px);
    height: auto;
    pointer-events: none;
}

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

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

.pay-pair__col .section-head {
    margin-bottom: 1.5rem;
}

.pay-next,
.pay-after {
    margin: 1.5rem 0 0;
    max-width: 72ch;
    color: var(--muted);
}

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

    .pay-pair__col:last-child .section-head {
        text-align: right;
        margin-left: auto;
    }
}

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

.pay-dodont {
    margin-top: 2rem;
    align-items: start;
}

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

.factor-card {
    padding: 1.35rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-top: 2px solid var(--cyan);
    border-radius: var(--radius);
    box-shadow: 0 -6px 18px -8px rgba(63, 224, 255, .45);
}

.factor-card__title {
    margin: .75rem 0 .35rem;
}

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

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

.kyc-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
    align-items: center;
}

.kyc-card__shield {
    width: 96px;
    height: auto;
    filter: drop-shadow(0 0 10px rgba(63, 224, 255, .6));
}

.kyc-card p {
    color: var(--muted);
}

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

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

    .kyc-card__shield {
        width: 120px;
    }
}

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

.spark {
    margin: 0;
    padding: 1.25rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.spark svg {
    display: block;
    width: 100%;
    height: auto;
    margin-bottom: .75rem;
    filter: drop-shadow(0 0 6px rgba(139, 92, 246, .55));
}

.spark--stable svg {
    filter: drop-shadow(0 0 6px rgba(63, 224, 255, .55));
}

.spark figcaption {
    color: var(--muted);
    font-size: .95rem;
}

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

.pay-rg {
    max-width: 720px;
    margin: 2rem auto 0;
}

/* ============================================
   FAQ page
   ============================================ */
.faq-wrap {
    max-width: calc(880px + var(--gutter) * 2);
}

.faq-chips-nav {
    margin-top: 1.25rem;
}

.faq-chips {
    display: flex;
    flex-wrap: nowrap;
    gap: .6rem;
    list-style: none;
    margin: 0;
    padding: .35rem .25rem;
    overflow-x: auto;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}

.faq-chips li {
    flex: none;
}

.faq-chip {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: .45rem 1.35rem;
    font-family: var(--font-head);
    font-size: .9rem;
    font-weight: 600;
    white-space: nowrap;
    color: #fff;
    text-decoration: none;
    background: var(--cyan);
    clip-path: polygon(11px 0, calc(100% - 11px) 0, 100% 50%, calc(100% - 11px) 100%, 11px 100%, 0 50%);
}

.faq-chip::before {
    content: "";
    position: absolute;
    inset: 1px;
    z-index: -1;
    background: #17182f;
    clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 10px 100%, 0 50%);
    transition: background .2s ease;
}

.faq-chip:hover,
.faq-chip:focus-visible {
    color: #fff;
    outline: none;
}

.faq-chip:hover::before {
    background: #4a31a3;
}

.faq-chip:focus-visible::before {
    background: #4a31a3;
    box-shadow: inset 0 0 0 2px #fff;
}

@media (min-width: 768px) {
    .faq-chips {
        flex-wrap: wrap;
        overflow-x: visible;
    }
}

.quick-card {
    padding: clamp(1.25rem, 3vw, 2rem);
}

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

.quick-list li {
    position: relative;
    padding: .6rem 0 .6rem 1.9rem;
    color: var(--text);
    border-bottom: 1px solid rgba(201, 211, 230, .1);
}

.quick-list li:last-child {
    border-bottom: 0;
}

.quick-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 1rem;
    width: 14px;
    height: 16px;
    background: var(--cyan);
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
    filter: drop-shadow(0 0 4px rgba(63, 224, 255, .7));
}

.faq-section .accordion {
    margin-top: .25rem;
}

.faq-compare {
    margin-bottom: 2rem;
}

.compare-card__col--violet .compare-card__title {
    color: var(--violet-soft);
}

.compare-card__col--cyan .compare-card__title {
    color: var(--cyan);
}

.rofus-panel {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: clamp(1.25rem, 3vw, 2rem);
    background: #292c52;
    border: 1px solid var(--border);
    border-left: 4px solid var(--cyan);
    border-radius: var(--radius);
}

.rofus-panel__title {
    font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem);
}

.rofus-panel__body p {
    color: var(--muted);
}

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

@media (min-width: 768px) {
    .rofus-panel {
        flex-direction: row;
        align-items: flex-start;
        gap: 1.75rem;
    }
}

.acc-label-row {
    display: flex;
    align-items: center;
    gap: .9rem;
    margin-bottom: .5rem;
}

.acc-label-row .accordion__label {
    margin: 0;
}

.acc-track {
    flex: none;
    height: auto;
    filter: drop-shadow(0 0 4px rgba(63, 224, 255, .5));
}

.seed-chain {
    margin: 0 0 2rem;
    padding: 1.25rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.seed-chain svg {
    display: block;
    width: 100%;
    max-width: 480px;
    height: auto;
    margin-inline: auto;
    filter: drop-shadow(0 0 6px rgba(63, 224, 255, .4));
}

.seed-chain__labels {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: .75rem;
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
    text-align: center;
}

.seed-chain__labels strong {
    display: block;
    font-family: var(--font-head);
}

.seed-chain__labels span {
    font-size: .9rem;
    color: var(--muted);
}

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

.faq-section .coin-strip + .faq-wrap,
.faq-section > .coin-strip {
    margin-bottom: 1rem;
}

.faq-rg {
    max-width: 720px;
    margin-top: 2rem;
}

.faq-cta .cta-panel h2 {
    margin-bottom: .75rem;
}

/* ============================================
   Motion preferences
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

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