/* =========================================================
   Zakelijk thema – rustiger, strakker, voor B2B-dienstverleners.
   Wordt na style.css geladen als THEMA = 'zakelijk' in klant.py.
   ========================================================= */
:root{
  --ink:#0E1116; --paper:#F5F6F8;
  --bg:#F5F6F8; --text:#0E1116; --muted:#555C6B; --line:#E1E4EA; --card:#FFFFFF;
  --z-dark:#0B0D12; --z-dark-2:#12151C; --z-dark-line:#232835; --z-dark-text:#E9EBEF; --z-dark-muted:#9BA2AF;
  --z-soft:#EDEFF3; --z-ok:#1F9D63; --z-warn:#D98B06;
  --z-shadow:0 1px 2px rgba(14,17,22,.04),0 8px 24px -12px rgba(14,17,22,.12);
  --z-shadow-h:0 2px 4px rgba(14,17,22,.05),0 22px 44px -18px rgba(14,17,22,.22);
  --r:14px;
  --mono:ui-monospace,"SF Mono","Cascadia Mono","Segoe UI Mono",Menlo,Consolas,monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --bg:#0B0D12; --text:#E9EBEF; --muted:#9BA2AF; --line:#232835; --card:#12151C; --z-soft:#10131A; --btn-bg:#E9EBEF; --btn-fg:#0B0D12;
    --z-shadow:0 1px 2px rgba(0,0,0,.3); --z-shadow-h:0 22px 44px -18px rgba(0,0,0,.6); }
}
:root[data-theme="dark"]{ --bg:#0B0D12; --text:#E9EBEF; --muted:#9BA2AF; --line:#232835; --card:#12151C; --z-soft:#10131A; --btn-bg:#E9EBEF; --btn-fg:#0B0D12;
  --z-shadow:0 1px 2px rgba(0,0,0,.3); --z-shadow-h:0 22px 44px -18px rgba(0,0,0,.6); }

