/* ===== LETTERTYPE: Poppins zelf gehost (geen Google Fonts) ===== */
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/poppins-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/poppins-400-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/poppins-600-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/poppins-600-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/poppins-700-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/poppins-700-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 800; font-display: swap; src: url('/fonts/poppins-800-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 800; font-display: swap; src: url('/fonts/poppins-800-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 900; font-display: swap; src: url('/fonts/poppins-900-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 900; font-display: swap; src: url('/fonts/poppins-900-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* Reserve met de maten van Poppins: als Arial even invalt, verspringt er niets. Enkel Latijns schrift,
   zodat Cyrillisch (UA) zijn eigen systeemlettertype houdt. */
@font-face { font-family: 'Poppins Fallback'; font-weight: 100 599; src: local('Arial'), local('ArialMT'); size-adjust: 112.21%; ascent-override: 93.58%; descent-override: 31.19%; line-gap-override: 8.91%; unicode-range: U+0000-024F, U+0259, U+1E00-1EFF, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212, U+2215; }
@font-face { font-family: 'Poppins Fallback'; font-weight: 600 799; src: local('Arial Bold'), local('Arial-BoldMT'); size-adjust: 107.27%; ascent-override: 97.88%; descent-override: 32.63%; line-gap-override: 9.32%; unicode-range: U+0000-024F, U+0259, U+1E00-1EFF, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212, U+2215; }
@font-face { font-family: 'Poppins Fallback'; font-weight: 800 900; src: local('Arial Black'), local('Arial-Black'); size-adjust: 94.45%; ascent-override: 111.17%; descent-override: 37.06%; line-gap-override: 10.59%; unicode-range: U+0000-024F, U+0259, U+1E00-1EFF, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212, U+2215; }

/* ===== VARIABLES ===== */
:root {
    --bg: #0d0d1a;
    --bg-card: #16162a;
    --bg-card-hover: #1e1e38;
    --surface: #1a1a30;
    --primary: #ff6b35;
    --primary-light: #ff8c5a;
    --primary-dark: #e55a2b;
    --primary-glow: rgba(255, 107, 53, 0.2);
    --purple: #8b5cf6;
    --purple-glow: rgba(139, 92, 246, 0.15);
    --cyan: #22d3ee;
    --pink: #f472b6;
    --green: #34d399;
    --yellow: #fbbf24;
    --text: #f1f1f8;
    --text-secondary: #9898b8;
    --text-muted: #8a8aa8; /* was #6b6b88: haalde de WCAG-contrastnorm niet */
    --adv-pip: #23784a;
    --adv-noor: #b9472f;
    --adv-foxy: #4767a0;
    --border: #2a2a45;
    --radius: 16px;
    --radius-sm: 10px;
    --max-width: 1140px;
}

/* ===== RESET ===== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
    font-family: 'Poppins', 'Poppins Fallback', sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
    overflow-x: hidden;
    max-width: 100%;
}
h1, h2, h3, h4, p { overflow-wrap: break-word; word-wrap: break-word; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
.container { max-width: var(--max-width); margin: 0 auto; padding: 0 24px; }

/* ===== SECTION HEADERS ===== */
.section-header { text-align: center; max-width: 600px; margin: 0 auto 3.5rem; }
.section-header h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 800; margin-bottom: 0.5rem; }
.section-header p { color: var(--text-secondary); font-size: 1.05rem; }

.section-tag {
    display: inline-block;
    background: var(--primary-glow);
    color: var(--primary);
    padding: 5px 14px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
    border: 1px solid rgba(255, 107, 53, 0.25);
}

/* ===== BUTTONS ===== */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 26px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 0.95rem;
    border: none;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    font-family: 'Poppins', 'Poppins Fallback', sans-serif;
    justify-content: center;
    text-align: center;
}

.btn--primary {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff;
    box-shadow: 0 4px 20px var(--primary-glow);
}

.btn--primary:hover {
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 8px 30px rgba(255, 107, 53, 0.4);
}

.btn--primary:active {
    transform: translateY(0) scale(0.98);
}

.btn--ghost {
    background: transparent;
    color: var(--text-secondary);
    border: 2px solid var(--border);
}

.btn--ghost:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.btn--play {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff;
    padding: 8px 20px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 0.9rem;
    box-shadow: 0 2px 10px var(--primary-glow);
    white-space: nowrap;
    flex-shrink: 0;
}

.btn--play:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 20px var(--primary-glow);
}

.btn--lg { padding: 16px 36px; font-size: 1.05rem; }

/* ===== HEADER ===== */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: rgba(13, 13, 26, 0.9);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border);
}

.header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 68px;
    gap: 24px;
}

.header__logo {
    display: flex;
    align-items: center;
    gap: 2px;
    font-size: 1.3rem;
    font-weight: 900;
}

.logo-foxy { color: var(--primary); }
.logo-games { color: var(--text); }

/* Het menu draagt ook de taalkeuze: op desktop staat die rechts van de links,
   in het gsm-menu onderaan. */
.header__nav { display: flex; align-items: center; gap: 6px; }
.header__nav ul { display: flex; gap: 2px; }

.header__nav a {
    padding: 8px 13px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-secondary);
    transition: all 0.2s;
    white-space: nowrap;
}

.header__nav a:hover,
.header__nav a.active {
    color: var(--primary);
    background: var(--primary-glow);
}

/* Language switcher */
.lang-switch {
    display: flex;
    align-items: center;
    gap: 2px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 3px;
    margin-left: 6px;
    flex-shrink: 0;
}

.lang-switch a {
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-muted);
    transition: all 0.2s;
    text-transform: uppercase;
    white-space: nowrap;
}

.lang-switch a:hover {
    color: var(--text);
}

.lang-switch a.active {
    background: var(--primary);
    color: #fff;
}

.header__toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    position: relative;
    z-index: 1001;
}

.header__toggle span {
    width: 22px;
    height: 2px;
    background: var(--text);
    border-radius: 2px;
    transition: transform 0.25s ease, opacity 0.2s ease, background 0.2s ease;
    transform-origin: center;
}

.header__toggle.is-open span { background: var(--primary); }
.header__toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.header__toggle.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.header__toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(2px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
    z-index: 998;
}
.nav-backdrop.is-visible {
    opacity: 1;
    pointer-events: auto;
}

/* ===== HERO ===== */
.hero {
    padding: 140px 0 100px;
    min-height: 730px;
    position: relative;
    overflow: hidden;
    background: radial-gradient(ellipse at 20% 50%, rgba(255, 107, 53, 0.06) 0%, transparent 50%),
                radial-gradient(ellipse at 80% 20%, rgba(139, 92, 246, 0.05) 0%, transparent 50%),
                var(--bg);
}

/* Floating particles */
.hero__particles {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.particle {
    position: absolute;
    border-radius: 50%;
    opacity: 0.15;
    animation: float 20s infinite;
}

.particle:nth-child(1) { width: 300px; height: 300px; background: var(--primary); top: -10%; left: -5%; animation-delay: 0s; }
.particle:nth-child(2) { width: 200px; height: 200px; background: var(--purple); top: 60%; right: -5%; animation-delay: -5s; }
.particle:nth-child(3) { width: 150px; height: 150px; background: var(--cyan); bottom: 10%; left: 30%; animation-delay: -10s; }
.particle:nth-child(4) { width: 100px; height: 100px; background: var(--pink); top: 20%; right: 20%; animation-delay: -3s; }
.particle:nth-child(5) { width: 80px; height: 80px; background: var(--yellow); top: 70%; left: 10%; animation-delay: -7s; }
.particle:nth-child(6) { width: 120px; height: 120px; background: var(--green); top: 10%; right: 40%; animation-delay: -12s; }

@keyframes float {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25% { transform: translate(30px, -40px) scale(1.05); }
    50% { transform: translate(-20px, 20px) scale(0.95); }
    75% { transform: translate(40px, 10px) scale(1.02); }
}

.hero__inner {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 48px;
    align-items: center;
    position: relative;
    z-index: 1;
}

.hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--primary-glow);
    border: 1px solid rgba(255, 107, 53, 0.25);
    padding: 8px 18px;
    border-radius: 30px;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 20px;
}

.hero h1 {
    font-size: clamp(2.4rem, 5.5vw, 3.6rem);
    font-weight: 900;
    line-height: 1.1;
    margin-bottom: 20px;
}

.text-glow {
    color: var(--primary);
    text-shadow: 0 0 40px var(--primary-glow);
}

.hero__text {
    font-size: 1.1rem;
    color: var(--text-secondary);
    margin-bottom: 32px;
    max-width: 500px;
    line-height: 1.7;
    min-height: 3.4em;
}

/* Hero tagline animation */
.hero-tagline {
    color: var(--primary);
    text-shadow: 0 0 40px var(--primary-glow);
    transition: color 0.5s ease, text-shadow 0.5s ease, opacity 0.3s ease;
}

/* Dots - hidden */
.hero-dots {
    display: none;
}

.hero__cta {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 28px;
}

/* Active foxy card highlight */
.foxy-card.spotlight {
    z-index: 10 !important;
    transform: scale(1.12) rotate(0deg) !important;
}

