/* ══════════════════════════════════════════════════════════
     BEDRIJFSAICHECK — nachtblauw, elektrisch indigo, goud
     Kleuren afgeleid van de eigen systemen van DFO.
     ══════════════════════════════════════════════════════════ */
  :root{
    --blauw:#5B5BD5; --blauw-l:#8B8CF0; --blauw-d:#3F3FB8;
    --cyaan:#38BDF8; --goud:#F5A524; --koraal:#F2683F; --mint:#2DD4A8;

    --display:'Sora','Space Grotesk',sans-serif;
    --sans:'Inter Tight','Inter',system-ui,sans-serif;
    --mono:'JetBrains Mono',monospace;
    --serif:'Instrument Serif',Georgia,serif;
    --grotesk:var(--display);

    --r-s:10px; --r-m:16px; --r-l:24px; --r-xl:34px;
    --veer:cubic-bezier(.16,1,.3,1);
    --korrel:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  }

  /* ── DONKER (standaard) ─────────────────────────────────── */
  :root, html[data-thema="donker"]{
    --bg:#0A0F1C; --bg2:#0E1524; --vlak:#141D30; --vlak2:#1A2438;
    --ink:#EAF0FB; --ink2:#B9C4DA; --steel:#7C8AA6;
    --line:rgba(234,240,251,.13); --line2:rgba(234,240,251,.07);
    --accent:var(--blauw-l); --accent-t:#080D18; --accent-zacht:rgba(139,140,240,.16);
    --warm:var(--goud); --warm-zacht:rgba(245,165,36,.14);
    --logo-blauw:#8B8CF0;
    --diep:#EAF0FB; --diep-t:#0A0F1C;
    --korrel-op:.055;
    --schaduw:0 2px 6px rgba(0,0,0,.4),0 18px 40px -20px rgba(0,0,0,.85);
    --schaduw-l:0 4px 10px rgba(0,0,0,.5),0 40px 90px -34px rgba(0,0,0,.95);
    --gloed:0 0 60px -12px rgba(91,91,213,.55);
    --v-koel:linear-gradient(135deg,#4747C9,#5B5BD5 45%,#7C6CF0);
    --v-warm:linear-gradient(135deg,#D4820E,#F5A524);
    --v-mix:linear-gradient(120deg,#4747C9,#6E5BE0 40%,#F5A524);
    --t-koel:linear-gradient(120deg,#8B8CF0,#38BDF8);
    --t-warm:linear-gradient(120deg,#F5A524,#F2683F);
    --v-zacht:linear-gradient(150deg,rgba(139,140,240,.14),rgba(56,189,248,.07));
    --v-kaart:linear-gradient(165deg,rgba(26,36,56,.9),rgba(16,23,38,.9));
    --violet:#8B8CF0;
  }
  /* ── LICHT ──────────────────────────────────────────────── */
  html[data-thema="licht"]{
    --bg:#F3F6FC; --bg2:#E9EFF9; --vlak:#FFFFFF; --vlak2:#F7FAFF;
    --ink:#0B1220; --ink2:#2B3852; --steel:#5C6B85;
    --line:rgba(11,18,32,.14); --line2:rgba(11,18,32,.07);
    --accent:#4747C9; --accent-t:#FFFFFF; --accent-zacht:rgba(71,71,201,.10);
    --warm:#9A5808; --warm-zacht:rgba(154,88,8,.12);
    --logo-blauw:#4747C9;
    --diep:#0A0F1C; --diep-t:#EAF0FB;
    --korrel-op:.035;
    --schaduw:0 1px 3px rgba(11,18,32,.06),0 16px 34px -18px rgba(11,18,32,.30);
    --schaduw-l:0 3px 8px rgba(11,18,32,.08),0 40px 80px -32px rgba(11,18,32,.4);
    --gloed:0 0 50px -14px rgba(71,71,201,.35);
    --v-koel:linear-gradient(135deg,#3F3FB8,#4747C9 45%,#6E5BE0);
    --v-warm:linear-gradient(135deg,#A8600A,#C2740A);
    --v-mix:linear-gradient(120deg,#3F3FB8,#5B5BD5 40%,#C2740A);
    --t-koel:linear-gradient(120deg,#4747C9,#2A87C9);
    --t-warm:linear-gradient(120deg,#9A5808,#A8380F);
    --v-zacht:linear-gradient(150deg,rgba(71,71,201,.09),rgba(56,189,248,.06));
    --v-kaart:linear-gradient(165deg,#FFFFFF,#F4F8FF);
    --violet:#5B5BD5;
  }

  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:17px;
    line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:hidden;
    transition:background .5s ease,color .5s ease}
  h1,h2,h3,h4{font-family:var(--display);font-weight:700;letter-spacing:-.04em;line-height:1;margin:0}
  a{color:inherit;text-decoration:none}
  img{max-width:100%;display:block}
  /* een element met hidden hoort weg te blijven — img{display:block}
     hierboven overschrijft dat anders */
  [hidden]{display:none!important}
  button{cursor:pointer;font-family:inherit;border:none;background:none;color:inherit}
  ::selection{background:var(--accent);color:var(--accent-t)}
  .wrap{max-width:1280px;margin:0 auto;padding:0 36px;position:relative}
  .wrap.smal{max-width:860px}
  @media(max-width:640px){.wrap{padding:0 20px}}

  /* ── LEVENDE ACHTERGROND ────────────────────────────────── */
  #korrel{position:fixed;inset:0;z-index:0;pointer-events:none;background-image:var(--korrel);opacity:var(--korrel-op)}
  #aurora{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
  #aurora i{position:absolute;border-radius:50%;filter:blur(120px);will-change:transform}
  #aurora .a1{width:52vw;height:52vw;background:radial-gradient(circle,rgba(91,91,213,.55),transparent 70%);
    top:-18%;left:-8%;animation:drijf1 26s ease-in-out infinite}
  #aurora .a2{width:44vw;height:44vw;background:radial-gradient(circle,rgba(56,189,248,.34),transparent 70%);
    top:34%;right:-12%;animation:drijf2 32s ease-in-out infinite}
  #aurora .a3{width:38vw;height:38vw;background:radial-gradient(circle,rgba(245,165,36,.24),transparent 70%);
    bottom:-14%;left:24%;animation:drijf3 38s ease-in-out infinite}
  html[data-thema="licht"] #aurora i{opacity:.55}
  @keyframes drijf1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(9vw,7vh) scale(1.16)}}
  @keyframes drijf2{0%,100%{transform:translate(0,0) scale(1.1)}50%{transform:translate(-8vw,-6vh) scale(.94)}}
  @keyframes drijf3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(6vw,-8vh) scale(1.2)}}
  @media(prefers-reduced-motion:reduce){#aurora i{animation:none}}
  #raster{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;
    background-image:linear-gradient(var(--line2) 1px,transparent 1px),linear-gradient(90deg,var(--line2) 1px,transparent 1px);
    background-size:64px 64px;
    -webkit-mask:radial-gradient(ellipse 90% 60% at 50% 0%,#000,transparent 75%);
    mask:radial-gradient(ellipse 90% 60% at 50% 0%,#000,transparent 75%)}
  main,header,footer{position:relative;z-index:1}

  /* ── TYPOGRAFIE ─────────────────────────────────────────── */
  .oog{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11px;
    font-weight:600;letter-spacing:2.4px;text-transform:uppercase;color:var(--accent)}
  .oog:before{content:'';width:8px;height:8px;border-radius:50%;background:var(--accent);
    box-shadow:0 0 0 4px var(--accent-zacht);animation:klop 2.6s ease-in-out infinite}
  @keyframes klop{0%,100%{box-shadow:0 0 0 4px var(--accent-zacht)}50%{box-shadow:0 0 0 9px transparent}}
  .xxl{font-size:clamp(44px,7.6vw,104px);letter-spacing:-.05em}
  .xl{font-size:clamp(36px,5.2vw,72px)}
  .l{font-size:clamp(29px,4.2vw,52px)}
  .m{font-size:clamp(22px,2.8vw,33px)}
  .lood{font-size:clamp(17px,1.35vw,19.5px);color:var(--steel);max-width:60ch;line-height:1.6}
  .lood b{color:var(--ink);font-weight:600}
  .kleur{background:var(--t-koel);-webkit-background-clip:text;background-clip:text;color:transparent}
  .kleurw{background:var(--t-warm);-webkit-background-clip:text;background-clip:text;color:transparent}
  .cursief{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.02em}
  .glim{position:relative;display:inline-block}
  .glim:after{content:'';position:absolute;left:0;right:0;bottom:.08em;height:.14em;border-radius:3px;
    background:var(--v-mix);transform:scaleX(0);transform-origin:left;transition:transform 1s var(--veer) .35s}
  .in .glim:after,.glim.in:after{transform:none}

  /* Het opkomen is een versiering, geen voorwaarde om iets te zien.
     Daarom staat de verborgen begintoestand alleen aan als er ook
     echt JavaScript draait dat hem weer weghaalt (html.js). Loopt
     dat mis, of blijft een overgang halverwege steken zoals op iOS
     gebeurde, dan staat de tekst er gewoon. */
  html.js .op{opacity:0;transform:translateY(26px);transition:opacity .9s var(--veer),transform .9s var(--veer)}
  html.js .op.in{opacity:1;transform:none}
  .woord{display:inline-block;overflow:hidden;vertical-align:bottom}
  html.js .woord>i{display:inline-block;font-style:inherit;transform:translateY(110%);transition:transform .95s var(--veer)}
  html.js .woord.in>i{transform:none}
  @media(prefers-reduced-motion:reduce){html.js .op,html.js .woord>i{opacity:1;transform:none;transition:none}}
  /* met ?eenvoudig=1 in het adres staat alles meteen stil en zichtbaar */
  html.eenvoudig .op,html.eenvoudig .woord>i{opacity:1!important;transform:none!important;transition:none!important}

  /* ── KNOPPEN ────────────────────────────────────────────── */
  .knop{position:relative;display:inline-flex;align-items:center;gap:11px;border-radius:999px;
    padding:17px 32px;font-family:var(--display);font-size:16px;font-weight:600;letter-spacing:-.02em;
    border:1px solid var(--line);color:var(--ink);overflow:hidden;isolation:isolate;
    transition:transform .3s var(--veer),border-color .3s,color .3s,box-shadow .35s}
  .knop:hover{transform:translateY(-2px);border-color:var(--accent)}
  .knop.vol{background:var(--v-koel);color:#fff;border-color:transparent;box-shadow:var(--gloed)}
  .knop.vol:hover{box-shadow:0 0 70px -8px rgba(91,91,213,.75);transform:translateY(-2px) scale(1.015)}
  .knop.vol:after{content:'';position:absolute;inset:0;z-index:-1;
    background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.34) 50%,transparent 65%);
    transform:translateX(-130%)}
  .knop.vol:hover:after{transform:translateX(130%);transition:transform .9s ease}
  .knop.groot{padding:20px 38px;font-size:17.5px}
  .knop.klein{padding:11px 20px;font-size:14px}
  .pijl{display:inline-block;transition:transform .3s var(--veer)}
  .knop:hover .pijl{transform:translateX(5px)}

  /* ══ DE BOVENKANT IS ALTIJD DONKER ═══════════════════════
     De balk en de hero houden in beide thema's de donkere
     kleuren aan. Alles binnenin erft deze waarden.
     ═══════════════════════════════════════════════════════════ */
  /* de balk heeft altijd een eigen ondergrond; op de homepage valt
     die naadloos samen met de hero, op de andere pagina's blijft het
     logo daardoor leesbaar */
  /* in lichte modus mag de balk wat dekkender, anders schijnt de
     lichte pagina er doorheen */
  html[data-thema="licht"] header.vast{background:color-mix(in srgb,#0A0F1C 93%,transparent)}
  /* nette overgang van de donkere hero naar een lichte pagina */

  /* ── HEADER ─────────────────────────────────────────────── */
  html[data-thema="licht"] .thema .maan{display:none}
  html[data-thema="licht"] .thema .zon{display:block}
  @media(max-width:1040px){
    body.menu{overflow:hidden}
  }
  #voortgang{position:fixed;top:0;left:0;height:2px;width:0;z-index:80;background:var(--v-mix);
    box-shadow:0 0 14px rgba(91,91,213,.8)}

  /* ── PAGINA'S ───────────────────────────────────────────── */
  .blad{display:none}
  .blad.aan{display:block;animation:bladIn .55s var(--veer) both}
  @keyframes bladIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
  section{padding:120px 0;position:relative}
  section.krap{padding:78px 0}
  section.zacht{background:var(--bg2)}
  .kruim{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11px;letter-spacing:1.4px;
    text-transform:uppercase;color:var(--steel);padding:128px 0 0}
  .kruim a{color:var(--accent)}
  .blad:not([data-blad="thuis"]) > section:first-of-type{padding-top:46px}
  .kop{max-width:820px;margin-bottom:64px}
  .kop h2{margin:20px 0 20px}
  .kop .lood{margin:0}

  /* ══ HERO ════════════════════════════════════════════════ */
  /* algemene sluier over de hele foto */
  /* extra sluier links, precies achter de tekstkolom */
  /* de woord-onthulling mag staarten van letters niet afknippen */
  .doen{display:flex;gap:13px;flex-wrap:wrap;align-items:center}

  /* het levende paneel */
  @keyframes puls{0%{box-shadow:0 0 0 0 rgba(45,212,168,.55)}70%{box-shadow:0 0 0 10px transparent}100%{box-shadow:0 0 0 0 transparent}}
  @media(max-width:520px){.cs-lijf{min-height:280px}}
  @keyframes rijIn{to{opacity:1;transform:none}}
  .cs-tijd{font-family:var(--mono);font-size:11px;color:var(--steel);font-variant-numeric:tabular-nums}
  .cs-wat{font-size:14.5px;color:var(--ink2);line-height:1.4}
  .cs-wat b{color:var(--ink);font-weight:600}
  .cs-bron{font-family:var(--mono);font-size:9.5px;letter-spacing:1.2px;text-transform:uppercase;
    color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);
    border-radius:999px;padding:4px 9px;white-space:nowrap}

  /* onderbalk van de hero */
  @keyframes schuif{from{transform:translateX(0)}to{transform:translateX(-50%)}}

  /* ══ WERKKAARTEN ═════════════════════════════════════════ */
  @media(max-width:1000px){.wraster{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:640px){.wraster{grid-template-columns:1fr}}
  .w-beeld{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--bg2);z-index:1}
  .w-beeld img{width:100%;height:100%;object-fit:cover;object-position:top left;transition:transform .8s var(--veer)}
  .w-merk{position:absolute;left:13px;top:13px;z-index:3;font-family:var(--mono);font-size:9.5px;font-weight:600;
    letter-spacing:1.4px;text-transform:uppercase;color:#fff;background:rgba(10,15,28,.72);
    backdrop-filter:blur(8px);border-radius:999px;padding:5px 11px;border:1px solid rgba(255,255,255,.14)}
  .w-leeg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;
    padding:18px;background:var(--v-zacht)}
  .w-leeg s{font-family:var(--display);font-weight:700;font-size:clamp(17px,2.2vw,22px);color:var(--steel)}
  .w-leeg i{font-style:normal;color:var(--steel)}
  .w-leeg b{font-family:var(--display);font-weight:700;font-size:clamp(21px,2.9vw,29px);letter-spacing:-.04em;
    background:var(--t-koel);-webkit-background-clip:text;background-clip:text;color:transparent}
  .w-lijf{padding:22px;position:relative;z-index:1}
  .w-titel{display:block;font-family:var(--display);font-weight:600;font-size:19px;letter-spacing:-.035em;
    line-height:1.2;color:var(--ink)}

  /* detailvenster */
  .wvenster{position:fixed;inset:0;z-index:150;background:rgba(6,10,20,.72);backdrop-filter:blur(12px);
    display:flex;align-items:center;justify-content:center;padding:26px;opacity:0;pointer-events:none;
    transition:opacity .3s ease}
  .wvenster.aan{opacity:1;pointer-events:auto}
  @media(max-width:700px){.wvenster{padding:0}}
  .wv-in{position:relative;width:100%;max-width:920px;max-height:90vh;overflow-y:auto;background:var(--bg);
    border:1px solid var(--line);border-radius:var(--r-l);box-shadow:var(--schaduw-l);
    transform:translateY(20px) scale(.98);transition:transform .4s var(--veer)}
  .wvenster.aan .wv-in{transform:none}
  @media(max-width:700px){.wv-in{max-height:100vh;border-radius:0;border:none}}
  .wv-weg{position:absolute;right:16px;top:16px;z-index:6;width:38px;height:38px;border-radius:999px;
    border:1px solid var(--line);background:var(--vlak);display:grid;place-items:center;transition:all .22s}
  .wv-weg:hover{background:var(--accent);color:#fff;border-color:transparent}
  .wv-beeld{position:relative;aspect-ratio:16/8;overflow:hidden;background:var(--bg2);
    border-bottom:1px solid var(--line)}
  .wv-beeld img{width:100%;height:100%;object-fit:cover;object-position:top left}
  .wv-tekst{padding:34px 40px 42px}
  @media(max-width:640px){.wv-tekst{padding:26px 22px 34px}}
  .wv-tekst h3{font-size:clamp(25px,3.3vw,36px);margin:14px 0 22px}
  .wv-verhaal p{margin:0 0 14px;font-size:16.5px;line-height:1.7;color:var(--ink2)}
  .wv-punten{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:0}
  .wv-punten li{position:relative;padding:13px 0 13px 30px;font-size:15.5px;color:var(--ink2);
    border-bottom:1px solid var(--line2)}
  .wv-punten li:before{content:'';position:absolute;left:4px;top:.45em;width:11px;height:11px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b5bd5' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 5 7 7-7 7'/%3E%3C/svg%3E") no-repeat center/contain}
  .wv-sys{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:26px 0}
  .wv-sys span{font-family:var(--mono);font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--steel)}
  .wv-sys b{font-family:var(--mono);font-size:11.5px;font-weight:500;color:var(--ink2);
    border:1px solid var(--line);border-radius:999px;padding:5px 12px}
  body.vast{overflow:hidden}

  /* ══════════════════════════════════════════════════════════
     HOMEPAGINA — opnieuw opgebouwd
     Eén duidelijke route: wat we bouwen → wat het jou oplevert
     → hoe je het gratis krijgt → wie we zijn → beginnen.
     ══════════════════════════════════════════════════════════ */

  /* ── sectiekop met nummer ─────────────────────────────── */
  .snr{display:flex;align-items:center;gap:16px;margin-bottom:20px}
  .snr b{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:2px;color:var(--accent)}
  .snr i{flex:1;height:1px;background:var(--line);max-width:120px;font-style:normal}
  .snr span{font-family:var(--mono);font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--steel)}


  /* ── BEWIJSBALK ───────────────────────────────────────── */
  @media(max-width:820px){.h2-b26px 0;border-right:1px solid var(--line2)}

  /* ── KIEZER: waar gaat jouw tijd heen ─────────────────── */
  .kiezer{display:grid;grid-template-columns:340px 1fr;gap:22px;align-items:start}
  @media(max-width:940px){.kiezer{grrid-template-columns:1fr 1fr;gap:8px}}
  @media(max-width:560px){.kies-lijst{grid-template-columns:1fr}}
  .kies{display:flex;align-items:center;gap:13px;width:100%;text-align:left;padding:15px 16px;
    border-radius:var(--r-m);border:1px solid var(--line);background:var(--v-kaart);
    font-size:15.5px;color:var(--ink2);transition:all .28s var(--veer)}
  .kies:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line));transform:translateX(3px)}
  .kies.aan{border-color:var(--accent);background:var(--accent-zacht);color:var(--ink);font-weight:600;
    box-shadow:var(--gloed)}
  .kies i{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;flex-shrink:0;
    background:var(--accent-zacht);color:var(--accent);font-style:normal;font-size:14px;
    border:1px solid color-mix(in srgb,var(--accent) 30%,transparent)}
  .kies.aan i{background:var(--v-koel);color:#fff;border-color:transparent}
  .kies em{margin-left:auto;font-style:normal;font-family:var(--mono);font-size:10.5px;color:var(--steel);
    opacity:0;transform:translateX(-6px);transition:all .25s}
  .kies.aan em{opacity:1;transform:none;color:var(--accent)}

  .kies-uit{position:relative;border-radius:var(--r-l);border:1px solid var(--line);overflow:hidden;
    background:var(--v-kaart);min-height:420px;display:flex;flex-direction:column}
  .ku-kop{display:flex;align-items:flex-start;gap:16px;padding:24px 26px 20px;border-bottom:1px solid var(--line2)}
  .ku-kop h3{font-family:var(--display);font-weight:600;font-size:clamp(20px,2.3vw,26px);letter-spacing:-.04em;margin:0}
  .ku-kop p{margin:9px 0 0;font-size:15px;color:var(--steel);line-height:1.55;max-width:56ch}
  .ku-meter{margin-left:auto;text-align:right;flex-shrink:0}
  .ku-meter s{display:block;font-family:var(--mono);font-size:12px;color:var(--steel)}
  .ku-meter b{display:block;font-family:var(--display);font-weight:700;font-size:clamp(19px,2.3vw,26px);
    letter-spacing:-.04em;margin-top:4px;
    background:var(--t-koel);-webkit-background-clip:text;background-clip:text;color:transparent}
  .ku-beeld{position:relative;flex:1;overflow:hidden;background:var(--bg2);min-height:260px}
  .ku-beeld iframe{position:absolute;left:0;top:0;width:1180px;height:840px;border:0;
    transform-origin:0 0;pointer-events:none;opacity:0;transition:opacity .6s ease}
  .ku-beeld.klaar iframe{opacity:1}
  .ku-beeld .wacht{position:absolute;inset:0;display:grid;place-items:center;background:var(--v-zacht);transition:opacity .5s}
  .ku-beeld.klaar .wacht{opacity:0}
  .ku-beeld .wacht i{width:28px;height:28px;border-radius:50%;border:2px solid var(--line);
    border-top-color:var(--accent);animation:tol .8s linear infinite}
  .ku-voet{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 22px;
    border-top:1px solid var(--line2);background:color-mix(in srgb,var(--accent) 6%,transparent)}
  /* alleen het losse label, niet de tekst binnen de knop */
  .ku-voet > span{font-family:var(--mono);font-size:11px;letter-spacing:1.2px;text-transform:uppercase;color:var(--steel)}

  /* ── GRATIS PROTOTYPE ─────────────────────────────────── */

  /* ── FOTOPLEKKEN ──────────────────────────────────────── */

  /* ── WIE WE ZIJN ──────────────────────────────────────── */

  /* ── SLOT ─────────────────────────────────────────────── */

  /* ══════════════════════════════════════════════════════════
     HERO — "de stroom"
     Links de belofte, rechts een écht prototype dat draait,
     ertussen taken die van links naar rechts door de machine
     lopen en er afgehandeld uit komen.
     ══════════════════════════════════════════════════════════ */
  .hx{position:relative;min-height:100svh;display:flex;align-items:center;
    padding:126px 0 96px;overflow:hidden;isolation:isolate;background:var(--bg)}
  @media(max-width:1080px){.hx{min-height:auto;padding:108px 0 60px}}

  /* achtergrond: foto + gloed + stroomcanvas */
  .hx-foto{position:absolute;inset:0;z-index:0;overflow:hidden}
  .hx-foto img{width:100%;height:100%;object-fit:cover;object-position:64% 42%;
    transform:scale(1.08);will-change:transform;filter:saturate(.9)}
  .hx-foto:after{content:'';position:absolute;inset:0;
    background:linear-gradient(96deg,var(--bg) 4%,color-mix(in srgb,var(--bg) 90%,transparent) 40%,
      color-mix(in srgb,var(--bg) 62%,transparent) 68%,color-mix(in srgb,var(--bg) 82%,transparent)),
      linear-gradient(to top,var(--bg) 1%,transparent 26%)}
  #stroom{position:absolute;inset:0;z-index:1;pointer-events:none}
  .hx .wrap{position:relative;z-index:3}
  .hx-in{display:grid;grid-template-columns:1fr 1.12fr;gap:54px;align-items:center}

  /* ── linkerkolom ─────────────────────────────────────── */
  .hx-merk{display:inline-flex;align-items:center;gap:10px;padding:8px 15px 8px 11px;border-radius:999px;
    background:color-mix(in srgb,var(--accent) 14%,transparent);
    border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);
    font-family:var(--mono);font-size:11.5px;letter-spacing:.4px;color:var(--ink)}
  .hx-merk:before{content:'';width:7px;height:7px;border-radius:50%;background:var(--mint);
    box-shadow:0 0 0 0 rgba(45,212,168,.6);animation:puls 2.4s ease-out infinite}
  .hx h1{margin:24px 0 0;font-size:clamp(38px,5.4vw,74px);line-height:1.02;letter-spacing:-.045em}
  .hx h1 .r2{display:block}
  .hx-tik{display:flex;align-items:baseline;gap:10px;margin:26px 0 0;font-family:var(--mono);
    font-size:clamp(13px,1.15vw,15px);color:var(--steel);min-height:24px}
  .hx-tik b{color:var(--accent);font-weight:600}
  .hx-tik u{text-decoration:none;color:var(--ink);border-bottom:1px solid color-mix(in srgb,var(--accent) 50%,transparent);
    padding-bottom:2px}
  .hx-tik i{display:inline-block;width:9px;height:17px;background:var(--accent);vertical-align:-3px;
    animation:knipper 1.05s steps(1) infinite;margin-left:2px}
  @keyframes knipper{0%,49%{opacity:1}50%,100%{opacity:0}}
  .hx-lood{margin:26px 0 34px;font-size:clamp(16.5px,1.3vw,19px);color:var(--steel);max-width:48ch;line-height:1.6}
  .hx-lood b{color:var(--ink);font-weight:600}
  .hx-doen{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
  .hx-fijn{display:flex;flex-wrap:wrap;gap:7px 18px;margin-top:24px;font-family:var(--mono);font-size:11px;color:var(--steel)}
  .hx-fijn span{display:inline-flex;align-items:center;gap:6px}
  .hx-fijn span:before{content:'';width:.95em;height:.95em;flex-shrink:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b5bd5' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6.5 9.8 17 4 11.5'/%3E%3C/svg%3E") no-repeat center/contain;font-weight:700}

  /* het gratis-zegel */
  .hx-zegel{position:absolute;left:-14px;top:-26px;z-index:4;width:104px;height:104px;border-radius:50%;
    display:grid;place-items:center;text-align:center;background:var(--v-koel);color:#fff;
    box-shadow:var(--gloed),var(--schaduw-l);transform:rotate(-11deg);animation:wieg 5.5s ease-in-out infinite}
  @keyframes wieg{0%,100%{transform:rotate(-11deg) translateY(0)}50%{transform:rotate(-7deg) translateY(-7px)}}
  .hx-zegel b{display:block;font-family:var(--display);font-weight:700;font-size:25px;letter-spacing:-.04em;line-height:1}
  .hx-zegel span{display:block;font-family:var(--mono);font-size:8.5px;letter-spacing:1.4px;
    text-transform:uppercase;margin-top:5px;opacity:.9}

  /* ── rechterkolom: het draaiende scherm ──────────────── */
  .hx-toestel{position:relative}
  .hx-scherm{position:relative;border-radius:16px;overflow:hidden;background:var(--vlak);
    border:1px solid var(--line);box-shadow:0 40px 90px -30px rgba(0,0,0,.75),var(--gloed);
    transition:transform .6s var(--veer),box-shadow .6s;cursor:pointer;
    /* geen 3D-kanteling: die laat de browser het venster op lage resolutie
       tekenen en daarna opschalen, waardoor het prototype wazig wordt */
    transform:translateZ(0);backface-visibility:hidden}
  .hx-toestel:hover .hx-scherm{transform:translateY(-6px);
    box-shadow:0 52px 110px -30px rgba(0,0,0,.8),0 0 80px -10px rgba(91,91,213,.8)}
  /* het perspectief komt nu uit de opstelling, niet uit een draaiing */
  .hx-toestel:before{content:'';position:absolute;left:6%;right:6%;bottom:-26px;height:38px;
    border-radius:50%;background:radial-gradient(ellipse,rgba(0,0,0,.5),transparent 70%);
    filter:blur(14px);z-index:-1}
  .hx-balk{display:flex;align-items:center;gap:9px;padding:11px 14px;background:var(--vlak2);
    border-bottom:1px solid var(--line2)}
  .hx-balk i{width:9px;height:9px;border-radius:50%;background:var(--line);font-style:normal}
  .hx-balk i:first-child{background:#F2683F}.hx-balk i:nth-child(2){background:var(--goud)}
  .hx-balk i:nth-child(3){background:var(--mint)}
  .hx-balk b{margin-left:6px;font-family:var(--mono);font-size:10.5px;letter-spacing:1.2px;
    text-transform:uppercase;color:var(--steel);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .hx-balk em{margin-left:auto;font-style:normal;font-family:var(--mono);font-size:9px;letter-spacing:1.4px;
    text-transform:uppercase;color:var(--mint);display:inline-flex;align-items:center;gap:6px;flex-shrink:0}
  .hx-balk em:before{content:'';width:6px;height:6px;border-radius:50%;background:var(--mint);
    animation:puls 2.2s ease-out infinite}
  .hx-doek{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--bg2)}
  .hx-doek iframe{position:absolute;left:0;top:0;width:1180px;height:840px;border:0;transform-origin:0 0;
    pointer-events:none;opacity:0;transition:opacity .55s ease}
  .hx-doek.klaar iframe{opacity:1}
  .hx-doek .wacht{position:absolute;inset:0;display:grid;place-items:center;background:var(--v-zacht);
    transition:opacity .45s}
  .hx-doek.klaar .wacht{opacity:0}
  .hx-doek .wacht i{width:26px;height:26px;border-radius:50%;border:2px solid var(--line);
    border-top-color:var(--accent);animation:tol .8s linear infinite}
  .hx-doek:after{content:'';position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(200deg,transparent 55%,color-mix(in srgb,var(--bg) 30%,transparent))}
  .hx-open{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.94);z-index:4;
    display:inline-flex;align-items:center;gap:9px;white-space:nowrap;font-family:var(--display);
    font-weight:600;font-size:14.5px;color:#fff;background:var(--v-koel);border-radius:999px;padding:13px 22px;
    box-shadow:0 12px 34px -8px rgba(0,0,0,.6),var(--gloed);opacity:0;
    transition:opacity .3s,transform .35s var(--veer)}
  .hx-toestel:hover .hx-open{opacity:1;transform:translate(-50%,-50%) scale(1)}

  /* naamplaatje onder het scherm */
  .hx-naam{display:flex;align-items:center;gap:14px;margin-top:20px;flex-wrap:wrap}
  .hx-naam b{font-family:var(--display);font-weight:600;font-size:17px;letter-spacing:-.03em;color:var(--ink)}
  .hx-naam s{font-family:var(--mono);font-size:12px;color:var(--steel);text-decoration-thickness:1px}
  .hx-naam u{text-decoration:none;font-family:var(--display);font-weight:700;font-size:16px;letter-spacing:-.03em;
    background:var(--t-koel);-webkit-background-clip:text;background-clip:text;color:transparent}
  .hx-naam .pijltje{color:var(--steel)}
  .hx-stip{display:flex;gap:7px;margin-left:auto}
  .hx-stip button{width:7px;height:7px;border-radius:999px;background:var(--line);transition:all .3s var(--veer);padding:0}
  .hx-stip button.aan{width:24px;background:var(--accent)}

  /* ══════════════════════════════════════════════════════════
     HET GRATIS PROTOTYPE
     Wat het is, wat het kost, wat je ervoor doet, en waarom het
     laat zien dat er bijna niets níet kan.
     ══════════════════════════════════════════════════════════ */
  .pt{position:relative;border-radius:var(--r-xl);overflow:hidden;background:var(--v-kaart);
    border:1px solid color-mix(in srgb,var(--accent) 40%,var(--line));box-shadow:var(--schaduw-l),var(--gloed)}
  .pt-schijf{position:absolute;right:-140px;top:-160px;width:460px;height:460px;border-radius:50%;
    background:radial-gradient(circle,color-mix(in srgb,var(--accent) 30%,transparent),transparent 68%);
    pointer-events:none;animation:zwel 10s ease-in-out infinite}

  /* kop */
  .pt-kop{position:relative;z-index:1;padding:44px 46px 0}
  @media(max-width:760px){.pt-kop{padding:30px 24px 0}}
  .pt-vlag{display:inline-flex;align-items:center;gap:10px;padding:8px 16px 8px 12px;border-radius:999px;
    background:var(--v-koel);color:#fff;font-family:var(--mono);font-size:11px;font-weight:600;
    letter-spacing:1.6px;text-transform:uppercase;box-shadow:var(--gloed)}
  .pt-vlag:before{content:'';width:7px;height:7px;border-radius:50%;background:#fff;
    animation:puls2 2.2s ease-out infinite}
  .pt-kop h3{font-family:var(--display);font-weight:600;font-size:clamp(26px,3.5vw,42px);
    letter-spacing:-.04em;line-height:1.1;margin:20px 0 16px;max-width:20ch}
  .pt-kop h3 em{font-style:normal;background:var(--t-koel);-webkit-background-clip:text;
    background-clip:text;color:transparent}
  .pt-kop p{margin:0;font-size:17px;color:var(--steel);line-height:1.6;max-width:62ch}

  /* wat je krijgt — drie kaarten */
  .pt-krijgt{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;
    padding:36px 46px 40px}
  @media(max-width:860px){.pt-krijgt{grid-template-columns:1fr;padding:28px 24px 30px}}
  .ptk{padding:24px;border-radius:var(--r-m);background:var(--bg);border:1px solid var(--line);
    transition:transform .4s var(--veer),border-color .35s,box-shadow .4s}
  .ptk:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--accent) 45%,var(--line));
    box-shadow:var(--gloed)}
  .ptk i{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;font-style:normal;
    font-size:19px;background:var(--accent-zacht);color:var(--accent);
    border:1px solid color-mix(in srgb,var(--accent) 32%,transparent)}
  .ptk b{display:block;font-family:var(--display);font-weight:600;font-size:17.5px;letter-spacing:-.03em;
    margin:16px 0 9px}
  .ptk span{display:block;font-size:14.5px;color:var(--steel);line-height:1.55}

  /* de tijdlijn */
  .pt-lijn{position:relative;z-index:1;border-top:1px solid var(--line);background:var(--bg2)}
  .pt-lijn-in{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
  @media(max-width:900px){.pt-lijn-in{grid-template-columns:1fr 1fr}}
  @media(max-width:560px){.pt-lijn-in{grid-template-columns:1fr}}
  .pts{position:relative;display:block;padding:30px 26px 32px;border-right:1px solid var(--line)}
  .pts:last-child{border-right:none}
  @media(max-width:900px){.pts:nth-child(2n){border-right:none}
    .pts:nth-child(-n+2){border-bottom:1px solid var(--line)}}
  @media(max-width:560px){.pts{border-right:none;border-bottom:1px solid var(--line)}}
  .pts-nr{display:flex;align-items:center;gap:12px;margin-bottom:16px}
  .pts-nr i{display:grid;place-items:center;width:30px;height:30px;border-radius:999px;flex-shrink:0;
    font-style:normal;font-family:var(--mono);font-size:12px;font-weight:700;
    background:var(--bg);border:1px solid var(--line);color:var(--steel)}
  .pts-nr s{flex:1;height:1px;background:var(--line);text-decoration:none}
  .pts-nr b{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:1.6px;
    text-transform:uppercase;color:var(--steel);white-space:nowrap}
  .pts strong{display:block;font-family:var(--display);font-weight:600;font-size:18px;
    letter-spacing:-.03em;margin-bottom:10px}
  .pts p{margin:0;font-size:14.5px;color:var(--steel);line-height:1.55}
  /* de uitgelichte stap */
  .pts.top{background:var(--accent-zacht)}
  .pts.top .pts-nr i{background:var(--v-koel);color:#fff;border-color:transparent;box-shadow:var(--gloed)}
  .pts.top .pts-nr b{color:var(--accent)}
  .pts.top .pts-nr s{background:color-mix(in srgb,var(--accent) 40%,transparent)}
  .pts-prijs{display:inline-flex;align-items:baseline;gap:8px;margin-top:16px;padding:7px 14px;
    border-radius:999px;background:var(--v-koel);color:#fff;box-shadow:var(--gloed)}
  .pts-prijs b{font-family:var(--display);font-weight:700;font-size:17px;letter-spacing:-.03em}
  .pts-prijs span{font-family:var(--mono);font-size:9.5px;letter-spacing:1.4px;text-transform:uppercase;opacity:.92}

  /* wat er allemaal kan */
  .pt-kan{position:relative;z-index:1;padding:34px 46px 0;border-top:1px solid var(--line)}
  @media(max-width:760px){.pt-kan{padding:26px 24px 0}}
  .pt-kan h4{font-family:var(--display);font-weight:600;font-size:clamp(18px,2.1vw,22px);
    letter-spacing:-.03em;margin:0 0 8px}
  .pt-kan p{margin:0 0 20px;font-size:15px;color:var(--steel);line-height:1.55;max-width:64ch}
  .pt-band{position:relative;overflow:hidden;padding:4px 0 6px;
    -webkit-mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
    mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
  .pt-rij{display:flex;width:max-content;gap:10px;animation:schuif 42s linear infinite}
  .pt-rij.terug{animation-direction:reverse;animation-duration:52s;margin-top:10px}
  .pt-band:hover .pt-rij{animation-play-state:paused}
  .pt-kaart{display:inline-flex;align-items:center;gap:9px;white-space:nowrap;padding:9px 16px;
    border-radius:999px;background:var(--bg);border:1px solid var(--line);font-size:14px;color:var(--ink2)}
  .pt-kaart:before{content:'';width:6px;height:6px;border-radius:50%;background:var(--accent);flex-shrink:0}

  /* geruststelling + knop */
  .pt-voet{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;
    gap:24px;flex-wrap:wrap;padding:30px 46px 38px;margin-top:30px;border-top:1px solid var(--line)}
  @media(max-width:760px){.pt-voet{padding:24px 24px 30px}}
  .pt-gerust{display:flex;flex-wrap:wrap;gap:10px 22px;font-family:var(--mono);font-size:11.5px;color:var(--steel)}
  .pt-gerust span{display:inline-flex;align-items:center;gap:7px}
  .pt-gerust span:before{content:'';width:.95em;height:.95em;flex-shrink:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b5bd5' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6.5 9.8 17 4 11.5'/%3E%3C/svg%3E") no-repeat center/contain;font-weight:700}

  /* ══════════════════════════════════════════════════════════
     WIE DIT BOUWT — donkere band met de echte werkplek
     ══════════════════════════════════════════════════════════ */
  .tw{position:relative;padding:0;overflow:hidden;background:#0A0F1C;color:#EAF0FB}
  .tw:before{content:'';position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(ellipse 70% 60% at 82% 22%,rgba(91,91,213,.34),transparent 68%),
      radial-gradient(ellipse 60% 50% at 6% 88%,rgba(56,189,248,.16),transparent 66%)}
  .tw:after{content:'';position:absolute;inset:0;pointer-events:none;opacity:.5;
    background-image:linear-gradient(rgba(234,240,251,.05) 1px,transparent 1px),
      linear-gradient(90deg,rgba(234,240,251,.05) 1px,transparent 1px);
    background-size:70px 70px;
    -webkit-mask:radial-gradient(ellipse 90% 70% at 50% 0%,#000,transparent 76%);
    mask:radial-gradient(ellipse 90% 70% at 50% 0%,#000,transparent 76%)}
  .tw-in{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1.08fr;gap:56px;
    align-items:center;padding:104px 0}
  .tw-in .snr b{color:#8B8CF0}
  .tw-in .snr i{background:rgba(234,240,251,.22)}
  .tw-in .snr span{color:#7C8AA6}
  .tw h2{font-family:var(--display);font-weight:600;font-size:clamp(28px,3.8vw,46px);
    letter-spacing:-.04em;line-height:1.08;margin:0 0 20px;color:#EAF0FB}
  .tw h2 em{font-style:normal;background:linear-gradient(120deg,#8B8CF0,#38BDF8);
    -webkit-background-clip:text;background-clip:text;color:transparent}
  .tw p{margin:0 0 16px;font-size:17px;line-height:1.62;color:#A8B4C8;max-width:52ch}

  /* de feiten */
  .tw-feiten{display:grid;grid-template-columns:repeat(3,auto);gap:0;margin:30px 0 30px;
    border-top:1px solid rgba(234,240,251,.14);border-bottom:1px solid rgba(234,240,251,.14)}
  @media(max-width:560px){.tw-feiten{grid-template-columns:1fr 1fr}}
  .tw-feit{padding:20px 26px;border-right:1px solid rgba(234,240,251,.14)}
  .tw-feit:first-child{padding-left:0}
  .tw-feit:last-child{border-right:none}
  @media(max-width:560px){.tw-feit:nth-child(2n){border-right:none}}
  .tw-feit b{display:block;font-family:var(--display);font-weight:700;font-size:26px;letter-spacing:-.04em;
    background:linear-gradient(120deg,#8B8CF0,#38BDF8);-webkit-background-clip:text;background-clip:text;color:transparent}
  .tw-feit span{display:block;font-family:var(--mono);font-size:11px;color:#7C8AA6;margin-top:8px;line-height:1.5}

  /* het citaat */
  .tw-citaat{position:relative;padding:22px 26px;border-radius:var(--r-m);
    background:rgba(139,140,240,.10);border:1px solid rgba(139,140,240,.28)}
  .tw-citaat p{margin:0;font-family:var(--serif);font-style:italic;font-size:clamp(17px,1.9vw,21px);
    line-height:1.45;color:#EAF0FB;max-width:none}
  .tw-citaat span{display:block;margin-top:14px;font-family:var(--mono);font-size:10.5px;letter-spacing:1.6px;
    text-transform:uppercase;color:#8B8CF0}

  /* knoppen op de donkere band: eigen kleuren, want de paginakleuren
     zijn hier te donker om op te lezen */
  .tw .knop{color:#EAF0FB;border-color:rgba(234,240,251,.34)}
  .tw .knop:hover{color:#0A0F1C;background:#EAF0FB;border-color:#EAF0FB}
  .tw .knop .pijl{color:inherit}

  /* de fotocollage */
  .tw-beeld{position:relative;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;gap:16px}
  .tw-foto{position:relative;overflow:hidden;border-radius:var(--r-l);border:1px solid rgba(234,240,251,.16);
    background:#0E1524;box-shadow:0 30px 70px -34px rgba(0,0,0,.9)}
  .tw-foto img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1s var(--veer)}
  .tw-foto:hover img{transform:scale(1.06)}
  .tw-foto:after{content:'';position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(200deg,transparent 46%,rgba(10,15,28,.55))}
  .tw-foto figcaption{position:absolute;left:12px;bottom:12px;z-index:2;font-family:var(--mono);font-size:9.5px;
    letter-spacing:1.6px;text-transform:uppercase;color:#EAF0FB;background:rgba(10,15,28,.6);
    backdrop-filter:blur(8px);border-radius:999px;padding:5px 11px;border:1px solid rgba(234,240,251,.14)}

  /* de onderste foto heeft het adresplaatje rechtsonder, dus het
     bijschrift gaat daar naar boven */
  .tw-foto.klein:last-of-type figcaption{top:12px;bottom:auto}

  .tw-foto.groot{grid-row:1 / span 2;aspect-ratio:4/5.2}
  .tw-foto.klein{aspect-ratio:4/3}
  @media(max-width:560px){.tw-foto.groot{grid-row:auto;aspect-ratio:4/3}}
  .tw-foto.zweef{animation:zweef 7s ease-in-out infinite}
  .tw-foto.zweef2{animation:zweef 8.4s ease-in-out infinite .6s}
  @keyframes zweef{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}
  @media(prefers-reduced-motion:reduce){.tw-foto.zweef,.tw-foto.zweef2{animation:none}}
  /* het adresplaatje */
  .tw-adres{position:absolute;right:-12px;bottom:-24px;z-index:4;display:flex;align-items:center;gap:12px;
    padding:13px 18px;border-radius:var(--r-m);background:#141D30;border:1px solid rgba(234,240,251,.16);
    box-shadow:0 24px 60px -26px rgba(0,0,0,.9)}
  @media(max-width:560px){.tw-adres{position:static;margin-top:16px}}
  .tw-adres i{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;flex-shrink:0;
    font-style:normal;font-size:15px;background:rgba(139,140,240,.16);color:#8B8CF0;
    border:1px solid rgba(139,140,240,.3)}
  .tw-adres b{display:block;font-family:var(--display);font-weight:600;font-size:14.5px;letter-spacing:-.02em;color:#EAF0FB}
  .tw-adres span{display:block;font-family:var(--mono);font-size:10.5px;color:#7C8AA6;margin-top:3px}

  /* ══════════════════════════════════════════════════════════
     SLOT — heldere band, één boodschap
     ══════════════════════════════════════════════════════════ */
  .fin{position:relative;overflow:hidden;padding:0;
    background:linear-gradient(118deg,#4747C9 0%,#5B5BD5 38%,#3E8FD6 74%,#38BDF8 100%)}
  .fin:before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.5;
    background-image:linear-gradient(rgba(255,255,255,.09) 1px,transparent 1px),
      linear-gradient(90deg,rgba(255,255,255,.09) 1px,transparent 1px);background-size:64px 64px}
  .fin:after{content:'';position:absolute;width:620px;height:620px;right:-180px;top:-260px;border-radius:50%;
    background:radial-gradient(circle,rgba(255,255,255,.20),transparent 66%);pointer-events:none;
    animation:zwel 11s ease-in-out infinite}
  .fin-in{position:relative;z-index:2;display:grid;grid-template-columns:1.25fr .75fr;gap:52px;
    align-items:center;padding:88px 0}
  .fin-oog{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11px;
    font-weight:600;letter-spacing:2.4px;text-transform:uppercase;color:rgba(255,255,255,.86)}
  .fin-oog:before{content:'';width:8px;height:8px;border-radius:50%;background:#fff;
    box-shadow:0 0 0 4px rgba(255,255,255,.24);animation:klop 2.6s ease-in-out infinite}
  .fin h2{font-family:var(--display);font-weight:700;font-size:clamp(32px,5vw,62px);letter-spacing:-.045em;
    line-height:1.02;margin:22px 0 18px;color:#fff;max-width:15ch}
  .fin p{margin:0;font-size:18px;line-height:1.6;color:rgba(255,255,255,.88);max-width:44ch}
  .fin-doen{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:34px}
  .fin-knop{position:relative;display:inline-flex;align-items:center;gap:11px;border-radius:999px;
    padding:20px 38px;font-family:var(--display);font-size:17.5px;font-weight:700;letter-spacing:-.02em;
    background:#fff;color:#1B2136;overflow:hidden;
    box-shadow:0 22px 50px -18px rgba(6,12,30,.6);transition:transform .3s var(--veer),box-shadow .3s}
  .fin-knop:hover{transform:translateY(-3px);box-shadow:0 30px 64px -18px rgba(6,12,30,.7)}
  .fin-knop:after{content:'';position:absolute;inset:0;
    background:linear-gradient(110deg,transparent 35%,rgba(91,91,213,.22) 50%,transparent 65%);
    transform:translateX(-130%)}
  .fin-knop:hover:after{transform:translateX(130%);transition:transform .9s ease}
  .fin-tweede{display:inline-flex;align-items:center;gap:10px;padding:19px 30px;border-radius:999px;
    border:1px solid rgba(255,255,255,.5);color:#fff;font-family:var(--display);font-weight:600;font-size:16px;
    transition:background .25s,border-color .25s}
  .fin-tweede:hover{background:rgba(255,255,255,.14);border-color:#fff}

  /* de stappen rechts */
  .fin-stappen{display:grid;gap:2px;border-radius:var(--r-l);overflow:hidden;
    background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28)}
  .fst{display:flex;align-items:center;gap:14px;padding:17px 20px;background:rgba(12,20,48,.34);
    transition:background .3s}
  .fst:hover{background:rgba(12,20,48,.46)}
  .fst i{display:grid;place-items:center;width:28px;height:28px;border-radius:999px;flex-shrink:0;
    font-style:normal;font-family:var(--mono);font-size:11px;font-weight:700;color:#fff;
    background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.4)}
  .fst b{display:block;font-family:var(--display);font-weight:600;font-size:15.5px;letter-spacing:-.02em;color:#fff}
  .fst span{display:block;font-family:var(--mono);font-size:10.5px;color:rgba(255,255,255,.72);margin-top:3px}
  .fst em{margin-left:auto;font-style:normal;font-family:var(--mono);font-size:10px;letter-spacing:1.2px;
    text-transform:uppercase;color:rgba(255,255,255,.9);border:1px solid rgba(255,255,255,.4);
    border-radius:999px;padding:4px 10px;white-space:nowrap}
  .fin-fijn{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:22px;font-family:var(--mono);font-size:11.5px;
    color:rgba(255,255,255,.8)}
  .fin-fijn span{display:inline-flex;align-items:center;gap:7px}
  .fin-fijn span:before{content:'';width:.95em;height:.95em;flex-shrink:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6.5 9.8 17 4 11.5'/%3E%3C/svg%3E") no-repeat center/contain;color:#fff;font-weight:700}

  /* ══ PROTOTYPEVIEWER ═════════════════════════════════════ */
  .pvenster{position:fixed;inset:0;z-index:200;background:rgba(4,7,14,.86);backdrop-filter:blur(14px);
    display:flex;flex-direction:column;padding:26px;opacity:0;pointer-events:none;transition:opacity .3s ease}
  .pvenster.aan{opacity:1;pointer-events:auto}
  @media(max-width:760px){.pvenster{padding:0}}
  .pv-in{position:relative;flex:1;display:flex;flex-direction:column;width:100%;max-width:1340px;margin:0 auto;
    background:var(--bg);border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden;
    box-shadow:var(--schaduw-l);transform:translateY(18px) scale(.985);transition:transform .4s var(--veer)}
  .pvenster.aan .pv-in{transform:none}
  @media(max-width:760px){.pv-in{border-radius:0;border:none}}
  .pv-balk{display:flex;align-items:center;gap:14px;padding:13px 18px;border-bottom:1px solid var(--line);
    background:var(--vlak);flex-shrink:0}
  .pv-stip{display:flex;gap:6px;flex-shrink:0}
  .pv-stip i{width:11px;height:11px;border-radius:50%;background:var(--line)}
  .pv-stip i:first-child{background:#F2683F}
  .pv-stip i:nth-child(2){background:var(--goud)}
  .pv-stip i:last-child{background:var(--mint)}
  @media(max-width:620px){.pv-stip{display:none}}
  .pv-naam{display:flex;flex-direction:column;gap:3px;min-width:0}
  .pv-naam b{font-family:var(--display);font-weight:600;font-size:15px;letter-spacing:-.03em;color:var(--ink);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .pv-naam span{font-family:var(--mono);font-size:9.5px;letter-spacing:1.5px;text-transform:uppercase;color:var(--steel)}
  .pv-vlag{margin-left:auto;display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10px;
    font-weight:600;letter-spacing:1.4px;text-transform:uppercase;color:var(--accent);
    border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);border-radius:999px;padding:6px 13px;
    white-space:nowrap}
  .pv-vlag:before{content:'';width:7px;height:7px;border-radius:50%;background:var(--mint);
    box-shadow:0 0 0 0 rgba(45,212,168,.6);animation:puls 2.4s ease-out infinite}
  @media(max-width:880px){.pv-vlag{display:none}}
  .pv-uit{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:11px;color:var(--steel);
    border:1px solid var(--line);border-radius:999px;padding:8px 14px;transition:all .22s;white-space:nowrap}
  .pv-uit:hover{border-color:var(--accent);color:var(--ink)}
  @media(max-width:620px){.pv-uit{display:none}}
  .pv-weg{width:36px;height:36px;border-radius:999px;border:1px solid var(--line);display:grid;place-items:center;
    flex-shrink:0;transition:all .22s;margin-left:auto}
  .pv-balk .pv-vlag ~ .pv-weg,.pv-balk .pv-uit ~ .pv-weg{margin-left:0}
  .pv-weg:hover{background:var(--accent);color:#fff;border-color:transparent}
  .pv-doek{flex:1;position:relative;background:var(--bg2);min-height:0}
  .pv-doek iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
  .pv-laden{position:absolute;inset:0;display:grid;place-items:center;gap:14px;align-content:center;
    font-family:var(--mono);font-size:11.5px;letter-spacing:1.6px;text-transform:uppercase;color:var(--steel)}
  .pv-laden i{width:34px;height:34px;border-radius:50%;border:2px solid var(--line);border-top-color:var(--accent);
    animation:tol .8s linear infinite}
  @keyframes tol{to{transform:rotate(360deg)}}
  .pv-voet{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 18px;
    border-top:1px solid var(--line);background:var(--vlak);flex-shrink:0;font-size:13.5px;color:var(--steel)}
  .pv-voet b{color:var(--ink);font-weight:600}
  @media(max-width:760px){.pv-voet span.pv-tekst{display:none}}

  /* ══ LEVENDE MINIATUUR VAN EEN PROTOTYPE ═════════════════
     Het echte prototype, verkleind in de kaart. Niet aanklikbaar:
     de kaart zelf vangt de klik op.
     ═══════════════════════════════════════════════════════════ */

  /* grote miniatuur in het uitnodigingsblok */

  /* ══ KNOP "LIVE TESTEN" OP EEN VOORBEELD ═════════════════ */
  .live-knop{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:4;
    display:inline-flex;align-items:center;gap:9px;white-space:nowrap;
    font-family:var(--display);font-weight:600;font-size:14px;letter-spacing:-.02em;color:#fff;
    background:var(--v-koel);border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:12px 20px;
    box-shadow:0 10px 30px -8px rgba(0,0,0,.6),var(--gloed);
    transition:transform .3s var(--veer),box-shadow .3s}
  .live-knop:before{content:'';width:8px;height:8px;border-radius:50%;background:#fff;
    box-shadow:0 0 0 0 rgba(255,255,255,.7);animation:klop2 2s ease-out infinite}
  @keyframes klop2{0%{box-shadow:0 0 0 0 rgba(255,255,255,.65)}70%{box-shadow:0 0 0 9px transparent}
    100%{box-shadow:0 0 0 0 transparent}}
  .live-knop:hover{transform:translate(-50%,-50%) scale(1.06);
    box-shadow:0 14px 40px -8px rgba(0,0,0,.7),0 0 70px -8px rgba(91,91,213,.85)}
  /* op de kleine kaarten wat compacter */
  /* in het detailvenster groter en met een verduistering eronder */
  .wv-beeld .live-knop{font-size:16px;padding:15px 26px}
  @media(max-width:520px){.live-knop{font-size:12.5px;padding:10px 16px}}

  /* knop op een werkkaart die een prototype heeft */
  .w-proto{position:absolute;right:13px;top:13px;z-index:3;display:inline-flex;align-items:center;gap:7px;
    font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:1.4px;text-transform:uppercase;
    color:#fff;background:var(--v-koel);border-radius:999px;padding:6px 12px;box-shadow:var(--gloed)}
  .w-proto:before{content:'';width:6px;height:6px;border-radius:50%;background:#fff;
    animation:puls2 2.2s ease-out infinite}
  @keyframes puls2{0%{opacity:1}50%{opacity:.35}100%{opacity:1}}

  /* rij met prototypekaarten */
  .kopje{max-width:760px}
  @media(max-width:1080px){.prolijst{grid-template-columns:1fr 1fr}}
  @media(max-width:700px){.prolijst{grid-template-columns:1fr}}
  .pro-kopjes{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
  .pro-soort{font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:1.4px;
    text-transform:uppercase;color:var(--mint);
    border:1px solid color-mix(in srgb,var(--mint) 38%,transparent);border-radius:999px;padding:4px 9px}
  .pro-soort.los{color:var(--warm);border-color:color-mix(in srgb,var(--warm) 40%,transparent)}


  /* ══ FEITENSTROOK ════════════════════════════════════════
     Eén doorlopende strook met de harde cijfers, zoals op
     deforexopleiding.nl onder de hero.
     ═══════════════════════════════════════════════════════════ */
  .strook{display:flex;flex-wrap:wrap;align-items:center;gap:0;border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);background:var(--bg2)}
  .strook > div{flex:1 1 auto;min-width:150px;padding:22px 26px;border-right:1px solid var(--line2);
    display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
  .strook > div:last-child{border-right:none}
  .strook b{font-family:var(--display);font-weight:700;font-size:clamp(21px,2.4vw,28px);letter-spacing:-.045em;
    background:var(--t-koel);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1}
  .strook span{font-family:var(--mono);font-size:11px;color:var(--steel);line-height:1.4}
  @media(max-width:700px){.strook > div{flex:1 1 46%;min-width:0;padding:18px}}

  /* ══ HERKEN JE DEZE WEEK ═════════════════════════════════ */
  .week{background:var(--v-kaart);border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden;
    box-shadow:var(--schaduw)}
  .week-kop{display:flex;align-items:baseline;gap:10px;padding:18px 24px;border-bottom:1px solid var(--line2);
    font-family:var(--mono);font-size:10.5px;letter-spacing:1.8px;text-transform:uppercase;color:var(--steel)}
  .week-kop b{font-family:var(--display);font-weight:600;font-size:15px;letter-spacing:-.03em;
    text-transform:none;color:var(--ink)}
  .week-rij{display:grid;grid-template-columns:46px 1fr;gap:16px;align-items:start;padding:15px 24px;
    border-bottom:1px solid var(--line2)}
  .week-rij:last-of-type{border-bottom:none}
  .week-rij i{font-style:normal;font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:1.4px;
    color:var(--accent);padding-top:2px}
  .week-rij p{margin:0;font-size:15.5px;color:var(--ink2);line-height:1.5}
  .week-noot{display:flex;align-items:center;gap:14px;padding:20px 24px;border-top:1px solid var(--line);
    background:color-mix(in srgb,var(--accent) 7%,transparent)}
  .week-noot b{font-family:var(--display);font-weight:600;font-size:16.5px;letter-spacing:-.03em;color:var(--ink)}
  .week-noot span{margin-left:auto;font-family:var(--mono);font-size:10px;letter-spacing:1.4px;
    text-transform:uppercase;color:var(--steel);text-align:right;line-height:1.4}
  @media(max-width:560px){.week-noot{flex-direction:column;align-items:flex-start;gap:8px}
    .week-noot span{margin-left:0;text-align:left}}

  /* ══ TWEE WEGEN ══════════════════════════════════════════ */
  .wegen{display:grid;grid-template-columns:1fr 1fr;gap:18px}
  @media(max-width:820px){.wegen{grid-template-columns:1fr}}
  .weg{padding:30px;border-radius:var(--r-l);border:1px solid var(--line);background:var(--v-kaart)}
  .weg.goed{border-color:color-mix(in srgb,var(--accent) 45%,var(--line));box-shadow:var(--gloed)}
  .weg h4{font-family:var(--display);font-weight:600;font-size:20px;letter-spacing:-.035em;margin:0 0 20px}
  .weg ul{list-style:none;margin:0;padding:0;display:grid;gap:13px}
  .weg li{position:relative;padding-left:30px;font-size:15.5px;line-height:1.5;color:var(--steel)}
  .weg li:before{position:absolute;left:0;top:-1px;font-size:15px;font-weight:700}
  .weg.mis li:before{content:'';width:.95em;height:.95em;flex-shrink:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f2683f' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 5.5 18.5 18.5M18.5 5.5 5.5 18.5'/%3E%3C/svg%3E") no-repeat center/contain;color:var(--steel);opacity:.6}
  .weg.goed li{color:var(--ink2)}
  .weg.goed li:before{content:'';width:.95em;height:.95em;flex-shrink:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b5bd5' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6.5 9.8 17 4 11.5'/%3E%3C/svg%3E") no-repeat center/contain}

  /* ══ KANTOORBLOK ═════════════════════════════════════════ */
  .kantoor{display:grid;grid-template-columns:1.3fr 1fr;gap:18px;align-items:stretch}
  @media(max-width:860px){.kantoor{grid-template-columns:1fr}}
  .kantoor .gevel{position:relative;border-radius:var(--r-l);overflow:hidden;border:1px solid var(--line);
    min-height:320px}
  .kantoor .gevel img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
  .kantoor .gevel figcaption{position:absolute;left:16px;bottom:16px;z-index:2;font-family:var(--mono);
    font-size:10.5px;letter-spacing:1.4px;text-transform:uppercase;color:#fff;background:rgba(10,15,28,.66);
    backdrop-filter:blur(8px);border-radius:999px;padding:7px 14px}
  .kantoor-info{padding:30px;border-radius:var(--r-l);border:1px solid var(--line);background:var(--v-kaart);
    display:flex;flex-direction:column;gap:20px}
  .kantoor-info h4{font-family:var(--display);font-weight:600;font-size:19px;letter-spacing:-.035em;margin:0}
  .adres{font-size:15.5px;color:var(--ink2);line-height:1.6}
  .adres b{display:block;font-family:var(--display);font-weight:600;font-size:16px;color:var(--ink);margin-bottom:4px}
  .kantoor-info .los-rij{display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:12px 0;border-top:1px solid var(--line2);font-size:15px;color:var(--steel)}
  .kantoor-info .los-rij b{font-family:var(--mono);font-size:12px;color:var(--ink2)}

  /* ══ CIJFERS ═════════════════════════════════════════════ */
  .cijferrij{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
  @media(max-width:860px){.cijferrij{grid-template-columns:1fr 1fr}}
  .cijfer{padding:30px;border:1px solid var(--line);border-radius:var(--r-l);background:var(--v-kaart);
    transition:transform .4s var(--veer),border-color .35s,box-shadow .4s}
  .cijfer:hover{transform:translateY(-5px);border-color:color-mix(in srgb,var(--accent) 45%,var(--line));box-shadow:var(--gloed)}
  .cijfer b{display:block;font-family:var(--display);font-weight:700;font-size:clamp(36px,4.6vw,58px);
    letter-spacing:-.05em;line-height:.95;
    background:var(--t-koel);-webkit-background-clip:text;background-clip:text;color:transparent}
  .cijfer span{display:block;font-family:var(--mono);font-size:11.5px;color:var(--steel);margin-top:14px;line-height:1.5}

  /* ══ KETTING ═════════════════════════════════════════════ */
  .ketting{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
  @media(max-width:920px){.ketting{grid-template-columns:1fr}}
  .kt{position:relative;padding:30px;border:1px solid var(--line);border-radius:var(--r-l);
    background:var(--v-kaart);opacity:.36;transform:translateY(10px);
    transition:opacity .8s var(--veer),transform .8s var(--veer),border-color .8s,box-shadow .8s}
  .ketting.f1 .k1,.ketting.f2 .k2,.ketting.f3 .k3{opacity:1;transform:none}
  .ketting.f2 .k2,.ketting.f3 .k3{border-color:color-mix(in srgb,var(--accent) 45%,var(--line));box-shadow:var(--gloed)}
  .kt .kn{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:2px;color:var(--accent)}
  .kt h4{font-family:var(--display);font-weight:600;font-size:21px;letter-spacing:-.035em;margin:14px 0 14px}
  .kt p{margin:16px 0 0;font-size:15px;color:var(--steel);line-height:1.55}
  .kt-doos{display:flex;flex-wrap:wrap;gap:7px;min-height:80px;align-content:flex-start}
  .kt-sys{font-family:var(--mono);font-size:10.5px;color:var(--steel);border:1px solid var(--line);
    border-radius:999px;padding:6px 12px;transition:all .5s}
  .ketting.f2 .k2 .kt-sys{border-color:color-mix(in srgb,var(--accent) 55%,transparent);color:var(--ink);
    box-shadow:0 0 16px -6px rgba(91,91,213,.7)}
  .kt-bol{display:inline-grid;place-items:center;width:52px;height:52px;border-radius:16px;background:var(--v-koel);
    color:#fff;font-family:var(--display);font-weight:700;font-size:15px;box-shadow:var(--gloed);
    transform:scale(.7);opacity:0;transition:all .6s var(--veer)}
  .ketting.f3 .k3 .kt-bol{transform:none;opacity:1}
  .kt-weet{display:block;font-family:var(--mono);font-size:10.5px;color:var(--steel);margin-top:9px;
    opacity:0;transform:translateX(-8px);transition:all .5s var(--veer)}
  .ketting.f3 .k3 .kt-weet{opacity:1;transform:none}
  .ketting.f3 .k3 .kt-weet:nth-of-type(2){transition-delay:.16s}
  .ketting.f3 .k3 .kt-weet:nth-of-type(3){transition-delay:.32s}
  .opnieuw{display:inline-flex;align-items:center;gap:8px;margin-top:28px;font-family:var(--mono);font-size:11px;
    letter-spacing:1.4px;text-transform:uppercase;color:var(--steel);border:1px solid var(--line);
    border-radius:999px;padding:10px 18px;transition:all .25s}
  .opnieuw:hover{color:var(--ink);border-color:var(--accent)}

  /* ══ STAPPEN ═════════════════════════════════════════════ */
  @media(max-width:700px){.stappen{padding-left:46px}}
  @media(max-width:700px){.stappen:before{left:15px}}
  @media(max-width:700px){.stappen i.draad{left:15px}}
  .stap{position:relative;padding:22px 0}
  .stap:before{content:'';position:absolute;left:-59px;top:30px;width:16px;height:16px;border-radius:50%;
    background:var(--bg);border:2px solid var(--line);transition:all .5s var(--veer)}
  @media(max-width:700px){.stap:before{left:-38px}}
  .stap.zie:before{border-color:var(--accent);box-shadow:0 0 0 5px var(--accent-zacht),0 0 18px rgba(91,91,213,.7)}
  .stap .n{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:2px;color:var(--accent)}
  .stap h3{font-family:var(--display);font-weight:600;font-size:clamp(20px,2.3vw,27px);letter-spacing:-.04em;margin:10px 0 10px}
  .stap p{margin:0;font-size:16px;color:var(--steel);line-height:1.6;max-width:66ch}
  .stap.uitgelicht{background:var(--v-kaart);border:1px solid color-mix(in srgb,var(--accent) 42%,var(--line));
    border-radius:var(--r-l);padding:26px 28px;box-shadow:var(--gloed)}
  .stap-vlag{display:inline-block;margin-top:15px;font-family:var(--mono);font-size:10px;font-weight:600;
    letter-spacing:1.6px;text-transform:uppercase;color:#fff;background:var(--v-koel);border-radius:999px;padding:6px 13px}

  /* ══ PRIJS ═══════════════════════════════════════════════ */
  .prijsrij{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:start}
  @media(max-width:920px){.prijsrij{grid-template-columns:1fr}}
  .pk{position:relative;padding:32px;border:1px solid var(--line);border-radius:var(--r-l);background:var(--v-kaart);
    transition:transform .4s var(--veer),box-shadow .4s,border-color .35s}
  .pk:hover{transform:translateY(-5px);box-shadow:var(--schaduw)}
  .pk.gratis{border-color:color-mix(in srgb,var(--accent) 50%,var(--line));box-shadow:var(--gloed)}
  .pk.gratis .pb{background:var(--t-koel);-webkit-background-clip:text;background-clip:text;color:transparent}
  .plijst{margin:18px 0 22px;padding:0;list-style:none;display:grid;gap:10px}
  .plijst li{position:relative;padding-left:22px;font-size:14.5px;color:var(--ink2);line-height:1.5}
  .plijst li:before{content:'';position:absolute;left:0;top:7px;width:8px;height:8px;border-radius:3px;
    background:var(--accent-zacht);border:1px solid color-mix(in srgb,var(--accent) 45%,transparent)}
  .pk.gratis .plijst li:before{background:var(--v-koel);border-color:transparent}
  .pk .pl{font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--steel)}
  .pk .pb{font-family:var(--display);font-weight:700;font-size:clamp(28px,3.6vw,42px);letter-spacing:-.05em;
    line-height:1;margin:16px 0 10px}
  .pk .pw{font-size:16px;color:var(--ink2);font-weight:500}
  .pk ul{list-style:none;margin:24px 0 0;padding:20px 0 0;border-top:1px solid var(--line2);display:grid;gap:13px}
  .pk li{position:relative;padding-left:26px;font-size:15px;color:var(--steel);line-height:1.5}
  .pk ul:not(.plijst) li:before{content:'';width:.95em;height:.95em;flex-shrink:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b5bd5' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6.5 9.8 17 4 11.5'/%3E%3C/svg%3E") no-repeat center/contain;position:absolute;left:0;color:var(--accent);font-weight:700}
  .pk .pn{margin:22px 0 0;font-family:var(--mono);font-size:11.5px;color:var(--steel);line-height:1.7}
  .tabel{border-top:1px solid var(--line)}
  .trij{display:flex;justify-content:space-between;gap:18px;padding:16px 0;border-bottom:1px solid var(--line2);font-size:16px}
  .trij b{font-family:var(--mono);font-size:11.5px;letter-spacing:1.4px;text-transform:uppercase;color:var(--steel)}
  .trij b.wij{color:var(--accent)}
  .trij b.jij{color:var(--warm)}

  /* ══ OVERIG ══════════════════════════════════════════════ */
  .citaat{font-family:var(--serif);font-style:italic;font-size:clamp(27px,4vw,50px);line-height:1.14;
    letter-spacing:-.02em;max-width:22ch;margin:0}
  @media(max-width:900px){.naast{grid-template-columns:1fr;gap:34px}}
  @media(max-width:900px){.naast.scheef{grid-template-columns:1fr}}
  .beeld{position:relative;overflow:hidden;border-radius:var(--r-l);background:var(--bg2);border:1px solid var(--line)}
  .beeld img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--veer)}
  .beeld:hover img{transform:scale(1.06)}
  .beeld figcaption{position:absolute;left:13px;bottom:13px;font-family:var(--mono);font-size:9.5px;
    letter-spacing:1.5px;text-transform:uppercase;color:#fff;background:rgba(10,15,28,.62);
    backdrop-filter:blur(8px);border-radius:999px;padding:5px 11px}
  @media(max-width:900px){.portret{aspect-ratio:3/4;max-width:460px}}

  .beeldrij{display:grid;grid-template-columns:1.7fr 1fr;grid-template-rows:1fr 1fr;gap:14px;
    aspect-ratio:16/9;max-height:370px}
  .beeldrij .beeld:first-child{grid-row:1 / span 2}
  @media(max-width:760px){
    .beeldrij{grid-template-columns:1fr 1fr;grid-template-rows:auto;aspect-ratio:auto;max-height:none;
      grid-auto-rows:170px}
    .beeldrij .beeld:first-child{grid-row:auto;grid-column:1 / span 2;height:220px}
  }
  @media(max-width:460px){
    .beeldrij{grid-template-columns:1fr;grid-auto-rows:190px}
    .beeldrij .beeld:first-child{grid-column:auto;height:auto}
  }
  .breedbeeld{position:relative;min-height:min(64vh,540px);display:flex;align-items:flex-end;overflow:hidden}
  .breedbeeld img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .breedbeeld:before{content:'';position:absolute;inset:0;z-index:2;
    background:linear-gradient(to top,var(--bg) 3%,color-mix(in srgb,var(--bg) 60%,transparent) 44%,transparent)}
  .breedbeeld .wrap{position:relative;z-index:3;padding-bottom:56px}

  .vraag{border-bottom:1px solid var(--line)}
  .vraag>button{display:grid;grid-template-columns:1fr 36px;gap:20px;align-items:center;width:100%;text-align:left;
    padding:26px 0;font-family:var(--display);font-weight:600;font-size:clamp(18px,2.1vw,23px);
    letter-spacing:-.035em;color:var(--ink);transition:color .25s}
  .vraag>button:hover{color:var(--accent)}
  @keyframes zwel{0%,100%{transform:scale(1);opacity:.7}50%{transform:scale(1.18);opacity:1}}

  footer{border-top:1px solid var(--line);padding:72px 0 42px;background:var(--bg2)}
  .voet{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:42px;padding-bottom:52px}
  @media(max-width:860px){.voet{grid-template-columns:1fr 1fr;gap:32px}}
  .voet p{font-size:15px;color:var(--steel);max-width:34ch;margin:20px 0 0}
  .voet h5{font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:2px;text-transform:uppercase;
    color:var(--ink);margin:0 0 18px}
  .voet a{display:block;font-size:15.5px;color:var(--steel);margin-bottom:12px;transition:color .2s}
  .voet a:hover{color:var(--accent)}
  .voetlijn{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;padding-top:28px;
    border-top:1px solid var(--line2);font-family:var(--mono);font-size:11.5px;color:var(--steel)}

  /* zoeker */
  .zoekdoos{background:var(--v-kaart);border:1px solid var(--line);border-radius:var(--r-l);padding:34px}
  @media(max-width:620px){.zoekdoos{padding:24px}}
  .zoekveld{position:relative}
  .zoekveld input{width:100%;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-m);
    padding:18px 20px 18px 52px;font-family:var(--display);font-size:clamp(18px,2vw,22px);font-weight:600;
    letter-spacing:-.03em;color:var(--ink);outline:none;transition:all .25s}
  .zoekveld input:focus{border-color:var(--accent);box-shadow:var(--gloed)}
  .zoekveld .lens{position:absolute;left:20px;top:50%;transform:translateY(-50%);color:var(--steel);font-size:19px}
  .zoekuit{margin-top:20px;min-height:82px}
  .treffer{display:flex;align-items:center;gap:14px;padding:14px 16px;margin-bottom:8px;border-radius:var(--r-m);
    background:var(--accent-zacht);border:1px solid color-mix(in srgb,var(--accent) 32%,transparent);
    animation:opIn .35s var(--veer) both}
  @keyframes opIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
  .treffer .vink{width:26px;height:26px;border-radius:999px;background:var(--v-koel);color:#fff;display:grid;
    place-items:center;font-size:12px;flex-shrink:0}
  .treffer b{display:block;font-family:var(--display);font-weight:600;font-size:16px;letter-spacing:-.03em}
  .treffer i{display:block;font-style:normal;font-family:var(--mono);font-size:11px;color:var(--steel);margin-top:3px}
  .misser{padding:16px;border-radius:var(--r-m);border:1px dashed var(--line);font-size:15.5px;color:var(--ink2);
    animation:opIn .35s var(--veer) both}
  .misser b{color:var(--warm)}
  .rust{font-size:15.5px;color:var(--steel);max-width:64ch}
  .tips{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
  .tip{font-family:var(--mono);font-size:11.5px;color:var(--steel);border:1px solid var(--line);
    border-radius:999px;padding:8px 14px;transition:all .2s}
  .tip:hover{border-color:var(--accent);color:var(--ink)}

  .film{position:relative;border-radius:var(--r-l);overflow:hidden;border:1px solid var(--line);
    background:#080D18;aspect-ratio:16/9;cursor:pointer;box-shadow:var(--schaduw)}
  .film img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .9s var(--veer)}
  .film:hover img{transform:scale(1.05)}
  .film:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,13,24,.2),rgba(8,13,24,.62))}
  .film .knopgroot{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;width:78px;height:78px;
    border-radius:50%;background:var(--v-koel);display:grid;place-items:center;box-shadow:var(--gloed);
    transition:transform .3s var(--veer)}
  .film:hover .knopgroot{transform:translate(-50%,-50%) scale(1.1)}
  .film .knopgroot i{width:0;height:0;margin-left:5px;border-style:solid;border-width:13px 0 13px 21px;
    border-color:transparent transparent transparent #fff}
  .film .bijschrift{position:absolute;left:20px;bottom:18px;z-index:3;color:#fff;font-family:var(--display);
    font-weight:600;font-size:16px;letter-spacing:-.03em}
  .film iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:5}
  .film.speelt:after,.film.speelt .knopgroot,.film.speelt .bijschrift{display:none}

  .vinken{list-style:none;margin:0;padding:0;display:grid;gap:12px;max-width:60ch}
  .vinken li{position:relative;padding-left:32px;font-size:16.5px;color:var(--ink2);line-height:1.5}
  .vinken li b{color:var(--ink);font-weight:600}
  .vinken li:before{content:'';position:absolute;left:0;top:7px;width:18px;height:18px;border-radius:6px;
    background:var(--accent-zacht);border:1px solid color-mix(in srgb,var(--accent) 40%,transparent)}
  .vinken li:after{content:'';position:absolute;left:6px;top:11px;width:4px;height:8px;
    border:solid var(--accent);border-width:0 2px 2px 0;transform:rotate(42deg)}

  .noot{margin-top:36px;padding:28px 32px;border-radius:var(--r-l);background:var(--v-kaart);
    border:1px solid var(--line);border-left:3px solid var(--accent);max-width:78ch}
  .noot p{margin:0;font-family:var(--serif);font-style:italic;font-size:clamp(19px,2.2vw,25px);
    line-height:1.45;color:var(--ink)}
  .noot span{display:block;margin-top:14px;font-family:var(--mono);font-size:11px;letter-spacing:1.2px;color:var(--steel)}



  /* ══════════════════════════════════════════════════════════
     ONS WERK — pagina
     ══════════════════════════════════════════════════════════ */
  /* paginakop, gedeeld door alle binnenpagina's */
  .pkop{position:relative;padding:130px 0 0;overflow:hidden}
  .pkop:before{content:'';position:absolute;left:50%;top:-180px;width:820px;height:520px;
    transform:translateX(-50%);pointer-events:none;
    background:radial-gradient(ellipse,color-mix(in srgb,var(--accent) 22%,transparent),transparent 66%)}
  .pkop-in{position:relative;z-index:1;padding-bottom:44px}
  .pkop .oog{margin-bottom:18px}
  .pkop h1{font-family:var(--display);font-weight:600;font-size:clamp(34px,5.2vw,62px);
    letter-spacing:-.045em;line-height:1.04;margin:0 0 20px;max-width:17ch}
  .pkop p{margin:0;font-size:clamp(16.5px,1.35vw,19px);color:var(--steel);line-height:1.6;max-width:56ch}
  .pkop-cijfers{display:flex;flex-wrap:wrap;gap:0;margin-top:38px;border-top:1px solid var(--line)}
  .pkop-cijfer{padding:20px 30px 0 0;margin-right:30px;border-right:1px solid var(--line)}
  .pkop-cijfer:last-child{border-right:none;margin-right:0}
  .pkop-cijfer b{display:block;font-family:var(--display);font-weight:700;font-size:clamp(22px,2.6vw,32px);
    letter-spacing:-.04em;background:var(--t-koel);-webkit-background-clip:text;background-clip:text;color:transparent}
  .pkop-cijfer span{display:block;font-family:var(--mono);font-size:11px;color:var(--steel);margin-top:7px}

  /* filterknoppen */
  .filters{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:26px}
  .filt{display:inline-flex;align-items:center;gap:9px;padding:10px 17px;border-radius:999px;
    border:1px solid var(--line);background:var(--v-kaart);font-size:14px;color:var(--ink2);
    transition:all .28s var(--veer)}
  .filt:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
  .filt.aan{background:var(--v-koel);color:#fff;border-color:transparent;box-shadow:var(--gloed)}
  .filt b{font-family:var(--mono);font-size:10.5px;opacity:.75;font-weight:600}
  .filt.aan b{opacity:.9}

  /* het grote raster met werkende schermen */
  .wrk{display:grid;grid-template-columns:repeat(6,1fr);gap:18px}
  .wrk-kaart{grid-column:span 3;position:relative;display:flex;flex-direction:column;overflow:hidden;
    border-radius:var(--r-l);border:1px solid var(--line);background:var(--v-kaart);
    transition:transform .45s var(--veer),border-color .35s,box-shadow .45s;cursor:pointer}
  .wrk-kaart.breed{grid-column:span 6}
  .wrk-kaart:hover{transform:translateY(-5px);border-color:color-mix(in srgb,var(--accent) 42%,var(--line));
    box-shadow:var(--schaduw-l),var(--gloed)}
  .wrk-kaart.weg{display:none}
  .wrk-doek{position:relative;overflow:hidden;background:var(--bg2);aspect-ratio:16/10}
  .wrk-kaart.breed .wrk-doek{aspect-ratio:21/8}
  .wrk-doek iframe{position:absolute;left:0;top:0;width:1180px;height:840px;border:0;transform-origin:0 0;
    pointer-events:none;opacity:0;transition:opacity .55s;max-width:none}
  .wrk-doek.klaar iframe{opacity:1}
  .wrk-doek .wacht{position:absolute;inset:0;display:grid;place-items:center;background:var(--v-zacht);
    transition:opacity .45s}
  .wrk-doek.klaar .wacht{opacity:0}
  .wrk-doek .wacht i{width:24px;height:24px;border-radius:50%;border:2px solid var(--line);
    border-top-color:var(--accent);animation:tol .8s linear infinite}
  .wrk-open{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.94);z-index:3;
    display:inline-flex;align-items:center;gap:9px;white-space:nowrap;font-family:var(--display);
    font-weight:600;font-size:14px;color:#fff;background:var(--v-koel);border-radius:999px;padding:12px 20px;
    box-shadow:0 12px 30px -8px rgba(0,0,0,.55),var(--gloed);opacity:0;
    transition:opacity .28s,transform .34s var(--veer)}
  .wrk-kaart:hover .wrk-open{opacity:1;transform:translate(-50%,-50%) scale(1)}
  .wrk-lijf{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1}
  .wrk-merk{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:12px}
  .wrk-soort{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:9.5px;
    letter-spacing:1.4px;text-transform:uppercase;padding:5px 11px;border-radius:999px;border:1px solid}
  .wrk-soort.eigen{color:var(--mint);border-color:color-mix(in srgb,var(--mint) 42%,transparent);
    background:color-mix(in srgb,var(--mint) 12%,transparent)}
  .wrk-soort.eigen:before{content:'';width:6px;height:6px;border-radius:50%;background:var(--mint);
    animation:puls 2.4s ease-out infinite}
  .wrk-soort.voorbeeld{color:var(--warm);border-color:color-mix(in srgb,var(--warm) 42%,transparent);
    background:color-mix(in srgb,var(--warm) 12%,transparent)}
  .wrk-waar{font-family:var(--mono);font-size:10.5px;color:var(--steel)}
  .wrk-lijf h3{font-family:var(--display);font-weight:600;font-size:clamp(18px,2.1vw,23px);
    letter-spacing:-.035em;margin:0 0 9px}
  .wrk-lijf p{margin:0 0 16px;font-size:14.5px;color:var(--steel);line-height:1.55}
  .wrk-meter{display:flex;align-items:center;gap:11px;margin-top:auto;padding-top:14px;
    border-top:1px solid var(--line2);font-family:var(--mono);font-size:11.5px}
  .wrk-meter s{color:var(--steel)}
  .wrk-meter i{font-style:normal;color:var(--steel)}
  .wrk-meter b{font-family:var(--display);font-weight:700;font-size:14.5px;letter-spacing:-.02em;
    background:var(--t-koel);-webkit-background-clip:text;background-clip:text;color:transparent}
  .wrk-meter em{margin-left:auto;font-style:normal;color:var(--accent);font-size:11px}

  /* het verhaal per stuk werk */
  .verh{display:grid;gap:0;border-top:1px solid var(--line)}
  .verh-rij{display:grid;grid-template-columns:64px 1fr 260px;gap:26px;align-items:start;
    padding:26px 0;border-bottom:1px solid var(--line);transition:background .3s}
  .verh-rij:hover{background:var(--v-zacht)}
  .verh-nr{font-family:var(--mono);font-size:11px;font-weight:700;color:var(--accent);padding-top:5px}
  .verh-in h4{font-family:var(--display);font-weight:600;font-size:19px;letter-spacing:-.03em;margin:0 0 8px}
  .verh-in p{margin:0;font-size:14.5px;color:var(--steel);line-height:1.55;max-width:62ch}
  .verh-in .rit{display:inline-block;margin-top:12px;font-family:var(--mono);font-size:10px;
    letter-spacing:1.4px;text-transform:uppercase;color:var(--steel);border:1px solid var(--line);
    border-radius:999px;padding:4px 11px}
  .verh-rij{cursor:pointer}
  .verh-lees{display:inline-flex;align-items:center;gap:7px;margin:12px 0 0 12px;font-family:var(--mono);
    font-size:10.5px;letter-spacing:1.2px;text-transform:uppercase;color:var(--accent);
    opacity:0;transform:translateX(-6px);transition:all .3s var(--veer)}
  .verh-rij:hover .verh-lees{opacity:1;transform:none}
  @media(max-width:860px){.verh-lees{opacity:1;transform:none;margin-left:0;display:block}}
  .verh-om{display:flex;flex-direction:column;gap:6px;padding:14px 16px;border-radius:var(--r-m);
    background:var(--v-zacht);border:1px solid var(--line2)}
  .verh-om s{font-family:var(--mono);font-size:11px;color:var(--steel)}
  .verh-om b{font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:-.03em;
    background:var(--t-koel);-webkit-background-clip:text;background-clip:text;color:transparent}
  @media(max-width:860px){
    .pkop{padding:104px 0 0}
    .pkop-in{padding-bottom:32px}
    .pkop-cijfer{padding:16px 20px 0 0;margin-right:20px}
    .wrk{grid-template-columns:1fr;gap:14px}
    .wrk-kaart,.wrk-kaart.breed{grid-column:span 1}
    .wrk-kaart.breed .wrk-doek{aspect-ratio:16/10}
    .verh-rij{grid-template-columns:40px 1fr;gap:14px;padding:20px 0}
    .verh-om{grid-column:1 / -1;flex-direction:row;align-items:baseline;gap:12px}
  }

  /* ══════════════════════════════════════════════════════════
     AANPAK — een route met een meelopende lijn
     ══════════════════════════════════════════════════════════ */
  .rt{position:relative;display:grid;gap:0}
  .rt-stap{position:relative;display:grid;grid-template-columns:112px 1fr;gap:34px;
    padding:34px 0;border-bottom:1px solid var(--line)}
  .rt-stap:last-child{border-bottom:none}
  @media(max-width:760px){.rt-stap{grid-template-columns:56px 1fr;gap:18px;padding:26px 0}}
  .rt-zij{position:relative}
  .rt-nr{position:sticky;top:120px;font-family:var(--display);font-weight:700;
    font-size:clamp(38px,5vw,64px);letter-spacing:-.05em;line-height:1;
    background:var(--t-koel);-webkit-background-clip:text;background-clip:text;color:transparent}
  .rt-tijd{display:block;margin-top:8px;font-family:var(--mono);font-size:10.5px;letter-spacing:1.4px;
    text-transform:uppercase;color:var(--steel);position:sticky;top:200px}
  @media(max-width:760px){.rt-tijd{display:none}}
  .rt-in h3{font-family:var(--display);font-weight:600;font-size:clamp(21px,2.6vw,29px);
    letter-spacing:-.04em;margin:0 0 12px}
  .rt-in > p{margin:0 0 18px;font-size:16.5px;color:var(--steel);line-height:1.62;max-width:62ch}
  .rt-vlag{display:inline-flex;align-items:center;gap:8px;margin-bottom:14px;padding:6px 13px;
    border-radius:999px;font-family:var(--mono);font-size:10px;letter-spacing:1.5px;text-transform:uppercase;
    background:var(--accent-zacht);color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 30%,transparent)}
  .rt-vlag.gratis{background:var(--v-koel);color:#fff;border-color:transparent;box-shadow:var(--gloed)}
  .rt-paar{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:20px}
  @media(max-width:620px){.rt-paar{grid-template-columns:1fr}}
  .rt-vak{padding:18px 20px;border-radius:var(--r-m);border:1px solid var(--line);background:var(--v-kaart)}
  .rt-vak b{display:block;font-family:var(--mono);font-size:10px;letter-spacing:1.6px;text-transform:uppercase;
    color:var(--steel);margin-bottom:9px}
  .rt-vak ul{margin:0;padding:0;list-style:none;display:grid;gap:8px}
  .rt-vak li{position:relative;padding-left:19px;font-size:14.5px;color:var(--ink2);line-height:1.5}
  .rt-vak li:before{content:'';position:absolute;left:0;top:8px;width:7px;height:7px;border-radius:2px;
    background:var(--accent)}
  .rt-vak.jij li:before{background:var(--warm)}
  /* het voorbeeldscherm bij stap 3 */
  .rt-scherm{margin-top:22px;border-radius:14px;overflow:hidden;border:1px solid var(--line);
    background:var(--vlak);box-shadow:var(--schaduw-l);cursor:pointer;
    transition:transform .5s var(--veer),box-shadow .4s,border-color .35s}
  .rt-scherm:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--accent) 45%,var(--line));
    box-shadow:var(--schaduw-l),var(--gloed)}
  .rt-balk{display:flex;align-items:center;gap:8px;padding:10px 13px;background:var(--vlak2);
    border-bottom:1px solid var(--line2)}
  .rt-balk i{width:8px;height:8px;border-radius:50%;background:var(--line);font-style:normal}
  .rt-balk i:first-child{background:#F2683F}.rt-balk i:nth-child(2){background:var(--goud)}
  .rt-balk i:nth-child(3){background:var(--mint)}
  .rt-balk b{margin-left:6px;font-family:var(--mono);font-size:10px;letter-spacing:1.2px;
    text-transform:uppercase;color:var(--steel)}
  .rt-balk em{margin-left:auto;font-style:normal;font-family:var(--mono);font-size:8.5px;letter-spacing:1.4px;
    text-transform:uppercase;color:var(--mint);display:inline-flex;align-items:center;gap:6px}
  .rt-balk em:before{content:'';width:6px;height:6px;border-radius:50%;background:var(--mint);
    animation:puls 2.2s ease-out infinite}
  .rt-scherm .wrk-doek{aspect-ratio:16/9.4;border-radius:0}
  .rt-scherm:hover .wrk-open{opacity:1;transform:translate(-50%,-50%) scale(1)}
  .rt-bij{margin:14px 0 0!important;font-family:var(--mono);font-size:11px;color:var(--steel);line-height:1.7}

  /* ══════════════════════════════════════════════════════════
     PRIJS — rekenhulp en kaarten
     ══════════════════════════════════════════════════════════ */
  .rk{display:grid;grid-template-columns:1fr 1fr;gap:0;border-radius:var(--r-xl);overflow:hidden;
    border:1px solid var(--line);background:var(--v-kaart)}
  @media(max-width:860px){.rk{grid-template-columns:1fr}}
  .rk-links{padding:34px 36px}
  @media(max-width:860px){.rk-links{padding:26px 22px}}
  .rk-links h3{font-family:var(--display);font-weight:600;font-size:clamp(20px,2.4vw,26px);
    letter-spacing:-.04em;margin:0 0 10px}
  .rk-links p{margin:0 0 24px;font-size:15px;color:var(--steel);line-height:1.55}
  .rk-veld{margin-bottom:22px}
  .rk-veld label{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
    font-size:14.5px;color:var(--ink2);margin-bottom:10px}
  .rk-veld label b{font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:-.03em;
    background:var(--t-koel);-webkit-background-clip:text;background-clip:text;color:transparent}
  .rk-veld input[type=range]{width:100%;-webkit-appearance:none;appearance:none;height:5px;border-radius:99px;
    background:var(--line);outline:none}
  .rk-veld input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;
    border-radius:50%;background:var(--v-koel);box-shadow:var(--gloed);cursor:pointer;border:2px solid var(--bg)}
  .rk-veld input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;border:2px solid var(--bg);
    background:#5B5BD5;cursor:pointer}
  .rk-rechts{padding:34px 36px;background:var(--bg2);border-left:1px solid var(--line);
    display:flex;flex-direction:column;justify-content:center}
  @media(max-width:860px){.rk-rechts{border-left:none;border-top:1px solid var(--line);padding:26px 22px}}
  .rk-uit s{display:block;font-family:var(--mono);font-size:11px;letter-spacing:1.6px;text-transform:uppercase;
    color:var(--steel);text-decoration:none}
  .rk-groot{font-family:var(--display);font-weight:700;font-size:clamp(38px,6vw,64px);letter-spacing:-.05em;
    line-height:1;margin:12px 0 6px;
    background:var(--t-warm);-webkit-background-clip:text;background-clip:text;color:transparent}
  .rk-uit p{margin:14px 0 0;font-size:14.5px;color:var(--steel);line-height:1.55}
  .rk-noot{margin-top:22px;padding-top:18px;border-top:1px solid var(--line);
    font-family:var(--mono);font-size:11px;color:var(--steel);line-height:1.7}

  /* ══════════════════════════════════════════════════════════
     WIE WE ZIJN
     ══════════════════════════════════════════════════════════ */
  .prt{display:grid;grid-template-columns:.85fr 1.15fr;gap:52px;align-items:center}
  @media(max-width:940px){.prt{grid-template-columns:1fr;gap:32px}}
  .prt-foto{position:relative;border-radius:var(--r-xl);overflow:hidden;border:1px solid var(--line);
    box-shadow:var(--schaduw-l)}
  .prt-foto img{width:100%;display:block}
  .prt-foto figcaption{position:absolute;left:0;right:0;bottom:0;padding:22px 22px 18px;
    background:linear-gradient(to top,rgba(10,15,28,.9),transparent)}
  .prt-foto figcaption b{display:block;font-family:var(--display);font-weight:600;font-size:18px;color:#fff}
  .prt-foto figcaption span{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:1.4px;
    text-transform:uppercase;color:rgba(255,255,255,.72);margin-top:5px}

  /* tijdlijn van het bedrijf */
  .tl{position:relative;display:grid;gap:0;margin-top:8px}
  .tl:before{content:'';position:absolute;left:7px;top:12px;bottom:12px;width:1px;background:var(--line)}
  .tl-rij{position:relative;display:grid;grid-template-columns:auto 1fr;gap:22px;padding:16px 0}
  .tl-stip{position:relative;z-index:1;width:15px;height:15px;border-radius:50%;margin-top:5px;
    background:var(--bg);border:2px solid var(--accent)}
  .tl-rij.nu .tl-stip{background:var(--v-koel);border-color:transparent;box-shadow:var(--gloed)}
  .tl-in b{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:1.6px;text-transform:uppercase;
    color:var(--accent);margin-bottom:6px}
  .tl-in strong{display:block;font-family:var(--display);font-weight:600;font-size:17.5px;
    letter-spacing:-.03em;margin-bottom:6px}
  .tl-in p{margin:0;font-size:14.5px;color:var(--steel);line-height:1.55;max-width:58ch}

  /* waarden */
  .wrd{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
  @media(max-width:860px){.wrd{grid-template-columns:1fr}}
  .wrd-kaart{padding:26px;border-radius:var(--r-l);border:1px solid var(--line);background:var(--v-kaart);
    transition:transform .4s var(--veer),border-color .35s}
  .wrd-kaart:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--accent) 42%,var(--line))}
  .wrd-kaart b{display:block;font-family:var(--display);font-weight:600;font-size:18px;letter-spacing:-.03em;
    margin-bottom:10px}
  .wrd-kaart p{margin:0;font-size:14.5px;color:var(--steel);line-height:1.55}
  .wrd-kaart i{display:block;font-style:normal;font-family:var(--mono);font-size:10px;letter-spacing:1.8px;
    text-transform:uppercase;color:var(--accent);margin-bottom:14px}

  /* ══════════════════════════════════════════════════════════
     VRAGEN
     ══════════════════════════════════════════════════════════ */
  .vgn{display:grid;grid-template-columns:230px 1fr;gap:34px;align-items:start}
  @media(max-width:860px){.vgn{grid-template-columns:1fr;gap:20px}}
  .vgn-zij{position:sticky;top:112px;display:grid;gap:6px}
  @media(max-width:860px){.vgn-zij{position:static;grid-auto-flow:column;grid-auto-columns:max-content;
    overflow-x:auto;padding-bottom:6px;gap:8px}}
  .vgn-knop{display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:var(--r-m);
    border:1px solid transparent;background:transparent;font-size:14.5px;color:var(--steel);
    text-align:left;white-space:nowrap;transition:all .25s}
  .vgn-knop:hover{color:var(--ink);background:var(--v-zacht)}
  .vgn-knop.aan{background:var(--accent-zacht);color:var(--ink);font-weight:600;
    border-color:color-mix(in srgb,var(--accent) 32%,transparent)}
  .vgn-knop b{margin-left:auto;font-family:var(--mono);font-size:10.5px;color:var(--steel);font-weight:600}
  .vgn-lijst{display:grid;gap:10px}
  .vrg{border:1px solid var(--line);border-radius:var(--r-m);background:var(--v-kaart);overflow:hidden;
    transition:border-color .3s,box-shadow .3s}
  .vrg.open{border-color:color-mix(in srgb,var(--accent) 45%,var(--line));box-shadow:var(--gloed)}
  .vrg.weg{display:none}
  .vrg-kop{display:flex;align-items:center;gap:16px;width:100%;padding:19px 22px;text-align:left;
    font-family:var(--display);font-weight:600;font-size:16.5px;letter-spacing:-.02em;color:var(--ink)}
  .vrg-kop:hover{background:var(--v-zacht)}
  .vrg-kop i{margin-left:auto;flex-shrink:0;position:relative;width:16px;height:16px;font-style:normal}
  .vrg-kop i:before,.vrg-kop i:after{content:'';position:absolute;left:50%;top:50%;background:var(--accent);
    transform:translate(-50%,-50%);transition:transform .3s var(--veer)}
  .vrg-kop i:before{width:14px;height:1.8px}
  .vrg-kop i:after{width:1.8px;height:14px}
  .vrg.open .vrg-kop i:after{transform:translate(-50%,-50%) rotate(90deg)}
  .vrg-lijf{display:grid;grid-template-rows:0fr;transition:grid-template-rows .38s var(--veer)}
  .vrg.open .vrg-lijf{grid-template-rows:1fr}
  .vrg-lijf > div{overflow:hidden}
  .vrg-lijf p{margin:0;padding:0 22px 22px;font-size:15px;color:var(--steel);line-height:1.62;max-width:70ch}

  /* ══════════════════════════════════════════════════════════
     CONTACT
     ══════════════════════════════════════════════════════════ */
  .ct{display:grid;grid-template-columns:1fr .92fr;gap:44px;align-items:start}
  @media(max-width:940px){.ct{grid-template-columns:1fr;gap:30px}}
  .ct-kaart{padding:32px 34px;border-radius:var(--r-xl);border:1px solid var(--line);background:var(--v-kaart);
    box-shadow:var(--schaduw)}
  @media(max-width:560px){.ct-kaart{padding:24px 20px}}
  .ct-kaart h3{font-family:var(--display);font-weight:600;font-size:22px;letter-spacing:-.035em;margin:0 0 8px}
  .ct-kaart > p{margin:0 0 26px;font-size:15px;color:var(--steel);line-height:1.55}
  .ct-veld{margin-bottom:16px}
  .ct-veld label{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:1.5px;
    text-transform:uppercase;color:var(--steel);margin-bottom:8px}
  .ct-veld input,.ct-veld textarea,.ct-veld select{width:100%;padding:14px 16px;border-radius:var(--r-m);
    border:1px solid var(--line);background:var(--bg);color:var(--ink);font-family:inherit;font-size:15px;
    transition:border-color .25s,box-shadow .25s}
  .ct-veld textarea{min-height:130px;resize:vertical;line-height:1.55}
  .ct-veld input:focus,.ct-veld textarea:focus,.ct-veld select:focus{outline:none;
    border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-zacht)}
  .ct-veld.fout input,.ct-veld.fout textarea{border-color:var(--warm)}
  .ct-melding{display:none;margin-top:16px;padding:15px 18px;border-radius:var(--r-m);font-size:14.5px;
    line-height:1.5}
  .ct-melding.goed{display:block;background:color-mix(in srgb,var(--mint) 12%,transparent);
    border:1px solid color-mix(in srgb,var(--mint) 40%,transparent);color:var(--ink)}
  .ct-melding.mis{display:block;background:color-mix(in srgb,var(--warm) 12%,transparent);
    border:1px solid color-mix(in srgb,var(--warm) 40%,transparent);color:var(--ink)}
  .ct-rij{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  @media(max-width:560px){.ct-rij{grid-template-columns:1fr}}
  .ct-knop{width:100%;justify-content:center;margin-top:8px}
  .ct-zij{display:grid;gap:14px}
  .ct-blok{padding:22px 24px;border-radius:var(--r-l);border:1px solid var(--line);background:var(--v-kaart)}
  .ct-blok i{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;font-style:normal;
    font-size:16px;background:var(--accent-zacht);color:var(--accent);
    border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);margin-bottom:14px}
  .ct-blok b{display:block;font-family:var(--display);font-weight:600;font-size:16.5px;letter-spacing:-.03em;
    margin-bottom:6px}
  .ct-blok p{margin:0;font-size:14.5px;color:var(--steel);line-height:1.55}
  .ct-blok a{color:var(--accent)}
  .ct-blok a:hover{text-decoration:underline}
  .ct-snel{display:flex;flex-wrap:wrap;gap:9px;margin-top:14px}

  .voet-adres{font-style:normal;margin-top:16px;font-size:13.5px;color:var(--steel);line-height:1.7}
  .voet-adres b{display:block;color:var(--ink2);font-weight:600;margin-bottom:3px}
  .voet-adres a{color:var(--steel)}
  .voet-adres a:hover{color:var(--accent)}
  .voet-adres span{font-family:var(--mono);font-size:11px}

  /* ══════════════════════════════════════════════════════════
     AFDRUKKEN
     Een voorstel of overeenkomst wordt geregeld opgeslagen als pdf.
     Dan hoort er geen navigatie, achtergrond of knop op te staan.
     ══════════════════════════════════════════════════════════ */
  @media print{
    header,.kop-voortgang,footer,.mm,.ck,.hx-zegel,#scan-root,
    .vst-akkoord .vst-rij,.knop,.deel-reactie,.kruim{display:none!important}
    html,body{background:#fff!important;color:#111!important}
    .pkop,.pkop:before{background:none!important;padding-top:0!important}
    .wrap,.wrap.smal{max-width:100%!important;padding:0!important}
    section{padding:0!important}
    .jur h2,.vst-kop{page-break-after:avoid;color:#111!important}
    .jur p,.jur li,.vst-item p{color:#222!important}
    .vst-item,.vst-vak,.sub-kaart,.jur-tabel,.vst-getal{break-inside:avoid;
      border-color:#ccc!important;background:none!important;box-shadow:none!important}
    .vst-getal b,.vst-item .nr{-webkit-text-fill-color:#111!important;color:#111!important;
      background:none!important}
    .vst-item .nr{border:1px solid #111}
    .vst-akkoord{border:1px solid #111!important;box-shadow:none!important;background:none!important}
    .vst-akkoord:after{content:"Handtekening: ______________________    Datum: ____________";
      display:block;margin-top:26px;font-family:monospace;font-size:12px}
    a{color:#111!important;text-decoration:underline}
    a[href^="#"]:after{content:""}
    .sub-links a:after{content:" (" attr(href) ")";font-size:10px;color:#555}
    @page{margin:18mm 16mm}
  }

  /* ══════════════════════════════════════════════════════════
     SCHUIFBALKEN
     De standaardbalk van het besturingssysteem past nergens bij.
     Deze volgt het thema en wordt zichtbaarder zodra je er met de
     muis overheen gaat.
     ══════════════════════════════════════════════════════════ */
  *{scrollbar-width:thin;scrollbar-color:var(--line) transparent}
  *::-webkit-scrollbar{width:10px;height:10px}
  *::-webkit-scrollbar-track{background:transparent}
  *::-webkit-scrollbar-thumb{
    background:color-mix(in srgb,var(--steel) 38%,transparent);
    border-radius:99px;border:3px solid transparent;background-clip:content-box;
    transition:background .25s}
  *::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--accent) 62%,transparent);
    background-clip:content-box}
  *::-webkit-scrollbar-corner{background:transparent}

  /* de pagina zelf mag iets steviger, die gebruik je het meest */
  html::-webkit-scrollbar{width:12px}
  html::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--steel) 46%,transparent);
    background-clip:content-box}
  html::-webkit-scrollbar-thumb:hover{background:var(--accent);background-clip:content-box}

  /* binnen donkere vlakken meeschuiven met de achtergrond */
  .mm-paneel,.tw{scrollbar-color:rgba(234,240,251,.22) transparent}
  .mm-paneel::-webkit-scrollbar-thumb{background:rgba(234,240,251,.22);background-clip:content-box}
  .mm-paneel::-webkit-scrollbar-thumb:hover{background:rgba(139,140,240,.75);background-clip:content-box}

  /* de liggende balk onder de pipeline */
  .pl-baan::-webkit-scrollbar{height:12px}
  .pl-baan::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--accent) 34%,transparent);
    background-clip:content-box}
  .pl-baan::-webkit-scrollbar-thumb:hover{background:var(--accent);background-clip:content-box}

  /* ══════════════════════════════════════════════════════════
     DE KOP — een zwevende balk
     Glas dat de kleur van de pagina aanneemt, met alleen de
     scan-knop en de actieve markering in accentkleur.
     ══════════════════════════════════════════════════════════ */
  /* de kop erft de kleuren van het thema: licht op licht, donker op
     donker. Een donkere balk op een lichte pagina trok te veel aandacht. */
  header{
    position:fixed;top:0;left:0;right:0;z-index:100;padding:16px 0;
    background:transparent;border:none;
    transition:padding .45s var(--veer)}
  header.vast{padding:9px 0}

  /* voortgang van de pagina, haarfijn bovenin */
  .kop-voortgang{position:fixed;left:0;top:0;height:2px;z-index:101;width:0;
    background:linear-gradient(90deg,#5B5BD5,#38BDF8);transition:width .12s linear;
    box-shadow:0 0 12px rgba(91,91,213,.7)}

  .kop-in{max-width:1240px;margin:0 auto;padding:0 26px;transition:max-width .45s var(--veer)}
  @media(max-width:640px){.kop-in{padding:0 14px}}
  header.vast .kop-in{max-width:1130px}
  .kop-schaal{display:flex;align-items:center;gap:16px;height:64px;padding:0 10px 0 20px;
    border-radius:999px;backdrop-filter:blur(20px) saturate(1.6);
    background:color-mix(in srgb,var(--bg) 84%,transparent);
    border:1px solid var(--line);
    box-shadow:0 18px 44px -24px rgba(11,18,32,.30),inset 0 1px 0 rgba(255,255,255,.55);
    transition:height .45s var(--veer),background .4s,box-shadow .4s,border-color .4s}
  header.vast .kop-schaal{height:56px;
    background:color-mix(in srgb,var(--bg) 93%,transparent);
    border-color:color-mix(in srgb,var(--accent) 26%,var(--line));
    box-shadow:0 22px 54px -24px rgba(11,18,32,.38),inset 0 1px 0 rgba(255,255,255,.6)}
  html[data-thema="donker"] .kop-schaal{
    box-shadow:0 22px 54px -26px rgba(0,0,0,.75),inset 0 1px 0 rgba(255,255,255,.06)}
  @media(max-width:640px){.kop-schaal{height:58px;padding:0 8px 0 14px;gap:10px}}

  /* merk */
  .merk{display:inline-flex;align-items:center;gap:11px;flex-shrink:0}
  .merk .teken{width:30px;height:30px;flex-shrink:0;filter:drop-shadow(0 0 14px rgba(91,91,213,.55));
    transition:transform .5s var(--veer)}
  .merk:hover .teken{transform:rotate(-8deg) scale(1.06)}
  .merk .naam{display:flex;flex-direction:column;line-height:1}
  .merk .hoofd{font-family:var(--display);font-weight:700;font-size:17.5px;letter-spacing:-.045em;
    color:var(--ink);white-space:nowrap}
  .merk .ai{color:var(--logo-blauw)}
  .merk .sub{font-family:var(--mono);font-size:8px;font-weight:500;letter-spacing:2.4px;
    text-transform:uppercase;color:var(--steel);margin-top:5px;white-space:nowrap}
  @media(max-width:900px){.merk .sub{display:none}.merk .hoofd{font-size:16.5px}}

  /* de menupil met schuivende markering */
  .navlinks{position:relative;display:flex;align-items:center;gap:2px;margin:0 auto;padding:4px;
    border-radius:999px;background:var(--accent-zacht);border:1px solid transparent}
  .navlinks .glijder{position:absolute;left:0;top:4px;bottom:4px;width:0;border-radius:999px;
    background:var(--v-koel);box-shadow:0 6px 18px -6px rgba(91,91,213,.65);border:none;
    transform:translateX(0);opacity:0;pointer-events:none;
    transition:transform .46s var(--veer),width .46s var(--veer),opacity .3s}
  .navlinks .glijder.zie{opacity:1}
  .navlinks a{position:relative;z-index:1;font-size:14px;font-weight:500;color:var(--ink2);
    padding:9px 15px;border-radius:999px;white-space:nowrap;transition:color .28s}
  .navlinks a:hover{color:var(--ink)}
  .navlinks a.hier{color:#fff;font-weight:600}

  /* rechterkant */
  .navrechts{display:flex;align-items:center;gap:8px;flex-shrink:0}
  .thema{width:38px;height:38px;border-radius:999px;border:1px solid var(--line);
    display:grid;place-items:center;transition:all .35s var(--veer);flex-shrink:0;background:transparent}
  .thema:hover{border-color:var(--accent);transform:rotate(-18deg);box-shadow:var(--gloed)}
  .thema svg{width:17px;height:17px;stroke:var(--ink);fill:none;stroke-width:1.8;stroke-linecap:round}
  .thema .zon{display:none}
  .navrechts .knop{position:relative;overflow:hidden}
  .navrechts .knop.vol:after{content:'';position:absolute;inset:0;
    background:linear-gradient(110deg,transparent 34%,rgba(255,255,255,.30) 50%,transparent 66%);
    transform:translateX(-130%)}
  .navrechts .knop.vol:hover:after{transform:translateX(130%);transition:transform .85s ease}

  /* hamburger */
  .hamb{display:none;width:40px;height:40px;flex-shrink:0;border-radius:999px;
    border:1px solid var(--line);background:transparent;padding:0;
    flex-direction:column;align-items:center;justify-content:center;gap:4px;
    transition:all .3s var(--veer)}
  .hamb:hover{border-color:var(--accent)}
  .hamb i{display:block;width:16px;height:1.8px;background:var(--ink);border-radius:2px;
    transition:transform .34s var(--veer),opacity .25s,width .3s}
  .hamb i:last-child{width:11px;align-self:flex-end;margin-right:12px}
  .hamb:hover i:last-child{width:16px;margin-right:0;align-self:center}
  body.menu .hamb i:first-child{transform:translateY(2.9px) rotate(45deg)}
  body.menu .hamb i:last-child{width:16px;margin-right:0;align-self:center;
    transform:translateY(-2.9px) rotate(-45deg)}

  @media(max-width:1040px){
    .navlinks{display:none}
    .hamb{display:flex}
  }
  @media(max-width:560px){
    .navrechts .knop.klein{padding:9px 14px;font-size:12.5px}
    .thema,.hamb{width:38px;height:38px}
  }

  /* ══════════════════════════════════════════════════════════
     JURIDISCHE PAGINA'S — leesbaar houden
     ══════════════════════════════════════════════════════════ */
  .jur{max-width:none}
  .jur-datum{font-family:var(--mono);font-size:11px;color:var(--steel);margin:0 0 30px;
    padding-bottom:16px;border-bottom:1px solid var(--line)}
  .jur h2{font-family:var(--display);font-weight:600;font-size:clamp(19px,2.3vw,24px);
    letter-spacing:-.035em;margin:38px 0 12px}
  .jur h2:first-of-type{margin-top:0}
  .jur h3{font-family:var(--display);font-weight:600;font-size:16.5px;letter-spacing:-.02em;
    margin:22px 0 8px;color:var(--ink2)}
  .jur p{margin:0 0 14px;font-size:16px;color:var(--ink2);line-height:1.7;max-width:68ch}
  .jur p b{color:var(--ink);font-weight:600}
  .jur a{color:var(--accent)}
  .jur a:hover{text-decoration:underline}
  .jur ul{margin:0 0 16px;padding:0;list-style:none;display:grid;gap:9px;max-width:68ch}
  .jur li{position:relative;padding-left:22px;font-size:16px;color:var(--ink2);line-height:1.6}
  .jur li:before{content:'';position:absolute;left:0;top:9px;width:7px;height:7px;border-radius:2px;
    background:var(--accent)}
  .jur-tabel{border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden;margin:0 0 18px}
  .jur-rij{display:grid;grid-template-columns:1fr 1.6fr .8fr;gap:14px;padding:12px 16px;
    border-bottom:1px solid var(--line2);font-size:14.5px;color:var(--ink2)}
  .jur-rij:last-child{border-bottom:none}
  .jur-rij.kop{background:var(--bg2);font-family:var(--mono);font-size:10.5px;letter-spacing:1.2px;
    text-transform:uppercase;color:var(--steel)}
  @media(max-width:640px){.jur-rij{grid-template-columns:1fr;gap:3px}
    .jur-rij.kop{display:none}}
  .jur-noot{font-family:var(--mono)!important;font-size:12px!important;color:var(--steel)!important;
    line-height:1.8!important}

  /* ── cijferpagina ─────────────────────────────────────── */
  .bo-kpi.kpi6{grid-template-columns:repeat(6,1fr)}
  @media(max-width:1100px){.bo-kpi.kpi6{grid-template-columns:repeat(3,1fr)}}
  @media(max-width:640px){.bo-kpi.kpi6{grid-template-columns:1fr 1fr}}
  .kpi-diff{display:inline-block;margin-left:7px;font-style:normal;font-family:var(--mono);
    font-size:11px;font-weight:600;vertical-align:middle}
  .rp-pct{flex:0 0 58px;text-align:right;font-family:var(--mono);font-size:11px;color:var(--steel)}
  .grf{display:flex;align-items:flex-end;gap:5px;padding:22px 18px 12px;min-height:190px}
  .grf-kolom{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
    gap:6px;min-width:0}
  .grf-staaf{width:100%;max-width:44px;border-radius:6px 6px 3px 3px;background:var(--v-koel);
    position:relative;display:flex;flex-direction:column;justify-content:flex-end;
    animation:grfgroei .6s var(--veer) both;transition:filter .2s}
  .grf-kolom:hover .grf-staaf{filter:brightness(1.15)}
  .grf-staaf i{display:block;width:100%;background:#2DD4A8;border-radius:3px}
  @keyframes grfgroei{from{height:0!important}}
  .grf-getal{font-family:var(--mono);font-size:10.5px;font-weight:600;color:var(--ink2);
    order:-1;min-height:14px}
  .grf-label{font-family:var(--mono);font-size:9px;color:var(--steel);white-space:nowrap;
    transform:rotate(-45deg);transform-origin:center;height:22px}
  @media(max-width:760px){.grf-label{display:none}.grf{padding:22px 12px 10px}}

  /* ── filters en sorteren ──────────────────────────────── */
  .flt{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;margin-bottom:14px;
    padding:14px 16px;border-radius:var(--r-m);background:var(--bg2);border:1px solid var(--line)}
  .flt-veld{display:flex;flex-direction:column;gap:6px;min-width:130px}
  .flt-veld span{font-family:var(--mono);font-size:9.5px;letter-spacing:1.3px;
    text-transform:uppercase;color:var(--steel)}
  .flt-veld select{padding:8px 11px;border-radius:9px;border:1px solid var(--line);
    background:var(--v-kaart);color:var(--ink);font-family:inherit;font-size:13.5px}
  .flt-veld select:focus{outline:none;border-color:var(--accent)}
  .flt-leeg{margin-left:auto;align-self:center;font-family:var(--mono);font-size:11px;
    color:var(--accent);background:transparent;padding:8px 4px}
  .flt-leeg:hover{text-decoration:underline}
  .hint-knop{background:transparent;color:var(--accent);font-family:var(--mono);font-size:11px;
    padding:0 0 0 4px;text-decoration:underline}
  .hint-knop:hover{color:var(--ink)}
  .flt-srt{display:inline-flex;gap:5px;align-items:center}
  .flt-srtk{padding:7px 12px;border-radius:999px;border:1px solid var(--line);background:var(--v-kaart);
    font-family:var(--mono);font-size:11px;color:var(--steel);transition:all .2s}
  .flt-srtk:hover{border-color:var(--accent);color:var(--ink)}
  .flt-srtk.aan{background:var(--v-koel);color:#fff;border-color:transparent}
  .srt{cursor:pointer;user-select:none;display:inline-flex;align-items:center;gap:5px;transition:color .2s}
  .srt:hover{color:var(--ink)}
  .srt.aan{color:var(--accent)}
  .srt i{font-style:normal;font-size:10px;opacity:.55}
  .srt.aan i{opacity:1}
  @media(max-width:640px){.flt{padding:12px}.flt-veld{min-width:calc(50% - 5px)}}

  /* ── paginering, selectie en bulk ─────────────────────── */
  .pg{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:14px 4px 0}
  .pg-tel{font-family:var(--mono);font-size:11px;color:var(--steel)}
  .pg-knoppen{margin-left:auto;display:flex;gap:5px;flex-wrap:wrap}
  .pg-nr{min-width:32px;height:32px;padding:0 9px;border-radius:9px;border:1px solid var(--line);
    background:var(--v-kaart);font-family:var(--mono);font-size:12px;color:var(--ink2);transition:all .2s}
  .pg-nr:hover:not([disabled]){border-color:var(--accent);color:var(--ink)}
  .pg-nr.aan{background:var(--v-koel);color:#fff;border-color:transparent;font-weight:600}
  .pg-nr[disabled]{opacity:.35}
  .pg-punt{font-family:var(--mono);font-size:12px;color:var(--steel);align-self:center}

  /* eigen naam, want .kies is al in gebruik voor de keuzetegels in de scan */
  .vinkje{width:20px;height:20px;flex-shrink:0;border-radius:6px;border:1px solid var(--line);
    background:transparent;color:transparent;font-size:11px;display:grid;place-items:center;
    padding:0;transition:all .2s}
  .vinkje:hover{border-color:var(--accent)}
  .vinkje.aan{background:var(--v-koel);border-color:transparent;color:#fff}
  .pr-kies{position:absolute;top:12px;right:12px;z-index:2}
  .pr-kaart{position:relative}
  .rij-weg{width:26px;height:26px;flex-shrink:0;border-radius:8px;border:1px solid transparent;
    background:transparent;color:var(--steel);font-size:12px;opacity:0;transition:all .2s}
  .bo-rij:hover .rij-weg{opacity:1}
  .rij-weg:hover{border-color:var(--warm);color:var(--warm)}
  .rij-weg.vraag{opacity:1;border-color:var(--warm);color:var(--warm);font-weight:700}

  .bulk{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px;
    padding:12px 16px;border-radius:var(--r-m);background:var(--accent-zacht);
    border:1px solid color-mix(in srgb,var(--accent) 34%,transparent)}
  .bulk b{font-family:var(--display);font-weight:600;font-size:14px;color:var(--ink)}
  .bulk-weg{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--steel);background:transparent}
  .bulk-weg:hover{color:var(--ink);text-decoration:underline}
  .ag-datum{flex-shrink:0;width:130px;padding:5px 9px;border-radius:8px;border:1px solid var(--line);
    background:var(--bg);color:var(--ink2);font-family:var(--mono);font-size:11px}
  @media(max-width:700px){.ag-datum{display:none}}

  /* ── overzichten ──────────────────────────────────────── */
  .rp-rij{display:flex;align-items:center;gap:12px;padding:9px 18px;border-bottom:1px solid var(--line2)}
  .rp-rij:last-child{border-bottom:none}
  .rp-naam{flex:0 0 40%;font-size:13.5px;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .rp-balk{flex:1;height:7px;border-radius:99px;background:var(--line2);overflow:hidden}
  .rp-balk i{display:block;height:100%;background:var(--v-koel);border-radius:99px;
    animation:rpgroei .7s var(--veer) both}
  @keyframes rpgroei{from{width:0!important}}
  .rp-getal{flex:0 0 34px;text-align:right;font-family:var(--mono);font-size:12px;font-weight:600;color:var(--ink)}

  /* ── invulvenster in de beheeromgeving ────────────────── */
  .fv{position:fixed;inset:0;z-index:420;display:grid;place-items:center;padding:20px;
    opacity:0;transition:opacity .28s;pointer-events:none}
  .fv.zie{opacity:1;pointer-events:auto}
  .fv-doek{position:absolute;inset:0;background:rgba(6,10,22,.66);backdrop-filter:blur(7px)}
  .fv-vak{position:relative;width:min(560px,100%);max-height:88vh;overflow-y:auto;
    padding:28px 30px;border-radius:var(--r-xl);background:var(--bg);border:1px solid var(--line);
    box-shadow:var(--schaduw-l);transform:translateY(16px) scale(.98);
    transition:transform .4s var(--veer)}
  .fv.zie .fv-vak{transform:none}
  @media(max-width:560px){.fv-vak{padding:22px 20px}}
  .fv-kop{display:flex;align-items:flex-start;gap:16px;margin-bottom:6px}
  .fv-kop h3{font-family:var(--display);font-weight:600;font-size:23px;letter-spacing:-.04em;margin:8px 0 0}
  .fv-weg{margin-left:auto;width:34px;height:34px;border-radius:11px;flex-shrink:0;
    border:1px solid var(--line);background:transparent;color:var(--ink);display:grid;place-items:center;
    font-size:14px;transition:all .25s}
  .fv-weg:hover{background:var(--v-zacht);border-color:var(--accent)}
  .fv-uitleg{margin:10px 0 22px;font-size:14.5px;color:var(--steel);line-height:1.6}
  .fv-velden{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  @media(max-width:520px){.fv-velden{grid-template-columns:1fr}}
  .fv-veld.fv-breed{grid-column:1 / -1}
  .fv-veld label{display:block;font-family:var(--mono);font-size:10px;letter-spacing:1.4px;
    text-transform:uppercase;color:var(--steel);margin-bottom:7px}
  .fv-veld label i{font-style:normal;color:var(--accent)}
  .fv-veld input,.fv-veld select,.fv-veld textarea{width:100%;padding:13px 15px;border-radius:var(--r-m);
    border:1px solid var(--line);background:var(--v-kaart);color:var(--ink);
    font-family:inherit;font-size:15px;transition:border-color .22s,box-shadow .22s}
  .fv-veld textarea{min-height:92px;resize:vertical;line-height:1.55}
  .fv-veld input:focus,.fv-veld select:focus,.fv-veld textarea:focus{outline:none;
    border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-zacht)}
  .fv-veld.fout input,.fv-veld.fout textarea,.fv-veld.fout select{border-color:var(--warm)}
  .fv-zoek{position:relative}
  .fv-zoekveld.gekozen{border-color:var(--accent);background:var(--accent-zacht);font-weight:600;
    padding-right:44px}
  .fv-zoekweg{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:26px;height:26px;
    border-radius:8px;border:1px solid var(--line);background:var(--bg);color:var(--steel);
    font-size:11px;display:grid;place-items:center}
  .fv-zoekweg:hover{border-color:var(--warm);color:var(--warm)}
  .fv-vondst{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:12;max-height:250px;
    overflow-y:auto;border-radius:var(--r-m);border:1px solid var(--line);background:var(--vlak);
    box-shadow:var(--schaduw-l);display:none}
  .fv-vondst.aan{display:block}
  .fv-vondst button{display:flex;align-items:center;gap:12px;width:100%;padding:11px 15px;
    text-align:left;font-size:14.5px;color:var(--ink2);border-bottom:1px solid var(--line2)}
  .fv-vondst button:last-child{border-bottom:none}
  .fv-vondst button:hover{background:var(--accent-zacht);color:var(--ink)}
  .fv-vondst button span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .fv-vondst button s{margin-left:auto;flex-shrink:0;font-family:var(--mono);font-size:10.5px;
    color:var(--steel);text-decoration:none}
  .fv-geen{padding:14px 15px;font-size:13.5px;color:var(--steel)}
  .fv-hulp{margin:7px 0 0;font-family:var(--mono);font-size:10.5px;color:var(--steel);line-height:1.6}
  .fv-fout{min-height:20px;margin-top:12px;font-family:var(--mono);font-size:11.5px;color:var(--warm)}
  .fv-voet{display:flex;gap:10px;justify-content:flex-end;margin-top:10px;flex-wrap:wrap}
  @media(max-width:520px){.fv-voet .knop{flex:1;justify-content:center}}

  /* ── slot op de beheeromgeving ────────────────────────── */
  .slot{position:fixed;inset:0;z-index:400;display:grid;place-items:center;padding:20px;
    background:rgba(6,10,22,.72);backdrop-filter:blur(8px);opacity:0;transition:opacity .3s}
  .slot.zie{opacity:1}
  .slot-vak{width:min(420px,100%);padding:32px 34px;border-radius:var(--r-xl);background:var(--bg);
    border:1px solid var(--line);box-shadow:var(--schaduw-l);transform:translateY(14px);
    transition:transform .4s var(--veer)}
  .slot.zie .slot-vak{transform:none}
  @media(max-width:520px){.slot-vak{padding:26px 22px}}
  .slot-vak h2{font-family:var(--display);font-weight:600;font-size:24px;letter-spacing:-.04em;
    margin:14px 0 10px}
  .slot-vak p{margin:0 0 20px;font-size:14.5px;color:var(--steel);line-height:1.6}
  .slot-vak input{width:100%;padding:14px 16px;border-radius:var(--r-m);border:1px solid var(--line);
    background:var(--v-kaart);color:var(--ink);font-family:inherit;font-size:15.5px;margin-bottom:10px}
  .slot-vak input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-zacht)}
  .slot-fout{min-height:20px;font-family:var(--mono);font-size:11.5px;color:var(--warm);margin-bottom:8px}
  .slot-knoppen{display:flex;gap:9px;flex-wrap:wrap}
  .slot-knoppen .knop{flex:1;justify-content:center;min-width:120px}
  .slot-fijn{margin:16px 0 0!important;font-family:var(--mono);font-size:11px!important;
    color:var(--steel)!important;line-height:1.7!important}

  .sub-lijst{display:grid;gap:12px;margin:0 0 30px}
  .sub-kaart{padding:20px 22px;border-radius:var(--r-l);border:1px solid var(--line);
    background:var(--v-kaart);transition:border-color .3s}
  .sub-kaart:hover{border-color:color-mix(in srgb,var(--accent) 40%,var(--line))}
  .sub-kop{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px}
  .sub-kop b{font-family:var(--display);font-weight:600;font-size:17px;letter-spacing:-.03em}
  .sub-waar{font-family:var(--mono);font-size:10px;letter-spacing:1.3px;text-transform:uppercase;
    padding:4px 10px;border-radius:999px;border:1px solid}
  .sub-waar.eu{color:var(--mint);border-color:color-mix(in srgb,var(--mint) 42%,transparent);
    background:color-mix(in srgb,var(--mint) 12%,transparent)}
  .sub-waar.vs{color:var(--warm);border-color:color-mix(in srgb,var(--warm) 42%,transparent);
    background:color-mix(in srgb,var(--warm) 12%,transparent)}
  .sub-kaart p{margin:0 0 12px!important;font-size:14.5px!important;color:var(--steel)!important;
    line-height:1.55!important}
  .sub-links{display:flex;gap:14px;flex-wrap:wrap;font-family:var(--mono);font-size:11.5px}
  .sub-links a{color:var(--accent)}
  .sub-links a:hover{text-decoration:underline}

  /* ── cookiemelding ────────────────────────────────────── */
  .ck{position:fixed;left:16px;right:16px;bottom:16px;z-index:150;max-width:640px;margin:0 auto;
    padding:22px 24px;border-radius:var(--r-l);background:var(--v-kaart);backdrop-filter:blur(20px);
    border:1px solid color-mix(in srgb,var(--accent) 40%,var(--line));box-shadow:var(--schaduw-l);
    transform:translateY(140%);transition:transform .5s var(--veer);pointer-events:none}
  .ck.zie{transform:none;pointer-events:auto}
  .ck b{display:block;font-family:var(--display);font-weight:600;font-size:16.5px;
    letter-spacing:-.03em;margin-bottom:8px}
  .ck p{margin:0 0 16px;font-size:14.5px;color:var(--steel);line-height:1.6}
  .ck p a{color:var(--accent)}
  .ck-knoppen{display:flex;gap:9px;flex-wrap:wrap}
  .ck-knoppen .knop{flex:1;justify-content:center;min-width:130px}
  @media(max-width:520px){.ck{padding:18px 18px}.ck-knoppen .knop{flex:1 1 100%}}

  /* ══════════════════════════════════════════════════════════
     VOORSTEL- EN DEELPAGINA
     ══════════════════════════════════════════════════════════ */
  .vst-getal{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:30px 0 26px;
    border-radius:var(--r-l);overflow:hidden;border:1px solid var(--line);background:var(--v-kaart)}
  @media(max-width:700px){.vst-getal{grid-template-columns:1fr}}
  .vst-getal div{padding:22px 24px;border-right:1px solid var(--line)}
  .vst-getal div:last-child{border-right:none}
  @media(max-width:700px){.vst-getal div{border-right:none;border-bottom:1px solid var(--line)}
    .vst-getal div:last-child{border-bottom:none}}
  .vst-getal b{display:block;font-family:var(--display);font-weight:700;font-size:clamp(24px,3.4vw,34px);
    letter-spacing:-.04em;background:var(--t-koel);-webkit-background-clip:text;background-clip:text;color:transparent}
  .vst-getal span{display:block;font-family:var(--mono);font-size:11px;color:var(--steel);margin-top:8px;line-height:1.5}
  .vst-tegen{padding:20px 24px;border-radius:var(--r-m);background:var(--accent-zacht);
    border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);margin-bottom:30px}
  .vst-tegen b{display:block;font-family:var(--display);font-weight:600;font-size:16px;margin-bottom:8px}
  .vst-tegen p{margin:0;font-size:15px;color:var(--ink2);line-height:1.6}
  .vst-kop{font-family:var(--display);font-weight:600;font-size:clamp(20px,2.6vw,26px);
    letter-spacing:-.04em;margin:0 0 16px}
  .vst-lijst{display:grid;gap:12px;margin-bottom:30px}
  .vst-item{display:grid;grid-template-columns:40px 1fr;gap:16px;padding:20px 22px;border-radius:var(--r-l);
    border:1px solid var(--line);background:var(--v-kaart)}
  .vst-item .nr{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;
    font-family:var(--mono);font-size:12px;font-weight:700;background:var(--v-koel);color:#fff}
  .vst-item b{display:block;font-family:var(--display);font-weight:600;font-size:17px;letter-spacing:-.03em;margin-bottom:7px}
  .vst-item p{margin:0 0 10px;font-size:14.5px;color:var(--steel);line-height:1.55}
  .vst-item .op-op{display:inline-flex;font-family:var(--mono);font-size:10.5px;letter-spacing:1.2px;
    text-transform:uppercase;color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 32%,transparent);
    border-radius:999px;padding:5px 11px}
  .vst-net{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:30px}
  @media(max-width:700px){.vst-net{grid-template-columns:1fr}}
  .vst-vak{padding:20px 22px;border-radius:var(--r-l);border:1px solid var(--line);background:var(--v-kaart)}
  .vst-vak b{display:block;font-family:var(--display);font-weight:600;font-size:15px;margin-bottom:12px}
  .vst-vak ul{margin:0;padding:0;list-style:none;display:grid;gap:9px}
  .vst-vak li{position:relative;padding-left:20px;font-size:14.5px;color:var(--ink2);line-height:1.5}
  .vst-vak li:before{content:'';position:absolute;left:0;top:8px;width:7px;height:7px;border-radius:2px;background:var(--accent)}
  .vst-vak.uit li:before{background:var(--steel)}
  .vst-akkoord{padding:28px 30px;border-radius:var(--r-xl);background:var(--v-kaart);
    border:1px solid color-mix(in srgb,var(--accent) 45%,var(--line));box-shadow:var(--gloed);margin-bottom:20px}
  @media(max-width:560px){.vst-akkoord{padding:22px 20px}}
  .vst-akkoord h3{font-family:var(--display);font-weight:600;font-size:clamp(20px,2.6vw,26px);
    letter-spacing:-.04em;margin:0 0 10px}
  .vst-akkoord p{margin:0 0 18px;font-size:15px;color:var(--steel);line-height:1.6}
  .vst-vink{display:flex;align-items:flex-start;gap:13px;width:100%;text-align:left;
    padding:14px 16px;margin-bottom:10px;border-radius:var(--r-m);border:1px solid var(--line);
    background:var(--bg);font-size:14.5px;color:var(--ink2);line-height:1.55;transition:all .24s}
  .vst-vink:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
  .vst-vink.aan{border-color:var(--accent);background:var(--accent-zacht);color:var(--ink)}
  .vst-vink i{width:20px;height:20px;flex-shrink:0;border-radius:6px;border:1px solid var(--line);
    display:grid;place-items:center;font-style:normal;font-size:11px;color:transparent;margin-top:1px}
  .vst-vink.aan i{background:var(--v-koel);border-color:transparent;color:#fff}
  .vst-vink a{color:var(--accent);text-decoration:underline}
  .vst-vink em{font-style:normal;font-family:var(--mono);font-size:11px;color:var(--steel)}
  .vst-fout{min-height:20px;margin-top:10px;font-family:var(--mono);font-size:11.5px;color:var(--warm)}
  .vst-rij{display:flex;gap:10px;flex-wrap:wrap}
  .vst-rij input{flex:1;min-width:200px;padding:15px 17px;border-radius:var(--r-m);border:1px solid var(--line);
    background:var(--bg);color:var(--ink);font-family:inherit;font-size:15.5px}
  .vst-rij input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-zacht)}
  .vst-fijn{margin:14px 0 0!important;font-family:var(--mono);font-size:11.5px;color:var(--steel);line-height:1.7}
  .vst-fijn a{color:var(--accent)}
  .vst-print{margin-top:22px}
  .vst-van{margin:24px 0 0!important;font-family:var(--mono);font-size:11px;color:var(--steel)}
  .kapot-tips{margin-top:26px;padding:22px 24px;border-radius:var(--r-l);
    border:1px solid var(--line);background:var(--v-kaart)}
  .kapot-tips b{display:block;font-family:var(--display);font-weight:600;font-size:16px;margin-bottom:12px}
  .kapot-tips ul{margin:0;padding:0;list-style:none;display:grid;gap:9px}
  .kapot-tips li{position:relative;padding-left:20px;font-size:14.5px;color:var(--steel);line-height:1.55}
  .kapot-tips li:before{content:'';position:absolute;left:0;top:8px;width:7px;height:7px;
    border-radius:2px;background:var(--accent)}
  .deel-doen{margin:26px 0 30px}
  .deel-reactie{padding:24px 26px;border-radius:var(--r-l);border:1px solid var(--line);background:var(--v-kaart)}
  .deel-reactie b{display:block;font-family:var(--display);font-weight:600;font-size:17px;margin-bottom:7px}
  .deel-reactie p{margin:0 0 16px;font-size:14.5px;color:var(--steel);line-height:1.55}
  .deel-knoppen{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:14px}
  .deel-reactie textarea{width:100%;min-height:80px;padding:13px 15px;border-radius:var(--r-m);
    border:1px solid var(--line);background:var(--bg);color:var(--ink);font-family:inherit;font-size:14.5px;
    resize:vertical;line-height:1.55}
  .deel-reactie textarea:focus{outline:none;border-color:var(--accent)}

  /* ══════════════════════════════════════════════════════════
     MOBIEL MENU — los paneel, buiten de header
     ══════════════════════════════════════════════════════════ */
  .mm{position:fixed;inset:0;z-index:200;display:none}
  .mm[hidden]{display:none}
  .mm.aan{display:block}
  .mm-doek{position:absolute;inset:0;background:rgba(6,10,22,.62);backdrop-filter:blur(6px);
    opacity:0;transition:opacity .3s}
  .mm.open .mm-doek{opacity:1}
  .mm-paneel{position:absolute;right:0;top:0;bottom:0;width:min(420px,86vw);display:flex;flex-direction:column;
    background:#0A0F1C;border-left:1px solid rgba(234,240,251,.14);
    box-shadow:-30px 0 80px -30px rgba(0,0,0,.85);
    transform:translateX(100%);transition:transform .42s var(--veer);overflow-y:auto}
  .mm.open .mm-paneel{transform:none}
  .mm-kop{display:flex;align-items:center;justify-content:space-between;gap:14px;
    padding:20px 22px;border-bottom:1px solid rgba(234,240,251,.12)}
  .mm-merk{display:flex;align-items:center;gap:11px;min-width:0}
  .mm-merk .teken{width:30px;height:30px;flex-shrink:0;filter:drop-shadow(0 0 12px rgba(91,91,213,.5))}
  .mm-merk .naam{display:flex;flex-direction:column;line-height:1;min-width:0}
  .mm-merk .hoofd{font-family:var(--display);font-weight:700;font-size:16.5px;letter-spacing:-.045em;
    color:#EAF0FB;white-space:nowrap}
  .mm-merk .ai{color:#8B8CF0}
  .mm-merk .sub{font-family:var(--mono);font-size:8px;font-weight:500;letter-spacing:2.2px;
    text-transform:uppercase;color:#7C8AA6;margin-top:5px;white-space:nowrap}
  .mm-dicht{position:relative;width:40px;height:40px;border-radius:12px;flex-shrink:0;
    border:1px solid rgba(234,240,251,.18);background:transparent;display:grid;place-items:center}
  .mm-dicht span{position:absolute;width:16px;height:1.6px;background:#EAF0FB;border-radius:2px}
  .mm-dicht span:first-child{transform:rotate(45deg)}
  .mm-dicht span:last-child{transform:rotate(-45deg)}
  .mm-dicht:hover{background:rgba(234,240,251,.08)}
  .mm-links{flex:1;padding:14px 12px}
  .mm-links a{display:flex;align-items:center;gap:14px;padding:15px 14px;border-radius:var(--r-m);
    color:#EAF0FB;font-family:var(--display);font-weight:600;font-size:19px;letter-spacing:-.03em;
    opacity:0;transform:translateX(16px);transition:background .25s,color .25s}
  .mm.open .mm-links a{animation:mmin .42s var(--veer) forwards;animation-delay:calc(var(--i) * 42ms + 90ms)}
  @keyframes mmin{to{opacity:1;transform:none}}
  .mm-links a i{font-style:normal;font-family:var(--mono);font-size:11px;color:#5B6B85;width:22px;flex-shrink:0}
  .mm-links a em{margin-left:auto;font-style:normal;color:#5B6B85;transition:transform .25s,color .25s}
  .mm-links a:hover,.mm-links a.hier{background:rgba(139,140,240,.14)}
  .mm-links a.hier i,.mm-links a:hover em{color:#8B8CF0}
  .mm-links a:hover em{transform:translateX(4px)}
  .mm-voet{padding:20px 24px 30px;border-top:1px solid rgba(234,240,251,.12)}
  .mm-voet .knop{width:100%;justify-content:center}
  .mm-voet p{margin:14px 0 0;font-family:var(--mono);font-size:11px;color:#7C8AA6;text-align:center}
  body.menu{overflow:hidden}

  /* ══════════════════════════════════════════════════════════
     MOBIEL — staat bewust achteraan zodat het altijd wint.
     Alles wat op een groot scherm zweeft of naast elkaar staat,
     komt hier gewoon onder elkaar te staan.
     ══════════════════════════════════════════════════════════ */
  html,body{overflow-x:hidden;max-width:100%}
  img,canvas,video{max-width:100%}
  /* let op: iframes hier NIET beperken. de miniaturen tekenen het prototype
     bewust op 1180px en schalen dat daarna terug; een maximumbreedte zou
     het prototype samendrukken en maar half gevuld tonen. */

  @media(max-width:1080px){
    /* niets in de hero mag nog zweven.
       let op: .hx is een flexrij. zodra de onderbalk niet meer zweeft,
       wordt hij anders een tweede kolom náást de tekst — vandaar block. */
    .hx{display:block;min-height:auto;padding:96px 0 0}
    .hx .wrap{width:100%}
    .hx-in{grid-template-columns:1fr;gap:36px}
  }

  @media(max-width:860px){
    section{padding:64px 0}
    section.krap{padding:48px 0}
    .kop{margin-bottom:30px}
    .snr{margin-bottom:16px}

    /* hero */
    .hx{padding:92px 0 0}
    .hx h1{font-size:clamp(31px,8.4vw,44px);line-height:1.06}
    .hx-lood{margin:20px 0 26px;font-size:16px}
    .hx-tik{margin-top:20px;flex-wrap:wrap;gap:6px}
    .hx-doen{gap:10px}
    .hx-doen .knop{flex:1 1 100%;justify-content:center;padding:17px 24px}
    .hx-fijn{gap:6px 14px;margin-top:18px}
    .hx-zegel{width:74px;height:74px;left:auto;right:6px;top:-14px}
    .hx-zegel b{font-size:19px}
    .hx-zegel span{font-size:7.5px;letter-spacing:1px;margin-top:3px}
    .hx-naam{gap:10px;margin-top:16px}
    .hx-naam b{font-size:15.5px;width:100%}
    .hx-stip{margin-left:0}

    /* kiezer */
    .kiezer{grid-template-columns:1fr;gap:16px}
    .kies-lijst{grid-template-columns:1fr 1fr;gap:8px}
    .kies{padding:13px 14px;font-size:14.5px;gap:10px}
    .kies em{display:none}
    .kies-uit{min-height:0}
    .ku-kop{flex-direction:column;gap:12px;padding:20px 20px 16px}
    .ku-kop h3{font-size:20px}
    .ku-kop p{font-size:14.5px}
    .ku-meter{margin-left:0;text-align:left;display:flex;align-items:baseline;gap:10px}
    .ku-meter s,.ku-meter b{margin:0}
    .ku-beeld{min-height:200px}
    .ku-voet{padding:14px 18px}

    /* gratis prototype */
    .pt-kop{padding:28px 22px 0}
    .pt-kop h3{font-size:clamp(22px,5.6vw,28px);max-width:none}
    .pt-kop p{font-size:15.5px}
    .pt-krijgt{grid-template-columns:1fr;gap:12px;padding:24px 22px 26px}
    .ptk{padding:20px}
    .pts{padding:24px 22px 26px}
    .pt-kan{padding:26px 22px 0}
    .pt-voet{padding:22px 22px 28px;margin-top:24px}
    .pt-voet .knop{width:100%;justify-content:center}
    .pt-gerust{gap:8px 16px}

    /* wie dit bouwt */
    .tw-in{grid-template-columns:1fr;gap:32px;padding:64px 0}
    .tw h2{font-size:clamp(26px,6.6vw,34px)}
    .tw p{font-size:16px}
    .tw-feiten{margin:24px 0}
    .tw-feit{padding:16px 18px 16px 0}
    .tw-feit b{font-size:22px}
    .tw-citaat{padding:18px 20px}
    .tw-beeld{gap:12px}
    .tw-adres{position:static;margin-top:4px}

    /* slot */
    .fin-in{grid-template-columns:1fr;gap:28px;padding:56px 0}
    .fin h2{font-size:clamp(28px,7.6vw,40px);max-width:none}
    .fin p{font-size:16.5px}
    .fin-doen{gap:10px;margin-top:26px}
    .fin-knop,.fin-tweede{width:100%;justify-content:center;padding:18px 26px;font-size:16px}
    .fin-fijn{gap:6px 14px}
    .fst{padding:14px 16px;gap:11px}
    .fst b{font-size:14.5px}
  }

  @media(max-width:1040px){          /* het losse paneel .mm neemt het over */
  }

  @media(max-width:560px){
    .wrap{padding:0 18px}
    section{padding:52px 0}

    /* kop van de site */
    .kop-schaal,header.vast .kop-schaal{height:56px}
    .navrechts .knop.klein{padding:9px 13px;font-size:12.5px;white-space:nowrap}

    /* hero */
    .hx{padding:84px 0 0}
    .hx h1{font-size:clamp(28px,9vw,36px)}
    .hx-merk{font-size:10.5px;padding:7px 13px 7px 10px}
    .hx-tik{font-size:12px}
    .hx-zegel{width:64px;height:64px;top:-12px;right:2px}
    .hx-zegel b{font-size:16px}
    .hx-balk b{font-size:9.5px}
    .hx-balk em{font-size:8px}

    /* kiezer */
    .kies-lijst{grid-template-columns:1fr}
    .ku-beeld{min-height:170px}

    /* wie dit bouwt */
    .tw-beeld{grid-template-columns:1fr}
    .tw-foto.groot,.tw-foto.klein{aspect-ratio:16/10}
    .tw-feiten{grid-template-columns:1fr 1fr}
    .tw-feit:nth-child(3){grid-column:1 / -1;border-right:none;border-top:1px solid rgba(234,240,251,.14)}

    /* algemeen */
    .knop.groot{padding:16px 24px;font-size:16px}
    .citaat{font-size:clamp(22px,7vw,30px)}
  }

  /* rustig zetten voor wie dat instelt */
  @media(prefers-reduced-motion:reduce){
    .tw-foto.zweef,.tw-foto.zweef2,.hx-zegel,.pt-rij,.pt-schijf,.fin:after{animation:none}
  }

  /* ══════════════════════════════════════════════════════════
     DE SCAN — opnieuw opgebouwd
     Eén vraag tegelijk, veel klikken en weinig typen, en links
     een kaart die zich vult met wat we al weten.
     ══════════════════════════════════════════════════════════ */
  /* inset:0 alleen is op iOS niet genoeg: daar valt de zichtbare
     hoogte kleiner uit dan het venster zodra de balken van Safari
     meebewegen, en dan kapt de inhoud onderin af. 100dvh volgt die
     beweging wel; de regel erboven blijft staan voor browsers die
     dat niet kennen. */
  #scan-root{position:fixed;left:0;top:0;right:0;bottom:0;height:100%;z-index:300;display:none}
  @supports(height:100dvh){#scan-root{height:100dvh}}
  #scan-root.aan{display:block}
  .sc-veld{position:absolute;inset:0;background:var(--bg);overflow-y:auto;
    -webkit-overflow-scrolling:touch;overscroll-behavior:contain}
  /* hoort bij zetVast() in js/scan.js: de body staat stil op de plek
     waar hij stond, zodat er onder het scanvenster niets kan schuiven */
  body.scan{overflow:hidden;position:fixed;left:0;right:0;width:100%}

  /* ── balk bovenin ─────────────────────────────────────── */
  .sc-kop{position:sticky;top:0;z-index:6;background:color-mix(in srgb,var(--bg) 88%,transparent);
    backdrop-filter:blur(18px);border-bottom:1px solid var(--line2)}
  /* Een waas achter een plakkende balk, in een schuivend vak, in een
     vastgezet venster: dat is op een telefoon de duurste combinatie
     die er is, en op iOS ook de meest wankele. Daar wordt het een
     gewone dekkende balk — nauwelijks zichtbaar verschil. */
  @media(hover:none){
    .sc-kop{background:var(--bg);backdrop-filter:none}
  }
  html.eenvoudig .sc-kop{background:var(--bg);backdrop-filter:none}
  .sc-kop-in{max-width:1180px;margin:0 auto;padding:0 26px;height:66px;display:flex;align-items:center;gap:18px}
  @media(max-width:640px){.sc-kop-in{padding:0 16px;height:58px;gap:12px}}
  .sc-merk{display:flex;align-items:center;gap:11px;flex-shrink:0}
  .sc-merk svg{width:26px;height:26px}
  .sc-merk b{font-family:var(--display);font-weight:700;font-size:15.5px;letter-spacing:-.03em;color:var(--ink)}
  @media(max-width:640px){.sc-merk b{display:none}}
  .sc-stapnaam{font-family:var(--mono);font-size:11px;letter-spacing:1.6px;text-transform:uppercase;
    color:var(--steel);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .sc-rest{margin-left:auto;display:flex;align-items:center;gap:12px;flex-shrink:0}
  .sc-rest span{font-family:var(--mono);font-size:11px;color:var(--steel)}
  @media(max-width:520px){.sc-rest span{display:none}}
  .sc-weg{width:34px;height:34px;border-radius:11px;border:1px solid var(--line);background:transparent;
    color:var(--ink);display:grid;place-items:center;font-size:15px;transition:all .25s}
  .sc-weg:hover{background:var(--v-zacht);border-color:var(--accent)}
  .sc-balk{height:3px;background:var(--line2);position:relative;overflow:hidden}
  .sc-balk i{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--v-koel);
    transition:width .5s var(--veer);border-radius:0 3px 3px 0}

  /* ── indeling ─────────────────────────────────────────── */
  .sc-in{max-width:1180px;margin:0 auto;padding:38px 26px 90px;display:grid;
    grid-template-columns:1fr 300px;gap:44px;align-items:start}
  @media(max-width:960px){.sc-in{grid-template-columns:1fr;gap:26px;padding:26px 18px 80px}}
  .sc-hoofd{min-width:0}

  /* de vraag */
  .sc-oog{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:10.5px;
    letter-spacing:2px;text-transform:uppercase;color:var(--accent);margin-bottom:16px}
  .sc-oog b{width:20px;height:20px;border-radius:6px;display:grid;place-items:center;font-size:10px;
    background:var(--accent-zacht);border:1px solid color-mix(in srgb,var(--accent) 30%,transparent)}
  .sc-vraag{font-family:var(--display);font-weight:600;font-size:clamp(24px,3.4vw,38px);letter-spacing:-.04em;
    line-height:1.12;margin:0 0 12px;max-width:20ch}
  .sc-uitleg{margin:0 0 26px;font-size:16px;color:var(--steel);line-height:1.6;max-width:56ch}
  .sc-uitleg b{color:var(--ink2);font-weight:600}

  /* keuzetegels */
  .sc-tegels{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px}
  .sc-tegels.breed{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
  @media(max-width:520px){.sc-tegels,.sc-tegels.breed{grid-template-columns:1fr}}
  .sc-tegel{position:relative;display:flex;align-items:center;gap:12px;padding:16px 17px;text-align:left;
    border-radius:var(--r-m);border:1px solid var(--line);background:var(--v-kaart);
    font-size:15px;color:var(--ink2);transition:all .26s var(--veer)}
  .sc-tegel:hover{border-color:color-mix(in srgb,var(--accent) 48%,var(--line));transform:translateY(-2px)}
  .sc-tegel.aan{border-color:var(--accent);background:var(--accent-zacht);color:var(--ink);font-weight:600;
    box-shadow:var(--gloed)}
  /* De pictogrammen zijn tekeningen (zie js/iconen.js). Ze nemen de
     kleur van de tekst eromheen over en schalen mee met de
     lettergrootte van hun vakje, zodat de rest van de opmaak niet
     hoefde te veranderen. */
  .ic{width:1.15em;height:1.15em;display:inline-block;vertical-align:-.22em;flex-shrink:0}
  .pijl .ic,.vink .ic{width:1.05em;height:1.05em}

  .sc-tegel i{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex-shrink:0;
    font-style:normal;font-size:15px;background:var(--accent-zacht);color:var(--accent);
    border:1px solid color-mix(in srgb,var(--accent) 26%,transparent)}
  .sc-tegel.aan i{background:var(--v-koel);color:#fff;border-color:transparent}
  .sc-tegel span{min-width:0}
  .sc-tegel small{display:block;font-size:12.5px;color:var(--steel);font-weight:400;margin-top:3px;line-height:1.4}
  .sc-tegel .vink{position:absolute;right:12px;top:12px;width:18px;height:18px;border-radius:6px;
    border:1px solid var(--line);display:grid;place-items:center;font-size:10px;color:transparent;
    transition:all .25s}
  .sc-tegel.aan .vink{background:var(--v-koel);border-color:transparent;color:#fff}

  /* chips */
  .sc-chips{display:flex;flex-wrap:wrap;gap:9px}
  .sc-chip{padding:11px 17px;border-radius:999px;border:1px solid var(--line);background:var(--v-kaart);
    font-size:14.5px;color:var(--ink2);transition:all .24s var(--veer)}
  .sc-chip:hover{border-color:color-mix(in srgb,var(--accent) 48%,var(--line))}
  .sc-chip.aan{background:var(--v-koel);color:#fff;border-color:transparent;box-shadow:var(--gloed);font-weight:600}

  /* zoeken naar software */
  .sc-zoek{position:relative;margin-bottom:14px}
  .sc-zoek input{width:100%;padding:15px 17px 15px 44px;border-radius:var(--r-m);border:1px solid var(--line);
    background:var(--v-kaart);color:var(--ink);font-family:inherit;font-size:15.5px}
  .sc-zoek input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-zacht)}
  .sc-zoek:before{content:'';position:absolute;left:16px;top:50%;transform:translateY(-50%);width:16px;height:16px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23808a9b' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m15.2 15.2 5.3 5.3'/%3E%3C/svg%3E") no-repeat center/contain;
    font-size:19px;color:var(--steel)}
  .sc-vondst{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:8;max-height:270px;overflow-y:auto;
    border-radius:var(--r-m);border:1px solid var(--line);background:var(--vlak);box-shadow:var(--schaduw-l);
    display:none}
  .sc-vondst.aan{display:block}
  .sc-vondst button{display:flex;align-items:center;gap:11px;width:100%;padding:12px 16px;text-align:left;
    font-size:14.5px;color:var(--ink2);border-bottom:1px solid var(--line2)}
  .sc-vondst button:last-child{border-bottom:none}
  .sc-vondst button:hover{background:var(--accent-zacht);color:var(--ink)}
  .sc-vondst button s{margin-left:auto;font-family:var(--mono);font-size:10.5px;color:var(--steel);
    text-decoration:none;flex-shrink:0}
  .sc-gekozen{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
  .sc-gekozen .pil{display:inline-flex;align-items:center;gap:9px;padding:8px 12px 8px 14px;border-radius:999px;
    background:var(--accent-zacht);border:1px solid color-mix(in srgb,var(--accent) 34%,transparent);
    font-size:13.5px;color:var(--ink)}
  .sc-gekozen .pil b{font-weight:600}
  .sc-gekozen .pil button{width:18px;height:18px;border-radius:50%;background:var(--v-koel);color:#fff;
    font-size:10px;display:grid;place-items:center;flex-shrink:0}
  .sc-groepkop{font-family:var(--mono);font-size:10.5px;letter-spacing:1.6px;text-transform:uppercase;
    color:var(--steel);margin:20px 0 10px}

  /* schuifregelaar */
  .sc-schuif{padding:20px 22px;border-radius:var(--r-m);border:1px solid var(--line);background:var(--v-kaart)}
  .sc-schuif label{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-bottom:14px}
  .sc-schuif label span{font-size:15px;color:var(--ink2)}
  .sc-schuif label b{font-family:var(--display);font-weight:700;font-size:24px;letter-spacing:-.03em;
    background:var(--t-koel);-webkit-background-clip:text;background-clip:text;color:transparent;white-space:nowrap}
  .sc-schuif input[type=range]{width:100%;-webkit-appearance:none;appearance:none;height:5px;border-radius:99px;
    background:var(--line);outline:none}
  .sc-schuif input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;
    border-radius:50%;background:var(--v-koel);box-shadow:var(--gloed);cursor:pointer;border:2px solid var(--bg)}
  .sc-schuif input[type=range]::-moz-range-thumb{width:24px;height:24px;border-radius:50%;
    border:2px solid var(--bg);background:#5B5BD5;cursor:pointer}
  .sc-schuif .uiterst{display:flex;justify-content:space-between;margin-top:9px;
    font-family:var(--mono);font-size:10.5px;color:var(--steel)}

  /* tekstvelden */
  .sc-veldje{margin-bottom:16px}
  .sc-veldje label{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:1.5px;
    text-transform:uppercase;color:var(--steel);margin-bottom:8px}
  .sc-veldje input,.sc-veldje textarea{width:100%;padding:14px 16px;border-radius:var(--r-m);
    border:1px solid var(--line);background:var(--v-kaart);color:var(--ink);font-family:inherit;font-size:15.5px}
  .sc-veldje textarea{min-height:120px;resize:vertical;line-height:1.55}
  .sc-veldje input:focus,.sc-veldje textarea:focus{outline:none;border-color:var(--accent);
    box-shadow:0 0 0 3px var(--accent-zacht)}
  .sc-veldje.fout input,.sc-veldje.fout textarea{border-color:var(--warm)}
  .sc-paar{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  @media(max-width:560px){.sc-paar{grid-template-columns:1fr}}
  .sc-hint{margin:8px 0 0;font-family:var(--mono);font-size:11px;color:var(--steel);line-height:1.6}
  .sc-vinkje{display:flex;align-items:flex-start;gap:12px;padding:15px 17px;border-radius:var(--r-m);
    border:1px solid var(--line);background:var(--v-kaart);cursor:pointer;font-size:14.5px;
    color:var(--ink2);line-height:1.5}
  .sc-vinkje.aan{border-color:var(--accent);background:var(--accent-zacht)}
  .sc-vinkje i{width:20px;height:20px;border-radius:6px;border:1px solid var(--line);flex-shrink:0;
    display:grid;place-items:center;font-size:11px;font-style:normal;color:transparent;margin-top:1px}
  .sc-vinkje.aan i{background:var(--v-koel);border-color:transparent;color:#fff}

  /* onderbalk met knoppen */
  .sc-voet{position:sticky;bottom:0;z-index:6;margin-top:34px;padding:16px 0 18px;
    background:linear-gradient(to top,var(--bg) 62%,transparent);
    display:flex;align-items:center;gap:12px;flex-wrap:wrap}
  .sc-voet .weglaten{margin-left:auto;font-family:var(--mono);font-size:11.5px;color:var(--steel);
    background:transparent;padding:10px 4px}
  .sc-voet .weglaten:hover{color:var(--ink);text-decoration:underline}
  @media(max-width:520px){
    .sc-voet{gap:9px}
    .sc-voet .knop.vol{flex:1 1 100%;justify-content:center;order:-1}
    .sc-voet .weglaten{margin-left:0}
  }

  /* ── zijkaart: wat we al weten ────────────────────────── */
  .sc-zij{position:sticky;top:96px;border-radius:var(--r-l);border:1px solid var(--line);
    background:var(--v-kaart);overflow:hidden}
  @media(max-width:960px){.sc-zij{position:static;order:-1}}
  .sc-zij-kop{padding:16px 20px;border-bottom:1px solid var(--line2);
    background:color-mix(in srgb,var(--accent) 7%,transparent)}
  .sc-zij-kop b{display:block;font-family:var(--display);font-weight:600;font-size:15px;letter-spacing:-.02em}
  .sc-zij-kop span{display:block;font-family:var(--mono);font-size:10px;letter-spacing:1.4px;
    text-transform:uppercase;color:var(--steel);margin-top:5px}
  .sc-zij-lijf{padding:8px 20px 18px}
  .sc-zij-rij{display:flex;gap:12px;padding:11px 0;border-bottom:1px solid var(--line2);font-size:13.5px}
  .sc-zij-rij:last-child{border-bottom:none}
  .sc-zij-rij s{flex-shrink:0;width:96px;font-family:var(--mono);font-size:10.5px;letter-spacing:1px;
    text-transform:uppercase;color:var(--steel);text-decoration:none;padding-top:2px}
  .sc-zij-rij b{font-weight:600;color:var(--ink);line-height:1.45}
  .sc-zij-leeg{padding:16px 0;font-size:13.5px;color:var(--steel);line-height:1.55}
  .sc-zij-tel{padding:14px 20px;border-top:1px solid var(--line2);background:var(--bg2);
    display:flex;align-items:baseline;gap:9px}
  .sc-zij-tel b{font-family:var(--display);font-weight:700;font-size:20px;letter-spacing:-.03em;
    background:var(--t-warm);-webkit-background-clip:text;background-clip:text;color:transparent}
  .sc-zij-tel span{font-family:var(--mono);font-size:10.5px;color:var(--steel);line-height:1.4}

  /* ── startscherm ──────────────────────────────────────── */
  .sc-start{max-width:660px;margin:0 auto;padding:60px 26px 90px;text-align:center}
  @media(max-width:640px){.sc-start{padding:40px 18px 70px}}
  .sc-start h2{font-family:var(--display);font-weight:600;font-size:clamp(28px,4.4vw,46px);
    letter-spacing:-.045em;line-height:1.08;margin:22px 0 16px}
  .sc-start > p{margin:0 auto 30px;font-size:17px;color:var(--steel);line-height:1.6;max-width:48ch}
  .sc-krijg{display:grid;gap:10px;text-align:left;margin:0 0 30px}
  .sc-krijg div{display:flex;align-items:flex-start;gap:13px;padding:15px 18px;border-radius:var(--r-m);
    border:1px solid var(--line);background:var(--v-kaart);font-size:14.5px;color:var(--ink2);line-height:1.5}
  .sc-krijg div i{width:26px;height:26px;border-radius:8px;flex-shrink:0;display:grid;place-items:center;
    font-style:normal;font-size:12px;background:var(--accent-zacht);color:var(--accent);
    border:1px solid color-mix(in srgb,var(--accent) 26%,transparent)}
  .sc-krijg div b{color:var(--ink);font-weight:600}
  .sc-hervat{display:flex;align-items:center;gap:14px;padding:15px 18px;border-radius:var(--r-m);
    border:1px solid color-mix(in srgb,var(--accent) 45%,var(--line));background:var(--accent-zacht);
    text-align:left;margin-bottom:20px;font-size:14.5px;color:var(--ink)}
  .sc-hervat b{display:block;font-weight:600;margin-bottom:3px}
  .sc-hervat span{font-family:var(--mono);font-size:11px;color:var(--steel)}
  .sc-hervat .knop{margin-left:auto;flex-shrink:0}

  /* ── uitkomst ─────────────────────────────────────────── */
  .sc-uit{max-width:900px;margin:0 auto;padding:44px 26px 100px}
  @media(max-width:640px){.sc-uit{padding:28px 18px 80px}}
  .sc-uit-kop{text-align:center;margin-bottom:36px}
  .sc-uit-kop h2{font-family:var(--display);font-weight:600;font-size:clamp(26px,4vw,42px);
    letter-spacing:-.045em;line-height:1.1;margin:18px 0 14px}
  .sc-uit-kop p{margin:0 auto;font-size:16.5px;color:var(--steel);line-height:1.6;max-width:52ch}
  .sc-getal{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-radius:var(--r-l);overflow:hidden;
    border:1px solid var(--line);background:var(--v-kaart);margin-bottom:30px}
  @media(max-width:640px){.sc-getal{grid-template-columns:1fr}}
  .sc-getal div{padding:22px 24px;border-right:1px solid var(--line)}
  .sc-getal div:last-child{border-right:none}
  @media(max-width:640px){.sc-getal div{border-right:none;border-bottom:1px solid var(--line)}
    .sc-getal div:last-child{border-bottom:none}}
  .sc-getal b{display:block;font-family:var(--display);font-weight:700;font-size:clamp(24px,3.4vw,34px);
    letter-spacing:-.04em;background:var(--t-koel);-webkit-background-clip:text;background-clip:text;color:transparent}
  .sc-getal span{display:block;font-family:var(--mono);font-size:11px;color:var(--steel);margin-top:8px;line-height:1.5}
  .sc-plan{display:grid;gap:12px;margin-bottom:30px}
  .sc-bouw{display:grid;grid-template-columns:44px 1fr;gap:16px;padding:20px 22px;border-radius:var(--r-l);
    border:1px solid var(--line);background:var(--v-kaart);transition:border-color .3s,transform .35s var(--veer)}
  .sc-bouw:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line));transform:translateY(-2px)}
  .sc-bouw .nr{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;
    font-family:var(--mono);font-size:12px;font-weight:700;background:var(--v-koel);color:#fff}
  .sc-bouw h4{font-family:var(--display);font-weight:600;font-size:18px;letter-spacing:-.03em;margin:0 0 7px}
  .sc-bouw p{margin:0 0 10px;font-size:14.5px;color:var(--steel);line-height:1.55}
  .sc-bouw .op-op{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10.5px;
    letter-spacing:1.2px;text-transform:uppercase;color:var(--accent);border:1px solid
    color-mix(in srgb,var(--accent) 32%,transparent);border-radius:999px;padding:5px 11px}
  .sc-bouw .kijk{margin-left:8px;font-family:var(--mono);font-size:10.5px;color:var(--steel)}
  .sc-bouw .kijk:hover{color:var(--accent);text-decoration:underline}
  .sc-samen{border-radius:var(--r-l);border:1px solid var(--line);overflow:hidden;margin-bottom:26px}
  .sc-samen-kop{padding:15px 20px;background:var(--bg2);border-bottom:1px solid var(--line);
    font-family:var(--mono);font-size:11px;letter-spacing:1.6px;text-transform:uppercase;color:var(--steel)}
  .sc-samen-rij{display:grid;grid-template-columns:180px 1fr;gap:16px;padding:13px 20px;
    border-bottom:1px solid var(--line2);font-size:14px}
  @media(max-width:560px){.sc-samen-rij{grid-template-columns:1fr;gap:4px}}
  .sc-samen-rij:last-child{border-bottom:none}
  .sc-samen-rij s{font-family:var(--mono);font-size:10.5px;letter-spacing:1.2px;text-transform:uppercase;
    color:var(--steel);text-decoration:none}
  .sc-samen-rij b{font-weight:500;color:var(--ink2);line-height:1.5}