/* ================================================================
   RiskySkins – Homepage Enhancement Layer  v1.0
   Injecteer via WPCode → CSS Snippet → "Run Everywhere"
   Raakt NIET de header, footer, of andere pagina's
   ================================================================ */

/* ── 1. Scroll-reveal systeem ──────────────────────────────────
   .rs-reveal      → fade-in (voor kaarten die ook hover-transform hebben)
   .rs-reveal-up   → slide-up + fade (voor koppen, secties)
   Klasses worden toegevoegd via JS (IntersectionObserver)
   ─────────────────────────────────────────────────────────────── */
.rs-reveal {
    opacity: 0;
    transition: opacity 0.55s cubic-bezier(.16, 1, .3, 1);
}
.rs-reveal.is-visible {
    opacity: 1;
}

.rs-reveal-up {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.65s cubic-bezier(.16, 1, .3, 1),
                transform 0.65s cubic-bezier(.16, 1, .3, 1);
}
.rs-reveal-up.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger voor direct children die .rs-reveal hebben */
.rs-stagger > .rs-reveal:nth-child(1),
.rs-stagger > .rs-reveal-up:nth-child(1) { transition-delay: 0s; }
.rs-stagger > .rs-reveal:nth-child(2),
.rs-stagger > .rs-reveal-up:nth-child(2) { transition-delay: 0.07s; }
.rs-stagger > .rs-reveal:nth-child(3),
.rs-stagger > .rs-reveal-up:nth-child(3) { transition-delay: 0.14s; }
.rs-stagger > .rs-reveal:nth-child(4),
.rs-stagger > .rs-reveal-up:nth-child(4) { transition-delay: 0.21s; }
.rs-stagger > .rs-reveal:nth-child(5),
.rs-stagger > .rs-reveal-up:nth-child(5) { transition-delay: 0.28s; }
.rs-stagger > .rs-reveal:nth-child(6),
.rs-stagger > .rs-reveal-up:nth-child(6) { transition-delay: 0.35s; }


/* ── 2. Hero Section ───────────────────────────────────────────
   Target: main > section:first-child (geen ID in PHP aanwezig)
   JS voegt id="hero" toe — CSS hieronder gebruikt beide selectoren
   ─────────────────────────────────────────────────────────────── */

/* Particle canvas layer (geïnjecteerd door JS) */
#rs-hero-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

/* Container boven canvas */
#hero .container,
main > section:first-child .container {
    position: relative;
    z-index: 10;
}

/* Zorg dat hero relatief is voor canvas positionering */
#hero,
main > section:first-child {
    position: relative;
    overflow: hidden;
}

/* Animated glow-border rondom de hero */
@keyframes rs-hero-border-glow {
    0%   { box-shadow: inset 0 0 0 1px rgba(231, 76, 60, 0.35),
                       0 0 80px rgba(231, 76, 60, 0.10); }
    33%  { box-shadow: inset 0 0 0 1px rgba(230, 126, 34, 0.35),
                       0 0 80px rgba(230, 126, 34, 0.08); }
    66%  { box-shadow: inset 0 0 0 1px rgba(241, 196, 15, 0.25),
                       0 0 80px rgba(241, 196, 15, 0.06); }
    100% { box-shadow: inset 0 0 0 1px rgba(231, 76, 60, 0.35),
                       0 0 80px rgba(231, 76, 60, 0.10); }
}

#hero,
main > section:first-child {
    animation: rs-hero-border-glow 7s ease-in-out infinite;
}

/* Gradient text: rood → oranje → goud */
.text-gradient-red {
    background: linear-gradient(135deg, #e74c3c 0%, #e8642a 45%, #f0a500 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    display: inline-block;
}

/* Hero h1 load-animatie (JS past inline styles toe) */
#hero h1,
main > section:first-child h1 {
    transition: opacity 0.8s ease, transform 0.8s cubic-bezier(.16, 1, .3, 1);
}

/* Primary CTA puls-glow */
@keyframes rs-cta-pulse {
    0%, 100% {
        box-shadow: 0 0 18px 0 rgba(231, 76, 60, 0.45),
                    0 6px 28px rgba(231, 76, 60, 0.30);
    }
    50% {
        box-shadow: 0 0 36px 8px rgba(231, 76, 60, 0.65),
                    0 8px 36px rgba(231, 76, 60, 0.45);
    }
}

/* Shimmer sweep over CTA */
@keyframes rs-cta-shimmer {
    0%   { left: -120%; }
    100% { left: 200%; }
}

#hero .glow-red,
main > section:first-child .glow-red {
    animation: rs-cta-pulse 2.8s ease-in-out infinite;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

#hero .glow-red::after,
main > section:first-child .glow-red::after {
    content: '';
    position: absolute;
    top: 0;
    left: -120%;
    width: 55%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.18),
        transparent
    );
    transform: skewX(-18deg);
    animation: rs-cta-shimmer 3.2s ease-in-out infinite;
    pointer-events: none;
}

