:root {
 
    
    /* NIEUWE VARIABELEN */
    --kleur-bg-geel: #f7f7ea;
    --kleur-bg-blauw: #F0F8FF;
    --kleur-bg-groen-soft: #d9e3e0 ; /* Let op: de laatste 2 tekens '3d' maken het doorzichtig */
}

/* --------------------------------------------------------------------------
   1. HERO SECTIE (Perfect Overlapping Wave)
   -------------------------------------------------------------------------- */

.hero--action-center {
    position: relative;
    /* We trekken hem iets harder omhoog (-100px) om zeker te zijn dat hij onder de header start */
    margin-top: -100px; 
    background-color: transparent;
    overflow: visible; 
    z-index: 10;
}

.hero__bg-wrapper {
    position: relative;
    width: 100%;
    /* AANGEPAST: Iets minder hoog (was 75vh), zodat de golf mooier in beeld valt */
    height: 65vh; 
    z-index: 1;
    
    /* --- NIEUWE CODE: Clip-path uitgeschakeld voor een rechte lijn --- */
    /* clip-path: url(#hero-wave-shape); */
    /* -webkit-clip-path: url(#hero-wave-shape); */
    
    /* OPMERKING: We behouden de border-radius-truc optioneel als je de hoekjes 
       onderin iets wilt afronden, maar voor 'strak' laten we dit zo. */
    /* ---------------------------------------------------------------- */
    
    background-color: var(--kleur-primair);
    overflow: hidden;
}
.hero__bg-image {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center;
    animation: slowZoom 20s infinite alternate;
}

/* Styling voor de video achtergrond */
.hero__bg-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* Dit zorgt dat de video het vlak vult zonder te vervormen, net als background-size: cover */
    object-fit: cover; 
    
    z-index: 0; /* Helemaal achteraan */
}

.hero__bg-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.55);
    z-index: 2;
}

/* --- De Content Wrapper --- */
.hero__center-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    /* AANGEPAST: Matcht de hoogte van de wrapper */
    height: 65vh; 
    z-index: 10;
    padding: 0 20px;
    
    /* AANGEPAST: Iets meer ruimte aan de bovenkant ivm header */
    padding-top: 100px; 
    
    display: flex;
    flex-direction: column;
    align-items: center;
}
/* Groep A: Tekst (Komt in het midden van de beschikbare ruimte) */
.hero__text-group {
    margin-top: auto;    /* Duw naar beneden */
    margin-bottom: auto; /* Duw naar boven -> Resultaat: Centraal */
    text-align: center;
    max-width: 800px;
    color: var(--kleur-wit);
    animation: fadeInUp 1s ease-out;
}

.hero__main-title {
    font-family: var(--font-titel);
    font-size: 3.5rem;
    margin-bottom: 1rem;
    line-height: 1.1;
    text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

.hero__sub-text {
    font-family: var(--font-body);
    font-size: 1.25rem;
    margin: 0;
    font-weight: 400;
    opacity: 0.95;
}

/* Groep B: Het Anker voor Zoeken + Knoppen */
.hero__search-anchor {
    /* 1. Positie: Absolute ten opzichte van de hero container */
    position: absolute;
    top: 100%; /* Start precies onder de foto */
    
    /* 2. HORIZONTALE CENTRERING (De Fix) */
    left: 50%;
    transform: translateX(-50%); /* Schuif 50% van eigen breedte terug naar links */
    
    /* 3. VERTICALE CORRECTIE */
    /* Trek hem omhoog zodat het midden van de balk op de lijn ligt */
    margin-top: -38px; 
    
    /* 4. BREEDTE BEHEERSING */
    width: 95%; /* Op mobiel bijna schermbreedte (met randje vrij) */
    max-width: 850px; /* Op desktop maximaal 850px */
    
    /* Flexbox voor de inhoud (divider en knoppen) */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px; 
    
    z-index: 20;
}

.hero__search-wrapper {
    /* NIEUW: Dwing de wrapper om de volle breedte van de parent (850px) te vullen */
    width: 100%; 
    
    margin-bottom: 0; /* De gap in de parent regelt nu de afstand */
    position: relative;
}

/* --- De Zoekbalk --- */
.hero__search-form {
    display: flex;
    align-items: center;
    background: #ffffff; /* Wit contrast op de rand */
    border-radius: 50px;
    padding: 8px;
    
    /* Dikke schaduw voor diepte */
    box-shadow: 0 15px 35px rgba(0,0,0,0.15);
    border: 1px solid rgba(0,0,0,0.05);
    width: 100%;
}

.hero__search-form:focus-within {
    transform: scale(1.02);
    box-shadow: 0 20px 50px rgba(0,0,0,0.2);
}

.hero__search-input {
    flex-grow: 1;
    border: none;
    background: transparent;
    padding: 15px 25px;
    font-size: 1.1rem;
    font-family: var(--font-body);
    color: var(--kleur-tekst);
    outline: none;
}
.hero__search-input::placeholder { color: #999; }

.hero__search-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background-color: var(--kleur-primair);
    color: var(--kleur-wit);
    border: none;
    padding: 14px 28px;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease;
}
.hero__search-btn:hover {
    background-color: var(--kleur-accent);
    color: var(--kleur-primair);
}

/* In homepage.css */

/* --- De Divider (Lijn met tekst) --- */
.hero__divider {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    
    /* Zorgt dat de lijn niet breder wordt dan de knoppen eronder */
    max-width: 500px; 
    
    margin: 5px 0; /* Ruimte boven en onder de lijn */
    color: #999;   /* Zacht grijs voor de tekst */
    font-size: 0.85rem;
    font-weight: 500;
    text-transform: lowercase; /* Of 'uppercase' als je dat mooier vindt */
}

/* De lijnen links en rechts */
.hero__divider::before,
.hero__divider::after {
    content: '';
    flex: 1;        /* Vult de resterende ruimte */
    height: 1px;    /* Dikte van de lijn */
    background-color: #e0e0e0; /* Heel lichtgrijs */
    margin: 0 15px; /* Ruimte tussen de tekst en de lijn */
}

/* --- De Knoppen (Liggen nu op het wit) --- */
.hero__quick-actions {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    justify-content: center;
}

.hero__action-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    
    /* Styling voor op witte achtergrond */
    background-color: transparent;
    border: 1px solid #ddd;
    color: #666;
    
    padding: 10px 20px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

.hero__action-pill:hover {
    border-color: var(--kleur-primair);
    color: var(--kleur-primair);
    transform: translateY(-2px);
    background-color: #f9f9f9;
}

/* Accent Knop (Bibliotheek) */
.hero__action-pill--accent {
    background-color: rgba(255, 196, 0, 0.15); /* Heel licht geel */
    border-color: var(--kleur-accent);
    color: var(--kleur-primair);
}
.hero__action-pill--accent:hover {
    background-color: var(--kleur-accent);
    color: var(--kleur-primair);
}

/* RESPONSIVE */
@media (max-width: 800px) {
    /* 1. Hoogte Hero aanpassen */
    .hero__bg-wrapper, 
    .hero__center-content { height: 65vh; } 
    
    .hero__main-title { font-size: 2.2rem; margin-bottom: 0.5rem; }
    .hero__sub-text { font-size: 1rem; }
    
    /* 2. De Witte Balk (Container) */
    .hero__search-form {
        padding: 4px; 
        display: flex;
        align-items: center;    /* Verticaal centreren is cruciaal */
        justify-content: space-between; 
        min-height: auto; 
    }

    /* 3. Het Invulveld */
    .hero__search-input { 
        font-size: 1rem; 
        height: 44px;           /* Vaste hoogte */
        line-height: normal;    /* Normale tekstuitlijning */
        padding: 0 0 0 15px;    /* Alleen links padding */
        margin: 0;              /* Geen marges */
        border: none;
        background: transparent;
        flex-grow: 1;           /* Vul de ruimte */
        width: auto;
        -webkit-appearance: none;
    }
    
    /* 4. De Ronde Knop (De Fix) */
    .hero__search-btn { 
        /* Forceer de afmetingen */
        width: 44px !important;      
        height: 44px !important;     
        
        /* Reset de desktop padding die de boel verpest */
        padding: 0 !important;       
        
        /* Reset line-height zodat het icoon niet zweeft */
        line-height: 1 !important;   
        
        border-radius: 50%; 
        border: none;
        
        /* Flexbox centrering voor het icoon */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        
        margin: 0 0 0 5px !important; 
        flex-shrink: 0; 
    }
    
    /* Icoontje correctie */
    .hero__search-btn i {
        position: relative;
        /* Soms helpt een minieme correctie als het icoon optisch niet in het midden lijkt */
        top: 0; 
    }

    /* Verberg desktop elementen */
    .desktop-only { display: none; }
    .hero__quick-actions { margin-top: 10px; }
}

/* ==========================================================================
   2. WAT IS QIGO? (3-KOLOMS - FINAL FIX)
   ========================================================================== */

   /* --- NIEUWE INTRO STYLING (Wat is QiGO?) --- */

.intro-content-wrapper {
    max-width: 800px;
    margin: 0 auto 60px auto; /* Centreert het blok en geeft ruimte onderin */
    text-align: center;
    position: relative;
    z-index: 2;
}

/* De dikgedrukte ondertitel (Geel/Oranje) */
.intro-lead {
    font-family: var(--font-subtitel); /* Comfortaa */
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--kleur-accent); /* De gele/oranje kleur */
    line-height: 1.4;
    margin-bottom: 20px;
}

/* De broodtekst */
.intro-body {
    font-family: var(--font-body);
    font-size: 1.1rem;
    line-height: 1.8;
    color: #555;
    margin-bottom: 30px;
}

/* --- Knoppen Groep --- */
.intro-btn-group {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-top: 25px;
    flex-wrap: wrap; /* Breekt netjes af op mobiel */
}

/* Primaire Knop (Gevuld) */
.btn-primary-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background-color: var(--kleur-primair);
    color: #fff;
    padding: 12px 30px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(26, 83, 92, 0.2);
}

.btn-primary-pill:hover {
    background-color: var(--kleur-accent);
    color: var(--kleur-primair);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(26, 83, 92, 0.3);
}

/* Secundaire Knop (Alleen tekst/link) */
.btn-secondary-link {
    color: var(--kleur-primair);
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    padding: 10px 15px;
    border-radius: 50px;
    transition: color 0.2s ease, background 0.2s ease;
}

.btn-secondary-link:hover {
    color: var(--kleur-accent);
    background-color: rgba(0,0,0,0.03); /* Heel subtiel grijs vlakje bij hover */
}