.foxy-card--1.spotlight { border-color: var(--primary); box-shadow: 0 0 35px var(--primary-glow); }
.foxy-card--2.spotlight { border-color: var(--purple); box-shadow: 0 0 35px var(--purple-glow); }
.foxy-card--3.spotlight { border-color: var(--pink); box-shadow: 0 0 35px rgba(244, 114, 182, 0.2); }
.foxy-card--4.spotlight { border-color: var(--green); box-shadow: 0 0 35px rgba(52, 211, 153, 0.2); }

.hero__platforms {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.hero__platforms span {
    font-size: 0.8rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--surface);
    padding: 6px 14px;
    border-radius: 20px;
    border: 1px solid var(--border);
}

.free-badge {
    color: var(--green) !important;
    border-color: rgba(52, 211, 153, 0.3) !important;
    background: rgba(52, 211, 153, 0.08) !important;
}

/* Floating game cards */
.hero__visual {
    position: relative;
    height: 400px;
}

.foxy-card {
    position: absolute;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    text-align: center;
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: default;
    width: 150px;
}

.foxy-card:hover {
    transform: scale(1.1) rotate(0deg) !important;
    z-index: 10;
    box-shadow: 0 15px 50px rgba(0,0,0,0.4);
}

.foxy-card__emoji { font-size: 2.5rem; margin-bottom: 8px; }
.foxy-card span { font-size: 0.85rem; font-weight: 700; color: var(--text-secondary); }

.foxy-card--1 { top: 20px; left: 50px; transform: rotate(-5deg); border-color: rgba(255, 107, 53, 0.3); }
.foxy-card--2 { top: 60px; right: 20px; transform: rotate(4deg); border-color: rgba(139, 92, 246, 0.3); }
.foxy-card--3 { bottom: 80px; left: 20px; transform: rotate(3deg); border-color: rgba(52, 211, 153, 0.3); }
.foxy-card--4 { bottom: 20px; right: 60px; transform: rotate(-6deg); border-color: rgba(244, 114, 182, 0.3); }

.foxy-card--1:hover { border-color: var(--primary); box-shadow: 0 0 30px var(--primary-glow); }
.foxy-card--2:hover { border-color: var(--purple); box-shadow: 0 0 30px var(--purple-glow); }
.foxy-card--3:hover { border-color: var(--green); box-shadow: 0 0 30px rgba(52, 211, 153, 0.2); }
.foxy-card--4:hover { border-color: var(--pink); box-shadow: 0 0 30px rgba(244, 114, 182, 0.2); }

/* ===== FOXY QUOTE ===== */
.foxy-quote {
    padding: 40px 0;
    background: var(--surface);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.foxy-quote__inner {
    display: flex;
    align-items: center;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

.foxy-quote__avatar { font-size: 2.5rem; }

.foxy-quote p {
    font-size: 1.2rem;
    font-style: italic;
    color: var(--text-secondary);
}

.foxy-quote__name {
    font-size: 0.9rem;
    color: var(--primary);
    font-weight: 700;
}

/* ===== GAMES ===== */
.games { padding: 100px 0; }

.games__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.game-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 36px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
    display: block;
    color: var(--text);
}

.game-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    opacity: 0;
    transition: opacity 0.3s;
}

.game-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 16px 50px rgba(0,0,0,0.3);
}

.game-card:hover::before { opacity: 1; }

.game-card--quiz::before { background: linear-gradient(90deg, var(--primary), var(--yellow)); }
.game-card--music::before { background: linear-gradient(90deg, var(--purple), var(--pink)); }
.game-card--explore::before { background: linear-gradient(90deg, var(--green), var(--cyan)); }
.game-card--act::before { background: linear-gradient(90deg, var(--pink), var(--purple)); }

.game-card--quiz:hover { border-color: rgba(255, 107, 53, 0.3); }
.game-card--music:hover { border-color: rgba(139, 92, 246, 0.3); }
.game-card--explore:hover { border-color: rgba(52, 211, 153, 0.3); }
.game-card--act:hover { border-color: rgba(244, 114, 182, 0.3); }

