/* ============================================================
   MargeMaster — section & component styles
   Geen losse kleurwaarden: alles via de semantische tokens in
   styles.css (wisselen mee met light/dark thema).
   ============================================================ */

/* iconen die hun kleur uit een token halen */
.cockpit-bar .ico svg{stroke:var(--accent)}
.zaak-points .ic svg{stroke:var(--on-accent)}

/* ---------- NAV ---------- */
.nav{position:sticky;top:0;z-index:50;background:var(--nav-bg);backdrop-filter:saturate(140%) blur(14px);border-bottom:1px solid transparent;transition:border-color .25s ease,background .3s ease}
.nav.scrolled{border-bottom-color:var(--border)}
.nav-inner{max-width:var(--maxw);margin:0 auto;padding:12px var(--s4);display:flex;align-items:center;gap:var(--s3)}

/* brand: beeldmerk + woordmerk */
.brand{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:800;font-size:21px;letter-spacing:-.02em;color:var(--text)}
.brand-logo{width:34px;aspect-ratio:387/243;background:var(--logo-mark) no-repeat center/contain;flex:none}
.brand-text b{color:var(--accent);font-weight:800}

.nav-links{display:flex;gap:2px;margin-left:var(--s2)}
.nav-links a{padding:8px 12px;border-radius:var(--r-pill);font-size:15px;font-weight:500;color:var(--text);transition:background .15s ease}
.nav-links a:hover{background:var(--surface-2)}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:10px}
.nav-login{font-weight:600;font-size:15px;padding:8px 6px;color:var(--text)}

/* compacte icoon-knop (thema-toggle) */
.icon-btn{width:42px;height:42px;border-radius:var(--r-pill);border:1px solid var(--border-2);display:grid;place-items:center;color:var(--text);background:var(--surface);transition:border-color .16s ease,color .16s ease,background .3s ease}
.icon-btn:hover{border-color:var(--accent);color:var(--accent)}
.icon-btn svg{width:19px;height:19px}
.theme-toggle .moon{display:none}
[data-theme="dark"] .theme-toggle .sun{display:none}
[data-theme="dark"] .theme-toggle .moon{display:block}

/* taal-dropdown */
.lang-dd{position:relative}
.lang-dd-btn{display:inline-flex;align-items:center;gap:7px;padding:9px 13px;border-radius:var(--r-pill);border:1px solid var(--border-2);background:var(--surface);font-weight:600;font-size:14px;color:var(--text);transition:border-color .16s ease,background .3s ease}
.lang-dd-btn:hover{border-color:var(--accent)}
.lang-dd-btn .globe{width:16px;height:16px}
.lang-dd-btn .chev{width:13px;height:13px;transition:transform .2s ease}
.lang-dd.open .lang-dd-btn{border-color:var(--accent)}
.lang-dd.open .chev{transform:rotate(180deg)}
.lang-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:178px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);box-shadow:var(--shadow-card);padding:6px;display:none;z-index:70}
.lang-dd.open .lang-menu{display:block}
.lang-menu button{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border-radius:var(--r-sm);font-size:14px;font-weight:500;color:var(--text);text-align:left;transition:background .14s ease}
.lang-menu button:hover{background:var(--surface-2)}
.lang-menu button .code{font-weight:700;font-size:12px;color:var(--text-faint);min-width:22px}
.lang-menu button.active{color:var(--accent)}
.lang-menu button.active .code{color:var(--accent)}

.nav-toggle{display:none;width:42px;height:42px;border-radius:12px;border:1px solid var(--border-2);align-items:center;justify-content:center;color:var(--text)}
.nav-toggle svg{width:20px;height:20px}

