/* ==========================================================================
   RefBoost Frontend - main stylesheet
   Dark "test lab" theme: green-tinted ink surfaces, one action color (mint),
   gold reserved for ratings/scores, red for roulette + responsible gambling.
   No glows, no mesh gradients, no gradient text.
   ========================================================================== */

/* Paleta mieszka w `palette.css` - patrz komentarz w `layout.html`
   o kolejności arkuszy. Tutaj byłaby wczytywana ZA blokiem silnika
   i zabijała panel kolorów. */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    background: var(--bg-pure);
    color: var(--text-secondary);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
main { flex: 1; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }

/* ==========================================================================
   Backgrounds
   ========================================================================== */
/* Former neon mesh: now a single, barely-there overhead light so sections
   don't read as one flat void. */
.bg-mesh {
    background-color: var(--bg-pure);
    background-image:
        radial-gradient(ellipse 60% 50% at 80% 15%, rgba(43, 217, 166, 0.09) 0%, transparent 55%),
        radial-gradient(ellipse 55% 45% at 10% 70%, rgba(43, 217, 166, 0.05) 0%, transparent 55%),
        radial-gradient(ellipse 90% 60% at 50% -10%, rgba(255, 255, 255, 0.03) 0%, transparent 60%);
}
.bg-noise { display: none; }

/* ==========================================================================
   Layout helpers
   ========================================================================== */
.container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1rem;
}
@media (min-width: 640px)  { .container { padding: 0 1.5rem; } }
@media (min-width: 1024px) { .container { padding: 0 2rem; } }

/* ==========================================================================
   HEADER / NAV
   ========================================================================== */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(11, 14, 13, 0.75);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.site-header .inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    height: 72px;
}
.brand {
    display: flex;
    align-items: center;
    gap: .15rem;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.15rem;
    color: #fff;
    text-decoration: none;
}
.brand-logo-img {
    height: 36px;
    width: auto;
    display: block;
}
.brand-suffix { display: none; } /* logo includes .gg already */
/* Tiny brand-logo box still used in copyright (kept as small mark) */
.brand-logo {
    width: 28px; height: 28px;
    border-radius: 8px;
    background: var(--mint);
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--bg-pure);
    font-weight: 700;
    font-size: .95rem;
    flex-shrink: 0;
}

.nav-main {
    display: none;
    align-items: center;
    gap: 2rem;
}
@media (min-width: 1024px) { .nav-main { display: flex; } }
.nav-main a {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: .92rem;
    color: var(--text-secondary);
    transition: color .2s ease;
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}
.nav-main a:hover { color: var(--mint); }
.nav-main a.active { color: #fff; }
.nav-main a.active::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -22px;
    height: 2px;
    background: var(--mint);
    border-radius: 2px;
}
.nav-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--mint);
    color: var(--bg-pure);
    font-family: var(--font-label);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .1em;
}

.nav-right {
    display: flex;
    align-items: center;
    gap: .75rem;
}
.lang-pill, .age-pill {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem .8rem;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: .8rem;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all .2s ease;
}
.lang-pill:hover { border-color: rgba(43, 217, 166, 0.3); color: #fff; }
.age-pill {
    color: var(--red);
    border-color: rgba(200, 16, 46, 0.35);
    background: rgba(200, 16, 46, 0.08);
}

.nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #fff;
    cursor: pointer;
}
@media (min-width: 1024px) { .nav-toggle { display: none; } }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer {
    margin-top: 4rem;
    padding: 3rem 0 2rem;
    background: linear-gradient(180deg, transparent 0%, rgba(11, 14, 13, 0.8) 100%);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr repeat(4, 1fr);
    gap: 2rem;
    margin-bottom: 3rem;
}
@media (max-width: 768px) {
    .footer-grid { grid-template-columns: 1fr 1fr; }
}
.footer-col h4 {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0 0 1rem;
    font-weight: 500;
}
.footer-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: .65rem;
}
.footer-col ul a {
    font-size: .9rem;
    color: var(--text-secondary);
    transition: color .2s ease;
}
.footer-col ul a:hover { color: var(--mint); }
.footer-social {
    display: flex;
    gap: .65rem;
    margin-top: 1rem;
}
.footer-social a {
    width: 36px; height: 36px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex; align-items: center; justify-content: center;
    color: var(--text-secondary);
    transition: all .2s ease;
}
.footer-social a:hover { color: var(--mint); border-color: rgba(43, 217, 166, 0.3); }
.footer-bottom {
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.footer-bottom .copyright {
    font-size: .8rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: .6rem;
}
.footer-bottom .responsibility {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .85rem;
    border-radius: 10px;
    background: rgba(200, 16, 46, 0.08);
    border: 1px solid rgba(200, 16, 46, 0.2);
    font-size: .75rem;
    color: var(--text-secondary);
}
.footer-bottom .responsibility strong { color: var(--red); }

/* ==========================================================================
   SURFACES
   ========================================================================== */
.card {
    background: var(--bg-surface);
    border: 1px solid var(--line);
    border-radius: 14px;
}
.card-strong {
    background: var(--bg-surface);
    border: 1px solid var(--line);
    border-radius: 16px;
}

/* ==========================================================================
   EYEBROW / SECTION HEADER
   ========================================================================== */
.eyebrow {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: 600;
}
.eyebrow .dot { color: var(--text-muted); margin: 0 .4em; }
.section-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 2.5rem;
    color: #fff;
    letter-spacing: -.02em;
    line-height: 1.05;
    margin: 0;
}
@media (min-width: 768px) { .section-title { font-size: 3rem; } }
.section-title .accent {
    color: inherit;
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    padding: .85rem 1.4rem;
    border-radius: 10px;
    background: linear-gradient(135deg, #33e0ad 0%, var(--mint-deep) 100%);
    color: #08120e;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: .95rem;
    border: 0;
    box-shadow: 0 10px 26px -12px rgba(43, 217, 166, 0.5);
    cursor: pointer;
    transition: background .2s ease, transform .2s ease;
}
.btn-primary:hover { transform: translateY(-1px); background: linear-gradient(135deg, #3ee6b6 0%, #17c495 100%); box-shadow: 0 14px 32px -12px rgba(43, 217, 166, 0.6); }

.btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    padding: .85rem 1.4rem;
    border-radius: 10px;
    background: transparent;
    color: var(--text-secondary);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: .95rem;
    border: 1px solid var(--line-strong);
    cursor: pointer;
    transition: border-color .2s ease, color .2s ease;
}
.btn-secondary:hover { border-color: rgba(43, 217, 166, 0.5); color: #fff; }

.btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .75rem 1.25rem;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-secondary);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: .85rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    cursor: pointer;
    transition: all .2s ease;
}
.btn-ghost:hover { border-color: rgba(43, 217, 166, 0.4); color: #fff; }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
    position: relative;
    overflow-x: clip;
}
.hero-inner {
    position: relative;
    z-index: 1;
    padding: 4rem 0 5rem;
}
@media (min-width: 1024px) { .hero-inner { padding: 6rem 0 7rem; } }
.hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    align-items: center;
}
@media (min-width: 1024px) {
    .hero-grid { grid-template-columns: 7fr 5fr; gap: 2rem; }
}
.hero-copy { position: relative; z-index: 5; }
.hero-eyebrow {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1.25rem;
}
.hero-headline {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2.5rem, 5.5vw, 4.25rem);
    line-height: 1.0;
    letter-spacing: -.02em;
    margin: 0 0 1.5rem;
}
.hero-headline .line-1 { display: block; color: #fff; }
.hero-headline .line-2 { display: block; color: var(--text-muted); }
.hero-lead {
    font-size: 1.05rem;
    color: rgba(195, 203, 199, 0.9);
    max-width: 38rem;
    line-height: 1.6;
    margin: 0 0 2rem;
}
.hero-lead strong { color: var(--mint); font-weight: 600; }
.hero-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-bottom: 3rem;
}
.hero-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    max-width: 38rem;
}
@media (min-width: 640px) {
    .hero-stats { grid-template-columns: repeat(4, 1fr); }
}
.stat {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}
.stat .num {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.65rem;
    color: #fff;
    line-height: 1;
    display: flex;
    align-items: baseline;
    gap: .15rem;
}
.stat .num .plus { color: var(--mint); font-size: 1.3rem; }
.stat .num .icon { width: 18px; height: 18px; color: var(--mint); margin-right: .25rem; }
.stat .label {
    font-family: var(--font-label);
    font-size: 10px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(195, 203, 199, 0.55);
}

/* Hero image (overlaps text - feels deeper) */
.hero-img-wrap {
    position: relative;
    width: 130%;
    max-width: 820px;
    margin-left: -15%;
    z-index: 1;
}
@media (min-width: 1024px) {
    .hero-img-wrap { width: 140%; max-width: 900px; margin-left: -22%; }
}
@media (min-width: 1280px) {
    .hero-img-wrap { width: 150%; max-width: 1040px; margin-left: -30%; }
}
.hero-img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 40px 70px rgba(0, 0, 0, 0.6));
}

/* ==========================================================================
   CASINO RANKING TABLE
   ========================================================================== */
.ranking-section { padding: 4rem 0 5rem; }
.ranking-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}
@media (min-width: 1024px) { .ranking-grid { grid-template-columns: 8fr 4fr; gap: 1.5rem; } }

.ranking-card { padding: 1.75rem; }
.ranking-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5rem;
    gap: 1rem;
}
.ranking-head h2 {
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 700;
    color: #fff;
    margin: .5rem 0 0;
}
.ranking-head .eyebrow.pill {
    display: inline-block;
    padding: .25rem .5rem;
    border-radius: 6px;
    background: rgba(43, 217, 166, 0.08);
    border: 1px solid rgba(43, 217, 166, 0.2);
}

.rank-row {
    display: grid;
    grid-template-columns: 50px 50px 1fr 180px 80px 70px 20px;
    align-items: center;
    gap: 1rem;
    padding: 1rem .75rem;
    border-radius: 14px;
    border: 1px solid transparent;
    transition: all .25s ease;
}
.rank-row + .rank-row { margin-top: .5rem; }
.rank-row:hover {
    background: rgba(43, 217, 166, 0.03);
    border-color: rgba(43, 217, 166, 0.18);
    transform: translateX(2px);
}
.rank-row.top1 {
    background: linear-gradient(90deg, rgba(43, 217, 166, 0.06) 0%, transparent 50%);
    border-color: rgba(43, 217, 166, 0.28);
}
.rank-num {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.4rem;
    color: rgba(255, 255, 255, 0.35);
    text-align: center;
    letter-spacing: -.02em;
}
.rank-row.top1 .rank-num { color: var(--mint); }
.rank-logo {
    width: 44px; height: 44px;
    border-radius: 12px;
    background: var(--bg-card);
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.3rem;
}
.rank-logo span {
    color: var(--text-primary);
}
.rank-row.top1 .rank-logo {
    border-color: rgba(43, 217, 166, 0.4);
}
.rank-name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.05rem;
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.rank-name .badge {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    width: max-content;
    padding: 2px 8px;
    border-radius: 6px;
    background: rgba(245, 184, 46, 0.12);
    border: 1px solid rgba(245, 184, 46, 0.3);
    color: var(--gold);
    font-family: var(--font-label);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.col-label {
    font-family: var(--font-label);
    font-size: 9px;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 2px;
}
.col-val { color: #fff; font-weight: 600; font-size: .9rem; line-height: 1.2; }
.col-sub { color: rgba(43, 217, 166, 0.7); font-size: .75rem; }
.score-circle {
    width: 56px; height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1rem;
    color: var(--mint);
}
.score-circle::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid rgba(43, 217, 166, 0.35);
    background: conic-gradient(from -90deg, var(--mint) 0%, var(--mint) 96%, rgba(43, 217, 166, 0.15) 96%, rgba(43, 217, 166, 0.15) 100%);
    mask: radial-gradient(circle at center, transparent 60%, #000 62%);
    -webkit-mask: radial-gradient(circle at center, transparent 60%, #000 62%);
}
.rank-arrow {
    color: rgba(255, 255, 255, 0.3);
    transition: all .2s ease;
}
.rank-row:hover .rank-arrow {
    color: var(--mint);
    transform: translateX(4px);
}

@media (max-width: 768px) {
    .rank-row {
        grid-template-columns: 40px 40px 1fr 70px;
        font-size: .85rem;
    }
    .rank-row .hide-mobile { display: none; }
}

/* Why card sidebar */
.why-card { padding: 1.5rem; display: flex; flex-direction: column; }
.why-card h3 {
    font-family: var(--font-display);
    font-size: 1.25rem;
    color: #fff;
    margin: 0 0 1rem;
}
.reason {
    display: flex;
    gap: .85rem;
    padding: .85rem 0;
}
.reason + .reason { border-top: 1px solid rgba(255, 255, 255, 0.05); }
.reason .ic {
    width: 36px; height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(43, 217, 166, 0.08), rgba(43, 217, 166, 0.08));
    border: 1px solid rgba(43, 217, 166, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--mint);
}
.reason .t { font-weight: 700; color: #fff; font-size: .9rem; }
.reason .d { color: rgba(195, 203, 199, 0.55); font-size: .78rem; line-height: 1.45; margin-top: 2px; }

/* Bonus callout */
.bonus-callout {
    position: relative;
    background: rgba(43, 217, 166, 0.05);
    border: 1px solid rgba(43, 217, 166, 0.22);
    border-radius: 14px;
    padding: 1.25rem;
    overflow: hidden;
}

/* ==========================================================================
   HOW WE RANK (criteria pills)
   ========================================================================== */
.howwerank-section { padding: 3.5rem 0; }
.howwerank-card { padding: 2rem; }
.howwerank-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    align-items: center;
}
@media (min-width: 1024px) { .howwerank-grid { grid-template-columns: 4fr 8fr; gap: 2.5rem; } }
.criteria-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .75rem;
}
@media (min-width: 768px) { .criteria-grid { grid-template-columns: repeat(6, 1fr); } }
.criteria-pill {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .65rem;
    padding: 1.25rem 1rem 1rem;
    background: rgba(19, 24, 22, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    transition: all .25s ease;
}
.criteria-pill:hover { border-color: rgba(43, 217, 166, 0.3); transform: translateY(-3px); }
.criteria-pill .ic-wrap {
    width: 44px; height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(43, 217, 166, 0.1), rgba(43, 217, 166, 0.1));
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mint);
}
.criteria-pill .lbl {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: .82rem;
    text-transform: none;
    letter-spacing: 0;
    color: #fff;
    text-align: center;
    line-height: 1.25;
}
.criteria-pill .pct {
    font-family: var(--font-label);
    font-weight: 700;
    color: var(--mint);
    font-size: .9rem;
}

