/*
 * FUGU CASINO - design system
 * Dark-only underwater theme: navy depth, bioluminescent cyan/aqua,
 * controlled violet and magenta accents.
 */

:root {
    /* Palette */
    --c-abyss: #030a1c;
    --c-navy-950: #050f26;
    --c-navy-900: #081733;
    --c-navy-850: #0a1d40;
    --c-navy-800: #0c2147;
    --c-navy-700: #12305f;
    --c-cyan: #3ef0ff;
    --c-cyan-soft: #8ff7ff;
    --c-aqua: #2fe6c5;
    --c-electric: #4f7dff;
    --c-violet: #a36bff;
    --c-violet-soft: #d2b6ff;
    --c-magenta: #ff5fd7;
    --c-magenta-soft: #ffa8ea;
    --c-gold: #ffd27a;
    --c-teal-muted: #4fb5a8;
    --c-text: #eef7ff;
    --c-text-soft: #c3d6ea;
    --c-text-muted: #9ab4cf;
    --c-on-cyan: #03132e;

    /* Surfaces */
    --glass-bg: linear-gradient(160deg, rgba(20, 52, 102, 0.62), rgba(8, 22, 52, 0.82));
    --glass-solid: #0a1d40;
    --line-cyan: rgba(62, 240, 255, 0.42);
    --line-cyan-strong: rgba(62, 240, 255, 0.75);
    --line-soft: rgba(143, 190, 255, 0.2);
    --shadow-deep: 0 24px 60px rgba(0, 0, 0, 0.4);
    --glow-cyan: 0 0 0 1px rgba(62, 240, 255, 0.35), 0 0 26px rgba(62, 240, 255, 0.24);
    --glow-violet: 0 0 30px rgba(163, 107, 255, 0.28);

    /* Shape */
    --radius-sm: 12px;
    --radius: 20px;
    --radius-lg: 28px;
    --radius-pill: 999px;

    /* Type */
    --font-display: 'Outfit', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    --fs-h1: clamp(2.05rem, 1.35rem + 3.3vw, 3.6rem);
    --fs-h2: clamp(1.65rem, 1.2rem + 1.9vw, 2.5rem);
    --fs-h3: clamp(1.15rem, 1rem + 0.55vw, 1.4rem);
    --fs-lead: clamp(1.05rem, 1rem + 0.3vw, 1.2rem);

    /* Layout */
    --container: 1180px;
    --gutter: clamp(1rem, 4vw, 2rem);
    --section-space: clamp(3.5rem, 8vw, 6.5rem);
    --header-bottom: 72px;
    --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

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

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

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

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

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

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

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

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

details {
    height: fit-content;
}

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

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

section {
    overflow: clip;
}

/* ============================================
   BASE
   ============================================ */

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

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

body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.65;
    color: var(--c-text);
    background-color: var(--c-navy-950);
    background-image:
        radial-gradient(1100px 700px at 50% -8%, rgba(62, 240, 255, 0.14), transparent 62%),
        radial-gradient(900px 700px at 100% 28%, rgba(163, 107, 255, 0.1), transparent 62%),
        radial-gradient(900px 700px at 0% 64%, rgba(47, 230, 197, 0.07), transparent 62%),
        linear-gradient(180deg, #071633 0%, #050f26 42%, #030a1c 100%);
    -webkit-font-smoothing: antialiased;
}

body.menu-open {
    overflow: hidden;
}

[hidden] {
    display: none !important;
}

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

h1 { font-size: var(--fs-h1); line-height: 1.08; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: 600; }

p { margin: 0 0 1em; }

a {
    color: var(--c-cyan-soft);
    text-underline-offset: 0.15em;
}

a:hover { color: #ffffff; }

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

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

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

::selection {
    background: rgba(62, 240, 255, 0.35);
    color: #ffffff;
}

.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: 0.75rem 1.25rem;
    border-radius: var(--radius-pill);
    background: var(--c-cyan);
    color: var(--c-on-cyan);
    font-weight: 600;
    text-decoration: none;
}

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

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

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

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

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

.site-main:focus { outline: none; }

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

.section--tight { padding-block: calc(var(--section-space) * 0.6); }

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

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

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

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

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

/* Typography helpers */
.eyebrow {
    margin: 0 0 0.6rem;
    font-family: var(--font-display);
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--c-aqua);
}

.lead {
    font-size: var(--fs-lead);
    color: var(--c-text-soft);
    max-width: 62ch;
}

.text-accent {
    color: var(--c-cyan);
    text-shadow: 0 0 18px rgba(62, 240, 255, 0.35);
}

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

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

.updated {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.875rem;
    color: var(--c-text-muted);
}

.prose { max-width: 72ch; }
.prose > :last-child { margin-bottom: 0; }
.prose ul li, .prose ol li { margin-bottom: 0.45em; }

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

.text-link .icon { width: 18px; height: 18px; }

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

.check-list li {
    position: relative;
    padding-left: 2rem;
}

.check-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.2em;
    width: 1.3rem;
    height: 1.3rem;
    border-radius: 50%;
    border: 1.5px solid var(--c-cyan);
    box-shadow: 0 0 10px rgba(62, 240, 255, 0.35);
}

.check-list li::after {
    content: '';
    position: absolute;
    left: 0.45rem;
    top: 0.42em;
    width: 0.38rem;
    height: 0.65rem;
    border: solid var(--c-cyan);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* ============================================
   OCEAN ATMOSPHERE (fixed decorative layer)
   ============================================ */

.ocean-atmosphere {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.ocean-atmosphere__rays {
    position: absolute;
    left: 0;
    right: 0;
    top: -10%;
    height: 85vh;
    background: repeating-linear-gradient(100deg,
        transparent 0 60px,
        rgba(120, 220, 255, 0.04) 60px 100px,
        transparent 100px 190px);
    -webkit-mask-image: radial-gradient(ellipse 60% 70% at 50% 0%, #000 0%, transparent 75%);
    mask-image: radial-gradient(ellipse 60% 70% at 50% 0%, #000 0%, transparent 75%);
}

.ocean-bubble {
    position: absolute;
    bottom: -40px;
    left: var(--x, 10%);
    width: var(--s, 10px);
    height: var(--s, 10px);
    border-radius: 50%;
    border: 1px solid rgba(143, 247, 255, 0.4);
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.4), rgba(62, 240, 255, 0.1) 45%, transparent 70%);
    animation: bubble-rise var(--d, 24s) linear infinite;
    animation-delay: var(--delay, 0s);
    will-change: transform;
}

@keyframes bubble-rise {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(var(--drift, 20px), -115vh, 0); }
}

/* ============================================
   BUTTONS & BADGES
   ============================================ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 48px;
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-pill);
    border: 1px solid transparent;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: box-shadow 0.25s var(--ease), background-color 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.25s var(--ease), color 0.25s var(--ease);
}

.btn .icon { width: 20px; height: 20px; flex-shrink: 0; }

.btn--primary {
    color: var(--c-on-cyan);
    background: linear-gradient(135deg, #7af8ff 0%, #3ee4ff 45%, #5aa8ff 100%);
    box-shadow: 0 0 0 1px rgba(143, 247, 255, 0.6), 0 8px 26px rgba(62, 240, 255, 0.28);
}

.btn--primary:hover,
.btn--primary:focus-visible {
    color: var(--c-on-cyan);
    box-shadow: 0 0 0 1px rgba(200, 252, 255, 0.9), 0 0 34px rgba(62, 240, 255, 0.55);
    transform: translateY(-1px);
}

.btn--ghost {
    color: var(--c-text);
    background: rgba(8, 23, 51, 0.72);
    border-color: var(--line-cyan);
    box-shadow: inset 0 0 18px rgba(62, 240, 255, 0.08);
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
    color: #ffffff;
    border-color: var(--c-cyan);
    box-shadow: inset 0 0 18px rgba(62, 240, 255, 0.15), 0 0 22px rgba(62, 240, 255, 0.35);
}

.btn--sm {
    min-height: 44px;
    padding: 0.55rem 1.1rem;
    font-size: 0.95rem;
}

.btn--lg {
    min-height: 56px;
    padding: 1rem 2.1rem;
    font-size: 1.075rem;
}

.btn-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
}

.badge {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0.2rem 0.7rem;
    border-radius: var(--radius-pill);
    border: 1px solid var(--line-soft);
    background: #0b1f45;
    color: var(--c-text-soft);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}

.badge--cyan { border-color: var(--line-cyan); color: var(--c-cyan-soft); }
.badge--magenta { border-color: rgba(255, 95, 215, 0.55); color: var(--c-magenta-soft); }
.badge--gold { border-color: rgba(255, 210, 122, 0.55); color: var(--c-gold); }
.badge--violet { border-color: rgba(163, 107, 255, 0.6); color: var(--c-violet-soft); }

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

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

/* Blur lives on a pseudo-element so the fixed drawer has no filtered ancestor. */
.site-header::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(4, 12, 32, 0.8);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(62, 240, 255, 0.18);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.site-header__inner {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 68px;
    padding-block: 0.6rem;
}

.site-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    min-height: 44px;
    color: var(--c-cyan);
    text-decoration: none;
    flex-shrink: 0;
}

.site-brand:hover { color: var(--c-cyan); }

.site-brand__mark {
    width: 42px;
    height: 42px;
    filter: drop-shadow(0 0 8px rgba(62, 240, 255, 0.6));
}

.site-brand__text {
    display: flex;
    flex-direction: column;
    line-height: 0.95;
    font-family: var(--font-display);
}

.site-brand__name {
    font-size: 1.45rem;
    font-weight: 700;
    color: #ffffff;
}

.site-brand__sub {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--c-cyan);
    text-shadow: 0 0 12px rgba(62, 240, 255, 0.45);
}

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

.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__link {
    display: flex;
    align-items: center;
    min-height: 52px;
    padding: 0.5rem 0.25rem;
    border-bottom: 1px solid var(--line-soft);
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--c-text);
    text-decoration: none;
}

.site-nav__link:hover,
.site-nav__link[aria-current="page"] {
    color: var(--c-cyan);
}

