/* Wie, wat, AI? (landingspagina voor wiewatai.nl en wiewatwai.nl): uitleg voor ondernemers
   die met AI willen beginnen. Navy hero (grote kop "Wie, wat, AI?" met een subregel, glaspaneel
   met drie korte antwoorden) → licht (wat is AI: één kaart met uitleg, twee lijstjes en de
   officiële omschrijving) → wit (zes voorbeelden + navy afsluiter 'niet alles hoeft AI te zijn')
   → licht (wie doet wat: vier rollen, de AI-kaart in navy) → wit (waar begin je: drie stappen,
   eindigt bij de bedrijfsanalyse) → licht (waar moet je op letten + vragen) → blauwe CTA. */

/* ---- hero: korte kop, dus groot; subregel in ijsblauw onder de glimlach ---- */
.pagina-wie-wat-ai .hero__tekst{min-width:0;}
.pagina-wie-wat-ai .hero h1{font-size:clamp(52px,7.4vw,108px);line-height:.9;padding-bottom:0;text-wrap:wrap;} /* niet balanceren: 'Wie, wat,' samen op de eerste regel, 'AI?' eronder */
.pagina-wie-wat-ai .wwa-sub{display:block;margin-top:clamp(30px,3.2vw,46px);font-weight:800;font-size:clamp(18px,1.85vw,26px);line-height:1.15;letter-spacing:.01em;color:var(--ijs);text-wrap:balance;}
.pagina-wie-wat-ai .hero__tekst .hero__lead{margin-top:22px;}

/* glaspaneel: drie witte rijen, de vraag groot links en het antwoord rechts */
.pagina-wie-wat-ai .wwa-paneel{max-width:470px;margin-left:auto;}
.pagina-wie-wat-ai .wwa-vragen{list-style:none;margin:0;padding:0;display:grid;gap:12px;}
.pagina-wie-wat-ai .wwa-vraag{display:grid;grid-template-columns:96px minmax(0,1fr);align-items:center;gap:14px;padding:18px 20px;border-radius:18px;background:var(--wit);color:var(--navy);box-shadow:0 14px 30px -18px rgba(7,20,42,.6);
  animation:plop .45s var(--ease) both;animation-delay:calc(700ms + var(--k,0) * 120ms);}
.pagina-wie-wat-ai .wwa-vraag b{font:900 27px/1 var(--f-display);text-transform:uppercase;letter-spacing:-.01em;color:var(--blauw);}
.pagina-wie-wat-ai .wwa-vraag span{font-size:15.5px;line-height:1.4;}
.pagina-wie-wat-ai .wwa-vraag--ai{background:var(--blauw);color:var(--wit);box-shadow:0 0 0 1px rgba(126,166,247,.35),0 18px 40px -16px rgba(37,99,235,.8);}
.pagina-wie-wat-ai .wwa-vraag--ai b{position:relative;color:var(--wit);}
.pagina-wie-wat-ai .wwa-vraag--ai b::after{content:"";position:absolute;left:0;top:100%;width:44px;height:11px;margin-top:4px;background:var(--wit);mask:var(--glimlach-link) 0 0/100% 100% no-repeat;}

@media (max-width:900px){
  .pagina-wie-wat-ai .hero__beeld{max-width:470px;}
  .pagina-wie-wat-ai .wwa-paneel{margin-left:0;}
}
@media (max-width:640px){
  .pagina-wie-wat-ai .hero h1{font-size:min(15vw,64px);}
  .pagina-wie-wat-ai .wwa-sub{font-size:17px;margin-top:30px;}
}
/* de lange knoptekst mag op een smal scherm over twee regels */
@media (max-width:480px){
  .pagina-wie-wat-ai .wwa-hoofdknop{white-space:normal;justify-content:space-between;text-align:left;line-height:1.25;padding-block:6px;}
}

/* een link met de punt erachter niet over twee regels verdelen */
.pagina-wie-wat-ai .wwa-heel{white-space:nowrap;}

