/* Klarifai-aanbod. Vormgeving van klarifai.nl/products (gemeten 29-10-2026, research/referenties/klarifai-products.md):
   navy #040026, kaarten met een verloop naar violet, geel #f7e24b, Plus Jakarta Sans, gele pilknoppen,
   labels tussen haken. Rail 1120 px. Breekpunten 1199 en 809. */
@font-face{font-family:"Plus Jakarta Sans";src:url(assets/PlusJakartaSans-Variable.ttf) format("truetype");font-weight:200 800;font-display:swap}

:root{
  --navy:#040026;--deep:#000319;--violet:#16086e;--mid:#070537;
  --y:#f7e24b;--y-2:#ffef7b;--y-3:#c4ae14;--y-4:#d6ca47;
  --w:#fefefe;--w-80:rgba(255,255,255,.8);--w-70:rgba(255,255,255,.7);--w-50:rgba(255,255,255,.5);
  --w-20:rgba(255,255,255,.2);--w-12:rgba(255,255,255,.12);--w-08:rgba(255,255,255,.08);--w-04:rgba(255,255,255,.04);
  --card:linear-gradient(110deg,#16086e 0%,#070537 48%,#000319 100%);
  --rail:1120px;--gutter:40px;--r:16px;--r-sm:12px;--nav-h:80px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-padding-top:calc(var(--nav-h) + 24px);background:var(--navy)}
body{font-family:"Plus Jakarta Sans",system-ui,sans-serif;background:var(--navy);color:var(--w);font-size:16px;line-height:1.5;
  -webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
ul,ol{list-style:none}
b{font-weight:600;color:var(--w)}
button,input{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--y);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:-9999px;top:12px;z-index:100;padding:10px 16px;border-radius:30px;background:var(--y);color:var(--navy);font-weight:600}
.skip:focus{left:12px}
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.print-only{display:none}
.rail{max-width:calc(var(--rail) + 2*var(--gutter));margin:0 auto;padding:0 var(--gutter)}

/* Typografie (klarifai.nl: h1 64/72 w400 -1.92px, h2 46/55 w400 -1.38px, belofte 24/34 geel, tekst 16/24) */
.h-display{font-size:64px;line-height:1.12;font-weight:400;letter-spacing:-.03em;color:var(--w);text-wrap:balance}
.h-2{font-size:46px;line-height:1.2;font-weight:400;letter-spacing:-.03em;color:var(--w);text-wrap:balance}
.h-3{font-size:32px;line-height:1.25;font-weight:400;letter-spacing:-.02em;color:var(--w)}
.h-4{font-size:22px;line-height:1.35;font-weight:500;letter-spacing:-.01em;color:var(--w)}
.h-5{font-size:20px;line-height:1.4;font-weight:500;color:var(--w)}
.lead{margin-top:16px;max-width:620px;font-size:18px;line-height:1.55;color:var(--w-70)}
.kicker{font-size:16px;line-height:1.4;font-weight:600;letter-spacing:.01em;text-transform:uppercase;color:var(--y)}
.kicker a{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.kicker a:hover{text-decoration-thickness:2px}
.lbl{font-size:12px;line-height:1.5;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--y)}
.lbl::before{content:"[\00a0"}
.lbl::after{content:"\00a0]"}
.lbl-w{color:var(--w)}
.y{color:var(--y)}

/* Knoppen: gele pil met verloop (klarifai.nl) en een rustige variant */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:44px;padding:11px 22px;border:0;border-radius:30px;
  font-size:14px;line-height:1.2;font-weight:600;text-align:center;cursor:pointer;transition:background .2s ease,box-shadow .2s ease,color .2s ease}
