/* Layout: rustig B2B-raster. Website = gebroken wit canvas met donkerblauwe ankerbanden; platform = app-shell met donkere zijbalk. Turquoise alleen voor acties en live status. */
:root{
  --navy:#10243A; --teal:#18B6A4; --teal-ink:#0B7A6E; --teal-soft:#E0F5F2; --on-teal:#08202F;
  --bg:#F7F9FB; --surface:#FFFFFF; --surface-2:#EEF3F7; --surface-3:#E4EBF1; --ink:#10243A; --ink-2:#2E4257; --muted:#5A6C7E; --line:#DFE7EE;
  --solid:#10243A; --solid-ink:#F7F9FB;
  --band:#10243A; --band-2:#16304B; --band-ink:#EAF2F8; --band-muted:#A7BBCD; --band-line:#264563;
  --ok:#14805A; --ok-bg:#E2F3EB; --warn:#9A5A08; --warn-bg:#FBF0DC; --crit:#B23A31; --crit-bg:#FBE6E4; --info:#22598F; --info-bg:#E3EDF8;
  --s1:#2a78d6; --s2:#eb6834; --s3:#1baf7a; --s4:#eda100; --s5:#e87ba4; --s6:#008300;
  --q1:#E0F5F2; --q2:#A6E3DA; --q3:#1A9C8B; --q4:#0E6B60; --q5:#0A4E46;
  --shadow:0 1px 2px rgba(16,36,58,.05),0 10px 30px rgba(16,36,58,.07);
  --logo-bg:#FFFFFF;
  --shadow-lg:0 20px 60px rgba(16,36,58,.18);
  --f-display:"Plus Jakarta Sans","Segoe UI",system-ui,sans-serif;
  --f-body:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;
  --r:14px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --teal-ink:#46D3C1; --teal-soft:#123A3A; --bg:#09131D; --surface:#101D2A; --surface-2:#162736; --surface-3:#1D3245; --ink:#E5EDF4; --ink-2:#C4D2DF; --muted:#98ACBF; --line:#21354A;
  --solid:#E5EDF4; --solid-ink:#0B1824; --band:#0B1C2D; --band-2:#13293F; --band-line:#22405C;
  --ok:#4CC793; --ok-bg:#103326; --warn:#E9A84F; --warn-bg:#36270F; --crit:#F27D72; --crit-bg:#3A1A17; --info:#82B4E9; --info-bg:#14283D;
  --s1:#3987e5; --s2:#d95926; --s3:#199e70; --s4:#c98500; --s5:#d55181; --s6:#2f9e3f;
  --q1:#123A3A; --q2:#16564F; --q3:#1A7A6E; --q4:#2BA493; --q5:#5FD3C2;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 30px rgba(0,0,0,.25); --shadow-lg:0 20px 60px rgba(0,0,0,.5); color-scheme:dark;}}
:root[data-theme="dark"]{
  --teal-ink:#46D3C1; --teal-soft:#123A3A; --bg:#09131D; --surface:#101D2A; --surface-2:#162736; --surface-3:#1D3245; --ink:#E5EDF4; --ink-2:#C4D2DF; --muted:#98ACBF; --line:#21354A;
  --solid:#E5EDF4; --solid-ink:#0B1824; --band:#0B1C2D; --band-2:#13293F; --band-line:#22405C;
  --ok:#4CC793; --ok-bg:#103326; --warn:#E9A84F; --warn-bg:#36270F; --crit:#F27D72; --crit-bg:#3A1A17; --info:#82B4E9; --info-bg:#14283D;
  --s1:#3987e5; --s2:#d95926; --s3:#199e70; --s4:#c98500; --s5:#d55181; --s6:#2f9e3f;
  --q1:#123A3A; --q2:#16564F; --q3:#1A7A6E; --q4:#2BA493; --q5:#5FD3C2;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 30px rgba(0,0,0,.25); --shadow-lg:0 20px 60px rgba(0,0,0,.5); color-scheme:dark;}

*{box-sizing:border-box}
[hidden]{display:none!important}
body{background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--surface)}
h1,h2,h3,h4{font-family:var(--f-display);line-height:1.15;margin:0;text-wrap:balance;letter-spacing:-.02em}
h1{font-size:clamp(2.1rem,4.6vw,3.6rem);font-weight:800}
h2{font-size:clamp(1.6rem,3vw,2.4rem);font-weight:750}
h3{font-size:1.15rem;font-weight:700;letter-spacing:-.01em}
p{margin:0}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--teal);outline-offset:2px;border-radius:6px}
.wrap{max-width:1200px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.eyebrow{font-family:var(--f-display);font-size:.76rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--teal-ink)}
.lead{font-size:1.13rem;color:var(--muted);max-width:62ch}
.muted{color:var(--muted)}
.small{font-size:.86rem}
.xs{font-size:.78rem}
.num{font-variant-numeric:tabular-nums}

/* header */
header.site{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:color-mix(in srgb,var(--surface) 90%,transparent);backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--line)}
header.site .wrap{display:flex;align-items:center;gap:20px;height:70px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;white-space:nowrap}
.logo .wm{display:grid;line-height:1.05}
.logo .wm b{font-family:var(--f-display);font-weight:800;font-size:1.2rem;letter-spacing:-.03em}
.logo .wm small{font-size:.66rem;color:var(--muted);letter-spacing:.02em}
nav.main{display:flex;gap:2px;margin-left:auto;align-items:center}
nav.main a{text-decoration:none;font-size:.92rem;font-weight:500;color:var(--muted);padding:8px 11px;border-radius:8px;white-space:nowrap}
nav.main a:hover,nav.main a.active{color:var(--ink);background:var(--surface-2)}
.head-actions{display:flex;gap:8px;align-items:center}
.menu-btn{display:none;background:none;border:1px solid var(--line);border-radius:10px;padding:8px;cursor:pointer}
@media (max-width:1120px){
  nav.main{display:none;position:absolute;top:70px;left:0;right:0;flex-direction:column;align-items:stretch;background:var(--surface);border-bottom:1px solid var(--line);padding:10px max(20px,env(safe-area-inset-right,0px)) 16px max(20px,env(safe-area-inset-left,0px));box-shadow:var(--shadow)}
  nav.main.open{display:flex}
  nav.main a{padding:12px}
  .menu-btn{display:inline-flex;margin-left:auto}
  .head-actions .btn-ghost{display:none}
}
@media (max-width:520px){.head-actions .btn{padding:9px 12px;font-size:.84rem}.logo .wm small{display:none}header.site .wrap{gap:10px}.logo .wm b{font-size:1.05rem}}
@media (max-width:400px){.head-actions .btn-primary{font-size:0;padding:9px 12px}.head-actions .btn-primary::after{content:"VvE-scan";font-size:.84rem}}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:11px;padding:12px 20px;font-weight:600;font-size:.95rem;text-decoration:none;border:1px solid transparent;cursor:pointer;transition:transform .15s ease,background .15s ease,box-shadow .15s ease;white-space:nowrap}
.btn:hover{transform:translateY(-1px)}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.btn-primary{background:var(--teal);color:var(--on-teal);box-shadow:0 6px 18px -8px var(--teal)}
.btn-primary:hover{background:color-mix(in srgb,var(--teal) 88%,#fff)}
.btn-solid{background:var(--solid);color:var(--solid-ink)}
.btn-ghost{background:transparent;border-color:var(--line);color:var(--ink)}
.btn-ghost:hover{background:var(--surface-2)}
.btn-danger{background:transparent;border-color:color-mix(in srgb,var(--crit) 40%,var(--line));color:var(--crit)}
.btn-band{background:transparent;border-color:var(--band-line);color:var(--band-ink)}
.btn-band:hover{background:var(--band-2)}
.btn-sm{padding:8px 14px;font-size:.86rem;border-radius:9px}
.btn-xs{padding:5px 10px;font-size:.8rem;border-radius:8px}
.link{color:var(--teal-ink);font-weight:600;text-decoration:none;display:inline-flex;gap:6px;align-items:center;background:none;border:0;padding:0;cursor:pointer}
.link:hover{text-decoration:underline}

/* sections */
.sec{padding-block:clamp(56px,8vw,96px)}
.sec-tight{padding-block:clamp(36px,5vw,60px)}
.sec-head{display:grid;gap:12px;margin-bottom:36px;max-width:760px}
.band{background:var(--band);color:var(--band-ink);position:relative;overflow:hidden}
.band .lead,.band .muted{color:var(--band-muted)}
.band .eyebrow{color:var(--teal)}
.band::after{content:"";position:absolute;inset:auto -10% -60% 40%;height:120%;background:radial-gradient(closest-side,color-mix(in srgb,var(--teal) 22%,transparent),transparent);pointer-events:none}
.band > .wrap{position:relative;z-index:1}

/* hero */
.hero{padding-block:clamp(40px,6vw,80px) clamp(48px,6vw,72px);background:radial-gradient(900px 420px at 85% 10%,var(--teal-soft),transparent 70%)}
.hero-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(28px,5vw,60px);align-items:center}
.hero-grid > *{min-width:0}
.hero h1 em{font-style:normal;color:var(--teal-ink)}
.hero .lead{margin-top:20px}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.hero-note{margin-top:22px;display:flex;gap:18px;flex-wrap:wrap;font-size:.88rem;color:var(--muted)}
.hero-note span{display:inline-flex;gap:6px;align-items:center}
.lic{display:inline-flex;align-items:center;gap:10px;padding:6px 12px 6px 6px;border:1px solid var(--line);background:var(--surface);border-radius:999px;font-size:.82rem;color:var(--muted)}
.lic b{background:var(--navy);color:#F7F9FB;font-size:.7rem;letter-spacing:.06em;padding:4px 8px;border-radius:999px}
@media (max-width:960px){.hero-grid{grid-template-columns:1fr}}

/* preview mock */
.mock{background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);overflow:hidden}
.mock-top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.mock-top .t{font-family:var(--f-display);font-weight:700;font-size:.98rem}
.mock-top .s{font-size:.8rem;color:var(--muted)}
.tag-demo{font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:4px 8px;border-radius:999px;background:var(--warn-bg);color:var(--warn);white-space:nowrap}
.seg{display:flex;gap:4px;background:var(--surface-2);padding:4px;border-radius:10px;flex-wrap:wrap}
.seg button{border:0;background:none;padding:7px 12px;border-radius:7px;font-size:.84rem;font-weight:600;color:var(--muted);cursor:pointer;white-space:nowrap}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.1)}
.mock-body{padding:16px 18px 18px;display:grid;gap:14px}
.mock-foot{font-size:.76rem;color:var(--muted);padding:10px 18px;border-top:1px solid var(--line);background:var(--surface-2)}