/* ---- wat is AI: één kaart met uitleg, twee lijstjes naast elkaar en de officiële omschrijving ---- */
.pagina-wie-wat-ai .wwa-uitleg{gap:16px;padding:clamp(24px,3.4vw,40px);}
.pagina-wie-wat-ai .wwa-uitleg > p{font-size:17px;line-height:1.6;}
.pagina-wie-wat-ai .wwa-twee{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;margin-top:10px;padding-top:24px;border-top:1px solid var(--lijn);}
.pagina-wie-wat-ai .wwa-twee h3{font-size:17px;margin-bottom:14px;}
.pagina-wie-wat-ai .wwa-twee .vink,
.pagina-wie-wat-ai .wwa-let{font-size:16px;line-height:1.5;color:var(--tekst);gap:10px;}
.pagina-wie-wat-ai .wwa-let{list-style:none;margin:0;padding:0;display:grid;}
.pagina-wie-wat-ai .wwa-let li{position:relative;padding-left:30px;}
.pagina-wie-wat-ai .wwa-let li::before{content:"!";position:absolute;left:1px;top:.18em;display:grid;place-items:center;width:18px;height:18px;border-radius:50%;border:1.5px solid var(--blauw);font:800 11px/1 var(--f-display);color:var(--blauw);}
.pagina-wie-wat-ai .wwa-let a{color:var(--blauw);text-underline-offset:.2em;}
.pagina-wie-wat-ai .kaart .wwa-bron{margin-top:8px;padding-top:18px;border-top:1px solid var(--lijn);font-size:14.5px;}
@media (max-width:640px){.pagina-wie-wat-ai .wwa-twee{grid-template-columns:minmax(0,1fr);gap:24px;}}

/* ---- voorbeelden: afdeling als klein label boven de kop ---- */
.pagina-wie-wat-ai .wwa-voorbeelden .kaart{gap:10px;}
.pagina-wie-wat-ai .wwa-voorbeelden .chip{margin-bottom:6px;}
.pagina-wie-wat-ai .kaart .wwa-afdeling{font:700 12px/1.2 var(--f-display);letter-spacing:.14em;text-transform:uppercase;color:var(--blauw);}
.pagina-wie-wat-ai .opmaat{margin-top:28px;}
.pagina-wie-wat-ai .opmaat .chip{width:56px;height:56px;}
.pagina-wie-wat-ai .opmaat p a{color:var(--ijs);}

/* ---- wie doet wat: vier rollen, de naam groot met een glimlach eronder ---- */
.pagina-wie-wat-ai .wwa-rol{gap:0;padding-top:30px;}
.pagina-wie-wat-ai .kaart .wwa-naam{font:900 clamp(32px,2.9vw,42px)/1 var(--f-display);text-transform:uppercase;letter-spacing:-.015em;color:var(--navy);}
.pagina-wie-wat-ai .wwa-naam::after{content:"";display:block;width:40px;height:11px;margin-top:12px;background:var(--blauw);mask:var(--glimlach-link) 0 0/100% 100% no-repeat;}
.pagina-wie-wat-ai .kaart .wwa-taak{margin:12px 0 18px;font-size:15px;font-weight:600;color:var(--tekst-zacht);}
.pagina-wie-wat-ai .wwa-rol .vink{font-size:15.5px;line-height:1.45;gap:10px;color:var(--tekst);}
/* AI is het hulpmiddel: de enige donkere kaart in de rij */
.pagina-wie-wat-ai .kaart.wwa-rol--ai .wwa-naam{color:var(--wit);text-shadow:var(--gloed-tekst);}
.pagina-wie-wat-ai .wwa-rol--ai .wwa-naam::after{background:var(--lucht);}
.pagina-wie-wat-ai .kaart.wwa-rol--ai .wwa-taak{color:var(--ijs);}
.pagina-wie-wat-ai .wwa-rol--ai .vink{color:var(--tekst-licht);}
.pagina-wie-wat-ai .wwa-rol--ai .vink li::before{background:var(--lucht);}
/* ik: met foto rechtsboven en links naar de diensten */
.pagina-wie-wat-ai .wwa-rol--ik{border-color:var(--blauw);}
.pagina-wie-wat-ai .wwa-foto{position:absolute;top:24px;right:24px;}
.pagina-wie-wat-ai .wwa-foto img{width:56px;height:56px;border-radius:50%;object-fit:cover;border:2px solid var(--grijs);}
.pagina-wie-wat-ai .kaart .wwa-meer{margin-top:auto;padding-top:16px;font-size:14.5px;}
.pagina-wie-wat-ai .wwa-rol--ik .vink{margin-bottom:18px;}

