/* ============================================================
   OnlySpins Casino - design system
   ============================================================ */

:root {
    /* palette */
    --bg: #0a0518;
    --bg-2: #120a2b;
    --bg-3: #1a0f3d;
    --surface: linear-gradient(180deg, rgba(36, 20, 78, .92), rgba(14, 8, 34, .94));
    --violet: #7b2ff7;
    --violet-light: #a86bff;
    --magenta: #ff3ec8;
    --cyan: #36e2ff;
    --gold: #f5c76a;
    --gold-bright: #ffd98a;
    --text: #f4efff;
    --text-muted: #c9bdea;
    --line: rgba(168, 107, 255, .32);

    --grad-neon: linear-gradient(135deg, var(--cyan), var(--violet-light) 50%, var(--magenta));
    --grad-cta: linear-gradient(135deg, #2f1a9c, #6b25e0 55%, #9a22d0);
    --grad-band: linear-gradient(90deg, #2a1060, #11514f 50%, #2a1060);

    --shadow-card: 0 18px 44px rgba(0, 0, 0, .5);
    --bloom: 0 0 32px rgba(255, 62, 200, .45);

    --radius: 18px;
    --radius-sm: 12px;
    --shell: 1200px;
    --space-section: clamp(3.25rem, 7vw, 6rem);

    --font-head: 'Oswald', 'Arial Narrow', Impact, sans-serif;
    --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

    --header-bottom: 62px;
}

/* ---------- 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 { max-width: 100%; overflow-x: auto; }
.table-wrapper { max-width: 100%; overflow-x: auto; }
p, li, td, th { overflow-wrap: break-word; }
details { height: fit-content; }
input, textarea, select { max-width: 100%; }
section { overflow: clip; }

/* ---------- base ---------- */
html { scroll-behavior: smooth; }
body {
    margin: 0;
    background:
        radial-gradient(1100px 620px at 12% -8%, rgba(123, 47, 247, .35), transparent 62%),
        radial-gradient(900px 600px at 92% 14%, rgba(255, 62, 200, .18), transparent 60%),
        var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
    font-family: var(--font-head);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: .01em;
    text-transform: uppercase;
    margin: 0 0 .6rem;
}
h1 { font-size: clamp(2rem, 6.2vw, 3.6rem); }
h2 { font-size: clamp(1.6rem, 4.2vw, 2.6rem); }
h3 { font-size: clamp(1.15rem, 2.4vw, 1.4rem); }
p { margin: 0 0 1rem; }
a { color: var(--cyan); }
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
    outline: 3px solid var(--cyan);
    outline-offset: 3px;
    border-radius: 6px;
}
ul, ol { padding-left: 1.15rem; }
strong { color: var(--gold-bright); }

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

.sr-only {
    position: absolute; 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: -9999px; top: 0; z-index: 200;
    background: var(--bg-3); color: var(--text); padding: .8rem 1.2rem; border-radius: 0 0 10px 0;
}
.skip-link:focus { left: 0; }
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- layout ---------- */
.shell { width: min(100% - 2rem, var(--shell)); margin-inline: auto; }
main > section { padding-block: var(--space-section); position: relative; }
.band { position: relative; isolation: isolate; }
.band__bg {
    position: absolute; inset: 0; z-index: -2;
    background-size: cover; background-repeat: no-repeat;
}
.band__scrim { position: absolute; inset: 0; z-index: -1; }
.band--hairline::before,
.band--hairline::after {
    content: ""; position: absolute; left: 0; right: 0; height: 2px;
    background: var(--grad-neon); z-index: 2;
}
.band--hairline::before { top: 0; }
.band--hairline::after { bottom: 0; }

.eyebrow {
    font-family: var(--font-head);
    text-transform: uppercase;
    letter-spacing: .22em;
    font-size: .8rem;
    color: var(--cyan);
    margin: 0 0 .5rem;
}
.section-head { margin-bottom: 2rem; max-width: 62ch; }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head__title { color: var(--gold); }
.section-head__intro { color: var(--text-muted); font-size: 1.02rem; }

.prose { max-width: 68ch; color: var(--text-muted); }
.prose h3 { color: var(--text); margin-top: 1.6rem; }
.prose strong { color: var(--gold-bright); }

/* ---------- buttons & pills ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    min-height: 48px; padding: .85rem 1.7rem;
    font-family: var(--font-head); font-weight: 600; font-size: 1rem;
    text-transform: uppercase; letter-spacing: .08em; text-decoration: none;
    border: 0; border-radius: 999px; cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.btn--primary {
    background: var(--grad-cta);
    color: #ffffff;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .18), 0 10px 30px rgba(123, 47, 247, .5), var(--bloom);
}
.btn--primary:hover, .btn--primary:focus-visible { transform: translateY(-2px); filter: brightness(1.12); }
.btn--ghost {
    background: rgba(12, 6, 30, .72);
    color: var(--cyan);
    box-shadow: inset 0 0 0 2px rgba(54, 226, 255, .55);
}
.btn--ghost:hover, .btn--ghost:focus-visible { transform: translateY(-2px); box-shadow: inset 0 0 0 2px var(--cyan), 0 0 22px rgba(54, 226, 255, .35); }
.btn--sm { min-height: 44px; padding: .6rem 1.1rem; font-size: .88rem; }
.btn--lg { font-size: 1.1rem; padding: 1rem 2.1rem; }
.btn--xl { font-size: clamp(1.05rem, 2.4vw, 1.3rem); padding: 1.1rem 2.6rem; }

.link-arrow {
    font-family: var(--font-head); text-transform: uppercase; letter-spacing: .08em;
    color: var(--gold); text-decoration: underline; text-underline-offset: .2em;
    display: inline-flex; align-items: center; min-height: 44px;
}
.link-arrow::after { content: " →"; }

.pill-row { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; margin: 0 0 1.4rem; }
.pill {
    font-family: var(--font-head); font-size: .82rem; letter-spacing: .1em; text-transform: uppercase;
    padding: .4rem .9rem; border-radius: 999px;
    background: rgba(12, 6, 30, .75); color: var(--gold-bright);
    box-shadow: inset 0 0 0 1px rgba(255, 62, 200, .55);
}
.micro-badge {
    font-family: var(--font-head); font-size: .74rem; line-height: 1.25; letter-spacing: .1em;
    text-transform: uppercase; text-align: center; color: var(--cyan);
    padding: .5rem .9rem; border-radius: 999px; background: rgba(10, 5, 24, .8);
    box-shadow: inset 0 0 0 1.5px rgba(54, 226, 255, .6);
}

/* ---------- header ---------- */
.site-header {
    position: sticky; top: 0; z-index: 90;
    border-bottom: 1px solid var(--line);
}
.site-header::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: rgba(9, 4, 22, .9);
    backdrop-filter: blur(14px);
}
.site-header.is-scrolled { box-shadow: 0 10px 30px rgba(0, 0, 0, .55); }
.header-inner {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    min-height: 62px; padding-block: .5rem;
}
.site-brand { text-decoration: none; display: inline-flex; align-items: center; }
.site-brand__text {
    font-family: var(--font-body); font-weight: 700; font-size: clamp(1.15rem, 4vw, 1.5rem);
    letter-spacing: -.01em;
}
.site-brand__a { color: var(--cyan); }
.site-brand__b { color: var(--magenta); }
.site-brand__c { color: #ffffff; font-size: .62em; }

.nav-toggle {
    width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center;
    background: rgba(12, 6, 30, .8); border: 0; border-radius: 12px;
    box-shadow: inset 0 0 0 1.5px rgba(168, 107, 255, .6);
}
.nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after {
    display: block; width: 22px; height: 2px; background: var(--text); border-radius: 2px;
    transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle__bars { position: relative; }
.nav-toggle__bars::before, .nav-toggle__bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle__bars::before { top: -7px; }
.nav-toggle__bars::after { top: 7px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { transform: translateY(-7px) rotate(-45deg); }

.site-nav {
    display: none;
    position: fixed; left: 0; right: 0; top: var(--header-bottom); bottom: 0; height: auto;
    z-index: 95;
    background: #0b0620;
    border-top: 2px solid rgba(168, 107, 255, .4);
    overflow-y: auto;
    padding: 1rem 1rem 2.5rem;
}
.site-nav.is-open { display: flex; flex-direction: column; gap: 1.2rem; }
.site-nav__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.site-nav__list a {
    display: flex; align-items: center; min-height: 52px;
    font-family: var(--font-head); font-size: 1.1rem; text-transform: uppercase; letter-spacing: .08em;
    color: var(--text); text-decoration: none;
    border-bottom: 1px solid rgba(168, 107, 255, .22);
}
.site-nav__list a:hover { color: var(--gold); }
.site-nav__actions { display: flex; flex-direction: column; gap: .7rem; }
.site-nav__actions .btn { width: 100%; }
body.nav-open { overflow: hidden; }

/* ---------- hero ---------- */
.hero { padding: 0; min-height: 560px; display: flex; align-items: flex-end; }
.hero__bg { background-position: 32% center; }
.hero__scrim {
    background: linear-gradient(180deg, rgba(10, 5, 24, .45) 0%, rgba(10, 5, 24, .3) 32%, rgba(10, 5, 24, .9) 66%, rgba(10, 5, 24, .97) 100%);
}
.hero__inner { padding-block: 2.5rem 3rem; }
.hero__content { max-width: 36rem; }
.hero__title { color: #ffffff; text-shadow: 0 4px 22px rgba(0, 0, 0, .7); }
.hero__plaque {
    display: inline-block; position: relative;
    margin: .4rem 0 .6rem; padding: .7rem 1.2rem;
    font-family: var(--font-head); font-size: clamp(1.35rem, 5vw, 2.1rem); line-height: 1.1;
    color: var(--gold-bright); text-shadow: 0 0 18px rgba(245, 199, 106, .55);
    background: rgba(9, 4, 22, .78); border-radius: 14px;
    box-shadow: 0 0 34px rgba(255, 62, 200, .35);
}
.hero__plaque::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px;
    background: var(--grad-neon);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}
.hero__plaque-note {
    font-family: var(--font-head); text-transform: uppercase; letter-spacing: .1em;
    color: var(--text); margin: 0 0 .8rem;
}
.hero__lead { color: var(--text); font-size: 1.05rem; text-shadow: 0 2px 10px rgba(0, 0, 0, .8); }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }

/* ---------- cards & grids ---------- */
.grid { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
.grid--start { align-items: start; }

.ncard {
    position: relative; padding: 1.5rem; border-radius: var(--radius);
    background: var(--surface); box-shadow: var(--shadow-card);
    transition: transform .2s ease, box-shadow .2s ease;
}
.ncard::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
    background: var(--grad-neon);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}
.ncard:hover { transform: translateY(-5px); box-shadow: var(--shadow-card), 0 0 34px rgba(168, 107, 255, .35); }
.ncard__figure {
    font-family: var(--font-head); font-size: clamp(2.1rem, 6vw, 3rem); line-height: 1;
    color: var(--gold); margin: 0 0 .4rem; text-shadow: 0 0 20px rgba(245, 199, 106, .4);
}
.ncard__icon { width: 46px; margin-bottom: .6rem; }
.ncard__title { color: #ffffff; }
.ncard__text { color: var(--text-muted); margin-bottom: .6rem; }
.ncard__note {
    margin: 0; padding-top: .7rem; border-top: 1px solid rgba(168, 107, 255, .3);
    font-size: .92rem; color: var(--gold-bright);
}
.ncard__cta { margin-top: 1rem; }
.os-icon { display: block; width: 100%; height: auto; }

/* game tiles */
.tile {
    position: relative; display: flex; flex-direction: column; gap: .4rem;
    padding: 1.1rem; border-radius: var(--radius-sm); text-align: center;
    background: linear-gradient(180deg, rgba(42, 22, 92, .85), rgba(12, 7, 32, .94));
    box-shadow: var(--shadow-card);
    transition: transform .2s ease, box-shadow .2s ease;
}
.tile::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
    background: var(--grad-neon);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}
.tile:hover { transform: translateY(-5px); box-shadow: var(--shadow-card), 0 0 30px rgba(255, 62, 200, .4); }
.tile__art {
    width: 74px; height: 74px; margin: .2rem auto .3rem;
    display: grid; place-items: center; border-radius: 50%;
    background: radial-gradient(circle, rgba(123, 47, 247, .45), transparent 70%);
    transform: rotate(var(--tile-rot, 0deg));
}
.tile__title { font-size: 1.05rem; color: var(--gold-bright); margin: 0; }
.tile__text { color: var(--text-muted); font-size: .92rem; margin: 0; }
.tile__cta { margin-top: auto; align-self: center; }

/* stats */
.stat { padding-block: .6rem; }
.stat__num {
    display: block; font-family: var(--font-head); font-size: clamp(2.6rem, 9vw, 4.4rem);
    line-height: 1; color: var(--gold); text-shadow: 0 0 26px rgba(245, 199, 106, .35);
}
.stat__label { display: block; color: var(--text-muted); font-size: .98rem; margin-top: .35rem; }

/* question cards */
.qcard {
    position: relative; padding: 1.6rem 1.3rem; border-radius: var(--radius);
    background: linear-gradient(180deg, rgba(38, 20, 84, .8), rgba(12, 7, 32, .9));
    box-shadow: var(--shadow-card);
}
.qcard::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
    background: var(--grad-neon);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}
.qcard__q { color: var(--gold); font-size: 1.1rem; text-align: center; }
.qcard__a { color: var(--text-muted); }
.qcard__a p:last-child { margin-bottom: 0; }
.qcard__flourish { display: block; width: 120px; margin: 0 auto .6rem; }
.qcard__flourish--bottom { margin: .8rem auto 0; }

/* shields */
.shield-band {
    background: var(--grad-band);
    border-block: 1px solid rgba(255, 255, 255, .18);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28);
    padding: 1.6rem 1rem;
    border-radius: var(--radius);
}
.shield-row {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; justify-items: center;
}
.shield { text-align: center; max-width: 150px; }
.shield__svg { width: 58px; height: auto; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .55)); }
.shield__label {
    display: block; font-family: var(--font-head); text-transform: uppercase; letter-spacing: .07em;
    font-size: .92rem; color: #ffffff; margin-top: .4rem;
}
.shield__caption { display: block; font-size: .82rem; color: #e6dcff; }

/* table */
.data-table { width: 100%; border-collapse: collapse; min-width: 480px; font-size: .95rem; }
.table-wrapper {
    position: relative; border-radius: var(--radius);
    background: rgba(12, 7, 32, .85); box-shadow: var(--shadow-card);
    border-top: 3px solid transparent;
    background-image: var(--grad-neon), linear-gradient(rgba(12, 7, 32, .92), rgba(12, 7, 32, .92));
    background-origin: border-box; background-clip: border-box, padding-box;
}
.data-table caption { caption-side: top; padding: .9rem 1rem 0; text-align: left; color: var(--text-muted); font-size: .9rem; }
.data-table th, .data-table td { padding: .8rem 1rem; text-align: left; vertical-align: top; }
.data-table thead th {
    font-family: var(--font-head); text-transform: uppercase; letter-spacing: .08em;
    color: var(--cyan); border-bottom: 2px solid rgba(54, 226, 255, .45);
}
.data-table tbody tr:nth-child(odd) { background: rgba(123, 47, 247, .12); }
.data-table tbody th { color: #ffffff; font-weight: 600; font-family: var(--font-body); }
.data-table tbody td { color: var(--gold-bright); }

/* steps */
.steps { list-style: none; margin: 0; padding: 0; position: relative; display: grid; gap: 1.1rem; }
.steps::before {
    content: ""; position: absolute; left: 22px; top: 12px; bottom: 12px; width: 3px;
    background: linear-gradient(180deg, var(--cyan), var(--magenta)); border-radius: 3px; opacity: .85;
}
.step {
    position: relative; padding: 1.1rem 1.1rem 1.1rem 3.6rem; border-radius: var(--radius-sm);
    background: linear-gradient(180deg, rgba(38, 20, 84, .8), rgba(12, 7, 32, .9));
    box-shadow: var(--shadow-card);
}
.step::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
    background: var(--grad-neon);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}
.step__num {
    position: absolute; left: .55rem; top: 1rem;
    width: 38px; height: 38px; border-radius: 50%;
    display: grid; place-items: center;
    font-family: var(--font-head); font-size: 1.15rem; color: #fff;
    background: var(--grad-cta); box-shadow: 0 0 18px rgba(255, 62, 200, .5);
}
.step__title { font-size: 1.05rem; color: var(--gold-bright); }
.step__text { margin: 0; color: var(--text-muted); font-size: .95rem; }

/* ladder */
.ladder { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.ladder__item {
    position: relative; padding: 1.1rem 1.1rem 1.1rem 4.2rem; border-radius: var(--radius-sm);
    background: linear-gradient(90deg, rgba(123, 47, 247, calc(.1 + var(--tier) * .07)), rgba(12, 7, 32, .9));
    box-shadow: inset 0 0 0 1px rgba(168, 107, 255, calc(.25 + var(--tier) * .12));
}
.ladder__gem {
    position: absolute; left: 1rem; top: 1.1rem;
    width: calc(22px + var(--tier) * 4px); height: auto;
}
.ladder__level {
    font-family: var(--font-head); font-size: .78rem; letter-spacing: .18em;
    text-transform: uppercase; color: var(--cyan);
}
.ladder__title { margin: .1rem 0 .3rem; font-size: 1.05rem; color: var(--gold-bright); }
.ladder__text { margin: 0; color: var(--text-muted); font-size: .94rem; }

/* framed media + player panel */
.media-frame {
    margin: 0; border-radius: var(--radius); overflow: hidden; position: relative;
    box-shadow: var(--shadow-card), 0 0 34px rgba(255, 62, 200, .25);
}
.media-frame::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px;
    background: var(--grad-neon);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}
.media-frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.media-frame figcaption { padding: .7rem 1rem; background: rgba(10, 5, 24, .9); color: var(--text-muted); font-size: .88rem; }

.play-panel {
    position: relative; padding: 1rem; border-radius: var(--radius);
    background: linear-gradient(180deg, rgba(30, 16, 70, .9), rgba(10, 6, 28, .95));
    box-shadow: var(--shadow-card);
}
.play-panel::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px;
    background: var(--grad-neon);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}
