/*
 * Goldbet Casino - design system
 * Dark navy + burnished gold + teal/cyan glow, violet accents.
 */

:root {
    --navy-950: #050d1a;
    --navy-900: #081629;
    --navy-850: #0b1d33;
    --navy-800: #0f2440;
    --teal-900: #0a2a36;
    --teal-800: #0f3442;
    --teal-700: #16495a;
    --teal-500: #2a7d8c;
    --cyan-400: #4fd6e8;
    --gold-200: #fbe7a6;
    --gold-300: #f3d27f;
    --gold-400: #e8c36a;
    --gold-500: #d4a64a;
    --gold-600: #b7862f;
    --gold-700: #8a6220;
    --violet-500: #7b5cc4;
    --violet-tint: #1a1733;
    --text: #e9eef5;
    --text-muted: #b9c6d6;
    --ink: #0b1626;
    --line: #1b3350;

    --gold-metal: linear-gradient(180deg, #fbe7a6 0%, #ecc977 30%, #d4a64a 55%, #e9c879 80%, #b7862f 100%);
    --gold-plate: linear-gradient(105deg, #b8892f 0%, #e2bd68 18%, #f4dc98 34%, #d2a550 52%, #ecca7c 70%, #c3953f 86%, #e5c272 100%);
    --panel: linear-gradient(160deg, #123a4b 0%, #0c2638 55%, #0a1a2f 100%);
    --honey: url("data:image/svg+xml,%3Csvg%20xmlns=%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width=%2734.64%27%20height=%2760%27%20viewBox=%270%200%2034.64%2060%27%3E%3Cpath%20d=%27M17.32%200L34.64%2010V30L17.32%2040L0%2030V10Z%20M17.32%2040V60%27%20fill=%27none%27%20stroke=%27%232a7d8c%27%20stroke-opacity=%27.4%27%20stroke-width=%271%27/%3E%3C/svg%3E");

    --hex: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
    --chamfer: polygon(16px 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 16px 100%, 0 50%);

    --font-body: 'Barlow', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    --font-display: 'Cinzel', 'Times New Roman', Georgia, serif;

    --container: 1200px;
    --radius: 14px;
    --header-bottom: 64px;
    --mobile-cta-h: 70px;
    --tab-w: 240px;
}

/* ============ 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-behavior: smooth;
    scroll-padding-top: calc(var(--header-bottom) + 16px);
}

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text);
    background:
        radial-gradient(ellipse 80% 40% at 50% 0, #0f2a44 0, transparent 70%),
        var(--navy-950);
    padding-bottom: calc(var(--mobile-cta-h) + env(safe-area-inset-bottom, 0px));
}

body.menu-open {
    overflow: hidden;
}

img {
    display: block;
}

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

h3 {
    font-size: 1.25rem;
}

p {
    margin: 0 0 1em;
}

a {
    color: var(--gold-300);
}

a:hover {
    color: var(--gold-200);
}

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

main:focus {
    outline: none;
}

.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: 12px;
    top: -60px;
    z-index: 100;
    padding: 10px 16px;
    background: var(--gold-400);
    color: var(--ink);
    font-weight: 700;
    border-radius: 8px;
    text-decoration: none;
}

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

.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: 16px;
}

.section {
    position: relative;
    padding-block: 56px;
}

.section--band {
    background: linear-gradient(100deg, #0f3442 0%, #123b4c 50%, #0d2c3d 100%);
    border-block: 1px solid #1d4a57;
}

.section-title {
    text-align: center;
    font-size: clamp(1.6rem, 1.15rem + 1.8vw, 2.375rem);
    color: var(--gold-400);
}

.section-title--left {
    text-align: left;
}

.section-lead {
    max-width: 720px;
    margin: 0 auto 2rem;
    text-align: center;
    color: var(--text-muted);
    font-size: 1.0625rem;
}

.prose {
    max-width: 72ch;
}

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

.list-gold {
    padding-left: 1.25rem;
}

.list-gold li {
    margin-bottom: 0.5em;
}

.list-gold li::marker {
    color: var(--gold-400);
}

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

.text-link::after {
    content: "→";
    text-decoration: none;
}

.split {
    display: grid;
    gap: 32px;
    align-items: center;
}

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

/* Honeycomb backdrop utility */
.honeycomb {
    position: relative;
    isolation: isolate;
}

.honeycomb::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: var(--honey);
    background-size: 52px 90px;
    -webkit-mask-image: var(--honey-mask, linear-gradient(90deg, #000 0, transparent 26%, transparent 74%, #000 100%));
    mask-image: var(--honey-mask, linear-gradient(90deg, #000 0, transparent 26%, transparent 74%, #000 100%));
}

.honeycomb--right {
    --honey-mask: linear-gradient(90deg, transparent 50%, #000 100%);
}

.honeycomb--left {
    --honey-mask: linear-gradient(270deg, transparent 50%, #000 100%);
}

/* ============ Buttons ============ */
.btn {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    min-height: 50px;
    padding: 0.6rem 2.1rem;
    border: 0;
    background: none;
    font: 700 1.0625rem/1.2 var(--font-body);
    color: var(--ink);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    filter: drop-shadow(0 0 7px rgba(79, 214, 232, 0.5));
    transition: filter 0.2s ease, transform 0.2s ease;
}

.btn::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background: linear-gradient(180deg, #9ff0f8, #2fb5c6);
    clip-path: var(--chamfer);
}

.btn::after {
    content: "";
    position: absolute;
    inset: 2px;
    z-index: -1;
    background: var(--gold-metal);
    clip-path: var(--chamfer);
}

.btn:hover {
    color: var(--ink);
    filter: drop-shadow(0 0 12px rgba(79, 214, 232, 0.75));
    transform: translateY(-1px);
}

.btn--ghost {
    color: var(--gold-300);
    filter: drop-shadow(0 0 5px rgba(232, 195, 106, 0.3));
}

.btn--ghost::before {
    background: var(--gold-metal);
}

.btn--ghost::after {
    background: linear-gradient(180deg, #102a40, #0a1a2f);
}

.btn--ghost:hover {
    color: var(--gold-200);
    filter: drop-shadow(0 0 10px rgba(232, 195, 106, 0.5));
}

.btn--sm {
    min-height: 44px;
    padding: 0.5rem 1.25rem;
    font-size: 0.975rem;
}

.btn--lg {
    min-height: 58px;
    padding: 0.75rem 2.75rem;
    font-size: 1.2rem;
}

/* ============ Ornaments ============ */
.gem-divider {
    display: block;
    width: min(280px, 80%);
    height: auto;
    margin: 0 auto 16px;
}

.badge-18 {
    display: inline-block;
    width: 56px;
    flex: none;
    filter: drop-shadow(0 0 8px rgba(232, 195, 106, 0.35));
}

.badge-18 svg {
    display: block;
    width: 100%;
    height: auto;
}

.icon {
    width: 24px;
    height: 24px;
    flex: none;
}

.hex-icon {
    position: relative;
    isolation: isolate;
    display: inline-grid;
    place-items: center;
    width: 64px;
    height: 74px;
    color: var(--gold-300);
    filter: drop-shadow(0 0 8px rgba(79, 214, 232, 0.3));
}

.hex-icon::before,
.hex-icon::after {
    content: "";
    position: absolute;
    clip-path: var(--hex);
}

.hex-icon::before {
    inset: 0;
    z-index: -2;
    background: var(--gold-metal);
}

.hex-icon::after {
    inset: 2px;
    z-index: -1;
    background: linear-gradient(160deg, #16495a, #0a1a2f);
}

.hex-icon .icon {
    width: 30px;
    height: 30px;
}

/* ============ Header ============ */
.site-header {
    position: sticky;
    top: 0;
    z-index: 60;
    background: var(--navy-950);
    border-bottom: 1px solid var(--gold-700);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    max-width: 1280px;
    min-height: 64px;
    margin-inline: auto;
    padding: 8px 12px 8px 14px;
}

.site-brand {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    color: var(--gold-300);
    text-decoration: none;
}

.site-brand__tab {
    display: none;
}

.site-brand__emblem {
    position: relative;
    z-index: 1;
    flex: none;
    width: 44px;
    height: 44px;
    object-fit: contain;
}

.site-brand__text {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1;
}

.site-brand__name {
    font-size: 1.3rem;
    letter-spacing: 0.02em;
    color: var(--gold-300);
}

.site-brand__sub {
    margin-top: 3px;
    font-size: 0.875rem;
    letter-spacing: 0.28em;
    color: var(--gold-400);
}

.menu-toggle {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 48px;
    height: 48px;
    padding: 0;
    flex: none;
    border: 1px solid var(--gold-600);
    border-radius: 10px;
    background: var(--navy-850);
    cursor: pointer;
}

.menu-toggle__bar {
    width: 22px;
    height: 2px;
    border-radius: 2px;
    background: var(--gold-300);
    transition: transform 0.2s ease, opacity 0.2s ease;
}

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

.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(2) {
    opacity: 0;
}

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

.site-nav {
    position: fixed;
    top: var(--header-bottom, 64px);
    left: 0;
    right: 0;
    bottom: 0;
    height: auto;
    z-index: 59;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 12px 16px 32px;
    background: var(--navy-950);
    visibility: hidden;
    transform: translateY(-8px);
    transition: transform 0.2s ease, visibility 0.2s;
}

.site-nav.is-open {
    visibility: visible;
    transform: none;
}

.site-nav__list {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-nav__link {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 52px;
    padding: 0 6px;
    border-bottom: 1px solid var(--line);
    color: var(--text);
    font-weight: 600;
    font-size: 1.125rem;
    text-decoration: none;
}

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

.header-actions {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 24px;
}

.header-actions .btn {
    width: 100%;
}

/* ============ Page frame ============ */
.site-frame {
    position: relative;
    isolation: isolate;
    margin: 6px 4px 4px;
    border-radius: 14px;
    overflow: clip;
    box-shadow: 0 0 18px rgba(232, 195, 106, 0.22);
}

.site-frame::before,
.site-frame::after {
    content: "";
    position: absolute;
    pointer-events: none;
    z-index: 20;
}

.site-frame::after {
    inset: 0;
    border: 2px solid var(--gold-500);
    border-radius: inherit;
}

.site-frame::before {
    inset: 5px;
    border: 1px solid var(--gold-700);
    border-radius: 10px;
}

/* ============ Hero ============ */
.hero {
    position: relative;
    isolation: isolate;
    background: var(--navy-950);
}

.hero__media {
    position: relative;
    aspect-ratio: 4 / 3;
    background-image: var(--hero-bg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: var(--hero-pos-m, 30% center);
}

.hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(5, 13, 26, 0) 55%, var(--navy-950) 100%);
}

.hero__badge {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 3;
    width: 52px;
}

.hero__inner {
    position: relative;
    z-index: 2;
    margin-top: -28px;
    padding-block: 0 48px;
}

.hero__content {
    max-width: 600px;
    margin-inline: auto;
    text-align: center;
}

.hero__title {
    font-size: clamp(1.875rem, 1.2rem + 2.8vw, 3.25rem);
    color: var(--gold-300);
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.6);
}

.hero__lead {
    font-size: 1.0625rem;
    color: var(--text);
}

.hero__offer {
    margin-bottom: 0.5em;
    font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.6rem);
    font-weight: 700;
    line-height: 1.3;
    color: var(--gold-300);
}

.hero__facts {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 0 0 1.25rem;
    padding: 0;
    list-style: none;
}

.hero__facts li {
    padding: 0.35rem 0.95rem;
    border: 1px solid var(--gold-600);
    border-radius: 999px;
    background: var(--navy-850);
    font-weight: 600;
    font-size: 1.0625rem;
    color: #fff;
}

.hero__actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
}

.hero__note {
    margin: 1rem 0 0;
    font-size: 0.9375rem;
    color: var(--text-muted);
}

/* ============ Breadcrumbs ============ */
.breadcrumbs {
    padding-block: 14px;
    font-size: 0.9375rem;
}

.breadcrumbs__list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--text-muted);
}

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

.breadcrumbs a {
    color: var(--gold-300);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

/* ============ Conduit steps ============ */
.conduit {
    --medal: 84px;
    --medal-h: calc(var(--medal) * 1.1547);
    --cgap: 28px;
}

.conduit__list {
    display: grid;
    gap: var(--cgap);
    margin: 0;
    padding: 0;
    list-style: none;
}

.conduit__step {
    position: relative;
    display: grid;
    grid-template-columns: var(--medal) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.conduit__seg {
    position: absolute;
    z-index: 0;
    left: calc(var(--medal) / 2 - 8px);
    top: calc(var(--medal-h) / 2);
    width: 16px;
    height: calc(100% + var(--cgap));
    overflow: visible;
    pointer-events: none;
}

.conduit__seg .seg-h {
    display: none;
}

.hex-medal {
    position: relative;
    z-index: 1;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: var(--medal);
    height: var(--medal-h);
    text-align: center;
    filter: drop-shadow(0 0 10px rgba(79, 214, 232, 0.35));
}

.hex-medal::before,
.hex-medal::after {
    content: "";
    position: absolute;
    clip-path: var(--hex);
}

.hex-medal::before {
    inset: 0;
    z-index: -2;
    background: var(--gold-metal);
}

.hex-medal::after {
    inset: 3px;
    z-index: -1;
    background: linear-gradient(165deg, #1a5566 0%, #0d2c3d 50%, #0a1a2f 100%);
}

.hex-medal__value {
    font-size: calc(var(--medal) * 0.25);
    font-weight: 700;
    line-height: 1;
    color: var(--gold-300);
}

.hex-medal__sub {
    margin-top: 4px;
    font-size: 0.875rem;
    font-weight: 700;
    color: #9ff0f8;
}

.conduit__body {
    padding-top: 6px;
}

.conduit__title {
    margin-bottom: 0.3em;
    font-size: 1.1875rem;
    color: var(--gold-300);
}

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

.conduit--column {
    --medal: 64px;
}

/* ============ Hex cards ============ */
.hex-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 28px 20px 24px;
    text-align: center;
    border: 1px solid var(--gold-600);
    border-radius: 16px;
    background: var(--panel);
    box-shadow: inset 0 0 0 4px rgba(5, 13, 26, 0.6), 0 12px 30px rgba(0, 0, 0, 0.35);
}

.hex-card__title {
    margin: 4px 0 0;
    font-size: 1.1875rem;
}

.hex-card__text {
    flex-grow: 1;
    margin: 0;
    color: var(--text-muted);
}

.hex-card__action {
    margin-top: 6px;
}

.hex-badge {
    position: relative;
    isolation: isolate;
    display: grid;
    place-items: center;
    width: 116px;
    height: 134px;
    padding: 0 14px;
    filter: drop-shadow(0 0 10px rgba(232, 195, 106, 0.28));
}

.hex-badge::before,
.hex-badge::after {
    content: "";
    position: absolute;
    clip-path: var(--hex);
}

.hex-badge::before {
    inset: 0;
    z-index: -2;
    background: var(--gold-metal);
}

.hex-badge::after {
    inset: 4px;
    z-index: -1;
    background: radial-gradient(circle at 50% 35%, #16495a 0%, #0b2236 60%, #0a1a2f 100%);
}

.hex-badge__text {
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1.1;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    text-align: center;
    color: var(--gold-300);
}

/* ============ Portal frame ============ */
.portal {
    position: relative;
    isolation: isolate;
    margin-top: 24px;
}

.portal::before {
    content: "";
    position: absolute;
    top: 10%;
    bottom: 0;
    left: -40%;
    right: -40%;
    z-index: -1;
    pointer-events: none;
    background-image: var(--honey);
    background-size: 52px 90px;
    -webkit-mask-image: linear-gradient(90deg, #000 0, transparent 28%, transparent 72%, #000 100%);
    mask-image: linear-gradient(90deg, #000 0, transparent 28%, transparent 72%, #000 100%);
}

.portal__frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: visible;
    pointer-events: none;
}

.portal__gem {
    position: absolute;
    left: 50%;
    top: 4.33%;
    z-index: 2;
    width: 48px;
    height: auto;
    translate: -50% -50%;
    filter: drop-shadow(0 0 10px rgba(79, 214, 232, 0.55));
}

.portal__stud {
    position: absolute;
    top: 55%;
    z-index: 2;
    width: 16px;
    height: auto;
    translate: -50% -50%;
}

.portal__stud--l {
    left: 1.1%;
}

.portal__stud--r {
    left: 98.9%;
}

.portal__inner {
    position: relative;
    z-index: 1;
    padding: clamp(64px, 9vw, 104px) clamp(18px, 3.5vw, 44px) 36px;
}

.portal-base {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 18px;
}

.portal-base::before,
.portal-base::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold-500));
}

.portal-base::after {
    background: linear-gradient(270deg, transparent, var(--gold-500));
}

.portal-base svg {
    width: 48px;
    flex: none;
}

/* ============ Octagon media ============ */
.octa-media {
    position: relative;
    width: 100%;
    margin: 0;
    aspect-ratio: 4 / 3;
    filter: drop-shadow(0 16px 30px rgba(0, 0, 0, 0.5));
}

.octa-media__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--pos, center);
    clip-path: polygon(13.67% 4.89%, 86.33% 4.89%, 96.33% 19.78%, 96.33% 80.22%, 86.33% 95.11%, 13.67% 95.11%, 3.67% 80.22%, 3.67% 19.78%);
}

.octa-media__frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* ============ Gold rail ============ */
.gold-rail {
    position: relative;
    isolation: isolate;
    padding-block: 8px;
}

.gold-rail__plate {
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 64px;
    margin-left: -32px;
    border-radius: 10px;
    background:
        linear-gradient(90deg, transparent 16%, rgba(90, 60, 15, 0.4) 16% 19%, transparent 19% 81%, rgba(90, 60, 15, 0.4) 81% 84%, transparent 84%),
        linear-gradient(90deg, #b8892f 0%, #f4dc98 40%, #d2a550 70%, #c3953f 100%);
    box-shadow: inset 2px 0 0 rgba(255, 245, 210, 0.5), inset -3px 0 0 rgba(0, 0, 0, 0.25), 0 10px 26px rgba(0, 0, 0, 0.5);
}

.gold-rail__hinge {
    display: none;
}

.gold-rail__key {
    display: none;
}

.gold-rail__cards {
    display: grid;
    gap: 28px;
    grid-template-columns: minmax(0, 1fr);
    max-width: 420px;
    margin-inline: auto;
}

.rail-card {
    --cut: 40px;
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 34px 26px 28px;
    text-align: center;
    filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.5));
}

.rail-card::before,
.rail-card::after {
    content: "";
    position: absolute;
    clip-path: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 calc(100% - var(--cut)), 0 var(--cut));
}

.rail-card::before {
    inset: 0;
    z-index: -2;
    background: var(--gold-metal);
}

.rail-card::after {
    inset: 3px;
    z-index: -1;
    background: linear-gradient(170deg, #16495a 0%, #0c2638 55%, #0a1a2f 100%);
}

.rail-card__mark {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 700;
    font-style: italic;
    letter-spacing: 0.02em;
    color: var(--gold-300);
}

.rail-card__title {
    margin: 0;
    font-size: 1.125rem;
    color: #fff;
}

.rail-card__text {
    margin: 0;
    color: var(--text-muted);
}

.rail-card__meta {
    margin: 4px 0 0;
    font-weight: 700;
    color: #9ff0f8;
}

.rail-card__action {
    margin-top: 10px;
}

/* ============ Hex FAQ ============ */
.faq-list {
    display: grid;
    gap: 16px;
    align-items: start;
    max-width: 880px;
    margin-inline: auto;
}

.hex-faq {
    --cut: 22px;
    position: relative;
    align-self: start;
    filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.4));
}

.hex-faq:has(> summary:focus-visible) {
    outline: 2px solid var(--cyan-400);
    outline-offset: 4px;
}

.hex-faq__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 64px;
    padding: 14px calc(var(--cut) + 12px);
    list-style: none;
    cursor: pointer;
    font-weight: 700;
    font-size: 1.0625rem;
    line-height: 1.35;
    color: var(--ink);
    background: var(--gold-metal);
    clip-path: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% 50%, calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 50%);
}