/* trust */
.trust{border-block:1px solid var(--line);background:var(--surface)}
.trust .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding-block:20px}
.trust div{display:flex;gap:10px;align-items:center;font-weight:600;font-size:.94rem}
.trust svg{color:var(--teal-ink);flex:none}
@media (max-width:820px){.trust .wrap{grid-template-columns:repeat(2,1fr)}}
@media (max-width:420px){.trust .wrap{grid-template-columns:1fr}}

/* grids & cards */
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.grid4>*,.grid3>*,.grid2>*{min-width:0}
@media (max-width:1000px){.grid4{grid-template-columns:repeat(2,1fr)}.grid3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.grid4,.grid3,.grid2{grid-template-columns:1fr}}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:24px;display:flex;flex-direction:column;gap:12px}
.svc{transition:transform .2s ease,box-shadow .2s ease,border-color .2s}
.svc:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:color-mix(in srgb,var(--teal) 45%,var(--line))}
.ic{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;background:var(--teal-soft);color:var(--teal-ink);flex:none}
.svc p{color:var(--muted);font-size:.95rem;flex:1}
.svc-main{grid-column:span 2;background:var(--band);color:var(--band-ink);border-color:var(--band-line);position:relative;overflow:hidden}
.svc-main p{color:var(--band-muted)}
.svc-main .ic{background:color-mix(in srgb,var(--teal) 18%,transparent);color:var(--teal)}
.svc-main .link{color:var(--teal)}
.svc-main ul{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:6px 18px;font-size:.92rem}
.svc-main li{display:flex;gap:8px;align-items:center}
.svc-main li svg{color:var(--teal);flex:none}
@media (max-width:1000px){.svc-main{grid-column:span 2}}
@media (max-width:640px){.svc-main{grid-column:auto}.svc-main ul{grid-template-columns:1fr}}

/* steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);position:relative}
.steps::before{content:"";position:absolute;top:22px;left:22px;right:22px;height:2px;background:linear-gradient(90deg,var(--teal),var(--line))}
.step{position:relative;padding-right:20px;display:grid;gap:10px;align-content:start}
.step .dot{width:46px;height:46px;border-radius:50%;background:var(--surface);border:2px solid var(--teal);display:grid;place-items:center;font-family:var(--f-display);font-weight:800;color:var(--teal-ink);position:relative;z-index:1}
.step p{color:var(--muted);font-size:.95rem}
@media (max-width:820px){.steps{grid-template-columns:1fr;gap:22px}.steps::before{top:22px;bottom:22px;left:22px;right:auto;width:2px;height:auto;background:linear-gradient(var(--teal),var(--line))}.step{grid-template-columns:46px 1fr;column-gap:16px;padding:0}.step .dot{grid-row:span 2}}

/* split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);align-items:center}
.split>*{min-width:0}
@media (max-width:920px){.split{grid-template-columns:1fr}}
.checks{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:12px}
.checks.two{grid-template-columns:1fr 1fr;gap:12px 24px}
@media (max-width:560px){.checks.two{grid-template-columns:1fr}}
.checks li{display:flex;gap:10px;align-items:flex-start}
.checks svg{color:var(--teal-ink);flex:none;margin-top:3px}
.band .checks svg{color:var(--teal)}
.feat{display:grid;gap:10px}
.feat h3{display:flex;gap:10px;align-items:center}

/* page head */
.phead{padding-block:clamp(44px,6vw,80px) clamp(32px,4vw,52px);background:radial-gradient(800px 360px at 90% 0%,var(--teal-soft),transparent 70%)}
.phead .wrap{display:grid;gap:16px}
.crumbs{font-size:.84rem;color:var(--muted)}
.crumbs a{text-decoration:none}.crumbs a:hover{text-decoration:underline}

/* accordion */
details.acc{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:0 20px}
details.acc+details.acc{margin-top:10px}
details.acc summary{cursor:pointer;list-style:none;padding:18px 0;display:flex;justify-content:space-between;align-items:center;gap:16px;font-family:var(--f-display);font-weight:700}
details.acc summary::-webkit-details-marker{display:none}
details.acc summary::after{content:"+";font-size:1.4rem;color:var(--teal-ink);font-weight:500;transition:transform .2s;flex:none}
details.acc[open] summary::after{transform:rotate(45deg)}
details.acc .acc-b{padding:0 0 20px;color:var(--muted);display:grid;gap:12px}
.kv{display:grid;grid-template-columns:150px 1fr;gap:6px 16px;font-size:.94rem;margin:0}
.kv dt{font-weight:600;color:var(--ink)}
.kv dd{margin:0}
@media (max-width:560px){.kv{grid-template-columns:1fr}.kv dd{margin-bottom:8px}}

.callout{border-radius:var(--r);padding:18px 20px;display:flex;gap:14px;align-items:flex-start;background:var(--info-bg);color:var(--ink)}
.callout svg{color:var(--info);flex:none;margin-top:2px}
.cta-band{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:clamp(24px,4vw,40px);display:flex;gap:24px;align-items:center;justify-content:space-between;flex-wrap:wrap;box-shadow:var(--shadow)}
.cta-band>div,.cta-band>form{min-width:0;flex:1 1 260px}

