/* 
   SAAR Insights - Stylesheet
   
   KLEUREN AANPASSEN? Verander deze variabelen:
*/
:root {
    /* Sectietitels:zelfde grootte als 'Waar we in geloven' */
    --section-title-font-size: clamp(1.875rem, 4vw, 2.5rem);
    --section-title-font-weight: 700;
    /* Titels: off-zwart, tikkeltje lichter dan zinc-900, binnen WCAG AAA */
    --heading-color: #232326;
    --pink-50: #FDF2F8;
    --pink-100: #FCE7F3;
    --pink-200: #FBCFE8;
    --pink-300: #F9A8D4;
    --pink-400: #F472B6;
    --pink-500: #EC4899;    /* HOOFDKLEUR */
    --pink-600: #DB2777;    /* HOVER KLEUR */
    --pink-700: #BE185D;
    --indigo-50: #EEF2FF;
    --indigo-100: #E0E7FF;
    --indigo-200: #C7D2FE;
    --indigo-300: #A5B4FC;
    --indigo-500: #6366F1;  /* ACCENT KLEUR */
    --indigo-600: #4F46E5;
    --zinc-50: #FAFAFA;
    --zinc-100: #F4F4F5;
    --zinc-200: #E4E4E7;
    --zinc-300: #D4D4D8;
    --zinc-400: #A1A1AA;
    --zinc-500: #71717A;
    --zinc-600: #52525B;
    --zinc-700: #3F3F46;
    --zinc-800: #27272A;
    --zinc-900: #18181B;
    /* Ruimte tussen inhoud en CTA in cards/secties (consistent over de site) */
    --cta-spacing: 24px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden; /* Geen horizontale scroll */
}

/* Scroll-triggered animations */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered animation delays voor grid items */
.animate-on-scroll.stagger-1 { transition-delay: 0.1s; }
.animate-on-scroll.stagger-2 { transition-delay: 0.2s; }
.animate-on-scroll.stagger-3 { transition-delay: 0.3s; }
.animate-on-scroll.stagger-4 { transition-delay: 0.4s; }
.animate-on-scroll.stagger-5 { transition-delay: 0.5s; }
.animate-on-scroll.stagger-6 { transition-delay: 0.6s; }

/* Respecteer prefers-reduced-motion voor toegankelijkheid */
@media (prefers-reduced-motion: reduce) {
    .animate-on-scroll {
        opacity: 1;
        transform: none;
        transition: none;
    }
    
    .animate-on-scroll.is-visible {
        opacity: 1;
        transform: none;
    }
    
    .hero-graphic-small {
        animation: none !important;
    }
}

/* Subtle hero graphic animation */
@keyframes subtle-pulse {
    0%, 100% { 
        transform: scale(1); 
        opacity: 1; 
    }
    50% { 
        transform: scale(1.02); 
        opacity: 0.95; 
    }
}

body {
    overflow-x: hidden; /* Geen horizontale scroll */
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--zinc-900);
    line-height: 1.6;
    background: white;
}

/* Typography - Volgens SAAR Insights Huisstijlgids v1.3 */
h1, h2, h3, h4 {
    font-family: 'Plus Jakarta Sans', sans-serif;
    letter-spacing: -0.02em;
}

/* H1 — Paginatitel, altijd groter dan sectietitels */
h1 {
    font-size: clamp(1.75rem, 3.5vw, 2rem); /* fallback; page/about-hero overschrijven */
    font-weight: 800;
    line-height: 1.2;
    color: var(--heading-color);
}

/* H2 — Sectietitel */
h2 {
    font-size: clamp(1.375rem, 2.5vw, 1.5rem); /* fallback; sectietitels gebruiken --section-title-font-size */
    font-weight: 700;
    line-height: 1.3;
    color: var(--heading-color);
}

/* H3 — Subsectie */
h3 {
    font-size: clamp(1rem, 1.75vw, 1.125rem);
    font-weight: 600;
    line-height: 1.4;
    color: var(--heading-color);
}

/* H4 — 16px / 600 — Card/groepstitel */
h4 {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--heading-color);
}

/* Body tekst - Volgens huisstijlgids */
p { 
    color: var(--zinc-600);
    font-size: 14px; /* Body — 14px / 400 */
    line-height: 1.5; /* 150% minimum voor WCAG */
    font-weight: 400;
}

/* Body Large — 16px / 400 voor introductietekst */
.body-large {
    font-size: 16px;
    line-height: 1.6;
    font-weight: 400;
}

/* Body Small — 13px / 400 voor secundaire tekst */
.body-small {
    font-size: 13px;
    line-height: 1.5;
    font-weight: 400;
}

/* Skip Navigation Link - WCAG 2.1 Level A */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--zinc-900);
    color: white;
    padding: 8px 16px;
    text-decoration: none;
    z-index: 100;
    border-radius: 0 0 4px 0;
    font-weight: 600;
}

.skip-link:focus {
    top: 0;
}

/* Focus Indicators - WCAG 2.1 Level AA */
*:focus-visible {
    outline: 3px solid #005fcc;
    outline-offset: 2px;
    border-radius: 4px;
}

a:focus-visible,
button:focus-visible {
    outline: 3px solid #005fcc;
    outline-offset: 4px;
}

/* Layout */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px; /* Mobile: px-4 */
}

section {
    padding: 48px 0; /* Mobile: compacter */
}

/* Desktop: Spacing tussen secties */
@media (min-width: 1024px) {
    section {
        padding: 72px 0; /* Desktop: compacter (was 96px) */
    }
}

/* Responsive padding: px-4 (mobile) → px-6 (tablet) → px-8 (desktop) */
@media (min-width: 640px) {
    .container {
        padding: 0 24px; /* Tablet: px-6 */
    }
}

@media (min-width: 1024px) {
    .container {
        padding: 0 32px; /* Desktop: px-8 */
    }
}

@media (max-width: 639px) {
    section { 
        padding: 40px 0; /* Compact op mobile */
    }
    
    .section-header {
        margin-bottom: 24px; /* Compact op mobile */
    }
    
    .section-header p {
        font-size: 14px; /* Body — 14px volgens huisstijlgids */
        margin-top: 12px;
    }
}

/* Navigation */
nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--zinc-200);
    z-index: 1000;
    padding: 16px 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Nav bij scrollen - vloeiende overgang */
