/* =====================================================================
   FinalV3 (?design=finalv3) — FinalV1-basis met:
   • fv-network vóór paysafe (zonder eyebrow en zonder fv-facts)
   • fv-reviews ná paysafe (alleen kop, geen reviewkaarten)
   • Hoe-het-werkt als Atlas-stappen (FinalV2) + afsluitende CTA
   • cta-strip uitsluitend op de product-detailpagina (body-class-regel)
   • volledige Cobalt Lux-polish geport (fv3-prefix): preloader, reveals,
     counters, parallax, header-gedrag, schaduwen, easing, focus-ringen
   • ronde knoppen/boxen zoals het "old"-thema (alleen geometrie)
   Laadt direct na herox.css; CSS-themes (data-theme) laden later en
   blijven er dus overheen werken.
   ===================================================================== */

/* ---------- cta-strip: nergens meer als losse band — op product-detail vervangen
   door de fv3-ask ghost-tegel in het related-grid (styles onderaan dit bestand) ---------- */
.cta-strip{display:none}

/* ---------- FV1: hero-trustregel ---------- */
.fv-trust{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:30px;font-size:13.5px;font-weight:500;color:var(--muted-2)}
.fv-trust strong{color:var(--text);font-weight:800}
.fv-stars{color:var(--msc-2);letter-spacing:2.5px;font-size:14px}
.fv-sep{width:1px;height:14px;background:var(--border-2)}

/* ---------- FV1→V3: container-finder als kale regel bovenin de tagline-sectie,
   direct onder de hero-afsluitlijn. Geen box, geen achtergrond, geen rand;
   elke chip is een gewone link. ---------- */
.tagline{padding-top:26px}
.tagline .tagline-inner{margin-top:64px}
.fv-finder-wrap{position:relative;z-index:2}
.fv-finder{display:flex;align-items:center;gap:16px;flex-wrap:wrap;width:fit-content;max-width:100%;padding:0;background:transparent;border:0;border-radius:0;box-shadow:none}
.fv-finder-label{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:rgba(147,167,194,.7);padding-right:16px;border-right:1px solid rgba(148,163,184,.12);white-space:nowrap}
.fv-finder-group{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.fv-finder-k{font-size:12px;font-weight:600;color:rgba(147,167,194,.65);margin-right:6px}
.fv-chip{display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border-radius:999px;border:1px solid transparent;background:transparent;color:var(--muted-2);font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;text-decoration:none;transition:border-color .25s var(--e-out),color .25s var(--e-out),background .25s var(--e-out)}
.fv-chip:hover{color:var(--accent-2);background:rgba(59,130,246,.09);border-color:rgba(121,177,252,.3)}
.fv-chip:active{transform:scale(.97)}
.fv-chip img{border-radius:2px}
@media(max-width:760px){
  .fv-finder{gap:10px;padding:13px 16px 13px 0}
  .fv-finder-label{border-right:0;padding-right:0;width:100%}
}

/* ---------- FV1: gedeelde sectiekop ---------- */
.fv-section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;flex-wrap:wrap;margin-bottom:34px}
.fv-net-sub{max-width:440px;font-size:15px;line-height:1.6;color:var(--muted)}