/* tables */
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
table{width:100%;border-collapse:collapse;font-size:.9rem}
th,td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
th{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:600;background:var(--surface-2);white-space:nowrap}
tr:last-child td{border-bottom:0}
td.c,th.c{text-align:center}
td.r,th.r{text-align:right}
.yes{color:var(--ok);font-weight:700}.no{color:var(--muted)}
tr.click{cursor:pointer}
tr.click:hover td{background:var(--surface-2)}

/* forms */
.form{display:grid;gap:16px;grid-template-columns:minmax(0,1fr)}
.form>*{min-width:0}
.drop input[type=file]{width:100%}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.f2>*{min-width:0}
@media (max-width:620px){.f2{grid-template-columns:1fr}}
label.fl{display:grid;gap:6px;font-size:.88rem;font-weight:600}
label.fl small{font-weight:400;color:var(--muted)}
input[type=text],input[type=email],input[type=tel],input[type=number],input[type=date],select,textarea{width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:10px;background:var(--surface);font-weight:400;font-size:.95rem}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px color-mix(in srgb,var(--teal) 25%,transparent)}
textarea{min-height:90px;resize:vertical}
.err{color:var(--crit);font-size:.84rem;font-weight:500}
.choice-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media (max-width:560px){.choice-grid{grid-template-columns:1fr}}
.choice{display:flex;gap:12px;align-items:flex-start;padding:16px;border:1.5px solid var(--line);border-radius:12px;cursor:pointer;background:var(--surface);transition:border-color .15s,background .15s}
.choice:hover{border-color:color-mix(in srgb,var(--teal) 50%,var(--line))}
.choice input{margin-top:4px;accent-color:var(--teal);width:18px;height:18px;flex:none}
.choice:has(input:checked){border-color:var(--teal);background:var(--teal-soft)}
.choice b{display:block;font-size:.97rem}
.choice span{font-size:.85rem;color:var(--muted)}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:.9rem}
.consent input{margin-top:4px;accent-color:var(--teal);width:18px;height:18px;flex:none}
.drop{border:1.5px dashed var(--line);border-radius:12px;padding:18px;text-align:center;color:var(--muted);font-size:.9rem;background:var(--surface-2)}
.drop input{margin-top:8px;max-width:100%}

/* wizard */
.wiz{display:grid;grid-template-columns:270px 1fr;gap:28px;align-items:start}
.wiz>*{min-width:0}
@media (max-width:900px){.wiz{grid-template-columns:1fr}.wiz-side{display:none}}
.wiz-side{position:sticky;top:96px}
.wiz-side ol{padding:0;margin:0;display:grid;gap:4px}
.wiz-side li{list-style:none;display:flex;gap:12px;align-items:center;padding:10px 12px;border-radius:10px;color:var(--muted);font-size:.94rem}
.wiz-side li .n{width:28px;height:28px;border-radius:50%;border:1.5px solid var(--line);display:grid;place-items:center;font-size:.8rem;font-weight:700;flex:none;background:var(--surface)}
.wiz-side li.cur{background:var(--surface);color:var(--ink);font-weight:600;box-shadow:var(--shadow)}
.wiz-side li.cur .n{border-color:var(--teal);color:var(--teal-ink)}
.wiz-side li.done .n{background:var(--teal);border-color:var(--teal);color:var(--on-teal)}
.wiz-card{background:var(--surface);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow);overflow:hidden}
.prog{height:6px;background:var(--surface-2)}
.prog i{display:block;height:100%;background:var(--teal);transition:width .35s ease}
.wiz-in{padding:clamp(20px,4vw,36px);display:grid;gap:22px}
.wiz-meta{display:flex;justify-content:space-between;font-size:.84rem;color:var(--muted);gap:10px;flex-wrap:wrap}
fieldset{border:0;padding:0;margin:0;display:grid;gap:18px;min-width:0}
legend{font-family:var(--f-display);font-weight:750;font-size:1.4rem;letter-spacing:-.02em;margin-bottom:4px;padding:0}
.wiz-nav{display:flex;justify-content:space-between;gap:12px;border-top:1px solid var(--line);padding-top:20px;margin-top:22px}
.result{display:grid;gap:18px}
.ok-ic{width:56px;height:56px;border-radius:50%;background:var(--ok-bg);color:var(--ok);display:grid;place-items:center}
.ref{font-family:var(--f-display);font-weight:700;background:var(--surface-2);padding:4px 10px;border-radius:8px}

/* pills */
.pill{display:inline-flex;align-items:center;gap:6px;font-size:.73rem;font-weight:600;padding:3px 9px;border-radius:999px;white-space:nowrap;line-height:1.5}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.p-ok{background:var(--ok-bg);color:var(--ok)}.p-warn{background:var(--warn-bg);color:var(--warn)}.p-crit{background:var(--crit-bg);color:var(--crit)}.p-info{background:var(--info-bg);color:var(--info)}.p-mute{background:var(--surface-2);color:var(--muted)}.p-teal{background:var(--teal-soft);color:var(--teal-ink)}
.chip{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);border:1px solid var(--line);padding:2px 6px;border-radius:6px;white-space:nowrap}
.sw{display:inline-block;width:10px;height:10px;border-radius:3px;flex:none}

/* knowledge */
.art{transition:border-color .2s}
.art:hover{border-color:var(--teal)}
.art .cat{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--teal-ink)}

/* footer */
footer.site{background:var(--band);color:var(--band-muted);font-size:.92rem}
footer.site .wrap{padding-block:56px 32px;display:grid;gap:40px}
.f-cols{display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:28px}
.f-cols>*{min-width:0}
.f-cols h4{color:var(--band-ink);font-size:.92rem;margin-bottom:12px}
.f-cols a{display:block;text-decoration:none;padding:4px 0}
.f-cols a:hover{color:var(--band-ink)}
.f-legal{border-top:1px solid var(--band-line);padding-top:20px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.8rem}
@media (max-width:900px){.f-cols{grid-template-columns:1fr 1fr}}
footer .logo .wm small{color:var(--band-muted)}
footer .logo{color:var(--band-ink)}