.hex-faq__q::-webkit-details-marker {
    display: none;
}

.hex-faq__q:focus-visible {
    outline: none;
    background: linear-gradient(180deg, #fff3c9 0%, #f0d48a 50%, #d9ae55 100%);
}

.hex-faq__q:focus-visible .hex-faq__text {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.2em;
}

.hex-faq[open] > .hex-faq__q {
    clip-path: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% 100%, 0 100%);
}

.hex-faq__icon {
    flex: none;
    width: 32px;
    height: 36px;
}

.hex-faq__chev {
    transform-origin: 16px 18px;
    transition: transform 0.2s ease;
}

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

.hex-faq__a {
    position: relative;
    isolation: isolate;
    padding: 18px calc(var(--cut) + 14px) 28px;
    color: var(--text);
}

.hex-faq__a::before,
.hex-faq__a::after {
    content: "";
    position: absolute;
    clip-path: polygon(0 0, 100% 0, calc(100% - var(--cut)) 100%, var(--cut) 100%);
}

.hex-faq__a::before {
    inset: 0;
    z-index: -2;
    background: var(--gold-600);
}

.hex-faq__a::after {
    inset: 0 2px 2px;
    z-index: -1;
    background: linear-gradient(180deg, #0f2a40 0%, #0a1a2f 100%);
}

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

/* ============ Stat tiles ============ */
.stat-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
}