/* ---------- FV1: netwerk-board (V3: geen fv-facts, sectie vóór paysafe) ---------- */
/* achtergrond-wissel: netwerk start met de gradient die paysafe had; paysafe effen */
.fv-network{padding:96px 0 72px;background:linear-gradient(180deg,rgba(59,130,246,.05),transparent)}
.paysafe{background:transparent;padding:0 0 88px}
.paysafe-text .eyebrow{margin-bottom:47px}
@media(max-width:900px){.paysafe-text .eyebrow{margin-bottom:18px}}
.fv-board{border:1px solid var(--border-2);border-radius:14px;overflow:hidden;background:linear-gradient(160deg,var(--surface-2) 0%,var(--surface) 100%)}
.fv-board-row{display:grid;grid-template-columns:26px 1fr 1.1fr auto 20px;align-items:center;gap:18px;padding:17px 22px;text-decoration:none;border-bottom:1px solid var(--border);transition:background .2s}
.fv-board-row:last-child{border-bottom:0}
.fv-board-row:hover{background:rgba(59,130,246,.07)}
.fv-board-row.on{box-shadow:inset 3px 0 0 var(--msc)}
.fv-board-row img{border-radius:2px}
.fv-board-name{font-size:16px;font-weight:800;color:var(--text)}
.fv-board-domain{font-size:12.5px;color:var(--muted);letter-spacing:.03em}
.fv-board-status{display:inline-flex;align-items:center;gap:8px;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:1.2px;color:var(--success-2)}
.fv-dot{width:7px;height:7px;border-radius:50%;background:var(--success-2);box-shadow:0 0 8px var(--success-2);flex-shrink:0}
.fv-board-go{color:var(--muted);font-size:16px;transition:color .2s,transform .2s}
.fv-board-row:hover .fv-board-go{color:var(--accent-2);transform:translateX(3px)}
@media(max-width:760px){
  .fv-board-row{grid-template-columns:24px 1fr auto;gap:12px}
  .fv-board-domain,.fv-board-go{display:none}
}

/* ---------- FV1: Google reviews (V3: alleen de kop "★★★★★ 4.9", geen kaarten) ---------- */
.fv-reviews{padding:0 0 96px}
.fv-reviews .fv-section-head{margin-bottom:0;align-items:center}
.fv-rhead{display:flex;align-items:center;gap:16px}
.fv-rhead .section-h2{margin:0}
.fv-rhead .fv-stars{font-size:.55em;vertical-align:.25em;margin-right:6px}
.fv-rhead-sub{margin-top:6px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:var(--muted)}
.fv-g{flex-shrink:0}

/* ---------- FV2: Hoe het werkt — Atlas-stappen op de originele features-achtergrond
   (kleuren hard gepind op de originele Cobalt-waarden: surface #0c1838, border #1e293b)
   en met de oude sectie-spacing (120px) van de features-sectie ---------- */
.fv2-steps{display:none} /* op verzoek verborgen; markup blijft staan voor snelle terugkeer */
.fv2-steps{padding:120px 0;background:#0c1838;border-top:1px solid #1e293b;border-bottom:1px solid #1e293b}
.fv2-steps .fv-section-head{margin-bottom:56px}
.fv2-steps-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:22px}
.fv2-step{border-top:2px solid var(--border-2);padding-top:18px;transition:border-color .25s}
.fv2-step:hover{border-top-color:var(--msc)}
.fv2-step-n{display:block;font-size:12px;font-weight:800;color:var(--msc-2);letter-spacing:.1em;margin-bottom:12px}
.fv2-step h3{font-size:16.5px;font-weight:800;color:var(--text);margin-bottom:8px}
.fv2-step p{font-size:13.5px;line-height:1.6;color:var(--muted)}
.fv2-steps .features-cta{margin-top:56px;padding-top:0}
@media(max-width:1060px){.fv2-steps-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:700px){.fv2-steps-grid{grid-template-columns:1fr 1fr}}

