@font-face{font-family:"Oldschool Grotesk";font-weight:300;font-display:swap;src:url("fonts/OldschoolGrotesk_W-Book.woff2") format("woff2")}
@font-face{font-family:"Oldschool Grotesk";font-weight:400;font-display:swap;src:url("fonts/OldschoolGrotesk_W-Regular.woff2") format("woff2")}

:root{
  --bg:#092931;--bg-dark:#082228;--card:#16343C;--card-2:#1d3f48;
  --mint:#56E39F;--mint-soft:rgba(86,227,159,.14);
  --tekst:#ffffff;--tekst-2:rgba(255,255,255,.75);--tekst-3:#849498;
  --lijn:rgba(255,255,255,.12);--radius:18px;
  --font:"Oldschool Grotesk","Circular",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--tekst);font-family:var(--font);font-weight:300;font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:var(--mint)}
h1,h2,h3{font-weight:400;letter-spacing:-.02em;line-height:1.08;margin:0 0 .5em}
h1{font-size:clamp(40px,7vw,76px)}
h2{font-size:clamp(28px,4.4vw,46px)}
h3{font-size:clamp(20px,2.4vw,26px)}
em.mint,h1 em,h2 em{font-style:normal;color:var(--mint)}
p{margin:0 0 1em;color:var(--tekst-2)}

.top{display:flex;align-items:center;justify-content:space-between;padding:22px clamp(16px,4vw,48px)}
.logo{display:inline-flex;align-items:center;gap:10px;color:var(--tekst);text-decoration:none;font-size:22px;font-weight:400;letter-spacing:-.02em}
.logo svg,.logo img{height:30px;width:auto;display:block}
@media(max-width:560px){.logo svg,.logo img{height:22px}}
.logo .stip{width:12px;height:12px;border-radius:50%;background:var(--mint)}
.top small{color:var(--tekst-3);font-size:14px}

.wrap{max-width:820px;margin:0 auto;padding:24px 16px 80px}
.voortgang{position:sticky;top:0;z-index:5;height:4px;background:var(--lijn)}
.voortgang span{display:block;height:100%;width:0;background:var(--mint);transition:width .4s ease}

.stap{display:none;animation:in .35s ease}
.stap.actief{display:block}
@keyframes in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.label{display:inline-block;font-size:14px;color:var(--mint);margin-bottom:14px;letter-spacing:.02em}
.vraag{background:var(--card);border-radius:var(--radius);padding:clamp(20px,4vw,36px);margin:18px 0}
.vraag h3{margin-bottom:.35em}
.hint{font-size:15px;color:var(--tekst-3);margin:0 0 18px}

textarea,input[type=text],input[type=email],input[type=password]{width:100%;background:var(--bg-dark);border:1px solid var(--lijn);border-radius:12px;color:var(--tekst);font:inherit;padding:14px 16px;transition:border-color .2s}
textarea{min-height:110px;resize:vertical}
textarea:focus,input:focus{outline:none;border-color:var(--mint)}
::placeholder{color:var(--tekst-3)}

/* schuifregelaar */
.schuif{margin:8px 0 22px}
.schuif-cijfer{font-size:64px;font-weight:400;color:var(--mint);line-height:1;min-height:64px;letter-spacing:-.03em}
.schuif-cijfer.leeg{color:var(--tekst-3);font-size:18px;display:flex;align-items:flex-end;padding-bottom:8px}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:8px;border-radius:99px;background:var(--bg-dark);margin:22px 0 8px;cursor:pointer}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:30px;height:30px;border-radius:50%;background:var(--mint);border:4px solid var(--bg);box-shadow:0 0 0 2px var(--mint)}
input[type=range]::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:var(--mint);border:4px solid var(--bg)}
.schuif-as{display:flex;justify-content:space-between;font-size:14px;color:var(--tekst-3)}