/* ==========================================================================
   TOP RATED CARDS
   ========================================================================== */
.toprated-section { padding: 4rem 0 5rem; }
.toprated-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 2rem;
    gap: 1rem;
}
.toprated-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}
@media (min-width: 768px) { .toprated-grid { grid-template-columns: repeat(3, 1fr); } }
.top-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    background: linear-gradient(180deg, rgba(21, 27, 25, 0.9), rgba(14, 18, 17, 0.9));
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    transition: all .3s ease;
    overflow: hidden;
}
.top-card.top1 {
    border-color: rgba(43, 217, 166, 0.35);
    box-shadow: 0 24px 48px -32px rgba(0, 0, 0, 0.8);
}
.top-card:hover {
    transform: translateY(-4px);
    border-color: rgba(43, 217, 166, 0.35);
}
.top-card .head {
    display: flex;
    align-items: center;
    gap: .85rem;
    margin-bottom: 1rem;
}
.top-card .rank-chip {
    width: 38px; height: 38px;
    border-radius: 10px;
    background: linear-gradient(135deg, #273230, #141a18);
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 700;
    color: rgba(255, 255, 255, 0.7);
    font-size: .9rem;
}
.top-card.top1 .rank-chip {
    background: var(--gold);
    border-color: rgba(245, 184, 46, 0.5);
    color: var(--bg-pure);
}
.top-card .logo {
    width: 44px; height: 44px;
    border-radius: 12px;
    background: var(--bg-card);
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.3rem;
}
.top-card .logo span {
    color: var(--text-primary);
}
.top-card .name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.05rem;
    color: #fff;
    flex: 1;
}
.top-card .stars-row {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1rem;
}
.top-card .stars { color: var(--gold); font-size: 1rem; }
.top-card .rating-val {
    font-family: var(--font-label);
    color: #fff;
    font-weight: 700;
    font-size: .85rem;
}
.top-card .rating-of { color: rgba(255, 255, 255, 0.4); font-size: .75rem; }
.top-card .bonus-box {
    background: rgba(43, 217, 166, 0.05);
    border: 1px solid rgba(43, 217, 166, 0.15);
    border-radius: 12px;
    padding: .85rem;
    margin-bottom: 1rem;
}
.top-card .bonus-val {
    font-family: var(--font-display);
    font-weight: 700;
    color: #fff;
    font-size: .92rem;
}
.top-card .bonus-sub {
    color: var(--mint);
    font-size: .78rem;
    margin-top: 2px;
}
.top-card .actions { display: flex; gap: .5rem; }
.top-card .btn-claim {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    padding: .7rem .85rem;
    border-radius: 10px;
    background: var(--mint);
    color: var(--bg-pure);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: .82rem;
    border: 1px solid rgba(43, 217, 166, 0.4);
    transition: all .2s ease;
}
.top-card .btn-claim:hover { transform: translateY(-1px); background: #3ee6b6; }
.top-card .btn-review {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .7rem .85rem;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    color: #dbe2de;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: .82rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all .2s ease;
}
.top-card .btn-review:hover { border-color: rgba(43, 217, 166, 0.35); color: #fff; }

/* ==========================================================================
   ROULETTE WIDGET
   ========================================================================== */
.roulette-section { padding: 5rem 0; border-top: 1px solid rgba(255, 255, 255, 0.05); border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
.section-head-center {
    text-align: center;
    margin-bottom: 3rem;
}
.section-head-center .eyebrow { display: inline-block; margin-bottom: .75rem; }
.section-head-center .section-title { display: block; }
.section-head-center .lead {
    max-width: 36rem;
    margin: .85rem auto 0;
    color: var(--text-muted);
}
.roulette-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    align-items: center;
}
@media (min-width: 1024px) { .roulette-grid { grid-template-columns: 5fr 7fr; } }
.wheel-wrap { position: relative; width: 100%; max-width: 340px; margin: 0 auto; }
.wheel-glow {
    position: absolute;
    inset: -28px;
    background: radial-gradient(circle at center, rgba(43, 217, 166, 0.2) 0%, transparent 68%);
    filter: blur(35px);
    pointer-events: none;
    z-index: 0;
}
.wheel-svg {
    position: relative;
    z-index: 1;
    width: 100%;
    height: auto;
}
.wheel-svg [data-wheel-disc],
.wheel-svg [data-wheel-ball] {
    transform-box: view-box;
    transform-origin: 200px 200px;
}
.wheel-svg .highlight-mask {
    fill: rgba(43, 217, 166, 0.4);
    stroke: var(--mint);
    stroke-width: 3;
    opacity: 0;
    transition: opacity .4s ease;
    pointer-events: none;
}
.wheel-svg .highlight-mask.on { opacity: 1; }

.spin-btn-wrap { text-align: center; margin-top: 1.75rem; }
.spin-btn {
    padding: .9rem 2rem;
    font-size: .95rem;
}

.reveal {
    position: relative;
    padding: 1.5rem 1.75rem;
    border-radius: 14px;
    background: rgba(19, 24, 22, 0.85);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(43, 217, 166, 0.3);
    box-shadow: 0 24px 48px -24px rgba(0, 0, 0, 0.8);
    opacity: 0;
    transform: translateY(16px);
    pointer-events: none;
    transition: opacity .5s ease, transform .5s ease;
}
.reveal.on { opacity: 1; transform: translateY(0); pointer-events: auto; }
.reveal .top-block {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.25rem;
}
.reveal .logo-box {
    width: 56px; height: 56px;
    border-radius: 12px;
    background: var(--bg-card);
    border: 1px solid rgba(43, 217, 166, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.5rem;
}
.reveal .logo-box span {
    color: var(--text-primary);
}
.reveal h3 {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 .25rem;
}
.reveal .meta {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
    color: rgba(255, 255, 255, 0.55);
    font-size: .85rem;
}
.reveal .meta .sep { color: rgba(255, 255, 255, 0.2); }
.reveal .meta .accent-num { color: var(--mint); }
.reveal .bonus-item {
    padding: .85rem 1rem;
    border-radius: 12px;
    background: rgba(11, 14, 13, 0.6);
    border: 1px solid rgba(43, 217, 166, 0.2);
    margin-bottom: 1.25rem;
}
.reveal .bonus-item .lbl {
    font-family: var(--font-label);
    font-size: 10px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--mint);
    margin-bottom: 2px;
}
.reveal .bonus-item .val { color: #fff; font-weight: 600; }
.reveal .actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem;
}
.reveal .actions .btn-primary, .reveal .actions .btn-secondary {
    font-size: .85rem;
    padding: .7rem 1.25rem;
}
.reveal .reset-link {
    background: none;
    border: 0;
    color: var(--text-muted);
    cursor: pointer;
    font-size: .85rem;
    font-family: inherit;
    padding: .5rem .75rem;
}
.reveal .reset-link:hover { color: var(--mint); }

/* ==========================================================================
   SLOT MACHINE
   ========================================================================== */
.slot-section { padding: 5rem 0; }
.slot-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    align-items: center;
}
@media (min-width: 1024px) { .slot-grid { grid-template-columns: 7fr 5fr; } }
.slot {
    position: relative;
    max-width: 720px;
    margin: 0 auto;
    border-radius: 16px;
    padding: 2rem 1.75rem 1.75rem;
    background: linear-gradient(145deg, rgba(21, 27, 25, 0.95), rgba(11, 14, 13, 0.95));
    border: 1px solid rgba(43, 217, 166, 0.25);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 30px 60px -25px rgba(0, 0, 0, 0.7),
        0 0 60px -20px rgba(43, 217, 166, 0.2);
}
.slot::before {
    content: "";
    position: absolute;
    inset: 10px;
    border-radius: 22px;
    border: 1px dashed rgba(43, 217, 166, 0.18);
    pointer-events: none;
}
.slot .marquee {
    text-align: center;
    font-family: var(--font-label);
    font-size: 10px;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: rgba(43, 217, 166, 0.8);
    margin-bottom: 1.25rem;
}
.slot .marquee .dot {
    display: inline-block;
    width: 6px; height: 6px;
    background: var(--mint);
    border-radius: 50%;
    margin: 0 .5rem;
    vertical-align: middle;
}
.slot .screen {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .65rem;
    padding: 1.25rem;
    border-radius: 16px;
    background: #070908;
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: inset 0 2px 12px rgba(0, 0, 0, 0.6);
    position: relative;
    overflow: hidden;
}
.slot .screen::before,
.slot .screen::after {
    content: "";
    position: absolute;
    left: 0; right: 0;
    height: 38px;
    pointer-events: none;
    z-index: 2;
}
.slot .screen::before { top: 0; background: linear-gradient(to bottom, #070908, transparent); }
.slot .screen::after  { bottom: 0; background: linear-gradient(to top, #070908, transparent); }
.slot .reel {
    height: 150px;
    overflow: hidden;
    border-radius: 10px;
    background: linear-gradient(180deg, var(--bg-deep), #141a18);
    border: 1px solid rgba(255, 255, 255, 0.05);
    position: relative;
}
.slot .strip { will-change: transform; transform: translate3d(0, 0, 0); }
.slot .cell {
    height: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    padding: .5rem;
}
.slot .cell .big {
    width: 56px; height: 56px;
    border-radius: 12px;
    background: var(--bg-card);
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.6rem;
}
.slot .cell .big span {
    color: var(--text-primary);
}
.slot .cell .n {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--text-secondary);
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}
.slot .strip.spinning { filter: blur(3px); }
.slot .reel.locked .big { border-color: var(--mint); }
.slot .reel.jackpot { animation: slotJackpot 0.55s ease-out 3; }
@keyframes slotJackpot {
    0%, 100% { box-shadow: inset 0 2px 12px rgba(0, 0, 0, 0.6); }
    50% { box-shadow: inset 0 2px 12px rgba(0, 0, 0, 0.6), 0 0 0 2px rgba(43, 217, 166, 0.35); }
}
.slot .ctrls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.25rem;
}
.slot .counter {
    font-family: var(--font-label);
    font-size: 10px;
    letter-spacing: .15em;
    color: rgba(255, 255, 255, 0.45);
    text-transform: uppercase;
}
.slot .counter strong { color: var(--mint); }
.slot .pull {
    padding: .9rem 2rem;
    border-radius: 12px;
    background: var(--mint);
    color: var(--bg-pure);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: .95rem;
    letter-spacing: .15em;
    text-transform: uppercase;
    border: 1px solid rgba(43, 217, 166, 0.4);
    box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.6);
    cursor: pointer;
    transition: transform .15s ease, box-shadow .2s ease;
}
.slot .pull:hover:not([disabled]) { transform: translateY(-2px); }
.slot .pull[disabled] { opacity: .5; cursor: not-allowed; }

.numbered-list {
    margin: 1.5rem 0 0;
    padding: 0;
    list-style: none;
    color: var(--text-muted);
    font-size: .9rem;
}
.numbered-list li {
    display: flex;
    gap: .9rem;
    padding: .5rem 0;
}
.numbered-list li::before {
    content: attr(data-n);
    font-family: var(--font-label);
    color: var(--mint);
    font-weight: 700;
}

/* ==========================================================================
   CARD PICK
   ========================================================================== */
.cards-section { padding: 5rem 0; border-top: 1px solid rgba(255, 255, 255, 0.05); }
.card-fan {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 0;
    padding: 3.5rem 1rem 2rem;
    min-height: 320px;
    perspective: 1200px;
}
.pick {
    position: relative;
    width: 140px; height: 200px;
    margin: 0 -22px;
    cursor: pointer;
    transform-style: preserve-3d;
    transition: transform .5s cubic-bezier(.2, .8, .3, 1), opacity .5s ease;
}
.pick:nth-child(1) { transform: rotate(-10deg) translateY(8px); }
.pick:nth-child(2) { transform: rotate(-5deg) translateY(2px); }
.pick:nth-child(3) { transform: rotate(0deg); }
.pick:nth-child(4) { transform: rotate(5deg) translateY(2px); }
.pick:nth-child(5) { transform: rotate(10deg) translateY(8px); }
.pick:hover:not(.flipped):not(.faded) {
    transform: rotate(0deg) translateY(-16px) scale(1.05) !important;
    filter: drop-shadow(0 18px 36px rgba(0, 0, 0, 0.55));
}
.pick.flipped {
    transform: rotate(0deg) translateY(-26px) scale(1.1) !important;
    z-index: 20;
}
.pick.flipped .pick-inner { transform: rotateY(180deg); }
.pick.faded {
    opacity: 0;
    transform: translateY(20px) scale(0.85) !important;
    pointer-events: none;
}
.pick-inner {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    transition: transform .75s cubic-bezier(.2, .8, .3, 1);
}
.pick-face {
    position: absolute;
    inset: 0;
    border-radius: 14px;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.pick-back {
    background:
        radial-gradient(circle at 50% 50%, rgba(43, 217, 166, 0.18), transparent 60%),
        linear-gradient(135deg, #141a18, #1b2220);
    border: 2px solid rgba(43, 217, 166, 0.35);
    box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.7);
}
.pick-back::before {
    content: "";
    position: absolute;
    inset: 10px;
    border-radius: 8px;
    border: 1px solid rgba(43, 217, 166, 0.2);
    background-image:
        repeating-linear-gradient(45deg, transparent 0, transparent 8px, rgba(43, 217, 166, 0.06) 8px, rgba(43, 217, 166, 0.06) 9px),
        repeating-linear-gradient(-45deg, transparent 0, transparent 8px, rgba(43, 217, 166, 0.06) 8px, rgba(43, 217, 166, 0.06) 9px);
}
.pick-back::after {
    content: "R";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 3.2rem;
    color: var(--text-primary);
    letter-spacing: -.05em;
}
.pick-front {
    transform: rotateY(180deg);
    background: linear-gradient(135deg, #1b2220, var(--bg-deep));
    border: 2px solid var(--mint);
    box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.7);
    padding: 1.1rem .75rem;
    gap: .5rem;
}
.pick-front .corner {
    position: absolute;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: .8rem;
    color: var(--mint);
}
.pick-front .corner.tl { top: 8px; left: 10px; }
.pick-front .corner.br { bottom: 8px; right: 10px; transform: rotate(180deg); }
.pick-front .letter {
    width: 52px; height: 52px;
    border-radius: 12px;
    background: var(--bg-deep);
    border: 1px solid rgba(43, 217, 166, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.4rem;
}
.pick-front .letter span {
    color: var(--text-primary);
}
.pick-front .c-name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: .88rem;
    color: #fff;
    text-align: center;
    line-height: 1.1;
    margin-top: .2rem;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pick-front .c-rating {
    font-family: var(--font-label);
    font-size: .68rem;
    color: var(--mint);
    letter-spacing: .05em;
}

/* ==========================================================================
   FINAL CTA
   ========================================================================== */
.final-cta-section { padding: 4rem 0 5rem; }
.final-cta-card {
    position: relative;
    padding: 3.5rem 2rem;
    text-align: center;
    overflow: hidden;
}
.final-cta-card > * { position: relative; z-index: 2; }
.final-cta-card::before { content: none; }
.final-cta-card .eyebrow { display: inline-block; margin-bottom: 1rem; }
.final-cta-card .section-title { margin-bottom: 1rem; }
.final-cta-card .lead {
    color: rgba(195, 203, 199, 0.85);
    max-width: 36rem;
    margin: 0 auto 2rem;
}
.final-cta-card .ctas {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .75rem;
}

/* ==========================================================================
   PLACEHOLDER PAGES
   ========================================================================== */
.placeholder {
    padding: 6rem 0 5rem;
    text-align: center;
}
.placeholder .eyebrow { display: inline-block; margin-bottom: 1rem; }
.placeholder h1 {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 6vw, 4rem);
    font-weight: 700;
    color: #fff;
    margin: 0 0 1rem;
}
.placeholder p {
    color: var(--text-muted);
    max-width: 32rem;
    margin: 0 auto 2rem;
}

/* ==========================================================================
   FADE-IN OBSERVER
   ========================================================================== */
/* Only hide pre-reveal content when JS is confirmed running (html.js) */
html.js .fade-in {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .6s ease, transform .6s ease;
}
html.js .fade-in.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
    html.js .fade-in { opacity: 1; transform: none; transition: none; }
}

@media (prefers-reduced-motion: reduce) {
    .slot .reel.jackpot { animation: none !important; }
    .slot .strip.spinning { filter: none; }
}

/* ==========================================================================
   FEATURED OFFER (new hero right side)
   ========================================================================== */
.featured-offer {
    position: relative;
    padding: 1.75rem;
    border-radius: 16px;
    /* Gradient border: mint top fading out. Fill = solid surface. */
    border: 1.5px solid transparent;
    background:
        linear-gradient(180deg, var(--bg-surface) 0%, var(--bg-surface) 100%) padding-box,
        linear-gradient(180deg, rgba(43, 217, 166, 0.75) 0%, rgba(43, 217, 166, 0.28) 35%, rgba(255, 255, 255, 0.08) 100%) border-box;
    box-shadow: 0 28px 70px -32px rgba(43, 217, 166, 0.3), 0 32px 64px -40px rgba(0, 0, 0, 0.85);
    overflow: hidden;
    max-width: 420px;
    margin-left: auto;
}
.featured-offer > * { position: relative; z-index: 1; }

.featured-offer .top-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
}
.featured-offer .rank-tag {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .35rem .7rem;
    border-radius: 8px;
    background: var(--gold);
    color: var(--bg-pure);
    font-family: var(--font-label);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.live-indicator {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-family: var(--font-label);
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--mint);
}
.live-indicator::before {
    content: "";
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--mint);
    box-shadow: 0 0 0 0 rgba(43, 217, 166, 0.5);
    animation: livePulse 2s ease-out infinite;
}
@keyframes livePulse {
    0%   { box-shadow: 0 0 0 0 rgba(43, 217, 166, 0.5); }
    70%  { box-shadow: 0 0 0 8px rgba(43, 217, 166, 0); }
    100% { box-shadow: 0 0 0 0 rgba(43, 217, 166, 0); }
}

.featured-offer .casino-head {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}
.featured-offer .casino-head .logo {
    width: 54px; height: 54px;
    border-radius: 14px;
    background: var(--bg-card);
    border: 1px solid rgba(43, 217, 166, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.8rem;
    flex-shrink: 0;
}
.featured-offer .casino-head .logo span {
    color: var(--text-primary);
}
.featured-offer .casino-head .name-block .name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.35rem;
    color: #fff;
    margin: 0 0 .2rem;
}
.featured-offer .casino-head .name-block .rating-line {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: rgba(255, 255, 255, 0.6);
    font-size: .8rem;
}
.featured-offer .casino-head .name-block .stars { color: var(--gold); font-size: .85rem; }
.featured-offer .casino-head .name-block .rating-val { font-family: var(--font-label); color: #fff; font-weight: 700; }
.featured-offer .casino-head .score-pill {
    margin-left: auto;
    padding: .4rem .7rem;
    border-radius: 10px;
    background: rgba(43, 217, 166, 0.08);
    border: 1px solid rgba(43, 217, 166, 0.3);
    text-align: center;
    flex-shrink: 0;
}
.featured-offer .casino-head .score-pill .v {
    display: block;
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--mint);
    font-size: 1.1rem;
    line-height: 1;
}
.featured-offer .casino-head .score-pill .l {
    display: block;
    font-family: var(--font-label);
    font-size: 9px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(43, 217, 166, 0.7);
    margin-top: 2px;
}

.featured-offer .bonus-block {
    padding: 1.1rem 1.1rem 1rem;
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(43, 217, 166, 0.08) 0%, rgba(43, 217, 166, 0.02) 100%);
    border: 1px solid rgba(43, 217, 166, 0.2);
    margin-bottom: 1.25rem;
}
.featured-offer .bonus-block .lbl {
    font-family: var(--font-label);
    font-size: 10px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--mint);
    margin-bottom: .35rem;
}
.featured-offer .bonus-block .val {
    font-family: var(--font-display);
    font-weight: 700;
    color: #fff;
    font-size: 1.5rem;
    line-height: 1.1;
    margin-bottom: .25rem;
}
.featured-offer .bonus-block .sub {
    color: var(--mint);
    font-size: .9rem;
    font-weight: 600;
    margin-bottom: .65rem;
}
.featured-offer .bonus-block .terms {
    display: flex;
    flex-wrap: wrap;
    gap: .85rem;
    font-family: var(--font-label);
    font-size: 10px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
}
.featured-offer .bonus-block .terms strong { color: rgba(255, 255, 255, 0.85); font-weight: 600; }