/* insurer logos */
.ins-logos{display:flex;align-items:center;gap:14px 24px;flex-wrap:wrap}
.ins-logos>span{font-size:.84rem;color:var(--muted);font-weight:500}
.ins-logos .logos{display:flex;gap:12px;flex-wrap:wrap}
.ins-logos .lg{background:var(--logo-bg);border:1px solid var(--line);border-radius:12px;height:62px;padding:0 20px;display:grid;place-items:center}
.ins-logos img{display:block;width:auto;max-width:150px}
.prod{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.prod>div{min-width:0}
.prod h4{font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;color:var(--teal-ink);margin-bottom:8px}
.prod ul{margin:0;padding-left:18px;display:grid;gap:5px;color:var(--ink-2);font-size:.92rem}
@media (max-width:820px){.prod{grid-template-columns:1fr}}
.figs{display:flex;flex-wrap:wrap;gap:8px}
.fig{background:var(--teal-soft);color:var(--teal-ink);border-radius:9px;padding:6px 10px;font-size:.82rem;font-weight:600}
.fig b{font-family:var(--f-display);font-weight:800}


/* blog */
.bl-filter{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px}
.bl-filter button{border:1.5px solid var(--line);background:var(--surface);color:var(--ink-2);padding:8px 14px;border-radius:999px;font-weight:600;font-size:.86rem;cursor:pointer}
.bl-filter button[aria-pressed="true"]{border-color:var(--teal);background:var(--teal-soft);color:var(--teal-ink)}
.bl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.bl-grid>*{min-width:0}
@media (max-width:1000px){.bl-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.bl-grid{grid-template-columns:1fr}}
.bl-card{background:var(--surface);border:1px solid var(--line);border-radius:18px;overflow:hidden;display:flex;flex-direction:column;text-decoration:none;color:inherit;transition:transform .2s,box-shadow .2s,border-color .2s}
.bl-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:color-mix(in srgb,var(--teal) 45%,var(--line))}
.bl-art{height:140px;position:relative;display:flex;align-items:flex-end;padding:16px;background:var(--band);overflow:hidden}
.bl-art::before{content:"";position:absolute;inset:0;background:radial-gradient(260px 160px at 85% 10%,color-mix(in srgb,var(--c) 55%,transparent),transparent 70%),radial-gradient(200px 140px at 0% 100%,color-mix(in srgb,var(--teal) 30%,transparent),transparent 70%)}
.bl-art svg{position:absolute;right:18px;top:18px;color:color-mix(in srgb,var(--c) 70%,#fff);opacity:.9}
.bl-art .chip{position:relative;color:var(--band-ink);border-color:var(--band-line);background:rgba(255,255,255,.06)}
.bl-body{padding:20px;display:grid;gap:8px;flex:1;align-content:start}
.bl-body h3{font-size:1.12rem;line-height:1.3}
.bl-body p{color:var(--muted);font-size:.92rem}
.bl-meta{margin-top:auto;padding:0 20px 18px;font-size:.8rem;color:var(--muted);display:flex;gap:10px}
.bl-feat{grid-column:1/-1;display:grid;grid-template-columns:1.1fr 1fr;grid-template-rows:1fr auto}
.bl-feat .bl-art{grid-row:1/3}
.toc .cta a.btn{color:var(--on-teal);border-left:0;padding:8px 14px}
.bl-feat .bl-art{height:auto;min-height:260px}
.bl-feat .bl-body h3{font-size:clamp(1.4rem,2.4vw,1.9rem)}
.bl-feat .bl-body{padding:32px;align-content:center}
.bl-feat .bl-meta{padding:0 32px 28px}
@media (max-width:820px){.bl-feat{grid-template-columns:1fr;grid-template-rows:auto}.bl-feat .bl-art{min-height:160px;grid-row:auto}}
.ar-head{background:var(--band);color:var(--band-ink);position:relative;overflow:hidden}
.ar-head::after{content:"";position:absolute;inset:auto -10% -70% 45%;height:140%;background:radial-gradient(closest-side,color-mix(in srgb,var(--c,var(--teal)) 30%,transparent),transparent)}
.ar-head .wrap{position:relative;z-index:1;padding-block:clamp(44px,6vw,84px) clamp(36px,5vw,60px);display:grid;gap:16px;max-width:980px}
.ar-head .crumbs,.ar-head .crumbs a{color:var(--band-muted)}
.ar-head h1{font-size:clamp(2rem,4.2vw,3.2rem)}
.ar-head .lead{color:var(--band-muted)}
.ar-meta{display:flex;gap:16px;flex-wrap:wrap;font-size:.86rem;color:var(--band-muted)}
.ar-meta b{color:var(--band-ink);font-weight:600}
.ar-wrap{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:56px;align-items:start;padding-block:48px 24px}
@media (max-width:1000px){.ar-wrap{grid-template-columns:minmax(0,1fr)}.toc{display:none}}
.prose{overflow-wrap:anywhere}
.toc{position:sticky;top:96px;display:grid;gap:4px;font-size:.88rem}
.toc b{font-family:var(--f-display);font-size:.78rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-bottom:6px}
.toc a{text-decoration:none;color:var(--muted);padding:6px 10px;border-left:2px solid var(--line);line-height:1.35}
.toc a:hover,.toc a.on{color:var(--ink);border-left-color:var(--teal)}
.toc .cta{margin-top:18px;padding:16px;border-radius:14px;background:var(--teal-soft);display:grid;gap:10px}
.toc .cta p{color:var(--ink-2);font-size:.86rem}
.prose{max-width:70ch;font-size:1.06rem;line-height:1.75;color:var(--ink-2)}
.prose .intro{font-size:1.2rem;line-height:1.65;color:var(--ink);margin-bottom:8px}
.prose h2{font-size:clamp(1.4rem,2.2vw,1.75rem);color:var(--ink);margin:2.2em 0 .6em;scroll-margin-top:100px}
.prose h3{font-size:1.15rem;color:var(--ink);margin:1.6em 0 .4em}
.prose p{margin:0 0 1em}
.prose ul,.prose ol{margin:0 0 1.2em;padding-left:1.3em;display:grid;gap:.4em}
.prose li::marker{color:var(--teal-ink)}
.prose strong,.prose b{color:var(--ink)}
.prose table{width:100%;border-collapse:collapse;font-size:.92rem;margin:0}
.prose .tw{overflow-x:auto;border:1px solid var(--line);border-radius:12px;margin:1.4em 0;background:var(--surface)}
.prose th,.prose td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;line-height:1.5}
.prose th{background:var(--surface-2);font-size:.76rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.prose tr:last-child td{border-bottom:0}
.prose aside.tip{margin:1.6em 0;padding:18px 20px;border-radius:14px;background:var(--teal-soft);color:var(--ink)}
.prose aside.tip b{font-family:var(--f-display);color:var(--teal-ink);display:block;margin-bottom:4px}
.prose aside.tip p:last-child{margin:0}
.ar-foot{padding-block:24px 72px}
.ar-cta{background:var(--band);color:var(--band-ink);border-radius:20px;padding:clamp(22px,4vw,36px);display:flex;gap:20px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:40px}
.ar-cta>div{flex:1 1 320px;min-width:0}
.ar-cta p{color:var(--band-muted);margin-top:6px}


/* photos */
.phead.pimg .wrap{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:center;column-gap:clamp(24px,5vw,56px)}
.phead.pimg .wrap>*:not(.ph-fig){grid-column:1}
.ph-fig{grid-column:2;grid-row:1 / span 8;margin:0;border-radius:22px;overflow:hidden;aspect-ratio:4/3;box-shadow:var(--shadow);max-width:100%}
.ph-fig img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:900px){.phead.pimg .wrap{grid-template-columns:1fr}.ph-fig{grid-column:1;grid-row:auto;aspect-ratio:16/9}}
.svc .thumb{margin:-24px -24px 6px;height:150px;overflow:hidden}
.svc .thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease}
.svc:hover .thumb img{transform:scale(1.05)}
.svc{overflow:hidden}
.svc-main{background:var(--band)}
.svc-main .bgimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.28}
.svc-main>*:not(.bgimg){position:relative;z-index:1}
.mosaic{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:200px 200px;gap:12px}
.mosaic>div{border-radius:18px;overflow:hidden;min-width:0;position:relative}
.mosaic img{width:100%;height:100%;object-fit:cover;display:block}
.mosaic .m1{grid-row:span 2}
.mosaic span{position:absolute;left:12px;bottom:12px;background:rgba(7,18,29,.72);color:#F2F7FB;font-size:.8rem;font-weight:600;padding:5px 10px;border-radius:8px}
@media (max-width:760px){.mosaic{grid-template-columns:1fr 1fr;grid-template-rows:200px 150px 150px}.mosaic .m1{grid-column:span 2;grid-row:auto}}
.team{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.team>*{min-width:0}
@media (max-width:1000px){.team{grid-template-columns:repeat(3,1fr)}}
@media (max-width:600px){.team{grid-template-columns:1fr 1fr}}
.member{display:grid;gap:10px}
.member .pt{border-radius:18px;overflow:hidden;aspect-ratio:4/5;background:var(--surface-2)}
.member .pt img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease}
.member:hover .pt img{transform:scale(1.04)}
.member b{font-family:var(--f-display);display:block}
.member span{font-size:.86rem;color:var(--muted)}
.yrs{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.yrs div{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:16px}
.yrs b{font-family:var(--f-display);font-weight:800;font-size:2rem;line-height:1;color:var(--teal-ink);display:block}
.yrs span{font-size:.84rem;color:var(--muted)}
.quote{margin:0;font-family:var(--f-display);font-size:clamp(1.15rem,1.9vw,1.45rem);font-weight:600;line-height:1.4;border-left:3px solid var(--teal);padding-left:18px;color:var(--ink)}
.bl-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55;transition:transform .6s ease}
.bl-card:hover .bl-art img{transform:scale(1.05)}
.bl-art::before{z-index:1}
.bl-art .chip,.bl-art svg{z-index:2}
.ar-head .arbg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.22}
.contact-person{display:flex;gap:14px;align-items:center}
.contact-person img{width:72px;height:72px;border-radius:50%;object-fit:cover;object-position:center 20%}