.site-nav__actions {
    display: grid;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.site-nav__actions .btn { width: 100%; }

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

.header-actions {
    display: none;
    align-items: center;
    gap: 0.6rem;
}

.menu-toggle {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 48px;
    height: 48px;
    margin-left: auto;
    padding: 0;
    border-radius: 14px;
    border: 1px solid var(--line-cyan);
    background: rgba(8, 23, 51, 0.8);
    color: var(--c-text);
    cursor: pointer;
}

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

@media (min-width: 768px) {
    .site-header__inner .header-actions {
        display: flex;
        margin-left: auto;
    }
    .menu-toggle { margin-left: 0; }
    .site-nav__actions { display: none; }
}

@media (min-width: 1024px) {
    .site-header__inner { min-height: 84px; gap: 1.25rem; }

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

    .site-nav__list {
        display: flex;
        align-items: center;
        gap: 0.15rem;
        padding: 0.35rem;
        border-radius: var(--radius-pill);
        border: 1px solid var(--line-cyan);
        background: rgba(10, 29, 64, 0.55);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        box-shadow: inset 0 0 20px rgba(62, 240, 255, 0.08), 0 0 24px rgba(62, 240, 255, 0.12);
    }

    .site-nav__link {
        min-height: 44px;
        padding: 0.45rem 1rem;
        border: 0;
        border-radius: var(--radius-pill);
        font-size: 1rem;
    }

    .site-nav__link:hover {
        background: rgba(62, 240, 255, 0.1);
        color: #ffffff;
    }

    .site-nav__link[aria-current="page"] {
        background: rgba(62, 240, 255, 0.16);
        color: var(--c-cyan);
        box-shadow: inset 0 0 0 1px rgba(62, 240, 255, 0.4);
    }

    .site-header__inner .header-actions { margin-left: 0; }
    .menu-toggle { display: none; }
}

@media (min-width: 1024px) and (max-width: 1180px) {
    .site-nav__link { padding-inline: 0.75rem; }
    .header-actions .header-login { display: none; }
}

/* ============================================
   SECTION HEADING (flanking fugu marks)
   ============================================ */

.section-heading {
    margin: 0 auto clamp(1.75rem, 4vw, 2.75rem);
    max-width: 760px;
}

.section-heading--center { text-align: center; }

.section-heading--left {
    margin-left: 0;
    text-align: left;
}

.section-heading__title {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin: 0;
}

.section-heading__fugu {
    flex-shrink: 0;
    width: clamp(30px, 4vw, 44px);
    height: clamp(30px, 4vw, 44px);
    color: var(--c-cyan);
    filter: drop-shadow(0 0 8px rgba(62, 240, 255, 0.55));
}

.section-heading__fugu--flip { transform: scaleX(-1); }

.section-heading--left .section-heading__fugu--flip { display: none; }
.section-heading--left .section-heading__title { justify-content: flex-start; }

.section-heading__lead {
    margin: 1rem auto 0;
    font-size: var(--fs-lead);
    color: var(--c-text-soft);
    max-width: 64ch;
}

.section-heading--left .section-heading__lead { margin-left: 0; }

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

.breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    list-style: none;
    margin: 0 0 1.25rem;
    padding: 0;
    font-size: 0.875rem;
    color: var(--c-text-muted);
}

.breadcrumbs li + li::before {
    content: '/';
    margin-right: 0.35rem;
    color: var(--c-text-muted);
}

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

/* ============================================
   HERO & SCENE BACKGROUNDS
   ============================================ */

.hero {
    position: relative;
    isolation: isolate;
    padding-block: clamp(1.75rem, 5vw, 4.5rem) clamp(3rem, 7vw, 6rem);
}

.hero--compact { padding-bottom: clamp(2.5rem, 5vw, 4rem); }

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

.hero__bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(5, 15, 38, 0.72) 0%, rgba(5, 15, 38, 0.6) 55%, var(--c-navy-950) 100%);
}

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

.hero__copy { max-width: 640px; }

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

.hero__lead {
    font-size: var(--fs-lead);
    color: var(--c-text-soft);
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.hero__media {
    position: relative;
    display: flex;
    justify-content: center;
}

@media (max-width: 767.98px) {
    .hero__actions .btn { flex: 1 1 100%; }
}

@media (min-width: 1024px) {
    .hero__bg { background-position: var(--hero-bg-pos, center); }
    .hero__bg::after {
        background:
            linear-gradient(90deg, rgba(5, 15, 38, 0.9) 0%, rgba(5, 15, 38, 0.6) 42%, rgba(5, 15, 38, 0.08) 72%),
            linear-gradient(180deg, rgba(5, 15, 38, 0) 62%, var(--c-navy-950) 100%);
    }
    .hero__grid { grid-template-columns: minmax(0, 46fr) minmax(0, 54fr); }
}

.scene {
    position: relative;
    isolation: isolate;
}

.scene__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: var(--scene-bg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: var(--scene-pos, center);
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
}

.scene__bg--dim::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(5, 15, 38, 0.45);
}

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

/* ============================================
   MASCOT
   ============================================ */

.mascot {
    position: relative;
    width: min(100%, 560px);
    aspect-ratio: 1 / 1;
    margin-inline: auto;
}

.mascot__glow {
    position: absolute;
    inset: 10%;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 50%, rgba(163, 107, 255, 0.45), rgba(62, 240, 255, 0.2) 45%, transparent 70%);
    filter: blur(22px);
}

.mascot__img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    animation: mascot-float 8s ease-in-out infinite;
}

.mascot__ring {
    position: absolute;
    left: 4%;
    right: 4%;
    top: 56%;
    width: 92%;
    height: 26%;
    transform: rotate(-9deg);
    filter: drop-shadow(0 0 6px rgba(62, 240, 255, 0.8)) drop-shadow(0 0 14px rgba(163, 107, 255, 0.55));
}

.mascot__ring--back { z-index: 0; }
.mascot__ring--front { z-index: 2; }

.mascot__bubble {
    position: absolute;
    z-index: 2;
    border-radius: 50%;
    border: 1px solid rgba(143, 247, 255, 0.55);
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.5), rgba(62, 240, 255, 0.12) 50%, transparent 72%);
    animation: mascot-bubble 9s ease-in infinite;
}

.mascot__bubble--1 { width: 18px; height: 18px; left: 12%; top: 22%; animation-delay: -1s; }
.mascot__bubble--2 { width: 11px; height: 11px; left: 20%; top: 38%; animation-delay: -4s; }
.mascot__bubble--3 { width: 24px; height: 24px; right: 10%; top: 14%; animation-delay: -6s; }
.mascot__bubble--4 { width: 9px; height: 9px; right: 18%; top: 34%; animation-delay: -2.5s; }

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

@keyframes mascot-bubble {
    0% { transform: translateY(20px) scale(0.85); }
    100% { transform: translateY(-70px) scale(1.05); }
}

@media (max-width: 1023.98px) {
    .mascot { width: min(78%, 420px); }
}

@media (max-width: 479.98px) {
    .mascot { width: min(68%, 300px); }
}

/* ============================================
   GLASS PANELS & CALLOUTS
   ============================================ */

.panel {
    position: relative;
    background: var(--glass-bg);
    border: 1px solid var(--line-cyan);
    border-radius: var(--radius-lg);
    padding: clamp(1.25rem, 3vw, 2.25rem);
    box-shadow: inset 0 0 40px rgba(62, 240, 255, 0.05), var(--shadow-deep);
}

.panel--strong {
    border-color: var(--line-cyan-strong);
    box-shadow: inset 0 0 40px rgba(62, 240, 255, 0.08), 0 0 30px rgba(62, 240, 255, 0.18), var(--shadow-deep);
}

.panel--dashed {
    background: rgba(4, 12, 32, 0.88);
    border-style: dashed;
}

.panel--calm {
    border-color: rgba(79, 181, 168, 0.6);
    box-shadow: var(--shadow-deep);
}

.glass-card {
    height: 100%;
    padding: clamp(1.15rem, 2.5vw, 1.6rem);
    border-radius: var(--radius);
    background: var(--glass-bg);
    border: 1px solid var(--line-soft);
    box-shadow: inset 0 0 24px rgba(62, 240, 255, 0.04);
}

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

.glass-card__icon {
    display: inline-grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin-bottom: 0.9rem;
    border-radius: 16px;
    color: var(--c-cyan);
    background: rgba(62, 240, 255, 0.08);
    border: 1px solid var(--line-cyan);
    box-shadow: 0 0 18px rgba(62, 240, 255, 0.2);
}

.callout {
    display: flex;
    gap: 0.9rem;
    align-items: flex-start;
    padding: 1rem 1.15rem;
    border-radius: var(--radius);
    background: #0a1d40;
    border: 1px solid var(--line-soft);
    border-left: 4px solid var(--c-cyan);
}

.callout__icon {
    flex-shrink: 0;
    display: inline-grid;
    place-items: center;
    color: var(--c-cyan);
    margin-top: 0.1rem;
}

.callout__body { min-width: 0; }
.callout__body > :last-child { margin-bottom: 0; }

.callout__title {
    margin: 0 0 0.3rem;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.05rem;
    color: #ffffff;
}

.callout--warning { border-left-color: var(--c-magenta); }
.callout--warning .callout__icon { color: var(--c-magenta); }

.callout--calm { border-left-color: var(--c-teal-muted); }
.callout--calm .callout__icon { color: var(--c-aqua); }

/* ============================================
   FACT STRIP
   ============================================ */

.fact-strip {
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding: 0.7rem;
    border-radius: var(--radius-lg);
    background: var(--glass-bg);
    border: 1px solid var(--line-cyan);
    box-shadow: inset 0 0 30px rgba(62, 240, 255, 0.06), 0 0 28px rgba(62, 240, 255, 0.12);
    scrollbar-width: thin;
    scrollbar-color: var(--c-cyan) transparent;
}

.fact-strip__list {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(132px, 40%);
    gap: 0.6rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.fact {
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.2rem;
    padding: 1rem 0.6rem;
    border-radius: 16px;
    background: rgba(5, 15, 38, 0.72);
    border: 1px solid var(--line-soft);
}

.fact__icon {
    display: inline-grid;
    place-items: center;
    margin-bottom: 0.25rem;
    color: var(--c-magenta);
    filter: drop-shadow(0 0 8px rgba(255, 95, 215, 0.5));
}

.fact-strip--cyan .fact__icon {
    color: var(--c-cyan);
    filter: drop-shadow(0 0 8px rgba(62, 240, 255, 0.5));
}

.fact__value {
    font-family: var(--font-display);
    font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.65rem);
    font-weight: 700;
    line-height: 1.15;
    color: #ffffff;
}

.fact__label {
    font-size: 0.9375rem;
    color: var(--c-text-soft);
    line-height: 1.35;
}

.fact__note {
    margin-top: 0.2rem;
    font-size: 0.875rem;
    color: var(--c-text-muted);
    line-height: 1.35;
}

@media (min-width: 768px) {
    .fact-strip { overflow-x: visible; }
    .fact-strip__list { grid-auto-columns: minmax(0, 1fr); }
}

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

.table-scroll {
    overflow-x: auto;
    border-radius: var(--radius);
    border: 1px solid var(--line-cyan);
    background: #081a3b;
    box-shadow: inset 0 0 30px rgba(62, 240, 255, 0.05);
    scrollbar-width: thin;
    scrollbar-color: var(--c-cyan) transparent;
}

.data-table {
    width: 100%;
    min-width: 560px;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.975rem;
}

.data-table caption {
    caption-side: top;
    padding: 0.85rem 1rem;
    text-align: left;
    font-size: 0.875rem;
    color: var(--c-text-muted);
}

.data-table th,
.data-table td {
    padding: 0.85rem 1rem;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--line-soft);
}

.data-table thead th {
    background: #0e2c58;
    color: var(--c-cyan-soft);
    font-family: var(--font-display);
    font-weight: 600;
    white-space: nowrap;
}