/* --- RESPONSIVE AANPASSINGEN --- */
@media (max-width: 768px) {
    .intro-lead {
        font-size: 1.15rem;
    }
    .intro-body {
        font-size: 1rem;
        padding: 0 10px; /* Beetje padding aan zijkant op mobiel */
    }
    /* Verberg de <br> op mobiel zodat tekst doorloopt */
    .desktop-only {
        display: none;
    }
}
/* --- NIEUWE SPLIT HEADER (Minimale witruimte & Knoppen naast elkaar) --- */

.intro-split-header {
    display: flex;
    flex-direction: column; /* Mobiel: onder elkaar */
    gap: 10px;              /* Minimale afstand tussen titel en tekst */
    margin-bottom: 30px;    /* Minimale afstand onder het hele blok */
    text-align: center; 
    width: 100%;
}

.intro-title-col, .intro-text-col { width: 100%; }

.intro-lead {
    font-family: var(--font-subtitel);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--kleur-accent);
    line-height: 1.3;
    margin-bottom: 8px; /* Heel strak op de volgende tekst */
}

.section-body {
    margin-bottom: 15px; /* Strak op de knoppen */
}

/* Knoppen Container Algemeen */
.header-actions.intro-actions {
    margin-top: 0;
    display: flex;
    flex-direction: row;      /* ALTIJD naast elkaar */
    align-items: center;      /* Verticaal centreren */
    gap: 15px;                /* Afstand tussen de knoppen */
    width: 100%;
    
    /* Zorg dat ze op 1 regel blijven */
    flex-wrap: nowrap;        
    white-space: nowrap;
}

/* Mobiel specifiek: Knoppen onder elkaar */
@media (max-width: 899px) {
    .header-actions.intro-actions {
        /* AANGEPAST: Zet de richting op verticaal */
        flex-direction: column !important; 
        
        /* Zorg dat ze netjes in het midden staan */
        align-items: center;
        justify-content: center;
        
        /* Iets meer ruimte tussen de knop en de link */
        gap: 20px; 
        
        /* Reset de dwingende regels van de desktop-versie */
        flex-wrap: wrap !important;
        white-space: normal !important;
        
        /* Beetje lucht aan de bovenkant */
        margin-top: 15px;
        
        /* De schaling (0.95) is niet meer nodig nu ze ruimte hebben */
        transform: none; 
    }

    /* Zorg dat het linkje zelf ook de volledige breedte mag pakken om te centreren */
    .header-actions.intro-actions .qigo-inline-smart-link {
        justify-content: center;
        text-align: center;
    }
}
/* --- DESKTOP STYLING (Vanaf 900px) --- */
@media (min-width: 900px) {
    
    .intro-split-header {
        flex-direction: row;     
        align-items: center; 
        text-align: left;        
        justify-content: center; 
        gap: 80px; /* Iets ruimte tussen Titel en Tekst */
        
        max-width: 1000px; 
        margin-left: auto;
        margin-right: auto;
                margin-top: 4rem;
        margin-bottom: 8rem;
    }

    .intro-title-col {
        flex: 0 0 auto; 
        width: auto; 
    }
    
    .intro-title-col .section-title {
        margin-top: -6px; /* Optisch uitlijnen met bovenkant tekst */
        white-space: nowrap; 
    }

    .intro-text-col {
        flex: 1; 
        max-width: 650px; 
    }

    /* Knoppen links uitlijnen */
    .header-actions.intro-actions {
        justify-content: flex-start; 
        width: auto; 
    }
}
#waarom-qigo {
    position: relative;
    padding-bottom: 200px;
}


.section-header.text-center {
    text-align: center;
    width: 100%;
    margin-bottom: 40px;
    display: flex;
    flex-direction: column;
    align-items: center; /* Zorgt dat ook de logo-img en titel-lijn gecentreerd blijven */
}

.section-header .section-title {
    margin-top: 0 !important; /* Verwijdert de standaard browser-ruimte boven de titel */
    margin-bottom: 10px;      /* Ruimte tussen titel en subtitel */
}

.section-subtitle {
    font-family: var(--font-subtitel); /* Dit koppelt aan Comfortaa */
    font-size: 1.1rem;
    color: #666;
    max-width: 600px; /* Voorkomt te brede tekstregels op desktop */
    margin: 0 auto;
    line-height: 1.6;
}

/* --- HEADER --- */
.section-title {
    font-family: var(--font-titel);
    font-size: 2.5rem;
    color: var(--kleur-primair);
    margin-bottom: 15px;
}
.section-title .titel-lijn {
    --golf-kleur: var(--kleur-primair);
    color: var(--kleur-primair);
}
.section-lead {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--kleur-accent);
}
.section-body {
    font-family: var(--font-body);
    font-size: 1.05rem;
    line-height: 1.8;
    color: #555;
}

/* --- GRID CONTAINER --- */
.features-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 80px; /* Ruime afstand op mobiel */
    margin-top: 60px;
}

@media (min-width: 900px) {
    .features-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
        align-items: stretch; 
        margin-top: 80px;
    }
}

/* --- DE KAART WRAPPER --- */
.blob-feature-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-top: 20px; /* Ruimte voor icoon */
    height: 100%;
    
    /* Zorg dat icoon mag uitsteken, maar balk onderin netjes afsnijdt */
    overflow: visible !important; 
    z-index: 1;
}

/* --- ICOON (MOBIEL: GECENTREERD) --- */
.blob-icon-wrapper {
    position: absolute;
    top: 0; 
    left: 50%; /* Start in het midden */
    transform: translate(-50%, -50%); /* Schuif exact terug naar het midden */
    
    width: 80px; 
    height: 80px;
    font-size: 1.8rem;
    
    display: flex; align-items: center; justify-content: center;
    color: var(--kleur-primair); 
    z-index: 50; 
}

/* --- DE WITTE KAART INHOUD --- */
.blob-card-content {
    background-color: #fff;
    border-radius: 20px;
    width: 100%;
    height: 100%;
    
    display: flex;
    flex-direction: column;
    align-items: center;
    
    /* PADDING: 
       Boven: 70px (voor icoon)
       Onder: 80px (Ruimte voor de gele balk, voorkomt overlap link) 
    */
    padding: 70px 20px 80px 20px; 
    
    border: 1px solid rgba(255,255,255,0.8);
    box-shadow: 0 10px 25px rgba(26, 83, 92, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    
    position: relative;
    z-index: 5;
    
    /* Dit zorgt dat de gele balk de ronde hoeken onderin volgt */
    overflow: hidden; 
}

.blob-feature-card:hover .blob-card-content {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(26, 83, 92, 0.1);
    border-color: var(--kleur-accent);
}

.blob-card-content h3 {
    font-family: var(--font-titel);
    font-size: 1.4rem;
    margin-bottom: 20px;
    color: var(--kleur-primair);
    min-height: 2.8em; 
    display: flex; align-items: center; justify-content: center;
}

/* --- LIJSTJES --- */
.blob-card-list {
    list-style: none;
    padding: 0;
    margin: 0 0 0 0;
    text-align: left;
    width: 100%;
    flex-grow: 1; 
}

.blob-card-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: #555;
    margin-bottom: 10px;
    line-height: 1.4;
}

.blob-card-list li::before {
    content: '\f00c';
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: var(--kleur-accent);
    margin-top: 4px;
    flex-shrink: 0;
}

/* --- DE GELE BALK (BADGE) --- */
.promo-badge-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    
    background-color: #f0c000;
    color: var(--kleur-primair);
    
    font-family: var(--font-titel);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: center;
    
    padding: 12px 0;
    z-index: 10;
    
    display: flex; align-items: center; justify-content: center; gap: 8px;
    
    /* DE FIX: Dit zorgt voor de soepele animatie */
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.blob-feature-card:hover .promo-badge-bar {
    background-color: var(--kleur-accent); /* Wordt de fellere accentkleur */
    padding: 16px 0;        /* Balk wordt iets hoger */
    letter-spacing: 2px;    /* Tekst spreidt zich iets uit voor een luxe effect */
}

/* --- DESKTOP SPECIFIEK (GROTERE ICONEN) --- */
@media (min-width: 900px) {
    .features-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
        align-items: stretch; 
        margin-top: 80px;
    }
    
    /* Grotere iconen op desktop */
    .blob-icon-wrapper {
        width: 120px; 
        height: 120px; 
        font-size: 2.8rem;
    }
    
    .blob-card-content {
        width: 100%;
        
        /* AANGEPAST: Standaard compacte padding onderin (was 90px) */
        padding: 70px 25px 35px 25px; 
        
        z-index: 1;
    }

    /* NIEUW: De uitzondering! */
    /* Als de kaart de class '.promo-badge-bar' bevat (de gele balk), */
    /* dan hebben we wél die extra ruimte nodig zodat de tekst niet wegvalt. */
    .blob-card-content:has(.promo-badge-bar) {
        padding-bottom: 90px;
    }
}

/* --- KNOPPEN --- */
.intro-actions {
    margin-top: 60px; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    gap: 20px; 
    flex-wrap: wrap;
}

.intro-actions .btn-blog-style {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background-color: var(--kleur-primair) !important;
    color: #ffffff !important;
    padding: 12px 30px;
    border-radius: 50px;
    font-weight: 600;
    text-decoration: none;
    font-family: var(--font-body);
    font-size: 1rem;
    border: 2px solid var(--kleur-primair);
    transition: all 0.2s ease;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.intro-actions .btn-blog-style:hover {
    background-color: var(--kleur-accent) !important;
    border-color: var(--kleur-accent) !important;
    color: var(--kleur-primair) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.15);
}

/* --- LINKS & ANIMATIES --- */
.text-link {
    text-decoration: none;
    font-weight: 700;
    color: var(--kleur-primair);
    display: inline-flex; align-items: center; gap: 8px;
    transition: gap 0.2s ease;
}
.text-link:hover { gap: 12px; color: var(--kleur-accent); }

/* Blob Animatie */
.blob-anim {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    border-radius: 50%; z-index: 1;
    background-color: #fff; opacity: 1;
    box-shadow: 0 5px 15px rgba(0,0,0,0.15);
    animation: morphBlob 6s infinite alternate ease-in-out;
}
.blob-anim::after {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    border-radius: inherit; z-index: 2;
}

.blob-color-green::after { background-color: rgba(26, 83, 92, 0.15); }
.blob-color-yellow::after { background-color: rgba(255, 196, 0, 0.25); }
.blob-color-blue::after { background-color: rgba(33, 150, 243, 0.15); }

/* Icoon kleur fix */
.blob-icon-wrapper i { color: var(--kleur-primair); position: relative; z-index: 60; }
.blob-feature-card i.fa-leaf { color: var(--kleur-primair); }
.blob-feature-card i.fa-sliders { color: var(--kleur-primair); }
.blob-feature-card i.fa-graduation-cap { color: #2196f3; }

@keyframes morphBlob {
    0% { border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; transform: rotate(0deg); }
    100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; transform: rotate(20deg); }
}