nav.scrolled {
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(12px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    padding: 12px 0;
}

nav .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

.logo-icon {
    display: flex;
    align-items: center;
}

.logo-text {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 20px;
    font-weight: 800;
    color: var(--zinc-900);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Logo tekst vloeiende overgang bij scrollen */
nav.scrolled .logo-text {
    font-size: 18px;
}

.logo-text span {
    font-weight: 400;
    color: var(--zinc-500);
}

.nav-links {
    display: none; /* Default: hidden on mobile */
    align-items: center;
    gap: 32px;
}

.nav-links a {
    text-decoration: none;
    color: var(--zinc-600);
    font-size: 15px;
    font-weight: 500;
    transition: color 0.2s;
}

.nav-links a:hover:not(.nav-cta),
.nav-links a.active:not(.nav-cta) {
    color: var(--pink-500);
}

.nav-cta {
    background: var(--pink-500);
    color: white !important;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 600 !important;
    transition: background 0.2s !important;
}

.nav-cta:hover {
    background: var(--pink-600);
}

.mobile-menu-btn {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    min-width: 44px; /* Touch target minimum */
    min-height: 44px;
    color: var(--pink-500); /* Roze primary kleur */
}

.mobile-menu-btn svg {
    width: 24px;
    height: 24px;
    stroke: var(--pink-500);
}

/* Mobile: < 640px - Hamburger menu */
@media (max-width: 639px) {
    .nav-links {
        display: none !important; /* Force hide on mobile */
        position: fixed;
        top: 73px; /* Height of nav bar */
        left: 0;
        right: 0;
        background: white;
        flex-direction: column;
        align-items: flex-start; /* Links uitlijnen op mobile */
        padding: 24px;
        gap: 16px;
        border-bottom: 1px solid var(--zinc-200);
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        z-index: 999;
        transform: translateY(-20px);
        opacity: 0;
        transition: transform 0.3s ease-out, opacity 0.3s ease-out;
    }

    .nav-links.active {
        display: flex !important;
        transform: translateY(0);
        opacity: 1;
    }

    .mobile-menu-btn {
        display: flex !important;
        align-items: center;
        justify-content: center;
    }
    
    .nav-links a {
        text-align: left; /* Links uitlijnen voor alle menu items */
    }
    
    .nav-cta {
        width: auto;
        min-width: 140px;
        text-align: center; /* Center de button tekst */
        display: inline-block; /* Zorg dat width: auto werkt */
        margin-left: 0; /* Zorg dat er geen extra margin is */
        margin-right: auto; /* Links uitlijnen binnen de container */
    }
    
    .nav-links {
        align-items: flex-start; /* Zorg dat items links uitgelijnd zijn */
    }
}

/* Menu overlay voor mobile */
.menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 998;
    display: none;
    backdrop-filter: blur(2px);
    cursor: pointer;
}

/* Alleen overlay tonen op mobile */
@media (min-width: 640px) {
    .menu-overlay {
        display: none !important;
    }
}

/* Tablet+: Volledige navigatie zichtbaar */
@media (min-width: 640px) {
    nav.scrolled {
        padding: 10px 0;
    }
    
    nav.scrolled .logo-icon {
        transform: scale(0.88);
    }
    
    nav.scrolled .logo-text {
        font-size: 17px;
    }
    
    .nav-links {
        display: flex !important;
        position: static !important;
    }
    
    .mobile-menu-btn {
        display: none !important;
    }
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 28px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    border: none;
    min-height: 44px; /* Touch target minimum */
}

/* Mobile: Compacte buttons (niet full-width) */
@media (max-width: 639px) {
    .btn {
        width: auto;
        min-width: 140px;
        padding: 14px 24px;
    }
    
    .hero-buttons {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }
}

/* Tablet+: Auto breedte */
@media (min-width: 640px) {
    .btn {
        width: auto;
    }
}

.btn-primary {
    background: var(--pink-500);
    color: white;
}

.btn-primary:hover {
    background: var(--pink-600);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(236, 72, 153, 0.3);
}

.btn-secondary {
    background: white;
    color: var(--zinc-900);
    border: 2px solid var(--zinc-200);
}

.btn-secondary:hover {
    border-color: var(--zinc-300);
    background: var(--zinc-50);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.btn-ghost {
    background: transparent;
    color: var(--pink-500);
    padding: 14px 0;
}

.btn-ghost:hover {
    color: var(--pink-600);
}

/* Hero Section */
.hero {
    padding-top: 100px; /* Compacter (was 120px) */
    padding-bottom: 60px; /* Compacter (was 80px) */
    background: linear-gradient(180deg, var(--pink-50) 0%, white 100%);
}

.hero .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
}

.hero-content {
    position: relative;
}

.hero-content h1 {
    margin-bottom: 16px;
    font-size: clamp(2rem, 4.5vw, 2.875rem); /* groter dan sectietitels (max 2.5rem) */
    color: var(--heading-color);
}

.hero-content p {
    font-size: clamp(16px, 2vw, 18px);
    margin-bottom: 24px; /* Compacter (was 32px) */
    max-width: 500px;
}

.hero-buttons {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    flex-direction: row; /* Default: buttons naast elkaar */
}

.hero-buttons .btn {
    min-width: 220px;
    text-align: center;
}

/* Mobile: Hero aanpassingen */
@media (max-width: 767px) {
    .hero {
        padding-top: 90px; /* Iets minder voor betere "above the fold" */
        padding-bottom: 48px;
    }
    
    .hero-content {
        text-align: center; /* Center content op mobile */
    }
    
    .hero-content h1 {
        font-size: 2rem; /* groter dan sectietitels op mobile */
        margin-bottom: 12px;
        line-height: 1.2;
        text-align: center;
    }
    
    .hero-content p {
        margin-bottom: 20px; /* Minder ruimte op mobile */
        font-size: 14px; /* Body — 14px volgens huisstijlgids */
        line-height: 1.5; /* 150% voor betere leesbaarheid */
        text-align: center; /* Center paragraph */
    }
    
    .hero-buttons {
        gap: 12px; /* Minder gap tussen buttons op mobile */
    }
}

.hero-visual {
    display: none; /* Hidden op mobile */
    justify-content: center;
    align-items: center;
}

/* Tablet+: Hero visual zichtbaar */
@media (min-width: 768px) {
    .hero-visual {
        display: flex;
    }
}

/* Responsive hero graphic - klein op mobile, verborgen op tablet+ */
.hero-graphic-mobile {
    display: none; /* Standaard verborgen */
    text-align: center;
    margin: 0 auto 20px auto; /* Compacte spacing mb-6 */
    width: 100%;
    position: relative;
    z-index: 1;
    clear: both; /* Zorg dat element op nieuwe regel staat */
}

.hero-graphic-small {
    width: 64px; /* Compact formaat zoals Zerocopter logo (44-64px range) */
    height: 64px;
    aspect-ratio: 1;
    background: linear-gradient(135deg, var(--pink-500) 0%, var(--indigo-500) 100%);
    border-radius: 12px; /* Compact border-radius */
    display: inline-flex; /* Inline-flex voor betere centering */
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    flex-shrink: 0; /* Voorkom krimpen */
    margin: 0 auto; /* Center binnen parent */
    animation: subtle-pulse 4s ease-in-out infinite;
}

.hero-graphic-small svg {
    width: 65%; /* SVG proportioneel kleiner */
    height: 65%;
    position: relative;
    z-index: 1;
}

.hero-graphic-small::before {
    content: '';
    position: absolute;
    width: 55%;
    height: 55%;
    background: rgba(255,255,255,0.15);
    border-radius: 8px;
    transform: rotate(-12deg);
}

/* Extra klein op zeer kleine schermen (iPhone SE) */
@media (max-width: 374px) {
    .hero-graphic-small {
        width: 56px;
        height: 56px;
    }
}

/* Tablet+: Verberg mobile graphic, toon grote hero visual */
@media (min-width: 768px) {
    .hero-graphic-mobile {
        display: none !important; /* Verberg op tablet+ */
    }
}

.hero-graphic {
    width: 100%;
    max-width: 480px;
    aspect-ratio: 1;
    background: linear-gradient(135deg, var(--pink-500) 0%, var(--indigo-500) 100%);
    border-radius: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.hero-graphic::before {
    content: '';
    position: absolute;
    width: 60%;
    height: 60%;
    background: rgba(255,255,255,0.1);
    border-radius: 24px;
    transform: rotate(-12deg);
}

.hero-graphic svg {
    width: 50%;
    height: auto;
    position: relative;
    z-index: 1;
}

/* Mobile: Hero in 1 kolom, visual verborgen */
@media (max-width: 767px) {
    .hero .container {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .hero-content {
        order: 1; /* Content eerst */
        text-align: center; /* Center alle content */
        width: 100%;
    }

    .hero-content p {
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }

    .hero-buttons {
        justify-content: center;
        flex-direction: column; /* Buttons onder elkaar op mobile */
        align-items: center;
        width: 100%;
    }
    
    .hero-buttons .btn {
        width: auto;
        min-width: 220px;
    }

    .hero-visual {
        display: none !important; /* Verborgen op mobile */
    }
    
    /* Verberg paarse vierkant/visual naast titel op mobile */
    .hero-content .hero-graphic-mobile {
        display: none !important;
    }
}

/* Tablet: Hero in 1 kolom, visual zichtbaar */
@media (min-width: 768px) and (max-width: 1023px) {
    .hero .container {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .hero-content p {
        margin-left: auto;
        margin-right: auto;
    }

    .hero-buttons {
        justify-content: center;
        flex-direction: row; /* Buttons naast elkaar op tablet */
    }

    .hero-visual {
        order: -1;
        display: flex;
    }

    .hero-graphic {
        max-width: 320px;
    }
}

/* Section Headers */
.section-header {
    text-align: center;
    margin-bottom: 40px; /* Compacter (was 64px) */
}

@media (min-width: 1024px) {
    .section-header {
        margin-bottom: 56px; /* Compacter (was 80px) */
    }
}

/* Mobile: Section headers gecentreerd */
@media (max-width: 1023px) {
    .section-header {
        text-align: center;
        margin-bottom: 32px;
    }
    
    .section-header h2 {
        margin-bottom: 8px;
    }
    
    .section-header p {
        margin-top: 8px;
    }
}

.section-header p {
    font-size: clamp(16px, 2vw, 18px);
    color: var(--zinc-600);
    margin-top: 16px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* Audience Cards */
.audience-section {
    background: var(--zinc-50);
}

.audience-grid {
    display: grid;
    grid-template-columns: 1fr; /* Mobile: 1 kolom */
    gap: 24px;
    align-items: stretch; /* Gelijkmatige hoogte voor cards */
}

/* Tablet: 2 kolommen */
@media (min-width: 640px) {
    .audience-grid {
        grid-template-columns: repeat(2, 1fr);
        align-items: stretch; /* Gelijkmatige hoogte */
    }
}

/* Desktop: 3 kolommen */
@media (min-width: 1024px) {
    .audience-grid {
        grid-template-columns: repeat(3, 1fr);
        align-items: stretch; /* Gelijkmatige hoogte */
    }
}

.audience-card {
    background: white;
    border-radius: 12px; /* Consistent met andere cards (was 20px) */
    padding: 24px; /* Verbeterde padding volgens 8px grid */
    border: 1px solid var(--zinc-100);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    display: flex;
    flex-direction: column;
    height: 100%; /* Vul volledige grid cel hoogte */
}

/* Tablet: Medium padding */
@media (min-width: 640px) {
    .audience-card {
        padding: 32px; /* Verbeterde spacing */
    }
}

/* Desktop: Meer padding */
@media (min-width: 1024px) {
    .audience-card {
        padding: 40px; /* Meer whitespace voor betere leesbaarheid */
    }
}

.audience-card:hover {
    border-color: var(--pink-300);
    box-shadow: 0 8px 24px rgba(236, 72, 153, 0.15);
    transform: translateY(-4px) scale(1.02);
}

.audience-icon {
    width: 48px;
    height: 48px;
    background: var(--pink-50);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    margin-bottom: 20px;
    flex-shrink: 0; /* Voorkom dat icon krimpt */
}

.audience-icon svg {
    width: 24px;
    height: 24px;
    color: var(--pink-500);
}

.audience-card h3 {
    margin-bottom: 12px;
    color: var(--zinc-900);
    flex-shrink: 0; /* Voorkom dat titel krimpt */
}

.audience-card p {
    font-size: 14px; /* Body — 14px volgens huisstijlgids */
    line-height: 1.5; /* 150% voor betere leesbaarheid */
    margin-bottom: var(--cta-spacing); /* Zelfde afstand als andere card-CTA's */
    flex-grow: 1; /* Laat paragraaf groeien om ruimte te vullen */
}

.card-link {
    color: var(--pink-500);
    font-weight: 600;
    font-size: 15px;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: auto; /* Push link naar onderkant van card */
    flex-shrink: 0; /* Voorkom dat link krimpt */
}

/* Mobile: Max width voor leesbaarheid */
@media (max-width: 639px) {
    .audience-grid {
        max-width: 100%;
    }
}

/* Steps */
.steps-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    gap: 32px;
    margin-top: 32px;
    align-items: start;
    position: relative;
}

/* Force vertical stacking on mobile/tablet */
@media (max-width: 1023px) {
    .steps-grid {
        display: flex !important;
        flex-direction: column !important;
    }
}

.steps-grid > .step {
    grid-row: 1;
}

.step {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 0;
}

.step-number {
    width: 48px;
    height: 48px;
    background: var(--indigo-500); /* Indigo in plaats van Pink voor homepage */
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 700;
    font-size: 20px;
    margin: 0 auto 20px;
    flex-shrink: 0;
    order: 1;
    position: relative;
    top: 0;
}

.step-connector {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    position: relative;
    align-self: start;
    padding-top: 0;
    grid-row: 1;
    height: 48px;
}

.step-connector::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    border-top: 1px dashed var(--indigo-200); /* Indigo connector lijn */
    top: 24px;
    left: 0;
    opacity: 0.6;
}

.step h3 {
    margin-bottom: 12px;
    margin-top: 0;
    order: 2;
}

.step p {
    font-size: 14px; /* Body — 14px volgens huisstijlgids */
    line-height: 1.5; /* 150% voor betere leesbaarheid */
    order: 3;
}

/* Mobile: Verticaal gestapeld, links uitgelijnd voor betere leesbaarheid */
@media (max-width: 1023px) {
    .steps-grid {
        display: flex !important; /* Force flex layout op mobile */
        flex-direction: column !important;
        grid-template-columns: 1fr !important;
        max-width: 100%;
        margin: 48px auto 0;
        gap: 0; /* Geen gap tussen stappen, gebruik margin-bottom */
        align-items: stretch; /* Stretch steps to full width */
    }

    .steps-grid > .step {
        grid-row: auto !important; /* Reset grid-row */
        width: 100%;
        margin-bottom: 40px; /* Meer ruimte tussen stappen */
    }
    
    .steps-grid > .step:last-child {
        margin-bottom: 0;
    }

    .step-connector {
        display: none !important;
    }
    
    .step {
        margin-bottom: 0; /* Reset, gebruik gap van parent */
        max-width: 100%;
        text-align: left !important; /* Links uitlijnen op mobile voor betere leesbaarheid */
        align-items: flex-start !important; /* Links uitlijnen */
    }
    
    .step-number {
        margin-left: 0; /* Links uitlijnen */
        margin-right: auto; /* Auto margin rechts */
        margin-bottom: 20px; /* Meer ruimte onder nummer */
        width: 56px; /* Iets groter op mobile voor betere zichtbaarheid */
        height: 56px;
        font-size: 22px; /* Iets groter font voor nummer */
    }
    
    .step h3 {
        font-size: 20px; /* Iets groter op mobile voor betere leesbaarheid */
        margin-bottom: 12px;
        text-align: left; /* Links uitlijnen */
        width: 100%;
        font-weight: 700; /* Bold voor betere hiërarchie */
    }
    
    .step p {
        font-size: 14px; /* Body — 14px volgens huisstijlgids */
        line-height: 1.5; /* 150% voor betere leesbaarheid */
        max-width: 100%;
        text-align: left; /* Links uitlijnen */
        color: var(--zinc-600); /* Iets lichtere kleur voor betere hiërarchie */
    }
}

/* Desktop: Centered alignment */
@media (min-width: 1024px) {
    .step {
        text-align: center;
        align-items: center;
    }
    
    .step-number {
        margin-left: auto;
        margin-right: auto;
    }
    
    .step h3,
    .step p {
        text-align: center;
    }
}

/* Desktop: Horizontaal naast elkaar */
@media (min-width: 1024px) {
    .steps-grid {
        grid-template-columns: 1fr auto 1fr auto 1fr;
    }
    
    .step-connector {
        display: flex;
    }
}

/* Features / Waarom SAAR */
.features-grid {
    display: grid;
    grid-template-columns: 1fr; /* Mobile: 1 kolom - cards onder elkaar */
    gap: 24px;
    margin-top: 32px;
    text-align: left; /* Links uitlijnen */
    align-items: stretch; /* Zorg dat alle cards dezelfde hoogte hebben */
}

/* Tablet+: 2 kolommen */
@media (min-width: 640px) {
    .features-grid {
        grid-template-columns: repeat(2, 1fr); /* Cards naast elkaar op tablet+ */
        justify-items: stretch; /* Cards vullen volledige grid cel */
        align-items: stretch; /* Gelijkmatige hoogte */
    }
}

/* Custom assessment sectie: 3 kolommen op desktop,zelfde breedte als feature-cards daarboven */
.custom-assessment-grid-wrapper {
    max-width: none;
}

@media (min-width: 1024px) {
    .features-grid.features-grid--three-cols {
        grid-template-columns: repeat(3, 1fr);
        gap: 14px; /* Zelfde als features-slider voor consistente uitlijning */
    }
}

.feature-card {
    background: white;
    border: 1px solid var(--zinc-100);
    border-radius: 12px;
    padding: 24px; /* Verbeterde padding volgens 8px grid */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-align: left; /* Links uitlijnen */
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0; /* Flex-child mag krimpen voor gelijke hoogte */
    align-self: stretch; /* Vul gridcel volledig */
}

/* Tablet: Medium padding */
@media (min-width: 640px) {
    .feature-card {
        padding: 32px; /* Verbeterde spacing */
    }
}

/* Desktop: Meer padding */
@media (min-width: 1024px) {
    .feature-card {
        padding: 32px; /* Meer whitespace */
    }
}

/* Mobile: Feature card tekst aanpassingen */
@media (max-width: 639px) {
    .feature-card h3 {
        font-size: 16px; /* Iets kleiner op mobile */
    }
    
    .feature-card p {
        font-size: 14px; /* Iets kleiner op mobile */
    }
}

.feature-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border-color: var(--pink-200);
    transform: translateY(-2px);
}

/* Variant: Pink achtergrond voor feature cards */
.feature-card-pink {
    background: var(--pink-50) !important;
}

/* Lichte gradient (lavendel → wit) voor Co-creatie-kaart */
.feature-card-gradient {
    background: linear-gradient(135deg, #FAF9FC 0%, #F6F5FA 40%, #fff 100%) !important;
}

.feature-icon {
    width: 48px;
    height: 48px;
    background: var(--pink-50);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    margin-bottom: 20px;
    flex-shrink: 0; /* Voorkom dat icon krimpt */
}

.feature-icon svg {
    width: 24px;
    height: 24px;
    color: var(--pink-500);
}

.feature-card h3 {
    margin-bottom: 12px; /* Meer ruimte tussen titel en tekst */
    font-size: 18px;
    font-weight: 600;
    color: var(--zinc-900);
    text-align: left; /* Links uitlijnen */
    flex-shrink: 0; /* Voorkom dat titel krimpt */
}

.feature-card p {
    font-size: 14px; /* Body — 14px volgens huisstijlgids */
    line-height: 1.5; /* 150% voor betere leesbaarheid */
    text-align: left; /* Links uitlijnen */
    flex-grow: 1; /* Laat paragraaf groeien om ruimte te vullen */
    flex-shrink: 1;
    min-height: 0; /* Laat tekst meeschalen binnen flex */
    margin-bottom: 0; /* Verwijder margin-bottom voor betere uitlijning */
}

/* CTA in cards: vaste ruimte boven knop (zelfde als audience-card / sectie-CTA’s) */
.feature-card .btn {
    margin-top: var(--cta-spacing);
    flex-shrink: 0; /* Knop blijft volledig zichtbaar */
}

/* Assessment grid responsive */
.assessment-grid {
    display: grid;
    grid-template-columns: 1fr; /* Mobile: 1 kolom */
    gap: 24px;
    margin-top: 32px;
    text-align: left; /* Links uitlijnen */
    align-items: stretch; /* Gelijkmatige hoogte voor cards */
}

/* Tablet: 2 kolommen */
@media (min-width: 640px) {
    .assessment-grid {
        grid-template-columns: repeat(2, 1fr);
        justify-items: stretch; /* Cards vullen volledige grid cel */
        align-items: stretch; /* Gelijkmatige hoogte */
    }
}

/* Desktop: Blijft 2 kolommen voor assessments */
@media (min-width: 1024px) {
    .assessment-grid {
        grid-template-columns: repeat(2, 1fr);
        align-items: stretch; /* Gelijkmatige hoogte */
    }
}

.assessment-card {
    background: white;
    border-radius: 12px;
    padding: 32px;
    border: 1px solid var(--zinc-100);
    text-align: left;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.assessment-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border-color: var(--pink-200);
    transform: translateY(-2px);
}

.assessment-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
    flex-shrink: 0;
}

.assessment-tag {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px; /* Label — 12px volgens huisstijlgids */
    font-weight: 600;
    margin-bottom: 0;
    flex-shrink: 0;
    width: fit-content;
}

.assessment-card > .assessment-tag {
    margin-bottom: 16px;
}

.tag-popular {
    background: var(--pink-100);
    color: var(--pink-700);
}

.tag-new {
    background: var(--indigo-50);
    color: var(--indigo-600);
}

.tag-soon {
    background: #FDEFD6; /* licht beige */
    color: #8E4F32; /* roodbruin */
}

.tag-ontwikkeling {
    background: #E0F2FE; /* light blue */
    color: #0369A1;
}

.tag-gevalideerd {
    background: #DCFCE7; /* licht groen */
    color: #166534; /* donkergroen */
}

.assessment-card h3 {
    margin-bottom: 12px;
    font-size: 18px;
    font-weight: 700;
    color: var(--heading-color);
    text-align: left;
    flex-shrink: 0;
}

.assessment-card p {
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 16px;
    color: var(--zinc-600);
    text-align: left;
    flex-grow: 1;
    min-height: 0;
}

.assessment-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    font-size: 13px;
    color: var(--zinc-600);
    margin-top: 0;
    margin-bottom: 20px;
    flex-shrink: 0;
}

.assessment-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.assessment-meta-icon {
    flex-shrink: 0;
    color: var(--zinc-500);
}

.assessment-inclusief {
    background: var(--zinc-100);
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 0;
    flex-shrink: 0;
}

.assessment-inclusief-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--zinc-700);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 12px;
}