.data-table tbody tr:nth-child(even) td,
.data-table tbody tr:nth-child(even) th { background: #0a1f45; }

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

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

.data-table td strong { color: var(--c-aqua); }

.data-table--sticky th:first-child,
.data-table--sticky td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: #0b2149;
    box-shadow: 1px 0 0 var(--line-soft);
}

.data-table--sticky thead th:first-child { background: #0e2c58; z-index: 2; }

@media (max-width: 599.98px) {
    .data-table--stack { min-width: 0; }
    .data-table--stack thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
    }
    .data-table--stack tr { display: block; border-bottom: 1px solid var(--line-cyan); }
    .data-table--stack th,
    .data-table--stack td {
        display: flex;
        justify-content: space-between;
        gap: 1rem;
        border-bottom: 1px solid var(--line-soft);
        text-align: right;
    }
    .data-table--stack th::before,
    .data-table--stack td::before {
        content: attr(data-label);
        flex-shrink: 0;
        max-width: 50%;
        text-align: left;
        font-weight: 500;
        color: var(--c-text-muted);
    }
}

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

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

.faq-item {
    border-radius: 16px;
    background: #0a1d40;
    border: 1px solid var(--line-soft);
    transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}

.faq-item[open] {
    border-color: var(--line-cyan);
    box-shadow: inset 4px 0 0 var(--c-cyan), -4px 0 18px rgba(62, 240, 255, 0.25);
}

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

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

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

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

.faq-item__icon {
    position: relative;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--line-cyan);
    transition: transform 0.18s var(--ease);
}

.faq-item__icon::before,
.faq-item__icon::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 12px;
    height: 2px;
    border-radius: 2px;
    background: var(--c-cyan);
    transform: translate(-50%, -50%);
}

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

.faq-item[open] .faq-item__icon {
    transform: rotate(45deg);
    box-shadow: 0 0 14px rgba(62, 240, 255, 0.45);
}

.faq-item__answer {
    padding: 0 1.15rem 1.1rem;
    color: var(--c-text-soft);
}

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

/* ============================================
   STEPS
   ============================================ */

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

.steps::before {
    content: '';
    position: absolute;
    left: calc(1.1rem + 23px);
    top: 1.5rem;
    bottom: 1.5rem;
    width: 2px;
    background: linear-gradient(180deg, var(--c-cyan), var(--c-violet));
    box-shadow: 0 0 12px rgba(62, 240, 255, 0.6);
}

.step {
    position: relative;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
    padding: 1rem 1.1rem;
    border-radius: var(--radius);
    background: #0a1d40;
    border: 1px solid var(--line-soft);
}

.step__num {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--c-cyan);
    background: #071633;
    border: 1.5px solid var(--c-cyan);
    box-shadow: 0 0 16px rgba(62, 240, 255, 0.4);
}

.step__title { margin: 0.55rem 0 0.35rem; font-size: 1.1rem; }

.step__text {
    margin: 0;
    font-size: 0.975rem;
    color: var(--c-text-soft);
}

@media (min-width: 1024px) {
    .steps--row {
        grid-auto-flow: column;
        grid-auto-columns: minmax(0, 1fr);
        gap: 1.25rem;
    }
    .steps--row::before {
        left: 2rem;
        right: 2rem;
        top: calc(1.25rem + 24px);
        bottom: auto;
        width: auto;
        height: 2px;
        background: linear-gradient(90deg, var(--c-cyan), var(--c-violet), var(--c-magenta));
    }
    .steps--row .step {
        grid-template-columns: minmax(0, 1fr);
        padding: 1.25rem;
    }
    .steps--row .step__title { margin-top: 0.3rem; }
}

/* ============================================
   LINK CARDS
   ============================================ */

.link-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    min-height: 88px;
    padding: 1.1rem 1.25rem;
    border-radius: var(--radius);
    background: var(--glass-bg);
    border: 1px solid var(--line-cyan);
    color: var(--c-text);
    text-decoration: none;
    transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), transform 0.2s var(--ease);
}

.link-card:hover,
.link-card:focus-visible {
    color: var(--c-text);
    border-color: var(--c-cyan);
    box-shadow: 0 0 26px rgba(62, 240, 255, 0.3);
    transform: translateY(-2px);
}

.link-card__icon {
    display: inline-grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 16px;
    color: var(--c-cyan);
    background: rgba(62, 240, 255, 0.08);
    border: 1px solid var(--line-cyan);
}

.link-card__body { display: grid; gap: 0.2rem; }

.link-card__title {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 600;
    color: #ffffff;
}

.link-card__text {
    font-size: 0.95rem;
    color: var(--c-text-soft);
    line-height: 1.45;
}

.link-card__arrow { color: var(--c-cyan); display: inline-grid; }

/* ============================================
   GAME CARDS & FILTERS
   ============================================ */

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

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

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

.game-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 18px;
    background: linear-gradient(170deg, #0f2b5c 0%, #081a3b 100%);
    border: 1px solid var(--line-cyan);
    box-shadow: inset 0 0 22px rgba(62, 240, 255, 0.06), 0 14px 34px rgba(0, 0, 0, 0.35);
    transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease), transform 0.25s var(--ease);
}

.game-card:hover,
.game-card:focus-within {
    border-color: var(--c-cyan);
    box-shadow: inset 0 0 22px rgba(62, 240, 255, 0.1), 0 0 30px rgba(62, 240, 255, 0.3);
    transform: translateY(-3px);
}

.game-card__art {
    --tone-a: rgba(62, 240, 255, 0.38);
    --tone-b: #8ff7ff;
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    color: var(--tone-b);
    background:
        radial-gradient(circle at 50% 62%, var(--tone-a) 0%, transparent 62%),
        repeating-linear-gradient(90deg, transparent 0 22%, rgba(255, 255, 255, 0.03) 22% 23%),
        linear-gradient(160deg, #13356d, #071633);
    border-bottom: 1px solid var(--line-soft);
}

.game-card__art--violet { --tone-a: rgba(163, 107, 255, 0.45); --tone-b: #d2b6ff; }
.game-card__art--magenta { --tone-a: rgba(255, 95, 215, 0.4); --tone-b: #ffa8ea; }
.game-card__art--gold { --tone-a: rgba(255, 210, 122, 0.38); --tone-b: #ffe2a6; }
.game-card__art--aqua { --tone-a: rgba(47, 230, 197, 0.4); --tone-b: #9ff5e3; }

.game-card__orb {
    position: absolute;
    width: 46%;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 1px solid currentColor;
    box-shadow: 0 0 30px var(--tone-a), inset 0 0 30px var(--tone-a);
}

.game-card__art::before,
.game-card__art::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.35);
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.45), transparent 65%);
}

.game-card__art::before { width: 14px; height: 14px; left: 14%; top: 22%; }
.game-card__art::after { width: 9px; height: 9px; right: 16%; bottom: 20%; }

.game-card__icon {
    position: relative;
    width: 64px;
    height: 64px;
    filter: drop-shadow(0 0 10px currentColor);
}

.game-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 0.5rem;
    padding: 1rem 1.1rem 1.15rem;
}

.game-card__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.game-card__title { margin: 0.15rem 0 0; font-size: 1.15rem; }

.game-card__text {
    margin: 0 0 0.5rem;
    font-size: 0.95rem;
    color: var(--c-text-soft);
}

.game-card .btn { margin-top: auto; align-self: flex-start; }

.filter-bar {
    position: sticky;
    top: calc(var(--header-bottom) + 0.5rem);
    z-index: 20;
    display: grid;
    gap: 0.4rem;
    padding: 0.55rem;
    margin-bottom: 1.5rem;
    border-radius: 24px;
    background: rgba(6, 18, 44, 0.95);
    border: 1px solid var(--line-cyan);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35), 0 0 22px rgba(62, 240, 255, 0.12);
}

.filter-bar__row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--c-cyan) transparent;
}

.filter-bar__label {
    flex-shrink: 0;
    padding-inline: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--c-text-muted);
    white-space: nowrap;
}

.filter-chip {
    flex-shrink: 0;
    min-height: 44px;
    padding: 0.45rem 1rem;
    border-radius: var(--radius-pill);
    border: 1px solid var(--line-soft);
    background: transparent;
    color: var(--c-text);
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.2s var(--ease), box-shadow 0.2s var(--ease), color 0.2s var(--ease);
}

.filter-chip:hover { border-color: var(--line-cyan); background: rgba(62, 240, 255, 0.08); }

.filter-chip[aria-pressed="true"] {
    background: var(--c-cyan);
    border-color: var(--c-cyan);
    color: var(--c-on-cyan);
    box-shadow: 0 0 20px rgba(62, 240, 255, 0.45);
}

.filter-count {
    margin: 0 0 1rem;
    font-size: 0.875rem;
    color: var(--c-text-muted);
}

/* ============================================
   CHIP NAV (jump links)
   ============================================ */

.chip-nav {
    position: sticky;
    top: calc(var(--header-bottom) + 0.5rem);
    z-index: 20;
}

.chip-nav__list {
    position: relative;
    display: flex;
    gap: 0.35rem;
    overflow-x: auto;
    list-style: none;
    margin: 0;
    padding: 0.4rem;
    border-radius: var(--radius-pill);
    background: rgba(6, 18, 44, 0.95);
    border: 1px solid var(--line-cyan);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    scrollbar-width: none;
}

.chip-nav__list::-webkit-scrollbar { display: none; }

.chip-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0.4rem 1rem;
    border-radius: var(--radius-pill);
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--c-text);
    text-decoration: none;
    white-space: nowrap;
}

.chip-nav a:hover { background: rgba(62, 240, 255, 0.12); color: #ffffff; }

.chip-nav a.is-active {
    background: var(--c-cyan);
    color: var(--c-on-cyan);
    box-shadow: 0 0 18px rgba(62, 240, 255, 0.5);
}

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

.cta-band {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(2rem, 5vw, 3.5rem) clamp(1.25rem, 4vw, 3rem);
    text-align: center;
    border-radius: var(--radius-lg);
    background: var(--glass-bg);
    border: 1px solid var(--line-cyan);
    box-shadow: inset 0 0 40px rgba(62, 240, 255, 0.06), var(--shadow-deep);
}

.cta-band__glow {
    position: absolute;
    left: 50%;
    top: 60%;
    z-index: -1;
    width: min(620px, 120%);
    aspect-ratio: 2 / 1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(62, 240, 255, 0.24), rgba(163, 107, 255, 0.16) 45%, transparent 70%);
    filter: blur(10px);
}

.cta-band__title { margin-bottom: 0.5rem; }

.cta-band__text {
    max-width: 60ch;
    margin: 0 auto 1.5rem;
    color: var(--c-text-soft);
}

.cta-band__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
}

.cta-band__note {
    margin: 1.25rem 0 0;
    font-size: 0.875rem;
    color: var(--c-text-muted);
}

