/* ═══ SmartLayout verkoopsite — gedeelde stijl ═══ */
/* Huisstijl 2026: wit/inkt-navy met merkblauw, Exo 2 + Source Sans 3, vlakke tegels
   met 8px-hoeken. De historische var-namen (--amber = merk-blauw, --dim, --line,
   --card/--panel, --bg2) blijven bestaan als alias, zodat alle bestaande selectors,
   de eigen stijl van hoe-het-werkt.html en site.js mee-thematiseren. */
:root{
  --radius:8px; --radius-xs:4px; /* 4px = kleine labels (handboek §13), verder overal 8px */
  --font-head:'Exo 2',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --font-body:'Source Sans 3',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,Consolas,monospace;
  /* Merkkleuren uit het beeldmerk — in beide thema's gelijk. */
  --brand-blue:#2B74F0; --brand-amber:#F5A40C; --brand-green:#1FAF5A;
  color-scheme:light dark;
}
/* ── Licht thema (default) ── */
:root,:root[data-theme="light"]{
  --bg:#ffffff; --bg2:#eceef1; --panel:#ffffff; --card:#f7f8f9; --line:#e6e8ec; --field-line:#cbd2dc;
  --text:#0f1b33; --on-ink:#ffffff; --dim:#5f6b7d; --faint:#6b7789;
  --amber:#2b74f0; --amber2:#1f5fd0; --amber-dk:#1f5fd0; --on-amber:#ffffff;
  --footer:#0b1426; --feature:#0b1426;
  --ok:#12743b; --blue:#2b74f0; --warn:#8a5a00; --red:#c62828;
  --brand-tint:color-mix(in srgb,var(--amber) 10%,transparent);
  --focus-ring:color-mix(in srgb,var(--amber) 32%,transparent);
  --shadow-card:none;
  --shadow-lg:0 24px 56px rgba(15,27,51,.12);
  color-scheme:light;
}
/* ── Donker thema ── */
:root[data-theme="dark"]{
  --bg:#0b1426; --bg2:#172742; --panel:#111b30; --card:#111b30; --line:#22304d; --field-line:#33415c;
  --text:#f2f5fa; --on-ink:#0b1426; --dim:#a3afc2; --faint:#8492a8;
  --amber:#4c8dff; --amber2:#7dabff; --amber-dk:#7dabff; --on-amber:#0b1426;
  --footer:#060b16; --feature:#172742;
  --ok:#3ecf7c; --blue:#4c8dff; --warn:#f5b53d; --red:#ff6b64;
  --brand-tint:color-mix(in srgb,var(--amber) 16%,transparent);
  --focus-ring:color-mix(in srgb,var(--amber) 40%,transparent);
  --shadow-card:none;
  --shadow-lg:0 30px 80px rgba(0,0,0,.5);
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0;padding:0}
/* Scrollbalk gelijk aan de app (public/css/style.css): smal en in themakleur, met vaste
   gutter. Verschilt de balkbreedte tussen site en inlogpagina's, dan verspringen logo en
   menu een paar pixels bij het wisselen — houd deze waarden dus gelijk. */
html{scroll-behavior:smooth;scrollbar-gutter:stable}
*{scrollbar-width:thin;scrollbar-color:var(--field-line) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--field-line);border-radius:8px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:var(--faint);border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-corner{background:transparent}
body{background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;transition:background-color .3s ease}
:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
a{color:var(--amber);text-decoration:none}
.wrap{width:100%;max-width:1280px;margin:0 auto;padding:0 40px}
section{padding:96px 0}
h1,h2,h3,h4,h5,h6{font-family:var(--font-head);line-height:1.15;letter-spacing:-0.01em;font-weight:500}
h2{font-size:clamp(1.7rem,3.4vw,2.5rem);margin-bottom:10px}
h3{font-size:1.15rem;font-weight:600}
.lead{color:var(--dim);max-width:660px}
.lead:empty{display:none}
/* Label-chip met merkblauwe stip boven een kop. */
.kicker{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border:1px solid var(--line);border-radius:var(--radius);font-size:.8rem;font-weight:600;color:var(--text);margin-bottom:20px;line-height:1.3}
.kicker::before{content:'';flex:none;width:6px;height:6px;border-radius:50%;background:var(--brand-blue)}
.kicker:empty{display:none}
.mark{color:var(--amber)}
@media(max-width:760px){
  .wrap{padding:0 20px}
  section{padding:64px 0}
}

/* Sectiekop: kop links, toelichting rechts (gestapeld op smalle schermen). */
.sec-head{display:flex;flex-direction:column;align-items:flex-start}
.sec-head-row{width:100%;display:flex;justify-content:space-between;align-items:flex-end;gap:48px}
.sec-head-row h2{max-width:560px;margin-bottom:0}
.sec-head-row .lead{max-width:420px;text-align:right;font-size:1rem}
@media(max-width:860px){
  .sec-head-row{flex-direction:column;align-items:flex-start;gap:14px}
  .sec-head-row .lead{text-align:left;max-width:660px}
}

