:root {
    --nacht: #08120E;
    --nacht-2: #0C1B15;
    --nacht-3: #12241C;
    --papier: #F2EEE3;
    --papier-70: rgba(242, 238, 227, .72);
    --papier-45: rgba(242, 238, 227, .58);
    --papier-25: rgba(242, 238, 227, .25);
    --goud: #C7A45F;
    --accent: #E8D3A2;
    --goud-diep: #8C7038;
    --pauw: #63A296;
    --hair: rgba(199, 164, 95, .18);
    --hair-soft: rgba(242, 238, 227, .09);
    --hair-goud: rgba(199, 164, 95, .4);
    --rail-bg: rgba(8, 18, 14, .82);
    --hero-glow: #10251C;
    --vlak-grad: linear-gradient(140deg, #10231B 0%, #0C1B15 70%);
    --knop-tekst: #16110A;
    --veld-bg: rgba(8, 18, 14, .6);
    --schaduw-s: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .25);
    --schaduw-m: 0 2px 6px rgba(0, 0, 0, .35), 0 18px 44px rgba(0, 0, 0, .35);
    --hoog: #CC4A33; --hoog-t: #E88D77; --hoog-bg: rgba(204, 74, 51, .16);
    --middel: #B8891F; --middel-t: #E0BC6A; --middel-bg: rgba(184, 137, 31, .14);
    --laag: #379E7E; --laag-t: #7CC9AF; --laag-bg: rgba(55, 158, 126, .13);
    --oog-lijn: 199, 164, 95;
    --oog-pupil: 232, 211, 162;
    --oog-web: rgba(99, 162, 150, .07);
    --serif: 'Charter', 'Iowan Old Style', 'Georgia', 'Times New Roman', serif;
    --mono: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', sans-serif; /* labels in het bodyfont, geen monospace (27 okt 2026) */
    --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', sans-serif;
    --ease: cubic-bezier(.22, 1, .36, 1);
  }
  body[data-thema="licht"] {
    --nacht: #FAF8F2;
    --nacht-2: #FFFFFF;
    --nacht-3: #F1ECDF;
    --papier: #22312B;
    --papier-70: rgba(34, 49, 43, .74);
    --papier-45: rgba(34, 49, 43, .62);
    --papier-25: rgba(34, 49, 43, .3);
    --accent: #8C7038;
    --pauw: #3B7A6E;
    --hair: rgba(34, 49, 43, .14);
    --hair-soft: rgba(34, 49, 43, .1);
    --hair-goud: rgba(199, 164, 95, .5);
    --rail-bg: rgba(250, 248, 242, .78);
    --hero-glow: #FFFFFF;
    --vlak-grad: linear-gradient(150deg, #FDFBF5 0%, #FFFFFF 60%);
    --knop-tekst: #16110A;
    --veld-bg: #FAF8F2;
    --schaduw-s: 0 1px 2px rgba(34, 49, 43, .05), 0 8px 24px rgba(34, 49, 43, .05);
    --schaduw-m: 0 2px 6px rgba(34, 49, 43, .06), 0 18px 44px rgba(34, 49, 43, .08);
    --hoog: #A33A28; --hoog-t: #A33A28; --hoog-bg: rgba(163, 58, 40, .1);
    --middel: #8C6416; --middel-t: #8C6416; --middel-bg: rgba(140, 100, 22, .1);
    --laag: #2C7A5F; --laag-t: #2C7A5F; --laag-bg: rgba(44, 122, 95, .1);
    --oog-lijn: 140, 112, 56;
    --oog-pupil: 59, 122, 110;
    --oog-web: rgba(59, 122, 110, .08);
  }
  html { scroll-behavior: smooth; }
  body { margin: 0; background: var(--nacht); color: var(--papier); font-family: var(--sans); font-size: 20px; line-height: 1.6; -webkit-font-smoothing: antialiased; transition: background .5s, color .5s; }
  ::selection { background: rgba(199, 164, 95, .35); }
  .wrap { max-width: 1120px; margin: 0 auto; padding: 0 32px; }
  a { color: var(--pauw); }
  button { font: inherit; cursor: pointer; }
  :focus-visible { outline: 2px solid var(--goud); outline-offset: 3px; border-radius: 2px; }
  .skip { position: absolute; left: -9999px; top: 70px; z-index: 100; background: var(--goud); color: var(--knop-tekst); padding: 12px 20px; border-radius: 3px; font-family: var(--mono); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; font-weight: 600; }
  .skip:focus { left: 16px; }

  .rail { position: fixed; top: 0; left: 0; right: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px 32px; background: var(--rail-bg); backdrop-filter: blur(13px); -webkit-backdrop-filter: blur(13px); border-bottom: 1px solid var(--hair); }
  .rail .mark { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
  .rail .mark .naam { font-family: var(--serif); font-size: 19px; letter-spacing: .04em; }
  .rail .mark .naam b { color: var(--accent); font-weight: 400; font-style: italic; }
  .rail nav { display: flex; gap: 22px; align-items: center; }
  .rail nav a { font-family: var(--mono); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--papier-45); text-decoration: none; transition: color .3s; font-weight: 600; }
  .rail nav a:hover { color: var(--accent); }
  .rail nav a.nav-cta { color: var(--knop-tekst); background: var(--goud); padding: 9px 18px; border-radius: 3px; transition: filter .3s; }
  .rail nav a.nav-cta:hover { filter: brightness(1.12); color: var(--knop-tekst); }
  .thema-knop { background: none; border: 1px solid var(--hair-soft); border-radius: 20px; color: var(--papier-45); font-family: var(--mono); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; padding: 8px 16px; transition: all .3s; font-weight: 600; }
  .thema-knop:hover { border-color: var(--goud); color: var(--accent); }
  @media (max-width: 1020px) { .rail nav a:not(.nav-cta) { display: none; } }

  .hero { position: relative; min-height: 92vh; display: flex; align-items: center; overflow: hidden; background: radial-gradient(1200px 700px at 78% 40%, var(--hero-glow) 0%, var(--nacht) 62%); }
  #ogen { position: absolute; inset: 0; width: 100%; height: 100%; }
  .hero .wrap { position: relative; z-index: 2; padding-top: 130px; padding-bottom: 80px; }
  .eyebrow { font-family: var(--mono); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--pauw); margin: 0 0 26px; font-weight: 600; }
  .eyebrow .sep { color: var(--papier-25); }
  h1 { font-family: var(--serif); font-weight: 400; margin: 0 0 28px; font-size: clamp(44px, 7vw, 84px); line-height: 1.04; letter-spacing: -.01em; text-wrap: balance; max-width: 12ch; }
  h1 em { font-style: italic; color: var(--accent); }
  .hero p.sub { max-width: 52ch; font-size: 21px; color: var(--papier-70); margin: 0 0 40px; }
  .cta-rij { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
  .cta { display: inline-block; padding: 15px 30px; border-radius: 3px; text-decoration: none; font-family: var(--mono); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; transition: transform .35s var(--ease), box-shadow .35s var(--ease), filter .35s var(--ease); border: 1px solid transparent; font-weight: 600; }
  .cta.primair { background: var(--goud); color: var(--knop-tekst); border-color: var(--goud); }
  .cta.primair:hover { filter: brightness(1.12); transform: translateY(-2px); box-shadow: 0 12px 32px rgba(199, 164, 95, .25); }
  .cta.stil { color: var(--papier-70); border-color: var(--hair-soft); }
  .cta.stil:hover { border-color: var(--goud); color: var(--accent); }
  .ticker { margin-top: 64px; font-family: var(--mono); font-size: 13px; letter-spacing: .1em; color: var(--papier-45); display: flex; gap: 10px; flex-wrap: wrap; }
  .ticker .dot { color: var(--goud); }

  section { padding: 100px 0; border-top: 1px solid var(--hair-soft); }
  .kop-eyebrow { font-family: var(--mono); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin: 0 0 18px; font-weight: 600; }
  h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 4vw, 46px); line-height: 1.12; margin: 0 0 22px; max-width: 24ch; text-wrap: balance; }
  .intro { max-width: 60ch; color: var(--papier-70); font-size: 21px; margin: 0 0 52px; }
  .onthul { opacity: 0; transform: translateY(22px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
  .onthul.zichtbaar { opacity: 1; transform: none; }
  @media (prefers-reduced-motion: reduce) { .onthul { opacity: 1; transform: none; } }

  /* mini-demo */
  .mini-console { border: 1px solid var(--hair); border-radius: 6px; overflow: hidden; background: var(--nacht-2); box-shadow: var(--schaduw-m); }
  .mini-kop { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 16px 24px; border-bottom: 1px solid var(--hair-soft); }
  .mini-kop .deal { font-family: var(--mono); font-size: 13px; letter-spacing: .08em; color: var(--papier-70); }
  .mini-kop .deal b { color: var(--accent); font-weight: 600; }
  .lamp { width: 9px; height: 9px; border-radius: 50%; background: var(--papier-25); display: inline-block; margin-right: 8px; transition: all .4s; }
  .lamp.actief { background: var(--pauw); box-shadow: 0 0 10px var(--pauw); animation: puls 1.4s ease-in-out infinite; }
  .lamp.klaar { background: var(--goud); box-shadow: 0 0 10px var(--goud); }
  @keyframes puls { 50% { opacity: .4; } }
  .mini-kop .status { font-family: var(--mono); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--papier-45); font-weight: 600; }
  .mini-body { padding: 30px 24px 24px; }
  .mini-start { text-align: center; padding: 26px 16px 34px; }
  .mini-start p { color: var(--papier-70); max-width: 52ch; margin: 0 auto 24px; }
  .mini-stadia { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 20px; }
  @media (max-width: 720px) { .mini-stadia { grid-template-columns: repeat(2, 1fr); } }
  .mini-stadium { border: 1px solid var(--hair-soft); border-radius: 4px; padding: 12px 14px; font-family: var(--mono); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--papier-45); display: flex; justify-content: space-between; gap: 8px; font-weight: 600; }
  .mini-stadium .vink { opacity: 0; color: var(--goud); transition: opacity .3s; }
  .mini-stadium.klaar { border-color: var(--hair-goud); color: var(--papier-70); }
  .mini-stadium.klaar .vink { opacity: 1; }
  .mini-issues { display: none; }
  .mini-issues.zichtbaar { display: block; animation: opkomst .7s var(--ease); }
  @keyframes opkomst { from { opacity: 0; transform: translateY(14px); } }
  .mini-issue { border: 1px solid var(--hair-soft); border-radius: 4px; margin-bottom: 8px; background: var(--nacht); overflow: hidden; }
  .mini-issue > button { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 14px; align-items: center; width: 100%; padding: 13px 16px; background: none; border: none; color: inherit; text-align: left; font-size: 18px; }
  .sev { font-family: var(--mono); font-size: 13px; letter-spacing: .1em; padding: 4px 0; border-radius: 3px; text-align: center; font-weight: 700; }
  .sev.H { background: var(--hoog-bg); color: var(--hoog-t); border: 1px solid var(--hoog); }
  .sev.M { background: var(--middel-bg); color: var(--middel-t); border: 1px solid var(--middel); }
  .sev.L { background: var(--laag-bg); color: var(--laag-t); border: 1px solid var(--laag); }
  .mini-detail { display: none; padding: 2px 16px 16px; }
  .mini-issue.open .mini-detail { display: block; }
  .bron { font-family: var(--mono); font-size: 13px; line-height: 1.7; color: var(--accent); background: rgba(199, 164, 95, .08); border-left: 2px solid var(--goud); padding: 12px 16px; border-radius: 0 3px 3px 0; margin: 8px 0 0; }
  .bron .ref { display: block; margin-top: 8px; color: var(--papier-45); font-size: 11px; letter-spacing: .06em; }
  .mini-voet { margin: 18px 0 0; font-family: var(--mono); font-size: 13px; letter-spacing: .06em; color: var(--papier-45); }

  .kaarten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
  @media (max-width: 860px) { .kaarten { grid-template-columns: 1fr; } }
  .kaart { border: 1px solid var(--hair-soft); border-radius: 4px; padding: 28px 26px; background: var(--nacht-2); box-shadow: var(--schaduw-s); }
  .kaart.goud { border-color: var(--hair-goud); background: var(--vlak-grad); box-shadow: var(--schaduw-m); }
  .kaart .k-eyebrow { font-family: var(--mono); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--pauw); margin-bottom: 14px; font-weight: 600; }
  .kaart h3 { font-family: var(--serif); font-weight: 400; font-size: 22px; margin: 0 0 10px; }
  .kaart p { margin: 0; font-size: 18px; color: var(--papier-70); }
  .kaart .voorbeeld { margin-top: 18px; font-family: var(--mono); font-size: 13px; line-height: 1.7; color: var(--accent); background: rgba(199, 164, 95, .08); border-left: 2px solid var(--goud); padding: 12px 16px; border-radius: 0 3px 3px 0; }

  .agents { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; counter-reset: agent; }
  @media (max-width: 860px) { .agents { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 560px) { .agents { grid-template-columns: 1fr; } }
  .agent { border: 1px solid var(--hair-soft); border-radius: 4px; padding: 24px 22px; background: var(--nacht-2); box-shadow: var(--schaduw-s); }
  .agent::before { counter-increment: agent; content: counter(agent, decimal-leading-zero); font-family: var(--mono); font-size: 13px; letter-spacing: .12em; color: var(--accent); }
  .agent h4 { font-family: var(--serif); font-weight: 400; font-size: 19px; margin: 12px 0 8px; }
  .agent p { margin: 0; font-size: 18px; color: var(--papier-45); }
  .principe { margin-top: 34px; font-family: var(--serif); font-size: 21px; font-style: italic; color: var(--accent); max-width: 46ch; }

  .doelgroepen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
  @media (max-width: 860px) { .doelgroepen { grid-template-columns: 1fr; } }
  .doelgroep { border: 1px solid var(--hair-soft); border-radius: 4px; padding: 28px 26px; background: var(--nacht-2); box-shadow: var(--schaduw-s); display: flex; flex-direction: column; gap: 10px; }
  .doelgroep h3 { font-family: var(--serif); font-weight: 400; font-size: 21px; margin: 0; }
  .doelgroep p { margin: 0; font-size: 18px; color: var(--papier-70); flex: 1; }
  .doelgroep .voordeel { font-family: var(--mono); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); border-top: 1px solid var(--hair-soft); padding-top: 14px; font-weight: 600; }

  .founder { display: grid; grid-template-columns: 380px 1fr; gap: 56px; align-items: center; }
  @media (max-width: 860px) { .founder { grid-template-columns: 1fr; gap: 30px; } }
  .founder-foto { position: relative; border-radius: 4px; overflow: hidden; border: 1px solid var(--hair-goud); aspect-ratio: 4 / 5; background: var(--vlak-grad); box-shadow: var(--schaduw-m); }
  .founder-foto img { position: relative; width: 100%; height: 100%; object-fit: cover; display: block; }
  .founder-foto .ornament { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
  .founder-quote { font-family: var(--serif); font-size: clamp(21px, 2.6vw, 28px); line-height: 1.5; color: var(--papier); margin: 0 0 26px; max-width: 24em; }
  .founder-quote em { color: var(--accent); }
  .founder-naam { font-family: var(--mono); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--papier-45); font-weight: 600; }
  .founder-naam b { color: var(--accent); font-weight: 600; }
  .team { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 64px; }
  @media (max-width: 720px) { .team { grid-template-columns: 1fr; } }
  .lid { border: 1px solid var(--hair-soft); border-radius: 4px; overflow: hidden; background: var(--nacht-2); box-shadow: var(--schaduw-s); }
  .lid .foto { position: relative; aspect-ratio: 1 / 1; background: var(--vlak-grad); }
  .lid .foto .init { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-size: 44px; font-style: italic; color: var(--goud); opacity: .6; }
  .lid .foto img { position: relative; width: 100%; height: 100%; object-fit: cover; display: block; }
  .lid .info { padding: 18px 20px 20px; }
  .lid .info .naam { font-family: var(--serif); font-size: 19px; }
  .lid .info .rol { margin-top: 5px; font-family: var(--mono); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--papier-45); font-weight: 600; }
  .meer-link { display: inline-block; margin-top: 30px; font-family: var(--mono); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--hair-goud); padding-bottom: 3px; font-weight: 600; }
  .meer-link:hover { color: var(--goud); }

  .fundament { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
  @media (max-width: 860px) { .fundament { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 560px) { .fundament { grid-template-columns: 1fr; } }
  .pijler { border: 1px solid var(--hair-soft); border-radius: 4px; padding: 24px 22px; background: var(--nacht-2); box-shadow: var(--schaduw-s); }
  .pijler h4 { font-family: var(--serif); font-weight: 400; font-size: 18px; margin: 0 0 8px; }
  .pijler p { margin: 0; font-size: 18px; color: var(--papier-45); }

  .horizon { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
  @media (max-width: 860px) { .horizon { grid-template-columns: 1fr; } }
  .fase { border: 1px solid var(--hair-soft); border-radius: 4px; background: var(--nacht-2); padding: 26px 24px; box-shadow: var(--schaduw-s); }
  .fase.nu { border-color: var(--hair-goud); background: var(--vlak-grad); box-shadow: var(--schaduw-m); }
  .fase-kop span { font-family: var(--mono); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--pauw); font-weight: 600; }
  .fase-kop h3 { font-family: var(--serif); font-weight: 400; font-size: 21px; margin: 8px 0 0; }
  .fase ul { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 12px; }
  .fase li { padding-left: 22px; position: relative; font-size: 18px; color: var(--papier-70); line-height: 1.55; }
  .fase li::before { content: ""; position: absolute; left: 0; top: 8px; width: 7px; height: 7px; border-radius: 50%; }
  .fase.nu li::before { background: var(--goud); }
  .fase.straks li::before { background: none; border: 1.5px solid var(--goud); }
  .fase.later li::before { background: none; border: 1.5px solid var(--papier-25); }
  .horizon-noot { margin: 26px 0 0; font-size: 16px; color: var(--papier-45); max-width: 72ch; }

  /* whitepaper-gate */
  #whitepaper { background: var(--vlak-grad); }
  .gate { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
  @media (max-width: 860px) { .gate { grid-template-columns: 1fr; gap: 30px; } }
  .gate-tekst h2 { max-width: 20ch; }
  .gate-tekst p { color: var(--papier-70); max-width: 48ch; }
  .gate-doc { border: 1px solid var(--hair-goud); border-radius: 4px; background: var(--nacht-2); padding: 32px 30px; box-shadow: var(--schaduw-m); }
  .gate-doc .doc-eyebrow { font-family: var(--mono); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--pauw); margin-bottom: 12px; font-weight: 600; }
  .gate-doc h3 { font-family: var(--serif); font-weight: 400; font-size: 23px; margin: 0 0 8px; }
  .gate-doc > p { font-size: 18px; color: var(--papier-70); margin: 0 0 22px; }
  .gate-rij { display: flex; gap: 10px; flex-wrap: wrap; }
  .gate-rij input { flex: 1; min-width: 200px; background: var(--veld-bg); border: 1px solid var(--hair-soft); border-radius: 3px; color: var(--papier); font: inherit; font-size: 16px; padding: 13px 15px; }
  .gate-rij input:focus { outline: none; border-color: var(--goud); }
  .gate-rij button { background: var(--goud); color: var(--knop-tekst); border: none; border-radius: 3px; padding: 13px 24px; font-family: var(--mono); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; transition: filter .3s; }
  .gate-rij button:hover { filter: brightness(1.12); }
  .gate-klaar { display: none; }
  .gate-klaar.zichtbaar { display: block; animation: opkomst .5s var(--ease); }
  .gate-klaar a.download { display: inline-block; margin-top: 6px; }
  .gate-doc .klein { margin: 14px 0 0; font-size: 15px; color: var(--papier-45); }

  /* faq */
  .faq { max-width: 800px; }
  .faq details { border: 1px solid var(--hair-soft); border-radius: 4px; background: var(--nacht-2); margin-bottom: 10px; box-shadow: var(--schaduw-s); }
  .faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 22px; font-family: var(--serif); font-size: 21px; }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary::after { content: "+"; font-family: var(--mono); font-size: 18px; color: var(--goud); transition: transform .3s var(--ease); flex: none; }
  .faq details[open] summary::after { transform: rotate(45deg); }
  .faq details p { margin: 0; padding: 0 22px 20px; font-size: 18px; color: var(--papier-70); max-width: 70ch; }

  #interesse { background: linear-gradient(180deg, var(--nacht) 0%, var(--nacht-3) 100%); }
  .interesse-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
  @media (max-width: 860px) { .interesse-grid { grid-template-columns: 1fr; gap: 34px; } }
  .interesse-tekst h2 { max-width: 16ch; }
  .interesse-tekst p { color: var(--papier-70); font-size: 20px; max-width: 46ch; }
  .interesse-tekst .punten { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 12px; }
  .interesse-tekst .punten li { padding-left: 26px; position: relative; color: var(--papier-70); font-size: 18px; }
  .interesse-tekst .punten li::before { content: ""; position: absolute; left: 0; top: 8px; width: 12px; height: 6px; border-left: 2px solid var(--goud); border-bottom: 2px solid var(--goud); transform: rotate(-45deg); }
  .plan-blok { margin-top: 34px; border: 1px solid var(--hair-soft); border-radius: 4px; padding: 22px 24px; background: var(--nacht-2); }
  .plan-blok p { margin: 0 0 14px; font-size: 18px; }
  form.lead { border: 1px solid var(--hair-goud); border-radius: 4px; background: var(--nacht-2); padding: 34px 32px; display: grid; gap: 18px; box-shadow: var(--schaduw-m); }
  .veld { display: grid; gap: 7px; }
  .veld label { font-family: var(--mono); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--papier-45); font-weight: 600; }
  .veld input, .veld select, .veld textarea { background: var(--veld-bg); border: 1px solid var(--hair-soft); border-radius: 3px; color: var(--papier); font: inherit; font-size: 16px; padding: 13px 15px; width: 100%; box-sizing: border-box; transition: border-color .3s; }
  .veld input:focus, .veld select:focus, .veld textarea:focus { outline: none; border-color: var(--goud); }
  .veld textarea { min-height: 96px; resize: vertical; }
  .veld select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--goud) 50%), linear-gradient(135deg, var(--goud) 50%, transparent 50%); background-position: calc(100% - 21px) 50%, calc(100% - 15px) 50%; background-size: 6px 6px; background-repeat: no-repeat; }
  .veld-rij { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
  @media (max-width: 560px) { .veld-rij { grid-template-columns: 1fr; } }
  form.lead .verstuur { background: var(--goud); color: var(--knop-tekst); border: none; border-radius: 3px; padding: 16px 30px; font-family: var(--mono); font-size: 13px; letter-spacing: .13em; text-transform: uppercase; font-weight: 600; transition: filter .3s, transform .3s var(--ease); }
  form.lead .verstuur:hover { filter: brightness(1.12); transform: translateY(-2px); }
  form.lead .privacy { margin: 0; font-size: 15px; color: var(--papier-45); line-height: 1.6; }
  .dank { display: none; border: 1px solid var(--hair-goud); border-radius: 4px; background: var(--nacht-2); padding: 44px 36px; text-align: center; box-shadow: var(--schaduw-m); }
  .dank.zichtbaar { display: block; animation: opkomst .6s var(--ease); }
  .dank h3 { font-family: var(--serif); font-weight: 400; font-size: 26px; margin: 0 0 10px; color: var(--accent); }
  .dank p { margin: 0; color: var(--papier-70); font-size: 18px; }

  /* strip: cijfers + partners */
  .strip-sectie { padding: 60px 0; }
  .cijfers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
  @media (max-width: 720px) { .cijfers { grid-template-columns: repeat(2, 1fr); } }
  .cijfer .w { font-family: var(--serif); font-size: clamp(30px, 4vw, 44px); color: var(--accent); line-height: 1.1; font-variant-numeric: tabular-nums; }
  .cijfer .l { margin-top: 6px; font-family: var(--mono); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--papier-45); font-weight: 600; }
  .strip-noot, .badge-noot { margin: 22px 0 0; font-family: var(--mono); font-size: 13px; letter-spacing: .06em; color: var(--papier-45); }
  .partner-strip { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 36px; border-top: 1px solid var(--hair-soft); padding-top: 26px; }
  .partner-label { font-family: var(--mono); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--pauw); margin-right: 8px; font-weight: 600; }
  .partner-slot { border: 1.5px dashed var(--hair-soft); border-radius: 3px; padding: 11px 20px; font-family: var(--mono); font-size: 13px; letter-spacing: .08em; color: var(--papier-45); }
  a.partner-slot { text-decoration: none; }
  .partner-slot.actie { border-color: var(--hair-goud); color: var(--accent); transition: filter .3s; }
  .partner-slot.actie:hover { filter: brightness(1.15); }
  .demo-cta { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 26px; }
  .demo-cta p { margin: 0; color: var(--papier-70); font-size: 18px; }
  .badges { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 40px; }
  .badge { display: inline-flex; align-items: center; gap: 10px; border: 1px solid var(--hair-soft); border-radius: 20px; padding: 10px 18px; font-family: var(--mono); font-size: 13px; letter-spacing: .08em; color: var(--papier-70); }
  .badge svg { flex: none; }
  .badge i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
  .badge.actief i { background: var(--pauw); box-shadow: 0 0 8px var(--pauw); }
  .badge.loopt i { background: var(--goud); }
  .badge .st { color: var(--papier-45); }
  .ref-slot { margin-top: 64px; border: 1.5px dashed var(--hair-soft); border-radius: 4px; padding: 28px; max-width: 720px; }
  .ref-slot .ref-kop { font-family: var(--mono); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--pauw); margin-bottom: 18px; font-weight: 600; }
  .skelet-lijn { height: 12px; border-radius: 6px; background: var(--hair-soft); margin: 10px 0; }
  .spelregels { margin-top: 24px; border: 1px solid var(--hair-soft); border-radius: 4px; padding: 22px 24px; background: var(--nacht-2); }
  .spelregels h3 { font-family: var(--serif); font-weight: 400; font-size: 19px; margin: 0 0 12px; }
  .spelregels ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
  .spelregels li { padding-left: 22px; position: relative; color: var(--papier-70); font-size: 18px; }
  .spelregels li::before { content: ""; position: absolute; left: 0; top: 7px; width: 10px; height: 5px; border-left: 2px solid var(--goud); border-bottom: 2px solid var(--goud); transform: rotate(-45deg); }

  footer { border-top: 1px solid var(--hair); padding: 54px 0 70px; }
  .voet-nav { display: flex; gap: 24px; flex-wrap: wrap; margin-bottom: 30px; }
  .voet-nav a { font-family: var(--mono); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--papier-45); text-decoration: none; transition: color .3s; font-weight: 600; }
  .voet-nav a:hover { color: var(--accent); }
  footer .colofon { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; align-items: center; font-size: 16px; color: var(--papier-45); }
  footer .colofon .merk { font-family: var(--serif); font-size: 17px; color: var(--papier-70); }
  footer .colofon .merk b { color: var(--accent); font-weight: 400; font-style: italic; }
  footer .klein { margin-top: 18px; font-family: var(--mono); font-size: 13px; letter-spacing: .06em; color: var(--papier-25); }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  }

  /* ── 27 oktober 2026: leesbaarheid en mobiel, uit de websiteherziening ── */
  .feiten { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
  @media (max-width: 900px) { .feiten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 520px) { .feiten { grid-template-columns: minmax(0, 1fr); } }
  .feiten li { border-top: 1px solid var(--hair-goud); padding-top: 14px; }
  .feiten b { display: block; font-family: var(--serif); font-weight: 400; font-size: 21px; color: var(--papier); margin-bottom: 4px; }
  .feiten span { display: block; font-size: 16px; color: var(--papier-70); line-height: 1.5; }
  .rail nav a { font-size: 13.5px; }
  .cta, .gate-rij button, form.lead .verstuur { font-size: 15px; letter-spacing: .08em; }
  .meer-link, .doelgroep .voordeel a, .verder a { display: inline-block; padding: 8px 0; }
  @media (max-width: 560px) {
    .hero { min-height: auto; }
    .hero .wrap { padding-top: 100px; padding-bottom: 56px; }
    .cta-rij .cta { width: 100%; text-align: center; box-sizing: border-box; }
  }