.btn svg{flex:none;width:16px;height:16px}
.btn .arr{width:14px;height:14px;stroke-width:2.2;transition:transform .2s ease}
.btn:hover .arr{transform:translate(2px,-2px)}
.btn-sm{min-height:40px;padding:9px 18px;font-size:13.5px}
.btn-y{color:var(--navy);background:linear-gradient(#fefefe 0%,#ffef7b 18%,#f7e24b 58%,#c4ae14 100%);box-shadow:0 6px 22px -10px rgba(247,226,75,.55)}
.btn-y:hover{background:linear-gradient(#fefefe 0%,#ffef7b 28%,#d6ca47 68%,#c4ae14 100%)}
.btn-ghost{color:var(--w);background:var(--w-04);box-shadow:inset 0 0 0 1px var(--w-20)}
.btn-ghost:hover{background:var(--w-08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.4)}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}

/* Navigatie */
.nav{position:sticky;top:0;z-index:50;height:var(--nav-h);background:rgba(4,0,38,.72);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  box-shadow:0 1px 0 var(--w-08)}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:24px;height:100%;max-width:calc(var(--rail) + 2*var(--gutter));margin:0 auto;padding:0 var(--gutter)}
.brand{display:inline-flex;align-items:center}
.brand img{display:block;width:146px;height:auto}
.tile{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;background:var(--w-08);box-shadow:inset 0 0 0 1px var(--w-12)}
.menu{display:flex;align-items:center;gap:28px}
.menu .link{font-size:15px;line-height:1.4;color:var(--w-70);transition:color .2s ease}
.menu .link:hover{color:var(--w)}
.menu .link[aria-current="page"]{color:var(--y)}
.burger{display:none}

/* Opening (klarifai.nl: kicker, titel links, context rechts, lichtbundel linksboven) */
.opening{position:relative;padding:120px 0 96px;overflow:hidden;isolation:isolate}
.opening::before{content:"";position:absolute;z-index:-1;left:-260px;top:-420px;width:1100px;height:1100px;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,239,123,.13),rgba(158,145,255,.08) 45%,transparent 72%);transform:rotate(-24deg) scaleY(.55)}
.opening-grid{display:grid;grid-template-columns:minmax(0,627fr) minmax(0,445fr);gap:48px;align-items:start}
.opening .kicker{margin-bottom:22px}
.opening-context{padding-top:68px}
.intro{font-size:18px;line-height:1.5;font-weight:500;letter-spacing:-.03em;color:var(--w)}
.note{margin-top:24px;font-size:16px;line-height:1.5;color:var(--w)}
.note .y{display:block}
.opening-page{padding-bottom:72px}
.page-lead{margin-top:24px;max-width:720px;font-weight:400;color:var(--w-80)}

/* Index van de systemen */
.index{margin-top:72px;border-top:1px solid var(--w-12)}
.index a{display:grid;grid-template-columns:80px minmax(0,512px) minmax(0,1fr);align-items:center;gap:0;padding:20px 0;border-bottom:1px solid var(--w-12);transition:background .2s ease}
.index a:hover .idx-name{color:var(--y)}
.idx-n{font-size:16px;font-weight:600;color:var(--y)}
.idx-name{font-size:24px;line-height:1.4;font-weight:400;letter-spacing:-.01em;transition:color .2s ease}
.idx-text{font-size:16px;line-height:1.5;color:var(--w)}

/* Hoofdstukken: een kaart per systeem */
.chapters{padding:32px 0 120px}
.chapter-list{display:grid;gap:40px}
.chapter{display:grid;grid-template-columns:1fr 1fr;min-height:380px;border-radius:var(--r);overflow:hidden;background:var(--card);
  box-shadow:inset 0 0 0 1px var(--w-08),0 30px 60px -40px rgba(0,0,0,.8)}
.ch-copy{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:40px 48px}
.ch-n{font-size:14px;font-weight:600;color:var(--w-50);margin-bottom:10px}
.ch-name{font-size:40px;line-height:1.2;font-weight:400;letter-spacing:-.03em;color:var(--w)}
.ch-promise{margin-top:12px;max-width:28ch;font-size:22px;line-height:1.4;font-weight:500;letter-spacing:-.01em;color:var(--y)}
.ch-text{margin-top:14px;max-width:46ch;font-size:16px;line-height:1.5;color:var(--w-70)}
.ch-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.ch-visual{position:relative;display:grid;grid-template:minmax(0,1fr)/minmax(0,1fr);place-items:center;padding:24px;isolation:isolate;background:#08053a;box-shadow:inset 1px 0 0 var(--w-08)}
.illus{width:100%;height:100%;max-height:340px;min-height:0;object-fit:contain}

/* Systeempagina: basis en keuzemodules als één tabel (naar "Pricing table - Untitled UI", Dribbble 27540304;
   research/referenties/pricing.md). Per onderdeel naam en uitleg, rechts een vinkje of "Optioneel". */
.sys-lead{margin-top:20px;max-width:560px;font-size:17px;line-height:1.6;color:var(--w-70)}
.plan{padding-top:40px}
.plan-head{max-width:720px;margin:0 auto;text-align:center}
.plan-head .lead{margin-left:auto;margin-right:auto}
.plan-table{width:100%;max-width:960px;margin:24px auto 0;border-collapse:collapse}
.plan-table th,.plan-table td{padding:18px 0;border-bottom:1px solid var(--w-08);vertical-align:middle;text-align:left}
.plan-table tbody tr>th{padding-right:32px}
.plan-table td{width:140px;text-align:right}
.pt-group th{padding:48px 0 12px;border-bottom:1px solid var(--w-12)}
.pt-group th>span:first-child{font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--y)}
.pt-count{margin-left:12px;font-size:13px;font-weight:500;color:var(--w-50)}
.pt-name{display:block;font-size:16px;line-height:1.4;font-weight:600;color:var(--w)}
.pt-text{display:block;margin-top:4px;max-width:62ch;font-size:14px;line-height:1.5;font-weight:400;color:var(--w-70)}
.tick{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;color:var(--y);box-shadow:inset 0 0 0 1.5px var(--y);vertical-align:middle}
.tick svg{width:15px;height:15px;stroke-width:2.4}
.opt-tag{display:inline-flex;align-items:center;height:26px;padding:0 11px;border-radius:30px;font-size:13px;font-weight:600;color:var(--w);background:var(--w-08);box-shadow:inset 0 0 0 1px var(--w-20);vertical-align:middle;white-space:nowrap}
.plan-table tbody tr:not(.pt-group):hover .pt-name{color:var(--y)}
.plan-cta{margin-top:40px;text-align:center}
@media (max-width:809px){
  .plan-table td{width:auto;padding-left:12px}
  .plan-table tbody tr>th{padding-right:0}
  .pt-group th{padding-top:36px}
  .pt-count{display:block;margin:4px 0 0}
  .pt-text{font-size:14px}
}