.stat-tile {
    position: relative;
    padding: 22px 22px 20px;
    border: 1px solid var(--gold-500);
    border-radius: var(--radius);
    background: linear-gradient(160deg, #0f2b3d, #0a1a2f);
    box-shadow: inset 0 0 0 5px var(--navy-850), inset 0 0 0 6px var(--gold-700);
}

.stat-tile__icon {
    position: absolute;
    top: 16px;
    right: 16px;
    color: var(--cyan-400);
}

.stat-tile__value {
    margin: 0 0 4px;
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--gold-300);
}

.stat-tile__label {
    margin: 0;
    font-weight: 600;
    color: #fff;
}

.stat-tile__text {
    margin: 6px 0 0;
    font-size: 0.9375rem;
    color: var(--text-muted);
}

/* ============ Callout ============ */
.callout {
    position: relative;
    padding: 20px 22px;
    border-left: 4px solid var(--gold-500);
    border-radius: 0 var(--radius) var(--radius) 0;
    background: var(--violet-tint);
    color: var(--text);
}

.callout--teal {
    background: #0d2c3d;
}

.callout__title {
    margin-bottom: 0.4em;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--gold-300);
}

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

/* ============ Ledger table ============ */
.ledger-wrap {
    max-width: 100%;
    overflow-x: auto;
    border: 1px solid var(--gold-600);
    border-radius: var(--radius);
}

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