.cta-band__bubble {
    position: absolute;
    z-index: -1;
    bottom: -20px;
    border-radius: 50%;
    border: 1px solid rgba(143, 247, 255, 0.45);
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.4), transparent 65%);
    animation: band-bubble 12s linear infinite;
}

.cta-band__bubble--1 { left: 10%; width: 16px; height: 16px; }
.cta-band__bubble--2 { left: 82%; width: 10px; height: 10px; animation-delay: -5s; animation-duration: 10s; }
.cta-band__bubble--3 { left: 64%; width: 20px; height: 20px; animation-delay: -8s; animation-duration: 15s; }

@keyframes band-bubble {
    from { transform: translateY(0); }
    to { transform: translateY(-420px); }
}

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

.site-footer {
    margin-top: clamp(2rem, 5vw, 4rem);
    color: var(--c-text-soft);
}

.site-footer__wave {
    display: block;
    width: 100%;
    height: clamp(56px, 8vw, 110px);
    margin-bottom: -1px;
}

.site-footer__wave-line { filter: drop-shadow(0 0 6px rgba(62, 240, 255, 0.7)); }

.site-footer__body {
    background: var(--c-abyss);
    padding: clamp(1.5rem, 4vw, 2.5rem) 0 2rem;
}

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

.footer-rg__badges {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.9rem;
}

.age-badge {
    display: inline-grid;
    place-items: center;
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 2px solid var(--c-magenta);
    box-shadow: 0 0 16px rgba(255, 95, 215, 0.4);
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 700;
    color: #ffffff;
}

.footer-rg__icon {
    width: 48px;
    height: 48px;
    color: var(--c-aqua);
}

.footer-rg__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 600;
    color: #ffffff;
}

.footer-rg__text {
    margin: 0;
    font-size: 0.9375rem;
    color: var(--c-text-muted);
}

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

.footer-nav__title {
    margin: 0 0 0.5rem;
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--c-cyan);
}

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

.footer-nav a,
.footer-nav__button {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 0.975rem;
    color: var(--c-text-soft);
    text-decoration: none;
    cursor: pointer;
}

.footer-nav a:hover,
.footer-nav__button:hover,
.footer-nav a[aria-current="page"] {
    color: var(--c-cyan);
    text-decoration: underline;
}

.footer-brand__meta {
    margin: 0.75rem 0 0;
    font-size: 0.9375rem;
    color: var(--c-text-muted);
}

.site-brand--footer {
    display: flex;
    width: fit-content;
}

.site-brand--footer .site-brand__mark { width: 52px; height: 52px; }

.footer-legal {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--line-soft);
    font-size: 0.875rem;
    color: var(--c-text-muted);
}

.footer-legal p { max-width: 110ch; }

.footer-legal__copy { margin-bottom: 0; }

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

@media (min-width: 1024px) {
    .site-footer__grid {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.3fr) minmax(0, 0.9fr);
        align-items: start;
    }
    .footer-brand {
        grid-column: auto;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        text-align: right;
    }
}

/* ============================================
   COOKIE BANNER (RODO)
   ============================================ */

.cookie-banner {
    position: fixed;
    left: 0.75rem;
    right: 0.75rem;
    bottom: 0.75rem;
    z-index: 60;
    max-width: 460px;
    margin-left: auto;
    padding: 1.15rem;
    border-radius: var(--radius);
    background: #0a1d40;
    border: 1px solid var(--line-cyan);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55), 0 0 30px rgba(62, 240, 255, 0.14);
    animation: cookie-in 0.3s var(--ease);
}

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

.cookie-banner__title {
    margin: 0 0 0.35rem;
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 600;
    color: #ffffff;
}

.cookie-banner__text {
    margin: 0 0 0.6rem;
    font-size: 0.9375rem;
    color: var(--c-text-soft);
    line-height: 1.5;
}

.cookie-banner__summary {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-weight: 600;
    color: var(--c-cyan-soft);
    text-decoration: underline;
    text-underline-offset: 0.2em;
    cursor: pointer;
    list-style: none;
}

.cookie-banner__summary::-webkit-details-marker { display: none; }
.cookie-banner__summary::marker { content: ''; }

.cookie-banner__fieldset {
    display: grid;
    gap: 0.5rem;
    margin: 0.25rem 0 0.75rem;
    padding: 0;
    border: 0;
}

.cookie-option {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-size: 0.9375rem;
    color: var(--c-text-soft);
    cursor: pointer;
}

.cookie-option input {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-top: 0.15rem;
    accent-color: var(--c-cyan);
}

.cookie-banner__save { margin-bottom: 0.5rem; }

.cookie-banner__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 0.5rem;
}

.cookie-banner__actions .btn { flex: 1 1 160px; }

/* ============================================
   HOME PAGE
   ============================================ */

/* Hero composition: head / mascot / body (mobile), 46/54 split (desktop) */
.hero--home .hero__grid {
    grid-template-areas: "head" "media" "body";
    row-gap: 1.25rem;
}

.hero__head {
    grid-area: head;
    max-width: 640px;
}

.hero__head h1 { margin-bottom: 0; }

.hero--home .hero__media { grid-area: media; }

.hero__body {
    grid-area: body;
    max-width: 640px;
}

.hero__body .fact-strip { margin-top: 1.25rem; }

.hero-offer__note { margin: 0.85rem 0 0; }

@media (min-width: 768px) {
    .hero__body .fact { padding: 0.85rem 0.35rem; }
    .hero__body .fact__value { font-size: clamp(1.15rem, 0.95rem + 0.6vw, 1.45rem); }
    .hero__body .fact__label { font-size: 0.875rem; }
}

@media (min-width: 1024px) {
    .hero--home .hero__grid {
        grid-template-areas: "head media" "body media";
        row-gap: 1.25rem;
    }
    .hero__head { align-self: end; }
    .hero__body { align-self: start; }
    .hero--home .mascot { width: min(100%, 600px); }
}

/* Welcome package */
.welcome__aside {
    display: grid;
    gap: 1rem;
}

.welcome__copy .btn-row { margin-top: 1.5rem; }

/* Popular slots on the reef scene */
.slots-scene { padding-block: calc(var(--section-space) * 1.15); }

.slots-frame {
    padding: clamp(1rem, 3vw, 2rem);
    border-radius: var(--radius-lg);
    background: rgba(5, 15, 38, 0.62);
    border: 1px solid var(--line-cyan);
    box-shadow: inset 0 0 40px rgba(62, 240, 255, 0.07), 0 0 40px rgba(62, 240, 255, 0.16);
}

.provider-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem 0.9rem;
    margin-top: 1.5rem;
}

.provider-row__label {
    margin: 0;
    font-weight: 600;
    color: var(--c-text-soft);
}

.provider-row__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.slots-frame__note { margin: 1rem 0 0; }

.section-cta {
    display: flex;
    justify-content: center;
    margin: 2rem 0 0;
}

/* Live casino duo */
.live-duo {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: minmax(0, 1fr);
}

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

.live-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: var(--glass-bg);
    border: 1px solid var(--line-cyan);
    box-shadow: inset 0 0 30px rgba(62, 240, 255, 0.06), var(--shadow-deep);
}

.live-card__media {
    position: relative;
    aspect-ratio: 1024 / 780;
    overflow: hidden;
}

.live-card__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 0% 50%;
}

.live-card--right .live-card__media img { object-position: 100% 50%; }

.live-card__media::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(5, 15, 38, 0.88) 0%, rgba(5, 15, 38, 0.3) 30%, transparent 48%),
        linear-gradient(180deg, transparent 72%, rgba(8, 22, 52, 0.95) 100%);
}

.live-card__title {
    position: absolute;
    z-index: 1;
    top: 1.1rem;
    left: 1.25rem;
    right: 1.25rem;
    margin: 0;
    font-size: clamp(1.4rem, 1.15rem + 1vw, 1.9rem);
    font-weight: 700;
    text-shadow: 0 2px 14px rgba(3, 10, 28, 0.9);
}

.live-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 0.5rem;
    padding: 1.1rem 1.25rem 1.4rem;
}

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

.live-card__body .btn {
    margin-top: auto;
    align-self: flex-start;
}

.live__note { margin-top: 1.5rem; }

/* Crash & instant */
.instant-list {
    display: grid;
    gap: 0.7rem;
    grid-template-columns: minmax(0, 1fr);
    list-style: none;
    margin: 0 0 1.25rem;
    padding: 0;
}

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

.instant-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0.9rem;
    border-radius: 16px;
    background: #0a1d40;
    border: 1px solid var(--line-soft);
    font-size: 0.9375rem;
    color: var(--c-text-soft);
    line-height: 1.35;
}

.instant-item strong {
    display: block;
    font-family: var(--font-display);
    font-size: 1.05rem;
}

.instant-item__icon {
    display: inline-grid;
    place-items: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    color: var(--c-cyan);
    background: rgba(62, 240, 255, 0.08);
    border: 1px solid var(--line-cyan);
}

.crash__cta { margin-top: 1.25rem; }

.crash__art {
    position: relative;
    width: min(100%, 540px);
    margin-inline: auto;
}

.crash__streak {
    position: absolute;
    left: 50%;
    top: -12%;
    z-index: 0;
    width: 55%;
    height: 130%;
    transform: translateX(-50%);
    filter: drop-shadow(0 0 10px rgba(62, 240, 255, 0.55));
    pointer-events: none;
}

.crash__art .integrated-art {
    position: relative;
    z-index: 1;
}

/* About Fugu */
.about-panel {
    display: grid;
    gap: clamp(1.25rem, 3vw, 2.5rem);
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
}

@media (min-width: 1024px) {
    .about-panel { grid-template-columns: minmax(0, 40fr) minmax(0, 60fr); }
}

.about-console {
    padding: 1rem;
    border-radius: var(--radius);
    background: radial-gradient(circle at 50% 40%, rgba(62, 240, 255, 0.12), transparent 65%), #061430;
    border: 1px solid var(--line-soft);
}

.about-console__svg {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 0 8px rgba(62, 240, 255, 0.35));
}

.about-facts {
    display: grid;
    gap: 0.6rem;
    grid-template-columns: minmax(0, 1fr);
    margin: 0 0 1.25rem;
}

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

.about-fact {
    padding: 0.75rem 1rem;
    border-radius: 14px;
    background: #071633;
    border: 1px solid var(--line-soft);
}

.about-fact dt {
    font-size: 0.875rem;
    color: var(--c-text-muted);
}

.about-fact dd {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 600;
    color: #ffffff;
    overflow-wrap: anywhere;
}

.about-panel__disclaimer {
    padding-left: 0.9rem;
    border-left: 3px solid var(--c-magenta);
    font-size: 0.9375rem;
    color: var(--c-text-soft);
}