/* Werkwijze: compact en visueel. Fases, vaste route, waar de app draait (met officiële logo's), Azure-schema, beheer. */
.phases{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;margin-top:56px;border-top:1px solid var(--w-12)}
.phases li{position:relative;padding:22px 20px 0 0}
.phases li::before{content:"";position:absolute;top:-5px;left:0;width:9px;height:9px;border-radius:50%;background:var(--y);box-shadow:0 0 0 4px var(--navy)}
.ph-n{font-size:13px;font-weight:600;color:var(--y)}
.ph-name{margin-top:6px;font-size:20px;line-height:1.3;font-weight:500;color:var(--w)}
.phases p{margin-top:6px;font-size:14px;line-height:1.5;color:var(--w-70)}
.route{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:40px;counter-reset:rt}
.rt-step{position:relative;padding:24px;border-radius:var(--r);background:var(--card);box-shadow:inset 0 0 0 1px var(--w-08)}
.rt-step+.rt-step::before{content:"";position:absolute;top:44px;left:-13px;z-index:1;width:10px;height:10px;border-top:2px solid var(--y);border-right:2px solid var(--y);transform:rotate(45deg)}
.rt-icon{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:12px;color:var(--y);background:rgba(247,226,75,.1);box-shadow:inset 0 0 0 1px rgba(247,226,75,.35)}
.rt-icon .li{width:22px;height:22px}
.rt-name{margin-top:16px;font-size:18px;line-height:1.3;font-weight:600;color:var(--w)}
.rt-step p,.care-item p{margin-top:6px;font-size:14px;line-height:1.55;color:var(--w-70)}
.where{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:40px}
.where-card{display:flex;flex-direction:column;padding:28px;border-radius:var(--r);background:var(--card);box-shadow:inset 0 0 0 1px var(--w-08)}
.where-azure{box-shadow:inset 0 0 0 1px rgba(0,120,212,.55)}
.where-tag{font-size:12px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--y)}
.where-name{margin-top:10px;font-size:22px;line-height:1.3;font-weight:500;color:var(--w)}
.where-text{margin-top:8px;font-size:14px;line-height:1.55;color:var(--w-70)}
.where-logos{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:22px}
.where-logos li{display:inline-flex;align-items:center;gap:8px;padding:6px 12px 6px 8px;border-radius:30px;font-size:13px;font-weight:500;color:var(--w);background:#0b0838;box-shadow:inset 0 0 0 1px var(--w-12)}
.lg{flex:none;display:block}
.flow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr) minmax(0,1.6fr);gap:16px;margin-top:40px;align-items:stretch}
.lane{position:relative;padding:20px;border-radius:var(--r);background:var(--w-04);box-shadow:inset 0 0 0 1px var(--w-12)}
.lane-1{background:linear-gradient(160deg,rgba(0,120,212,.18),rgba(0,120,212,.04));box-shadow:inset 0 0 0 1px rgba(0,120,212,.5)}
.lane-2{background:var(--card);box-shadow:inset 0 0 0 1px rgba(247,226,75,.35)}
.lane:not(:last-child)::after{content:"";position:absolute;top:50%;right:-13px;z-index:1;width:10px;height:10px;border-top:2px solid var(--y);border-right:2px solid var(--y);transform:translateY(-50%) rotate(45deg)}
.lane-name{font-size:12px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--w-70)}
.lane-2 .lane-name{color:var(--y)}
.lane ul{display:grid;gap:10px;margin-top:14px}
.node{display:flex;align-items:center;gap:12px;padding:12px;border-radius:var(--r-sm);background:rgba(4,0,38,.55);box-shadow:inset 0 0 0 1px var(--w-08)}
.node b{display:block;font-size:14.5px;line-height:1.3;font-weight:600}
.node span{display:block;margin-top:2px;font-size:13px;line-height:1.4;color:var(--w-70)}
.flow-notes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:20px}
.flow-notes li{display:flex;gap:10px;font-size:14px;line-height:1.55;color:var(--w-70)}
.flow-notes svg{flex:none;width:18px;height:18px;margin-top:2px;color:var(--y)}
.care{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:40px}
.care-item{padding:24px;border-radius:var(--r);background:var(--w-04);box-shadow:inset 0 0 0 1px var(--w-08)}
.tools{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;margin-top:40px;padding-top:28px;border-top:1px solid var(--w-12)}
.tools-logos{margin:0;padding:0}
@media (max-width:1199px){
  .phases{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:28px}
  .route,.care{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rt-step:nth-child(3)::before{display:none}
  .where{grid-template-columns:1fr}
  .flow{grid-template-columns:1fr}
  .lane:not(:last-child)::after{top:auto;bottom:-13px;right:50%;transform:translateX(50%) rotate(135deg)}
  .flow-notes{grid-template-columns:1fr}
}
@media (max-width:809px){
  .phases,.route,.care{grid-template-columns:1fr}
  .phases li{padding-right:0}
  .rt-step::before{display:none}
  .brand img{width:124px}
}

/* Band naar de werkwijze */
.band{padding:0 0 120px}
.band-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:end;padding-top:64px;border-top:1px solid var(--w-12)}
.band .kicker{margin-bottom:16px}
.band .lead{margin-top:0}

