/* ===== v33a: versie A. Evolutie van v32, rustiger: geen gloed, geen pillen, lichte afsluiter. ===== */
:root{--light:#F0F4FA;--tint:#F0F4FA;--accent:#7FA8E8;--muted:#5B6880;--faint:#626E84}
.w-form textarea::placeholder,.fld input::placeholder,.fld textarea::placeholder{color:#7A869B}
.sec.light{background:var(--light)}
.sec{padding-block:clamp(72px,8vw,116px)}
.sec.tight{padding-block:clamp(56px,6vw,88px)}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
[id]{scroll-margin-top:88px}

/* rust: gloed, glans en spotlight uit */
.hero-fx .blob,.mock::before,.pcard.best::before,.cta29::after{display:none}
.btn-primary::after,.btn-gold::after,.btn-light::after{display:none}
.bcard::before,.bcard::after,.scard::before,.scard::after,.tcard::before,.tcard::after{display:none}
.bcard:hover,.scard:hover,.tcard:hover,.pcard:hover{transform:translateY(-2px);box-shadow:0 0 0 1px var(--line-2),0 14px 28px -18px rgba(14,31,61,.22)}
.pcard.best,.pcard.best:hover{box-shadow:0 0 0 2px var(--navy),0 24px 48px -30px rgba(14,31,61,.3)}
.bcard .bi{background:var(--sky-soft);color:var(--navy-3);box-shadow:none}
.js .rv{filter:none;transform:translateY(14px);transition:opacity .7s var(--out),transform .8s var(--out)}
.js .rv.in{filter:none}
.hero-fx canvas{opacity:.45}

/* hoekige labels in plaats van pillen */
.tq{border-radius:8px;padding:9px 14px 9px 10px}
.tq .ok{border-radius:6px}
.scard .dur,.mail-head .pill{border-radius:6px}
.pcard .badge{border-radius:6px;top:-13px}
.scard .no{border-radius:10px}

/* kop */
.menu{gap:28px}
@media (max-width:1180px){.hdr-tel{display:none}}
@media (max-width:1000px) and (min-width:901px){.menu{gap:20px;font-size:15px}.hdr-in{gap:28px}}

/* h1 met trefwoordregel */
.h1-kicker{display:block;font-size:15px;line-height:1.4;font-weight:600;letter-spacing:.01em;word-spacing:normal;color:var(--navy-3);margin-bottom:18px;text-wrap:pretty}
.hero33 .t-hero{font-size:clamp(38px,4.3vw,60px)}
.hero33 .t-hero-sub{font-size:clamp(34px,3.7vw,52px);line-height:1.08}
.btn-wit{background:#fff}
.hero-kort{padding-bottom:clamp(28px,3.5vw,48px)}
.hero-kort .center-head{margin-bottom:0;max-width:860px}
.hero-kort .actions{justify-content:center;margin-top:8px}
.sec-na-hero{padding-top:clamp(28px,3.5vw,48px)}
.page-head h1 .h1-kicker{margin-bottom:16px}

/* hero: voorbeeldwebsite met twee scenario's */
.hero33{padding-bottom:clamp(48px,5vw,72px)}
.mock{padding:20px 0 112px;min-height:566px}
.mock-hero .mh{position:absolute;inset:0;display:block;opacity:0;transition:opacity .7s var(--ease)}
.mock-hero .mh img{width:100%;height:100%;object-fit:cover;object-position:50% 45%}
.mock[data-scenario="syndicus"] .mh-syndicus,.mock[data-scenario="makelaar"] .mh-makelaar{opacity:1}
.mock-site,.mc-log,.mock-cap{transition:opacity .45s var(--ease)}
.mock.wissel .mc-log,.mock.wissel .mock-cap{opacity:0}
.mock-toast{bottom:48px;left:-20px;max-width:calc(100% - 8px)}
.mock-toast span{display:block}
.mock-foot{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:36px}
.mock-foot .fine{margin:0 0 0 auto}
.mock-tabs{display:flex;gap:22px}
.mock-tabs button{position:relative;padding:6px 0;font-size:14.5px;font-weight:600;color:var(--muted);transition:color .2s var(--ease)}
.mock-tabs button::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--navy-3);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--out)}
.mock-tabs button:hover{color:var(--ink)}
.mock-tabs button[aria-pressed="true"]{color:var(--ink)}
.mock-tabs button[aria-pressed="true"]::after{transform:scaleX(1)}
.mc-log .m{font-size:12.5px}
.mock-nav b,.mock-nav i{white-space:nowrap}

/* voordelen en vragenband */
.ben-sec{padding-top:0;margin-top:-20px;position:relative}
.ticker{padding:36px 0 4px}

