:root{
  color-scheme: light dark;
  --bg:#F6F1E7; --card:#FFFDF9; --card-2:#F8F3EA; --fill:rgba(110,90,60,.13); --fill-2:rgba(110,90,60,.21);
  --sep:rgba(90,65,25,.15); --label:#1F1A13; --label-2:#5A5246; --label-3:#6A6154;
  --tint:#C9A04A; --tint-2:#D4AD57; --tint-ink:#1B1302; --tint-soft:rgba(201,160,74,.16);
  --accent:#133057; --accent-ink:#FFFFFF; --accent-soft:rgba(19,48,87,.09);
  --gold:#B8862F; --gold-soft:rgba(184,134,47,.18);
  --green:#34C759; --orange:#FF9500; --blue:#0A84FF; --indigo:#5856D6; --teal:#30B0C7; --red:#FF3B30; --gray:#8E8E93;
  --glass:rgba(255,252,246,.76); --glass-line:rgba(255,255,255,.6);
  --shadow:0 1px 2px rgba(60,40,10,.06),0 10px 30px rgba(60,40,10,.09);
  --shadow-lift:0 2px 6px rgba(0,0,0,.06),0 18px 40px rgba(0,0,0,.10);
  --sf:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Inter","Segoe UI",Roboto,Arial,sans-serif;
  --arabic:'Amiri',serif;
  --r-xl:28px; --r-l:20px; --r-m:14px;
  --spring:cubic-bezier(.34,1.56,.64,1);
  --ease:cubic-bezier(.22,1,.36,1);
  --wrap:1180px; --g:16px;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0E0C09; --card:#1D1A15; --card-2:#26221B; --fill:rgba(120,120,128,.24); --fill-2:rgba(120,120,128,.32);
    --sep:rgba(84,84,88,.55); --label:#F5F5F7; --label-2:#A1A1A6; --label-3:#8E8E93;
    --tint:#D8B25E; --tint-2:#E6C57A; --tint-ink:#1A1405; --tint-soft:rgba(216,178,94,.16);
    --accent:#8DB0E3; --accent-ink:#0B1A2E; --accent-soft:rgba(141,176,227,.16);
    --gold:#D8B25E; --gold-soft:rgba(216,178,94,.16);
    --green:#30D158; --orange:#FF9F0A; --blue:#0A84FF; --indigo:#5E5CE6; --teal:#40C8E0; --red:#FF453A;
    --glass:rgba(29,26,21,.74); --glass-line:rgba(255,255,255,.10);
    --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 28px rgba(0,0,0,.35);
    --shadow-lift:0 2px 6px rgba(0,0,0,.5),0 18px 40px rgba(0,0,0,.5);
  }
}
/* vaste thema's voor het overzicht van onderdelen */
.thema-licht{color-scheme:light;
  --bg:#F6F1E7; --card:#FFFDF9; --card-2:#F8F3EA; --fill:rgba(110,90,60,.13); --fill-2:rgba(110,90,60,.21);
  --sep:rgba(90,65,25,.15); --label:#1F1A13; --label-2:#5A5246; --label-3:#6A6154;
  --tint:#C9A04A; --tint-2:#D4AD57; --tint-ink:#1B1302; --tint-soft:rgba(201,160,74,.16);
  --accent:#133057; --accent-ink:#FFFFFF; --accent-soft:rgba(19,48,87,.09);
  --gold:#B8862F; --gold-soft:rgba(184,134,47,.18);
  --green:#34C759; --orange:#FF9500; --blue:#0A84FF; --indigo:#5856D6; --teal:#30B0C7; --red:#FF3B30; --gray:#8E8E93;
  --glass:rgba(255,252,246,.76); --glass-line:rgba(255,255,255,.6);
  --shadow:0 1px 2px rgba(60,40,10,.06),0 10px 30px rgba(60,40,10,.09);
  --shadow-lift:0 2px 6px rgba(0,0,0,.06),0 18px 40px rgba(0,0,0,.10);
  background:var(--bg);color:var(--label)}
.thema-donker{color-scheme:dark;
    --bg:#0E0C09; --card:#1D1A15; --card-2:#26221B; --fill:rgba(120,120,128,.24); --fill-2:rgba(120,120,128,.32);
    --sep:rgba(84,84,88,.55); --label:#F5F5F7; --label-2:#A1A1A6; --label-3:#8E8E93;
    --tint:#D8B25E; --tint-2:#E6C57A; --tint-ink:#1A1405; --tint-soft:rgba(216,178,94,.16);
    --accent:#8DB0E3; --accent-ink:#0B1A2E; --accent-soft:rgba(141,176,227,.16);
    --gold:#D8B25E; --gold-soft:rgba(216,178,94,.16);
    --green:#30D158; --orange:#FF9F0A; --blue:#0A84FF; --indigo:#5E5CE6; --teal:#40C8E0; --red:#FF453A;
    --glass:rgba(29,26,21,.74); --glass-line:rgba(255,255,255,.10);
    --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 28px rgba(0,0,0,.35);
    --shadow-lift:0 2px 6px rgba(0,0,0,.5),0 18px 40px rgba(0,0,0,.5);
  background:var(--bg);color:var(--label)}
@media (min-width:760px){ :root{ --g:28px; } }
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--sf);background:var(--bg);color:var(--label);font-size:17px;line-height:1.47;letter-spacing:-.022em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img,video{display:block;max-width:100%}
a{color:var(--accent)}
.skip{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--tint);color:var(--tint-ink);padding:10px 16px;border-radius:12px;font-weight:600;text-decoration:none}
.skip:focus{left:8px}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:10px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--g)}