/* ---------- HERO ---------- */
.hero{padding-top:var(--s7);padding-bottom:var(--s6)}  /* compacter, zodat de lichtkrant net (deels) boven de vouw komt en scrollen uitnodigt — geen overflow:hidden want html heeft al overflow-x:clip, zo blijven de schaduwen van de rondjes heel */
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--s7);align-items:center}
.hero-copy,.cockpit-stage{min-width:0}  /* laat de kolommen krimpen i.p.v. de cockpit-breedte volgen */
.hero-copy .display{margin:var(--s3) 0 var(--s4)}
.hero-actions{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s5)}
.hero-social{display:flex;align-items:center;gap:12px;margin-top:var(--s5);flex-wrap:wrap}
.hero-social .avatars{display:flex;flex:none}                       /* nooit laten krimpen */
.hero-social .avatar{flex:none;width:46px;height:46px;border-radius:50%;object-fit:cover;border:3px solid var(--bg);box-shadow:var(--shadow-card);margin-left:-14px;background:var(--surface-2)}
.hero-social .avatar:first-child{margin-left:0}
.hero-social-text{flex:1;min-width:0;font-size:14px;color:var(--text-muted);font-weight:500;line-height:1.35;white-space:nowrap}
.hero-trust{display:flex;flex-wrap:nowrap;gap:var(--s2) var(--s4);margin-top:var(--s4)}
.hero-trust span{display:inline-flex;align-items:center;gap:8px;font-size:15px;color:var(--text-muted);font-weight:500;white-space:nowrap}
.hero-trust svg{width:16px;height:16px;color:var(--accent)}

/* ---------- COCKPIT visual ---------- */
.cockpit-stage{position:relative}

/* drie horeca-rondjes (vervangt de cockpit-mockup) */
.photo-cluster{position:relative;width:100%;max-width:520px;margin-inline:auto;aspect-ratio:1/1;z-index:2}
.pc{position:absolute;border-radius:50%;overflow:hidden;border:6px solid var(--bg);box-shadow:var(--shadow-pop)}
.pc img{width:100%;height:100%;object-fit:cover;display:block}
.pc-a{width:64%;height:64%;right:0;top:8%;z-index:1}
.pc-b{width:44%;height:44%;left:2%;top:0;z-index:2}
.pc-c{width:42%;height:42%;left:20%;bottom:2%;z-index:3}
.cockpit{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);box-shadow:var(--shadow-pop);padding:var(--s4);position:relative;z-index:2}
.cockpit-bar{display:flex;align-items:center;gap:10px;margin-bottom:var(--s4)}
.cockpit-bar .ico{width:30px;height:30px;border-radius:9px;background:var(--feature-bg);display:grid;place-items:center;flex:none}
.cockpit-bar .ico svg{width:16px;height:16px}
.cockpit-bar b{font-family:var(--font-display);font-weight:700;font-size:16px}
.live{margin-left:auto;display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--green);background:var(--green-soft);padding:5px 11px;border-radius:var(--r-pill)}
.live .dot{width:7px;height:7px;border-radius:50%;background:var(--green);animation:pulse 1.6s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}

.cockpit-stats{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2);margin-bottom:var(--s2)}
.stat-tile{background:var(--surface-2);border-radius:var(--r-md);padding:16px}
.stat-tile .lbl{font-size:13px;color:var(--text-muted);font-weight:500}
.stat-tile .val{font-family:var(--font-display);font-weight:800;font-size:30px;letter-spacing:-.02em;margin-top:4px;line-height:1}
.stat-tile.accent{background:var(--feature-bg);color:var(--feature-text);position:relative;overflow:hidden}
.stat-tile.accent .lbl{color:var(--feature-muted)}
.gauge{position:absolute;right:14px;top:50%;transform:translateY(-50%);width:54px;height:54px;border-radius:50%;
  background:conic-gradient(var(--accent) 0 71%, var(--gauge-track) 71% 100%);display:grid;place-items:center}
.gauge::after{content:"";position:absolute;inset:7px;border-radius:50%;background:var(--feature-bg)}

.cockpit-rows{display:flex;flex-direction:column;gap:8px;margin-top:var(--s2)}
.crow{display:flex;align-items:center;gap:var(--s2);padding:12px 14px;border:1px solid var(--border);border-radius:var(--r-md)}
.crow .nm{font-weight:600;font-size:15px}
.crow .adv{margin-left:auto;font-size:13px;color:var(--text-muted);font-variant-numeric:tabular-nums}