.play-panel__screen {
    position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-sm);
    display: grid; place-items: center;
    background: radial-gradient(circle at 50% 50%, rgba(123, 47, 247, .5), rgba(8, 4, 20, .95) 70%);
}
.play-panel__spiral { width: 96px; display: block; }
.play-panel__play {
    position: absolute; width: 0; height: 0;
    border-left: 26px solid var(--gold-bright);
    border-top: 16px solid transparent; border-bottom: 16px solid transparent;
    filter: drop-shadow(0 0 16px rgba(245, 199, 106, .8));
}
.play-panel__bar { margin-top: .8rem; height: 6px; border-radius: 6px; background: rgba(255, 255, 255, .16); overflow: hidden; }
.play-panel__bar span { display: block; width: 62%; height: 100%; background: var(--grad-neon); }
.play-panel__title { margin: .7rem 0 0; font-family: var(--font-head); text-transform: uppercase; letter-spacing: .08em; color: #fff; }
.play-panel__caption { margin: .2rem 0 0; color: var(--text-muted); font-size: .9rem; }

/* callout */
.callout {
    display: flex; gap: 1rem; align-items: flex-start;
    padding: 1.2rem; border-radius: var(--radius);
    background: rgba(14, 8, 36, .85);
    border-left: 5px solid var(--gold);
    box-shadow: var(--shadow-card);
}
.callout--cyan { border-left-color: var(--cyan); box-shadow: var(--shadow-card), inset 0 0 40px rgba(54, 226, 255, .12); }
.callout--alert { border-left-color: var(--magenta); background: linear-gradient(90deg, rgba(92, 12, 56, .6), rgba(14, 8, 36, .9)); }
.callout__icon { width: 42px; flex: 0 0 42px; }
.callout__title { font-size: 1.1rem; color: var(--gold-bright); }
.callout__text { margin: 0; color: var(--text-muted); }

/* final CTA band */
.cta-band {
    position: relative; padding-block: clamp(3rem, 8vw, 5rem);
    text-align: center; overflow: clip;
    background: radial-gradient(60% 120% at 50% 50%, rgba(255, 62, 200, .3), transparent 70%);
    border-block: 1px solid var(--line);
}
.cta-band__art {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; object-position: center; z-index: -1; opacity: .85;
}
.cta-band__inner { position: relative; z-index: 1; }
.cta-band__title { color: var(--gold); text-shadow: 0 0 26px rgba(245, 199, 106, .4); }
.cta-band__text { color: var(--text); max-width: 54ch; margin-inline: auto; }
.cta-band__row { display: flex; flex-wrap: wrap; gap: .9rem; justify-content: center; align-items: center; margin-top: 1.4rem; }
.cta-band__note { margin-top: 1.1rem; color: var(--text-muted); font-size: .95rem; }

/* ---------- footer ---------- */
.site-footer { position: relative; overflow: clip; border-top: 2px solid rgba(168, 107, 255, .5); background: #07030f; }
.site-footer::before {
    content: ""; position: absolute; inset: 0;
    background-image: url("./assets/34b52e47b8c3c6695f1df2ad345d8ef2.webp");
    background-size: cover; background-position: center;
}
.site-footer::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7, 3, 15, .8), rgba(7, 3, 15, .93)); }
.footer-inner { position: relative; z-index: 1; padding-block: 2.8rem 2rem; }
.footer-cols { display: grid; gap: 1.8rem; }
.footer-col__title {
    font-size: .95rem; letter-spacing: .16em; color: var(--cyan); margin-bottom: .7rem;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: .2rem; }
