/* ═══════════════════════════════════════════════════════════════════════════
   Sidura AI — de site

   Vijf pagina's, geen build-stap. Elke pagina heeft een eigen accentkleur die
   doorwerkt in de gloed achter de inhoud, de kopjes en de knoppen. Daardoor
   voelt doorklikken als ergens anders komen in plaats van als scrollen in
   dezelfde bak.

   De beweging komt uit de verhaalpagina van de demo: per scène zet het script
   een variabele --v van 0 naar 1, en alles wat beweegt leest die. Geen
   bibliotheek — deze pagina moet het doen op de wifi van een klant, en een
   scrollbibliotheek van een CDN is precies wat er dan niet laadt.

   Zonder JavaScript staat alles in zijn eindstand: --v begint op 1.
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Sora'; font-style: normal; font-weight: 400 600;
  font-display: swap; src: url('assets/fonts/sora-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+2212;
}
@font-face {
  font-family: 'Sora'; font-style: normal; font-weight: 400 600;
  font-display: swap; src: url('assets/fonts/sora-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+1E00-1E9F, U+20A0-20AB;
}
@font-face {
  font-family: 'Archivo'; font-style: normal; font-weight: 400 700;
  font-display: swap; src: url('assets/fonts/archivo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+2212;
}
@font-face {
  font-family: 'Archivo'; font-style: normal; font-weight: 400 700;
  font-display: swap; src: url('assets/fonts/archivo-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+1E00-1E9F, U+20A0-20AB;
}

:root {
  /* De donkere stand is de diapositieve kant van de huisstijl: de grond is
     inkt, de tekst kalk, het zegel staat er marmerwit in.

     De grond is warm bruinzwart en niet zwart. Zwart is goedkoop op een scherm
     — het geeft de pagina geen ruimte maar een gat — en het haalt bovendien
     alle kleur uit de terracotta ernaast. #241f19 houdt de aarde erin.

     Let op de naamval: --inkt is hier de gróndkleur van de site, terwijl Inkt
     in de huisstijl de kleur van het merk is. De variabele heette al zo en
     wordt door het hele stijlblad gelezen; hem omdopen raakt honderd regels
     zonder dat er iets beter van wordt.

     Terracotta is opgelicht naar #da7a57. Het merkhue #b0472a haalt op deze
     grond 3,2:1 en dat is te weinig voor een link; opgelicht is het 5,4:1 en
     op een paneel nog 4,8:1. Het zegel houdt wél de volle kleur — een schijf
     van twaalf pixel hoeft geen leescontrast te halen, een link wel. */
  --inkt: #241f19;
  --vlak: #2e2820;
  --vlak-2: #382f26;
  --tekst: #d9d1c1;
  --kop: #f6f2e9;
  --zacht: #a89e8d;
  --terracotta: #da7a57;
  --terracotta-fel: #e08a68;
  --klei: #b0472a;
  --zee: #7bb0c4;
  --paars: #b07f9c;
  --groen: #88a878;
  --oker: #d9a24e;
  --lijn: rgba(246,242,233,.13);
  --lijn-fel: rgba(246,242,233,.25);
  /* De banen in de tekeningen. Ze stonden als vaste hexen in de SVG's, in het
     oude blauw; daardoor konden ze niet meeschakelen naar de lichte stand.
     Als variabele doen ze dat wel. --teken-baan-fel is waar de lijn moet
     spreken. */
  --teken-baan: #a8907a;
  --teken-baan-fel: #c9b39a;
  --maxw: 1200px;
  --font: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, sans-serif;
  --kopfont: 'Sora', var(--font);
  /* Terracotta draagt alles wat je aanklikt; zeeblauw is de steunkleur en
     draagt alles wat je alleen maar hoeft te zien. Zie huisstijl/palet.md. */
  --accent: var(--terracotta);
  --accent-2: var(--zee);
}

/* De lichte stand is geen papier maar een scherm. De huisstijl heeft marmer
   als grond, en op drukwerk klopt dat; op een softwarepagina werd het zand.
   Hier staat de tekst daarom op wit, met een warmgrijze band om de secties uit
   elkaar te houden. De warmte zit in de tint van dat wit en in terracotta, niet
   in de grond. */
:root[data-thema="licht"] {
  --inkt: #f7f5f2;
  --vlak: #ffffff;
  --vlak-2: #f4f1ec;
  --tekst: #3d3931;
  --kop: #1d1a15;
  --zacht: #6d6759;
  --terracotta: #a33f22;
  --terracotta-fel: #b0472a;
  --klei: #8f3a22;
  --zee: #2c5f73;
  --paars: #7d3f63;
  --groen: #4a6b3a;
  --oker: #8a6114;
  --lijn: rgba(29,26,21,.12);
  --lijn-fel: rgba(29,26,21,.26);
  --teken-baan: #847c6e;
  --teken-baan-fel: #4d483f;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0; background: var(--inkt); color: var(--tekst);
  font-family: var(--font); font-size: 17px; line-height: 1.66;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}

/* ── Drijvende achtergrond ──────────────────────────────────────────────────
   Twee gloeden die met de scroll door het beeld schuiven en van elkaar weg
   bewegen. Eén vast element achter alles: goedkoper dan een verloop per sectie,
   en het loopt door over de secties heen. Daardoor blijft de pagina één ruimte
   in plaats van een stapel blokken.                                          */

.achtergrond {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(46% 38% at calc(18% + var(--paginavoortgang, 0) * 22%)
      calc(16% + var(--paginavoortgang, 0) * 26%),
      color-mix(in srgb, var(--accent) 20%, transparent), transparent 68%),
    radial-gradient(42% 36% at calc(84% - var(--paginavoortgang, 0) * 26%)
      calc(72% - var(--paginavoortgang, 0) * 30%),
      color-mix(in srgb, var(--accent-2) 15%, transparent), transparent 66%);
}
/* ── De lichte stand ────────────────────────────────────────────────────────
   Geen drijvende gloed, maar blokken die om en om wit en lichtgrijs zijn. Op
   een donkere ondergrond geeft die gloed diepte; op wit wordt het een vlek. Een
   nette wissel per blok doet daar hetzelfde werk: hij laat zien waar een
   onderwerp ophoudt.                                                          */