.float-chip{position:absolute;z-index:3;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:12px 16px;box-shadow:var(--shadow-card)}
.float-chip b{font-family:var(--font-display);font-size:22px;font-weight:800;letter-spacing:-.02em;line-height:1}
.float-chip span{font-size:12px;color:var(--text-muted);margin-top:3px}
.float-chip.tl{top:-22px;left:-26px}
.float-chip.br{bottom:-24px;right:-22px;border-color:var(--accent)}
.float-chip.br b{color:var(--accent-strong)}
/* decoratieve glow — breedte begrensd op de stage zodat hij nooit horizontale overflow geeft */
.blob{position:absolute;width:min(340px,100%);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,var(--accent) 0%,transparent 70%);opacity:.45;filter:blur(8px);right:0;top:-40px;z-index:0}

/* ---------- MARQUEE ---------- */
.marquee{background:var(--accent);border-top:1px solid rgba(4,32,29,.3);border-bottom:1px solid rgba(4,32,29,.3);overflow:hidden;padding:18px 0}
.marquee-track{display:flex;gap:0;width:max-content;animation:scroll 32s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track span{font-family:var(--font-display);font-weight:700;font-size:20px;letter-spacing:-.01em;padding:0 28px;display:inline-flex;align-items:center;gap:28px;color:var(--accent-fg)}
.marquee-track span::after{content:"✦";font-size:14px}
@keyframes scroll{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.marquee-track,.live .dot{animation:none}}

/* ---------- DARK POSITIONING ---------- */
.position-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s9);align-items:start}
.pos-tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:var(--s4)}
.pos-tags .tag{background:transparent;border-color:var(--feature-border-2);color:var(--feature-text);gap:8px}
.pos-tags .tag::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none}
.pos-sub{font-size:14px;color:var(--feature-faint);font-weight:600;letter-spacing:.04em;margin-bottom:var(--s2)}

/* ---------- VOOR WIE switcher ---------- */
.zaak-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:var(--s5) 0 var(--s5)}
.zaak-tab{display:inline-flex;align-items:center;gap:9px;padding:10px 17px;border-radius:var(--r-pill);border:1.5px solid var(--border-2);background:var(--surface);font-weight:600;font-size:15px;color:var(--text);transition:all .16s ease}
.zaak-tab .em{display:inline-flex}
.zaak-tab .em svg{width:18px;height:18px}
.zaak-tab:hover{border-color:var(--accent)}
.zaak-tab.active{background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}
.zaak-panel{display:grid;grid-template-columns:1.1fr 1fr;gap:var(--s6);align-items:center;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);padding:var(--s7);box-shadow:var(--shadow-card)}
.zaak-panel h3{font-size:30px;margin:0 0 var(--s3);letter-spacing:-.02em}
.zaak-points{display:flex;flex-direction:column;gap:14px;margin-top:var(--s4)}
.zaak-points li{display:flex;gap:12px;align-items:flex-start;list-style:none}
.zaak-points .ic{width:26px;height:26px;border-radius:8px;background:var(--accent);display:grid;place-items:center;flex:none;margin-top:1px}
.zaak-points .ic svg{width:15px;height:15px}
.zaak-visual{aspect-ratio:4/3;border-radius:var(--r-lg);background:repeating-linear-gradient(135deg,var(--surface-2) 0 14px,var(--bg-2) 14px 28px);border:1px solid var(--border);display:grid;place-items:center;position:relative;overflow:hidden}
.zaak-visual img{width:100%;height:100%;object-fit:cover;display:block}
.zaak-visual .ph{display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--text-faint)}
.zaak-visual .ph svg{width:36px;height:36px}
.zaak-visual .ph span{font-size:13px;font-weight:600}