.footer-col a {
    display: inline-flex; align-items: center; min-height: 40px;
    color: var(--text); text-decoration: none; font-size: .95rem;
}
.footer-col a:hover { color: var(--gold); text-decoration: underline; }
.footer-col--brand .site-brand__text { font-size: 1.35rem; }
.footer-note { color: var(--text-muted); font-size: .92rem; margin-top: .6rem; }
.age-chip {
    display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
    font-family: var(--font-head); font-size: 1.1rem; color: #fff;
    background: rgba(12, 6, 30, .9); box-shadow: inset 0 0 0 2px var(--magenta), 0 0 20px rgba(255, 62, 200, .35);
}
.footer-legal {
    margin-top: 2rem; padding-top: 1.4rem; border-top: 1px solid rgba(168, 107, 255, .3);
    color: var(--text-muted); font-size: .88rem;
}
.footer-legal strong { color: var(--gold-bright); }
.footer-copy { margin-bottom: 0; }

/* ---------- cookie banner ---------- */
.cookie-banner {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 120;
    background: #0b0620; border-top: 2px solid var(--magenta);
    box-shadow: 0 -16px 40px rgba(0, 0, 0, .6);
}
.cookie-banner[hidden] { display: none; }
.cookie-banner__inner {
    width: min(100% - 2rem, var(--shell)); margin-inline: auto;
    padding: 1rem 0 1.2rem; display: grid; gap: .9rem;
}
.cookie-banner__text { margin: 0; color: var(--text-muted); font-size: .92rem; }
.cookie-banner__actions { display: flex; flex-wrap: wrap; gap: .6rem; }

