/* ============================================================================
   VoiceStack — vragenpagina (de advertentiebestemming)
   Aangemaakt 18 augustus 2026.

   Nagebouwd naar kingkong.co/30-minute-strategy-session, op 18 aug 2026 zelf
   opgehaald en bekeken (opnamen in qa/origineel/). Overgenomen mechaniek:
     - één scherm, geen scrollpagina;
     - stippenrail bovenaan die het aantal stappen toont vóór je begint;
     - belofte-kop in zwaar condensed uppercase op een vrijwel witte grond;
     - subregel met de waarde-ankering én de zelfselectie in dezelfde zin;
     - één knop, bewijs direct daaronder;
     - het formulier neemt daarna de pagina over.
   Het origineel draait op #f9f9f9 — niet op donker, zoals de King Kong-
   homepage. Ivo's voorkeur voor wit klopte dus met de referentie.

   Eigen teksten, eigen merkkleuren. Alleen de opbouw is nagebouwd.
   ========================================================================= */

:root{
  --grond:#f9f9f9;
  --wit:#ffffff;
  --inkt:#0f063b;
  --inkt-zacht:#4a4766;
  --gedempt:#6b6885;      /* 5,3:1 op --grond, gemeten bij het vaststellen */
  --accent:#fcbc04;
  /* CTA-kleur, losgekoppeld van --accent op 1 september 2026 (keuze van Ivo).
     Tot dan was elke knop geel; de knop is nu groen met witte tekst, terwijl
     geel het accent blijft voor cijfervlakken, de afspeelknop en de pijl.
     ⚠️ Wit op #7ed957 haalt 1,76:1, terwijl 4,5:1 de norm is voor knoptekst.
     Gemeld en bewust zo gekozen. Wil je het repareren: #3f8f27 met wit haalt
     4,1:1, of houd dit groen en zet de tekst op --inkt (10,8:1). */
  --cta:#7ed957;
  --cta-diep:#6cc945;
  --cta-tekst:#ffffff;
  --accent-diep:#e0a600;
  --lijn:#e4e4ec;
  --lijn-actief:#0f063b;
  --goed:#1c7c4a;
  --radius:13px;
  --duur:.34s;
  --soepel:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--grond);
  color:var(--inkt);
  font-family:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  display:flex;
  flex-direction:column;
  min-height:100vh;
  min-height:100dvh;
}

/* ---- Kopbalk: alleen het merk, gecentreerd. Geen navigatie — elke link is
       een uitgang op een advertentiebestemming. ---------------------------- */
.balk{
  background:var(--wit);
  border-bottom:1px solid var(--lijn);
  padding:16px 20px;
  text-align:center;
  flex:0 0 auto;
}
.merk{
  font-family:'Poppins',sans-serif;
  font-weight:800;
  font-size:19px;
  letter-spacing:-.02em;
  color:var(--inkt);
  text-decoration:none;
}

/* ---- Stippenrail ------------------------------------------------------- */
.rail{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0;
  padding:30px 20px 0;
  flex:0 0 auto;
}
.rail-binnen{display:flex;align-items:center;width:100%;max-width:560px}
.stip{
  width:11px;height:11px;border-radius:50%;
  background:#d8d8e2;
  flex:0 0 auto;
  transition:background var(--duur) var(--soepel), transform var(--duur) var(--soepel);
}
.stip.gedaan{background:var(--accent)}
.stip.hier{background:var(--inkt);transform:scale(1.45)}
.streep{
  flex:1 1 auto;height:2px;background:#e2e2ea;position:relative;overflow:hidden;
}
.streep::after{
  content:"";position:absolute;inset:0;background:var(--accent);
  transform:scaleX(0);transform-origin:left;
  transition:transform var(--duur) var(--soepel);
}
.streep.gevuld::after{transform:scaleX(1)}

/* ---- Middenvlak -------------------------------------------------------- */
main{
  flex:1 1 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:44px 20px 20px;   /* bovenruimte zodat de emoji de rail niet raakt */
}
.paneel{
  width:100%;
  max-width:700px;
  text-align:center;
}

/* Alleen het actieve scherm is zichtbaar; de rest bestaat niet in de flow. */
.scherm{display:none}
.scherm.actief{display:block;animation:binnen var(--duur) var(--soepel) both}
@keyframes binnen{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:none}
}
.scherm.terugwaarts.actief{animation-name:binnen-terug}
@keyframes binnen-terug{
  from{opacity:0;transform:translateY(-14px)}
  to{opacity:1;transform:none}
}