/* keuzes */
.keuzes{display:grid;gap:10px}
.keuzes.twee{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.keuze{position:relative;display:flex;gap:14px;align-items:flex-start;background:var(--bg-dark);border:1px solid var(--lijn);border-radius:14px;padding:14px 16px;cursor:pointer;transition:border-color .2s,background .2s}
.keuze:hover{border-color:rgba(86,227,159,.5)}
.keuze input{position:absolute;opacity:0;pointer-events:none}
.keuze .vink{flex:0 0 22px;height:22px;border-radius:7px;border:1.5px solid var(--tekst-3);margin-top:2px;display:grid;place-items:center;transition:all .2s}
.keuze input[type=radio]+.vink{border-radius:50%}
.keuze input:checked+.vink{background:var(--mint);border-color:var(--mint)}
.keuze input:checked+.vink::after{content:"";width:6px;height:11px;border:solid var(--bg);border-width:0 2.5px 2.5px 0;transform:rotate(45deg) translate(-1px,-1px)}
.keuze input:checked~.tekst strong{color:var(--mint)}
.keuze:has(input:checked){border-color:var(--mint);background:var(--mint-soft)}
.keuze input:focus-visible+.vink{box-shadow:0 0 0 3px rgba(86,227,159,.4)}
.keuze .tekst strong{display:block;font-weight:400;color:var(--tekst)}
.keuze .tekst span{display:block;font-size:14.5px;color:var(--tekst-3);margin-top:2px}
.groep{font-size:14px;color:var(--tekst-3);margin:22px 0 10px;letter-spacing:.02em}
.groep:first-child{margin-top:0}

/* 0 tot 10 schaal */
.schaal{display:grid;grid-template-columns:repeat(11,1fr);gap:6px}
.schaal label{cursor:pointer}
.schaal input{position:absolute;opacity:0}
.schaal span{display:grid;place-items:center;height:48px;border-radius:12px;background:var(--bg-dark);border:1px solid var(--lijn);font-size:18px;transition:all .2s}
.schaal input:checked+span{background:var(--mint);border-color:var(--mint);color:var(--bg);font-weight:400}
.schaal input:focus-visible+span{box-shadow:0 0 0 3px rgba(86,227,159,.4)}
@media (max-width:560px){.schaal{grid-template-columns:repeat(6,1fr)}}

/* Nick blok */
.persoon{display:flex;gap:18px;align-items:flex-start;border-left:3px solid var(--mint);padding:4px 0 4px 18px;margin-bottom:24px}
.persoon .ini{flex:0 0 52px;height:52px;border-radius:50%;background:var(--mint);color:var(--bg);display:grid;place-items:center;font-size:20px;font-weight:400}
.persoon p{margin:0}
.persoon ul{margin:10px 0 0;padding-left:18px;color:var(--tekst-2)}
.persoon li{margin:3px 0}

/* knoppen */
.knoppen{display:flex;gap:12px;justify-content:space-between;align-items:center;margin-top:26px}
.knop{display:inline-flex;align-items:center;gap:10px;border:0;border-radius:999px;padding:15px 28px;font:inherit;font-size:18px;font-weight:400;cursor:pointer;text-decoration:none;transition:transform .15s,background .2s}
.knop.vol{background:var(--mint);color:var(--bg)}
.knop.vol:hover{transform:translateY(-2px)}
.knop.rand{background:transparent;color:var(--tekst);border:1px solid var(--lijn)}
.knop.rand:hover{border-color:var(--tekst-2)}
.knop:disabled{opacity:.4;cursor:not-allowed;transform:none}
/* kader Nick */
.notitie{margin:30px 0 4px;padding:20px 22px;border-radius:14px;background:var(--mint-soft);border-left:3px solid var(--mint);font-size:15.5px}
.notitie-label{display:block;color:var(--mint);font-size:14px;margin-bottom:8px;letter-spacing:.02em}
.notitie p{margin:0 0 .6em;color:var(--tekst-2)}
.notitie p:last-child{margin:0}
.notitie strong{color:var(--tekst);font-weight:400}
.notitie ul{margin:0 0 .8em;padding-left:18px;color:var(--tekst-2)}
.notitie li{margin:3px 0}
.handtekening{display:block;margin-top:10px;color:var(--tekst)}
.melding{color:#ffb4a2;font-size:15px;margin-top:10px;display:none}
.melding.toon{display:block}

.intro-meta{display:flex;gap:22px;flex-wrap:wrap;color:var(--tekst-3);font-size:15px;margin:22px 0 4px}
.intro-meta b{color:var(--mint);font-weight:400}
.klein{font-size:14px;color:var(--tekst-3)}
.hp{position:absolute;left:-9999px}
.voet{text-align:center;color:var(--tekst-3);font-size:14px;padding:40px 16px}