.featured-offer .actions {
    display: flex;
    gap: .5rem;
    margin-bottom: 1rem;
}
.featured-offer .actions .btn-primary,
.featured-offer .actions .btn-secondary {
    flex: 1;
    padding: .85rem 1rem;
    font-size: .9rem;
    justify-content: center;
}

/* ==========================================================================
   MINI OFFER STRIP (under hero - #2 to #5)
   ========================================================================== */
.mini-offer-strip {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .75rem;
    margin-top: 2rem;
}
@media (min-width: 768px) { .mini-offer-strip { grid-template-columns: repeat(4, 1fr); } }
.mini-offer {
    display: flex;
    flex-direction: column;
    gap: .65rem;
    padding: 1rem;
    border-radius: 16px;
    background: rgba(19, 24, 22, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(10px);
    transition: all .2s ease;
}
.mini-offer:hover {
    border-color: rgba(43, 217, 166, 0.3);
    transform: translateY(-2px);
}
.mini-offer .top {
    display: flex;
    align-items: center;
    gap: .65rem;
}
.mini-offer .rank {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.05rem;
    color: rgba(255, 255, 255, 0.4);
}
.mini-offer .logo {
    width: 34px; height: 34px;
    border-radius: 10px;
    background: var(--bg-card);
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1rem;
}
.mini-offer .logo span {
    color: var(--text-primary);
}
.mini-offer .name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: .9rem;
    color: #fff;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mini-offer .bonus-line {
    color: var(--mint);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: .9rem;
}
.mini-offer .meta-line {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-label);
    font-size: 10px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
}
.mini-offer .meta-line .stars { color: var(--gold); font-family: inherit; font-size: 12px; }

/* ==========================================================================
   LIVE TICKER (recent activity under hero)
   ========================================================================== */
.live-ticker {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: .85rem 1.25rem;
    border-radius: 999px;
    background: rgba(19, 24, 22, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(10px);
    overflow: hidden;
    flex-wrap: nowrap;
    margin-top: 1.5rem;
}
.live-ticker .lead-label {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--font-label);
    font-size: 10px;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--mint);
    flex-shrink: 0;
}
.live-ticker .lead-label::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--mint);
    animation: livePulse 2s ease-out infinite;
}
.live-ticker .feed {
    display: flex;
    gap: 1.5rem;
    color: rgba(255, 255, 255, 0.7);
    font-size: .82rem;
    white-space: nowrap;
    overflow: hidden;
}
.live-ticker .feed .item {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}
.live-ticker .feed .item.up { color: var(--mint); }
.live-ticker .feed .item.up::before { content: "↑"; font-weight: 700; }
.live-ticker .feed .item.down { color: var(--red); }
.live-ticker .feed .item.down::before { content: "↓"; font-weight: 700; }
.live-ticker .feed .item.new {
    color: var(--gold);
}
.live-ticker .feed .item.new::before {
    content: "NEW";
    font-family: var(--font-label);
    font-size: 9px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 4px;
    background: rgba(245, 184, 46, 0.15);
    border: 1px solid rgba(245, 184, 46, 0.3);
    letter-spacing: .1em;
}

/* ==========================================================================
   FILTER BAR (reusable - casinos/bonuses/blog)
   ========================================================================== */
.filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .65rem;
    padding: 1rem 1.25rem;
    border-radius: 16px;
    background: rgba(19, 24, 22, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    margin-bottom: 1.5rem;
}
.filter-bar .lbl {
    font-family: var(--font-label);
    font-size: 10px;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-right: .5rem;
}
.chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .45rem .85rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-secondary);
    font-size: .82rem;
    font-weight: 500;
    cursor: pointer;
    transition: all .15s ease;
    text-decoration: none;
}
.chip:hover {
    border-color: rgba(43, 217, 166, 0.3);
    color: #fff;
}
.chip.active {
    background: var(--mint);
    color: var(--bg-pure);
    border-color: var(--mint);
    font-weight: 600;
}
.chip .count {
    font-family: var(--font-label);
    font-size: 10px;
    opacity: .7;
    margin-left: .25rem;
}

.filter-bar .spacer { flex: 1; }
.filter-bar .sort {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .45rem .85rem;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-secondary);
    font-size: .82rem;
    font-weight: 500;
    cursor: pointer;
}

/* ==========================================================================
   CASINO LIST ROW (full row for /casinos)
   ========================================================================== */