/* Wave */
.bottom-wave {
    position: absolute; bottom: -1px; left: 0; width: 100%;
    overflow: hidden; line-height: 0; z-index: 0;
}
.bottom-wave svg {
    position: relative; display: block; width: calc(100% + 1.3px); height: 80px; transform: rotate(180deg);
}
.bottom-wave .shape-fill { fill: #FFFFFF; }
/* ==========================================================================
   FIX: BOTTOM WAVE DIVIDER
   ========================================================================== */

/* 1. Zorg dat de sectie het ankerpunt is */
#waarom-qigo {
    position: relative; /* CRUCIAAL: Hierdoor werkt 'bottom: 0' op de golf */
    z-index: 1;
    
    /* Extra ruimte onderin zodat de content niet achter de golf verdwijnt */
    padding-bottom: 150px !important; 
}

/* 2. De Container van de Golf */
.bottom-wave {
    position: absolute;
    
    /* Plak hem aan de bodem */
    bottom: -1px; /* -1px voorkomt een dun wit lijntje door afrondingsfouten */
    left: 0;
    
    width: 100%;
    overflow: hidden;
    line-height: 0;
    
    /* Zorg dat hij ONDER de tekst/kaarten ligt, maar BOVEN de achtergrond */
    z-index: 0; 
}

/* 3. De SVG zelf */
.bottom-wave svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    
    /* Hoogte van de golf */
    height: 100px; 
    
    /* Omdat we een standaard golf gebruiken, draaien we hem 180 graden 
       zodat het 'water' beneden zit (wit) en de 'lucht' (transparant) boven */
    transform: rotate(180deg);
}

/* 4. De Kleur */
.bottom-wave .shape-fill {
    /* Dit moet dezelfde kleur zijn als de VOLGENDE sectie (Sectie 3 is wit) */
    fill: #FFFFFF; 
}

/* Mobiele aanpassing */
@media (max-width: 900px) {
    #waarom-qigo {
        padding-bottom: 120px !important;
    }
    
    .bottom-wave svg {
        height: 60px; /* Iets minder hoog op mobiel */
    }
}
/* --------------------------------------------------------------------------
   3. WORKFLOW SECTIE (COMPACT INTERACTIVE)
   -------------------------------------------------------------------------- */
.section-intro-logo {
    display: block;
    margin: 0 auto 20px auto; /* Centreert horizontaal en geeft ruimte onder het logo */
    width: 80px;              /* Subtiel formaat */
    height: auto;
    opacity: 0.9;             /* Past bij de minimalistische look */
}

@media (max-width: 800px) {
    .section-intro-logo {
        width: 60px;          /* Iets kleiner op mobiel */
        margin-bottom: 15px;
    }
}

.bg-white { background-color: #ffffff; }

/* Navigatie Wrapper */
.workflow-tabs-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin-bottom: 40px;
    flex-wrap: wrap;
    margin-top: 15px;
}

/* De Knoppen (Stap 1, 2, 3) */
.workflow-int-tab {
    background: transparent;
    border: 2px solid #eee;
    border-radius: 50px; /* Pilvorm */
    padding: 10px 25px 10px 10px; /* Links minder padding voor het rondje */
    
    display: flex;
    align-items: center;
    gap: 12px;
    
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 140px;
}