/* ---- waar begin je: knoppen onder de kop, prijs onder de stappen ---- */
.pagina-wie-wat-ai .wwa-acties{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px;}
.pagina-wie-wat-ai .wwa-acties .knop{margin-top:0;}
.pagina-wie-wat-ai .wwa-stappen .kaart__voet{margin-top:20px;max-width:none;}
.pagina-wie-wat-ai .wwa-stappen .prijs{font-size:24px;}

/* ---- waar moet je op letten: drie punten onder de kop, vragen ernaast ---- */
.pagina-wie-wat-ai .wwa-letop{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:20px;}
.pagina-wie-wat-ai .wwa-letop li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:start;}
.pagina-wie-wat-ai .wwa-letop p{font-size:16px;line-height:1.55;color:var(--tekst-zacht);}
.pagina-wie-wat-ai .wwa-letop b{display:block;margin-bottom:2px;font-size:17px;color:var(--navy);}

/* ---- telefoon: rustig, alleen de kern ---- */
@media (max-width:640px){
  .pagina-wie-wat-ai .hero__beeld{display:none;}
  .pagina-wie-wat-ai .split__kop > .knop,
  .pagina-wie-wat-ai .wwa-acties .knop--lijn,
  .pagina-wie-wat-ai .kaart .wwa-bron,
  .pagina-wie-wat-ai .wwa-uitleg > p:first-child,
  .pagina-wie-wat-ai .wwa-voorbeelden .kaart p,
  .pagina-wie-wat-ai .stap .chip{display:none;}
  /* voorbeelden compact: chip en kop op één rij (de lead zegt al dat er een mens meekijkt) */
  .pagina-wie-wat-ai .wwa-voorbeelden{gap:12px;}
  .pagina-wie-wat-ai .wwa-voorbeelden .kaart{flex-direction:row;align-items:center;gap:16px;padding:16px 20px;}
  .pagina-wie-wat-ai .wwa-voorbeelden .chip{margin:0;}
  .pagina-wie-wat-ai .wwa-voorbeelden h3{font-size:18px;}
  .pagina-wie-wat-ai .opmaat .chip{display:none;}
  .pagina-wie-wat-ai .wwa-rollen{gap:14px;}
  .pagina-wie-wat-ai .wwa-rol{padding:24px;}
  /* rollen compact: Jij, AI en Je team alleen met naam en rol (de lead zegt al wie wat doet), de Ik-kaart blijft compleet */
  .pagina-wie-wat-ai .wwa-rol:not(.wwa-rol--ik){flex-direction:row;align-items:center;justify-content:space-between;gap:16px;padding:18px 22px;}
  .pagina-wie-wat-ai .wwa-rol:not(.wwa-rol--ik) .vink{display:none;}
  .pagina-wie-wat-ai .kaart.wwa-rol:not(.wwa-rol--ik) .wwa-taak{margin:0;text-align:right;}
  .pagina-wie-wat-ai .wwa-stappen .kaart__voet{flex-direction:column;align-items:flex-start;gap:4px;}
}

@media (prefers-reduced-motion:reduce){
  .pagina-wie-wat-ai .wwa-vraag{animation:none;}
}