.about-read {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.about-read p { margin: 0; }

.about-read__icon {
    display: inline-grid;
    flex-shrink: 0;
    color: var(--c-aqua);
}

/* Payments teaser */
.pay-teaser__wave {
    position: absolute;
    left: 0;
    top: 50%;
    z-index: 0;
    width: 100%;
    height: clamp(200px, 30vw, 300px);
    transform: translateY(-50%);
    pointer-events: none;
}

.pay-teaser .container {
    position: relative;
    z-index: 1;
}

.pay-teaser__copy p { color: var(--c-text-soft); }

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

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

.pay-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    padding: 1rem 0.75rem;
    border-radius: 18px;
    background: rgba(10, 29, 64, 0.92);
    border: 1px solid var(--line-cyan);
    box-shadow: inset 0 0 18px rgba(62, 240, 255, 0.08), 0 0 20px rgba(62, 240, 255, 0.12);
    text-align: center;
}

.pay-tile__icon {
    display: inline-grid;
    color: var(--c-cyan);
    filter: drop-shadow(0 0 6px rgba(62, 240, 255, 0.5));
}

.pay-tile__name {
    font-family: var(--font-display);
    font-weight: 600;
    color: #ffffff;
}

.pay-tile__note {
    font-size: 0.875rem;
    color: var(--c-text-muted);
    line-height: 1.3;
}

/* Responsible play */
.rg-panel {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
}

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

.rg-panel__age {
    width: 76px;
    height: 76px;
    font-size: 1.45rem;
}

.rg-panel__copy p { color: var(--c-text-soft); }
.rg-panel__copy > :last-child { margin-bottom: 0; }

.home-links { margin-top: 2.5rem; }

.home-links__title { margin-bottom: 1rem; }

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

/* ============================================
   MOTION CONTROL
   ============================================ */

.motion-paused *,
.motion-paused *::before,
.motion-paused *::after,
.is-offscreen,
.is-offscreen *,
.is-offscreen *::before,
.is-offscreen *::after {
    animation-play-state: paused !important;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
    .ocean-bubble,
    .mascot__bubble,
    .cta-band__bubble { display: none; }
}

/* ============================================
   BONUSY PAGE
   ============================================ */

.hero--bonusy .hero__copy { max-width: 640px; }
.hero--bonusy .hero__copy p { color: var(--c-text-soft); }
.hero--bonusy .hero__copy .updated { color: var(--c-text-muted); }

.bonus-hero-media {
    position: relative;
    width: min(78%, 420px);
    margin-inline: auto;
}

.bonus-hero-media .mascot { width: 100%; z-index: 1; }
.bonus-hero-media .mascot__ring { display: none; }

.bonus-rings {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.bonus-ring {
    position: absolute;
    left: 50%;
    top: 80%;
    aspect-ratio: 3 / 1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 2px solid var(--c-cyan);
    box-shadow: 0 0 18px rgba(62, 240, 255, 0.55), inset 0 0 18px rgba(62, 240, 255, 0.3);
}

.bonus-ring--1 { width: 100%; }
.bonus-ring--2 { width: 74%; border-color: var(--c-violet); box-shadow: 0 0 18px rgba(163, 107, 255, 0.55), inset 0 0 18px rgba(163, 107, 255, 0.3); }
.bonus-ring--3 { width: 48%; border-color: var(--c-magenta); box-shadow: 0 0 18px rgba(255, 95, 215, 0.55), inset 0 0 18px rgba(255, 95, 215, 0.3); }

@media (min-width: 1024px) {
    .bonus-hero-media { width: min(100%, 560px); }
}

@media (max-width: 479.98px) {
    .bonus-hero-media { width: min(70%, 300px); }
}

/* Spec list (definition rows) */
.spec-list {
    display: grid;
    gap: 0;
    margin: 0.75rem 0 0;
}

.spec-list > div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--line-soft);
}

.spec-list > div:last-child { border-bottom: 0; }
.spec-list dt { color: var(--c-text-muted); font-size: 0.9375rem; }
.spec-list dd { margin: 0; text-align: right; font-weight: 600; color: #ffffff; }

/* Welcome package on the current */
.bonus-steps {
    position: relative;
    isolation: isolate;
    margin-top: 1.75rem;
}

.bonus-steps__current {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    filter: drop-shadow(0 0 8px rgba(62, 240, 255, 0.5));
}

.bonus-steps__current--h { display: none; }

.bonus-steps__glow {
    position: absolute;
    left: 50%;
    bottom: -30px;
    z-index: 0;
    width: 280px;
    height: 200px;
    transform: translateX(-50%);
    background: radial-gradient(ellipse at center, rgba(163, 107, 255, 0.45), rgba(62, 240, 255, 0.18) 50%, transparent 72%);
    filter: blur(8px);
    pointer-events: none;
}

.bonus-steps__grid {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 1.5rem;
    grid-template-columns: minmax(0, 1fr);
    list-style: none;
    margin: 0;
    padding: 0;
}

.step-card {
    position: relative;
    overflow: hidden;
    padding: clamp(1.25rem, 3vw, 1.75rem);
    border-radius: var(--radius-lg);
    background: linear-gradient(160deg, rgba(20, 52, 102, 0.94), rgba(8, 22, 52, 0.96));
    border: 1px solid var(--line-cyan);
    box-shadow: inset 0 0 36px rgba(62, 240, 255, 0.06), var(--shadow-deep);
}

.step-card::before {
    content: attr(data-num);
    position: absolute;
    right: 0.75rem;
    top: -1.25rem;
    font-family: var(--font-display);
    font-size: 9rem;
    font-weight: 700;
    line-height: 1;
    color: rgba(62, 240, 255, 0.12);
    pointer-events: none;
}

.step-card > * { position: relative; }

.step-card__tag {
    margin: 0 0 0.35rem;
    font-family: var(--font-display);
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--c-aqua);
}

.step-card__title {
    margin-bottom: 0.4rem;
    font-size: clamp(1.4rem, 1.15rem + 1vw, 1.8rem);
    color: var(--c-cyan-soft);
}

.step-card p { color: var(--c-text-soft); }

@media (min-width: 1024px) {
    .bonus-steps__current--v { display: none; }
    .bonus-steps__current--h { display: block; }
    .bonus-steps__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1.75rem;
        padding-top: 3.25rem;
        align-items: start;
    }
    .step-card:nth-child(2) { margin-top: 2rem; }
    .bonus-steps__glow { left: auto; right: 3%; bottom: auto; top: 28%; transform: none; width: 320px; height: 220px; }
}

/* Free spins */
.spins-panel { display: grid; gap: 1.25rem; }

.spins-chart {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 0 8px rgba(62, 240, 255, 0.3));
}

.data-table--compact { min-width: 380px; }

/* Conditions */
.cond-panel {
    border: 2px solid var(--c-cyan);
    box-shadow: inset 0 0 50px rgba(62, 240, 255, 0.1), 0 0 44px rgba(62, 240, 255, 0.28), var(--shadow-deep);
    padding: clamp(1.25rem, 3.5vw, 2.5rem);
}

.cond-panel > p { color: var(--c-text-soft); max-width: 72ch; }

.cond-warn {
    display: inline-block;
    vertical-align: -3px;
    margin-right: 0.4rem;
    color: var(--c-magenta);
    filter: drop-shadow(0 0 6px rgba(255, 95, 215, 0.55));
}

.table-scroll--cond { margin-top: 1.25rem; }

.precheck {
    display: grid;
    gap: 0.6rem;
    grid-template-columns: minmax(0, 1fr);
    list-style: none;
    margin: 1.5rem 0 0;
    padding: 0.9rem;
    border-radius: var(--radius);
    background: #061430;
    border: 1px dashed var(--line-cyan);
}

.precheck__title {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--c-cyan);
}

.precheck__item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    color: var(--c-text-soft);
    font-size: 0.9375rem;
}

.precheck__item .icon { color: var(--c-aqua); flex-shrink: 0; }

@media (min-width: 768px) {
    .precheck { grid-template-columns: auto repeat(3, minmax(0, 1fr)); align-items: center; gap: 1.25rem; padding: 0.9rem 1.25rem; }
}

.cond-notes { display: grid; gap: 1rem; margin-top: 1.5rem; }
.cond-notes > p { margin: 0; color: var(--c-text-soft); }

/* Rakeback */
.rb-group {
    position: relative;
    isolation: isolate;
    padding: 1rem 0;
}

.rb-group::before {
    content: '';
    position: absolute;
    inset: -10% -5%;
    z-index: -1;
    background: radial-gradient(ellipse at 50% 35%, rgba(62, 240, 255, 0.16), rgba(163, 107, 255, 0.1) 45%, transparent 70%);
    pointer-events: none;
}

.rb-orbit { display: none; }

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

.rb-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.9rem;
}

.rb-counter {
    flex-shrink: 0;
    filter: drop-shadow(0 0 12px rgba(62, 240, 255, 0.45));
}

.rb-card {
    flex: 1;
    width: 100%;
    padding: 1.15rem 1.25rem;
    border-radius: var(--radius);
    background: var(--glass-bg);
    border: 1px solid var(--line-cyan);
    box-shadow: inset 0 0 24px rgba(62, 240, 255, 0.05);
}

.rb-card h3 { margin-bottom: 0.4rem; }
.rb-card p { color: var(--c-text-soft); }
.rb-card > :last-child { margin-bottom: 0; }

@media (min-width: 768px) {
    .rb-group__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
    .rb-orbit {
        display: block;
        position: absolute;
        left: 0;
        top: 1rem;
        width: 100%;
        height: 120px;
        z-index: 0;
        filter: drop-shadow(0 0 6px rgba(62, 240, 255, 0.5));
        pointer-events: none;
    }
    .rb-counter { position: relative; z-index: 1; }
}

.rb-note {
    display: grid;
    gap: 0.75rem;
    justify-items: start;
    max-width: 78ch;
    margin: 2rem auto 0;
}

.rb-note p { color: var(--c-text-soft); margin: 0; }

/* Reload & sports */
.bonus-tiles { position: relative; isolation: isolate; }

.bonus-tiles__wave {
    position: absolute;
    left: 0;
    bottom: -20px;
    z-index: 0;
    width: 100%;
    height: 160px;
    filter: drop-shadow(0 0 8px rgba(62, 240, 255, 0.5));
    pointer-events: none;
}

.bonus-tiles__grid {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 1fr);
}

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

.bonus-tile {
    padding: clamp(1.15rem, 2.5vw, 1.6rem);
    border-radius: var(--radius);
    background: linear-gradient(160deg, rgba(20, 52, 102, 0.95), rgba(8, 22, 52, 0.97));
    border: 1px solid var(--line-cyan);
    box-shadow: inset 0 0 24px rgba(62, 240, 255, 0.05), var(--shadow-deep);
}

.bonus-tile__icon {
    display: inline-grid;
    place-items: center;
    width: 64px;
    height: 64px;
    margin-bottom: 0.9rem;
    border-radius: 18px;
    color: var(--c-cyan);
    background: rgba(62, 240, 255, 0.08);
    border: 1px solid var(--line-cyan);
    box-shadow: 0 0 18px rgba(62, 240, 255, 0.2);
}

.bonus-tile p { color: var(--c-text-soft); }
.bonus-tile .small-print { margin-bottom: 0; }

/* Withdrawal flow */
.flow {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: minmax(0, 1fr);
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
}