/* Secundaire CTA knop */
#hero a:not(.glow-red),
main > section:first-child a:not(.glow-red) {
    transition: background-color 0.25s ease, border-color 0.25s ease,
                transform 0.25s ease, box-shadow 0.25s ease !important;
}
#hero a:not(.glow-red):hover,
main > section:first-child a:not(.glow-red):hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

/* Hero stats badges */
#hero .sm\:grid-cols-3 > div,
main > section:first-child .sm\:grid-cols-3 > div {
    transition: transform 0.3s cubic-bezier(.34, 1.56, .64, 1),
                border-color 0.3s ease,
                box-shadow 0.3s ease;
    cursor: default;
}
#hero .sm\:grid-cols-3 > div:hover,
main > section:first-child .sm\:grid-cols-3 > div:hover {
    transform: translateY(-5px) scale(1.02);
    border-color: hsl(var(--primary) / 0.45);
    box-shadow: 0 10px 28px rgba(231, 76, 60, 0.18);
}

/* Count-up getal: laat het groter en prominenter staan */
#hero .sm\:grid-cols-3 .font-heading,
main > section:first-child .sm\:grid-cols-3 .font-heading {
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: #fff;
}


/* ── 3. Bonus Codes Section ────────────────────────────────────
   Target: #bonus-codes .card-hover
   ─────────────────────────────────────────────────────────────── */

/* Kaart glow-hover + scale */
#bonus-codes .card-hover {
    position: relative;
    overflow: hidden;
    transition: transform 0.32s cubic-bezier(.16, 1, .3, 1),
                border-color 0.32s ease,
                box-shadow 0.32s ease !important;
    isolation: isolate;
}

#bonus-codes .card-hover:hover {
    transform: translateY(-6px) scale(1.018) !important;
    border-color: hsl(var(--primary) / 0.55) !important;
    box-shadow:
        0 0 0 1px hsl(var(--primary) / 0.25),
        0 20px 45px rgba(231, 76, 60, 0.16),
        0 8px 18px rgba(0, 0, 0, 0.28) !important;
}

/* Glare-laag bij hover */
#bonus-codes .card-hover::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.04) 0%,
        transparent 50%,
        transparent 100%
    );
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 0;
}
#bonus-codes .card-hover:hover::before {
    opacity: 1;
}

/* Zorg dat card-inhoud boven pseudo-element staat */
#bonus-codes .card-hover > * {
    position: relative;
    z-index: 1;
}

/* Ribbon badge (geïnjecteerd door JS) */
.rs-ribbon {
    position: absolute;
    top: 14px;
    right: 0;
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
    color: #fff;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    padding: 0.22rem 0.65rem 0.22rem 0.55rem;
    border-radius: 3px 0 0 3px;
    box-shadow: -2px 2px 8px rgba(0, 0, 0, 0.3);
    z-index: 5;
    line-height: 1.4;
    white-space: nowrap;
}

/* Ribbon staartje */
.rs-ribbon::after {
    content: '';
    position: absolute;
    right: -1px;
    bottom: -5px;
    border-left: 6px solid #7b1a12;
    border-bottom: 5px solid transparent;
    width: 0;
    height: 0;
}