/* ---------- FV1: branch-strip (uit home @push verplaatst) ---------- */
.branch-strip{display:flex;align-items:center;gap:16px;padding:20px 24px;margin:20px 0;background:linear-gradient(160deg,var(--surface-2) 0%,var(--surface) 100%);border:1px solid var(--border-2);border-radius:12px}
.branch-strip-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--muted);white-space:nowrap}
.branch-strip-flags{display:flex;flex-wrap:wrap;gap:8px}
.branch-flag{display:flex;align-items:center;gap:6px;padding:6px 12px;border-radius:8px;text-decoration:none;font-size:12px;font-weight:700;color:var(--muted-2);transition:all .2s;border:1px solid transparent}
.branch-flag img{border-radius:2px}
.branch-flag:hover{background:rgba(240,168,0,.08);border-color:rgba(240,168,0,.25);color:#f0a800}
.branch-flag.active{background:rgba(240,168,0,.12);border-color:rgba(240,168,0,.35);color:#f0a800;font-weight:800}
.branch-flag.active img{box-shadow:0 0 0 2px rgba(240,168,0,.4)}
@media(max-width:640px){.branch-strip{flex-direction:column;align-items:flex-start;gap:10px}}

/* =====================================================================
   Ronde knoppen & boxen — geometrie van het "old"-thema
   (herox.css zet border-radius:0 !important; hier terug naar rond)
   ===================================================================== */
.btn,.btn-primary,.btn-secondary,.btn-yellow,.modal-submit{border-radius:var(--r)!important}
.cta-top{border-radius:var(--r)!important}
.trust-pop-cta{border-radius:11px!important}
.qm-fin-yes,.qm-fin-no{border-radius:10px!important}
#theme-toggle{border-radius:9px}
.locale-btn{border-radius:8px}
.locale-menu{border-radius:10px}
.locale-menu a{border-radius:6px}
.eyebrow{border-radius:var(--r)}
.tag{border-radius:5px}
.pfin,.pmatch,.prent{border-radius:5px}
.fin-badge,.trust-pop-pill,.calc-presets button,.fin-hero-pill.is-hero{border-radius:99px}
.fin-bar-ico{border-radius:9px}
.fin-bar-toggle{border-radius:8px}
.fin-toggle{border-radius:10px}
.fin-toggle button{border-radius:8px}
.trust-pop-ico{border-radius:10px}
.safe-card-ico{border-radius:11px}
.safe-step-n{border-radius:9px}
.trust-pop-shield{border-radius:14px}
.safe-hero-shield{border-radius:16px}
.calc-input{border-radius:11px}
.fin-vat input{border-radius:9px}
.qm-fin-ico{border-radius:10px}

/* =====================================================================
   Cobalt Lux-polish, geport voor FinalV3 (fv3-prefix, ongescoped —
   dit bestand laadt alleen binnen het FinalV3-design)
   ===================================================================== */

/* fv3-elementen onzichtbaar zolang JS ze niet stylet (defensief) */
.fv3-loader{display:none}
.fv3-progress{display:none}

/* ---------- tokens ---------- */
:root{
  --surface:#0b1734; --surface-2:#101f46;
  --muted:#93a7c2; --muted-2:#cfdae8;
  --accent-2:#79b1fc; --accent-glow:rgba(59,130,246,.32);
  --border:rgba(148,163,184,.13); --border-2:rgba(148,163,184,.24);
  --hero-bg:
    radial-gradient(1100px 620px at 78% 14%, rgba(59,130,246,.16) 0%, transparent 62%),
    radial-gradient(760px 520px at 6% 96%, rgba(37,99,235,.10) 0%, transparent 55%),
    linear-gradient(142deg,#01040f 0%,#071228 42%,#122a63 100%);
  --e-out:cubic-bezier(.22,1,.36,1);
  --e-io:cubic-bezier(.66,0,.34,1);
  --e-pop:cubic-bezier(.3,1.4,.44,1);
  --sh-s:0 1px 2px rgba(1,4,15,.5),0 3px 10px -2px rgba(1,4,15,.35);
  --sh-m:0 2px 5px rgba(1,4,15,.45),0 14px 34px -10px rgba(1,4,15,.55);
  --sh-l:0 4px 12px rgba(1,4,15,.4),0 32px 72px -18px rgba(1,4,15,.65);
}
html{interpolate-size:allow-keywords;scroll-behavior:smooth;scrollbar-color:#26385f #04081a}

/* ---------- fundament ---------- */
body{background:linear-gradient(180deg,#020617 0%,#030a1d 100%)}
::selection{background:rgba(59,130,246,.45);color:#fff}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:#04081a}
::-webkit-scrollbar-thumb{background:#26385f;border-radius:8px;border:3px solid #04081a}
::-webkit-scrollbar-thumb:hover{background:#33497c}
:is(a,button,select,summary,[tabindex]):focus-visible{outline:2px solid var(--accent-2);outline-offset:3px;border-radius:2px}
:is(input,textarea):focus-visible{outline:none}

/* ---------- typografie ---------- */
:is(h1,h2,h3,.section-h2){text-wrap:balance}
.hero h1{letter-spacing:-.034em;line-height:1.03}
.lede{max-width:760px;color:#c4d3e5;text-wrap:pretty}
.page-hero .sub{text-wrap:pretty}
:is(.stat .num,.price,.pv,.calc-input,.qs-row strong,.fin-opt-price strong,.em-num){font-variant-numeric:tabular-nums}
:is(.section-title,.eyebrow){letter-spacing:.15em}
:is(.step p,.feature-card p,.pcard .desc,details.faq .a,.safe-card p,.fv2-step p){text-wrap:pretty}

/* ---------- header & navigatie ----------
   Scroll-performance: GEEN padding-animatie bij scrollen (dat zou de hele
   pagina laten herlayouten) en een lichtere blur — alleen kleur/schaduw wisselt. */
header.site{padding:18px 0;background:rgba(2,6,23,.78);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom-color:rgba(148,163,184,.1);transition:background .35s var(--e-out),box-shadow .35s var(--e-out)}
header.site.fv3-scrolled{background:rgba(2,6,23,.92);box-shadow:0 1px 0 rgba(148,163,184,.08),0 18px 44px -22px rgba(0,0,0,.65)}
.menu a{transition:color .3s var(--e-out)}
.menu a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--accent);border-radius:2px;transform:scaleX(0);transform-origin:left;transition:transform .35s var(--e-out)}
.menu a:hover::after,.menu a.active::after{transform:scaleX(1)}
.tel{transition:color .3s var(--e-out)}
.tel::before{animation:fv3Pulse 3s var(--e-io) infinite}
.cta-top{background:linear-gradient(180deg,#ffc233 0%,#f0a800 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 8px 24px -8px rgba(240,168,0,.55);transition:transform .35s var(--e-pop),box-shadow .35s var(--e-out),filter .3s var(--e-out)}
.cta-top:hover{background:linear-gradient(180deg,#ffd05c 0%,#f7b31c 100%);transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 12px 32px -8px rgba(240,168,0,.65)}
.cta-top:active{transform:translateY(0) scale(.97)}
#theme-toggle{transition:color .3s,border-color .3s,background .3s,transform .35s var(--e-pop)}
#theme-toggle:hover{transform:translateY(-1px)}
#theme-toggle:active{transform:scale(.94)}
.locale-btn{background:rgba(148,163,184,.07);border-color:rgba(148,163,184,.22);color:var(--muted-2);transition:background .3s var(--e-out),border-color .3s,color .3s}
/* locale-knop: alleen het vlaggetje + chevron, geen "HEROX NL"-tekst (mobiel én desktop) */
.locale-btn span:not([style]){display:none}
.locale-btn{padding:8px 10px}
.locale-btn:hover{background:rgba(148,163,184,.13);border-color:rgba(148,163,184,.38);color:var(--text)}
.locale-menu{background:rgba(8,15,35,.96);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-color:rgba(148,163,184,.18);box-shadow:var(--sh-l)}
.locale-menu a{color:var(--muted-2);transition:background .25s var(--e-out),color .25s}
.locale-menu a:hover{background:rgba(148,163,184,.09);color:var(--text)}
.locale-menu a.active{background:var(--accent);color:#fff}
.rating{transition:background .3s var(--e-out),border-color .3s,transform .3s var(--e-out)}
.rating:hover{transform:translateY(-1px)}
.crumbs a{transition:color .25s var(--e-out)}
@media(max-width:900px){
  .menu{background:rgba(3,8,24,.97);backdrop-filter:blur(26px);-webkit-backdrop-filter:blur(26px);box-shadow:-24px 0 64px rgba(0,0,0,.55);border-left:1px solid rgba(148,163,184,.12)}
  .menu.open{animation:fv3Slide .4s var(--e-out)}
  .menu a{color:#dce7f6;border-bottom-color:rgba(148,163,184,.1)}
  .menu a.active{color:var(--accent-2)}
  .menu a::after{display:none}
  .mob-overlay{background:rgba(1,4,15,.6);backdrop-filter:blur(3px)}
}

/* ---------- hero + entree-choreografie ---------- */
.eyebrow{background:linear-gradient(180deg,rgba(59,130,246,.13),rgba(59,130,246,.05));border-color:rgba(59,130,246,.45)}
.eyebrow::before{animation:fv3PulseBlue 3.2s var(--e-io) infinite}
.hero-bg-img img{will-change:transform} /* basis-drop-shadow volstaat; zwaardere filter maakte scrollen stroef */
.stats{border-top-color:rgba(148,163,184,.12)}
.stat .lbl{color:#8ba0bd}
html.fv3-boot .hero .eyebrow{animation:fv3Rise .8s var(--e-out) .06s backwards}
html.fv3-boot .hero h1{animation:fv3Rise .85s var(--e-out) .14s backwards}
html.fv3-boot .hero .lede{animation:fv3Rise .85s var(--e-out) .24s backwards}
html.fv3-boot .hero .btns{animation:fv3Rise .85s var(--e-out) .34s backwards}
html.fv3-boot .hero .fv-trust{animation:fv3Rise .85s var(--e-out) .42s backwards}
html.fv3-boot .hero :is(.hero-checks,.stats){animation:fv3Rise .9s var(--e-out) .5s backwards}
html.fv3-boot .fv-finder-wrap{animation:fv3Rise .9s var(--e-out) .6s backwards}
html.fv3-boot .page-hero .crumbs{animation:fv3Rise .7s var(--e-out) .05s backwards}
html.fv3-boot .page-hero h1{animation:fv3Rise .8s var(--e-out) .12s backwards}
html.fv3-boot .page-hero :is(.sub,.fin-hero-pill,.hero-guarantee){animation:fv3Rise .8s var(--e-out) .22s backwards}
@media(min-width:1101px){
  html.fv3-boot .hero-bg-img{animation:fv3Drift 1.2s var(--e-out) .3s backwards}
}

/* ---------- knoppen ---------- */
.btn{transition:transform .35s var(--e-pop),box-shadow .35s var(--e-out),background .3s var(--e-out),color .3s,border-color .3s,filter .3s}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.975);transition-duration:.12s}
.btn-primary{background:linear-gradient(180deg,#4f93f9 0%,#2e6fe8 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 1px 2px rgba(2,6,23,.4),0 10px 28px -8px rgba(59,130,246,.55)}
.btn-primary:hover{background:linear-gradient(180deg,#61a1ff 0%,#3b7cf2 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.26),0 2px 4px rgba(2,6,23,.4),0 16px 40px -10px rgba(59,130,246,.65)}
.btn-yellow{background:linear-gradient(180deg,#ffc94a 0%,#f0a800 100%);color:#081022;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 10px 28px -8px rgba(240,168,0,.5)}
.btn-yellow:hover{background:linear-gradient(180deg,#ffd465 0%,#f7b31c 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 16px 38px -10px rgba(240,168,0,.6)}
.btn-secondary{background:rgba(148,163,184,.06);border-color:rgba(148,163,184,.3)}
:is(.trust-pop-cta,.qm-fin-yes){transition:background .3s var(--e-out),transform .3s var(--e-pop),box-shadow .3s var(--e-out)}
:is(.trust-pop-cta,.qm-fin-yes):active{transform:scale(.98)}

/* ---------- kaarten & oppervlakken ---------- */
:is(.feature-card,.pcard,.paysafe-card,.safe-card,.safe-step,.trust-badge,.info-card,.form-card,.calc-box,.fin-box,.price-card,.euro-map-wrap,.fv-board,.branch-strip){box-shadow:inset 0 1px 0 rgba(255,255,255,.045),var(--sh-s)}
:is(.feature-card,.pcard){transition:transform .45s var(--e-out),border-color .45s var(--e-out),box-shadow .45s var(--e-out)}
.feature-card:hover,.pcard:hover{transform:translateY(-5px);border-color:rgba(96,165,250,.55);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 2px 6px rgba(1,4,15,.45),0 30px 60px -18px rgba(1,4,15,.7),0 0 0 1px rgba(59,130,246,.28)}
.pcard .img img{transition:transform .6s var(--e-out)}
.pcard:hover .img img{transform:scale(1.035)}
.pcard .arrow{transition:background .3s var(--e-out),border-color .3s,color .3s,transform .35s var(--e-pop)}
.pcard:hover .arrow{transform:translateX(3px)}
:is(.paysafe-card,.safe-card){transition:transform .4s var(--e-out),border-color .4s,box-shadow .4s var(--e-out)}
.paysafe-card:hover{transform:translateX(4px);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),var(--sh-m)}
.safe-card:hover{transform:translateY(-3px);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),var(--sh-m)}
.step .num{box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 6px 16px -6px rgba(59,130,246,.35)}
.step:not(:last-child)::after{border-top-color:rgba(148,163,184,.2)}
.specs td{border-bottom-color:rgba(148,163,184,.09)}
.qsel-card{transition:border-color .3s var(--e-out),background .3s,transform .3s var(--e-out),box-shadow .3s var(--e-out)}
.qsel-opt input:checked+.qsel-card{box-shadow:0 0 0 1px var(--accent),0 10px 30px -8px rgba(59,130,246,.35)}
.cust-card-inner{transition:border-color .35s var(--e-out),background .35s,transform .35s var(--e-out),box-shadow .35s var(--e-out)}
:is(.pg-nav,.rc-nav,.pg-dot,.rc-dot){transition:background .3s var(--e-out),border-color .3s,color .3s,width .3s var(--e-out),transform .3s var(--e-pop)}
:is(.pg-nav,.rc-nav):hover{transform:translateY(-50%) scale(1.06)}
.rc-nav:hover{transform:scale(1.06)}
.review-card{transition:border-color .35s var(--e-out),box-shadow .35s var(--e-out)}
.review-card:hover{box-shadow:var(--sh-s)}
.fin-opt{transition:border-color .3s var(--e-out),background .3s,box-shadow .3s var(--e-out)}
.fin-opt:hover{box-shadow:0 6px 18px -8px rgba(59,130,246,.3)}
.filter-bar :is(select,.chip){transition:border-color .3s var(--e-out),background .3s,color .3s}

/* ---------- formulieren ---------- */
:is(.field,.modal-form .field) :is(input,select,textarea){border-color:rgba(148,163,184,.22);transition:border-color .3s var(--e-out),box-shadow .3s var(--e-out),background .3s var(--e-out)}
:is(.field,.modal-form .field) :is(input,select,textarea):hover{border-color:rgba(148,163,184,.4)}
:is(.field,.modal-form .field) :is(input,select,textarea):focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(59,130,246,.17);background:rgba(2,6,23,.75)}
:is(input,textarea)::placeholder{color:#5e7290}
input:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px #0a142e inset;-webkit-text-fill-color:#f8fafc;caret-color:#f8fafc;transition:background-color 99999s}
.fin-vat input:focus{box-shadow:0 0 0 3px rgba(59,130,246,.17)}
.qm-other textarea:focus{box-shadow:0 0 0 3px rgba(240,168,0,.15)}

/* ---------- modal & popups ---------- */
dialog.modal::backdrop{background:rgba(1,4,15,.72);backdrop-filter:blur(10px)}
dialog.modal[open]{animation:fv3Modal .5s var(--e-out)}
.modal-form{box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 40px 100px -20px rgba(0,0,0,.7),0 0 0 1px rgba(59,130,246,.35)}
.trust-pop{transition:opacity .35s var(--e-out)}
.trust-pop-card{transition:transform .45s var(--e-out);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),var(--sh-l)}

/* ---------- FAQ & accordeons ---------- */
details.faq::details-content{block-size:0;overflow:clip;transition:block-size .45s var(--e-out),content-visibility .45s allow-discrete}
details.faq[open]::details-content{block-size:auto}
details.faq{transition:border-color .35s var(--e-out),box-shadow .35s var(--e-out)}
details.faq[open]{box-shadow:var(--sh-s),0 0 0 1px rgba(59,130,246,.15)}
details.faq summary::after{transition:transform .35s var(--e-pop),color .3s}
details.mods summary{transition:color .3s var(--e-out),border-color .3s,background .3s,transform .35s var(--e-pop)}
details.mods summary:hover{transform:translateY(-1px)}
.reviews-toggle summary{transition:background .3s var(--e-out)}

/* ---------- footer ---------- */
footer.site{background:linear-gradient(180deg,#020617 0%,#01040f 100%);border-top-color:rgba(148,163,184,.1)}
.foot-col a{transition:color .3s var(--e-out),transform .3s var(--e-out)}
.foot-col a:hover{transform:translateX(3px)}
.foot-branches a{transition:color .3s var(--e-out),border-color .3s,background .3s}

/* ---------- preloader, scroll-progress & reveals (JS: finalv3.js) ---------- */
.fv3-loader{display:flex;position:fixed;inset:0;z-index:9999;flex-direction:column;align-items:center;justify-content:center;gap:20px;background:#020617;transition:opacity .5s var(--e-io),visibility .5s}
.fv3-loader.out{opacity:0;visibility:hidden}
.fv3-loader .mark{font-family:'Plus Jakarta Sans',Inter,system-ui,sans-serif;font-weight:800;font-size:30px;letter-spacing:-.02em;color:#f8fafc;animation:fv3Rise .7s var(--e-out) .05s backwards}
.fv3-loader .mark span{color:var(--accent)}
.fv3-loader .bar{width:150px;height:2px;background:rgba(148,163,184,.16);overflow:hidden;animation:fv3Rise .7s var(--e-out) .15s backwards}
.fv3-loader .bar i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),#8bb8ff 70%,var(--msc-2));transform-origin:left;animation:fv3Load 1.1s var(--e-io) forwards}
.fv3-progress{display:block;position:fixed;top:0;left:0;width:100%;height:2px;z-index:701;background:linear-gradient(90deg,var(--accent) 0%,#8bb8ff 55%,var(--msc-2) 100%);box-shadow:0 0 10px rgba(59,130,246,.45);transform:scaleX(0);transform-origin:left;pointer-events:none}
.fv3-reveal{opacity:0;transform:translateY(18px)}
.fv3-reveal.fv3-in{opacity:1;transform:none;transition:opacity .8s var(--e-out) var(--fv3-d,0s),transform .8s var(--e-out) var(--fv3-d,0s)}

/* ---------- keyframes ---------- */
@keyframes fv3Rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes fv3Drift{from{opacity:0;transform:translateY(-50%) translateX(44px)}to{opacity:.95;transform:translateY(-50%) translateX(0)}}
@keyframes fv3Slide{from{transform:translateX(28px);opacity:0}to{transform:none;opacity:1}}
@keyframes fv3Modal{from{opacity:0;transform:translate(-50%,-47%) scale(.965)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes fv3Load{0%{transform:scaleX(0)}55%{transform:scaleX(.68)}100%{transform:scaleX(1)}}
@keyframes fv3Pulse{0%,100%{box-shadow:0 0 0 0 rgba(16,185,129,.45)}50%{box-shadow:0 0 0 6px rgba(16,185,129,0)}}
@keyframes fv3PulseBlue{0%,100%{box-shadow:0 0 0 0 rgba(121,177,252,.5)}50%{box-shadow:0 0 0 6px rgba(121,177,252,0)}}

/* ---------- product-detail: reviews-strip als laatste sectie ---------- */
.page-product .fv-reviews{padding:72px 0 96px}

/* ---------- fv3-ask: CTA als ghost-tegel in het related-grid (product-detail)
   Staat ná de lux-kaartlaag zodat transparant/geen schaduw hier wint. ---------- */
.fv3-ask{display:flex;align-items:center;justify-content:center;background:transparent;border:1px dashed rgba(148,163,184,.32);box-shadow:none}
.fv3-ask:hover{background:rgba(240,168,0,.04);border:1px dashed var(--msc);box-shadow:none;transform:translateY(-5px)}
.fv3-ask-inner{display:flex;flex-direction:column;align-items:center;gap:12px;padding:36px 28px;text-align:center}
.fv3-ask h3{font-size:20px;font-weight:800;letter-spacing:-.3px}
.fv3-ask h3 em{font-style:normal;background:linear-gradient(135deg,var(--msc) 0%,var(--msc-2) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.fv3-ask p{font-size:13.5px;color:var(--muted);line-height:1.6;max-width:300px}
.fv3-ask-go{margin-top:6px;display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:800;color:var(--msc-2);font-family:'JetBrains Mono',ui-monospace,monospace;text-transform:uppercase;letter-spacing:.07em;transition:color .25s var(--e-out)}
.fv3-ask:hover .fv3-ask-go{color:var(--msc)}

/* ---------- reduced motion: alles direct ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .fv3-reveal{opacity:1;transform:none}
  .fv3-loader{display:none}
}