.flow__node {
    position: relative;
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    column-gap: 0.9rem;
    align-items: center;
    padding: 0.8rem 1rem;
    border-radius: var(--radius);
    background: #0a1d40;
    border: 1px solid var(--line-cyan);
    color: var(--c-text-soft);
    font-size: 0.9375rem;
}

.flow__node strong { grid-column: 2; font-family: var(--font-display); font-size: 1.05rem; }
.flow__node > span:last-child { grid-column: 2; }

.flow__icon {
    grid-column: 1;
    grid-row: 1 / span 2;
    display: inline-grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    color: var(--c-cyan);
    background: #071633;
    border: 1.5px solid var(--c-cyan);
    box-shadow: 0 0 14px rgba(62, 240, 255, 0.35);
}

@media (min-width: 1024px) {
    .flow { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.5rem; }
    .flow__node {
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;
        text-align: center;
        row-gap: 0.25rem;
        padding: 1.1rem 0.75rem;
    }
    .flow__icon { grid-column: 1; grid-row: auto; margin-bottom: 0.4rem; }
    .flow__node strong, .flow__node > span:last-child { grid-column: 1; }
    .flow__node:not(:last-child)::after {
        content: '';
        position: absolute;
        left: 100%;
        top: 50%;
        width: 1.5rem;
        height: 2px;
        background: linear-gradient(90deg, var(--c-cyan), var(--c-violet));
        box-shadow: 0 0 8px rgba(62, 240, 255, 0.6);
    }
}

.flow-notes {
    display: grid;
    gap: 0.75rem;
    align-items: start;
    grid-template-columns: minmax(0, 1fr);
}

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

.flow-notes .faq-item__q { font-size: 1rem; }
.withdraw-link { margin: 1.25rem 0 0; text-align: center; color: var(--c-text-soft); }

/* How to check */
.how { position: relative; }

.how__line { display: none; }

.how__list {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 0.8rem;
    grid-template-columns: minmax(0, 1fr);
    list-style: none;
    margin: 0;
    padding: 0;
}

.how__item {
    position: relative;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    column-gap: 0.9rem;
    padding: 0.9rem 1rem;
    border-radius: var(--radius);
    background: #0a1d40;
    border: 1px solid var(--line-soft);
}

.how__item h3 { grid-column: 2; margin: 0 0 0.2rem; font-size: 1.05rem; }
.how__item p { grid-column: 2; margin: 0; font-size: 0.9375rem; color: var(--c-text-soft); }

.how__num {
    grid-column: 1;
    grid-row: 1 / span 2;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--c-cyan);
    background: #071633;
    border: 1.5px solid var(--c-cyan);
    box-shadow: 0 0 14px rgba(62, 240, 255, 0.4);
}

@media (min-width: 1024px) {
    .how__line {
        display: block;
        position: absolute;
        left: 0;
        top: 22px;
        z-index: 0;
        width: 100%;
        height: 40px;
        transform: translateY(-50%);
        filter: drop-shadow(0 0 6px rgba(62, 240, 255, 0.6));
    }
    .how__list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
    .how__item {
        grid-template-columns: minmax(0, 1fr);
        padding: 0 1rem 1.1rem;
        background: transparent;
        border: 0;
        text-align: center;
        justify-items: center;
    }
    .how__item h3, .how__item p { grid-column: 1; }
    .how__num { grid-column: 1; grid-row: auto; margin-bottom: 0.8rem; }
    .how__item h3, .how__item p { background: transparent; }
}

/* Trust */
.trust-panel > p { color: var(--c-text-soft); max-width: 74ch; }
.trust-panel .small-print { margin-bottom: 0; }

.trust-strip {
    display: grid;
    gap: 0.6rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    list-style: none;
    margin: 1.25rem 0;
    padding: 0;
}

.trust-strip li {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.75rem 0.9rem;
    border-radius: 14px;
    background: #071633;
    border: 1px solid var(--line-soft);
    font-family: var(--font-display);
    font-weight: 600;
    color: #ffffff;
}

.trust-strip .icon { color: var(--c-aqua); flex-shrink: 0; }

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

.callout-wrap { margin-top: 1.5rem; }

#zobacz-tez .lead { margin-bottom: 1.5rem; }

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

@media (prefers-reduced-motion: reduce) {
    .faq-item, .faq-item__icon { transition: none !important; }
}

/* ============================================
   GRY PAGE
   ============================================ */

.hero--games .hero__copy { max-width: 640px; }
.hero--games .hero__copy p { color: var(--c-text-soft); }
.hero--games .hero__copy .eyebrow { color: var(--c-aqua); }
.hero--games .breadcrumbs ol { margin-bottom: 1rem; }

.hero-portals-wrap {
    display: flex;
    align-items: flex-end;
}

.hero-portals {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.6rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.portal-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    min-height: 64px;
    padding: 0.6rem 0.4rem;
    border-radius: var(--radius);
    background: rgba(6, 18, 44, 0.88);
    border: 1px solid var(--line-cyan);
    box-shadow: inset 0 0 18px rgba(62, 240, 255, 0.08), 0 0 20px rgba(62, 240, 255, 0.16);
    font-family: var(--font-display);
    font-weight: 600;
    color: #ffffff;
    text-decoration: none;
    transition: box-shadow 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.25s var(--ease);
}

.portal-label .icon { color: var(--c-cyan); }

.portal-label:hover,
.portal-label:focus-visible {
    color: #ffffff;
    border-color: var(--c-cyan);
    box-shadow: 0 0 28px rgba(62, 240, 255, 0.4);
    transform: translateY(-2px);
}

@media (min-width: 1024px) {
    .hero--games .hero__grid { align-items: stretch; }
    .hero-portals-wrap { min-height: 380px; padding-bottom: 0.5rem; }
}

/* Catalogue filters */
.catalog .filter-bar,
.catalog .filter-count {
    width: min(var(--container), 100% - 2 * var(--gutter));
    margin-inline: auto;
}

.catalog .filter-bar { margin-bottom: 0.6rem; }
.catalog .filter-count { margin-bottom: 0; }

.filter-head { padding-bottom: 0; }

.filter-bar__sep {
    flex-shrink: 0;
    align-self: stretch;
    width: 1px;
    margin-inline: 0.4rem;
    background: var(--line-cyan);
}

@media (max-width: 767.98px) {
    .filter-bar { position: static; }
}

/* Slots scene */
.slots-intro { margin-bottom: 2rem; align-items: center; }

.slots-intro__copy {
    padding: clamp(1rem, 3vw, 1.5rem);
    border-radius: var(--radius-lg);
    background: rgba(5, 15, 38, 0.7);
    border: 1px solid var(--line-soft);
}

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

.slots-intro__art { width: min(100%, 420px); margin-inline: auto; }

/* Live casino */
.live-stage {
    display: grid;
    gap: 1.25rem;
    align-items: center;
    grid-template-columns: minmax(0, 1fr);
    margin-bottom: 1.75rem;
}

.live-stage__copy {
    padding: clamp(1rem, 3vw, 1.75rem);
    border-radius: var(--radius-lg);
    background: linear-gradient(90deg, rgba(5, 15, 38, 0.94), rgba(5, 15, 38, 0.6) 75%, rgba(5, 15, 38, 0));
}

.live-stage__copy > :last-child { margin-bottom: 0; }
.live-stage__art { width: min(100%, 620px); margin-inline: auto; }

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

.live-features {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: minmax(0, 1fr);
    margin-bottom: 1.25rem;
}

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

.live-feature {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    padding: clamp(1.15rem, 3vw, 1.75rem);
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, rgba(6, 20, 48, 0.98), rgba(18, 48, 95, 0.85));
    border: 1px solid var(--line-cyan);
    box-shadow: inset 0 0 30px rgba(62, 240, 255, 0.06), var(--shadow-deep);
}

.live-feature h3 { margin: 0.2rem 0 0; font-size: clamp(1.4rem, 1.15rem + 1vw, 1.9rem); }
.live-feature p { color: var(--c-text-soft); margin-bottom: 0.4rem; }
.live-feature .spec-list { width: 100%; margin-bottom: 0.75rem; }
.live-feature .btn { margin-top: auto; }

.live-table-wrap__note { margin: 0.75rem 0 0; }

/* Crash & instant */
.crash-games__split { margin-bottom: 1.5rem; }
.crash-games__copy > :last-child { margin-bottom: 0; }
.crash-games .crash__art { width: min(100%, 460px); }
.crash-alert { margin-bottom: 1.5rem; }
.crash-alert .callout { border-left-width: 6px; }

/* Provider strip */
.provider-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.9rem 1.5rem;
    list-style: none;
    margin: 0;
    padding: 1.15rem 1.5rem;
    border-radius: var(--radius-lg);
    background: rgba(10, 29, 64, 0.85);
    border: 1px solid var(--line-cyan);
    box-shadow: inset 0 0 26px rgba(62, 240, 255, 0.07), 0 0 24px rgba(62, 240, 255, 0.12);
}

.provider-strip__name {
    font-family: var(--font-display);
    font-size: clamp(1.1rem, 1rem + 0.6vw, 1.5rem);
    font-weight: 700;
    color: #ffffff;
}

.provider-strip__sep {
    display: inline-grid;
    color: var(--c-cyan);
    filter: drop-shadow(0 0 6px rgba(62, 240, 255, 0.7));
}

/* Mobile play */
.phone-wrap { display: flex; justify-content: center; }

.phone {
    position: relative;
    display: grid;
    gap: 0.6rem;
    align-content: center;
    width: min(240px, 70%);
    min-height: 400px;
    padding: 2.2rem 0.8rem 1.2rem;
    border-radius: 34px;
    background: #061430;
    border: 2px solid var(--c-cyan);
    box-shadow: 0 0 30px rgba(62, 240, 255, 0.3), inset 0 0 30px rgba(62, 240, 255, 0.08);
}

.phone__notch {
    position: absolute;
    top: 0.7rem;
    left: 50%;
    width: 64px;
    height: 8px;
    transform: translateX(-50%);
    border-radius: 6px;
    background: var(--c-navy-700);
}

