/* ============================================
   CRAZYBUZZER CASINO - DESIGN SYSTEM
   Comic Pop-Art / Lichtenstein meets Crazy Pig
   Yellow · Black · Pink · White
   ============================================ */

/* ============================================
   RESET & SAFETY NET
   ============================================ */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: "Inter", system-ui, -apple-system, sans-serif;
    font-size: 17px;
    line-height: 1.6;
    color: var(--foreground);
    background: var(--background);
    background-image:
        radial-gradient(circle, rgba(10,10,10,0.05) 1px, transparent 1px);
    background-size: 20px 20px;
    overflow-x: hidden;
}

img, video, iframe, embed, object, svg { max-width: 100%; height: auto; display: block; }
[class*="grid"] > *, [class*="flex"] > * { min-width: 0; }
pre, code { max-width: 100%; overflow-x: auto; }
.table-wrapper { max-width: 100%; overflow-x: auto; }
.table-wrapper:focus { outline: 3px solid var(--accent); outline-offset: 2px; }
p, li, td, th { overflow-wrap: break-word; }
input, textarea, select { max-width: 100%; }
section { overflow: clip; }

a { color: #b81e63; text-decoration: underline; }
a:hover { text-decoration: underline; }

ul, ol { padding-left: 1.25rem; }
hr { border: none; border-top: 3px solid var(--border); margin: 32px 0; }

::selection { background: var(--primary); color: var(--primary-foreground); }

.skip-link {
    position: absolute; top: -100px; left: 0;
    background: var(--accent); color: #fff; padding: 12px 16px;
    z-index: 9999; font-weight: 700;
}
.skip-link:focus { top: 0; }

/* ============================================
   TYPOGRAPHY
   Bangers (headings) / Inter (body) / Luckiest Guy (BOOM)
   ============================================ */
h1, h2, h3, h4, h5, h6 {
    font-family: "Bangers", "Inter", sans-serif;
    font-weight: 400;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    line-height: 1.1;
    margin: 0 0 16px;
    color: var(--foreground);
    -webkit-text-stroke: 1px var(--foreground);
}

h1 { font-size: clamp(2rem, 5vw + 1rem, 3rem); }
h2 { font-size: clamp(1.6rem, 3.5vw + 0.5rem, 2.25rem); }
h3 { font-size: clamp(1.25rem, 2vw + 0.5rem, 1.625rem); }
h4 { font-size: clamp(1.1rem, 1.5vw + 0.5rem, 1.25rem); }

p { margin: 0 0 24px; max-width: 70ch; }

.boom-text {
    font-family: "Luckiest Guy", "Bangers", sans-serif;
    font-size: clamp(2.5rem, 8vw, 4rem);
    color: var(--primary);
    -webkit-text-stroke: 3px var(--foreground);
    transform: rotate(-6deg);
    display: inline-block;
    text-shadow: 4px 4px 0 var(--accent);
}

.eyebrow {
    font-family: "Bangers", sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #a01658;
    font-size: 1rem;
    margin-bottom: 8px;
}
.eyebrow-on-yellow { color: #0a0a0a; }

.section-heading {
    text-align: center;
    margin-bottom: 32px;
}
.section-heading h2 { margin-bottom: 12px; }
.section-lead { max-width: 64ch; margin: 0 auto 16px; color: #3a3329; }
.section-after-link { text-align: center; margin-top: 24px; font-size: 0.95rem; color: #3a3329; }
.section-cta-row {
    display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-top: 40px;
}

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

/* HERO */
.hero-home {
    position: relative;
    background: var(--primary);
    border-bottom: 4px solid var(--border);
    padding: 32px 0 56px;
    overflow: hidden;
}
.hero-home .hero-bg {
    position: absolute; inset: 0; pointer-events: none;
}
.hero-home .halftone-bg {
    position: absolute; inset: 0;
    background-image: radial-gradient(circle, rgba(10,10,10,0.18) 2px, transparent 2px);
    background-size: 22px 22px;
    opacity: 0.4;
}
.speed-lines {
    position: absolute; inset: 0;
    background:
        repeating-linear-gradient(45deg,
            transparent 0 28px,
            rgba(10,10,10,0.06) 28px 32px);
    animation: speed-pulse 2s ease-in-out infinite;
}
.speed-lines-radial {
    background: repeating-conic-gradient(from 0deg,
        rgba(10,10,10,0.08) 0 4deg,
        transparent 4deg 12deg);
    animation: speed-spin 18s linear infinite;
}
@keyframes speed-pulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 0.85; }
}
@keyframes speed-spin {
    to { transform: rotate(360deg); }
}

.hero-inner {
    position: relative;
    display: grid;
    gap: 32px;
    align-items: center;
}
.hero-copy h1 {
    font-size: clamp(2.4rem, 8vw, 4.5rem);
    margin-bottom: 16px;
    -webkit-text-stroke: 2px var(--foreground);
    text-shadow: 4px 4px 0 var(--accent);
}
.hero-h1-accent { color: #a01658; -webkit-text-stroke: 2px var(--foreground); }
.hero-sub {
    font-size: clamp(1rem, 1.2vw + 0.5rem, 1.15rem);
    font-weight: 500;
    max-width: 56ch;
    margin-bottom: 24px;
    color: #0a0a0a;
}
.hero-cta-row {
    display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 24px;
}
.hero-trust-mini {
    display: flex; flex-wrap: wrap; gap: 24px;
    list-style: none; padding: 0; margin: 0;
    font-size: 0.95rem; font-weight: 600;
    color: #0a0a0a;
}
.hero-trust-mini li { display: flex; align-items: center; gap: 6px; }
.hero-trust-mini strong {
    background: var(--foreground); color: var(--primary);
    padding: 4px 10px; border-radius: 6px;
    font-family: "Bangers", sans-serif; letter-spacing: 0.04em;
}
.hero-mascot {
    position: relative;
    text-align: center;
    animation: mascot-sway 3s ease-in-out infinite;
}
.hero-mascot img {
    margin: 0 auto;
    max-width: 100%;
    width: 100%;
    height: auto;
    filter: drop-shadow(8px 8px 0 var(--border));
}
@keyframes mascot-sway {
    0%, 100% { transform: rotate(-3deg); }
    50% { transform: rotate(3deg); }
}
.boom-tag {
    position: absolute; top: 6%; right: 4%;
    font-family: "Luckiest Guy", sans-serif;
    font-size: clamp(2rem, 5vw, 3.5rem);
    color: var(--accent);
    -webkit-text-stroke: 3px var(--border);
    transform: rotate(-12deg);
    text-shadow: 4px 4px 0 var(--background);
}

/* BONUS GRID */
.section-bonus { background: var(--muted); border-top: 4px solid var(--border); border-bottom: 4px solid var(--border); }
.bonus-grid {
    display: grid; gap: 24px;
    grid-template-columns: 1fr;
}

/* SLOTS GRID */
.slots-grid {
    display: grid; gap: 20px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* USP GRID */
.section-usp { background: var(--background); }
.usp-grid {
    list-style: none; padding: 0; margin: 0;
    display: grid; gap: 20px;
    grid-template-columns: 1fr;
}
.usp-card {
    background: var(--card);
    border: 3px solid var(--border);
    border-radius: 16px;
    padding: 24px;
    box-shadow: 6px 6px 0 var(--border);
    transition: transform 250ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 250ms ease;
}
.usp-card:hover {
    transform: rotate(-1deg) translateY(-4px);
    box-shadow: 10px 10px 0 var(--border);
}
.usp-icon {
    font-size: 2.5rem;
    width: 64px; height: 64px;
    display: flex; align-items: center; justify-content: center;
    background: var(--primary);
    border: 3px solid var(--border);
    border-radius: 50%;
    margin-bottom: 16px;
    box-shadow: 4px 4px 0 var(--border);
}
.usp-card h3 { margin-bottom: 8px; }
.usp-card p { margin: 0; font-size: 0.97rem; }

/* DUAL FEATURE - King's Path & Royal League */
.section-gamification {
    background: var(--muted);
    border-top: 4px solid var(--border);
    border-bottom: 4px solid var(--border);
}
.dual-feature {
    display: grid; gap: 32px;
    grid-template-columns: 1fr;
}
.dual-feature-card {
    border: 4px solid var(--border);
    border-radius: 20px;
    padding: 24px;
    box-shadow: 8px 8px 0 var(--border);
    overflow: hidden;
}
.dual-feature-pink { background: #7a0f42; color: #ffffff; }
.dual-feature-pink h2,
.dual-feature-pink h3 { -webkit-text-stroke: 1px #ffffff; color: #ffffff; }
.dual-feature-pink .eyebrow { color: var(--primary); }
.dual-feature-pink p, .dual-feature-pink li { color: #ffffff; }
.dual-feature-yellow { background: var(--primary); color: var(--primary-foreground); }
.dual-feature-yellow .eyebrow { color: #a01658; }
.dual-feature-img img {
    margin: 0 auto 16px;
    filter: drop-shadow(4px 4px 0 var(--border));
}
.dual-feature-list {
    padding-left: 0; list-style: none; margin: 0 0 24px;
}
.dual-feature-list li {
    padding: 8px 0 8px 28px;
    position: relative;
    font-weight: 600;
}
.dual-feature-list li::before {
    content: "★";
    position: absolute; left: 0; top: 8px;
    color: var(--background);
    -webkit-text-stroke: 1px var(--border);
}

/* PAYMENTS HOME */
.payment-grid-home {
    display: grid; gap: 20px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* CTA BANNER */
.cta-banner {
    position: relative;
    background: var(--primary);
    border-top: 4px solid var(--border);
    border-bottom: 4px solid var(--border);
    padding: 56px 0;
    overflow: hidden;
}
.cta-banner .halftone-bg {
    position: absolute; inset: 0;
    background-image: radial-gradient(circle, rgba(10,10,10,0.16) 2px, transparent 2px);
    background-size: 22px 22px;
    opacity: 0.5;
    pointer-events: none;
}
.cta-banner-inner {
    position: relative;
    display: grid; gap: 24px;
    align-items: center;
    text-align: center;
}
.cta-banner-mascot {
    animation: mascot-sway 3s ease-in-out infinite;
}
.cta-banner-mascot img {
    margin: 0 auto;
    max-width: 280px;
    filter: drop-shadow(6px 6px 0 var(--border));
}
.cta-banner-copy h2 {
    font-size: clamp(2rem, 6vw, 3.25rem);
    margin-bottom: 12px;
    text-shadow: 4px 4px 0 var(--accent);
}
.cta-banner-copy p { max-width: 52ch; margin: 0 auto 20px; font-weight: 600; color: #0a0a0a; }
.cta-banner-copy .cta-micro {
    font-size: 0.85rem; font-weight: 500;
    color: #0a0a0a;
    margin-top: 12px; margin-bottom: 0;
}

/* EXPLORE SITE LINKS */
.section-explore { background: var(--background); }
.explore-grid {
    list-style: none; padding: 0; margin: 0;
    display: grid; gap: 20px;
    grid-template-columns: 1fr;
}
.explore-card {
    background: var(--card);
    border: 3px solid var(--border);
    border-radius: 16px;
    padding: 20px 22px;
    box-shadow: 6px 6px 0 var(--border);
    transition: transform 250ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 250ms ease;
}
.explore-card:hover {
    transform: rotate(-1deg) translateY(-3px);
    box-shadow: 10px 10px 0 var(--border);
}
.explore-card h3 { margin-bottom: 6px; }
.explore-card h3 a { color: var(--foreground); -webkit-text-stroke: 0; text-decoration: none; }
.explore-card h3 a:hover { color: #a01658; text-decoration: underline; }
.explore-card p { margin: 0; font-size: 0.95rem; color: #3a3329; }

/* FAQ SECTION */
.section-faq { background: var(--muted); border-top: 4px solid var(--border); }

/* SEO TEXT BLOCK */
.section-seo { background: var(--background); }
.section-seo h2 { font-size: clamp(1.6rem, 3vw + 0.5rem, 2rem); }
.section-seo h3 { margin-top: 32px; }
.section-seo blockquote {
    border-left: 6px solid var(--accent);
    background: var(--muted);
    padding: 20px 24px;
    margin: 32px 0;
    border-radius: 0 12px 12px 0;
    font-style: italic;
}
.section-seo blockquote cite {
    display: block;
    margin-top: 12px;
    font-size: 0.9rem;
    font-style: normal;
    font-weight: 600;
    color: #3a3329;
}

/* ============================================
   RESPONSIVE - Home page
   ============================================ */
@media (min-width: 640px) {
    .bonus-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .slots-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .payment-grid-home { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .usp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .explore-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
    .hero-home { padding: 64px 0 80px; }
    .hero-inner { grid-template-columns: 1.05fr 1fr; gap: 48px; }
    .hero-copy { text-align: left; }
    .bonus-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .slots-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .usp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .dual-feature { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .explore-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .cta-banner-inner {
        grid-template-columns: 1fr 1.5fr; text-align: left;
    }
    .cta-banner-mascot img { max-width: 360px; }
    .cta-banner-copy p { margin-left: 0; }
}

/* ============================================
   LAYOUT - Container, Section
   ============================================ */
.container {
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 16px;
}
@media (min-width: 768px) { .container { padding: 0 24px; } }

.container-narrow { max-width: 880px; }

.section {
    padding: 56px 0;
    position: relative;
}
.section-tight { padding: 32px 0; }
.section-cream { background: var(--muted); }
.section-yellow { background: var(--primary); }
.section-white { background: var(--card); }

@media (min-width: 1024px) {
    .section { padding: 96px 0; }
    .section-tight { padding: 48px 0; }
}

/* Full bleed wrapper */
.full-bleed {
    width: 100%;
    position: relative;
}

/* ============================================
   HALFTONE & COMIC EFFECTS
   ============================================ */
.halftone-bg {
    position: absolute; inset: 0;
    background-image: radial-gradient(circle, rgba(10,10,10,0.18) 1.5px, transparent 1.5px);
    background-size: 14px 14px;
    pointer-events: none;
    opacity: 0.6;
}
.halftone-bg-soft {
    position: absolute; inset: 0;
    background-image: radial-gradient(circle, rgba(10,10,10,0.08) 1px, transparent 1px);
    background-size: 16px 16px;
    pointer-events: none;
}
.halftone-corner {
    position: absolute; top: 0; right: 0; width: 60%; height: 60%;
    background-image: radial-gradient(circle, rgba(10,10,10,0.15) 1px, transparent 1px);
    background-size: 10px 10px;
    pointer-events: none;
    mask-image: linear-gradient(225deg, black 30%, transparent 80%);
    -webkit-mask-image: linear-gradient(225deg, black 30%, transparent 80%);
}

.speed-lines {
    position: absolute; inset: 0;
    background-image: repeating-conic-gradient(
        from 0deg at 50% 50%,
        rgba(10,10,10,0.08) 0deg 2deg,
        transparent 2deg 14deg
    );
    pointer-events: none;
    animation: pulseLines 2s ease-in-out infinite;
}
@keyframes pulseLines {
    0%, 100% { opacity: 0.4; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.05); }
}

.comic-shadow { box-shadow: 6px 6px 0 var(--border); }
.comic-border { border: 3px solid var(--border); }

/* ============================================
   BUTTONS
   ============================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 12px 24px;
    font-family: "Bangers", sans-serif;
    font-size: 1.125rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    border: 3px solid var(--border);
    border-radius: 12px;
    cursor: pointer;
    transition: transform 250ms cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 250ms cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 4px 4px 0 var(--border);
    background: var(--card);
    color: var(--foreground);
    line-height: 1;
}
.btn:hover {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 var(--border);
    text-decoration: none;
}
.btn:active {
    transform: translate(2px, 2px);
    box-shadow: 0 0 0 var(--border);
}

.btn-primary { background: var(--primary); color: var(--primary-foreground); }
.btn-accent { background: #a01658; color: #ffffff; }
.btn-outline { background: var(--card); color: var(--foreground); }
.btn-ghost { background: transparent; box-shadow: none; color: var(--foreground); }
.btn-ghost:hover { background: var(--card); box-shadow: 4px 4px 0 var(--border); }

.btn-block { display: flex; width: 100%; }
.btn-lg {
    min-height: 56px;
    padding: 14px 28px;
    font-size: 1.25rem;
}
.btn-xl {
    min-height: 64px;
    padding: 16px 36px;
    font-size: 1.5rem;
    border-width: 4px;
    box-shadow: 6px 6px 0 var(--border);
}
.btn-xl:hover { box-shadow: 10px 10px 0 var(--border); transform: translate(-3px, -3px); }

/* ============================================
   HEADER
   ============================================ */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--primary);
    border-bottom: 4px solid var(--border);
}
.header-inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--foreground);
    font-family: "Bangers", sans-serif;
    font-size: 1.5rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
.brand:hover { text-decoration: none; }
.brand .logo {
    width: 48px; height: 48px;
    border: 3px solid var(--border);
    border-radius: 50%;
    background: var(--card);
}
.brand-name { line-height: 1; }
.brand-name-accent { color: #0a0a0a; -webkit-text-stroke: 0.5px var(--foreground); background: var(--accent); padding: 0 6px; border-radius: 4px; }

.main-nav {
    display: none;
}

.nav-list {
    list-style: none;
    margin: 0; padding: 0;
    display: flex;
    gap: 8px;
    align-items: center;
}
.nav-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 8px 12px;
    color: var(--foreground);
    font-family: "Bangers", sans-serif;
    font-size: 1.125rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 8px;
    transition: background 200ms;
}
.nav-link:hover { background: rgba(10,10,10,0.1); text-decoration: none; }

.nav-cta-group { display: flex; gap: 8px; align-items: center; }
.nav-mascot { display: none; }

.mobile-menu-toggle {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 48px; height: 48px;
    padding: 12px 8px;
    background: var(--card);
    border: 3px solid var(--border);
    border-radius: 10px;
    cursor: pointer;
    z-index: 1001;
    box-shadow: 3px 3px 0 var(--border);
}
.mobile-menu-toggle span {
    display: block;
    height: 4px;
    background: var(--foreground);
    border-radius: 2px;
    transition: transform 250ms, opacity 250ms;
}
.mobile-menu-toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(10px) rotate(45deg);
}
.mobile-menu-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
}
.mobile-menu-toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-10px) rotate(-45deg);
}

/* Mobile drawer */
@media (max-width: 1023px) {
    .main-nav.is-open {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 76px;
        left: 0; right: 0; bottom: 0;
        background: var(--primary);
        background-image: radial-gradient(circle, rgba(10,10,10,0.1) 1.5px, transparent 1.5px);
        background-size: 16px 16px;
        padding: 24px 16px 40px;
        overflow-y: auto;
        z-index: 999;
        border-top: 4px solid var(--border);
    }
    .main-nav.is-open .nav-list {
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
        margin-bottom: 24px;
    }
    .main-nav.is-open .nav-link {
        min-height: 56px;
        padding: 14px 16px;
        font-size: 1.5rem;
        border: 3px solid var(--border);
        background: var(--card);
        border-radius: 12px;
        box-shadow: 4px 4px 0 var(--border);
    }
    .main-nav.is-open .nav-cta-group {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    .main-nav.is-open .nav-cta-group .btn { width: 100%; }
    .main-nav.is-open .nav-mascot {
        display: block;
        position: absolute;
        bottom: 16px;
        right: 16px;
        width: 120px;
        opacity: 0.85;
        pointer-events: none;
    }
}

@media (min-width: 1024px) {
    .header-inner { padding: 14px 24px; }
    .main-nav {
        display: flex;
        align-items: center;
        gap: 16px;
        flex: 1;
        justify-content: flex-end;
    }
    .mobile-menu-toggle { display: none; }
}

/* ============================================
   FOOTER
   ============================================ */
.site-footer {
    background: var(--foreground);
    color: var(--card);
    border-top: 6px solid var(--primary);
    padding-top: 56px;
    margin-top: 64px;
}
.footer-top {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 16px 40px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
}
.footer-col { min-width: 0; }
.footer-col .brand-footer { color: var(--card); }
.footer-col .brand-footer .logo { background: var(--primary); }

.footer-tagline {
    color: #ffffff;
    margin: 16px 0;
    font-size: 0.95rem;
}

.footer-mascot { width: 100px; }

.footer-heading {
    font-family: "Bangers", sans-serif;
    color: var(--primary);
    -webkit-text-stroke: 0;
    font-size: 1.25rem;
    letter-spacing: 0.04em;
    margin-bottom: 16px;
    text-transform: uppercase;
}
.footer-list {
    list-style: none;
    padding: 0; margin: 0;
}
.footer-list li { margin-bottom: 10px; }
.footer-list a {
    color: #ffffff;
    text-decoration: none;
    font-size: 0.95rem;
    transition: color 200ms;
}
.footer-list a:hover { color: var(--primary); text-decoration: underline; }

.payment-logos, .license-badges {
    list-style: none;
    padding: 0; margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.pay-logo, .badge-pill {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    background: var(--card);
    color: var(--foreground);
    border: 2px solid var(--primary);
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.85rem;
    font-family: "Bangers", sans-serif;
    letter-spacing: 0.04em;
}
.badge-pill-strong { background: #a01658; color: #ffffff; border-color: #a01658; }

.footer-warn {
    color: #ffffff;
    font-size: 0.85rem;
    margin-top: 16px;
}
.footer-warn a { color: var(--primary); text-decoration: underline; font-weight: 700; }

.footer-bottom {
    border-top: 2px dashed rgba(255,255,255,0.4);
    padding: 24px 16px;
    max-width: 1240px;
    margin: 0 auto;
    text-align: center;
}
.copyright {
    font-family: "Bangers", sans-serif;
    color: var(--primary);
    font-size: 1.1rem;
    letter-spacing: 0.04em;
    margin-bottom: 8px;
}
.legal-note {
    color: #d4d4d4;
    font-size: 0.85rem;
    margin: 0;
}

@media (min-width: 768px) {
    .footer-top { grid-template-columns: 1.5fr 1fr 1fr 1fr; padding: 0 24px 40px; }
}

/* ============================================
   HERO & SCENES
   ============================================ */
.hero {
    position: relative;
    background: var(--primary);
    border-bottom: 4px solid var(--border);
    padding: 56px 0 72px;
    overflow: clip;
}
.hero-content { text-align: center; }
.hero h1 {
    font-size: clamp(2.25rem, 7vw, 4rem);
    -webkit-text-stroke: 2px var(--foreground);
    text-shadow: 4px 4px 0 var(--accent);
    margin-bottom: 16px;
}

@keyframes mascotSway {
    0%, 100% { transform: rotate(-3deg); }
    50% { transform: rotate(3deg); }
}

@media (min-width: 1024px) {
    .hero { padding: 96px 0 120px; }
}

/* ============================================
   GAME CARD
   ============================================ */
.game-card {
    background: var(--card);
    border: 3px solid var(--border);
    border-radius: 16px;
    box-shadow: 6px 6px 0 var(--border);
    overflow: hidden;
    transition: transform 250ms cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 250ms cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex;
    flex-direction: column;
}
.game-card:hover {
    transform: rotate(-2deg) translate(-2px, -2px);
    box-shadow: 10px 10px 0 var(--border);
}
.game-card-media {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--muted);
    border-bottom: 3px solid var(--border);
    overflow: hidden;
}
.game-card-media img {
    width: 100%; height: 100%;
    object-fit: cover;
}
.game-card-badge {
    position: absolute;
    top: 8px; left: 8px;
    background: #a01658;
    color: #ffffff;
    border: 2px solid var(--border);
    padding: 4px 10px;
    border-radius: 6px;
    font-family: "Bangers", sans-serif;
    font-size: 0.85rem;
    letter-spacing: 0.05em;
    z-index: 2;
}
.game-card-rtp {
    position: absolute;
    top: 8px; right: 8px;
    background: var(--primary);
    color: var(--primary-foreground);
    border: 2px solid var(--border);
    padding: 4px 8px;
    border-radius: 6px;
    font-family: "Bangers", sans-serif;
    font-size: 0.8rem;
    z-index: 2;
}
.game-card-body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}
.game-card-title {
    font-size: 1.25rem;
    margin: 0;
    -webkit-text-stroke: 0.5px var(--foreground);
}
.game-card-provider {
    color: #3a3329;
    font-size: 0.9rem;
    margin: 0 0 8px;
    font-weight: 500;
}

.games-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}
@media (min-width: 768px) { .games-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } }
@media (min-width: 1024px) { .games-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.games-carousel {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    padding: 8px 4px 24px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}
.games-carousel > .game-card {
    flex: 0 0 240px;
    scroll-snap-align: start;
}
@media (min-width: 768px) { .games-carousel > .game-card { flex: 0 0 280px; } }

/* ============================================
   BONUS CARD
   ============================================ */
.bonus-card {
    background: var(--muted);
    border: 4px solid var(--border);
    border-radius: 16px;
    box-shadow: 6px 6px 0 var(--border);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 250ms cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 250ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.bonus-card:hover {
    transform: rotate(-1deg) translate(-2px, -2px);
    box-shadow: 10px 10px 0 var(--border);
}
.bonus-card-yellow { background: var(--primary); }
.bonus-card-cream { background: var(--muted); }
.bonus-card-white { background: var(--card); }
.bonus-card-highlight {
    border-color: #a01658;
    box-shadow: 6px 6px 0 #a01658;
}
.bonus-card-highlight:hover { box-shadow: 10px 10px 0 #a01658; }

.bonus-amount-wrap {
    position: relative;
    padding: 32px 16px 24px;
    text-align: center;
    border-bottom: 3px solid var(--border);
    overflow: hidden;
}
.bonus-amount {
    position: relative;
    z-index: 2;
    font-family: "Luckiest Guy", "Bangers", sans-serif;
    font-size: clamp(3rem, 10vw, 5rem);
    color: var(--primary);
    -webkit-text-stroke: 3px #0a0a0a;
    letter-spacing: 0.02em;
    line-height: 1;
    display: inline-block;
}
.bonus-card-yellow .bonus-amount { color: var(--card); -webkit-text-stroke: 3px #0a0a0a; }
.bonus-amount-unit { font-size: 0.6em; }

.bonus-card-body {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
}
.bonus-card-headline {
    font-size: 1.375rem;
    margin: 0;
}
.bonus-card-desc { margin: 0; color: #0a0a0a; }
.bonus-features {
    list-style: none;
    padding: 0; margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.bonus-features li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.95rem;
    color: #0a0a0a;
}
.check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px; height: 22px;
    flex-shrink: 0;
    background: var(--primary);
    border: 2px solid var(--border);
    border-radius: 50%;
    font-weight: 700;
    font-size: 0.75rem;
    color: var(--foreground);
}
.bonus-micro {
    font-size: 0.75rem;
    color: #3a3329;
    text-align: center;
    margin: 0;
}

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

/* ============================================
   PAYMENT CARD
   ============================================ */
.payment-card {
    background: var(--card);
    border: 3px solid var(--border);
    border-radius: 12px;
    box-shadow: 6px 6px 0 var(--border);
    padding: 20px 16px;
    text-align: center;
    transition: transform 250ms cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 250ms cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.payment-card:hover {
    transform: translate(-2px, -2px);
    box-shadow: 10px 10px 0 var(--border);
}
.payment-card-featured {
    border-color: #a01658;
    box-shadow: 6px 6px 0 #a01658;
}
.payment-card-featured:hover { box-shadow: 10px 10px 0 #a01658; }

.payment-logo-wrap {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--muted);
    border: 2px solid var(--border);
    border-radius: 8px;
}
.payment-logo-text {
    font-family: "Bangers", sans-serif;
    font-size: 1.4rem;
    letter-spacing: 0.04em;
}
.payment-name {
    margin: 0;
    font-size: 1.125rem;
    -webkit-text-stroke: 0;
}
.payment-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin: 0;
    padding: 8px 0;
    border-top: 2px dashed var(--border);
    border-bottom: 2px dashed var(--border);
}
.payment-stats div { display: flex; flex-direction: column; }
.payment-stats dt {
    font-size: 0.75rem;
    color: #3a3329;
    font-weight: 600;
    text-transform: uppercase;
}
.payment-stats dd {
    margin: 0;
    font-family: "Bangers", sans-serif;
    font-size: 1.25rem;
    color: var(--foreground);
}
.payment-features {
    list-style: none;
    padding: 0; margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-align: left;
    font-size: 0.85rem;
    color: #0a0a0a;
}
.payment-features li { display: flex; gap: 8px; align-items: center; }

.payment-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}
@media (min-width: 640px) { .payment-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .payment-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } }

/* ============================================
   FAQ ACCORDION
   ============================================ */
.faq-accordion {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 880px;
    margin: 0 auto;
}
.faq-item {
    background: var(--card);
    border: 3px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 4px 4px 0 var(--border);
}
.faq-item[open] {
    border-left: 6px solid var(--primary);
}
.faq-question {
    list-style: none;
    cursor: pointer;
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    font-family: "Bangers", sans-serif;
    font-size: 1.125rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--foreground);
    -webkit-text-stroke: 0.3px var(--foreground);
}
.faq-question::-webkit-details-marker { display: none; }
.faq-q-text { flex: 1; min-width: 0; }
.faq-icon {
    width: 32px; height: 32px;
    flex-shrink: 0;
    background: var(--primary);
    border: 2px solid var(--border);
    border-radius: 50%;
    position: relative;
    transition: transform 250ms;
}
.faq-icon::before, .faq-icon::after {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    background: var(--foreground);
    border-radius: 1px;
    transform: translate(-50%, -50%);
}
.faq-icon::before { width: 14px; height: 3px; }
.faq-icon::after { width: 3px; height: 14px; transition: transform 250ms; }
.faq-item[open] .faq-icon::after { transform: translate(-50%, -50%) scaleY(0); }
.faq-item[open] .faq-icon { transform: rotate(180deg); }

.faq-answer {
    padding: 16px 20px 20px;
    background: var(--muted);
    border-top: 2px dashed var(--border);
    background-image: radial-gradient(circle, rgba(10,10,10,0.06) 1px, transparent 1px);
    background-size: 12px 12px;
}
.faq-answer p { color: #0a0a0a; }
.faq-answer p:last-child { margin-bottom: 0; }
.faq-answer a { color: #a01658; text-decoration: underline; font-weight: 700; }

/* ============================================
   TRUST BADGES
   ============================================ */
.trust-badges-row {
    position: relative;
    background: var(--primary);
    border-top: 4px solid var(--border);
    border-bottom: 4px solid var(--border);
    padding: 32px 16px;
    overflow: hidden;
}
.trust-badges {
    list-style: none;
    margin: 0; padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    max-width: 1240px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}
.trust-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
}
.trust-badge-icon {
    width: 56px; height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--card);
    border: 3px solid var(--border);
    border-radius: 50%;
    font-family: "Bangers", sans-serif;
    font-size: 1.1rem;
    color: var(--foreground);
    box-shadow: 3px 3px 0 var(--border);
}
.trust-badge-label {
    font-family: "Bangers", sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.85rem;
    color: var(--foreground);
}
@media (min-width: 768px) {
    .trust-badges { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 32px; }
    .trust-badge-icon { width: 72px; height: 72px; font-size: 1.25rem; }
    .trust-badge-label { font-size: 1rem; }
}

/* ============================================
   CTA BANNER (component variant)
   ============================================ */
.cta-banner-inner {
    position: relative;
    z-index: 2;
    max-width: 1240px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    align-items: center;
}
.cta-mascot {
    order: -1;
}
.cta-mascot img {
    max-width: 200px;
    margin: 0 auto;
    animation: mascotSway 4s ease-in-out infinite;
}
.cta-content { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.cta-headline {
    font-size: clamp(1.75rem, 5vw + 0.5rem, 3rem);
    -webkit-text-stroke: 2px var(--foreground);
    text-shadow: 4px 4px 0 var(--accent);
    margin: 0;
}
.cta-sub {
    margin: 0;
    font-size: clamp(1rem, 1.5vw + 0.5rem, 1.125rem);
    font-weight: 600;
    max-width: 540px;
    color: #0a0a0a;
}
.cta-micro { font-size: 0.8rem; margin: 0; color: #0a0a0a; opacity: 0.85; }

@media (min-width: 768px) {
    .cta-banner-inner { grid-template-columns: 1fr 2fr; }
    .cta-mascot { order: 0; }
    .cta-mascot img { max-width: 280px; }
}

/* ============================================
   PROVIDER GRID
   ============================================ */
.provider-grid-section {
    position: relative;
    background: var(--card);
    padding: 56px 0;
    border-top: 3px solid var(--border);
    border-bottom: 3px solid var(--border);
}
.provider-grid {
    list-style: none;
    margin: 0; padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}
.provider-tile {
    background: var(--card);
    border: 3px solid var(--border);
    border-radius: 12px;
    box-shadow: 6px 6px 0 var(--border);
    aspect-ratio: 16 / 9;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    transition: transform 250ms cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 250ms;
}
.provider-tile:hover {
    transform: rotate(-2deg) translate(-2px, -2px);
    box-shadow: 10px 10px 0 #a01658;
}
.provider-name {
    font-family: "Bangers", sans-serif;
    font-size: clamp(1rem, 2vw + 0.25rem, 1.5rem);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--foreground);
}

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

/* ============================================
   ENGAGEMENT PATTERNS
   ============================================ */
.tldr-box {
    background: var(--muted);
    border: 3px solid var(--border);
    border-left: 8px solid var(--primary);
    border-radius: 12px;
    padding: 24px;
    box-shadow: 6px 6px 0 var(--border);
    margin: 32px auto;
    max-width: 880px;
}
.tldr-box h2, .tldr-box h3 {
    font-size: 1.5rem;
    margin: 0 0 12px;
    color: #a01658;
    -webkit-text-stroke: 0;
}
.tldr-box ul { padding-left: 20px; margin: 0; }
.tldr-box li { margin-bottom: 6px; }

.callout {
    background: var(--primary);
    border: 3px solid var(--border);
    border-radius: 12px;
    padding: 20px 24px;
    margin: 24px 0;
    box-shadow: 4px 4px 0 var(--border);
    position: relative;
}
.callout-accent { background: #a01658; color: #ffffff; }
.callout-accent h3, .callout-accent p { color: #ffffff; }
.callout p:last-child { margin-bottom: 0; }
.callout h3 {
    font-size: 1.25rem;
    margin: 0 0 8px;
    -webkit-text-stroke: 0;
}

.stat-highlight {
    text-align: center;
    padding: 24px 16px;
    background: var(--card);
    border: 3px solid var(--border);
    border-radius: 12px;
    box-shadow: 6px 6px 0 var(--border);
}
.stat-highlight-number {
    display: block;
    font-family: "Luckiest Guy", "Bangers", sans-serif;
    font-size: clamp(2.5rem, 6vw, 4rem);
    color: #a01658;
    -webkit-text-stroke: 2px var(--foreground);
    line-height: 1;
}
.stat-highlight-label {
    display: block;
    font-family: "Bangers", sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 8px;
    font-size: 1rem;
}
.stat-highlight-source {
    display: block;
    font-size: 0.75rem;
    color: #3a3329;
    margin-top: 4px;
}
.stats-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}
@media (min-width: 768px) { .stats-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } }

.pull-quote {
    border: none;
    background: var(--primary);
    border-top: 4px solid var(--border);
    border-bottom: 4px solid var(--border);
    padding: 32px 24px;
    margin: 32px 0;
    text-align: center;
    position: relative;
}
.pull-quote p {
    font-family: "Bangers", sans-serif;
    font-size: clamp(1.5rem, 3vw + 0.5rem, 2rem);
    line-height: 1.2;
    margin: 0 auto 8px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    -webkit-text-stroke: 1px var(--foreground);
    max-width: 800px;
}
.pull-quote cite {
    font-style: normal;
    font-family: "Inter", sans-serif;
    font-size: 0.9rem;
    color: #3a3329;
}

/* ============================================
   COMPARISON TABLE
   ============================================ */
.compare-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 3px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 6px 6px 0 var(--border);
    background: var(--card);
}
.compare-table thead {
    background: var(--foreground);
    color: var(--card);
}
.compare-table th, .compare-table td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 2px solid var(--border);
}
.compare-table th {
    font-family: "Bangers", sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 400;
    color: var(--primary);
}
.compare-table tbody tr:nth-child(even) { background: var(--muted); }
.compare-table tbody tr:last-child td { border-bottom: none; }
.compare-table .row-highlight { background: var(--primary) !important; font-weight: 700; }
.table-wrapper { margin: 24px 0; }

/* ============================================
   STEPS / NUMBERED PANELS
   ============================================ */
.steps-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}
@media (min-width: 768px) { .steps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } }
@media (min-width: 1024px) { .steps-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.step-panel {
    background: var(--card);
    border: 3px solid var(--border);
    border-radius: 12px;
    padding: 24px;
    box-shadow: 6px 6px 0 var(--border);
    position: relative;
    counter-increment: step;
}
.step-panel-number {
    position: absolute;
    top: -16px; left: -16px;
    width: 48px; height: 48px;
    background: #a01658;
    color: #ffffff;
    border: 3px solid var(--border);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Luckiest Guy", "Bangers", sans-serif;
    font-size: 1.5rem;
    box-shadow: 3px 3px 0 var(--border);
}
.step-panel h3 {
    font-size: 1.125rem;
    margin: 0 0 8px;
    padding-left: 36px;
}

/* ============================================
   FILTER CHIPS
   ============================================ */
.filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    margin: 0 0 32px;
    padding: 0;
}
.filter-chip {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 6px 14px;
    background: var(--card);
    border: 3px solid var(--border);
    border-radius: 999px;
    font-family: "Bangers", sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-size: 0.95rem;
    cursor: pointer;
    box-shadow: 3px 3px 0 var(--border);
    transition: transform 200ms;
}
.filter-chip:hover { transform: translate(-1px, -1px); }
.filter-chip.is-active { background: var(--primary); }

/* ============================================
   HUB
   ============================================ */
.hub-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}
@media (min-width: 768px) { .hub-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } }
@media (min-width: 1024px) { .hub-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .hub-grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.hub-card {
    background: var(--card);
    border: 3px solid var(--border);
    border-radius: 16px;
    box-shadow: 6px 6px 0 var(--border);
    padding: 24px;
    text-decoration: none;
    color: var(--foreground);
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: transform 250ms, box-shadow 250ms;
    min-height: 200px;
}
.hub-card:hover {
    transform: rotate(-1deg) translate(-2px, -2px);
    box-shadow: 10px 10px 0 #a01658;
    text-decoration: none;
}
.hub-card-icon {
    width: 64px; height: 64px;
    background: var(--primary);
    border: 3px solid var(--border);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Bangers", sans-serif;
    font-size: 1.5rem;
}
.hub-card h3 { margin: 0; font-size: 1.25rem; }
.hub-card p { margin: 0; font-size: 0.95rem; color: #3a3329; flex: 1; }
.hub-card-arrow {
    font-family: "Bangers", sans-serif;
    color: #a01658;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ============================================
   TWO COLUMN BLOCK
   ============================================ */
.two-col {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    align-items: center;
}
@media (min-width: 1024px) {
    .two-col { grid-template-columns: 1fr 1fr; gap: 48px; }
    .two-col-reverse > :first-child { order: 2; }
}
.two-col-image img { width: 100%; max-width: 480px; margin: 0 auto; }

/* ============================================
   SEO TEXT BLOCK
   ============================================ */
.seo-text {
    max-width: 880px;
    margin: 0 auto;
    padding: 32px 16px;
}
.seo-text h2, .seo-text h3 { margin-top: 32px; }
.seo-text a {
    color: #a01658;
    font-weight: 700;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 2px;
}
.seo-text a:hover { text-decoration-style: solid; }

/* Section SEO text links */
.section-seo a {
    color: #a01658;
    font-weight: 700;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 2px;
}
.section-seo p, .section-seo li { color: #1a1a1a; }

/* Ensure inline links inside content sections are underlined */
.section-after-link a {
    color: #a01658;
    font-weight: 700;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 2px;
}

/* ============================================
   ANIMATIONS
   ============================================ */
.animate-on-scroll {
    opacity: 0;
    transform: scale(0.92) translateY(20px);
    transition: opacity 400ms ease-out, transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.animate-on-scroll.is-visible {
    opacity: 1;
    transform: scale(1) translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .animate-on-scroll { opacity: 1; transform: none; transition: none; }
    .speed-lines, .hero-mascot img, .cta-mascot img { animation: none; }
    * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ============================================
   TIMELINE (ueber-uns)
   ============================================ */
.timeline {
    list-style: none;
    margin: 32px 0 0;
    padding: 0;
    position: relative;
    counter-reset: timeline;
}
.timeline::before {
    content: "";
    position: absolute;
    left: 24px;
    top: 8px; bottom: 8px;
    width: 4px;
    background: var(--border);
    border-radius: 2px;
}
.timeline-item {
    position: relative;
    padding: 0 0 24px 64px;
}
.timeline-item:last-child { padding-bottom: 0; }
.timeline-year {
    position: absolute;
    left: 0; top: 0;
    width: 52px; height: 52px;
    background: var(--primary);
    border: 3px solid var(--border);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Bangers", sans-serif;
    font-size: 0.75rem;
    text-align: center;
    line-height: 1;
    box-shadow: 4px 4px 0 var(--border);
    z-index: 2;
    padding: 4px;
}
.timeline-body {
    background: var(--card);
    border: 3px solid var(--border);
    border-radius: 12px;
    padding: 16px 20px;
    box-shadow: 6px 6px 0 var(--border);
}
.timeline-body h3 {
    font-size: 1.15rem;
    margin: 0 0 8px;
}
.timeline-body p { margin: 0; font-size: 0.95rem; }

@media (min-width: 768px) {
    .timeline::before { left: 32px; }
    .timeline-item { padding-left: 88px; }
    .timeline-year { width: 64px; height: 64px; font-size: 0.9rem; }
}

/* ============================================
   STUB PAGE (hive.html)
   ============================================ */
.stub-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    background-image: radial-gradient(circle, rgba(10,10,10,0.1) 1.5px, transparent 1.5px);
    background-size: 16px 16px;
    text-align: center;
    padding: 24px;
}
.stub-logo {
    width: 80px; height: 80px;
    border: 4px solid var(--border);
    border-radius: 50%;
    background: var(--card);
    box-shadow: 6px 6px 0 var(--border);
    margin-bottom: 24px;
}
.stub-text {
    font-family: "Bangers", sans-serif;
    font-size: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ============================================
   UTILITY
   ============================================ */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mb-lg { margin-bottom: 32px; }
.mt-lg { margin-top: 32px; }
.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}