/* Ribbon varianten op basis van tekst (ingesteld door JS) */
.rs-ribbon--hot {
    background: linear-gradient(135deg, #e74c3c 0%, #e67e22 100%);
}
.rs-ribbon--hot::after {
    border-left-color: #8b4000;
}
.rs-ribbon--exclusive {
    background: linear-gradient(135deg, #8e44ad 0%, #6c3483 100%);
}
.rs-ribbon--exclusive::after {
    border-left-color: #3d1a5a;
}
.rs-ribbon--best {
    background: linear-gradient(135deg, #27ae60 0%, #1e8449 100%);
}
.rs-ribbon--best::after {
    border-left-color: #0e4225;
}

/* Bonus badge (bestaand bg-success/10 blok) – extra polish */
#bonus-codes .bg-success\/10 {
    border: 1px solid hsl(var(--success) / 0.2);
    letter-spacing: 0.01em;
}

/* Tag pill bovenaan kaart */
#bonus-codes .bg-primary\/15 {
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-size: 0.65rem;
}

/* Claim Deal knop */
#bonus-codes [style*="gradient-cta-green"] {
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease !important;
}
#bonus-codes [style*="gradient-cta-green"]:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 18px rgba(31, 191, 116, 0.35) !important;
}


/* ── 4. CS2 Guide Section ──────────────────────────────────────
   Target: #cs2-guide .card-hover
   ─────────────────────────────────────────────────────────────── */

#cs2-guide .card-hover {
    transition: transform 0.3s cubic-bezier(.16, 1, .3, 1),
                border-color 0.3s ease,
                box-shadow 0.3s ease !important;
}

#cs2-guide .card-hover:hover {
    transform: translateY(-5px) !important;
    border-color: hsl(var(--primary) / 0.4) !important;
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.22),
                0 0 0 1px hsl(var(--primary) / 0.12) !important;
}

/* Icon container: bounce + glow bij hover */
#cs2-guide .card-hover .h-14.w-14 {
    transition: transform 0.35s cubic-bezier(.34, 1.56, .64, 1),
                background-color 0.3s ease,
                box-shadow 0.3s ease !important;
}
#cs2-guide .card-hover:hover .h-14.w-14 {
    transform: scale(1.18) translateY(-2px) !important;
    box-shadow: 0 0 22px hsl(var(--primary) / 0.4) !important;
    background-color: hsl(var(--primary) / 0.2) !important;
}

/* SVG icoon kleurshift bij hover */
#cs2-guide .card-hover .text-primary {
    transition: filter 0.3s ease;
}
#cs2-guide .card-hover:hover .text-primary {
    filter: drop-shadow(0 0 6px hsl(var(--primary) / 0.6)) brightness(1.1);
}

/* "Read Full Guide" knop */
#cs2-guide a.bg-primary {
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease !important;
}
#cs2-guide a.bg-primary:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px hsl(var(--primary) / 0.35) !important;
}


/* ── 5. Comparison Table ───────────────────────────────────────
   Target: #comparison
   ─────────────────────────────────────────────────────────────── */

/* Sticky thead (werkt als tabel-wrapper overflow: auto heeft) */
#comparison thead tr {
    position: sticky;
    top: 0;
    z-index: 5;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    background: hsl(var(--card) / 0.95) !important;
}

/* Thead kolom headers */
#comparison thead th {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: hsl(var(--muted-foreground));
    padding: 0.8rem 1rem;
    white-space: nowrap;
    border-bottom: 1px solid hsl(var(--border));
}

/* Rij hover highlight */
#comparison tbody tr {
    transition: background-color 0.18s ease,
                box-shadow 0.18s ease;
    cursor: default;
}
#comparison tbody tr:hover {
    background-color: hsl(var(--primary) / 0.06) !important;
    box-shadow: inset 2px 0 0 hsl(var(--primary) / 0.5);
}
#comparison tbody tr:hover td:first-child {
    color: hsl(var(--primary));
}

/* Top rij (positie #1) extra accent */
#comparison tbody tr:first-child {
    background-color: hsl(var(--primary) / 0.04);
}
#comparison tbody tr:first-child td:first-child {
    font-weight: 700;
}
#comparison tbody tr:first-child td {
    border-left: none;
}
#comparison tbody tr:first-child {
    box-shadow: inset 3px 0 0 hsl(var(--primary) / 0.6);
}

/* Tabel cellen */
#comparison tbody td {
    padding: 0.75rem 1rem;
    font-size: 0.92rem;
    transition: color 0.18s ease;
    vertical-align: middle;
}