/* ---- Introscherm ------------------------------------------------------- */
.zwaai{
  font-size:34px;line-height:1;display:block;margin:0 auto 10px;
  animation:zwaaien 2.4s var(--soepel) 1s 2 both;transform-origin:70% 70%;
}
@keyframes zwaaien{
  0%,60%,100%{transform:rotate(0)}
  10%,30%,50%{transform:rotate(14deg)}
  20%,40%{transform:rotate(-8deg)}
}
.context{
  font-size:14px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--gedempt);margin:0 0 14px;
}
h1.belofte{
  font-family:'Anton',Impact,sans-serif;font-weight:400;
  text-transform:uppercase;letter-spacing:.005em;line-height:.95;
  font-size:clamp(32px,5.6vw,60px);
  color:var(--inkt);margin:0 auto;max-width:16ch;text-wrap:balance;
}
.subregel{
  font-weight:400;font-size:clamp(15.5px,1.9vw,19px);line-height:1.58;
  color:var(--inkt-zacht);max-width:56ch;margin:22px auto 0;
}
.bewijsregel{
  display:flex;align-items:center;justify-content:center;gap:9px;
  margin:18px auto 0;font-size:14.5px;color:var(--gedempt);flex-wrap:wrap;
}
.bewijsregel b{color:var(--inkt);font-weight:700}

/* ---- Vraagschermen ----------------------------------------------------- */
.stapnr{
  font-family:'Poppins',sans-serif;font-size:12px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent-diep);
  margin:0 0 12px;
}
.vraag{
  font-family:'Poppins',sans-serif;font-weight:800;
  font-size:clamp(21px,3.2vw,30px);line-height:1.3;letter-spacing:-.015em;
  color:var(--inkt);margin:0 auto 8px;max-width:22ch;text-wrap:balance;
}
.toelichting{font-size:15px;color:var(--gedempt);margin:0 auto 24px;max-width:44ch}
fieldset{border:0;margin:0;padding:0}
legend{padding:0}