/* ── In beeld schuiven (site.js zet .js-anim + .reveal; zonder JS blijft alles zichtbaar) ── */
.js-anim .reveal{opacity:0;transform:translateY(36px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.js-anim .reveal.in{opacity:1;transform:none}

/* ── Themawissel: nieuwe thema groeit als cirkel vanuit de knop ── */
@keyframes sl-theme-reveal{from{clip-path:circle(0 at var(--tx,50%) var(--ty,50%))}to{clip-path:circle(150% at var(--tx,50%) var(--ty,50%))}}
html.theme-switch::view-transition-old(root),html.theme-switch::view-transition-new(root){animation:none;mix-blend-mode:normal}
html.theme-switch::view-transition-old(root){z-index:1}
html.theme-switch::view-transition-new(root){z-index:2;animation:sl-theme-reveal .6s ease-in-out forwards}
.theme-btn{position:relative;flex:none;width:44px;height:44px;border-radius:var(--radius);border:0;background:transparent;color:var(--text);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.theme-btn:hover{opacity:.75}
.theme-btn svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .5s cubic-bezier(.2,.7,.2,1),opacity .3s ease}
.theme-btn .ic-sun{position:absolute;opacity:0;transform:rotate(-90deg) scale(.4)}
[data-theme="dark"] .theme-btn .ic-sun{opacity:1;transform:none}
[data-theme="dark"] .theme-btn .ic-moon{opacity:0;transform:rotate(90deg) scale(.4)}

/* ── Nav / tabbladen ── */
nav.top{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:16px;height:84px}
.logo{display:flex;align-items:center;gap:9px;color:var(--text);flex:none}
.logo-mark{flex:none;display:block;width:19px;height:23.8px}
.logo-word{font-family:var(--font-head);font-size:24px;font-weight:600;line-height:1;letter-spacing:0;color:var(--text)}
.logo-word span{color:var(--brand-blue)}
/* Sitekop: het volledige logo met de regel Plan. Map. Execute., dezelfde bestanden als de
   app-bovenbalk; per thema één zichtbaar. De voettekst houdt beeldmerk + woordmerk als tekst. */
.logo-vol{display:block;height:40px;width:auto}
.logo-vol.mk-d,[data-theme="dark"] .logo-vol.mk-l{display:none}
[data-theme="dark"] .logo-vol.mk-d{display:block}
.tabs{display:flex;gap:32px;margin:0 auto}
.tabs a{color:var(--dim);font-size:.875rem;font-weight:400;padding:6px 0}
.tabs a:hover,.tabs a.active{color:var(--text)}
/* Het actieve item is vet en dus breder; zonder reservering schuift het hele (gecentreerde)
   menu per pagina een fractie op. data-t = de linktekst; de onzichtbare vette kopie houdt
   de breedte altijd vrij. */
.tabs a::after{content:attr(data-t);display:block;height:0;overflow:hidden;visibility:hidden;font-weight:600}
.tabs a.active{font-weight:600}
.nav-actions{display:flex;align-items:center;gap:10px;flex:none}
.nav-link{color:var(--text);font-size:.875rem;font-weight:600;padding:10px 8px}
.nav-link:hover{opacity:.75}
/* Themaknop en proefknop in de nav: zonder rand of vlak, gelijk aan de Inloggen-link. */
.nav-actions .btn.nav-cta,.nav-actions .btn.nav-cta:hover{border:0;background:transparent;min-height:0;padding:10px 8px;gap:6px}
.nav-actions .btn.nav-cta:hover{opacity:.75}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border-radius:var(--radius);font-weight:600;font-size:.94rem;cursor:pointer;border:1px solid var(--line);background:transparent;color:var(--text);transition:border-color .12s,background .12s,opacity .12s,transform .06s;font-family:inherit;white-space:nowrap}
.btn:hover{border-color:var(--field-line);background:var(--card)}
.btn:active{transform:scale(.985)}
.btn svg{flex:none;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.btn.primary{background:var(--text);border-color:var(--text);color:var(--on-ink)}
.btn.primary:hover{background:var(--text);border-color:var(--text);opacity:.86}
/* Pijlblokje rechts in een knop (de .arr-span komt uit de HTML/renderer). */
.btn:has(.arr){padding:6px 6px 6px 18px;gap:12px}
.btn .arr{flex:none;width:30px;height:30px;border-radius:var(--radius);display:flex;align-items:center;justify-content:center;background:var(--text);color:var(--on-ink)}
.btn.primary .arr{background:var(--on-ink);color:var(--text)}
.btn.sm{min-height:40px;padding:0 16px;font-size:.875rem}
.mobile-menu-btn{display:none;flex:none;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);width:44px;height:44px;color:var(--text);font-size:1.2rem;cursor:pointer}
@media(max-width:900px){
  .nav-in{height:68px}
  .tabs{display:none;position:absolute;top:68px;left:0;right:0;margin:0;background:var(--bg);border-top:1px solid var(--line);border-bottom:1px solid var(--line);flex-direction:column;padding:10px 20px;gap:0}
  .tabs.open{display:flex}
  .tabs a{padding:13px 4px;font-size:1rem;border-bottom:1px solid var(--line)}
  .tabs a:last-child{border-bottom:0}
  .mobile-menu-btn{display:block}
}
/* Op telefoons vervalt de proefknop (te krap naast thema, Inloggen en menu) en krimpt
   de rest een maat, zodat logo + knoppen ook op 360px naast elkaar passen. */
@media(max-width:560px){
  .nav-cta{display:none}
  .nav-in{gap:8px}
  .nav-actions{gap:6px}
  .logo{gap:7px}
  .logo-mark{width:16px;height:20px}
  .logo-word{font-size:20px}
  .logo-vol{height:34px}
  .theme-btn,.mobile-menu-btn{width:40px;height:40px}
  .nav-link{padding:10px 4px}
}

/* ── Hero / page-head ── */
.hero{padding:104px 0 88px;position:relative;overflow:hidden}
.hero h1{font-size:clamp(2.1rem,5.4vw,4rem);line-height:1.05;font-weight:600;max-width:940px;margin-bottom:20px;overflow-wrap:break-word;hyphens:auto}

.hero .kicker{margin-bottom:22px}
.hero .lead{font-size:1.06rem;max-width:620px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
.hero-note{font-size:.84rem;color:var(--faint);margin-top:6px;width:100%}
.page-head{padding:88px 0 24px;position:relative}
.page-head h1{font-size:clamp(2rem,4.6vw,3.5rem);line-height:1.08;font-weight:600;margin-bottom:18px;max-width:900px;overflow-wrap:break-word;hyphens:auto}
.page-head .lead{font-size:1.06rem;max-width:620px}
@media(max-width:760px){
  .hero{padding:64px 0 56px}
  .page-head{padding:56px 0 12px}
}

/* Hero tekst-slider: rouleert tussen onderwerpen; per slide faden de regels in. De
   slides liggen in één rastercel op elkaar, zodat de hoogte niet verspringt. */
.hero-rotator{display:grid}
.hero-text{grid-area:1/1;min-width:0;visibility:hidden;pointer-events:none}
.hero-text.is-active{visibility:visible;pointer-events:auto}
.hero-text.is-active > *{opacity:0;animation:heroLineIn .7s ease forwards}
.hero-text.is-active > *:nth-child(1){animation-delay:.1s}
.hero-text.is-active > *:nth-child(2){animation-delay:.3s}
.hero-text.is-active > *:nth-child(3){animation-delay:.5s}
.hero-dots{display:flex;gap:9px;margin-top:30px}
.hero-dots button{width:26px;height:6px;padding:0;border:0;border-radius:3px;background:var(--line);cursor:pointer;transition:background .2s}
.hero-dots button:hover{background:var(--field-line)}
.hero-dots button.active{background:var(--text)}
@keyframes heroLineIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .hero-text.is-active > *{animation:none;opacity:1}
}

/* ── Productbeeld op home ── */
.showcase{padding:0 0 32px}
/* Productbeeld op home: laptop en telefoon als echt 3D-model in CSS (handboek bord 21,
   herzien 21-10: recht van voren, iets van boven). Alle maten volgen uit één breedte --w,
   dus het geheel schaalt mee tot op de telefoon. Het model is een 0×0-punt midden op het dek:
   de romp is een stapel platen (aluminium met afgeronde hoeken, onder donker, boven licht),
   het dek draagt toetsenbord en trackpad, de klep scharniert achter op het dek en leunt 12°
   naar achteren, de telefoon staat links vóór de laptop op tafel. De schaduw onder de
   toestellen is de enige diepte op de site. */
.toestel-vlak{--w:min(600px,58vw);--schaduw:15,27,51;border-radius:var(--radius);background:var(--bg2);overflow:hidden;display:flex;align-items:center;justify-content:center;min-height:calc(var(--w)*1.03);perspective:calc(var(--w)*3);perspective-origin:50% 38%}
[data-theme="dark"] .toestel-vlak{--schaduw:0,0,0}
.toestel{--d:calc(var(--w)*.62);--t:calc(var(--w)*.03);--lh:calc(var(--w)*.6145);--wp:calc(var(--w)*.19);--hp:calc(var(--w)*.41);--tp:calc(var(--w)*.022);
  position:relative;width:0;height:0;transform-style:preserve-3d;transform:translate(calc(var(--w)*.12),calc(var(--w)*.225)) rotateX(-9deg)}
.toestel > *,.toestel .romp > *,.toestel .klep > *,.toestel .telefoon > *{position:absolute;left:0;top:0;transform-style:preserve-3d}
/* Schaduw op tafel: een donkere contactschaduw direct onder de romp en een brede zachte eromheen */
.toestel .vloer{width:var(--w);height:var(--d);margin:calc(var(--d)/-2) 0 0 calc(var(--w)/-2);border-radius:calc(var(--w)*.03);transform:translateY(calc(var(--t) + 1px)) rotateX(90deg);background:rgba(var(--schaduw),.28);
  box-shadow:0 0 calc(var(--w)*.03) calc(var(--w)*.008) rgba(var(--schaduw),.32),0 calc(var(--w)*.06) calc(var(--w)*.16) calc(var(--w)*.04) rgba(var(--schaduw),.18)}
.toestel .romp i{width:var(--w);height:var(--d);margin:calc(var(--d)/-2) 0 0 calc(var(--w)/-2);border-radius:calc(var(--w)*.026);background:#b9c1cc;background:color-mix(in srgb,#e2e6eb calc(var(--i)*8.5%),#8d97a6);transform:translateY(calc(var(--t)*(1 - var(--i)/12))) rotateX(90deg)}
.toestel .dek{width:var(--w);height:var(--d);margin:calc(var(--d)/-2) 0 0 calc(var(--w)/-2);border-radius:calc(var(--w)*.026);transform:rotateX(90deg);background:linear-gradient(#c9cfd8,#dfe3e8 30%,#e9ecf0)}
.toestel .dek::before{content:'';position:absolute;top:0;left:5%;right:5%;height:calc(var(--w)*.018);background:linear-gradient(#0b1220,#262f40);border-radius:0 0 3px 3px}
.toestel .dek::after{content:'';position:absolute;bottom:0;left:44%;right:44%;height:calc(var(--w)*.011);background:radial-gradient(50% 100% at 50% 100%,rgba(15,27,51,.28),rgba(15,27,51,0))}
.toestel .toetsen{position:absolute;left:10%;right:10%;top:calc(var(--w)*.05);aspect-ratio:290/112;background:url(../images/laptop-toetsenbord.svg) 0 0/100% 100% no-repeat}
.toestel .trackpad{position:absolute;left:31%;right:31%;top:calc(var(--w)*.385);height:calc(var(--w)*.19);border-radius:calc(var(--w)*.012);background:linear-gradient(#d9dde3,#e3e6eb);box-shadow:inset 0 0 0 1px rgba(15,27,51,.10)}
.toestel .klep{transform:translateZ(calc(var(--d)/-2 + var(--w)*.016)) rotateX(12deg)}
.toestel .klep i,.toestel .klep .scherm{width:var(--w);height:var(--lh);margin:calc(var(--lh)*-1) 0 0 calc(var(--w)/-2);border-radius:calc(var(--w)*.03) calc(var(--w)*.03) calc(var(--w)*.012) calc(var(--w)*.012)}
.toestel .klep i{background:#bcc3cd;background:color-mix(in srgb,#d3d8df calc(var(--i)*20%),#a3acba);transform:translateZ(calc(var(--w)*-.012*(1 - var(--i)/5)))}
.toestel .klep .scherm{background:#0d1526;padding:calc(var(--w)*.032) calc(var(--w)*.022) calc(var(--w)*.045);box-shadow:inset 0 0 0 calc(var(--w)*.0035) #b9c1cc}
.toestel .klep .scherm::before{content:'';position:absolute;top:calc(var(--w)*.013);left:50%;width:calc(var(--w)*.007);aspect-ratio:1;margin-left:calc(var(--w)*-.0035);border-radius:50%;background:#2c3850}
.toestel .klep .scherm::after{content:'';position:absolute;left:calc(var(--w)*.0035);right:calc(var(--w)*.0035);bottom:0;height:calc(var(--w)*.013);background:#060a14;border-radius:0 0 calc(var(--w)*.01) calc(var(--w)*.01)}
.toestel .wissel{overflow:hidden}
.toestel .wissel img{display:block;width:100%;height:auto}
.toestel .wissel::after{content:'';position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(112deg,rgba(255,255,255,.13),rgba(255,255,255,.05) 34%,rgba(255,255,255,0) 34.2%)}
.toestel .klep .wissel{border-radius:2px}
.toestel .telefoon{transform:translate3d(calc(var(--w)*-.6),var(--t),calc(var(--w)*.42)) rotateY(14deg)}
.toestel .telefoon i,.toestel .telefoon .voorkant{width:var(--wp);height:var(--hp);margin:calc(var(--hp)*-1) 0 0 calc(var(--wp)/-2);border-radius:calc(var(--w)*.032)}
.toestel .telefoon i{background:#2f394c;background:color-mix(in srgb,#59647a calc(var(--i)*12%),#1e2738);transform:translateZ(calc(var(--tp)*(var(--i)/6 - .5)))}
.toestel .telefoon .voorkant{background:#0b1220;padding:calc(var(--w)*.0055);transform:translateZ(calc(var(--tp)/2 + .5px))}
.toestel .telefoon .wissel{border-radius:calc(var(--w)*.027)}
.toestel .telefoon .wissel::after{background:linear-gradient(120deg,rgba(255,255,255,.12),rgba(255,255,255,0) 40%)}
.toestel .telefoon .plek{width:var(--wp);height:var(--tp);margin:calc(var(--tp)/-2) 0 0 calc(var(--wp)/-2);border-radius:calc(var(--tp)/2);transform:translateY(1px) rotateX(90deg);background:rgba(var(--schaduw),.22);box-shadow:0 0 calc(var(--w)*.025) calc(var(--w)*.004) rgba(var(--schaduw),.22)}

/* ── Logo-rij (klantlogo's) — volledige breedte, auto-scroll elke 5s ── */
.logos-section{padding:24px 0 56px}
.logos-title{text-align:center;font-size:.82rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);margin-bottom:24px}
.logos-title:empty{display:none}
.logos-marquee{overflow:hidden;width:100%;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.logos-track{display:flex;align-items:center;gap:20px;width:max-content;will-change:transform;padding:4px 26px}
/* Witte chip per logo: elk (mogelijk gekleurd/donker) klantlogo blijft leesbaar in beide thema's. */
.logo-item{flex:0 0 auto;display:flex;align-items:center;justify-content:center;height:66px;padding:0 26px;background:#fff;border:1px solid var(--line);border-radius:var(--radius)}
.logo-item img{max-height:38px;max-width:150px;width:auto;object-fit:contain;display:block}
@media(max-width:640px){.logo-item{height:56px;padding:0 18px}.logo-item img{max-height:30px;max-width:118px}}
@media(prefers-reduced-motion:reduce){.logos-track{transition:none!important}}

/* ── Mockup-frames ── */
.shot{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-lg)}
.shot .bar{display:flex;align-items:center;gap:7px;padding:11px 14px;border-bottom:1px solid var(--line);background:var(--bg2)}
.shot .bar i{width:11px;height:11px;border-radius:50%;background:var(--line);display:block}
.shot .bar .url{margin-left:10px;font-size:.74rem;color:var(--faint);background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-xs);padding:3px 12px;font-family:var(--font-mono)}
.shot svg,.shot img{display:block;width:100%;height:auto}
/* Wisselbeeld: opnames van dezelfde maat op elkaar; site.js laat alle kaders tegelijk om de
   3 s naar de volgende overvloeien (data-volg = welke opname bij welke stap, voor de telefoon
   naast de laptop). Zonder JS of met "minder beweging" blijft de eerste staan. De nieuwe
   komt over de vorige heen, zodat er tijdens het overvloeien geen gat valt. */
.wissel{position:relative}
.wissel > img + img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0}
.wissel.js > img{opacity:0;z-index:0}
.wissel.js > img.vorige{opacity:1;z-index:1}
.wissel.js > img.actief{opacity:1;z-index:2;transition:opacity .8s ease}
.caption{font-size:.8rem;color:var(--faint);margin-top:14px;text-align:center}
.phone{width:min(320px,100%);margin:0 auto;background:var(--panel);border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:var(--shadow-lg)}
.phone svg,.phone img{display:block;width:100%;height:auto}
/* Schermopname onder een sectiekop (secties-grid met afbeelding) */
.sec-shot{margin:28px 0 32px}

/* ── Kaarten / grids ── */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:20px;margin-top:48px}
/* 3 tegels per rij (bredere minimumbreedte); zakt vanzelf naar 2 en 1 op smallere schermen. */
.grid.grid-3{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.feat{background:var(--card);border-radius:var(--radius);padding:28px;display:flex;flex-direction:column;gap:12px;transition:background-color .16s ease}
.band .feat{background:var(--bg)}
.feat .ic{color:var(--text);margin-bottom:6px;line-height:0}
.feat h3{font-size:1.06rem}
.feat p{font-size:.95rem;color:var(--dim)}
.feat .more{margin-top:auto;padding-top:6px;font-size:.88rem;font-weight:600;color:var(--text);text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--field-line)}
.feat .more:hover{text-decoration-color:var(--text)}
.band{background:var(--bg2)}

/* USP-strip op home: drie kolommen onder een haarlijn. */
.usps-section{padding:0}
.usps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 48px;border-top:1px solid var(--line);padding:48px 0}
@media(max-width:860px){.usps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.usps{grid-template-columns:1fr;gap:28px}}
.usp{display:flex;gap:10px;align-items:flex-start;min-width:0}
.usp>div{min-width:0;overflow-wrap:break-word}
.usp svg{flex:none;width:18px;height:18px;color:var(--text);margin-top:3px}
.usp b{display:block;font-size:.95rem;font-weight:600;margin-bottom:4px}
.usp span{display:block;font-size:.88rem;line-height:1.55;color:var(--dim)}

/* Inhoudsopgave-chips */
.toc{display:flex;flex-wrap:wrap;gap:9px;margin-top:26px}
.toc a{font-size:.86rem;font-weight:600;color:var(--dim);background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:8px 16px}
.toc a:hover{color:var(--text);border-color:var(--field-line)}

/* ── Stappen: genummerd raster met haarlijnen ── */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));margin-top:48px;border-top:1px solid var(--line)}
.step{padding:26px 28px 26px 0;display:flex;flex-direction:column;gap:10px;border-bottom:1px solid var(--line)}
.step h3{display:flex;gap:10px;font-family:var(--font-body);font-size:1rem;font-weight:600;letter-spacing:0;line-height:1.4}
.step .n{flex:none;color:var(--dim);font-weight:400;font-variant-numeric:tabular-nums}
.step p{font-size:.9rem;color:var(--dim)}
.step code{font-family:var(--font-mono);font-size:.85em;background:var(--card);border:1px solid var(--line);border-radius:var(--radius-xs);padding:2px 7px;color:var(--text)}
.steps-link{margin-top:28px;font-size:.92rem}
.steps-link a{color:var(--text);font-weight:600;text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--field-line)}

/* ── Prijzen ── */
.plans-section{padding-top:24px}
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:20px}
.plan{background:var(--card);border-radius:var(--radius);padding:32px;display:flex;flex-direction:column;gap:20px}
.plan .tag{align-self:flex-start;font-size:.72rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;border:1px solid var(--line);border-radius:var(--radius);padding:4px 10px}
.plan h3{font-family:var(--font-body);font-size:.95rem;font-weight:600;letter-spacing:0}
.plan .price{font-family:var(--font-head);font-size:2.5rem;font-weight:600;line-height:1.1;letter-spacing:-0.01em;font-variant-numeric:tabular-nums}
.plan .price.tekst{font-size:1.9rem;padding:6px 0}
.plan .price span{font-family:var(--font-body);font-size:.88rem;font-weight:400;letter-spacing:0;color:var(--dim)}
.plan .per{font-size:.85rem;color:var(--dim);margin-top:-12px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.plan ul{list-style:none;display:flex;flex-direction:column;gap:12px;font-size:.95rem;margin-bottom:8px}
.plan li{display:flex;gap:10px;align-items:flex-start}
.plan li::before{content:'';flex:none;width:16px;height:16px;margin-top:4px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/contain no-repeat}
.plan .btn{margin-top:auto;align-self:flex-start}
/* Uitgelicht pakket: donkere kaart met omgekeerde knop — in beide thema's. */
.plan.featured{background:var(--feature);color:#fff}
.plan.featured .tag{border-color:#33415c}
.plan.featured .price span,.plan.featured .per{color:#a3afc2}
.plan.featured .per{border-bottom-color:#22304d}
.plan.featured .btn.primary{background:#fff;border-color:#fff;color:#0f1b33}
.plan.featured .btn.primary .arr{background:#0f1b33;color:#fff}
.billing{margin-top:32px;font-size:.92rem;color:var(--dim);max-width:760px}
.billing strong{color:var(--text)}
.allfeat{margin-top:10px;font-size:.88rem;color:var(--faint);max-width:760px}

/* ── FAQ: vraag links, antwoord rechts ── */
.faq-list{margin-top:36px;border-top:1px solid var(--line)}
.faq-row{display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:48px;padding:24px 0;border-bottom:1px solid var(--line)}
.faq-row h3{font-family:var(--font-body);font-size:1.06rem;font-weight:600;letter-spacing:0;line-height:1.4}
.faq-row .body{color:var(--dim);font-size:.95rem}
.faq-row code{font-family:var(--font-mono);font-size:.85em;background:var(--card);border:1px solid var(--line);border-radius:var(--radius-xs);padding:2px 7px;color:var(--text)}
@media(max-width:760px){.faq-row{grid-template-columns:1fr;gap:8px;padding:20px 0}}

/* ── CTA-band ── */
.cta-end{background:var(--bg2);padding:88px 0}
.cta-in{display:flex;align-items:center;justify-content:space-between;gap:64px}
.cta-main{display:flex;flex-direction:column;align-items:flex-start;gap:28px}
.cta-main h2{font-size:clamp(1.9rem,3.8vw,2.75rem);line-height:1.1;font-weight:600;max-width:560px;margin:0}
.cta-btns{display:flex;flex-wrap:wrap;gap:12px}
.cta-end .lead{max-width:460px;font-size:1rem}
@media(max-width:860px){
  .cta-end{padding:64px 0}
  .cta-in{flex-direction:column;align-items:flex-start;gap:24px}
}

/* ── Footer: altijd donker, met groot woordmerk ── */
footer{border-top:1px solid var(--line);padding:34px 0;font-size:.84rem;color:var(--faint)}
.site-footer{border-top:0;background:var(--footer);color:#a3afc2;padding:64px 0 32px;font-size:.875rem;overflow:hidden}
.site-footer a{color:#a3afc2}
.site-footer a:hover{color:#fff}
.foot-grid{display:flex;justify-content:space-between;align-items:flex-start;gap:48px;flex-wrap:wrap}
.foot-brand{max-width:420px}
.foot-brand-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.foot-brand .logo-word{color:#fff}
.foot-brand .logo-word span{color:#4c8dff}
.foot-tagline{padding-left:16px;border-left:1px solid #33415c;line-height:22px;white-space:nowrap}
.foot-brand p{margin-top:18px;line-height:1.6}
.foot-cols{display:flex;gap:64px;flex-wrap:wrap}
.foot-col{min-width:160px}
.foot-col h4{font-family:var(--font-body);font-size:.875rem;font-weight:600;letter-spacing:0;color:#fff;margin-bottom:12px}
.foot-col ul{list-style:none;display:flex;flex-direction:column;gap:10px;margin:0}
.foot-contact li{display:flex;gap:10px;align-items:center}
.foot-contact svg{flex:none;color:#a3afc2}
.foot-wordmark{container-type:inline-size;display:flex;align-items:center;justify-content:center;padding:72px 0 64px}
/* Het grote logo onderaan: het volledige logo met regel, kleurvariant donker (de voettekst
   is in beide thema's navy), even breed als het woordmerk ervoor was. */
.foot-wordmark img{display:block;width:min(93cqw,976px);height:auto}
.foot-bar{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center;font-size:.8rem}
@media(max-width:760px){
  .site-footer{padding:48px 0 28px}
  .foot-cols{gap:36px}
  .foot-wordmark{padding:48px 0 40px}
}

/* ── Contactformulier ── */
.contact-section{padding-top:32px}
.contact-grid{display:grid;grid-template-columns:.9fr 1.2fr;gap:64px;align-items:start}
@media(max-width:900px){.contact-grid{grid-template-columns:1fr;gap:32px}}
.contact-info{display:flex;flex-direction:column;gap:22px;padding-top:8px}
.contact-info .ci{display:flex;gap:12px;align-items:flex-start}
.contact-info .ci svg{flex:none;color:var(--text);margin-top:3px}
.contact-info .ci b{display:block;font-size:.95rem;font-weight:600;margin-bottom:2px;color:var(--text)}
.contact-info .ci span,.contact-info .ci a{font-size:.95rem;color:var(--dim)}
.contact-info .ci a:hover{color:var(--text)}
.form{background:var(--card);border-radius:var(--radius);padding:36px}
@media(max-width:520px){.form{padding:24px 20px}}
.form .row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:520px){.form .row2{grid-template-columns:1fr}}
.form label{display:block;font-size:.875rem;font-weight:600;color:var(--text);margin:0 0 8px}
.form .field{margin-bottom:18px}
.form input,.form textarea{width:100%;background:var(--bg);border:1px solid var(--field-line);border-radius:var(--radius);color:var(--text);font-size:.95rem;padding:0 16px;font-family:inherit}
.form input{height:48px}
.form textarea{min-height:140px;padding:12px 16px;resize:vertical}
.form input:focus,.form textarea:focus{outline:none;border-color:var(--amber);box-shadow:0 0 0 3px var(--focus-ring)}
.form input.invalid,.form textarea.invalid{border-color:var(--red)}
.form .err{display:none;color:var(--red);font-size:.8rem;margin-top:5px}
.form .err.show{display:block}
.form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form .btn{margin-top:4px}
.form .btn[disabled]{opacity:.6;cursor:default}
.form .consent{font-size:.8rem;color:var(--faint);margin-top:14px}

/* ── Statusmelding (contactformulier) ── */
.statusmsg{margin:16px 0;padding:13px 16px;border-radius:var(--radius);font-size:.9rem;display:none}
.statusmsg.ok{display:block;background:color-mix(in srgb,var(--ok) 12%,transparent);color:var(--ok);border:1px solid color-mix(in srgb,var(--ok) 40%,transparent)}
.statusmsg.err{display:block;background:color-mix(in srgb,var(--red) 12%,transparent);color:var(--red);border:1px solid color-mix(in srgb,var(--red) 40%,transparent)}

/* ── Trust-strip (kernstatistieken) ── */
.trust-section{padding:0 0 56px}
.trust{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:28px}
.trust .stat b{display:block;font-family:var(--font-head);font-size:clamp(1.9rem,4vw,2.6rem);font-weight:600;letter-spacing:-.01em;line-height:1.1;color:var(--text)}
.trust .stat span{font-size:.9rem;color:var(--dim)}

/* ── Testimonials ── */
.testimonials{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:20px;margin-top:48px}
.quote{background:var(--card);border-radius:var(--radius);padding:28px;display:flex;flex-direction:column;gap:18px}
.band .quote{background:var(--bg)}
.quote p{font-size:1rem;color:var(--text);line-height:1.6}
.quote .who{display:flex;align-items:center;gap:10px;margin-top:auto}
.quote .who .av{width:32px;height:32px;border-radius:50%;background:var(--bg);border:1px solid var(--line);color:var(--text);display:grid;place-items:center;font-size:.8rem;font-weight:600;flex:none}
.band .quote .who .av{background:var(--bg2)}
.quote .who b{display:block;font-size:.875rem;font-weight:600}
.quote .who span{display:block;font-size:.75rem;color:var(--dim)}

/* ── Vergelijkingstabel (prijzen) ── */
.compare-wrap{margin-top:40px;overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius)}
.compare{width:100%;border-collapse:collapse;min-width:600px;font-size:.92rem}
.compare th,.compare td{padding:14px 18px;border-bottom:1px solid var(--line);text-align:center}
.compare tbody tr:last-child th,.compare tbody tr:last-child td{border-bottom:0}
.compare thead th{font-family:var(--font-head);font-weight:600;font-size:1rem;white-space:nowrap}
.compare thead th small{display:block;font-family:var(--font-body);font-weight:400;font-size:.78rem;color:var(--dim)}
.compare thead th:first-child,.compare tbody th{text-align:left}
.compare tbody th{font-weight:400;color:var(--dim)}
.compare .yes{color:var(--text);font-weight:700}
.compare .no{color:var(--faint)}
.compare .val{color:var(--text);font-weight:600;white-space:nowrap}
.compare .col-featured{background:var(--card)}

/* ── Beeldblokken ── */
.duo{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:64px}
.duo img,.beeld{width:100%;height:auto;border-radius:var(--radius);display:block}
@media(max-width:860px){.duo{grid-template-columns:1fr;gap:28px}}

/* ── Cookiebanner (site.js; alleen als er een GA-meet-ID is ingesteld) ── */
/* Zwevende laag, dus wél de schaduw (handboek §05): paneel + haarlijn + --shadow-lg, net als
   .shot. Weigeren en Accepteren zijn allebei een inktknop van gelijke maat — geen dark pattern. */
.cookie-banner{position:fixed;left:16px;right:16px;bottom:16px;z-index:60;max-width:1200px;margin:0 auto;display:flex;align-items:center;gap:32px;padding:24px 28px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-lg)}
.cookie-banner[hidden]{display:none}
.cookie-banner h2{font-size:1.15rem;font-weight:600;margin-bottom:6px}
.cookie-banner p{font-size:.92rem;color:var(--dim);max-width:720px}
.cookie-banner .cookie-status{margin-top:8px;color:var(--text)}
.cookie-knoppen{flex:none;display:flex;gap:12px}
.cookie-knoppen .btn{min-width:136px}
@media(max-width:760px){
  .cookie-banner{left:12px;right:12px;bottom:12px;flex-direction:column;align-items:stretch;gap:16px;padding:20px}
  .cookie-knoppen .btn{flex:1;min-width:0}
}

/* ── Cookieverklaring (cookies.html): FAQ-rijen met lopende tekst en cookietabellen ── */
.cookie-doc{padding-top:32px}
.cookie-doc .faq-list{margin-top:0}
.cookie-doc .body>*+*{margin-top:12px}
.cookie-doc .body ul{padding-left:20px}
.cookie-doc .body li+li{margin-top:6px}
.cookie-doc .body strong{color:var(--text);font-weight:600}
.cookie-doc code{white-space:nowrap}
.cookie-doc .cookie-status{color:var(--text)}
.cookie-tabel-wrap{overflow-x:auto}
.cookie-tabel{width:100%;border-collapse:collapse;font-size:.9rem}
.cookie-tabel th,.cookie-tabel td{padding:10px 16px 10px 0;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.cookie-tabel th:last-child,.cookie-tabel td:last-child{padding-right:0}
.cookie-tabel thead th{color:var(--text);font-weight:600}

/* ── 404 (404.html): paginakop met de gewone knoppen, daaronder de vier hoofdpagina's als tegels ── */
.nf-verder{padding-top:32px}
.nf-verder .grid{margin-top:0}