/* Hover & Active */
.workflow-int-tab:hover,
.workflow-int-tab.is-active {
    border-color: var(--kleur-primair);
    background-color: #f4fdfc; /* Heel licht tintje */
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

/* Het Rondje met Nummer */
.step-badge {
    width: 34px; height: 34px;
    background-color: #eee;
    color: #888;
    border-radius: 50%;
    
    display: flex; align-items: center; justify-content: center;
    font-weight: 700;
    font-family: var(--font-titel);
    transition: all 0.3s ease;
}

/* Active Badge Kleur */
.workflow-int-tab.is-active .step-badge {
    background-color: var(--kleur-accent); /* Geel */
    color: var(--kleur-primair);
}

.step-label {
    font-family: var(--font-titel);
    font-weight: 600;
    color: var(--kleur-primair);
    font-size: 1.1rem;
}

/* Pijltjes tussen de stappen (verberg op mobiel) */
.step-arrow { color: #ddd; font-size: 0.9rem; }
@media (max-width: 600px) { .step-arrow { display: none; } }


/* --- De Stage (Compact) --- */
.workflow-stage-compact {
    position: relative;
    max-width: 900px; /* Niet te breed */
    margin: 0 auto;
    /* Minimale hoogte reserveren voorkomt springen */
    min-height: 350px; 
    
    background-color: #f9fbfd; /* Kader achtergrondje */
    border-radius: 30px;
    padding: 40px;
}

/* De Slides */
.workflow-overlay-slide {
    display: none; /* Verborgen */
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
    
    /* Animatie startwaarden */
    opacity: 0;
    transform: translateX(20px);
    transition: all 0.4s ease;
}

.workflow-overlay-slide.is-active {
    display: grid;
    opacity: 1;
    transform: translateX(0);
}

/* Tekst Kant */
.w-slide-text h3 {
    font-family: var(--font-titel);
    font-size: 1.8rem;
    color: var(--kleur-primair);
    margin-bottom: 15px;
}
.w-slide-text p {
    font-size: 1rem;
    color: #666;
    line-height: 1.6;
}
/* --- AANPASSINGEN WORKFLOW SLIDES --- */

/* 1. Typografie & Lijstjes */
.w-slide-text ul {
    padding-left: 20px; /* Standaard inspringing voor bullets */
    margin: 15px 0 25px 0; /* Ruimte boven en onder de lijst */
    text-align: left; /* Altijd links uitlijnen */
    
}

.w-slide-text li {
    font-family: var(--font-body); /* Poppins */
    font-size: 1rem;
    color: #555;
    margin-bottom: 8px;
    line-height: 1.6;
   /*  list-style-type: disc; /* Zorgt voor de standaard bolletjes */
}

/* Dikgedrukte woorden in de tekst */
.w-slide-text li strong {
    color: var(--kleur-primair);
    font-weight: 600;
}

/* 2. Verticale Centrering (Grid instellingen) */
.workflow-overlay-slide {
    display: none; 
    grid-template-columns: 1fr 1fr;
    gap: 50px; /* Iets meer ruimte tussen tekst en plaatje */
    
    /* DIT ZORGT VOOR DE VERTICALE CENTRERING */
    align-items: center; 
    align-content: center; 
    
    min-height: 400px; /* Zorgt dat er ruimte is om te centreren */
    
    opacity: 0;
    transform: translateX(20px);
    transition: all 0.4s ease;
}

.workflow-overlay-slide.is-active {
    display: grid;
    opacity: 1;
    transform: translateX(0);
}

/* 3. Mobiele Aanpassingen (Links uitlijnen) */
@media (max-width: 800px) {
    .workflow-overlay-slide.is-active {
        grid-template-columns: 1fr; /* Onder elkaar */
        gap: 30px;
        text-align: left; /* FORCEER LINKS UITLIJNING */
        min-height: auto; /* Geen vaste hoogte op mobiel */
    }

    .w-slide-text {
        padding: 0 10px; /* Klein beetje ruimte aan de randen */
        order: 2; /* Tekst onder de afbeelding (optioneel, haal weg als tekst boven moet) */
    }
    
    .w-slide-text h3 {
        text-align: left; /* Ook de titel links */
    }
    
    .w-slide-text ul {
        padding-left: 20px; /* Blijft netjes inspringen */
    }

    /* Zorg dat de afbeelding niet te groot wordt */
    .w-slide-visual {
        order: 1; /* Afbeelding eerst */
        margin-bottom: 10px;
    }
}

/* Visual Kant (App Frame) */
.w-slide-visual {
    display: flex;
    justify-content: center;
}

.app-frame {
    position: relative;
    width: 100%;
    max-width: 350px;
    aspect-ratio: 4/3;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    border: 4px solid #fff;
}

.app-img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 0.5s ease;
}
.workflow-overlay-slide:hover .app-img { transform: scale(1.05); }

.app-badge {
    position: absolute;
    bottom: 10px; right: 10px;
    background: rgba(255,255,255,0.9);
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--kleur-primair);
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.play-icon-overlay {
    position: absolute; top:50%; left:50%;
    transform: translate(-50%, -50%);
    color: #fff; font-size: 3rem;
    text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

/* Mobiel Responsive */
@media (max-width: 800px) {
    .workflow-stage-compact { padding: 25px; }
    .workflow-overlay-slide.is-active {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 20px;
    }
    .w-slide-text h3 { font-size: 1.5rem; }
    
    .workflow-int-tab {
        flex: 1; /* Knoppen verdelen over breedte */
        justify-content: center;
        padding: 8px 15px;
        min-width: auto;
    }
    .step-label { font-size: 0.9rem; }
    .step-badge { width: 28px; height: 28px; font-size: 0.9rem; }
}

/* --- NIEUW: Decoratie achter de Workflow Video --- */
.w-slide-visual {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* De Blob achter de video */
.visual-blob-back {
    position: absolute;
    width: 120%; /* Iets groter dan de video */
    height: 120%;
    
    /* Een zachte tint van je accentkleur (bijv. heel licht geel of groen) */
    background-color: rgba(255, 196, 0, 0.15); 
    
    /* De organische vorm */
    border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
    
    z-index: -1; /* Achter de video */
    animation: blobFloat 8s infinite alternate ease-in-out;
}

@keyframes blobFloat {
    0% { transform: rotate(0deg) scale(1); }
    100% { transform: rotate(10deg) scale(1.05); }
}

/* --- NIEUW: Decoratie achter de Workflow Video (De Blob) --- */
.w-slide-visual {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.visual-blob-back {
    position: absolute;
    width: 120%;
    height: 120%;
    /* Accentkleur met transparantie */
    background-color: rgba(255, 196, 0, 0.15); 
    border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
    z-index: -1; 
    animation: blobFloat 8s infinite alternate ease-in-out;
}

@keyframes blobFloat {
    0% { transform: rotate(0deg) scale(1); }
    100% { transform: rotate(10deg) scale(1.05); }
}

/* --- De Ronde Icoon Wrapper (voor de titels) --- */
.icon-circle-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    background-color: #fff4cc; /* Zacht geel */
    color: var(--kleur-primair);
    border-radius: 50%;
    margin-right: 12px;
    font-size: 1rem;
    flex-shrink: 0;
}

/* --- FIX VOOR DE LIJSTJES (Vinkjes ipv Bolletjes) --- */
.w-slide-text ul {
    list-style: none !important; /* Forceert weg met bolletjes */
    padding-left: 0;
    margin: 15px 0 25px 0;
}

.w-slide-text li {
    position: relative;
    padding-left: 35px; /* Ruimte voor het vinkje */
    margin-bottom: 12px;
    font-family: var(--font-body);
    font-size: 1rem;
    color: #555;
    line-height: 1.5;
}

/* Het Vinkje (FontAwesome) */
.w-slide-text li::before {
    content: '\f00c'; 
    font-family: "Font Awesome 7 Free"; /* Zorg dat dit overeenkomt met jouw versie */
    font-weight: 900;
    
    position: absolute;
    left: 0;
    top: 3px; 
    
    color: var(--kleur-accent);
    font-size: 1rem;
}


/* --- 2. DE KAART (Het Zwevende Eiland) --- */
.workflow-stage-compact {
    /* Puur wit voor maximaal contrast met de achtergrond */
    background-color: #ffffff; 
    
    /* Een moderne, brede schaduw voor het 'lift' effect */
    box-shadow: 0 20px 60px rgba(26, 83, 92, 0.08);
    
    /* Subtiel randje */
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 30px;
    
    /* Zorg dat hij boven de golf/achtergrond blijft */
    position: relative;
    z-index: 2;
    
    /* Binnenruimte */
    padding: 40px;
    max-width: 900px;
    margin: 0 auto;
    min-height: 350px;
}

/* ==========================================================================
   WAVE & PILL DIVIDER (De Sandwich)
   ========================================================================== */

/* 1. De Container: Houdt de wave en de pil bij elkaar */
.divider-stack-wrapper {
    position: relative;
    width: 100%;
    z-index: 10;
    /* Dit zorgt dat de wrapper zelf geen hoogte inneemt in de flow, 
       zodat we hem precies tussen twee secties kunnen klemmen */
    height: 0; 
    margin-top: 0px; /* Ruimte die de pil inneemt duwen we hier weer terug */
}

/* 2. De Wave Achtergrond */
.divider-wave-bg {
    position: absolute;
    bottom: 0; /* Plakt aan de start van de nieuwe sectie */
    left: 0;
    width: 100%;
    height: 220px; /* Hoogte van de golf */
    z-index: -1;   /* Achter de pil */
    pointer-events: none;
    overflow: hidden;
}

.divider-wave-bg svg {
    display: block;
    width: 100%;
    height: 100%;
    transform: scaleY(0.7); /* Maakt de golf iets platter */
    transform-origin: bottom;
}



/* Mobiele aanpassing voor de pil */
@media (max-width: 600px) {
    .feature-strip-compact {
        width: 95%;
        padding: 10px 15px;
        border-radius: 40px;
    }
}

/* --------------------------------------------------------------------------
   4. BLOG SECTIE (UNIFIED + BLOBS)
   -------------------------------------------------------------------------- */



/* 1. De Grote Kaart Container */
.blog-unified-card {
    background-color: #fff;
    border-radius: 24px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.05); /* Iets zachter */
    border: 1px solid rgba(255,255,255,0.8);
    overflow: hidden; 
    max-width: 900px;
    margin: 0 auto;
}

/* 2. De Header IN de kaart */
.blog-card-header {
    padding: 35px 30px 10px 30px; /* Ruimte bovenin */
    border-bottom: 1px solid transparent; /* Reserve voor lijntje */
}

/* 3. Het Item (De Rij) */
.blog-list-item {
    display: flex;
    align-items: center;
    gap: 30px;
    padding: 30px;
    border-bottom: 1px solid #f0f0f0;
    transition: background-color 0.2s ease;
}

.blog-list-item:last-child { border-bottom: none; }
.blog-list-item:hover { background-color: #fcfdfe; }

/* 4. De Visual (Nu een Blob!) */
.blog-list-blob-wrapper {
    width: 130px;
    height: 100px;
    flex-shrink: 0;
    
    /* DE BLOB VORM */
    /* Een asymmetrische vorm die er organisch uitziet */
    border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
    
    overflow: hidden;
    position: relative;
    transform: rotate(0deg);
    transition: border-radius 0.3s ease, transform 0.3s ease;
}

/* Bij hover verandert de vorm ietsjes */
.blog-list-item:hover .blog-list-blob-wrapper {
    border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%; /* Wordt ronder */
    transform: scale(1.05);
}

.blog-list-img {
    width: 100%; height: 100%;
    object-fit: cover;
}

/* 5. De Inhoud */
.blog-list-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.blog-meta-top { margin-bottom: 6px; }

.blog-pill-small {
    font-size: 0.7rem;
    text-transform: uppercase;
    font-weight: 700;
    color: #999; /* Of var(--kleur-accent) als je het feller wilt */
    letter-spacing: 0.5px;
}

.blog-list-title {
    font-family: var(--font-titel);
    font-size: 1.35rem;
    margin: 0 0 8px 0;
    line-height: 1.25;
}

.blog-list-title a {
    text-decoration: none;
    color: var(--kleur-primair);
    transition: color 0.2s;
}

.blog-list-item:hover .blog-list-title a {
    color: var(--kleur-accent); /* Geel bij hover */
}

/* Klein linkje */
.text-link-small {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--kleur-primair);
    text-decoration: none;
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: 5px;
}
.text-link-small:hover { gap: 10px; }


/* --- MOBIEL --- */
@media (max-width: 768px) {
    .blog-list-item {
        flex-direction: column; /* Onder elkaar op mobiel */
        align-items: flex-start;
        gap: 15px;
        padding: 25px 20px;
    }
    
    .blog-list-blob-wrapper {
        width: 100%; /* Plaatje breed */
        height: 180px; /* Vaste hoogte */
        border-radius: 12px; /* Op mobiel gewoon netjes afgerond, geen gekke blob */
    }
    
    .blog-list-title { font-size: 1.25rem; }
    
    .blog-card-header {
        text-align: center; /* Titel centreren op mobiel */
        padding-bottom: 0;
    }
}
/* ==========================================================================
   HERGEBRUIKTE STIJLEN (UIT STYLE.CSS)
   Nodig voor de 'Lees meer' link in de intro
   ========================================================================== */

/* 1. De Link Container */
a.qigo-inline-smart-link {
    display: inline-flex;
    align-items: center;
    gap: 5px; /* Ruimte tussen bolletje en tekst */
    text-decoration: none;
    vertical-align: middle;
    
    /* Zorg dat tekst netjes afbreekt als het moet */
    white-space: normal; 
    max-width: 100%;
    
    cursor: pointer;
    transition: opacity 0.2s ease;
}

/* 2. Het Miniatuur Icoon (Het Rondje) */
.qigo-inline-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    
    width: 25px;  /* Iets groter dan in de lopende tekst */
    height: 25px;
    flex-shrink: 0; /* Voorkomt pletten op mobiel */
    
    border-radius: 50%;
    background-color: var(--kleur-accent); /* Geel */
    color: var(--kleur-primair);           /* Donkergroen */
    
    font-size: 0.9rem;
    transition: transform 0.3s ease, background-color 0.3s ease;
}

/* 3. De Tekst */
.qigo-inline-text {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 1.05rem; /* Goed leesbaar */
    color: var(--kleur-primair);
    
    /* De animatie voor de onderstreping */
    border-bottom: 2px solid transparent;
    transition: color 0.3s ease, border-bottom-color 0.3s ease;
}

/* --- Hover Effecten --- */

/* Bolletje draait en wordt lichter */
a.qigo-inline-smart-link:hover .qigo-inline-icon {
    transform: rotate(-45deg) scale(1.1);
    background-color: #ffdb4d; 
}

/* Tekst krijgt een geel lijntje */
a.qigo-inline-smart-link:hover .qigo-inline-text {
    border-bottom-color: var(--kleur-accent);
}

/* Container Styling (Zekerheidshalve, voor de uitlijning) */
.intro-actions {
    margin-top: 25px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Mobiel: Centreren */
@media (max-width: 900px) {
    .intro-actions {
        align-items: center;
    }
    /* 1. Container ruimte */
    .split-cards-col {
        padding-left: 0; 
        gap: 60px;
        margin-top: 20px;
    }
    
    /* 2. Kaart */
    .blob-feature-card {
        flex-direction: column;
        align-items: center;
        text-align: center;
        position: relative;
        overflow: visible; 
        margin-top: 0px; 
    }
    
    /* 3. Het Icoon: NU LINKS OP DE RAND */
    .blob-icon-wrapper {
        position: absolute;
        top: 0; 
        left: 30px; /* Links uitlijnen (ipv 50%) */
        
        /* Alleen omhoog schuiven, niet meer naar links */
        transform: translateY(-50%); 
        
        margin: 0; 
        width: 100px; 
        height: 100px;
        font-size: 1.8rem;
        z-index: 10;
    }
    
    .blob-card-content {
        width: 100%;
        
        /* AANGEPAST: Standaard compacte padding onderin (was 90px) */
        padding: 70px 25px 35px 25px; 
        
        z-index: 1;
    }

    /* NIEUW: De uitzondering! */
    /* Als de kaart de class '.promo-badge-bar' bevat (de gele balk), */
    /* dan hebben we wél die extra ruimte nodig zodat de tekst niet wegvalt. */
    .blob-card-content:has(.promo-badge-bar) {
        padding-bottom: 90px;
    }
}

/* Desktop: Links uitlijnen */
@media (min-width: 900px) {
    .intro-actions {
        align-items: flex-start;
    }

    .blob-card-list li {
        justify-content: flex-start;
    }
}
/* --- NIEUW: Lijstjes met Vinkjes in de kaarten --- */

/* --- Lijstjes met Flexbox Vinkjes --- */
.blob-card-list {
    list-style: none;
    padding: 0;
    margin: 0 0 0 0;
    
    /* Zorg dat de items zelf gecentreerd worden in de kaart */
    display: flex;
    flex-direction: column;
}

.blob-card-list li {
    /* FLEXBOX: Dit houdt icoon en tekst altijd bij elkaar */
    display: flex;
    align-items: flex-start; /* Uitlijnen op eerste regel tekst */
    gap: 10px;               /* Ruimte tussen vinkje en tekst */
    
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: #555;
    line-height: 1.5;
    margin-bottom: 8px;
    text-align: left; /* De tekst zelf leest links uitgelijnd fijner */
    
    /* MOBILE FIRST: Centreer het hele blokje */
    justify-content: left;
}

/* Het Vinkje (Nu relatief in de flow) */
.blob-card-list li::before {
    content: '\f00c'; 
    font-family: "Font Awesome 7 Free";
    font-weight: 900;
    
    /* Geen position absolute meer nodig! */
    color: var(--kleur-accent); 
    font-size: 0.9em;
    margin-top: 4px; /* Optisch lijnen met tekst */
    flex-shrink: 0;  /* Voorkomt dat icoon geplet wordt */
}

/* Dikgedrukte tekst */
.blob-card-list li strong {
    color: var(--kleur-primair);
    font-weight: 600;
}

/* --- NIEUW: Promo Badge (Sticker Effect) --- */
.promo-badge {
    position: absolute;
    top: -12px;   /* Hangt over de bovenrand */
    right: 20px;  /* Rechts bovenin (maar niet buiten beeld op mobiel) */
    
    background-color: var(--kleur-accent); /* Geel */
    color: var(--kleur-primair);           /* Donkere tekst */
    
    font-family: var(--font-titel);        /* Speels lettertype */
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    
    padding: 6px 15px;
    border-radius: 50px; /* Pilvorm */
    
    /* Het scheve effect */
    transform: rotate(3deg); 
    
    /* Diepte */
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    z-index: 20; /* Bovenop alles */
    
    /* Zorgt dat de tekst op 1 regel blijft */
    white-space: nowrap;
}

/* Subtiel wiebel-effect bij hover over de kaart */
.blob-feature-card:hover .promo-badge {
    animation: badgeWiggle 0.5s ease-in-out;
}

@keyframes badgeWiggle {
    0% { transform: rotate(3deg); }
    25% { transform: rotate(-2deg); }
    50% { transform: rotate(5deg); }
    75% { transform: rotate(1deg); }
    100% { transform: rotate(3deg); }
}

/* Aanpassing voor Desktop (mag iets verder naar buiten steken) */
@media (min-width: 900px) {
    .promo-badge {
        right: -15px; /* Laat hem echt over de rand hangen */
        top: -15px;
        font-size: 0.85rem;
        padding: 8px 18px;
    }
}

/* --- NIEUWE CSS: Autocomplete Dropdown voor Hero Search --- */
.hero__search-wrapper {
    position: relative; /* Zorgt dat de dropdown relatief aan de zoekbalk hangt */
}

.hero__autocomplete-list {
    position: absolute;
    top: 110%; /* Iets ruimte onder de input */
    left: 0;
    width: 100%;
    
    background-color: #ffffff;
    border-radius: 20px; /* Ronde hoeken passend bij de input */
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    border: 1px solid rgba(0,0,0,0.05);
    
    list-style: none;
    padding: 10px 0;
    margin: 0;
    z-index: 100;
    
    display: none; /* Standaard verborgen */
    max-height: 300px;
    overflow-y: auto;
}

.hero__autocomplete-list.is-visible {
    display: block;
    animation: fadeIn 0.2s ease-out;
}

.hero__autocomplete-item {
    padding: 12px 25px;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--kleur-tekst);
    border-bottom: 1px solid #f5f5f5;
    transition: background-color 0.2s;
    text-align: left;
}

.hero__autocomplete-item:last-child {
    border-bottom: none;
}

.hero__autocomplete-item:hover,
.hero__autocomplete-item.is-active {
    background-color: #f0f8ff; /* Heel licht blauw bij hover */
    color: var(--kleur-primair);
}

/* Scrollbar netjes maken */
.hero__autocomplete-list::-webkit-scrollbar {
    width: 8px;
}
.hero__autocomplete-list::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 0 20px 20px 0;
}
.hero__autocomplete-list::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 10px;
}