/* Visit knop upgrade */
#comparison .bg-primary.px-3 {
    padding: 0.38rem 0.95rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em;
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease !important;
    white-space: nowrap;
}
#comparison .bg-primary.px-3:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 14px hsl(var(--primary) / 0.40) !important;
    filter: brightness(1.08) !important;
}

/* Sterrenratings */
#comparison svg[fill="currentColor"],
#comparison .fill-primary,
#comparison .fill-warning {
    filter: drop-shadow(0 0 3px hsl(var(--primary) / 0.5));
}

/* Verborgen rijen (door JS beheerd) */
#comparison tbody tr.rs-hidden-row {
    display: none;
}

/* "View All" knop wrapper (geïnjecteerd door JS) */
.rs-view-all-wrap {
    margin-top: 1.25rem;
    text-align: center;
}

.rs-view-all-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.68rem 1.8rem;
    border-radius: 0.5rem;
    border: 1px solid hsl(var(--border));
    background: hsl(var(--card));
    color: hsl(var(--foreground));
    font-family: inherit;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: border-color 0.22s ease,
                color 0.22s ease,
                background-color 0.22s ease,
                box-shadow 0.22s ease;
}
.rs-view-all-btn:hover {
    border-color: hsl(var(--primary) / 0.55);
    color: hsl(var(--primary));
    background: hsl(var(--primary) / 0.05);
    box-shadow: 0 4px 16px rgba(231, 76, 60, 0.12);
}
.rs-view-all-btn svg {
    flex-shrink: 0;
    transition: transform 0.28s cubic-bezier(.34, 1.56, .64, 1);
}
.rs-view-all-btn.is-expanded svg {
    transform: rotate(180deg);
}


/* ── 6. Sectie headings – accent lijn ─────────────────────────── */

#bonus-codes .mb-12 h2,
#cs2-guide .mb-12 h2,
#comparison .mb-12 h2 {
    position: relative;
    display: inline-block;
}

#bonus-codes .mb-12 h2::after,
#cs2-guide .mb-12 h2::after,
#comparison .mb-12 h2::after {
    content: '';
    display: block;
    margin: 0.45rem auto 0;
    width: 48px;
    height: 3px;
    background: linear-gradient(90deg, #e74c3c, #e67e22);
    border-radius: 9999px;
    transition: width 0.4s cubic-bezier(.16, 1, .3, 1);
}

#bonus-codes .mb-12:hover h2::after,
#cs2-guide .mb-12:hover h2::after,
#comparison .mb-12:hover h2::after {
    width: 80%;
}


/* ── 7. Featured site spotlight ───────────────────────────────── */

@keyframes rs-spotlight-enter {
    from { box-shadow: 0 0 0 2px hsl(var(--primary) / 0), 0 0 0 rgba(0,0,0,0); }
    to   { box-shadow: 0 0 0 2px hsl(var(--primary) / 0.55), 0 20px 45px rgba(231,76,60,0.16); }
}

.rs-spotlight-active {
    border-color: hsl(var(--primary) / 0.55) !important;
    animation: rs-spotlight-enter 0.5s ease forwards;
}


/* ── 8. Smooth scroll ─────────────────────────────────────────── */

html {
    scroll-behavior: smooth;
}


/* ── 8b. Consistente achtergrond + sectie-ritme ───────────────────────────
   Één doorlopende donkere achtergrond onder de fold.
   Afwisseling door layout en spacing, niet door kleur.
   ─────────────────────────────────────────────────────────────────────── */

/* Subtiele rode streep boven elke section heading als visueel anker */
.rs-section .mb-12 h2::before,
.rs-section .mb-8 h2::before {
    content: '';
    display: block;
    width: 32px;
    height: 3px;
    background: hsl(var(--primary));
    border-radius: 9999px;
    margin: 0 auto 0.85rem;
}

/* Heading links uitlijnen: streep ook links */
.rs-section .mb-8 > h2,
.rs-section .mb-10 > h2 {
    text-align: left;
}
.rs-section .mb-8 h2::before {
    margin: 0 0 0.75rem;
}

/* Dunne scheidingslijn tussen secties */
.rs-section + .rs-section {
    border-top: 1px solid hsl(var(--border) / 0.5);
}

/* Bonus codes: iets minder padding direct onder de hero */
#bonus-codes {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
}

/* Top rated */
#top-rated {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
}