.assessment-inclusief-list {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--zinc-700);
}

.assessment-inclusief-list li {
    position: relative;
    padding-left: 24px;
    margin-bottom: 8px;
}

.assessment-inclusief-list li:last-child {
    margin-bottom: 0;
}

.assessment-inclusief-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.25em;
    width: 16px;
    height: 16px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23EC4899' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E") no-repeat center;
    background-size: 14px 14px;
}

.assessment-card-cta {
    margin-top: var(--cta-spacing);
    flex-shrink: 0;
    width: auto;
    align-self: flex-start;
}

/* Afbeeldingen: max-w-full, height auto */
img {
    max-width: 100%;
    height: auto;
}

/* CTA Section */
.cta-section {
    background: linear-gradient(135deg, var(--pink-500) 0%, var(--indigo-500) 100%);
    color: white;
    text-align: center;
}

.cta-section h2 {
    color: white;
    margin-bottom: 16px;
}

.cta-section p {
    color: rgba(255, 255, 255, 0.9);
    font-size: 18px;
    margin-bottom: 32px;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.cta-section .btn-primary {
    background: white;
    color: var(--pink-600);
}

.cta-section .btn-primary:hover {
    background: var(--zinc-100);
}

/* CTA section responsive */
@media (max-width: 639px) {
    .cta-section p {
        font-size: 16px;
        margin-bottom: 24px;
    }
    
    .cta-section .btn {
        width: auto;
        min-width: 140px;
    }
    
    .cta-section {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}

/* About - Hero Section */
.about-hero {
    background: linear-gradient(to bottom, var(--pink-50), white);
    padding-top: 100px; /* Compacter (was 120px) */
    padding-bottom: 48px; /* Compacter (was 60px) */
    text-align: center;
}

.about-hero h1 {
    font-size: clamp(2rem, 4.5vw, 2.875rem); /* groter dan sectietitels (max 2.5rem) */
    font-weight: 800;
    color: var(--heading-color);
    margin-bottom: 24px;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.about-hero p {
    font-size: clamp(1.125rem, 2vw, 1.25rem);
    color: var(--zinc-600);
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.6;
}

@media (min-width: 640px) {
    .about-hero {
        padding-top: 140px;
    }
}

/* About - Story Section */
.about-story {
    background: white;
    padding: 60px 0;
}

.story-content {
    max-width: 800px;
    margin: 0 auto;
}

.story-text h2 {
    color: var(--heading-color);
    margin-bottom: 32px;
}

.story-paragraphs {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.story-paragraphs p {
    font-size: 16px;
    line-height: 1.6;
    color: var(--zinc-600);
}

.story-paragraphs p strong {
    color: var(--zinc-900);
    font-weight: 500;
}

.story-visual {
    background: var(--zinc-50);
    border-radius: 24px;
    padding: 48px;
}

.comparison-box {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.comparison-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.comparison-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.comparison-old .comparison-icon {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.comparison-new .comparison-icon {
    background: rgba(34, 197, 94, 0.1);
    color: #22c55e;
}

.comparison-title {
    font-weight: 500;
    color: var(--zinc-900);
    margin-bottom: 4px;
}

.comparison-desc {
    font-size: 14px;
    color: var(--zinc-500);
}

/* About - SAAR Letters Section */
.about-saar {
    background: var(--zinc-50);
    padding: 60px 0;
}

.saar-header {
    text-align: center;
    margin-bottom: 64px;
}

.saar-header h2 {
    color: var(--heading-color);
    margin-bottom: 16px;
}

.saar-header p {
    font-size: 18px;
    color: var(--zinc-600);
}

.saar-letters {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.saar-letter-card {
    background: white;
    border-radius: 12px;
    padding: 32px;
    text-align: center;
    border: 1px solid var(--zinc-100);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.saar-letter-card:hover {
    box-shadow: 0 8px 24px rgba(99, 102, 241, 0.15);
    border-color: var(--indigo-200);
    transform: scale(1.02);
}

.saar-letter-icon {
    width: 56px;
    height: 56px;
    background: var(--indigo-100);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}

.saar-letter-icon span {
    font-size: 24px;
    font-weight: 700;
    color: var(--indigo-600);
}

.saar-letter-title {
    font-weight: 600;
    color: var(--zinc-900);
    margin-bottom: 4px;
}

.saar-letter-subtitle {
    font-size: 15px;
    font-weight: 500;
    color: var(--zinc-600);
    margin-bottom: 8px;
}

.saar-letter-desc {
    font-size: 14px;
    color: var(--zinc-500);
    line-height: 1.5;
}

/* About - Vision Section */
.about-vision {
    background: white;
    padding: 60px 0;
}

.vision-header {
    font-size: var(--section-title-font-size);
    font-weight: var(--section-title-font-weight);
    color: var(--heading-color);
    text-align: center;
    margin-bottom: 48px;
}

/* Sectietitels over hele site: zelfde grootte als 'Waar we in geloven' */
.section-header h2,
.saar-header h2,
.team-header h2,
.story-text h2,
.about-cta h2,
.cta-section h2,
.changency-content h2,
.contact-info h2,
.contact-block h2 {
    font-size: var(--section-title-font-size);
    font-weight: var(--section-title-font-weight);
}

/* Vision Slider - pijltjes buiten cards (zelfde als Beschikbare assessments) */
.vision-slider-wrapper {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 56px; /* Ruimte voor pijltjes buiten de cards */
}

.vision-slider-window {
    overflow: hidden;
    width: 100%;
}

.vision-slider {
    position: relative;
    width: 100%;
}

.vision-slider-track {
    display: flex;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

.vision-card {
    display: flex;
    flex-direction: column;
    background: var(--pink-50);
    border-radius: 24px;
    padding: 32px;
    border: 1px solid var(--pink-100);
    flex: 0 0 100%;
    min-width: 0;
    box-sizing: border-box;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Mobile/tablet - één card tegelijk, pijltjes buiten cards zoals assessments */
@media (max-width: 1023px) {
    .vision-slider-wrapper {
        padding: 0 48px; /* Ruimte voor pijltjes op mobile/tablet */
    }
    
    .vision-card {
        padding: 24px;
        border-radius: 16px;
    }
    
    .vision-arrow {
        display: flex; /* Toon pijltjes, zelfde als assessments */
        width: 36px;
        height: 36px;
    }
    
    .vision-arrow-prev {
        left: 4px;
    }
    
    .vision-arrow-next {
        right: 4px;
    }
}

.vision-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border-color: var(--pink-200);
    transform: translateY(-2px);
}

/* Icoon inline met titel: flex-row, geen zwevend blok */
.vision-title-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 14px;
    margin-bottom: 12px;
}

.vision-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    color: var(--pink-600);
}

.vision-icon svg {
    width: 26px;
    height: 26px;
}

.vision-card h3 {
    font-size: 20px;
    font-weight: 700;
    color: var(--zinc-900);
    margin: 0;
}

.vision-card p {
    margin: 0;
    margin-left: 40px; /* Uitlijnen met titel (icoon 26px + gap 14px) */
    color: var(--zinc-600);
    line-height: 1.6;
}


/* Slider dots: rondjes + streepje (actief), desktop én mobile identiek (geen ovale vervorming) */
.vision-slider-dots,
.assessments-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 24px;
}

.vision-dot,
.assessments-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background-color 0.2s ease, width 0.2s ease, border-radius 0.2s ease;
}

.vision-dot {
    background: var(--pink-200);
}

.vision-dot:hover {
    background: var(--pink-300);
}

.vision-dot.active {
    background: var(--pink-500);
    width: 24px;
    height: 8px;
    border-radius: 999px;
}

.assessments-dot {
    background: var(--indigo-200);
}

.assessments-dot:hover {
    background: var(--indigo-300);
}

.assessments-dot.active {
    background: var(--indigo-600);
    width: 24px;
    height: 8px;
    border-radius: 999px;
}

/* Mobile: dots blijven rondjes + streepje, geen ovale vervorming (button min-height 44px overschrijft niet) */
@media (max-width: 639px) {
    .vision-dot,
    .assessments-dot {
        min-height: 8px !important;
        height: 8px !important;
        width: 8px !important;
    }
    .vision-dot.active,
    .assessments-dot.active {
        min-height: 8px !important;
        height: 8px !important;
        width: 24px !important;
    }
}

/* Vision Slider Arrows - Subtiel op mobile */
.vision-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(244, 244, 245, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    color: var(--zinc-500);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    transition: all 0.2s ease;
    opacity: 0.6;
    backdrop-filter: blur(4px);
}

.vision-arrow:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    color: var(--pink-500);
}

.vision-arrow:active {
    transform: translateY(-50%) scale(0.92);
}

.vision-arrow-prev {
    left: 8px; /* Buiten de cards door padding op wrapper */
}

.vision-arrow-next {
    right: 8px; /* Buiten de cards door padding op wrapper */
}

.vision-arrow svg {
    width: 16px;
    height: 16px;
}

.vision-arrow:disabled {
    opacity: 0.25;
    cursor: not-allowed;
}

.vision-arrow:disabled:hover {
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    color: var(--zinc-500);
}

/* Assessments slider */
.assessments-section {
    padding: 60px 0;
    background: #FEF7F9; /* effen, in lijn met icon-backgrounds op Over SAAR */
}

.saar-quote-section {
    padding: 48px 0; /* Compacter (was 64px) */
    background: white;
}

.saar-quote-section .container {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
}

.saar-quote-text {
    font-size: clamp(1.25rem, 2vw, 1.5rem);
    font-weight: 600;
    color: var(--zinc-900);
}

.saar-quote-link {
    color: var(--pink-600);
    font-weight: 600;
    text-decoration: none;
}

.saar-quote-link:hover {
    text-decoration: underline;
    color: var(--pink-700);
}

/* Quote with photo layout */
.quote-with-photo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
}

.quote-photo-circle {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: var(--pink-100);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: 0 8px 24px rgba(236, 72, 153, 0.15);
}

.quote-photo-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

.quote-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: left;
}

.quote-cta-centered {
    text-align: center;
    margin-top: 24px;
}

.quote-author {
    font-size: 0.95rem;
    color: var(--zinc-500);
    font-weight: 500;
}

@media (max-width: 480px) {
    .quote-with-photo {
        flex-direction: column;
        text-align: center;
    }
    
    .quote-content {
        text-align: center;
        align-items: center;
    }
}

.assessments-slider {
    margin-top: 32px;
    position: relative;
    padding: 0 56px; /* Ruimte voor pijltjes buiten de cards */
}

.assessments-slider-window {
    overflow: hidden;
    width: 100%;
}

.assessments-slider-track {
    display: flex;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

.assessments-slider-track .assessment-card {
    flex: 0 0 100%;
    min-width: 0;
    padding: 28px;
    background: white;
    border: 1px solid var(--zinc-100);
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 240px;
    box-sizing: border-box;
}

/* Mobile slider - één card tegelijk zichtbaar */
@media (max-width: 1023px) {
    .assessments-slider {
        padding: 0 48px; /* Ruimte voor pijltjes op mobile */
    }
    
    .assessments-arrow {
        display: flex; /* Toon pijltjes op mobile */
        width: 36px;
        height: 36px;
    }
    
    .assessments-arrow-prev {
        left: 4px;
    }
    
    .assessments-arrow-next {
        right: 4px;
    }
}

.assessments-slider-track .assessment-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.assessments-slider-track .assessment-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--pink-50);
    color: var(--pink-600);
}

.assessments-slider-track .assessment-card h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--zinc-900);
}

