:root{--ink:#0F2A44;--blue:#0A66C2;--blue-d:#084E95;--green:#15803D;--green-l:#E7F6EC;--bg:#F5F8FB;--line:#D9E2EC;--mute:#5B6B7C;--amber:#D97706}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:'Segoe UI',Inter,system-ui,sans-serif;color:var(--ink);background:#fff;line-height:1.5}
a{color:var(--blue)}
.wrap{max-width:1160px;margin:0 auto;padding:0 20px}
/* nav */
nav{border-bottom:1px solid var(--line);background:#fff;position:sticky;top:0;z-index:20}
nav .wrap{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{display:flex;align-items:center;gap:9px;font-weight:700;font-size:19px;line-height:1.1;color:var(--ink);text-decoration:none;letter-spacing:-.3px}
.logo small{display:block;font-size:11px;font-weight:600;color:var(--green);letter-spacing:.3px;text-transform:uppercase}
nav ul{display:flex;gap:26px;list-style:none;margin:0;padding:0;font-size:15px}
nav ul a{color:var(--ink);text-decoration:none}
.btn{display:inline-block;background:var(--blue);color:#fff;border:0;border-radius:8px;padding:11px 18px;font:inherit;font-weight:600;cursor:pointer;text-decoration:none}
.btn:hover{background:var(--blue-d)}
.btn.ghost{background:#fff;color:var(--ink);border:1px solid var(--line)}
/* hero */
.hero{position:relative;padding:72px 0 80px;min-height:620px;display:flex;align-items:center;color:#fff;overflow:hidden;isolation:isolate}
.hero .illu{position:absolute;inset:0;width:100%;height:100%;z-index:-2;object-fit:cover;object-position:35% 40%}
.hero .tint{position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,rgba(15,42,68,.93) 0%,rgba(15,42,68,.72) 40%,rgba(15,42,68,.25) 70%,rgba(15,42,68,.15) 100%)}
.hero h1{color:#fff}.hero p.lead{color:#D6E6F7}
.hero .trust{color:#D6E6F7}.hero .trust b{color:#fff}
.hero .garantie{background:#fff}
.avatars{display:flex;align-items:center;gap:10px;margin-top:18px;font-size:14px;color:#D6E6F7}
.avatars .stack{display:flex}.avatars img{width:36px;height:36px;border-radius:50%;border:2px solid #fff;margin-right:-10px;object-fit:cover}
.avatars b{color:#fff}
.hero .wrap{display:grid;grid-template-columns:1fr 1.05fr;gap:40px;align-items:center}
.hero h1{font-size:44px;line-height:1.1;margin:0 0 14px;letter-spacing:-1px;font-weight:700}
.hero p.lead{font-size:18px;color:var(--mute);margin:0 0 22px;max-width:520px}
.trust{display:flex;gap:18px;flex-wrap:wrap;font-size:14px;color:var(--mute);margin-top:18px}
.trust span{display:flex;align-items:center;gap:6px}
.trust b{color:var(--ink)}
.garantie{display:inline-flex;align-items:center;gap:8px;background:var(--green-l);color:var(--green);border-radius:999px;padding:6px 14px;font-weight:600;font-size:14px;margin-bottom:16px}
/* wizard */
.wiz{color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 20px 50px rgba(15,42,68,.10);padding:22px 24px 24px;perspective:1200px}
.wiz .prog{display:flex;gap:6px;margin-bottom:16px}
.wiz .prog i{flex:1;height:4px;border-radius:2px;background:var(--line)}
.wiz .prog i.on{background:var(--blue)}
.wiz h2{font-size:20px;margin:0 0 4px}
.wiz .sub{color:var(--mute);font-size:14px;margin:0 0 16px}
.keuze{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.keuze.drie{grid-template-columns:repeat(3,1fr)}
.keuze button{border:2px solid var(--line);background:#fff;border-radius:12px;padding:16px 12px;font:inherit;cursor:pointer;text-align:center;color:var(--ink);transition:transform .15s,border-color .15s}
.keuze button:hover{border-color:var(--blue);transform:translateY(-2px)}
.keuze button.on{border-color:var(--blue);background:#EAF2FB}
.keuze svg{width:64px;height:48px;display:block;margin:0 auto 8px}
.keuze b{display:block;font-size:15px}.keuze small{color:var(--mute)}
.lbl{display:flex;justify-content:space-between;font-size:14px;margin:14px 0 4px}
input[type=range]{accent-color:var(--blue);width:100%}
.row{display:flex;gap:10px;margin-top:18px;justify-content:space-between}
.stap{display:none}.stap.on{display:block;animation:in .25s ease}
@keyframes in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.stap.on{animation:none}.keuze button{transition:none}}
/* result */
.res{display:none;padding:48px 0}
.res.on{display:block}
.res h2{font-size:30px;margin:0 0 6px;letter-spacing:-.5px}
.bespaar{background:var(--green-l);border-left:4px solid var(--green);padding:14px 18px;border-radius:8px;margin:18px 0 26px;font-size:16px}
.bespaar b{color:var(--green);font-size:22px}
.top3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:28px}
.kaart{border:1px solid var(--line);border-radius:14px;padding:18px;background:#fff;position:relative}
.kaart.best{border:2px solid var(--green)}
.kaart .tag{position:absolute;top:-12px;left:16px;background:var(--green);color:#fff;font-size:12px;font-weight:600;padding:3px 10px;border-radius:999px}
.kaart .naam{font-weight:700;font-size:17px;margin-top:4px}.kaart .var{color:var(--mute);font-size:14px}
.kaart .prijs{font-size:32px;font-weight:700;margin:10px 0 0;letter-spacing:-.8px}.kaart .prijs span{font-size:14px;font-weight:400;color:var(--mute)}
.kaart ul{padding-left:18px;margin:10px 0 14px;font-size:14px;color:var(--mute)}
table{border-collapse:collapse;width:100%;font-size:14px;background:#fff}
th{text-align:left;padding:10px;border-bottom:2px solid var(--ink);font-weight:600}
td{padding:10px;border-bottom:1px solid var(--line)}
.num{text-align:right;font-variant-numeric:tabular-nums}
.pill{font-size:12px;padding:2px 8px;border-radius:999px;background:#EEF2F6;color:var(--mute)}
.pill.ja{background:var(--green-l);color:var(--green)}.pill.beperkt{background:#FEF3C7;color:var(--amber)}
details{margin-top:14px;font-size:14px;color:var(--mute)}
/* how */
.how{background:var(--bg);padding:56px 0}
.how h2,.art h2,.faq h2{font-size:30px;letter-spacing:-.5px;margin:0 0 8px}
.how .wrap>p,.art .wrap>p{color:var(--mute);margin:0 0 28px;max-width:640px}
.stappen{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.stappen div{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px}
.stappen .n{width:34px;height:34px;border-radius:50%;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;margin-bottom:12px}
.stappen h3{margin:0 0 6px;font-size:17px}.stappen p{margin:0;color:var(--mute);font-size:14px}
/* garantie */
.gar{padding:56px 0}
.gar .wrap{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.gar h2{font-size:30px;letter-spacing:-.5px;margin:0 0 10px}
.gar p{color:var(--mute)}
.gar ul{padding-left:18px;color:var(--mute)}
.zegel{background:var(--green);color:#fff;border-radius:20px;padding:34px;text-align:center;transform:rotate(-2deg)}
.zegel b{display:block;font-size:34px;letter-spacing:-.5px}
.zegel span{font-size:15px;opacity:.9}
/* reviews + team */
.rev{padding:56px 0}
.rev h2,.team h2{font-size:30px;letter-spacing:-.5px;margin:0 0 8px}
.rev .wrap>p{color:var(--mute);margin:0 0 28px;max-width:640px}
.revs{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.rv{border:1px solid var(--line);border-radius:14px;padding:20px;display:flex;gap:14px;align-items:flex-start;background:#fff}
.rv img{width:56px;height:56px;border-radius:50%;object-fit:cover;flex:none}
.rv .q{font-size:15px;line-height:1.55}
.rv .wie{font-size:13px;color:var(--mute);margin-top:10px}
.team{background:var(--ink);color:#fff;padding:56px 0}
.team p{color:#B9C7D6;max-width:520px}
.teamgrid{display:grid;grid-template-columns:1fr 1.2fr;gap:40px;align-items:center}
.leden{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;text-align:center}
.leden img{width:96px;height:96px;border-radius:50%;object-fit:cover;border:3px solid #fff;margin-bottom:10px}
.leden b{display:block;font-size:15px}.leden span{font-size:13px;color:#B9C7D6}
/* articles */
.art{padding:56px 0;background:var(--bg)}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.card img{width:100%;height:170px;object-fit:cover;display:block}
.card div{padding:16px}
.card .cat{font-size:12px;color:var(--blue);font-weight:600}
.card h3{margin:6px 0 6px;font-size:17px;line-height:1.3}
.card p{margin:0;color:var(--mute);font-size:14px}
/* faq */
.faq{padding:56px 0}
.faq details{border-bottom:1px solid var(--line);padding:12px 0;margin:0;color:var(--ink);font-size:15px}
.faq summary{cursor:pointer;font-weight:600}
.faq details p{color:var(--mute);margin:8px 0 0}
footer{background:var(--ink);color:#B9C7D6;padding:40px 0;font-size:14px}
footer .wrap{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:30px}
footer a{color:#fff;text-decoration:none;display:block;margin-bottom:6px}
footer h4{color:#fff;margin:0 0 10px;font-size:14px}
@media(max-width:900px){.revs,.teamgrid{grid-template-columns:1fr}.leden{grid-template-columns:1fr 1fr}.hero .wrap,.gar .wrap{grid-template-columns:1fr}.hero h1{font-size:34px}.top3,.stappen,.cards{grid-template-columns:1fr}footer .wrap{grid-template-columns:1fr 1fr}nav ul{display:none}.keuze.drie{grid-template-columns:1fr}}
/* pagina-layout */
.page{padding:48px 0 64px}.page h1{font-size:38px;letter-spacing:-.8px;line-height:1.1;margin:0 0 12px}
.page .lead{font-size:18px;color:var(--mute);max-width:720px;margin:0 0 28px}
.prose{max-width:760px;font-size:17px;line-height:1.65}.prose h2{font-size:26px;letter-spacing:-.4px;margin:36px 0 10px}.prose h3{font-size:19px;margin:26px 0 8px}
.prose p,.prose li{color:#243B54}.prose table{font-size:15px;margin:16px 0}.prose img{max-width:100%;height:auto;border-radius:12px}
.crumbs{font-size:13px;color:var(--mute);margin-bottom:18px}.crumbs a{color:var(--mute)}
.box{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:18px 20px;margin:24px 0}
.box.groen{background:var(--green-l);border-color:#BFE3CB}
.cta{background:var(--ink);color:#fff;border-radius:16px;padding:32px;margin:40px 0 0;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.cta h2{margin:0 0 4px;font-size:24px}.cta p{margin:0;color:#B9C7D6}
.feiten{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin:20px 0}
.feit{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px}.feit small{display:block;color:var(--mute);font-size:12px}.feit b{font-size:20px}
.passen{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.pas{border:1px solid var(--line);border-radius:12px;padding:16px;background:#fff;text-decoration:none;color:var(--ink)}
.pas:hover{border-color:var(--blue)}.pas b{display:block}.pas span{font-size:13px;color:var(--mute)}
.hero .illu{background:#0F2A44}
time{color:var(--mute);font-size:14px}
.skip{position:absolute;left:-999px}.skip:focus{left:10px;top:10px;background:#fff;padding:8px;z-index:99}

/* ---- visuele laag: video, beelden, 3D en beweging ---- */
.hero video.illu{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 40%;z-index:-2}
.hero img.illu{object-position:60% 40%}
.hero .tint{background:linear-gradient(100deg,rgba(15,42,68,.94) 0%,rgba(15,42,68,.78) 38%,rgba(15,42,68,.30) 66%,rgba(15,42,68,.12) 100%)}
@media(max-width:900px){.hero .tint{background:linear-gradient(180deg,rgba(15,42,68,.94) 0%,rgba(15,42,68,.86) 55%,rgba(15,42,68,.55) 100%)}}
.keuze img{width:112px;height:84px;object-fit:contain;display:block;margin:0 auto 6px;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.keuze button:hover img,.keuze button.on img{transform:translateY(-4px) scale(1.06)}
.card img.thumb{width:100%;height:170px;object-fit:cover;display:block;transition:transform .6s ease}
.card:hover img.thumb{transform:scale(1.04)}
.card{overflow:hidden}
.art-hero{width:100%;max-height:420px;object-fit:cover;border-radius:16px;margin:18px 0 6px;display:block}
/* 3D laadpas in garantieblok */
.zegel3d{position:relative;perspective:1100px;display:flex;justify-content:center;align-items:center;min-height:320px}
.zegel3d .kaart3d{width:min(100%,460px);border-radius:20px;box-shadow:0 30px 60px rgba(15,42,68,.35);transform-style:preserve-3d;transition:transform .15s ease-out;animation:zweef 6s ease-in-out infinite;will-change:transform}
.zegel3d .badge{position:absolute;right:6%;bottom:8%;background:var(--green);color:#fff;border-radius:999px;padding:12px 18px;font-weight:700;font-size:15px;box-shadow:0 10px 30px rgba(21,128,61,.45);transform:rotate(-4deg)}
.zegel3d .badge small{display:block;font-weight:400;font-size:12px;opacity:.9}
@keyframes zweef{0%,100%{translate:0 0}50%{translate:0 -10px}}
/* onthulling bij scrollen */
.anim .rv,.anim .card,.anim .stappen>div,.anim .kaart,.anim .feit,.anim .gar .wrap>div,.anim .leden>div{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.8,.2,1)}
.rv.in,.card.in,.stappen>div.in,.kaart.in,.feit.in,.gar .wrap>div.in,.leden>div.in{opacity:1;transform:none}
.stappen>div:nth-child(2){transition-delay:.12s}.stappen>div:nth-child(3){transition-delay:.24s}
.cards>.card:nth-child(2),.revs>.rv:nth-child(2){transition-delay:.1s}.cards>.card:nth-child(3),.revs>.rv:nth-child(3){transition-delay:.2s}
.cards>.card:nth-child(4){transition-delay:.3s}.cards>.card:nth-child(5){transition-delay:.4s}.cards>.card:nth-child(6){transition-delay:.5s}
/* hero-intro */
.hero h1,.hero .lead,.hero .trust,.hero .garantie{animation:intro .8s cubic-bezier(.2,.8,.2,1) both}
.hero .lead{animation-delay:.12s}.hero .trust{animation-delay:.24s}.hero .garantie{animation-delay:-.1s}
.wiz{animation:intro .9s .2s cubic-bezier(.2,.8,.2,1) both}
@keyframes intro{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
/* bliksem-puls op stapnummers */
.stappen .n{position:relative}
.stappen .n::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--blue);opacity:0;animation:puls 2.8s ease-out infinite}
.stappen>div:nth-child(2) .n::after{animation-delay:.9s}.stappen>div:nth-child(3) .n::after{animation-delay:1.8s}
@keyframes puls{0%{transform:scale(.7);opacity:.7}70%{transform:scale(1.25);opacity:0}100%{opacity:0}}
/* laadbalk onder de besparingsregel */
.bespaar{position:relative;overflow:hidden}
.bespaar::before{content:"";position:absolute;left:0;top:0;bottom:0;width:0;background:rgba(21,128,61,.10);animation:laad 1.4s .3s ease-out forwards}
@keyframes laad{to{width:100%}}
@media(prefers-reduced-motion:reduce){
  .hero video.illu{display:none}
  .rv,.card,.stappen>div,.kaart,.feit,.gar .wrap>div,.leden>div{opacity:1;transform:none;transition:none}
  .hero h1,.hero .lead,.hero .trust,.hero .garantie,.wiz,.zegel3d .kaart3d,.stappen .n::after,.bespaar::before{animation:none}
}

.card,.card h3,.card p{text-decoration:none}.card:hover h3{color:var(--blue)}
@media(max-width:600px){.logo{font-size:15px}.logo svg{width:32px;height:28px}}
.hero{min-height:640px}

/* v3: video boven de stilstaande foto, kaart niet uitrekken, foto-keuzes in de wizard */
.hero video.illu{z-index:-2}.hero picture img.illu,.hero img.illu{z-index:-3}
.hero.playing picture{visibility:hidden}
.zegel3d .kaart3d{height:auto;border-radius:0;box-shadow:none;filter:drop-shadow(0 30px 40px rgba(15,42,68,.28))}
.zegel3d{min-height:360px}
.zegel3d .badge{left:0;right:auto;bottom:6%}
.keuze.foto button{padding:0 0 14px;overflow:hidden}
.keuze.foto img.pfoto{width:100%;height:120px;object-fit:cover;display:block;margin:0 0 10px;border-radius:0;transition:transform .6s ease}
.keuze.foto button:hover img.pfoto,.keuze.foto button.on img.pfoto{transform:scale(1.05)}
.keuze.foto b,.keuze.foto small{padding:0 10px;display:block}

/* v5: nadruk op verschillen, €/kWh, aanvraagflow */
.bespaar b{font-size:inherit}
.bs-kop{font-size:17px;margin-bottom:12px}.bs-kop b{font-size:20px;color:var(--green)}
.bs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:8px 0}
.bs-grid>div{background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px 14px}
.bs-grid small{display:block;color:var(--mute);font-size:12px;text-transform:uppercase;letter-spacing:.4px}
.bs-grid b{display:block;font-size:26px;letter-spacing:-.6px;color:var(--ink);margin:2px 0}
.bs-grid .duur b{color:#B42318}.bs-grid span{font-size:13px;color:var(--mute)}
.bs-verschil{margin-top:10px;font-size:15px}.bs-verschil b{color:#B42318;font-size:17px}
.kaart .tag.alt{background:#EEF2F6;color:var(--ink)}
.kaart li.actie{color:var(--green);font-weight:600;list-style:none;margin-left:-18px}
.kaart .gratis{display:block;text-align:center;color:var(--mute);font-size:12px;margin-top:8px}
tr.buiten{opacity:.55}tr.best td{background:var(--green-l)}
td .var{color:var(--mute);font-size:13px}
.pill.grijs{background:#EEF2F6;color:var(--mute)}
td.verschil{min-width:150px;position:relative}
td.verschil .bar{display:block;height:8px;border-radius:4px;background:linear-gradient(90deg,#F59E0B,#DC2626);margin-bottom:4px}
tr.best td.verschil .bar{background:var(--green)}
td.verschil .vt{font-size:13px;white-space:nowrap}
.btn.klein{padding:7px 12px;font-size:13px;white-space:nowrap}
#nietRekenbaar{font-size:14px;color:var(--mute);margin-top:10px}
/* aanvraagformulier */
.aanvraag{display:grid;grid-template-columns:1.4fr 1fr;gap:28px;align-items:start}
.form{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px}
.form h2{margin:0 0 4px;font-size:22px}
.form .rij{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form label{display:block;font-size:14px;font-weight:600;margin:12px 0 4px}
.form input,.form select,.form textarea{width:100%;box-sizing:border-box;border:1px solid var(--line);border-radius:8px;padding:11px 12px;font:inherit;background:#fff}
.form input:focus,.form select:focus,.form textarea:focus{outline:2px solid var(--blue);border-color:var(--blue)}
.form .hint{font-size:13px;color:var(--mute);margin-top:4px}
.form .check{display:flex;gap:10px;align-items:flex-start;font-size:14px;font-weight:400;margin-top:14px}
.form .check input{width:auto;margin-top:3px}
.form .btn{width:100%;text-align:center;font-size:17px;padding:14px;margin-top:16px;background:var(--green)}
.form .btn:hover{background:#116A32}
.form .veilig{text-align:center;font-size:13px;color:var(--mute);margin-top:10px}
.hp{position:absolute;left:-9999px;top:-9999px;height:0;overflow:hidden}
.vertrouwen{display:grid;gap:12px}
.vertrouwen>div{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px;display:flex;gap:12px;align-items:flex-start}
.vertrouwen svg{flex:none;width:26px;height:26px}
.vertrouwen b{display:block;font-size:15px}.vertrouwen span{font-size:14px;color:var(--mute)}
.keuzepas{background:var(--green-l);border:1px solid #BFE3CB;border-radius:10px;padding:12px 14px;margin-bottom:8px;font-size:14px}
.keuzepas b{font-size:16px}
.stappen-klein{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:18px 0}
.stappen-klein>div{background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px 14px;font-size:14px}
.stappen-klein b{display:block;color:var(--blue);font-size:22px}
.kiyoh{display:flex;align-items:center;gap:10px;font-size:14px}
.kiyoh .score{background:#0F2A44;color:#fff;font-weight:700;border-radius:8px;padding:6px 10px;font-size:18px}
.sterren{color:#F59E0B;letter-spacing:1px}
.fout{background:#FEF2F2;border:1px solid #FCA5A5;color:#991B1B;border-radius:8px;padding:10px 12px;font-size:14px;margin-bottom:10px}
.leden img,.rv img{object-fit:cover}
@media(max-width:800px){.aanvraag,.bs-grid,.stappen-klein{grid-template-columns:1fr}.form .rij{grid-template-columns:1fr}}
.rv .avatar{width:56px;height:56px;border-radius:50%;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;flex:none;font-size:18px}
.rv .q b{display:block;color:var(--ink);margin-bottom:2px}
.actie-lijn{background:var(--green-l);border-left:4px solid var(--green);padding:10px 14px;border-radius:6px}
.th-hint{cursor:help;color:var(--blue);font-weight:400}