.casino-list { display: flex; flex-direction: column; gap: .85rem; }
.list-row {
    display: grid;
    grid-template-columns: 50px 60px 1.5fr 1fr 90px 90px auto;
    align-items: center;
    gap: 1.25rem;
    padding: 1.25rem 1.5rem;
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(21, 27, 25, 0.7) 0%, rgba(15, 19, 18, 0.7) 100%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all .25s ease;
}
.list-row:hover { border-color: rgba(43, 217, 166, 0.25); }
.list-row.featured {
    border-color: rgba(43, 217, 166, 0.3);
    background: linear-gradient(90deg, rgba(43, 217, 166, 0.04) 0%, transparent 60%), linear-gradient(180deg, rgba(21, 27, 25, 0.8) 0%, rgba(15, 19, 18, 0.8) 100%);
}
.list-row .rnk {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.5rem;
    color: rgba(255, 255, 255, 0.35);
    text-align: center;
}
.list-row.featured .rnk { color: var(--mint); }
.list-row .logo {
    width: 56px; height: 56px;
    border-radius: 14px;
    background: var(--bg-card);
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.7rem;
}
.list-row .logo span {
    color: var(--text-primary);
}
.list-row .name-col h3 {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.1rem;
    color: #fff;
}
.list-row .name-col .sub {
    font-size: .8rem;
    color: rgba(255, 255, 255, 0.5);
    font-family: var(--font-label);
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-top: .25rem;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}
.list-row .name-col .sub .sep { color: rgba(255, 255, 255, 0.2); }
.list-row .bonus-col .v {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1rem;
    color: #fff;
    line-height: 1.2;
}
.list-row .bonus-col .s {
    color: var(--mint);
    font-size: .8rem;
    margin-top: .15rem;
}
.list-row .stat-col {
    text-align: center;
}
.list-row .stat-col .v {
    font-family: var(--font-display);
    font-weight: 700;
    color: #fff;
    font-size: 1rem;
}
.list-row .stat-col .l {
    font-family: var(--font-label);
    font-size: 9px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-top: 2px;
}
.list-row .cta-col {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    min-width: 140px;
}
.list-row .cta-col .btn-primary {
    padding: .65rem .9rem;
    font-size: .82rem;
    justify-content: center;
}
.list-row .cta-col .review-link {
    text-align: center;
    color: var(--text-muted);
    font-size: .75rem;
    text-decoration: none;
    transition: color .15s ease;
}
.list-row .cta-col .review-link:hover { color: var(--mint); }
@media (max-width: 1024px) {
    .list-row {
        grid-template-columns: 40px 50px 1fr;
        gap: .85rem;
    }
    .list-row .stat-col,
    .list-row .bonus-col,
    .list-row .cta-col { grid-column: 1 / -1; margin-top: .5rem; }
    .list-row .cta-col { flex-direction: row; min-width: 0; }
}

/* ==========================================================================
   PAGE HEADER (used on every sub-page)
   ========================================================================== */
.page-header {
    padding: 4rem 0 2.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    position: relative;
    overflow: hidden;
}
.page-header .eyebrow { display: inline-block; margin-bottom: .85rem; }
.page-header h1 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2.25rem, 5vw, 3.5rem);
    line-height: 1.05;
    letter-spacing: -.02em;
    color: #fff;
    margin: 0 0 1rem;
}
.page-header h1 .accent {
    color: inherit;
}
.page-header .lead {
    color: rgba(195, 203, 199, 0.85);
    max-width: 36rem;
    line-height: 1.6;
    margin: 0;
}
.page-header .meta-row {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-top: 1.25rem;
    font-family: var(--font-label);
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
}
.page-header .meta-row .item { display: inline-flex; align-items: center; gap: .35rem; }
.page-header .meta-row .item strong { color: var(--mint); font-weight: 700; }

/* ==========================================================================
   BONUS CARD (used on /bonuses)
   ========================================================================== */