/* ---------- PAIN cards ---------- */
.pain-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3);margin-top:var(--s7)}
.pain-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--s5);display:flex;flex-direction:column;min-height:280px}
.pain-emoji{width:56px;height:56px;border-radius:14px;background:var(--accent-soft);color:var(--accent-strong);display:grid;place-items:center;margin-bottom:var(--s4)}
.pain-emoji svg{width:26px;height:26px}
.pain-card .q{font-family:var(--font-display);font-weight:700;font-size:21px;line-height:1.2;letter-spacing:-.01em}
.pain-card .a{color:var(--text-muted);font-size:15px;margin-top:auto;padding-top:var(--s3)}

/* ---------- EXAMPLE calc (statisch, donker paneel) ---------- */
.example-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s8);align-items:center}
.example-card{background:var(--feature-bg);color:var(--feature-text);border-radius:var(--r-xl);padding:var(--s6);box-shadow:var(--shadow-pop)}
.example-card .head{display:flex;align-items:center;justify-content:space-between;padding-bottom:var(--s4);border-bottom:1px solid var(--feature-border-2);margin-bottom:var(--s2)}
.example-card .head h3{font-size:22px}
.exline{display:flex;align-items:baseline;justify-content:space-between;padding:13px 0;border-bottom:1px solid var(--feature-border)}
.exline .k{color:var(--feature-muted);font-size:15px}
.exline .v{font-family:var(--font-display);font-weight:700;font-size:19px;font-variant-numeric:tabular-nums}
.exline.hi{margin-top:8px;padding:16px 18px;background:var(--feature-inset);border:1px solid var(--accent);border-radius:var(--r-md)}
.exline.hi .k{color:var(--accent-bright);font-weight:600}
.exline.hi .v{color:var(--accent-bright);font-size:24px}
.exline.neg .v{color:var(--red-bright)}
.ex-foot{display:flex;align-items:center;gap:10px;margin-top:var(--s4);font-size:14px;color:var(--feature-muted)}

/* ---------- LIVE calculator ---------- */
.calc-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5);align-items:stretch}
.calc-inputs{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);padding:var(--s6);box-shadow:var(--shadow-card)}
.field{margin-bottom:var(--s4)}
.field:last-child{margin-bottom:0}
.field label{display:block;font-size:14px;font-weight:600;color:var(--text-muted);margin-bottom:8px}
.field .control{display:flex;align-items:center;border:1.5px solid var(--border-2);border-radius:var(--r-md);background:var(--surface-2);transition:border-color .15s ease,background .15s ease}
.field .control:focus-within{border-color:var(--accent);background:var(--surface)}
.field .pre{padding:0 4px 0 16px;color:var(--text-muted);font-weight:600}
.field input{flex:1;border:none;background:none;outline:none;padding:14px 16px;font-size:18px;font-weight:600;color:var(--text);width:100%;font-variant-numeric:tabular-nums}
.field input.with-pre{padding-left:6px}
.field .suf{padding-right:16px;color:var(--text-muted);font-weight:600}
.range-row{display:flex;align-items:center;gap:16px}
.range-row input[type=range]{flex:1;-webkit-appearance:none;appearance:none;height:6px;border-radius:99px;background:var(--surface-2);outline:none}
.range-row input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:var(--accent);cursor:pointer;border:3px solid var(--surface);box-shadow:0 1px 4px rgba(0,0,0,.2)}
.range-row input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--accent);cursor:pointer;border:3px solid var(--surface)}
.range-val{font-family:var(--font-display);font-weight:700;font-size:18px;min-width:96px;text-align:right;font-variant-numeric:tabular-nums}
.calc-note{font-size:13px;color:var(--text-muted);margin-top:var(--s4);line-height:1.5}