.assessments-slider-track .assessment-card p {
    color: var(--zinc-600);
    line-height: 1.6;
    flex: 1;
}

.assessment-link {
    font-weight: 600;
    color: var(--pink-600);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.assessment-link:hover {
    color: var(--pink-700);
}

/* Assessments Slider Arrows - Subtiel op mobile */
.assessments-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(244, 244, 245, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    color: var(--zinc-500);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    transition: all 0.2s ease;
    opacity: 0.6;
    backdrop-filter: blur(4px);
}

.assessments-arrow:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    color: var(--indigo-500);
}

.assessments-arrow:active {
    transform: translateY(-50%) scale(0.92);
}

.assessments-arrow-prev {
    left: 8px; /* Buiten de cards door padding op slider */
}

.assessments-arrow-next {
    right: 8px; /* Buiten de cards door padding op slider */
}

.assessments-arrow svg {
    width: 16px;
    height: 16px;
}

.assessments-arrow:disabled {
    opacity: 0.25;
    cursor: not-allowed;
}

.assessments-arrow:disabled:hover {
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    color: var(--zinc-500);
}

/* Desktop: pijlen alleen zichtbaar bij hover op slider */
@media (min-width: 1024px) {
    .assessments-slider .assessments-arrow {
        opacity: 0;
        transition: opacity 0.2s ease;
    }
    .assessments-slider:hover .assessments-arrow {
        opacity: 0.6;
    }
    .assessments-slider .assessments-arrow:hover {
        opacity: 1;
    }
}