.ledger caption {
    padding: 0 0 10px;
    text-align: left;
    color: var(--text-muted);
}

.ledger thead th {
    padding: 14px 16px;
    text-align: left;
    font-weight: 700;
    color: var(--ink);
    background: var(--gold-metal);
}

.ledger td,
.ledger tbody th {
    padding: 14px 16px;
    text-align: left;
    border-top: 1px solid #6b5323;
}

.ledger tbody tr {
    background: var(--navy-850);
}

.ledger tbody tr:nth-child(even) {
    background: #0d2238;
}

.ledger tfoot td,
.ledger tfoot th {
    padding: 14px 16px;
    text-align: left;
    font-weight: 700;
    color: var(--gold-300);
    background: #122c40;
    border-top: 1px solid var(--gold-600);
}

.hex-num {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 39px;
    font-weight: 700;
    color: var(--ink);
    background: var(--gold-metal);
    clip-path: var(--hex);
}

@media (max-width: 767px) {
    .ledger-wrap--stack {
        border: 0;
        overflow: visible;
    }

    .ledger--stack thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
    }

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

    .ledger--stack tr {
        margin-bottom: 12px;
        border: 1px solid var(--gold-600);
        border-radius: 12px;
        overflow: hidden;
    }

    .ledger--stack td,
    .ledger--stack tbody th,
    .ledger--stack tfoot td,
    .ledger--stack tfoot th {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        text-align: right;
        border-top: 1px solid #3a3420;
    }

    .ledger--stack tr > :first-child {
        border-top: 0;
    }

    .ledger--stack [data-label]::before {
        content: attr(data-label);
        font-weight: 600;
        text-align: left;
        color: var(--gold-300);
    }
}

/* ============ CTA band ============ */
.cta-band {
    position: relative;
    padding-block: 56px 64px;
    background:
        radial-gradient(ellipse 60% 70% at 50% 100%, rgba(123, 92, 196, 0.28), transparent 70%),
        radial-gradient(ellipse 50% 60% at 50% 0, rgba(232, 195, 106, 0.12), transparent 70%);
}

.cta-band__box {
    max-width: 820px;
    margin-inline: auto;
    padding: 36px 22px;
    text-align: center;
    border: 1px solid var(--gold-600);
    border-radius: 18px;
    background: linear-gradient(170deg, #102c42 0%, #0a1a2f 100%);
    box-shadow: inset 0 0 0 5px var(--navy-850), inset 0 0 0 6px var(--gold-700), 0 0 30px rgba(79, 214, 232, 0.12);
}

.cta-band__title {
    font-size: clamp(1.5rem, 1.15rem + 1.4vw, 2.125rem);
}

.cta-band__text {
    max-width: 620px;
    margin-inline: auto;
    color: var(--text-muted);
}

.cta-band__note {
    margin: 18px 0 0;
    font-size: 0.9375rem;
    color: var(--text-muted);
}

/* ============ Footer ============ */
.site-footer {
    position: relative;
    padding: 32px 12px 18px;
}

.footer-plate {
    position: relative;
    isolation: isolate;
    max-width: 1280px;
    margin: 0 auto;
    padding: 34px 20px 24px;
    color: var(--ink);
    background: var(--gold-plate);
    border-radius: 18px;
    box-shadow:
        inset 0 0 0 2px #f6e2a3,
        inset 0 0 0 7px #b7862f,
        inset 0 0 0 8px #f3d993,
        0 0 30px rgba(232, 195, 106, 0.25),
        0 18px 40px rgba(0, 0, 0, 0.5);
}

.footer-plate__corner {
    position: absolute;
    z-index: -1;
    top: 14px;
    width: 80px;
    height: auto;
    pointer-events: none;
}

.footer-plate__corner--l {
    left: 14px;
}

.footer-plate__corner--r {
    right: 14px;
    transform: scaleX(-1);
}

.footer-plate__grid {
    display: grid;
    gap: 28px;
    grid-template-columns: minmax(0, 1fr);
    text-align: center;
}

.footer-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    order: -1;
}

.footer-brand__emblem {
    width: 72px;
    height: 72px;
    object-fit: contain;
    filter: drop-shadow(0 4px 8px rgba(60, 40, 10, 0.45));
}

.footer-brand__text {
    display: flex;
    flex-direction: column;
    margin: 0;
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1;
    text-align: left;
}

.footer-brand__name {
    font-size: 2rem;
    color: #0b1d33;
}

