/* De site (voorstel van 24 september 2026, gekozen door Mees; teal als hele schaal en een hero
   met alleen tekst op 26 september). Onderzoek: ontwerp/onderzoek/refero-2026-09-24.md,
   besluiten: ontwerp/site/besluiten.md. Letters zelf gehost via /statisch/fonts/fonts.css. */
/* Referentieslot (ontwerp/onderzoek/refero-2026-09-24.md)
   Basis Column: wit, fijn stippenraster, strakke schreefloze letter op 600 met negatieve
   letterafstand, cijfers in mono, hoek 8, gelaagde haarlijnschaduw, wit/mist-banden.
   Kleur (Mees, 26 september 2026: "meer kleuren"): de teal van het merk als hele schaal.
   Licht voor de banden, donker voor het ene statement (Het verschil), midden voor labels,
   iconen en lijnen. De gevulde knop blijft de enige volle teal. Groen/oranje/rood alleen als uitkomst. */
:root{
  color-scheme:light;
  --wit:#ffffff;
  --mist:#f6f7f7;
  --teal-50:#eef6f5;
  --teal-100:#d7eae8;
  --teal-300:#8fc6c4;
  --teal-600:#1d6266;
  --teal-700:#164f52;
  --teal-900:#0d2f31;
  --lijn:#e3e5e5;
  --lijn-sterk:#cfd3d3;
  --inkt:#101514;
  --tekst:#2b3130;
  --gedempt:#636a69;
  --zacht:#8d9392;
  --actie:#1d6266;
  --actie-hover:#154b4e;
  --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;
  --schaduw:0 0 0 1px rgba(16,21,20,.06),0 1px 2px rgba(16,21,20,.06),0 12px 32px -12px rgba(16,21,20,.14);
  --breed:1200px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
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,5.4vw,70px);line-height:1.02;letter-spacing:-.035em}
h2{font-size:clamp(30px,3.4vw,46px);line-height:1.06;letter-spacing:-.03em}
h3{font-size:20px;line-height:1.3;letter-spacing:-.012em}
.lead{font-size:19px;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(--teal-700)}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.wrap{max-width:var(--breed);margin:0 auto;padding:0 32px}
.band{padding:128px 0}
.band.mist{background:var(--teal-50);border-block:1px solid var(--teal-100)}
.band.diep{background:var(--teal-900);color:rgba(255,255,255,.74)}
.band.diep h2{color:#fff}
.band.diep .label{color:var(--teal-300)}
.band.diep .tekstlink{color:#fff;border-color:rgba(255,255,255,.35)}
.band.diep .tekstlink:hover{border-color:#fff}

/* knoppen: drukken reageert meteen */
.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(--actie);color:#fff}
.knop-actie:hover{background:var(--actie-hover)}
.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(--actie);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:" →"}

/* nav */
.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{font-weight:700;font-size:19px;letter-spacing:-.03em;color:var(--inkt)}
.merk span{color:var(--gedempt);font-weight:600}
.nav-links{display:flex;gap:28px;font-size:15px;color:var(--gedempt)}
.nav-links a:hover{color:var(--inkt)}
.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}
@media (prefers-reduced-transparency:reduce){.nav{background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none}}

/* hero */
.hero{position:relative;padding:96px 0 112px;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle at 1px 1px,rgba(29,98,102,.16) 1px,transparent 0);background-size:24px 24px;-webkit-mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.6) 55%,transparent 92%);mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.6) 55%,transparent 92%);pointer-events:none}
.hero::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 60% 70% at 88% 0%,rgba(29,98,102,.10),transparent 70%);pointer-events:none}
.hero .wrap{position:relative;z-index:1}
.hero-tekst{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:64px;row-gap:24px;align-items:end}
.hero-tekst .label{grid-column:1 / -1}
.hero-links{display:flex;flex-direction:column}
.hero-rechts{display:flex;flex-direction:column;gap:24px;padding-bottom:8px}
.hero-tekst .lead{font-size:18px}
.hero-knoppen{display:flex;gap:12px;flex-wrap:wrap}
.hero-noot{font-size:14px;color:var(--zacht)}

/* 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)}

/* feiten */
.feiten{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--lijn)}
.feit{padding:28px 28px 8px 0;display:flex;flex-direction:column;gap:8px}
.feit + .feit{padding-left:28px;border-left:1px solid var(--lijn)}
.feit b{font-size:17px;font-weight:600;color:var(--inkt);letter-spacing:-.01em}
.feit span{font-size:15px;color:var(--gedempt);line-height:1.55}

/* belofte */
.belofte{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:64px;align-items:end}
.belofte .lead{font-size:19px}

/* stappen */
.sectiekop{display:flex;flex-direction:column;gap:18px;max-width:760px;margin-bottom:72px}
.stappen{display:grid;grid-template-columns:240px minmax(0,1fr);gap:72px;align-items:start}
.stapindex{position:sticky;top:120px;display:flex;flex-direction:column;border-left:1px solid var(--lijn)}
.stapindex a{display:grid;grid-template-columns:32px 1fr;gap:4px;padding:10px 0 10px 18px;margin-left:-1px;border-left:2px solid transparent;color:var(--zacht);font-size:15px;transition:color .2s,border-color .2s}
.stapindex a .mono{font-size:12px;padding-top:2px}
.stapindex a.aan{color:var(--teal-700);border-left-color:var(--teal-600);font-weight:500}
.stapindex{border-left-color:var(--teal-100)}
.stap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:start;padding:0 0 88px;scroll-margin-top:110px}
.stap + .stap{padding-top:88px;border-top:1px solid var(--lijn)}
.stap-tekst{display:flex;flex-direction:column;gap:16px}
.stap-tekst h3{font-size:26px;letter-spacing:-.025em;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}