.assessments-cta {
    display: flex;
    justify-content: center;
    margin-top: 32px;
}

@media (max-width: 639px) {
    .assessments-section {
        padding: 48px 0;
    }
    
    .assessment-card {
        min-height: 220px;
        padding: 24px;
        border-radius: 12px;
    }
}

/* About - Team Section */
.about-team {
    background: linear-gradient(to bottom right, var(--pink-50), var(--indigo-50));
    padding: 60px 0;
}

.team-header {
    text-align: center;
    margin-bottom: 64px;
}

.team-header h2 {
    color: var(--heading-color);
    margin-bottom: 16px;
}

.team-header p {
    font-size: 18px;
    color: var(--zinc-600);
}

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

.team-card {
    background: white;
    border-radius: 24px;
    padding: 32px;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--zinc-100);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
}

.team-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border-color: var(--pink-200);
    transform: translateY(-2px);
}

.team-card-indigo:hover {
    border-color: var(--indigo-200);
}

.team-avatar {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    position: relative;
    overflow: hidden;
}

.team-avatar-pink {
    background: var(--pink-100);
}

.team-avatar-indigo {
    background: var(--indigo-100);
}

.team-avatar span,
.team-avatar .team-initials {
    font-size: 24px;
    font-weight: 700;
    position: absolute;
    z-index: 1;
}

.team-avatar-pink span,
.team-avatar-pink .team-initials {
    color: var(--pink-600);
}

.team-avatar-indigo span,
.team-avatar-indigo .team-initials {
    color: var(--indigo-600);
}

.team-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Aangepaste schaal per teamlid voor consistente verhoudingen */
.team-photo-ilse {
    transform: scale(1.35);
    object-position: center 25%;
}

.team-photo-remco {
    transform: scale(1.1);
    object-position: center 15%;
}

.team-photo-hans {
    transform: scale(1.1);
    object-position: center 15%;
}

.team-avatar img.team-photo[src]:not([src=""]) {
    opacity: 1;
    z-index: 2;
}

.team-avatar img.team-photo[src]:not([src=""]) ~ .team-initials {
    display: none;
}

.team-avatar img.team-photo[src=""] ~ .team-initials,
.team-avatar:not(:has(img.team-photo[src]:not([src=""]))) .team-initials {
    display: block;
}

.team-card h3 {
    font-size: 20px;
    font-weight: 700;
    color: var(--zinc-900);
    margin-bottom: 4px;
}

.team-role {
    color: var(--pink-600);
    font-weight: 500;
    margin-bottom: 16px;
}

.team-role-indigo {
    color: var(--indigo-500);
}

.team-bio {
    font-size: 14px;
    color: var(--zinc-600);
    line-height: 1.6;
    margin-bottom: 16px;
}

.team-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 14px;
    color: var(--zinc-400);
    text-decoration: none;
    margin-top: auto;
    transition: color 0.3s ease;
}

.team-link:hover {
    color: var(--pink-500);
}

.team-link-indigo:hover {
    color: var(--indigo-500);
}

.team-email {
    display: block;
    font-size: 14px;
    color: var(--zinc-400);
    text-decoration: none;
    margin-top: 8px;
    transition: color 0.3s ease;
}

.team-email:hover {
    color: var(--pink-500);
}

/* About - Changency Section */
.about-changency {
    background: white;
    padding: 60px 0;
}

.changency-content {
    max-width: 768px;
    margin: 0 auto;
    text-align: center;
}

.changency-content h2 {
    color: var(--heading-color);
    margin-bottom: 24px;
}

.changency-text {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 32px;
}

.changency-text p {
    font-size: 16px;
    color: var(--zinc-600);
    line-height: 1.6;
}

/* About - CTA Section */
.about-cta {
    background: linear-gradient(to right, var(--pink-500), var(--indigo-500));
    padding: 60px 0;
    text-align: center;
}