/* Systeempagina */
.sys-hero{position:relative;padding:96px 0 0;overflow:hidden;isolation:isolate}
.sys-hero::before{content:"";position:absolute;z-index:-1;left:-260px;top:-420px;width:1100px;height:1100px;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,239,123,.12),rgba(158,145,255,.08) 45%,transparent 72%);transform:rotate(-24deg) scaleY(.55)}
.sys-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
.sys-hero .kicker{margin-bottom:20px}
.sys-hero .ch-promise{margin-top:20px}
.scenario{margin-top:24px;padding-left:18px;border-left:2px solid var(--y);font-size:17px;line-height:1.6;color:var(--w-80);max-width:56ch}
.media{position:relative;border-radius:var(--r);overflow:hidden;background:var(--card);box-shadow:inset 0 0 0 1px var(--w-08)}
.media-hero{height:470px}
.media-sm{height:300px}
.media-illus{display:grid;place-items:center;padding:28px;background:#08053a}
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin-top:72px;padding:28px 0;border-top:1px solid var(--w-12);border-bottom:1px solid var(--w-12)}
.facts dt{font-size:12px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--y)}
.facts dt::before{content:"[\00a0"}
.facts dt::after{content:"\00a0]"}
.facts dd{margin-top:10px;font-size:15px;line-height:1.5;color:var(--w)}

.sec{padding:112px 0 0}
.sec-first{padding-top:24px}
.sec-head{max-width:760px}
.sec-head .lbl{margin-bottom:16px}
.build{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:24px;margin-top:48px;align-items:start}
.basis-box{padding:36px;border-radius:var(--r);background:var(--card);box-shadow:inset 0 0 0 1px var(--w-08)}
.basis-box .h-4,.basis-box .h-5{color:var(--y)}
.basis-note{margin-top:4px;font-size:14px;color:var(--w-50)}
.basis-list{margin-top:18px}
.basis-list li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:12px;padding:16px 0;border-top:1px solid var(--w-12)}
.basis-list svg{width:20px;height:20px;margin-top:2px;color:var(--y);stroke-width:2}
.basis-list b{display:block;font-size:17px;line-height:1.4}
.basis-list span{display:block;margin-top:4px;font-size:15px;line-height:1.5;color:var(--w-70)}
.build-mods .h-4{margin:8px 0 18px}
.mod-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.mod-card{padding:22px 24px;border-radius:var(--r-sm);background:var(--w-04);box-shadow:inset 0 0 0 1px var(--w-08);transition:box-shadow .2s ease,background .2s ease}
.mod-card:hover{background:var(--w-08);box-shadow:inset 0 0 0 1px var(--w-20)}
.mod-name{font-size:17px;line-height:1.4;font-weight:600;color:var(--w)}
.mod-text{margin-top:6px;font-size:15px;line-height:1.5;color:var(--w-70)}

.day{margin-top:40px;border-top:1px solid var(--w-12)}
.day li{display:grid;grid-template-columns:120px minmax(0,1fr);gap:24px;align-items:baseline;padding:22px 0;border-bottom:1px solid var(--w-12)}
.day-time{font-size:22px;font-weight:500;color:var(--y)}
.day p{font-size:18px;line-height:1.5;color:var(--w)}
.rule-box{display:grid;grid-template-columns:1fr 1fr;margin-top:40px;border-radius:var(--r);overflow:hidden;background:var(--card);box-shadow:inset 0 0 0 1px var(--w-08)}
.rule-box>div{padding:32px 36px}
.rule-box>div+div{box-shadow:inset 1px 0 0 var(--w-12)}
.rule-box dt{font-size:12px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--y)}
.rule-box dt::before{content:"[\00a0"}
.rule-box dt::after{content:"\00a0]"}
.rule-box dd{margin-top:12px;font-size:20px;line-height:1.45;color:var(--w)}