/* --- NIEUWE VIDEO SECTIE STYLING --- */

/* --- NIEUWE VIDEO GRID (3 Kolommen) --- */

.video-showcase-grid {
    display: grid;
    grid-template-columns: 1fr; /* Mobiel: 1 kolom (onder elkaar) */
    gap: 30px;
    width: 100%;
    margin-top: 20px;
}

/* De Kaart Wrapper */
.qigo-video-card {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%; /* Vult de kolom van de grid */
}

/* DESKTOP: Vanaf 900px maken we er 3 kolommen van */
@media (min-width: 900px) {
    .video-showcase-grid {
        grid-template-columns: repeat(3, 1fr); /* 3 gelijke kolommen */
        gap: 30px;
    }
}

/* --- De Video Container styling --- */
.qigo-video-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9; /* Zorgt dat de video altijd breedbeeldverhouding houdt */
    background-color: #000;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    cursor: pointer;
}

/* Zorg dat de video zelf netjes in het vak past */
.qigo-video-element {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Meta badge (tijdsduur) styling */
.video-meta-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.8rem;
    font-family: var(--font-body);
    font-weight: 600;
    z-index: 5;
    backdrop-filter: blur(2px);
}

/* De Kaart */
.qigo-video-card {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* De Video Container (Afgeronde hoeken & Schaduw) */
.qigo-video-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9; /* Zorgt voor vast formaat */
    background-color: #000;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    cursor: pointer;
}

.qigo-video-element {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* De Grote Play Knop (Overlay) */
.video-overlay-btn {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    
    width: 70px; height: 70px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.9);
    color: var(--kleur-primair);
    border: none;
    font-size: 1.8rem;
    cursor: pointer;
    
    display: flex; align-items: center; justify-content: center;
    padding-left: 5px; /* Optische correctie voor play icoon */
    
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5);
    z-index: 10;
}

.qigo-video-wrapper:hover .video-overlay-btn {
    transform: translate(-50%, -50%) scale(1.1);
    box-shadow: 0 0 20px rgba(255,255,255,0.6);
    color: var(--kleur-accent);
}

/* Controls balk (Verborgen tot play) */
.video-controls {
    position: absolute;
    bottom: 0; left: 0; width: 100%;
    padding: 15px;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 20;
}

.control-btn {
    background: rgba(255,255,255,0.2);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255,255,255,0.4);
    color: white;
    width: 40px; height: 40px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s;
    
    display: flex; align-items: center; justify-content: center;
}
.control-btn:hover { background: white; color: var(--kleur-primair); }

/* Actieve status: Video speelt */
.qigo-video-wrapper.is-playing .video-overlay-btn {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.8);
    pointer-events: none;
}
.qigo-video-wrapper.is-playing .video-controls {
    opacity: 1;
    pointer-events: auto;
}

/* Fullscreen: wrapper vult scherm, video past erin met behoud van verhouding */
.qigo-video-wrapper:fullscreen,
.qigo-video-wrapper:-webkit-full-screen {
    background: #000;
    border-radius: 0;
    width: 100vw !important;
    height: 100vh !important;
    max-width: none !important;
    aspect-ratio: auto !important;
    display: flex;
    align-items: center;
    justify-content: center;
}
.qigo-video-wrapper:fullscreen .qigo-video-element,
.qigo-video-wrapper:-webkit-full-screen .qigo-video-element {
    object-fit: contain !important;
    width: 100%;
    height: 100%;
}

/* Tekst onder video */
.video-card-body {
    text-align: center;
    padding: 0 10px;
}
.video-card-title {
    font-family: var(--font-titel);
    color: var(--kleur-primair);
    font-size: 1.4rem;
    margin: 0 0 10px 0;
}

/* --- NIEUWE HEADER LAYOUT (TITEL + KNOP NAAST ELKAAR) --- */

.header-inline-layout {
    display: flex;
    flex-direction: column; /* Mobiel: onder elkaar */
    align-items: center;
    justify-content: center;
    gap: 20px;
    width: 100%;
}

/* Reset marges van de kinderen voor strakke uitlijning */
.header-inline-layout .section-title,
.header-inline-layout .intro-actions {
    margin: 0 !important; 
}

@media (min-width: 900px) {
    .header-inline-layout {
        flex-direction: row; /* Desktop: naast elkaar */
        gap: 30px; /* Ruimte tussen titel en knop */
    }
}

/* --- NIEUWE HEADER LAYOUT (Video Sectie) --- */

.video-header-layout {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin-bottom: 40px;
    gap: 15px; /* Ruimte tussen de Titel-groep en de Tekst-groep */
}

/* Deel 1: Logo en Titel (Altijd onder elkaar en gecentreerd) */
.v-header-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
}

/* --- FIX VOOR DE LOGISCHE BUTTON POSITIE --- */

.v-header-bottom {
    display: flex;
    flex-direction: column; /* Dit zet ze onder elkaar */
    align-items: center;    /* Dit centreert ze horizontaal */
    text-align: center;     /* Dit centreert de tekst zelf */
    gap: 25px;              /* Ruimte tussen tekst en knop */
    width: 100%;
    margin-top: 15px;       /* Beetje lucht onder de titel */
}

/* Zorg dat de tekst niet te breed uitwaaiert (leest onprettig) */
.section-subtitle.fit-content {
    max-width: 600px;       /* Mooie leesbreedte */
    margin: 0 auto;         /* Centreren */
    line-height: 1.6;       /* Rustige regelafstand */
}
/* --- MOBIELE WEERGAVE (tot 900px) --- */
@media (max-width: 900px) {
    
    /* Zet tekst en knop onder elkaar */
    .v-header-bottom {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }

    /* Tekst centreren op mobiel */
    .section-subtitle.fit-content {
        text-align: center;
        max-width: 100%;
        padding: 0 0;
    }

    /* Zorg dat de knop niet uitrekt */
    .intro-actions {
        width: auto;
    }
}

/* --- NIEUWE HEADER LAYOUT (Split: Titel/Knop boven, Tekst onder) --- */

.header-split-layout {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-bottom: 40px;
}

/* Bovenste rij: Titel links, Knop rechts */
.header-top-row {
    display: flex;
    justify-content: space-between; /* Duwt elementen naar de uiterste zijkanten */
    align-items: center; /* Verticaal centreren */
    width: 100%;
    margin-bottom: 15px; /* Ruimte tot de subtitel */
    gap: 20px;
}

.title-group {
    display: flex;
    align-items: center;
    gap: 15px;
    text-align: left;
}

/* De subtitel rij: Gecentreerd */
.header-bottom-row {
    width: 100%;
    text-align: center;
    display: flex;
    justify-content: center;
}

/* Zorgt dat de subtitel niet te breed wordt (voor leesbaarheid) */
.section-subtitle.centered-limit {
    max-width: 700px; /* Iets breder dan standaard */
    margin: 0 auto;
    text-align: center;
}

/* Logo correctie voor deze header */
.title-group .section-intro-logo {
    margin: 0; /* Geen auto-margin meer nodig, flex regelt het */
    width: 60px; /* Iets kleiner in de header */
}

/* FOOTER LINKS (Onderaan de video's) */
.video-footer-links {
    text-align: center;
    margin-top: 40px;
    font-family: var(--font-body);
    color: #666;
    font-size: 0.95rem;
}

.video-footer-links a {
    color: var(--kleur-primair);
    text-decoration: none;
    font-weight: 600;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s;
}

.video-footer-links a:hover {
    color: var(--kleur-accent);
    border-bottom-color: var(--kleur-accent);
}

/* MOBIELE AANPASSINGEN */
@media (max-width: 800px) {
    .header-top-row {
        flex-direction: column; /* Onder elkaar */
        text-align: center;
        gap: 15px;
    }

    .title-group {
        flex-direction: column; /* Logo boven titel */
        text-align: center;
        gap: 10px;
    }
    
    /* Op mobiel de knop onder de titel */
    .intro-actions {
        width: 100%;
        display: flex;
        justify-content: center;
    }
}