.bonus-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    background: linear-gradient(180deg, rgba(21, 27, 25, 0.85) 0%, rgba(14, 18, 17, 0.85) 100%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    transition: all .25s ease;
    overflow: hidden;
}
.bonus-card:hover { border-color: rgba(43, 217, 166, 0.3); transform: translateY(-3px); }
.bonus-card.exclusive {
    border-color: rgba(245, 184, 46, 0.35);
}
.bonus-card.exclusive::before {
    content: "EXCLUSIVE";
    position: absolute;
    top: 1rem; right: 1rem;
    padding: 3px 8px;
    border-radius: 6px;
    background: rgba(245, 184, 46, 0.15);
    border: 1px solid rgba(245, 184, 46, 0.4);
    color: var(--gold);
    font-family: var(--font-label);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .15em;
}
.bonus-card .type-tag {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 6px;
    background: rgba(43, 217, 166, 0.12);
    border: 1px solid rgba(43, 217, 166, 0.3);
    color: var(--text-secondary);
    font-family: var(--font-label);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .15em;
    text-transform: uppercase;
    align-self: flex-start;
    margin-bottom: 1rem;
}
.bonus-card .type-tag.no-deposit { background: rgba(43, 217, 166, 0.1); border-color: rgba(43, 217, 166, 0.3); color: var(--mint); }
.bonus-card .type-tag.free-spins { background: rgba(245, 184, 46, 0.12); border-color: rgba(245, 184, 46, 0.3); color: var(--gold); }
.bonus-card .casino-row {
    display: flex;
    align-items: center;
    gap: .65rem;
    margin-bottom: .85rem;
}
.bonus-card .casino-row .logo {
    width: 32px; height: 32px;
    border-radius: 8px;
    background: var(--bg-card);
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display);
    font-weight: 700;
}
.bonus-card .casino-row .logo span {
    color: var(--text-primary);
}
.bonus-card .casino-row .name {
    color: rgba(255, 255, 255, 0.85);
    font-size: .85rem;
    font-weight: 600;
}
.bonus-card .value {
    font-family: var(--font-display);
    font-weight: 700;
    color: #fff;
    font-size: 1.5rem;
    line-height: 1.1;
    margin-bottom: .35rem;
}
.bonus-card .sub-value {
    color: var(--mint);
    font-size: .9rem;
    font-weight: 500;
    margin-bottom: 1rem;
}
.bonus-card .terms {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .5rem;
    padding: .75rem;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.04);
    margin-bottom: 1.25rem;
}
.bonus-card .terms .item {
    text-align: center;
}
.bonus-card .terms .item .l {
    font-family: var(--font-label);
    font-size: 9px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 2px;
}
.bonus-card .terms .item .v { color: #fff; font-weight: 600; font-size: .85rem; }
.bonus-card .code-row {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1rem;
    padding: .65rem .85rem;
    border-radius: 10px;
    background: rgba(43, 217, 166, 0.05);
    border: 1px dashed rgba(43, 217, 166, 0.3);
}
.bonus-card .code-row .l {
    font-family: var(--font-label);
    font-size: 10px;
    color: var(--text-muted);
    letter-spacing: .14em;
    text-transform: uppercase;
}
.bonus-card .code-row .code {
    font-family: var(--font-label);
    font-weight: 700;
    color: var(--mint);
    letter-spacing: .1em;
    flex: 1;
}
.bonus-card .code-row button {
    background: none;
    border: 1px solid rgba(43, 217, 166, 0.3);
    color: var(--mint);
    padding: .25rem .65rem;
    border-radius: 6px;
    font-size: .7rem;
    font-family: var(--font-label);
    text-transform: uppercase;
    letter-spacing: .12em;
    cursor: pointer;
}
.bonus-card .code-row button:hover { background: rgba(43, 217, 166, 0.08); }
.bonus-card .claim {
    margin-top: auto;
}

/* ==========================================================================
   BLOG CARD
   ========================================================================== */
.blog-card {
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, rgba(21, 27, 25, 0.85) 0%, rgba(14, 18, 17, 0.85) 100%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    overflow: hidden;
    transition: all .25s ease;
}
.blog-card:hover { border-color: rgba(43, 217, 166, 0.3); transform: translateY(-3px); }
.blog-card .cover {
    aspect-ratio: 16 / 9;
    background: var(--bg-card);
    position: relative;
    overflow: hidden;
}
.blog-card .cover::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 80% 70% at 50% 110%, rgba(43, 217, 166, 0.07) 0%, transparent 65%);
}
.blog-card .cover .badge {
    position: absolute;
    top: 1rem; left: 1rem;
    padding: 4px 10px;
    border-radius: 6px;
    background: rgba(11, 14, 13, 0.8);
    backdrop-filter: blur(8px);
    color: var(--mint);
    font-family: var(--font-label);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;
    border: 1px solid rgba(43, 217, 166, 0.25);
}
.blog-card .body { padding: 1.5rem; flex: 1; display: flex; flex-direction: column; }
.blog-card h3 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.15rem;
    color: #fff;
    margin: 0 0 .65rem;
    line-height: 1.3;
}
.blog-card .excerpt {
    color: var(--text-secondary);
    font-size: .9rem;
    line-height: 1.5;
    margin: 0 0 1rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.blog-card .meta-line {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: .65rem;
    font-family: var(--font-label);
    font-size: 11px;
    color: var(--text-muted);
}
.blog-card .meta-line .author { color: rgba(255, 255, 255, 0.7); font-weight: 600; }
.blog-card .meta-line .sep { color: rgba(255, 255, 255, 0.15); }
.blog-card.featured {
    grid-column: 1 / -1;
    flex-direction: row;
    border-color: rgba(43, 217, 166, 0.25);
}
@media (max-width: 768px) {
    .blog-card.featured { flex-direction: column; }
}
.blog-card.featured .cover { flex: 1; aspect-ratio: auto; min-height: 280px; }
.blog-card.featured .body { flex: 1; justify-content: center; padding: 2rem; }
.blog-card.featured h3 { font-size: 1.8rem; }
.blog-card.featured .excerpt { -webkit-line-clamp: 4; font-size: 1rem; }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq-list { display: flex; flex-direction: column; gap: .75rem; }
.faq-item {
    background: rgba(19, 24, 22, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    overflow: hidden;
    transition: border-color .2s ease;
}
.faq-item[open] { border-color: rgba(43, 217, 166, 0.2); }
.faq-item summary {
    list-style: none;
    cursor: pointer;
    padding: 1.1rem 1.35rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    font-family: var(--font-display);
    font-weight: 600;
    color: #fff;
    font-size: 1rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
    content: "+";
    font-family: var(--font-label);
    font-size: 1.5rem;
    line-height: 1;
    color: var(--mint);
    transition: transform .2s ease;
    font-weight: 400;
}
.faq-item[open] summary::after { content: "−"; }
.faq-item .answer {
    padding: 0 1.35rem 1.25rem;
    color: var(--text-secondary);
    line-height: 1.65;
    font-size: .92rem;
}
.faq-item .answer p:first-child { margin-top: 0; }
.faq-item .answer p:last-child { margin-bottom: 0; }

/* ==========================================================================
   PROS / CONS (used on casino review)
   ========================================================================== */
.pros-cons {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
@media (min-width: 640px) { .pros-cons { grid-template-columns: 1fr 1fr; } }
.pros-cons .col {
    padding: 1.25rem;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(19, 24, 22, 0.5);
}
.pros-cons .col.pros { border-color: rgba(43, 217, 166, 0.2); }
.pros-cons .col.cons { border-color: rgba(200, 16, 46, 0.2); }
.pros-cons h3 {
    font-family: var(--font-label);
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    margin: 0 0 1rem;
    font-weight: 600;
}
.pros-cons .pros h3 { color: var(--mint); }
.pros-cons .cons h3 { color: var(--red); }
.pros-cons ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: .65rem;
}
.pros-cons li {
    display: flex;
    gap: .65rem;
    color: var(--text-secondary);
    font-size: .9rem;
    line-height: 1.45;
}
.pros-cons .pros li::before { content: "✓"; color: var(--mint); font-weight: 700; flex-shrink: 0; }
.pros-cons .cons li::before { content: "✗"; color: var(--red); font-weight: 700; flex-shrink: 0; }

/* ==========================================================================
   FORM (contact, review submission)
   ========================================================================== */
.form-card {
    padding: 2rem;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(21, 27, 25, 0.85) 0%, rgba(14, 18, 17, 0.85) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.form-group { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1.25rem; }
.form-group label {
    font-family: var(--font-label);
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: 500;
}
.form-group input,
.form-group textarea,
.form-group select {
    padding: .85rem 1rem;
    background: rgba(11, 14, 13, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-size: .95rem;
    transition: border-color .15s ease;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--mint);
}
.form-group textarea { min-height: 140px; resize: vertical; }

/* ==========================================================================
   AUTHOR / BYLINE
   ========================================================================== */
.author-line {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 1rem 0;
}
.author-line .avatar {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--mint);
    display: flex; align-items: center; justify-content: center;
    color: var(--bg-pure);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: .9rem;
}
.author-line .meta { display: flex; flex-direction: column; }
.author-line .name { font-weight: 600; color: #fff; font-size: .9rem; }
.author-line .date { font-size: .8rem; color: var(--text-muted); font-family: var(--font-label); letter-spacing: .05em; }

/* ==========================================================================
   ARTICLE BODY (for blog-detail.html)
   ========================================================================== */
.article-body {
    color: var(--text-secondary);
    font-size: 1.05rem;
    line-height: 1.7;
    max-width: 720px;
    margin: 0 auto;
}
.article-body h2 {
    font-family: var(--font-display);
    font-weight: 700;
    color: #fff;
    font-size: 1.75rem;
    margin: 2.5rem 0 1rem;
}
.article-body h3 {
    font-family: var(--font-display);
    font-weight: 700;
    color: #fff;
    font-size: 1.35rem;
    margin: 2rem 0 .85rem;
}
.article-body p { margin: 1rem 0; }
.article-body strong { color: #fff; }
.article-body a { color: var(--mint); text-decoration: underline; text-underline-offset: 3px; }
.article-body ul, .article-body ol { padding-left: 1.5rem; margin: 1rem 0; }
.article-body li { margin: .5rem 0; }
.article-body blockquote {
    border-left: 3px solid var(--mint);
    padding: .5rem 0 .5rem 1.25rem;
    margin: 1.5rem 0;
    color: rgba(255, 255, 255, 0.8);
    font-style: italic;
}
.article-body code {
    font-family: var(--font-label);
    background: rgba(43, 217, 166, 0.08);
    color: var(--mint);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: .9em;
}
.article-body hr {
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    margin: 2.5rem 0;
}

/* ==========================================================================
   CALLOUT (tip / warning box)
   ========================================================================== */
.callout {
    padding: 1.25rem 1.5rem;
    border-radius: 14px;
    border: 1px solid rgba(43, 217, 166, 0.2);
    background: rgba(43, 217, 166, 0.04);
    margin: 1.5rem 0;
    display: flex;
    gap: 1rem;
}
.callout.warn { border-color: rgba(245, 184, 46, 0.3); background: rgba(245, 184, 46, 0.05); }
.callout.danger { border-color: rgba(200, 16, 46, 0.3); background: rgba(200, 16, 46, 0.05); }
.callout .icon {
    flex-shrink: 0;
    width: 32px; height: 32px;
    border-radius: 8px;
    background: rgba(43, 217, 166, 0.1);
    display: flex; align-items: center; justify-content: center;
    color: var(--mint);
}
.callout.warn .icon { background: rgba(245, 184, 46, 0.1); color: var(--gold); }
.callout.danger .icon { background: rgba(200, 16, 46, 0.1); color: var(--red); }
.callout .body { color: var(--text-secondary); font-size: .92rem; line-height: 1.55; }
.callout .body strong { color: #fff; }

/* ==========================================================================
   COMPARE TABLE
   ========================================================================== */
.compare-grid {
    display: grid;
    grid-template-columns: 200px repeat(3, 1fr);
    gap: 1px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.06);
}
.compare-grid .cell {
    padding: 1rem 1.25rem;
    background: rgba(15, 19, 18, 0.95);
    font-size: .9rem;
    color: var(--text-secondary);
}
.compare-grid .row-label {
    background: rgba(19, 24, 22, 0.95);
    font-family: var(--font-label);
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: 500;
}
.compare-grid .header-cell {
    background: rgba(21, 27, 25, 0.95);
    text-align: center;
    padding: 1.5rem;
}
.compare-grid .winner { background: rgba(43, 217, 166, 0.05); color: var(--mint); font-weight: 600; }

/* ==========================================================================
   TOOL CARD (tools page)
   ========================================================================== */
.tool-card {
    position: relative;
    padding: 1.75rem;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(21, 27, 25, 0.85) 0%, rgba(14, 18, 17, 0.85) 100%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all .25s ease;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.tool-card:hover { border-color: rgba(43, 217, 166, 0.3); transform: translateY(-3px); }
.tool-card .icon-wrap {
    width: 48px; height: 48px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(43, 217, 166, 0.1), rgba(43, 217, 166, 0.1));
    border: 1px solid rgba(43, 217, 166, 0.2);
    display: flex; align-items: center; justify-content: center;
    color: var(--mint);
    margin-bottom: 1rem;
}
.tool-card h3 {
    font-family: var(--font-display);
    font-weight: 700;
    color: #fff;
    font-size: 1.15rem;
    margin: 0 0 .5rem;
}
.tool-card p {
    color: var(--text-secondary);
    font-size: .88rem;
    line-height: 1.5;
    margin: 0 0 1.25rem;
}
.tool-card .open-link {
    margin-top: auto;
    color: var(--mint);
    font-weight: 600;
    font-size: .9rem;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

/* ==========================================================================
   STICKY REVIEW CTA (casino-detail.html)
   ========================================================================== */
.sticky-cta {
    position: sticky;
    top: 88px;
    padding: 1.5rem;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(21, 27, 25, 0.95) 0%, rgba(14, 18, 17, 0.95) 100%);
    border: 1px solid rgba(43, 217, 166, 0.25);
    box-shadow: 0 20px 48px -28px rgba(0, 0, 0, 0.8);
}

/* ==========================================================================
   SECTION HELPERS
   ========================================================================== */
.section { padding: 4rem 0; }
.section-narrow { padding: 3rem 0; }
.section-divider { border-top: 1px solid rgba(255, 255, 255, 0.05); }

.subsection-head {
    margin-bottom: 1.5rem;
}
.subsection-head .eyebrow { display: inline-block; margin-bottom: .5rem; }
.subsection-head h2 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.85rem;
    color: #fff;
    margin: 0;
    letter-spacing: -.01em;
}
.subsection-head h2 .accent {
    color: inherit;
}

.grid-3 { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
.grid-2 { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 768px) {
    .grid-3 { grid-template-columns: repeat(3, 1fr); }
    .grid-2 { grid-template-columns: repeat(2, 1fr); }
}

/* Blog grid - standalone (not only in media query) */
.blog-grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 768px)  { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .blog-grid { grid-template-columns: repeat(3, 1fr); } }

/* ==========================================================================
   STANDALONE UTILITIES - added after audit found classes used standalone
   that were previously only defined inside descendant selectors.
   ========================================================================== */

/* Generic accent gradient text - for any <span class="accent"> */
.accent {
    color: inherit;
}

/* Standalone lead paragraph */
p.lead, .lead {
    color: rgba(195, 203, 199, 0.85);
    font-size: 1.05rem;
    line-height: 1.6;
    max-width: 36rem;
    margin: 0 0 1rem;
}

/* Standalone logo placeholder (when not inside .top-card / .featured-offer / .rank-row) */
.logo:not(.brand-logo) {
    width: 44px; height: 44px;
    border-radius: 12px;
    background: var(--bg-card);
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.3rem;
}
.logo:not(.brand-logo) > span {
    color: var(--text-primary);
}

/* Generic separator dot/pipe used in breadcrumbs and inline meta */
.sep {
    color: rgba(255, 255, 255, 0.2);
    padding: 0 .15rem;
}

/* Generic label/value pair (used in cards, stats, breadcrumbs) */
.lbl {
    font-family: var(--font-label);
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.val {
    color: #fff;
    font-weight: 600;
}

/* FAQ body alias - some pages use .faq-body instead of .answer */
.faq-item .faq-body {
    padding: 0 1.35rem 1.25rem;
    color: var(--text-secondary);
    line-height: 1.65;
    font-size: .92rem;
}
.faq-item .faq-body p:first-child { margin-top: 0; }
.faq-item .faq-body p:last-child { margin-bottom: 0; }

/* ===== Filter bar sub-classes (filter-group, filter-label, filter-divider) ===== */
.filter-bar .filter-group {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}
.filter-bar .filter-label {
    font-family: var(--font-label);
    font-size: 10px;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-right: .25rem;
}
.filter-bar .filter-divider {
    width: 1px;
    height: 24px;
    background: rgba(255, 255, 255, 0.08);
    margin: 0 .5rem;
}

/* ===== Stat label/value pair (used in casino lists, key-stats strips) ===== */
.stat-label {
    font-family: var(--font-label);
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-muted);
    display: block;
    margin-bottom: 2px;
}
.stat-value {
    display: block;
    font-family: var(--font-display);
    font-weight: 700;
    color: #fff;
    font-size: 1rem;
}

/* ===== Bonus card sub-classes ===== */
.bonus-card .bonus-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .85rem;
}
.bonus-card .bonus-casino,
.bonus-card .casino-name {
    color: rgba(255, 255, 255, 0.85);
    font-size: .85rem;
    font-weight: 600;
}
.bonus-card .code-label {
    font-family: var(--font-label);
    font-size: 10px;
    color: var(--text-muted);
    letter-spacing: .14em;
    text-transform: uppercase;
}
.bonus-card .code-value {
    font-family: var(--font-label);
    font-weight: 700;
    color: var(--mint);
    letter-spacing: .1em;
    flex: 1;
}
.bonus-card .copy-btn {
    background: none;
    border: 1px solid rgba(43, 217, 166, 0.3);
    color: var(--mint);
    padding: .25rem .65rem;
    border-radius: 6px;
    font-size: .7rem;
    font-family: var(--font-label);
    text-transform: uppercase;
    letter-spacing: .12em;
    cursor: pointer;
}
.bonus-card .copy-btn:hover { background: rgba(43, 217, 166, 0.08); }

/* Type tag variants for reload, cashback */
.bonus-card .type-tag.reload {
    background: rgba(43, 217, 166, 0.1);
    border-color: rgba(43, 217, 166, 0.3);
    color: var(--mint);
}
.bonus-card .type-tag.cashback {
    background: rgba(43, 217, 166, 0.12);
    border-color: rgba(43, 217, 166, 0.35);
    color: var(--text-secondary);
}

/* ===== Crypto page specifics (coin-tag, big-num, chip-group) ===== */
.coin-tag {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: 2px 7px;
    border-radius: 5px;
    background: rgba(245, 184, 46, 0.1);
    border: 1px solid rgba(245, 184, 46, 0.25);
    color: var(--gold);
    font-family: var(--font-label);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.big-num {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 2.25rem;
    color: var(--mint);
    line-height: 1;
    letter-spacing: -.02em;
}
.chip-group {
    display: inline-flex;
    flex-wrap: wrap;
    gap: .35rem;
    align-items: center;
}

/* ===== Casino review layout (casino-detail.html) ===== */
.review-layout {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
    .review-layout { grid-template-columns: 1fr 320px; align-items: start; }
}
.review-hero {
    padding: 2rem;
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(21, 27, 25, 0.95) 0%, rgba(14, 18, 17, 0.95) 100%);
    border: 1px solid rgba(43, 217, 166, 0.25);
    margin-bottom: 1.5rem;
}
.review-main { min-width: 0; }
.review-main > section { margin-bottom: 2.5rem; }
.review-main h2 {
    font-family: var(--font-display);
    font-weight: 700;
    color: #fff;
    font-size: 1.5rem;
    margin: 0 0 1rem;
}
.review-main h3 {
    font-family: var(--font-display);
    font-weight: 700;
    color: #fff;
    font-size: 1.15rem;
    margin: 1.25rem 0 .65rem;
}
.review-main p { color: var(--text-secondary); line-height: 1.6; }

.stat-strip {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .85rem;
    margin-bottom: 2rem;
}
@media (min-width: 640px) { .stat-strip { grid-template-columns: repeat(4, 1fr); } }
.stat-strip .stat-cell {
    padding: 1rem;
    border-radius: 12px;
    background: rgba(19, 24, 22, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.06);
}
.stat-strip .stat-cell .l {
    font-family: var(--font-label);
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: .35rem;
}
.stat-strip .stat-cell .v {
    font-family: var(--font-display);
    font-weight: 700;
    color: #fff;
    font-size: 1.25rem;
}

.provider-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .65rem;
    margin: 1rem 0;
}
@media (min-width: 640px) { .provider-grid { grid-template-columns: repeat(4, 1fr); } }
.provider-grid .prov {
    padding: .75rem 1rem;
    border-radius: 10px;
    background: rgba(19, 24, 22, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.06);
    text-align: center;
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--text-secondary);
    font-size: .85rem;
}

.terms-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .75rem;
    margin: 1rem 0;
}
@media (min-width: 640px) { .terms-grid { grid-template-columns: repeat(5, 1fr); } }
.terms-grid .term {
    padding: .85rem;
    border-radius: 10px;
    background: rgba(43, 217, 166, 0.04);
    border: 1px solid rgba(43, 217, 166, 0.15);
}
.terms-grid .term .l {
    font-family: var(--font-label);
    font-size: 9px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--mint);
    margin-bottom: .25rem;
}
.terms-grid .term .v { color: #fff; font-weight: 700; font-size: .9rem; }

.code-box {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .65rem .85rem;
    border-radius: 10px;
    background: rgba(43, 217, 166, 0.05);
    border: 1px dashed rgba(43, 217, 166, 0.3);
    font-family: var(--font-label);
    font-weight: 700;
    color: var(--mint);
    letter-spacing: .12em;
    margin: 1rem 0;
}

.reviews-list { display: flex; flex-direction: column; gap: 1rem; margin-top: 1rem; }
.reviews-list .user-review {
    padding: 1.25rem;
    border-radius: 12px;
    background: rgba(19, 24, 22, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.06);
}
.reviews-list .user-review .head {
    display: flex;
    align-items: center;
    gap: .65rem;
    margin-bottom: .65rem;
    font-size: .85rem;
}
.reviews-list .user-review .stars { color: var(--gold); }
.reviews-list .user-review .author { color: #fff; font-weight: 600; }
.reviews-list .user-review .date {
    color: var(--text-muted);
    font-family: var(--font-label);
    font-size: 11px;
}
.reviews-list .user-review p { margin: 0; color: var(--text-secondary); font-size: .9rem; line-height: 1.5; }

/* ===== Tool sub-classes (used on tools.html, contact.html, how-we-rate.html) ===== */
.tool-icon {
    width: 48px; height: 48px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(43, 217, 166, 0.1), rgba(43, 217, 166, 0.1));
    border: 1px solid rgba(43, 217, 166, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mint);
    margin-bottom: 1rem;
}
.tool-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
    font-family: var(--font-label);
    font-size: 11px;
    letter-spacing: .1em;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-top: auto;
}
.tool-stat {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: var(--text-secondary);
}
.tool-stat strong { color: var(--mint); }
.callout .callout-icon,
.callout-icon {
    flex-shrink: 0;
    width: 32px; height: 32px;
    border-radius: 8px;
    background: rgba(43, 217, 166, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mint);
}
.callout.warn .callout-icon { background: rgba(245, 184, 46, 0.1); color: var(--gold); }
.callout.danger .callout-icon { background: rgba(200, 16, 46, 0.1); color: var(--red); }