/* Latest posts */
#latest-posts {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
}

/* Comparison */
#comparison {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
}

/* FAQ */
#faq {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
}

/* How we review */
#how-we-review {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
}

/* Reviews */
#reviews {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
}

/* Latest posts – image scale via Tailwind group-hover handled inline */

/* ── Design System: Eyebrow labels & heading accents ────────────── */

.rs-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: hsl(var(--primary));
    margin-bottom: 0.6rem;
}
.rs-eyebrow::before {
    content: '';
    display: block;
    width: 1.4rem;
    height: 2px;
    background: hsl(var(--primary));
    border-radius: 1px;
    flex-shrink: 0;
}

.rs-heading-accent {
    color: hsl(var(--primary));
}

/* Section view-all link */
.rs-section-link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: hsl(var(--primary));
    text-decoration: none;
    white-space: nowrap;
    transition: opacity 0.2s ease;
}
.rs-section-link:hover { opacity: 0.75; }

/* ── Hero two-column grid ──────────────────────────────────────── */
.rs-hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    gap: 2.5rem;
}
@media (min-width: 768px) {
    .rs-hero-grid {
        grid-template-columns: 58fr 42fr;
        gap: 3.5rem;
    }
}

/* Right column: always visible, stacks below text on mobile */
.rs-hero-right-col {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── Hero image: right-side style ─────────────────────────────── */
.rs-hero-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}
/* Afbeelding: edge-fading mask + rode ambient glow */
.rs-hero-visual {
    position: relative;
}

.rs-hero-visual img {
    width: 100%;
    height: auto;
    max-height: 480px;
    object-fit: contain;
    display: block;
    /* Vervaag randen zodat het beeld opgaat in de achtergrond */
    -webkit-mask-image:
        linear-gradient(to bottom,  black 55%, transparent 100%),
        linear-gradient(to right,   transparent 0%, black 8%, black 92%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
        linear-gradient(to bottom,  black 55%, transparent 100%),
        linear-gradient(to right,   transparent 0%, black 8%, black 92%, transparent 100%);
    mask-composite: intersect;
    filter: drop-shadow(0 0 40px rgba(231, 76, 60, 0.40))
            drop-shadow(0 0 16px rgba(230, 100, 42, 0.20));
}

/* Ambient glow achter de afbeelding */
.rs-hero-visual::before {
    content: '';
    position: absolute;
    inset: 10% 5%;
    background: radial-gradient(ellipse at center, rgba(231, 76, 60, 0.14) 0%, transparent 68%);
    pointer-events: none;
    z-index: -1;
    filter: blur(30px);
}

/* ── Hero image: full-background style ────────────────────────── */
.rs-hero-bg-wrap {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}
.rs-hero-bg-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center right;
    /* blend: left stays dark/red, right fades in the image */
    mask-image: linear-gradient(
        to right,
        transparent 0%,
        rgba(0,0,0,0.15) 25%,
        rgba(0,0,0,0.55) 50%,
        rgba(0,0,0,0.85) 70%,
        black 100%
    );
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%,
        rgba(0,0,0,0.15) 25%,
        rgba(0,0,0,0.55) 50%,
        rgba(0,0,0,0.85) 70%,
        black 100%
    );
    mix-blend-mode: luminosity;
    opacity: 0.55;
}
/* On smaller screens show the image more centrally */
@media (max-width: 1023px) {
    .rs-hero-bg-img {
        object-position: center;
        mask-image: linear-gradient(
            to bottom,
            transparent 0%,
            rgba(0,0,0,0.3) 20%,
            rgba(0,0,0,0.6) 50%,
            rgba(0,0,0,0.4) 80%,
            transparent 100%
        );
        -webkit-mask-image: linear-gradient(
            to bottom,
            transparent 0%,
            rgba(0,0,0,0.3) 20%,
            rgba(0,0,0,0.6) 50%,
            rgba(0,0,0,0.4) 80%,
            transparent 100%
        );
        opacity: 0.35;
    }
}

/* Hero leaderboard card (fallback) */
.rs-hero-card {
    border-radius: 1.25rem;
    border: 1px solid hsl(var(--border) / 0.5);
    background: hsl(var(--card) / 0.55);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    overflow: hidden;
    box-shadow: 0 0 60px rgba(231, 76, 60, 0.08),
                0 20px 50px rgba(0, 0, 0, 0.35),
                inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.rs-hero-card__header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 1.1rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: hsl(var(--primary));
    background: hsl(var(--primary) / 0.07);
    border-bottom: 1px solid hsl(var(--border) / 0.5);
}