.calc-out{background:var(--feature-bg);color:var(--feature-text);border-radius:var(--r-xl);padding:var(--s6);display:flex;flex-direction:column;box-shadow:var(--shadow-pop)}
.calc-out .outname{font-size:14px;color:var(--feature-muted);font-weight:600;letter-spacing:.03em}
.calc-out .advlabel{color:var(--feature-muted);font-size:15px;margin-top:var(--s4)}
.calc-out .advice{font-family:var(--font-display);font-weight:800;font-size:clamp(48px,6vw,68px);letter-spacing:-.03em;line-height:1;margin:6px 0 10px;font-variant-numeric:tabular-nums;color:var(--accent-bright)}
.calc-out .verdict{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;padding:6px 13px;border-radius:var(--r-pill);align-self:flex-start}
.calc-out .verdict.low{background:var(--verdict-low-bg);color:var(--amber-bright)}
.calc-out .verdict.ok{background:var(--verdict-ok-bg);color:var(--green-bright)}
.calc-metrics{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:var(--s5)}
.metric{background:var(--feature-inset);border-radius:var(--r-md);padding:14px 16px}
.metric .mk{font-size:13px;color:var(--feature-muted)}
.metric .mv{font-family:var(--font-display);font-weight:800;font-size:24px;margin-top:3px;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.year-box{margin-top:10px;background:var(--feature-inset);border:1px solid var(--accent);border-radius:var(--r-md);padding:18px 20px;display:flex;align-items:center;justify-content:space-between;gap:var(--s3)}
.year-box .yk{font-size:14px;color:var(--accent-bright);font-weight:600;max-width:18ch}
.year-box .yv{font-family:var(--font-display);font-weight:800;font-size:clamp(28px,3.4vw,40px);color:var(--accent-bright);font-variant-numeric:tabular-nums;letter-spacing:-.02em;line-height:1}
.calc-cta{margin-top:var(--s4);justify-content:space-between;width:100%}

/* microcopy onder CTA-knoppen */
.cta-note{font-size:13px;font-weight:500;color:var(--text-muted);margin-top:12px}
.calc-out .cta-note{color:var(--feature-muted);text-align:center}
.final .cta-note{position:relative;z-index:2;color:var(--feature-muted);margin-top:var(--s3)}
.contact-card.alt .cta-note{color:rgba(4,32,29,.72)}

/* ---------- FEATURES ---------- */
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3);margin-top:var(--s7)}
.feat{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--s5);transition:transform .18s ease,box-shadow .18s ease}
.feat:hover{transform:translateY(-3px);box-shadow:var(--shadow-card)}
.feat .fi{width:48px;height:48px;border-radius:13px;background:var(--accent-soft);color:var(--accent-strong);display:grid;place-items:center;margin-bottom:var(--s3)}
.feat .fi svg{width:24px;height:24px}
.feat h3{font-size:19px;margin-bottom:10px;letter-spacing:-.01em}
.feat p{color:var(--text-muted);font-size:15px}
.value-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3);margin-top:var(--s3)}
.vcell{background:var(--feature-bg);color:var(--feature-text);border-radius:var(--r-lg);padding:var(--s4)}
.vcell b{font-family:var(--font-display);font-size:18px;display:block;margin-bottom:4px}
.vcell.lime{background:var(--accent);color:var(--accent-fg)}
.vcell span{font-size:15px;color:var(--feature-muted)}
.vcell.lime span{color:rgba(255,255,255,.78)}

