/* De site in aanbouw (17 oktober 2026): dezelfde informatie als site.html, een nieuw uiterlijk.
   Referentieslot: ontwerp/onderzoek/refero-2026-10-17.md. Primair Attio (het product levensgroot
   onder de kop, één knop, feiten met klein icoon, donkere voet); van Column het lichte verloop
   bovenin, de banden om en om, het paneel over de tabel en het tweekolomblok. Eén schreefloze letter
   (Albert Sans), mono voor cijfers. Diep teal is de knop- en bandkleur; teal-tint het bandvlak;
   groen, oranje en rood alleen als uitkomst. Alles zelf gehost. Tokens hieronder bij "Basis". */

/* ===== Basis ===== */
:root{
  color-scheme:light;
  --wit:#ffffff;
  --tint:#eef1f7;
  --tint-lijn:#dbe1ec;
  --verloop-van:#e4e9f4;
  --inkt:#101716;
  --tekst:#28302f;
  --gedempt:#5c6664;
  --zacht:#8a9391;
  --lijn:#e1e6e5;
  --lijn-sterk:#c9d2d0;
  --donker:#0c1829;
  --donker-2:#15263f;
  --accent:#2b4f8a;
  --accent-hover:#213f70;
  --accent-licht:#9cc4ff;
  --klaar:#2f7d4c; --klaar-bg:#e7f3ea;
  --letop:#9a6212; --letop-bg:#fbf0dc;
  --stop:#b83a2b;  --stop-bg:#fbe8e5;
  --sans:"Albert Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Fira Code",ui-monospace,"SF Mono",Menlo,monospace;
  --r:8px;
  --r-kader:12px;
  --schaduw:0 0 0 1px rgba(16,23,22,.07),0 1px 2px rgba(16,23,22,.05),0 18px 44px -20px rgba(16,23,22,.18);
  --breed:1200px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--wit);color:var(--tekst);font:400 16px/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
