/* Homepage only: the existing hero and navigation keep their original styling. */
.home-content{--surface:#fafaf8;--rule:#dce1e1;--muted:#5f7080;background:var(--surface)}
.home-content .container{max-width:1280px}
.home-content .sec{padding:88px 0}
.home-content .h2{font-size:clamp(32px,3.7vw,50px);letter-spacing:-.04em;line-height:1.08}
body:has(.home-content){background:#fafaf8}
.home-content #diensten{padding-top:72px}
/* de donkere kaart krijgt dezelfde schaduw, ronding en langzame inzoom als de witte kaarten eronder */
.home-content .step{border:0;border-radius:24px;padding:22px 24px;box-shadow:0 2px 6px rgba(3,44,64,.06), 0 10px 28px -6px rgba(3,44,64,.14);transition:transform .7s cubic-bezier(.16,.6,.2,1),box-shadow .7s cubic-bezier(.16,.6,.2,1)}
.home-content .step.rv.in{transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.16,.6,.2,1), box-shadow .7s cubic-bezier(.16,.6,.2,1)}
.home-content .step::after{display:none}
.home-content .step:hover,.home-content .step.rv.in:hover{transform:scale(1.01);box-shadow:0 4px 10px rgba(3,44,64,.08), 0 26px 48px -10px rgba(3,44,64,.26)}
@media(prefers-reduced-motion:reduce){.home-content .step:hover,.home-content .step.rv.in:hover{transform:none}}
.home-content .step-num svg{width:19px;height:19px}
.home-content .step:hover .step-num{transform:none}
.home-content a.step.step-donker{grid-row:auto;display:flex;align-items:flex-start;gap:18px;padding:36px 38px;background:#062d40;animation:none;border:0;color:#fff;overflow:hidden}
.home-content .step-donker::before{inset:0;z-index:0;background:linear-gradient(100deg,#062d40 8%,#062d40df 65%,#062d4060),url('images/bg-home-hero.jpg') center/cover;background-image:linear-gradient(100deg,#062d40 8%,#062d40df 65%,#062d4060),image-set(url("images/bg-home-hero.webp") type("image/webp"),url("images/bg-home-hero.jpg") type("image/jpeg"));opacity:.7}
.home-content .step-donker .step-num{width:46px;height:46px;border-radius:13px;background:#ffffff15;color:#fff;margin-bottom:5px}
.home-content .step-donker h3{font-size:clamp(30px,3vw,40px);letter-spacing:-.04em;line-height:1.08}
.home-content .step-donker p{font-size:15px;line-height:1.65;color:#c3d2d9;max-width:36ch}
.home-content .step-donker .step-specs{gap:10px;margin:4px 0 12px}
.home-content .step-donker .step-specs li{font-size:13px;color:#d5e1e6}
.home-content .step-donker .step-voet{width:100%;border-top:1px solid #ffffff25;padding-top:22px;margin-top:auto}
.home-content .step-donker .prijs{color:#b6cbd4;font-size:12px}
.home-content .step-donker .prijs b{font-size:25px;color:white;letter-spacing:-.025em;margin-bottom:5px}
.home-content .step-donker .pijl{width:44px;height:44px;background:var(--brand);color:#fff}
/* diensten: donkere kaart als brede band bovenaan, daaronder drie diensten als kolommen */
.home-content .diensten-grid{display:flex;flex-direction:column;gap:26px}
.home-content .diensten-grid a.step.step-donker{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);grid-template-rows:auto 1fr;gap:10px clamp(28px,5vw,72px);align-items:start;padding:36px 40px 32px}
.home-content .diensten-grid .step-donker .step-num{display:none}
.home-content .diensten-grid .step-donker h3{grid-area:1/1;margin-bottom:6px}
.home-content .diensten-grid .step-donker p{grid-area:2/1;max-width:44ch;margin:0}
.home-content .diensten-grid .step-donker .step-specs{grid-area:1/2/2/3;margin:0;align-self:start;padding-top:6px}
.home-content .diensten-grid .step-donker .step-voet{grid-area:2/2/3/3;align-self:end;margin-top:0;padding-top:18px}
.home-content .dienst-lijst{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
/* de drie dienstkaarten: zwevend zonder rand, zachte brede schaduw en een langzame inzoom, zoals de pakketkaarten */
.home-content .dienst-rij{display:grid;grid-template-columns:minmax(0,1fr) 18px;grid-template-rows:auto auto auto;gap:10px 12px;align-content:start;padding:32px 30px 30px;background:#fff;border:0;border-radius:24px;color:var(--ink);
  box-shadow:0 2px 6px rgba(3,44,64,.05), 0 10px 28px -6px rgba(3,44,64,.10)}
.home-content .dienst-rij.rv.in{transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.16,.6,.2,1), box-shadow .7s cubic-bezier(.16,.6,.2,1)}
.home-content .dienst-rij:hover,.home-content .dienst-rij.rv.in:hover{transform:scale(1.02);box-shadow:0 4px 10px rgba(3,44,64,.07), 0 26px 48px -10px rgba(3,44,64,.22)}
.home-content .dr-naam{grid-column:1;font-size:22px;font-weight:600;letter-spacing:-.025em;line-height:1.2}
.home-content .dr-pijl{grid-column:2;grid-row:1;display:flex;align-self:center;color:var(--grey-soft);transition:transform .4s cubic-bezier(.16,.6,.2,1),color .3s}
.home-content .dienst-rij:hover .dr-pijl{transform:translateX(3px);color:var(--brand)}
.home-content .dr-tekst{grid-column:1/3;font-size:14.5px;line-height:1.6;color:var(--grey)}
.home-content .dr-prijs{grid-column:1/3;margin-top:10px}
.home-content .dr-prijs b{display:block;font-size:15.5px;font-weight:600;letter-spacing:-.01em}
.home-content .dr-prijs small{display:block;margin-top:3px;font-size:12px;color:var(--grey)}
@media(prefers-reduced-motion:reduce){.home-content .dienst-rij:hover,.home-content .dienst-rij.rv.in:hover{transform:none}}
.home-content .plans-note{margin-top:23px;font-size:13px}
.home-content .kh-inline{grid-template-columns:.85fr 1.4fr;padding:28px 0 0;margin-top:32px;gap:32px;border:0;border-top:1px solid var(--rule);border-radius:0;background:none}
.home-content .kh-inline::after{display:none}
.home-content .kh-inline-copy h3{font-size:21px;letter-spacing:-.025em;margin-bottom:6px}
.home-content .kh-inline-copy p{font-size:13px;max-width:36ch}
.home-content .kh-inline-opties{flex-direction:row;gap:8px}
.home-content .kh-inline-opties .kh-optie{flex:1;min-width:0;padding:15px 13px;background:#edf1f0;border:1px solid transparent;border-radius:10px;font-size:13px;align-items:flex-start;gap:8px}
.home-content .kh-inline-opties .kh-optie small{font-size:11px;line-height:1.4;margin-top:6px}
.home-content .kh-inline-opties .kh-optie:hover{background:white;border-color:#91a5ad}
.home-content .kh-inline-opties .kh-optie svg{width:14px;flex-shrink:0;margin-top:3px}
/* About: an open editorial layout, with the photograph in its own right. */
/* zes zekerheden: foto links, genummerde lijst in twee kolommen rechts */
.home-zeker{margin:0 max(16px,calc((100% - 2000px)/2));padding:64px 0;background:#eeece6;border-radius:24px;overflow:clip}
.home-zeker-layout{display:grid;grid-template-columns:.7fr 1.3fr;gap:clamp(36px,6vw,84px);align-items:center}
.home-zeker-photo{margin:0;width:100%;max-width:380px;justify-self:center}
/* certificaat: zelfde schaduw als de dienstenkaarten, en dezelfde blauwe waas als de blogfoto's zodat het niet te fel is */
.home-zeker-photo picture{position:relative;display:block;border-radius:10px;overflow:hidden;box-shadow:0 2px 6px rgba(3,44,64,.06), 0 10px 28px -6px rgba(3,44,64,.14)}
.home-zeker-photo picture::after{content:"";position:absolute;inset:0;pointer-events:none;background:rgba(10,72,110,.10)} /* lichter dan in de blog: op wit papier oogt 25% te blauw */
.home-zeker-photo img{display:block;width:100%;height:auto;filter:saturate(.85) brightness(.96)}
.home-zeker-photo figcaption{font-size:12px;color:#627078;margin-top:12px}
.home-zeker-copy h2{font-size:clamp(30px,3vw,42px);font-weight:600;line-height:1.13;letter-spacing:-.035em;margin-bottom:28px}
.zeker-lijst{list-style:none;counter-reset:zeker;display:grid;grid-template-columns:1fr 1fr;gap:34px 48px;margin:0;padding:0}
.zeker-lijst li{counter-increment:zeker;position:relative;padding-left:44px}
.zeker-lijst li::before{content:counter(zeker);position:absolute;left:0;top:-1px;width:30px;height:30px;border-radius:50%;background:var(--ink);color:#fff;font-size:12.5px;font-weight:600;display:flex;align-items:center;justify-content:center}
.zeker-lijst b{display:block;font-size:16px;font-weight:600;letter-spacing:-.015em;line-height:1.3;margin-bottom:4px}
.zeker-lijst p{font-size:14px;line-height:1.6;color:#4b616c;margin:0}
.zeker-lijst a{white-space:nowrap;font-weight:500;color:#627078;border-bottom:1px solid transparent;transition:color .2s,border-color .2s} /* rustig: geen vette onderstreepte links meer, zes op een rij oogde druk */
.zeker-lijst a:hover{color:var(--brand);border-color:currentColor}
.zeker-lijst a::after{content:"\2192";display:inline-block;margin-left:4px;transition:transform .2s}
.zeker-lijst a:hover::after{transform:translateX(2px)}
.home-content #reviews .light-card-wrap{padding:0}
.home-content #reviews .light-card{padding:0;background:none;border-radius:0;box-shadow:none}
.home-content .rev-head .h2{font-size:clamp(30px,3.4vw,44px)}
/* sectiekoppen op de homepage volgen nu de gecentreerde opmaak van de andere pagina's; alleen de reviewscore houdt zijn eigen vorm */
.home-content .rev-score{display:grid;grid-template-columns:auto auto;gap:2px 14px;align-items:center;justify-items:start;margin-top:6px}
.home-content .rev-score b{grid-row:1/3;font-size:64px;letter-spacing:-.06em;line-height:1}
.home-content .rev-score .cnt{font-size:12px}
.home-content .rev-score .uit-vijf{font-size:.34em;font-weight:500;letter-spacing:0;color:#8a979d;margin-left:4px} /* "/5" klein en grijs: 4,9 leest anders als een schoolcijfer */
.hero-trust .uit-vijf{font-size:.85em;opacity:.6}
.home-content .rev-grid{gap:16px}
.home-content .rev{padding:26px;border:1px solid var(--rule);border-radius:14px;box-shadow:none;transform:none;will-change:auto;background:white;gap:16px}
.home-content .rev::after,.home-content .rev p::before{display:none}
.home-content .rev:hover{box-shadow:none}
.home-content .rev p{font-size:17px;line-height:1.6;padding:0;letter-spacing:-.015em}
.home-content .rev footer{padding-top:12px}
.home-content .rev footer b{font-size:13px}
.home-content .rev footer span{font-size:12px}
.home-content .kbx-home{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;max-width:none;border:0}
.home-content .kbx-home .kbx-row{display:flex;flex-direction:column;align-items:stretch;gap:20px;padding:0;border:0}
.home-content .kbx-row .kbx-tile{width:100%;aspect-ratio:2.2;border-radius:12px}
.home-content .kbx-row .kbx-tile svg{width:105px;right:22px;bottom:-9px;opacity:.45;transform:rotate(-12deg)}
.home-content .kbx-row .kbx-tile::before{content:"";position:absolute;width:180px;height:180px;right:-20px;top:-50px;border:1px solid #ffffff20;border-radius:50%;box-shadow:0 0 0 32px #ffffff08,0 0 0 64px #ffffff05}
.home-content .tile-perf{background:linear-gradient(120deg,#452c23,#9e5940)}
.home-content .tile-mail{background:linear-gradient(120deg,#342833,#775069)}
.home-content .tile-move{background:linear-gradient(120deg,#153e40,#497c78)}
.home-content .kbx-row:hover .kbx-tile{transform:translateY(-3px);box-shadow:none}
.home-content .kbx-row-tekst{gap:10px}
.home-content .kbx-row h3{font-size:20px;line-height:1.35;letter-spacing:-.025em;font-weight:600;max-width:28ch}
.home-content .kbx-row:hover h3{color:var(--brand)}
.home-content .kbx-row .kb-meta{font-size:11px;gap:10px;flex-wrap:wrap}
.home-content .kbx-row .kb-meta .pill{background:none;padding:0;color:var(--grey);font-size:11px}
.home-content .kbx-alle{text-align:left;margin-top:30px}
.home-content .final{max-width:none;padding:0 16px 16px;background:var(--surface)}
.home-content .final .dark-card{padding:64px 36px;background:#082d3d;color:#fff;border-radius:24px;clip-path:inset(0 round 24px)}
.home-content .final .dark-card::before,.home-content .final .dark-card::after{display:block}
.home-content .final-inner{max-width:1000px;gap:24px}
.home-content .final .h2{font-size:clamp(34px,4.4vw,60px);margin-top:42px} /* ruimte van het verwijderde label (18px) + gap (24px) blijft staan */
.home-content .final .h2 span{color:#c3d2d9}
.home-content .final .specs{color:#c3d2d9;gap:13px}
.home-content .final .specs b{color:#e1e9ed;font-size:12px}
.home-content .final .btn-glass{color:#fff;border:1px solid #ffffff55;background:#ffffff12;backdrop-filter:blur(12px)}
.home-content .final .btn-glass:hover{background:#ffffff26}
.home-content a:focus-visible,.home-content button:focus-visible{outline:3px solid #dc2f3b;outline-offset:4px}
@media(max-width:1050px){
 .home-content .kh-inline{grid-template-columns:1fr;gap:20px}
 .home-content .kh-inline-copy p{max-width:none}
 .home-content a.step.step-donker{padding:30px}
}
@media(max-width:760px){
 .home-content .sec{padding:60px 0}
 .home-content #diensten{padding-top:48px}
 .home-content .diensten-grid a.step.step-donker{grid-template-columns:1fr;grid-template-rows:auto}
 .home-content .diensten-grid .step-donker h3,.home-content .diensten-grid .step-donker p,.home-content .diensten-grid .step-donker .step-specs,.home-content .diensten-grid .step-donker .step-voet{grid-area:auto}
 .home-content .diensten-grid .step-donker .step-specs{margin:10px 0 4px}
 .home-content .dienst-lijst{grid-template-columns:1fr;gap:12px}
 .home-content .dienst-rij{padding:20px 20px 18px}
 .home-content a.step.step-donker{grid-row:auto;padding:30px}
 .home-content .step-donker h3{font-size:36px}
 .home-content .step-donker p{max-width:45ch}
 .home-content .kh-inline-opties{flex-direction:column}
 .home-content .kh-inline-opties .kh-optie{align-items:center;padding:14px 16px;min-height:58px}
 .home-content .kh-inline-opties .kh-optie small{margin-top:3px}
 .home-content .rev-grid{grid-template-columns:1fr}
 .home-content .rev p{font-size:17px}
 .home-content .kbx-home{grid-template-columns:1fr;gap:26px}
 .home-content .kbx-home .kbx-row{flex-direction:row;align-items:center;gap:18px}
 .home-content .kbx-row .kbx-tile{width:110px;aspect-ratio:1;flex-shrink:0}
 .home-content .kbx-row .kbx-tile svg{width:80px;right:-10px}
 .home-content .kbx-row h3{font-size:18px}
 .home-content .final .dark-card{padding:48px 24px}
}
@media(max-width:440px){
 .home-content a.step.step-donker{padding:26px}
 .home-content .step-donker .prijs b{font-size:23px}
 .home-content .kbx-row .kbx-tile{width:82px}
 .home-content .kbx-row h3{font-size:16px}
 .home-content .kbx-row .kb-meta{gap:6px;font-size:10px}
 .home-content .final{padding:0 10px 10px}
 .home-content .final-inner .row{flex-direction:column;width:100%}
 .home-content .final .specs{gap:8px;flex-wrap:wrap}
}
@media(prefers-reduced-motion:reduce){.home-content .kbx-row:hover .kbx-tile{transform:none}}
.home-content .stars{display:inline-flex;gap:3px;color:#dc693a;align-items:center}
.home-content .stars svg{display:block;flex-shrink:0}
/* specs-lijst: kaal vinkje zonder cirkel of groen */
.home-content .step-specs i{font-size:0}
.home-content .step-specs i::before{content:"";width:5px;height:9px;border:solid currentColor;border-width:0 1.5px 1.5px 0;transform:translateY(-1px) rotate(45deg)}
.home-content .step-donker .step-specs i{background:none;color:rgba(255,255,255,.78)}
footer.home-footer{background:#fafaf8;margin-top:0}
.home-footer .foot-legal{color:var(--grey)}
@media(max-width:560px){
 .home-footer .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 20px}
 .home-footer .foot-brand p,.home-footer .foot-col a{font-size:12px;overflow-wrap:anywhere}
 .home-footer .foot-legal{margin-top:32px;font-size:11px}
}

@media(max-width:1000px){
 .home-zeker-layout{grid-template-columns:1fr;gap:32px}
 .home-zeker-photo{justify-self:start}
}
@media(max-width:760px){
 .home-zeker{padding:40px 0}
 .home-zeker-copy h2{font-size:32px;margin-bottom:22px}
 .zeker-lijst{grid-template-columns:1fr;gap:18px}
}

@media(max-width:440px){.home-zeker{margin-inline:10px;border-radius:18px}}

/* ---------- speelse details op de voorpagina (2026-09-11) ---------- */
/* 3. zekerheden: de cirkel vult zich en het vinkje tekent zich, punt voor punt, gekoppeld aan het scrollen */
.zeker-lijst li::before{content:"";box-sizing:border-box;border:1.5px solid var(--ink);background:transparent}
.zeker-lijst .vink{position:absolute;left:0;top:-1px;width:30px;height:30px;padding:8px;box-sizing:border-box;pointer-events:none;overflow:visible}
.zeker-lijst .vink path{fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
@keyframes vinkCirkel{from{box-shadow:inset 0 0 0 0 var(--ink);transform:scale(.7)}to{box-shadow:inset 0 0 0 16px var(--ink);transform:none}}
@keyframes vinkTeken{to{stroke-dashoffset:0}}
.zeker-lijst li.in::before{animation:vinkCirkel .45s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(.3s + var(--vn) * .14s)}
.zeker-lijst li.in .vink path{animation:vinkTeken .5s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(.55s + var(--vn) * .14s)}
.zeker-lijst li:nth-child(1){--vn:0;--v0:4%;--v1:12%;--v2:22%}
.zeker-lijst li:nth-child(2){--vn:1;--v0:11%;--v1:19%;--v2:29%}
.zeker-lijst li:nth-child(3){--vn:2;--v0:18%;--v1:26%;--v2:36%}
.zeker-lijst li:nth-child(4){--vn:3;--v0:25%;--v1:33%;--v2:43%}
.zeker-lijst li:nth-child(5){--vn:4;--v0:32%;--v1:40%;--v2:50%}
.zeker-lijst li:nth-child(6){--vn:5;--v0:39%;--v1:47%;--v2:57%}
@supports (animation-timeline:view()){
  .zeker-lijst{view-timeline-name:--zeker;view-timeline-axis:block}
  .zeker-lijst li::before,.zeker-lijst li.in::before{animation:vinkCirkel linear both;animation-timeline:--zeker;animation-range:cover var(--v0) cover var(--v1)}
  .zeker-lijst li .vink path,.zeker-lijst li.in .vink path{animation:vinkTeken linear both;animation-timeline:--zeker;animation-range:cover var(--v1) cover var(--v2)}
}

/* 6. reviews: de drie kaarten liggen op een stapel en waaieren uit naar hun plek */
@keyframes waaierL{from{transform:translateX(calc(100% + 16px)) rotate(-6deg) scale(.96)}to{transform:none}}
@keyframes waaierM{from{transform:translateY(10px) rotate(1.5deg)}to{transform:none}}
@keyframes waaierR{from{transform:translateX(calc(-100% - 16px)) rotate(6deg) scale(.96)}to{transform:none}}
@media(min-width:901px){
  .home-content .rev:nth-child(2){z-index:2}
  .home-content .rev.in:nth-child(1){animation:waaierL .9s cubic-bezier(.2,.7,.2,1) .15s both}
  .home-content .rev.in:nth-child(2){animation:waaierM .9s cubic-bezier(.2,.7,.2,1) .15s both}
  .home-content .rev.in:nth-child(3){animation:waaierR .9s cubic-bezier(.2,.7,.2,1) .15s both}
  @supports (animation-timeline:view()){
    .home-content .rev-grid{view-timeline-name:--waaier;view-timeline-axis:block}
    .home-content .rev:nth-child(1),.home-content .rev.in:nth-child(1){animation:waaierL linear both;animation-timeline:--waaier;animation-range:cover 8% cover 48%}
    .home-content .rev:nth-child(2),.home-content .rev.in:nth-child(2){animation:waaierM linear both;animation-timeline:--waaier;animation-range:cover 8% cover 48%}
    .home-content .rev:nth-child(3),.home-content .rev.in:nth-child(3){animation:waaierR linear both;animation-timeline:--waaier;animation-range:cover 8% cover 48%}
  }
}

/* 8. dienstenrijen: het pijltje wenkt even als de rij verschijnt; bij hover kleurt de rij van links naar rechts in */
@keyframes pijlWenk{0%{transform:none}45%{transform:translateX(7px)}100%{transform:none}}
.home-content .dienst-rij.rv.in .dr-pijl{animation:pijlWenk .8s cubic-bezier(.2,.7,.2,1) .7s backwards}
.home-content .dienst-rij.rv-d2.in .dr-pijl{animation-delay:.85s}
.home-content .dienst-rij.rv-d3.in .dr-pijl{animation-delay:1s}
.home-content .dienst-rij{background:linear-gradient(90deg,#f4f2ec 0 50%,#fff 50%) 100% 0/200% 100% no-repeat}
.home-content .dienst-rij.rv.in{transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.16,.6,.2,1), box-shadow .7s cubic-bezier(.16,.6,.2,1), background-position .55s cubic-bezier(.2,.7,.2,1)}
.home-content .dienst-rij:hover{background-position:0 0}

@media(prefers-reduced-motion:reduce){
  .zeker-lijst li::before,.zeker-lijst li.in::before{animation:none;box-shadow:inset 0 0 0 16px var(--ink)}
  .zeker-lijst .vink path{animation:none!important;stroke-dashoffset:0}
  .home-content .rev,.home-content .rev.in,.home-content .dr-pijl{animation:none!important;transform:none}
  .home-content .dienst-rij{transition:none}
}