.proof{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:center}
.proof-text .lbl{margin-bottom:16px}
.bullets{margin-top:24px}
.bullets li{position:relative;padding-left:22px;margin-top:12px;font-size:16px;line-height:1.55;color:var(--w-80)}
.bullets li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--y)}
.result{margin-top:32px;padding-top:24px;border-top:1px solid var(--w-12)}
.result-value{font-size:56px;line-height:1.05;font-weight:500;letter-spacing:-.03em;color:var(--y);overflow-wrap:anywhere}
.result-label{margin-top:10px;max-width:40ch;font-size:15px;line-height:1.5;color:var(--w-70)}
.quote-line{margin-top:28px;padding-left:18px;border-left:2px solid var(--y)}
.quote-line p{font-size:20px;line-height:1.45;color:var(--w)}
.quote-line footer{margin-top:8px;font-size:14px;color:var(--w-50)}
.proof-extra{margin-top:20px;font-size:15px;line-height:1.55;color:var(--w-70)}
.fig figcaption{margin-top:12px;font-size:14px;line-height:1.45;color:var(--w-50)}
.shot{position:relative;height:460px;border-radius:var(--r);overflow:hidden;background:var(--card);box-shadow:inset 0 0 0 1px var(--w-08)}
.shot-illus{display:grid;place-items:center;padding:28px}

/* Koppelingen */
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:32px}
.chip{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:8px 18px 8px 14px;border-radius:30px;background:var(--w-04);
  box-shadow:inset 0 0 0 1px var(--w-12);font-size:15px;line-height:1.3;color:var(--w)}
.chip svg{flex:none;width:20px;height:20px}
.partner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center;margin-top:48px;padding:40px;border-radius:var(--r);background:var(--card);box-shadow:inset 0 0 0 1px var(--w-08)}
.partner .lbl{margin-bottom:12px}
.partner-text p:not(.lbl){margin-top:12px;color:var(--w-70)}

.next{padding-bottom:120px}
.next-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.next-head .lbl{margin-bottom:16px}
.next-head .hero-actions{margin-top:0}
.index-next{margin-top:40px}

/* Klantverhalen */
.toc{display:flex;flex-wrap:wrap;gap:10px;margin-top:36px}
.pill{display:inline-flex;align-items:center;min-height:40px;padding:8px 18px;border-radius:30px;background:var(--w-04);box-shadow:inset 0 0 0 1px var(--w-12);font-size:14.5px;transition:background .2s ease}
.pill:hover{background:var(--w-08)}
.stories{display:grid;gap:32px;padding-bottom:120px}
.story-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:start;padding:48px;border-radius:var(--r);background:var(--card);box-shadow:inset 0 0 0 1px var(--w-08)}
.story-card .kicker{font-size:14px}
.story-title{margin-top:14px;color:var(--y)}
.story-dl{margin-top:24px}
.story-dl div{padding:16px 0;border-top:1px solid var(--w-12)}
.story-dl dt{font-size:12px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--y)}
.story-dl dt::before{content:"[\00a0"}
.story-dl dt::after{content:"\00a0]"}
.story-dl dd{margin-top:8px;font-size:16px;line-height:1.55;color:var(--w-80)}
.story-tech{margin-top:24px}
.story-tech .chips{margin-top:12px}
.story-link{margin-top:24px}
.story-media{position:sticky;top:calc(var(--nav-h) + 24px)}
.story-media .shot{height:420px}

/* Werkwijze */
.steps-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;margin-top:40px}
.step{padding:28px 24px;border-radius:var(--r);background:var(--card);box-shadow:inset 0 0 0 1px var(--w-08)}
.step .step-n{font-size:16px;font-weight:600;color:var(--y)}
.step .h-4{margin-top:36px;font-size:20px}
.step p{margin-top:8px;font-size:15px;line-height:1.55;color:var(--w-70)}
.service-chips .chip svg{color:var(--y);stroke-width:2}
.trust{display:grid;grid-template-columns:1fr 1fr;gap:0 56px;margin-top:40px;border-top:1px solid var(--w-12)}
.trust-item{padding:28px 0;border-bottom:1px solid var(--w-12)}
.trust-item p{margin-top:8px;font-size:16px;line-height:1.55;color:var(--w-70)}
.sec:last-child{padding-bottom:120px}

/* Samensteller */
.composer{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:40px;align-items:start;padding-bottom:120px}
.composer-main{display:grid;gap:40px;min-width:0}
.group{border:0;min-width:0}
.group legend,.basis-box .h-5{display:flex;align-items:center;gap:12px;margin-bottom:16px;font-size:22px;line-height:1.35;font-weight:500;color:var(--w)}
.basis-box .h-5{color:var(--y)}
.composer .step-n{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:50%;background:var(--y);color:var(--navy);font-size:14px;font-weight:700}
.opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.opt{position:relative;display:flex;align-items:flex-start;gap:14px;padding:18px 20px;border-radius:var(--r-sm);background:var(--w-04);
  box-shadow:inset 0 0 0 1px var(--w-12);cursor:pointer;transition:background .2s ease,box-shadow .2s ease}