.rs-hero-card__row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1.1rem;
    border-bottom: 1px solid hsl(var(--border) / 0.4);
    text-decoration: none;
    transition: background 0.2s ease;
}
.rs-hero-card__row:hover {
    background: hsl(var(--muted) / 0.5);
}

.rs-hero-card__name {
    flex: 1;
    font-family: var(--font-heading, 'Rajdhani', sans-serif);
    font-size: 0.95rem;
    font-weight: 700;
    color: hsl(var(--foreground));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rs-hero-card__bonus {
    font-size: 0.78rem;
    font-weight: 600;
    color: hsl(var(--success, 142 76% 36%));
    white-space: nowrap;
}

.rs-hero-card__rating {
    font-size: 0.82rem;
    font-weight: 800;
    color: hsl(var(--primary));
    flex-shrink: 0;
}

/* Static variant: stats grid */
.rs-hero-card--static .rs-hero-card__stat {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1.1rem;
    border-bottom: 1px solid hsl(var(--border) / 0.4);
}
.rs-hero-card__stat-num {
    font-family: var(--font-heading, 'Rajdhani', sans-serif);
    font-size: 1.4rem;
    font-weight: 800;
    color: hsl(var(--primary));
    min-width: 4.5rem;
}
.rs-hero-card__stat-label {
    font-size: 0.85rem;
    color: hsl(var(--muted-foreground));
}

.rs-hero-card__footer {
    padding: 0.8rem 1.1rem;
    background: hsl(var(--muted) / 0.3);
}
.rs-hero-card__footer a {
    font-size: 0.78rem;
    font-weight: 600;
    color: hsl(var(--primary));
    text-decoration: none;
    transition: opacity 0.2s ease;
}
.rs-hero-card__footer a:hover { opacity: 0.75; }

/* Top-rated rank badge */
.rs-rank {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    font-size: 0.8rem;
    font-weight: 800;
    font-family: var(--font-heading, 'Rajdhani', sans-serif);
    flex-shrink: 0;
}
.rs-rank-1 { background: #F59E0B; color: #000; }
.rs-rank-2 { background: hsl(var(--muted)); color: hsl(var(--foreground)); }
.rs-rank-3 { background: #CD7F32; color: #fff; }
.rs-rank-n { background: hsl(var(--border)); color: hsl(var(--muted-foreground)); }

/* Newsletter section */
#newsletter {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
}
.rs-newsletter-input {
    flex: 1;
    min-width: 0;
    border: 1px solid hsl(var(--border));
    border-radius: 0.5rem;
    background: hsl(var(--background));
    color: hsl(var(--foreground));
    padding: 0.65rem 1rem;
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.2s ease;
}
.rs-newsletter-input:focus {
    border-color: hsl(var(--primary) / 0.6);
}
.rs-newsletter-input::placeholder {
    color: hsl(var(--muted-foreground));
}

/* line-clamp polyfill */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


/* ── 9. Responsive tweaks ─────────────────────────────────────── */

@media (max-width: 640px) {
    /* Hero stats minder padding op mobiel */
    #hero .sm\:grid-cols-3 > div,
    main > section:first-child .sm\:grid-cols-3 > div {
        padding: 0.85rem;
    }

    /* Minder agressieve kaart hover op touch */
    #bonus-codes .card-hover:hover {
        transform: translateY(-3px) scale(1.005) !important;
    }
    #cs2-guide .card-hover:hover {
        transform: translateY(-3px) !important;
    }

    /* Ribbon kleiner */
    .rs-ribbon {
        font-size: 0.58rem;
        padding: 0.18rem 0.5rem 0.18rem 0.42rem;
    }

    /* View all knop volle breedte */
    .rs-view-all-btn {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    /* Gradient text valt niet weg op kleine schermen */
    .text-gradient-red {
        background-size: 200% auto !important;
    }
}


/* ══════════════════════════════════════════════════════════════════
   HERO REDESIGN v3  –  full-bleed right image layout
   ══════════════════════════════════════════════════════════════════ */

/* ── H1: groter en scherper ──────────────────────────────────────── */
#hero h1 {
    font-size: clamp(2.6rem, 5.5vw, 4.25rem) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.02em !important;
}