.footer-brand__sub {
    margin-top: 4px;
    font-size: 1rem;
    letter-spacing: 0.3em;
    color: #1a2c44;
}

.footer-col__title {
    margin: 0 0 6px;
    font-weight: 700;
    font-size: 0.9375rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #0b1d33;
}

.footer-col__title:not(:first-child) {
    margin-top: 16px;
}

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

.footer-links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-weight: 600;
    color: var(--ink);
    text-decoration: underline;
    text-decoration-color: #7a5a1e;
    text-underline-offset: 0.2em;
}

.footer-links a:hover,
.footer-links a[aria-current="page"] {
    color: #000;
    text-decoration-color: var(--ink);
}

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

.pay-chips li {
    padding: 3px 10px;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--gold-300);
    background: var(--navy-850);
    border: 1px solid #6b5323;
    border-radius: 6px;
}

.footer-legal {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin-top: 26px;
    padding-top: 20px;
    border-top: 1px solid #9c7a37;
    text-align: center;
}

.footer-legal__text p {
    margin: 0 0 0.6em;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--ink);
}

.footer-legal__copy {
    font-weight: 700;
}

/* ============ Mobile sticky CTA ============ */
.mobile-cta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 45;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    background: var(--navy-950);
    border-top: 1px solid var(--gold-600);
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.5);
}

.mobile-cta .btn {
    flex: 1;
    min-height: 48px;
    padding-inline: 10px;
}

/* ============ Cookie banner ============ */
.cookie-banner {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(var(--mobile-cta-h) + 12px + env(safe-area-inset-bottom, 0px));
    z-index: 70;
    max-width: 560px;
    margin-inline: auto;
    padding: 18px;
    background: var(--navy-850);
    border: 1px solid var(--gold-500);
    border-radius: var(--radius);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
}

.cookie-banner[hidden] {
    display: none;
}

.cookie-banner__title {
    margin-bottom: 0.3em;
    font-weight: 700;
    color: var(--gold-300);
}

.cookie-banner__text {
    font-size: 0.9375rem;
    color: var(--text);
}

.cookie-banner__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

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

/* ============ Home page ============ */
.home-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px 24px;
    margin-top: 28px;
}

.home-actions--left {
    justify-content: flex-start;
}

.terms-strip {
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(0, 1fr);
    margin: 40px 0 0;
    padding: 0;
    list-style: none;
}

.terms-strip li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--gold-600);
    border-radius: 12px;
    background: linear-gradient(160deg, #0f2b3d, #0a1a2f);
    font-weight: 600;
    color: #fff;
}

.terms-strip .icon {
    color: var(--cyan-400);
}

.terms-strip strong {
    color: var(--gold-300);
}

.terms-note {
    max-width: 720px;
    margin: 16px auto 0;
    text-align: center;
    font-size: 0.9375rem;
    color: var(--text-muted);
}

.slots-portal .hex-badge__text {
    font-size: 0.8125rem;
}

.slots-more {
    margin: 12px 0 0;
    text-align: center;
}

.tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 1.25rem;
    padding: 0;
    list-style: none;
}

.tag-list li {
    padding: 0.3rem 0.85rem;
    border: 1px solid var(--gold-600);
    border-radius: 999px;
    background: var(--navy-850);
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--gold-200);
}

.pay-note {
    max-width: 760px;
    margin: 44px auto 0;
}

.vault-faq {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}

.vault-stage {
    position: relative;
    max-width: 600px;
    margin-inline: auto;
}

.vault-stage__img {
    width: 100%;
    height: 240px;
    object-fit: cover;
    object-position: center 35%;
    -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
}

.parchment {
    position: relative;
    z-index: 1;
    width: min(100%, 470px);
    margin: -90px auto 0;
    filter: drop-shadow(0 0 22px rgba(243, 210, 127, 0.3));
}

.parchment__roll {
    display: block;
    width: 100%;
}

.parchment__sheet {
    margin-inline: 4.5%;
    padding: 20px 20px 22px;
    color: #2b1d08;
    background:
        url("data:image/svg+xml,%3Csvg%20xmlns=%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width=%27160%27%20height=%27160%27%3E%3Cfilter%20id=%27n%27%3E%3CfeTurbulence%20type=%27fractalNoise%27%20baseFrequency=%27.9%27%20numOctaves=%272%27%20stitchTiles=%27stitch%27/%3E%3CfeColorMatrix%20values=%270%200%200%200%20.35%200%200%200%200%20.25%200%200%200%200%20.1%200%200%200%20.16%200%27/%3E%3C/filter%3E%3Crect%20width=%27100%25%27%20height=%27100%25%27%20filter=%27url%28%23n%29%27/%3E%3C/svg%3E"),
        linear-gradient(180deg, #f7ead0 0%, #eedcb4 55%, #dcc292 100%);
    box-shadow: inset 0 0 26px rgba(120, 80, 20, 0.3);
}

.parchment__sheet h2 {
    margin-bottom: 0.5em;
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 1rem + 1vw, 1.55rem);
    text-align: center;
    color: #3a2608;
}

.parchment__sheet h3 {
    margin: 0.9em 0 0.35em;
    font-size: 1.0625rem;
    color: #4a300a;
}

.parchment__sheet p {
    margin-bottom: 0.7em;
    font-size: 0.96875rem;
    line-height: 1.55;
    color: #2b1d08;
}

.parchment__sheet strong {
    color: #1e1403;
}

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

.seal {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    color: #f6dfa4;
    background: radial-gradient(circle at 35% 30%, #a4552f 0%, #6e2a14 68%, #4f1c0c 100%);
    box-shadow: 0 0 0 3px rgba(110, 42, 20, 0.3), inset 0 -3px 6px rgba(0, 0, 0, 0.35);
}

.seal__num {
    font-weight: 700;
    font-size: 1rem;
}

.faq-teaser .home-actions {
    margin-top: 36px;
}

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

@media (min-width: 768px) {
    .vault-stage {
        display: grid;
        place-items: center;
        aspect-ratio: 1000 / 1100;
        padding: 11% 13% 9%;
    }

    .vault-stage__img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: center;
        -webkit-mask-image: none;
        mask-image: none;
    }

    .parchment {
        width: 100%;
        margin: 0;
    }
}

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

@media (min-width: 1280px) {
    .vault-faq {
        grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
        align-items: center;
        gap: 36px;
    }

    .vault-faq .faq-list--honeycomb {
        gap: 18px 22px;
    }
}

/* ============ Bonusy page ============ */
.prose--center {
    max-width: 760px;
    margin: 32px auto 0;
    text-align: center;
}

.ledger-wrap + .terms-note {
    margin-top: 20px;
}

.ledger tbody th {
    color: var(--gold-300);
}

.ledger tbody td,
.ledger tbody th {
    border-top: 1px solid var(--gold-700);
}

