/* Jouw AI portal · publieke site. Geen inline styles: de CSP staat alleen dit bestand toe. */
:root {
  --ink: #0d1828; --ink-2: #15233a; --ink-3: #0a1320; --line: #2a3b57;
  --accent: #4fb3ff; --accent-hover: #3ea2ee; --olive: #4d6c9c;
  --g24: #a5c35c; --g24-hover: #94b24c;  /* groen = 24x7 ICT en "in orde"; blauw (--accent, --ai) = Jouw AI */
  --ai: #4fb3ff; --ai-ink: #1f6fb0; --ai-soft: #f3f9ff;
  --text: #c6d0df; --text-hi: #eaf0f8; --muted: #97a5ba; --grey: #64748b;
  --paper: #ffffff; --paper-2: #f3f6fb; --paper-line: #d9e2ee; --paper-text: #2b3545;
  --display: Byker, Asap, sans-serif;
}
/* Byker zelf meeleveren: anders zien alleen bezoekers die het lettertype zelf hebben het, de rest krijgt Asap */
@font-face { font-family: Byker; src: url(/fonts/byker-regular.woff2) format("woff2"); font-weight: 100 599; font-style: normal; font-display: swap; }
@font-face { font-family: Byker; src: url(/fonts/byker-bold.woff2) format("woff2"); font-weight: 600 799; font-style: normal; font-display: swap; }
@font-face { font-family: Byker; src: url(/fonts/byker-black.woff2) format("woff2"); font-weight: 800 900; font-style: normal; font-display: swap; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; font-variant-ligatures: none; }  /* Byker koppelt anders "ck" tot één teken */
body { margin: 0; background: var(--ink); color: #fff; font-family: Asap, system-ui, sans-serif; font-size: 16px; }
a { color: var(--ai); } a:hover { color: #8fd0ff; }
h1, h2, h3, h4 { margin: 0; font-family: var(--display); font-weight: 700; letter-spacing: -.01em; line-height: 1.12; color: #fff; }
h1 { font-size: 54px; line-height: 1.1; }
h2 { font-size: 38px; line-height: 1.18; }
h3 { font-size: 20px; line-height: 1.3; }
p { margin: 0; line-height: 1.65; color: var(--text); }
.lead { font-size: 18px; line-height: 1.65; color: var(--text); }
.ai-word { color: var(--ai); text-shadow: 0 0 24px rgba(79,179,255,.55); }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 32px; }
.stack { display: flex; flex-direction: column; gap: 36px; }
.head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; max-width: 760px; margin: 0 auto; }
.head.wide { max-width: 820px; }
.actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.actions.left { justify-content: flex-start; }
.self-start { align-self: flex-start; }
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: none; }
.dot.sm { width: 8px; height: 8px; }
.dot.g { background: var(--accent); } .dot.ai { background: var(--ai); box-shadow: 0 0 12px var(--ai); }
.dot.off { background: var(--paper-line); } .dot.grey { background: var(--grey); }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* sections */
.sec { padding: 80px 0; position: relative; }
.sec.tint { background: var(--ink-2); }
.sec.light { background: var(--paper-2); }
.sec.light h2, .sec.light h3 { color: var(--ink); }
.sec.light p { color: var(--paper-text); }
/* de lichte sectie direct onder de hero schuift onder de schuine onderkant door */
.hero { z-index: 1; }
.sec.after-hero { margin-top: -46px; padding-top: 110px; }
.sec.flush-top { padding-top: 24px; }
.sec.no-top { padding-top: 0; }

/* tags */
.tag { position: relative; z-index: 0; display: inline-block; padding: 7px 20px; font-weight: 700; font-size: 12.5px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--accent); }
.tag::before { content: ""; position: absolute; top: 0; bottom: 0; left: 6px; right: 6px; transform: skewX(-18deg); background: rgba(79,179,255,.16); z-index: -1; }
.tag.ai { color: var(--ai); } .tag.ai::before { background: rgba(79,179,255,.14); }
.tag.onlight { color: var(--ink); } .tag.onlight::before { background: rgba(79,179,255,.22); }