.about-cta h2 {
    color: white;
    margin-bottom: 16px;
    max-width: 768px;
    margin-left: auto;
    margin-right: auto;
}

.about-cta p {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 32px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.about-cta .btn-primary {
    background: white;
    color: var(--pink-600);
}

.about-cta .btn-primary:hover {
    background: var(--pink-50);
}

/* About - Responsive */
@media (max-width: 1023px) {
    .story-content {
        grid-template-columns: 1fr;
        gap: 48px;
    }

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

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

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

@media (max-width: 639px) {
    .about-story,
    .about-saar {
        margin-top: 24px;
    }
    

    .about-vision,
    .about-team,
    .about-changency,
    .about-cta {
        padding: 48px 0; /* Compacter (was 64px) */
    }
    
    .about-cta .btn {
        width: auto;
        min-width: 140px;
    }

    .saar-letters {
        grid-template-columns: 1fr;
    }

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

/* Contact */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
}

.contact-info h2 {
    margin-bottom: 16px;
}

.contact-info > p {
    margin-bottom: 32px;
    font-size: 16px;
}

.contact-details {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--zinc-600);
    text-decoration: none;
    font-size: 15px;
}

.contact-item:hover {
    color: var(--pink-500);
}

.contact-item svg {
    width: 20px;
    height: 20px;
    color: var(--pink-500);
}

.contact-form {
    background: white;
    border-radius: 20px;
    padding: 32px;
    border: 1px solid var(--zinc-200);
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 8px;
    color: var(--zinc-700);
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--zinc-200);
    border-radius: 8px;
    font-size: 15px;
    font-family: inherit;
    transition: border-color 0.2s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--pink-500);
}

.form-group textarea {
    min-height: 120px;
    resize: vertical;
}

.contact-form .btn {
    width: 100%;
    justify-content: center;
}

/* Contact grid responsive */
@media (max-width: 1023px) {
    .contact-grid {
        grid-template-columns: 1fr;
    }
}

/* Problem/Solution boxes */
.problem-solution {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    margin-top: 32px;
}

.problem-box, .solution-box {
    padding: 32px;
    border-radius: 20px;
}

.problem-box {
    background: var(--zinc-50);
}

.solution-box {
    background: var(--pink-50);
}

.problem-box h3, .solution-box h3 {
    margin-bottom: 16px;
}

.problem-box ul, .solution-box ul {
    list-style: none;
    padding: 0;
}

.problem-box li, .solution-box li {
    padding: 8px 0;
    padding-left: 28px;
    position: relative;
    color: var(--zinc-600);
    font-size: 15px;
}

.problem-box li::before {
    content: '✗';
    position: absolute;
    left: 0;
    color: var(--zinc-400);
}

.solution-box li::before {
    content: '';
    position: absolute;
    left: 0;
    width: 0;
    height: 0;
}

.solution-box li {
    display: flex;
    align-items: flex-start;
    padding-left: 0;
}

.solution-box li svg {
    flex-shrink: 0;
    margin-right: 8px;
    margin-top: 2px;
    color: var(--pink-500);
}

/* Problem/Solution responsive */
@media (max-width: 1023px) {
    .problem-solution {
        grid-template-columns: 1fr;
    }
}

/* Target Audience Grid (Voor wie is dit?) */
.target-audience-grid {
    display: grid;
    grid-template-columns: 1fr; /* Mobile: 1 kolom */
    gap: 24px;
    margin-top: 32px;
}

/* Tablet: 2 kolommen */
@media (min-width: 640px) {
    .target-audience-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Desktop: 2 kolommen */
@media (min-width: 1024px) {
    .target-audience-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Desktop variant: 3 kolommen voor specifieke secties */
@media (min-width: 1024px) {
    .target-audience-grid.three-col {
        grid-template-columns: repeat(3, 1fr);
    }
}

.target-audience-card {
    background: white;
    border: 1px solid var(--zinc-100);
    border-radius: 12px;
    padding: 32px;
    text-align: left;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.target-audience-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border-color: var(--pink-200);
    transform: translateY(-2px);
}

.target-audience-icon {
    width: 48px;
    height: 48px;
    background: var(--pink-50);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    color: var(--pink-500);
}

/* Indigo varianten verwijderd - terug naar Pink */

.target-audience-icon svg {
    width: 24px;
    height: 24px;
    stroke: var(--pink-500);
    color: var(--pink-500);
}

.target-audience-card p {
    font-size: 14px; /* Body — 14px volgens huisstijlgids */
    color: var(--zinc-700);
    margin: 0;
    line-height: 1.5; /* 150% voor betere leesbaarheid */
}

/* Usage Options Section (Hoe je SAAR kunt gebruiken) - SaaS Style */
.usage-options-section {
    background: var(--zinc-50); /* Lichtgrijs zoals consultants pagina */
}

.usage-options-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    margin-top: 32px;
}

@media (min-width: 768px) {
    .usage-options-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
    }
}

.usage-option-card {
    background: white;
    border: 1px solid var(--zinc-100);
    border-radius: 12px;
    padding: 32px 28px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    position: relative;
}

.usage-option-card:hover {
    border-color: var(--indigo-200);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

.usage-option-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--indigo-500); /* Paarse huisstijl kleur */
    color: white;
    font-weight: 700;
    font-size: 18px;
    margin-bottom: 20px;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.usage-option-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--zinc-900);
    margin-bottom: 20px;
    line-height: 1.3;
}

.usage-option-features {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
    flex-grow: 1;
}

.usage-option-features li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 14px;
    color: var(--zinc-600);
    line-height: 1.5;
    margin-bottom: 12px;
}

.usage-option-features li:last-child {
    margin-bottom: 0;
}

.usage-option-features li svg {
    flex-shrink: 0;
    color: var(--indigo-500); /* Paarse vinkjes */
    margin-top: 2px;
}

.usage-option-tagline {
    font-size: 13px;
    color: var(--zinc-500);
    margin: 0;
    padding-top: 16px;
    border-top: 1px solid var(--zinc-100);
    font-style: italic;
}

/* Consultant Steps Grid (Hoe het werkt - 4 stappen) */
.consultant-steps-grid {
    display: grid;
    grid-template-columns: 1fr; /* Mobile: 1 kolom */
    gap: 32px;
    margin-top: 32px;
    align-items: start;
}

/* Force vertical stacking on mobile/tablet */
@media (max-width: 1023px) {
    .consultant-steps-grid {
        display: flex !important;
        flex-direction: column !important;
    }
    
    .consultant-step-connector {
        display: none !important; /* Hide connectors on mobile */
    }
}

/* Desktop: 4 kolommen horizontaal */
@media (min-width: 1024px) {
    .consultant-steps-grid {
        grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
        gap: 24px;
    }
    
    .consultant-step-connector {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 16px;
        position: relative;
        align-self: start;
        padding-top: 0;
        height: 56px;
    }
    
    .consultant-step-connector::before {
        content: '';
        position: absolute;
        width: 100%;
        height: 1px;
        border-top: 1px dashed var(--indigo-200); /* Alle connectors Indigo */
        top: 28px;
        left: 0;
        opacity: 0.6;
    }
}

.consultant-step {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 0;
}

.consultant-step-number {
    width: 56px;
    height: 56px;
    background: rgba(99, 102, 241, 0.9); /* Indigo-500 met 90% opacity voor transparantie */
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 700;
    font-size: 22px;
    margin: 0 auto 16px;
    flex-shrink: 0;
}

.consultant-step-icon {
    display: none !important; /* Verberg iconen - toon alleen nummers */
    width: 48px;
    height: 48px;
    background: var(--indigo-50);
    border-radius: 12px;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    color: var(--indigo-500);
    flex-shrink: 0;
}

.consultant-step-icon,
.consultant-step-icon svg {
    display: none !important; /* Verberg iconen en SVG's volledig */
}

.consultant-step h3 {
    margin-bottom: 8px;
    font-size: 18px;
    font-weight: 600;
    color: var(--zinc-900);
}

.consultant-step p {
    font-size: 14px; /* Body — 14px volgens huisstijlgids */
    color: var(--zinc-600);
    line-height: 1.5; /* 150% voor betere leesbaarheid */
    text-align: center;
    max-width: 520px;
    margin: 0 auto;
}

/* Mobile: Consultant steps links uitgelijnd */
@media (max-width: 1023px) {
    .consultant-step {
        text-align: center;
        align-items: center;
    }
    
    .consultant-step-number {
        margin-left: 0;
        margin-right: 0;
    }
    
    .consultant-step-icon {
        display: none !important; /* Verberg iconen op mobile ook */
        margin-left: 0;
    }
}

/* Features-sectie: subtiele achtergrond, wit kaartjes laten uitkomen */
.features-section {
    overflow: visible;
    background: var(--zinc-50);
}

.features-section .container {
    overflow: visible;
}

/* What You Get Grid – 5×2 op desktop, ademende gaps */
.what-you-get-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 32px;
}

@media (min-width: 640px) {
    .what-you-get-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
}

/* 5 kolommen × 2 rijen (2 rijen van 5) */
@media (min-width: 1024px) {
    .what-you-get-grid {
        grid-template-columns: repeat(5, 1fr);
        gap: 14px;
    }
}