.guide {
    position: relative;
    display: grid;
    gap: 26px;
    max-width: 720px;
    margin: 0 auto 32px;
    padding: 0;
    list-style: none;
}

.guide__line {
    position: absolute;
    left: 24px;
    top: 28px;
    bottom: 28px;
    z-index: 0;
    width: 16px;
    height: calc(100% - 56px);
    margin-left: -8px;
    overflow: visible;
    pointer-events: none;
}

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

.guide__step h3 {
    margin-bottom: 0.25em;
    font-size: 1.1875rem;
}

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

.guide__hex {
    display: grid;
    place-items: center;
    width: 48px;
    height: 55px;
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--gold-300);
    background: var(--gold-metal);
    clip-path: var(--hex);
    position: relative;
    isolation: isolate;
}

.guide__hex::before {
    content: "";
    position: absolute;
    inset: 3px;
    z-index: -1;
    background: linear-gradient(165deg, #1a5566, #0a1a2f);
    clip-path: var(--hex);
}

.guide-note {
    max-width: 720px;
    margin-inline: auto;
}

.stat-grid {
    max-width: 900px;
    margin-inline: auto;
}

.wheel-split {
    display: grid;
    gap: 28px;
    align-items: center;
}

.wheel-art {
    position: relative;
    isolation: isolate;
    display: grid;
    place-items: center;
    order: -1;
}

.wheel-art::before {
    content: "";
    position: absolute;
    inset: 4%;
    z-index: -1;
    background:
        radial-gradient(circle at 50% 50%, rgba(232, 195, 106, 0.38) 0%, rgba(232, 195, 106, 0) 55%),
        radial-gradient(circle at 50% 50%, rgba(123, 92, 196, 0.5) 0%, rgba(123, 92, 196, 0) 72%);
}

.wheel-art img {
    width: min(100%, 440px);
    height: auto;
    object-fit: contain;
}

.promo-grid {
    display: grid;
    gap: 44px 20px;
    grid-template-columns: minmax(0, 1fr);
    margin-top: 44px;
}

.promo-card {
    position: relative;
    padding: 48px 20px 24px;
    text-align: center;
    border: 1px solid var(--gold-600);
    border-radius: 16px;
    background: var(--panel);
    box-shadow: inset 0 0 0 4px rgba(5, 13, 26, 0.6), 0 12px 30px rgba(0, 0, 0, 0.35);
}

.promo-card .hex-icon {
    position: absolute;
    top: -37px;
    left: 50%;
    translate: -50% 0;
}

.promo-card h3 {
    font-size: 1.1875rem;
}

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

.tiers {
    position: relative;
    max-width: 1000px;
    margin: 0 auto 36px;
}

.tiers__line {
    display: none;
}

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

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

.tier__medal {
    --tier-grad: linear-gradient(160deg, #e0a672, #a8672f 55%, #6e3f18);
    --tier-text: #f0c9a0;
    position: relative;
    isolation: isolate;
    display: grid;
    place-items: center;
    flex: none;
    width: 96px;
    height: 111px;
    font-weight: 700;
    font-size: 0.9375rem;
    color: var(--tier-text);
    filter: drop-shadow(0 0 10px rgba(79, 214, 232, 0.3));
}

.tier__medal::before,
.tier__medal::after {
    content: "";
    position: absolute;
    clip-path: var(--hex);
}

.tier__medal::before {
    inset: 0;
    z-index: -2;
    background: var(--tier-grad);
}

.tier__medal::after {
    inset: 4px;
    z-index: -1;
    background: linear-gradient(165deg, #12384a, #0a1a2f);
}

.tier--silver .tier__medal {
    --tier-grad: linear-gradient(160deg, #f4f7fb, #aeb9c6 55%, #6f7b8a);
    --tier-text: #dfe7f0;
}

.tier--gold .tier__medal {
    --tier-grad: var(--gold-metal);
    --tier-text: var(--gold-300);
}

.tier--platinum .tier__medal {
    --tier-grad: linear-gradient(160deg, #ffffff, #bfe9f2 45%, #8aa9c8 75%, #c9b8f0);
    --tier-text: #cdeff7;
}

.tier__body {
    flex: 1;
    width: 100%;
    padding: 16px 16px 18px;
    border: 1px solid var(--gold-600);
    border-radius: 14px;
    background: var(--panel);
}

.tier__body h3 {
    margin-bottom: 0.3em;
    font-size: 1.125rem;
}

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

.vip-note {
    max-width: 760px;
    margin: 0 auto;
}

.rg-note {
    max-width: 760px;
    margin: 0 auto;
}

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

    .guide__line {
        left: 24px;
    }

    .tiers__line {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 0;
        display: block;
        width: 100%;
        height: 200px;
        overflow: visible;
        pointer-events: none;
    }

    .tiers__list {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        align-items: stretch;
    }

    .tier:nth-child(1) { margin-top: 90px; }
    .tier:nth-child(2) { margin-top: 60px; }
    .tier:nth-child(3) { margin-top: 30px; }
    .tier:nth-child(4) { margin-top: 0; }
}

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

    .wheel-split {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
        gap: 56px;
    }

    .wheel-art {
        order: 0;
    }
}

/* ============ Gry page ============ */
.hex-card[hidden],
.filter-bar[hidden],
.filter-empty[hidden] {
    display: none;
}

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

.cat-tile {
    --cap: 22px;
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 30px 12px 20px;
    text-align: center;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.45));
}

.cat-tile::before,
.cat-tile::after {
    content: "";
    position: absolute;
    clip-path: polygon(0 var(--cap), 50% 0, 100% var(--cap), 100% 100%, 0 100%);
}

.cat-tile::before {
    inset: 0;
    z-index: -2;
    background: var(--gold-metal);
}

.cat-tile::after {
    inset: 2px;
    z-index: -1;
    background: linear-gradient(170deg, #16495a 0%, #0c2638 55%, #0a1a2f 100%);
}

.cat-tile:nth-child(even) {
    margin-top: 22px;
}

.cat-tile .hex-icon {
    margin-top: -8px;
}

.cat-tile h3 {
    margin: 4px 0 0;
    font-size: 1.0625rem;
}

.cat-tile p {
    margin: 0;
    font-size: 0.9375rem;
    color: var(--text-muted);
}

.cat-tile .cat-tile__figure {
    font-size: 1.125rem;
    font-weight: 700;
    color: #9ff0f8;
}

.filter-bar {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 8px;
}

.filter-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.filter-btn {
    position: relative;
    isolation: isolate;
    min-height: 44px;
    padding: 0.45rem 1.4rem;
    border: 0;
    background: none;
    font: 700 1rem/1.2 var(--font-body);
    color: var(--gold-300);
    cursor: pointer;
    transition: filter 0.2s ease;
}

.filter-btn::before,
.filter-btn::after {
    content: "";
    position: absolute;
    clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 12px 100%, 0 50%);
}

.filter-btn::before {
    inset: 0;
    z-index: -2;
    background: var(--gold-metal);
}

.filter-btn::after {
    inset: 2px;
    z-index: -1;
    background: linear-gradient(180deg, #102a40, #0a1a2f);
}

.filter-btn.is-active {
    color: var(--ink);
    filter: drop-shadow(0 0 9px rgba(79, 214, 232, 0.7));
}

.filter-btn.is-active::after {
    background: var(--gold-metal);
}

.filter-btn:hover:not(.is-active) {
    color: var(--gold-200);
}

.provider-chip {
    min-height: 44px;
    padding: 0.3rem 0.95rem;
    border: 1px solid var(--gold-600);
    border-radius: 999px;
    background: var(--navy-850);
    font: 600 0.9375rem/1.2 var(--font-body);
    color: var(--gold-200);
    cursor: pointer;
}

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

.provider-chip.is-active {
    border-color: var(--gold-300);
    background: var(--gold-metal);
    color: var(--ink);
}

.filter-count {
    margin: 0;
    text-align: center;
    font-size: 0.9375rem;
    color: var(--text-muted);
}

.filter-empty {
    margin: 0;
    padding: 12px 0;
    text-align: center;
    color: var(--gold-200);
}

.filter-portal .hex-badge__text {
    font-size: 0.75rem;
    overflow-wrap: anywhere;
}

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

.titles-grid h3 {
    margin-bottom: 0.6em;
}

.live-copy .tag-list {
    margin-bottom: 1rem;
}

.crash {
    isolation: isolate;
}

.crash__curve {
    position: absolute;
    inset: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.crash__spark {
    position: absolute;
    top: 3%;
    right: 2%;
    z-index: -1;
    width: 18px;
    height: 18px;
    background: #fff;
    clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
    filter: drop-shadow(0 0 8px #4fd6e8);
}

.crash-grid {
    display: grid;
    gap: 44px 18px;
    grid-template-columns: minmax(0, 1fr);
    margin-top: 48px;
}

.crash-card {
    position: relative;
    padding: 48px 18px 22px;
    text-align: center;
    border: 1px solid var(--gold-600);
    border-radius: 16px;
    background: var(--panel);
    box-shadow: inset 0 0 0 4px rgba(5, 13, 26, 0.6), 0 12px 30px rgba(0, 0, 0, 0.35);
}

.crash-card .hex-icon {
    position: absolute;
    top: -37px;
    left: 50%;
    translate: -50% 0;
}

.crash-card h3 {
    font-size: 1.1875rem;
}

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

.crash__note {
    max-width: 720px;
    margin: 32px auto 0;
    text-align: center;
    color: var(--text-muted);
}

.jackpot-note {
    max-width: 760px;
    margin: 0 auto;
}

.tips {
    display: grid;
    gap: 14px;
    max-width: 820px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

.tips li {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    padding: 14px 16px;
    border: 1px solid var(--gold-700);
    border-radius: 12px;
    background: linear-gradient(160deg, #0f2b3d, #0a1a2f);
}

.tips .icon {
    width: 32px;
    height: 32px;
    color: var(--cyan-400);
}

.tips strong {
    color: var(--gold-300);
}

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

@media (min-width: 768px) {
    .cat-tile {
        padding-inline: 18px;
    }
}

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

    .cat-tile:nth-child(even) {
        margin-top: 0;
    }

    .titles-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 36px;
    }

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

    .crash-card:nth-child(1) { margin-top: 90px; }
    .crash-card:nth-child(2) { margin-top: 60px; }
    .crash-card:nth-child(3) { margin-top: 30px; }
    .crash-card:nth-child(4) { margin-top: 0; }
}

/* ============ FAQ page ============ */
.faq-hero {
    position: relative;
    padding-block: 8px 48px;
    background: radial-gradient(ellipse 60% 70% at 85% 40%, rgba(123, 92, 196, 0.2), transparent 70%);
}

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

.faq-hero__title {
    font-size: clamp(1.75rem, 1.2rem + 2.4vw, 3rem);
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.6);
}

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

.faq-hero__age {
    font-weight: 700;
    color: var(--gold-300);
}

.faq-hero__art {
    position: relative;
    isolation: isolate;
    display: grid;
    place-items: center;
}

.faq-hero__art::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(circle at 50% 50%, rgba(232, 195, 106, 0.38) 0%, rgba(232, 195, 106, 0.12) 40%, rgba(232, 195, 106, 0) 68%);
}

.faq-hero__art img {
    width: min(100%, 300px);
    height: auto;
    object-fit: contain;
}

.jump-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 8px;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
}

.jump-chip {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0.4rem 1.3rem;
    font-weight: 700;
    font-size: 0.9375rem;
    color: var(--gold-300);
    text-decoration: none;
}

.jump-chip::before,
.jump-chip::after {
    content: "";
    position: absolute;
    clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 12px 100%, 0 50%);
}