/* ---------- STEPS ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3);margin-top:var(--s7)}
.step{position:relative;padding:var(--s5);border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface)}
.step .num{font-family:var(--font-display);font-weight:800;font-size:48px;color:var(--accent-strong);line-height:1;letter-spacing:-.03em}
.step h3{font-size:19px;margin:var(--s2) 0 10px}
.step p{color:var(--text-muted);font-size:15px}

/* ---------- PRICING ---------- */
.price-head{display:flex;flex-direction:column;align-items:center;gap:var(--s4)}
.bill-toggle{display:inline-flex;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-pill);padding:5px}
.bill-toggle button{padding:9px 20px;border-radius:var(--r-pill);font-weight:600;font-size:15px;color:var(--text-muted);transition:all .16s ease}
.bill-toggle button.active{background:var(--accent);color:var(--accent-fg)}
.bill-toggle .save{font-size:12px;color:var(--accent-ink);font-weight:700;margin-left:6px}
.bill-toggle button.active .save{color:var(--accent-fg)}
.price-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s2);margin-top:var(--s7);align-items:stretch}
.plan{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--s4);display:flex;flex-direction:column;min-height:480px}
/* reserveer de badge-hoogte op álle kaarten zodat titels + prijzen op één lijn staan */
.plan:not(.pop)::before{content:"";display:block;height:26px;margin-bottom:var(--s2)}
.plan.pop{background:var(--feature-bg);color:var(--feature-text);border-color:var(--feature-bg);box-shadow:var(--shadow-pop)}
.plan .pop-badge{align-self:flex-start;display:inline-flex;align-items:center;height:26px;background:var(--accent);color:var(--on-accent);font-size:12px;font-weight:700;padding:0 11px;border-radius:var(--r-pill);margin-bottom:var(--s2);letter-spacing:.02em}
.plan.soon::before{display:none}
.plan .soon-badge{align-self:flex-start;display:inline-flex;align-items:center;height:26px;background:var(--amber-soft);color:var(--amber);font-size:12px;font-weight:700;padding:0 11px;border-radius:var(--r-pill);margin-bottom:var(--s2);letter-spacing:.02em}
.plan h3{font-size:21px}
.plan .pdesc{font-size:14px;color:var(--text-muted);margin:8px 0 var(--s3);min-height:40px}
.plan.pop .pdesc{color:var(--feature-muted)}
.plan .pprice{font-family:var(--font-display);font-weight:800;font-size:38px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.plan .pprice small{font-size:15px;font-weight:600;color:var(--text-muted)}
.plan.pop .pprice small{color:var(--feature-muted)}
.plan ul{list-style:none;margin:var(--s4) 0;display:flex;flex-direction:column;gap:11px}
.plan li{display:flex;gap:10px;align-items:flex-start;font-size:15px}
.plan li svg{width:17px;height:17px;flex:none;margin-top:3px;color:var(--accent)}
.plan.pop li svg{color:var(--accent-bright)}
.plan li em{color:var(--text-faint);font-style:normal}
.plan.pop li em{color:var(--feature-faint)}
.plan .btn{margin-top:auto;justify-content:space-between;width:100%}
.price-foot{text-align:center;color:var(--text-muted);font-size:15px;margin-top:var(--s5)}

/* ---------- ROADMAP ---------- */
.road-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s9);align-items:center}
.road-list{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.road-item{display:flex;align-items:center;gap:12px;background:var(--feature-inset);border:1px solid var(--feature-border);border-radius:var(--r-md);padding:16px}
.road-item .em{display:inline-flex;color:var(--accent-bright)}
.road-item .em svg{width:20px;height:20px}
.road-item b{font-family:var(--font-display);font-size:16px;font-weight:600;display:block}
.road-item span{font-size:12px;color:var(--feature-faint);text-transform:uppercase;letter-spacing:.06em;font-weight:600}

/* ---------- CONTACT ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
.contact-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);padding:var(--s6)}
.contact-card.alt{background:var(--accent);border-color:var(--accent);display:flex;flex-direction:column;justify-content:center}
.contact-card.alt h3{color:var(--on-accent)}
.contact-card.alt p{color:rgba(4,32,29,.8);font-weight:500;margin-bottom:32px}
.contact-card.alt .btn{background:var(--feature-bg);color:#fff;width:100%;justify-content:space-between}
.contact-card.alt .btn:hover{background:#0a1120;box-shadow:0 10px 24px rgba(4,18,16,.3)}
.contact-card h3{font-size:26px;letter-spacing:-.02em;margin-bottom:var(--s2)}
.contact-card p{color:var(--text-muted)}
.form-row{display:flex;flex-direction:column;gap:8px;margin-bottom:var(--s3)}
.form-row label{font-size:14px;font-weight:600;color:var(--text-muted)}
.form-row input,.form-row textarea{border:1.5px solid var(--border-2);border-radius:var(--r-md);background:var(--surface-2);color:var(--text);padding:13px 15px;font-size:16px;outline:none;transition:border-color .15s ease,background .15s ease}
.form-row input:focus,.form-row textarea:focus{border-color:var(--accent);background:var(--surface)}
.field input:focus-visible,.form-row input:focus-visible,.form-row textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.form-row textarea{resize:vertical;min-height:96px}
.contact-mail{font-size:14px;color:var(--text-muted);margin-top:var(--s3)}
.contact-mail a{font-weight:600;color:var(--text);text-decoration:underline}
.form-success{display:none;background:var(--green-soft);color:var(--green);border-radius:var(--r-md);padding:16px 18px;font-weight:600;font-size:15px;margin-top:var(--s2)}
.form-error{display:none;background:var(--red-soft);color:var(--red);border-radius:var(--r-md);padding:16px 18px;font-weight:600;font-size:15px;margin-top:var(--s2)}

/* ---------- FAQ ---------- */
.faq-list{max-width:820px;margin:var(--s7) auto 0;display:flex;flex-direction:column;gap:10px}
.faq-item{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden}
.faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--s3);padding:20px 24px;text-align:left;font-family:var(--font-display);font-weight:600;font-size:19px;letter-spacing:-.01em;color:var(--text)}
.faq-q .pm{width:26px;height:26px;flex:none;border-radius:50%;border:1.5px solid var(--border-2);display:grid;place-items:center;transition:all .2s ease}
.faq-q .pm svg{width:13px;height:13px;transition:transform .25s ease}
.faq-item.open .pm{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.faq-item.open .pm svg{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease}
.faq-a p{padding:0 24px 22px;color:var(--text-muted);font-size:15px;max-width:66ch}

/* ---------- FINAL CTA ---------- */
.final{background:var(--feature-bg);color:var(--feature-text);border-radius:var(--r-xl);padding:var(--s10) var(--s8);text-align:center;position:relative;overflow:hidden}
/* heel vage sfeerfoto (burger) achter de tekst — onder ghost-letters en content */
.final::before{content:"";position:absolute;inset:0;background:url("assets/hero-burger.webp") center/cover no-repeat;opacity:.12;z-index:0;pointer-events:none}
.final .display{position:relative;z-index:2;color:var(--feature-text)}
.final .lede{margin:var(--s4) auto var(--s5);color:var(--feature-muted);position:relative;z-index:2}
.final-actions{display:flex;gap:var(--s2);justify-content:center;position:relative;z-index:2}
.final .ghost-letters{position:absolute;left:50%;bottom:-3%;transform:translateX(-50%);font-family:var(--font-display);font-weight:800;font-size:clamp(80px,17vw,220px);color:var(--ghost);letter-spacing:-.03em;white-space:nowrap;z-index:1;pointer-events:none}

/* ---------- FOOTER ---------- */
.footer{padding:var(--s9) 0 var(--s6)}
.foot-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:var(--s5);padding-bottom:var(--s7);border-bottom:1px solid var(--border)}
.foot-logo{width:188px;aspect-ratio:1088/696;background:var(--logo) no-repeat left center/contain;margin-bottom:var(--s3);display:block}
.foot-brand p{color:var(--text-muted);font-size:15px;max-width:34ch}
.foot-col h4{font-size:13px;text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted);margin-bottom:var(--s3);font-weight:700}
.foot-col a{display:block;padding:6px 0;font-size:15px;color:var(--text)}
.foot-col a:hover{color:var(--accent)}
.foot-bottom{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);padding-top:var(--s4);flex-wrap:wrap}
.foot-bottom p{font-size:14px;color:var(--text-muted)}
.foot-bottom .socials{display:flex;gap:10px}
.foot-bottom .socials a{width:38px;height:38px;border-radius:50%;border:1px solid var(--border);display:grid;place-items:center;color:var(--text)}
.foot-bottom .socials a:hover{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.foot-bottom .socials svg{width:17px;height:17px}

/* ---------- mobile menu ---------- */
.mobile-menu{display:none;position:fixed;inset:0;z-index:60;background:var(--bg);padding:var(--s4);flex-direction:column}
.mobile-menu.open{display:flex}
.mobile-menu .mm-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--s6)}
.mobile-menu .mm-brand{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:800;font-size:21px}
.mobile-menu .mm-brand .brand-logo{width:34px}
.mobile-menu a.mm-link{font-family:var(--font-display);font-size:28px;font-weight:700;padding:14px 0;border-bottom:1px solid var(--border);color:var(--text)}
.mobile-menu .mm-actions{margin-top:auto;display:flex;flex-direction:column;gap:12px}
.mobile-menu .mm-actions .btn{justify-content:space-between}