/* visuals bij de stappen */
.paneel{background:var(--wit);border-radius:12px;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}
.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{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px}
.kolom{display:flex;flex-direction:column;gap:14px;padding-top:24px;border-top:2px solid var(--teal-600)}
.kolom h3{font-size:20px}
.kolom > p{color:var(--gedempt);font-size:15px}

/* verschil */
.verschil{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:80px;align-items:start}
.verschil-tekst{display:flex;flex-direction:column;gap:20px}
.verschil-tekst p{color:inherit}
.tabel{width:100%;border-collapse:collapse;font-size:15px;background:var(--wit);border-radius:12px;box-shadow:0 30px 60px -24px rgba(0,0,0,.45);overflow:hidden}
.tabel th{text-align:left;font:500 12px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--zacht);padding:16px 20px;border-bottom:1px solid var(--lijn)}
.tabel td{padding:15px 20px;border-bottom:1px solid var(--lijn);vertical-align:top}
.tabel tr:last-child td{border-bottom:0}
.tabel td:first-child{color:var(--inkt);font-weight:500}
.tabel td:last-child{color:var(--gedempt)}
.tabel td:last-child::before{content:"✕";font-size:11px;color:var(--zacht);margin-right:10px}
.tabel td:first-child::before{content:"✓";font-size:12px;color:var(--klaar);margin-right:10px}
.na-tabel{margin-top:32px}

/* veiligheid */
.zes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--lijn)}
.zes > div{padding:36px 36px 36px 0;display:flex;flex-direction:column;gap:12px;border-bottom:1px solid var(--lijn)}
.zes > div:not(:nth-child(3n+1)){padding-left:36px;border-left:1px solid var(--lijn)}
.zes svg{width:20px;height:20px;color:var(--teal-600)}
.zes h3{font-size:18px}
.zes p{font-size:15px;color:var(--gedempt)}
.zes details{margin-top:4px}

/* 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(--teal-600);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(--teal-50);font-size:12px;color:var(--zacht);border-top:1px solid var(--lijn)}

/* demo */
.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}
.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(--teal-600);font-size:13px;padding-top:1px}
.formulier{background:var(--wit);border-radius:12px;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(--actie);box-shadow:0 0 0 3px rgba(29,98,102,.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)}

/* voet */
footer{padding:64px 0 48px;border-top:1px solid var(--lijn);font-size:14px;color:var(--gedempt)}
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}
footer .links{display:flex;gap:28px}
footer .links a:hover{color:var(--inkt)}

/* rustig verschijnen, alleen de hero */
@keyframes op{from{opacity:0;transform:translateY(8px)}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:140ms}

@media (max-width:1000px){
  .band{padding:88px 0}
  .wrap{padding:0 20px}
  .nav-links{display:none}
  .nav .wrap{gap:16px}
  .nav-rechts{gap:14px}
  .nav .knop{height:44px}
  .nav-rechts .inloggen{padding:12px 0}
  .hero{padding-block:56px 72px}
  .hero-tekst{grid-template-columns:minmax(0,1fr)}
  .hero-rechts{padding-bottom:0}
  .feiten{grid-template-columns:1fr}
  .feit,.feit + .feit{padding:20px 0;border-left:0;border-bottom:1px solid var(--lijn)}
  .belofte,.verschil,.voorwie,.demo-grid,.stap,.drie{grid-template-columns:minmax(0,1fr);gap:40px}
  .stappen{grid-template-columns:minmax(0,1fr);gap:0}
  .stapindex{display:none}
  .stap{padding-bottom:64px}
  .stap + .stap{padding-top:64px}
  .zes{grid-template-columns:1fr}
  .zes > div,.zes > div:not(:nth-child(3n+1)){padding:28px 0;border-left:0}
  .sectiekop{margin-bottom:48px}
  .formulier{grid-template-columns:1fr;padding:24px}
  footer .wrap{grid-template-columns:1fr}
  footer .links{flex-wrap:wrap;gap:0 24px}
  footer .links a{padding:12px 0}
  summary{padding:16px 0}
}
@media (prefers-reduced-motion:reduce){
  .hero-tekst > *{animation:none}
  .knop:active{transform:none}
}

/* formulier op de echte site: foutmelding, bedankt, tekstvak en het verborgen honingpotveld */
.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(--actie);box-shadow:0 0 0 3px rgba(29,98,102,.15)}
.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}

/* klantquote: staat verborgen tot er een pilotkantoor is (ontwerp/landingspagina-brief.md §5) */
.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:12px;background:var(--teal-50);color:var(--teal-700);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}
@media (max-width:1000px){.quote{grid-template-columns:minmax(0,1fr);gap:32px}}