/* Feature-kaart: cleane weergave, subtiele hover zoals bij S A A R op Over SAAR */
.what-you-get-card {
    background: white;
    border: 1px solid var(--zinc-100);
    border-radius: 12px;
    padding: 32px;
    text-align: left;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.what-you-get-card:hover {
    box-shadow: 0 8px 24px rgba(236, 72, 153, 0.12);
    border-color: var(--pink-200);
    transform: scale(1.02);
}

.what-you-get-card h3 {
    margin-bottom: 8px;
    font-size: 18px;
    font-weight: 600;
    color: var(--zinc-900);
}

.what-you-get-card p {
    font-size: 14px;
    color: var(--zinc-600);
    line-height: 1.5;
    margin: 0;
}

/* Features slider – 3 kaartjes op desktop, 1 op mobiel */
.features-slider .features-slider-track {
    display: flex;
    gap: 14px;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

.features-slider .features-slider-track .what-you-get-card {
    flex: 0 0 100%;
    min-width: 0;
    box-sizing: border-box;
}

/* Mobiel: 1 card per slide – track breed genoeg, elke card = volle breedte venster */
@media (max-width: 1023px) {
    .features-slider .features-slider-track {
        width: 1500%; /* tot 15 cards; 1 card = 100%/15 = volle venster */
        gap: 0;
    }
    .features-slider .features-slider-track .what-you-get-card {
        flex: 0 0 calc(100% / 15); /* 1 card = 100% van venster */
    }
}

.features-slider .features-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 24px;
}

@media (min-width: 1024px) {
    .features-slider .features-slider-track .what-you-get-card {
        flex: 0 0 calc((100% - 28px) / 3); /* 3 cards + 2 gaps */
    }
}

/* Legacy: flip-kaart (niet meer in gebruik) */
.what-you-get-card.flip-card {
    background: transparent;
    border: none;
    border-radius: 10px;
    padding: 0;
    text-align: left;
    min-height: 110px;
    perspective: 1200px;
    transform-style: preserve-3d;
}

/* Hover + focus: flip en duidelijke feedback (toetsenbord krijgt zelfde gedrag) */
@media (min-width: 768px) {
    .what-you-get-card.flip-card:hover .flip-card-inner,
    .what-you-get-card.flip-card:focus-within .flip-card-inner {
        transform: rotateY(180deg);
        box-shadow: 0 4px 16px rgba(99, 102, 241, 0.2);
        border-left-color: var(--indigo-600);
    }

    /* Focus-ring in indigo, consistent met feature-styling */
    .what-you-get-card.flip-card:focus {
        outline: none;
    }
    .what-you-get-card.flip-card:focus-visible .flip-card-inner {
        box-shadow: 0 0 0 2px var(--indigo-500), 0 1px 4px rgba(99, 102, 241, 0.08);
    }
    .what-you-get-card.flip-card:focus-visible:focus-within .flip-card-inner {
        box-shadow: 0 0 0 2px var(--indigo-500), 0 4px 16px rgba(99, 102, 241, 0.2);
    }
}

/* Feature-kaart: wit, indigo randaccent, iets meer ruimte */
.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 110px;
    transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease, border-color 0.3s ease;
    transform-style: preserve-3d;
    background: white;
    border: 1px solid var(--indigo-100);
    border-left: 3px solid var(--indigo-500);
    border-radius: 10px;
    padding: 14px;
    box-shadow: 0 1px 4px rgba(99, 102, 241, 0.08);
}

.flip-card-front,
.flip-card-back {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 14px;
}

.flip-card-front {
    background: white;
    flex-direction: row;
    align-items: flex-start;
    gap: 12px;
}

.flip-card-front .what-you-get-icon {
    margin-bottom: 0;
    flex-shrink: 0;
}

.flip-card-back {
    background: white;
    transform: rotateY(180deg);
    justify-content: center;
}

/* Geen flip-animatie voor wie reduced motion wil */
@media (prefers-reduced-motion: reduce) {
    .flip-card-inner {
        transition-duration: 0.15s;
    }
}

/* Mobiel: geen flip, front + back onder elkaar zichtbaar; feature-styling blijft */
@media (max-width: 767px) {
    .what-you-get-card.flip-card {
        min-height: 0;
    }

    .features-section .flip-card-inner {
        position: static;
        min-height: 0;
        transform: none !important;
    }

    .features-section .flip-card-front,
    .features-section .flip-card-back {
        position: static;
        transform: none;
        backface-visibility: visible;
        -webkit-backface-visibility: visible;
        padding: 0;
    }

    .features-section .flip-card-front {
        margin-bottom: 6px;
    }

    .features-section .flip-card-back {
        padding: 0;
    }

    .features-section .flip-card-back p {
        margin: 0;
    }
}

/* Icoon op feature-kaart: cleane stijl, roze accent */
.what-you-get-card .what-you-get-icon {
    width: 48px;
    height: 48px;
    background: var(--pink-50);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    color: var(--pink-500);
    flex-shrink: 0;
}

.what-you-get-card .what-you-get-icon svg {
    width: 24px;
    height: 24px;
    stroke: var(--pink-500);
    color: var(--pink-500);
}

/* Contact page layout */
.contact-section {
    padding: 60px 0;
    background: white;
}

.contact-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 24px;
    max-width: 600px;
    margin: 0 auto;
}

.contact-block h2 {
    margin-bottom: 8px;
}

.contact-card {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    align-items: center;
    gap: 40px;
    max-width: 1100px;
    margin: 0 auto;
    box-shadow: none;
}

.contact-photo img {
    width: 220px;
    height: 220px;
    object-fit: cover;
    border-radius: 18px;
    display: block;
    margin: 0 auto;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
}

.contact-photo-circle {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: var(--pink-100);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(236, 72, 153, 0.15);
}

.contact-photo-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

.contact-photo-placeholder {
    width: 220px;
    height: 220px;
}

.contact-card-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
}

.contact-body-inner {
    width: 100%;
    max-width: 520px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
}

.contact-lead {
    font-size: 17px;
    color: var(--zinc-600);
    margin: 0;
    text-align: center;
    max-width: 400px;
    line-height: 1.6;
}

.contact-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

.contact-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 140px;
}

.contact-btn svg {
    color: currentColor;
}

.contact-avatar {
    width: 128px;
    height: 128px;
    font-size: 28px;
    margin: 0 auto;
}

.contact-reach-section {
    padding: 56px 0; /* Compacter (was 72px) */
    background: linear-gradient(180deg, white 0%, var(--pink-50) 100%);
}

/* Contact Tags - Inline pill badges */
.contact-tags-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 32px;
}

.contact-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: white;
    border: 1px solid var(--zinc-200);
    border-radius: 999px;
    font-size: 14px;
    font-weight: 500;
    color: var(--zinc-700);
    transition: all 0.2s ease;
}

.contact-tag:hover {
    border-color: var(--pink-300);
    box-shadow: 0 2px 8px rgba(236, 72, 153, 0.1);
}

.contact-tag svg {
    color: var(--pink-500);
    flex-shrink: 0;
}

@media (max-width: 1023px) {
    .contact-card {
        grid-template-columns: 1fr;
        text-align: center;
        padding: 0;
        gap: 28px;
    }
    
    .contact-card-body {
        align-items: center;
    }
    
    .contact-buttons {
        justify-content: center;
    }
}

@media (max-width: 639px) {
    .contact-photo img {
        width: 180px;
        height: 180px;
    }
    
    .contact-photo-placeholder {
        width: 180px;
        height: 180px;
    }
    
    .contact-section {
        padding: 48px 0; /* Compacter */
    }
    
    .contact-reach-section {
        padding: 48px 0; /* Compacter */
    }
}

.what-you-get-icon svg {
    width: 18px;
    height: 18px;
    stroke: var(--indigo-500);
    color: var(--indigo-500);
}

.flip-card-front h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--zinc-900);
    line-height: 1.35;
}

.flip-card-back p {
    font-size: 12px;
    color: var(--zinc-600);
    line-height: 1.45;
    margin: 0;
}

/* Assessment Cards Grid (Detailed) */
.assessment-cards-grid {
    display: grid;
    grid-template-columns: 1fr; /* Mobile: 1 kolom */
    gap: 24px;
    margin-top: 32px;
}

/* Tablet+: 2 kolommen */
@media (min-width: 640px) {
    .assessment-cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.assessment-card-detailed {
    background: white;
    border: 1px solid var(--zinc-100);
    border-radius: 12px;
    padding: 32px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-align: left;
}

.assessment-card-detailed:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border-color: var(--pink-200);
    transform: translateY(-2px);
}

.assessment-card-icon {
    width: 64px;
    height: 64px;
    background: var(--pink-50);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    color: var(--pink-500);
}

.assessment-card-icon svg {
    width: 32px;
    height: 32px;
    stroke: var(--pink-500);
    color: var(--pink-500);
}

.assessment-card-detailed h3 {
    margin-bottom: 12px;
    font-size: 20px;
    font-weight: 600;
    color: var(--zinc-900);
}

.assessment-card-detailed p {
    font-size: 14px; /* Body — 14px volgens huisstijlgids */
    color: var(--zinc-600);
    line-height: 1.5; /* 150% voor betere leesbaarheid */
    margin-bottom: 20px;
}

.assessment-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 20px;
}

