/*
  Say this (5 oktober 2026): overzicht op /say-this en een pagina per zin.
  Zelfde wereld als support.html en de homepage: zwart vacuum, maanlicht als tekst,
  atmosfeerblauw als enige accent. Alleen zinnen die vandaag in de MCP werken;
  wat achter een vlag zit (domeinen, kluis, agents, pakketten, team, verhuizen) staat
  hier niet. De pagina's worden met de hand bijgehouden; de opbouw is per pagina gelijk.
*/
:root{
  --ruimte:#060708; --paneel:#0e1012; --paneel-2:#15181b; --ink:#f4f4f2; --mist:#a3a8ae; --tekst-2:#c7cacf;
  --lijn:rgba(255,255,255,.13); --lijn-sterk:rgba(255,255,255,.26); --atmosfeer:#9cc4e4;
  --display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --tekst:"Geist","Helvetica Neue",Arial,sans-serif;
  --mono:"Geist Mono",ui-monospace,Menlo,monospace;
  --gemak:cubic-bezier(.16,1,.3,1);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{background:var(--ruimte);scrollbar-color:#2a2e33 var(--ruimte)}
body{margin:0;background:var(--ruimte);color:var(--ink);font-family:var(--tekst);font-size:clamp(15px,.95rem + .1vw,17px);line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:clip}
::selection{background:var(--atmosfeer);color:var(--ruimte)}
a{color:var(--ink);text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.35)}
a:hover{text-decoration-color:var(--atmosfeer)}
:focus-visible{outline:1.5px solid var(--atmosfeer);outline-offset:4px}
h1,h2{margin:0;font-family:var(--display);text-wrap:balance}
p{margin:0}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.wrap{max-width:780px;margin-inline:auto;padding-inline:clamp(16px,4vw,32px)}
.wrap.breed{max-width:1320px}

/* kop */
.kop{border-bottom:1px solid var(--lijn)}
.kop .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;height:76px}
.woordmerk{font:600 1.05rem/1 var(--display);font-stretch:125%;letter-spacing:.32em;text-decoration:none;text-transform:uppercase}
.kop-links{display:flex;align-items:center;gap:clamp(14px,2.4vw,28px);font-size:.88rem}
.kop-links a:not(.knop){color:var(--mist);text-decoration:none}
.kop-links a:not(.knop):hover{color:var(--ink)}
@media (max-width:440px){.woordmerk{letter-spacing:.22em}.kop-links a[href="/docs"]{display:none}}

/* knoppen */
.knop{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:13px 24px;font:600 .875rem/1.4 var(--tekst);letter-spacing:.01em;text-decoration:none;border:1px solid var(--lijn-sterk);color:var(--ink);background:transparent;cursor:pointer;transition:background .25s var(--gemak),color .25s var(--gemak),border-color .25s var(--gemak)}
.knop:hover{border-color:var(--ink)}
.knop.hoofd{background:var(--ink);color:var(--ruimte);border-color:var(--ink)}
.knop.hoofd:hover{background:var(--atmosfeer);border-color:var(--atmosfeer)}
.knop.klein{min-height:36px;padding:0 14px;font-size:.78rem}
.knop .pijl{transition:transform .3s var(--gemak)}
.knop:hover .pijl{transform:translateX(4px)}
.knop .pijl.schuin{transform:rotate(-45deg)}
.knop:hover .pijl.schuin{transform:translate(3px,-3px) rotate(-45deg)}
.tekstlink{color:var(--mist);font-size:.9rem}
.tekstlink:hover{color:var(--ink)}

.etiket{display:block;font:500 .7rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mist)}

main{padding-block:clamp(48px,8vw,100px) clamp(70px,10vw,130px)}

/* overzicht */
.overzicht-kop{max-width:860px}
.overzicht-kop h1{margin-top:22px;font-size:clamp(2.5rem,1.2rem + 4.4vw,5rem);font-weight:470;letter-spacing:-.045em;line-height:1}
.zacht{color:var(--mist)}
.overzicht-kop .intro{margin-top:28px;font-size:1.12rem;line-height:1.6;color:var(--tekst-2);max-width:40em}