:root[data-thema="licht"] .achtergrond { display: none; }

:root[data-thema="licht"] body { background: var(--vlak); }
:root[data-thema="licht"] main > section:nth-of-type(even) { background: var(--vlak-2); }

/* De hero telt als eerste blok, dus die is wit; de scheiding met het blok
   eronder komt van de kleurwissel en niet meer van een lijn. */
:root[data-thema="licht"] .hero:not(.hero-home) {
  background: var(--vlak); border-bottom: 1px solid var(--lijn);
}
:root[data-thema="licht"] .hero-home { background: var(--vlak); }

/* De randlijnen mogen weg waar de kleur het werk al doet. Alleen waar twee
   blokken dezelfde kleur hebben blijft er een lijn nodig. */
:root[data-thema="licht"] main > section.rand-boven { border-top: 0; }
:root[data-thema="licht"] main > section:nth-of-type(odd) + section:nth-of-type(odd),
:root[data-thema="licht"] main > section:nth-of-type(even) + section:nth-of-type(even) {
  border-top: 1px solid var(--lijn);
}

/* Kaarten op een grijs blok hebben een eigen wit vlak nodig, anders vallen ze
   weg tegen de ondergrond. */
:root[data-thema="licht"] main > section:nth-of-type(even) .kaart,
:root[data-thema="licht"] main > section:nth-of-type(even) .prijskaart,
:root[data-thema="licht"] main > section:nth-of-type(even) details,
:root[data-thema="licht"] main > section:nth-of-type(even) .tabelrand {
  background: var(--vlak);
}

main, header, footer { position: relative; z-index: 1; }

h1, h2, h3 { font-family: var(--kopfont); color: var(--kop); line-height: 1.12; margin: 0; }
h1 { font-size: clamp(2.3rem, 6vw, 4.2rem); letter-spacing: -.025em; }
h2 { font-size: clamp(1.7rem, 3.8vw, 2.7rem); letter-spacing: -.018em; }
h3 { font-size: 1.14rem; letter-spacing: -.005em; }
p { margin: 0 0 1rem; }
a { color: var(--accent); }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(22px, 5vw, 44px); }
.smal { max-width: 760px; }
section { padding: clamp(56px, 9vw, 110px) 0; }
.rand-boven { border-top: 1px solid var(--lijn); }
.inleiding { color: var(--zacht); max-width: 62ch; font-size: 1.04rem; }

/* ── Voortgangsbalk en topbalk ───────────────────────────────────────────── */

.voortgang {
  position: fixed; top: 0; left: 0; height: 2px; width: 0; z-index: 60;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
}

/* ── Bovenbalk met contact ──────────────────────────────────────────────────
   Dun en rustig: het is geen navigatie maar een naslagregel. Wie wil bellen
   hoeft niet naar beneden te scrollen.                                       */

.topbalk { border-bottom: 1px solid var(--lijn);
           background: color-mix(in srgb, var(--vlak) 55%, transparent); }
.topbalk .wrap { display: flex; align-items: center; gap: 22px; height: 38px; }
.topbalk a { color: var(--zacht); text-decoration: none; font-size: .84rem;
             display: inline-flex; align-items: center; gap: 7px; }
.topbalk a:hover { color: var(--kop); }
.topbalk a svg { width: 14px; height: 14px; opacity: .7; }
.topbalk a:hover svg { opacity: 1; color: var(--accent); }

/* De licht/donker-knop: klein, rond en zonder tekst. Hij hoort beschikbaar te
   zijn, niet op te vallen. */
.thema { margin-left: auto; background: none; border: 0; padding: 5px;
         color: var(--zacht); cursor: pointer; border-radius: 7px;
         display: inline-flex; opacity: .55; }
.thema svg { width: 15px; height: 15px; }
.thema:hover { opacity: 1; color: var(--kop); background: rgba(255,255,255,.06); }
:root[data-thema="licht"] .thema:hover { background: rgba(6,17,29,.06); }

/* ── Hoofdbalk ──────────────────────────────────────────────────────────────
   Drie kolommen: merk, navigatie, knop. De navigatie staat gecentreerd in de
   middelste kolom, zodat hij niet tegen de knop aan gedrukt wordt.           */

header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--inkt) 86%, transparent);
  backdrop-filter: blur(14px); border-bottom: 1px solid var(--lijn);
}
.balk { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
        gap: 18px; height: 66px; }
/* De naam staat in kapitalen met ruime spatiëring. Dat is de schrijfwijze van
   een inscriptie, en naast een Grieks zegel is dat de enige zetting die niet
   vloekt. Kapitalen lezen groter dan onderkast, dus het korps gaat omlaag.
   Alleen "AI" is terracotta — hetzelfde als het hart van het zegel, en het
   enige gekleurde element op de pagina buiten de accenten. */
.merk { font-family: var(--kopfont); font-size: .92rem; font-weight: 600; color: var(--kop);
        text-decoration: none; text-transform: uppercase; letter-spacing: .16em;
        display: flex; align-items: center; gap: 11px; justify-self: start; }
.merk-ai { color: var(--terracotta-fel); }
/* Het merkteken: het zegel uit deel/svg/merk.svg.html.

   De ring is een meander — de Griekse sleutel, een lijn die zichzelf eindeloos
   ordent. Dat is wat sidur betekent. In het hart de gesloten schijf waar die
   ordening op uitkomt.

   De lijndikte staat nu wél in de tekening en niet meer hier. Bij de oude
   sigma was een dikkere lijn de enige manier om hem klein leesbaar te houden;
   bij het zegel doet een ándere snit dat werk. In de balk staat de middensnit
   met acht sleutels, in de voettekst de kleine met alleen ring en hart. Een
   lijn oprekken zou de twaalf sleutels alleen maar sneller dichttrekken.

   De ring leest --kop en niet --accent: het merk hoort niet mee te verschieten
   met een pagina-accent, en op donker hoort hij marmerwit te zijn en op licht
   inkt — precies wat --kop al doet. Alleen het hart is gekleurd. */