/* ---------- typografie: rustig en zakelijk ---------- */
body{ font-size:1.0625rem; line-height:1.65; font-variation-settings:"wdth" 100; }
h1,h2,h3{ font-weight:700; letter-spacing:-.025em; line-height:1.08; text-wrap:balance; }
.display{ text-transform:none; font-variation-settings:"wdth" 100; font-size:clamp(2.5rem,5.6vw,4.6rem); line-height:1.02; letter-spacing:-.035em; font-weight:700; }
.h2{ font-variation-settings:"wdth" 100; font-size:clamp(1.9rem,3.6vw,3rem); letter-spacing:-.03em; line-height:1.06; }
.lede{ font-weight:500; font-size:clamp(1.25rem,2.2vw,1.7rem); line-height:1.35; letter-spacing:-.015em; }
.loader-name{ text-transform:none; font-variation-settings:"wdth" 100; letter-spacing:-.03em; font-weight:700; }
.btn{ border-radius:10px; padding:.95rem 1.4rem; font-weight:650; letter-spacing:-.005em; }
.btn-sm{ padding:.6rem 1rem; }
.foot-word{ display:none; }
.head .btn{ background:var(--accent); color:#fff; }
.head .btn:hover{ background:var(--ink); color:#fff; }
.head.on-dark:not(.is-solid) .btn{ background:var(--accent); color:#fff; }
.head.on-dark:not(.is-solid) .btn:hover{ background:#fff; color:var(--ink); }

/* ---------- bouwstenen ---------- */
.z-ic{ width:26px; height:26px; flex:none; }
.z-ar{ width:18px; height:18px; flex:none; transition:transform .3s cubic-bezier(.2,.8,.2,1); }
.z-ck{ width:18px; height:18px; flex:none; color:var(--accent); }
.btn:hover .z-ar{ transform:translateX(3px); }
.z-btn-primary{ background:var(--accent); color:#fff; }
.z-btn-primary:hover{ background:var(--ink); color:#fff; }
.z-btn-ghost{ background:transparent; color:inherit; box-shadow:inset 0 0 0 1px currentColor; }
.z-btn-ghost:hover{ background:#fff; color:var(--ink); }
.z-kicker{ margin:0 0 .9rem; font-family:var(--mono); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); font-weight:600; }
.z-dark .z-kicker,.z-hero .z-kicker{ color:var(--accent-2); }
.z-h1{ font-size:clamp(2.5rem,5.4vw,4.5rem); line-height:1.02; letter-spacing:-.04em; font-weight:700; margin:0; }
.z-h1 span{ color:var(--accent-2); }
.z-h2{ font-size:clamp(1.9rem,3.4vw,2.9rem); letter-spacing:-.032em; line-height:1.06; margin:0; }
.z-lead{ font-size:clamp(1.08rem,1.5vw,1.25rem); line-height:1.6; color:var(--z-dark-muted); max-width:56ch; margin:1.3rem 0 0; }
.z-lead-dark{ color:var(--muted); }
.z-sec{ padding-block:clamp(4.5rem,9vw,8rem); }
.z-sec-tight{ padding-block:clamp(3.5rem,6vw,5.5rem); }
.z-alt{ background:var(--z-soft); }
.z-head{ max-width:720px; margin:0 auto clamp(2.5rem,5vw,4rem); text-align:center; }
.z-head > p:last-child:not(.z-kicker){ color:var(--muted); margin:1.1rem auto 0; max-width:58ch; font-size:1.1rem; }
.z-head-left{ text-align:left; margin-inline:0; }
.z-head-left > p:last-child:not(.z-kicker){ margin-inline:0; }
.z-head a{ color:var(--accent); text-underline-offset:3px; }

/* ---------- hero ---------- */
.z-hero,.z-pagehero{ position:relative; overflow:hidden; background:var(--z-dark); color:var(--z-dark-text); isolation:isolate; }
.z-hero::before,.z-pagehero::before{ content:""; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(60% 70% at 85% 10%,color-mix(in srgb,var(--accent) 34%,transparent),transparent 70%),
             radial-gradient(40% 50% at 0% 100%,color-mix(in srgb,var(--accent-2) 14%,transparent),transparent 70%); }
.z-hero::after,.z-pagehero::after{ content:""; position:absolute; inset:0; z-index:-1; opacity:.5;
  background-image:linear-gradient(to right,#ffffff0a 1px,transparent 1px),linear-gradient(to bottom,#ffffff0a 1px,transparent 1px);
  background-size:56px 56px; mask-image:radial-gradient(80% 80% at 50% 30%,#000 30%,transparent 80%); -webkit-mask-image:radial-gradient(80% 80% at 50% 30%,#000 30%,transparent 80%); }
.z-net{ position:absolute; inset:0; width:100%; height:100%; z-index:-1; pointer-events:none; opacity:.9; }
.z-hero-grid{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(2.5rem,5vw,5rem); align-items:center;
  padding-block:calc(140px + env(safe-area-inset-top,0px)) clamp(4.5rem,8vw,7rem); min-height:min(100svh,920px); }
.z-hero-copy{ min-width:0; }
.z-eyebrow{ display:inline-flex; align-items:center; gap:.6rem; margin:0 0 1.6rem; padding:.42rem .85rem .42rem .7rem; border:1px solid var(--z-dark-line); background:#ffffff08;
  border-radius:999px; font-size:.86rem; font-weight:550; color:var(--z-dark-text); }
.z-pulse{ width:8px; height:8px; border-radius:50%; background:var(--z-ok); box-shadow:0 0 0 0 color-mix(in srgb,var(--z-ok) 60%,transparent); animation:zpulse 2.4s infinite; }
@keyframes zpulse{ 0%{ box-shadow:0 0 0 0 color-mix(in srgb,var(--z-ok) 55%,transparent);} 70%{ box-shadow:0 0 0 9px transparent;} 100%{ box-shadow:0 0 0 0 transparent;} }
.z-cta{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2.2rem; }
.z-hero-meta{ display:flex; flex-wrap:wrap; gap:.6rem 1.6rem; list-style:none; padding:0; margin:2rem 0 0; font-size:.94rem; color:var(--z-dark-muted); }
.z-hero-meta li{ display:flex; align-items:center; gap:.45rem; }
.z-hero-meta .z-ck{ color:var(--z-ok); }

.z-panel{ min-width:0; background:linear-gradient(180deg,#161a23f2,#10131af2); border:1px solid var(--z-dark-line); border-radius:18px; padding:1.4rem;
  box-shadow:0 40px 80px -30px #000c,inset 0 1px 0 #ffffff0d; backdrop-filter:blur(8px); }
.z-panel-h{ display:flex; justify-content:space-between; align-items:center; gap:1rem; font-weight:650; font-size:.98rem; }
.z-tag{ font-family:var(--mono); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--z-dark-muted); border:1px solid var(--z-dark-line); border-radius:6px; padding:.2rem .45rem; font-weight:500; }
.z-score{ position:relative; display:flex; align-items:baseline; gap:.6rem; margin:1.2rem 0 1rem; padding-bottom:1rem; color:var(--z-dark-muted); font-size:.9rem; }
.z-score-n{ font-size:2.4rem; font-weight:700; letter-spacing:-.04em; color:#fff; font-variant-numeric:tabular-nums; }
.z-score i{ position:absolute; left:0; right:0; bottom:0; height:4px; border-radius:4px; background:var(--z-dark-line); overflow:hidden; }
.z-score i::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg,var(--z-ok),#36c486); transform-origin:0 50%; transform:scaleX(var(--p)); }
.z-rows{ list-style:none; margin:0; padding:0; display:grid; gap:.25rem; }
.z-row{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:.8rem; padding:.72rem .2rem; border-top:1px solid var(--z-dark-line); font-size:.92rem; }
.z-row:first-child{ border-top:0; }
.z-row b{ font-weight:550; color:var(--z-dark-text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.z-row span:last-child{ color:var(--z-dark-muted); font-family:var(--mono); font-size:.78rem; white-space:nowrap; }
.z-st{ width:9px; height:9px; border-radius:50%; }
.z-st-ok{ background:var(--z-ok); box-shadow:0 0 0 4px color-mix(in srgb,var(--z-ok) 18%,transparent); }
.z-st-warn{ background:var(--z-warn); box-shadow:0 0 0 4px color-mix(in srgb,var(--z-warn) 20%,transparent); }

/* ---------- voordelen ---------- */
.z-adv-band{ background:var(--card); border-bottom:1px solid var(--line); }
.z-adv-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; }
.z-adv-band .z-adv-grid > *{ padding:clamp(1.8rem,3vw,2.6rem) clamp(1.2rem,2vw,2rem); border-left:1px solid var(--line); }
.z-adv-band .z-adv-grid > *:first-child{ border-left:0; padding-left:0; }
.z-adv .z-ic{ color:var(--accent); margin-bottom:1rem; }
.z-adv h3{ font-size:1.12rem; letter-spacing:-.015em; margin-bottom:.45rem; }
.z-adv p{ margin:0; color:var(--muted); font-size:.98rem; line-height:1.55; }
.z-adv-cards{ gap:1rem; }
.z-adv-cards .z-adv{ background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:1.8rem; box-shadow:var(--z-shadow); }

/* ---------- diensten ---------- */
.z-svc-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }
.z-svc{ position:relative; display:flex; flex-direction:column; gap:.6rem; padding:1.9rem; background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  text-decoration:none; color:inherit; box-shadow:var(--z-shadow); transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s,border-color .3s; overflow:hidden; }
.z-svc::before{ content:""; position:absolute; left:0; right:0; top:0; height:3px; background:linear-gradient(90deg,var(--accent),var(--accent-2)); transform:scaleX(0); transform-origin:0 50%; transition:transform .5s cubic-bezier(.2,.8,.2,1); }
.z-svc:hover{ transform:translateY(-4px); box-shadow:var(--z-shadow-h); border-color:color-mix(in srgb,var(--accent) 30%,var(--line)); }
.z-svc:hover::before{ transform:scaleX(1); }
.z-svc > .z-ic{ width:44px; height:44px; padding:10px; border-radius:11px; background:color-mix(in srgb,var(--accent) 9%,transparent); color:var(--accent); margin-bottom:.6rem; }
.z-svc h3{ font-size:1.3rem; }
.z-svc p{ margin:0; color:var(--muted); font-size:.98rem; line-height:1.55; }
.z-svc ul{ list-style:none; margin:.4rem 0 0; padding:.9rem 0 0; border-top:1px solid var(--line); display:grid; gap:.35rem; font-size:.93rem; }
.z-svc li{ display:flex; gap:.55rem; align-items:baseline; }
.z-svc li::before{ content:""; width:5px; height:5px; border-radius:50%; background:var(--accent); flex:none; transform:translateY(-2px); }
.z-more{ margin-top:auto; padding-top:1rem; display:inline-flex; align-items:center; gap:.4rem; font-weight:650; font-size:.95rem; color:var(--accent); }
.z-svc:hover .z-ar{ transform:translateX(4px); }
:root[data-theme="dark"] .z-svc > .z-ic,:root[data-theme="dark"] .z-more,:root[data-theme="dark"] .z-adv .z-ic,:root[data-theme="dark"] .z-ck,:root[data-theme="dark"] .z-kicker{ color:var(--accent-2); }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .z-svc > .z-ic,:root:not([data-theme="light"]) .z-more,:root:not([data-theme="light"]) .z-adv .z-ic,:root:not([data-theme="light"]) .z-ck,:root:not([data-theme="light"]) .z-kicker{ color:var(--accent-2); } }

/* ---------- pakketten ---------- */
.z-plans{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; align-items:stretch; }
.z-plan{ position:relative; display:flex; flex-direction:column; padding:2.1rem 1.9rem; background:var(--card); border:1px solid var(--line); border-radius:18px; box-shadow:var(--z-shadow); }
.z-plan h3{ font-size:1.5rem; }
.z-plan-for{ color:var(--muted); margin:.5rem 0 1.4rem; font-size:.98rem; min-height:3.1em; }
.z-plan-price{ margin:0 0 1.4rem; padding-bottom:1.4rem; border-bottom:1px solid var(--line); font-size:1.5rem; font-weight:700; letter-spacing:-.025em; }
.z-plan-price small{ display:block; font-size:.84rem; font-weight:500; color:var(--muted); letter-spacing:0; margin-top:.2rem; }
.z-plan ul{ list-style:none; padding:0; margin:0 0 2rem; display:grid; gap:.7rem; font-size:.97rem; }
.z-plan li{ display:flex; gap:.6rem; align-items:flex-start; }
.z-plan li .z-ck{ margin-top:.2rem; }
.z-plan .btn{ margin-top:auto; width:100%; }
.z-plan-top{ background:var(--z-dark); color:var(--z-dark-text); border-color:var(--z-dark); box-shadow:0 30px 60px -28px color-mix(in srgb,var(--accent) 60%,#000); }
.z-plan-top .z-plan-for,.z-plan-top .z-plan-price small{ color:var(--z-dark-muted); }
.z-plan-top .z-plan-price{ border-color:var(--z-dark-line); }
.z-plan-top .z-ck{ color:var(--accent-2)!important; }
.z-plan-top .btn{ background:var(--accent); color:#fff; }
.z-plan-top .btn:hover{ background:#fff; color:var(--z-dark); }
.z-badge{ position:absolute; top:1.9rem; right:1.6rem; font-family:var(--mono); font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; background:var(--accent); color:#fff; padding:.3rem .6rem; border-radius:6px; }

/* ---------- werkwijze ---------- */
.z-steps{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; counter-reset:z; }
.z-step{ position:relative; padding:1.8rem 1.5rem 1.6rem; border-top:2px solid var(--line); }
.z-step::before{ content:""; position:absolute; left:0; top:-2px; width:48px; height:2px; background:var(--accent); }
.z-step-n{ display:block; font-family:var(--mono); font-size:.85rem; color:var(--accent); margin-bottom:1rem; font-weight:600; }
.z-step h3{ font-size:1.18rem; margin-bottom:.5rem; }
.z-step p{ margin:0; color:var(--muted); font-size:.97rem; line-height:1.55; }

/* ---------- sectoren ---------- */
.z-sect-wrap{ display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(2rem,5vw,5rem); align-items:center; }
.z-sect-wrap .z-head{ margin-bottom:0; }
.z-sect{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.75rem; }
.z-sect li{ display:flex; align-items:center; gap:.8rem; padding:1.1rem 1.2rem; background:var(--card); border:1px solid var(--line); border-radius:12px; font-weight:600; font-size:.98rem; }
.z-sect .z-ic{ width:22px; height:22px; color:var(--accent); }

/* ---------- donkere band ---------- */
.z-dark{ background:var(--z-dark); color:var(--z-dark-text); overflow:hidden; isolation:isolate; }
.z-dark::before{ content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(50% 80% at 100% 50%,color-mix(in srgb,var(--accent) 26%,transparent),transparent 70%); }
.z-split{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(2.5rem,6vw,6rem); align-items:center; }
.z-split-top{ align-items:start; }
.z-dark .btn{ margin-top:2rem; }
.z-checks{ list-style:none; margin:0; padding:0; display:grid; gap:.7rem; }
.z-checks li{ display:flex; align-items:center; gap:1rem; padding:1.05rem 1.2rem; border:1px solid var(--z-dark-line); background:#ffffff06; border-radius:12px; font-weight:550; }
.z-checks .z-ic{ width:22px; height:22px; color:var(--accent-2); }

/* ---------- faq ---------- */
.z-faq-wrap{ display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(2rem,5vw,5rem); align-items:start; }
.z-faq{ border-top:1px solid var(--line); }
.z-faq-i{ border-bottom:1px solid var(--line); }
.z-faq-i summary{ list-style:none; display:flex; justify-content:space-between; align-items:center; gap:1.5rem; padding:1.35rem 0; cursor:pointer; font-weight:650; font-size:1.08rem; letter-spacing:-.01em; }
.z-faq-i summary::-webkit-details-marker{ display:none; }
.z-pl{ width:20px; height:20px; flex:none; color:var(--muted); transition:transform .35s cubic-bezier(.2,.8,.2,1); }
.z-faq-i[open] .z-pl{ transform:rotate(45deg); color:var(--accent); }
.z-faq-i p{ margin:0 0 1.4rem; color:var(--muted); max-width:62ch; }
.z-faq-i summary:hover span{ color:var(--accent); }

/* ---------- over ons ---------- */
.z-pagehero .wrap{ padding-block:calc(150px + env(safe-area-inset-top,0px)) clamp(4rem,7vw,6rem); }
.z-pagehero .z-h1{ max-width:18ch; }
.z-compare{ display:grid; gap:1rem; }
.z-cmp{ border-radius:var(--r); padding:1.6rem 1.7rem; border:1px solid var(--line); background:var(--card); }
.z-cmp-l{ display:block; font-family:var(--mono); font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:.9rem; }
.z-cmp ul{ list-style:none; margin:0 0 1rem; padding:0; display:grid; gap:.45rem; }
.z-cmp-old ul{ color:var(--muted); }
.z-cmp-old li{ text-decoration:line-through; text-decoration-color:color-mix(in srgb,var(--muted) 60%,transparent); }
.z-cmp-new{ background:var(--z-dark); color:var(--z-dark-text); border-color:var(--z-dark); }
.z-cmp-new .z-cmp-l{ color:var(--accent-2); }
.z-cmp-new li{ display:flex; gap:.6rem; align-items:flex-start; }
.z-cmp-new .z-ck{ color:var(--accent-2)!important; margin-top:.2rem; }
.z-cmp b{ font-size:1.05rem; }
.z-team{ display:grid; gap:1.2rem; grid-template-columns:repeat(3,minmax(0,1fr)); }
.z-team-1{ grid-template-columns:minmax(0,340px); justify-content:center; }
.z-team-2{ grid-template-columns:repeat(2,minmax(0,1fr)); max-width:840px; margin-inline:auto; }
.z-member-img{ aspect-ratio:4/5; border-radius:var(--r); overflow:hidden; background:var(--z-soft); max-width:100%; }
.z-member-img img{ width:100%; height:100%; object-fit:cover; object-position:50% 20%; }
.z-member h3{ margin-top:1rem; font-size:1.2rem; }
.z-member p{ margin:.2rem 0 0; color:var(--muted); }
.z-facts{ margin:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; border:1px solid var(--line); border-radius:var(--r); background:var(--card); overflow:hidden; }
.z-facts > div{ padding:1.4rem 1.5rem; border-left:1px solid var(--line); min-width:0; }
.z-facts > div:first-child{ border-left:0; }
.z-facts dt{ font-family:var(--mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:.4rem; }
.z-facts dd{ margin:0; font-weight:600; overflow-wrap:anywhere; }
.z-facts a{ text-decoration:none; }

/* ---------- responsief ---------- */
@media (max-width:1080px){
  .z-hero-grid{ grid-template-columns:minmax(0,1fr); min-height:0; }
  .z-panel{ max-width:560px; }
  .z-svc-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .z-steps{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .z-adv-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .z-adv-band .z-adv-grid > *{ border-left:0; padding-left:0; border-top:1px solid var(--line); }
  .z-adv-band .z-adv-grid > *:nth-child(-n+2){ border-top:0; }
  .z-sect-wrap,.z-faq-wrap{ grid-template-columns:minmax(0,1fr); }
  .z-facts{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .z-facts > div:nth-child(3){ border-left:0; }
  .z-facts > div:nth-child(n+3){ border-top:1px solid var(--line); }
}
@media (max-width:860px){
  .z-plans{ grid-template-columns:minmax(0,1fr); max-width:520px; margin-inline:auto; }
  .z-split{ grid-template-columns:minmax(0,1fr); }
  .z-team,.z-team-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:620px){
  .z-hero-grid{ padding-top:calc(116px + env(safe-area-inset-top,0px)); }
  .z-svc-grid,.z-steps,.z-adv-grid,.z-sect,.z-facts{ grid-template-columns:minmax(0,1fr); }
  .z-adv-band .z-adv-grid > *:nth-child(2){ border-top:1px solid var(--line); }
  .z-facts > div{ border-left:0; }
  .z-facts > div + div{ border-top:1px solid var(--line); }
  .z-cta .btn{ width:100%; }
  .z-team,.z-team-2{ grid-template-columns:minmax(0,1fr); }
  .z-row span:last-child{ display:none; }
  .z-row{ grid-template-columns:auto minmax(0,1fr); }
}
@media (prefers-reduced-motion: reduce){
  .z-pulse{ animation:none; }
  .z-svc,.z-svc::before,.z-ar{ transition:none; }
}

/* uitgelichte dienst (advies / consultancy) over de volle breedte */
.z-svc-feature{ grid-column:1/-1; display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(1.5rem,4vw,4rem); align-items:center;
  padding:clamp(2rem,4vw,3rem); background:var(--z-dark); color:var(--z-dark-text); border-color:var(--z-dark); }
.z-svc-feature::after{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background:radial-gradient(60% 90% at 100% 0%,color-mix(in srgb,var(--accent) 30%,transparent),transparent 70%); }
.z-svc-feature > *{ position:relative; z-index:1; }
.z-svc-feature .z-svc-txt{ display:flex; flex-direction:column; gap:.6rem; align-items:flex-start; }
.z-svc-feature .z-kicker{ font-size:.78rem; margin:.4rem 0 0; color:var(--accent-2)!important; }
.z-svc-feature h3{ font-size:clamp(1.6rem,2.6vw,2.2rem); }
.z-svc-feature p{ color:var(--z-dark-muted); font-size:1.05rem; max-width:48ch; }
.z-svc-feature > .z-svc-txt > .z-ic{ width:48px; height:48px; padding:11px; border-radius:12px; background:color-mix(in srgb,var(--accent-2) 16%,transparent); color:var(--accent-2)!important; }
.z-svc-feature ul{ margin:0; padding:0; border:0; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.6rem; }
.z-svc-feature li{ align-items:center; gap:.6rem; padding:.85rem 1rem; border:1px solid var(--z-dark-line); background:#ffffff06; border-radius:10px; font-weight:550; font-size:.95rem; }
.z-svc-feature li::before{ display:none; }
.z-svc-feature .z-ck{ color:var(--accent-2)!important; }
.z-svc-feature .z-more{ color:#fff!important; padding-top:.8rem; }
@media (max-width:860px){ .z-svc-feature{ grid-template-columns:minmax(0,1fr); } }
@media (max-width:620px){ .z-svc-feature ul{ grid-template-columns:minmax(0,1fr); } }

/* footer */
.foot .btn-accent{ background:var(--accent); color:#fff; }
.foot .btn-accent:hover{ background:#fff; color:var(--ink); }
@media (min-width:1081px){ .foot-grid{ grid-template-columns:repeat(5,minmax(0,1fr)); } }
@media (min-width:761px) and (max-width:1080px){ .foot-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.z-step{ padding:1.8rem 1.4rem 1.6rem 0; }

/* ---------- scrollzoom (over ons): de monitor in, daar verschijnt de info ---------- */
.z-zoom{ position:relative; background:#07080B; color:var(--z-dark-text); }
.z-zoom-pin{ position:relative; overflow:hidden; }
.z-zoom-scene{ position:relative; aspect-ratio:var(--ar,1.7778); max-width:100%; }
.z-zoom-scene img{ width:100%; height:100%; object-fit:cover; display:block; }
.z-zoom-screen{ position:absolute; display:block; pointer-events:none; }
.z-zoom-intro{ padding-block:2.5rem 0; }
.z-zoom-intro .z-h1{ max-width:16ch; }
.z-zoom-hint{ display:none; }
.z-zoom-ui{ position:relative; background:#0B0D12; }
.z-zoom-boot{ display:none; }
.z-zoom-in{ padding:clamp(2rem,5vw,4rem) max(16px,env(safe-area-inset-right,0px)) clamp(2rem,5vw,4rem) max(16px,env(safe-area-inset-left,0px)); max-width:1240px; margin-inline:auto; display:flex; flex-direction:column; }
.z-zoom-bar{ display:flex; align-items:center; gap:1rem; font-family:var(--mono); font-size:.78rem; color:var(--z-dark-muted); padding-bottom:1rem; border-bottom:1px solid var(--z-dark-line); margin-bottom:clamp(1.2rem,3vh,2.2rem); }
.z-zoom-bar > span:nth-child(2){ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.z-zoom-dots{ display:flex; gap:6px; } .z-zoom-dots i{ width:10px; height:10px; border-radius:50%; background:var(--z-dark-line); } .z-zoom-dots i:first-child{ background:var(--accent-2); }
.z-zoom-live{ display:inline-flex; align-items:center; gap:.45rem; } .z-zoom-live .z-pulse{ display:inline-block; }
.z-zoom-in > .z-kicker{ margin:0 0 .6rem; color:var(--accent-2); }
.z-zoom-h{ font-size:clamp(1.8rem,4vw,3.2rem); letter-spacing:-.035em; line-height:1.04; margin:0 0 clamp(1.2rem,3.5vh,2.4rem); color:#fff; }
.z-zoom-cards{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(.6rem,1.5vh,1rem); }
.z-zoom-card{ display:flex; gap:1rem; align-items:flex-start; padding:clamp(1rem,2.4vh,1.6rem); border:1px solid var(--z-dark-line); background:#ffffff06; border-radius:14px; min-width:0; }
.z-zoom-card .z-ic{ color:var(--accent-2); width:24px; height:24px; margin-top:.15rem; }
.z-zoom-card h3{ font-size:1.12rem; color:#fff; margin-bottom:.3rem; }
.z-zoom-card p{ margin:0; color:var(--z-dark-muted); font-size:.95rem; line-height:1.5; }
.z-zoom-foot{ margin:clamp(1.2rem,3vh,2rem) 0 0; font-family:var(--mono); font-size:.8rem; color:var(--z-dark-muted); }
.z-zoom-foot a{ text-decoration:none; color:inherit; }

/* actief (met JavaScript en zonder "minder beweging"): vastgezet tijdens het scrollen */
.z-zoom.is-on{ height:460vh; }
.z-zoom.is-on:has(.has-video){ height:620vh; }
.z-zoom.is-on .z-zoom-pin{ position:sticky; top:0; height:100vh; height:100svh; }
.z-zoom.is-on .z-zoom-scene{ position:absolute; left:50%; top:50%; width:max(100vw,100svh * var(--ar,1.7778)); max-width:none; transform:translate(-50%,-50%); transform-origin:50% 50%; will-change:transform; }
.z-zoom.is-on .z-zoom-scene::after{ content:""; position:absolute; inset:0; background:radial-gradient(70% 70% at 50% 45%,transparent 40%,rgba(7,8,11,.55)); opacity:var(--vig,1); }
.z-zoom.is-on .z-zoom-intro{ position:absolute; inset:auto 0 0; padding-block:0 clamp(2.5rem,8vh,5rem); background:linear-gradient(0deg,rgba(7,8,11,.85),transparent); padding-top:8rem; z-index:3; }
.z-zoom.is-on .z-zoom-hint{ display:flex; align-items:center; gap:.7rem; margin:1.6rem 0 0; font-family:var(--mono); font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; color:var(--z-dark-muted); }
.z-zoom.is-on .z-zoom-hint span{ position:relative; width:1.5px; height:30px; background:#ffffff33; overflow:hidden; }
.z-zoom.is-on .z-zoom-hint span::after{ content:""; position:absolute; left:0; right:0; top:-50%; height:50%; background:#fff; animation:drop 1.8s cubic-bezier(.6,0,.4,1) infinite; }
.z-zoom.is-on .z-zoom-ui{ position:absolute; left:0; top:0; overflow:hidden; z-index:2; pointer-events:none; background:rgba(11,13,18,var(--bga,0)); border-radius:calc((1 - var(--bga,0)) * 4px); }
.z-zoom.is-on .z-zoom-boot{ display:grid; place-items:center; position:absolute; inset:0; }
.z-zoom-logo{ width:62%; max-width:none; height:auto; }
.z-zoom.is-on .z-zoom-boot{ background:radial-gradient(35% 45% at 50% 50%,rgba(200,18,79,.30),transparent 100%); }
.z-zoom.is-on .z-zoom-in{ position:absolute; left:0; top:0; width:100vw; height:100vh; height:100svh; max-width:none; justify-content:center; padding-inline:max(16px,calc((100vw - 1100px) / 2)); transform-origin:0 0; }
.z-zoom.is-on .z-zoom-in [data-i]{ opacity:0; transform:translateY(24px); }
.z-zoom.is-on.is-done .z-zoom-ui{ pointer-events:auto; }
@media (max-width:760px){
  .z-zoom-cards{ grid-template-columns:minmax(0,1fr); }
  .z-zoom-card p{ font-size:.88rem; }
  .z-zoom-card h3{ font-size:1rem; }
  .z-zoom.is-on .z-zoom-in{ padding-top:calc(76px + env(safe-area-inset-top,0px)); justify-content:flex-start; }
}
@media (max-width:760px) and (max-height:760px){ .z-zoom-card p{ display:none; } }

.z-zoom-cv{ position:absolute; inset:0; width:100%; height:100%; display:none; }
.z-zoom.is-on .has-video .z-zoom-cv{ display:block; }

/* eindscherm: exacte kopie van het laatste videobeeld, als echte tekst (scherp en leesbaar voor Google) */
.z-end{ display:none; }
.z-zoom.is-on .z-end{ display:block; position:absolute; left:50%; top:50%; width:1920px; height:1080px; transform:translate(-50%,-50%) scale(var(--es,1)); transform-origin:50% 50%;
  background:#0B0D12; color:#E9EBEF; opacity:var(--eo,0); z-index:2; pointer-events:none; overflow:hidden; }
.z-zoom.is-on.is-done .z-end{ pointer-events:auto; }
.z-end::before{ content:""; position:absolute; inset:0; background:radial-gradient(50% 60% at 85% 0%,rgba(200,18,79,.35),transparent 70%),radial-gradient(40% 50% at 0% 100%,rgba(255,61,90,.12),transparent 70%); }
.z-end-in{ position:relative; padding:80px 120px; height:100%; display:flex; flex-direction:column; }
.z-end-top{ display:flex; justify-content:space-between; align-items:center; padding-bottom:36px; border-bottom:1px solid #232835; }
.z-end-logo{ height:84px; width:auto; }
.z-end-live{ font:500 22px var(--mono); color:#9BA2AF; display:flex; align-items:center; gap:12px; }
.z-end-live i{ width:12px; height:12px; border-radius:50%; background:#1F9D63; box-shadow:0 0 0 6px rgba(31,157,99,.2); }
.z-end-k{ margin:70px 0 18px; font:600 22px var(--mono); letter-spacing:.12em; text-transform:uppercase; color:#FF3D5A; }
.z-end-h{ margin:0; font-size:92px; line-height:1.02; letter-spacing:-.04em; font-weight:700; max-width:1600px; color:#E9EBEF; }
.z-end-h span{ color:#FF3D5A; }
.z-end-lead{ margin:28px 0 0; font-size:32px; color:#9BA2AF; max-width:1250px; line-height:1.45; }
.z-end-g{ margin-top:auto; display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.z-end-c{ border:1px solid #232835; background:rgba(255,255,255,.03); border-radius:18px; padding:30px; }
.z-end-c b{ display:block; font-size:30px; margin-bottom:10px; color:#fff; letter-spacing:-.02em; }
.z-end-c p{ margin:0; font-size:22px; color:#9BA2AF; line-height:1.45; }
.z-end-c .z-ic{ width:36px; height:36px; color:#FF3D5A; margin-bottom:18px; }
/* breed scherm: eindscherm tonen; smal scherm (gsm): de responsieve info */
@media (min-aspect-ratio:5/4){ .z-zoom.is-on .z-zoom-ui-alt{ display:none; } }
@media (max-aspect-ratio:5/4){ .z-zoom.is-on .z-end{ display:none; } }
.z-zoom:not(.is-on) .z-zoom-ui-alt{ display:block; }
.z-zoom-h .z-acc{ color:var(--accent-2); }
.z-zoom-lead{ margin:-.6rem 0 1.4rem; color:var(--z-dark-muted); font-size:.98rem; line-height:1.55; max-width:60ch; }

/* alleen de video: volledig zichtbaar (niets afgesneden), vastgezet en meelopend met het scrollen */
.z-vid{ position:relative; background:#07080B; }
.z-vid-pin{ display:grid; place-items:center; padding:calc(76px + env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) 24px max(16px,env(safe-area-inset-left,0px)); }
.z-vid-box{ position:relative; width:100%; max-width:1600px; aspect-ratio:var(--ar,1.7778); border-radius:14px; overflow:hidden; background:#000; }
.z-vid-box img,.z-vid-box canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.z-vid-box canvas{ display:none; }
.z-vid.is-on{ height:420vh; }
.z-vid.is-on .z-vid-pin{ position:sticky; top:0; height:100vh; height:100svh; }
.z-vid.is-on .z-vid-box{ width:min(100%, (100svh - 76px - 48px - env(safe-area-inset-top,0px)) * var(--ar,1.7778)); }
.z-vid.is-on .z-vid-box canvas{ display:block; }
@media (max-width:760px){ .z-vid.is-on{ height:300vh; } .z-vid-box{ border-radius:10px; } }

/* vergelijking over ons: 5 partijen -> 1 partner */
.z-vs{ display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); gap:1.5rem; align-items:stretch; max-width:1080px; margin-inline:auto; }
.z-vs-card{ border-radius:18px; padding:clamp(1.6rem,3vw,2.2rem); display:flex; flex-direction:column; }
.z-vs-old{ background:var(--card); border:1px solid var(--line); box-shadow:var(--z-shadow); }
.z-vs-new{ background:var(--z-dark); color:var(--z-dark-text); border:1px solid var(--z-dark); box-shadow:0 30px 60px -28px color-mix(in srgb,var(--accent) 55%,#000); position:relative; overflow:hidden; }
.z-vs-new::before{ content:""; position:absolute; inset:0; background:radial-gradient(60% 60% at 100% 0%,color-mix(in srgb,var(--accent) 28%,transparent),transparent 70%); pointer-events:none; }
.z-vs-new > *{ position:relative; }
.z-vs-top{ display:flex; justify-content:space-between; align-items:center; gap:1rem; padding-bottom:1.1rem; margin-bottom:.4rem; border-bottom:1px solid var(--line); }
.z-vs-new .z-vs-top{ border-color:var(--z-dark-line); }
.z-vs-l{ font-family:var(--mono); font-size:.76rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); font-weight:600; }
.z-vs-new .z-vs-l{ color:var(--accent-2); }
.z-vs-n{ font-size:2.4rem; font-weight:700; letter-spacing:-.04em; line-height:1; color:var(--muted); }
.z-vs-new .z-vs-n{ color:#fff; }
.z-vs ul{ list-style:none; margin:0; padding:0; flex:1; }
.z-vs li{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:.8rem; padding:.78rem 0; border-bottom:1px solid var(--line); font-weight:550; }
.z-vs-new li{ border-color:var(--z-dark-line); }
.z-vs li:last-child{ border-bottom:0; }
.z-vs li small{ font-family:var(--mono); font-size:.72rem; color:var(--muted); white-space:nowrap; }
.z-vs-new li small{ color:var(--z-dark-muted); }
.z-vs-old li span{ color:var(--muted); }
.z-vs-ic{ width:18px; height:18px; padding:3px; border-radius:50%; flex:none; }
.z-vs-old .z-vs-ic{ color:var(--muted); background:var(--z-soft); }
.z-vs-new .z-vs-ic{ color:#fff; background:var(--accent); }
.z-vs-sum{ margin:1.2rem 0 0; padding-top:1.1rem; border-top:1px solid var(--line); font-weight:700; font-size:1.05rem; }
.z-vs-new .z-vs-sum{ border-color:var(--z-dark-line); color:#fff; }
.z-vs-mid{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.5rem; color:var(--muted); font-weight:700; font-size:1.1rem; }
.z-vs-mid span:last-child{ color:var(--accent); }
.z-vs-ar{ width:44px; height:44px; padding:11px; border-radius:50%; background:var(--accent); color:#fff; box-shadow:0 10px 24px -8px color-mix(in srgb,var(--accent) 70%,transparent); }
@media (max-width:860px){
  .z-vs{ grid-template-columns:minmax(0,1fr); max-width:560px; }
  .z-vs-mid{ flex-direction:row; }
  .z-vs-ar{ transform:rotate(90deg); }
}

/* hero: langer naast elkaar, paneel past zich aan */
@media (max-width:1080px) and (min-width:861px){
  .z-hero-grid{ grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); min-height:0; gap:2.2rem; }
  .z-panel{ max-width:none; }
  .z-h1{ font-size:clamp(2.4rem,4.6vw,3.4rem); }
}
@media (max-width:860px){ .z-panel{ max-width:560px; } }
@media (min-width:621px){ .z-row{ grid-template-columns:auto auto minmax(0,1fr); } .z-row span:last-child{ overflow:hidden; text-overflow:ellipsis; text-align:right; min-width:0; } }

/* menu (gsm/tablet): zakelijk, geen hoofdletters */
.menu-nav a{ text-transform:none; font-variation-settings:"wdth" 100; font-weight:650; letter-spacing:-.02em; }
.menu-nav a i{ font-family:var(--mono); }
.menu-cta{ background:var(--accent); color:#fff; border-radius:10px; }

/* dienstenraster: kaarten gecentreerd, zodat een onvolledige laatste rij netjes in het midden staat */
.z-svc-grid{ display:flex; flex-wrap:wrap; justify-content:center; gap:1rem; }
.z-svc-grid > .z-svc{ flex:0 1 calc((100% - 3rem) / 4); min-width:0; }
.z-svc-grid > .z-svc-feature{ flex-basis:100%; }
@media (max-width:1180px){ .z-svc-grid > .z-svc{ flex-basis:calc((100% - 2rem) / 3); } .z-svc-grid > .z-svc-feature{ flex-basis:100%; } }
@media (max-width:1080px){ .z-svc-grid > .z-svc{ flex-basis:calc((100% - 1rem) / 2); } .z-svc-grid > .z-svc-feature{ flex-basis:100%; } }
@media (max-width:620px){ .z-svc-grid > .z-svc{ flex-basis:100%; } }
/* aanbodpagina: categorietitels zakelijk (geen hoofdletters) */
.cat-head h2{ text-transform:none; font-variation-settings:"wdth" 100; letter-spacing:-.03em; }

/* offertepagina zakelijk */
.chip-ic{ grid-column:1; grid-row:1 / 3; display:grid; place-items:center; width:40px; height:40px; border-radius:11px; background:color-mix(in srgb,var(--accent) 9%,transparent); color:var(--accent); }
.chip-ic .z-ic{ width:21px; height:21px; }
.chip span:has(.chip-ic)::before{ display:none; }
.chip input:checked + span .chip-ic{ background:var(--accent); color:#fff; }
.chip input:checked + span{ border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); background:color-mix(in srgb,var(--accent) 4%,var(--card)); }
.chip input:checked + span::after{ background-color:var(--accent); border-color:var(--accent); }
.q{ background:var(--card); border:1px solid var(--line); box-shadow:var(--z-shadow); border-radius:18px; }
.q h2{ text-transform:none; font-variation-settings:"wdth" 100; letter-spacing:-.03em; }
.q [data-q-next],.q [data-q-send]{ background:var(--accent); color:#fff; }
.q [data-q-next]:hover,.q [data-q-send]:hover{ background:var(--ink); color:#fff; }
.q-more{ background:var(--z-soft); border-style:solid; border-color:transparent; }
.q-more-b{ gap:.55rem; padding:.4rem .9rem .4rem .4rem; border-radius:12px; }
.q-more-b .chip-ic{ width:30px; height:30px; border-radius:8px; }
.q-more-b .chip-ic .z-ic{ width:17px; height:17px; }
.q-more-b b{ font-weight:600; }
.q-more-b em{ font-style:normal; color:var(--muted); font-weight:700; margin-left:.15rem; }
.q-more-b:hover{ border-color:var(--accent); }
.q-more-b:hover em{ color:var(--accent); }
.q-item-n,.q-group legend{ text-transform:none; letter-spacing:-.01em; }

/* ---------- gratis website-scan ---------- */
.z-scanform{ display:flex; gap:.6rem; margin-top:2rem; max-width:640px; flex-wrap:wrap; }
.z-scan-in{ flex:1 1 280px; min-width:0; display:flex; align-items:center; gap:.6rem; padding:0 1rem; border-radius:12px; background:#fff; color:var(--ink); border:1px solid var(--line); box-shadow:0 10px 30px -14px rgba(0,0,0,.35); }
.z-scan-in .z-ic{ width:20px; height:20px; color:var(--muted); flex:none; }
.z-scan-in input{ flex:1; min-width:0; border:0; outline:0; background:transparent; font:inherit; font-size:1.05rem; padding:1rem 0; color:var(--ink); }
.z-scan-in:focus-within{ box-shadow:0 0 0 3px color-mix(in srgb,var(--accent-2) 55%,transparent); }
.z-scanform .btn{ flex:0 0 auto; }
.z-scanform-dark{ margin-top:2rem; }
@media (max-width:560px){ .z-scanform .btn{ width:100%; } }
.sc-hero .z-h1{ max-width:20ch; }

.sc-out{ padding-top:clamp(3rem,6vw,5rem); }
.sc-load{ max-width:520px; margin:0 auto; text-align:center; padding:2rem 0 3rem; }
.sc-spin{ width:56px; height:56px; margin:0 auto 1.2rem; border-radius:50%; border:4px solid var(--line); border-top-color:var(--accent); animation:scspin 1s linear infinite; }
@keyframes scspin{ to{ transform:rotate(360deg); } }
.sc-load-t{ font-size:1.2rem; margin:0 0 1.4rem; }
.sc-steps{ list-style:none; margin:0; padding:0; display:grid; gap:.55rem; text-align:left; max-width:300px; margin-inline:auto; }
.sc-steps li{ display:flex; align-items:center; gap:.7rem; color:var(--muted); transition:color .3s; }
.sc-steps li::before{ content:""; width:18px; height:18px; border-radius:50%; border:2px solid var(--line); flex:none; transition:all .3s; }
.sc-steps li.is-on{ color:var(--text); font-weight:600; }
.sc-steps li.is-on::before{ border-color:var(--accent); border-top-color:transparent; animation:scspin .8s linear infinite; }
.sc-steps li.is-done{ color:var(--text); }
.sc-steps li.is-done::before{ border-color:var(--z-ok); background:var(--z-ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/11px no-repeat; }
.sc-err{ max-width:620px; margin:0 auto; padding:1.2rem 1.4rem; border-radius:14px; background:color-mix(in srgb,#d33 9%,var(--card)); border:1px solid color-mix(in srgb,#d33 30%,var(--line)); }
.sc-demo{ margin:0 0 1.5rem; padding:.8rem 1rem; border-radius:12px; background:color-mix(in srgb,var(--z-warn) 14%,var(--card)); border:1px solid color-mix(in srgb,var(--z-warn) 35%,var(--line)); font-size:.95rem; }

.sc-ring{ --c:var(--z-ok); position:relative; display:grid; place-items:center; align-content:center; width:150px; height:150px; flex:none; border-radius:50%;
  background:radial-gradient(closest-side,var(--card) 82%,transparent 83% 100%),conic-gradient(var(--c) calc(var(--v) * 1%),var(--line) 0); transition:--v .9s; }
.sc-ring b{ font-size:2.8rem; font-weight:700; letter-spacing:-.04em; line-height:1; }
.sc-ring small{ color:var(--muted); font-size:.85rem; }
.sc-ring.is-mid{ --c:var(--z-warn); } .sc-ring.is-bad{ --c:#E5484D; } .sc-ring.is-good{ --c:var(--z-ok); }
.sc-ring.sm{ width:64px; height:64px; } .sc-ring.sm b{ font-size:1.25rem; }
.sc-top{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:1.2rem; margin-bottom:clamp(3rem,6vw,4.5rem); }
.sc-main{ display:flex; gap:1.6rem; align-items:center; padding:1.8rem; background:var(--card); border:1px solid var(--line); border-radius:18px; box-shadow:var(--z-shadow); min-width:0; }
.sc-main > div:last-child{ min-width:0; }
.sc-main .z-kicker{ margin-bottom:.3rem; }
.sc-host{ font-size:clamp(1.4rem,2.4vw,2rem); overflow-wrap:anywhere; }
.sc-verdict{ margin:.6rem 0 0; color:var(--muted); }
.sc-stats{ list-style:none; margin:1rem 0 0; padding:0; display:flex; flex-wrap:wrap; gap:.4rem; }
.sc-stats li{ display:grid; padding:.4rem .7rem; border-radius:10px; background:var(--z-soft); line-height:1.25; }
.sc-stats small{ font-size:.72rem; color:var(--muted); } .sc-stats b{ font-size:.92rem; }
.sc-cats{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.8rem; }
.sc-cat{ display:flex; align-items:center; gap:1rem; padding:1rem 1.1rem; background:var(--card); border:1px solid var(--line); border-radius:14px; min-width:0; }
.sc-cat h3{ font-size:1.02rem; } .sc-cat p{ margin:.15rem 0 0; color:var(--muted); font-size:.88rem; }
.sc-psi{ grid-column:1 / -1; }
.sc-list-head{ display:flex; justify-content:space-between; align-items:end; gap:1rem; flex-wrap:wrap; margin-bottom:1.2rem; }
.sc-filter{ display:flex; gap:.3rem; padding:.3rem; border-radius:12px; background:var(--z-soft); }
.sc-filter button{ border:0; background:transparent; font:inherit; font-weight:600; font-size:.9rem; padding:.5rem .9rem; border-radius:9px; color:var(--muted); cursor:pointer; }
.sc-filter button.is-on{ background:var(--card); color:var(--text); box-shadow:var(--z-shadow); }
.sc-filter span{ color:var(--muted); font-weight:500; margin-left:.2rem; }
.sc-list{ list-style:none; margin:0; padding:0; display:grid; gap:.6rem; }
.sc-item{ display:flex; gap:1rem; align-items:flex-start; padding:1.1rem 1.2rem; background:var(--card); border:1px solid var(--line); border-radius:14px; }
.sc-ico{ flex:none; display:grid; place-items:center; width:30px; height:30px; border-radius:50%; color:#fff; }
.sc-ico svg{ width:16px; height:16px; }
.is-ok .sc-ico{ background:var(--z-ok); } .is-warn .sc-ico{ background:var(--z-warn); } .is-fail .sc-ico{ background:#E5484D; }
.sc-body{ min-width:0; flex:1; }
.sc-row{ display:flex; justify-content:space-between; gap:1rem; align-items:baseline; }
.sc-tag{ font-family:var(--mono); font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); white-space:nowrap; }
.sc-val{ display:block; font-family:var(--mono); font-size:.82rem; color:var(--muted); margin-top:.15rem; overflow-wrap:anywhere; }
.sc-body p{ margin:.45rem 0 0; font-size:.95rem; }
.is-ok .sc-body p{ color:var(--muted); }
.sc-cta{ margin-top:2rem; display:flex; justify-content:space-between; align-items:center; gap:1.5rem; flex-wrap:wrap; padding:clamp(1.6rem,3vw,2.4rem); border-radius:18px; background:var(--z-dark); color:var(--z-dark-text); }
.sc-cta p{ margin:.5rem 0 0; color:var(--z-dark-muted); }
.sc-cta-b{ display:flex; gap:.6rem; flex-wrap:wrap; }
@media (max-width:980px){ .sc-top{ grid-template-columns:minmax(0,1fr); } }
@media (max-width:560px){ .sc-main{ flex-direction:column; align-items:flex-start; padding:1.3rem; } .sc-ring{ width:120px; height:120px; } .sc-cats{ grid-template-columns:minmax(0,1fr); } .sc-cta-b .btn{ width:100%; } }
@media (prefers-reduced-motion: reduce){ .sc-spin,.sc-steps li.is-on::before{ animation:none; } }
.z-scanform .btn{ margin-top:0; align-self:stretch; }
.z-scan-in input{ padding:.95rem 0; height:auto; line-height:1.3; box-shadow:none; border-radius:0; }
.sc-prev-note{ margin:.9rem 0 0; max-width:640px; padding:.7rem .9rem; border-radius:10px; font-size:.9rem; background:color-mix(in srgb,var(--z-warn) 18%,transparent); border:1px solid color-mix(in srgb,var(--z-warn) 45%,transparent); color:inherit; }
/* team: eigenaar bovenaan, medewerkers eronder */
.z-team.z-team-lead{ grid-template-columns:repeat(2,minmax(0,320px)); justify-content:center; max-width:none; }
.z-team.z-team-lead > .z-member:first-child{ grid-column:1 / -1; justify-self:center; width:min(100%,380px); }
@media (max-width:620px){ .z-team.z-team-lead{ grid-template-columns:minmax(0,1fr); } .z-team.z-team-lead > .z-member:first-child{ width:100%; } }
.z-team.z-team-lead{ grid-template-columns:repeat(var(--n,2),minmax(0,280px)); }
@media (max-width:980px){ .z-team.z-team-lead{ grid-template-columns:repeat(2,minmax(0,320px)); } }
@media (max-width:620px){ .z-team.z-team-lead{ grid-template-columns:minmax(0,1fr); } }
.z-member-ph{ display:grid; place-items:center; background:linear-gradient(150deg,color-mix(in srgb,var(--accent) 16%,var(--card)),var(--z-soft)); border:1px solid var(--line); }
.z-member-ph span{ font-size:clamp(4rem,9vw,6rem); font-weight:700; letter-spacing:-.04em; color:var(--accent); opacity:.85; }

/* ---------- kerncijfers, dienstenband, team-teaser, afdelingen ---------- */
.z-figs{ background:var(--z-ink,#0b1220); color:#fff; padding-block:clamp(2.2rem,4vw,3.2rem); }
.z-figs-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1.5rem; }
.z-fig{ display:flex; flex-direction:column; gap:.2rem; padding-left:1.4rem; border-left:2px solid var(--accent); min-width:0; }
.z-fig b{ font-size:clamp(2.6rem,5vw,3.8rem); line-height:1; font-weight:700; letter-spacing:-.04em; font-variant-numeric:tabular-nums; }
.z-fig span{ font-weight:600; font-size:1.05rem; }
.z-fig small{ color:rgba(255,255,255,.62); font-size:.9rem; }
.z-tick{ overflow:hidden; border-bottom:1px solid var(--line); background:var(--card); padding-block:1rem;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.z-tick ul{ display:flex; gap:3rem; width:max-content; margin:0; padding:0; list-style:none; animation:z-tick 38s linear infinite; }
.z-tick li{ display:flex; align-items:center; gap:.7rem; white-space:nowrap; font-weight:600; color:var(--muted); font-size:1.02rem; }
.z-tick li .z-ic{ width:1.25rem; height:1.25rem; color:var(--accent); }
@keyframes z-tick{ to{ transform:translateX(-50%); } }
.z-tt-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:1.5rem 2rem; flex-wrap:wrap; text-align:left; max-width:none; }
.z-tt-head > div{ max-width:44rem; min-width:0; }
.z-tt-head .btn{ flex-shrink:0; }
.z-tt-row{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(var(--n,5),minmax(0,1fr)); gap:1rem; }
.z-tt{ position:relative; border-radius:var(--r); overflow:hidden; aspect-ratio:4/5; background:var(--z-soft); max-width:100%; }
.z-tt img{ width:100%; height:100%; object-fit:cover; object-position:50% 20%; transition:transform .6s ease; }
.z-tt:hover img{ transform:scale(1.04); }
.z-tt > div{ position:absolute; inset:auto 0 0; padding:2.4rem 1rem 1rem; color:#fff; background:linear-gradient(180deg,transparent,rgba(5,10,20,.82)); display:flex; flex-direction:column; }
.z-tt b{ font-size:1.08rem; }
.z-tt span{ font-size:.85rem; opacity:.85; }
.z-member-img{ position:relative; }
.z-dep{ position:absolute; left:.8rem; top:.8rem; background:rgba(255,255,255,.92); color:#0b1220; font-size:.75rem; font-weight:600; letter-spacing:.02em; padding:.35rem .7rem; border-radius:999px; box-shadow:0 2px 10px rgba(0,0,0,.12); }
@media (max-width:980px){ .z-figs-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:2rem 1.5rem; } .z-tt-row{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:620px){ .z-tt-row{ grid-template-columns:repeat(2,minmax(0,1fr)); } .z-fig b{ font-size:2.4rem; } }
@media (prefers-reduced-motion: reduce){ .z-tick ul{ animation:none; } }
@media (max-width:620px){ .z-tt-row{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-inline:max(16px, env(safe-area-inset-left, 0px)); gap:.8rem; padding-bottom:.4rem; margin-inline:calc(-1 * max(16px, env(safe-area-inset-left, 0px))); padding-inline:max(16px, env(safe-area-inset-left, 0px)); scrollbar-width:none; }
  .z-tt-row::-webkit-scrollbar{ display:none; } .z-tt{ flex:0 0 68%; scroll-snap-align:start; } }

.z-tt-more a{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; gap:.15rem; padding:1.2rem; text-decoration:none;
  background:linear-gradient(160deg,var(--accent),color-mix(in srgb,var(--accent) 55%,#0b0d12)); color:#fff; }
.z-tt-more a > b{ font-size:clamp(2.4rem,4vw,3.2rem); line-height:1; letter-spacing:-.04em; }
.z-tt-more a > span{ font-weight:600; font-size:1rem; opacity:1; }
.z-tt-more ul{ list-style:none; margin:.8rem 0 0; padding:.8rem 0 0; border-top:1px solid rgba(255,255,255,.3); display:flex; flex-direction:column; gap:.3rem; font-size:.82rem; opacity:.92; }
.z-tt-more a:hover{ filter:brightness(1.06); }
.z-roles-wrap{ margin-top:clamp(2.5rem,5vw,4rem); }
.z-roles-h{ text-align:center; font-size:1.15rem; margin:0 0 1.4rem; color:var(--muted); font-weight:600; }
.z-roles{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; }
.z-role{ display:flex; align-items:center; gap:1rem; background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:1.2rem 1.3rem; box-shadow:var(--z-shadow); min-width:0; }
.z-role .z-ic{ flex:0 0 auto; width:2.6rem; height:2.6rem; padding:.6rem; border-radius:12px; color:var(--accent); background:color-mix(in srgb,var(--accent) 10%,var(--card)); }
.z-role div{ display:flex; flex-direction:column; min-width:0; }
.z-role b{ font-size:1rem; }
.z-role span{ color:var(--muted); font-size:.88rem; }
@media (max-width:980px){ .z-roles{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:620px){ .z-roles{ grid-template-columns:minmax(0,1fr); } }
.z-tt-more a{ justify-content:center; padding:1rem 1.1rem; }
.z-tt-more a > b{ font-size:clamp(2rem,3vw,2.6rem); }
.z-tt-more ul{ margin-top:.6rem; padding-top:.6rem; gap:.25rem; font-size:.78rem; line-height:1.3; }