.phone__tile {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.85rem 0.8rem;
    border-radius: 14px;
    background: linear-gradient(160deg, #13356d, #0a1d40);
    border: 1px solid var(--line-soft);
    font-family: var(--font-display);
    font-weight: 600;
    color: #ffffff;
}

.phone__tile .icon { color: var(--c-cyan); }

.mobile-play__copy .check-list { margin-top: 1rem; }

/* RTP note & PAA */
.rtp-note h2 { text-align: center; }
.games-paa .glass-card h3 { margin-bottom: 0.4rem; }
.games-paa .glass-card p { color: var(--c-text-soft); }

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

.rg-panel__copy .btn-row { margin-top: 1.25rem; }

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

.hero--vip .hero__copy { max-width: 640px; }
.hero--vip .hero__copy p { color: var(--c-text-soft); }
.hero--vip .breadcrumbs ol { margin-bottom: 1rem; }

.vip-hero-media {
    position: relative;
    width: min(78%, 420px);
    margin-inline: auto;
}

.vip-hero-media .mascot { width: 100%; z-index: 1; }
.vip-hero-media .mascot__ring { display: none; }

.vip-rings {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.vip-ring {
    position: absolute;
    left: 50%;
    top: 50%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 2px solid var(--c-cyan);
}

.vip-ring--1 { width: 112%; border-color: rgba(62, 240, 255, 0.28); box-shadow: 0 0 14px rgba(62, 240, 255, 0.18); }
.vip-ring--2 { width: 92%; border-color: rgba(62, 240, 255, 0.5); box-shadow: 0 0 18px rgba(62, 240, 255, 0.3); }
.vip-ring--3 { width: 72%; border-color: rgba(163, 107, 255, 0.75); box-shadow: 0 0 22px rgba(163, 107, 255, 0.4); }
.vip-ring--4 { width: 52%; border-color: var(--c-gold); box-shadow: 0 0 26px rgba(255, 210, 122, 0.45); }

@media (min-width: 1024px) {
    .vip-hero-media { width: min(100%, 540px); }
}

@media (max-width: 479.98px) {
    .vip-hero-media { width: min(66%, 280px); }
}

/* Tier ladder */
.tier-ladder__stage { position: relative; isolation: isolate; }

.tier-ladder__line { display: none; }

.tier-ladder__grid {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 1fr);
    list-style: none;
    margin: 0;
    padding: 0;
}

.tier {
    padding: 1.25rem;
    border-radius: var(--radius-lg);
    background: linear-gradient(160deg, rgba(20, 52, 102, 0.95), rgba(8, 22, 52, 0.97));
    border: 1px solid var(--line-cyan);
    box-shadow: inset 0 0 30px rgba(62, 240, 255, 0.05), var(--shadow-deep);
}

.tier p { color: var(--c-text-soft); margin-bottom: 0; }
.tier__name { margin: 0.6rem 0 0.4rem; font-size: 1.4rem; }
.tier__badge { display: block; filter: drop-shadow(0 0 8px currentColor); }

.tier--standard .tier__badge { color: var(--c-cyan); }
.tier--regular .tier__badge { color: var(--c-cyan-soft); }
.tier--captain { border-color: rgba(163, 107, 255, 0.7); }
.tier--captain .tier__badge { color: var(--c-violet-soft); }
.tier--legend { border-color: rgba(255, 210, 122, 0.65); box-shadow: inset 0 0 30px rgba(255, 210, 122, 0.08), 0 0 28px rgba(255, 210, 122, 0.18), var(--shadow-deep); }
.tier--legend .tier__badge { color: var(--c-gold); }

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

@media (min-width: 1024px) {
    .tier-ladder__line {
        display: block;
        position: absolute;
        inset: 0;
        z-index: 0;
        width: 100%;
        height: 100%;
        filter: drop-shadow(0 0 8px rgba(62, 240, 255, 0.5));
        pointer-events: none;
    }
    .tier-ladder__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; padding-top: 0; align-items: start; }
    .tier--standard { margin-top: 5rem; }
    .tier--regular { margin-top: 3.5rem; }
    .tier--captain { margin-top: 1.75rem; }
    .tier--legend { margin-top: 0; }
}

/* Comparison table */
.vip-table { min-width: 760px; }
.vip-table td { min-width: 150px; }
.vip-compare__notes { display: grid; gap: 0.75rem; margin-top: 1.25rem; }
.vip-compare__notes .small-print { margin: 0; }

/* Promotion path */
.path-flow { position: relative; isolation: isolate; }

.path-flow__wave { display: none; }

.path-flow__steps {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 1fr);
    list-style: none;
    margin: 0;
    padding: 0;
}

.path-step {
    padding: 1.25rem;
    border-radius: var(--radius-lg);
    background: #0a1d40;
    border: 1px solid var(--line-cyan);
    box-shadow: inset 0 0 24px rgba(62, 240, 255, 0.05);
}

.path-step h3 { margin: 0.7rem 0 0.4rem; }
.path-step p { margin: 0; color: var(--c-text-soft); font-size: 0.975rem; }

.path-step__num {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--c-cyan);
    background: #071633;
    border: 1.5px solid var(--c-cyan);
    box-shadow: 0 0 16px rgba(62, 240, 255, 0.4);
}

.path-flow__end {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.5rem;
    margin: 1.5rem 0 0;
}

.path-flow__note { margin: 1rem 0 0; }

@media (min-width: 1024px) {
    .path-flow__wave {
        display: block;
        position: absolute;
        left: 0;
        top: 24px;
        z-index: 0;
        width: 100%;
        height: 80px;
        filter: drop-shadow(0 0 6px rgba(62, 240, 255, 0.6));
        pointer-events: none;
    }
    .path-flow__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
}

/* Rakeback rings */
.rakeback-vip__art { width: min(100%, 380px); margin-inline: auto; }

.rb-rings {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 0 12px rgba(62, 240, 255, 0.3));
}

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

.rb-legend li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.65rem;
    padding: 0.8rem 1rem;
    border-radius: 14px;
    background: #0a1d40;
    border: 1px solid var(--line-soft);
    color: var(--c-text-soft);
    font-size: 0.9375rem;
}

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

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

/* Service cards */
.vip-service__grid {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: minmax(0, 1fr);
}

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

.vip-card {
    padding: clamp(1.25rem, 3vw, 2rem);
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, rgba(6, 20, 48, 0.98), rgba(18, 48, 95, 0.85));
    border: 1px solid var(--line-cyan);
    box-shadow: inset 0 0 30px rgba(62, 240, 255, 0.06), var(--shadow-deep);
}

.vip-card h3 { margin-top: 0.9rem; }
.vip-card p { color: var(--c-text-soft); margin-bottom: 0; }

.vip-card__icon {
    display: inline-grid;
    place-items: center;
    width: 68px;
    height: 68px;
    border-radius: 18px;
    color: var(--c-cyan);
    background: rgba(62, 240, 255, 0.08);
    border: 1px solid var(--line-cyan);
    box-shadow: 0 0 18px rgba(62, 240, 255, 0.2);
}

/* Unknowns */
.unknowns__panel { text-align: left; }
.unknowns__panel > p { color: var(--c-text-soft); }

.unknowns__icon {
    display: inline-grid;
    margin-bottom: 0.75rem;
    color: var(--c-cyan);
    filter: drop-shadow(0 0 8px rgba(62, 240, 255, 0.5));
}

.unknowns__list {
    display: grid;
    gap: 0.6rem;
    list-style: none;
    margin: 1.25rem 0;
    padding: 0;
}

.unknowns__list li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    padding: 0.75rem 1rem;
    border-radius: 14px;
    background: #071633;
    border: 1px solid var(--line-soft);
    color: var(--c-text);
}

.unknowns__panel .small-print { margin-bottom: 0; }

/* Casual vs regular */
.path-compare {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: minmax(0, 1fr);
}

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

.path-compare__col {
    padding: clamp(1.25rem, 3vw, 2rem);
    border-radius: var(--radius-lg);
    background: var(--glass-bg);
    border: 1px solid var(--line-cyan);
    box-shadow: inset 0 0 30px rgba(62, 240, 255, 0.05);
}

.path-compare__col h3 { margin-bottom: 1rem; }
.path-compare__col .check-list { margin-bottom: 0; color: var(--c-text-soft); }

/* ============================================
   PLATNOSCI PAGE
   ============================================ */

.hero--payments .hero__bg::after {
    background: linear-gradient(180deg, rgba(5, 15, 38, 0.9) 0%, rgba(5, 15, 38, 0.76) 52%, rgba(5, 15, 38, 0.12) 82%, var(--c-navy-950) 100%);
}

.hero--payments .hero__copy { max-width: 640px; }
.hero--payments .hero__copy p { color: var(--c-text-soft); }
.hero--payments .breadcrumbs ol { margin-bottom: 1rem; }
.hero--payments .hero__spacer { min-height: clamp(150px, 42vw, 260px); }

@media (min-width: 1024px) {
    .hero--payments .hero__bg::after {
        background:
            linear-gradient(90deg, rgba(5, 15, 38, 0.92) 0%, rgba(5, 15, 38, 0.7) 40%, rgba(5, 15, 38, 0.05) 66%),
            linear-gradient(180deg, rgba(5, 15, 38, 0) 70%, var(--c-navy-950) 100%);
    }
    .hero--payments .hero__spacer { display: none; }
}

/* Summary strip */
@media (max-width: 767.98px) {
    .pay-summary .fact-strip__list { grid-auto-columns: minmax(210px, 64%); }
}

.pay-summary .fact__note { max-width: 24ch; }

/* Prose helpers */
.prose--center { margin-inline: auto; }
.table-note { margin: 0.9rem 0 0; }
.section-cta--left { justify-content: flex-start; }

.pay-out {
    background: linear-gradient(180deg, transparent, rgba(12, 33, 71, 0.45) 20%, rgba(12, 33, 71, 0.45) 80%, transparent);
}