.opt:hover{background:var(--w-08);box-shadow:inset 0 0 0 1px var(--w-20)}
.opt:has(input:checked){background:rgba(247,226,75,.08);box-shadow:inset 0 0 0 2px var(--y)}
.opt:has(input:focus-visible){outline:2px solid var(--y);outline-offset:3px}
.opt input{flex:none;width:20px;height:20px;margin-top:2px;accent-color:var(--y);cursor:pointer}
.opt input:focus-visible{outline:none}
.opt-body{display:grid;gap:4px;min-width:0}
.opt-name{font-size:17px;line-height:1.35;font-weight:600;color:var(--w)}
.opt-text{font-size:14.5px;line-height:1.5;color:var(--w-70)}
.sys-block{display:grid;gap:24px}
.sys-block[hidden]{display:none}
.blk-title{justify-self:start;padding:6px 14px;border-radius:30px;background:var(--y);color:var(--navy);font-size:14px;font-weight:700}
.summary{position:sticky;top:calc(var(--nav-h) + 24px);padding:32px;border-radius:var(--r);background:var(--card);box-shadow:inset 0 0 0 1px var(--w-12)}
.summary .h-4{color:var(--y)}
.sum-sentence{margin-top:12px;font-size:22px;line-height:1.35;color:var(--w)}
.sum-label{margin-top:20px;font-size:12px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--w-50)}
.sum-list li{position:relative;margin-top:8px;padding-left:18px;font-size:15.5px;color:var(--w-80)}
.sum-list li::before{content:"";position:absolute;left:0;top:.6em;width:6px;height:6px;border-radius:50%;background:var(--y)}
.link-text{margin-top:8px;padding:12px 14px;border-radius:10px;background:var(--w-04);box-shadow:inset 0 0 0 1px var(--w-08);font-size:13.5px;line-height:1.45;color:var(--w-70);overflow-wrap:anywhere}
.sum-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:24px}
.sum-actions .btn-y{grid-column:1/-1}
.sum-actions .btn{padding:10px 12px}
.sum-status{min-height:1.5em;margin-top:14px;font-size:14px;color:var(--y)}
.composer-hero .note{margin-top:16px;color:var(--w-50);font-size:14px}

/* Contact */
.cta{padding:0 0 120px}
.cta-card{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:32px;align-items:center;padding:44px 48px;border-radius:var(--r);background:var(--card);box-shadow:inset 0 0 0 1px var(--w-08)}
.avatar{display:grid;place-items:center;width:96px;height:96px;border-radius:50%;background:var(--y);color:var(--navy);font-size:30px;font-weight:600;letter-spacing:-.02em}
.avatar-photo{object-fit:cover}
.cta .h-2{font-size:36px}
.cta .lead{margin-top:10px;font-size:16px}
.cta-person{margin-top:12px;font-size:15px;color:var(--w-70)}
.cta-actions{display:flex;flex-direction:column;gap:10px}