/* buttons */
.btn { position: relative; z-index: 0; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 36px; font-weight: 700; font-size: 15px; letter-spacing: .6px; text-transform: uppercase; text-decoration: none; cursor: pointer; font-family: inherit; border: 0; background: none; transition: transform .15s; }
.btn:hover { transform: translateY(-1px); }
.btn::before { content: ""; position: absolute; top: 0; bottom: 0; left: 8px; right: 8px; transform: skewX(-18deg); z-index: -1; transition: background .15s; }
.btn.p, .btn.p:hover { color: #fff; } .btn.p::before { background: var(--accent); } .btn.p:hover::before { background: var(--accent-hover); }
.btn.o, .btn.o:hover { color: var(--accent); } .btn.o::before { border: 1.5px solid var(--accent); } .btn.o:hover::before { background: rgba(79,179,255,.12); }
.btn.w, .btn.w:hover { color: #fff; } .btn.w::before { border: 1.5px solid rgba(255,255,255,.55); } .btn.w:hover::before { border-color: #fff; }
.btn.od, .btn.od:hover { color: var(--ink); } .btn.od::before { border: 1.5px solid var(--ink); }
.btn.ai, .btn.ai:hover { color: var(--ink); } .btn.ai::before { background: var(--ai); box-shadow: 0 0 18px rgba(79,179,255,.45); }
.btn.sm { min-height: 42px; padding: 0 26px; font-size: 13px; }
.btn:focus-visible, .pill:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid var(--ai); outline-offset: 3px; }

/* badge logo */
.brand { display: flex; align-items: center; gap: 14px; text-decoration: none; color: #fff; }
.brand:hover { color: #fff; }
.badge { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 40px; color: var(--ink); font-family: var(--display); font-weight: 800; font-size: 15px; flex: none; }
.badge::before { content: ""; position: absolute; inset: 0 4px; background: var(--accent); transform: skewX(-18deg); }
.badge span { position: relative; }
.badge.sm { width: 40px; height: 26px; font-size: 10px; } .badge.sm::before { inset: 0 3px; }
.badge.md { width: 52px; height: 36px; font-size: 13px; }
.brand-name { font-family: var(--display); font-weight: 700; font-size: 21px; }
.brand-name b { color: var(--ai); text-shadow: 0 0 18px rgba(79,179,255,.6); font-weight: 700; }

/* header */
.top { position: sticky; top: 0; z-index: 5; background: rgba(13,24,40,.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--ink-2); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; min-height: 80px; padding-top: 8px; padding-bottom: 8px; }
.menu { display: flex; gap: 26px; align-items: center; flex-wrap: wrap; }
.menu a { color: var(--text-hi); text-decoration: none; font-weight: 600; font-size: 15px; }
.menu a:hover { color: #fff; }
.top-actions { display: flex; gap: 6px; align-items: center; }

/* hero */
.hero { position: relative; isolation: isolate; padding: 96px 0 136px; text-align: center; background: var(--ink); clip-path: polygon(0 0,100% 0,100% calc(100% - 46px),0 100%); overflow: hidden; }
.hero::before, .hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
/* de gloed schuift heen en weer (keyframes gloed); groter dan de hero, zodat er aan de randen geen donkere strook vrijkomt */
.hero::before { inset: -5%; }
.hero::before { background: radial-gradient(ellipse 40% 55% at 72% 40%, rgba(79,179,255,.30), rgba(79,179,255,0)), radial-gradient(ellipse 40% 55% at 22% 60%, rgba(165,195,92,.16), rgba(165,195,92,0)); }
.hero::after { background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 48px 48px; -webkit-mask-image: radial-gradient(ellipse 60% 60% at 50% 40%, #000 30%, transparent 100%); mask-image: radial-gradient(ellipse 60% 60% at 50% 40%, #000 30%, transparent 100%); }
.hero .wrap { position: relative; display: flex; flex-direction: column; align-items: center; gap: 24px; }
.hero h1 { max-width: 880px; }
.hero .lead { max-width: 680px; color: var(--text-hi); font-size: 19px; }
.prompt { position: relative; width: 100%; max-width: 780px; background: var(--ink-2); border: 1.5px solid rgba(79,179,255,.55); border-radius: 16px; padding: 18px 18px 14px; box-shadow: 0 0 0 8px rgba(79,179,255,.06), 0 0 40px rgba(79,179,255,.18), 0 30px 70px rgba(0,0,0,.5); text-align: left; margin: 8px 0 0; }
.prompt textarea { display: block; width: 100%; resize: none; background: transparent; border: 0; outline: 0; color: #fff; font: 500 18px/1.5 Asap, system-ui, sans-serif; min-height: 80px; }
.prompt textarea::placeholder { color: var(--muted); }
/* invoerveld in de groen-blauwe gloed van de chat (.gloed, zie closing CTA): de gloed vormt de rand */
.prompt-gloed { width: 100%; max-width: 784px; margin: 8px 0 0; }
.prompt-gloed .prompt { max-width: none; margin: 0; border-color: transparent; box-shadow: 0 30px 70px rgba(0,0,0,.5); animation: none; }
.prompt-foot { display: flex; justify-content: flex-end; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
.pills { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; max-width: 860px; }
.pill { display: inline-flex; align-items: center; gap: 10px; padding: 0 20px; min-height: 44px; border-radius: 999px; background: var(--ink-2); border: 1.5px solid var(--line); font-weight: 700; font-size: 14px; color: var(--text-hi); text-decoration: none; }
.pill:hover { border-color: var(--accent); color: #fff; }
.hero .actions { margin-top: 8px; }
.trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 36px; }
.trust span { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 14.5px; color: var(--text-hi); }
.trust span::before { content: ""; width: 9px; height: 9px; background: var(--accent); transform: skewX(-18deg); flex: none; }
.hero .trust { margin-top: 20px; }

/* chatballonnen (ook gebruikt in "Hoe het werkt") */
.bubble { max-width: 92%; padding: 12px 14px; font-size: 14px; line-height: 1.5; }
.bubble.me { align-self: flex-end; background: var(--accent); color: var(--ink); border-radius: 14px 14px 4px 14px; font-weight: 600; }
.browser-dots { display: flex; gap: 6px; }
.fake-btn { display: inline-block; background: var(--accent); color: #fff; font-weight: 700; font-size: 13px; border-radius: 6px; padding: 8px 16px; letter-spacing: .4px; text-transform: uppercase; flex: none; }
.fake-btn.sm { font-size: 12px; padding: 7px 12px; }

/* bouwdemo: één browservenster, tabbladen met portals uit verschillende branches, bouwpaneel rechts */
.demo { position: relative; display: flex; flex-direction: column; height: 640px; border-radius: 14px; overflow: hidden; background: #fff; color: var(--ink); font-size: 14px;
  border: 1px solid rgba(13,24,40,.16); box-shadow: 0 2px 6px rgba(13,24,40,.06), 0 30px 70px rgba(13,24,40,.18); }
.d-tabs { flex: none; display: flex; align-items: flex-end; gap: 2px; padding: 8px 10px 0 84px; background: #dfe1da; overflow-x: auto; scrollbar-width: none; position: relative; }
.d-tabs::-webkit-scrollbar { display: none; }
.d-tabs::before { content: ""; position: absolute; left: 14px; top: 15px; width: 52px; height: 12px;
  background: radial-gradient(circle 6px at 6px 6px, #ff5f57 98%, transparent) 0 0 / 20px 12px no-repeat, radial-gradient(circle 6px at 6px 6px, #febc2e 98%, transparent) 20px 0 / 20px 12px no-repeat, radial-gradient(circle 6px at 6px 6px, #28c840 98%, transparent) 40px 0 / 20px 12px no-repeat; }
.d-tab { position: relative; display: flex; align-items: center; gap: 8px; flex: 0 1 300px; min-width: 0; height: 36px; padding: 0 10px 0 14px; border-radius: 10px 10px 0 0;
  background: #fff; color: var(--ink); font: 500 12.5px Asap, system-ui, sans-serif; white-space: nowrap; }
.d-tab[hidden] { display: none; }
.d-tab-t { flex: 1; }
.d-tab-x { flex: none; width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; line-height: 1; color: #5f6368; }
.d-tab-x:hover { background: #e8eaed; }
.d-tab-new { flex: none; align-self: center; width: 26px; height: 26px; margin: 0 0 5px 4px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; line-height: 1; color: #5f6368; }
.d-tab-new:hover { background: rgba(0,0,0,.06); }
/* keuze per branche boven de demo */
.d-branche { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin-bottom: -14px; }
.d-branche-vraag { width: 100%; text-align: center; font-weight: 700; font-size: 15px; color: var(--ink); margin-bottom: 2px; }
.d-branche button { min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1.5px solid var(--paper-line); background: #fff; font: 600 14px Asap, system-ui, sans-serif;
  color: var(--paper-text); cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.d-branche button:hover { border-color: var(--accent); }
.d-branche button[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: #fff; box-shadow: 0 6px 18px rgba(13,24,40,.18); }
.d-branche button:focus-visible { outline: 2px solid var(--ai); outline-offset: 3px; }
.d-tab-t { overflow: hidden; text-overflow: ellipsis; }
.d-fav { flex: none; width: 16px; height: 16px; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; color: #fff; }
.f-vermeer { background: #1e3a5f; } .f-baars { background: #2b2d42; color: #e0b84c; } .f-noord { background: #0f766e; } .f-vandijk { background: #18181b; color: #ef4444; }
.d-bar { flex: none; position: relative; display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 14px; background: #fff; border-bottom: 1px solid #e4e5df; }
.d-nav { display: flex; gap: 6px; color: #5f6368; }
.d-nav svg { width: 28px; height: 28px; padding: 6px; border-radius: 50%; }
.d-nav .d-dim { opacity: .35; }
.d-url { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 8px 0 12px; border-radius: 999px; background: #f1f3f4; color: #202124; font-size: 13.5px; white-space: nowrap; overflow: hidden; }
.d-url > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.d-url svg { color: #5f6368; flex: none; }
.d-host { color: #202124; } .d-path { color: #5f6368; }
.d-star { width: 24px; height: 24px; padding: 4px; border-radius: 50%; }
.d-tools { display: flex; align-items: center; gap: 10px; color: #5f6368; }
.d-profile { display: inline-flex; width: 24px; height: 24px; border-radius: 50%; align-items: center; justify-content: center; background: #dadce0; color: #5f6368; }
.d-load { position: absolute; left: 0; bottom: -1px; height: 2px; width: 0; background: var(--ai); opacity: 0; }
.d-load.go { animation: w-load .9s ease-out; }
.d-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 0px; transition: grid-template-columns .45s cubic-bezier(.3,.7,.2,1); }
.demo.bouwen .d-body { grid-template-columns: minmax(0, 1fr) 330px; }
/* knop waarmee het bouwpaneel verschijnt; verdwijnt zolang het paneel open is */
.d-open { position: absolute; right: 14px; bottom: 14px; z-index: 4; display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 16px 0 14px; border: 0; border-radius: 999px;
  background: var(--ink); color: #fff; font: 600 12.5px Asap, system-ui, sans-serif; cursor: pointer; box-shadow: 0 10px 26px rgba(13,24,40,.3); transition: opacity .25s, transform .25s; }
.d-open::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ai); box-shadow: 0 0 0 3px rgba(79,179,255,.25); }
.d-open:hover { transform: translateY(-1px); }
.demo.bouwen .d-open { opacity: 0; pointer-events: none; }
.d-open.hint { animation: w-hint 1.3s ease-in-out 4; }
@keyframes w-hint { 50% { transform: translateY(-3px); box-shadow: 0 0 0 7px rgba(79,179,255,.25), 0 10px 26px rgba(13,24,40,.3); } }
.d-site { position: relative; min-width: 0; min-height: 0; overflow: hidden; }
.d-pane { height: 100%; display: flex; flex-direction: column; background: var(--pbg); color: var(--pink); font-family: var(--pfont); }
.d-pane[hidden] { display: none; }
.pp-dev { flex: none; background: #4fb3ff; color: #0d1828; text-align: center; font: 600 11.5px Asap, sans-serif; padding: 4px 10px; }
.pp-dev[hidden] { display: none; }
.pp-top { flex: none; display: flex; align-items: center; gap: 18px; height: 54px; padding: 0 18px; background: var(--ptop); color: var(--ptopink); border-bottom: 1px solid var(--pline); }
.pp-brand { display: inline-flex; align-items: center; gap: 9px; font-family: var(--pdisplay); font-weight: 700; font-size: 15.5px; white-space: nowrap; }
.pp-mark { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 28px; padding: 0 5px; border-radius: var(--pmarkr); background: var(--pacc); color: var(--pacctxt); font-size: 13px; font-weight: 800; letter-spacing: .02em; }
.pp-nav { display: flex; gap: 2px; flex: 1; font-size: 13px; font-weight: 500; overflow: hidden; }
.pp-nav span { padding: 6px 11px; border-radius: var(--pnavr); opacity: .78; white-space: nowrap; cursor: pointer; }
.pp-nav span:hover { opacity: 1; }
.pp-nav .on { opacity: 1; background: var(--pnavon); color: var(--pnavonink); font-weight: 600; }
.pp-user { margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 3px 6px 3px 3px; border-radius: 999px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.pp-user svg { opacity: .6; }
.pp-av { flex: none; display: inline-flex; width: 30px; height: 30px; border-radius: 50%; align-items: center; justify-content: center; font-size: 11px; font-weight: 700;
  background: var(--pavbg); color: var(--pavink); }
.pp-foot { margin-top: auto; padding-top: 10px; text-align: center; font-size: 11px; opacity: .5; }
.pp-page { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 14px; padding: 20px; transition: opacity .25s; }
.d-site.laden .pp-page { opacity: .3; }
.pp-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.sec .pp-head h3 { font-family: var(--pdisplay); font-size: 21px; letter-spacing: -.01em; color: var(--pink); }
.pp-sub { font-size: 12.5px; opacity: .7; }
.pp-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.pp-btn, .pp-ghost { cursor: pointer; }
.pp-btn { padding: 8px 14px; border-radius: var(--pbtnr); background: var(--pacc); color: var(--pacctxt); font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.pp-ghost { padding: 8px 12px; border-radius: var(--pbtnr); border: 1px solid var(--pline); background: var(--pcard); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.pp-card { background: var(--pcard); border: 1px solid var(--pline); border-radius: var(--pcardr); }
.pp-scroll { overflow-x: auto; }

/* Vermeer: navy en oranje, zakelijk */
.p-vermeer { --pbg: #f3f5f8; --pink: #13233a; --pfont: Asap, sans-serif; --pdisplay: Asap, sans-serif; --ptop: #1e3a5f; --ptopink: #fff; --pline: #dde3ea;
  --pacc: #f28c28; --pacctxt: #1e1a14; --pmarkr: 6px; --pnavr: 6px; --pnavon: rgba(255,255,255,.14); --pnavonink: #fff; --pavbg: #f28c28; --pavink: #1e1a14; --pbtnr: 6px; --pcard: #fff; --pcardr: 10px; }
.v-grid { width: 100%; border-collapse: collapse; font-size: 12.5px; min-width: 560px; }
.v-grid th { text-align: left; padding: 9px 10px; font-size: 11px; font-weight: 700; color: #5b6b80; text-transform: uppercase; letter-spacing: .05em; border-bottom: 1px solid #dde3ea; }
.v-grid thead th span { display: inline-flex; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; align-items: center; justify-content: center; margin-left: 2px; font-size: 11.5px; color: #13233a; }
.v-grid thead th.v-vandaag span { background: #1e3a5f; color: #fff; }
.v-grid td.v-vandaag { background: #f6f8fb; }
.v-grid tbody th { text-transform: none; letter-spacing: 0; font-size: 13px; color: #13233a; white-space: nowrap; }
.v-grid td { padding: 6px; border-bottom: 1px solid #edf0f4; vertical-align: top; width: 17%; }
.v-grid tr:last-child td, .v-grid tr:last-child th { border-bottom: 0; }
.v-av { display: inline-flex; width: 24px; height: 24px; margin-right: 8px; border-radius: 50%; align-items: center; justify-content: center; font-size: 11px; background: #e3eaf3; color: #1e3a5f; vertical-align: middle; }
.v-job { display: flex; flex-direction: column; gap: 1px; padding: 6px 8px; border-radius: 6px; background: #e8eef6; border-left: 3px solid #1e3a5f; line-height: 1.3; }
.v-job i { font-style: normal; font-size: 10.5px; font-weight: 600; color: #5b6b80; font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.v-job b { font-size: 12px; } .v-job span { font-size: 11.5px; color: #5b6b80; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 11.5px; color: #5b6b80; }
.v-legend span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.l-blauw::before { background: #1e3a5f; } .l-oranje::before { background: #f28c28; } .l-rood::before { background: #d64545; }
.v-warmtepomp, .v-zonnepanelen { background: #fff1e3; border-left-color: #f28c28; }
.v-storing, .v-lekkage { background: #fde8e8; border-left-color: #d64545; }
.v-reis { display: none; font-style: normal; font-size: 11px; color: #8a5a17; }
.p-vermeer.f-reis .v-reis { display: block; animation: w-in .4s ease both; }
.v-free { display: none; padding: 6px 8px; border-radius: 6px; border: 1.5px dashed #5fb37a; color: #2f7d4a; font-size: 12px; font-weight: 700; text-align: center; background: #effaf2; }
.p-vermeer.f-vrij .v-free { display: block; animation: w-in .4s ease both; }

/* Administratiekantoor Baars: donker leigrijs en goud, cijfers voorop */
.p-baars { --pbg: #f5f5f8; --pink: #1f2030; --pfont: Asap, sans-serif; --pdisplay: Asap, sans-serif; --ptop: #2b2d42; --ptopink: #fff; --pline: #e1e2ea;
  --pacc: #e0b84c; --pacctxt: #1f2030; --pmarkr: 8px; --pnavr: 8px; --pnavon: rgba(255,255,255,.14); --pnavonink: #fff; --pavbg: #e0b84c; --pavink: #1f2030; --pbtnr: 8px; --pcard: #fff; --pcardr: 12px; }
.b-kpi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.b-kpi > span { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 12px; background: #fff; border: 1px solid #e1e2ea; min-width: 0; }
.b-kpi small { font-size: 11px; font-weight: 600; color: #6b6d80; text-transform: uppercase; letter-spacing: .04em; }
.b-kpi b { font-size: 21px; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.b-kpi em { font-style: normal; font-size: 11.5px; color: #6b6d80; }
.b-plus { color: #2f7d4a !important; } .b-min { color: #b3261e !important; }
.b-telaat { display: none !important; border-color: #f0c2bf !important; background: #fff5f4 !important; }
.p-baars.f-telaat .b-kpi { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.p-baars.f-telaat .b-telaat { display: flex !important; animation: w-in .4s ease both; }
.b-chart svg { display: block; padding: 8px 10px 4px; }
.b-as { stroke: #e1e2ea; stroke-width: 1; }
.b-bar { fill: #c9cad6; } .b-bar-nu { fill: #e0b84c; }
.b-val { font: 600 12px Asap, sans-serif; fill: #1f2030; } .b-mnd { font: 600 11px Asap, sans-serif; fill: #6b6d80; text-transform: capitalize; }
.b-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 11px 14px; border-bottom: 1px solid #e1e2ea; font-size: 13px; }
.b-card-head span { font-size: 11.5px; color: #6b6d80; }
.b-list { list-style: none; margin: 0; padding: 0; }
.b-list li { display: flex; align-items: center; gap: 12px; padding: 9px 14px; border-bottom: 1px solid #eeeef3; font-size: 12.5px; }
.b-list li:last-child { border-bottom: 0; }
.b-nr { flex: none; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; color: #6b6d80; }
.b-wie { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.b-wie b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .b-wie span { font-size: 11.5px; color: #6b6d80; }
.b-bedrag { flex: none; font-weight: 700; font-variant-numeric: tabular-nums; }
.b-tag { flex: none; padding: 3px 9px; border-radius: 999px; background: #eeeef3; color: #4b4d5e; font-size: 11px; font-weight: 600; white-space: nowrap; }
.b-rood { background: #fde3e1; color: #b3261e; } .b-geel { background: #fbf0cc; color: #7a5a00; }
.b-list .b-rood { display: none; } .p-baars.f-telaat .b-list .b-rood { display: inline-block; animation: w-in .4s ease both; }
.b-btw { display: none; } .p-baars.f-btw .b-btw { display: inline-block; animation: w-in .4s ease both; }
.b-status { flex: none; width: 108px; text-align: center; padding: 3px 0; border-radius: 6px; background: #eeeef3; color: #4b4d5e; font-size: 11px; font-weight: 600; white-space: nowrap; }
.b-bezig { background: #e3ecfb; color: #1f4e9c; } .b-wacht { background: #fbf0cc; color: #7a5a00; } .b-klaar { background: #e2f3e6; color: #2f7d4a; }

/* Tandartspraktijk Noord: wit en teal, rustig */
.p-noord { --pbg: #f4fbfa; --pink: #0f2e2b; --pfont: "DM Sans", Asap, sans-serif; --pdisplay: "DM Sans", Asap, sans-serif; --ptop: #fff; --ptopink: #0f2e2b; --pline: #d7ebe8;
  --pacc: #0f766e; --pacctxt: #fff; --pmarkr: 10px; --pnavr: 8px; --pnavon: #e0f2ef; --pnavonink: #0f766e; --pavbg: #e0f2ef; --pavink: #0f766e; --pbtnr: 8px; --pcard: #fff; --pcardr: 12px; }
.n-legend { display: none; gap: 14px; flex-wrap: wrap; font-size: 12px; }
.p-noord.f-kleur .n-legend { display: flex; animation: w-in .4s ease both; }
.n-legend span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; background: var(--nc); }
.n-bakker { --nc: #0f766e; } .n-yilmaz { --nc: #7c3aed; } .n-smit { --nc: #e0911b; }
.n-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.n-list li { display: flex; align-items: center; gap: 14px; padding: 10px 14px; border-radius: 12px; background: #fff; border: 1px solid #d7ebe8; font-size: 13px; }
.p-noord.f-kleur .n-list li:not(.n-gap) { box-shadow: inset 4px 0 0 var(--nc); }
.n-tijd { flex: none; width: 44px; font-weight: 700; color: #0f766e; font-variant-numeric: tabular-nums; }
.n-pat { flex: none; width: 52px; display: inline-flex; justify-content: center; padding: 3px 0; border-radius: 999px; background: #eef7f6; font-weight: 700; font-size: 12px; }
.n-wat { flex: 1; min-width: 0; display: flex; flex-direction: column; } .n-wat span { font-size: 12px; color: #4b6b67; }
.n-stoel { flex: none; font-size: 12px; color: #4b6b67; }
.n-gap { display: none !important; border-style: dashed !important; background: #f0faf8 !important; color: #0f766e; font-weight: 600; }
.p-noord.f-gaten .n-gap { display: flex !important; animation: w-in .4s ease both; }
.n-plan { margin-left: auto; padding: 4px 10px; border-radius: 8px; background: #0f766e; color: #fff; font-size: 11.5px; }

/* Garage Van Dijk: zwart en rood, stoer */
.p-vandijk { --pbg: #f4f4f5; --pink: #18181b; --pfont: Asap, sans-serif; --pdisplay: "Barlow Condensed", Asap, sans-serif; --ptop: #18181b; --ptopink: #fff; --pline: #e4e4e7;
  --pacc: #dc2626; --pacctxt: #fff; --pmarkr: 4px; --pnavr: 4px; --pnavon: #dc2626; --pnavonink: #fff; --pavbg: #3f3f46; --pavink: #fff; --pbtnr: 4px; --pcard: #fff; --pcardr: 8px; }
.p-vandijk .pp-brand { font-size: 19px; text-transform: uppercase; letter-spacing: .03em; }
.p-vandijk .pp-head h3 { font-size: 26px; text-transform: uppercase; letter-spacing: .02em; }
.g-zoek { display: none; align-items: center; gap: 8px; max-width: 340px; padding: 0 12px; border-radius: 6px; border: 1.5px solid #d4d4d8; background: #fff; color: #71717a; }
.p-vandijk.f-zoek .g-zoek { display: flex; animation: w-in .4s ease both; }
.g-zoek:focus-within { border-color: #dc2626; }
.g-zoek input { border: 0; outline: 0; background: transparent; font: inherit; font-size: 13px; min-height: 36px; width: 100%; color: #18181b; }
.g-board { display: grid; grid-template-columns: repeat(3, minmax(160px, 1fr)); gap: 10px; overflow-x: auto; }
.g-col { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 8px; background: #e9e9ec; min-width: 0; }
.g-col-head { display: flex; align-items: center; gap: 6px; font-family: "Barlow Condensed", Asap, sans-serif; font-size: 15px; text-transform: uppercase; letter-spacing: .03em; }
.g-n { padding: 0 7px; border-radius: 999px; background: #18181b; color: #fff; font-size: 11px; font-family: Asap, sans-serif; }
.g-tot { display: none; margin-left: auto; font-family: Asap, sans-serif; font-size: 12px; font-weight: 700; color: #dc2626; text-transform: none; letter-spacing: 0; }
.p-vandijk.f-totaal .g-tot { display: inline; animation: w-in .4s ease both; }
.g-card { display: flex; flex-direction: column; gap: 2px; padding: 10px; border-radius: 6px; background: #fff; border: 1px solid #e4e4e7; font-size: 12.5px; }
.g-card[hidden] { display: none; }
.g-card span:not(.g-plate) { color: #52525b; }
.g-card em { font-style: normal; font-weight: 700; margin-top: 2px; }
.g-plate { align-self: flex-start; margin-bottom: 4px; padding: 2px 8px 2px 18px; border-radius: 3px; background: #f7c600 linear-gradient(90deg, #1f4fbf 0 12px, transparent 12px); border: 1px solid #1a1a1a;
  font: 700 12px/1.3 "Barlow Condensed", Asap, sans-serif; letter-spacing: .06em; color: #111; }

/* bouwpaneel */
.d-build { width: 330px; min-height: 0; display: flex; flex-direction: column; background: #fff; border-left: 1px solid #e4e5df; font-family: Asap, system-ui, sans-serif; visibility: hidden; transition: visibility 0s .45s; }
.demo.bouwen .d-build { visibility: visible; transition-delay: 0s; }
.d-close { flex: none; width: 28px; height: 28px; border: 0; border-radius: 50%; background: none; color: var(--grey); font: 400 20px/1 Asap, sans-serif; cursor: pointer; }
.d-close:hover { background: #f1f2ee; color: var(--ink); }
.d-build-head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--paper-line); }
.d-build-head b { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--ink); }
.d-build-head b::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ai); box-shadow: 0 0 0 3px rgba(79,179,255,.18); }
.d-versions { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 14px; border-bottom: 1px solid var(--paper-line); background: #fbfbf9; }
.d-vers { display: flex; flex-direction: column; gap: 3px; min-width: 0; font-size: 11.5px; color: var(--grey); }
.d-ver { display: flex; align-items: center; gap: 6px; min-width: 0; white-space: nowrap; }
.d-ver > span { overflow: hidden; text-overflow: ellipsis; }
.d-ver b { font-size: 9.5px; letter-spacing: .08em; color: var(--paper-text); }
.d-vdot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.d-vdot.test { background: #c9ccc2; }
.d-vdot.test.aan { background: var(--ai); box-shadow: 0 0 0 3px rgba(79,179,255,.2); }
.w-publish { flex: none; min-height: 34px; padding: 0 14px; border: 0; border-radius: 9px; background: var(--accent); cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--ink); transition: background .15s; }
.w-publish:hover:not(:disabled) { background: #3ea2ee; }
.w-publish:disabled { cursor: default; color: var(--grey); background: #e3e5dc; }
.w-messages { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 9px; padding: 14px; background: #fff; scroll-behavior: smooth; scrollbar-width: thin; }
.w-messages[hidden] { display: none; }
.w-msg { max-width: 92%; padding: 9px 12px; border-radius: 13px; font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; animation: w-in .3s ease both; }
.w-msg.user { align-self: flex-end; max-width: 84%; background: var(--accent); color: var(--ink); font-weight: 500; border-radius: 16px 16px 5px 16px; box-shadow: 0 2px 8px rgba(120,150,60,.18); white-space: pre-wrap; }
.w-msg.ai { align-self: flex-start; background: #fff; border: 1px solid var(--paper-line); box-shadow: 0 1px 2px rgba(13,24,40,.04); border-radius: 5px 16px 16px 16px; }
.w-msg.ai b { font-weight: 600; }
.w-msg a { color: var(--ai-ink); font-weight: 700; }
.w-msg.sys { align-self: center; max-width: 100%; background: #f1f2ee; border-radius: 999px; color: var(--grey); font-size: 11.5px; text-align: center; padding: 4px 11px; }
.w-steps { align-self: flex-start; max-width: 92%; padding: 4px 10px; border-radius: 999px; background: #f1f2ee; font-size: 11.5px; color: var(--grey); animation: w-in .3s ease both; }
.w-steps[open] { border-radius: 10px; padding: 6px 10px; }
.w-steps summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 6px; }
.w-steps summary::-webkit-details-marker { display: none; }
.w-steps summary::before { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform .15s; }
.w-steps[open] summary::before { transform: rotate(45deg); }
.w-steps div { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 2px 0 0 12px; }
.w-steps div::before { content: "✓ "; color: #4e6a1c; }
.w-working { align-self: flex-start; display: flex; align-items: center; gap: 7px; color: var(--grey); font-size: 12px; max-width: 100%; }
.w-working i { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--ai); animation: w-dot 1.2s infinite; }
.w-working i:nth-child(2) { animation-delay: .15s; } .w-working i:nth-child(3) { animation-delay: .3s; }
.w-working .w-now { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.w-composer { flex: none; display: flex; flex-direction: column; gap: 7px; padding: 10px 14px 12px; background: #fff; border-top: 1px solid var(--paper-line); }
.w-composer label { font-weight: 700; font-size: 11.5px; letter-spacing: .02em; color: var(--grey); }
.w-composer textarea { width: 100%; resize: none; border-radius: 13px; border: 1px solid var(--paper-line); padding: 9px 12px; font: inherit; font-size: 13px; line-height: 1.45; color: var(--ink); box-shadow: 0 2px 10px rgba(13,24,40,.06); transition: border-color .15s, box-shadow .15s; }
.w-composer textarea::placeholder { color: #9a9b92; }
.w-composer textarea:focus { outline: 0; border-color: var(--ai); box-shadow: 0 0 0 4px rgba(79,179,255,.15), 0 2px 10px rgba(13,24,40,.06); }
.w-composer textarea:disabled { background: #f3f4ef; }
.w-composer-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 11px; color: var(--grey); }
.w-send { flex: none; min-height: 34px; padding: 0 18px; border: 0; border-radius: 9px; background: var(--accent); cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--ink); transition: background .15s; }
.w-send:hover:not(:disabled) { background: #3ea2ee; }
.w-send:disabled { opacity: .5; cursor: default; }
.w-suggest { display: flex; flex-wrap: wrap; gap: 6px; }
.w-suggest[hidden] { display: none; }
.w-suggest button { min-height: 30px; padding: 0 11px; border-radius: 999px; border: 1.5px solid var(--paper-line); background: #fff; font: inherit; font-size: 12px; font-weight: 600; color: var(--ink); cursor: pointer; }
.w-suggest button:hover { border-color: var(--ai); }
.w-suggest button:disabled { opacity: .45; cursor: default; }
.d-cursor { position: absolute; left: 0; top: 0; z-index: 6; width: 24px; height: 24px; pointer-events: none; opacity: 0; transition: transform .5s cubic-bezier(.3,.7,.2,1), opacity .3s; filter: drop-shadow(0 2px 3px rgba(0,0,0,.35)); }
.d-cursor.aan { opacity: 1; }
.d-cursor svg { position: absolute; left: -3px; top: -1px; }
.d-cursor i { position: absolute; left: -14px; top: -14px; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--ai); opacity: 0; transform: scale(.3); }
.d-cursor.klik i { animation: w-klik .45s ease-out; }
.d-cursor.klik svg { animation: w-druk .2s ease-out; }
.w-composer textarea.tour { border-color: var(--ai); box-shadow: 0 0 0 4px rgba(79,179,255,.15), 0 2px 10px rgba(13,24,40,.06); }
@keyframes w-klik { 0% { opacity: .9; transform: scale(.3); } 100% { opacity: 0; transform: scale(1.4); } }
@keyframes w-druk { 0% { transform: scale(1); } 50% { transform: scale(.85); } 100% { transform: scale(1); } }
.a-toast { position: absolute; left: 14px; bottom: 14px; padding: 9px 14px; border-radius: 10px; background: var(--ink); color: #fff; font: 600 12.5px Asap, sans-serif; box-shadow: 0 12px 30px rgba(13,24,40,.3); animation: w-in .3s ease both; }
.a-toast[hidden] { display: none; }
@keyframes w-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@keyframes w-dot { 0%, 80%, 100% { transform: scale(.5); opacity: .4; } 40% { transform: scale(1); opacity: 1; } }
@keyframes w-load { 0% { width: 0; opacity: 1; } 80% { width: 85%; opacity: 1; } 100% { width: 100%; opacity: 0; } }
@media (max-width: 960px) {
  .demo { height: auto; }
  /* bouwpaneel schuift vanaf rechts over de portal heen */
  .d-body, .demo.bouwen .d-body { grid-template-columns: 1fr; position: relative; }
  .d-site { height: 470px; }
  .d-build { position: absolute; top: 0; right: 0; bottom: 0; z-index: 5; width: min(340px, 90%); height: auto; box-shadow: -12px 0 30px rgba(13,24,40,.18);
    transform: translateX(100%); transition: transform .4s cubic-bezier(.3,.7,.2,1), visibility 0s .4s; }
  .demo.bouwen .d-build { transform: none; transition: transform .4s cubic-bezier(.3,.7,.2,1); }
}
@media (max-width: 640px) {
  .d-tabs { padding-left: 10px; } .d-tabs::before { display: none; }
  .d-tab { min-width: 150px; }
  .d-nav, .d-tools, .d-star, .pp-nav, .pp-name, .pp-user svg, .pp-actions .pp-ghost, .d-tab-new, .v-legend { display: none; }
  .d-ver > span { display: none; }
  .pp-page { padding: 14px; }
  .n-stoel, .b-nr, .b-status { display: none; }
  .b-kpi, .p-baars.f-telaat .b-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .w-composer-foot span { display: none; }
  /* telefoon: compacter, tekst blijft 12 px */
  .d-tabs { padding-top: 4px; } .d-tab { height: 30px; font-size: 12px; }
  .d-bar { height: 36px; padding: 0 10px; } .d-url { height: 26px; font-size: 12px; }
  .d-site { height: 400px; }
  .pp-top { height: 46px; padding: 0 12px; gap: 10px; }
  .pp-brand { font-size: 14px; } .pp-mark { min-width: 24px; height: 24px; font-size: 11px; } .pp-av { width: 26px; height: 26px; font-size: 10px; }
  .pp-page { padding: 12px; gap: 10px; } .sec .pp-head h3 { font-size: 17px; } .p-vandijk .pp-head h3 { font-size: 20px; }
  .pp-btn, .pp-ghost { padding: 6px 10px; font-size: 12px; }
  .v-grid { min-width: 0; } .v-grid td { width: auto; } .v-grid .v-weg { display: none; }
  .v-job span { white-space: normal; }
  .b-kpi b { font-size: 18px; }
  .d-open { right: 10px; bottom: 10px; min-height: 34px; font-size: 12px; }
  .w-messages { padding: 10px; } .w-composer { padding: 8px 10px 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .w-msg, .w-steps, .a-toast, .d-load.go, .w-working i, .d-pane [class] { animation: none !important; }
}

/* grids and cards */
.g2, .g3, .g4 { display: grid; gap: 22px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.row { display: flex; flex-wrap: wrap; gap: 40px; align-items: center; }
.row > * { flex: 1 1 420px; min-width: 0; }
.row.top-align { align-items: flex-start; }
.col { display: flex; flex-direction: column; gap: 16px; }
.card { position: relative; display: flex; flex-direction: column; gap: 14px; background: var(--ink-2); border: 1px solid var(--line); border-radius: 16px; padding: 32px 28px; transition: transform .2s, border-color .2s, box-shadow .2s; }
.card:hover { transform: translateY(-4px); border-color: var(--accent); box-shadow: 0 18px 40px rgba(0,0,0,.35); }
.card.focus { border: 1.5px solid var(--ai); box-shadow: 0 0 14px rgba(79,179,255,.20); }
.card.x { border: 2px solid var(--accent); box-shadow: 0 22px 50px rgba(0,0,0,.35); background: var(--ink-2); }
.card.white { background: #fff; border-color: var(--paper-line); }
.card.white h3 { color: var(--ink); } .card.white p { color: var(--paper-text); }
.card.white:hover { border-color: var(--accent); box-shadow: 0 18px 40px rgba(13,24,40,.08); }
.ico { width: 54px; height: 54px; border-radius: 14px; background: rgba(79,179,255,.10); border: 1.5px solid rgba(79,179,255,.55); box-shadow: 0 0 14px rgba(79,179,255,.18); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.ico.g { background: rgba(79,179,255,.10); border-color: rgba(79,179,255,.5); box-shadow: none; }
.num { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--accent); color: var(--ink); font-weight: 800; font-size: 17px; flex: none; }
.num.ai { background: var(--ai); box-shadow: 0 0 10px rgba(79,179,255,.5); }
.cat { font-size: 12.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--accent); }
.cat.muted { color: var(--muted); } .cat.olive { color: var(--olive); }
/* stap 2: klein chatvenster; de groen-blauwe lijn (.gloed.klein) loopt alleen om de invoerregel */
/* drie stappen: onderin elke kaart een klein venster van dezelfde vorm en hoogte */
.step-chat { margin-top: auto; min-height: 214px; display: flex; flex-direction: column; background: var(--ink); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; font-size: 13px; }
.step-chat-kop { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-bottom: 1px solid var(--line); color: #fff; font-weight: 700; font-size: 12.5px; }
.step-chat-kop::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ai); box-shadow: 0 0 0 3px rgba(79,179,255,.2); }
.step-chat-body { flex: 1; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.step-chat-kop.g::before { background: var(--accent); box-shadow: 0 0 0 3px rgba(79,179,255,.2); }
.step-veld { display: flex; align-items: center; border: 1px solid var(--line); border-radius: 9px; padding: 8px 11px; color: var(--muted); }
.step-veld b { color: #fff; font-weight: 600; } .step-veld small { margin-left: auto; font-size: 11.5px; }
.step-taken { list-style: none; margin: 2px 0 0; padding: 0; display: grid; gap: 6px; }
.step-taken li { display: flex; align-items: center; gap: 8px; color: var(--text); }
.step-taken li::before { content: ""; flex: none; width: 12px; height: 6px; margin: -3px 2px 0 2px; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); }
.step-taken li.klaar { color: var(--accent); font-weight: 700; }
.step-versie { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 9px; }
.step-versie.test { background: rgba(79,179,255,.08); box-shadow: inset 0 0 0 1px rgba(79,179,255,.35); }
.step-versie > span:first-child { min-width: 0; } .step-versie b { display: block; color: #fff; font-weight: 600; } .step-versie small { color: var(--muted); font-size: 11.5px; }
.step-versie > :last-child { margin-left: auto; flex: none; }
.step-live { color: var(--accent); font-weight: 800; font-size: 11px; letter-spacing: .6px; text-transform: uppercase; }
.step-chat .passed { margin-top: auto; }
.step-chat .bubble { max-width: 88%; font-size: 13px; padding: 7px 11px; line-height: 1.45; }
.step-chat .bubble.me { border-radius: 12px 12px 4px 12px; }
.step-chat .bubble.ai { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; background: var(--ink-2); color: var(--ai); font-weight: 700; border-radius: 12px 12px 12px 4px; }
.step-dots { display: inline-flex; gap: 4px; }
.step-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--ai); animation: w-dot 1.2s infinite; }
.step-dots i:nth-child(2) { animation-delay: .15s; } .step-dots i:nth-child(3) { animation-delay: .3s; }
@media (prefers-reduced-motion: reduce) { .step-dots i { animation: none; } }
.gloed.step-chat-in { margin: 0 12px 12px; border-radius: 11px; }
.step-chat-in span { display: block; padding: 8px 11px; border-radius: 9.5px; background: var(--ink); color: var(--muted); font-size: 12.5px; }
.passed { display: inline-flex; align-items: center; gap: 8px; color: var(--accent); font-weight: 700; }

/* comparison */
.tbl-box { overflow-x: auto; border: 1px solid var(--line); border-radius: 16px; background: var(--ink); }
.tbl { width: 100%; min-width: 720px; border-collapse: separate; border-spacing: 0; font-size: 15px; }
.tbl th, .tbl td { padding: 16px 20px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); line-height: 1.55; color: var(--text); }
.tbl th { font-size: 15px; color: var(--muted); font-weight: 700; }
.tbl th:first-child { width: 26%; }
.tbl th.us { color: #fff; background: var(--ink-2); border-top: 2px solid var(--accent); }
.tbl th.us span.us-name { display: inline-flex; align-items: center; gap: 10px; }
.tbl tbody th { font-size: 15px; color: #fff; }
.tbl td.us { background: var(--ink-2); font-weight: 600; color: #fff; }
.tbl td.them { color: var(--muted); }
.tbl tr:last-child th, .tbl tr:last-child td { border-bottom: 0; }
.note { font-size: 13px; color: var(--muted); line-height: 1.5; text-align: center; }

/* vergelijking (modern) */
.cmp { max-width: 1040px; margin: 0 auto; width: 100%; }
.cmp-tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 15px; }
.cmp-tbl th, .cmp-tbl td { padding: 18px 22px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--paper-line); }
.cmp-tbl thead th { border-bottom: 0; padding-top: 30px; padding-bottom: 20px; vertical-align: bottom; font-size: 14px; font-weight: 700; color: var(--grey); }
.cmp-tbl tbody tr:last-child th, .cmp-tbl tbody tr:last-child td { border-bottom: 0; }
.cmp-tbl tbody th { width: 28%; font-weight: 700; color: var(--ink); }
.cmp-tbl .us { position: relative; width: 40%; background: #fff; border-left: 2px solid var(--accent); border-right: 2px solid var(--accent); }
.cmp-tbl thead .us { border-top: 2px solid var(--accent); border-radius: 18px 18px 0 0; box-shadow: 0 -10px 30px rgba(13,24,40,.05); }
.cmp-tbl tbody tr:last-child .us { border-bottom: 2px solid var(--accent); border-radius: 0 0 18px 18px; box-shadow: 0 18px 40px rgba(13,24,40,.08); }
.cmp-tbl .them { color: var(--grey); }
.c-flag { position: absolute; top: -13px; left: 22px; padding: 4px 12px; border-radius: 999px; background: var(--accent); color: var(--ink); font-size: 11.5px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; }
.c-topic { display: flex; align-items: center; gap: 12px; }
.c-tico { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 11px; background: #fff; border: 1px solid var(--paper-line); color: var(--olive-ink, #56632a); }
.c-cell { display: flex; align-items: flex-start; gap: 12px; }
.c-cell b { display: block; font-weight: 700; color: var(--ink); line-height: 1.35; }
.c-cell small { display: block; font-size: 13.5px; color: var(--paper-text); line-height: 1.45; margin-top: 2px; }
.them .c-cell > span:last-child { line-height: 1.45; padding-top: 1px; }
.c-ico { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; margin-top: 1px; }
.c-ico.ja { background: var(--accent); color: var(--ink); }
.c-ico.nee { background: #f1e3e1; color: #a2392c; }
.c-ico.half { background: #ecece6; color: var(--grey); }
@media (max-width: 760px) {
  .cmp-tbl, .cmp-tbl tbody, .cmp-tbl tr, .cmp-tbl th, .cmp-tbl td { display: block; width: auto; }
  .cmp-tbl thead { display: none; }
  .cmp-tbl tbody { display: flex; flex-direction: column; gap: 12px; }
  .cmp-tbl tr { background: #fff; border: 1px solid var(--paper-line); border-radius: 16px; overflow: hidden; }
  .cmp-tbl tbody th { width: auto; padding: 16px 16px 8px; border: 0; }
  .cmp-tbl td { padding: 10px 16px; border: 0; }
  .cmp-tbl .us, .cmp-tbl tbody tr:last-child .us { width: auto; margin: 0 10px; border: 1.5px solid var(--accent); border-radius: 12px; box-shadow: none; background: #f7faef; }
  .cmp-tbl td::before { content: attr(data-label); display: block; margin-bottom: 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--grey); }
  .cmp-tbl .them { padding-bottom: 16px; }
}

/* kop: wisselend woord. Het oude woord schuift omhoog weg, het nieuwe komt van onderen; de breedte schuift mee
   zodat "met AI" niet verspringt. Zonder JavaScript staat het eerste woord gewoon stil. */
.h-wissel { display: inline-block; position: relative; vertical-align: bottom; overflow: hidden; height: 1.12em; line-height: 1.12;
  transition: width .45s cubic-bezier(.4,0,.2,1); text-align: left; color: var(--accent); }
.h-wissel span { position: absolute; left: 0; top: 0; white-space: nowrap; transform: translateY(110%); opacity: 0;
  transition: transform .5s cubic-bezier(.3,.8,.3,1), opacity .35s; }
.h-wissel span.aan { transform: translateY(0); opacity: 1; }
.h-wissel span.weg { transform: translateY(-110%); opacity: 0; }
.h-wissel.stil { width: auto !important; }
.h-wissel.stil span { position: static; transition: none; }
.h-wissel.stil span:not(.aan) { display: none; }
@media (prefers-reduced-motion: reduce) { .h-wissel span { transition: none; } }
.h-regel2 { white-space: nowrap; }
.hero h1 { max-width: none; font-size: clamp(34px, 4.3vw, 56px); }
@media (min-width: 1000px) { .hero h1 { white-space: nowrap; } }
@media (max-width: 640px) { .h-regel2 { display: block; } .hero h1 { font-size: min(34px, 9.4vw); } }

/* voorbeelden: portals, websites, apps */
.vb-tabs { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; margin-bottom: -10px; }
.vb-tabs button { min-height: 44px; padding: 0 22px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--ink-2); color: var(--text-hi);
  font: 700 14.5px Asap, system-ui, sans-serif; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.vb-tabs button:hover { border-color: var(--accent); }
.vb-tabs button[aria-selected="true"] { border-color: var(--ai); color: #fff; box-shadow: 0 0 16px rgba(79,179,255,.30); }
.vb-tabs button:focus-visible { outline: 2px solid var(--ai); outline-offset: 3px; }
.vb-groepen { display: flex; flex-direction: column; gap: 22px; }
.vb-groep[hidden] { display: none; }
.vb-label { align-self: flex-start; margin-top: auto; padding: 4px 11px; border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--ai); background: rgba(79,179,255,.10); border: 1px solid rgba(79,179,255,.3); }

/* lastige koppeling */
.koppel { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 32px; align-items: center; padding: 36px; border-radius: 20px; background: var(--ink); color: #fff;
  box-shadow: 0 30px 70px rgba(13,24,40,.18); position: relative; overflow: hidden; isolation: isolate; }
.koppel::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 50% 80% at 100% 0%, rgba(79,179,255,.22), transparent), radial-gradient(ellipse 40% 70% at 0% 100%, rgba(165,195,92,.16), transparent); }
.koppel-tekst { display: flex; flex-direction: column; gap: 14px; }
.koppel .tag { align-self: flex-start; }
.sec.light .koppel h3 { color: #fff; font-size: 26px; line-height: 1.2; }
.sec.light .koppel p { color: var(--text); }
.sec.light .koppel .tag.ai { color: var(--ai); }
.koppel-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.koppel-tags span { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); font-size: 13px; font-weight: 600; color: var(--text-hi); }
.koppel-tags svg { color: var(--ai); }
.koppel-actie { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 24px 18px; border-radius: 16px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.10); }
.koppel-jaar { font-family: var(--display); font-size: 54px; line-height: 1; color: var(--accent); }
.koppel-jaar-txt { font-size: 14px; color: var(--text); margin-bottom: 8px; }
.koppel-mail { font-size: 13.5px; color: var(--accent); font-weight: 600; text-decoration: none; }
.koppel-mail:hover { color: #c3dc86; }
@media (max-width: 860px) { .koppel { grid-template-columns: 1fr; padding: 28px 22px; } .sec.light .koppel h3 { font-size: 22px; } }

/* checks */
.checks { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.check { display: flex; align-items: flex-start; gap: 11px; line-height: 1.5; font-size: 15.5px; color: var(--text); }
.check svg { flex: none; margin-top: 2px; }
.sec.light .check, .card.white .check { color: var(--paper-text); }

/* versions */
.versions { gap: 12px; padding: 28px; }
.version { display: flex; align-items: center; gap: 14px; background: var(--ink); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.version.now { border: 1.5px solid var(--ai); box-shadow: 0 0 14px rgba(79,179,255,.2); }
.version.old { opacity: .85; }
.version > div { flex: 1; min-width: 0; }
.version strong { display: block; font-weight: 700; color: #fff; }
.version small { font-size: 13px; color: var(--muted); }
.version .live { font-size: 13px; font-weight: 700; color: var(--accent); letter-spacing: .6px; text-transform: uppercase; }
.version .undo { font-size: 13px; font-weight: 700; color: var(--text); text-decoration: underline; }

/* own practice */
.chip { display: inline-flex; align-items: center; gap: 8px; background: rgba(79,179,255,.14); border: 1px solid rgba(79,179,255,.5); border-radius: 999px; padding: 6px 14px 6px 8px; align-self: flex-start; font-weight: 700; font-size: 13px; letter-spacing: .4px; color: var(--ink); }
.chip .dot { width: 16px; height: 16px; background: var(--accent); }
.stats { gap: 16px; }
.stat { gap: 6px; padding: 26px; }
.card.white.stat { background: var(--paper); }
.stat b { font-family: var(--display); font-size: 40px; font-weight: 700; line-height: 1; color: var(--ink); }
.stat b.olive { color: var(--olive); }
.stat b.groen { color: var(--accent); }
.stat span { color: var(--paper-text); font-size: 14.5px; line-height: 1.5; }

/* pricing */
.plans { max-width: 980px; margin: 0 auto; width: 100%; }
.plan { gap: 22px; padding: 36px 32px; }
.plan-head { display: flex; flex-direction: column; gap: 6px; }
.plan-head p { font-size: 15px; }
.price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.price b { font-family: var(--display); font-size: 40px; line-height: 1; color: var(--ink); font-weight: 700; }
.card.x .price b { color: #fff; }
.price span { font-size: 14px; color: var(--grey); }
.card.x .price span { color: var(--muted); }
.plan-flag { position: absolute; top: -13px; left: 28px; background: var(--accent); color: var(--ink); padding: 5px 12px; border-radius: 6px; }
.plan-contact { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.plan-contact a:not(.btn), .faq-intro a, .footer-about a { color: var(--accent); font-weight: 700; text-decoration: none; }

/* faq */
.faq-intro { display: flex; flex-direction: column; gap: 12px; }
.row > .faq-intro { flex: 0 1 360px; }
.faq-list { display: flex; flex-direction: column; }
.row > .faq-list { flex: 1 1 560px; }
.faq { border-top: 1px solid var(--line); padding: 20px 0; }
.faq summary { cursor: pointer; font-weight: 700; font-size: 17px; list-style: none; display: flex; justify-content: space-between; gap: 16px; align-items: center; color: #fff; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { flex: none; transition: transform .2s; }
.faq[open] summary svg { transform: rotate(45deg); }
.faq p { margin-top: 10px; font-size: 15.5px; }

/* closing CTA */
/* Gloed in groen en blauw om het contactblok, zoals om het invoerveld van Jouw AI in het portal: dunne rand die
   rondloopt (rondje in 3,5 s) met een zachte, ademende waas. Stil bij "minder beweging". */
@property --gloed-hoek { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes gloed-draai { to { --gloed-hoek: 360deg; } }
@keyframes gloed-adem { 50% { opacity: calc(var(--gloed-waas) * .45); } }
.gloed { position: relative; border-radius: 18px; padding: 2px; isolation: isolate; --gloed-hoek: 0deg; --gloed-sterkte: .9; --gloed-waas: .5; }
.gloed::before, .gloed::after { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; pointer-events: none;
  background: conic-gradient(from var(--gloed-js, var(--gloed-hoek)), #a5c35c 0deg, #4fb3ff 110deg, #4fb3ff 180deg, #4fb3ff 290deg, #a5c35c 360deg);
  animation: gloed-draai 3.5s linear infinite; }
.gloed::before { opacity: var(--gloed-sterkte); }
.gloed::after { filter: blur(18px); opacity: var(--gloed-waas); animation: gloed-draai 3.5s linear infinite, gloed-adem 2.5s ease-in-out infinite; }
/* de gloedrand draait altijd rond, ook bij "minder beweging" (bewuste keuze 29 okt 2026) */
.gloed .cta-box { border-color: transparent; }
/* kleine variant om het chatveld van de demo: dezelfde gloed, kleinere waas, dooft bij typen */
.gloed.klein { border-radius: 14px; padding: 1.5px; --gloed-waas: .35; }
.gloed.klein::after { filter: blur(10px); }
.gloed.klein::before, .gloed.klein::after { transition: opacity .5s; }
.gloed.klein:focus-within::before, .gloed.klein:focus-within::after { opacity: 0; animation-play-state: paused; }
.w-composer .gloed textarea { display: block; box-sizing: border-box; margin: 0; border-color: transparent; box-shadow: none; }
.w-composer .gloed textarea:focus, .w-composer .gloed textarea.tour { border-color: var(--ai); box-shadow: none; }
.cta-box { position: relative; overflow: hidden; isolation: isolate; background: var(--ink-2); border: 1px solid var(--line); border-radius: 16px; padding: 64px 48px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 22px; }
.cta-box::before { content: ""; position: absolute; left: 50%; top: -220px; width: 900px; height: 500px; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(79,179,255,.30), rgba(79,179,255,0)); pointer-events: none; z-index: -1; }
.cta-box h2 { max-width: 760px; font-size: 44px; }
.cta-box .lead { max-width: 600px; }
.cta-box .trust { margin-top: 6px; }

/* footer */
.site-foot { background: var(--ink-3); border-top: 1px solid var(--ink-2); padding: 56px 0 32px; color: var(--text); }
.site-foot .g3 { gap: 40px; }
.foot-col { display: flex; flex-direction: column; gap: 10px; font-size: 15px; }
.foot-col.about { gap: 14px; }
.foot-col h4 { font-size: 17px; }
.foot-col a { color: var(--text); text-decoration: none; }
.foot-col a:hover { color: #fff; }
.foot-brand { display: flex; align-items: center; gap: 12px; color: #fff; font-family: var(--display); font-weight: 700; font-size: 20px; }
.foot-brand b { color: var(--ai); font-weight: 700; }
.footer-about { font-size: 15px; }
.foot-legal { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; border-top: 1px solid var(--ink-2); padding-top: 24px; font-size: 13px; color: var(--muted); }

/* lichte secties: alles wat standaard voor donker is, omzetten */
:root { --olive-ink: #1f4f8f; }
.sec.light .lead { color: var(--paper-text); }
.sec.light .tag { color: var(--ink); } .sec.light .tag::before { background: rgba(79,179,255,.22); }
.sec.light .tag.ai { color: var(--ai-ink); } .sec.light .tag.ai::before { background: rgba(79,179,255,.14); }
.sec.light .card:not(.x) { background: var(--paper); border-color: var(--paper-line); }
.sec.light .card:not(.x) h3 { color: var(--ink); }
.sec.light .card:not(.x) p { color: var(--paper-text); }
.sec.light .card:not(.x):hover { border-color: var(--accent); box-shadow: 0 18px 40px rgba(13,24,40,.08); }
.sec.light .note { color: var(--grey); }
.sec.light .note a, .sec.light .faq-intro a { color: var(--olive-ink); }
.sec.light .tbl-box { background: var(--paper); border-color: var(--paper-line); }
.sec.light .tbl th, .sec.light .tbl td { border-bottom-color: var(--paper-line); color: var(--paper-text); }
.sec.light .tbl thead th { color: var(--grey); }
.sec.light .tbl tbody th { color: var(--ink); }
.sec.light .tbl th.us { color: var(--ink); background: #eef3e1; }
.sec.light .tbl td.us { color: var(--ink); background: #eef3e1; }
.sec.light .tbl td.them { color: var(--grey); }
.sec.light .faq { border-top-color: var(--paper-line); }
.sec.light .faq summary { color: var(--ink); }
.sec.light .faq p { color: var(--paper-text); }

/* tekstpagina's (voorwaarden) */
.prose { max-width: 760px; }
.prose h1 { font-size: 44px; margin-bottom: 20px; }
.prose h2 { font-size: 24px; margin: 36px 0 10px; }
.prose p { margin-bottom: 12px; }
.prose a { color: var(--accent); }
.prose code { color: #fff; font-size: .92em; }
.cookie-tabel { width: 100%; border-collapse: collapse; font-size: 15px; margin: 8px 0 16px; }
.cookie-tabel th, .cookie-tabel td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.cookie-tabel th { color: var(--muted); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.prose .bijgewerkt { color: var(--muted); margin-top: 28px; }
@media (max-width: 640px) { .cookie-tabel thead { display: none; } .cookie-tabel tr { display: block; padding: 8px 0; border-bottom: 1px solid var(--line); } .cookie-tabel td { display: block; border: 0; padding: 3px 0; } }

/* cookiemelding rechtsonder (cookies.js): informatief zolang er alleen noodzakelijke cookies zijn, anders een keuze */
.cookie-melding { position: fixed; right: 20px; bottom: 20px; z-index: 50; width: min(440px, calc(100% - 32px)); background: var(--ink-2); border: 1px solid var(--line); border-radius: 14px;
  padding: 16px 18px; box-shadow: 0 20px 50px rgba(0,0,0,.5); display: flex; flex-direction: column; gap: 12px; font-size: 14.5px; line-height: 1.55; color: var(--text); }
.cookie-melding p { margin: 0; }
.cookie-melding a { color: var(--accent); font-weight: 700; }
.cookie-knoppen { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.cookie-link { background: none; border: 0; padding: 0; color: var(--muted); font-family: inherit; font-weight: 600; font-size: 13.5px; text-decoration: underline; cursor: pointer; }
.cookie-link:hover { color: #fff; }
.cookie-titel { color: #fff; }
.cookie-klein { color: var(--muted); font-size: 13.5px; }
.cookie-keuzes { display: grid; gap: 12px; border-top: 1px solid var(--line); padding-top: 12px; }
.cookie-keuze { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; cursor: pointer; }
.cookie-keuze b { display: block; color: #fff; } .cookie-keuze small { color: var(--muted); font-size: 13px; }
.cookie-schakel { appearance: none; -webkit-appearance: none; flex: none; position: relative; width: 40px; height: 22px; margin: 3px 0 0; border-radius: 999px; background: var(--line); cursor: pointer; transition: background .15s; }
.cookie-schakel::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: left .15s; }
.cookie-schakel:checked { background: var(--accent); } .cookie-schakel:checked::after { left: 21px; }
.cookie-schakel:disabled { opacity: .55; cursor: default; }
.cookie-schakel:focus-visible, .cookie-link:focus-visible { outline: 2px solid var(--ai); outline-offset: 3px; }
@media (max-width: 640px) { .cookie-melding { right: 16px; bottom: 16px; } }

@media (max-width: 900px) {
  .g3, .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  h1 { font-size: 40px; }
}
@media (max-width: 640px) {
  .g2, .g3, .g4 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  h1 { font-size: 34px; } h2, .cta-box h2 { font-size: 28px; } .prose h1 { font-size: 34px; }
  .wrap { padding: 0 16px; }
  .hide-m { display: none; }
  .sec { padding: 56px 0; }
  .hero { padding: 64px 0 104px; }
  .tbl th, .tbl td { padding: 12px; }
  .top .wrap { min-height: 64px; }
  .brand-name { font-size: 18px; }
  .top-actions .btn.w { display: none; }
  .btn { padding: 0 28px; }
  .cta-box { padding: 48px 20px; }
  .plan { padding: 32px 22px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .card, .faq summary svg { transition: none; }
}

/* voorbeeld gekozen */
.pill.on { border-color: var(--ai); box-shadow: 0 0 16px rgba(79,179,255,.30); color: #fff; }

/* beweging (rustig; site.js zet de klassen alleen als er geen voorkeur voor minder beweging is) */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
  .hero::before { animation: gloed 18s ease-in-out infinite alternate; }
  .version.now .dot.ai { animation: puls 1.8s ease-in-out infinite; }
  .prompt { animation: rand 6s ease-in-out infinite; }
}
@keyframes gloed { from { transform: translate3d(-2%, -1%, 0) scale(1); } to { transform: translate3d(2%, 2%, 0) scale(1.06); } }
@keyframes puls { 50% { opacity: .35; } }
@keyframes rand { 50% { box-shadow: 0 0 0 8px rgba(79,179,255,.09), 0 0 54px rgba(79,179,255,.26), 0 30px 70px rgba(0,0,0,.5); } }

/* logo (PNG van 238 x 47) */
.logo { display: block; height: 34px; width: auto; }
.foot-logo { height: 64px; }
.logo-sm { display: block; height: 26px; width: auto; }
@media (max-width: 640px) { .top .logo { height: 28px; } }

/* --- Demo's in een strakke premium stijl (licht, één accentkleur, Inter, fijne lijnen, zachte schaduwen, rustige
   beweging). Seven en Noord met de navigatie links, Vermeer en Van Dijk met een balk bovenaan. Ligt over de
   bestaande demo-opmaak heen; de interactie (f-klassen uit site.js) blijft zo werken. --- */
.d-pane { --pfont: Inter, system-ui, -apple-system, "Segoe UI", sans-serif; --pdisplay: Inter, system-ui, sans-serif; --pbg: #fafaf9; --pink: #18181b;
  --pline: #ececea; --pcard: #fff; --pcardr: 12px; --pbtnr: 8px; --pnavr: 8px; --pmarkr: 8px; --ptop: #fff; --ptopink: #18181b; --pease: cubic-bezier(.22,1,.36,1);
  -webkit-font-smoothing: antialiased; letter-spacing: -.005em; }
.p-vermeer { --pacc: #ea7a1a; --pacctxt: #fff; --pnavon: #fff3e8; --pnavonink: #c2610f; --pavbg: #fff3e8; --pavink: #c2610f; --psoft: rgba(234,122,26,.22); }
.p-baars { --pacc: #4f46e5; --pacctxt: #fff; --pnavon: #eef0ff; --pnavonink: #4338ca; --pavbg: #eef0ff; --pavink: #4338ca; --psoft: rgba(79,70,229,.22); }
.p-noord { --pacc: #0f766e; --pacctxt: #fff; --pnavon: #e6f4f2; --pnavonink: #0f766e; --pavbg: #e6f4f2; --pavink: #0f766e; --psoft: rgba(15,118,110,.22); }
.p-vandijk { --pacc: #dc2626; --pacctxt: #fff; --pnavon: #fef2f2; --pnavonink: #b91c1c; --pavbg: #f4f4f5; --pavink: #18181b; --psoft: rgba(220,38,38,.2); }
.p-vandijk .pp-brand { font-size: 15.5px; text-transform: none; letter-spacing: -.01em; }
.d-pane .pp-top { height: 56px; border-bottom: 1px solid var(--pline); box-shadow: 0 1px 0 rgba(24,24,27,.02); }
.d-pane .pp-brand { font-weight: 600; font-size: 14.5px; letter-spacing: -.01em; }
.d-pane .pp-mark { background: #18181b; color: #fff; font-weight: 700; font-size: 12px; min-width: 26px; height: 26px; }
.d-pane .pp-nav span { opacity: 1; color: #71717a; font-weight: 500; transition: background .2s var(--pease), color .2s var(--pease); }
.d-pane .pp-nav span:hover { color: #18181b; background: #f4f4f3; }
.d-pane .pp-nav .on, .d-pane .pp-nav .on:hover { background: var(--pnavon); color: var(--pnavonink); font-weight: 600; }
.d-pane .pp-user { font-weight: 500; color: #3f3f46; }
.d-pane .pp-av { background: var(--pavbg); color: var(--pavink); font-weight: 600; }
.d-pane .pp-page { padding: 24px; gap: 16px; }
.d-pane .pp-head h3 { font-weight: 600; letter-spacing: -.015em; }
.d-pane .pp-sub { color: #71717a; opacity: 1; }
.d-pane .pp-btn { font-weight: 600; box-shadow: 0 1px 2px rgba(24,24,27,.08); transition: transform .2s var(--pease), box-shadow .2s var(--pease); }
.d-pane .pp-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px -6px var(--psoft); }
.d-pane .pp-ghost { font-weight: 500; color: #3f3f46; border-color: var(--pline); }
.d-pane .pp-foot { opacity: .45; }
/* kaarten: fijne lijn, zachte schaduw, minimale lift met een lichte gloed in de accentkleur */
.d-pane .pp-card, .d-pane .b-kpi > span, .d-pane .g-card {
  border: 1px solid var(--pline); border-radius: 12px; background: #fff;
  box-shadow: 0 1px 2px rgba(24,24,27,.03), 0 8px 24px -14px rgba(24,24,27,.10); transition: transform .3s var(--pease), box-shadow .3s var(--pease); }
.d-pane .pp-card:hover, .d-pane .b-kpi > span:hover, .d-pane .g-card:hover { transform: translateY(-3px); box-shadow: 0 1px 2px rgba(24,24,27,.03), 0 14px 30px -14px var(--psoft); }
.d-pane .b-kpi b { font-size: 24px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.d-pane .b-kpi small, .d-pane .b-card-head span { color: #71717a; }
.d-pane .b-bar { fill: var(--pacc); opacity: .9; }

/* navigatie links (Seven en Noord): de bovenbalk wordt een smalle kolom */
.p-baars:not([hidden]), .p-noord:not([hidden]) { display: grid; grid-template-columns: 184px minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
.p-baars .pp-dev, .p-noord .pp-dev { grid-column: 1 / -1; }
.p-baars .pp-top, .p-noord .pp-top { grid-column: 1; grid-row: 2; height: auto; flex-direction: column; align-items: stretch; gap: 4px; padding: 16px 10px 12px;
  border-bottom: 0; border-right: 1px solid var(--pline); box-shadow: none; overflow: hidden; }
.p-baars .pp-brand, .p-noord .pp-brand { padding: 2px 8px 14px; font-size: 13px; white-space: normal; line-height: 1.25; }
.p-baars .pp-nav, .p-noord .pp-nav { flex: none; flex-direction: column; gap: 2px; }
.p-baars .pp-nav span, .p-noord .pp-nav span { padding: 7px 10px; }
.p-baars .pp-user, .p-noord .pp-user { margin: auto 0 0; padding: 12px 6px 2px; border-top: 1px solid var(--pline); border-radius: 0; }
.p-baars .pp-user svg, .p-noord .pp-user svg { display: none; }
.p-baars .pp-page, .p-noord .pp-page { grid-column: 2; grid-row: 2; }

/* beweging: kaarten komen gespreid binnen (70 ms na elkaar), staafjes groeien op; alles binnen 600 ms */
@keyframes pp-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes pp-groei { from { transform: scaleY(0); } }
.d-pane:not([hidden]) .pp-page > * { animation: pp-in .45s var(--pease) both; }
.d-pane:not([hidden]) .pp-page > :nth-child(2) { animation-delay: 70ms; } .d-pane:not([hidden]) .pp-page > :nth-child(3) { animation-delay: 140ms; }
.d-pane:not([hidden]) .pp-page > :nth-child(4) { animation-delay: 210ms; } .d-pane:not([hidden]) .pp-page > :nth-child(5) { animation-delay: 280ms; }
.d-pane:not([hidden]) .pp-page > :nth-child(n+6) { animation-delay: 350ms; }
.d-pane:not([hidden]) .b-bar { transform-box: fill-box; transform-origin: 50% 100%; animation: pp-groei .55s var(--pease) both; }
.d-pane:not([hidden]) .b-bar:nth-of-type(2) { animation-delay: 60ms; } .d-pane:not([hidden]) .b-bar:nth-of-type(3) { animation-delay: 120ms; }
.d-pane:not([hidden]) .b-bar:nth-of-type(4) { animation-delay: 180ms; } .d-pane:not([hidden]) .b-bar:nth-of-type(5) { animation-delay: 240ms; }
.d-pane:not([hidden]) .b-bar:nth-of-type(6) { animation-delay: 300ms; }
@media (prefers-reduced-motion: reduce) {
  .d-pane:not([hidden]) .pp-page > *, .d-pane:not([hidden]) .b-bar { animation: none; }
  .d-pane .pp-card, .d-pane .b-kpi > span, .d-pane .g-card, .d-pane .pp-btn { transition: none; }
}
.p-vandijk .pp-head h3 { text-transform: none; letter-spacing: -.015em; font-size: 22px; }
.p-vandijk .g-col { background: #f4f4f3; border: 1px solid var(--pline); }

/* merk in de zijbalk: korte naam groot, soort bedrijf klein eronder, zodat het in de smalle kolom past */
.pp-naam { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.pp-naam b { font-weight: 600; font-size: 14px; }
.pp-naam small { font-size: 11px; font-weight: 500; color: #71717a; letter-spacing: 0; }
.p-baars .pp-brand, .p-noord .pp-brand { align-items: center; }

/* Prijs: wat telt mee en wat niet (code wel, data niet) */
.telt { max-width: 980px; width: 100%; margin: 0 auto; display: flex; flex-direction: column; gap: 22px; scroll-margin-top: 100px; }
.telt-head { display: flex; flex-direction: column; gap: 8px; text-align: center; align-items: center; }
.telt-head h3 { font-size: 24px; }
.telt-head p { max-width: 62ch; }
.telt-kol { display: flex; flex-direction: column; gap: 14px; padding: 28px; border-radius: 16px; min-width: 0; }
.telt-kol.ja { background: var(--ink-2); border: 2px solid var(--accent); }
.telt-kol.nee { background: transparent; border: 1px solid var(--line); }
.telt-kop { display: flex; flex-direction: column; gap: 4px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.telt-label { font-size: 12px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; }
.telt-kol.ja .telt-label { color: var(--accent); } .telt-kol.nee .telt-label { color: var(--muted); }
.telt-kop h4 { font-family: var(--display); font-size: 26px; line-height: 1.15; color: #fff; margin: 0; }
.telt-lijst { list-style: none; margin: 0; padding: 0; }
.telt-rij { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.telt-rij:last-child { border-bottom: 0; }
.telt-rij svg { display: block; }
.telt-wat { line-height: 1.4; color: #fff; font-size: 15.5px; }
.telt-wat small { display: block; color: var(--muted); font-size: 13px; margin-top: 2px; }
.telt-pil { font-size: 13px; font-weight: 700; letter-spacing: .3px; padding: 6px 12px; border-radius: 999px; white-space: nowrap; }
.telt-pil.ja { background: var(--accent); color: var(--ink); }
.telt-pil.nee { border: 1px solid var(--line); color: var(--muted); }
.telt-uitleg { font-size: 14px; color: var(--muted); }
.telt-kol.nee .telt-uitleg { color: #fff; font-weight: 600; font-size: 15px; }
.check a { color: var(--accent); font-weight: 700; text-decoration: none; white-space: nowrap; }

/* Hero: twee routes. "Bouw het zelf" (blauw, de AI) en "Laat ons je adviseren" (groen, het team van 24x7). */
.modus { display: inline-flex; gap: 6px; padding: 6px 10px; margin-bottom: -8px; background: rgba(26,27,23,.72); border: 1.5px solid var(--line); border-radius: 14px; }
.modus-tab { position: relative; z-index: 0; display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; padding: 0 24px; font: 700 13px/1.15 Asap, system-ui, sans-serif; letter-spacing: .6px; text-transform: uppercase; color: var(--text); background: none; border: 0; cursor: pointer; transition: color .15s; }
.modus-tab::before { content: ""; position: absolute; top: 0; bottom: 0; left: 6px; right: 6px; transform: skewX(-18deg); z-index: -1; border: 1.5px solid transparent; transition: background .15s, border-color .15s, box-shadow .15s; }
.modus-tab svg { flex: none; opacity: .75; }
.modus-tab:hover { color: #fff; }
.modus-tab:hover::before { border-color: rgba(255,255,255,.25); }
.modus-tab:focus-visible { outline: 2px solid var(--ai); outline-offset: 3px; }
.modus-tab.zelf[aria-selected="true"] { color: #fff; }
.modus-tab.zelf[aria-selected="true"]::before { background: rgba(79,179,255,.18); border-color: var(--ai); box-shadow: 0 0 18px rgba(79,179,255,.30); }
.modus-tab.zelf[aria-selected="true"] svg { color: var(--ai); opacity: 1; }
.modus-tab.advies[aria-selected="true"] { color: #fff; }
.modus-tab.advies[aria-selected="true"]::before { background: rgba(165,195,92,.18); border-color: var(--g24); box-shadow: 0 0 18px rgba(165,195,92,.28); }
.modus-tab.advies[aria-selected="true"] svg { color: var(--accent); opacity: 1; }
.modus-paneel[hidden], .pills[hidden] { display: none; }
.modus-paneel:not([hidden]) { animation: modus-in .25s ease-out both; }
@keyframes modus-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* adviesformulier: eerst alleen de vraag; naam en contact schuiven open zodra iemand begint */
.advies-velden { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .3s ease; }
.advies-velden.dicht { grid-template-rows: 0fr; }
.advies-velden-in { min-height: 0; overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.advies-velden:not(.dicht) .advies-velden-in { padding-top: 12px; }
.advies-form .veld input { display: block; width: 100%; min-height: 44px; padding: 0 14px; background: var(--ink-3); border: 1.5px solid var(--line); border-radius: 10px; color: #fff; font: 500 15px/1.3 Asap, system-ui, sans-serif; outline: 0; transition: border-color .15s; }
.advies-form .veld input::placeholder { color: var(--muted); }
.advies-form .veld input:focus { border-color: var(--accent); }
.advies-form .honing { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.advies-foot { justify-content: flex-end; margin-top: 12px; }
.advies-privacy { margin-top: 8px; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.advies-privacy a { color: var(--muted); text-decoration: underline; }
.advies-privacy a:hover { color: #fff; }
.advies-form textarea:focus::placeholder { color: var(--grey); }
@media (prefers-reduced-motion: reduce) { .advies-velden { transition: none; } .modus-paneel:not([hidden]) { animation: none; } }
@media (max-width: 640px) {
  .modus { display: flex; width: 100%; max-width: 440px; padding: 6px; }
  .modus-tab { flex: 1 1 0; padding: 6px 12px; font-size: 12px; text-align: center; }
  .modus-tab svg { display: none; }
  .advies-velden-in { grid-template-columns: 1fr; }
  .advies-foot .btn { width: 100%; }
}
.advies-kop { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--accent); }
#pills-advies .pill:hover { border-color: var(--accent); }
#pills-advies .pill.on { border-color: var(--g24); box-shadow: 0 0 16px rgba(165,195,92,.28); }
.advies-form .veld select { display: block; width: 100%; min-height: 44px; padding: 0 14px; background: var(--ink-3); border: 1.5px solid var(--line); border-radius: 10px; color: #fff; font: 500 15px/1.3 Asap, system-ui, sans-serif; outline: 0; }
.advies-form .veld select:invalid { color: var(--muted); }
.advies-form .veld select:focus { border-color: var(--accent); }

/* Contactkanalen onderaan: Teams (Calendly), mail (formulier) en bellen */
.kanalen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; width: 100%; max-width: 760px; margin-top: 4px; }
.kanaal { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--ink-3); border: 1.5px solid var(--line); border-radius: 12px; text-align: left; text-decoration: none; color: var(--text-hi); transition: border-color .15s, transform .15s; }
.kanaal:hover { border-color: var(--accent); color: #fff; transform: translateY(-1px); }
.kanaal svg { flex: none; color: var(--accent); }
.kanaal.teams svg { color: var(--ai); }
.kanaal span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kanaal b { font-size: 14.5px; line-height: 1.25; color: #fff; }
.kanaal small { font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere; }
.hero .kanalen { margin-top: 8px; }
@media (max-width: 760px) { .kanalen { grid-template-columns: 1fr 1fr; } }
@media (max-width: 420px) { .kanalen { grid-template-columns: 1fr; } }
.kanalen { margin-left: auto; margin-right: auto; }
@media (max-width: 900px) { .kanalen { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 680px) { .kanalen { grid-template-columns: 1fr; max-width: 420px; } }

/* Versturen van de contactformulieren: foutmelding en bedankt */
.contact-fout { margin-top: 10px; padding: 10px 14px; background: rgba(229,96,80,.12); border: 1.5px solid rgba(229,96,80,.6); border-radius: 10px; font-size: 14px; line-height: 1.45; color: #ffd9d3; }
.contact-fout[hidden], .contact-klaar[hidden] { display: none; }
.contact-form button[type="submit"][disabled] { opacity: .6; cursor: progress; }
.contact-klaar { display: flex; gap: 14px; align-items: flex-start; padding: 22px; background: var(--ink-2); border: 1.5px solid var(--accent); border-radius: 16px; text-align: left; color: var(--text-hi); outline: 0; animation: modus-in .25s ease-out both; }
.contact-klaar > svg { flex: none; color: var(--accent); }
.contact-klaar b { display: block; font-size: 17px; color: #fff; margin-bottom: 4px; }
.contact-klaar p { font-size: 15px; line-height: 1.5; }
.contact-klaar a { color: var(--accent); font-weight: 700; }
.contact-klaar .btn { margin-top: 14px; }

/* Venster "Mail ons" */
.mail-dialoog { width: min(620px, calc(100% - 32px)); max-height: calc(100% - 32px); padding: 0; margin: auto; background: var(--ink-2); border: 1.5px solid var(--line); border-radius: 16px; color: var(--text-hi); box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.mail-dialoog::backdrop { background: rgba(10,10,8,.7); backdrop-filter: blur(3px); }
.mail-dialoog[open] { animation: modus-in .2s ease-out both; }
.mail-dialoog form, .mail-dialoog .contact-klaar { padding: 22px; }
.mail-dialoog .contact-klaar { border: 0; }
.mail-kop { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.mail-kop h2 { font-size: 22px; line-height: 1.25; color: #fff; }
.mail-sluit { flex: none; display: grid; place-items: center; width: 40px; height: 40px; margin: -6px -6px 0 0; background: none; border: 0; border-radius: 10px; color: var(--muted); cursor: pointer; }
.mail-sluit:hover { color: #fff; background: var(--ink-3); }
.mail-velden .breed { grid-column: 1 / -1; }
.mail-dialoog textarea { display: block; width: 100%; resize: vertical; min-height: 120px; padding: 12px 14px; background: var(--ink-3); border: 1.5px solid var(--line); border-radius: 10px; color: #fff; font: 500 15px/1.5 Asap, system-ui, sans-serif; outline: 0; }
.mail-dialoog textarea::placeholder { color: var(--muted); }
.mail-dialoog textarea:focus { border-color: var(--accent); }
.mail-voet { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 14px; }
.mail-voet .advies-privacy { flex: 1 1 260px; margin: 0; }
@media (max-width: 640px) { .mail-velden { grid-template-columns: 1fr; } .mail-voet .btn { width: 100%; } }

/* Groen = 24x7 ICT en "in orde": statussen, vinkjes, vertrouwen, het accentwoord in de kop en de 24x7-blokken
   (.z24: praktijk, aanspreekpunt, koppel, footer). Al het andere accent is blauw (--accent, --ai). */
.h-wissel, .step-taken li.klaar, .step-live, .passed, .version .live, .koppel-jaar, .footer-about a, li.z24 span b { color: var(--g24); }
.c-ico.ja, .chip .dot, .trust span::before, .koppel .btn.p::before { background: var(--g24); }
.step-taken li::before { border-color: var(--g24); }
.koppel .btn.p { color: var(--ink); }
.z24 { --accent: var(--g24); --accent-hover: var(--g24-hover); }
.z24 .chip { background: rgba(165,195,92,.18); border-color: rgba(165,195,92,.6); }
.z24 .btn.od { color: var(--ink); }
.sec.light .tbl th.us, .sec.light .tbl td.us { background: #eaf3ff; }
.sec.light .cat.olive { color: var(--ai-ink); }
.num.ai { box-shadow: none; }
.door24 { display: inline-flex; align-items: center; gap: 12px; margin-top: 18px; font-size: 13px; color: var(--muted); text-decoration: none; }
.door24:hover span { color: var(--g24); }
.door24 img { height: 30px; width: auto; }

/* Rustige stijl (handboek): */
/* meer ruimte, grotere en strakkere koppen, kaarten als fijne lijnvlakken */
.sec { padding: 128px 0; }
.sec + .sec { border-top: 1px solid rgba(255,255,255,.05); }
.sec.light + .sec, .sec + .sec.light { border-top: 0; }
h1 { font-size: 64px; line-height: 1.02; letter-spacing: -.03em; }
h2 { font-size: 48px; line-height: 1.06; letter-spacing: -.025em; }
h3 { letter-spacing: -.01em; }
.head { gap: 18px; max-width: 820px; }
.head + * { margin-top: 24px; }
.lead { font-size: 19.5px; line-height: 1.6; }
.top { background: rgba(13,24,40,.78); border-bottom-color: rgba(255,255,255,.06); }
.top .wrap { min-height: 72px; }
.card { background: rgba(255,255,255,.015); border-color: rgba(255,255,255,.08); border-radius: 22px; padding: 40px 34px; box-shadow: none;
  transition: border-color .3s, transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .3s; }
.card:hover { border-color: rgba(79,179,255,.35); box-shadow: 0 30px 60px -30px rgba(79,179,255,.25); transform: translateY(-3px); }
.sec.light { background: #fff; }
.sec.light .card, .card.white { background: #fff; border-color: #e3e9f2; box-shadow: none; }
.sec.light .card:hover, .card.white:hover { border-color: #bcd9f3; box-shadow: 0 30px 60px -34px rgba(13,24,40,.25); }
.tag { font-size: 11.5px; letter-spacing: 1.6px; }
.trust { gap: 14px 44px; }
.trust span { font-weight: 600; color: #c6d0df; }
.site-foot { border-top: 1px solid rgba(255,255,255,.06); }
@media (max-width: 760px) {
  .sec { padding: 88px 0; } h1 { font-size: 40px; } h2 { font-size: 32px; } .card { padding: 30px 24px; }
}

/* ===== Huisstijl Jouw AI (29 okt 2026, goedgekeurd concept v2): donkere bovenbalk en hero, secties om en om wit / lichtblauw / navy,
   ballonnetjes uit het logo, groen exact #a5c35c. Ligt bewust als laatste blok over de opmaak hierboven heen. ===== */
:root {
  --navy: #0a1a33;
  --wit: #ffffff; --vlak: #f4f7fb; --vlak-2: #eaf1f9;
  --text: #3a4659; --text-hi: #1b2a40; --muted: #5a6a80; --line: #dbe3ee;
  --accent: #1f78d1; --accent-hover: #1765b4;      /* blauw voor knoppen, links en tekst: 4,7:1 op wit */
  --ai: #3da9ff;                                     /* helder logoblauw: alleen gloed, stippen en randen */
  --ai-ink: #1a6cc0;
  --g24-ink: #a5c35c;                                /* groen als tekst: 4,8:1 op wit; --g24 blijft voor vlakken */
}
body { background: var(--wit); color: var(--navy); }
h1, h2, h3, h4 { color: var(--navy); }
p, .lead { color: var(--text); }
a { color: var(--accent); } a:hover { color: var(--accent-hover); }
.ai-word { color: var(--ai-ink); text-shadow: none; }

/* kopbalk wit */
.top { background: rgba(255,255,255,.92); border-bottom: 1px solid var(--line); box-shadow: 0 1px 0 rgba(10,26,51,.02), 0 8px 24px -18px rgba(10,26,51,.25); }
.menu a { color: var(--text-hi); } .menu a:hover { color: var(--accent); }
.btn.w, .btn.w:hover { color: var(--navy); } .btn.w::before { border-color: rgba(10,26,51,.35); } .btn.w:hover::before { border-color: var(--navy); }
.btn.p, .btn.p:hover { color: #fff; }
.btn.ai, .btn.ai:hover { color: #fff; } .btn.ai::before { background: var(--accent); box-shadow: 0 8px 22px -8px rgba(31,120,209,.6); }
.btn.o::before { border-color: var(--accent); } .btn.o:hover::before { background: rgba(31,120,209,.08); }

/* hero: wit met een zachte blauwe en groene waas, geen raster */
.hero { background: linear-gradient(180deg, #f5f9ff 0%, #ffffff 70%); }
.hero::before { background: radial-gradient(ellipse 40% 55% at 72% 40%, rgba(61,169,255,.20), rgba(61,169,255,0)), radial-gradient(ellipse 40% 55% at 22% 60%, rgba(165,195,92,.18), rgba(165,195,92,0)); }
.hero::after { display: none; }
.hero .lead { color: var(--text); }
.prompt { background: #fff; border-color: rgba(31,120,209,.45); box-shadow: 0 0 0 8px rgba(61,169,255,.08), 0 24px 60px -24px rgba(10,26,51,.30); }
.prompt-gloed .prompt { box-shadow: 0 24px 60px -24px rgba(10,26,51,.30); }
.prompt textarea { color: var(--navy); }
.prompt textarea::placeholder { color: var(--muted); }
@keyframes rand { 50% { box-shadow: 0 0 0 8px rgba(61,169,255,.12), 0 24px 60px -24px rgba(10,26,51,.30); } }
.pill { background: #fff; border-color: var(--line); color: var(--text-hi); }
.pill:hover { border-color: var(--accent); color: var(--navy); }
.pill.on { color: var(--navy); border-color: var(--accent); box-shadow: 0 0 0 3px rgba(31,120,209,.12); }
.trust span { color: var(--text-hi); }
.modus { background: #fff; border-color: var(--line); box-shadow: 0 10px 30px -20px rgba(10,26,51,.3); }
.modus-tab { color: var(--text); }
.modus-tab:hover, .modus-tab.zelf[aria-selected="true"], .modus-tab.advies[aria-selected="true"] { color: var(--navy); }
.modus-tab:hover::before { border-color: var(--line); }
.modus-tab.zelf[aria-selected="true"]::before { background: rgba(61,169,255,.12); border-color: var(--accent); box-shadow: none; }
.modus-tab.zelf[aria-selected="true"] svg { color: var(--accent); }
.modus-tab.advies[aria-selected="true"]::before { background: rgba(165,195,92,.18); border-color: var(--g24-ink); box-shadow: none; }
.modus-tab.advies[aria-selected="true"] svg { color: var(--g24-ink); }
.advies-kop { color: var(--accent); }
.advies-form .veld input, .advies-form .veld select { background: #fff; border-color: var(--line); color: var(--navy); }
.advies-privacy a:hover { color: var(--navy); }
.kanaal { background: #fff; border-color: var(--line); color: var(--text-hi); }
.kanaal:hover { color: var(--navy); }
.kanaal b { color: var(--navy); }
.kanaal.teams svg { color: var(--accent); }

/* secties: om en om wit en lichtgrijs-blauw, zodat er toch ritme blijft */
.sec, .sec.light { background: #fff; }
.sec.light.blauw { background: #edf4fc; }
.sec + .sec { border-top: 0; }
.tag, .tag.ai { color: var(--ai-ink); } .tag::before, .tag.ai::before { background: rgba(61,169,255,.16); }
.cat { color: var(--accent); }
.card, .card.x { background: #fff; border-color: var(--line); }
.card:hover { border-color: rgba(31,120,209,.45); box-shadow: 0 30px 60px -34px rgba(10,26,51,.30); }
.card.x { border: 2px solid var(--accent); box-shadow: 0 30px 60px -30px rgba(31,120,209,.35); }
.card h3, .card.x .price b { color: var(--navy); }
.card.x .price span { color: var(--muted); }
.ico, .ico.g { background: rgba(61,169,255,.08); border-color: rgba(31,120,209,.35); box-shadow: none; }
.num, .num.ai { background: var(--accent); color: #fff; }
.check { color: var(--text); }
.check a { color: var(--accent); }
.bubble.me { color: #fff; }

/* stappen: kleine vensters licht */
.step-chat { background: #fff; border-color: var(--line); box-shadow: 0 10px 30px -22px rgba(10,26,51,.35); }
.step-chat-kop { color: var(--navy); border-bottom-color: var(--line); }
.step-veld { border-color: var(--line); }
.step-veld b, .step-versie b { color: var(--navy); }
.step-chat .bubble.ai { background: var(--vlak-2); color: var(--ai-ink); }
.step-chat-in span { background: #fff; }
.step-versie.test { background: rgba(61,169,255,.08); box-shadow: inset 0 0 0 1px rgba(31,120,209,.3); }

/* voorbeelden */
.vb-tabs button { background: #fff; border-color: var(--line); color: var(--text-hi); }
.vb-tabs button[aria-selected="true"] { color: var(--navy); border-color: var(--accent); box-shadow: 0 0 0 3px rgba(31,120,209,.12); }
.vb-label { color: var(--ai-ink); background: rgba(61,169,255,.10); border-color: rgba(31,120,209,.3); }

/* versies en prijs */
.version { background: #fff; border-color: var(--line); }
.version strong { color: var(--navy); }
.version .undo { color: var(--text-hi); }
.telt-kol.ja { background: #fff; }
.telt-kop h4, .telt-wat, .telt-kol.nee .telt-uitleg { color: var(--navy); }
.telt-pil.ja { background: var(--g24); color: var(--navy); }
.c-flag, .plan-flag { color: #fff; }
.c-ico.ja { color: var(--navy); }

/* de koppeling-kaart blijft het enige donkere blok in de pagina: een bewust contrastmoment */
.koppel { background: var(--navy); }

/* faq en afsluiter */
.faq { border-top-color: var(--line); }
.faq summary { color: var(--navy); }
.cta-box { background: #fff; border-color: var(--line); }
.cta-box::before { background: radial-gradient(closest-side, rgba(61,169,255,.16), rgba(61,169,255,0)); }

/* groen als tekst een tint dieper */
.h-wissel, .step-taken li.klaar, .step-live, .passed, .version .live, li.z24 span b { color: var(--g24-ink); }
.step-taken li::before { border-color: var(--g24-ink); }
.z24 .cat, .z24 .tag { color: var(--g24-ink); }
.z24 .btn.p, .z24 .btn.p:hover { color: var(--navy); }

/* formulieren, dialoog en cookiemelding licht */
.contact-klaar { background: #fff; color: var(--text); }
.contact-klaar b { color: var(--navy); }
.contact-fout { color: #8f2a1d; }
.mail-dialoog { background: #fff; border-color: var(--line); color: var(--text); box-shadow: 0 30px 80px rgba(10,26,51,.25); }
.mail-dialoog::backdrop { background: rgba(10,26,51,.45); }
.mail-kop h2 { color: var(--navy); }
.mail-sluit:hover { color: var(--navy); background: var(--vlak); }
.mail-dialoog textarea { background: #fff; border-color: var(--line); color: var(--navy); }
.cookie-melding { background: #fff; border-color: var(--line); color: var(--text); box-shadow: 0 20px 50px rgba(10,26,51,.18); }
.cookie-titel, .cookie-keuze b { color: var(--navy); }
.cookie-link:hover { color: var(--navy); }
.prose code { color: var(--navy); }

/* footer blijft donker navy, met de eigen tokens terug */
.site-foot { --text: #c6d0df; --muted: #97a5ba; --accent: #4fb3ff; background: var(--navy); border-top: 0; }
.site-foot h4 { color: #fff; }
.site-foot p { color: #c6d0df; }
.site-foot .foot-col a:hover { color: #fff; }
.foot-legal { border-top-color: rgba(255,255,255,.08); }
.koppel { --text: #c6d0df; --text-hi: #eaf0f8; --muted: #97a5ba; --accent: #4fb3ff; }
.koppel p, .sec.light .koppel p { color: #c6d0df; }
.koppel .tag.ai { color: var(--ai); } .koppel .tag::before { background: rgba(79,179,255,.16); }
.stat b.groen { color: var(--g24-ink); }

/* navy secties: om en om met wit en lichtblauw. Hier gelden weer de donkere kleuren. */
.sec.donker { --text: #c6d0df; --text-hi: #eaf0f8; --muted: #97a5ba; --line: rgba(255,255,255,.10);
  --accent: #4fb3ff; --accent-hover: #3ea2ee; --ai-ink: #4fb3ff; --g24-ink: #a5c35c; background: var(--navy); }
.donker h2, .donker h3, .donker h4, .donker .card h3, .donker .card.x .price b, .donker .price b { color: #fff; }
.donker p, .donker .lead, .donker .check { color: var(--text); }
.donker .tag, .donker .tag.ai { color: #4fb3ff; } .donker .tag::before { background: rgba(79,179,255,.16); }
.donker .card, .donker .card.x { background: rgba(255,255,255,.03); border-color: var(--line); }
.donker .card.x { border: 2px solid var(--accent); box-shadow: 0 30px 60px -30px rgba(79,179,255,.35); }
.donker .card:hover { border-color: rgba(79,179,255,.45); box-shadow: 0 30px 60px -30px rgba(79,179,255,.25); }
.donker .ico, .donker .ico.g { background: rgba(79,179,255,.10); border-color: rgba(79,179,255,.45); }
.donker [stroke="#1f78d1"] { stroke: #4fb3ff; } .donker [stroke="#a5c35c"] { stroke: #a5c35c; }
.donker .num, .donker .num.ai, .donker .bubble.me, .donker .c-flag, .donker .plan-flag { background: var(--accent); color: var(--navy); }
.donker .btn.p, .donker .btn.p:hover { color: var(--navy); }
.donker .btn.o::before { border-color: var(--accent); } .donker .btn.o:hover::before { background: rgba(79,179,255,.12); }
.donker .step-chat { background: #0f2240; border-color: var(--line); box-shadow: none; }
.donker .step-chat-kop, .donker .step-veld b, .donker .step-versie b { color: #fff; }
.donker .step-chat .bubble.ai { background: rgba(255,255,255,.06); color: #4fb3ff; }
.donker .step-chat-in span { background: #0f2240; }
.donker .step-versie.test { background: rgba(79,179,255,.08); box-shadow: inset 0 0 0 1px rgba(79,179,255,.35); }
.donker .telt-kol.ja { background: rgba(255,255,255,.03); }
.donker .telt-kop h4, .donker .telt-wat, .donker .telt-kol.nee .telt-uitleg { color: #fff; }
.donker .note, .donker .telt-uitleg { color: var(--muted); }
.donker .koppel { background: #13284a; border: 1px solid rgba(255,255,255,.08); }
.donker .koppel h3 { font-size: 26px; line-height: 1.2; }
.donker .card.white p, .donker .card.white .check, .donker .card.white span { color: var(--text); }
.donker .card.white h3, .donker .card.white .price b { color: #fff; }
.donker .card.white .price span { color: var(--muted); }
.donker .cat { color: #4fb3ff; }

/* hero weer donker zoals eerst; de witte kopbalk blijft erboven */
.hero { --text: #c6d0df; --text-hi: #eaf0f8; --muted: #97a5ba; --line: #2a3b57; --accent: #4fb3ff; --accent-hover: #3ea2ee; --g24-ink: #a5c35c; --ai-ink: #4fb3ff;
  background: var(--navy); }
.hero::before { background: radial-gradient(ellipse 40% 55% at 72% 40%, rgba(79,179,255,.30), rgba(79,179,255,0)), radial-gradient(ellipse 40% 55% at 22% 60%, rgba(165,195,92,.16), rgba(165,195,92,0)); }
.hero h1 { color: #fff; }
.hero .lead, .hero p { color: var(--text-hi); }
.hero .tag, .hero .tag.ai { color: #4fb3ff; } .hero .tag::before { background: rgba(79,179,255,.16); }
.hero .ai-word { color: #4fb3ff; text-shadow: 0 0 24px rgba(79,179,255,.55); }
.hero .prompt { background: #13284a; border-color: rgba(79,179,255,.55); box-shadow: 0 0 0 8px rgba(79,179,255,.06), 0 0 40px rgba(79,179,255,.18), 0 30px 70px rgba(0,0,0,.5); }
.hero .prompt-gloed .prompt { border-color: transparent; box-shadow: 0 30px 70px rgba(0,0,0,.5); }
.hero .prompt textarea { color: #fff; }
.hero .pill { background: #13284a; border-color: var(--line); color: var(--text-hi); }
.hero .pill:hover, .hero .pill.on { color: #fff; }
.hero .pill.on { border-color: var(--ai); box-shadow: 0 0 16px rgba(79,179,255,.30); }
.hero .trust span { color: #c6d0df; }
.hero .btn.p, .hero .btn.p:hover { color: #fff; }
.hero .btn.w, .hero .btn.w:hover { color: #fff; } .hero .btn.w::before { border-color: rgba(255,255,255,.55); } .hero .btn.w:hover::before { border-color: #fff; }
.hero .modus { background: rgba(10,19,32,.6); border-color: var(--line); box-shadow: none; }
.hero .modus-tab { color: var(--text); }
.hero .modus-tab:hover, .hero .modus-tab[aria-selected="true"] { color: #fff; }
.hero .modus-tab:hover::before { border-color: rgba(255,255,255,.25); }
.hero .modus-tab.zelf[aria-selected="true"]::before { background: rgba(79,179,255,.18); border-color: var(--ai); box-shadow: 0 0 18px rgba(79,179,255,.30); }
.hero .modus-tab.zelf[aria-selected="true"] svg { color: var(--ai); }
.hero .modus-tab.advies[aria-selected="true"]::before { background: rgba(165,195,92,.18); border-color: var(--g24); box-shadow: 0 0 18px rgba(165,195,92,.28); }
.hero .modus-tab.advies[aria-selected="true"] svg { color: var(--g24); }
.hero .advies-form .veld input, .hero .advies-form .veld select { background: #0a1320; border-color: var(--line); color: #fff; }
.hero .kanaal { background: #0a1320; border-color: var(--line); color: var(--text-hi); }
.hero .kanaal b { color: #fff; }
.hero [stroke="#1f78d1"] { stroke: #4fb3ff; } .hero [stroke="#a5c35c"] { stroke: #a5c35c; }

/* "AI" in de kop in de letters van het logo: A met het streepje, I als blok */
.ai-word { display: inline-block; color: #3da9ff; }
.ai-logo { display: inline-block; height: .74em; width: auto; vertical-align: baseline; overflow: visible; filter: drop-shadow(0 0 14px rgba(61,169,255,.5)); }
.hero .ai-word { text-shadow: none; }

/* keuze "Bouw het zelf" / "Laat ons je adviseren" als schakelaar: één ronde baan, het bolletje schuift naar de gekozen kant */
.hero .modus { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; gap: 0; padding: 4px; border-radius: 999px;
  background: rgba(255,255,255,.06); border: 1.5px solid var(--line); box-shadow: inset 0 1px 3px rgba(0,0,0,.35); }
.hero .modus::after { content: ""; position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 999px;
  background: #3da9ff; box-shadow: 0 0 18px rgba(61,169,255,.45); transition: transform .3s cubic-bezier(.3,.7,.2,1), background .3s, box-shadow .3s; }
.hero .modus:has(.advies[aria-selected="true"])::after { transform: translateX(100%); background: var(--g24); box-shadow: 0 0 18px rgba(165,195,92,.4); }
.hero .modus-tab { z-index: 1; border-radius: 999px; padding: 0 26px; white-space: nowrap; }
.hero .modus-tab::before { display: none; }
.hero .modus-tab:hover { color: #fff; }
.hero .modus-tab[aria-selected="true"], .hero .modus-tab[aria-selected="true"]:hover { color: var(--navy); }
.hero .modus-tab.zelf[aria-selected="true"] svg, .hero .modus-tab.advies[aria-selected="true"] svg { color: var(--navy); }
.hero .modus-tab:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .hero .modus::after { transition: none; } }
@media (max-width: 640px) { .hero .modus { display: grid; width: 100%; max-width: 440px; } .hero .modus-tab { padding: 6px 10px; white-space: normal; } }

/* kopbalk: volledig logo met "by 24x7 ICT", iets hoger zodat de onderregel leesbaar is */
.top .logo { height: 55px; }
@media (max-width: 640px) { .top .logo { height: 44px; } }

/* v2: bovenbalk donker navy, met het logo voor donkere achtergrond */
.top { background: rgba(10,26,51,.94); border-bottom: 1px solid rgba(255,255,255,.08); box-shadow: 0 10px 30px -20px rgba(0,0,0,.6); }
.top .menu a { color: #eaf0f8; } .top .menu a:hover { color: #4fb3ff; }
.top .btn.w, .top .btn.w:hover { color: #fff; } .top .btn.w::before { border-color: rgba(255,255,255,.5); } .top .btn.w:hover::before { border-color: #fff; }
.top .btn.p::before { background: #3da9ff; } .top .btn.p:hover::before { background: #2f97ec; } .top .btn.p, .top .btn.p:hover { color: var(--navy); }
.hero { border-top: 0; }

/* v2: heel transparant beeld achter de hero: het tekstballonnetje uit het logo aan beide kanten, om en om als een gesprek */
.hero-beeld { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url(hero-beeld.svg?v=14) center / cover no-repeat; opacity: .14; }
@media (prefers-reduced-motion: no-preference) { .hero-beeld { animation: beeld-zweef 16s ease-in-out infinite alternate; } }
@keyframes beeld-zweef { to { transform: translateY(-10px); } }
@media (max-width: 1100px) { .hero-beeld { display: none; } }
.donker .cat.plan-flag { color: var(--navy); }

/* "Laat ons je adviseren" is de route van 24x7 ICT: alles in dat paneel in het groen van 24x7 (#a5c35c) */
#paneel-advies { --accent: #a5c35c; --accent-hover: #94b24c; }
.hero #paneel-advies .prompt { border-color: rgba(165,195,92,.6); box-shadow: 0 0 0 8px rgba(165,195,92,.06), 0 0 40px rgba(165,195,92,.16), 0 30px 70px rgba(0,0,0,.5); animation: none; }
#paneel-advies .advies-kop { color: #a5c35c; }
.hero #paneel-advies .btn.p, .hero #paneel-advies .btn.p:hover { color: var(--navy); }
#paneel-advies .btn.p::before { background: #a5c35c; } #paneel-advies .btn.p:hover::before { background: #94b24c; }
#paneel-advies .advies-form .veld input:focus, #paneel-advies .advies-form .veld select:focus, #paneel-advies textarea:focus { border-color: #a5c35c; }
.hero #pills-zelf .pill:hover { border-color: #4fb3ff; }
.hero #pills-advies .pill:hover { border-color: #a5c35c; }
.hero #pills-advies .pill.on { border-color: #a5c35c; box-shadow: 0 0 16px rgba(165,195,92,.28); }

/* donkere secties krijgen dezelfde gloed als de hero: blauw (Jouw AI) en groen (24x7), zacht en langzaam schuivend */
.sec.donker { isolation: isolate; overflow: hidden; }
.sec.donker::before { content: ""; position: absolute; inset: -5%; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 40% 50% at 78% 30%, rgba(61,169,255,.22), rgba(61,169,255,0)),
              radial-gradient(ellipse 38% 50% at 18% 75%, rgba(165,195,92,.13), rgba(165,195,92,0)); }
.sec.donker:nth-of-type(even)::before {
  background: radial-gradient(ellipse 40% 50% at 22% 28%, rgba(61,169,255,.22), rgba(61,169,255,0)),
              radial-gradient(ellipse 38% 50% at 82% 78%, rgba(165,195,92,.13), rgba(165,195,92,0)); }
@media (prefers-reduced-motion: no-preference) { .sec.donker::before { animation: gloed 18s ease-in-out infinite alternate; } }

/* kaarten in donkere secties: bij hover een rand die van groen naar blauw verloopt, zoals het ballonnetje in het logo */
.donker .card::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: linear-gradient(120deg, #a5c35c, #3da9ff);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0; transition: opacity .3s; }
.donker .card:hover { border-color: transparent; box-shadow: 0 30px 60px -30px rgba(61,169,255,.3), 0 0 30px -10px rgba(165,195,92,.25); }
.donker .card:hover::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .donker .card::after { transition: none; } }

/* blok "Lastige koppeling?": geen eigen gloed, effen vlak */
.koppel::before { display: none; }
.koppel { box-shadow: none; }

/* label "Na 30 dagen" boven de hoverrand en iets hoger op de kaart */
.donker .card::after { z-index: 1; }
.plan-flag { z-index: 2; top: -18px; }

/* vlakken in de navy secties iets lichter, zodat ze meer loskomen van de achtergrond */
.donker .card, .donker .card.x, .donker .card.white, .donker .telt-kol.ja { background: rgba(255,255,255,.07); }
.donker .card, .donker .card.white { border-color: rgba(255,255,255,.14); }
.donker .telt-kol.nee { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.14); }
.donker .step-chat, .donker .step-chat-in span { background: #13284a; }
.donker .koppel { background: #16305a; }
/* vlakken nog een stap lichter */
.donker .card, .donker .card.x, .donker .card.white, .donker .telt-kol.ja { background: rgba(255,255,255,.11); }
.donker .card, .donker .card.white { border-color: rgba(255,255,255,.18); }
.donker .telt-kol.nee { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.18); }
.donker .step-chat, .donker .step-chat-in span { background: #15305a; }
.donker .koppel { background: #1a3866; }

/* leesbaarheid na de lichtere vlakken (gemeten, doel WCAG AA: 4,5:1 voor gewone tekst) */
/* knoppen in logoblauw: navy tekst in plaats van wit (wit haalde maar 2,3:1) */
.hero .btn.p, .hero .btn.p:hover, .hero .btn.ai, .hero .btn.ai:hover, .donker .btn.p, .donker .btn.p:hover, .donker .fake-btn { color: var(--navy); }
.hero .btn.ai::before { background: #3da9ff; }
/* gedempte tekst iets lichter op de navy vlakken */
.hero, .sec.donker, .koppel { --muted: #b4c1d3; }
.donker .price span, .donker .telt-wat small, .donker .telt-uitleg, .donker .step-veld, .donker .step-versie small, .donker .note, .donker .koppel-jaar-txt { color: #b4c1d3; }
/* kleine blauwe labels en links op navy: lichter blauw */
.donker .tag, .donker .tag.ai, .hero .tag, .hero .tag.ai, .koppel .tag.ai, .sec.light .koppel .tag.ai { color: #9fd6ff; }
.donker .cat, .donker .koppel-mail, .donker .plan-contact a:not(.btn), .donker .check a { color: #8fd0ff; }
.donker .cat.plan-flag { color: var(--navy); }

/* lichte secties: groen (#a5c35c) is als tekst op wit maar 2:1. Daarom groene woorden daar als groen label met navy tekst,
   zodat de kleur exact blijft en de tekst leesbaar is */
.sec.light .version .live, .sec.light .step-live, .sec.light .passed { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: #a5c35c; color: var(--navy) !important; }
.sec.light .passed svg, .sec.light .passed svg * { stroke: var(--navy); }
.sec.light .stat b.groen { color: var(--navy); }
.sec.light .stat b.groen::after { content: ""; display: block; width: 36px; height: 4px; margin-top: 8px; border-radius: 2px; background: #a5c35c; }
.sec.light .version small, .sec.light .d-vers { color: #4a5a72; }
.sec.light .tag, .sec.light .tag.ai { color: #155ea8; }

/* contactblok onderaan: geen gloed meer (geen waas om het blok en geen blauwe waas erin); de dunne rand van groen naar blauw blijft */
.cta-box::before { display: none; }
.gloed:has(.cta-box)::after { display: none; }
.gloed:has(.cta-box) { box-shadow: none; }

/* ===== Leesbaarheid op donker (voorstel collega, 29 okt): lopende en kleine tekst bijna wit (#E6EDF5), koppen zuiver wit.
   Hiërarchie via grootte en gewicht, niet via grijzere kleur. Lichtblauw alleen nog als accent (links, iconen, labels). ===== */
.hero, .sec.donker, .koppel, .site-foot { --text: #e6edf5; --text-hi: #e6edf5; --muted: #e6edf5; }
.hero .lead, .hero p, .hero .trust span, .hero .pill, .hero .modus-tab, .hero .advies-privacy,
.donker p, .donker .lead, .donker .check, .donker li, .donker small, .donker .price span, .donker .note,
.donker .telt-wat, .donker .telt-wat small, .donker .telt-uitleg, .donker .telt-pil.nee,
.donker .step-veld, .donker .step-versie small, .donker .step-taken li, .donker .version small,
.koppel p, .koppel .koppel-tags span, .koppel .koppel-jaar-txt, .koppel .koppel-mail,
.site-foot, .site-foot p, .site-foot a, .site-foot .foot-legal { color: #e6edf5; }
.hero .lead, .hero p, .donker p, .donker .lead, .donker .check, .koppel p, .site-foot p { font-weight: 400; line-height: 1.6; }
/* kleine tekst iets steviger */
.donker small, .donker .step-veld, .donker .price span, .donker .telt-uitleg, .koppel .koppel-tags span, .koppel .koppel-jaar-txt, .hero .trust span { font-weight: 500; }
/* mailadres in het koppelblok: geen lichtblauwe lopende tekst, wel herkenbaar als link */
.koppel .koppel-mail { text-decoration: underline; text-decoration-color: rgba(230,237,245,.45); text-underline-offset: 3px; }
.koppel .koppel-mail:hover { color: #fff; text-decoration-color: #fff; }
/* "Wat telt mee?" en andere links op donker mogen lichtblauw blijven (accent) */

/* logo in de kopbalk scherp houden: hoogte waarbij de breedte een heel getal is (viewBox 689 x 212) en de positie op hele pixels valt */
.top .logo { height: 64px; width: 208px; }
@media (max-width: 640px) { .top .logo { height: 44px; width: 143px; } }

/* demo "Bouwen met Jouw AI": eigen bericht en knoppen in logoblauw met navy tekst (diep blauw met navy tekst was onleesbaar) */
/* eigen bericht in dezelfde kleur als de chat in het portal (#portal .msg.user in app.css) */
.demo .w-msg.user { background: #E3F1FD; border: 1px solid #C9E2F8; color: #0d1828; box-shadow: 0 8px 20px -12px rgba(79,179,255,.55); }
.demo .w-send, .demo .w-publish:not(:disabled) { background: #3da9ff; color: #0a1a33; }
.demo .w-send:hover:not(:disabled), .demo .w-publish:hover:not(:disabled) { background: #2f97ec; }
.demo .d-open::before { background: #3da9ff; }
/* knop "Klik zelf om te proberen" / "Aanpassen met Jouw AI": het AI-ballonnetje uit het logo in plaats van een stip */
.demo .d-open { padding-left: 12px; gap: 9px; }
.demo .d-open::before { width: 24px; height: 18px; border-radius: 0; background: url(ai-icoon.svg?v=1) center / contain no-repeat; box-shadow: none; }

/* stap 2 (klein chatvenster): invoerregel netjes. Binnenhoek = buitenhoek min de randdikte, zodat de rand overal even dik is;
   rustiger waas die niet in het venster uitloopt; iets meer ruimte tot de rand van het venster */
.gloed.step-chat-in { margin: 4px 14px 14px; border-radius: 12px; padding: 1.5px; --gloed-waas: .18; }
.gloed.step-chat-in::after { filter: blur(6px); }
.step-chat-in span { border-radius: 10.5px; padding: 9px 12px; }
.donker .step-chat-in span { background: #0f2240; }

/* bedankt-melding na een aanvraag in de hero: witte kaart, dus donkere tekst (de hero zet p en tekst bijna wit); het
   telefoonnummer navy met een groen streepje (groen blijft exact #a5c35c, maar als tekst op wit is het onleesbaar) */
.hero .contact-klaar, .hero .contact-klaar p { color: #3a4659; }
.hero .contact-klaar a { color: var(--navy); text-decoration: underline; text-decoration-color: #a5c35c; text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* telefoon: branchekeuze als nette 2x2, Seven en Noord zonder zijkolom (anders blijft er maar een halve pagina over) */
@media (max-width: 640px) {
  .d-branche { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .d-branche-vraag { grid-column: 1 / -1; }
  .d-branche button { min-height: 48px; padding: 6px 10px; border-radius: 14px; font-size: 13px; line-height: 1.2; }
  .p-baars:not([hidden]), .p-noord:not([hidden]) { display: flex; flex-direction: column; }
  .p-baars .pp-top, .p-noord .pp-top { flex-direction: row; align-items: center; height: 46px; padding: 0 12px; gap: 10px; border-right: 0; border-bottom: 1px solid var(--pline); }
  .p-baars .pp-brand, .p-noord .pp-brand { padding: 0; }
  .p-baars .pp-user, .p-noord .pp-user { margin: 0 0 0 auto; padding: 0; border-top: 0; }
  .d-pane .b-kpi b { font-size: 18px; }
  .d-pane .b-kpi > span { padding: 10px 12px; }
}

/* menu op de telefoon: knop rechts in de balk, klapt uit onder de balk met de vier links en Inloggen */
.m-knop, .m-menu { display: none; }
@media (max-width: 640px) {
  .top .wrap { position: relative; flex-wrap: nowrap; gap: 8px; }
  .top .brand { flex: none; }
  .top-actions { gap: 0; }
  .top-actions .btn.sm { min-height: 40px; padding: 0 18px; font-size: 12px; letter-spacing: .3px; }
  .m-knop { display: inline-flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 44px; height: 44px; margin-right: -10px; padding: 0; border: 0; background: none; cursor: pointer; }
  .m-knop i { display: block; width: 22px; height: 2px; border-radius: 2px; background: #fff; transition: transform .25s, opacity .2s; }
  .m-knop[aria-expanded="true"] i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .m-knop[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
  .m-knop[aria-expanded="true"] i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .m-menu:not([hidden]) { display: flex; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0; padding: 6px 16px 18px; background: #0a1a33;
    border-top: 1px solid rgba(255,255,255,.08); box-shadow: 0 24px 40px -20px rgba(0,0,0,.6); animation: m-in .22s ease both; }
  .m-menu a { display: flex; align-items: center; gap: 10px; min-height: 52px; color: #e6edf5; font-weight: 600; font-size: 17px; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.08); }
  .m-menu a:hover, .m-menu a:focus-visible { color: #4fb3ff; }
  .m-menu .m-inlog { border-bottom: 0; margin-top: 6px; color: #9fd6ff; font-size: 16px; }
  @keyframes m-in { from { opacity: 0; transform: translateY(-6px); } }
}
@media (prefers-reduced-motion: reduce) { .m-menu:not([hidden]) { animation: none; } .m-knop i { transition: none; } }

/* footer: 24x7 ICT in de copyrightregel linkt naar 24x7.nl */
.foot-legal a { text-decoration: none; }
.foot-legal a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* 24x7 ICT in de voordelenlijst linkt naar 24x7.nl; kleur blijft van de <b> */
.z24-link { text-decoration: none; }
.z24-link:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: #a5c35c; }

/* mailknop naast de belknop bij de prijzen: zelfde knop, mailadres in kleine letters */
.btn.mail { text-transform: none; letter-spacing: .2px; }