.assessment-badge {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.badge-time {
    background: var(--pink-100);
    color: var(--pink-700);
}

.badge-report {
    background: var(--zinc-100);
    color: var(--zinc-600);
}

/* Checklist */
.checklist {
    list-style: none;
    padding: 0;
    margin-top: 24px;
}

.checklist li {
    padding: 12px 0;
    padding-left: 32px;
    position: relative;
    color: var(--zinc-700);
    border-bottom: 1px solid var(--zinc-100);
}

.checklist li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--pink-500);
    font-weight: 600;
}

/* Footer */
footer {
    background: var(--zinc-900);
    color: white;
    padding: 48px 0 24px; /* Compacter (was 64px 0 32px) */
}

.footer-grid {
    display: grid;
    grid-template-columns: 1fr; /* Mobile: 1 kolom */
    gap: 32px;
    margin-bottom: 48px;
    text-align: left; /* Standaard links uitlijnen */
}

/* Mobile: Footer betere uitlijning - Force 1 kolom */
@media (max-width: 639px) {
    footer {
        padding: 48px 0 24px; /* Iets minder padding op mobile */
    }
    
    .footer-grid {
        grid-template-columns: 1fr !important; /* Force 1 kolom op mobile */
        gap: 40px; /* Meer ruimte tussen kolommen op mobile voor betere scheiding */
        margin-bottom: 32px;
        text-align: left !important; /* Force links uitlijnen */
        justify-items: start; /* Links uitlijnen van grid items */
    }
    
    .footer-col {
        width: 100%;
        margin-bottom: 0;
        margin-left: 0 !important; /* Geen margin links */
        padding-left: 0 !important; /* Geen padding links */
        text-align: left !important; /* Force links uitlijnen */
        display: flex;
        flex-direction: column;
        align-items: flex-start; /* Links uitlijnen van alle items */
    }
    
    .footer-col h4 {
        margin-bottom: 16px; /* Minder ruimte tussen titel en links */
        font-size: 15px; /* Iets groter voor betere leesbaarheid */
        text-align: left !important; /* Links uitlijnen */
        margin-left: 0; /* Zorg dat er geen margin is */
        padding-left: 0; /* Zorg dat er geen padding is */
    }
    
    .footer-col a {
        padding: 10px 0; /* Meer verticale padding voor betere touch targets */
        min-height: 44px; /* Betere touch targets */
        display: flex;
        align-items: center;
        justify-content: flex-start; /* Links uitlijnen binnen flex container */
        border-bottom: 1px solid rgba(255, 255, 255, 0.08); /* Subtiele scheiding */
        text-align: left !important; /* Links uitlijnen */
        margin-left: 0 !important; /* Zorg dat er geen margin is */
        padding-left: 0 !important; /* Zorg dat er geen padding is */
        width: 100%; /* Volledige breedte voor correcte uitlijning */
    }
    
    .footer-col a:last-child {
        border-bottom: none;
    }
    
    .footer-brand {
        text-align: left !important; /* Links uitlijnen op mobile voor consistentie */
        margin-bottom: 0;
        margin-left: 0; /* Zorg dat er geen margin is */
        padding-left: 0; /* Zorg dat er geen padding is */
    }
    
    .footer-brand p {
        max-width: 100%; /* Volledige breedte op mobile */
        text-align: left !important; /* Links uitlijnen */
        margin-top: 12px;
        margin-left: 0; /* Zorg dat er geen margin is */
        padding-left: 0; /* Zorg dat er geen padding is */
    }
    
    .footer-bottom {
        flex-direction: column !important; /* Force verticaal op mobile */
        align-items: flex-start !important; /* Links uitlijnen */
        gap: 12px; /* Ruimte tussen copyright en email */
        text-align: left !important; /* Links uitlijnen */
    }
    
    .footer-bottom p,
    .footer-bottom a {
        text-align: left !important; /* Links uitlijnen */
        margin-left: 0; /* Zorg dat er geen margin is */
        padding-left: 0; /* Zorg dat er geen padding is */
        width: 100%; /* Volledige breedte op mobile */
    }
}

/* Tablet: 2 kolommen */
@media (min-width: 640px) and (max-width: 1023px) {
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px;
        text-align: left; /* Links uitlijnen */
    }
    
    .footer-brand {
        text-align: left; /* Links uitlijnen op tablet+ */
    }
    
    .footer-brand p {
        text-align: left;
    }
    
    .footer-col h4,
    .footer-col a {
        text-align: left; /* Links uitlijnen */
    }
}

/* Desktop: 4 kolommen naast elkaar */
@media (min-width: 1024px) {
    .footer-grid {
        grid-template-columns: 2fr 1fr 1fr 1fr;
        gap: 48px;
        text-align: left; /* Links uitlijnen */
    }
    
    .footer-col h4,
    .footer-col a {
        text-align: left !important; /* Links uitlijnen - force */
        margin-left: 0 !important;
        padding-left: 0 !important;
    }
}

.footer-brand p {
    color: var(--zinc-400);
    font-size: 14px;
    margin-top: 16px;
    max-width: 280px;
    text-align: left; /* Links uitlijnen */
}

.footer-col h4 {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 20px;
    color: var(--zinc-300);
    text-align: left !important; /* Links uitlijnen - force */
    margin-left: 0 !important;
    padding-left: 0 !important;
}

.footer-col a {
    display: block;
    color: var(--zinc-400);
    text-decoration: none;
    font-size: 14px;
    margin-bottom: 12px;
    transition: color 0.2s;
    padding: 4px 0; /* Extra touch target ruimte */
    min-height: 32px; /* Betere touch targets op mobile */
    text-align: left !important; /* Links uitlijnen - force */
    margin-left: 0 !important; /* Zorg dat er geen margin is */
    padding-left: 0 !important; /* Zorg dat er geen padding is */
}

.footer-col a:hover {
    color: white;
}

.footer-bottom {
    padding-top: 32px;
    border-top: 1px solid var(--zinc-800);
    display: flex;
    flex-direction: column; /* Mobile: verticaal */
    justify-content: flex-start; /* Links uitlijnen */
    align-items: flex-start; /* Links uitlijnen */
    gap: 16px;
    text-align: left; /* Links uitlijnen */
}

/* Desktop: Footer bottom horizontaal */
@media (min-width: 640px) {
    .footer-bottom {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start; /* Links uitlijnen */
        text-align: left;
    }
    
    .footer-bottom p,
    .footer-bottom a {
        text-align: left; /* Links uitlijnen */
    }
}

.footer-bottom p {
    color: var(--zinc-500);
    font-size: 13px;
    text-align: left; /* Links uitlijnen */
}

.footer-bottom a {
    color: var(--zinc-500);
    text-decoration: none;
    font-size: 13px;
    text-align: left; /* Links uitlijnen */
}

.footer-bottom a:hover {
    color: var(--zinc-300);
}

/* Tablet: Footer kan 2 kolommen hebben */

/* Zorg dat alle links en buttons touch-friendly zijn op mobile */
@media (max-width: 639px) {
    a:not(.footer-col a):not(.footer-brand a), button:not(.vision-dot):not(.assessments-dot) {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    
    .nav-links a {
        min-height: 44px;
        padding: 12px 0;
    }
    
    /* Card links touch-friendly */
    .audience-card {
        min-height: auto; /* Laat cards hun natuurlijke hoogte behouden */
    }
    
    .card-link {
        min-height: 44px;
        display: flex;
        align-items: center;
    }
    
    /* Footer links betere touch targets */
    .footer-col a {
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: flex-start !important; /* Links uitlijnen binnen flex container */
        text-align: left !important; /* Links uitlijnen */
        margin-left: 0 !important;
        padding-left: 0 !important;
        width: 100% !important; /* Volledige breedte voor correcte uitlijning */
    }
}

/* Utility classes */
.text-center { text-align: center; }
.mt-4 { margin-top: 16px; }
.mt-8 { margin-top: 32px; }
.mb-4 { margin-bottom: 16px; }
.mb-8 { margin-bottom: 32px; }

/* Page hero (smaller) */
.page-hero {
    padding-top: 100px; /* Compacter (was 120px) */
    padding-bottom: 48px; /* Compacter (was 60px) */
    background: linear-gradient(180deg, var(--pink-50) 0%, white 100%);
    text-align: center;
}

.page-hero h1 {
    margin-bottom: 16px;
    font-size: clamp(2rem, 4.5vw, 2.875rem); /* groter dan sectietitels (max 2.5rem) */
    color: var(--heading-color);
}

.page-hero p {
    font-size: clamp(16px, 2vw, 18px);
    color: var(--zinc-600);
    max-width: 600px;
    margin: 0 auto;
}

/* Page hero buttons responsive */
.page-hero > .container > div {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
    margin-top: 32px;
}

.page-hero .btn {
    width: 100%;
    max-width: 280px;
}

@media (min-width: 640px) {
    .page-hero {
        padding-top: 140px;
    }
    
    .page-hero > .container > div {
        flex-direction: row;
        justify-content: center;
        gap: 16px;
    }
    
    .page-hero .btn {
        width: auto;
        max-width: none;
    }
}

/* Success message */
.success-message {
    background: #D1FAE5;
    color: #065F46;
    padding: 20px;
    border-radius: 12px;
    text-align: center;
    margin-bottom: 24px;
}