p{margin:0}
h1,h2,h3{margin:0;color:var(--inkt);font-weight:600;text-wrap:balance}
h1{font-size:clamp(40px,4.9vw,64px);line-height:1.04;letter-spacing:-.03em}
h2{font-size:clamp(30px,3.3vw,44px);line-height:1.08;letter-spacing:-.025em}
h3{font-size:20px;line-height:1.3;letter-spacing:-.012em}
.lead{font-size:18px;line-height:1.55;color:var(--gedempt);max-width:58ch;text-wrap:pretty}
.label{font:500 12px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.wrap{max-width:var(--breed);margin:0 auto;padding:0 32px}
.band{padding:112px 0}
.band.mist{background:var(--tint);border-block:1px solid var(--tint-lijn)}
.band.diep{background:var(--donker);color:rgba(255,255,255,.74)}
.band.diep h2{color:#fff}
.band.diep .label{color:var(--accent-licht)}
.band.diep .tekstlink{color:#fff;border-color:rgba(255,255,255,.35)}
.band.diep .tekstlink:hover{border-color:#fff}

/* knoppen: één gevulde per scherm, de rest omlijnd */
.knop{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:46px;padding:0 20px;border-radius:var(--r);font:600 15px/1 var(--sans);border:1px solid transparent;cursor:pointer;white-space:nowrap;transition:background .15s ease,transform .1s ease,border-color .15s ease}
.knop:active{transform:scale(.97)}
.knop-actie{background:var(--donker);color:#fff}
.knop-actie:hover{background:var(--donker-2)}
.knop-rustig{background:var(--wit);color:var(--inkt);border-color:var(--lijn-sterk)}
.knop-rustig:hover{border-color:var(--inkt)}
.knop:focus-visible,.tekstlink:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.tekstlink{color:var(--inkt);font-weight:500;border-bottom:1px solid var(--lijn-sterk);transition:border-color .15s}
.tekstlink:hover{border-color:var(--inkt)}
.pijl::after{content:" →"}

/* ===== Kop ===== */
.nav{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.86);backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid transparent;transition:border-color .2s}
.nav.gescrold{border-bottom-color:var(--lijn)}
.nav .wrap{height:68px;display:flex;align-items:center;gap:36px}
.merk{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:19px;letter-spacing:-.03em;color:var(--inkt)}
.merk .woord span{color:var(--gedempt);font-weight:600}
.beeldmerk{width:26px;height:26px;flex:none;color:var(--donker)}
.nav-links{display:flex;gap:28px;font-size:15px;color:var(--gedempt)}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--inkt)}
.nav-links a[aria-current="page"]{font-weight:500}
.nav-rechts{margin-left:auto;display:flex;align-items:center;gap:20px}
.nav-rechts .inloggen{font-size:15px;color:var(--gedempt)}
.nav-rechts .inloggen:hover{color:var(--inkt)}
.nav .knop{height:40px;padding:0 16px;font-size:14px}
/* twee knoppen naast elkaar in de kop (27 oktober 2026): tussen 1000 en 1140 px is er net te weinig ruimte voor alle links */
@media (max-width:1140px){.nav .wrap{gap:24px}.nav-links{gap:20px}.nav-rechts{gap:14px}}
@media (prefers-reduced-transparency:reduce){.nav{background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none}}

/* ===== Bovenkant: licht verloop, kop gecentreerd, het product levensgroot eronder ===== */
.hero{position:relative;padding:88px 0 0;background:linear-gradient(180deg,var(--verloop-van) 0%,var(--wit) 78%)}
.hero .wrap{position:relative;z-index:1}
.hero-tekst{display:flex;flex-direction:column;align-items:center;text-align:center;gap:22px;max-width:820px;margin:0 auto}
.hero .lead{max-width:60ch}
.hero-knoppen{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:4px}
.hero-noot{font-size:14px;color:var(--zacht)}
/* het kader met de echte wachtrij */
.venster{position:relative;margin:56px auto 0;max-width:1120px;border-radius:var(--r-kader);background:var(--wit);box-shadow:var(--schaduw);overflow:hidden}
.venster-balk{display:flex;align-items:center;gap:7px;padding:12px 16px;border-bottom:1px solid var(--lijn);background:#f6f8fb}
.venster-balk i{width:10px;height:10px;border-radius:50%;background:var(--lijn-sterk)}
.venster-balk .mono{margin-left:12px;font-size:12px;color:var(--zacht)}
.venster img{display:block;width:100%;height:auto;max-height:560px;object-fit:cover;object-position:top}
.beeld-noot{font-size:13px;color:var(--zacht);text-align:center;padding:14px 0 0}

/* status: alleen als uitkomst */
.status{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:500}
.status::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.status.k{color:var(--klaar)}.status.o{color:var(--letop)}.status.r{color:var(--stop)}

/* ===== Tak 2: vertrouwensstrook en de vier feiten als tegels (naar Ravical) ===== */
.na-hero{padding-top:0;padding-bottom:112px}
.vertrouwen{list-style:none;margin:40px 0 0;padding:18px 24px;display:flex;flex-wrap:wrap;justify-content:center;gap:12px 40px;border-block:1px solid var(--lijn);font-size:15px;color:var(--gedempt)}
.vertrouwen li{display:inline-flex;align-items:center;gap:10px}
.vertrouwen svg{width:18px;height:18px;color:var(--accent);flex:none}
.vertrouwen b{font-weight:600;color:var(--inkt)}
.tegels{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin-top:64px}
.tegel{display:flex;flex-direction:column;gap:8px}
.tegel b{font-size:17px;font-weight:600;color:var(--inkt);letter-spacing:-.01em;margin-top:12px}
.tegel span{font-size:15px;color:var(--gedempt);line-height:1.55}
/* het beeld: een donker vlak (het teal van de knop en de voet; keuze Mees, 17 oktober 2026) met
   licht van linksboven en een fijne korrel; daarop een lichte glazen kaart. Kantelt mee met de muis
   (tegels.js); het glas ligt een laag hoger en beweegt iets meer. */
.tegel-beeld{position:relative;aspect-ratio:4/3;border-radius:var(--r-kader);overflow:hidden;display:grid;place-items:center;isolation:isolate;
  background:
    radial-gradient(120% 90% at 18% 10%,rgba(140,170,220,.30) 0%,rgba(140,170,220,0) 55%),
    radial-gradient(90% 70% at 85% 95%,rgba(0,0,0,.35) 0%,rgba(0,0,0,0) 60%),
    linear-gradient(145deg,#15263f 0%,var(--donker) 55%,#081220 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 0 0 1px rgba(255,255,255,.06);
  transform-origin:center;will-change:transform;transition:box-shadow .25s ease}
.tegel-beeld::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23k)'/%3E%3C/svg%3E")}
.tegel-beeld::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,0) 40%,rgba(0,0,0,.12))}
.tegel:hover .tegel-beeld{box-shadow:inset 0 1px 0 rgba(255,255,255,.2),inset 0 0 0 1px rgba(255,255,255,.08),0 24px 48px -24px rgba(12,24,41,.6)}
.glas{position:relative;z-index:1;width:60%;border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:9px;
  background:linear-gradient(160deg,rgba(255,255,255,.20),rgba(255,255,255,.08));
  border:1px solid rgba(255,255,255,.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 1px 2px rgba(0,0,0,.15),0 24px 40px -18px rgba(0,0,0,.6);
  backdrop-filter:blur(10px) saturate(140%);-webkit-backdrop-filter:blur(10px) saturate(140%);will-change:transform}
.glas i{display:block;height:7px;border-radius:4px;background:rgba(255,255,255,.32)}
/* 1 concept met vinkje: het vinkje komt na het verschijnen tevoorschijn */
.glas-concept .rij.lang{width:85%}.glas-concept .rij{width:60%}.glas-concept .rij.kort{width:40%}
.glas-concept .vink{position:absolute;right:-11px;bottom:-11px;width:32px;height:32px;border-radius:50%;background:var(--klaar);box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 10px 20px -8px rgba(47,125,76,.7);transform:scale(0);transition:transform .5s cubic-bezier(.2,1.2,.3,1) .35s}
.tegel.klaar .glas-concept .vink{transform:scale(1)}
.glas-concept .vink::after{content:"";position:absolute;left:11px;top:7px;width:7px;height:13px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
/* 2 lijst: de vinkjes vullen één voor één */
.glas-lijst .regel{position:relative;width:100%;padding-left:18px;background:none}
.glas-lijst .regel::before{content:"";position:absolute;left:0;top:-2px;width:11px;height:11px;border-radius:50%;background:var(--accent-licht);transform:scale(0);transition:transform .35s cubic-bezier(.2,1.1,.3,1)}
.tegel.klaar .glas-lijst .regel::before{transform:scale(1)}
.tegel.klaar .glas-lijst .regel:nth-child(1)::before{transition-delay:.25s}.tegel.klaar .glas-lijst .regel:nth-child(2)::before{transition-delay:.35s}.tegel.klaar .glas-lijst .regel:nth-child(3)::before{transition-delay:.45s}.tegel.klaar .glas-lijst .regel:nth-child(4)::before{transition-delay:.55s}.tegel.klaar .glas-lijst .regel:nth-child(5)::before{transition-delay:.65s}
.glas-lijst .regel::after{content:"";position:absolute;left:18px;top:0;right:0;height:7px;border-radius:4px;background:rgba(255,255,255,.32)}
.glas-lijst .regel:nth-child(2)::after{right:20%}.glas-lijst .regel:nth-child(4)::after{right:35%}
/* 3 iban: twee rijen blokjes; het afwijkende blokje kleurt rood na het verschijnen */
.glas-iban{gap:12px}
.glas-iban .blok{display:flex;gap:6px}
.glas-iban .blok i{flex:1;height:14px;border-radius:4px;background:rgba(255,255,255,.34)}
.glas-iban .blok i.af{transition:background .4s ease .45s,box-shadow .4s ease .45s}
.tegel.klaar .glas-iban .blok i.af{background:var(--stop);box-shadow:0 0 0 3px rgba(184,58,43,.35)}
/* 4 server met een speld die neerkomt */
.glas-server .laag{width:100%;height:12px;background:rgba(255,255,255,.30);border-radius:5px;position:relative}
.glas-server .laag::after{content:"";position:absolute;left:8px;top:4px;width:4px;height:4px;border-radius:50%;background:var(--klaar)}
.glas-server .pin{position:absolute;right:-8px;top:-12px;width:26px;height:26px;border-radius:50% 50% 50% 0;background:var(--donker);box-shadow:0 0 0 1.5px rgba(255,255,255,.55),0 10px 20px -8px rgba(0,0,0,.7);transform:rotate(-45deg) translate(-14px,14px);opacity:0;transition:transform .55s cubic-bezier(.2,1.1,.3,1) .35s,opacity .3s ease .35s}
.tegel.klaar .glas-server .pin{transform:rotate(-45deg) translate(0,0);opacity:1}
.glas-server .pin::after{content:"";position:absolute;left:8px;top:8px;width:10px;height:10px;border-radius:50%;background:#fff}
@media (prefers-reduced-motion:reduce){
  .glas-concept .vink,.glas-lijst .regel::before,.glas-iban .blok i.af,.glas-server .pin{transition:none;transform:none;opacity:1}
  .glas-concept .vink{transform:scale(1)}.glas-lijst .regel::before{transform:scale(1)}.glas-server .pin{transform:rotate(-45deg)}
  .glas-iban .blok i.af{background:var(--stop)}
}
/* tak 5: drie glazen tegels voor het boekhoudwerk; de beeldjes zijn zonder tekst */
.tegels.drie-tegels{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin-top:0}
.drie-tegels .tegel h3{font-size:20px;line-height:1.3;letter-spacing:-.012em;margin:18px 0 8px}
.drie-tegels .tegel > p{color:var(--gedempt);font-size:15px;margin:0 0 12px}
.drie-tegels .tegel details{border-top:1px solid var(--lijn)}
.glas-maanden{flex-direction:row;align-items:flex-end;gap:5px;height:46%;width:62%;position:relative}
.glas-maanden i{flex:1;height:30%;border-radius:3px;background:rgba(255,255,255,.35);transform-origin:50% 100%;transform:scaleY(.4);transition:transform .5s cubic-bezier(.2,1,.3,1)}
.tegel.klaar .glas-maanden i{transform:scaleY(1)}
.glas-maanden i:nth-child(2){transition-delay:.04s}.glas-maanden i:nth-child(3){transition-delay:.08s}.glas-maanden i:nth-child(4){transition-delay:.12s}.glas-maanden i:nth-child(5){transition-delay:.16s}.glas-maanden i:nth-child(6){transition-delay:.2s}.glas-maanden i:nth-child(7){transition-delay:.24s}.glas-maanden i:nth-child(8){transition-delay:.28s}.glas-maanden i:nth-child(9){transition-delay:.32s}.glas-maanden i:nth-child(10){transition-delay:.36s}.glas-maanden i:nth-child(11){transition-delay:.4s}.glas-maanden i:nth-child(12){transition-delay:.44s}
.glas-maanden .piek{position:absolute;left:16px;top:16px;width:14px;height:14px;border-radius:50%;background:var(--accent-licht);box-shadow:0 0 14px var(--accent-licht);transform:scale(0);transition:transform .45s cubic-bezier(.2,1.2,.3,1) .5s}
.tegel.klaar .glas-maanden .piek{transform:scale(1)}
.glas-stukken{gap:8px;width:58%;position:relative}
.glas-stukken .stuk{display:block;height:34px;border-radius:6px;background:rgba(255,255,255,.28);border:1px solid rgba(255,255,255,.35)}
.glas-stukken .stuk.kort{width:70%}
.glas-stukken .klem{position:absolute;right:-10px;top:-12px;width:22px;height:40px;border:3px solid var(--accent-licht);border-radius:11px;transform:rotate(25deg) translate(-10px,14px);opacity:0;transition:transform .55s cubic-bezier(.2,1.1,.3,1) .35s,opacity .3s ease .35s}
.tegel.klaar .glas-stukken .klem{transform:rotate(25deg);opacity:1}
.glas-schakels{gap:10px;width:60%}
.glas-schakels .rij{display:flex;align-items:center;justify-content:space-between;gap:10px;background:none;height:auto}
.glas-schakels em{display:block;height:7px;width:55%;border-radius:4px;background:rgba(255,255,255,.32)}
.glas-schakels b{display:block;width:34px;height:20px;border-radius:999px;background:rgba(255,255,255,.25);position:relative;transition:background .35s ease .5s}
.glas-schakels b::after{content:"";position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:#fff;transition:left .35s cubic-bezier(.2,1.1,.3,1) .5s}
.tegel.klaar .glas-schakels b.aan{background:var(--klaar)}.tegel.klaar .glas-schakels b.aan::after{left:17px}
@media (prefers-reduced-motion:reduce){.glas-maanden i,.glas-maanden .piek,.glas-stukken .klem,.glas-schakels b,.glas-schakels b::after{transition:none}.glas-maanden i{transform:scaleY(1)}.glas-maanden .piek{transform:scale(1)}.glas-stukken .klem{transform:rotate(25deg);opacity:1}.glas-schakels b.aan{background:var(--klaar)}.glas-schakels b.aan::after{left:17px}}
@media (prefers-reduced-transparency:reduce){.glas{background:#15263f;border-color:rgba(255,255,255,.4);backdrop-filter:none;-webkit-backdrop-filter:none}}

/* ===== Stappen ===== */
.sectiekop{display:flex;flex-direction:column;gap:16px;max-width:760px;margin-bottom:64px}
.stappen{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:start}
.stappen-lijst{min-width:0}
/* de MacBook: deksel (scherm) dat openklapt bij het scrollen, een basis met toetsen en trackpad in
   perspectief. --open loopt van 0 (dicht) naar 1 (open); het script zet hem 1:1 op de scrolstand. */
/* de kolom met de MacBook: gloed-glas (keuze Mees, 17 oktober 2026, naar Gladia en Clay): een
   donkere kaart, daarachter wazige blauwe en teal lichtstrepen die met het scrollen meedraaien, en
   daarvoor een glazen plaat met een licht randje waar de MacBook op staat. */
.mac-kolom{display:none;position:sticky;top:96px;isolation:isolate;overflow:hidden;padding:56px 36px 28px;border-radius:28px;background:#070d18;--gloed:0deg}
.mac-aan .mac-kolom{display:block}
.mac-kolom::before{content:"";position:absolute;inset:-10%;z-index:-2;transform:rotate(var(--gloed));will-change:transform;
  background:conic-gradient(from 200deg at 50% 60%,rgba(156,196,255,0) 0deg,rgba(156,196,255,.55) 40deg,rgba(43,79,138,0) 90deg,rgba(127,212,207,.35) 160deg,rgba(43,79,138,0) 220deg,rgba(156,196,255,.4) 300deg,rgba(156,196,255,0) 360deg);
  filter:blur(50px)}
.mac-kolom::after{content:"";position:absolute;inset:0;border-radius:28px;pointer-events:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 0 0 1px rgba(255,255,255,.18)}
.mac-glas{position:absolute;left:2%;right:2%;top:6%;bottom:22%;z-index:-1;border-radius:24px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 0 80px -20px rgba(156,196,255,.45)}
@media (prefers-reduced-transparency:reduce){.mac-glas{background:rgba(255,255,255,.08);backdrop-filter:none;-webkit-backdrop-filter:none}}
.macbook{position:relative;perspective:1800px;perspective-origin:50% 30%;--open:1;padding:0 2%;will-change:transform}
/* deksel: de vectortekening (rand, kin, notch) met daarin het echte scherm; het scherm zit op 20/1190
   van de rand, dus de percentages hieronder volgen uit de viewBox. */
.mac-deksel{position:relative;z-index:2;width:84.4%;margin:0 auto;transform-origin:50% 100%;transform:rotateX(calc((1 - var(--open)) * 84deg));backface-visibility:hidden;
  filter:drop-shadow(0 30px 50px rgba(0,0,0,.55))}
.mac-deksel-svg{display:block;width:100%;height:auto}
.mac-deksel::after{content:"";position:absolute;left:43.7%;top:2.52%;width:12.6%;height:4.1%;background:#050608;border-radius:0 0 14% 14% / 0 0 45% 45%;z-index:2}
.mac-scherm{position:absolute;left:1.68%;top:2.52%;width:96.64%;height:93.71%;border-radius:.6%/1%;overflow:hidden;background:linear-gradient(160deg,#eef1f7,#dfe5ef)}
.mac-scherm::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,rgba(255,255,255,.10),rgba(255,255,255,0) 40%)}
.mac-stapel{position:absolute;inset:0;z-index:1}
.mac-kaart{position:absolute;left:5%;right:5%;top:7%;bottom:7%;opacity:0;will-change:transform,opacity}
.mac-kaart.aan{opacity:1}
.mac-kaart .paneel{transform-origin:50% 0;transform:scale(var(--schaal,1));box-shadow:0 20px 40px -24px rgba(12,24,41,.5),0 0 0 1px rgba(12,24,41,.06)}
.mac-basis-svg{position:relative;z-index:3;display:block;width:100%;height:auto;margin-top:-2px;filter:drop-shadow(0 18px 24px rgba(0,0,0,.45))}
@media (prefers-reduced-motion:reduce){.macbook{--open:1!important}.mac-kolom::before{transform:none!important}}
.mac-knoppen{display:flex;gap:6px;justify-content:center;margin-top:28px;flex-wrap:wrap}
.mac-knoppen a{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 14px;border-radius:999px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.06);color:rgba(255,255,255,.8);font-size:13.5px;font-weight:500;text-decoration:none;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:background .15s ease,color .15s ease,border-color .15s ease}
.mac-knoppen a .mono{font-size:11px;color:rgba(255,255,255,.5)}
.mac-knoppen a:hover{border-color:rgba(255,255,255,.45);color:#fff}
.mac-knoppen a.aan{background:#fff;border-color:#fff;color:var(--donker)}
.mac-knoppen a.aan .mono{color:var(--accent)}
.mac-knoppen a:active{transform:scale(.97)}
@media (prefers-reduced-motion:reduce){.macbook{--open:1!important}.mac-deksel{transition:none}}
.stap{display:grid;grid-template-columns:minmax(0,1fr);gap:32px;align-items:start;padding:0 0 56px;scroll-margin-top:110px}
.mac-aan .stap .paneel{display:none}
.stap + .stap{padding-top:56px;border-top:1px solid var(--tint-lijn)}
.stap-tekst{display:flex;flex-direction:column;gap:16px}
.stap-tekst h3{font-size:26px;letter-spacing:-.02em;line-height:1.15}
.stap-tekst > p{color:var(--gedempt)}

/* meer lezen */
details{border-top:1px solid var(--lijn)}
summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0;font-size:15px;font-weight:500;color:var(--inkt)}
summary::-webkit-details-marker{display:none}
summary::after{content:"";margin-right:4px;width:10px;height:10px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);transition:transform .2s ease}
details[open] summary::after{transform:rotate(225deg) translate(-2px,-2px)}
.meer{display:flex;flex-direction:column;gap:12px;padding:0 0 16px;color:var(--gedempt);font-size:15px}
.meer ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:10px}
.meer li::marker{color:var(--zacht)}
.meer b{color:var(--tekst);font-weight:600}

/* panelen bij de stappen: stukken van het programma */
.paneel{background:var(--wit);border-radius:var(--r-kader);box-shadow:var(--schaduw);overflow:hidden}
.paneel-kop{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 18px;border-bottom:1px solid var(--lijn);font:500 12px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--zacht)}
.velden{display:grid;grid-template-columns:auto 1fr;font-size:14px;margin:0}
.velden dt,.velden dd{margin:0;padding:11px 18px;border-bottom:1px solid var(--lijn)}
.velden dt{color:var(--gedempt)}
.velden dd{color:var(--inkt);font-family:var(--mono);font-size:13px;text-align:right}
.velden dt:nth-last-of-type(1),.velden dd:last-of-type{border-bottom:0}
.keuzes{display:flex;flex-direction:column}
.keuze{display:grid;grid-template-columns:28px 1fr;gap:12px;padding:16px 18px;border-bottom:1px solid var(--lijn)}
.keuze:last-child{border-bottom:0}
.keuze .mono{font-size:12px;color:var(--zacht);padding-top:2px}
.keuze b{display:block;color:var(--inkt);font-weight:600;font-size:15px}
.keuze span{font-size:14px;color:var(--gedempt)}
.stop-regel{display:flex;gap:12px;align-items:baseline;padding:14px 18px;background:var(--stop-bg);color:var(--stop);font-size:14px;border-bottom:1px solid var(--lijn)}
.stop-regel .mono{font-weight:500;font-size:12px;letter-spacing:.08em}
.stop-regel span{color:var(--tekst)}
.voorstellen .item{display:grid;grid-template-columns:1fr auto;gap:4px 16px;padding:16px 18px;border-bottom:1px solid var(--lijn)}
.voorstellen .item:last-child{border-bottom:0}
.voorstellen b{color:var(--inkt);font-weight:600;font-size:15px}
.voorstellen .item > span:last-child{grid-column:1 / -1;font-size:14px;color:var(--gedempt)}
.bakken .item{display:grid;grid-template-columns:1fr;gap:4px;padding:16px 18px;border-bottom:1px solid var(--wit)}
.bakken .item.k{background:var(--klaar-bg)}.bakken .item.o{background:var(--letop-bg)}.bakken .item.r{background:var(--stop-bg)}
.bakken .item:last-child{border-bottom:0}
.bakken .item > span:last-child{font-size:14px;color:var(--gedempt)}
.naar-beleid{margin-top:4px}

/* ===== Boekhoudwerk: drie kaarten (naar Column) ===== */
.drie{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.kolom{display:flex;flex-direction:column;gap:12px;padding:28px;background:var(--wit);border:1px solid var(--lijn);border-radius:var(--r-kader)}
.kolom h3{font-size:20px}
.kolom > p{color:var(--gedempt);font-size:15px}
.kolom details{margin-top:auto}

/* ===== De loop: de ene donkere band (26 oktober 2026, keuze Mees; bron ontwerp/site/loop/variant-a.html) ===== */
/* Eén baan, heen en terug. Links Visma eAccounting (alleen de naam, geen logo), rechts InvoiceStack, daartussen twee
   sporen. Een factuurkaart reist over het bovenste spoor naar InvoiceStack, de controles lopen, en hij gaat als concept
   over het onderste spoor terug. De baan is alleen beeld (aria-hidden, loop.js); de kop en de vijf stappen eronder zijn
   de tekst. Maten en de witte tinten op het donker staan hier bij elkaar; de rest komt uit de basis. */
.loop-kop{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:end;margin-bottom:56px}
.loop-kop > div{display:flex;flex-direction:column;gap:16px}
.band.diep .loop-kop .lead{color:rgba(255,255,255,.78);max-width:60ch}
.loop{--glas:linear-gradient(160deg,rgba(255,255,255,.20),rgba(255,255,255,.08));--glas-rand:rgba(255,255,255,.28);
  --wit-lijn:rgba(255,255,255,.14);--wit-tekst:#ffffff;--wit-zacht:rgba(255,255,255,.62);--wit-vaag:rgba(255,255,255,.45);
  --tegel:272px;           /* breedte van de twee tegels op de computer */
  --spoor:1.5px;           /* dikte van de sporen */
  --kaart:188px;           /* breedte van de factuurkaart die beweegt */
  position:relative;display:grid;grid-template-columns:var(--tegel) minmax(0,1fr) var(--tegel);align-items:stretch;gap:0;min-height:340px}
.loop-tegel{position:relative;z-index:2;min-height:300px;background:var(--glas);border:1px solid var(--glas-rand);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 1px 2px rgba(0,0,0,.15),0 24px 40px -18px rgba(0,0,0,.6);backdrop-filter:blur(10px) saturate(140%);-webkit-backdrop-filter:blur(10px) saturate(140%);border-radius:var(--r-kader);padding:22px 22px 20px;display:flex;flex-direction:column;gap:6px}
.loop-tegel .naam{display:flex;align-items:center;gap:10px;font-weight:700;font-size:19px;letter-spacing:-.03em;color:var(--wit-tekst);line-height:1.2}
.loop-tegel .naam .woord span{color:var(--wit-zacht);font-weight:600}
.loop-tegel .onder{font-size:13px;color:var(--wit-vaag)}
.loop-tegel .beeldmerk{width:28px;height:28px;color:#fff}
.loop-tegel .beeldmerk rect:first-child{fill:rgba(255,255,255,.18)}
/* Visma: alleen de naam als tekst, in een nuchter kader; geen logo, geen huisstijl */
.loop-tegel.visma .naam{font-weight:600;letter-spacing:-.02em}
/* het bakje in Visma: de binnengekomen bestanden, en daaronder het concept dat terugkomt */
.loop .bak{margin-top:auto;display:flex;flex-direction:column;gap:6px}
.loop .bak .kopje{font:500 11px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--wit-vaag);margin-bottom:2px}
.loop .bestand{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--wit-zacht);padding:7px 9px;border:1px solid var(--wit-lijn);border-radius:6px;background:rgba(255,255,255,.06);transition:opacity .4s ease,transform .4s ease}
.loop .bestand .ico{width:12px;height:14px;border:1.5px solid rgba(255,255,255,.4);border-radius:2px;flex:none;position:relative}
.loop .bestand .ico::after{content:"";position:absolute;left:2px;right:2px;top:4px;height:1.5px;background:rgba(255,255,255,.4);box-shadow:0 3px 0 rgba(255,255,255,.4)}
.loop .bestand .soortlabel{font:500 9.5px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--wit-vaag);padding:1px 5px;border:1px solid var(--wit-lijn);border-radius:3px}
.loop .bestand .mono{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.loop .bestand.weg{opacity:0;transform:translateX(14px)}
.loop .bestand.concept{border-color:rgba(88,196,122,.6);background:rgba(47,125,76,.22);color:var(--wit-tekst)}
.loop .bestand.concept .ico{border-color:var(--klaar)}
.loop .bestand.concept .ico::after{background:var(--klaar);box-shadow:0 3px 0 var(--klaar)}
.loop .bestand .stand{margin-left:auto;flex:none;font-size:10.5px;font-weight:600;color:#9fe0b3;white-space:nowrap;letter-spacing:-.01em}
.loop .bestand.blijft{border-color:rgba(255,122,102,.6);background:rgba(184,58,43,.22);color:var(--wit-tekst)}
.loop .bestand.blijft .stand{color:#ffb4a8}
/* InvoiceStack: de controles */
.loop .controles{margin:auto 0 0;display:flex;flex-direction:column;gap:5px;list-style:none;padding:0}
.loop .controles li{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--wit-vaag);padding:5px 0;border-top:1px solid var(--wit-lijn);transition:color .3s ease}
.loop .controles li:first-child{border-top:0}
.loop .controles li i{width:16px;height:16px;border-radius:50%;border:1.5px solid rgba(255,255,255,.3);flex:none;position:relative;transition:background .3s ease,border-color .3s ease}
.loop .controles li i::after{content:"";position:absolute;left:4.5px;top:2px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) scale(0);transition:transform .25s cubic-bezier(.2,1.2,.3,1)}
.loop .controles li.ok{color:var(--wit-tekst)}
.loop .controles li.ok i{background:var(--klaar);border-color:var(--klaar)}
.loop .controles li.ok i::after{transform:rotate(45deg) scale(1)}
.loop .controles li.fout{color:#ffb4a8;font-weight:500}
.loop .controles li.fout i{background:var(--stop);border-color:var(--stop)}
.loop .controles li.fout i::after{width:8px;height:0;border:0;border-top:2px solid #fff;left:4px;top:7px;transform:none}
.loop .controles li.wacht i{border-color:#fff;border-top-color:transparent;animation:loop-draai .8s linear infinite}
@keyframes loop-draai{to{transform:rotate(360deg)}}
/* de twee sporen */
.loop .sporen{position:relative;z-index:1;display:grid;grid-template-rows:1fr 1fr}
.loop .spoor{position:relative}
.loop .spoor::before{content:"";position:absolute;left:-12px;right:-12px;top:50%;height:var(--spoor);background:var(--wit-lijn)}
.loop .spoor .punt{position:absolute;top:50%;width:9px;height:9px;border-top:var(--spoor) solid rgba(255,255,255,.35);border-right:var(--spoor) solid rgba(255,255,255,.35)}
.loop .spoor.heen .punt{right:-12px;transform:translate(-2px,-50%) rotate(45deg)}
.loop .spoor.terug .punt{left:-12px;transform:translate(2px,-50%) rotate(-135deg)}
.loop .spoor .richting{position:absolute;left:50%;transform:translateX(-50%);font:500 11px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--wit-vaag);background:var(--donker);padding:0 10px;white-space:nowrap}
.loop .spoor.heen .richting{top:calc(50% + 10px)}
.loop .spoor.terug .richting{top:calc(50% - 26px)}
/* het lichtje dat over het spoor loopt als de kaart beweegt */
.loop .spoor::after{content:"";position:absolute;top:50%;height:var(--spoor);width:0;background:linear-gradient(90deg,rgba(156,196,255,.2),var(--accent-licht));box-shadow:0 0 10px rgba(156,196,255,.5);transition:none}
.loop .spoor.heen::after{left:-12px}
.loop .spoor.terug::after{right:-12px}
.loop .spoor.aan::after{width:calc(100% + 24px);transition:width var(--reis,1400ms) linear}
/* de kaart die reist */
.loop .kaart{position:absolute;z-index:3;width:var(--kaart);left:0;top:0;background:var(--wit);border-radius:10px;box-shadow:0 0 0 1px rgba(16,23,22,.1),0 14px 30px -12px rgba(0,0,0,.7);padding:10px 12px;display:flex;flex-direction:column;gap:3px;opacity:0;will-change:transform;transition:transform var(--reis,1400ms) cubic-bezier(.4,0,.2,1),opacity .3s ease}
.loop .kaart.zichtbaar{opacity:1}
.loop .kaart b{font-size:13px;color:var(--inkt);font-weight:600;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.loop .kaart .regel{display:flex;justify-content:space-between;gap:8px;font-size:12px;color:var(--gedempt)}
.loop .kaart .regel .mono{font-size:12px;color:var(--inkt)}
.loop .kaart .soort{font:500 10px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--zacht)}
.loop .kaart.concept{box-shadow:0 0 0 1.5px var(--klaar),0 10px 24px -10px rgba(47,125,76,.5)}
.loop .kaart.concept .soort{color:var(--klaar)}
.loop .kaart.lezen .soort{color:var(--donker)}
/* de zin in gewone tekst: voor zoekmachines en schermlezers, en voor wie liever leest */
.loop-stappen{margin:48px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:24px;counter-reset:s}
.loop-stappen li{font-size:14px;color:rgba(255,255,255,.62);padding-top:12px;border-top:1px solid rgba(255,255,255,.14);counter-increment:s}
.loop-stappen li::before{content:counter(s,decimal-leading-zero);display:block;font:500 11px/1.4 var(--mono);letter-spacing:.08em;color:var(--accent-licht);margin-bottom:6px}
.loop-stappen b{display:block;color:#fff;font-weight:600;margin-bottom:2px}
/* de regel en de lijst wel/nooit (terug op 26 oktober 2026, Mees): onder de vijf stappen, dezelfde letters, lijnen en
   tinten als de stappen. Links de regel in tekst, rechts twee kolommen: wat InvoiceStack doet (✓, accentlicht) en wat
   het nooit doet (✕, gedempt). Geen glas, geen gloed, geen beweging. */
.regel-blok{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:80px;align-items:start;margin-top:88px;padding-top:56px;border-top:1px solid rgba(255,255,255,.14)}
.regel-tekst{display:flex;flex-direction:column;gap:20px}
.regel-tekst h3{font-size:24px;line-height:1.2;letter-spacing:-.015em;color:#fff;margin:0}
.regel-tekst p{color:inherit;text-wrap:pretty}
.welnooit{display:grid;grid-template-columns:1fr 1fr;gap:32px}
.welnooit .kopje{font:500 11px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.45);padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.14)}
.welnooit ul{list-style:none;margin:0;padding:0}
.welnooit li{display:flex;align-items:baseline;gap:10px;font-size:14px;line-height:1.45;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.welnooit li::before{flex:none;font-size:12px;line-height:1}
.welnooit .wel li{color:#fff;font-weight:500}
.welnooit .wel li::before{content:"✓";color:var(--accent-licht)}
.welnooit .nooit li{color:rgba(255,255,255,.62)}
.welnooit .nooit li::before{content:"✕";font-size:11px;color:rgba(255,255,255,.4)}
.welnooit .klik{margin-left:8px;font:500 10px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--accent-licht);white-space:nowrap}
.na-regel{margin-top:32px}
.na-regel a+a{margin-left:20px}
/* telefoon: tegels onder elkaar, de sporen links en rechts omlaag en omhoog */
@media (max-width:860px){
  .regel-blok{grid-template-columns:1fr;gap:32px;margin-top:56px;padding-top:40px}
  .loop-kop{grid-template-columns:1fr;gap:16px;margin-bottom:36px}
  .loop{grid-template-columns:1fr;grid-template-rows:auto 190px auto;min-height:0}
  .loop-tegel{min-height:0;padding:18px}
  .loop .bak{margin-top:18px}
  .loop .sporen{grid-template-rows:1fr;grid-template-columns:1fr 1fr;margin:0 4%}
  .loop .spoor::before{left:50%;right:auto;top:-12px;bottom:-12px;height:auto;width:var(--spoor)}
  .loop .spoor::after{top:auto;left:50%;right:auto;height:0;width:var(--spoor)}
  .loop .spoor.heen::after{top:-12px}
  .loop .spoor.terug::after{bottom:-12px}
  .loop .spoor.aan::after{width:var(--spoor);height:calc(100% + 24px);transition:height var(--reis,1400ms) linear}
  .loop .spoor .punt{left:50%;top:auto}
  .loop .spoor.heen .punt{bottom:-12px;right:auto;transform:translate(-50%,-2px) rotate(135deg)}
  .loop .spoor.terug .punt{top:-12px;left:50%;transform:translate(-50%,2px) rotate(-45deg)}
  .loop .spoor .richting{top:50%;left:50%;transform:translate(-50%,-50%) rotate(-90deg);padding:0 8px;background:var(--donker)}
  .loop .spoor.heen .richting,.loop .spoor.terug .richting{top:50%}
  .loop .kaart{width:min(var(--kaart),60vw)}
  .loop-stappen{grid-template-columns:1fr 1fr;gap:16px;margin-top:36px}
}
@media (max-width:480px){.loop-stappen{grid-template-columns:1fr}.welnooit{grid-template-columns:1fr;gap:24px}}
@media (prefers-reduced-transparency:reduce){.loop-tegel{background:var(--donker-2);border-color:rgba(255,255,255,.4);backdrop-filter:none;-webkit-backdrop-filter:none}}
/* minder beweging: één stilstaand beeld dat het hele verhaal laat zien (loop.js zet de eindstand neer) */
@media (prefers-reduced-motion:reduce){
  .loop .kaart,.loop .spoor::after,.loop .bestand,.loop .controles li i,.loop .controles li i::after{transition:none!important;animation:none!important}
}

/* ===== Veiligheid: zes kaarten met icoon ===== */
.zes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.zes > div{padding:28px;display:flex;flex-direction:column;gap:12px;background:var(--wit);border:1px solid var(--lijn);border-radius:var(--r-kader)}
.zes svg{width:22px;height:22px;color:var(--accent);margin-bottom:4px}
.zes h3{font-size:18px}
.zes p{font-size:15px;color:var(--gedempt)}
.zes details{margin-top:auto}

/* ===== Voor wie ===== */
.voorwie{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:80px;align-items:start}
.rollen{display:flex;flex-direction:column;margin-top:40px;border-top:1px solid var(--lijn)}
.rol{display:grid;grid-template-columns:120px 1fr;gap:20px;padding:20px 0;border-bottom:1px solid var(--lijn)}
.rol .label{padding-top:3px}
.rol span:last-child{font-size:15px;color:var(--gedempt)}
.beleid .regel{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:15px 18px;border-bottom:1px solid var(--lijn);font-size:14px;color:var(--tekst)}
.beleid .regel:last-child{border-bottom:0}
.beleid .regel small{display:block;color:var(--zacht);font-size:13px;margin-top:2px}
.schakel{flex:none;width:34px;height:20px;border-radius:999px;background:var(--accent);position:relative}
.schakel::after{content:"";position:absolute;top:3px;right:3px;width:14px;height:14px;border-radius:50%;background:#fff}
.bedragveld{font-family:var(--mono);font-size:13px;color:var(--inkt);border:1px solid var(--lijn-sterk);border-radius:6px;padding:6px 10px;white-space:nowrap}
.beleid .voet{padding:12px 18px;background:var(--tint);font-size:12px;color:var(--zacht);border-top:1px solid var(--lijn)}

/* ===== Slot van de voorpagina: direct naar de demo, contact als tweede knop (27 oktober 2026) ===== */
.slot{display:flex;flex-direction:column;align-items:center;text-align:center;gap:20px;max-width:720px}
.slot .lead{max-width:52ch}
.slot-knoppen{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:4px}
.na-regel-noot{display:block;margin-top:14px;font-size:15px;color:var(--zacht)}
.band.diep .na-regel-noot{color:rgba(255,255,255,.62)}
.contact h1{font-size:clamp(30px,3.3vw,44px);line-height:1.08;letter-spacing:-.025em}

/* ===== Contactpagina (/contact): de tekst links, het formulier rechts ===== */
.demo-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:80px;align-items:start}
.demo-tekst{display:flex;flex-direction:column;gap:20px}
/* Demopagina (/demo): dezelfde opbouw als /contact, met een tussenkop boven de opsomming */
.demo-tekst > p{font-size:16px;line-height:1.6;color:var(--tekst)}
.demo-tekst .demo-kopje{font-size:18px;letter-spacing:-.01em;margin-top:8px}
.bedankt h2{font-size:22px}
.vinkjes{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;border-top:1px solid var(--lijn)}
.vinkjes li{display:grid;grid-template-columns:24px 1fr;gap:8px;padding:14px 0;border-bottom:1px solid var(--lijn);font-size:15px;color:var(--tekst)}
.vinkjes li::before{content:"✓";color:var(--accent);font-size:13px;padding-top:1px}
.formulier{background:var(--wit);border-radius:var(--r-kader);box-shadow:var(--schaduw);padding:36px;display:grid;grid-template-columns:1fr 1fr;gap:20px}
.veld{display:flex;flex-direction:column;gap:8px}
.veld.breed{grid-column:1 / -1}
.veld label{font-size:14px;font-weight:500;color:var(--inkt)}
.veld label small{font-weight:400;color:var(--zacht);font-size:13px;margin-left:4px}
.veld input,.veld select{font:400 16px var(--sans);height:46px;padding:0 14px;border:1px solid var(--lijn-sterk);border-radius:var(--r);background:var(--wit);color:var(--inkt);width:100%;transition:border-color .15s,box-shadow .15s}
.veld input:hover,.veld select:hover{border-color:var(--zacht)}
.veld input:focus,.veld select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(43,79,138,.15)}
.veld textarea{font:400 16px/1.5 var(--sans);padding:12px 14px;border:1px solid var(--lijn-sterk);border-radius:var(--r);background:var(--wit);color:var(--inkt);width:100%;resize:vertical;min-height:96px;transition:border-color .15s,box-shadow .15s}
.veld textarea:hover{border-color:var(--zacht)}
.veld textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(43,79,138,.15)}
.formulier .knop{grid-column:1 / -1;height:50px;font-size:16px;margin-top:4px}
.formulier .knop[aria-busy="true"]{opacity:.7;pointer-events:none}
.formulier .klein{grid-column:1 / -1;font-size:13px;color:var(--zacht)}
.formulier-fout{grid-column:1 / -1;padding:12px 14px;border-radius:var(--r);background:var(--stop-bg);color:var(--stop);font-size:14px}
.formulier.bedankt{display:flex;flex-direction:column;gap:12px}
.bedankt h3{font-size:22px}
.bedankt p{color:var(--gedempt)}
.honing{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ===== Voet: donker (naar Attio en Column) ===== */
footer{padding:64px 0 48px;background:var(--donker);color:rgba(255,255,255,.62);font-size:14px}
footer .wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:48px}
footer .regels{display:flex;flex-direction:column;gap:6px;max-width:72ch}
footer .regels .merk{margin-bottom:10px;color:#fff}
footer .regels .merk .woord span{color:rgba(255,255,255,.6)}
footer .beeldmerk{color:#fff}
footer .tekstlink{color:#fff;border-color:rgba(255,255,255,.35)}
footer .tekstlink:hover{border-color:#fff}
footer .links{display:flex;gap:28px}
/* met Prijzen erbij (27 oktober 2026) acht links: ze lopen door op twee regels, zodat de bedrijfsgegevens links ruimte houden */
@media (min-width:1001px){footer .links{flex-wrap:wrap;justify-content:flex-end;align-content:flex-start;max-width:460px;gap:10px 28px}}
footer .links a{color:rgba(255,255,255,.75)}
footer .links a:hover{color:#fff}

/* klantquote: verborgen tot er een pilotkantoor is */
.quote{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:64px;align-items:center}
.quote-logo{display:grid;place-items:center;min-height:160px;border-radius:var(--r-kader);background:var(--tint);color:var(--accent);font-weight:600}
.quote blockquote{margin:0;font-size:26px;line-height:1.3;letter-spacing:-.02em;color:var(--inkt);font-weight:500}
.quote .wie{margin-top:16px;font-size:14px;color:var(--gedempt)}
.quote .wie b{color:var(--tekst);font-weight:500}

/* ===== Beweging: rustig verschijnen, alleen bovenin ===== */
@keyframes op{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.hero-tekst > *{animation:op .6s cubic-bezier(.2,.7,.2,1) both}
.hero-tekst > :nth-child(2){animation-delay:60ms}.hero-tekst > :nth-child(3){animation-delay:120ms}.hero-tekst > :nth-child(4){animation-delay:180ms}
.venster{animation:op .8s cubic-bezier(.2,.7,.2,1) .25s both}

/* ===== Telefoon en tussenmaat ===== */
@media (max-width:1000px){
  .band{padding:80px 0}
  .wrap{padding:0 20px}
  /* De menulinks op een eigen regel onder de kop (27 oktober 2026): zo staat "Prijzen" ook op de
     telefoon in beeld. Past hij niet, dan schuift alleen die regel, nooit de pagina. */
  .nav .wrap{height:auto;flex-wrap:wrap;padding-top:12px;gap:0 16px}
  .nav .merk,.nav-rechts{min-height:44px}
  .nav-links{order:3;flex-basis:calc(100% + 40px);display:flex;gap:22px;margin:12px -20px 0;padding:0 20px;border-top:1px solid var(--lijn);font-size:14px;white-space:nowrap;overflow-x:auto;scrollbar-width:none}
  .nav-links::-webkit-scrollbar{display:none}
  .nav-links a{padding:12px 0}
  html{scroll-padding-top:120px}
  .nav-rechts{gap:14px}
  .nav .knop{height:44px}
  .nav-rechts .inloggen{padding:12px 0}
  .hero{padding-top:56px}
  .hero-tekst{text-align:left;align-items:flex-start;gap:18px}
  .hero-knoppen{justify-content:flex-start}
  .venster{margin:36px -8px 0}
  .venster img{max-height:none}
  .beeld-noot{text-align:left}
  .tegels{grid-template-columns:1fr 1fr;gap:16px;margin-top:40px}
  .na-hero{padding-bottom:72px}
  .vertrouwen{justify-content:flex-start;gap:10px 24px;padding:16px 0}
  .voorwie,.demo-grid,.stap,.drie,.quote{grid-template-columns:minmax(0,1fr);gap:32px}
  .tegels.drie-tegels{grid-template-columns:minmax(0,1fr);gap:28px}
  .stappen{grid-template-columns:minmax(0,1fr);gap:0}
  .mac-kolom{display:none!important}
  .mac-aan .stap .paneel{display:block}
  .stap{padding-bottom:56px}
  .stap + .stap{padding-top:56px}
  .zes{grid-template-columns:1fr;gap:12px}
  .drie{gap:12px}
  .sectiekop{margin-bottom:40px}
  .formulier{grid-template-columns:1fr;padding:24px}
  .slot{align-items:flex-start;text-align:left}
  .slot-knoppen{justify-content:flex-start}
  footer .wrap{grid-template-columns:1fr}
  footer .links{flex-wrap:wrap;gap:0 24px}
  footer .links a{padding:12px 0}
  summary{padding:16px 0}
}
/* smalle telefoons: de kop past op één regel */
/* smal: de rustige knop (Plan een demo) verdwijnt uit de kop, de proef-knop blijft; de demo staat in hero, slot en voet */
@media (max-width:640px){.nav .knop-rustig{display:none}}
@media (max-width:480px){
  .wrap{padding:0 16px}
  .nav .wrap{gap:0 10px}
  .nav-links{flex-basis:calc(100% + 32px);margin-inline:-16px;padding-inline:16px;gap:20px}
  .merk{font-size:17px;gap:8px}
  .beeldmerk{width:24px;height:24px}
  .nav-rechts{gap:10px}
  .nav-rechts .inloggen{font-size:14px}
  .nav .knop{height:40px;padding:0 12px;font-size:13px}
  .nav .knop .dagen{display:none}      /* "Probeer gratis": anders past de kop niet op 375 px */
  .venster{margin-inline:-4px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero-tekst > *,.venster{animation:none}
  .knop:active{transform:none}
}

/* ===== Prijzenpagina (/prijzen, 27 oktober 2026) =====
   Eén prijs, geen pakketten. Opbouw naar Zenvoices (eigen pagina met Prijzen in het menu, rekenblok,
   vragen, slot), de kop naar Cycle (tekst links, kaart rechts) en Shuttle (één eerlijke kaart). Het
   rekenvoorbeeld is een factuur, in de panelen van de voorpagina. Geen accentblauw: inkt, nacht en de
   statuskleuren. Instelbare waarden hieronder. */
.prijzen{
  --prijs-kaart-breed:440px;      /* het prijskaartje rechts bovenaan */
  --prijs-bedrag:clamp(34px,3.6vw,48px);
  --prijs-label:var(--gedempt);   /* kleine bovenregel; bewust niet --accent */
  --prijs-telt:var(--klaar);      /* streep bij "Telt" */
  --prijs-nooit:var(--stop);      /* streep bij "Telt nooit" */
}
.prijzen-label{font:500 12px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--prijs-label)}
.prijzen-top{padding:88px 0 96px;background:linear-gradient(180deg,var(--verloop-van) 0%,var(--wit) 78%)}
.prijzen-kop{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,var(--prijs-kaart-breed));gap:72px;align-items:center}
.prijzen-tekst{display:flex;flex-direction:column;gap:22px}
.prijzen-tekst .lead b,.reken-tekst .lead b{color:var(--inkt);font-weight:600}
.prijzen-noot{font-size:15px;color:var(--gedempt)}
.prijskaart{background:var(--wit);border-radius:var(--r-kader);box-shadow:var(--schaduw);padding:32px;display:flex;flex-direction:column;gap:18px}
.prijsregel{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 14px}
.prijsregel.plus{padding-top:16px;border-top:1px dashed var(--lijn-sterk)}
.prijsregel.plus .prijs-bedrag::before{content:"+ ";color:var(--zacht);font-weight:400}
.prijs-bedrag{font-size:var(--prijs-bedrag);line-height:1;letter-spacing:-.04em;color:var(--inkt);font-weight:500;white-space:nowrap}
.prijs-eenheid{font-size:15px;line-height:1.4;color:var(--gedempt)}
.prijs-btw{font-size:13px;color:var(--zacht);padding-bottom:4px;border-bottom:1px solid var(--lijn)}
.prijs-punten{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;font-size:15px;color:var(--tekst)}
.prijs-punten li{display:grid;grid-template-columns:20px 1fr;gap:6px}
.prijs-punten li::before{content:"✓";color:var(--klaar);font-size:13px;padding-top:2px}
.prijs-knoppen{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.prijs-knoppen .knop{width:100%}
.prijzen .knop:focus-visible,.prijzen .tekstlink:focus-visible,.prijzen summary:focus-visible,.nav-links a:focus-visible{outline:2px solid var(--donker);outline-offset:3px}

/* rekenvoorbeeld: tekst links, de maandfactuur rechts */
.reken-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:80px;align-items:center}
.reken-tekst{display:flex;flex-direction:column;gap:18px}
.reken-tekst > p:not(.lead){color:var(--gedempt)}
.reken-factuur{background:var(--wit);border-radius:var(--r-kader);box-shadow:var(--schaduw);overflow:hidden}
.reken-invoer{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 18px;border-bottom:1px solid var(--lijn);background:#f6f8fb}
.reken-invoer[hidden]{display:none}
.reken-invoer label{font-size:14px;font-weight:500;color:var(--inkt)}
.reken-invoer input{font:500 16px var(--mono);font-variant-numeric:tabular-nums;width:120px;height:44px;padding:0 12px;text-align:right;border:1px solid var(--lijn-sterk);border-radius:var(--r);background:var(--wit);color:var(--inkt)}
.reken-invoer input:focus{outline:none;border-color:var(--donker);box-shadow:0 0 0 3px rgba(12,24,41,.12)}
.reken-regels{margin:0}
.reken-regels > div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:13px 18px;border-bottom:1px solid var(--lijn)}
.reken-regels > div:last-child{border-bottom:0}
.reken-regels dt{font-size:15px;color:var(--tekst);display:flex;flex-direction:column;gap:2px}
.reken-regels dt small{font:400 12px/1.4 var(--mono);color:var(--zacht)}
.reken-regels dd{margin:0;font-size:14px;color:var(--inkt);white-space:nowrap}
.reken-regels .sub{border-top:1px solid var(--lijn-sterk)}
.reken-regels .sub dt{font-weight:600;color:var(--inkt)}
.reken-regels .totaal{background:var(--donker)}
.reken-regels .totaal dt,.reken-regels .totaal dd{color:#fff;font-weight:600}
.reken-regels .totaal dd{font-size:16px}

/* wat telt en wat niet */
.prijzen-sectiekop{display:flex;flex-direction:column;gap:16px;max-width:760px;margin-bottom:48px}
.telt-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px}
.telt{border-top:2px solid var(--prijs-telt);padding-top:20px}
.telt.nooit{border-top-color:var(--prijs-nooit)}
.telt h3{display:flex;align-items:center;gap:10px}
.telt h3::before{content:"✓";font-size:15px;color:var(--prijs-telt)}
.telt.nooit h3::before{content:"✕";color:var(--prijs-nooit)}
.telt ul{list-style:none;margin:16px 0 0;padding:0;border-top:1px solid var(--lijn)}
.telt li{padding:14px 0;border-bottom:1px solid var(--lijn);font-size:16px;color:var(--tekst)}

/* betalen in vier stappen */
.betaal-stappen{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}
.betaal-stappen li{display:flex;flex-direction:column;gap:10px;padding-top:20px;border-top:1px solid var(--tint-lijn)}
.betaal-stappen .mono{font-size:12px;color:var(--zacht);letter-spacing:.06em}
.betaal-stappen h3{font-size:18px}
.betaal-stappen p{font-size:15px;color:var(--gedempt)}

/* vragen */
.prijzen-vragen{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:64px;align-items:start}
.vragen-lijst{border-bottom:1px solid var(--lijn)}
.vragen-lijst summary{font-size:17px;padding:18px 0}
.vragen-lijst .meer{font-size:16px;padding-bottom:20px}

@media (max-width:1000px){
  .prijzen-top{padding:56px 0 72px}
  .prijzen-kop,.reken-grid,.prijzen-vragen{grid-template-columns:minmax(0,1fr);gap:40px}
  .betaal-stappen{grid-template-columns:1fr 1fr;gap:28px}
  .prijzen-sectiekop{margin-bottom:32px}
}
@media (max-width:640px){
  .telt-grid,.betaal-stappen{grid-template-columns:minmax(0,1fr);gap:24px}
  .prijskaart{padding:24px}
  .reken-invoer{flex-direction:column;align-items:stretch}
  .reken-invoer input{width:100%}
  .reken-regels > div{padding:12px 16px}
}