/* Tuuned hero-keuze ronde 9: gedeelde basis voor alle concepten.
   Elk concept heeft één vaste look (licht of donker), dus geen apart donker thema.
   avoid-ai-design-ignore-file: C1, C2, K3, SD4
   C1/C2 = navy + merkblauw #5863F8 zijn de huiskleuren; K3/SD4 alleen waar een concept dat bewust doet. */
:root{
  --navy:#0B0C1E; --navy-2:#14163A; --navy-3:#1E2150; --blauw:#5863F8; --blauw-2:#4049E6; --blauw-licht:#8B93FF; --ijs:#EEF0FF;
  --wit:#FFFFFF; --papier:#F4F5FA; --inkt-2:#4A4D6A; --wa:#25D366;
  --f:"Poppins",system-ui,-apple-system,"Segoe UI",sans-serif; --hand:"Caveat","Segoe Print",cursive;
  --pad:clamp(16px,4vw,64px); --balk:56px; --ease:cubic-bezier(.22,1,.36,1);
  --blobvorm:42% 58% 63% 37%/41% 44% 56% 59%;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html,body{height:100%}
body{font:400 16px/1.6 var(--f);background:#05060F;color:var(--wit);overflow:hidden;-webkit-font-smoothing:antialiased}
::selection{background:var(--blauw);color:#fff}
a{color:inherit;text-decoration:none}
img,video,svg{display:block;max-width:100%}
button,select{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:3px solid var(--blauw-licht);outline-offset:3px;border-radius:8px}
.defs{position:absolute;width:0;height:0;overflow:hidden}

/* podium: één concept tegelijk, schermvullend boven de kiesbalk */
.buis{position:fixed;left:0;right:0;top:0;bottom:var(--balk);overflow:hidden;background:#fff}
.h{position:absolute;inset:0;overflow:hidden;display:none;isolation:isolate}
.h.actief{display:block}
.licht{background:var(--wit);color:var(--navy)}
.donker{background:var(--navy);color:var(--wit)}
.intro{position:absolute;inset:0;z-index:40;display:grid;place-items:center;overflow:hidden;cursor:pointer}
.intro .sweep{position:relative;z-index:3;width:min(470px,72vw);height:auto}
[data-in],.nav{transform:translateY(var(--dy,0px))}

/* navigatie: licht = blauw logo, navy tekst; donker = wit */
.nav{position:absolute;left:0;right:0;top:0;z-index:20;display:flex;align-items:center;gap:clamp(12px,2vw,28px);padding:18px var(--pad)}
.nav .merk{display:block;margin-right:auto}
.nav .logo{height:clamp(46px,3.9vw,60px);width:auto;fill:var(--blauw)}
/* ronde 9: menu in het midden van de bovenbalk (Ilyass, 18-10) */
.nav .menu{position:absolute;left:50%;top:50%;translate:-50% -50%}
.donker .nav .logo{fill:#fff}
.nav .menu{display:flex;gap:2px;list-style:none;font-size:14.5px;font-weight:500}
.nav .menu a{display:block;padding:8px 13px;border-radius:999px;opacity:.82;transition:opacity .2s,background-color .2s}
.nav .menu a:hover{opacity:1;background:rgba(128,128,170,.14)}

/* knoppen */
.btn{display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 24px 0 7px;border-radius:999px;font:600 15px/1 var(--f);white-space:nowrap;transition:translate .3s var(--ease),background-color .25s}
.btn:hover{translate:0 -2px}
.btn .wa{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#fff;color:var(--wa)}
.btn .wa svg{width:20px;height:20px}
.btn-blauw{background:var(--blauw);color:#fff;box-shadow:0 14px 28px -16px rgba(11,12,30,.5)}
.btn-blauw:hover{background:var(--blauw-2)}
.btn-wit{background:#fff;color:var(--navy)}
.btn-wit .wa{background:var(--wa);color:#fff}
.btn-navy{background:var(--navy);color:#fff}
.btn-navy .wa{background:var(--wa);color:#fff}
.btn-nav{height:44px;font-size:14px;padding:0 18px 0 6px;gap:9px}
.btn-nav .wa{width:32px;height:32px;background:var(--wa);color:#fff}
.btn-nav .wa svg{width:17px;height:17px}
.licht .btn-nav{background:var(--navy);color:#fff}
.donker .btn-nav{background:#fff;color:var(--navy)}
.link{font-weight:600;font-size:15px;text-decoration:underline;text-underline-offset:7px;text-decoration-thickness:2px;text-decoration-color:var(--blauw);transition:text-underline-offset .25s}
.donker .link{text-decoration-color:var(--blauw-licht)}
.link:hover{text-underline-offset:4px}

/* tekst */
.kop{font-weight:700;font-size:clamp(36px,4.3vw,68px);line-height:1.03;letter-spacing:-.045em;text-wrap:balance}
.sub{font-size:clamp(15.5px,1.1vw,17.5px);line-height:1.65;max-width:31em;margin-top:18px;text-wrap:pretty}
.licht .sub{color:var(--inkt-2)}
.donker .sub{color:rgba(255,255,255,.74)}
.acties{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:30px}
.bewijs{margin-top:32px;padding-top:18px;border-top:1px solid rgba(128,128,170,.22);font-size:14px;max-width:31em}
.licht .bewijs{color:var(--inkt-2)}
.licht .bewijs b{color:var(--navy);font-weight:600}
.donker .bewijs{color:rgba(255,255,255,.6)}
.donker .bewijs b{color:#fff;font-weight:600}

/* telefoon: één vaste maatverhouding (9:19), de rand schaalt mee met de telefoon.
   Ronde 4: echtere afwerking (metalen rand met licht van boven, glas met een zachte reflectie, schaduw in twee lagen). */
.tel{position:relative;aspect-ratio:9/19;border-radius:13%/6.2%;
  background:linear-gradient(150deg,#2B2E4A 0%,#0E1024 34%,#07081A 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07),inset 0 1px 0 rgba(255,255,255,.2),
    0 46px 70px -42px rgba(14,18,70,.7),0 18px 30px -24px rgba(14,18,70,.45)}
.tel::after{content:"";position:absolute;inset:0;z-index:6;border-radius:inherit;padding:1.3px;pointer-events:none;
  background:linear-gradient(165deg,rgba(255,255,255,.62),rgba(255,255,255,.1) 26%,rgba(255,255,255,.03) 62%,rgba(255,255,255,.3));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.tel::before{content:"";position:absolute;z-index:5;top:2.5%;left:50%;width:30%;aspect-ratio:4.4;translate:-50% 0;border-radius:99px;background:#000;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.scherm{position:absolute;inset:1.28% 2.7%;border-radius:10.8%/5.1%;overflow:hidden;background:#15173A}
.scherm::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(118deg,rgba(255,255,255,.13) 0%,rgba(255,255,255,.03) 30%,rgba(255,255,255,0) 46%)}
.scherm video,.scherm img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.chip{position:absolute;z-index:4;left:6%;bottom:4%;display:flex;flex-direction:column;gap:2px;padding:8px 11px;border-radius:12px;background:rgba(255,255,255,.96);color:var(--navy);box-shadow:0 12px 26px -12px rgba(0,0,0,.55)}
.chip small{font:500 10px/1 var(--f);color:var(--inkt-2)}
.chip b{font:700 13px/1.1 var(--f);letter-spacing:-.01em;white-space:nowrap}

/* kolommen die omhoog en omlaag schuiven (goedgekeurd uit ronde 1, hero 2) */
.kolom{flex:none}
.spoor{display:flex;flex-direction:column;gap:20px;padding-bottom:20px}
.kolom.op .spoor{animation:spoor-op 46s linear infinite}
.kolom.neer .spoor{animation:spoor-neer 46s linear infinite}
.kolom.traag .spoor{animation-duration:58s}
@keyframes spoor-op{to{transform:translateY(-50%)}}
@keyframes spoor-neer{from{transform:translateY(-50%)}to{transform:translateY(0)}}
@keyframes blob-morph{33%{border-radius:58% 42% 38% 62%/55% 37% 63% 45%}66%{border-radius:38% 62% 55% 45%/38% 58% 42% 62%}}

.garantie .icoon{width:42px;height:42px;border-radius:12px;background:var(--ijs);display:grid;place-items:center}
.garantie .icoon svg{width:22px;height:auto;fill:var(--blauw)}

/* kiesbalk onderaan */
.kies{position:fixed;left:0;right:0;bottom:0;z-index:100;height:var(--balk);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;padding:0 14px;background:#06070F;color:#fff;font-size:13.5px}
.kies .titel{font-weight:600;opacity:.55;white-space:nowrap}
.kies .midden{display:flex;align-items:center;gap:8px;min-width:0}
.kies .naam{position:relative;min-width:360px;text-align:center;line-height:1.25;padding:0 8px}
.kies .naam b{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kies .naam small{display:block;opacity:.6;font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:460px;margin:0 auto}
.kies .naam select{position:absolute;inset:0;width:100%;opacity:0;cursor:pointer}
.kies button{height:38px;min-width:38px;padding:0 12px;border-radius:999px;font-weight:600;white-space:nowrap;background:rgba(255,255,255,.08);transition:background-color .2s}
.kies button:hover{background:rgba(255,255,255,.16)}
.kies .rechts-k{justify-self:end;display:flex;align-items:center;gap:8px}
.kies .tip{opacity:.45;font-size:12px;white-space:nowrap}
.kies .opnieuw{background:var(--blauw)}
.kies .opnieuw:hover{background:var(--blauw-2)}

@media (max-width:1100px){.kies .titel,.kies .tip{display:none}.kies .naam{min-width:260px}}
@media (max-width:760px){
  :root{--pad:18px}
  .nav{padding:12px var(--pad)}
  .nav .menu{display:none}
  .nav .logo{height:38px}
  .btn-nav .t{display:none}
  .btn-nav{padding:0 6px}
  .kop{font-size:clamp(31px,9.2vw,40px)}
  .sub{font-size:15px;margin-top:12px}
  .acties{margin-top:18px;gap:12px 20px}
  .btn{height:48px;font-size:14.5px}
  .btn .wa{width:34px;height:34px}
  .bewijs{display:none}
  .spoor{gap:10px;padding-bottom:10px}
  .chip{padding:5px 7px;border-radius:9px}
  .chip b{font-size:10.5px}
  .chip small{font-size:8.5px}
  .kies{grid-template-columns:1fr auto;padding:0 8px}
  .kies .naam{min-width:0;flex:1}
  .kies .naam small{max-width:200px}
  .kies .opnieuw{width:38px;padding:0;font-size:0}
  .kies .opnieuw::before{content:"↻";font-size:18px}
}
@media (prefers-reduced-motion:reduce){.spoor{animation:none!important}}
/* ronde 9: het grote logo en het menu staan op een eigen strook, zodat de telefoons eronder wegvallen in plaats van erdoorheen te lopen */
.nav::before{content:"";position:absolute;left:0;right:0;top:0;bottom:-34px;z-index:-1;pointer-events:none}
.licht .nav::before{background:linear-gradient(180deg,#fff 0%,#fff 62%,rgba(255,255,255,0) 100%)}
.donker .nav::before{background:linear-gradient(180deg,#0B0C1E 0%,#0B0C1E 62%,rgba(11,12,30,0) 100%)}