/* hero photo */
.hero-photo{position:relative;overflow:hidden;background:#07121D;color:#F2F7FB;padding-block:clamp(56px,8vw,104px) clamp(56px,7vw,88px)}
.hero-photo .hero-bg{position:absolute;inset:0;background:url(/img/hero.webp) center 30%/cover no-repeat}
.hero-photo .hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,18,29,.95) 0%,rgba(7,18,29,.84) 45%,rgba(7,18,29,.45) 78%,rgba(7,18,29,.35) 100%),linear-gradient(0deg,rgba(7,18,29,.6),transparent 40%)}
@media (max-width:960px){.hero-photo .hero-bg::after{background:linear-gradient(180deg,rgba(7,18,29,.8),rgba(7,18,29,.95))}}
.hero-photo .wrap{position:relative;z-index:1}
.hero-photo h1{color:#F2F7FB}
.hero-photo h1 em{color:var(--teal)}
.hero-photo .lead{color:rgba(232,240,247,.84)}
.hero-photo .hero-note{color:rgba(232,240,247,.78)}
.hero-photo .hero-note svg{color:var(--teal)!important}
.hero-photo .mock{box-shadow:0 30px 80px rgba(0,0,0,.5);border-color:transparent;color:var(--ink)}
.lic-dark{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);color:rgba(232,240,247,.86);backdrop-filter:blur(8px)}
.lic-dark b{background:#F2F7FB;color:#10243A}
.btn-glass{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.24);color:#F2F7FB;backdrop-filter:blur(8px)}
.btn-glass:hover{background:rgba(255,255,255,.15)}
/* scan contract blocks */
.cblock{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--surface)}
.cblock-h{display:flex;align-items:center;gap:12px;padding:14px 16px;background:var(--surface-2);border-bottom:1px solid var(--line)}
.cblock-h .ic{width:36px;height:36px;border-radius:10px}
.cblock-h b{font-family:var(--f-display);font-size:1.02rem}
.cblock-h small{display:block;color:var(--muted);font-size:.8rem}
.cblock-b{padding:16px;display:grid;gap:14px}
.citem{border:1px dashed var(--line);border-radius:12px;padding:14px;display:grid;gap:12px;position:relative}
.citem-h{display:flex;justify-content:space-between;align-items:center;gap:10px}
.citem-h b{font-size:.88rem;color:var(--teal-ink)}
.citem-x{background:none;border:0;color:var(--muted);font-size:.82rem;cursor:pointer;text-decoration:underline}
.f3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.f3>*{min-width:0}
@media (max-width:760px){.f3{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.f3{grid-template-columns:1fr}}
.f3 label.fl,.f2 label.fl{font-size:.82rem}
.cadd{justify-self:start;background:none;border:1.5px dashed var(--teal);color:var(--teal-ink);font-weight:600;font-size:.86rem;padding:8px 14px;border-radius:10px;cursor:pointer}
.cadd:hover{background:var(--teal-soft)}
.unknown{display:flex;gap:8px;align-items:center;font-size:.84rem;color:var(--muted)}
.unknown input{accent-color:var(--teal)}
.cres{font-size:.86rem}


.cdoc{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding-top:4px;border-top:1px solid var(--line)}
.cdoc-btn{position:relative;display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:9px;border:1px solid var(--line);background:var(--surface-2);font-size:.84rem;font-weight:600;cursor:pointer;color:var(--ink-2)}
.cdoc-btn:hover{border-color:var(--teal)}
.cdoc-btn input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}
.cdoc-btn:focus-within{outline:3px solid var(--teal);outline-offset:2px}
.cdoc-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.cdoc-list li{display:inline-flex;align-items:center;gap:6px;background:var(--teal-soft);color:var(--teal-ink);border-radius:999px;padding:4px 6px 4px 10px;font-size:.8rem;font-weight:600;max-width:100%}
.cdoc-list li span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:220px}
.cdoc-list button{border:0;background:none;color:inherit;cursor:pointer;font-size:1rem;line-height:1;padding:0 4px}
.res-head{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.res-head>div:last-child{min-width:0;flex:1}
.res-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
@media (max-width:700px){.res-kpis{grid-template-columns:1fr 1fr}}
.res-kpis div{background:var(--surface-2);border-radius:12px;padding:12px 14px;display:grid;gap:2px}
.res-kpis span{font-size:.78rem;color:var(--muted)}
.res-kpis b{font-family:var(--f-display);font-size:1.35rem;font-variant-numeric:tabular-nums}
.res-cats{display:grid;gap:10px}
.res-cat{border:1px solid var(--line);border-radius:12px;overflow:hidden}
.res-cat-h{display:flex;gap:10px;align-items:center;padding:10px 12px;background:var(--surface-2)}
.res-cat-h b{flex:1}
.res-row{padding:10px 14px;border-top:1px solid var(--line);font-size:.88rem;color:var(--ink-2)}
.res-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
@media (max-width:760px){.res-steps{grid-template-columns:1fr 1fr}}
@media (max-width:460px){.res-steps{grid-template-columns:1fr}}
.res-steps>div{border:1px solid var(--line);border-radius:12px;padding:14px;display:grid;gap:4px;align-content:start}
.res-steps i{font-style:normal;width:26px;height:26px;border-radius:50%;background:var(--teal);color:var(--on-teal);display:grid;place-items:center;font-weight:700;font-size:.8rem}
.res-steps span{font-size:.84rem;color:var(--muted)}
.mailwin{border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:var(--shadow);background:var(--surface)}
.mailwin-h{padding:12px 16px;border-bottom:1px solid var(--line);display:grid;gap:4px;font-size:.84rem;background:var(--surface)}
.mailwin-h div{display:flex;gap:10px;min-width:0;overflow-wrap:anywhere}
.mailwin-h span{color:var(--muted);width:72px;flex:none}
.mailwin-b{overflow-x:auto;background:#F2F5F8;color-scheme:light}


/* demo: alleen menu-navigatie */
.locked .item.act,.locked tr.click,.locked .kpi[data-fcat]{cursor:default}
.locked .item.act:hover{border-color:var(--line)}
.locked tr.click:hover td{background:transparent}
.locked [data-act],.locked button[data-link],.locked .side .foot button{display:none!important}
.locked .chart [data-tip]:hover{opacity:1}


/* aanvraagomgeving */
.aq-head{position:relative;background:var(--band);color:var(--band-ink);overflow:hidden}
.aq-head::before{content:"";position:absolute;inset:0;background:var(--bg,none) center/cover no-repeat;opacity:.28}
.aq-head::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,18,29,.92),rgba(7,18,29,.6))}
.aq-head .wrap{position:relative;z-index:1;padding-block:clamp(32px,5vw,56px);display:grid;gap:18px}
.aq-head .crumbs,.aq-head .crumbs a{color:var(--band-muted)}
.aq-head h1{font-size:clamp(1.8rem,3.6vw,2.6rem);color:#F2F7FB}
.aq-title{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.aq-logo{width:72px;height:72px;object-fit:contain;background:#fff;border-radius:14px;padding:6px}
.aq-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.aq-steps li{display:flex;gap:10px;align-items:center;padding:12px;border-radius:12px;background:rgba(255,255,255,.06);border:1px solid var(--band-line)}
.aq-steps i{font-style:normal;width:28px;height:28px;border-radius:50%;border:2px solid var(--band-line);display:grid;place-items:center;font-weight:700;font-size:.8rem;flex:none}
.aq-steps li.done i{background:var(--teal);border-color:var(--teal);color:var(--on-teal)}
.aq-steps li.cur{border-color:var(--teal)}
.aq-steps li.cur i{border-color:var(--teal);color:var(--teal)}
.aq-steps b{display:block;font-size:.9rem;color:#F2F7FB}
.aq-steps span{font-size:.76rem;color:var(--band-muted)}
@media (max-width:760px){.aq-steps{grid-template-columns:1fr 1fr}}
.aq-live{background:var(--band);border-radius:18px;padding:22px 24px;display:flex;gap:20px;align-items:center;justify-content:space-between;flex-wrap:wrap;box-shadow:var(--shadow)}
.aq-live>div{flex:1 1 320px;min-width:0}
.aq-live p{color:var(--band-muted);margin-top:6px}
.aq-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:24px;align-items:start;padding-block:28px 72px}
@media (max-width:1000px){.aq-grid{grid-template-columns:1fr}}
.aq-main,.aq-aside{display:grid;gap:18px;min-width:0}
.aq-aside{position:sticky;top:96px}
@media (max-width:1000px){.aq-aside{position:static}}
.aq-card{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:22px;display:grid;gap:16px;min-width:0}
.aq-card-h h2{font-size:1.25rem}
.aq-card-h p{color:var(--muted);font-size:.92rem;margin-top:4px}
.aq-media{display:grid;grid-template-columns:minmax(0,1fr) 170px;gap:16px}
@media (max-width:600px){.aq-media{grid-template-columns:1fr}}
.aq-pand,.aq-logo-up,.aq-face{position:relative;display:grid;place-items:center;border:1.5px dashed var(--line);border-radius:14px;background:var(--surface-2);cursor:pointer;overflow:hidden;text-align:center;color:var(--muted)}
.aq-pand:hover,.aq-logo-up:hover,.aq-face:hover{border-color:var(--teal)}
.aq-pand:focus-within,.aq-logo-up:focus-within,.aq-face:focus-within{outline:3px solid var(--teal);outline-offset:2px}
.aq-pand{aspect-ratio:16/10;max-width:100%}
.aq-pand span,.aq-logo-up span{display:grid;gap:4px;justify-items:center;padding:10px}
.aq-pand b,.aq-logo-up b{color:var(--ink);font-size:.9rem}
.aq-pand small,.aq-logo-up small{font-size:.76rem}
.aq-pand img{width:100%;height:100%;object-fit:cover}
.aq-pand.has,.aq-logo-up.has,.aq-face.has{border-style:solid}
.aq-side-media{display:grid;gap:12px;align-content:start;justify-items:center}
.aq-logo-up{width:100%;height:100px;background:var(--surface-2)}
.aq-logo-up.has{background:#fff}
.aq-logo-up img{max-width:85%;max-height:80px;object-fit:contain}
.aq-face{width:96px;height:96px;border-radius:50%}
.aq-face img{width:100%;height:100%;object-fit:cover}
.aq-pand input,.aq-logo-up input,.aq-face input{position:absolute;inset:0;opacity:0;cursor:pointer}
.aq-rm{font-size:.8rem}
.aq-addr input,.aq-addr select{padding:8px 10px;font-size:.88rem;min-width:0}
.aq-addr td{padding:6px 6px}
.aq-addr td:first-child input{min-width:140px}
.aq-addr select{min-width:132px}
.aq-addr td:nth-child(7) input{min-width:120px}
.aq-chips{display:flex;flex-wrap:wrap;gap:6px}
.aq-chips span{font-size:.78rem;padding:4px 9px;border-radius:999px;background:var(--surface-2);color:var(--ink-2)}
.aq-chips .more{background:var(--teal-soft);color:var(--teal-ink);font-weight:600}
.aq-c{border:1px solid var(--line);border-radius:12px;overflow:hidden}
.aq-c-h{display:flex;gap:12px;align-items:center;padding:12px 14px;background:var(--surface-2);flex-wrap:wrap}
.aq-c-h>div{flex:1 1 180px!important}
.aq-c-b{padding:12px 14px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.aq-ean{display:flex;gap:8px;align-items:center;flex:1 1 260px}
.aq-ean input{padding:8px 10px;font-size:.88rem}
.aq-ok{display:flex;gap:12px;align-items:center;padding:12px 14px;border-radius:12px;background:var(--ok-bg);color:var(--ok);flex-wrap:wrap}
.aq-ok>div{flex:1;min-width:0}
.aq-ok b{display:block;color:var(--ink)}
.aq-ok span{font-size:.84rem;color:var(--muted)}
.aq-progress b{font-family:var(--f-display);font-size:1.05rem}
.aq-bar{height:8px;border-radius:99px;background:var(--surface-2);overflow:hidden}
.aq-bar i{display:block;height:100%;background:var(--teal);transition:width .4s}
.aq-progress ul,.aq-lock ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:.88rem}
.aq-progress li{display:flex;gap:8px;align-items:flex-start;color:var(--muted)}
.aq-progress li.ok{color:var(--ink)}
.aq-progress li.ok svg{color:var(--ok)}
.aq-progress li em{font-style:normal;font-size:.76rem;color:var(--muted)}
.aq-lock{background:var(--surface-2)}
.aq-lock b{display:flex;gap:8px;align-items:center;font-family:var(--f-display)}
.aq-lock li{padding-left:16px;position:relative;color:var(--muted)}
.aq-lock li::before{content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;border-radius:50%;background:var(--teal)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.passport.has-photo .pp-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.3;z-index:0}
.passport .pp-logo{width:56px;height:56px;object-fit:contain;background:#fff;border-radius:12px;padding:4px;margin-bottom:10px}
.me-logo{height:34px;max-width:90px;object-fit:contain;background:#fff;border-radius:8px;padding:3px;border:1px solid var(--line)}

/* ================= APP ================= */
#appRoot{min-height:100vh}
.app{display:grid;grid-template-columns:248px 1fr;min-height:100vh;background:linear-gradient(90deg,var(--band) 248px,transparent 248px)}
.app>*{min-width:0}
.side{background:var(--band);color:var(--band-ink);padding:16px 12px calc(16px + env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px));display:flex;flex-direction:column;gap:2px;position:sticky;top:0;height:100vh;overflow-y:auto}
.side .logo{padding:6px 8px 18px;color:var(--band-ink)}
.side .logo .wm small{color:var(--band-muted)}
.side .grp{font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--band-muted);padding:14px 12px 6px;font-weight:600}
.side button.nav{background:none;border:0;color:var(--band-muted);text-align:left;padding:9px 12px;border-radius:9px;cursor:pointer;font-weight:500;display:flex;gap:11px;align-items:center;font-size:.92rem;width:100%}
.side button.nav:hover{color:var(--band-ink);background:var(--band-2)}
.side button.nav[aria-current="true"]{background:var(--band-2);color:var(--band-ink);box-shadow:inset 3px 0 0 var(--teal)}
.side .cnt{margin-left:auto;background:var(--teal);color:var(--on-teal);font-size:.7rem;font-weight:700;padding:1px 7px;border-radius:999px}
.side .foot{margin-top:auto;padding:12px;border-top:1px solid var(--band-line);font-size:.78rem;color:var(--band-muted);display:grid;gap:8px}
.side .foot a{color:var(--band-ink)}
.topbar{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px;padding:12px max(24px,env(safe-area-inset-right,0px)) 12px 24px;flex-wrap:wrap}
.topbar .ttl{font-family:var(--f-display);font-weight:750;font-size:1.15rem;margin-right:auto;min-width:0}
.topbar .ttl small{display:block;font-family:var(--f-body);font-weight:500;font-size:.8rem;color:var(--muted)}
.role-pick{display:flex;align-items:center;gap:8px;font-size:.8rem;color:var(--muted)}
.bell{position:relative;width:40px;height:40px;border-radius:11px;border:1px solid var(--line);background:var(--surface);display:grid;place-items:center;cursor:pointer;color:var(--ink)}
.bell .dot{position:absolute;top:-5px;right:-5px;min-width:19px;height:19px;padding:0 5px;border-radius:999px;background:var(--crit);color:#fff;font-size:.68rem;font-weight:700;display:grid;place-items:center;border:2px solid var(--bg)}
.avatar{width:38px;height:38px;border-radius:50%;background:var(--teal-soft);color:var(--teal-ink);display:grid;place-items:center;font-weight:700;font-size:.85rem;flex:none}
.me{display:flex;gap:10px;align-items:center;font-size:.85rem;line-height:1.25}
.me b{display:block}
.me span{color:var(--muted);font-size:.78rem}
.main{padding:24px max(24px,env(safe-area-inset-right,0px)) calc(48px + env(safe-area-inset-bottom,0px)) 24px;display:grid;gap:20px;align-content:start}
.mob-nav{display:none}
@media (max-width:960px){
  .app{grid-template-columns:1fr}
  .side{display:none}
  .mob-nav{display:flex;gap:4px;overflow-x:auto;padding:8px max(16px,env(safe-area-inset-right,0px)) 8px max(16px,env(safe-area-inset-left,0px));background:var(--band);position:sticky;top:0;z-index:31}
  .mob-nav button{flex:none;background:none;border:0;color:var(--band-muted);padding:8px 12px;border-radius:8px;font-weight:600;font-size:.85rem;cursor:pointer;white-space:nowrap}
  .mob-nav button[aria-current="true"]{background:var(--band-2);color:var(--band-ink)}
  .topbar{top:52px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
  .main{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
  .me div{display:none}
  .app{background:none}
  .role-pick>span{display:none}
  .topbar .ttl{flex:1 1 100%}
  .cmp{grid-template-columns:1fr}
}

.panel{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:20px;display:grid;gap:14px;align-content:start;min-width:0}
.panel-h{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.panel-h h3{font-size:1.02rem;min-width:0;flex:1 1 220px}
.panel-h .btn{white-space:normal;text-align:left}
.panel>*{min-width:0}
.item .btn,.item .pill{flex:none}
@media (max-width:520px){.item{flex-wrap:wrap}.item .tx{flex:1 1 60%}}
.panel-h .sub{font-size:.8rem;color:var(--muted);font-weight:400;font-family:var(--f-body);display:block;letter-spacing:0;margin-top:2px}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px 16px 14px;display:grid;gap:4px;position:relative;overflow:hidden}
.kpi .l{font-size:.8rem;color:var(--muted);font-weight:500}
.kpi .v{font-family:var(--f-display);font-weight:800;font-size:1.75rem;line-height:1.1;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.kpi .d{font-size:.76rem;color:var(--muted)}
.kpi.warn{border-color:color-mix(in srgb,var(--warn) 40%,var(--line))}
.kpi.warn .v{color:var(--warn)}
.kpi.crit{border-color:color-mix(in srgb,var(--crit) 40%,var(--line))}
.kpi.crit .v{color:var(--crit)}
.kpi.hero{background:var(--band);color:var(--band-ink);border-color:var(--band-line)}
.kpi.hero .l,.kpi.hero .d{color:var(--band-muted)}
.dash{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.dash>*{min-width:0}
.c12{grid-column:span 12}.c8{grid-column:span 8}.c7{grid-column:span 7}.c6{grid-column:span 6}.c5{grid-column:span 5}.c4{grid-column:span 4}
@media (max-width:1180px){.c8,.c7,.c6,.c5,.c4{grid-column:span 12}}
.list{display:grid;gap:8px}
.item{display:flex;align-items:center;gap:12px;padding:11px 12px;border:1px solid var(--line);border-radius:12px;background:var(--surface);transition:border-color .15s}
.item.act{cursor:pointer}
.item.act:hover{border-color:var(--teal)}
.item .ic{width:34px;height:34px;border-radius:10px}
.item .tx{flex:1;min-width:0}
.item .tx b{display:block;font-size:.9rem;font-weight:600;overflow:hidden;text-overflow:ellipsis}
.item .tx span{font-size:.8rem;color:var(--muted)}
.sev{width:4px;align-self:stretch;border-radius:4px;flex:none}
.sev.crit{background:var(--crit)}.sev.warn{background:var(--warn)}.sev.info{background:var(--info)}.sev.ok{background:var(--ok)}
.filters{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.filters select,.filters input{width:auto;min-width:150px;padding:8px 12px;font-size:.88rem}
.empty{padding:28px;text-align:center;color:var(--muted);border:1.5px dashed var(--line);border-radius:12px}

/* charts */
.chart{width:100%;height:auto;display:block;overflow:visible}
.chart text{font-family:var(--f-body);fill:var(--muted);font-size:11px}
.chart .gl{stroke:var(--line);stroke-width:1}
.chart .ax{stroke:var(--line);stroke-width:1}
.chart [data-tip]{cursor:default}
.chart [data-tip]:hover{opacity:.82}
.legend{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:.8rem;color:var(--ink-2)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.tip{position:fixed;z-index:200;pointer-events:none;background:var(--solid);color:var(--solid-ink);padding:8px 11px;border-radius:9px;font-size:.8rem;line-height:1.4;max-width:260px;box-shadow:var(--shadow-lg);opacity:0;transition:opacity .1s}
.tip.show{opacity:1}
.donut-wrap{display:grid;grid-template-columns:180px 1fr;gap:20px;align-items:center}
@media (max-width:520px){.donut-wrap{grid-template-columns:1fr;justify-items:center}}
.dl{display:grid;gap:8px;width:100%}
.dl div{display:grid;grid-template-columns:auto 1fr auto auto;gap:10px;align-items:center;font-size:.88rem}
.dl b{font-variant-numeric:tabular-nums;white-space:nowrap}
.dl span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dl div{grid-template-columns:auto minmax(0,1fr) auto auto}
.panel{container-type:inline-size}
@container (max-width:500px){.donut-wrap{grid-template-columns:1fr;justify-items:center}}
.dl em{font-style:normal;color:var(--muted);font-size:.8rem;font-variant-numeric:tabular-nums;min-width:38px;text-align:right}
.score{display:flex;align-items:center;gap:18px}
.ring{position:relative;width:96px;height:96px;flex:none}
.ring b{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--f-display);font-size:1.6rem;font-weight:800}

/* gebouwpaspoort */
.passport{background:var(--band);color:var(--band-ink);border-radius:18px;padding:22px;display:grid;grid-template-columns:1fr auto;gap:20px;position:relative;overflow:hidden}
.passport::after{content:"";position:absolute;right:-80px;top:-80px;width:260px;height:260px;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--teal) 30%,transparent),transparent)}
.passport>*{position:relative;z-index:1;min-width:0}
.passport .meta{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:.86rem;color:var(--band-muted);margin-top:10px}
.passport .meta b{color:var(--band-ink)}
.passport .ring b{color:var(--band-ink)}
@media (max-width:640px){.passport{grid-template-columns:1fr}}

/* drawer */
.scrim{position:fixed;inset:0;background:rgba(6,14,22,.45);z-index:90;opacity:0;pointer-events:none;transition:opacity .2s}
.scrim.open{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(720px,100%);background:var(--bg);z-index:100;transform:translateX(102%);transition:transform .28s cubic-bezier(.2,.8,.2,1);display:flex;flex-direction:column;box-shadow:var(--shadow-lg)}
.drawer.open{transform:none}
.drawer-h{display:flex;align-items:flex-start;gap:12px;padding:calc(18px + env(safe-area-inset-top,0px)) max(22px,env(safe-area-inset-right,0px)) 16px 22px;border-bottom:1px solid var(--line);background:var(--surface)}
.drawer-h h2{font-size:1.3rem}
.drawer-h .x{margin-left:auto;background:var(--surface-2);border:0;width:36px;height:36px;border-radius:10px;cursor:pointer;flex:none;display:grid;place-items:center;color:var(--ink)}
.drawer-b{grid-auto-rows:max-content;overflow-y:auto;padding:20px max(22px,env(safe-area-inset-right,0px)) calc(28px + env(safe-area-inset-bottom,0px)) 22px;display:grid;gap:18px;align-content:start}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.facts div{background:var(--surface);padding:12px 14px}
.facts span{display:block;font-size:.74rem;color:var(--muted)}
.facts b{font-variant-numeric:tabular-nums;font-size:.95rem}
@media (max-width:560px){.facts{grid-template-columns:repeat(2,1fr)}}
.tl{position:relative;height:70px;margin:22px 4px 0}
.tl .bar{position:absolute;top:18px;left:0;right:0;height:8px;border-radius:99px;background:var(--surface-3)}
.tl .fill{position:absolute;top:18px;left:0;height:8px;border-radius:99px;background:var(--teal)}
.tl .mk{position:absolute;top:8px;width:2px;height:28px;background:var(--ink)}
.tl .mk.od{background:var(--warn)}
.tl .mk span{position:absolute;top:30px;transform:translateX(-50%);font-size:.72rem;white-space:nowrap;color:var(--muted)}
.tl .ends{position:absolute;top:50px;left:0;right:0;display:flex;justify-content:space-between;font-size:.72rem;color:var(--muted)}
.hist{display:grid;gap:0;border-left:2px solid var(--line);margin-left:6px}
.hist div{position:relative;padding:0 0 14px 18px;font-size:.86rem}
.hist div::before{content:"";position:absolute;left:-7px;top:5px;width:12px;height:12px;border-radius:50%;background:var(--surface);border:2px solid var(--teal)}
.hist div span{display:block;font-size:.76rem;color:var(--muted)}
.cmp{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cmp>div{border:1px solid var(--line);border-radius:14px;padding:16px;background:var(--surface);display:grid;gap:6px;align-content:start}
.cmp .new{border-color:var(--teal);box-shadow:0 0 0 3px color-mix(in srgb,var(--teal) 15%,transparent)}
.cmp .amt{font-family:var(--f-display);font-weight:800;font-size:1.5rem;font-variant-numeric:tabular-nums}
.delta{font-family:var(--f-display);font-weight:800;font-size:1rem}
.delta.down{color:var(--ok)}.delta.up{color:var(--warn)}
.sigpad{border:1.5px dashed var(--line);border-radius:12px;background:var(--surface);touch-action:none;width:100%;height:150px;display:block;cursor:crosshair}
.signed{border:1px solid var(--ok);background:var(--ok-bg);border-radius:12px;padding:14px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.signed img{height:56px;background:#fff;border-radius:8px;padding:4px}
.stepper{display:flex;gap:0;align-items:center;flex-wrap:wrap;row-gap:8px}
.stepper .st{display:flex;align-items:center;gap:8px;font-size:.8rem;color:var(--muted);font-weight:600}
.stepper .st i{width:22px;height:22px;border-radius:50%;border:2px solid var(--line);display:grid;place-items:center;font-style:normal;font-size:.7rem;background:var(--surface)}
.stepper .st.done i{background:var(--teal);border-color:var(--teal);color:var(--on-teal)}
.stepper .st.cur{color:var(--ink)}
.stepper .st.cur i{border-color:var(--teal);color:var(--teal-ink)}
.stepper .st.no i{background:var(--crit);border-color:var(--crit);color:#fff}
.stepper .ln{width:28px;height:2px;background:var(--line);margin:0 8px}

/* notification popover */
.pop{position:fixed;z-index:95;width:min(400px,calc(100% - 24px));background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-lg);display:none;flex-direction:column;max-height:min(560px,75vh)}
.pop.open{display:flex}
.pop-h{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid var(--line)}
.pop-b{overflow-y:auto;padding:8px}
.nt{display:flex;gap:10px;padding:10px;border-radius:10px;cursor:pointer;align-items:flex-start}
.nt:hover{background:var(--surface-2)}
.nt .u{width:8px;height:8px;border-radius:50%;background:var(--teal);margin-top:7px;flex:none}
.nt .u.r{background:transparent}
.nt b{display:block;font-size:.88rem}
.nt span{font-size:.8rem;color:var(--muted)}
.nt time{font-size:.72rem;color:var(--muted);white-space:nowrap;margin-left:auto}

.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%) translateY(20px);background:var(--solid);color:var(--solid-ink);padding:12px 18px;border-radius:12px;font-weight:600;font-size:.9rem;opacity:0;transition:.25s;z-index:300;pointer-events:none;max-width:calc(100% - 32px);display:flex;gap:10px;align-items:center}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.reveal{animation:rise .45s ease both}
@keyframes rise{from{opacity:.001;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

.toast.bad{background:var(--crit);color:#fff}
.aq-ro .aq-main input,.aq-ro .aq-main select,.aq-ro .aq-main button,.aq-ro .aq-main label{pointer-events:none}
.aq-ro .aq-main{opacity:.75}
/* ---- PHP-versie: pagina's zijn losse URL's ---- */
.view[hidden]{display:none!important}
.auth-wrap{min-height:calc(100vh - 160px);display:grid;place-items:center;padding:48px 16px}
.auth-card{width:100%;max-width:440px;background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:28px;display:grid;gap:16px;box-shadow:var(--shadow)}
.auth-card h1{font-size:1.6rem}
.auth-card .err{margin:0}
.notice{padding:12px 14px;border-radius:12px;background:var(--ok-bg);color:var(--ok);font-size:.92rem}
.notice.bad{background:var(--crit-bg);color:var(--crit)}
.loading{opacity:.55;pointer-events:none}
a.doc-link{color:inherit;text-decoration:none}
/* pandgegevens en inzichten */
.pand-grid{display:grid;grid-template-columns:minmax(0,240px) minmax(0,1fr);gap:18px;align-items:center}
@media (max-width:640px){.pand-grid{grid-template-columns:1fr}}
.pand-fp{background:var(--surface-2);border-radius:14px;padding:8px;display:grid;place-items:center}
.pand-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.pand-chips .chip{font-size:.78rem;padding:4px 10px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink-2);cursor:default}
.pand-chips button.chip{cursor:pointer}
.pand-chips button.chip:hover{border-color:var(--teal);color:var(--teal-ink)}
.chip.lab{font-weight:700;color:#fff;border-color:transparent}
.lab-A{background:#008a3e}.lab-B{background:#52a83a}.lab-C{background:#a6c43b;color:#10243A!important}.lab-D{background:#f2c418;color:#10243A!important}.lab-E{background:#f08a24}.lab-F{background:#e34a1c}.lab-G{background:#c4161c}
.aq-bag{display:grid;gap:10px;padding:14px;border-radius:12px;background:var(--teal-soft)}
.aq-bag b{display:flex;gap:8px;align-items:center}
/* klant inrichten */
.drawer.wide{width:min(1040px,100vw)}
.nc-sec{display:grid;gap:12px;padding:16px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.nc-sec h3{font-size:1.05rem}
.nc-row{border:1px solid var(--line);border-radius:12px;padding:12px;display:grid;gap:10px;background:var(--surface-2)}
.nc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.nc-grid .fl input,.nc-grid .fl select{padding:8px 10px;font-size:.88rem}
.nc-foot{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.nc-user{border-bottom:1px dashed var(--line);padding-bottom:10px}

a.doc-link:hover b{text-decoration:underline}
.team-tbl td{vertical-align:middle}