/* ── Hero ──────────────────────────────────────────────────────── */
.heroHome{padding:96px 0 72px;background:linear-gradient(165deg,#0F1B2D 0%,#1B2B45 100%);margin-top:-74px;padding-top:170px}
.heroHome .sectionLabel{color:#7E9BFF}
.heroHomeContent{max-width:820px}
.heroHomeContent h1{font-size:58px;color:#fff;margin-bottom:24px}
.heroHomeContent h1 .textIndigo{color:#7E9BFF}
.heroHomeSub{font-size:19px;line-height:1.7;color:#B9C4D6;margin-bottom:34px}
.heroHomeBtns{display:flex;flex-wrap:wrap;gap:14px}
.heroHome .btnOutline{color:#fff;border-color:rgba(255,255,255,.3)}
.heroHome .btnOutline:hover{background:rgba(255,255,255,.1);color:#fff;border-color:#fff}

/* ── Top 3 ─────────────────────────────────────────────────────── */

/* ── Criteria ──────────────────────────────────────────────────── */
.homeCriteria{padding:88px 0 0}
.homeCriteriaIntro{max-width:760px;margin-top:14px}
.homeCriteriaIntro a{color:var(--color-indigo);text-decoration:underline}
.homeCriteriaGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:34px}
.homeCriterion{padding:26px;border-radius:var(--radius-card);background:var(--background-alt-1)}
.homeCriterion h3{font-size:17px;margin-bottom:8px}
.homeCriterion p{font-size:15px;line-height:1.6}

/* ── Ranglijst ─────────────────────────────────────────────────── */
.homeRanking{padding:88px 0 0}
.homeRanking .btnGhost{margin-top:26px}

/* ── Body + CTA ────────────────────────────────────────────────── */
.homeBody{padding:72px 0 0}
.homeCta{margin-top:88px;padding:72px 0;background:var(--background-alt-1);text-align:center}
.homeCta h2{font-size:34px;margin-bottom:14px}
.homeCta p{max-width:620px;margin:0 auto 28px}

@media (max-width:992px){
    .heroHomeContent h1{font-size:44px}
    .homeCriteriaGrid{grid-template-columns:1fr 1fr}
}
@media (max-width:768px){
    .heroHome{padding-top:140px;padding-bottom:56px}
    .heroHomeContent h1{font-size:34px}
    .heroHomeSub{font-size:17px}
    .homeCriteria,.homeRanking{padding-top:64px}
    .homeCta h2{font-size:26px}
}
@media (max-width:480px){
    .homeCriteriaGrid{grid-template-columns:1fr}
}

/* ══════════════════════════════════════════════════════════════════
   Leesblokken: uitgelicht, blog en kennisbank

   Drie blokken onder elkaar, elk met een eigen ondergrond zodat ze niet in
   elkaar overlopen: het uitgelichte blok staat op hetzelfde donkerblauw als
   de hero, het blograster op wit, en de kennisbank in een lichtgrijs paneel.
   ══════════════════════════════════════════════════════════════════ */

/* ── Sectiekop met "lees meer" ─────────────────────────────────── */

.homeSectieKop{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:32px;
    margin-bottom:34px;
}
.homeSectieKopTekst{max-width:660px}
.homeSectieKopTekst .sectionLabel{margin-bottom:10px}
.homeSectieKopTekst h2{font-size:34px}
.homeSectieKopTekst p{margin:12px 0 0;font-size:16px;line-height:1.7}

.homeMeer{
    display:inline-flex;
    align-items:center;
    gap:9px;
    flex-shrink:0;
    padding-bottom:6px;
    font-size:15px;
    font-weight:700;
    color:var(--color-indigo);
}
.homeMeer svg{transition:transform .3s ease}
.homeMeer:hover svg{transform:translateX(4px)}

/* ── Uitgelicht: vastgepinde berichten ─────────────────────────── */

.homeUitgelicht{
    margin-top:88px;
    padding:76px 0 82px;
    background:linear-gradient(165deg,#0F1B2D 0%,#1B2B45 100%);
    overflow:hidden;
}
/* Zachte indigo gloed rechtsboven, zodat het vlak niet als één egale bak
   leest. Puur decoratief en buiten de leesrichting. */
.homeUitgelicht::before{
    content:'';
    position:absolute;
    top:-220px;
    right:-140px;
    width:620px;
    height:620px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(43,78,230,.38) 0%,rgba(43,78,230,0) 70%);
    pointer-events:none;
}
.homeUitgelicht .sectionLabel{color:#7E9BFF}
.homeUitgelicht h2{color:#fff}
.homeUitgelicht .homeSectieKopTekst p{color:#B9C4D6}
.homeUitgelicht .homeMeer{color:#7E9BFF}
.homeUitgelicht .homeMeer:hover{color:#fff}

.pinGrid{display:grid;gap:20px}
.pinGrid[data-aantal="1"]{grid-template-columns:1fr}
.pinGrid[data-aantal="2"]{grid-template-columns:1fr 1fr}
/* Bij drie: één hoge kaart links, twee compacte kaarten in de rechterkolom. */
.pinGrid[data-aantal="3"]{grid-template-columns:1.5fr 1fr;grid-template-rows:1fr 1fr}
.pinGrid[data-aantal="3"] .pinKaartGroot{grid-row:1 / span 2}

/* ── Uitgelichte kaart ─────────────────────────────────────────── */

.pinKaart{
    position:relative;
    overflow:hidden;
    border-radius:18px;
    border:1px solid rgba(255,255,255,.13);
    background:rgba(255,255,255,.05);
    transition:var(--transition);
}
.pinKaart:hover{
    transform:translateY(-3px);
    border-color:rgba(126,155,255,.5);
    box-shadow:0 18px 40px rgba(0,0,0,.34);
}

.pinKaartBeeld{position:relative;overflow:hidden}
.pinKaartBeeld img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.pinKaart:hover .pinKaartBeeld img{transform:scale(1.05)}

/* Kaart zonder uitgelichte afbeelding: het merkteken als watermerk op een
   indigo vlak met een fijn stippelraster, in dezelfde stijl als de kaart
   zonder beeld in het blogoverzicht. */
.pinKaartLeeg{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    color:rgba(255,255,255,.16);
    background:linear-gradient(135deg,#24409A 0%,#0F1B2D 100%);
}
.pinKaartLeeg::before{
    content:'';
    position:absolute;
    inset:0;
    background-image:radial-gradient(rgba(255,255,255,.09) 1px,transparent 1px);
    background-size:20px 20px;
}
.pinKaartLeeg svg{position:relative}

.pinKaartLabels{display:flex;flex-wrap:wrap;align-items:center;gap:9px}
.pinKaartLabels:empty{display:none}

.pinBadge{
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:6px 13px;
    border-radius:var(--radius-pill);
    border:1px solid rgba(126,155,255,.38);
    background:rgba(126,155,255,.18);
    color:#C2CFFF;
    font-size:11.5px;
    font-weight:700;
    letter-spacing:.07em;
    text-transform:uppercase;
}

.pinKaartCat{
    position:relative;
    z-index:2;
    padding:6px 13px;
    border-radius:var(--radius-pill);
    background:rgba(255,255,255,.13);
    color:#fff;
    font-size:11.5px;
    font-weight:700;
    letter-spacing:.05em;
    text-transform:uppercase;
    transition:var(--transition);
}
.pinKaartCat:hover{background:#fff;color:var(--color-ink)}

.pinKaartTitel{margin:0;font-weight:800;letter-spacing:-.02em}
.pinKaartTitel a{color:#fff}
/* Onzichtbaar vlak over de hele kaart: de kaart is klikbaar zonder dat er een
   tweede link met dezelfde bestemming in de opsomming van een schermlezer
   belandt. De categoriepil ligt er met z-index:2 bovenop. */
.pinKaartTitel a::after{content:'';position:absolute;inset:0;z-index:1}

.pinKaartTekst{margin:0;font-size:15.5px;line-height:1.7;color:#C3CDDE;max-width:58ch}

.pinKaartVoet{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.pinKaartMeta{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:#93A2BC}
.pinKaartPunt{opacity:.55}
.pinKaartMeer{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:#7E9BFF}
.pinKaartMeer svg{transition:transform .3s ease}
.pinKaart:hover .pinKaartMeer svg{transform:translateX(4px)}

/* Grote kaart: beeld en tekst liggen op elkaar in dezelfde rastercel, met een
   verloop over het beeld zodat de tekst leesbaar blijft. */
.pinKaartGroot{display:grid;grid-template-areas:'stack';min-height:346px}
.pinKaartGroot > *{grid-area:stack;min-width:0}
.pinKaartGroot .pinKaartBeeld{align-self:stretch}
.pinKaartGroot .pinKaartBeeld::after{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,rgba(15,27,45,.1) 0%,rgba(15,27,45,.68) 52%,rgba(15,27,45,.94) 100%);
}
.pinKaartGroot .pinKaartInhoud{
    z-index:1;
    align-self:end;
    display:flex;
    flex-direction:column;
    gap:13px;
    padding:34px 38px 30px;
}
.pinKaartGroot .pinKaartTitel{font-size:27px;line-height:1.25}

/* Compacte kaart: beeld links, tekst rechts. */
.pinKaartCompact{display:flex;align-items:stretch;min-height:163px}
.pinKaartCompact .pinKaartBeeld{flex:0 0 36%;min-width:0}
.pinKaartCompact .pinKaartInhoud{
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:10px;
    min-width:0;
    padding:22px 26px;
}
.pinKaartCompact .pinKaartTitel{font-size:17.5px;line-height:1.35}
.pinKaartCompact .pinKaartLeeg{background:linear-gradient(150deg,#24409A 0%,#0F1B2D 100%)}

/* ── Laatste artikelen ─────────────────────────────────────────── */

.homeBlog{padding:84px 0 0}

/* ── Kennisbank ────────────────────────────────────────────────── */

.homeKennis{padding:84px 0 0}
.homeKennisPaneel{
    padding:44px 46px 46px;
    border-radius:24px;
    border:1px solid var(--border-color-2);
    background:var(--background-alt-1);
}
.homeKennisPaneel .homeSectieKop{margin-bottom:24px}
.homeKennis .btnGhost{margin-top:30px}

.kennisCats{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:26px}
.kennisCat{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 15px;
    border-radius:var(--radius-pill);
    border:1px solid var(--border-color-1);
    background:var(--white-bg-1);
    font-size:14px;
    font-weight:600;
    color:var(--font-color-dark);
    transition:var(--transition);
}
.kennisCat:hover{border-color:var(--color-indigo);color:var(--color-indigo);transform:translateY(-2px)}
.kennisCatAantal{font-size:12px;font-weight:700;color:var(--font-color);opacity:.7}
.kennisCat:hover .kennisCatAantal{color:var(--color-indigo);opacity:1}

.kennisGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.kennisKaart{
    position:relative;
    display:flex;
    flex-direction:column;
    gap:9px;
    padding:24px 26px;
    border-radius:var(--radius-card);
    border:1px solid var(--border-color-1);
    background:var(--white-bg-1);
    box-shadow:var(--shadow-card);
    transition:var(--transition);
}
.kennisKaart:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift);border-color:#C6D3F3}
.kennisKaartCat{font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--color-indigo)}
.kennisKaart h3{font-size:17.5px;line-height:1.35;margin:0}
.kennisKaart h3 a{color:var(--font-color-dark)}
.kennisKaart h3 a::after{content:'';position:absolute;inset:0}
.kennisKaart:hover h3 a{color:var(--color-indigo)}
.kennisKaartTekst{margin:0;font-size:14.5px;line-height:1.7}
.kennisKaartMeta{
    display:flex;
    align-items:center;
    gap:9px;
    margin:auto 0 0;
    padding-top:14px;
    border-top:1px solid var(--border-color-2);
    font-size:13px;
    font-weight:600;
}
.kennisKaartMeta svg{flex-shrink:0;color:var(--color-indigo)}

/* ── Responsief ────────────────────────────────────────────────── */

@media (max-width:1100px){
    .kennisGrid{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
    /* De hoge kaart naast twee compacte kaarten wordt te smal; alles onder
       elkaar in één kolom. */
    .pinGrid[data-aantal="2"],
    .pinGrid[data-aantal="3"]{grid-template-columns:1fr;grid-template-rows:none}
    .pinGrid[data-aantal="3"] .pinKaartGroot{grid-row:auto}
    .homeKennisPaneel{padding:34px 30px 36px}
}
@media (max-width:768px){
    .homeSectieKop{flex-direction:column;align-items:flex-start;gap:14px;margin-bottom:26px}
    .homeSectieKopTekst h2{font-size:26px}
    .homeMeer{padding-bottom:0}

    .homeUitgelicht{margin-top:64px;padding:56px 0 60px}
    .homeBlog,.homeKennis{padding-top:64px}

    .pinKaartGroot{min-height:300px}
    .pinKaartGroot .pinKaartInhoud{padding:26px 24px 24px;gap:11px}
    .pinKaartGroot .pinKaartTitel{font-size:21px}
    .pinKaartGroot .pinKaartTekst{font-size:15px}

    /* Een strook beeld naast twee regels tekst wordt op een telefoon een
       postzegel; het beeld gaat erboven. */
    .pinKaartCompact{flex-direction:column;min-height:0}
    .pinKaartCompact .pinKaartBeeld{flex:none;aspect-ratio:16/9}
    .pinKaartCompact .pinKaartInhoud{padding:20px 22px 22px}

    .kennisGrid{grid-template-columns:1fr}
    .homeKennisPaneel{padding:28px 22px 30px;border-radius:18px}
}
@media (max-width:480px){
    .kennisCat{font-size:13.5px;padding:7px 13px}
}

/* Wie minder beweging heeft ingesteld krijgt de kleur- en schaduwwissel wel
   en de verplaatsing niet. */
@media (prefers-reduced-motion:reduce){
    .pinKaart:hover,.kennisKaart:hover,.kennisCat:hover{transform:none}
    .pinKaart:hover .pinKaartBeeld img{transform:none}
    .homeMeer:hover svg,.pinKaart:hover .pinKaartMeer svg{transform:none}
}