/* ===== Blog sub-classes (cover-mono, author-avatar, article-header) ===== */
.cover-mono {
    aspect-ratio: 16 / 9;
    background: var(--bg-card);
    border-bottom: 1px solid var(--line);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: .25rem;
    font-family: var(--font-label);
    color: var(--text-secondary);
    padding: 1.5rem;
    line-height: 1.5;
}
.cover-mono .accent { color: var(--mint); }
.cover-mono .badge {
    position: absolute;
    top: 1rem; left: 1rem;
    padding: 4px 10px;
    border-radius: 6px;
    background: rgba(11, 14, 13, 0.8);
    backdrop-filter: blur(8px);
    color: var(--mint);
    font-family: var(--font-label);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;
    border: 1px solid rgba(43, 217, 166, 0.25);
}
.author-avatar {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--mint);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--bg-pure);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: .9rem;
    flex-shrink: 0;
}
.article-header {
    padding: 4rem 0 2rem;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.article-header .breadcrumb {
    font-family: var(--font-label);
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 1rem;
}
.article-header .breadcrumb a { color: var(--text-muted); }
.article-header .breadcrumb a:hover { color: var(--mint); }
.article-header h1 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2rem, 5vw, 3rem);
    line-height: 1.1;
    color: #fff;
    margin: 0 0 1rem;
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}
.article-header .lead {
    max-width: 640px;
    margin: 0 auto 1.5rem;
}

/* ==========================================================================
   POLISH PASS - universal widget styling for professional look
   ========================================================================== */

/* ===== Native form controls: select, textarea, input ===== */
select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: rgba(19, 24, 22, 0.6);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%232bd9a6' stroke-width='2.5'><path d='M6 9l6 6 6-6'/></svg>");
    background-repeat: no-repeat;
    background-position: right .65rem center;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: .55rem 2rem .55rem .9rem;
    color: var(--text-secondary);
    font-size: .85rem;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: border-color .15s ease;
}
select:hover { border-color: rgba(43, 217, 166, 0.3); color: #fff; }
select:focus { outline: none; border-color: var(--mint); }
select option { background: var(--bg-deep); color: #fff; padding: .5rem; }

input[type="text"], input[type="email"], input[type="search"], textarea {
    background: rgba(11, 14, 13, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-size: .95rem;
    padding: .75rem 1rem;
    transition: border-color .15s ease;
}
input[type="text"]:focus, input[type="email"]:focus,
input[type="search"]:focus, textarea:focus {
    outline: none;
    border-color: var(--mint);
}
::placeholder { color: rgba(255, 255, 255, 0.3); }

/* ===== Card needs default padding (used on crypto, bonuses etc as feature cards) ===== */
.card {
    padding: 1.5rem;
}
.card.no-pad { padding: 0; }
.card h3 {
    font-family: var(--font-display);
    font-weight: 700;
    color: #fff;
    font-size: 1.1rem;
    margin: 0 0 .5rem;
}
.card p {
    color: var(--text-secondary);
    line-height: 1.55;
    margin: 0;
    font-size: .9rem;
}

/* Card icon wrap (used in feature cards) */
.card-icon-wrap {
    width: 44px; height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(43, 217, 166, 0.1), rgba(43, 217, 166, 0.1));
    border: 1px solid rgba(43, 217, 166, 0.2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

/* ===== Header stats row (page-header summary stats) ===== */
.header-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem 2.5rem;
    margin-top: 1.5rem;
    max-width: 720px;
}
@media (min-width: 640px) { .header-stats { grid-template-columns: repeat(4, 1fr); } }
.stat-item {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}
.stat-item .stat-num {
    display: block;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.65rem;
    color: var(--mint);
    line-height: 1;
    letter-spacing: -.01em;
}
.stat-item .stat-label {
    display: block;
    font-family: var(--font-label);
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* ===== Filter sort wrapper (label + select on right of filter-bar) ===== */
.filter-sort {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-left: auto;
}
.filter-sort label {
    font-family: var(--font-label);
    font-size: 10px;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* ===== List row: ensure label + value stack inside stat columns ===== */
.list-row .stat-col {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.list-row .stat-col .l,
.list-row .stat-col .v,
.list-row .stat-col span.l,
.list-row .stat-col span.v,
.list-row .name-col h3 {
    display: block;
}

/* Mobile compaction of list rows */
@media (max-width: 1024px) {
    .list-row {
        grid-template-columns: 40px 50px 1fr;
        gap: .65rem 1rem;
        padding: 1rem 1.1rem;
    }
    .list-row .bonus-col { grid-column: 2 / 4; margin-top: .3rem; }
    .list-row .stat-col {
        grid-column: auto;
        text-align: left;
        flex-direction: row;
        align-items: baseline;
        gap: .5rem;
        margin-top: .25rem;
    }
    .list-row .stat-col .l { order: 1; font-size: 10px; }
    .list-row .stat-col .v { order: 2; font-size: .9rem; }
    .list-row .cta-col {
        grid-column: 1 / -1;
        flex-direction: row;
        min-width: 0;
        margin-top: .5rem;
        gap: .5rem;
    }
    .list-row .cta-col .btn-primary { flex: 1; }
    .list-row .cta-col .review-link { display: inline-flex; align-items: center; }
}

/* ===== Better fall-through styling for various list elements ===== */
.list-row .sub .coin-tag { margin-right: .15rem; }

/* ===== Compare grid select dropdowns ===== */
.compare-selector {
    display: grid;
    grid-template-columns: 1fr;
    gap: .85rem;
    margin-bottom: 1.5rem;
}
@media (min-width: 768px) { .compare-selector { grid-template-columns: repeat(3, 1fr); } }
.compare-selector select {
    padding: .85rem 2.25rem .85rem 1rem;
    background-position: right .85rem center;
    font-size: .9rem;
    width: 100%;
}

/* ===== Cell tags in compare grid: better visual ===== */
.compare-grid .cell strong { color: #fff; font-weight: 600; }
.compare-grid .cell ul { padding-left: 1rem; margin: 0; color: var(--text-secondary); font-size: .85rem; }
.compare-grid .cell ul li { margin: .25rem 0; }

/* ===== Newsletter form ===== */
.newsletter-form {
    display: flex;
    gap: .5rem;
    margin-top: 1rem;
}
.newsletter-form input[type="email"] { flex: 1; }
.newsletter-form .btn-primary { flex-shrink: 0; }
@media (max-width: 640px) {
    .newsletter-form { flex-direction: column; }
}

/* ===== Better tool-card defaults (some pages use .tool-card directly) ===== */
.tool-card .tool-icon { margin-bottom: 1rem; }
.tool-card h3 {
    font-family: var(--font-display);
    font-weight: 700;
    color: #fff;
    font-size: 1.15rem;
    margin: 0 0 .5rem;
}
.tool-card p {
    color: var(--text-secondary);
    font-size: .9rem;
    line-height: 1.55;
    margin: 0 0 1.25rem;
}

/* ===== Author line variants (big at end of article, small in card meta) ===== */
.author-line.big {
    padding: 1.5rem;
    border-radius: 16px;
    background: rgba(19, 24, 22, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.06);
    gap: 1rem;
}
.author-line.big .avatar { width: 56px; height: 56px; font-size: 1.1rem; }
.author-line.big .name { font-size: 1.05rem; }
.author-line.big .bio { font-size: .9rem; color: var(--text-secondary); margin-top: .25rem; line-height: 1.5; }

/* ===== Sticky CTA (casino review right column) - ensure it works ===== */
.sticky-cta h3 {
    font-family: var(--font-display);
    font-weight: 700;
    color: #fff;
    font-size: 1.1rem;
    margin: 0 0 .65rem;
}
.sticky-cta .price-line {
    font-size: .85rem;
    color: var(--mint);
    margin-bottom: 1rem;
}
.sticky-cta .quick-facts {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    display: grid;
    gap: .5rem;
    font-family: var(--font-label);
    font-size: 11px;
}
.sticky-cta .quick-facts .fact {
    display: flex;
    justify-content: space-between;
    color: var(--text-muted);
}
.sticky-cta .quick-facts .fact strong { color: #fff; font-weight: 600; }

/* ===== Breadcrumb pattern ===== */
.breadcrumb {
    font-family: var(--font-label);
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 1rem;
}
.breadcrumb a { color: var(--text-muted); transition: color .15s ease; }
.breadcrumb a:hover { color: var(--mint); }
.breadcrumb .sep { padding: 0 .35rem; }

/* ===== Generic .accent-num used in widget reveals ===== */
.accent-num { color: var(--mint); }
.meta .sep { color: rgba(255, 255, 255, 0.2); padding: 0 .25rem; }

/* ===== Section content wrap (avoid edge overlap) ===== */
.section > .container > .eyebrow,
.section > .container > h2 { display: inline-block; }
.section h2 { margin-top: 0; }

/* ===== Lead inside page-header is already styled, no override needed ===== */
.page-header .lead { color: rgba(195, 203, 199, 0.85); }

/* ===== Improved hover on rank rows  ===== */
.rank-row { text-decoration: none; }

/* ===== About team grid ===== */
.team-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin: 1.5rem 0;
}
@media (min-width: 768px) { .team-grid { grid-template-columns: repeat(3, 1fr); } }
.team-member {
    padding: 1.5rem;
    border-radius: 16px;
    background: rgba(19, 24, 22, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.06);
}
.team-member .name {
    font-family: var(--font-display);
    font-weight: 700;
    color: #fff;
    font-size: 1.05rem;
    margin-bottom: .35rem;
}
.team-member .role {
    font-family: var(--font-label);
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--mint);
    margin-bottom: .65rem;
}
.team-member .bio { color: var(--text-secondary); font-size: .88rem; line-height: 1.5; }

/* ===== Contact inbox cards ===== */
.inbox-list { display: flex; flex-direction: column; gap: .85rem; margin-top: 1rem; }
.inbox-item {
    padding: 1rem 1.25rem;
    border-radius: 12px;
    background: rgba(19, 24, 22, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    flex-direction: column;
    gap: .35rem;
}
.inbox-item .email {
    font-family: var(--font-label);
    font-size: .9rem;
    color: var(--mint);
    font-weight: 600;
}
.inbox-item .purpose { font-size: .85rem; color: var(--text-secondary); }

/* ===== Helpline / responsible gambling resources ===== */
.helpline-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: .85rem;
    margin: 1rem 0;
}
@media (min-width: 768px) { .helpline-grid { grid-template-columns: repeat(2, 1fr); } }

/* ===== Score / methodology callouts ===== */
.score-block {
    padding: 1.25rem;
    border-radius: 14px;
    background: rgba(43, 217, 166, 0.04);
    border: 1px solid rgba(43, 217, 166, 0.15);
    margin: 1rem 0;
}
.score-block .head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .5rem;
}
.score-block h3 {
    font-family: var(--font-display);
    font-weight: 700;
    color: #fff;
    font-size: 1.05rem;
    margin: 0;
}
.score-block .weight {
    font-family: var(--font-label);
    font-size: 11px;
    letter-spacing: .14em;
    color: var(--mint);
    font-weight: 700;
}
.score-block ul { padding-left: 1.25rem; margin: .5rem 0 0; color: var(--text-secondary); font-size: .88rem; }
.score-block ul li { margin: .35rem 0; }

/* ==========================================================================
   HERO REBUILD - matches visualization 1:1
   ========================================================================== */

/* Eyebrow pill with check icon */
.hero-eyebrow-pill {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    padding: .35rem 1.1rem .35rem .35rem;
    border-radius: 999px;
    background: rgba(19, 24, 22, 0.7);
    border: 1px solid rgba(43, 217, 166, 0.25);
    margin-bottom: 2rem;
    backdrop-filter: blur(10px);
}
.hero-eyebrow-pill .check-circle {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(43, 217, 166, 0.25), rgba(43, 217, 166, 0.08));
    border: 1px solid rgba(43, 217, 166, 0.45);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--mint);
    flex-shrink: 0;
}
.hero-eyebrow-pill .text {
    font-family: var(--font-label);
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--mint);
    font-weight: 600;
    white-space: nowrap;
}
.hero-eyebrow-pill .text .dot { color: rgba(43, 217, 166, 0.45); margin: 0 .5em; }

/* Trust badges row - static, scannable */
.hero-trust-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem 2rem;
    margin: 1.75rem 0 2.25rem;
}
.trust-badge {
    display: flex;
    align-items: center;
    gap: .85rem;
}
.trust-badge .icon-circle {
    width: 40px; height: 40px;
    border-radius: 10px;
    background: rgba(43, 217, 166, 0.07);
    border: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mint);
    flex-shrink: 0;
}
.trust-badge .label {
    display: flex;
    flex-direction: column;
}
.trust-badge .label strong {
    color: #fff;
    font-weight: 700;
    font-size: .9rem;
    line-height: 1.2;
}
.trust-badge .label span {
    color: var(--text-muted);
    font-size: .78rem;
    margin-top: 2px;
}