/* --- MOBIELE BLOG SCROLL (HORIZONTAAL) --- */

@media (max-width: 800px) {
    
    /* 1. De scroll container (Vertical List) */
    .blog-scroll-wrapper {
        display: flex;
        flex-direction: column;
        gap: 15px; 
        
        overflow-x: visible; 
        padding-bottom: 30px;
        padding-left: 0; 
        padding-right: 0;
    }

    /* 1.5. (Verwijderde Blob Animatie, nu statisch via JS) */

    /* 2. De Kaart Wrapper: Liggend maken met zachte opmaak */
    .blog-list-item {
        position: relative;
        display: flex;       
        flex-direction: row; 
        align-items: center;
        
        flex: none;
        width: 100%;
        max-width: 100%;
        height: auto; 
        
        background-color: transparent !important; 
        border: none;
        padding: 0; 
        box-shadow: none;
        margin-top: 20px; /* Ruimte voor de overlap naar boven */
        
        /* Voorkom lelijke highlight blokken bij touch drag/click mbv webkit reset */
        -webkit-tap-highlight-color: transparent;
    }
    
    .blog-list-item:active,
    .blog-list-item:hover {
        background-color: transparent !important;
    }

    /* 3. De Foto (Links als een grotere Blob die overlapt) */
    .blog-list-blob-wrapper {
        position: absolute;
        top: 0; 
        left: 0;
        width: 110px;        /* Grotere blob */
        height: 110px;       /* Perfect vierkant voor de blob */
        z-index: 2;          /* Zorg dat blob over de kaart valt */
        
        /* Basis vorm, specifieke organische vorm wordt via class/js toegekend */
        border-radius: 50%; 
        
        margin: 0;
        overflow: hidden;
        
        /* Een zachte subtiele rand om de blob heen of wat schaduw helpt het los te weken */
        box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    }
    
    .blog-list-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* 4. De Inhoud (De "Witte Kaart" Rechts) */
    .blog-list-content {
        position: relative;  
        width: 100%;
        flex: 1;             
        
        background-color: #fff;  /* Nu heeft dít blok de witte achtergrond */
        border-radius: 20px; 
        box-shadow: 0 5px 15px rgba(0,0,0,0.03);
        border: 1px solid #eee;
        
        /* Margin om ruimte te maken voor de blob (die is 110px breed)
           We willen hem ongeveer op de helft laten overlappen (dus margin-left van bijv. 50px) */
        margin-left: 50px;     
        margin-top: 15px;      /* Zorg dat blob ook boven uitsteekt */
        
        /* Padding: Zorg dat de text niet achter de overlappende blob valt
           De blob is 110px. Hij steekt 50px uit naar links (door margin-left: 50px).
           Dus hij overlapt de kaart met 60px. We hebben minimaal 60px + 15px marge = 75px padding links nodig. */
        padding: 15px 15px 15px 75px; 
        min-height: 80px;      /* Zorg voor wat body */
        
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
    }

    /* De Categorie Pill Buiten/Boven de Kaart Positoneren */
    .blog-list-item .blog-meta-top {
        position: absolute;
        top: -30px;         /* Hoger plaatsen, ver boven de witte kaart */
        left: 75px;         /* Ligt netjes in lijn met de padding links van de tekst */
        margin-bottom: 0;
        z-index: 3;         /* Zorg dat hij nergens onder valt */
    }

    /* 5. De Titel */
    .blog-list-title {
        font-size: 0.95rem;  /* Ietsje groter mag, we hebben ruimte */
        line-height: 1.3;
        color: var(--kleur-primair); 
        text-shadow: none;           
        margin: 0;
        
        /* LINKS UITLIJNEN */
        text-align: left;
        
        /* Zorg dat lange titels niet de kaart oprekken, maar afkappen (...) */
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    
    /* Meta margin reset */
    .blog-meta-top {
        margin-bottom: 0;
    }
    
    /* Lees bericht link verbergen indien gewenst voor compactheid */
    .blog-list-content .text-link-small {
        display: none;
    }
    
    /* Correctie voor de Unified Card container op mobiel */
    .blog-unified-card {
        background: transparent; /* Geen witte achtergrond meer nodig */
        box-shadow: none;        /* Geen schaduw om het geheel */
        border: none;
        overflow: visible;       /* Laat de items eruit steken bij scrollen */
    }
    
    /* Header iets netter uitlijnen */
    .blog-card-header {
        padding-left: 0;
        padding-bottom: 15px;
        text-align: left;
    }
}

/* --- ANIMATIE STYLING --- */
.feature-animation {
    /* Zorgt dat hij op mobiel de volle breedte pakt, maar niet te groot wordt op desktop */
    width: 100%;
    max-width: 900px; 
    height: auto; /* Behoudt de originele verhoudingen */
    
    /* Centreren */
    display: block;
    margin: 0 auto;
    
    /* Optioneel: maak het af met afgeronde hoeken en een zachte schaduw, 
       passend bij de rest van de site */
    border-radius: 25px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.08);
    
    /* Zorgt dat de animatie soepel laadt */
    will-change: transform; 
}

@media (max-width: 800px) {
    .feature-animation {
        border-radius: 15px; /* Iets minder rond op mobiel */
        box-shadow: 0 10px 25px rgba(0,0,0,0.05);
    }
}




/* --------------------------------------------------------------------------
   6. ABONNEMENTEN SECTIE (MOBILE FIRST AANPAK)
   -------------------------------------------------------------------------- */

.pricing-section-wrapper {
    
    padding: 20px 0;
}

/* --- 1. DE CONTAINER (GRID) --- */
.pricing-grid {
    display: flex;
    /* STAP 1: MOBILE DEFAULT = ONDER ELKAAR */
    flex-direction: column; 
    align-items: center;
    gap: 40px;
    
    margin-top: 40px;
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

/* --- 2. DE KAART (BASIS STIJL) --- */
.pricing-card {
    /* STAP 1: MOBILE DEFAULT = VOLLE BREEDTE */
    width: 100%; 
    max-width: 400px; /* Niet breder dan dit op mobiel */
    
    /* Vormgeving */
    background: #fff;
    border-radius: 24px;
    padding: 30px 25px;
    border: 1px solid rgba(0,0,0,0.05);
    position: relative;
    
    /* Inhoud verdeling */
    display: flex;
    flex-direction: column;
    
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Hover effect (werkt ook op mobiel bij touch, maar vooral desktop) */
.pricing-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}

/* --- 3. INHOUD VAN DE KAART --- */
.price-header {
    text-align: center;
    margin-bottom: 25px;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 20px;
}

.plan-name {
    font-family: var(--font-titel);
    font-size: 1.4rem;
    color: var(--kleur-primair);
    margin-bottom: 5px;
    display: block;
}

.plan-price {
    font-family: var(--font-body);
    font-size: 1.8rem;
    font-weight: 700;
    color: #333;
}

.plan-period {
    font-size: 0.9rem;
    color: #666;
    margin-top: 5px;
    display: block;
    line-height: 1.5;
}

/* Lijstjes */
.feature-list {
    list-style: none;
    padding: 0;
    margin: 0 0 25px 0;
    flex-grow: 1; /* Duwt knop naar beneden */
}

.feature-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: #555;
    line-height: 1.4;
}

.feature-list li i {
    color: #cbd5e1; 
    margin-top: 3px;
    flex-shrink: 0;
}
.feature-list li.is-premium-feature i {
    color: var(--kleur-accent);
    font-weight: 900;
}
.feature-list li strong {
    color: var(--kleur-primair);
    font-weight: 600;
}

/* Badges */
.popular-badge {
    position: absolute;
    top: -12px; left: 50%;
    transform: translateX(-50%);
    background-color: var(--kleur-primair);
    color: #fff;
    padding: 5px 14px;
    border-radius: 50px;
    font-size: 0.75rem; font-weight: 700; text-transform: uppercase;
    white-space: nowrap;
}