.teken { flex: none; }
.teken .teken-ring,
.teken .teken-sleutel { fill: none; stroke: var(--kop); stroke-linejoin: miter; }
.teken .teken-hart { fill: var(--terracotta-fel); }

.merk .teken { width: 26px; height: 26px; }

/* Een zegel wordt gedrukt, niet getekend: hij zet zich één keer neer in plaats
   van dat hij zichzelf natrekt. Achter .js, want zonder script hoort hij er
   gewoon te staan, en achter een voorkeurstoets, want een merk dat blijft
   bewegen is een merk dat afleidt. */
@media (prefers-reduced-motion: no-preference) {
  .js .merk .teken { animation: zegel-in .46s cubic-bezier(.2,.72,.3,1) forwards; }
}
@keyframes zegel-in { from { opacity: 0; transform: scale(1.16); }
                        to { opacity: 1; transform: none; } }

nav { display: flex; gap: 4px; align-items: center; justify-self: center; }
nav a { color: var(--zacht); text-decoration: none; font-size: .94rem; padding: 8px 15px;
        border-radius: 9px; white-space: nowrap; }
nav a:hover { color: var(--kop); background: rgba(255,255,255,.05); }
:root[data-thema="licht"] nav a:hover { background: rgba(6,17,29,.05); }
nav a[aria-current="page"] { color: var(--kop); }
nav a[aria-current="page"]::after {
  content: ""; display: block; height: 2px; margin-top: 4px; border-radius: 2px;
  background: var(--accent);
}

/* De knop staat in zijn eigen kolom, dus met ruimte tussen hem en de laatste
   navigatie-link. Hij is een andere soort actie en hoort niet in de rij. */
.balk .demo { justify-self: end; padding: 9px 18px; font-size: .92rem; }

/* ── Hero ────────────────────────────────────────────────────────────────── */

/* De opening vult het scherm en staat gecentreerd, zoals het verhaal in de
   demo. Dat leest als de eerste beeldwissel van een film in plaats van als de
   bovenkant van een formulier — en het is de enige plek op de site waar dat
   mag: overal daarna staat de tekst links, want daar wordt gelezen. */
/* De hero van de subpagina's: gecentreerd, en beduidend lager dan de home. Dat
   verschil in hoogte is het signaal dat je op een subpagina bent — je hoeft niet
   te lezen om te zien dat dit niet de voorpagina is. */
.hero { position: relative; text-align: center;
        padding: clamp(52px, 7vw, 92px) 0 clamp(44px, 6vw, 72px); }

/* De subpagina-hero krijgt een eigen vlak: net iets lichter dan de pagina
   eronder, met een lijn eronder. Halfdoorzichtig, zodat de drijvende gloed erin
   blijft meebewegen — een dichte kleur zou het blok van de pagina losknippen.
   Samen met de lagere hoogte is dit het tweede signaal dat je op een subpagina
   bent. */
.hero:not(.hero-home) {
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--vlak-2) 96%, transparent),
    color-mix(in srgb, var(--vlak) 62%, transparent));
  border-bottom: 1px solid var(--lijn);
}
/* De sectie erna heeft zijn eigen bovenrand; twee lijnen op elkaar is een
   dubbele streep. */
.hero:not(.hero-home) + .rand-boven { border-top: 0; }
.hero .wrap { width: 100%; }
.hero h1 { max-width: 22ch; margin: 0 auto; }
.hero .lead { max-width: 58ch; margin: 1.5rem auto 0; }
.hero .acties { justify-content: center; }

/* De home krijgt de volle hoogte, met de robot ernaast — en daar staat de tekst
   wél links, want hij deelt de ruimte met het beeld. */
/* Geen min-height: de inhoud bepaalt de hoogte. Met een vaste hoogte plus
   padding liep het denkvenster op een laptopscherm net buiten beeld. */
.hero-home { text-align: left;
             padding: clamp(34px, 4.5vw, 62px) 0 clamp(56px, 6vw, 86px); }
.hero-home h1, .hero-home .lead { margin-left: 0; margin-right: 0; }
.hero-home .acties { justify-content: flex-start; }
.hero-grid { display: grid; grid-template-columns: 1.45fr 1fr; gap: clamp(28px, 5vw, 60px);
             align-items: center; }
.hero-home h1 { max-width: 15ch; font-size: clamp(2.1rem, 4.6vw, 3.4rem); }

/* Onder de 980 pixels valt de robot weg: hij is sfeer, en sfeer mag wijken
   voor leesbaarheid. */
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-robot { display: none; }
}

/* ── Het denkvenster onder de robot ─────────────────────────────────────────
   Vijf regels die om de beurt oplichten: wat de agents die ochtend doen, in de
   volgorde waarin ze het doen. Puur CSS met een vertraging per regel — geen
   script, en zonder animatie staat alles er gewoon.                          */