.game-card__status {
    display: inline-block;
    background: var(--green);
    color: var(--bg);
    padding: 3px 12px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.game-card__status--soon {
    background: var(--text-muted);
    color: var(--text);
}

.status-pill {
    display: inline-block;
    vertical-align: middle;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    padding: 3px 9px;
    border-radius: 999px;
    text-transform: uppercase;
    margin-left: 8px;
    line-height: 1.4;
}
.status-pill--alpha { background: rgba(239, 68, 68, 0.15); color: #ef4444; }
.status-pill--beta  { background: rgba(234, 179, 8, 0.18); color: #eab308; }
.status-pill--live  { background: rgba(34, 197, 94, 0.15); color: #22c55e; }
.status-pill--soon  { background: var(--surface); color: var(--text-muted); border: 1px solid var(--border); padding: 2px 8px; }

.game-card__emoji { font-size: 2.5rem; margin-bottom: 12px; }

.game-card h3 {
    font-size: 1.4rem;
    font-weight: 800;
    margin-bottom: 8px;
}

.game-card p {
    color: var(--text-secondary);
    font-size: 0.95rem;
    margin-bottom: 16px;
    line-height: 1.6;
}

.game-card__tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.game-card__tags span {
    background: var(--surface);
    color: var(--text-secondary);
    padding: 4px 12px;
    border-radius: 16px;
    font-size: 0.8rem;
    font-weight: 600;
    border: 1px solid var(--border);
}

.game-card__link {
    color: var(--primary);
    font-weight: 700;
    font-size: 0.95rem;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: gap 0.3s;
}

.game-card:hover .game-card__link { gap: 12px; }

/* ===== FEATURES ===== */
.features { padding: 100px 0; background: var(--surface); }

.features__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.features__grid--2col { grid-template-columns: repeat(2, 1fr); }

.feature {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 28px;
    transition: all 0.3s ease;
    text-align: center;
}

.feature:hover {
    transform: translateY(-5px);
    border-color: var(--primary);
    box-shadow: 0 0 30px var(--primary-glow);
}

.feature__icon {
    font-size: 2.2rem;
    margin-bottom: 14px;
}

.feature h4 {
    font-size: 1.05rem;
    margin-bottom: 6px;
}

.feature p {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

/* ===== HOW TO ===== */
.howto { padding: 100px 0; }

.howto__steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.step {
    text-align: center;
    padding: 36px 24px;
    background: var(--bg-card);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    transition: all 0.3s ease;
}

.step:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 40px rgba(0,0,0,0.2);
}

.step__number {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    font-weight: 900;
    margin: 0 auto 16px;
    box-shadow: 0 4px 15px var(--primary-glow);
}

.step h4 { font-size: 1.1rem; margin-bottom: 8px; }
.step p { color: var(--text-secondary); font-size: 0.9rem; }

/* ===== FAQ ===== */
.faq { padding: 80px 0 40px; }
.faq__list { max-width: 780px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.faq__item { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 18px 22px; transition: border-color .2s, background .2s; }
.faq__item[open] { border-color: var(--primary); background: var(--bg-card-hover); }
.faq__item summary { font-weight: 700; font-size: 1.05rem; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
/* de vraag is een H3 (documentstructuur), maar ziet eruit als voorheen */
.faq__item summary h3 { font: inherit; margin: 0; color: inherit; letter-spacing: inherit; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "+"; font-size: 1.5rem; color: var(--primary); font-weight: 800; line-height: 1; transition: transform .2s; }
.faq__item[open] summary::after { content: "−"; }
.faq__item p { margin-top: 12px; color: var(--text-secondary); font-size: 0.98rem; line-height: 1.6; }
.faq__item a { color: var(--primary); font-weight: 600; }
.faq__item a:hover { text-decoration: underline; }

/* ===== CTA ===== */
.cta { padding: 80px 0; }

.cta__box {
    background: linear-gradient(135deg, rgba(255, 107, 53, 0.1) 0%, rgba(139, 92, 246, 0.08) 100%);
    border: 1px solid rgba(255, 107, 53, 0.2);
    border-radius: 24px;
    padding: 64px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.cta__emoji { font-size: 3rem; display: block; margin-bottom: 16px; }
.cta__box h2 { font-size: clamp(1.6rem, 3.5vw, 2.2rem); font-weight: 800; margin-bottom: 12px; }
.cta__box p { color: var(--text-secondary); margin-bottom: 28px; font-size: 1.05rem; }

/* ===== PRICING ===== */
.pricing-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    max-width: 800px;
    margin: 0 auto;
}

.compare-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

@media (max-width: 768px) {
    .pricing-grid {
        grid-template-columns: 1fr;
        max-width: 400px;
    }

    .compare-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 480px) {
    .compare-grid {
        grid-template-columns: 1fr;
        max-width: 280px;
        margin: 0 auto;
    }
}

/* ===== FAQ ===== */
.faq-item summary { list-style: none; }
/* links in een FAQ-antwoord moeten als link herkenbaar zijn (bezoekers en Google), zoals bij .faq__item */
.faq-item p a { color: var(--primary); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.faq-item p a:hover { text-decoration-thickness: 2px; }
.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary h3 {
    font-size: inherit;
    font-weight: inherit;
    margin: 0;
    display: inline;
}

.faq-item summary::after {
    content: '+';
    font-size: 1.4rem;
    color: var(--primary);
    font-weight: 300;
    transition: transform 0.3s;
    float: right;
}

.faq-item[open] summary::after {
    transform: rotate(45deg);
}

/* ===== FOOTER ===== */
.footer {
    background: var(--surface);
    border-top: 1px solid var(--border);
    padding-top: 40px;
}

.footer__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--border);
}

.footer__brand p { color: var(--text-muted); font-size: 0.85rem; margin-top: 6px; }

.footer__links { display: flex; gap: 20px; }
.footer__links a { color: var(--text-secondary); font-size: 0.9rem; transition: color 0.2s; }
.footer__links a:hover { color: var(--primary); }

.footer__social { display: flex; gap: 14px; }
.footer__social a { color: var(--text-muted); font-size: 1.1rem; transition: color 0.2s; }
.footer__social a:hover { color: var(--primary); }

.footer__bottom {
    padding: 20px 0;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.8rem;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
    .hero__inner { grid-template-columns: 1fr; }
    .hero__visual { display: none; }
    .games__grid { grid-template-columns: 1fr; }
}

/* Menu achter de ☰-knop zodra het niet meer op één regel past. De taalkeuze
   gaat mee in het paneel: in de balk zelf duwde ze de knop op gsm buiten beeld.
   Dicht = visibility hidden, zodat Tab niet door verborgen links loopt. */
@media (max-width: 1079px) {
    .header__toggle { display: flex; }
    .header__inner { gap: 12px; }
    .header__logo { margin-right: auto; }
    .header__nav {
        position: fixed;
        top: 0;
        right: 0;
        width: 300px;
        max-width: 86vw;
        height: 100vh;
        height: 100dvh;
        flex-direction: column;
        align-items: stretch;
        gap: 24px;
        overflow-y: auto;
        background: var(--surface);
        border-left: 1px solid var(--border);
        padding: 84px 20px 32px;
        transform: translateX(100%);
        visibility: hidden;
        transition: transform 0.3s ease, visibility 0s linear 0.3s;
        z-index: 999;
    }
    .header__nav.open {
        transform: none;
        visibility: visible;
        transition: transform 0.3s ease;
    }
    .header__nav ul { flex-direction: column; gap: 4px; }
    .header__nav a { display: block; padding: 12px 14px; font-size: 1rem; }
    .header__nav .lang-switch { margin-left: 0; align-self: flex-start; }
    .header__nav .lang-switch a { padding: 8px 12px; }
}

@media (max-width: 560px) {
    .btn--play { display: none; }
}

@media (max-width: 768px) {
    .hero { padding: 110px 0 60px; }
    .hero h1 { font-size: 2rem; }
    .features__grid, .features__grid--2col { grid-template-columns: 1fr; }
    .howto__steps { grid-template-columns: 1fr; }
    .cta__box { padding: 40px 24px; }
    .footer__inner { flex-direction: column; text-align: center; }
    .footer__links { justify-content: center; flex-wrap: wrap; }
    .footer__links a { font-size: 0.85rem; }
}

@media (max-width: 480px) {
    .container { padding: 0 16px; }
    .hero h1 { font-size: 1.7rem; }
    .hero__badge { font-size: 0.75rem; padding: 6px 14px; }
    .foxy-quote p { font-size: 1rem; }
    .games { padding: 60px 0; }
    .features { padding: 60px 0; }
    .howto { padding: 60px 0; }
    .game-card { padding: 24px; }
    .cta__box { padding: 32px 20px; }
}

/* ===== SHARE BUTTONS ===== */
.share {
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.share__label {
    color: var(--text-muted);
    font-size: 0.85rem;
    letter-spacing: 0.02em;
}
.share__buttons {
    display: inline-flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}
.share__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.share__btn:hover {
    transform: translateY(-2px);
    border-color: var(--primary);
    background: var(--bg-card-hover);
}
.share__btn i { font-size: 1rem; }
.share__btn--wa i { color: #25D366; }
.share__btn--fb i { color: #1877F2; }
.share__btn--copy i { color: var(--text-secondary); }
.share__btn.is-copied { border-color: var(--green); }
.share__btn.is-copied i { color: var(--green); }

/* ===== SOCIAL COMING SOON POPUP ===== */
.foxy-popup {
    position: fixed;
    inset: 0;
    background: rgba(13, 13, 26, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
    padding: 24px;
}
.foxy-popup.is-open { opacity: 1; pointer-events: auto; }
.foxy-popup__card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 32px 28px;
    max-width: 440px;
    width: 100%;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--primary-glow);
    transform: translateY(20px) scale(0.96);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.foxy-popup.is-open .foxy-popup__card { transform: translateY(0) scale(1); }
.foxy-popup__emoji { font-size: 3rem; margin-bottom: 12px; line-height: 1; }
.foxy-popup__title {
    font-size: 1.4rem;
    font-weight: 800;
    margin-bottom: 8px;
    color: var(--text);
}
.foxy-popup__title span { color: var(--primary); }
.foxy-popup__quote {
    color: var(--text-secondary);
    font-style: italic;
    font-size: 1rem;
    margin-bottom: 20px;
    line-height: 1.5;
}
.foxy-popup__quote strong { color: var(--text); font-weight: 700; }
.foxy-popup__hint {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin-bottom: 20px;
}
.foxy-popup__close {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: var(--radius-sm);
    background: var(--primary);
    color: #fff;
    border: none;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}
.foxy-popup__close:hover { background: var(--primary-dark); transform: translateY(-1px); }

/* ===== ICOONTJES (FONT AWESOME ALS SVG-MASKER) START ===== */
/* Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com
   License - https://fontawesome.com/license/free (Icons: CC BY 4.0)
   Gemaakt met tools/site_tests/make_fa_icons.py; niet met de hand aanpassen, script opnieuw draaien.
   De vorm is een masker, de kleur komt van de tekstkleur (currentColor), zoals bij het oude lettertype.
   Zelfde vak als het oude lettertype: 1.25em breed, 1em hoog, basislijn op 7/8 (het lege ::before-blokje
   zorgt daarvoor; zonder basislijn zakte het gekleurde vlak rond een icoon 4 px). min-width per icoon =
   breedte van het oude letterteken, zodat een icoon in een smalle flexrij niet verder krimpt dan vroeger. */
i.fa-solid, i.fa-brands, i.fa-regular {
    display: inline-block;
    width: 1.25em;
    height: 1em;
    line-height: 0;
    font-style: normal;
    background-color: currentColor;
    -webkit-mask: var(--fa-ico) center / contain no-repeat;
    mask: var(--fa-ico) center / contain no-repeat;
}
i.fa-solid::before, i.fa-brands::before, i.fa-regular::before { content: ""; display: inline-block; height: 0.875em; }
.fa-android { min-width: 1.125em; --fa-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M420.55,301.93a24,24,0,1,1,24-24,24,24,0,0,1-24,24m-265.1,0a24,24,0,1,1,24-24,24,24,0,0,1-24,24m273.7-144.48,47.94-83a10,10,0,1,0-17.27-10h0l-48.54,84.07a301.25,301.25,0,0,0-246.56,0L116.18,64.45a10,10,0,1,0-17.27,10h0l47.94,83C64.53,202.22,8.24,285.55,0,384H576c-8.24-98.45-64.54-181.78-146.85-226.55'/%3E%3C/svg%3E"); }
.fa-angle-right { min-width: 0.625em; --fa-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M278.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-160 160c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L210.7 256 73.4 118.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l160 160z'/%3E%3C/svg%3E"); }
.fa-apple { min-width: 0.75em; --fa-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M318.7 268.7c-.2-36.7 16.4-64.4 50-84.8-18.8-26.9-47.2-41.7-84.7-44.6-35.5-2.8-74.3 20.7-88.5 20.7-15 0-49.4-19.7-76.4-19.7C63.3 141.2 4 184.8 4 273.5q0 39.3 14.4 81.2c12.8 36.7 59 126.7 107.2 125.2 25.2-.6 43-17.9 75.8-17.9 31.8 0 48.3 17.9 76.4 17.9 48.6-.7 90.4-82.5 102.6-119.3-65.2-30.7-61.7-90-61.7-91.9zm-56.6-164.2c27.3-32.4 24.8-61.9 24-72.5-24.1 1.4-52 16.4-67.9 34.9-17.5 19.8-27.8 44.3-25.6 71.9 26.1 2 49.9-11.4 69.5-34.3z'/%3E%3C/svg%3E"); }
.fa-arrow-down { min-width: 0.75em; --fa-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M169.4 470.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 370.8 224 64c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 306.7L54.6 265.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z'/%3E%3C/svg%3E"); }
.fa-arrow-right { min-width: 0.875em; --fa-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z'/%3E%3C/svg%3E"); }
.fa-bolt { min-width: 0.875em; --fa-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M349.4 44.6c5.9-13.7 1.5-29.7-10.6-38.5s-28.6-8-39.9 1.8l-256 224c-10 8.8-13.6 22.9-8.9 35.3S50.7 288 64 288H175.5L98.6 467.4c-5.9 13.7-1.5 29.7 10.6 38.5s28.6 8 39.9-1.8l256-224c10-8.8 13.6-22.9 8.9-35.3s-16.6-20.7-30-20.7H272.5L349.4 44.6z'/%3E%3C/svg%3E"); }
.fa-check { min-width: 0.875em; --fa-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z'/%3E%3C/svg%3E"); }
.fa-circle-info { min-width: 1em; --fa-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336h24V272H216c-13.3 0-24-10.7-24-24s10.7-24 24-24h48c13.3 0 24 10.7 24 24v88h8c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z'/%3E%3C/svg%3E"); }
.fa-clock { min-width: 1em; --fa-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 0a256 256 0 1 1 0 512A256 256 0 1 1 256 0zM232 120V256c0 8 4 15.5 10.7 20l96 64c11 7.4 25.9 4.4 33.3-6.7s4.4-25.9-6.7-33.3L280 243.2V120c0-13.3-10.7-24-24-24s-24 10.7-24 24z'/%3E%3C/svg%3E"); }
.fa-discord { min-width: 1.25em; --fa-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath d='M524.531,69.836a1.5,1.5,0,0,0-.764-.7A485.065,485.065,0,0,0,404.081,32.03a1.816,1.816,0,0,0-1.923.91,337.461,337.461,0,0,0-14.9,30.6,447.848,447.848,0,0,0-134.426,0,309.541,309.541,0,0,0-15.135-30.6,1.89,1.89,0,0,0-1.924-.91A483.689,483.689,0,0,0,116.085,69.137a1.712,1.712,0,0,0-.788.676C39.068,183.651,18.186,294.69,28.43,404.354a2.016,2.016,0,0,0,.765,1.375A487.666,487.666,0,0,0,176.02,479.918a1.9,1.9,0,0,0,2.063-.676A348.2,348.2,0,0,0,208.12,430.4a1.86,1.86,0,0,0-1.019-2.588,321.173,321.173,0,0,1-45.868-21.853,1.885,1.885,0,0,1-.185-3.126c3.082-2.309,6.166-4.711,9.109-7.137a1.819,1.819,0,0,1,1.9-.256c96.229,43.917,200.41,43.917,295.5,0a1.812,1.812,0,0,1,1.924.233c2.944,2.426,6.027,4.851,9.132,7.16a1.884,1.884,0,0,1-.162,3.126,301.407,301.407,0,0,1-45.89,21.83,1.875,1.875,0,0,0-1,2.611,391.055,391.055,0,0,0,30.014,48.815,1.864,1.864,0,0,0,2.063.7A486.048,486.048,0,0,0,610.7,405.729a1.882,1.882,0,0,0,.765-1.352C623.729,277.594,590.933,167.465,524.531,69.836ZM222.491,337.58c-28.972,0-52.844-26.587-52.844-59.239S193.056,219.1,222.491,219.1c29.665,0,53.306,26.82,52.843,59.239C275.334,310.993,251.924,337.58,222.491,337.58Zm195.38,0c-28.971,0-52.843-26.587-52.843-59.239S388.437,219.1,417.871,219.1c29.667,0,53.307,26.82,52.844,59.239C470.715,310.993,447.538,337.58,417.871,337.58Z'/%3E%3C/svg%3E"); }
.fa-envelope { min-width: 1em; --fa-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48H48zM0 176V384c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V176L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z'/%3E%3C/svg%3E"); }
.fa-facebook { min-width: 1em; --fa-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M512 256C512 114.6 397.4 0 256 0S0 114.6 0 256C0 376 82.7 476.8 194.2 504.5V334.2H141.4V256h52.8V222.3c0-87.1 39.4-127.5 125-127.5c16.2 0 44.2 3.2 55.7 6.4V172c-6-.6-16.5-1-29.6-1c-42 0-58.2 15.9-58.2 57.2V256h83.6l-14.4 78.2H287V510.1C413.8 494.8 512 386.9 512 256h0z'/%3E%3C/svg%3E"); }
.fa-fire { min-width: 0.875em; --fa-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M159.3 5.4c7.8-7.3 19.9-7.2 27.7 .1c27.6 25.9 53.5 53.8 77.7 84c11-14.4 23.5-30.1 37-42.9c7.9-7.4 20.1-7.4 28 .1c34.6 33 63.9 76.6 84.5 118c20.3 40.8 33.8 82.5 33.8 111.9C448 404.2 348.2 512 224 512C98.4 512 0 404.1 0 276.5c0-38.4 17.8-85.3 45.4-131.7C73.3 97.7 112.7 48.6 159.3 5.4zM225.7 416c25.3 0 47.7-7 68.8-21c42.1-29.4 53.4-88.2 28.1-134.4c-4.5-9-16-9.6-22.5-2l-25.2 29.3c-6.6 7.6-18.5 7.4-24.7-.5c-16.5-21-46-58.5-62.8-79.8c-6.3-8-18.3-8.1-24.7-.1c-33.8 42.5-50.8 69.3-50.8 99.4C112 375.4 162.6 416 225.7 416z'/%3E%3C/svg%3E"); }
.fa-gamepad { min-width: 1.25em; --fa-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath d='M192 64C86 64 0 150 0 256S86 448 192 448H448c106 0 192-86 192-192s-86-192-192-192H192zM496 168a40 40 0 1 1 0 80 40 40 0 1 1 0-80zM392 304a40 40 0 1 1 80 0 40 40 0 1 1 -80 0zM168 200c0-13.3 10.7-24 24-24s24 10.7 24 24v32h32c13.3 0 24 10.7 24 24s-10.7 24-24 24H216v32c0 13.3-10.7 24-24 24s-24-10.7-24-24V280H136c-13.3 0-24-10.7-24-24s10.7-24 24-24h32V200z'/%3E%3C/svg%3E"); }
.fa-gift { min-width: 1em; --fa-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M190.5 68.8L225.3 128H224 152c-22.1 0-40-17.9-40-40s17.9-40 40-40h2.2c14.9 0 28.8 7.9 36.3 20.8zM64 88c0 14.4 3.5 28 9.6 40H32c-17.7 0-32 14.3-32 32v64c0 17.7 14.3 32 32 32H480c17.7 0 32-14.3 32-32V160c0-17.7-14.3-32-32-32H438.4c6.1-12 9.6-25.6 9.6-40c0-48.6-39.4-88-88-88h-2.2c-31.9 0-61.5 16.9-77.7 44.4L256 85.5l-24.1-41C215.7 16.9 186.1 0 154.2 0H152C103.4 0 64 39.4 64 88zm336 0c0 22.1-17.9 40-40 40H288h-1.3l34.8-59.2C329.1 55.9 342.9 48 357.8 48H360c22.1 0 40 17.9 40 40zM32 288V464c0 26.5 21.5 48 48 48H224V288H32zM288 512H432c26.5 0 48-21.5 48-48V288H288V512z'/%3E%3C/svg%3E"); }
.fa-globe { min-width: 1em; --fa-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M352 256c0 22.2-1.2 43.6-3.3 64H163.3c-2.2-20.4-3.3-41.8-3.3-64s1.2-43.6 3.3-64H348.7c2.2 20.4 3.3 41.8 3.3 64zm28.8-64H503.9c5.3 20.5 8.1 41.9 8.1 64s-2.8 43.5-8.1 64H380.8c2.1-20.6 3.2-42 3.2-64s-1.1-43.4-3.2-64zm112.6-32H376.7c-10-63.9-29.8-117.4-55.3-151.6c78.3 20.7 142 77.5 171.9 151.6zm-149.1 0H167.7c6.1-36.4 15.5-68.6 27-94.7c10.5-23.6 22.2-40.7 33.5-51.5C239.4 3.2 248.7 0 256 0s16.6 3.2 27.8 13.8c11.3 10.8 23 27.9 33.5 51.5c11.6 26 20.9 58.2 27 94.7zm-209 0H18.6C48.6 85.9 112.2 29.1 190.6 8.4C165.1 42.6 145.3 96.1 135.3 160zM8.1 192H131.2c-2.1 20.6-3.2 42-3.2 64s1.1 43.4 3.2 64H8.1C2.8 299.5 0 278.1 0 256s2.8-43.5 8.1-64zM194.7 446.6c-11.6-26-20.9-58.2-27-94.6H344.3c-6.1 36.4-15.5 68.6-27 94.6c-10.5 23.6-22.2 40.7-33.5 51.5C272.6 508.8 263.3 512 256 512s-16.6-3.2-27.8-13.8c-11.3-10.8-23-27.9-33.5-51.5zM135.3 352c10 63.9 29.8 117.4 55.3 151.6C112.2 482.9 48.6 426.1 18.6 352H135.3zm358.1 0c-30 74.1-93.6 130.9-171.9 151.6c25.5-34.2 45.2-87.7 55.3-151.6H493.4z'/%3E%3C/svg%3E"); }
.fa-house { min-width: 1.125em; --fa-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M575.8 255.5c0 18-15 32.1-32 32.1h-32l.7 160.2c0 2.7-.2 5.4-.5 8.1V472c0 22.1-17.9 40-40 40H456c-1.1 0-2.2 0-3.3-.1c-1.4 .1-2.8 .1-4.2 .1H416 392c-22.1 0-40-17.9-40-40V448 384c0-17.7-14.3-32-32-32H256c-17.7 0-32 14.3-32 32v64 24c0 22.1-17.9 40-40 40H160 128.1c-1.5 0-3-.1-4.5-.2c-1.2 .1-2.4 .2-3.6 .2H104c-22.1 0-40-17.9-40-40V360c0-.9 0-1.9 .1-2.8V287.6H32c-18 0-32-14-32-32.1c0-9 3-17 10-24L266.4 8c7-7 15-8 22-8s15 2 21 7L564.8 231.5c8 7 12 15 11 24z'/%3E%3C/svg%3E"); }
.fa-instagram { min-width: 0.875em; --fa-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z'/%3E%3C/svg%3E"); }
.fa-link { min-width: 1.25em; --fa-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath d='M579.8 267.7c56.5-56.5 56.5-148 0-204.5c-50-50-128.8-56.5-186.3-15.4l-1.6 1.1c-14.4 10.3-17.7 30.3-7.4 44.6s30.3 17.7 44.6 7.4l1.6-1.1c32.1-22.9 76-19.3 103.8 8.6c31.5 31.5 31.5 82.5 0 114L422.3 334.8c-31.5 31.5-82.5 31.5-114 0c-27.9-27.9-31.5-71.8-8.6-103.8l1.1-1.6c10.3-14.4 6.9-34.4-7.4-44.6s-34.4-6.9-44.6 7.4l-1.1 1.6C206.5 251.2 213 330 263 380c56.5 56.5 148 56.5 204.5 0L579.8 267.7zM60.2 244.3c-56.5 56.5-56.5 148 0 204.5c50 50 128.8 56.5 186.3 15.4l1.6-1.1c14.4-10.3 17.7-30.3 7.4-44.6s-30.3-17.7-44.6-7.4l-1.6 1.1c-32.1 22.9-76 19.3-103.8-8.6C74 372 74 321 105.5 289.5L217.7 177.2c31.5-31.5 82.5-31.5 114 0c27.9 27.9 31.5 71.8 8.6 103.9l-1.1 1.6c-10.3 14.4-6.9 34.4 7.4 44.6s34.4 6.9 44.6-7.4l1.1-1.6C433.5 260.8 427 182 377 132c-56.5-56.5-148-56.5-204.5 0L60.2 244.3z'/%3E%3C/svg%3E"); }
.fa-list-check { min-width: 1em; --fa-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M152.1 38.2c9.9 8.9 10.7 24 1.8 33.9l-72 80c-4.4 4.9-10.6 7.8-17.2 7.9s-12.9-2.4-17.6-7L7 113C-2.3 103.6-2.3 88.4 7 79s24.6-9.4 33.9 0l22.1 22.1 55.1-61.2c8.9-9.9 24-10.7 33.9-1.8zm0 160c9.9 8.9 10.7 24 1.8 33.9l-72 80c-4.4 4.9-10.6 7.8-17.2 7.9s-12.9-2.4-17.6-7L7 273c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l22.1 22.1 55.1-61.2c8.9-9.9 24-10.7 33.9-1.8zM224 96c0-17.7 14.3-32 32-32H480c17.7 0 32 14.3 32 32s-14.3 32-32 32H256c-17.7 0-32-14.3-32-32zm0 160c0-17.7 14.3-32 32-32H480c17.7 0 32 14.3 32 32s-14.3 32-32 32H256c-17.7 0-32-14.3-32-32zM160 416c0-17.7 14.3-32 32-32H480c17.7 0 32 14.3 32 32s-14.3 32-32 32H192c-17.7 0-32-14.3-32-32zM48 368a48 48 0 1 1 0 96 48 48 0 1 1 0-96z'/%3E%3C/svg%3E"); }
.fa-lock { min-width: 0.875em; --fa-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M144 144v48H304V144c0-44.2-35.8-80-80-80s-80 35.8-80 80zM80 192V144C80 64.5 144.5 0 224 0s144 64.5 144 144v48h16c35.3 0 64 28.7 64 64V448c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V256c0-35.3 28.7-64 64-64H80z'/%3E%3C/svg%3E"); }
.fa-map-pin { min-width: 0.625em; --fa-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M16 144a144 144 0 1 1 288 0A144 144 0 1 1 16 144zM160 80c8.8 0 16-7.2 16-16s-7.2-16-16-16c-53 0-96 43-96 96c0 8.8 7.2 16 16 16s16-7.2 16-16c0-35.3 28.7-64 64-64zM128 480V317.1c10.4 1.9 21.1 2.9 32 2.9s21.6-1 32-2.9V480c0 17.7-14.3 32-32 32s-32-14.3-32-32z'/%3E%3C/svg%3E"); }
.fa-music { min-width: 1em; --fa-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M499.1 6.3c8.1 6 12.9 15.6 12.9 25.7v72V368c0 44.2-43 80-96 80s-96-35.8-96-80s43-80 96-80c11.2 0 22 1.6 32 4.6V147L192 223.8V432c0 44.2-43 80-96 80s-96-35.8-96-80s43-80 96-80c11.2 0 22 1.6 32 4.6V200 128c0-14.1 9.3-26.6 22.8-30.7l320-96c9.7-2.9 20.2-1.1 28.3 5z'/%3E%3C/svg%3E"); }
.fa-paper-plane { min-width: 1em; --fa-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M498.1 5.6c10.1 7 15.4 19.1 13.5 31.2l-64 416c-1.5 9.7-7.4 18.2-16 23s-18.9 5.4-28 1.6L284 427.7l-68.5 74.1c-8.9 9.7-22.9 12.9-35.2 8.1S160 493.2 160 480V396.4c0-4 1.5-7.8 4.2-10.7L331.8 202.8c5.8-6.3 5.6-16-.4-22s-15.7-6.4-22-.7L106 360.8 17.7 316.6C7.1 311.3 .3 300.7 0 288.9s5.9-22.8 16.1-28.7l448-256c10.7-6.1 23.9-5.5 34 1.4z'/%3E%3C/svg%3E"); }
.fa-play { min-width: 0.75em; --fa-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M73 39c-14.8-9.1-33.4-9.4-48.5-.9S0 62.6 0 80V432c0 17.4 9.4 33.4 24.5 41.9s33.7 8.1 48.5-.9L361 297c14.3-8.7 23-24.2 23-41s-8.7-32.2-23-41L73 39z'/%3E%3C/svg%3E"); }
.fa-tiktok { min-width: 0.875em; --fa-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M448,209.91a210.06,210.06,0,0,1-122.77-39.25V349.38A162.55,162.55,0,1,1,185,188.31V278.2a74.62,74.62,0,1,0,52.23,71.18V0l88,0a121.18,121.18,0,0,0,1.86,22.17h0A122.18,122.18,0,0,0,381,102.39a121.43,121.43,0,0,0,67,20.14Z'/%3E%3C/svg%3E"); }
.fa-whatsapp { min-width: 0.875em; --fa-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7.9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z'/%3E%3C/svg%3E"); }
.fa-xmark { min-width: 0.75em; --fa-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z'/%3E%3C/svg%3E"); }
/* ===== ICOONTJES EINDE ===== */

/* ===== OPFRISSING OKT 2026: TOEGANKELIJKHEID & BEWEGING ===== */
:focus-visible { outline: 3px solid var(--primary-light); outline-offset: 3px; border-radius: 6px; }
.header.scrolled { box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35); }
.text-link { color: var(--primary); font-weight: 600; }
.text-link:hover { text-decoration: underline; }

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

/* Echte Foxy in plaats van de vos-emoji */
/* De vier spelkaartjes schuiven naar de randen, Foxy staat ertussen. */
.hero__visual .foxy-card { width: 132px; padding: 16px 12px; }
.hero__visual .foxy-card--1 { top: 6px; left: 0; }
.hero__visual .foxy-card--2 { top: 40px; right: 0; }
.hero__visual .foxy-card--3 { bottom: 54px; left: -8px; }
.hero__visual .foxy-card--4 { bottom: 14px; right: -8px; }
.hero__mascot {
    position: absolute;
    left: 50%;
    bottom: 0;
    height: 300px;
    width: auto;
    transform: translateX(-50%);
    filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.5));
    z-index: 2;
    pointer-events: none;
}
.hero__visual::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -10px;
    width: 300px;
    height: 300px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 140, 60, 0.28), transparent 65%);
    pointer-events: none;
}
.foxy-quote__avatar img { width: 56px; height: 56px; display: block; }
.cta__mascot { height: 120px; width: auto; margin: 0 auto 12px; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.45)); }

/* ===== FOXY ADVENTURES ===== */
.breadcrumb { font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 18px; }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; }
.breadcrumb li + li::before { content: '\203A'; margin-right: 6px; color: var(--text-muted); }
.breadcrumb a { color: var(--text-secondary); }
.breadcrumb a:hover { color: var(--primary); }

.adv-hero {
    padding: 120px 0 72px;
    position: relative;
    overflow: hidden;
    background: radial-gradient(ellipse at 12% 25%, rgba(255, 107, 53, 0.10), transparent 55%),
                radial-gradient(ellipse at 88% 75%, rgba(139, 92, 246, 0.10), transparent 55%),
                var(--bg);
}
.adv-hero__inner { display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: center; }
.adv-hero h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); font-weight: 900; line-height: 1.08; margin-bottom: 16px; }
.adv-hero h1 .adv-hero__sub {
    display: block;
    font-size: 0.42em;
    font-weight: 700;
    line-height: 1.35;
    color: var(--primary);
    margin-top: 12px;
}
.adv-hero__lead { font-size: 1.1rem; color: var(--text-secondary); margin-bottom: 26px; max-width: 560px; line-height: 1.7; }
.adv-hero__cta { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 24px; }
.adv-hero__visual { position: relative; }
.adv-hero__note { font-size: 0.85rem; color: var(--text-muted); margin-top: -8px; margin-bottom: 18px; }

.adv-shot {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
    background: var(--bg-card);
    aspect-ratio: 16 / 9;
}
.adv-shot img { width: 100%; height: 100%; object-fit: cover; }
.adv-hero__char {
    position: absolute;
    bottom: -22px;
    height: 64%;
    width: auto;
    filter: drop-shadow(0 12px 20px rgba(0, 0, 0, 0.55));
    pointer-events: none;
}
.adv-hero__char--left { left: -30px; }
.adv-hero__char--right { right: -24px; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text-secondary);
}
.chip--pip { background: var(--adv-pip); border-color: transparent; color: #fff; }
.chip--noor { background: var(--adv-noor); border-color: transparent; color: #fff; }
.chip--foxy { background: var(--adv-foxy); border-color: transparent; color: #fff; }
.chip--free { color: var(--green); border-color: rgba(52, 211, 153, 0.35); background: rgba(52, 211, 153, 0.08); }

.adv-section { padding: 90px 0; }
.adv-section--alt { background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.adv-section .section-header { margin-bottom: 2.8rem; }

/* Leeftijdstrap: elk kind groeit van Pip naar Noor naar Foxy */
.ladder {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: clamp(10px, 3vw, 28px);
    padding-top: 12px;
}
.ladder__step { display: flex; flex-direction: column; align-items: center; color: var(--text); position: relative; }
.ladder__step img {
    width: auto;
    filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.5));
    transition: transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
a.ladder__step:hover img { transform: translateY(-8px); }
.ladder__step--pip img { height: clamp(104px, 15vw, 190px); }
.ladder__step--noor img { height: clamp(132px, 19vw, 236px); }
.ladder__step--foxy img { height: clamp(160px, 23vw, 292px); }
.ladder__block {
    margin-top: 10px;
    width: clamp(88px, 13vw, 164px);
    border-radius: 14px 14px 4px 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    color: #fff;
    font-weight: 800;
    font-size: clamp(0.75rem, 1.6vw, 0.95rem);
    line-height: 1.2;
    text-align: center;
    padding: 6px;
}
.ladder__block small { font-weight: 600; font-size: max(11px, 0.78em); opacity: 0.9; }
.ladder__step--pip .ladder__block { min-height: 48px; background: var(--adv-pip); }
.ladder__step--noor .ladder__block { min-height: 74px; background: var(--adv-noor); }
.ladder__step--foxy .ladder__block { min-height: 100px; background: var(--adv-foxy); }

/* Op slot (Noor): grijs, met een hangslot erop */
.is-locked img { filter: grayscale(1) brightness(0.5) drop-shadow(0 12px 18px rgba(0, 0, 0, 0.5)); }
.ladder__step.is-locked .ladder__block { background: #3a3a58; }
.lock-badge {
    position: absolute;
    left: 50%;
    top: 38%;
    transform: translate(-50%, -50%);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(20, 20, 40, 0.88);
    border: 3px solid #fff;
    display: grid;
    place-items: center;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
}
.lock-badge svg { width: 24px; height: 24px; fill: #fff; }

/* Heldenkaarten (hub en homepage) */
.heroes-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.hero-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    transition: transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s, border-color 0.3s;
}
.hero-card:hover { transform: translateY(-6px); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35); }
.hero-card--pip:hover { border-color: rgba(35, 120, 74, 0.7); }
.hero-card--foxy:hover { border-color: rgba(255, 107, 53, 0.5); }
.hero-card__art {
    position: relative;
    height: 220px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-top: 18px;
    background: radial-gradient(circle at 50% 80%, rgba(255, 214, 140, 0.20), transparent 62%), linear-gradient(180deg, #24203f, #191830);
}
.hero-card--pip .hero-card__art { background: radial-gradient(circle at 50% 80%, rgba(255, 214, 140, 0.22), transparent 62%), linear-gradient(180deg, #1c2b4a, #15203a); }
.hero-card--noor .hero-card__art { background: radial-gradient(circle at 50% 80%, rgba(200, 200, 230, 0.12), transparent 62%), linear-gradient(180deg, #2a2236, #1c1828); }
.hero-card--foxy .hero-card__art { background: radial-gradient(circle at 50% 80%, rgba(255, 150, 70, 0.25), transparent 62%), linear-gradient(180deg, #2e1f22, #1d1519); }
.hero-card__art img { height: 196px; width: auto; filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.5)); }
.hero-card__body { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.hero-card__body .chips { margin-bottom: 2px; }
.hero-card h3 { font-size: 1.3rem; font-weight: 800; line-height: 1.25; overflow-wrap: break-word; hyphens: auto; }
.hero-card p, .hero-card .text-link { overflow-wrap: break-word; }
.hero-card h3 a { color: var(--text); }
.hero-card h3 a:hover { color: var(--primary); }
.hero-card p { color: var(--text-secondary); font-size: 0.95rem; }
.hero-card__links { margin-top: auto; padding-top: 8px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.btn--sm { padding: 10px 18px; font-size: 0.88rem; }
.hero-card .lock-badge { top: 50%; }
.hero-card__art.is-locked img { filter: grayscale(1) brightness(0.5) drop-shadow(0 10px 16px rgba(0, 0, 0, 0.5)); }

/* Sfeer-sectie in vertelboekstijl, blijft donker */
.storybook {
    padding: 90px 0;
    background: radial-gradient(ellipse at 80% 20%, rgba(255, 190, 110, 0.07), transparent 60%), linear-gradient(180deg, #17121f, #1b1422);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}
.storybook__grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: start; }
.storybook h2 { font-size: clamp(1.7rem, 3.6vw, 2.4rem); font-weight: 800; margin-bottom: 18px; }
.storybook__text p { color: #d9d4e6; font-size: 1.05rem; line-height: 1.8; margin-bottom: 16px; }
.storybook__aside { display: flex; flex-direction: column; gap: 16px; }
.speech {
    position: relative;
    background: #fff8ea;
    color: #2b1d12;
    border-radius: 18px;
    padding: 18px 22px;
    font-weight: 600;
    font-size: 1.05rem;
    line-height: 1.5;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}
.speech::after {
    content: '';
    position: absolute;
    left: 38px;
    bottom: -12px;
    border-width: 12px 12px 0;
    border-style: solid;
    border-color: #fff8ea transparent transparent;
}
.speech__who { display: block; font-size: 0.8rem; font-weight: 800; color: var(--primary-dark); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px; }
.speech-row { display: flex; align-items: flex-end; gap: 14px; }
.speech-row img { height: 120px; width: auto; flex: 0 0 auto; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.5)); }
.stat-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.stat { background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px 16px; }
.stat strong { display: block; font-size: 1.6rem; font-weight: 900; color: var(--primary); line-height: 1.1; }
.stat span { font-size: 0.85rem; color: var(--text-secondary); }

/* Weetjes en spelletjes */
.facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.fact {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 16px 18px;
}
.fact__icon { flex: 0 0 auto; font-size: 1.6rem; line-height: 1.2; }
.fact h3 { font-size: 1rem; font-weight: 700; margin-bottom: 2px; }
.fact p { color: var(--text-secondary); font-size: 0.93rem; line-height: 1.55; }
.facts--3 { grid-template-columns: repeat(3, 1fr); }

/* Voor ouders */
.parent-box {
    background: linear-gradient(135deg, rgba(52, 211, 153, 0.08), rgba(34, 211, 238, 0.05));
    border: 1px solid rgba(52, 211, 153, 0.25);
    border-radius: 20px;
    padding: 34px;
}
.parent-box h2 { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800; margin-bottom: 8px; }
.parent-box > p { color: var(--text-secondary); margin-bottom: 20px; }
.checklist { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 28px; list-style: none; }
.checklist li { position: relative; padding-left: 32px; line-height: 1.5; }
.checklist li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z' fill='%230d0d1a'/%3E%3C/svg%3E") center / 13px no-repeat;
}
.checklist li span { display: block; color: var(--text-secondary); font-size: 0.9rem; }

/* Galerij met schermafdrukken */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.gallery figure { margin: 0; border-radius: 14px; overflow: hidden; border: 1px solid var(--border); background: var(--bg-card); }
.gallery img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.gallery figcaption { padding: 10px 14px 12px; font-size: 0.86rem; color: var(--text-secondary); }

/* Avonturen-band op de homepage */
.adv-band {
    padding: 100px 0;
    position: relative;
    background: radial-gradient(ellipse at 50% 0%, rgba(139, 92, 246, 0.12), transparent 60%), linear-gradient(180deg, var(--bg), #141127 45%, var(--bg));
}
.adv-band__more { text-align: center; margin-top: 34px; }
.section-tag--new { background: rgba(52, 211, 153, 0.12); color: var(--green); border-color: rgba(52, 211, 153, 0.3); }

.faq--alt { background: var(--surface); padding-bottom: 80px; border-top: 1px solid var(--border); }
.cta__box .adv-hero__cta { justify-content: center; margin-bottom: 0; }
.heroes-grid--2 { grid-template-columns: repeat(2, 1fr); max-width: 900px; margin: 0 auto; }

.credits-line { font-size: 0.85rem; color: var(--text-muted); text-align: center; margin-top: 28px; }

@media (max-width: 1024px) {
    .adv-hero__inner, .storybook__grid { grid-template-columns: 1fr; }
    .adv-hero__visual { max-width: 640px; width: 100%; margin: 0 auto; }
    .gallery { grid-template-columns: repeat(2, 1fr); }
    .facts--3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
    .heroes-grid { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; }
    .hero-card { flex-direction: row; }
    .hero-card__art { width: 150px; height: auto; min-height: 190px; flex: 0 0 150px; padding: 14px 6px; align-items: center; }
    .hero-card__art img { height: auto; max-height: 170px; max-width: 128px; }
    .hero-card__body { padding: 18px 18px 20px; }
    .facts, .checklist { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
    .adv-hero { padding: 100px 0 56px; }
    .adv-hero__char { height: 52%; bottom: -14px; }
    .adv-hero__char--left { left: -8px; }
    .adv-hero__char--right { right: -6px; }
    .adv-section, .storybook, .adv-band { padding: 64px 0; }
    .gallery { grid-template-columns: 1fr; }
    .facts--3 { grid-template-columns: 1fr; }
    .parent-box { padding: 24px 20px; }
    .hero-card__art { width: 112px; flex-basis: 112px; min-height: 170px; }
    .hero-card__art img { max-width: 98px; max-height: 150px; }
    .hero-card .lock-badge { width: 44px; height: 44px; }
    .adv-hero__cta .btn--lg, .cta__box .btn--lg { width: 100%; }
    .stat-row { grid-template-columns: 1fr 1fr; }
    .speech-row img { height: 92px; }
}

@media (max-width: 400px) {
    .hero-card h3 { font-size: 1.12rem; }
    .hero-card__art { width: 96px; flex-basis: 96px; min-height: 150px; }
    .hero-card__art img { max-width: 84px; max-height: 128px; }
    .hero-card__body { padding: 16px 14px 18px; }
}

/* Zoekterm onder de merknaam in de H1 (Quiz, Music) */
.h1-sub {
    display: block;
    font-size: 0.42em;
    font-weight: 700;
    line-height: 1.35;
    color: var(--primary);
    margin-top: 12px;
    letter-spacing: 0;
}

/* Korte zin met interne links naar Quiz en Music, onder de grote knop */
.cross-links { margin: 20px auto 0; max-width: 560px; font-size: 0.95rem; color: var(--text-secondary); line-height: 1.6; }
.cross-links a { color: var(--primary); font-weight: 600; }
.cross-links a:hover { text-decoration: underline; }

/* Heldenpagina's (Pip, Noor, Foxy): het personage op een podium */
.hero-stage {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: linear-gradient(180deg, #24203f, #191830);
}
.hero-stage::after {
    content: '';
    position: absolute;
    left: 22%;
    right: 22%;
    bottom: 5%;
    height: 9%;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(0, 0, 0, 0.45), transparent);
}
.hero-stage--pip { background: radial-gradient(circle at 50% 78%, rgba(255, 214, 140, 0.30), transparent 55%), radial-gradient(circle at 82% 16%, rgba(255, 255, 255, 0.10), transparent 22%), linear-gradient(180deg, #1c2b4a, #101a30); }
.hero-stage--noor { background: radial-gradient(circle at 50% 78%, rgba(226, 178, 120, 0.26), transparent 55%), linear-gradient(180deg, #2c2338, #1a1422 70%, #2a1d16); }
.hero-stage--foxy { background: radial-gradient(circle at 50% 78%, rgba(255, 150, 70, 0.32), transparent 55%), linear-gradient(180deg, #2e1f22, #1a1216); }
.hero-stage__char {
    position: relative;
    z-index: 1;
    height: 80%;
    width: auto;
    margin-bottom: 7%;
    filter: drop-shadow(0 16px 24px rgba(0, 0, 0, 0.5));
}
.hero-stage__badge {
    position: absolute;
    z-index: 2;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 1.7rem;
    line-height: 1;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
    animation: stage-float 6s ease-in-out infinite;
}
.hero-stage__badge--1 { top: 10%; left: 9%; }
.hero-stage__badge--2 { top: 15%; right: 10%; animation-delay: -1.5s; }
.hero-stage__badge--3 { bottom: 24%; left: 12%; animation-delay: -3s; }
.hero-stage__badge--4 { bottom: 32%; right: 11%; animation-delay: -4.5s; }
@keyframes stage-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

/* Lijst met avonturen van een held */
.game-list { display: grid; gap: 22px; max-width: 980px; margin: 0 auto; }
.game-tile {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}
.game-tile__shot { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #191830; }
.game-tile__shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.game-tile__shot--pip { background: radial-gradient(circle at 50% 80%, rgba(255, 214, 140, 0.18), transparent 62%), linear-gradient(180deg, #1c2b4a, #15203a); }
.game-tile__shot--noor { background: radial-gradient(circle at 50% 80%, rgba(200, 200, 230, 0.12), transparent 62%), linear-gradient(180deg, #2a2236, #1c1828); }
.game-tile__shot--foxy { background: radial-gradient(circle at 50% 80%, rgba(255, 150, 70, 0.20), transparent 62%), linear-gradient(180deg, #2e1f22, #1d1519); }
.game-tile--locked .game-tile__shot { display: flex; align-items: flex-end; justify-content: center; }
.game-tile--locked .game-tile__shot img { width: auto; height: 84%; object-fit: contain; filter: grayscale(1) brightness(0.45) drop-shadow(0 10px 16px rgba(0, 0, 0, 0.5)); }
.game-tile--locked .lock-badge { top: 50%; }
.game-tile__body { padding: 24px 26px 26px; display: flex; flex-direction: column; gap: 10px; }
.game-tile h3 { font-size: 1.35rem; font-weight: 800; line-height: 1.25; overflow-wrap: break-word; hyphens: auto; }
.game-tile h3 a { color: var(--text); }
.game-tile h3 a:hover { color: var(--primary); }
.game-tile p { color: var(--text-secondary); font-size: 0.97rem; overflow-wrap: break-word; }
.game-tile__links { margin-top: auto; padding-top: 6px; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

/* Losse schermafdruk met onderschrift (Noor in het Foxy-avontuur) */
.shot-card { margin: 0; border-radius: 14px; overflow: hidden; border: 1px solid var(--border); background: var(--bg-card); }
.shot-card img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.shot-card figcaption { padding: 10px 14px 12px; font-size: 0.86rem; color: var(--text-secondary); }

@media (max-width: 760px) {
    .game-tile { grid-template-columns: 1fr; }
    .game-tile__body { padding: 20px 20px 22px; }
}

@media (max-width: 560px) {
    .hero-stage__badge { width: 48px; height: 48px; font-size: 1.35rem; }
}

/* Links in de verteltekst (heldenpagina's) */
.storybook__text a { color: var(--primary); font-weight: 600; }
.storybook__text a:hover { text-decoration: underline; }

/* ===== SVG-iconen in plaats van emoji (img/icons.svg = Phosphor duotone, MIT) ===== */
.ico { display: inline-block; width: 1em; height: 1em; vertical-align: -0.14em; fill: currentColor; flex: 0 0 auto; }
.brand-ico { display: inline-block; width: 1.25em; height: 1.25em; vertical-align: middle; }

/* Icoontegel: icoon op een zacht gekleurd vlak; de kleur wisselt per tegel */
.feature__icon, .round-card .round-emoji, .mode-card .mode-card__emoji, .game-card__emoji, .cta__emoji {
    --ic: 255, 107, 53;
    display: inline-grid;
    place-items: center;
    color: rgb(var(--ic));
    background: rgba(var(--ic), 0.12);
    border: 1px solid rgba(var(--ic), 0.28);
    transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1.3), background-color 0.3s;
}
.feature__icon { width: 58px; height: 58px; border-radius: 16px; font-size: 30px; margin-bottom: 16px; }
.round-card .round-emoji { width: 50px; height: 50px; border-radius: 14px; font-size: 26px; margin: 0 auto 12px; }
.mode-card .mode-card__emoji { width: 72px; height: 72px; border-radius: 20px; font-size: 38px; margin: 0 auto 16px; }
.game-card__emoji { display: grid; width: 64px; height: 64px; border-radius: 18px; font-size: 34px; margin-bottom: 14px; }
.cta__emoji { display: grid; width: 76px; height: 76px; border-radius: 22px; font-size: 40px; margin: 0 auto 18px; }
.feature:nth-child(6n+2) .feature__icon, .round-card:nth-child(6n+2) .round-emoji, .mode-card:nth-child(3n+2) .mode-card__emoji { --ic: 139, 92, 246; }
.feature:nth-child(6n+3) .feature__icon, .round-card:nth-child(6n+3) .round-emoji, .mode-card:nth-child(3n+3) .mode-card__emoji { --ic: 52, 211, 153; }
.feature:nth-child(6n+4) .feature__icon, .round-card:nth-child(6n+4) .round-emoji { --ic: 34, 211, 238; }
.feature:nth-child(6n+5) .feature__icon, .round-card:nth-child(6n+5) .round-emoji { --ic: 244, 114, 182; }
.feature:nth-child(6n+6) .feature__icon, .round-card:nth-child(6n+6) .round-emoji { --ic: 251, 191, 36; }
.game-card--music .game-card__emoji { --ic: 139, 92, 246; }
.game-card--explore .game-card__emoji { --ic: 52, 211, 153; }
.game-card--act .game-card__emoji { --ic: 244, 114, 182; }
.feature:hover .feature__icon, .round-card:hover .round-emoji, .game-card:hover .game-card__emoji, .mode-card:hover .mode-card__emoji {
    transform: translateY(-3px) rotate(-6deg) scale(1.05);
}
.feature__icon .brand-ico { width: 40px; height: 40px; }
.foxy-card--1 .ico { color: #ff6b35; }
.foxy-card--2 .ico { color: #8b5cf6; }
.foxy-card--3 .ico { color: #34d399; }
.foxy-card--4 .ico { color: #f472b6; }

/* Stickers uit de spellen in de weetjes- en spelletjestegels van de avonturen */
.fact { align-items: center; }
.fact__icon { line-height: 0; }
.fact__icon .sticker { display: block; width: 56px; height: 56px; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.35)); transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1.3); }
.fact:hover .fact__icon .sticker { transform: rotate(-8deg) scale(1.08); }

/* Iconen op het podium van de heldenpagina's, in de kleur van de held */
.hero-stage__badge { font-size: 1.55rem; }
.hero-stage--pip .hero-stage__badge { color: #bfe3ff; }
.hero-stage--noor .hero-stage__badge { color: #f5d0a9; }
.hero-stage--foxy .hero-stage__badge { color: #ffb37a; }

/* Zacht inschuiven bij het scrollen (main.js zet .rv enkel op wat nog onder de vouw staat) */
.rv { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.75, 0.25, 1) !important; transition-delay: var(--rv-delay, 0ms) !important; }
.rv.is-in { opacity: 1; transform: none; }

/* ===== KAARTVORMEN (okt 2026): stickerkaart met een vlek als icoon, speelkaart voor de grote kaarten ===== */
/* De kleur van het icoon staat nu ook op de kaart zelf (rand bij aanwijzen, tweede kaart eronder) */
.feature, .round-card, .mode-card, .game-card { --ic: 255, 107, 53; }
.feature:nth-child(6n+2), .round-card:nth-child(6n+2), .mode-card:nth-child(3n+2), .game-card--music { --ic: 139, 92, 246; }
.feature:nth-child(6n+3), .round-card:nth-child(6n+3), .mode-card:nth-child(3n+3), .game-card--explore { --ic: 52, 211, 153; }
.feature:nth-child(6n+4), .round-card:nth-child(6n+4) { --ic: 34, 211, 238; }
.feature:nth-child(6n+5), .round-card:nth-child(6n+5), .game-card--act { --ic: 244, 114, 182; }
.feature:nth-child(6n+6), .round-card:nth-child(6n+6) { --ic: 251, 191, 36; }

/* Gewone kaarten: twee grote en twee kleine hoeken, om en om gespiegeld */
.feature, .step { border-radius: 28px 8px 28px 8px; }
.feature:nth-child(even), .step:nth-child(even) { border-radius: 8px 28px 8px 28px; }
.feature:hover { transform: translateY(-6px); border-color: rgba(var(--ic), 0.6); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.3); }
/* ruimte boven elke rij voor het icoon dat boven de kaart uitsteekt */
.features__grid { padding-top: 32px; row-gap: 52px; }

/* Het icoon als vlek: elke kaart een andere vorm, die verandert bij aanwijzen */
.feature__icon, .round-card .round-emoji, .mode-card .mode-card__emoji, .game-card__emoji, .cta__emoji {
    --blob: 58% 42% 46% 54% / 44% 56% 44% 56%;
    border: none;
    border-radius: var(--blob);
    background: linear-gradient(rgba(var(--ic), 0.26), rgba(var(--ic), 0.26)), var(--bg-card);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.45), inset 0 0 0 2px rgba(var(--ic), 0.55);
    transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1.3), border-radius 0.6s ease;
}
.feature:nth-child(4n+2) .feature__icon, .round-card:nth-child(4n+2) .round-emoji, .mode-card:nth-child(3n+2) .mode-card__emoji, .game-card:nth-child(4n+2) .game-card__emoji { --blob: 42% 58% 60% 40% / 55% 42% 58% 45%; }
.feature:nth-child(4n+3) .feature__icon, .round-card:nth-child(4n+3) .round-emoji, .mode-card:nth-child(3n+3) .mode-card__emoji, .game-card:nth-child(4n+3) .game-card__emoji { --blob: 50% 50% 38% 62% / 60% 40% 60% 40%; }
.feature:nth-child(4n+4) .feature__icon, .round-card:nth-child(4n+4) .round-emoji, .game-card:nth-child(4n+4) .game-card__emoji { --blob: 63% 37% 52% 48% / 46% 60% 40% 54%; }
/* maten: het icoon steekt voor de helft boven de kaart uit (negatieve marge = padding van de kaart + halve hoogte) */
.feature__icon { width: 64px; height: 64px; font-size: 32px; margin-top: -60px; }
.round-card .round-emoji { width: 56px; height: 56px; font-size: 28px; margin: -52px auto 12px; }
.mode-card .mode-card__emoji { width: 82px; height: 82px; font-size: 42px; margin: -77px auto 16px; }
.feature:hover .feature__icon, .round-card:hover .round-emoji, .mode-card:hover .mode-card__emoji, .game-card:hover .game-card__emoji {
    --blob: 46% 54% 58% 42% / 56% 44% 52% 48%;
    transform: rotate(-8deg) scale(1.12);
}

/* Grote kaarten: speelkaart, een tikje scheef, met een tweede kaart eronder.
   ::after = de kaart zelf, ::before = de kaart eronder. De scheefstand staat op 'rotate'
   (niet op 'transform'), zodat hij los staat van het inschuiven en het optillen. */
.game-card, .mode-card { isolation: isolate; overflow: visible; background: none; border-color: transparent; box-shadow: none; rotate: var(--tilt, -1.2deg); transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), rotate 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.game-card { --tilt: -0.8deg; }
.game-card:nth-child(4n+2) { --tilt: 0.6deg; }
.game-card:nth-child(4n+3) { --tilt: 0.5deg; }
.game-card:nth-child(4n+4) { --tilt: -0.7deg; }
.game-card::before, .game-card::after, .mode-card::before, .mode-card::after { content: ""; position: absolute; inset: 0; height: auto; border-radius: 18px; }
.game-card::after, .mode-card::after { z-index: -1; background: var(--bg-card); border: 1px solid var(--border); transition: border-color 0.3s; }
.game-card::before, .mode-card::before { z-index: -2; opacity: 1; background: linear-gradient(rgba(var(--ic), 0.18), rgba(var(--ic), 0.18)), var(--bg-card); border: 1px solid rgba(var(--ic), 0.5); transform: rotate(3.5deg) translate(5px, 4px); transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.game-card:hover, .mode-card:hover { rotate: 0deg; border-color: transparent; box-shadow: none; }
.game-card:hover::before, .mode-card:hover::before { transform: rotate(6.5deg) translate(11px, 5px); }
.game-card:hover::after, .mode-card:hover::after { border-color: rgba(var(--ic), 0.6); }

@media (max-width: 560px) {
    .game-card, .mode-card { rotate: calc(var(--tilt, -1.2deg) / 2); }
    .game-card::before, .mode-card::before { transform: rotate(2.2deg) translate(3px, 4px); }
    .game-card:hover::before, .mode-card:hover::before { transform: rotate(3.5deg) translate(5px, 5px); }
}

/* ===== BIJSTURINGEN (11 okt 2026) ===== */
/* Leeftijdstrap op /adventures: een figuur mag breder zijn dan zijn blokje (Foxy werd tot de breedte
   van het blokje samengeduwd en zweefde dan boven zijn naam). Moet hij toch krimpen, dan blijft hij
   onderaan staan in plaats van in het midden. */
.ladder__step img { max-width: none; object-fit: contain; object-position: 50% 100%; }
@media (max-width: 360px) {
    .ladder { gap: 6px; }
    .ladder__block { width: 80px; }
    .ladder__step--foxy img { height: 140px; }
}

/* Tekstballon naast een figuur: het staartje wijst naar links, naar wie praat (stond naar beneden). */
.speech::after {
    left: -11px;
    bottom: min(66px, calc(100% - 40px));
    border-width: 9px 12px 9px 0;
    border-color: transparent #fff8ea transparent transparent;
}
@media (max-width: 560px) {
    .speech::after { bottom: min(50px, calc(100% - 40px)); }
}

/* ===== VLAAMSE EN NEDERLANDSE VERSIE (Quiz en Music, enkel op de Nederlandstalige pagina's) ===== */
.versions { padding: 90px 0; }
.versions__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 52px 28px; max-width: 820px; margin: 0 auto; padding-top: 32px; }
.version-card { display: flex; flex-direction: column; align-items: center; }
.version-card .feature__icon { margin-left: auto; margin-right: auto; }
.version-card:nth-child(2) { --ic: 34, 211, 238; }
.version-card h3 { font-size: 1.2rem; margin-bottom: 8px; }
.version-card p { margin-bottom: 20px; font-size: 0.95rem; }
.version-card .btn { margin-top: auto; }
/* Getekende vlag in plaats van een emoji; het randje houdt de zwarte baan zichtbaar op de donkere achtergrond */
.flag { display: block; width: 36px; height: 24px; border-radius: 4px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3); }
.flag--sm { display: inline-block; width: 21px; height: 14px; border-radius: 3px; margin-right: 5px; vertical-align: -2px; }
.versions__note { max-width: 640px; margin: 30px auto 0; text-align: center; color: var(--text-muted); font-size: 0.95rem; }
.hero__versions { margin: 18px 0 0; font-size: 0.95rem; color: var(--text-secondary); }
.hero__versions a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.hero__versions a:hover { color: var(--primary); }
@media (max-width: 640px) {
    .versions { padding: 64px 0; }
    .versions__grid { grid-template-columns: 1fr; }
}