/* ---------- knoppen ---------- */
.btn{--h:50px;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:var(--h);padding:0 24px;border-radius:999px;border:0;font:600 17px/1 var(--sf);letter-spacing:-.022em;text-decoration:none;cursor:pointer;position:relative;overflow:hidden;isolation:isolate;
  transition:transform .45s var(--spring),box-shadow .3s var(--ease),background-color .2s,filter .2s;-webkit-tap-highlight-color:transparent;user-select:none}
.btn:active{transform:scale(.95);transition-duration:.12s}
.btn-primary{background:linear-gradient(180deg,#D6B062,#C39440);color:var(--tint-ink);box-shadow:0 1px 0 rgba(255,255,255,.45) inset,0 -1px 0 rgba(120,80,10,.25) inset,0 6px 16px rgba(150,105,25,.30)}
.btn-primary::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,0) 55%)}
.btn-primary::before{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;z-index:1;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);transition:left .7s var(--ease);pointer-events:none}
@media (hover:hover){
  .btn-primary:hover{background:linear-gradient(180deg,#DDB96C,#C99C48);box-shadow:0 1px 0 rgba(255,255,255,.45) inset,0 10px 24px rgba(150,105,25,.36);transform:translateY(-1px)}
  .btn-primary:hover::before{left:120%}
  .btn-tinted:hover{background:var(--fill-2)}
  .btn-glass:hover{background:rgba(255,255,255,.28)}
}
.btn-tinted{background:var(--accent-soft);color:var(--accent)}
.btn-glass{background:rgba(255,255,255,.18);color:#fff;-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);box-shadow:inset 0 0 0 .5px rgba(255,255,255,.45),inset 0 1px 0 rgba(255,255,255,.35)}
.btn-white{background:#fff;color:#133057;box-shadow:0 8px 24px rgba(0,0,0,.25)}
.btn-sm{--h:36px;padding:0 16px;font-size:15px}
.btn-block{width:100%}
.btn svg{width:18px;height:18px}
@media (prefers-color-scheme: dark){ .btn-primary{box-shadow:0 1px 0 rgba(255,255,255,.3) inset,0 6px 18px rgba(216,178,94,.22)} }

/* ---------- navigatie (zwevend glas) ---------- */
.nav{position:fixed;top:10px;left:0;right:0;z-index:50;pointer-events:none}
.nav-in{pointer-events:auto;max-width:calc(var(--wrap) - 2*var(--g) + 24px);margin:0 auto;width:calc(100% - 2*var(--g) + 8px);height:56px;display:flex;align-items:center;gap:12px;padding:0 8px 0 16px;border-radius:999px;
  transition:background-color .35s var(--ease),box-shadow .35s var(--ease),-webkit-backdrop-filter .35s,backdrop-filter .35s}
.nav.solid .nav-in{background:var(--glass);-webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);box-shadow:inset 0 0 0 .5px var(--glass-line),0 8px 30px rgba(0,0,0,.08)}
.brand{display:flex;align-items:center;gap:8px;text-decoration:none;color:#fff;font-weight:700;font-size:19px;letter-spacing:-.03em;transition:color .35s}
.brand img{height:22px;width:auto}
.brand .m-navy{display:none}
.nav.solid .brand{color:var(--label)}
.nav.solid .brand .m-light{display:none}
.nav.solid .brand .m-navy{display:block}
@media (prefers-color-scheme: dark){ .nav.solid .brand .m-light{display:block} .nav.solid .brand .m-navy{display:none} }
.links{display:none;margin-left:auto;gap:4px}
.links a{color:rgba(255,255,255,.92);text-decoration:none;font-size:15px;font-weight:500;padding:8px 12px;border-radius:999px;transition:background-color .2s,color .35s}
.nav.solid .links a{color:var(--label)}
.links a:hover{background:var(--fill)}
.nav .btn{margin-left:auto}
@media (min-width:860px){ .links{display:flex} .nav .btn{margin-left:8px} }

/* ---------- hero ---------- */
.hero{padding:10px 10px 0}
.hero-card{position:relative;overflow:hidden;border-radius:var(--r-xl);min-height:min(86vh,720px);display:flex;align-items:flex-end;color:#fff;background:#1a1510;box-shadow:var(--shadow)}
.hero-card video,.hero-card .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-card .veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.38) 0%,rgba(0,0,0,0) 22%,rgba(0,0,0,.12) 40%,rgba(0,0,0,.62) 62%,rgba(0,0,0,.86) 100%)}
@media (min-width:760px){.hero-card .veil{background:linear-gradient(180deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,0) 20%),linear-gradient(90deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.45) 42%,rgba(0,0,0,0) 72%)}}
.hero-in{text-shadow:0 1px 18px rgba(0,0,0,.25)}
.hero-ar{position:absolute;right:6%;top:18%;font-family:var(--arabic);font-size:clamp(64px,11vw,140px);line-height:1;color:rgba(232,203,147,.9);text-shadow:0 4px 30px rgba(0,0,0,.35)}
.hero-in{position:relative;padding:0 22px 26px;max-width:720px}
.eyebrow{font-size:13px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--accent)}
.hero .eyebrow{color:#F1D9A8}
.hero h1{font-size:clamp(38px,6.4vw,68px);line-height:1.04;letter-spacing:-.035em;font-weight:700;margin:10px 0 12px}
.hero p{font-size:clamp(17px,2vw,21px);color:rgba(255,255,255,.88);max-width:34ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
@media (min-width:760px){ .hero{padding:12px 12px 0} .hero-in{padding:0 48px 48px} }

/* ---------- secties ---------- */
section{padding:72px 0 0}
.head{margin-bottom:22px;max-width:640px}
.head h2{font-size:clamp(30px,4.4vw,44px);line-height:1.08;letter-spacing:-.032em;font-weight:700;margin-top:6px}
.head p{color:var(--label-2);font-size:clamp(17px,1.8vw,19px);margin-top:10px}
@media (min-width:760px){ section{padding-top:112px} .head{margin-bottom:32px} }

.card{background:var(--card);border-radius:var(--r-l);box-shadow:var(--shadow)}

/* gegroepeerde lijst (zoals Instellingen) */
.group{background:var(--card);border-radius:var(--r-l);overflow:hidden;box-shadow:var(--shadow)}
.row{display:flex;align-items:center;gap:14px;padding:14px 18px;position:relative;min-height:56px}
.row + .row::before{content:"";position:absolute;top:0;right:0;left:62px;height:.5px;background:var(--sep)}
.row .ic{flex:none;width:32px;height:32px;border-radius:8px;display:grid;place-items:center;color:#fff}
.row .ic svg{width:19px;height:19px}
.row .tx{flex:1}
.row .tx b{display:block;font-weight:600;font-size:17px}
.row .tx span{display:block;color:var(--label-2);font-size:15px;line-height:1.35;margin-top:1px}
.ic.orange,.ic.green,.ic.blue,.ic.indigo,.ic.teal,.ic.navy{background:linear-gradient(180deg,#1E4274,#133057)}
@media (prefers-color-scheme: dark){ .ic.orange,.ic.green,.ic.blue,.ic.indigo,.ic.teal,.ic.navy{background:linear-gradient(180deg,#3668AC,#234C85)} } .ic.gold{background:#B8862F} .ic.gray{background:#8E8E93}
.foot-note{color:var(--label-2);font-size:15px;margin:12px 18px 0}

.two{display:grid;gap:16px}
@media (min-width:860px){ .two{grid-template-columns:1fr 1fr;gap:24px;align-items:start} }

/* segmented control */
.seg{position:relative;display:grid;grid-template-columns:repeat(3,1fr);background:var(--fill);border-radius:11px;padding:2px;max-width:420px;margin:0 0 20px}
.seg .thumb{position:absolute;top:2px;bottom:2px;left:2px;width:calc((100% - 4px)/3);border-radius:9px;background:var(--card);box-shadow:0 3px 8px rgba(0,0,0,.12),0 3px 1px rgba(0,0,0,.04),inset 0 0 0 .5px rgba(0,0,0,.04);transition:transform .45s var(--spring)}
@media (prefers-color-scheme: dark){ .seg .thumb{background:#636366} }
.seg button{position:relative;z-index:1;height:36px;border:0;background:none;font:600 15px var(--sf);letter-spacing:-.01em;color:var(--label);cursor:pointer;border-radius:9px;-webkit-tap-highlight-color:transparent}
.seg button[aria-selected="false"]{font-weight:500;color:var(--label-2)}
.panel[hidden]{display:none}
.panel{animation:paneIn .5s var(--ease)}
@keyframes paneIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* schermafbeeldingen */
.shot{background:var(--card);border-radius:var(--r-l);box-shadow:var(--shadow);overflow:hidden;transition:transform .5s var(--spring),box-shadow .35s var(--ease)}
@media (hover:hover){ .shot:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift)} }
.shot .scr{background:#FAF5EF;padding:14px 14px 0}
.shot .scr img{width:100%;height:auto;border-radius:12px 12px 0 0}
.shot figcaption{padding:16px 18px 18px}
.shot figcaption b{display:block;font-size:17px;font-weight:600}
.shot figcaption span{display:block;color:var(--label-2);font-size:15px;line-height:1.4;margin-top:2px}
.small{color:var(--label-3);font-size:13px;margin-top:14px}

/* stappen */
.steps .n{flex:none;width:32px;height:32px;border-radius:50%;background:var(--accent-soft);color:var(--accent);font-weight:700;font-size:15px;display:grid;place-items:center}
.price{padding:24px 22px}
.price h3{font-size:24px;letter-spacing:-.028em;font-weight:700}
.price p{color:var(--label-2);margin-top:8px}
.price .tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.tag{font-size:14px;font-weight:600;padding:6px 12px;border-radius:999px;background:var(--gold-soft);color:var(--label)}


/* donkere band voor vertrouwen en prijs */
.band{margin:72px 10px 0;border-radius:var(--r-xl);padding:56px 0 64px;color:var(--label);
  background:linear-gradient(160deg,#F3E2BC 0%,#E9CF96 55%,#DDBC78 100%);
  --card:#FFFDF9; --label:#1F1A13; --label-2:#5A4A2E; --sep:rgba(90,65,25,.14); --gold-soft:rgba(255,255,255,.55);
  --shadow:0 1px 2px rgba(90,60,10,.08),0 12px 30px rgba(110,75,15,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6)}
.band .eyebrow{color:#133057}
.band .price .tag{background:rgba(201,160,74,.18)}
@media (min-width:760px){ .band{margin:112px 12px 0;padding:88px 0 96px} }
@media (prefers-color-scheme: dark){
  .band{background:linear-gradient(160deg,#2A2114 0%,#1E180F 100%);box-shadow:inset 0 0 0 .5px rgba(216,178,94,.25);
    --card:#2A2319; --label:#F5EEDF; --label-2:#C9BCA3; --sep:rgba(216,178,94,.16)}
  .band .eyebrow{color:#D8B25E}
  .band .price .tag{background:rgba(216,178,94,.18)}
}


/* functies: raster op desktop */
@media (min-width:900px){
  .feats{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;background:none;box-shadow:none;overflow:visible;border-radius:0}
  .feats .row{flex-direction:column;align-items:flex-start;gap:18px;background:var(--card);border-radius:var(--r-l);box-shadow:var(--shadow);padding:22px 20px 24px;transition:transform .5s var(--spring),box-shadow .35s var(--ease),opacity .8s var(--ease)}
  .feats .row:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift)}
  .feats .row + .row::before{display:none}
  .feats .ic{width:42px;height:42px;border-radius:12px}
  .feats .ic svg{width:22px;height:22px}
  .feats .row:nth-child(2){transition-delay:.05s}.feats .row:nth-child(3){transition-delay:.1s}.feats .row:nth-child(4){transition-delay:.15s}.feats .row:nth-child(5){transition-delay:.2s}
}

/* verhaal in stappen */
.verhaal{position:relative}
.podium{display:none}
.stappen-wrap{position:relative}
.lijn{position:absolute;left:19px;top:20px;bottom:40px;width:2px;background:var(--sep);border-radius:2px}
.lijn i{position:absolute;inset:0;background:linear-gradient(180deg,#D6B062,#B8862F);transform-origin:top;transform:scaleY(0);border-radius:2px;transition:transform .15s linear}
.stappen{list-style:none;display:flex;flex-direction:column;gap:44px}
.stap-tx{position:relative;padding-left:58px}
.knoop{position:absolute;left:0;top:0;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:16px;background:var(--card);color:var(--accent);box-shadow:0 0 0 1px var(--sep),var(--shadow);transition:background .4s,color .4s,transform .55s var(--spring),box-shadow .4s}
.stap.aan .knoop,.stap.klaar .knoop{background:linear-gradient(180deg,#D6B062,#C39440);color:#1B1302;box-shadow:0 0 0 5px var(--bg),0 6px 16px rgba(150,105,25,.32)}
.stap.aan .knoop{transform:scale(1.12)}
.wanneer{font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.02em;color:var(--accent);display:flex;align-items:center;gap:8px;min-height:40px}
.rol{font-size:12px;text-transform:none;letter-spacing:0;font-weight:600;padding:3px 10px;border-radius:999px;background:var(--gold-soft);color:var(--label)}
.stap h3{font-size:clamp(22px,2.4vw,30px);letter-spacing:-.03em;line-height:1.15;font-weight:700;margin-top:2px}
.stap p{color:var(--label-2);margin-top:8px;max-width:42ch}

/* telefoon en uitvergroting */
.toestel{background:#141414;border-radius:36px;padding:7px;position:relative;box-shadow:inset 0 0 0 1.5px #3a3a3c,0 30px 60px rgba(40,25,5,.26),0 8px 18px rgba(40,25,5,.14)}
.toestel::before{content:"";position:absolute;top:13px;left:50%;width:28%;height:16px;margin-left:-14%;background:#000;border-radius:999px;z-index:3}
.scherm{position:relative;border-radius:30px;overflow:hidden;background:#17304F;aspect-ratio:520/1180}
.scherm img{position:absolute;left:0;bottom:0;width:100%;height:auto;opacity:0;transition:opacity .6s var(--ease)}
.scherm img.on,.mini .scherm img{opacity:1}
.zoom img{display:block;width:100%;height:auto;background:#FAF5EF;padding:4px;border-radius:20px;box-shadow:0 26px 50px rgba(40,25,5,.26),0 0 0 1px rgba(90,65,25,.08)}
.zoom img{box-sizing:border-box}

.mini{position:relative;margin:18px 0 0 58px;height:330px;border-radius:24px;overflow:hidden;background:linear-gradient(160deg,#F3E2BC 0%,#E6CB8E 100%)}
.mini .toestel{position:absolute;left:8%;top:24px;width:54%}
.mini .zoom{position:absolute;right:4%;bottom:20px;width:70%}
@media (prefers-color-scheme: dark){ .mini{background:linear-gradient(160deg,#2F2616,#1E180F)} }

@media (min-width:980px){
  .verhaal{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:40px;align-items:start}
  .podium{display:block;position:sticky;top:90px;height:calc(100vh - 110px);min-height:600px;max-height:780px}
  .gloed{position:absolute;left:4%;right:4%;top:6%;bottom:6%;border-radius:44px;background:linear-gradient(160deg,#F3E2BC 0%,#E6CB8E 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.6)}
  @media (prefers-color-scheme: dark){ .gloed{background:linear-gradient(160deg,#2F2616,#1E180F);box-shadow:inset 0 0 0 .5px rgba(216,178,94,.25)} }
  .podium .toestel{position:absolute;left:11%;top:50%;width:min(310px,50%);transform:translateY(-50%)}
  .podium .zoom{position:absolute;right:0;top:60%;width:min(390px,62%);height:0}
  .podium .zoom img{position:absolute;left:0;top:0;opacity:0;transform:translateY(-40%) scale(.94);transition:opacity .45s var(--ease),transform .7s var(--spring)}
  .podium .zoom img.on{opacity:1;transform:translateY(-50%) scale(1)}
  .mini{display:none}
  .stap{min-height:62vh;display:flex;align-items:center}
  .stap-tx{opacity:.35;transition:opacity .5s var(--ease)}
  .stap.aan .stap-tx{opacity:1}
  .stappen{gap:0}
  .lijn{top:31vh;bottom:31vh}
  .stap p{font-size:19px}
}

/* vragen naast elkaar op desktop */
@media (min-width:900px){ .vragen-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:48px;align-items:start} .vragen-grid .head{position:sticky;top:110px} }

/* vragen */
details{position:relative}
details + details::before{content:"";position:absolute;top:0;left:18px;right:0;height:.5px;background:var(--sep)}
summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;padding:16px 18px;font-weight:600;font-size:17px;-webkit-tap-highlight-color:transparent}
summary::-webkit-details-marker{display:none}
summary::after{content:"";margin-left:auto;flex:none;width:9px;height:9px;border-right:2px solid var(--label-3);border-bottom:2px solid var(--label-3);transform:rotate(45deg) translate(-2px,-2px);transition:transform .35s var(--spring)}
details[open] summary::after{transform:rotate(225deg) translate(-2px,-2px)}
details p{padding:0 18px 16px;color:var(--label-2);margin-top:-4px}
@media (hover:hover){ summary:hover{background:var(--fill)} }

/* formulier */
.form .group{margin-bottom:12px}
.field{display:block;padding:10px 18px 11px;position:relative}
.field + .field::before{content:"";position:absolute;top:0;left:18px;right:0;height:.5px;background:var(--sep)}
.field label{display:block;font-size:13px;font-weight:500;color:var(--label-2);margin-bottom:2px}
.field label i{font-style:normal;color:var(--label-3)}
.field input,.field textarea{width:100%;border:0;background:transparent;font:400 17px/1.35 var(--sf);color:var(--label);padding:2px 0;outline:none;letter-spacing:-.022em}
.field textarea{min-height:84px;resize:vertical}
.field:focus-within label{color:var(--accent)}
.hp{position:absolute;left:-9999px}
.form small{display:block;color:var(--label-2);font-size:13px;margin:4px 18px 16px}
.notice{margin-top:12px;padding:14px 18px;border-radius:var(--r-m);font-size:15px}
.notice.ok{background:rgba(52,199,89,.14);color:var(--label)}
.notice.crit{background:rgba(255,59,48,.12);color:var(--label)}
.demo-side p{color:var(--label-2);margin-top:10px}

/* zwevende actieknop onderaan (telefoon) */
/* ---------- de kat: vragen en demo ---------- */
.kat{position:fixed;right:max(8px,env(safe-area-inset-right));bottom:calc(6px + env(safe-area-inset-bottom));z-index:45;width:62px;height:103px;border:0;background:none;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:transform .55s var(--spring),opacity .3s var(--ease)}
.kat:active{transform:scale(.93);transition-duration:.12s}
.kat.weg,.kat.duik{transform:translateY(135%);opacity:0;pointer-events:none}
.kat .lijf{position:absolute;inset:0;animation:zweef 4.6s ease-in-out infinite}
.kat .kijk{position:absolute;inset:0;transform-origin:50% 92%;transform:rotate(var(--tilt,0deg)) translateX(var(--schuif,0px));transition:transform .6s var(--spring)}
.kat img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 12px 14px rgba(40,25,5,.28))}
.kat .knip{opacity:0}
.kat.knippert .knip{opacity:1}
.kat.knippert .open-ogen{opacity:0}
.kat .schaduw{position:absolute;left:16%;right:16%;bottom:-4px;height:12px;border-radius:50%;background:radial-gradient(closest-side,rgba(30,20,5,.30),transparent);animation:schaduw 4.6s ease-in-out infinite}
.kat.hop .lijf{animation:hop .7s var(--spring)}
@keyframes zweef{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes schaduw{0%,100%{transform:scale(1);opacity:.95}50%{transform:scale(.78);opacity:.5}}
@keyframes hop{0%{transform:translateY(0)}35%{transform:translateY(-22px) rotate(-3deg)}100%{transform:translateY(0)}}
.kat-tip{position:fixed;z-index:44;right:calc(max(8px,env(safe-area-inset-right)) + 40px);bottom:calc(106px + env(safe-area-inset-bottom));max-width:200px;padding:9px 13px;font-size:14px;border-radius:18px 18px 4px 18px;
  background:var(--card);color:var(--label);font-size:15px;font-weight:600;line-height:1.3;box-shadow:0 10px 30px rgba(40,25,5,.18),inset 0 0 0 .5px var(--sep);
  opacity:0;transform:translateY(8px) scale(.9);transform-origin:100% 100%;pointer-events:none;transition:opacity .35s var(--ease),transform .5s var(--spring)}
.kat-tip.show{opacity:1;transform:none}
@media (min-width:860px){ .kat{width:80px;height:133px;right:20px;bottom:12px} .kat-tip{right:74px;bottom:146px} }

/* het vel dat opent */
.vel-achter{position:fixed;inset:0;z-index:60;background:rgba(20,14,5,.30);opacity:0;pointer-events:none;transition:opacity .35s var(--ease)}
.vel-achter.open{opacity:1;pointer-events:auto}
.vel{position:fixed;z-index:61;left:8px;right:8px;bottom:calc(8px + env(safe-area-inset-bottom));max-height:min(80vh,660px);display:flex;flex-direction:column;overflow:hidden;
  background:var(--bg);border-radius:30px;box-shadow:0 24px 60px rgba(20,14,5,.35),inset 0 0 0 .5px var(--glass-line);
  transform:translateY(calc(100% + 40px));visibility:hidden;transition:transform .6s var(--spring),visibility 0s .6s}
.vel.open{transform:none;visibility:visible;transition:transform .6s var(--spring),visibility 0s}
@media (min-width:860px){ .vel{left:auto;right:24px;bottom:24px;width:392px;transform-origin:100% 100%;transform:translateY(24px) scale(.92);opacity:0;transition:transform .5s var(--spring),opacity .25s,visibility 0s .5s} .vel.open{transform:none;opacity:1;transition:transform .5s var(--spring),opacity .25s,visibility 0s} }
.vel-kop{display:flex;align-items:center;gap:12px;padding:16px 16px 12px;background:var(--glass);-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);border-bottom:.5px solid var(--sep);position:relative}
.vel-kop::before{content:"";position:absolute;top:6px;left:50%;width:36px;height:5px;margin-left:-18px;border-radius:3px;background:var(--fill-2)}
@media (min-width:860px){ .vel-kop::before{display:none} }
.avatar{flex:none;width:42px;height:42px;border-radius:50%;background:#EADFCB url(kat.webp) no-repeat 38% 3%/250%;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.08)}
.vel-kop b{display:block;font-size:17px;font-weight:600}
.vel-kop span{display:block;font-size:13px;color:var(--label-2)}
.sluit{margin-left:auto;flex:none;width:32px;height:32px;border-radius:50%;border:0;background:var(--fill);color:var(--label-2);display:grid;place-items:center;cursor:pointer;transition:transform .4s var(--spring)}
.sluit:active{transform:scale(.9)}
.sluit svg{width:14px;height:14px}
.gesprek{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:16px 14px 8px;display:flex;flex-direction:column;gap:8px}
.msg{max-width:84%;padding:10px 14px;border-radius:20px;font-size:16px;line-height:1.4;animation:msgIn .45s var(--spring)}
.msg.van-kat{align-self:flex-start;background:var(--card);color:var(--label);border-bottom-left-radius:6px;box-shadow:0 1px 1px rgba(0,0,0,.04)}
.msg.van-u{align-self:flex-end;background:var(--accent);color:var(--accent-ink);border-bottom-right-radius:6px}
.msg.typt{display:flex;gap:4px;padding:14px 16px}
.msg.typt i{width:7px;height:7px;border-radius:50%;background:var(--label-3);animation:stip 1s infinite}
.msg.typt i:nth-child(2){animation-delay:.15s}.msg.typt i:nth-child(3){animation-delay:.3s}
@keyframes stip{0%,60%,100%{opacity:.3;transform:none}30%{opacity:1;transform:translateY(-3px)}}
@keyframes msgIn{from{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:none}}
.chips{display:flex;flex-wrap:wrap;gap:8px;padding:6px 14px 12px}
.chip{border:0;cursor:pointer;font:500 15px/1.25 var(--sf);letter-spacing:-.01em;padding:9px 14px;border-radius:999px;background:var(--card);color:var(--accent);box-shadow:inset 0 0 0 1px rgba(19,48,87,.16);text-align:left;transition:transform .4s var(--spring),background-color .2s}
.chip:active{transform:scale(.95)}
@media (hover:hover){ .chip:hover{background:var(--accent-soft)} }
.vel-voet{padding:10px 14px 14px;border-top:.5px solid var(--sep);background:var(--glass);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}
.vel-voet small{display:block;text-align:center;color:var(--label-2);font-size:13px;margin-top:8px}
.vel-voet small a{color:var(--label-2)}
@media (prefers-reduced-motion: reduce){ .kat .lijf,.kat .schaduw{animation:none} }

/* voet */
footer{padding:96px 0 110px;color:var(--label-2);font-size:14px}
footer .wrap{display:flex;flex-direction:column;gap:18px;border-top:.5px solid var(--sep);padding-top:28px}
footer .mk{display:flex;align-items:center;gap:10px;color:var(--label);font-weight:700;font-size:17px}
footer .mk img{height:20px}
footer nav{display:flex;flex-wrap:wrap;gap:8px 20px}
footer a{color:var(--label-2);text-decoration:none}
footer a:hover{color:var(--label)}
footer .m-light{display:none}
@media (prefers-color-scheme: dark){ footer .m-light{display:block} footer .m-navy{display:none} }
@media (min-width:860px){ footer{padding-bottom:64px} footer .wrap{flex-direction:row;align-items:center;justify-content:space-between} }

/* verschijnen bij scrollen */
.js .rv{opacity:0;transform:translateY(22px) scale(.985);transition:opacity .8s var(--ease),transform .9s var(--ease)}
.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js .rv{opacity:1;transform:none}
}

/* ================= onderdelen: één set voor site en app ================= */

/* knoppen: varianten, maten en toestanden */
.btn-accent{background:var(--accent);color:var(--accent-ink);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 6px 16px rgba(19,48,87,.24)}
.btn-outline{background:transparent;color:var(--label);box-shadow:inset 0 0 0 1.5px var(--sep)}
.btn-plain{background:transparent;color:var(--accent);padding:0 14px}
@media (hover:hover){
  .btn-accent:hover{filter:brightness(1.08);transform:translateY(-1px)}
  .btn-outline:hover,.btn-plain:hover{background:var(--fill)}
}
.btn-lg{--h:56px;padding:0 30px;font-size:18px}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.42;cursor:not-allowed;transform:none!important;box-shadow:none;filter:none}
.btn .pijl{width:18px;height:18px;transition:transform .45s var(--spring)}
@media (hover:hover){ .btn:hover .pijl{transform:translateX(4px)} }
.btn .spin{display:none;position:absolute;inset:0;margin:auto;width:20px;height:20px;border-radius:50%;border:2.5px solid var(--tint-ink);border-right-color:transparent;animation:draai .8s linear infinite}
.btn.laden{color:transparent!important;pointer-events:none}
.btn.laden .spin{display:block}
@keyframes draai{to{transform:rotate(360deg)}}
.btn-icon{--h:44px;width:44px;padding:0;border-radius:50%;flex:none}
.btn-icon svg{width:20px;height:20px}
.btn-icon.vul{background:var(--fill);color:var(--label)}
.btn-icon.glas{background:var(--glass);color:var(--label);-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);box-shadow:inset 0 0 0 .5px var(--glass-line),0 4px 14px rgba(40,25,5,.10)}
.btn-icon.goud{background:linear-gradient(180deg,#D6B062,#C39440);color:#1B1302;box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 6px 14px rgba(150,105,25,.28)}
@media (hover:hover){ .btn-icon.vul:hover{background:var(--fill-2)} }

/* zoekbalk */
.zoek{display:flex;align-items:center;gap:0}
.zoek-veld{flex:1;position:relative;display:flex;align-items:center;height:44px;border-radius:13px;background:var(--fill);transition:background-color .25s,box-shadow .25s;cursor:text}
.zoek-veld:focus-within{background:var(--card);box-shadow:0 0 0 4px var(--accent-soft),inset 0 0 0 1px var(--accent)}
.zoek-veld .loep{position:absolute;left:12px;width:18px;height:18px;color:var(--label-3);pointer-events:none}
.zoek-veld input{width:100%;height:100%;border:0;background:transparent;padding:0 40px 0 38px;font:400 17px var(--sf);letter-spacing:-.02em;color:var(--label);outline:none;border-radius:13px}
.zoek-veld input::placeholder{color:var(--label-3);opacity:1}
.zoek-veld input::-webkit-search-cancel-button,.zoek-veld input::-webkit-search-decoration{-webkit-appearance:none;display:none}
.wis{position:absolute;right:11px;width:20px;height:20px;border-radius:50%;border:0;background:var(--label-3);color:var(--bg);display:none;place-items:center;cursor:pointer;padding:0}
.wis svg{width:9px;height:9px}
.zoek-veld.gevuld .wis{display:grid}
.annuleer{border:0;background:none;color:var(--accent);font:500 17px var(--sf);letter-spacing:-.02em;cursor:pointer;white-space:nowrap;max-width:0;padding:0;opacity:0;overflow:hidden;transition:max-width .45s var(--spring),padding .45s var(--spring),opacity .25s}
.zoek.actief .annuleer{max-width:120px;padding:0 4px 0 12px;opacity:1}
.leeg{padding:22px 18px;text-align:center;color:var(--label-2)}
.leeg .btn{margin-top:12px}

/* menuknop in de navigatie */
.menu-knop{position:relative;margin-left:8px;color:#fff;background:rgba(255,255,255,.18);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:inset 0 0 0 .5px rgba(255,255,255,.4)}
.nav.solid .menu-knop{color:var(--label);background:var(--fill);box-shadow:none}
.menu-knop .streep{position:absolute;left:14px;right:14px;height:2px;border-radius:2px;background:currentColor;transition:transform .45s var(--spring),top .3s var(--ease)}
.menu-knop .streep:nth-child(1){top:17px}
.menu-knop .streep:nth-child(2){top:25px}
.menu-knop[aria-expanded="true"] .streep:nth-child(1){top:21px;transform:rotate(45deg)}
.menu-knop[aria-expanded="true"] .streep:nth-child(2){top:21px;transform:rotate(-45deg)}
@media (min-width:860px){ .menu-knop{display:none} }

/* uitklapmenu */
.menu{position:fixed;z-index:49;top:74px;left:calc(var(--g) - 4px);right:calc(var(--g) - 4px);padding:8px;border-radius:26px;background:var(--glass);-webkit-backdrop-filter:blur(28px) saturate(180%);backdrop-filter:blur(28px) saturate(180%);
  box-shadow:inset 0 0 0 .5px var(--glass-line),0 24px 60px rgba(40,25,5,.20);transform-origin:90% 0;transform:translateY(-10px) scale(.94);opacity:0;visibility:hidden;
  transition:transform .5s var(--spring),opacity .25s var(--ease),visibility 0s .5s}
.menu.open{transform:none;opacity:1;visibility:visible;transition:transform .5s var(--spring),opacity .25s var(--ease),visibility 0s}
.menu .item{display:flex;align-items:center;gap:12px;padding:14px 14px;border-radius:16px;color:var(--label);text-decoration:none;font-size:19px;font-weight:600;letter-spacing:-.025em;transition:background-color .2s}
.menu .item svg.chev{margin-left:auto;width:16px;height:16px;color:var(--label-3)}
.menu .item:active{background:var(--fill)}
@media (hover:hover){ .menu .item:hover{background:var(--fill)} }
.menu .item .ic{width:30px;height:30px;border-radius:8px}
.menu .item .ic svg{width:17px;height:17px}
.menu .scheid{height:.5px;background:var(--sep);margin:6px 14px}
.menu .btn{margin:8px 6px 6px;width:calc(100% - 12px)}
@media (min-width:860px){ .menu{display:none} }

/* tabbalk zoals in de app */
.tabbalk{display:flex;gap:4px;padding:6px;border-radius:999px;background:var(--glass);-webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);box-shadow:inset 0 0 0 .5px var(--glass-line),0 10px 30px rgba(40,25,5,.14)}
.tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:7px 4px 6px;border-radius:999px;border:0;background:none;color:var(--label-2);font:600 11px var(--sf);letter-spacing:0;cursor:pointer;transition:background-color .25s,color .25s,transform .4s var(--spring)}
.tab svg{width:23px;height:23px}
.tab:active{transform:scale(.94)}
.tab[aria-selected="true"]{color:var(--accent);background:var(--accent-soft)}

/* schakelaar */
.schakel{appearance:none;-webkit-appearance:none;position:relative;flex:none;width:51px;height:31px;border-radius:999px;background:var(--fill-2);cursor:pointer;margin:0;transition:background-color .25s}
.schakel::after{content:"";position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:50%;background:#fff;box-shadow:0 3px 8px rgba(0,0,0,.15),0 1px 1px rgba(0,0,0,.16);transition:transform .45s var(--spring)}
.schakel:checked{background:linear-gradient(180deg,#D6B062,#C39440)}
.schakel:checked::after{transform:translateX(20px)}
.schakel:active::after{width:31px}
.schakel:checked:active::after{transform:translateX(16px)}

/* lijstregel met pijltje */
a.row{color:inherit;text-decoration:none}
.row .chev{margin-left:auto;flex:none;width:14px;height:14px;color:var(--label-3)}
@media (hover:hover){ a.row:hover{background:var(--fill)} }
.nav .menu-knop{margin-left:8px}
.btn{white-space:nowrap}
@media (max-width:420px){ .nav .kort-weg{display:none} }
.btn .kort-weg{margin-left:-3px}
footer .mk img{height:20px;width:auto;flex:none}
@media (min-width:860px){ footer .mk span{white-space:nowrap} }
@media (min-width:860px){ footer .wrap{gap:40px} footer nav{justify-content:flex-end;max-width:600px} }

/* ================= verhaal: boekachtergrond en zandkleurige nis ================= */
#zo-werkt{position:relative;isolation:isolate}
#zo-werkt>.wrap{position:relative;z-index:1}
.scene-bg{display:none}

/* de nis: decoratie achter de telefoon */
.nis-wrap{position:relative;isolation:isolate;aspect-ratio:560/740}
.nis-wrap::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:url(nis.svg) center/contain no-repeat;filter:drop-shadow(0 18px 30px rgba(90,65,25,.10))}
.nis-wrap .toestel{position:absolute;left:50%;bottom:5%;width:45%;transform:translateX(-50%)}

/* telefoon: nis op een uitsnede van de boekachtergrond, alles volledig zichtbaar */
.mini{height:auto;overflow:visible;background:none;padding:20px 0 16px;isolation:isolate}
.mini::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:24px;background:#FBF7EA url(achtergrond-900.webp) 88% 100%/cover no-repeat;box-shadow:inset 0 0 0 .5px rgba(90,65,25,.10)}
.mini .nis-wrap{width:82%;max-width:320px;margin-left:3%}
.mini .toestel{top:auto;left:50%;width:46%}
.mini .zoom{position:absolute;left:auto;right:-20%;bottom:9%;width:78%}
@media (prefers-color-scheme: dark){
  .mini::before{background-color:#17130E;filter:invert(1) hue-rotate(180deg) brightness(.85) saturate(.9);box-shadow:none}
  .nis-wrap::before{filter:invert(1) hue-rotate(180deg) brightness(.8) saturate(.8)}
}

@media (min-width:980px){
  .scene-bg{display:block;position:absolute;inset:0;z-index:0;pointer-events:none}
  .scene-bg-in{position:sticky;top:0;height:100vh;background:url(achtergrond.webp) center bottom/cover no-repeat;
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 16%,#000 84%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 16%,#000 84%,transparent 100%)}
  .gloed{display:none}
  .podium .nis-wrap{position:absolute;left:2%;top:50%;transform:translateY(-50%);width:min(460px,84%,calc((100vh - 190px) * .757))}
  .podium .toestel{position:absolute;left:50%;top:auto;bottom:5%;width:45%;transform:translateX(-50%)}
  .podium .zoom{position:absolute;right:-18%;top:64%;width:70%;height:0}
  .stap-tx{isolation:isolate}
  .stap-tx::before{content:"";position:absolute;z-index:-1;top:-22px;bottom:-24px;left:40px;right:-18px;border-radius:24px;background:rgba(250,245,235,.82);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);box-shadow:inset 0 0 0 .5px rgba(90,65,25,.08)}
}
@media (min-width:980px) and (prefers-color-scheme: dark){
  .scene-bg-in{filter:invert(1) hue-rotate(180deg) brightness(.9) saturate(.85);opacity:.9}
  .stap-tx::before{background:rgba(14,12,9,.78);box-shadow:inset 0 0 0 .5px rgba(216,178,94,.14)}
}
footer .mk{flex-wrap:wrap;row-gap:4px}