.kaarten{list-style:none;margin:clamp(48px,6vw,80px) 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:1px;background:var(--lijn);border:1px solid var(--lijn)}
.kaarten li{background:var(--ruimte);display:flex}
.kaarten a{position:relative;display:flex;flex-direction:column;gap:12px;width:100%;padding:28px 28px 64px;text-decoration:none;transition:background .3s var(--gemak)}
.kaarten a:hover{background:var(--paneel)}
.kaarten b{font:500 1.3rem/1.25 var(--display);letter-spacing:-.02em;color:var(--ink)}
.kaarten span{color:var(--mist);font-size:.95rem}
.kaarten .pijl{position:absolute;left:28px;bottom:24px;font-style:normal;color:var(--atmosfeer);transition:transform .3s var(--gemak)}
.kaarten a:hover .pijl{transform:translateX(5px)}
.kaarten.klein{margin-top:22px;grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr))}
.kaarten.klein a{padding:20px 20px 22px;gap:8px}
.kaarten.klein b{font-size:1.02rem}
.kaarten.klein span{font-size:.86rem}

.start{margin-top:clamp(64px,8vw,110px);border-top:1px solid var(--lijn);padding-top:clamp(36px,4vw,52px)}
.start h2{font:520 1.5rem/1.2 var(--display);letter-spacing:-.02em}
.start-grid{margin-top:26px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:clamp(20px,3vw,40px)}
.start-grid p{color:var(--tekst-2);font-size:.96rem}
.start-grid b{display:block;color:var(--ink);font-weight:550;margin-bottom:6px}
.start-grid a{display:inline-block;margin-top:8px;color:var(--ink)}

/* zinpagina */
.kruimel{display:flex;flex-wrap:wrap;gap:10px;font:500 .72rem/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mist)}
.kruimel a{color:var(--mist);text-decoration:none}
.kruimel a:hover{color:var(--ink)}
article h1{margin-top:26px;font-size:clamp(2.2rem,1.3rem + 3.2vw,3.8rem);font-weight:500;letter-spacing:-.04em;line-height:1.04}
article .intro{margin-top:24px;font-size:1.12rem;line-height:1.6;color:var(--tekst-2)}

.zin{margin:clamp(36px,5vw,56px) 0 0;padding:clamp(22px,3vw,32px);background:var(--paneel);border:1px solid var(--lijn);border-left:2px solid var(--atmosfeer)}
.zin blockquote{margin:16px 0 0}
.zin blockquote p{font:480 clamp(1.25rem,1rem + 1vw,1.7rem)/1.35 var(--display);letter-spacing:-.02em;color:var(--ink)}
.zin blockquote p::before{content:"“"}
.zin blockquote p::after{content:"”"}
.zin-actie{margin-top:24px;display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.kopieer-status{font-size:.88rem;color:var(--atmosfeer)}

article h2{margin-top:clamp(44px,6vw,64px);font-size:1.4rem;font-weight:540;letter-spacing:-.02em;line-height:1.25}
.stappen{list-style:none;counter-reset:stap;margin:20px 0 0;padding:0;border-top:1px solid var(--lijn)}
.stappen li{counter-increment:stap;display:grid;grid-template-columns:44px minmax(0,1fr);gap:8px;padding:16px 0;border-bottom:1px solid var(--lijn);color:var(--tekst-2)}
.stappen li::before{content:counter(stap,decimal-leading-zero);font:500 .78rem/1.9 var(--mono);color:var(--atmosfeer)}
.nodig,.weten{margin:18px 0 0;padding-left:1.15em;color:var(--tekst-2)}
.nodig li,.weten li{margin-top:10px}
.nodig b{color:var(--ink);font-weight:550}
.acties{margin-top:26px;display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px}

.voorbeeld{margin-top:clamp(44px,6vw,64px);padding:clamp(22px,3vw,30px);border:1px solid var(--lijn);display:grid;gap:14px;justify-items:start}
.voorbeeld p:not(.etiket){color:var(--tekst-2)}

.meer{margin-top:clamp(56px,7vw,90px);border-top:1px solid var(--lijn)}

/* voet */
footer{border-top:1px solid var(--lijn);color:var(--mist);font-size:.82rem}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;padding-block:28px}
footer a{color:var(--mist);text-decoration:none}
footer a:hover{color:var(--ink)}
.voet-links{display:flex;flex-wrap:wrap;gap:12px 18px}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}