/* ---------- split section helper ---------- */
.split { display: grid; gap: 1.8rem; align-items: center; }
.split__media { position: relative; }
.split__media img { display: block; width: 100%; height: auto; }
.split--fullmedia { gap: 0; }

/* ============================================================
   Breakpoints
   ============================================================ */
@media (min-width: 600px) {
    .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .shield-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .cookie-banner__inner { grid-template-columns: 1fr auto; align-items: center; }
}

@media (min-width: 768px) {
    .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .hero { min-height: 620px; }
    .steps--row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ladder { gap: 1rem; }
    .ladder__item { margin-left: calc((var(--tier) - 1) * 14px); }
}

@media (min-width: 1024px) {
    .nav-toggle { display: none; }
    .site-nav {
        display: flex; position: static; inset: auto; height: auto;
        flex-direction: row; align-items: center; gap: 1.6rem;
        background: transparent; border-top: 0; overflow: visible; padding: 0;
    }
    .site-nav__list { flex-direction: row; gap: 1.4rem; }
    .site-nav__list a { min-height: 44px; font-size: .95rem; border-bottom: 0; }
    .site-nav__actions { flex-direction: row; gap: .6rem; }
    .site-nav__actions .btn { width: auto; }

    .hero { min-height: 680px; align-items: center; }
    .hero__bg { background-position: 24% center; }
    .hero__scrim {
        background: linear-gradient(90deg, rgba(10, 5, 24, .1) 0%, rgba(10, 5, 24, .35) 38%, rgba(10, 5, 24, .9) 56%, rgba(10, 5, 24, .96) 100%);
    }
    .hero__inner { display: grid; grid-template-columns: 1fr 1fr; padding-block: 3.5rem; }
    .hero__content { grid-column: 2; max-width: none; }

    .shield-row { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1rem; }
    .split { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem; }
    .split--media-right .split__media { order: 2; }

    .steps--row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .steps--row::before {
        left: 12px; right: 12px; top: 30px; bottom: auto; width: auto; height: 3px;
        background: linear-gradient(90deg, var(--cyan), var(--magenta));
    }
    .steps--row .step { padding: 3.6rem 1.1rem 1.2rem; }
    .steps--row .step__num { left: 1.1rem; top: 1.1rem; }

    .ladder { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .ladder__item { margin-left: 0; padding: 3.6rem 1rem 1.2rem; }
    .ladder__gem { top: 1.1rem; left: 1rem; }

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

@media (min-width: 1280px) {
    .hero__title { font-size: 3.6rem; }
}

/* ============================================================
   Homepage
   ============================================================ */

/* welcome bonus band */
.bonus-band__bg { background-position: 14% center; }
.bonus-band__scrim {
    background: linear-gradient(180deg, rgba(10, 5, 24, .55), rgba(10, 5, 24, .86) 48%, rgba(10, 5, 24, .95));
}
.bonus-grid { display: grid; gap: 1.8rem; }
.bonus-grid__art { display: none; }
.bonus-grid__copy { position: relative; color: var(--text-muted); }
.bonus-grid__copy ul { margin: 0 0 1rem; }
.bonus-grid__copy li { margin-bottom: .35rem; }
.bonus-grid__figures { text-align: center; }

.figure-cloud {
    display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center;
    gap: .2rem .9rem; margin: 0 0 .6rem;
}
.figure-cloud span {
    font-family: var(--font-head); line-height: 1; color: var(--gold);
    text-shadow: 0 0 26px rgba(245, 199, 106, .45);
}
.figure-cloud .f-xl { font-size: clamp(2.8rem, 11vw, 4.6rem); transform: rotate(-3deg); }
.figure-cloud .f-lg { font-size: clamp(2.1rem, 8vw, 3.4rem); transform: rotate(2deg); }
.figure-cloud .f-md { font-size: clamp(1.6rem, 6vw, 2.5rem); transform: rotate(-5deg); }
.figure-cloud .f-sm { font-size: clamp(1.3rem, 5vw, 2rem); transform: rotate(4deg); }
.figures-head {
    font-family: var(--font-head); text-transform: uppercase; letter-spacing: .1em;
    font-size: clamp(1.3rem, 4vw, 1.8rem); color: var(--gold-bright); margin: 0 0 .2rem;
}
.figures-sub { color: var(--text); margin: 0 auto 1.1rem; max-width: 34ch; }

/* slots showcase */
.slots-band__bg { background-position: right center; }
.slots-band__scrim {
    background: linear-gradient(180deg, rgba(10, 5, 24, .92), rgba(10, 5, 24, .86) 70%, rgba(10, 5, 24, .94));
}
.slots-grid { display: grid; gap: 1.6rem; }

/* social proof + PAA */
.stats-section { position: relative; overflow: clip; }
.stats-grid { display: grid; gap: 2.2rem; margin-top: 1.6rem; }
.stats-col { position: relative; isolation: isolate; padding-block: 1rem; }
.stats-col::before {
    content: ""; position: absolute; z-index: -2;
    left: -20%; top: 50%; transform: translateY(-50%);
    width: 420px; height: 420px; max-width: 110%;
    background: radial-gradient(circle, rgba(123, 47, 247, .45), transparent 68%);
    pointer-events: none;
}
.stats-mask {
    position: absolute; z-index: -1; left: -26%; top: 50%; transform: translateY(-50%);
    width: clamp(200px, 56vw, 400px); height: auto; object-fit: contain; pointer-events: none;
}
.stats-col__nums { position: relative; display: grid; gap: 1.2rem; padding-left: clamp(0rem, 14vw, 5rem); }
.stats-col__nums .stat + .stat { border-top: 2px solid rgba(168, 107, 255, .35); padding-top: 1.1rem; }

/* live casino */
.live-section { position: relative; }
.live-media {
    height: clamp(240px, 56vw, 340px); margin-bottom: 1.8rem;
    border-radius: var(--radius); background-size: cover; background-position: 32% center;
    box-shadow: var(--shadow-card);
}
.live-grid { display: grid; gap: 1.8rem; }
.live-grid__spacer { display: none; }

/* trust strip */
.trust-section .shield-band { margin-top: .5rem; }

/* final CTA */
.cta-band .cta-band__art { object-fit: contain; object-position: center; }
.cta-band .btn--primary { position: relative; overflow: hidden; }
.cta-band .btn--primary::after {
    content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent);
    animation: ctaShimmer 3.6s ease-in-out infinite;
}
@keyframes ctaShimmer {
    0% { left: -60%; }
    60%, 100% { left: 120%; }
}

@media (min-width: 768px) {
    .stats-col__nums { padding-left: clamp(2rem, 16vw, 7rem); }
}

@media (min-width: 1024px) {
    .bonus-grid { grid-template-columns: .8fr 1.1fr .95fr; align-items: center; gap: 2.5rem; }
    .bonus-grid__art { display: block; min-height: 340px; }
    .bonus-grid__copy::after {
        content: ""; position: absolute; right: -1.25rem; top: 0; bottom: 0; width: 2px;
        background: linear-gradient(180deg, transparent, var(--cyan), var(--magenta), transparent);
    }
    .bonus-band__scrim {
        background: linear-gradient(90deg, rgba(10, 5, 24, .3) 0%, rgba(10, 5, 24, .55) 26%, rgba(10, 5, 24, .9) 46%, rgba(10, 5, 24, .92) 100%);
    }

    .slots-grid { grid-template-columns: .85fr 1.5fr; align-items: start; gap: 2.5rem; }
    .slots-band__scrim {
        background: linear-gradient(90deg, rgba(10, 5, 24, .96) 40%, rgba(10, 5, 24, .72) 78%, rgba(10, 5, 24, .55) 100%);
    }

    .stats-grid { grid-template-columns: .8fr 1.4fr; align-items: center; gap: 3rem; }
    .stats-mask { left: -42%; width: 420px; }

    .live-media {
        position: absolute; left: 0; top: 0; bottom: 0; width: 46%;
        height: auto; margin: 0; border-radius: 0; box-shadow: none;
        background-position: 38% center;
        -webkit-mask-image: linear-gradient(90deg, #000 60%, transparent 100%);
        mask-image: linear-gradient(90deg, #000 60%, transparent 100%);
    }
    .live-grid { grid-template-columns: .85fr 1.15fr 1fr; align-items: center; gap: 2.2rem; }
    .live-grid__spacer { display: block; }
}

/* ============================================================
   Bonusy page
   ============================================================ */

.bonus-cards-section { position: relative; }
.bonus-cards-wrap { position: relative; }
.bns-cards { display: grid; gap: 1.4rem; position: relative; z-index: 1; margin-top: 1rem; }
.bns-card .ncard__figure { font-size: clamp(2.4rem, 7vw, 3.4rem); }
.bonus-arc { display: none; }
.bonus-cards-cta { text-align: center; margin-top: 2rem; }

@media (min-width: 1024px) {
    .bns-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .bonus-arc {
        display: block; position: absolute; left: 0; top: 46%; width: 100%; height: 160px;
        z-index: 0; pointer-events: none;
    }
}

/* crab mechanic */
.crab-section { position: relative; }
.crab-grid { display: grid; gap: 2rem; align-items: center; margin-top: 1.4rem; }
.crab-media { position: relative; display: grid; place-items: center; min-height: 280px; }
.crab-media::before {
    content: ""; position: absolute; inset: -10%; z-index: -1;
    background: radial-gradient(circle, rgba(123, 47, 247, .45), transparent 70%);
}
.crab-media img { width: 100%; max-width: 420px; height: auto; object-fit: contain; display: block; }
.crab-steps-wrap { position: relative; }
.crab-steps-connector {
    position: absolute; left: 22px; top: 12px; bottom: 12px; width: 3px; height: calc(100% - 24px);
    z-index: 0;
}
.crab-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; position: relative; z-index: 1; }
.crab-step {
    position: relative; padding: 1.1rem 1.1rem 1.1rem 3.6rem; border-radius: var(--radius-sm);
    background: linear-gradient(180deg, rgba(38, 20, 84, .8), rgba(12, 7, 32, .9));
    box-shadow: var(--shadow-card);
}
.crab-step__num {
    position: absolute; left: .55rem; top: 1rem; width: 38px; height: 38px; border-radius: 50%;
    display: grid; place-items: center; font-family: var(--font-head); font-size: 1.1rem; color: #fff;
    background: var(--grad-cta); box-shadow: 0 0 18px rgba(255, 62, 200, .5);
}
.crab-step__title { font-size: 1.05rem; color: var(--gold-bright); margin: 0 0 .3rem; }
.crab-step__text { margin: 0; color: var(--text-muted); font-size: .95rem; }
.crab-cta { margin-top: 1.4rem; text-align: center; }

@media (min-width: 1024px) {
    .crab-grid { grid-template-columns: 1fr 1.2fr; gap: 3rem; }
    .crab-cta { text-align: left; }
}

/* crypto section */
.crypto-section { position: relative; isolation: isolate; }
.crypto-section__bg { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center; }
.crypto-section__scrim {
    position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(180deg, rgba(10, 5, 24, .94) 0%, rgba(10, 5, 24, .72) 60%, rgba(10, 5, 24, .94) 100%);
}
.crypto-section__streaks {
    position: absolute; inset: 0; z-index: -1; opacity: .22; pointer-events: none;
    background-image: repeating-linear-gradient(115deg, rgba(54, 226, 255, .5) 0 2px, transparent 2px 60px);
}
.crypto-copy { max-width: 46rem; position: relative; z-index: 1; }
.crypto-callouts { display: flex; flex-wrap: wrap; gap: 1rem; margin: 1.2rem 0; }
.crypto-callout {
    padding: .8rem 1.3rem; border-radius: var(--radius-sm); background: rgba(10, 5, 24, .75);
    box-shadow: inset 0 0 0 1.5px rgba(245, 199, 106, .6); text-align: center;
}
.crypto-callout__num { display: block; font-family: var(--font-head); font-size: clamp(1.6rem, 5vw, 2.2rem); color: var(--gold-bright); }
.crypto-callout__label { display: block; font-size: .82rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; }

/* cashback cards */
.cashback-cards { display: grid; gap: 1.4rem; margin-top: 1.4rem; }
.cashback-card {
    position: relative; padding: 1.6rem; border-radius: var(--radius);
    background: var(--surface); box-shadow: var(--shadow-card);
}
.cashback-card::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
    background: var(--grad-neon);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}
.cashback-card__head { display: flex; align-items: center; gap: 1rem; margin-bottom: .8rem; }
.cashback-card__pct { font-family: var(--font-head); font-size: clamp(2.2rem, 7vw, 3rem); color: var(--gold); text-shadow: 0 0 20px rgba(245, 199, 106, .4); }
.cashback-card__arrow { width: 54px; flex: 0 0 54px; }
.cashback-card__title { margin: 0 0 .4rem; color: #ffffff; font-size: 1.1rem; }
.cashback-card__text { color: var(--text-muted); margin: 0; }

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

/* vip ladder */
.vip-ladder-wrap { position: relative; margin-top: 1.6rem; }
.vip-ladder-wrap .ladder { position: relative; z-index: 1; }
.vip-diag { display: none; }

@media (min-width: 1024px) {
    .vip-diag { display: block; position: absolute; inset: 0; z-index: 0; pointer-events: none; }
}

/* wagering table */
.wager-intro { max-width: 60ch; }

/* ============================================================
   Gry (catalog) page
   ============================================================ */

.slots-cat-grid { display: grid; gap: 1.6rem; }
.slots-cat-media { position: relative; isolation: isolate; display: flex; justify-content: center; }
.slots-cat-media::before {
    content: ""; position: absolute; inset: -15%; z-index: -1;
    background: radial-gradient(circle, rgba(123, 47, 247, .45), transparent 70%);
}
.slots-cat-media img { width: 100%; max-width: 320px; height: auto; object-fit: contain; display: block; margin-inline: auto; }
.slots-cat-tiles { margin-top: 1.4rem; }

.crash-grid { display: grid; gap: 1.8rem; align-items: center; }
.crash-media { position: relative; isolation: isolate; display: flex; justify-content: center; }
.crash-media::before {
    content: ""; position: absolute; inset: -15%; z-index: -1;
    background: radial-gradient(circle, rgba(255, 62, 200, .38), transparent 70%);
}
.crash-media img { width: 100%; max-width: 300px; height: auto; object-fit: contain; display: block; }
.crash-cards-wrap { position: relative; margin-top: 2rem; }
.crash-trajectory { position: absolute; left: 0; top: -14px; width: 100%; height: 150px; z-index: 0; pointer-events: none; }
.crash-cards { position: relative; z-index: 1; }

.filter-bar {
    display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.4rem 0 .6rem; position: relative; padding-bottom: 1rem;
}
.filter-bar::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
    background: linear-gradient(90deg, transparent, var(--cyan), var(--violet-light), var(--magenta), transparent);
    opacity: .6;
}
.filter-chip {
    font-family: var(--font-head); font-size: .85rem; letter-spacing: .06em; text-transform: uppercase;
    padding: .55rem 1.1rem; border-radius: 999px; border: 0; cursor: pointer; min-height: 44px;
    background: rgba(12, 6, 30, .75); color: var(--text-muted);
    box-shadow: inset 0 0 0 1.5px rgba(168, 107, 255, .5);
    transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}
.filter-chip:hover { color: var(--text); }
.filter-chip.is-active {
    background: linear-gradient(135deg, var(--cyan), var(--violet-light));
    color: #0a0518; box-shadow: none;
}
.filter-count { color: var(--text-muted); font-size: .92rem; margin-bottom: 1.2rem; }
.game-catalog .tile.is-hidden { display: none; }

@media (min-width: 1024px) {
    .slots-cat-grid { grid-template-columns: .9fr 1.5fr; align-items: center; gap: 2.5rem; }
    .slots-cat-media { justify-content: flex-start; }
    .slots-cat-media img { max-width: 400px; }

    .crash-grid { grid-template-columns: 1.3fr .8fr; gap: 3rem; }
    .crash-media img { max-width: 360px; }
}

/* ============================================================
   O nas page
   ============================================================ */

.brand-story-grid { display: grid; gap: 1.6rem; }
.brand-story__bar { display: none; }
.brand-story__text { color: var(--text-muted); }
.pullquote {
    position: relative; margin: 1.4rem 0; padding: 1.2rem 1.4rem 1.2rem 2.6rem;
    border-left: 4px solid var(--gold);
    background: rgba(14, 8, 36, .6); border-radius: var(--radius-sm);
    font-family: var(--font-head); font-size: 1.1rem; color: var(--gold-bright);
}
.pullquote__glyph { position: absolute; left: .4rem; top: .2rem; width: 28px; height: auto; opacity: .85; }

.licensing-grid { display: grid; gap: 1.8rem; align-items: start; margin-top: 1rem; }
.license-seal-wrap { position: relative; display: flex; justify-content: center; padding: 1rem; }
.license-seal-wrap::before {
    content: ""; position: absolute; inset: 10%; z-index: -1;
    background: radial-gradient(circle, rgba(245, 199, 106, .4), transparent 70%);
}
.license-seal-wrap img { width: 100%; max-width: 220px; height: auto; }

.security-cards { margin-top: 1rem; }

.fact-panel {
    position: relative; margin-top: 1rem; padding: 1.4rem 1.4rem 1.4rem 1.8rem;
    border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-card);
    border-left: 4px solid var(--gold);
}
.fact-panel::after {
    content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
    box-shadow: inset 0 0 50px rgba(123, 47, 247, .22);
}
.fact-row { display: grid; grid-template-columns: 1fr; gap: .15rem; padding: .7rem 0; border-bottom: 1px solid rgba(168, 107, 255, .25); }
.fact-row:last-child { border-bottom: 0; }
.fact-label { font-family: var(--font-head); text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; color: var(--cyan); }
.fact-value { color: var(--text); font-size: 1rem; }