.jump-chip::before {
    inset: 0;
    z-index: -2;
    background: var(--gold-metal);
}

.jump-chip::after {
    inset: 2px;
    z-index: -1;
    background: linear-gradient(180deg, #102a40, #0a1a2f);
}

.jump-chip:hover {
    color: var(--gold-200);
}

.faq-group .faq-list {
    margin-top: 8px;
}

.faq-group .section-lead a {
    color: var(--gold-300);
}

.pay-strip__title {
    margin: 0 0 20px;
    text-align: center;
    font-size: 1.25rem;
    color: var(--gold-300);
}

.pay-strip {
    margin-bottom: 44px;
}

.rg-panel {
    max-width: 880px;
    margin: 40px auto 0;
    padding: 24px 20px;
    border: 1px solid var(--violet-500);
    border-radius: 18px;
    background: linear-gradient(160deg, #221d42 0%, #151a33 100%);
    box-shadow: inset 0 0 0 4px rgba(5, 13, 26, 0.5);
}

.rg-panel__head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
}

.rg-panel__title {
    margin: 0;
    font-weight: 700;
    font-size: 1.125rem;
    color: var(--gold-300);
}

.rg-panel__cols {
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(0, 1fr);
}

.rg-panel__cols h3 {
    margin-bottom: 0.4em;
    font-size: 1.0625rem;
    color: #fff;
}

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

.rg-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    color: var(--text);
}

.rg-list .icon {
    color: var(--cyan-400);
}

.rg-panel__text {
    margin: 18px 0 0;
    color: var(--text-muted);
}

@media (min-width: 768px) {
    .faq-hero__grid {
        grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
        gap: 48px;
    }

    .faq-hero__art img {
        width: min(100%, 420px);
    }

    .rg-panel {
        padding: 30px 32px;
    }

    .rg-panel__cols {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 32px;
    }
}

/* ============ Tablet ============ */
@media (min-width: 480px) {
    .hero__actions {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 18px;
    }
}