/* ── Full-height right image (absolute, fades left into background) ─ */
#hero {
    min-height: clamp(640px, 68vw, 900px);
    display: flex;
    align-items: center;
    position: relative;
}

.rs-hero-fullimg {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: clamp(460px, 62vw, 1050px);
    z-index: 2;
    pointer-events: none;
}

.rs-hero-fullimg img {
    position: absolute !important;
    right: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    height: 100% !important;
    width: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: right center !important;
    display: block !important;
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%,
        rgba(0, 0, 0, 0.25) 12%,
        rgba(0, 0, 0, 0.65) 28%,
        rgba(0, 0, 0, 0.90) 45%,
        black 58%
    ) !important;
    mask-image: linear-gradient(
        to right,
        transparent 0%,
        rgba(0, 0, 0, 0.25) 12%,
        rgba(0, 0, 0, 0.65) 28%,
        rgba(0, 0, 0, 0.90) 45%,
        black 58%
    ) !important;
}

/* Ambient red glow that bleeds left from image area */
.rs-hero-img-glow {
    position: absolute;
    right: clamp(60px, 14%, 220px);
    top: 50%;
    transform: translateY(-50%);
    width: clamp(340px, 52vw, 880px);
    height: 90%;
    background: radial-gradient(ellipse at center, rgba(180, 25, 15, 0.60) 0%, transparent 65%);
    pointer-events: none;
    z-index: 1;
    filter: blur(60px);
}

/* Tablet: slightly smaller image + more breathing room */
@media (max-width: 1023px) and (min-width: 768px) {
    #hero {
        min-height: clamp(520px, 70vw, 680px);
    }
    .rs-hero-fullimg {
        width: clamp(280px, 45vw, 480px);
    }
}

/* ── Single-column content when image is on right ────────────────── */
.rs-hero-content-col {
    position: relative;
    z-index: 10;
    max-width: 50%;
}

/* ── Trust badges: vertical list ─────────────────────────────────── */
.rs-trust-pills {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.7rem;
    margin-top: 1.75rem;
}

.rs-trust-pill {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 0.6rem;
    background: transparent;
    border: none;
    padding: 0;
    font-size: 0.9rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.72);
    white-space: nowrap;
    line-height: 1.4;
}

/* Tailwind preflight reset SVG naar display:block — override */
.rs-trust-pill svg {
    display: inline !important;
    flex-shrink: 0;
    width: 15px;
    height: 15px;
    color: hsl(var(--primary));
    vertical-align: middle;
}

.rs-trust-pill:hover {
    color: rgba(255, 255, 255, 0.95);
    background: transparent;
    border: none;
}

/* ── Ghost CTA knop (secundair) ──────────────────────────────────── */
.rs-cta-ghost {
    border: 2px solid rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.88);
    background: transparent;
}

.rs-cta-ghost:hover {
    border-color: rgba(231, 76, 60, 0.65) !important;
    color: hsl(var(--primary)) !important;
    background: rgba(231, 76, 60, 0.06) !important;
    box-shadow: 0 0 20px rgba(231, 76, 60, 0.12);
}

.rs-cta-ghost svg {
    display: inline !important;
    transition: transform 0.25s cubic-bezier(.34, 1.56, .64, 1);
}

.rs-cta-ghost:hover svg {
    transform: translateX(4px);
}

/* ── Mobiel: image verbergen, content full width ─────────────────── */
@media (max-width: 767px) {
    .rs-hero-fullimg {
        position: relative;
        width: 100%;
        height: 260px;
        margin-bottom: 1.5rem;
    }
    .rs-hero-fullimg img {
        object-position: center top;
        -webkit-mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
        mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
    }
    .rs-hero-img-glow {
        display: none;
    }
    .rs-hero-content-col {
        max-width: 100%;
    }
    /* Fallback grid: card boven tekst */
    .rs-hero-grid > div:first-child { order: 2; }
    .rs-hero-right-col { order: 1; }
    .rs-hero-right-col .rs-hero-card {
        max-width: 420px;
        margin: 0 auto;
    }
}