/* Social proof row */
.hero-social-proof {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 2rem;
}
.avatar-stack {
    display: flex;
    align-items: center;
}
.avatar-stack .avatar {
    width: 38px; height: 38px;
    border-radius: 50%;
    border: 2px solid var(--bg-pure);
    margin-left: -10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 700;
    color: #fff;
    font-size: .85rem;
    flex-shrink: 0;
    box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.5);
}
.avatar-stack .avatar:first-child { margin-left: 0; }
.avatar-stack .avatar.a1 { background: #6d2733; }
.avatar-stack .avatar.a2 { background: #7a6127; }
.avatar-stack .avatar.a3 { background: #1f6b52; }
.avatar-stack .avatar.a4 { background: #2e4a42; }
.avatar-stack .avatar-count {
    margin-left: .35rem;
    padding: .35rem .65rem;
    border-radius: 999px;
    background: rgba(43, 217, 166, 0.12);
    border: 1px solid rgba(43, 217, 166, 0.35);
    color: var(--mint);
    font-family: var(--font-label);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
}
.proof-text {
    display: flex;
    flex-direction: column;
    gap: .15rem;
}
.proof-text .line-1 {
    color: #fff;
    font-weight: 600;
    font-size: .9rem;
}
.proof-text .line-2 {
    display: flex;
    align-items: center;
    gap: .35rem;
    color: var(--text-muted);
    font-size: .8rem;
}
.proof-text .line-2 .stars { color: var(--gold); letter-spacing: .05em; }

/* CTA "How we test" play icon wrap */
.btn-secondary .play-icon-circle {
    width: 22px; height: 22px;
    border-radius: 50%;
    background: rgba(43, 217, 166, 0.15);
    border: 1px solid rgba(43, 217, 166, 0.4);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--mint);
}

/* Featured offer card overrides for visualization match */
.featured-offer {
    max-width: 480px;
    padding: 1.85rem;
    border-radius: 16px;
}
.featured-offer .top-meta { margin-bottom: 1.5rem; }

/* Yellow filled rank-tag (matches visualization) */
.featured-offer .rank-tag {
    background: var(--gold);
    color: var(--bg-pure);
    padding: .45rem .95rem;
    border-radius: 999px;
    font-family: 'Inter', sans-serif;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    border: none;
}

/* BONUS LIVE indicator - pulsing dot before text */
.featured-offer .live-indicator {
    color: var(--mint);
    font-family: var(--font-label);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

/* Offer wrap: card sits directly on podium with disc top at card bottom */
.hero-offer-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    isolation: isolate;
    width: 100%;
}
.hero-offer-wrap .featured-offer {
    position: relative;
    z-index: 2;
    margin: 0 auto;
    transform: translate(42px, 16px);
}
@media (max-width: 1024px) {
    .hero-offer-wrap .featured-offer { transform: translate(30px, 12px); }
}
@media (max-width: 640px) {
    .hero-offer-wrap .featured-offer { transform: translate(18px, 8px); }
}
.offer-podium-img {
    position: relative;
    z-index: 1;
    width: 125%;
    max-width: 600px;
    margin: -28px auto 0;
    display: block;
    pointer-events: none;
    user-select: none;
}
@media (max-width: 1024px) {
    .offer-podium-img { width: 120%; max-width: 540px; margin-top: -24px; }
}
@media (max-width: 640px) {
    .offer-podium-img { width: 115%; max-width: 440px; margin-top: -20px; }
}

/* Live ticker as full-width band below hero */
.hero-bottom-ticker {
    margin-top: 4rem;
    padding: 1rem 1.5rem;
    border-radius: 999px;
    background: rgba(19, 24, 22, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(12px);
    display: flex;
    align-items: center;
    gap: 2rem;
    flex-wrap: nowrap;
    overflow: hidden;
}
.hero-bottom-ticker .lead-label {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--font-label);
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--mint);
    font-weight: 600;
    flex-shrink: 0;
}
.hero-bottom-ticker .lead-label::before {
    content: "";
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--mint);
    animation: livePulse 2s ease-out infinite;
}
.hero-bottom-ticker .feed {
    display: flex;
    align-items: center;
    gap: 2.5rem;
    color: rgba(255, 255, 255, 0.85);
    font-size: .9rem;
    font-weight: 500;
    white-space: nowrap;
    overflow-x: auto;
}
.hero-bottom-ticker .feed::-webkit-scrollbar { display: none; }
.hero-bottom-ticker .feed .item {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}
.hero-bottom-ticker .feed .item.up { color: var(--mint); }
.hero-bottom-ticker .feed .item.up::before {
    content: "↑";
    font-weight: 800;
    font-size: 1rem;
}
.hero-bottom-ticker .feed .item.down { color: var(--red); }
.hero-bottom-ticker .feed .item.down::before {
    content: "↓";
    font-weight: 800;
    font-size: 1rem;
}
.hero-bottom-ticker .feed .item.new { color: var(--gold); }
.hero-bottom-ticker .feed .item.new::before {
    content: "NEW";
    font-family: var(--font-label);
    font-size: 9px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(245, 184, 46, 0.18);
    border: 1px solid rgba(245, 184, 46, 0.45);
    letter-spacing: .12em;
    color: var(--gold);
}

@media (max-width: 768px) {
    .hero-bottom-ticker { gap: 1rem; padding: .85rem 1.25rem; }
    .hero-bottom-ticker .feed { gap: 1.25rem; font-size: .82rem; }
}

/* Tool cards: compact CTA instead of a full-width bar */
.tool-card .btn-primary { align-self: flex-start; margin-top: auto; }

/* Mobile: body is a flex column - let sections shrink below content min-width */
body > header, body > main, body > footer { min-width: 0; }
main, .hero, .page-header { overflow-x: clip; }
.review-layout > * { min-width: 0; max-width: 100%; }

/* ==========================================================================
   POST-AUDIT ADDITIONS
   ========================================================================== */

/* Bonus codes stay monospace - the only mono left in the design */
.code-box,
.bonus-card .code-row .code,
.bonus-card .code-value { font-family: var(--font-mono); }

/* Widget result column: idle text and reveal card occupy the SAME grid cell,
   so swapping them never changes column height (no wheel jump after spin). */
.widget-result-col { display: grid; align-items: center; }
.widget-result-col > * { grid-area: 1 / 1; }
.widget-result-col [data-roulette-idle],
.widget-result-col [data-slot-idle] { transition: opacity .35s ease, visibility .35s; }
.widget-result-col .idle-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Mobile navigation drawer (nav-toggle previously did nothing) */
.mobile-nav {
    display: none;
    position: fixed;
    top: 72px;
    left: 0; right: 0;
    z-index: 49;
    padding: .75rem 1rem 1.25rem;
    background: rgba(11, 14, 13, 0.97);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--line-strong);
    flex-direction: column;
    gap: .15rem;
}
.mobile-nav.open { display: flex; }
@media (min-width: 1024px) { .mobile-nav.open { display: none; } }
.mobile-nav a {
    padding: .85rem 1rem;
    border-radius: 10px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1rem;
    color: var(--text-secondary);
}
.mobile-nav a:hover { background: rgba(255, 255, 255, 0.04); color: #fff; }
.mobile-nav a.active { color: var(--mint); background: rgba(43, 217, 166, 0.06); }
body.nav-open { overflow: hidden; }

/* Real casino logos inside letter boxes - full-bleed cover */
.rank-logo img,
.reveal .logo-box img,
.featured-offer .casino-head .logo img,
.top-card .logo img,
.mini-offer .logo img,
.list-row .logo img,
.bonus-card .casino-row .logo img,
.slot .cell .big img,
.logo:not(.brand-logo) > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
    display: block;
}
.rank-logo, .reveal .logo-box, .featured-offer .casino-head .logo,
.top-card .logo, .mini-offer .logo, .list-row .logo { overflow: hidden; }

/* ==========================================================================
   MISSING UTILITY CLASSES (were used in HTML with no definition)
   ========================================================================== */

/* Page-header meta row items (casinos.html etc.) */
.page-header .meta-row .meta-item { display: inline-flex; align-items: center; gap: .45rem; }
.meta-dot {
    display: inline-block;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
}
.meta-dot.live { background: var(--mint); animation: livePulse 2s ease-out infinite; }

/* Empty eyebrow dot renders as a small mint marker */
.eyebrow .dot:empty {
    display: inline-block;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--mint);
    margin: 0 .5em 1px 0;
    vertical-align: middle;
}

/* Footnote under long lists */
.list-footnote {
    margin-top: 1.5rem;
    padding: 1.25rem 1.5rem;
    border-radius: 14px;
    background: rgba(19, 24, 22, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.05);
}
.list-footnote p { margin: .5rem 0 0; color: var(--text-muted); font-size: .88rem; line-height: 1.55; }

/* Inline text link */
.inline-link { color: var(--mint); font-weight: 600; }
.inline-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Help CTA banner (casinos.html bottom) */
.help-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 2rem;
    flex-wrap: wrap;
}
.help-cta h2 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.5rem;
    color: #fff;
    margin: .5rem 0 .5rem;
}
.help-cta p { margin: 0; color: var(--text-secondary); max-width: 34rem; font-size: .92rem; line-height: 1.55; }
.help-cta .btn-primary { flex-shrink: 0; }