/* Payment tables */
.method {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.method .icon { color: var(--c-cyan); flex-shrink: 0; }

.data-table .badge { white-space: normal; }

.data-table tbody tr th.data-table__group {
    background: #0b2a55;
    color: var(--c-cyan-soft);
    font-family: var(--font-display);
    font-size: 0.875rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.data-table--cyan thead th {
    background: var(--c-cyan);
    color: var(--c-on-cyan);
}

.data-table tbody tr.row-highlight th,
.data-table tbody tr.row-highlight td {
    background: #0c3a66;
}

.data-table tbody tr.row-highlight th { box-shadow: inset 4px 0 0 var(--c-cyan); }

@media (min-width: 600px) {
    .data-table--pay { min-width: 760px; }
}

@media (max-width: 599.98px) {
    .data-table--stack tbody tr th.data-table__group {
        display: block;
        text-align: left;
    }
    .data-table--stack tbody tr th.data-table__group::before { content: none; }
}

/* Timeline */
.timeline {
    position: relative;
    margin: 1.75rem 0;
}

.timeline__axis { display: none; }

.timeline__list {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 0.75rem;
    grid-template-columns: minmax(0, 1fr);
    list-style: none;
    margin: 0;
    padding: 0;
}

.timeline__node {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    column-gap: 0.9rem;
    align-items: center;
    padding: 0.8rem 1rem;
    border-radius: var(--radius);
    background: #0a1d40;
    border: 1px solid var(--line-cyan);
    color: var(--c-text-soft);
    font-size: 0.9375rem;
}

.timeline__node strong { grid-column: 2; font-family: var(--font-display); font-size: 1.05rem; }
.timeline__node > span:not(.timeline__icon) { grid-column: 2; }

.timeline__icon {
    grid-column: 1;
    grid-row: 1 / span 3;
    display: inline-grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    color: var(--c-cyan);
    background: #071633;
    border: 1.5px solid var(--c-cyan);
    box-shadow: 0 0 14px rgba(62, 240, 255, 0.35);
}

.timeline__tag {
    margin-top: 0.2rem;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--c-aqua);
}

.timeline__node--external { border-color: rgba(163, 107, 255, 0.7); }
.timeline__node--external .timeline__icon { color: var(--c-violet-soft); border-color: var(--c-violet); box-shadow: 0 0 14px rgba(163, 107, 255, 0.4); }
.timeline__node--external .timeline__tag { color: var(--c-violet-soft); }

@media (min-width: 1024px) {
    .timeline__axis {
        display: block;
        position: absolute;
        left: 4%;
        top: 20px;
        z-index: 0;
        width: 92%;
        height: 12px;
        filter: drop-shadow(0 0 6px rgba(62, 240, 255, 0.6));
    }
    .timeline__list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
    .timeline__node {
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;
        text-align: center;
        row-gap: 0.3rem;
        padding: 0 0.5rem;
        background: transparent;
        border: 0;
    }
    .timeline__node strong,
    .timeline__node > span:not(.timeline__icon) { grid-column: 1; }
    .timeline__icon { grid-column: 1; grid-row: auto; margin-bottom: 0.5rem; }
}

/* KYC */
.kyc-layout { align-items: start; }

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

.kyc-path {
    position: absolute;
    left: calc(1.1rem + 24px);
    top: 2.5rem;
    bottom: 2.5rem;
    z-index: 0;
    width: 4px;
    height: calc(100% - 5rem);
    filter: drop-shadow(0 0 6px rgba(62, 240, 255, 0.6));
    pointer-events: none;
}

.kyc-card {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 1rem;
    align-items: center;
    padding: 1.1rem;
    border-radius: var(--radius);
    background: #0a1d40;
    border: 1px solid var(--line-cyan);
    box-shadow: inset 0 0 24px rgba(62, 240, 255, 0.05);
}

.kyc-card h3 { margin: 0 0 0.25rem; font-size: 1.1rem; }
.kyc-card p { margin: 0; font-size: 0.9375rem; color: var(--c-text-soft); }

.kyc-card__icon {
    display: inline-grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    color: var(--c-cyan);
    background: #071633;
    border: 1.5px solid var(--c-cyan);
    box-shadow: 0 0 14px rgba(62, 240, 255, 0.35);
}

/* Fees trio */
.risk-trio {
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 1fr);
    list-style: none;
    margin: 1.75rem 0 0;
    padding: 0;
}

.risk {
    padding: 1.25rem;
    border-radius: var(--radius);
    background: #0a1d40;
    border: 1px solid var(--line-soft);
    border-top: 3px solid var(--c-magenta);
    box-shadow: 0 -8px 22px -14px rgba(255, 95, 215, 0.7);
}

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

.risk__value {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.6rem);
    font-weight: 700;
    line-height: 1.1;
    color: #ffffff;
}

.risk__label {
    margin: 0.2rem 0 0.5rem;
    font-size: 1.05rem;
    color: var(--c-magenta-soft);
}

.risk p { font-size: 0.9375rem; color: var(--c-text-soft); }

.risk-note { margin-top: 1.5rem; }

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

/* Crypto */
.token-cloud {
    position: relative;
    isolation: isolate;
    padding: 1.25rem 0;
}

.token-cloud__wave {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 0 8px rgba(163, 107, 255, 0.55));
    pointer-events: none;
}

.token-grid {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 0.7rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    list-style: none;
    margin: 0;
    padding: 0;
}

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

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

.token {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    padding: 0.85rem 0.5rem;
    border-radius: 16px;
    background: rgba(10, 29, 64, 0.94);
    border: 1px solid var(--line-cyan);
    box-shadow: inset 0 0 16px rgba(62, 240, 255, 0.07);
    font-family: var(--font-display);
    font-weight: 600;
    color: #ffffff;
}

.token .icon { color: var(--c-cyan); filter: drop-shadow(0 0 6px rgba(62, 240, 255, 0.5)); }

/* EUR conversion diagram */
.conv {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
}

.conv__node {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    padding: 1.1rem 0.9rem;
    text-align: center;
    border-radius: var(--radius);
    background: #0a1d40;
    border: 1px solid var(--line-cyan);
    box-shadow: inset 0 0 20px rgba(62, 240, 255, 0.06);
}

.conv__node strong {
    display: inline-grid;
    font-family: var(--font-display);
    font-size: 1.6rem;
    color: #ffffff;
}

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

.conv__node--mid { border-color: rgba(163, 107, 255, 0.7); }
.conv__node--mid strong { color: var(--c-violet-soft); }

.conv__fee {
    padding: 0.4rem 0.6rem;
    border-radius: 10px;
    border: 1px dashed var(--c-magenta);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--c-magenta-soft);
    line-height: 1.3;
}

.conv__arrow {
    display: inline-grid;
    justify-self: center;
    color: var(--c-cyan);
    transform: rotate(90deg);
    filter: drop-shadow(0 0 6px rgba(62, 240, 255, 0.6));
}

@media (min-width: 768px) {
    .conv { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.2fr) auto minmax(0, 1fr); }
    .conv__arrow { transform: none; }
}

@media (min-width: 1024px) and (max-width: 1180px) {
    .conv { grid-template-columns: minmax(0, 1fr); }
    .conv__arrow { transform: rotate(90deg); }
}

/* Account / VPN panel */
.acct-panel { background: rgba(4, 12, 32, 0.92); }

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

.acct-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    padding: 1.1rem 0.8rem;
    text-align: center;
    border-radius: var(--radius);
    background: #071633;
    border: 1px solid var(--line-cyan);
    color: var(--c-text-soft);
    font-size: 0.9375rem;
}

.acct-tile .icon { color: var(--c-cyan); filter: drop-shadow(0 0 8px rgba(62, 240, 255, 0.5)); }
.acct-tile strong { font-family: var(--font-display); font-size: 1.05rem; }

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

.acct-strike {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem 1rem;
    margin-top: 1rem;
    padding: 0.9rem 1rem;
    border-radius: 14px;
    background: #071633;
    border: 1px dashed rgba(255, 95, 215, 0.65);
}

.acct-strike .icon { color: var(--c-magenta); flex-shrink: 0; }

.acct-strike__chip {
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--c-text-soft);
    text-decoration: line-through;
    text-decoration-color: var(--c-magenta);
    text-decoration-thickness: 2px;
}

.acct-note { margin: 1rem 0 0; }

/* Checklist */
.checklist {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: minmax(0, 1fr);
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
}

.checklist li {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    padding: 1rem 1.1rem;
    border-radius: var(--radius);
    background: #0a1d40;
    border: 1px solid var(--line-soft);
    color: var(--c-text-soft);
}

.checklist svg {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    color: var(--c-cyan);
    filter: drop-shadow(0 0 6px rgba(62, 240, 255, 0.45));
}

.checklist span { padding-top: 0.2rem; }

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

/* Payments FAQ block */
.pay-faq .faq-item__summary:focus-visible { outline-width: 4px; }

.rg-panel--slim { margin-top: 2rem; }
.rg-panel--slim .rg-panel__copy p { margin-bottom: 0; }

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

.hero--faq .hero__copy { max-width: 620px; }
.hero--faq .hero__copy h1 { margin-bottom: 0.5em; }
.hero--faq .hero__copy p { color: var(--c-text-soft); }
.hero--faq .breadcrumbs ol { margin-bottom: 1rem; }
.hero--faq .fact-strip { margin-top: 1.25rem; }
.hero--faq .hero__actions { align-items: center; gap: 0.75rem 1.5rem; }

.hero--faq .hero__media { order: -1; }

.hero--faq .mascot {
    width: min(60%, 280px);
    aspect-ratio: 6 / 5;
}

.hero--faq .mascot__ring { top: 60%; }

@media (min-width: 768px) {
    .hero--faq .mascot { width: min(70%, 420px); }
}

@media (min-width: 1024px) {
    .hero--faq .hero__media { order: 0; }
    .hero--faq .mascot { width: min(100%, 560px); }
}

/* Reef-column backdrop spanning all topic groups */
.faq-body {
    position: relative;
    isolation: isolate;
    padding-block: 0.5rem 2.5rem;
}

.faq-body::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: var(--faq-bg);
    background-repeat: repeat-y;
    background-size: 100% auto;
    background-position: center top;
}

.faq-nav { margin-bottom: 1rem; }

.faq-group {
    padding-block: 0.75rem;
    scroll-margin-top: 4.5rem;
}

.faq-panel {
    border-radius: var(--radius);
    padding: clamp(1.1rem, 3vw, 2rem);
    background: linear-gradient(160deg, rgba(14, 40, 84, 0.94), rgba(6, 18, 44, 0.96));
    box-shadow: inset 0 0 36px rgba(62, 240, 255, 0.07), 0 0 26px rgba(62, 240, 255, 0.12), var(--shadow-deep);
}

.faq-group__title {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.75rem;
    margin: 0 0 0.6rem;
    text-align: left;
}

.faq-group__title span { min-width: 0; }

.faq-group__lead {
    margin: 0 0 1.25rem;
    color: var(--c-text-soft);
}

.faq-panel .callout { margin-bottom: 1.25rem; }

.faq-panel .faq-item { background: #0a1d40; }

.faq-more {
    margin: 0.75rem 0 0;
    font-size: 0.95rem;
}

.faq-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.5rem;
    margin-top: 1.5rem;
}

/* Conditions table */
.faq-cond {
    background: rgba(6, 18, 44, 0.92);
}

.data-table--faq { min-width: 0; }

.data-table--faq th,
.data-table--faq td { border-bottom: 1px solid rgba(62, 240, 255, 0.25); }

.data-table--faq td strong { color: var(--c-aqua); font-weight: 700; }

@media (min-width: 600px) {
    .data-table--faq tbody th { width: 36%; }
}

.faq-cond__note { margin: 0.75rem 0 1.5rem; }

/* Calm responsible-gambling variant */
.faq-panel--calm {
    border-color: rgba(79, 181, 168, 0.65);
    box-shadow: var(--shadow-deep);
}

.faq-panel--calm .faq-item[open] {
    border-color: rgba(79, 181, 168, 0.7);
    box-shadow: inset 4px 0 0 var(--c-teal-muted);
}

.faq-panel--calm .faq-item__icon { border-color: rgba(79, 181, 168, 0.8); }

.faq-panel--calm .faq-item__icon::before,
.faq-panel--calm .faq-item__icon::after { background: var(--c-aqua); }

.faq-panel--calm .faq-group__title { padding-right: 64px; }

.faq-panel__age {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 52px;
    height: 52px;
    color: var(--c-magenta);
    filter: drop-shadow(0 0 8px rgba(255, 95, 215, 0.4));
}

.faq-links .link-grid { align-items: stretch; }

/* a11y-autofix: link-in-text-block */
/* axe link-in-text-block: inline links inside body copy must be
   distinguishable without relying on color. Scope to text containers so
   nav/button/card links (already visually distinct) keep their styling. */
:where(p, li, blockquote, figcaption, dd, .prose, .seo-text, article)
  a:not([class]) {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}