.palette-strip { position: relative; display: flex; gap: 1rem; justify-content: center; margin: 1.6rem 0; padding-top: .5rem; flex-wrap: wrap; }
.palette-ribbon { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 100%; height: 60px; z-index: 0; pointer-events: none; }
.swatch {
    position: relative; z-index: 1; width: 64px; height: 120px; border-radius: 18px;
    box-shadow: var(--shadow-card), inset 0 10px 18px rgba(255, 255, 255, .35);
}
.swatch--violet { background: linear-gradient(180deg, var(--violet-light), var(--violet)); }
.swatch--magenta { background: linear-gradient(180deg, #ff87dd, var(--magenta)); }
.swatch--cyan { background: linear-gradient(180deg, #a6f2ff, var(--cyan)); }
.swatch--gold { background: linear-gradient(180deg, var(--gold-bright), var(--gold)); }

.rg-panel {
    position: relative; margin-top: 1rem; padding: 1.4rem; border-radius: var(--radius);
    background: linear-gradient(135deg, rgba(92, 12, 56, .55), rgba(14, 8, 36, .92));
    border-left: 6px solid var(--magenta);
    box-shadow: var(--shadow-card);
    display: flex; gap: 1.2rem; align-items: flex-start; flex-wrap: wrap;
}
.rg-badge { width: 68px; flex: 0 0 68px; }
.rg-panel__text { color: var(--text-muted); margin: 0; }
.rg-panel__title { color: var(--gold-bright); margin-bottom: .4rem; }

@media (min-width: 1024px) {
    .brand-story-grid { grid-template-columns: .1fr 1.9fr; gap: 2rem; }
    .brand-story__bar { display: block; width: 6px; border-radius: 6px; background: var(--grad-neon); min-height: 100%; }
    .licensing-grid { grid-template-columns: .8fr 1.4fr; gap: 2.5rem; }
    .licensing-grid .license-seal-wrap { order: 2; }
}

/* ============================================================
   Płatności page
   ============================================================ */
.fee-cards { display: grid; gap: 1.4rem; margin-top: 1.4rem; }
.fee-card {
    position: relative; padding: 1.4rem 1.4rem 1.4rem 1.6rem; border-radius: var(--radius-sm);
    background: var(--surface); box-shadow: var(--shadow-card); border-left: 4px solid var(--gold);
}
.fee-card__figure {
    font-family: var(--font-head); font-size: clamp(2rem, 6vw, 2.6rem); line-height: 1;
    color: var(--gold); text-shadow: 0 0 18px rgba(245, 199, 106, .4); margin: 0 0 .3rem;
}
.fee-card__title { margin: 0 0 .3rem; color: #ffffff; font-size: 1.05rem; }
.fee-card__divider { border: 0; border-top: 1px solid rgba(168, 107, 255, .3); margin: .6rem 0; }
.fee-card__text { color: var(--text-muted); margin: 0; font-size: .92rem; }

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

/* ---------- motion ---------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}