/* Footer (klarifai.nl) */
.foot{padding:72px 0 32px;box-shadow:0 -1px 0 var(--w-08)}
.foot-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr);gap:40px}
.reach-row{display:grid;grid-template-columns:120px minmax(0,1fr);gap:16px;align-items:baseline}
.reach-row+.reach-row{margin-top:14px}
.reach-tel{font-size:16px;font-weight:600;color:var(--y-4)}
.reach-mail{font-size:30px;line-height:1.3;letter-spacing:-.02em;color:var(--y);overflow-wrap:anywhere}
.reach-tel:hover,.reach-mail:hover{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.foot-role{margin-top:28px;max-width:44ch;font-size:15px;color:var(--w-70)}
.foot-col .lbl{margin-bottom:16px}
.foot-col li+li{margin-top:8px}
.foot-col a{font-size:16px;font-weight:600;color:var(--w)}
.foot-col a:hover{color:var(--y)}
.copy{margin-top:56px;font-size:12.5px;color:var(--w-70)}
.copy a{color:var(--y-4)}
.copy a:hover{text-decoration:underline}

/* Beelden: echte schermen in een laptop, telefoon of venster, op de kaartachtergrond. Maten in cq-eenheden. */
.scene{position:absolute;inset:0;container-type:size;overflow:hidden;isolation:isolate;
  background:radial-gradient(70% 80% at 18% 0%,rgba(158,145,255,.20),transparent 62%),var(--card)}
.scene::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;
  background:linear-gradient(var(--w-04) 1px,transparent 1px) 0 0/44px 44px,linear-gradient(90deg,var(--w-04) 1px,transparent 1px) 0 0/44px 44px;
  -webkit-mask:radial-gradient(80% 80% at 50% 40%,#000 30%,transparent 80%);mask:radial-gradient(80% 80% at 50% 40%,#000 30%,transparent 80%)}
.phone{position:absolute;z-index:2;left:50%;top:50%;height:82cqh;aspect-ratio:9/19;border-radius:5.4cqh;padding:1.1cqh;transform:translate(-50%,-50%) rotate(-4deg);
  background:linear-gradient(145deg,#2c2c34,#08080c 55%,#1c1c22);box-shadow:inset 0 0 0 .35cqh rgba(255,255,255,.14),0 0 0 .25cqh #000;filter:drop-shadow(0 5cqh 6cqh rgba(0,0,0,.6))}
.phone::before{content:"";position:absolute;z-index:2;top:2.4cqh;left:50%;width:11cqh;height:2.6cqh;transform:translateX(-50%);border-radius:2cqh;background:#000}
.screen{display:flex;flex-direction:column;height:100%;border-radius:4.4cqh;overflow:hidden;background:#fff}
.screen-img img{width:100%;height:100%;object-fit:cover;object-position:top center}
.win{position:absolute;z-index:2;left:50%;top:50%;width:max-content;transform:translate(-50%,-50%);border-radius:2.2cqh;overflow:hidden;line-height:0;
  background:#000;box-shadow:0 0 0 1px var(--w-12),0 5cqh 7cqh rgba(0,0,0,.55)}
.win img{display:block;width:auto;height:auto;max-width:86cqw;max-height:82cqh}
.laptop{position:absolute;z-index:2;left:50%;top:52%;width:min(84cqw,124cqh);transform:translate(-50%,-50%);filter:drop-shadow(0 4cqh 5cqh rgba(0,0,0,.6))}
.lt-lid{padding:2.2% 2.2% 2.8%;border-radius:2.4cqh 2.4cqh .8cqh .8cqh;background:linear-gradient(160deg,#34343c,#0c0c11 55%,#1f1f26);box-shadow:inset 0 0 0 .25cqh rgba(255,255,255,.14)}
.lt-screen{border-radius:.6cqh;overflow:hidden;line-height:0;background:#fff}
.lt-screen img{display:block;width:100%;height:auto}
.lt-base{position:relative;height:0;padding-top:3.4%;margin:0 -6%;border-radius:0 0 40% 40% / 0 0 100% 100%;background:linear-gradient(#e3e5ea,#b4b8c0 45%,#7f848e);box-shadow:inset 0 .25cqh 0 rgba(255,255,255,.7)}
.lt-base::before{content:"";position:absolute;left:50%;top:0;width:15%;height:38%;transform:translateX(-50%);border-radius:0 0 1.2cqh 1.2cqh;background:rgba(0,0,0,.16)}
.scene-dots .phone{transform:translate(-50%,-50%) rotate(3deg)}

/* Breekpunt 1: tablet en kleine laptop */
@media (max-width:1199px){
  .h-display{font-size:54px}
  .opening-grid{grid-template-columns:1fr;gap:28px}
  .opening-context{padding-top:0;max-width:640px}
  .index a{grid-template-columns:64px minmax(0,1fr) minmax(0,1fr)}
  .chapter{grid-template-columns:1fr;min-height:0}
  .ch-visual{height:300px}
  .sys-hero-grid{grid-template-columns:1fr;gap:40px}
  .facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .build{grid-template-columns:1fr}
  .proof{grid-template-columns:1fr;gap:40px}
  .steps-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .story-card{grid-template-columns:1fr;gap:32px}
  .story-media{position:static}
  .composer{grid-template-columns:1fr}
  .summary{position:static}
  .cta-card{grid-template-columns:auto minmax(0,1fr)}
  .cta-actions{grid-column:1/-1;flex-direction:row;flex-wrap:wrap}
  .partner{grid-template-columns:1fr}
}

/* Breekpunt 2: telefoon */
@media (max-width:809px){
  :root{--gutter:20px;--nav-h:68px}
  .h-display{font-size:40px;letter-spacing:-.025em}
  .h-2{font-size:32px}
  .h-3{font-size:26px}
  .lead{font-size:16px}
  .burger{position:relative;display:block;width:44px;height:44px;border:0;border-radius:10px;background:none;cursor:pointer}
  .burger span{position:absolute;left:11px;right:11px;height:1.5px;background:var(--w);transition:transform .2s ease,top .2s ease}
  .burger span:first-child{top:17px}
  .burger span:last-child{top:25px}
  .nav.is-open .burger span:first-child{top:21px;transform:rotate(45deg)}
  .nav.is-open .burger span:last-child{top:21px;transform:rotate(-45deg)}
  .menu{display:none;position:fixed;left:0;right:0;top:var(--nav-h);flex-direction:column;align-items:stretch;gap:0;padding:12px 20px 24px;background:rgba(4,0,38,.98);box-shadow:0 1px 0 var(--w-08)}
  .nav.is-open .menu{display:flex}
  .menu .link{padding:14px 0;font-size:18px;color:var(--w);box-shadow:0 1px 0 var(--w-08)}
  .menu .btn{margin-top:16px}
  .opening{padding:72px 0 56px}
  .index{margin-top:48px}
  .index a{grid-template-columns:44px minmax(0,1fr);padding:16px 0}
  .idx-name{font-size:19px}
  .idx-text{display:none}
  .chapters{padding-bottom:80px}
  .chapter-list{gap:32px}
  .ch-copy{padding:28px 24px}
  .ch-name{font-size:32px}
  .ch-promise{font-size:20px}
  .ch-visual{height:240px;padding:16px}
  .band{padding-bottom:80px}
  .band-grid{grid-template-columns:1fr;gap:16px;padding-top:48px}
  .sys-hero{padding-top:56px}
  .media-hero{height:300px}
  .facts{grid-template-columns:1fr;gap:18px;margin-top:48px}
  .sec{padding-top:80px}
  .basis-box{padding:24px}
  .mod-grid{grid-template-columns:1fr}
  .day li{grid-template-columns:72px minmax(0,1fr);gap:12px}
  .day-time{font-size:18px}
  .day p{font-size:16px}
  .rule-box{grid-template-columns:1fr}
  .rule-box>div{padding:24px}
  .rule-box>div+div{box-shadow:inset 0 1px 0 var(--w-12)}
  .rule-box dd{font-size:17px}
  .result-value{font-size:42px}
  .shot,.story-media .shot{height:300px}
  .partner{padding:24px;gap:24px}
  .next{padding-bottom:80px}
  .story-card{padding:24px}
  .stories{padding-bottom:80px}
  .steps-grid{grid-template-columns:1fr}
  .step .h-4{margin-top:16px}
  .trust{grid-template-columns:1fr}
  .opts{grid-template-columns:1fr}
  .summary{padding:24px}
  .sum-actions{grid-template-columns:1fr}
  .composer{padding-bottom:80px}
  .cta{padding-bottom:80px}
  .cta-card{grid-template-columns:1fr;gap:20px;padding:28px 24px}
  .avatar{width:72px;height:72px;font-size:24px}
  .cta .h-2{font-size:28px}
  .cta-actions{flex-direction:column}
  .foot-grid{grid-template-columns:1fr 1fr;gap:32px}
  .foot-reach{grid-column:1/-1}
  .reach-row{grid-template-columns:1fr;gap:4px}
  .reach-mail{font-size:22px}
}

/* Animaties zoals op klarifai.nl (research/referenties/klarifai-home.md). Alleen actief als script.js draait
   (html.js) en de bezoeker geen beperkte beweging heeft gekozen; anders is alles direct zichtbaar. */
.js .rv{opacity:0;transform:translateY(30px);transition:opacity 1.1s cubic-bezier(.16,1,.3,1),transform 1.4s cubic-bezier(.16,1,.3,1)}
.js .rv-x{opacity:0;transform:translateX(80px);transition:opacity 1.6s cubic-bezier(0,0,0,1),transform 2s cubic-bezier(0,0,0,1)}
.js .rv.is-in,.js .rv-x.is-in{opacity:1;transform:none}
.js .scr{visibility:hidden}
.js .scr.is-in{visibility:visible}
.scr .sc{color:var(--w-70)}
.lbl-w .sc{color:var(--y)}
@keyframes ray-in{from{opacity:0;transform:translate(-300px,-300px) rotate(-24deg) scaleY(.55) scale(.5)}to{opacity:1;transform:rotate(-24deg) scaleY(.55)}}
.js .opening::before{animation:ray-in 2s cubic-bezier(.44,0,.56,1) both}
@media (prefers-reduced-motion:reduce){
  .js .rv,.js .rv-x{opacity:1;transform:none;transition:none}
  .js .scr{visibility:visible}
  .js .opening::before{animation:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important}
  .btn:hover .arr{transform:none}
}

/* Print: alleen de samenvatting van de samensteller, als een nette A4 (Printen of PDF) */
@media print{
  @page{size:A4;margin:16mm 18mm}
  html,body{background:#fff;color:#040026;font-size:11pt;line-height:1.45}
  .skip,.nav,.cta,.foot,.opening,.composer-main,.sum-actions,.sum-status,noscript{display:none!important}
  .composer{display:block;padding:0;max-width:none}
  .summary{position:static;padding:0;box-shadow:none;background:#fff}
  .summary *{color:#040026!important}
  .print-only{display:block}
  .print-head{font-size:10pt;font-weight:700;margin-bottom:6pt}
  .summary .h-4{font-size:18pt}
  .sum-sentence{font-size:14pt}
  .sum-list li::before{background:#040026}
  .link-text{background:none;box-shadow:none;padding:0;font-size:10pt}
  .print-contact{margin-top:18pt;padding-top:8pt;border-top:1px solid #cfcde0;font-size:10pt}
}