/* ============================================================
   RESPONSIVE
   ============================================================ */
/* ---- nav-omslag naar hamburger (≤1080) — de volledige nav past pas daarboven ---- */
@media(max-width:1080px){
  .nav-links,.lang-dd,.nav-login{display:none}
  .nav-toggle{display:flex}
}
/* ---- tablet (≤1024) ---- */
@media(max-width:1024px){
  .hero-grid{grid-template-columns:1fr;gap:var(--s7)}
  .position-grid,.road-grid{gap:var(--s6)}
  .price-grid{grid-template-columns:1fr 1fr}
  .plan{min-height:auto}
  /* drie-koloms grids → twee koloms op tablet (i.p.v. meteen 1 kolom) */
  .pain-grid,.feat-grid,.steps,.value-strip{grid-template-columns:1fr 1fr}
  .pain-card{min-height:auto}
}
/* ---- grote panelen 1 kolom (≤860) ---- */
@media(max-width:860px){
  .position-grid,.example-grid,.calc-grid,.zaak-panel,.road-grid,.contact-grid{grid-template-columns:1fr}
  .calc-grid{gap:var(--s3)}
  /* kaart-padding terugbrengen — overal te ruim op kleinere schermen */
  .zaak-panel{padding:var(--s5)}
  .calc-inputs,.calc-out,.example-card,.contact-card{padding:var(--s4)}
  .pain-card,.feat,.step{padding:var(--s4)}
  .foot-top{grid-template-columns:1fr 1fr}
  .foot-brand{grid-column:1/-1}
  .final{padding:var(--s8) var(--s4)}
}
/* ---- telefoon (≤640) ---- */
@media(max-width:640px){
  .section{padding-block:var(--s7)}
  .wrap{padding-inline:var(--s3)}
  .hero-copy .display br{display:none}        /* laat de kop natuurlijk wrappen i.p.v. afkappen */
  .hero-social-text{white-space:normal}        /* op telefoon weer laten afbreken */
  .hero-trust{flex-wrap:wrap}                   /* op telefoon weer laten afbreken */
  .pain-grid,.feat-grid,.steps,.value-strip{grid-template-columns:1fr}
  .price-grid{grid-template-columns:1fr}
  .calc-metrics{grid-template-columns:1fr 1fr}
  .hero-actions .btn{flex:1;justify-content:center}
  .year-box{flex-direction:column;align-items:flex-start;gap:8px}
  .nav-right>.btn{display:none}              /* primaire CTA pas op telefoon verbergen */

  /* compactere kaarten + koppen */
  .calc-inputs,.calc-out,.example-card,.contact-card,.zaak-panel{padding:var(--s3)}
  h2.title{font-size:26px}
  .zaak-panel h3{font-size:22px}
  .pain-card .q{font-size:18px}
  .faq-q{font-size:17px;padding:18px 18px}
  .faq-a p{padding:0 18px 18px}

  /* calculator compacter zodat het resultaat sneller in beeld komt */
  .field{margin-bottom:var(--s3)}
  .field input{padding:12px 14px;font-size:16px}
  .field .pre{padding-left:14px}
  .field .suf{padding-right:14px}
  .range-row{gap:12px}
  .range-val{font-size:16px;min-width:68px}
  .calc-note{font-size:12px;margin-top:var(--s3)}
  .calc-out .advice{font-size:42px}
  .calc-out .advlabel{margin-top:var(--s3)}
  .metric .mv{font-size:21px}
  .example-card .head h3{font-size:20px}
  .exline .v{font-size:17px}

  .contact-card h3{font-size:22px}
  .foot-top{grid-template-columns:1fr 1fr}
}