.hero{background:var(--creme);padding-bottom:80px;overflow:hidden}
.hero-boven{min-height:100svh;padding-top:144px;display:flex;flex-direction:column}
.hero-tekst{display:flex;flex-direction:column;align-items:center;text-align:center}
.pil{display:inline-flex;align-items:center;gap:10px;font-size:13px;line-height:19.5px;font-weight:500;color:var(--n500)}
.pil:hover{color:var(--inkt)}
.pil-bol{width:18px;height:18px;border-radius:9999px;background:radial-gradient(circle at 35% 35%,#CFE0FF,#2E74F0 60%,#1F5FD6);flex:none}
.hero h1{margin-top:28px;font-size:57.6px;line-height:59.9px;font-weight:500;letter-spacing:-2.304px;color:var(--inkt-kop)}
.hero h1 .grijs{color:var(--n400)}
.hero-knoppen{display:flex;gap:12px;margin-top:32px;justify-content:center}
.hero-logo-rij{margin:76px auto 0;max-width:1040px;width:100%;height:44px;display:flex;align-items:center}
.paneel{margin-top:44px;display:grid;grid-template-columns:340px 1fr;gap:1px;background:var(--rand-warm);border:1px solid var(--rand-warm);border-radius:6px;overflow:hidden;box-shadow:0 24px 60px rgba(28,28,28,.1);height:439px;position:relative}
.paneel-links{background:#fff;padding:28px;display:flex;flex-direction:column;align-items:center;color:var(--inkt);overflow:hidden;position:relative}
.paneel-links .stippen{position:absolute;inset:0 0 auto 0;height:130px;background-image:radial-gradient(rgba(0,0,0,.14) 1px,transparent 1.5px);background-size:12px 12px;-webkit-mask-image:linear-gradient(#000,transparent);mask-image:linear-gradient(#000,transparent)}
.kern-icoon{margin-top:36px;width:90px;height:90px;position:relative;z-index:1}
.vraagvak{margin-top:26px;width:272px;height:44px;background:var(--gebroken);border:1px solid var(--rand-warm);border-radius:6px;display:flex;align-items:center;justify-content:center;padding:0 12px;font-size:13px;line-height:19.5px;color:var(--n700);position:relative;z-index:1;white-space:nowrap;overflow:hidden}
.typcursor{display:inline-block;width:1px;height:14px;background:var(--n600);margin-left:2px;animation:knipper 1s steps(1) infinite;vertical-align:-2px}
@keyframes knipper{50%{opacity:0}}
.leest{margin-top:10px;font-size:11px;line-height:16.5px;color:var(--n500);display:flex;align-items:center;gap:6px}
.leest i{width:4px;height:4px;border-radius:9999px;background:var(--n400);display:inline-block;animation:pulseer 1.2s infinite}
.leest i:nth-child(2){animation-delay:.2s}.leest i:nth-child(3){animation-delay:.4s}
@keyframes pulseer{50%{opacity:.2}}
.werkt{margin-top:10px;font-size:12px;line-height:16.5px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--n400);display:flex;align-items:center;gap:6px}
.werkt img{width:12px;height:12px;opacity:.6}
.tegelrij{margin-top:28px;width:calc(100% + 56px);overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent);mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent)}
.tegelrij .loopband-spoor{gap:12px;animation-duration:22s}
.mtegel{width:48px;height:48px;background:#fff;border:1px solid var(--rand-warm);border-radius:6px;display:grid;place-items:center;font:600 13px/1 var(--f);color:var(--n600);flex:none}
.mtegel.blauw{color:var(--blauw-tekst)}
.paneel-link{margin-top:auto;width:100%;padding-top:16px;border-top:1px solid var(--rand-warm-3);display:flex;align-items:center;justify-content:center;gap:6px;font-size:13px;line-height:19.5px;font-weight:500;color:var(--n600)}
.paneel-link:hover{color:var(--inkt)}
.paneel-link svg{width:14px;height:14px}
.paneel-rechts{position:relative;background:var(--band) url('beelden/plexus-licht.jpg') center/cover;color:var(--inkt);overflow:hidden}
.paneel-rechts::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 70% 100%,rgba(46,116,240,.14),transparent 60%),linear-gradient(180deg,rgba(244,248,254,.94),rgba(244,248,254,.8))}
.paneel-rechts .rasterlijnen{position:absolute;inset:0;background-image:linear-gradient(90deg,rgba(23,30,48,.06) 1px,transparent 1px);background-size:calc(100% / 6) 100%}
.pr-inhoud{position:absolute;left:32px;top:32px;right:100px;z-index:2}
.pr-label{font-size:12px;line-height:16.5px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--n500)}
.pr-cijfer{display:flex;align-items:center;gap:11px;margin-top:6px}
.pr-cijfer b{font-size:46px;line-height:46px;font-weight:600;letter-spacing:-1.84px;color:var(--inkt)}
.pr-cijfer b small{font-size:22px;letter-spacing:-.5px;color:var(--n500);font-weight:500}
.delta{display:inline-flex;align-items:center;gap:6px;font-size:12px;line-height:16px;font-weight:500;padding:4px 10px;border-radius:6px;background:#fff;border:1px solid var(--band-lijn);color:var(--blauw-tekst)}
.delta svg{width:12px;height:12px}
.pr-sub{margin-top:8px;font-size:13px;line-height:17.9px;color:var(--n600)}
.speel{position:absolute;right:24px;top:24px;width:48px;height:48px;z-index:3;display:grid;place-items:center}
.speel::before{content:"";position:absolute;inset:0;border-radius:9999px;border:1.5px solid rgba(46,116,240,.7)}
.speel span{width:32px;height:32px;border-radius:9999px;background:#fff;box-shadow:0 2px 8px rgba(16,24,40,.12);display:grid;place-items:center;color:var(--inkt)}
.speel svg{width:14px;height:14px}
.speel .ic-speel{display:none}
.paneel.stil .speel .ic-pauze{display:none}
.paneel.stil .speel .ic-speel{display:block}
.staafgrafiek{position:absolute;left:32px;right:32px;bottom:58px;height:150px;display:flex;align-items:flex-end;justify-content:space-between;z-index:2}
.staafgrafiek i{width:2px;border-radius:1px;background:linear-gradient(to top,rgba(23,30,48,.08),rgba(23,30,48,.38));transform-origin:bottom;animation:groei 1.2s cubic-bezier(.2,.7,.2,1) both}
.staafgrafiek i.blauw{background:linear-gradient(to top,rgba(46,116,240,.25),#2E74F0)}
.staafgrafiek i.gat{background:none;border-left:1px dashed rgba(23,30,48,.3);width:0;height:100%!important;animation:none}
@keyframes groei{from{transform:scaleY(0)}}
.paneel.stil .staafgrafiek i{animation:none}
.paneel.loopt .staafgrafiek i:not(.gat){animation:golf 2.4s ease-in-out infinite alternate}
@keyframes golf{to{transform:scaleY(.82)}}
.tip{position:absolute;z-index:3;padding:6px 10px;border-radius:4px;background:#fff;border:1px solid var(--band-lijn);box-shadow:var(--schaduw-zacht);font-size:11px;line-height:15px;color:var(--n500);white-space:nowrap}
.tip b{display:block;color:var(--inkt);font-weight:500;font-size:12px}
.tip b em{font-style:normal;color:var(--blauw-tekst)}
.tip-punt{position:absolute;z-index:3;width:10px;height:10px;border-radius:9999px;border:2px solid var(--blauw);background:#fff}
.as{position:absolute;left:0;right:0;bottom:0;height:42px;border-top:1px solid rgba(23,30,48,.08);padding:12px 32px;display:grid;grid-template-columns:repeat(6,1fr);z-index:2;background:rgba(255,255,255,.5)}
.as span{font-size:11px;line-height:16.5px;color:var(--n500)}
.paneel .vb-hoek{right:16px;bottom:52px}
.klantenblok{margin-top:80px;display:grid;grid-template-columns:290px repeat(5,1fr) 290px;grid-template-rows:repeat(3,108px);gap:1px;background:var(--rand-zacht);border:1px solid var(--rand-zacht);border-radius:6px;overflow:hidden}
.kb-tekst{grid-column:1;grid-row:1/4;background:var(--creme-donker);padding:28px;display:flex;flex-direction:column}
.kb-tekst p{font-size:16px;line-height:22px;font-weight:500;letter-spacing:-.16px;color:var(--inkt)}
.kb-tekst p span{color:var(--n500)}
.kb-links{margin-top:auto}
.kb-links a{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:12px 0;border-top:1px solid rgba(0,0,0,.07);font-size:14px;line-height:20px;font-weight:500;color:var(--n700)}
.kb-links a svg{width:16px;height:16px;color:var(--n500);transition:transform .15s}
.kb-links a:hover svg{transform:translateX(3px)}
.kb-cel{background:#fff;padding:24px;display:flex;align-items:center;justify-content:center}
.kb-cel .ph-logo{max-width:97px;height:28px}
.kb-kaart{grid-column:7;grid-row:1/4;position:relative;background:var(--band) url('beelden/fusion-merge-licht.jpg') center/cover;color:var(--inkt);overflow:hidden}
.kb-kaart::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(244,248,254,.1) 25%,rgba(244,248,254,.96) 72%)}
.kb-plus{position:absolute;right:16px;top:16px;width:32px;height:32px;background:#fff;border:1px solid var(--band-lijn);display:grid;place-items:center;z-index:2;color:var(--inkt)}
.kb-plus svg{width:14px;height:14px}
.kb-kaart-tekst{position:absolute;left:24px;right:24px;bottom:22px;z-index:2}
.kb-kaart-tekst img{height:20px;width:auto}
.kb-kaart-tekst .groot{margin-top:12px;font-size:34px;line-height:35.7px;font-weight:600;letter-spacing:-1.19px}
.kb-kaart-tekst .mid{margin-top:8px;font-size:15px;line-height:20.6px;color:var(--n600)}
.kb-kaart-tekst .klein{margin-top:12px;font-size:11px;line-height:16.5px;color:var(--n500)}
.kb-kaart .vb{position:absolute;left:16px;top:16px;z-index:2}
.morph{position:relative;background:#fff}
.morph-laag{position:absolute;inset:0;background:var(--band);opacity:0;transition:opacity .6s cubic-bezier(.4,0,.2,1);pointer-events:none}
.morph.band .morph-laag{opacity:1}
.morph > section{position:relative}
.bento-sectie{padding:32px 0 96px}
.bento{margin-top:64px;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.b-kaart{position:relative;background:var(--kaart-grijs);border:1px solid rgba(0,0,0,.07);border-radius:6px;height:429px;overflow:hidden;transition:border-color .2s}
.b-kaart:hover{border-color:rgba(0,0,0,.18)}
.b-kaart.breed{grid-column:span 2}
.b-kaart.hoog{height:569px}
.b-kop{position:absolute;left:29px;top:25px;right:56px;z-index:4}
.b-kop h3{font-size:20px;line-height:23.6px;font-weight:500;letter-spacing:-.4px;color:var(--inkt)}
.b-kop h3 span{display:block}
.b-kop h3 span + span{color:var(--n400)}
.b-uitvouw{position:absolute;right:24px;top:24px;width:16px;height:16px;color:var(--n400);z-index:4;transition:color .15s,transform .15s}
.b-kaart:hover .b-uitvouw{color:var(--inkt);transform:scale(1.12)}
.b-beeld{position:absolute;left:0;right:0;bottom:0;top:96px}
.zoekbalk{position:absolute;left:24px;right:-90px;top:42%;transform:translateY(-50%);height:112px;border-radius:9999px;background:#fff;box-shadow:0 20px 50px rgba(0,0,0,.08),inset 0 0 0 1px rgba(0,0,0,.04);display:flex;align-items:center;gap:18px;padding:0 12px}
.zoekbalk .bol{width:88px;height:88px;border-radius:9999px;flex:none;background:radial-gradient(circle at 34% 30%,#E6EFFF 0,#8FB4F7 22%,#2E74F0 52%,#1F5FD6 82%);box-shadow:0 10px 30px rgba(46,116,240,.3)}
.zoekbalk span{font-size:30px;line-height:36px;letter-spacing:-.6px;color:#C4C4C4;white-space:nowrap}
.modelraster{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);display:grid;grid-template-columns:repeat(5,52px);gap:14px}
.modelraster i{width:52px;height:52px;display:grid;place-items:center;font:600 14px/1 var(--f);font-style:normal;color:var(--n600);background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.06);border-radius:4px}
.modelraster i.leeg{background:rgba(255,255,255,.45);box-shadow:none}
.modelraster i.blauw{color:var(--blauw-tekst)}
.venster{position:absolute;left:24px;right:24px;top:8px;background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:6px;box-shadow:0 10px 30px rgba(0,0,0,.06);overflow:hidden}
.venster-kop{height:30px;display:flex;align-items:center;gap:5px;padding:0 10px;border-bottom:1px solid rgba(0,0,0,.06)}
.venster-kop i{width:7px;height:7px;border-radius:9999px;background:var(--n300)}
.venster-kop span{margin:0 auto;font-size:9px;line-height:14px;color:var(--n500);background:var(--kaart-grijs);padding:1px 14px;border-radius:3px}
.ftabel{width:100%;border-collapse:collapse;font-size:11px;line-height:16px}
.ftabel th{font-size:9px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--n500);text-align:left;padding:8px 10px;border-bottom:1px solid rgba(0,0,0,.06)}
.ftabel td{padding:10px;border-bottom:1px solid rgba(0,0,0,.05);color:var(--inkt);white-space:nowrap}
.ftabel td.n,.ftabel th.n{text-align:right;font-variant-numeric:tabular-nums}
.ftabel td.n{color:var(--n600)}
.ftabel tr.u td{background:rgba(46,116,240,.07)}
.ftabel tr.u td:first-child{color:var(--blauw-tekst);font-weight:600}
.ftabel .bar{display:inline-block;width:40px;height:4px;border-radius:2px;background:var(--n200);vertical-align:middle;position:relative;overflow:hidden}
.ftabel .bar i{position:absolute;left:0;top:0;bottom:0;background:var(--n400)}
.ftabel tr.u .bar i{background:var(--blauw)}
.ftabel .naamtegel{display:inline-grid;place-items:center;width:16px;height:16px;border-radius:4px;background:var(--kaart-grijs);font-size:8px;font-weight:600;margin-right:8px;color:var(--n600);vertical-align:-3px}
.ftabel tr.u .naamtegel{background:var(--blauw);color:#fff}
.ftabel .zacht td,.ftabel .zacht td.n{color:var(--n500)}
.wereldbol{position:absolute;left:-40px;bottom:-150px;width:440px;height:440px;border-radius:9999px;background:radial-gradient(circle at 40% 35%,#fff 0,#F4F2F0 55%,#E3E0DA 100%);box-shadow:inset -20px -30px 60px rgba(0,0,0,.06),0 20px 50px rgba(0,0,0,.06);overflow:hidden}
.wereldbol i{position:absolute;left:150px;top:40px;width:150px;height:170px;background-image:radial-gradient(#3A3A3A 1.1px,transparent 1.6px);background-size:7px 7px;border-radius:46% 54% 40% 60% / 38% 44% 56% 62%;transform:rotate(-12deg)}
.wereldbol b{position:absolute;left:96px;top:150px;width:90px;height:110px;background-image:radial-gradient(#3A3A3A 1.1px,transparent 1.6px);background-size:7px 7px;border-radius:60% 40% 50% 50%;opacity:.6}
.landlabel{position:absolute;left:150px;top:46px;z-index:2;display:flex;align-items:center;gap:6px;background:#fff;border-radius:4px;box-shadow:0 4px 14px rgba(0,0,0,.08);padding:5px 9px;font-size:10px;line-height:14px;color:var(--n600)}
.landlabel b{font-weight:600;color:var(--inkt)}
.landlabel em{font-style:normal;font-weight:600;color:var(--blauw-tekst)}
.landpunt{position:absolute;left:226px;top:90px;width:8px;height:8px;border-radius:9999px;background:var(--blauw);box-shadow:0 0 0 4px rgba(46,116,240,.2);z-index:2}
.gk-stippen{position:absolute;left:50%;top:0;bottom:0;width:150px;transform:translateX(-50%);background-image:radial-gradient(var(--n400) 1px,transparent 1.5px);background-size:10px 10px;-webkit-mask-image:linear-gradient(#000 0,transparent 80%);mask-image:linear-gradient(#000 0,transparent 80%);opacity:.55}
.gk-boog{position:absolute;left:calc(50% + 10px);top:6%;width:70px;height:88%;border:2px solid transparent;border-right-color:var(--blauw);border-radius:50%;opacity:.75}
.gesprekskaart{position:absolute;left:50%;top:56%;transform:translate(-50%,-50%);width:338px;background:#fff;border:1px solid var(--rand-warm);border-radius:6px;box-shadow:0 30px 60px rgba(16,24,40,.12);color:var(--inkt);padding:14px;z-index:2}
.gk-kop{display:flex;align-items:center;gap:10px;padding-bottom:12px}
.gk-kop .rond{width:28px;height:28px;border-radius:9999px;background:#DCE7FB;color:var(--blauw-tekst);display:grid;place-items:center;font-size:11px;font-weight:600}
.gk-kop b{display:block;font-size:12px;line-height:16px;font-weight:500}
.gk-kop small{display:block;font-size:9px;line-height:12px;color:var(--n500)}
.gk-vak{background:var(--gebroken);border:1px solid var(--rand-warm-3);border-radius:6px;padding:10px}
.gk-vak p{font-size:11px;line-height:16px;color:var(--n500)}
.gk-rij{display:flex;align-items:center;gap:8px;margin-top:10px}
.gk-chip{display:inline-flex;align-items:center;gap:5px;font-size:10px;line-height:14px;padding:4px 7px;border-radius:4px;border:1px solid var(--rand-warm);background:#fff;color:var(--n700)}
.gk-chip i{width:8px;height:8px;border-radius:2px;background:var(--blauw)}
.gk-stuur{margin-left:auto;display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:600;padding:5px 9px;border-radius:4px;background:var(--blauw-tekst);color:#fff}
.gk-stuur svg{width:10px;height:10px}
.rapportkaart{position:absolute;left:24px;right:24px;top:8px;background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:6px;box-shadow:0 10px 30px rgba(0,0,0,.06);padding:16px}
.rk-titel{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid rgba(46,116,240,.35);border-radius:4px}
.rk-titel img{width:20px;height:20px}
.rk-titel b{font-size:17px;line-height:25.5px;font-weight:600;letter-spacing:-.34px}
.rk-tabs{display:flex;gap:16px;margin-top:14px;border-bottom:1px solid rgba(0,0,0,.06);font-size:10px;line-height:14px;color:var(--n500)}
.rk-tabs span{padding-bottom:8px}
.rk-tabs span.aan{color:var(--inkt);border-bottom:1.5px solid var(--inkt)}
.rk-cijfers{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.rk-cijfers div{border:1px solid rgba(0,0,0,.08);border-radius:4px;padding:8px 10px}
.rk-cijfers small{display:block;font-size:9px;line-height:13.5px;color:var(--n400)}
.rk-cijfers b{display:block;font-size:26px;line-height:39px;font-weight:600;letter-spacing:-.78px}
.rk-cijfers b span{font-size:13px;color:var(--n400);letter-spacing:0;font-weight:500}
.rk-lijst{margin-top:14px;font-size:9px;line-height:13.5px;letter-spacing:0;color:var(--n400);text-transform:none}
.rk-lijst-rij{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid rgba(0,0,0,.05);font-size:11px;line-height:15px;text-transform:none;letter-spacing:0;color:var(--inkt)}
.rk-lijst-rij i{display:block;width:90px;height:4px;border-radius:2px;background:linear-gradient(90deg,var(--blauw) var(--w),var(--n200) var(--w))}
.brontegels{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);display:grid;grid-template-columns:repeat(7,36px);gap:12px}
.brontegels i{width:36px;height:36px;border-radius:4px;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.06);display:grid;place-items:center;font:600 8px/1.1 var(--f);font-style:normal;color:var(--n600);text-align:center}
.brontegels i.leeg{background:rgba(255,255,255,.4);box-shadow:none}
.brontegels i.blauw{color:#fff;background:var(--blauw)}
.b-kaart .vb-hoek{right:14px;bottom:14px}
.cases-sectie{padding:40px 0 32px;overflow:hidden}
.carrousel{margin-top:24px;display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;scroll-behavior:smooth;margin-right:calc(-1 * (100vw - 100%) / 2)}
.carrousel::-webkit-scrollbar{display:none}
.case{flex:none;width:1000px;height:520px;position:relative;background:#fff;border:1px solid var(--band-lijn);scroll-snap-align:start;overflow:hidden;color:var(--inkt);box-shadow:var(--schaduw-zacht)}
.case .case-beeld{position:absolute;inset:0;background:center/cover no-repeat;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.case:hover .case-beeld{transform:scale(1.03)}
.case::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(255,255,255,.97) 0,rgba(255,255,255,.88) 48%,rgba(255,255,255,.15))}
.case-inhoud{position:absolute;left:40px;top:40px;bottom:40px;right:40px;z-index:2;display:flex;flex-direction:column;align-items:flex-start}
.case .ph-logo{width:128px;max-width:none;height:56px}
.case-tag{margin-top:65px;font:400 11px/16.5px var(--f-mono);letter-spacing:0;text-transform:none;color:var(--n700);background:var(--band);border:1px solid var(--band-lijn);padding:6px 10px}
.case h3{margin-top:16px;width:544px;max-width:100%;font-size:40px;line-height:46px;font-weight:500;letter-spacing:-.8px}
.case-knop{margin-top:auto;display:inline-flex;align-items:center;gap:10px;padding:12px 20px;background:var(--antraciet);color:#fff;font-size:14px;line-height:20px;font-weight:500}
.case-knop svg{width:14px;height:14px;transition:transform .15s}
.case:hover .case-knop svg{transform:translateX(3px)}
.car-bediening{display:flex;justify-content:space-between;align-items:center;margin-top:8px}
.stipjes{display:flex;align-items:center;gap:10px;padding:0 11px;height:26px;background:#fff;border:1px solid var(--band-lijn)}
.stipjes button{width:6px;height:6px;background:var(--n300);transition:width .25s,background-color .25s}
.stipjes button.aan{width:32px;background:var(--inkt)}
.pijlen{display:flex;gap:8px}
.pijlen button{width:44px;height:44px;background:#fff;border:1px solid var(--band-lijn);color:var(--inkt);display:grid;place-items:center;transition:border-color .15s}
.pijlen button:hover{border-color:var(--n400)}
.pijlen svg{width:16px;height:16px}
.bol-sectie{padding:112px 0}
.bol-kop{display:flex;justify-content:space-between;align-items:flex-start;gap:40px;height:149px}
.bol-kop .kopblok{width:672px}
.bol-kop > p{width:380px;margin-top:66px;padding-top:20px;border-top:1px solid var(--band-lijn);font-size:14px;line-height:22.75px;color:var(--n500)}
.bol-veld{position:relative;height:612px;margin-top:84px}
.bol-veld canvas{position:absolute;inset:0;width:100%;height:100%}
.bol-veld .bol-css{position:absolute;left:50%;top:50%;width:600px;height:600px;transform:translate(-50%,-50%);border-radius:9999px;background-image:radial-gradient(rgba(23,30,48,.35) 1px,transparent 1.6px);background-size:9px 9px;-webkit-mask-image:radial-gradient(closest-side,#000 70%,transparent);mask-image:radial-gradient(closest-side,#000 70%,transparent)}
.bol-veld.met-canvas .bol-css{display:none}
.bol-veld svg.lijnen{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.bol-etiket{position:absolute;font-size:12px;line-height:16.5px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--n600);background:#fff;border:1px solid var(--band-lijn);padding:8px 14px;z-index:2;box-shadow:0 1px 2px rgba(16,24,40,.04);transition:border-color .2s,color .2s,background-color .2s}
.bol-etiket:hover,.bol-etiket.aan{border-color:var(--blauw);color:var(--blauw-tekst);background:#EAF1FE}
.bol-midden{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:540px;text-align:center;z-index:2;pointer-events:none}
.bol-midden::before{content:"";position:absolute;left:50%;top:50%;width:420px;height:150px;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(244,248,254,.95),rgba(244,248,254,0));z-index:-1}
.bol-midden p.groot{font-size:30px;line-height:36px;font-weight:500;letter-spacing:-.6px;color:var(--inkt)}
.bol-midden p.klein{margin:8px auto 0;max-width:340px;font-size:16px;line-height:24px;color:var(--n500)}
.cijfer-sectie{padding:112px 0 48px}
.lichtraster{display:grid;gap:5px;background:var(--band-lijn);border:5px solid var(--band-lijn);margin-top:48px}
.lichtraster.vier{grid-template-columns:repeat(4,1fr)}
.lichtraster.drie{grid-template-columns:repeat(3,1fr)}
.lcel{background:#fff;padding:24px;position:relative;transition:background-color .2s}
.lcel:hover{background:#FBFCFF}
.cijferkaart{height:272px}
.cijferkaart svg.ic{width:20px;height:20px;color:var(--blauw)}
.cijferkaart h3{margin-top:24px;font-size:18px;line-height:28px;font-weight:500;letter-spacing:-.36px;color:var(--inkt)}
.cijferkaart .getal{margin-top:10px;font-size:48px;line-height:59px;font-weight:600;color:var(--inkt)}
.cijferkaart .eenheid{margin-top:3px;font-size:14px;line-height:20px;color:var(--n500)}
.cijferkaart .wanneer{margin-top:16px;font-size:12px;line-height:16px;color:var(--n400)}
.cijferkaart .verschil{margin-top:12px;font-size:12px;line-height:16px;font-weight:500;color:var(--blauw-tekst)}
.bronregel{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:8px;margin-top:24px;font-size:12px;line-height:16px;color:var(--n400)}
.bronregel a{color:var(--n600);display:inline-flex;align-items:center;gap:4px}
.bronregel a:hover{color:var(--inkt)}
.bronregel svg{width:12px;height:12px}
.functie-sectie{padding:48px 0}
.functie-sectie .lichtraster{margin-top:64px}
.functiekaart{height:340px}
.fk-beeld{position:relative;height:192px}
.functiekaart h3{margin-top:24px;font-size:18px;line-height:28px;font-weight:500;letter-spacing:-.36px;color:var(--inkt)}
.functiekaart p{margin-top:8px;font-size:14px;line-height:20px;color:var(--n500)}
.lvak{background:var(--gebroken);border:1px solid var(--rand-warm);border-radius:10px}
.fk-modellen{position:absolute;left:17px;top:23px;width:190px;height:146px;padding:8px;display:grid;grid-template-columns:repeat(4,40px);gap:4px}
.fk-modellen i{width:40px;height:40px;border-radius:4px;background:#fff;border:1px solid var(--rand-warm-3);display:grid;place-items:center;font:600 12px/1 var(--f);font-style:normal;color:var(--n600)}
.fk-modellen i.blauw{color:var(--blauw-tekst)}
.fk-modellen i.punt{color:var(--n400);font-size:14px}
.fk-pijl{position:absolute;left:215px;top:56px;width:24px;height:80px;color:var(--n300)}
.fk-voortgang{position:absolute;left:247px;top:18px;width:118px;height:157px;padding:12px}
.fk-voortgang .kern{width:92px;height:92px;border-radius:10px;background:#fff;border:2px solid var(--band-lijn);display:grid;place-items:center}
.fk-voortgang .kern img{width:44px;height:44px}
.fk-voortgang .rij{display:flex;justify-content:space-between;margin-top:12px;font-size:10px;line-height:15px;color:var(--n500)}
.fk-voortgang .balkje{margin-top:6px;height:6px;border-radius:9999px;background:var(--n200);overflow:hidden}
.fk-voortgang .balkje i{display:block;height:100%;width:72%;border-radius:9999px;background:linear-gradient(90deg,#1F5FD6,#2E74F0)}
.fk-kiezer{position:absolute;left:4px;top:4px;width:180px;height:181px;background:var(--gebroken);border:1px solid var(--rand-warm-3);border-radius:8px;padding:12px;z-index:2}
.fk-kiezer small{display:block;font-size:10px;line-height:15px;color:var(--n500)}
.fk-kiezer .veld{display:flex;align-items:center;gap:6px;height:28px;margin:4px 0 8px;padding:6px 10px;border-radius:4px;background:#fff;border:1px solid var(--rand-warm-3);font-size:12px;line-height:16px;color:var(--n600);white-space:nowrap;overflow:hidden}
.fk-kiezer .veld b{font-weight:500;color:var(--inkt)}
.fk-kiezer .veld svg{width:12px;height:12px;margin-left:auto;flex:none;color:var(--n400)}
.fk-kaart-nl{position:absolute;right:0;top:0;width:210px;height:192px;background-image:radial-gradient(rgba(23,30,48,.28) 1.2px,transparent 1.7px);background-size:9px 9px;-webkit-mask-image:radial-gradient(closest-side,#000 60%,transparent);mask-image:radial-gradient(closest-side,#000 60%,transparent)}
.fk-punt{position:absolute;right:98px;top:84px;width:10px;height:10px;border-radius:9999px;background:var(--blauw);box-shadow:0 0 0 6px rgba(46,116,240,.2)}
.ltabel{position:absolute;inset:4px;background:var(--gebroken);border:1px solid var(--rand-warm-3);border-radius:8px;padding:12px;overflow:hidden}
.ltabel .dkop,.ltabel .drij{display:grid;align-items:center}
.ltabel .dkop{padding:6px 8px;border-bottom:1px solid rgba(0,0,0,.07);font-size:10px;line-height:15px;color:var(--n500)}
.ltabel .drij{margin-top:4px;padding:8px;border-radius:4px;background:#fff;font-size:11px;line-height:16.5px;color:var(--n500)}
.ltabel .drij:nth-of-type(odd){background:rgba(255,255,255,.55)}
.ltabel .nm{display:flex;align-items:center;gap:8px;color:var(--inkt);white-space:nowrap}
.ltabel .nm i{width:16px;height:16px;border-radius:4px;background:var(--kaart-grijs);border:1px solid var(--rand-warm);color:var(--n600);display:grid;place-items:center;font:600 7px/1 var(--f);font-style:normal;flex:none}
.ltabel .nm i.u{background:var(--blauw);border-color:var(--blauw);color:#fff}
.ltabel .blauw{color:var(--blauw-tekst);font-weight:500}
.ltabel .wit{color:var(--inkt);font-weight:500}
.ltabel .soort{justify-self:start;font-size:10px;line-height:15px;padding:2px 6px;border-radius:4px;background:var(--kaart-grijs);color:var(--n600)}
.ltabel.klein .drij{font-size:10px;line-height:15px}
.ltabel .kopje{display:flex;align-items:center;gap:8px;padding-bottom:8px;border-bottom:1px solid rgba(0,0,0,.07);font-size:10px;line-height:15px;color:var(--n500)}
.ltabel .kopje i{width:16px;height:16px;border-radius:4px;background:#fff;border:1px solid var(--rand-warm);display:grid;place-items:center;font:600 8px/1 var(--f);font-style:normal;color:var(--n600)}
.actiekaart{display:flex;gap:12px;margin-top:12px}
.actiekaart .nr{width:80px;height:80px;border-radius:10px;background:#fff;border:1px solid var(--band-lijn);color:var(--blauw-tekst);display:grid;place-items:center;font-size:30px;font-weight:600;letter-spacing:-1px;flex:none}
.actiekaart b{display:block;font-size:11px;line-height:16.5px;font-weight:500;color:var(--inkt)}
.actiekaart small{display:block;font-size:9px;line-height:13.5px;color:var(--n500)}
.actiekaart .prio{display:inline-block;margin-top:8px;font-size:9px;line-height:13px;color:var(--blauw-tekst);border:1px solid rgba(46,116,240,.35);padding:1px 6px;border-radius:3px}
.actiekaart .wie{margin-top:8px;font-size:14px;line-height:20px;font-weight:700;color:var(--inkt)}
.dlijn{position:absolute;left:12px;right:12px;top:38px;bottom:10px}
.dlijn svg{width:100%;height:100%}
.dlijn .chip{position:absolute;left:44%;top:26%;display:inline-flex;align-items:center;font:500 12px/16px var(--f-mono);color:var(--inkt);padding:4px 12px;border-radius:8px;background:#fff;border:1px solid var(--band-lijn)}
.lcel .vb-hoek{right:28px;bottom:156px}
.verhalen{padding:112px 0 116px}
.verhalen-kop{display:flex;justify-content:space-between;align-items:flex-end;gap:24px}
.verhalen-kop .kopblok{width:672px}
.verhaal-groot{margin-top:40px;display:grid;grid-template-columns:1fr 656px;background:var(--creme-donker);min-height:452px}
.vg-tekst{padding:64px 48px 64px}
.vg-label{display:flex;align-items:center;gap:10px;font-size:14px;line-height:20px;color:var(--n500)}
.vg-label i{width:8px;height:8px;border-radius:9999px;background:var(--blauw)}
.vg-tekst h3{margin-top:20px;max-width:560px;font-size:42px;line-height:48.3px;font-weight:500;letter-spacing:-.84px;color:var(--inkt)}
.vg-tekst p.lang{margin-top:24px;max-width:560px;font-size:18px;line-height:29.25px;color:var(--n600)}
.vg-persoon{display:flex;align-items:center;gap:12px;margin-top:31px}
.vg-persoon .rond{width:44px;height:44px;border-radius:9999px;background:var(--n200);display:grid;place-items:center;font-size:10px;color:var(--n500)}
.vg-persoon b{display:block;font-size:14px;line-height:20px;font-weight:500;color:var(--inkt)}
.vg-persoon span{display:block;font-size:14px;line-height:20px;color:var(--n500)}
.vg-beeld{position:relative;min-height:452px}
.vg-beeld .ph-foto{position:absolute;inset:0;align-items:flex-end;padding-bottom:16px}
.vg-beeld .ph-logo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:183px;max-width:none;height:64px;border-color:#B9C3D4;color:#6B7486}
.verhalen-drie{margin-top:36px;display:grid;grid-template-columns:repeat(3,minmax(0,411px));justify-content:space-between;gap:16px}
.vk{background:#fff;padding:12px;display:flex;flex-direction:column;transition:box-shadow .2s}
.vk:hover{box-shadow:0 12px 30px rgba(0,0,0,.06)}
.vk-beeld{position:relative;height:290px}
.vk-beeld .ph-foto{position:absolute;inset:0;align-items:flex-end;padding-bottom:12px}
.vk-beeld .ph-logo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:183px;max-width:none;height:64px;border-color:#B9C3D4;color:#6B7486}
.vk-naam{display:flex;justify-content:space-between;align-items:baseline;margin-top:16px;padding:0 4px}
.vk-naam b{font-size:16px;line-height:24px;font-weight:700;color:var(--inkt)}
.vk-naam span{font-size:12px;line-height:16px;font-weight:500;color:var(--n400);text-align:right}
.vk p{margin-top:6px;padding:0 4px;font-size:14px;line-height:22.75px;color:var(--n500)}
.vk .knop-klein-z{margin:16px 4px 4px;align-self:flex-start;display:inline-flex;align-items:center;gap:8px;padding:10px 16px;background:var(--antraciet);color:#fff;font-size:12px;line-height:16px;font-weight:500}
.vk .knop-klein-z svg{width:12px;height:12px}
.verken{border-top:1px solid var(--n200);padding:81px 0 80px}
.verken h2{font-size:30px;line-height:36px;font-weight:500;letter-spacing:-.6px;color:var(--inkt)}
.verken .wrap > p{margin-top:12px;max-width:576px;font-size:16px;line-height:24px;color:var(--n500)}
.verken-raster{margin-top:40px;display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--n200);border:1px solid var(--n200)}
.verken-raster a{background:var(--creme);padding:24px;min-height:126px;transition:background-color .15s}
.verken-raster a:hover{background:#fff}
.verken-raster b{display:flex;justify-content:space-between;align-items:center;font-size:16px;line-height:24px;font-weight:500;color:var(--inkt)}
.verken-raster b svg{width:16px;height:16px;color:var(--n400);transition:transform .15s,color .15s}
.verken-raster a:hover b svg{transform:translate(2px,-2px);color:var(--inkt)}
.verken-raster span{display:block;margin-top:8px;font-size:14px;line-height:22.75px;color:var(--n500)}
.chiprij{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-top:32px}
.chiprij > span{font-size:14px;line-height:20px;color:var(--n500)}
.chiprij a{padding:6px 12px;border:1px solid var(--n200);font-size:14px;line-height:20px;font-weight:500;color:var(--inkt);transition:border-color .15s}
.chiprij a:hover{border-color:var(--n500)}
@media (max-width:1100px){
  .klantenblok{grid-template-columns:repeat(3,1fr);grid-template-rows:none;grid-auto-rows:108px}
  .kb-tekst{grid-column:1/-1;grid-row:auto;min-height:200px}
  .kb-kaart{grid-column:1/-1;grid-row:auto;order:20;min-height:300px}
  .bento{grid-template-columns:1fr 1fr}
  .lichtraster.vier,.lichtraster.drie{grid-template-columns:1fr 1fr}
  .verken-raster{grid-template-columns:repeat(3,1fr)}
  .verhalen-drie{grid-template-columns:repeat(3,1fr);gap:16px}
  .verhaal-groot{grid-template-columns:1fr}
  .vg-beeld{min-height:320px}
  .bol-kop{flex-direction:column;gap:16px;height:auto}
  .bol-kop .kopblok,.verhalen-kop .kopblok{width:auto;max-width:672px}
  .bol-kop > p{margin-top:0;width:auto;max-width:672px;border-top:0;padding-top:0}
  .case{width:min(1000px,85vw)}
}
@media (max-width:860px){
  .paneel{grid-template-columns:1fr;height:auto}
  .paneel-links{min-height:400px}
  .paneel-rechts{height:420px}
  .bol-veld{height:auto;margin-top:40px;padding-top:360px;display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .bol-veld canvas,.bol-veld .bol-css{bottom:auto;height:340px}
  .bol-veld .bol-css{top:170px;width:330px;height:330px}
  .bol-veld svg.lijnen{display:none}
  .bol-etiket{position:static;text-align:center}
  .bol-midden{top:170px;width:90%}
  .verhalen-drie{grid-template-columns:1fr}
  .verhalen-kop{flex-direction:column;align-items:flex-start}
  .lcel .vb-hoek{top:190px;bottom:auto}
}
@media (max-width:640px){
  .hero-boven{min-height:0;padding-top:120px}
  .hero h1{font-size:36px;line-height:40px;letter-spacing:-1.2px;margin-top:20px}
  .hero-knoppen{flex-direction:column;width:100%}
  .hero-knoppen .knop{width:100%}
  .hero-logo-rij{margin-top:40px}
  .paneel-rechts{height:380px}
  .pr-inhoud{left:20px;right:76px;top:20px}
  .pr-cijfer{flex-wrap:wrap}
  .pr-cijfer b{font-size:36px;line-height:40px}
  .staafgrafiek{left:20px;right:20px}
  .as{padding:12px 20px;grid-template-columns:repeat(3,1fr)}
  .as span:nth-child(even){display:none}
  .tip{display:none}.tip-punt{display:none}
  .klantenblok{grid-template-columns:1fr 1fr;margin-top:56px}
  .klantenblok .kb-cel:nth-of-type(n+7){display:none}
  .bento{grid-template-columns:1fr;margin-top:40px}
  .b-kaart.breed{grid-column:auto}
  .b-kaart,.b-kaart.hoog{height:400px}
  .zoekbalk span{font-size:22px}
  .gesprekskaart{width:calc(100% - 32px)}
  .rapportkaart,.venster{left:16px;right:16px}
  .brontegels{grid-template-columns:repeat(6,36px);gap:10px}
  .brontegels i:nth-child(n+37){display:none}
  .case{width:86vw;height:460px}
  .case-inhoud{left:24px;right:24px;top:24px;bottom:24px}
  .case h3{font-size:26px;line-height:31px;letter-spacing:-.5px}
  .case-tag{margin-top:32px;font-size:10px}
  .bol-sectie,.cijfer-sectie,.verhalen{padding:72px 0}
  .bol-midden p.groot{font-size:22px;line-height:28px}
  .bol-midden p.klein{font-size:14px;line-height:20px}
  .lichtraster.vier,.lichtraster.drie{grid-template-columns:1fr;margin-top:32px}
  .functiekaart{height:auto}
  .fk-beeld{overflow:hidden}
  .cijferkaart{height:auto}
  .verhaal-groot{margin-top:40px}
  .vg-tekst{padding:32px 20px}
  .vg-tekst h3{font-size:28px;line-height:33px}
  .vg-tekst p.lang{font-size:16px;line-height:26px}
  .verken{padding:64px 0}
  .verken-raster{grid-template-columns:1fr}
  .verken-raster a{min-height:0}
}
.b-beeld .venster,.b-beeld .rapportkaart{-webkit-mask-image:linear-gradient(#000 72%,transparent 98%);mask-image:linear-gradient(#000 72%,transparent 98%)}
.b-beeld .brontegels{-webkit-mask-image:radial-gradient(closest-side,#000 70%,transparent);mask-image:radial-gradient(closest-side,#000 70%,transparent)}
.hero-modellen{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px 40px;margin:64px auto 20px;padding:22px 0;max-width:1040px;border-top:1px solid var(--rand-warm);border-bottom:1px solid var(--rand-warm)}
.hm-label{font-size:13px;line-height:20px;color:var(--n500)}
.hm{display:inline-flex;align-items:center;gap:10px;font-size:15px;line-height:20px;font-weight:500;color:var(--n700)}
.hm img{width:22px;height:22px;opacity:.85}
.mtegel img{width:22px;height:22px}
.modelraster i img{width:46%;height:46%;object-fit:contain}
.fk-modellen i img{width:20px;height:20px}
.mini-modellen i img{width:11px;height:11px}
.mtegel.blauw,.modelraster i.blauw,.fk-modellen i.blauw{border-color:var(--blauw);background:var(--band)}
.chiprij a{display:inline-flex;align-items:center;gap:8px}
.chiprij a img{width:16px;height:16px}
.zweef-modellen{display:flex;align-items:center;gap:12px;padding:0 6px 0 12px}
.zweef-modellen img{width:16px;height:16px;opacity:.75;display:block}
@media (max-width:760px){.zweef-modellen{display:none}}