/* Home: het ritme van de film, rustig gehouden. Navy (hero) → film op de naad → blauw ("Wat ik voor je bouw":
   witte kaarten op blauw) → licht (de drie stappen) → wit (over mij, sluit er vlak op aan) → blauwe CTA.
   De film staat op de naad: bovenhelft navy, onderhelft blauw, en loopt zo over in de diensten.
   Alleen de H1 met zijn glimlach is het focuspunt van de hero; er zweeft niets omheen. */
.pagina-index .sectie--film{background:var(--korrel),linear-gradient(to bottom,transparent 52%,var(--blauw) 52%),radial-gradient(640px 300px at 50% 0,rgba(37,99,235,.3),transparent 70%),var(--nacht);}
.pagina-index .sectie--film + .sectie--blauw{margin-top:0;border-radius:0;background:var(--korrel),radial-gradient(80% 60% at 50% 55%,rgba(126,166,247,.3),transparent 70%),var(--blauw);}
.pagina-index .sectie--film .film__onder{color:rgba(255,255,255,.92);}
.pagina-index .film__video{box-shadow:0 0 0 1px rgba(186,209,252,.28),0 40px 90px -40px rgba(7,20,42,.7);}
.pagina-index .sectie--blauw .noot,.pagina-index .sectie--blauw .noot strong,.pagina-index .sectie--blauw .noot a{color:var(--wit);}
/* Over mij, gestapeld: ruimte onder het portret zodat de logotegel vrij hangt van "Over mij". */
@media (max-width:860px){.pagina-index .overmij{row-gap:56px;}}

/* haakje in de hero naar de AI-assistent */
.pagina-index .hero__ai{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:20px;font-size:16.5px;font-weight:600;color:var(--lucht);animation:opdoemen .5s var(--ease) .64s both;}
.pagina-index .hero__ai .icoon{width:18px;height:18px;rotate:90deg;}
.pagina-index .hero--home .hero__ai + .persoon{margin-top:24px;}

/* tekstversie van de film: een stille uitklapper onder het bijschrift, wit op blauw, zonder kader */
.pagina-index .film__tekst{max-width:62ch;margin:10px auto 0;font-size:15px;line-height:1.6;color:var(--wit);text-align:center;}
.pagina-index .film__tekst summary{display:inline-flex;align-items:center;gap:9px;padding:6px 4px;border-radius:6px;list-style:none;cursor:pointer;font-weight:600;text-decoration:underline;text-decoration-color:rgba(255,255,255,.45);text-underline-offset:5px;transition:text-decoration-color var(--t-ui);}
.pagina-index .film__tekst summary::-webkit-details-marker{display:none;}
.pagina-index .film__tekst summary::after{content:"";width:6px;height:6px;border-right:2px solid;border-bottom:2px solid;rotate:45deg;translate:0 -2px;transition:rotate var(--t-ui) var(--ease),translate var(--t-ui) var(--ease);}
.pagina-index .film__tekst[open] summary::after{rotate:225deg;translate:0 2px;}
.pagina-index .film__tekst summary:hover{text-decoration-color:var(--wit);}
.pagina-index .film__tekst p{margin:8px 0 0;text-align:left;text-wrap:pretty;}
/* filmknop op smalle schermen: 'Bekijk de film' op één regel houden; onder 360px iets minder lucht rechts */
.pagina-index .film__speel{white-space:nowrap;}
@media (max-width:360px){.js .pagina-index .film__speel{padding-right:13px;}}

/* ---------- telefoon: rustiger homepage (alleen ≤ 640px, desktop blijft gelijk) ---------- */
@media (max-width:640px){
  .pagina-index .hero__acties .knop--glas,
  .pagina-index .hero__ai{display:none;}
  /* hero: alleen kop, zin en één knop. Bart staat verderop al met foto in 'Over mij'; de kop gloeit zachter */
  .pagina-index .hero--home .persoon{display:none;}
  /* zonder persoon en tweede knop geen 84svh meer: anders staat er een lege donkere band onder 'Plan een gesprek' */
  .pagina-index .hero--home{min-height:auto;padding-bottom:40px;}
  .pagina-index .hero--home .onderstreept{text-shadow:0 0 18px rgba(126,166,247,.28);}
  .pagina-index .hero--home .glimlach-streep{filter:drop-shadow(0 0 3px rgba(37,99,235,.4));}
  /* assistent: meer lucht onder de hero; de vragen als kleine chips, het antwoordvlak pas na een klik */
  .pagina-index .hero + .sectie.assistent-sectie{padding-top:48px;}
  .pagina-index .assistent__balk,
  .pagina-index #assistent-lead{display:none;}
  .pagina-index .assistent__vragen{display:flex;flex-wrap:wrap;gap:10px;}
  .pagina-index .assistent__vraag{width:auto;min-height:44px;gap:9px;padding:0 16px 0 13px;border:1px solid rgba(126,166,247,.5);background:rgba(37,99,235,.16);color:var(--wit);font-size:15px;box-shadow:none;}
  .pagina-index .assistent__vraag::before,
  .pagina-index .assistent__vraag .assistent__pijl{display:none;}
  .pagina-index .assistent__vraag > .icoon{width:15px;height:15px;color:var(--lucht);}
  .pagina-index .assistent__vraag[aria-pressed="true"]{background:var(--blauw);border-color:var(--blauw);box-shadow:none;}
  .pagina-index .assistent--aan:not(.is-gevraagd) .assistent__scherm{display:none;}
  .pagina-index .assistent--aan:not(.is-gevraagd) .assistent__keuze{border-bottom:0;}
  /* film: niet op de naad, maar als gewone navy scène; daarna de blauwe diensten met de normale ronde rand */
  .pagina-index .sectie--film{z-index:auto;padding-bottom:88px;background:var(--korrel),var(--nacht);}
  .pagina-index .sectie--film + .sectie--blauw{margin-top:-24px;border-radius:24px 24px 0 0;}
  .pagina-index .film__onder{display:none;}
  .pagina-index .film__tekst{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
  /* wie er met het toetsenbord op landt (of hem opent), ziet de uitklapper gewoon */
  .pagina-index .film__tekst:is(:focus-within,[open]){position:static;margin-top:30px;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal;}
  .pagina-index .sectie--blauw .kop .lead,
  .pagina-index .sectie--blauw .noot,
  .pagina-index .kaart__meer{display:none;}
  /* alleen de kaart die naar een ander domein gaat houdt zijn linkregel, zodat je weet waar je heen gaat */
  .pagina-index .kaart--link[href^="http"] .kaart__meer{display:block;}
  /* onder een antwoord één knop: bellen kan via de belknop in de navigatie en in het blok onderaan */
  .pagina-index .assistent__knoppen .knop--glas{display:none;}
  .pagina-index .split__kop .lead,
  .pagina-index .split__kop .knop{display:none;}
  /* stappen: de glimlach op de lijn markeert elke stap al; geen tweede icoon in de kaart */
  .pagina-index .stap .chip{display:none;}
  .pagina-index .overmij .vink{display:none;}
  .pagina-index .overmij .portret{max-width:300px;}
}
/* kopje boven de H1: op de telefoon twee rustige regels ("… en AI" / "voor het mkb") in plaats van een losse afbreking */
@media (max-width:640px){.pagina-index .hero__mkb{display:block;}}