.hero-robot { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.hero-robot > svg { width: 100%; max-width: 214px; height: auto; }

.denkt { width: 100%; max-width: 320px; border: 1px solid var(--lijn); border-radius: 12px;
         background: color-mix(in srgb, var(--vlak) 78%, transparent);
         backdrop-filter: blur(6px); overflow: hidden;
         font-size: 12.5px; line-height: 1.5; }
.denkt-kop { display: flex; align-items: center; gap: 5px; padding: 8px 12px;
             border-bottom: 1px solid var(--lijn); color: var(--zacht);
             font-size: 11px; letter-spacing: .04em; }
.denkt-kop .bol { width: 7px; height: 7px; border-radius: 50%; background: var(--lijn-fel); }
.denkt-kop .bol:first-child { background: color-mix(in srgb, var(--accent-2) 70%, transparent); }
.denkt-kop { justify-content: flex-start; }
.denkt-kop span:nth-child(3) { margin-right: 7px; }

.denkt-regels { list-style: none; margin: 0; padding: 9px 12px 11px; }
.denkt-regels li { display: flex; align-items: baseline; gap: 8px; padding: 2px 0;
                   color: var(--tekst); }
.denkt-regels .tijd { color: var(--accent); font-variant-numeric: tabular-nums; flex: none; }
.denkt-regels b { margin-left: auto; color: var(--zacht); font-weight: 500; }
.denkt-regels b.wacht { color: var(--accent-2); }

/* De regels lichten om de beurt op en beginnen daarna opnieuw. Zonder animatie
   staan ze er alle vijf, gewoon zichtbaar. */
@media (prefers-reduced-motion: no-preference) {
  .denkt-regels li { animation: denk 9s ease-in-out infinite;
                     animation-delay: calc(var(--i) * .55s); }
}
@keyframes denk {
  0%, 4%   { opacity: .18; transform: translateX(-4px); }
  9%, 46%  { opacity: 1; transform: none; }
  62%, 100% { opacity: .3; transform: none; }
}

/* Zweven, af en toe knipperen, en een radarpuls uit de antenne. Alles achter
   prefers-reduced-motion: dit is versiering, geen informatie. */
@media (prefers-reduced-motion: no-preference) {
  .hero-robot .robot { animation: r-zweef 4s ease-in-out infinite; }
  .hero-robot .r-oog  { transform-box: fill-box; transform-origin: center;
                        animation: r-knipper 5.5s ease-in-out infinite; }
  .hero-robot .r-ring { transform-box: fill-box; transform-origin: center;
                        animation: r-radar 2.8s ease-out infinite; }
  .hero-robot .r-stip { transform-box: fill-box; transform-origin: center;
                        animation: r-puls 2.8s ease-in-out infinite; }
}
@keyframes r-zweef   { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes r-knipper { 0%,92%,100% { transform: scaleY(1); } 96% { transform: scaleY(.12); } }
@keyframes r-radar   { 0% { transform: scale(1); opacity: .55; } 70%,100% { transform: scale(2.1); opacity: 0; } }
@keyframes r-puls    { 0%,100% { opacity: 1; } 50% { opacity: .5; } }
.hero .oogje { font-size: .8rem; text-transform: uppercase; letter-spacing: .16em;
               color: var(--accent-2); font-weight: 600; margin-bottom: 1.3rem; }

/* Het verloop loopt dwars door de kop heen, van het accent van deze pagina naar
   het tweede accent. Daardoor is de kleur van elke pagina meteen zichtbaar. */
.hero h1 em { font-style: normal;
  background: linear-gradient(100deg, var(--accent), var(--klei));
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero .lead { font-size: clamp(1.02rem, 1.5vw, 1.14rem); color: var(--zacht); margin: 1.3rem auto 0; }

/* Uitnodiging om te scrollen. Verdwijnt zodra er gescrold is. */
.hero:not(.hero-home) .scrollhint { display: none; }
.scrollhint { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);
  font-size: 11.5px; letter-spacing: .15em; text-transform: uppercase; color: var(--zacht);
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  opacity: clamp(0, calc(1 - var(--paginavoortgang, 0) * 24), 1); }
.scrollhint svg { width: 19px; height: 19px; animation: wenk 2.6s ease-in-out infinite; }
@keyframes wenk { 0%,100% { transform: translateY(0); opacity: .55; }
                  50% { transform: translateY(6px); opacity: 1; } }

.acties { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 2rem; }
.knop { display: inline-flex; align-items: center; gap: 9px; padding: 13px 24px;
        border-radius: 11px; text-decoration: none; font-weight: 600; font-size: .99rem;
        border: 1px solid transparent; transition: transform .18s, background .18s, border-color .18s; }
.knop:hover { transform: translateY(-2px); }
/* De hoofdknop is magenta, niet blauw. Blauw is de kleur van de rest van de
   site; een knop die dezelfde kleur heeft als alles eromheen valt niet op. */
.knop-vol { background: var(--klei); color: #fff; }

.knop-rand { border-color: var(--lijn-fel); color: var(--tekst); }
.knop-rand:hover { border-color: var(--accent-2); color: var(--kop); }

/* ── Scènes: vastgeplakt beeld, tekst schuift erlangs ─────────────────────
   --v staat standaard op 1, de eindstand. Blijft het script weg, dan staat
   alles zichtbaar in plaats van dat de tekeningen leeg blijven.             */

.scene { position: relative; --v: 1; }
.scene .binnen {
  display: grid; grid-template-columns: minmax(0, 44%) minmax(0, 56%);
  gap: clamp(24px, 4vw, 56px); max-width: var(--maxw); margin: 0 auto;
  padding: 0 clamp(22px, 5vw, 44px);
}
.scene.omgekeerd .binnen { grid-template-columns: minmax(0, 56%) minmax(0, 44%); }
.plak { position: sticky; top: 0; height: 100vh; display: flex; align-items: center;
        justify-content: center; grid-column: 2; }
.scene.omgekeerd .plak { grid-column: 1; }
.doek { width: 100%; max-width: 620px; }
.doek svg { width: 100%; height: auto; display: block; overflow: visible; }
/* grid-row: 1 is nodig omdat het beeld eerst in de HTML staat. Zonder deze
   regel plaatst de browser de tekstkolom in rij twee — dus ónder de tekening in
   plaats van ernaast. */
.stappen-kolom { grid-column: 1; grid-row: 1; padding: 26vh 0; }

/* Elke stap vult bijna een scherm. Dat geeft de scène zijn loopruimte: zonder
   hoogte is er niets om doorheen te scrollen en staat de tekening meteen in
   eindstand. */
.stap { min-height: 74vh; display: flex; flex-direction: column; justify-content: center; }
.scene.omgekeerd .stappen-kolom { grid-column: 2; grid-row: 1; }

.scene::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 50% at var(--tintx, 74%) 46%,
    color-mix(in srgb, var(--agentkleur, var(--accent)) 17%, transparent), transparent 72%);
}
.scene.omgekeerd::before { --tintx: 26%; }

.agentkop { margin-bottom: 3rem; }
.agentnr { font-family: var(--kopfont); font-size: .82rem; letter-spacing: .1em;
           text-transform: uppercase; color: var(--agentkleur, var(--accent)); }
.stap h3 { margin-bottom: .55rem; }
.stap .klein { font-size: .82rem; text-transform: uppercase; letter-spacing: .1em;
               color: var(--zacht); margin-bottom: .4rem; }

/* Onderdelen in de tekeningen */
.doek text { font-family: var(--font); }
.v-label { font-size: 12.5px; fill: var(--zacht); }
.v-label-fel { font-size: 13px; fill: var(--terracotta); font-weight: 650; }

.op-drempel { opacity: clamp(0, calc((var(--v,0) - var(--d,0)) * var(--s,10)), 1); }
.groei-drempel {
  opacity: clamp(0, calc((var(--v,0) - var(--d,0)) * var(--s,10)), 1);
  transform: scale(clamp(.6, calc(.6 + (var(--v,0) - var(--d,0)) * var(--s,10) * .4), 1));
  transform-box: fill-box; transform-origin: center;
}
.r-sweep { transform-box: view-box; transform-origin: 50% 50%;
           transform: rotate(calc(var(--v,0) * 720deg)); }
.r-vondst-ring { transform-box: fill-box; transform-origin: center;
                 animation: puls 2.4s ease-out infinite; }
@keyframes puls { 0% { transform: scale(.8); opacity: .8; }
                  100% { transform: scale(1.5); opacity: 0; } }
.w-balk { transform-box: view-box; transform-origin: 50% 31.7%;
          transform: rotate(calc(-7deg + clamp(0deg, calc(var(--v,0) * 14deg), 7deg))); }
.lijn-teken { transition: stroke-dashoffset .08s linear, opacity .2s linear; }

/* ── Verschijnen bij in beeld komen ──────────────────────────────────────── */

/* Alleen verbergen als er een script draait dat het weer zichtbaar maakt. De
   .js-klasse wordt in de <head> gezet; blijft die weg, dan staat alles er
   gewoon. Een blok dat je nooit meer te zien krijgt is erger dan een blok dat
   niet komt aanvliegen. */
.js .onthul { opacity: 0; transform: translateY(28px); }
.onthul.zichtbaar { opacity: 1; transform: none;
  transition: opacity .75s cubic-bezier(.22,.61,.36,1), transform .75s cubic-bezier(.22,.61,.36,1); }
.onthul.t1.zichtbaar { transition-delay: .08s; }
.onthul.t2.zichtbaar { transition-delay: .16s; }
.onthul.t3.zichtbaar { transition-delay: .24s; }

/* ── Kaarten ─────────────────────────────────────────────────────────────── */

.raster { display: grid; gap: 18px; margin-top: 2.4rem; }
.raster.k2 { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.raster.k3 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.raster.k4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

.kaart {
  background: color-mix(in srgb, var(--vlak) 82%, transparent);
  border: 1px solid var(--lijn); border-radius: 16px; padding: 24px;
  transition: border-color .2s, transform .2s;
}
.kaart:hover { border-color: color-mix(in srgb, var(--accent) 55%, transparent); transform: translateY(-3px); }
.kaart h3 { margin-bottom: .5rem; }
.kaart p:last-child { margin-bottom: 0; }
/* Het icoon in een kaart: klein, in de accentkleur, met een eigen vlakje. Het
   maakt een rij kaarten scanbaar — je ziet in één oogopslag dat het er drie
   zijn en waar ze over gaan — zonder dat het met de kop concurreert. */
.kaart-icoon { display: inline-grid; place-items: center; width: 38px; height: 38px;
               border-radius: 11px; margin-bottom: .9rem; color: var(--accent);
               background: color-mix(in srgb, var(--accent) 12%, transparent);
               border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent); }
.kaart-icoon svg { width: 19px; height: 19px; }
.kaart:hover .kaart-icoon { color: var(--accent-2);
               background: color-mix(in srgb, var(--accent-2) 12%, transparent);
               border-color: color-mix(in srgb, var(--accent-2) 30%, transparent); }
.kaart .rol + .kaart-icoon { margin-top: .2rem; }

.kaart .rol { font-size: .77rem; text-transform: uppercase; letter-spacing: .1em;
              color: var(--accent); margin-bottom: .6rem; font-weight: 600; }

a.kaart { text-decoration: none; color: inherit; display: block; }
a.kaart .verder { color: var(--accent); font-weight: 600; font-size: .93rem; margin-top: .9rem; display: block; }

.merkkaart { border-left: 3px solid var(--merk, var(--accent)); }

/* ── Schema ─────────────────────────────────────────────────────────────────
   De tekening uit de werkwijzepagina, hier stilstaand. Hij vertelt de lus in
   één beeld; met vier kaartjes naast elkaar zie je de agents wel, maar niet dat
   het rond loopt.                                                            */

.schema { margin: 2.6rem 0 0; padding: 0; }
.schema svg { width: 100%; max-width: 680px; height: auto; display: block;
              margin: 0 auto; overflow: visible; }
.schema figcaption { color: var(--zacht); font-size: .93rem; max-width: 58ch;
                     margin: 1.6rem auto 0; text-align: center; }

/* ── Losse beelden ──────────────────────────────────────────────────────────
   Een tekening tussen de tekst, zonder de vastgeplakte scène eromheen. Ze
   dragen data-scene zodat het script er --v op zet: dan tekenen de lijnen
   zichzelf en komen de labels op hun eigen moment op, net als in de scènes.
   Zonder script staat alles in eindstand.                                    */

.beeld { margin: 2.4rem 0 0; padding: 0; --v: 1; }
.beeld svg { width: 100%; max-width: 660px; height: auto; display: block;
             margin: 0 auto; overflow: visible; }
.beeld figcaption { color: var(--zacht); font-size: .93rem; max-width: 58ch;
                    margin: 1.4rem auto 0; text-align: center; }

/* Onderdelen die in meerdere tekeningen terugkomen. */
.beeld .as { fill: var(--zacht); font-size: 11.5px; }

/* Vlakjes en rasterlijnen in de tekeningen. Ze stonden als vaste witte kleuren
   in de SVG's, en die zijn onzichtbaar op een witte achtergrond: in de lichte
   stand verdwenen de kaders om de blokken helemaal. Nu lezen ze dezelfde
   variabelen als de rest van de site en werken ze in beide standen. */
.vlakje { fill: color-mix(in srgb, var(--vlak-2) 70%, transparent);
          stroke: var(--lijn-fel); stroke-width: 1.4; }
.raster-lijn { stroke: var(--lijn); }

/* De koppen in het schema stonden op wit — leesbaar op donker, onzichtbaar op
   licht. Ze volgen nu de tekstkleur van het thema. */
.blokkop { fill: var(--kop); }
.beeld .raster line { stroke: var(--lijn); stroke-width: 1; }
.beeld .basislijn { stroke: var(--lijn-fel); stroke-width: 1; }

.tl-balk rect { fill: color-mix(in srgb, var(--accent) 16%, transparent);
                stroke: color-mix(in srgb, var(--accent) 50%, transparent); stroke-width: 1; }
.tl-balk .tl-lang { fill: color-mix(in srgb, var(--oker) 16%, transparent);
                    stroke: color-mix(in srgb, var(--oker) 55%, transparent); }
.tl-nr text { fill: var(--kop); font-size: 13px; font-weight: 700; }
.tl-naam text { fill: var(--kop); font-size: 13px; font-weight: 600; }

.rel rect { fill: color-mix(in srgb, var(--vlak) 90%, transparent);
            stroke: var(--lijn-fel); stroke-width: 1; }
.rel .rel-uit { stroke: color-mix(in srgb, var(--accent) 60%, transparent); }
.rel-kop { fill: var(--kop); font-size: 14px; font-weight: 650; }

/* ── Cijfers ─────────────────────────────────────────────────────────────── */

.cijfers { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 22px; margin-top: 2.4rem; }
.cijfer .groot { font-family: var(--kopfont); font-size: clamp(2.4rem, 5vw, 3.4rem);
                 color: var(--kop); line-height: 1; letter-spacing: -.03em; }
/* Hetzelfde verloop als in de koppen: blauw naar magenta. Een getal is hier het
   argument, dus mag het net zo veel gewicht krijgen als een kop. */
.cijfer .groot span {
  background: linear-gradient(100deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.cijfer .bij { color: var(--kop); font-weight: 600; margin: .5rem 0 .3rem; }
.cijfer p { color: var(--zacht); font-size: .95rem; margin: 0; }

/* ── Prijzen ─────────────────────────────────────────────────────────────── */

.prijskaart { background: color-mix(in srgb, var(--vlak) 88%, transparent);
              border: 1px solid var(--lijn); border-radius: 18px; padding: 28px; }
.prijskaart.uitgelicht { border-color: var(--accent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent),
              0 24px 60px rgba(0,0,0,.4); }
.prijskaart .label { font-size: .77rem; text-transform: uppercase; letter-spacing: .1em;
                     color: var(--accent); font-weight: 600; }
.prijskaart .bedrag { font-family: var(--kopfont); font-size: 2.3rem; color: var(--kop);
                      margin: .55rem 0 .1rem; letter-spacing: -.03em; }
.prijskaart .per { color: var(--zacht); font-size: .92rem; }
.prijskaart ul { list-style: none; padding: 0; margin: 1.3rem 0 0; }
.prijskaart li { padding: 8px 0 8px 22px; position: relative; font-size: .95rem;
                 border-top: 1px solid var(--lijn); }
.prijskaart li:first-child { border-top: 0; }
.prijskaart li::before { content: ""; position: absolute; left: 3px; top: 17px;
                         width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.prijskaart li.grijs::before { background: var(--zacht); opacity: .45; }

table { width: 100%; border-collapse: collapse; margin-top: 1.6rem; font-size: .95rem; }
th, td { text-align: left; padding: 12px; border-bottom: 1px solid var(--lijn); }
th { color: var(--kop); font-weight: 600; font-size: .82rem; text-transform: uppercase; letter-spacing: .07em; }
td.getal { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
tr:last-child td { border-bottom: 0; }
.tabelrand { overflow-x: auto; border: 1px solid var(--lijn); border-radius: 14px; padding: 4px 18px 10px; }

/* ── Prijsmatrix ────────────────────────────────────────────────────────────
   Vier agents als rijen, vijf samenstellingen als kolommen. Dat laat in één
   blik zien wat modulair betekent: welke agent in welke samenstelling zit, en
   wat dat kost. Vijf prijskaarten naast elkaar deden hetzelfde maar vroegen
   drie keer zo veel ruimte, en je moest ze naast elkaar leggen om te zien wat
   er verschilde.                                                             */

/* De eerste kolom draagt de tekst; de vijf daarna zijn even breed en
   gecentreerd. Rechts uitlijnen liet de bolletjes tegen de kolomrand aan
   staan, en dan lijkt de rij scheef terwijl hij het niet is. */
.matrix { table-layout: fixed; }
.matrix th:first-child, .matrix td:first-child { width: auto; min-width: 14rem; }
.matrix th.getal, .matrix td.getal { width: 7.4rem; text-align: center; }
.matrix .bij { display: block; color: var(--zacht); font-size: .84rem; margin-top: 1px; }
.matrix .ja, .matrix .nee { display: inline-block; width: 9px; height: 9px; border-radius: 50%; }
.matrix .ja { background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.matrix .nee { background: var(--lijn-fel); opacity: .5; }

/* De kolom van het complete team krijgt een eigen vlak, zodat het oog daar
   landt zonder dat er een label bij hoeft. */
.matrix .uitgelicht { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.matrix thead .uitgelicht { color: var(--accent); }

.matrix .prijsrij td { border-top: 1px solid var(--lijn-fel); font-weight: 600;
                       color: var(--kop); font-size: 1.02rem; }
.matrix .prijsrij.zacht td { border-top: 0; font-weight: 500; color: var(--zacht);
                             font-size: .92rem; padding-top: 2px; }

/* ── Genummerde stappen ──────────────────────────────────────────────────── */

.stappenlijst { counter-reset: nr; list-style: none; padding: 0; margin: 2.2rem 0 0; }
.stappenlijst li { counter-increment: nr; position: relative; padding: 0 0 26px 58px; }
.stappenlijst li::before {
  content: counter(nr); position: absolute; left: 0; top: -2px; width: 34px; height: 34px;
  border-radius: 50%; border: 1px solid var(--lijn-fel); color: var(--accent);
  font-family: var(--kopfont); font-size: .92rem; display: grid; place-items: center;
  background: var(--inkt);
}
.stappenlijst li:not(:last-child)::after {
  content: ""; position: absolute; left: 17px; top: 36px; bottom: 6px; width: 1px;
  background: linear-gradient(var(--lijn), transparent);
}
.stappenlijst strong { color: var(--kop); }
.stappenlijst .duur { color: var(--zacht); font-size: .9rem; font-style: italic;
                      margin-top: .8rem; }

/* Bij elke stap een kleine tekening, rechts van de tekst. Ze laten zien wat de
   stap oplevert in plaats van hem te versieren: bij stap drie staat de meetfout
   die de tekst beschrijft, letterlijk naast elkaar.

   Onder de 900 pixels valt de kolom weg en komt de tekening onder de tekst. */
/* Twee kolommen, één rij: de tekst zit in een eigen blok en het beeld ernaast.
   Eerder kreeg elke alinea een eigen rij en beslaat het beeld ze allemaal — dan
   bepaalt de hoogte van het beeld waar de alinea's terechtkomen, en lijnt er
   niets meer uit. */
.stappenlijst li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
                   gap: clamp(20px, 3vw, 44px); align-items: start; }
.stappenlijst .stap-tekst > *:first-child { margin-top: 0; }
/* Het beeld op de hoogte van de kop, niet van het stapnummer erboven. */
.stappenlijst li > .stap-beeld { margin-top: 2.1rem; }

/* Om en om: bij de even stappen staat het beeld links en de tekst rechts. Dat
   houdt een lange lijst in beweging — anders leest hij als vijf keer hetzelfde
   blok. Het stapnummer blijft links staan, want dat is de leesvolgorde; alleen
   de twee kolommen wisselen.

   In de HTML staat de tekst eerst, dus een schermlezer en een pagina zonder CSS
   houden overal dezelfde volgorde. */
.stappenlijst li:nth-child(even) { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); }
.stappenlijst li:nth-child(even) .stap-tekst { grid-column: 2; grid-row: 1; }
.stappenlijst li:nth-child(even) .stap-beeld { grid-column: 1; grid-row: 1; }
.stap-beeld { --v: 1; }
.stap-beeld svg { width: 100%; height: auto; overflow: visible; }
.stap-beeld .fout-getal { fill: var(--oker); font-size: 24px; font-weight: 700; }
.stap-beeld .goed-getal { fill: var(--groen); font-size: 24px; font-weight: 700; }

@media (max-width: 900px) {
  .stappenlijst li { grid-template-columns: 1fr; }
  .stappenlijst li > .stap-beeld,
  .stappenlijst li:nth-child(even) .stap-beeld { grid-column: 1; grid-row: auto;
                                                  margin-top: 1.2rem; }
  .stappenlijst li:nth-child(even) .stap-tekst { grid-column: 1; grid-row: auto; }
}
.stappenlijst .fase { font-size: .78rem; text-transform: uppercase; letter-spacing: .11em;
                      color: var(--accent); font-weight: 600; margin-bottom: .35rem; }
.stappenlijst li { padding-bottom: 34px; }

/* ── Uitspraak van een agent ─────────────────────────────────────────────── */

.quote { display: flex; gap: 14px; align-items: flex-start; margin: 1.6rem 0 0; }
.quote .robot { flex: none; width: 40px; height: 40px; border-radius: 50%; margin-top: 3px;
  color: var(--agentkleur, var(--accent));
  background: color-mix(in srgb, var(--agentkleur, var(--accent)) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--agentkleur, var(--accent)) 45%, transparent);
  display: grid; place-items: center; }
.quote .robot svg { width: 24px; height: 24px; }
.quote blockquote { flex: 1 1 auto; background: rgba(255,255,255,.05);
  border: 1px solid var(--lijn); border-radius: 4px 14px 14px 14px; padding: 15px 18px; margin: 0; }
:root[data-thema="licht"] .quote blockquote { background: rgba(6,17,29,.04); }
.quote p { font-size: 15.5px; color: var(--kop); margin: 0; }
.quote cite { display: block; margin-top: 10px; font-style: normal; font-size: 12px; color: var(--zacht); }
.quote cite b { color: var(--agentkleur, var(--accent)); font-weight: 650; }

/* ── Contact ──────────────────────────────────────────────────────────────── */

.contact-robot { display: flex; align-items: center; gap: 18px; }
.contact-robot svg { width: 108px; height: auto; flex: none; }
.contact-robot .wolkje {
  position: relative; margin: 0; padding: 14px 17px; font-size: .95rem; color: var(--kop);
  background: color-mix(in srgb, var(--vlak) 88%, transparent);
  border: 1px solid var(--lijn); border-radius: 14px 14px 14px 4px;
}
.contact-robot .wolkje::before, .contact-robot .wolkje::after {
  content: ""; position: absolute; left: -9px; bottom: 12px;
  border: 5px solid transparent; border-right-width: 9px; border-left-width: 0;
}
.contact-robot .wolkje::before { border-right-color: var(--lijn); }
.contact-robot .wolkje::after { left: -8px; border-right-color: var(--vlak); }

@media (prefers-reduced-motion: no-preference) {
  .contact-robot .robot { animation: r-zweef 5s ease-in-out infinite; }
  .contact-robot .r-oog { transform-box: fill-box; transform-origin: center;
                          animation: r-knipper 6s ease-in-out infinite; }
  .contact-robot .r-stip { transform-box: fill-box; transform-origin: center;
                           animation: r-puls 3.2s ease-in-out infinite; }
}

/* ── Contact ────────────────────────────────────────────────────────────── */

.contactregel { display: flex; align-items: center; gap: 11px; margin-bottom: .7rem;
                font-size: 1.08rem; }
.contactregel svg { width: 17px; height: 17px; color: var(--accent); flex: none; }
.contactregel a { color: var(--kop); text-decoration: none; font-weight: 600; }
.contactregel a:hover { color: var(--accent); }

.lijst { list-style: none; padding: 0; margin: 1rem 0 0; }
.lijst li { padding: 9px 0 9px 24px; position: relative; border-top: 1px solid var(--lijn); }
.lijst li:first-child { border-top: 0; }
.lijst li::before { content: ""; position: absolute; left: 4px; top: 18px; width: 7px;
                    height: 7px; border-radius: 50%; background: var(--accent); }

/* ── Vragen ──────────────────────────────────────────────────────────────── */

details { border: 1px solid var(--lijn); border-radius: 14px;
          background: color-mix(in srgb, var(--vlak) 70%, transparent); margin-bottom: 10px; }
summary { cursor: pointer; padding: 17px 22px; color: var(--kop); font-weight: 600; list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; float: right; color: var(--accent); font-size: 1.35rem; line-height: 1; }
details[open] summary::after { content: "\2212"; }
details .antwoord { padding: 0 22px 19px; }

/* ── Melding ─────────────────────────────────────────────────────────────── */

.melding { border: 1px dashed var(--oker); border-radius: 14px; padding: 17px 21px;
           color: var(--zacht); font-size: .93rem; margin-top: 1.8rem; }
.melding strong { color: var(--oker); }

/* ── Slot en voet ────────────────────────────────────────────────────────── */

.slot { text-align: center; }
.slot h2 { max-width: 22ch; margin: 0 auto 1rem; }
.slot .lead { color: var(--zacht); max-width: 54ch; margin: 0 auto 1.8rem; }
.slot .acties { justify-content: center; }

footer { border-top: 1px solid var(--lijn); padding: 40px 0 56px; color: var(--zacht); font-size: .92rem; }
footer .rij { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; }
.voet-merk { display: inline-flex; align-items: center; gap: 8px; }
.voet-merk .teken { width: 19px; height: 19px; }

.voet-bureaus { margin: 22px 0 0; padding-top: 20px; border-top: 1px solid var(--lijn);
                font-size: .89rem; color: var(--zacht); max-width: 62ch; }
.voet-bureaus a { color: var(--accent); }
footer a { color: var(--zacht); text-decoration: none; }
footer a:hover { color: var(--kop); }
footer .rechts { margin-left: auto; }

/* In de lichte stand houdt de voet het donkere palet. Op wit liep hij visueel
   door in de laatste sectie: dezelfde grond, alleen een dun lijntje ertussen,
   en zachte grijze tekst die daar nauwelijks tegen afstak. Donker geeft de
   pagina een duidelijk einde en de tekst meteen genoeg contrast.

   Niet elke regel hierboven overschrijven maar de themavariabelen terugzetten:
   alles in de voet leest ze al — de links, het merkteken (--kop en
   --terracotta-fel), de scheidingslijnen — en var(--accent) is
   var(--terracotta), dus die volgt vanzelf mee zonder dat hij hier apart
   genoemd hoeft te worden. */
:root[data-thema="licht"] footer {
  --tekst: #d9d1c1;
  --kop: #f6f2e9;
  --zacht: #a89e8d;
  --terracotta: #da7a57;
  --terracotta-fel: #e08a68;
  --klei: #b0472a;
  --zee: #7bb0c4;
  --teken-baan: #a8907a;
  --teken-baan-fel: #c9b39a;
  --lijn: rgba(246,242,233,.15);
  --lijn-fel: rgba(246,242,233,.28);
  background: #201b16;
  border-top: 0;
  color: var(--zacht);
  padding-top: 44px;
}

/* ── Smal scherm ─────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .scene .binnen, .scene.omgekeerd .binnen { grid-template-columns: 1fr; }
  .plak, .scene.omgekeerd .plak { position: static; height: auto; grid-column: 1; grid-row: 1;
                                  padding: 32px 0 12px; }
  .stappen-kolom, .scene.omgekeerd .stappen-kolom { grid-column: 1; grid-row: 2; padding: 0 0 44px; }
  .stap { min-height: 0; padding: 30px 0; margin-bottom: 0; }
}
@media (max-width: 700px) {
  body { font-size: 16px; }
  .balk { grid-template-columns: auto 1fr; }
  nav { display: none; }
  .topbalk a span, .topbalk .lang { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .r-sweep, .w-balk { transform: none; }
  .op-drempel, .groei-drempel { opacity: 1; transform: none; }
  .lijn-teken { transition: none; }
  .js .onthul { opacity: 1; transform: none; }
  .merk .teken { animation: none; }
  .kaart:hover, .knop:hover { transform: none; }
}