/* Review hero meta (casino-detail) - responsive after inline-style removal */
.review-hero-meta {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
@media (max-width: 640px) { .review-hero-meta { grid-template-columns: 1fr; gap: .85rem; } }

/* ===== Bonus card: classes actually used on bonuses.html ===== */
.bonus-card .bonus-casino {
    display: flex;
    align-items: center;
    gap: .65rem;
    margin-bottom: .85rem;
}
.bonus-card .bonus-casino .logo {
    width: 32px; height: 32px;
    border-radius: 8px;
    background: var(--bg-card);
    border: 1px solid rgba(255, 255, 255, 0.08);
    overflow: hidden;
    flex-shrink: 0;
    display: inline-flex;
}
.bonus-card .bonus-casino .logo img { width: 100%; height: 100%; object-fit: cover; }
.bonus-card .exclusive {
    padding: 3px 8px;
    border-radius: 6px;
    background: rgba(226, 176, 74, 0.15);
    border: 1px solid rgba(226, 176, 74, 0.4);
    color: var(--gold);
    font-family: var(--font-label);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;
}
/* Terms used as 4 plain <div><span>label</span><strong>value</strong></div> cells */
.bonus-card .terms { grid-template-columns: repeat(2, 1fr); }
.bonus-card .terms > div { text-align: center; }
.bonus-card .terms > div > span:not(.dot) {
    display: block;
    font-family: var(--font-label);
    font-size: 9px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 2px;
}
.bonus-card .terms > div > strong { color: #fff; font-weight: 600; font-size: .85rem; }

/* Filter bar chip group + counts */
.filter-bar .chips {
    display: inline-flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
}
.chip-count {
    font-family: var(--font-label);
    font-size: 10px;
    opacity: .7;
    margin-left: .25rem;
}

/* ===== Crypto / list page helpers (were undefined) ===== */
.score-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 6px;
    background: rgba(43, 217, 166, 0.1);
    border: 1px solid rgba(43, 217, 166, 0.3);
    color: var(--mint);
    font-family: var(--font-label);
    font-size: 11px;
    font-weight: 700;
}
.stat-line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
    font-size: .85rem;
    padding: .2rem 0;
}
.stat-line span {
    font-family: var(--font-label);
    font-size: 10px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.stat-line strong { color: #fff; font-weight: 600; }
.bonus-amount {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1rem;
    color: #fff;
    line-height: 1.25;
}
.bonus-sub { color: var(--mint); font-size: .8rem; margin-top: .15rem; }

/* ===== Free-spins page helpers ===== */
.bonus-card .terms.terms-lines {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    text-align: left;
}
.bonus-card .terms.terms-lines > div {
    text-align: left;
    font-size: .85rem;
    color: var(--text-secondary);
}
.casino-meta {
    font-family: var(--font-label);
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}
.filter-bar .chip-row {
    display: inline-flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
}
.filter-bar .sort-wrap {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-left: auto;
}
.filter-bar .sort-wrap label {
    font-family: var(--font-label);
    font-size: 10px;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.code-val {
    font-family: var(--font-mono);
    font-weight: 700;
    color: var(--mint);
    letter-spacing: .1em;
    flex: 1;
}

/* Empty .dot spans act as small separators (mint inside eyebrows) */
.dot:empty {
    display: inline-block;
    width: 4px; height: 4px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    margin: 0 .5em;
    vertical-align: middle;
}
.eyebrow .dot:empty { width: 6px; height: 6px; background: var(--mint); }

/* ===== New-casinos page helpers ===== */
.stat-val {
    display: block;
    font-family: var(--font-display);
    font-weight: 700;
    color: #fff;
    font-size: 1rem;
}
.bonus-code {
    color: var(--text-muted);
    font-family: var(--font-label);
    font-size: .78rem;
    margin-top: .15rem;
}
@media (max-width: 640px) { .hide-sm { display: none; } }

/* Horizontal scroll wrapper for wide tables (compare page) */
.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.table-scroll .compare-grid { min-width: 760px; }

/* ===== Newsletter form row (blog.html) ===== */
.form-row {
    display: flex;
    gap: .75rem;
    align-items: flex-end;
    flex-wrap: wrap;
}
.form-row .form-group { margin-bottom: 0; flex: 1; min-width: 220px; }
@media (max-width: 640px) {
    .form-row { flex-direction: column; align-items: stretch; }
    .form-row .btn-primary { justify-content: center; }
}

/* Card-pick front: real logo inside the letter box */
.pick-front .letter { overflow: hidden; }
.pick-front .letter img { width: 100%; height: 100%; object-fit: cover; }

/* Card reveal sits below the fan, needs breathing room when shown */
.cards-section .reveal { margin-top: .5rem; }
/* Hidden card reveal must not reserve empty space under the fan */
.cards-section .reveal:not(.on) { position: absolute; visibility: hidden; }

/* Card fan fits small screens */
@media (max-width: 640px) {
    .card-fan { padding: 2.5rem .5rem 1.5rem; min-height: 230px; }
    .pick { width: 96px; height: 140px; margin: 0 -26px; }
    .pick-back::after { font-size: 2.2rem; }
    .pick-front .letter { width: 40px; height: 40px; }
    .pick-front .c-name { font-size: .68rem; }
    .pick-front .corner { font-size: .65rem; }
}

/* ==========================================================================
   OFFER CARD  (casino listings: index.html, casinos.html)
   One component for every casino listing. Fixed running order so the eye
   lands on the same thing in every card:
   who -> what you get -> the terms that decide -> code -> the two exits.
   ========================================================================== */
.offer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
@media (min-width: 640px)  { .offer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .offer-grid { grid-template-columns: repeat(3, 1fr); } }

.offer-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .75rem;
    padding: 1.1rem 1.1rem 1rem;
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(23, 29, 27, 0.9) 0%, rgba(14, 18, 17, 0.9) 100%);
    border: 1px solid var(--line);
    transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.offer-card:hover {
    border-color: rgba(43, 217, 166, 0.35);
    transform: translateY(-2px);
    box-shadow: 0 18px 40px -28px rgba(0, 0, 0, 0.9);
}

/* --- head: rank, logo, name, score --- */
.offer-card .oc-top {
    display: flex;
    align-items: center;
    gap: .6rem;
}
.oc-rank {
    font-family: var(--font-mono);
    font-size: .72rem;
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: .15rem .35rem;
    flex-shrink: 0;
}
.offer-card .logo {
    width: 40px; height: 40px;
    border-radius: 10px;
    background: var(--bg-card);
    border: 1px solid rgba(255, 255, 255, 0.08);
    overflow: hidden;
    flex-shrink: 0;
}
.offer-card .logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.oc-id { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.oc-name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1rem;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.oc-rating { font-family: var(--font-label); font-size: .76rem; font-weight: 600; color: var(--gold); }
.oc-score {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.05;
    flex-shrink: 0;
    padding-left: .5rem;
    border-left: 1px solid var(--line);
}
.oc-score strong { font-family: var(--font-display); font-size: 1.05rem; color: var(--mint); }
.oc-score span {
    font-family: var(--font-label);
    font-size: 9px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* --- the offer itself: the loudest block in the card --- */
.oc-offer {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    padding: .8rem .85rem;
    border-radius: 12px;
    background: rgba(43, 217, 166, 0.05);
    border: 1px solid rgba(43, 217, 166, 0.18);
}
.oc-gift {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px; height: 30px;
    border-radius: 8px;
    background: rgba(43, 217, 166, 0.12);
    color: var(--mint);
    flex-shrink: 0;
}
.oc-offer-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.oc-offer-text strong {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1rem;
    color: #fff;
    line-height: 1.25;
}
.oc-offer-text > span { font-size: .8rem; color: var(--mint); line-height: 1.35; }
.oc-badge {
    position: absolute;
    top: -9px; right: .6rem;
    font-family: var(--font-label);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #1a1204;
    background: var(--gold);
    border-radius: 999px;
    padding: .18rem .5rem;
}

/* --- the three facts that decide whether the offer is any good --- */
.oc-facts {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin: 0;
    padding: 0;
}
.oc-facts li {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0 .5rem;
    border-left: 1px solid var(--line);
    min-width: 0;
}
.oc-facts li:first-child { padding-left: 0; border-left: none; }
.oc-facts li span {
    font-family: var(--font-label);
    font-size: 9px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.oc-facts li strong {
    font-size: .82rem;
    font-weight: 600;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- promo code --- */
.oc-code {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .6rem;
    border-radius: 10px;
    border: 1px dashed rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.02);
}
.oc-code-label {
    font-family: var(--font-label);
    font-size: 9px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-muted);
    flex-shrink: 0;
}
.oc-code-value {
    font-family: var(--font-mono);
    font-size: .86rem;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--mint);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.oc-copy {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .3rem .5rem;
    border-radius: 7px;
    border: 1px solid var(--line-strong);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-secondary);
    font-family: var(--font-label);
    font-size: .7rem;
    font-weight: 600;
    cursor: pointer;
    flex-shrink: 0;
    transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.oc-copy:hover { color: var(--mint); border-color: rgba(43, 217, 166, 0.4); }
.oc-copy.copied {
    color: var(--mint);
    border-color: rgba(43, 217, 166, 0.5);
    background: rgba(43, 217, 166, 0.1);
}
.oc-copy svg { flex-shrink: 0; }

/* --- exits: review (quiet) + affiliate link (loud) --- */
.oc-actions {
    display: grid;
    grid-template-columns: 1fr 1.35fr;
    gap: .5rem;
    margin-top: auto;
}
.oc-details,
.oc-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    height: 44px;
    padding: 0 .75rem;
    border-radius: 10px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: .88rem;
    text-align: center;
    transition: all .18s ease;
}
.oc-details {
    color: var(--text-secondary);
    border: 1px solid var(--line-strong);
    background: rgba(255, 255, 255, 0.02);
}
.oc-details:hover { color: #fff; border-color: rgba(255, 255, 255, 0.28); }
.oc-cta {
    color: #06231a;
    background: linear-gradient(135deg, var(--mint) 0%, var(--mint-deep) 100%);
    box-shadow: 0 10px 22px -14px rgba(43, 217, 166, 0.9);
}
.oc-cta:hover { filter: brightness(1.07); transform: translateY(-1px); }
.oc-cta svg { opacity: .8; }
.oc-fine {
    margin: 0;
    text-align: center;
    font-family: var(--font-label);
    font-size: 9.5px;
    letter-spacing: .05em;
    color: var(--text-muted);
}
.oc-fine .sep { opacity: .5; }

@media (max-width: 380px) {
    .oc-actions { grid-template-columns: 1fr; }
    .oc-copy-txt { display: none; }
}

/* ==========================================================================
   BONUS ROW  (bonus listings: bonuses.html)
   A bonus list is read to compare terms, so it is a ranked list, not a grid.
   ========================================================================== */
.bonus-list { display: flex; flex-direction: column; gap: .6rem; }
.bonus-item {
    display: grid;
    grid-template-columns: 34px minmax(150px, 1fr) minmax(180px, 1.3fr) minmax(220px, 1.4fr) minmax(190px, auto);
    align-items: center;
    gap: 1rem;
    padding: .9rem 1rem;
    border-radius: 14px;
    background: rgba(19, 24, 22, 0.7);
    border: 1px solid var(--line);
    transition: border-color .2s ease, background .2s ease;
}
.bonus-item:hover { border-color: rgba(43, 217, 166, 0.28); background: rgba(23, 29, 27, 0.9); }
.br-rank {
    font-family: var(--font-mono);
    font-size: .95rem;
    color: var(--text-muted);
}
.br-casino { display: flex; align-items: center; gap: .65rem; min-width: 0; }
.br-casino .logo {
    width: 38px; height: 38px;
    border-radius: 10px;
    background: var(--bg-card);
    border: 1px solid rgba(255, 255, 255, 0.08);
    overflow: hidden;
    flex-shrink: 0;
}
.br-casino .logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.br-who { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.br-name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: .95rem;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.br-who .type-tag { align-self: flex-start; }
.br-value { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.br-value strong {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1rem;
    color: #fff;
    line-height: 1.25;
}
.br-value > span { font-size: .8rem; color: var(--text-muted); line-height: 1.35; }
.br-excl {
    align-self: flex-start;
    margin-top: .25rem;
    font-family: var(--font-label);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--gold);
    border: 1px solid rgba(226, 176, 74, 0.35);
    border-radius: 999px;
    padding: .12rem .45rem;
}
.br-terms {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .3rem .9rem;
}
.br-terms > div { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.br-terms span {
    font-family: var(--font-label);
    font-size: 9px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.br-terms strong { font-size: .8rem; font-weight: 600; color: var(--text-primary); }
.br-cta { display: flex; flex-direction: column; gap: .45rem; }
.br-code {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .3rem .45rem;
    border-radius: 8px;
    border: 1px dashed rgba(255, 255, 255, 0.18);
}
.br-code code {
    font-family: var(--font-mono);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .05em;
    color: var(--mint);
    flex: 1;
}
.br-cta .oc-cta { height: 40px; font-size: .85rem; }

@media (max-width: 1100px) {
    .bonus-item { grid-template-columns: 30px minmax(140px, 1fr) minmax(160px, 1.2fr) minmax(180px, auto); }
    .bonus-item .br-cta { grid-column: 2 / -1; flex-direction: row; align-items: center; }
    .br-cta .br-code { flex: 1; }
    .br-cta .oc-cta { flex: 1; }
}
@media (max-width: 700px) {
    .bonus-item { grid-template-columns: 30px 1fr; gap: .65rem .8rem; }
    .bonus-item .br-value,
    .bonus-item .br-terms,
    .bonus-item .br-cta { grid-column: 2 / -1; }
    .br-terms { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==========================================================================
   CLAIM BAR  (casino-detail.html, directly under the review hero)
   The sidebar box is easy to miss on a long review, so the offer, the code and
   the outbound button also run across the page above the fold.
   ========================================================================== */
.claim-bar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 1rem 1.25rem;
    margin-top: 1rem;
    padding: 1.1rem 1.25rem;
    border-radius: 16px;
    background:
        linear-gradient(135deg, rgba(43, 217, 166, 0.10) 0%, rgba(43, 217, 166, 0.03) 45%, rgba(255, 255, 255, 0.01) 100%),
        rgba(19, 24, 22, 0.9);
    border: 1px solid rgba(43, 217, 166, 0.28);
}
.cb-gift {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    border-radius: 12px;
    background: rgba(43, 217, 166, 0.14);
    color: var(--mint);
    flex-shrink: 0;
}
.cb-offer { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.cb-label {
    font-family: var(--font-label);
    font-size: 9px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.cb-offer > strong {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.25rem;
    color: #fff;
    line-height: 1.2;
}
.cb-offer > strong span {
    display: inline-block;
    font-size: .9rem;
    font-weight: 600;
    color: var(--mint);
}
.cb-terms {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: .35rem 1.1rem;
    margin: .15rem 0 0;
    padding: 0;
}
.cb-terms li { display: flex; align-items: baseline; gap: .35rem; }
.cb-terms li span {
    font-family: var(--font-label);
    font-size: 9px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.cb-terms li strong { font-size: .85rem; font-weight: 600; color: var(--text-primary); }
.cb-code {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .55rem .65rem;
    border-radius: 10px;
    border: 1px dashed rgba(255, 255, 255, 0.22);
    background: rgba(0, 0, 0, 0.2);
}
.cb-code .oc-code-value { flex: 0 0 auto; font-size: .95rem; }
.cb-cta { height: 50px; padding: 0 1.4rem; font-size: .95rem; }
.cb-fine { grid-column: 1 / -1; text-align: left; margin-top: -.35rem; }

@media (max-width: 1000px) {
    .claim-bar { grid-template-columns: auto minmax(0, 1fr); }
    .claim-bar .cb-code { grid-column: 1 / -1; }
    .claim-bar .cb-cta { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
    .claim-bar { padding: 1rem; gap: .85rem; }
    .cb-offer > strong { font-size: 1.1rem; }
    .cb-code { justify-content: space-between; }
}

/* --- bonus list: type pill + tighter term block ---------------------------
   .type-tag was only ever styled inside .bonus-card, so the same tag rendered
   as bare text in the new list. These rules give the list its own pill and
   stack every term label over its value instead of spreading the pair across
   the column. */
.br-who .type-tag {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 6px;
    background: rgba(43, 217, 166, 0.12);
    border: 1px solid rgba(43, 217, 166, 0.28);
    color: var(--text-secondary);
    font-family: var(--font-label);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.br-who .type-tag.no-deposit,
.br-who .type-tag.reload { background: rgba(43, 217, 166, 0.1); border-color: rgba(43, 217, 166, 0.3); color: var(--mint); }
.br-who .type-tag.free-spins { background: rgba(226, 176, 74, 0.12); border-color: rgba(226, 176, 74, 0.3); color: var(--gold); }

.br-terms { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .2rem .75rem; }
.br-terms > div { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 1px; }
@media (max-width: 1100px) { .br-terms { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 700px)  { .br-terms { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Homepage offer grid sits directly under the hero (the trust strip that
   used to separate them was removed), so it needs less air on top. */
.tiles-section { padding-top: 2.5rem; padding-bottom: 1.5rem; }