/* Digivisor: quiz */
.quiz{min-height:calc(100svh - var(--hh));padding-bottom:clamp(96px,12vw,160px)}
.q-box{max-width:880px}
.q-step .h1p{max-width:16ch}
.q-step .h2{font-size:clamp(36px,5vw,72px)}
.q-acts{display:flex;flex-wrap:wrap;gap:22px 30px;align-items:center;margin-top:clamp(32px,4vw,48px)}
.hidden{display:none!important}
@media (prefers-reduced-motion:no-preference){
  .q-step{animation:qin .6s var(--ease) both}
}
@keyframes qin{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}

/* e-mailstap */
.q-mail{display:flex;flex-wrap:wrap;gap:24px;align-items:end;margin-top:clamp(32px,4vw,48px);max-width:640px}
.q-mail .fld{flex:1 1 280px}
.q-err{margin-top:16px;color:var(--papier);font-size:15px}
.q-err::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--verm);margin-right:10px;vertical-align:1px}
.q-klein{margin-top:18px;font-size:14px;color:var(--mist)}
.q-klein a{color:var(--papier)}

/* vraag */
.q-prog{display:flex;gap:10px;margin-bottom:28px}
.q-prog .dot{width:10px;height:10px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--mist-2);transition:all .4s var(--ease)}
.q-prog .dot.done{background:var(--papier);box-shadow:none}
.q-prog .dot.active{background:var(--verm);box-shadow:none;transform:scale(1.3)}
.q-vraag{font-size:clamp(32px,4.4vw,60px);font-weight:800;letter-spacing:-.045em;line-height:1;max-width:20ch}
.q-opts{display:grid;gap:0;margin-top:clamp(32px,4vw,48px);border-top:1px solid var(--hair)}
.quiz-option{appearance:none;background:none;border:0;border-bottom:1px solid var(--hair);color:var(--papier);font:700 clamp(18px,1.6vw,21px)/1.35 var(--f);letter-spacing:-.015em;text-align:left;display:flex;align-items:center;gap:18px;padding:22px 8px 22px 0;cursor:pointer;position:relative;transition:padding .45s var(--ease),color .3s}
.quiz-option::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:100%;background:var(--verm);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.quiz-option:hover{padding-left:10px}
.quiz-option:hover::after,.quiz-option.selected::after{transform:scaleX(1)}
.option-dot{width:12px;height:12px;border-radius:50%;flex-shrink:0;box-shadow:inset 0 0 0 1.5px var(--mist-2);transition:all .4s cubic-bezier(.3,1.6,.4,1)}
.quiz-option:hover .option-dot{box-shadow:inset 0 0 0 1.5px var(--papier)}
.quiz-option.selected .option-dot{background:var(--verm);box-shadow:none;transform:scale(1.3)}

/* laden */
.q-laden{display:flex;gap:10px;margin-bottom:28px}
.q-laden i{width:12px;height:12px;border-radius:50%;background:var(--verm);animation:qdot 1s ease-in-out infinite}
.q-laden i:nth-child(2){animation-delay:.15s}
.q-laden i:nth-child(3){animation-delay:.3s}
@keyframes qdot{0%,100%{transform:translateY(0);opacity:.4}50%{transform:translateY(-10px);opacity:1}}
.q-ls{list-style:none;margin:32px 0 0;padding:0;display:grid;gap:14px;font-size:17px;font-weight:500;color:var(--mist-2)}
.q-ls li{display:flex;align-items:center;gap:14px;transition:color .4s}
.q-ls li::before{content:"";width:10px;height:10px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--mist-2);transition:all .4s}
.q-ls li.active{color:var(--papier)}
.q-ls li.active::before{background:var(--verm);box-shadow:none}

/* resultaat */
.q-traits{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.trait-tag{display:inline-flex;align-items:center;gap:10px;height:40px;padding:0 18px;border-radius:999px;box-shadow:inset 0 0 0 1.5px var(--hair);font-size:15px;font-weight:700}
.tag-dot{width:6px;height:6px;border-radius:50%;background:var(--verm)}
.q-cta{margin-top:clamp(56px,7vw,88px);padding-top:32px;border-top:1px solid var(--hair)}
.q-cta h3{font-size:clamp(26px,2.8vw,38px);font-weight:800;letter-spacing:-.04em;line-height:1.05;margin-top:10px}
.q-cta > p:not(.q-klein){margin-top:14px;font-size:18px;color:var(--zacht);max-width:52ch}
.q-opnieuw{background:none;border:0;cursor:pointer;font-family:var(--f);color:var(--papier)}