/* twee doelgroepen */
.sectors.two{grid-template-columns:repeat(2,minmax(0,1fr));max-width:1080px;margin-inline:auto;gap:32px}
.sectors.two .sector{background:#fff;border-radius:16px;box-shadow:0 0 0 1px var(--card-line);padding:14px 14px 26px;gap:10px;transition:transform .45s var(--out),box-shadow .45s var(--out)}
.sectors.two .sector:hover{transform:translateY(-2px);box-shadow:0 0 0 1px var(--line-2),0 18px 36px -22px rgba(14,31,61,.25)}
.sectors.two .sector picture{border-radius:10px;margin-bottom:10px}
.sectors.two .sector img{aspect-ratio:16/9}
.sectors.two .sector h3,.sectors.two .sector p,.sectors.two .sector .more{padding-inline:12px}
.sectors.two .sector h3{font-size:22px}

/* belofte en founding */
.belofte{display:flex;gap:12px;align-items:flex-start;max-width:820px;margin:36px auto 0;padding:16px 20px;border-radius:12px;background:var(--sky-soft);color:var(--ink);font-size:16px;line-height:1.5;font-weight:500}
.belofte svg{width:18px;height:18px;flex:none;margin-top:3px;color:var(--navy-3)}
.sec.light .belofte{background:#fff;box-shadow:0 0 0 1px var(--card-line)}
.founding{display:flex;gap:6px 18px;align-items:baseline;max-width:820px;margin:20px auto 0;padding:16px 20px;border-radius:12px;background:#fff;box-shadow:0 0 0 1px var(--card-line);border-left:3px solid var(--accent);font-size:15.5px;line-height:1.5;color:var(--text)}
.founding b{color:var(--navy);font-weight:700;white-space:nowrap}
.founding.breed{max-width:none;margin:0 0 40px;background:var(--light);box-shadow:none;flex-direction:column;gap:4px;padding:20px 24px}
.founding.breed b{font-size:19px;letter-spacing:-.01em;white-space:normal}
.belofte.links,.founding.links{margin-left:0;margin-top:0;max-width:none;font-size:16px}
.pfine + .belofte{margin-top:28px}
.steps29 + .belofte{margin-top:32px}

/* prijzen in het kort */
.pkort{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;max-width:980px;margin-inline:auto}
.pk{background:#fff;border-radius:14px;box-shadow:0 0 0 1px var(--card-line);padding:24px 24px 26px;display:grid;gap:6px;align-content:start}
.pk h3{font-size:18px;letter-spacing:-.01em}
.pk-prijs{display:flex;align-items:baseline;gap:8px;min-height:44px;color:var(--navy)}
.pk-prijs b{font-size:34px;font-weight:700;letter-spacing:-.03em;line-height:1.1}
.pk-prijs span{font-size:14.5px;color:var(--muted)}
.pk > p:last-child{font-size:15.5px}
.pc-found{margin-top:8px;font-size:14.5px;line-height:1.4;color:var(--navy-3);font-weight:500}
.pc-found b{font-weight:700}
.pcard .desc{min-height:3.1em}

/* voorbeeldgesprek op de plek van de assistent */
.w.vb{height:auto}
.w.vb .w-log{flex:none;height:400px;padding-bottom:16px}
.w.vb .w-foot{border-top:1px solid var(--line);padding:12px 16px;font-size:12.5px}
.msg[hidden]{display:none}

/* tekstblokken */
.prose-l{display:grid;gap:22px;align-content:start;font-size:19px;line-height:1.55;color:var(--ink)}
.trust.two{grid-template-columns:repeat(2,minmax(0,1fr));max-width:1080px;margin-inline:auto}
.trust.two .tcard{padding:28px}
.trust.two .tcard h3{font-size:19px}
.trust.two .tcard p{font-size:15.5px}
.fine.center{text-align:center;margin-top:24px}
.side-head .intro{font-size:18px}

/* afgespeeld voorbeeld: rustig */
.flow29.play .fstep.on{box-shadow:0 0 0 2px var(--navy-3);transform:none}
.fstep.on .no{background:var(--navy-3)}
.flow29.play .bubble-row .msg{transform:translateY(8px)}
.mail-ai{background:var(--sky-soft);animation:none}
.mail-ai .dotje{width:8px;height:8px;border-radius:50%;background:var(--navy-3);animation:blink 1.1s infinite both}
.mailcard.thinking .mail-body{opacity:.18;filter:none}
.bubble-row .msg{max-width:84%}

/* lichte afsluiter: nooit donker voor de donkere voet */
.cta-sec{padding-top:clamp(40px,5vw,72px);padding-bottom:clamp(64px,7vw,96px)}
.cta33{position:relative;overflow:hidden;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);row-gap:28px;align-items:center;padding:clamp(32px,4.5vw,60px);border-radius:18px;background:var(--light);color:var(--text)}
.cta-sec.light .cta33{background:#fff;box-shadow:0 0 0 1px var(--card-line)}
.cta33-text{grid-column:1/span 7;display:grid;gap:16px;position:relative}
.cta33-actions{grid-column:9/span 4;display:grid;gap:12px;position:relative}
.cta33-actions .btn{width:100%;white-space:normal;height:auto;min-height:50px;padding-block:12px;text-align:center}
.cta33-actions p{font-size:14.5px;text-align:center;color:var(--muted)}

/* voet */
.ftr30-notes{color:var(--on-navy-3)}
.ftr30-brand .btn{white-space:normal}

/* contact en over */
.sec-form{padding-top:0}
.c-main{grid-column:1/span 7}
.c-side{grid-column:9/span 4}
.label.kop{margin-bottom:12px}
.label.kop.tweede{margin-top:40px}
.rows.kort .row{grid-template-columns:32px 1fr}
.rows.kort .row p{grid-column:auto;margin-top:0;color:var(--ink)}
.person .naam{color:var(--ink)}
.intro.breed{max-width:none;margin-top:28px}
.side-body .kv{margin-top:40px}
.notice{color:var(--navy-3);font-weight:500}

/* artikelsjabloon */
.art-wrap{max-width:860px}
.art-head{padding-bottom:clamp(36px,4vw,56px)}
.art-head h1{font-size:clamp(34px,3.8vw,52px);line-height:1.08;letter-spacing:-.028em}
.art-head .intro{max-width:none;margin-top:22px;font-size:19px}
.crumbs{display:flex;flex-wrap:wrap;gap:6px 10px;font-size:14px;color:var(--muted);margin-bottom:26px}
.crumbs a{color:var(--text);text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:.22em}
.crumbs a:hover{color:var(--ink)}
.art-body{padding-top:clamp(40px,5vw,64px)}
.prose{font-size:18px;line-height:1.65;color:var(--text)}
.prose .art-sec + .art-sec{margin-top:52px}
.prose h2{font-size:clamp(25px,2.3vw,31px);line-height:1.2;letter-spacing:-.02em;margin-bottom:16px}
.prose h3{font-size:20px;letter-spacing:-.012em;margin:28px 0 8px}
.prose p + p,.prose ul + p,.prose p + ul,.prose ol + p,.prose p + ol{margin-top:16px}
.prose ul,.prose ol{display:grid;gap:10px;padding-left:22px}
.prose ul{list-style:disc}
.prose ol{list-style:decimal}
.prose li::marker{color:var(--navy-3)}
.prose strong{color:var(--ink);font-weight:600}
.prose a{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em;text-decoration-color:var(--line-2)}
.prose a:hover{text-decoration-color:currentColor}
.prose .kader{margin-top:24px;padding:20px 24px;border-radius:12px;background:var(--light);color:var(--ink);font-size:17px}
.prose .tabel-rol{margin-top:20px;overflow-x:auto;border-radius:12px;box-shadow:0 0 0 1px var(--card-line)}
.prose table{width:100%;border-collapse:collapse;font-size:15.5px;line-height:1.45;min-width:560px}
.prose th,.prose td{text-align:left;vertical-align:top;padding:14px 16px;border-bottom:1px solid var(--card-line)}
.prose thead th{background:var(--light);color:var(--ink);font-weight:600;font-size:14.5px}
.prose tbody th{color:var(--ink);font-weight:600;width:24%}
.prose tr:last-child th,.prose tr:last-child td{border-bottom:0}
.prose td.wij{color:var(--ink);background:#FAFCFF}
.prose .art-vb{margin-top:24px;display:grid;gap:16px;padding:24px;border-radius:16px;background:var(--light)}
.prose .art-vb .fine{margin:0}
.art-h2{font-size:clamp(25px,2.3vw,31px);letter-spacing:-.02em;margin-bottom:24px}
.art-faq{padding-block:clamp(56px,6vw,88px)}
.art-lees{padding-block:clamp(48px,5vw,72px) 0}
.leesook{display:grid;gap:0;border-top:1px solid var(--ink)}
.leesook li{border-bottom:1px solid var(--line-2)}
.leesook a{display:flex;justify-content:space-between;gap:24px;padding:18px 0;color:var(--ink);font-weight:600;font-size:17px}
.leesook a::after{content:"→";color:var(--navy-3);transition:transform .35s var(--out)}
.leesook a:hover::after{transform:translateX(4px)}

@media (max-width:1100px){
  .mock-toast{left:0}
}
@media (max-width:900px){
  .hero33{padding-top:36px}
  .mock{padding:10px 0 0;min-height:0}
  .mock-toast{position:relative;left:auto;right:auto;bottom:auto;margin-top:14px;max-width:none}
  .mock-foot{position:static;margin-top:12px;flex-wrap:wrap}
  .sectors.two,.trust.two,.pkort{grid-template-columns:minmax(0,1fr)}
  .pkort{max-width:520px}
  .cta33-text,.cta33-actions,.c-main,.c-side{grid-column:1/-1}
  .c-side{margin-top:56px}
  .founding{flex-direction:column;gap:4px}
  .founding b{white-space:normal}
  .prose-l{font-size:17.5px}
  .ben-sec{margin-top:0;padding-top:8px}
}
@media (max-width:600px){
  .hero33 .t-hero{font-size:clamp(33px,9vw,40px)}
  .hero33 .t-hero-sub{font-size:clamp(30px,8.2vw,36px)}
  .h1-kicker{font-size:14px;margin-bottom:14px}
  .mock-foot .fine{margin-left:0;width:100%}
  .w.vb .w-log{height:420px}
  .prose{font-size:17px}
  .cta33{padding:28px 22px}
  .pcard{padding:30px 22px 24px}
  .belofte,.founding{padding:14px 16px;font-size:15.5px}
  .mock-chat{width:90%}
  .mock-nav span:nth-of-type(3){display:none}
}

/* artikels: voorbeeld, knop, tabel (v33a.1) */
.prose .art-vb .bubble-row .msg{font-size:15.5px;line-height:1.5}
.prose .art-vb .mailcard{box-shadow:0 0 0 1px var(--card-line),0 18px 40px -26px rgba(14,31,61,.28)}
.prose .art-vb .mail-body p.sum{margin-top:0}
.prose .art-vb .mail-head b{font-size:15px}
.prose .art-vb .vb-tussen{margin:6px 0 -4px;font-size:14.5px;font-weight:600;color:var(--muted)}
.prose .art-vb .fine{font-size:13.5px;color:var(--muted)}
.prose a.btn{color:#fff;text-decoration:none}
.prose .art-knop{margin-top:24px}
.prose .founding{margin-top:20px}
.prose h3 + .art-vb{margin-top:14px}
@media (max-width:700px){
  .prose{font-size:17px}
  .prose .art-vb{padding:16px;margin-inline:-4px}
  .prose .art-vb .bubble-row .msg{max-width:92%;font-size:15px}
  .prose .art-vb .mail-head{padding:14px 16px}
  .prose .art-vb .mail-head > div{min-width:0}
  .prose .art-vb .mail-body{padding:16px}
}
.rows-lees{margin-top:8px;font-size:16px;color:var(--text)}
.prose-l .rows-lees{font-size:16px}
@media (max-width:700px){
  .prose .tabel-rol{overflow:visible;box-shadow:none}
  .prose table{min-width:0;display:block}
  .prose thead{display:none}
  .prose tbody{display:grid;gap:12px}
  .prose tbody tr{display:block;padding:14px 16px;border-radius:12px;box-shadow:0 0 0 1px var(--card-line);background:#fff}
  .prose tbody th{display:block;width:auto;padding:0 0 8px;border:0;font-size:16px}
  .prose td{display:grid;grid-template-columns:40% 1fr;gap:12px;padding:6px 0;border:0;border-top:1px solid var(--card-line);font-size:15px}
  .prose td::before{content:attr(data-label);color:var(--muted);font-size:13.5px}
  .prose td.wij{background:transparent;font-weight:600}
}
.prose .tabel-rol + p{margin-top:20px}

/* v33a.2: compacte kaarten op mobiel (pictogram links), kortere artikelintro */
@media (max-width:600px){
  .bcard,.tcard,.trust.two .tcard{display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:14px;row-gap:4px;padding:18px 18px 20px;align-content:start}
  .bcard .bi,.tcard .ti{grid-row:1/span 2;width:40px;height:40px;margin:0}
  .bcard h3,.tcard h3,.trust.two .tcard h3{font-size:17px;line-height:1.3;align-self:center}
  .bcard p,.tcard p,.trust.two .tcard p{font-size:15px;margin-top:0;grid-column:2}
  .bcard h3 br,.tcard h3 br{display:none}
  .ben{gap:12px}
  .art-head .intro{font-size:17px;line-height:1.55}
}

/* v33a.3: samenstellingen met AI- in koppen niet afbreken */
.nw{white-space:nowrap}