@media (min-width: 768px) {
    .container {
        padding-inline: 24px;
    }

    .hero {
        display: flex;
        align-items: center;
        min-height: 560px;
    }

    .hero__media {
        position: absolute;
        inset: 0;
        z-index: 0;
        aspect-ratio: auto;
        background-position: var(--hero-pos, left center);
    }

    .hero__media::after {
        background:
            linear-gradient(90deg, rgba(5, 13, 26, 0) 0%, rgba(5, 13, 26, 0.12) 34%, rgba(5, 13, 26, 0.82) 58%, rgba(5, 13, 26, 0.94) 100%),
            linear-gradient(180deg, rgba(5, 13, 26, 0) 72%, rgba(5, 13, 26, 0.85) 100%);
    }

    .hero__inner {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        margin-top: 0;
        padding-block: 96px 80px;
    }

    .hero__content {
        grid-column: 2;
    }

    .hero__badge {
        top: 24px;
        right: 28px;
        width: 72px;
    }

    .card-grid {
        grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
    }

    .conduit--row {
        --medal: 116px;
    }

    .conduit--row .conduit__list {
        grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr));
    }

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

    .conduit--row .conduit__seg {
        left: 50%;
        top: calc(var(--medal-h) / 2 - 8px);
        width: calc(100% + var(--cgap));
        height: 16px;
    }

    .conduit--row .conduit__seg .seg-h {
        display: inline;
    }

    .conduit--row .conduit__seg .seg-v {
        display: none;
    }

    .gold-rail {
        padding-block: 0;
    }

    .gold-rail__plate {
        top: 28%;
        bottom: 28%;
        left: -2%;
        right: -2%;
        width: auto;
        margin-left: 0;
        background:
            linear-gradient(180deg, transparent 14%, rgba(90, 60, 15, 0.4) 14% 18%, transparent 18% 82%, rgba(90, 60, 15, 0.4) 82% 86%, transparent 86%),
            var(--gold-plate);
        box-shadow: inset 0 2px 0 rgba(255, 245, 210, 0.55), inset 0 -3px 0 rgba(0, 0, 0, 0.25), 0 10px 26px rgba(0, 0, 0, 0.5);
    }

    .gold-rail__hinge {
        position: absolute;
        top: -14%;
        bottom: -14%;
        display: block;
        width: 26px;
        border-radius: 5px;
        background: linear-gradient(90deg, #8a6220, #e2bd68 45%, #b7862f);
        box-shadow: 0 6px 14px rgba(0, 0, 0, 0.45);
    }

    .gold-rail__hinge--l {
        left: 2%;
    }

    .gold-rail__hinge--r {
        right: 2%;
    }

    .gold-rail__cards {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 20px;
        max-width: none;
        padding-inline: 34px;
    }

    .rail-card {
        --cut: 34px;
        padding-inline: 22px;
    }

    .footer-plate {
        padding: 38px 32px 26px;
    }

    .footer-legal {
        flex-direction: row;
        align-items: flex-start;
        text-align: left;
    }

    .cta-band__box {
        padding: 44px 40px;
    }
}

/* ============ Desktop ============ */
@media (min-width: 1024px) {
    body {
        padding-bottom: 0;
    }

    .section {
        padding-block: 88px;
    }

    .split {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
        gap: 56px;
    }

    .site-header {
        background: linear-gradient(180deg, #081a30 0%, #050d1a 100%);
        border-bottom: 0;
    }

    .site-header__inner {
        position: relative;
        display: block;
        min-height: 84px;
        padding: 0 16px;
    }

    .site-brand {
        position: absolute;
        top: 0;
        left: 16px;
        z-index: 2;
        width: var(--tab-w);
        height: 104px;
        margin-left: 0;
        justify-content: center;
        gap: 10px;
        padding-bottom: 14px;
    }

    .site-brand__tab {
        position: absolute;
        inset: 0;
        z-index: 0;
        display: block;
        width: 100%;
        height: 100%;
        filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.55));
    }

    .site-brand__emblem {
        width: 56px;
        height: 56px;
    }

    .site-brand__name {
        font-size: 1.65rem;
    }

    .site-brand__sub {
        font-size: 0.95rem;
    }

    .menu-toggle {
        display: none;
    }

    .site-nav {
        position: static;
        display: flex;
        justify-content: space-between;
        align-items: center;
        min-height: 84px;
        margin-left: calc(var(--tab-w) + 16px);
        padding: 0;
        overflow: visible;
        background: none;
        visibility: visible;
        transform: none;
        transition: none;
    }

    .site-nav__list {
        flex-direction: row;
        align-items: center;
        gap: 4px;
    }

    .site-nav__list--start {
        grid-column: 1;
        justify-content: flex-end;
        padding-right: 14px;
    }

    .site-nav__end {
        grid-column: 3;
        display: flex;
        align-items: center;
        gap: 8px;
        padding-left: 14px;
    }

    .site-nav__link {
        min-height: 44px;
        padding: 0 10px;
        border-bottom: 0;
        font-size: 1rem;
    }

    .site-nav__link[aria-current="page"]::after {
        content: "";
        position: absolute;
        left: 10px;
        right: 10px;
        bottom: 6px;
        height: 2px;
        background: var(--gold-400);
    }

    .header-actions {
        flex-direction: row;
        gap: 8px;
        margin: 0;
    }

    .header-actions .btn {
        width: auto;
    }

    .site-frame {
        margin: 6px 20px 20px;
        border-radius: 22px;
    }

    .site-frame::before {
        inset: 7px;
        border-radius: 16px;
    }

    .hero {
        min-height: 620px;
    }

    .hero__inner {
        padding-block: 120px 96px;
    }

    .faq-list--honeycomb {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: 1000px;
        gap: 20px 28px;
    }

    .faq-list--honeycomb > .hex-faq:nth-child(even) {
        margin-top: 56px;
    }

    .gold-rail__key {
        position: absolute;
        top: 50%;
        left: 0;
        z-index: 1;
        display: block;
        width: 60px;
        translate: 0 -50%;
        filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.5));
    }

    .gold-rail__cards {
        padding-inline: 88px;
        gap: 28px;
    }

    .footer-plate__grid {
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        align-items: center;
        text-align: left;
    }

    .footer-brand {
        order: 0;
    }

    .footer-links,
    .pay-chips {
        justify-content: flex-start;
    }

    .footer-plate__grid > .footer-col:first-child {
        padding-left: 90px;
    }

    .footer-plate__grid > .footer-col:last-child {
        padding-right: 90px;
    }

    .mobile-cta {
        display: none;
    }

    .cookie-banner {
        left: auto;
        right: 32px;
        bottom: 24px;
        margin: 0;
    }
}

@media (min-width: 1280px) {
    :root {
        --tab-w: 260px;
    }

    .site-header__inner {
        padding: 0 24px;
    }

    .site-nav__list--start {
        padding-right: 24px;
    }

    .site-nav__end {
        gap: 14px;
        padding-left: 24px;
    }
}

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

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

    .btn:hover {
        transform: none;
    }
}