.lifetime-badge {
    background: linear-gradient(135deg, #f0c000, #ffaa00);
    color: #fff;
    padding: 4px 12px;
    border-radius: 50px;
    font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
    display: inline-block; margin-bottom: 8px;
}

/* Knoppen */
.btn-price-action {
    display: block; width: 100%; padding: 12px;
    text-align: center; border-radius: 50px; text-decoration: none;
    font-weight: 700; font-size: 0.95rem; transition: all 0.3s ease;
}
.btn-price-outline { border: 2px solid #eee; color: #888; }
.btn-price-outline:hover { border-color: var(--kleur-primair); color: var(--kleur-primair); }

.btn-price-filled {
    background-color: var(--kleur-primair); color: #fff; border: 2px solid var(--kleur-primair);
}
.btn-price-filled:hover {
    background-color: var(--kleur-accent); border-color: var(--kleur-accent); color: var(--kleur-primair);
}

.btn-price-gold {
    background: linear-gradient(135deg, #f0c000, #ffaa00); color: #fff !important; border: none;
}

/* Speciale kaarten */
.pricing-card.is-featured {
    border: 2px solid var(--kleur-primair);
    z-index: 2;
}
.pricing-card.is-lifetime {
    border: 2px solid #f0c000;
    background: linear-gradient(to bottom, #fffcf0, #ffffff);
}

/* --------------------------------------------------------------------------
   DESKTOP VERSIE (VANAF 900px)
   Hier draaien we het gedrag om naar "naast elkaar"
   -------------------------------------------------------------------------- */
@media (min-width: 900px) {
    
    .pricing-grid {
        /* STAP 2: DESKTOP = NAAST ELKAAR */
        flex-direction: row; 
        align-items: stretch; /* Even hoog maken */
        justify-content: center;
        gap: 20px;
        padding: 0 20px;
    }

    .pricing-card {
        /* STAP 2: DESKTOP = AUTOMATISCHE BREEDTE (VERDELEN) */
        width: auto; 
        flex: 1; /* Iedere kaart pakt evenveel ruimte */
        
        min-width: 260px; /* Niet te smal worden */
        max-width: 360px; /* Niet te breed worden */
    }

    /* Premium kaart iets groter maken op desktop */
    .pricing-card.is-featured {
        transform: scale(1.05);
        box-shadow: 0 20px 50px rgba(26, 83, 92, 0.1);
        z-index: 10;
    }
    .pricing-card.is-featured:hover {
        transform: scale(1.05) translateY(-5px);
    }
}

/* --- De Nieuwe Video Sectie (Met Gradient) --- */



/* De Kaart met Gradient */
.qigo-video-card {
    /* De Gradient: Van wit naar heel licht grijs/blauw */
    background: linear-gradient(to bottom, #ffffff 0%, #f1f6f9 100%);
    
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.8); /* Subtiele witte rand */
    box-shadow: 0 10px 20px rgba(0,0,0,0.04); /* Zachte schaduw */
    overflow: hidden;
    
    display: flex;
    flex-direction: column;
    height: 100%; /* Zorgt dat alle kaarten even lang zijn */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.qigo-video-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.08);
    /* Bij hover wordt de gradient ietsje sterker/warmer */
    background: linear-gradient(to bottom, #ffffff 0%, #eefbfd 100%);
    border-color: var(--kleur-accent); /* Geel randje bij hover */
}

/* De Video Wrapper (Strak in de kaart) */
.qigo-video-wrapper {
    border-radius: 0; /* Hoeken worden door de kaart geregeld */
    box-shadow: none; 
    margin: 0;
    aspect-ratio: 16/9;
}

/* De Tekst in de kaart */
.video-card-body {
    padding: 25px;
    text-align: left;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.video-card-title {
    font-size: 1.25rem;
    color: var(--kleur-primair);
    margin-bottom: 10px;
    line-height: 1.3;
}

.video-card-body p {
    font-size: 0.95rem;
    color: #666;
    line-height: 1.6;
    margin-bottom: 20px;
}

/* Link onderin */
.video-card-body .text-link-small {
    margin-top: auto; /* Duwt link altijd naar beneden */
    font-size: 0.9rem;
}

/* --- KICKER PILL (Label boven titel) --- */
.kicker-pill {
    display: inline-block;
    
    /* Kleurstelling: Accent (Geel) met Primaire tekst */
    background-color: var(--kleur-accent2); 
    color: var(--kleur-primair);
    
    /* Typografie */
    font-family: var(--font-titel); /* Of var(--font-body) als je het strakker wilt */
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    
    /* De Pill Vorm */
    padding: 6px 18px;
    border-radius: 50px;
    
    /* Ruimte en Positie */
    margin-bottom: 15px; /* Ruimte tussen de pill en de H2 titel */
    
    /* Subtiele diepte */
    box-shadow: 0 4px 12px rgba(240, 192, 0, 0.25);
    
    /* Zorg dat hij niet breekt */
    white-space: nowrap;
}

/* Optioneel: Een 'Outline' variant (Transparant met randje) */
.kicker-pill.is-outline {
    background-color: transparent;
    border: 2px solid var(--kleur-accent);
    color: var(--kleur-accent2); /* Of var(--kleur-accent) */
    box-shadow: none;

}


/* ==========================================================================
   FEATURE STRIP (DE ZWEVENDE PIL) - OPGESCHOOND
   ========================================================================== */

/* --- 1. DE PIL (CONTAINER) --- */


/* --- 2. DE GRID (LAYOUT) --- */
.strip-grid-inline {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Links - Midden - Rechts */
    width: 100%;
    gap: 30px;
}

/* --- 3. DE AFBEELDING --- */
.strip-visual-box {
    flex-shrink: 0;
    height: 60px; /* Vaste hoogte desktop */
    display: flex;
    align-items: center;
}

.strip-img-element {
    height: 100%;
    width: auto;
    object-fit: contain; 
    mix-blend-mode: multiply; 
}

/* --- 4. DE TEKST --- */
.strip-content-inline {
    display: flex;
    align-items: center;
    gap: 15px; 
    flex-wrap: wrap;
    flex-grow: 1; /* Neemt de ruimte in het midden in */
}

.strip-title {
    font-family: var(--font-titel);
    font-size: 1.1rem;
    color: var(--kleur-primair);
    margin: 0;
    white-space: nowrap;
}

.strip-text {
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: #666;
    margin: 0;
    border-left: 1px solid #ddd;
    padding-left: 15px;
}

/* --- 5. DE RONDE KNOP --- */
.btn-icon-only {
    display: flex;
    align-items: center;
    justify-content: center;
    
    width: 45px;
    height: 45px;
    flex-shrink: 0;
    
    background-color: var(--kleur-accent);
    color: var(--kleur-primair);
    border-radius: 50%;
    
    font-size: 1.1rem;
    text-decoration: none;
    transition: transform 0.2s, background-color 0.2s;
    
    margin-left: auto; /* Duwt zichzelf naar rechts */
}

.btn-icon-only:hover {
    transform: scale(1.15);
    background-color: #ffdb4d;
}

/* ==========================================================================
   MOBILE FIX (HOUD ALLES OP ÉÉN REGEL)
   ========================================================================== */
@media (max-width: 600px) {
    
    /* Container aanpassing */
    .feature-strip-compact {
        width: 95%;
        margin-top: -30px; 
        padding: 10px 15px;
        border-radius: 40px; 
        min-height: auto;
    }

    /* Forceer rij-richting (nooit onder elkaar) */
    .strip-grid-inline {
        flex-wrap: nowrap;
        gap: 10px;
    }

    /* Afbeelding kleiner */
    .strip-visual-box {
        height: 35px; 
        width: auto;
    }

    /* Tekstruimte beheren */
    .strip-content-inline {
        min-width: 0; /* Zorgt dat tekst mag afbreken */
        gap: 0;
    }

    /* Titel afkappen als hij te lang is */
    .strip-title {
        font-size: 0.95rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: block;
    }

    /* Verberg de subtekst voor rust */
    .strip-text {
        display: none;
    }

    /* Knop kleiner */
    .btn-icon-only {
        width: 35px;
        height: 35px;
        font-size: 0.9rem;
    }
}

/* --- DE FLEXBOX OPLOSSING --- */

/* De container die alles bij elkaar houdt */
.title-snug-wrapper {
    display: flex;              /* Activeer Flexbox */
    flex-direction: column;     /* Zet items onder elkaar (ipv naast elkaar) */
    align-items: flex-start;    /* Lijn alles standaard LINKS uit (voor kicker/titel) */
    
    width: fit-content;         /* Container wordt niet breder dan nodig */
    margin: 0 auto;             /* Centreer de hele container op de pagina */
    max-width: 100%;
}

/* De Zon - De Uitzondering */
.section-intro-logo {
    align-self: center;         /* DE TRUC: Alleen de zon gaat naar het midden! */
    margin-bottom: 20px;        /* Ruimte onder de zon */
    
    /* Zorg dat hij niet te groot is */
    width: 70px;                
    height: auto;
    display: block;             /* Voorkomt rare witruimtes */
}

/* De Kicker */
.kicker-pill {
    margin-bottom: 5px;
}

/* De Titel */
.section-title {
    text-align: left;
    margin-bottom: 0;
}

/* ==========================================================================
   NIEUWE FAQ STYLING (Clean & Consistent)
   ========================================================================== */

.faq-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
    max-width: 800px;
    margin: 0 auto;
}

.faq-item {
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 15px;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.02);
}

/* Hover effect */
.faq-item:hover {
    border-color: #d1d1d1;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

/* Open status */
.faq-item[open] {
    border-color: var(--kleur-primair); /* Jouw donkergroen */
    box-shadow: 0 4px 12px rgba(26, 83, 92, 0.08);
}

/* De vraagbalk */
.faq-item summary {
    padding: 20px 25px;
    font-family: var(--font-titel); /* Consistentie met je titels */
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--kleur-primair);
    cursor: pointer;
    list-style: none; /* Verberg default driehoekje */
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    transition: background-color 0.2s;
}

/* Verberg default marker in Safari/Chrome */
.faq-item summary::-webkit-details-marker {
    display: none;
}

/* Het Icoontje */
.faq-item summary i {
    color: var(--kleur-accent); /* Jouw geel/goud */
    font-size: 1rem;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Cirkeltje om het icoon voor extra body */
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 196, 0, 0.1); /* Zeer licht geel */
    border-radius: 50%;
}

.faq-item:hover summary i {
    background: rgba(255, 196, 0, 0.2);
}

/* Icoon draaien bij openen */
.faq-item[open] summary i {
    transform: rotate(180deg);
    background: var(--kleur-accent);
    color: var(--kleur-primair);
}

/* De Inhoud */
.faq-content {
    padding: 0 25px 25px 25px;
    color: #555;
    font-family: var(--font-body);
    line-height: 1.7;
    font-size: 0.95rem;
    border-top: 1px solid transparent;
    animation: simpleFadeIn 0.3s ease-in-out;
}

.faq-content p {
    margin-bottom: 15px;
}
.faq-content p:last-child {
    margin-bottom: 0;
}

.faq-item[open] .faq-content {
    /* Optioneel lijntje tussen vraag en antwoord */
    border-top-color: #f9f9f9; 
    padding-top: 20px;
}

@keyframes simpleFadeIn {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Mobiele aanpassingen */
@media (max-width: 600px) {
    .faq-item summary {
        padding: 15px 20px;
        font-size: 1rem;
    }
    .faq-content {
        padding: 0 20px 20px 20px;
    }
}
/* ==========================================================================
   MARKETING MANNETJE: DE DEFINITIEVE FIXES (MOBILE FIRST - COMPACT VERSION)
   ========================================================================== */

/* --- 1. SECTIE HEADERS: Hybride Layout (Mobiel Links / Desktop Center) --- */

/* BASIS (Mobile First): Alles strak links */
.section-header, 
.title-snug-wrapper, 
.v-header-top,
.header-stack-center {
    display: flex;
    flex-direction: column;
    align-items: flex-start !important;
    text-align: left !important;
    width: 100%;
    margin-bottom: 0px;
}

/* Subtitels en Kickers ook links */
.section-subtitle,
.section-subtitle.fit-content {
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    max-width: 700px;
}

.kicker-pill {
    align-self: flex-start !important; /* Altijd links boven de titel */
    margin-left: 0 !important;
    margin-bottom: 10px;
    
    /* Visuele upgrade */
    font-size: 0.75rem; 
    padding: 6px 16px;
}

.section-intro-logo {
    display: none !important; /* Weg met die dubbele logo's in de secties! */
}

/* DESKTOP (Vanaf 900px): Alles naar het midden, BEHALVE de kicker */
@media (min-width: 900px) {
    .title-snug-wrapper,
    .v-header-top,
    .section-header.text-center {
        width: fit-content !important; 
        margin-left: auto !important;
        margin-right: auto !important;
        align-items: center !important; 
    }

    /* TRUC: De Kicker blijft links in het 'doosje' van de titel staan */
    .title-snug-wrapper .kicker-pill,
    .v-header-top .kicker-pill {
        align-self: flex-start !important; 
    }

    /* Titel en subtitel centreren */
    .section-title { text-align: center !important; }
    
    .section-subtitle,
    .section-subtitle.fit-content,
    .v-header-bottom {
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* --- 2. LAYOUT & PADDING (AANGEPAST: COMPACTER OP MOBIEL) --- */

.section-spacing { 
    /* MOBIEL BASIS: Compact */
    padding-top: 40px; 
    padding-left: 20px;
    padding-right: 20px;
    
    /* AANGEPAST: Minder lucht aan de onderkant (Was 80px) */
    /* Dit zorgt dat de tekst dichter op de golf staat */
    padding-bottom: 60px !important; 
}

/* DESKTOP (Vanaf 900px) */
@media (min-width: 900px) {
    .section-spacing { 
        padding-top: 0px; 
        /* Desktop heeft wel meer lucht nodig voor de grote golf */
        padding-bottom: 150px !important; 
    }
}

/* --- 3. DE SUNRISE DIVIDER (AANGEPAST: STRAKKER OP MOBIEL) --- */

.sunrise-divider {
    position: relative;
    width: 100%;
    overflow: hidden; 
    z-index: 1;

    /* MOBIEL: Compacte hoogte */
    height: 100px; 
    
    /* AANGEPAST: We trekken hem iets verder omhoog (-50px ipv -40px) */
    /* Dit verkleint het visuele gat tussen tekst en golf */
    margin-top: -50px; 
}

/* Uitzondering voor onder de Hero (blijft ruim ivm knoppen) */
.sunrise-divider.is-hero-spacer {
    margin-top: 180px; 
}

/* De Zon */
.sunrise-sun-wrapper {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 80px; /* Klein zonnetje op mobiel */
    z-index: 10;
    
    /* START: Verstopt */
    bottom: -150px; 
    opacity: 0; 
    
    transition: bottom 2s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 1.5s ease-out;
}

/* EIND: In beeld */
.sunrise-divider.in-view .sunrise-sun-wrapper {
    bottom: 0px; /* Net boven de horizon */
    opacity: 1;
}

.sunrise-sun-img {
    width: 100%; height: auto; display: block;
}

/* De Golf */
.sunrise-divider .divider-wave-bg {
    position: absolute;
    bottom: 0; left: 0;
    width: 100%; 
    height: 120px; 
    z-index: 5; 
    pointer-events: none;
}

.sunrise-divider .divider-wave-bg svg {
    position: absolute;
    bottom: -1px; left: 0;
    height: auto;
    min-height: 80px; 
    transform: scaleY(0.6); /* Platte golf op mobiel */
    transform-origin: bottom;
}

/* DESKTOP UPGRADE (Vanaf 900px) */
@media (min-width: 900px) {
    .sunrise-divider {
        height: 150px; 
        margin-top: -80px; /* Grote overlap */
    }
    
    .sunrise-divider.is-hero-spacer {
        margin-top: 220px; 
    }

    .sunrise-sun-wrapper {
        width: 100px; 
    }

    .sunrise-divider.in-view .sunrise-sun-wrapper {
        bottom: 50px; 
    }

    .sunrise-divider .divider-wave-bg {
        height: 100%; 
    }

   
    /* --- FIX 1: ABONNEMENTEN HEADER CENTREREN --- */
    /* We voegen '.header-stack-center' toe aan de lijst */
    .title-snug-wrapper,
    .v-header-top,
    .section-header.text-center,
    .header-stack-center {  /* <--- DEZE IS NIEUW TOEGEVOEGD */
        width: fit-content !important; 
        margin-left: auto !important;
        margin-right: auto !important;
        align-items: center !important; /* Zorgt dat alles in het midden staat */
        text-align: center !important;
    }

    

    /* Titel en subtitel centreren */
    .section-title { text-align: center !important; }
    
    .section-subtitle,
    .section-subtitle.fit-content,
    .v-header-bottom {
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}


/* --- 4. FEATURE STRIP (PILL) --- */
.strip-grid-inline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

.strip-visual-box {
    flex-shrink: 0; height: 50px; display: flex; align-items: center;
}
.strip-img-element { height: 100%; width: auto; }

.strip-content-inline {
    flex-grow: 1; display: flex; align-items: center; gap: 15px;
}
.strip-title {
    font-family: var(--font-titel); font-size: 1.1rem; color: var(--kleur-primair); margin: 0; white-space: nowrap;
}
.strip-text {
    font-family: var(--font-body); font-size: 0.95rem; color: #666; margin: 0; 
    border-left: 1px solid #ddd; padding-left: 15px;
}

.btn-icon-only {
    display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 50%;
    background-color: var(--kleur-accent); color: var(--kleur-primair);
    transition: transform 0.2s;
}
.btn-icon-only:hover { transform: scale(1.1); }

/* Mobiele fix voor de strip */
@media (max-width: 600px) {
    .feature-strip-compact {
        width: 95%; padding: 10px 15px; border-radius: 40px; margin-top: -30px;
    }
    .strip-grid-inline { gap: 10px; }
    .strip-visual-box { height: 35px; }
    .strip-text { display: none; } /* Rust op mobiel: tekst weg */
    .strip-title { font-size: 0.95rem; }
    .btn-icon-only { width: 35px; height: 35px; }
}

/* ==================================================   
   ACHTERGRONDEN
====================================================*/

.fill-geel, 
.bg-unified-geel {
    background-color: var(--kleur-bg-geel) !important;
    fill: var(--kleur-bg-geel) !important;
}

.fill-groen,
.bg-soft-gray { 
    background-color: var(--kleur-bg-groen-soft) !important;
    fill: var(--kleur-bg-groen-soft) !important;
}

.fill-blauw,
.bg-unified-blauw { 
    background-color: var(--kleur-bg-blauw) !important;
    fill: var(--kleur-bg-blauw) !important; 
}

.fill-standaard {
    background-color: var(--kleur-primair) !important;
    fill: var(--kleur-primair) !important;
}

    
/* ==========================================================================
   MARKETING MANNETJE: STABIELE TRANSITIES & GROEPEN
   ========================================================================== */

/* 1. DE SCROLL WRAPPER */
.scroll-group-wrapper {
    display: block;       
    width: 100%;
    position: relative;  
    z-index: 9;          
    will-change: transform, opacity; 
}

/* 2. DE ONDERROK (Gap Filler) */
section.extend-bottom {
    position: relative;
    z-index: 1; 
}

section.extend-bottom::after {
    content: '';
    position: absolute;
    bottom: -150px; 
    left: 0;
    width: 100%;
    height: 150px; 
    z-index: -1; 
}

/* Kleurkoppelingen voor de onderrok */
section.extend-bottom.fill-groen::after { background-color: var(--kleur-bg-groen-soft) !important; }
section.extend-bottom.fill-blauw::after { background-color: var(--kleur-bg-blauw) !important; }
section.extend-bottom.fill-geel::after { background-color: var(--kleur-bg-geel)!important; }


/* 3. ZON FIX BINNEN DE GROEP */
.scroll-group-wrapper .sunrise-divider {
    transform: none !important;
    opacity: 1 !important;
}

/* 4. ANIMATIE STARTPUNT (MOBILE FIRST) */
.scroll-animate {
    opacity: 0;
    /* MOBIEL: Kleine sprong van 30px voor rust */
    transform: translateY(30px); 
    transition: opacity 1s cubic-bezier(0.25, 1, 0.5, 1), transform 1s cubic-bezier(0.25, 1, 0.5, 1);
}

.scroll-animate.in-view {
    opacity: 1;
    transform: translateY(0); 
}

/* DESKTOP: Iets grotere beweging */
@media (min-width: 900px) {
    .scroll-animate {
        transform: translateY(60px);
    }
}

/* 5. HERO CONNECTOR (MOBILE FIRST FIX) */
.hero-connector {
    /* MOBIEL: 180px ruimte voor gestapelde knoppen */
    margin-top: 180px !important; 
    background-color: transparent !important;
    position: relative !important;
    z-index: 1;
}

/* DESKTOP AANPASSING */
@media (min-width: 900px) {
    .hero-connector {
        margin-top: 0px 
    }
}


/* ==========================================================================
   MARKETING MANNETJE: FEATURE STRIP (STAND-ALONE VERSIE)
   ========================================================================== */

/* 1. DE CONTAINER */
.feature-strip-compact {
    position: relative;
    background-color: #ffffff;
    width: 90%;
    max-width: 800px;
    margin: 40px auto 0 auto; 
    padding: 15px 30px;
    border-radius: 60px;
    box-shadow: 0 15px 35px rgba(26, 83, 92, 0.08);
    border: none; 
    z-index: 50;
}

/* 2. DE LAYOUT */
.strip-grid-inline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 30px;
}

/* 3. HET PLAATJE */
.strip-visual-box {
    flex-shrink: 0;
    height: 50px; 
    display: flex;
    align-items: center;
}

.strip-img-element {
    height: 100%;
    width: auto;
    object-fit: contain;
}

/* 4. DE TEKST */
.strip-content-inline {
    flex-grow: 1;
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

.strip-title {
    font-family: var(--font-titel);
    font-size: 1.1rem;
    color: var(--kleur-primair);
    margin: 0;
    white-space: nowrap;
}

.strip-text {
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: #666;
    margin: 0;
    border-left: 1px solid #ddd; 
    padding-left: 15px;
}

/* 5. DE KNOP */
.btn-icon-only {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    background-color: var(--kleur-accent);
    color: var(--kleur-primair);
    border-radius: 50%;
    text-decoration: none;
    transition: transform 0.2s;
    flex-shrink: 0;
}

.btn-icon-only:hover {
    transform: scale(1.1);
}

/* --- MOBIELE AANPASSINGEN --- */
@media (max-width: 600px) {
    .feature-strip-compact {
        width: 95%;
        padding: 10px 15px;
        border-radius: 40px;
        margin-top: 30px; 
    }

    .strip-grid-inline {
        gap: 15px;
    }

    .strip-visual-box {
        height: 35px; 
    }

    .strip-text {
        display: none; 
    }

    .strip-title {
        font-size: 0.95rem;
    }

    .btn-icon-only {
        width: 35px; height: 35px;
    }
}
/* ==========================================================================
   MARKETING MANNETJE: EASTER EGG (DE COOL-DOWN)
   ========================================================================== */

@keyframes spin-cool {
    0% { transform: translateX(-50%) rotate(0deg); }
    100% { transform: translateX(-50%) rotate(360deg); }
}

.sunrise-sun-wrapper.is-cool {
    cursor: pointer;
    animation: spin-cool 0.8s ease-in-out;
}

.sunrise-sun-wrapper.is-cool::after {
    content: '🕶️'; 
    position: absolute;
    top: 25%;  
    left: 50%;
    transform: translateX(-50%);
    font-size: 60px; 
    line-height: 1;
    z-index: 10;
    animation: drop-shades 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes drop-shades {
    0% { top: -50px; opacity: 0; }
    100% { top: 25%; opacity: 1; }
}

.sunrise-sun-wrapper {
    cursor: pointer; 
    transition: transform 0.3s ease;
}

.sunrise-sun-wrapper:hover {
    transform: translateX(-50%) scale(1.1); 
}