.keuzes{display:flex;flex-direction:column;gap:10px;text-align:left;max-width:470px;margin:0 auto}
.keuzes.tweekolom{display:grid;grid-template-columns:1fr 1fr;max-width:520px}
.keuze{
  display:flex;align-items:center;gap:12px;
  background:var(--wit);border:1.5px solid var(--lijn);border-radius:var(--radius);
  padding:15px 17px;cursor:pointer;font-size:16px;line-height:1.4;
  transition:border-color .14s var(--soepel), transform .14s var(--soepel), box-shadow .14s var(--soepel);
}
.keuze:hover{border-color:#b9b7cd;transform:translateY(-1px);box-shadow:0 4px 14px rgba(15,6,59,.07)}
.keuze input{accent-color:var(--inkt);width:18px;height:18px;flex:0 0 auto}
.keuze:has(input:checked){border-color:var(--lijn-actief);box-shadow:0 0 0 3px rgba(15,6,59,.09)}
.keuze input:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.velden{display:flex;flex-direction:column;gap:14px;max-width:470px;margin:0 auto;text-align:left}
.veld{display:flex;flex-direction:column;gap:6px}
.veld label{font-size:14px;font-weight:600;color:var(--inkt)}
.veld input[type=text],.veld input[type=email],.veld input[type=url],.veld textarea{
  width:100%;border:1.5px solid var(--lijn);border-radius:var(--radius);
  padding:14px 16px;font:inherit;font-size:16px;color:var(--inkt);background:var(--wit);
  transition:border-color .14s var(--soepel), box-shadow .14s var(--soepel);
}
.veld textarea{min-height:118px;resize:vertical;line-height:1.5}
.veld input:focus,.veld textarea:focus{
  outline:none;border-color:var(--lijn-actief);box-shadow:0 0 0 3px rgba(15,6,59,.09);
}

/* ---- Schuifbalken (omzet) ---------------------------------------------- */
.schuif{max-width:470px;margin:0 auto;text-align:left}
.schuif-waarde{
  font-family:'Anton',sans-serif;font-size:clamp(34px,6vw,50px);line-height:1;
  color:var(--inkt);text-align:center;margin:0 0 4px;font-variant-numeric:tabular-nums;
}
.schuif-eenheid{display:block;text-align:center;font-size:13.5px;color:var(--gedempt);margin-bottom:20px}
input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:99px;
  background:linear-gradient(to right,var(--accent) var(--vul,0%),#e2e2ea var(--vul,0%));
  outline:none;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:26px;height:26px;border-radius:50%;
  background:var(--inkt);border:3px solid var(--wit);cursor:grab;
  box-shadow:0 2px 8px rgba(15,6,59,.28);transition:transform .12s var(--soepel);
}
input[type=range]::-webkit-slider-thumb:active{transform:scale(1.14);cursor:grabbing}
input[type=range]::-moz-range-thumb{
  width:26px;height:26px;border-radius:50%;background:var(--inkt);
  border:3px solid var(--wit);cursor:grab;box-shadow:0 2px 8px rgba(15,6,59,.28);
}
input[type=range]:focus-visible{box-shadow:0 0 0 3px var(--accent)}

/* ---- Schaal 1 t/m 10 ---------------------------------------------------- */
.schaal{display:flex;gap:7px;justify-content:center;flex-wrap:wrap;max-width:520px;margin:0 auto}
.schaal label{
  position:relative;width:44px;height:48px;border:1.5px solid var(--lijn);
  border-radius:11px;background:var(--wit);cursor:pointer;
  display:grid;place-items:center;font-weight:700;font-size:16px;
  transition:border-color .14s var(--soepel), transform .14s var(--soepel), background .14s var(--soepel);
}
.schaal label:hover{transform:translateY(-2px);border-color:#b9b7cd}
.schaal input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.schaal label:has(input:checked){background:var(--inkt);color:var(--wit);border-color:var(--inkt)}
.schaal input:focus-visible + span{outline:2px solid var(--accent);outline-offset:4px;border-radius:4px}
.schaal-uiteinden{
  display:flex;justify-content:space-between;max-width:520px;margin:10px auto 0;
  font-size:13px;color:var(--gedempt);
}

/* ---- Knoppen ------------------------------------------------------------ */
.acties{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:28px;flex-wrap:wrap}
/* Het hidden-attribuut moet display:flex verslaan, anders blijft de knoppenrij
   staan op het introscherm. Gevonden bij de beeldcontrole van 18 aug 2026. */
.acties[hidden]{display:none}
.knop{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:'Poppins',sans-serif;font-weight:800;font-size:16.5px;
  padding:16px 34px;border-radius:var(--radius);border:0;cursor:pointer;
  background:var(--cta);color:var(--cta-tekst);text-decoration:none;
  transition:background .14s var(--soepel), transform .14s var(--soepel), box-shadow .14s var(--soepel);
  box-shadow:0 4px 16px rgba(126,217,87,.36);
}
.knop:hover{background:var(--cta-diep);transform:translateY(-2px);box-shadow:0 8px 22px rgba(126,217,87,.46)}
.knop:active{transform:translateY(0)}
.knop svg{transition:transform .18s var(--soepel)}
.knop:hover svg{transform:translateX(4px)}
.knop:focus-visible{outline:3px solid var(--inkt);outline-offset:3px}
.knop-terug{
  background:transparent;box-shadow:none;color:var(--gedempt);
  font-weight:600;font-size:15px;padding:16px 10px;
}
.knop-terug:hover{background:transparent;color:var(--inkt);transform:none;box-shadow:none}
.fout{color:#a3282d;font-size:14.5px;margin:14px 0 0;min-height:1.2em}

/* ---- Slotscherm --------------------------------------------------------- */
.laden{display:flex;flex-direction:column;align-items:center;gap:18px}
.ring{
  width:52px;height:52px;border-radius:50%;
  border:4px solid #e2e2ea;border-top-color:var(--accent);
  animation:draai .85s linear infinite;
}
@keyframes draai{to{transform:rotate(360deg)}}

footer.voet{
  flex:0 0 auto;text-align:center;padding:20px;font-size:13px;color:var(--gedempt);
}
footer.voet a{color:var(--inkt-zacht)}

/* ---- Mobiel ------------------------------------------------------------- */
@media (max-width:560px){
  body{font-size:16.5px}
  .rail{padding-top:20px}
  main{padding:16px}
  .keuzes.tweekolom{grid-template-columns:1fr}
  .schaal label{width:38px;height:44px;font-size:15px}
  .acties{flex-direction:column-reverse}
  .acties .knop{width:100%}
}

/* ---- Bewegingsreductie: alles blijft werken, niets beweegt -------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}