/* mynewbehavior.com v4.7 | 25 september 2026 (v4- t/m v4.5-blokken onderaan overschrijven oudere regels) */
:root{
  --navy:#0E2340;
  --navy2:#12345B;
  --blue:#2C7BB6;
  --blue2:#4FA3DC;
  --light:#FBFCFE;
  --light2:#EAF0F6;
  --ink:#12345B;
  --dim:rgba(18,52,91,.74);
  --line:rgba(18,52,91,.16);
  --serif:'Big Shoulders Display','Big Shoulders Text',Impact,'Arial Narrow',sans-serif;
  --sans:'Instrument Sans',-apple-system,BlinkMacSystemFont,sans-serif;
  --wrap:1180px;
  --orange:#F28C28;
  --orange2:#FFB169;
  --mint:#2EC4B6;
  --sun:#FFD166;
  --peach:#FFF1E3;
  --mintl:#E6F8F5;
  --sunl:#FFF7DC;
  --r:20px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
body{background:var(--light);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:hidden}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}
section{padding:96px 0;border-top:1px solid var(--line)}
h1,h2{font-family:var(--serif);font-weight:700;line-height:1.0;letter-spacing:.005em;text-transform:none}
h3{font-family:var(--sans);font-weight:600;line-height:1.25}
h1{font-size:clamp(44px,6.4vw,76px)}
h2{font-size:clamp(34px,4.8vw,58px)}
h3{font-size:20px}
a{color:inherit}
p+p{margin-top:14px}
.eyebrow{font-size:13px;font-weight:500;letter-spacing:.02em;color:var(--blue)}
.eyebrow:before{content:"\00B7\00A0"}
.lead{font-size:19px;line-height:1.68;color:var(--dim);max-width:60ch}
.small{font-size:14px;color:var(--dim)}
.narrow{max-width:72ch}
:focus-visible{outline:2px solid var(--blue2);outline-offset:3px}
.dark{background:var(--navy);color:var(--light);--ink:#F4F7FB;--dim:rgba(244,247,251,.76);--line:rgba(244,247,251,.16)}
.band{background:var(--light2)}
.dark .eyebrow{color:var(--blue2)}
.btn:after{content:"\2192";font-weight:400}
.btn.ghost:after{content:""}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-size:15px;font-weight:600;padding:15px 28px;border-radius:999px;border:1px solid var(--orange);background:var(--orange);color:#12345B;text-decoration:none;cursor:pointer;transition:.18s;font-family:var(--sans)}
.btn:hover{background:#FF9A3D;border-color:#FF9A3D;transform:translateY(-1px)}
.btn.ghost{background:transparent;color:inherit;border-color:var(--line)}
.btn.ghost:hover{border-color:var(--blue);color:var(--blue);background:transparent}
.dark .btn.ghost:hover{color:var(--blue2);border-color:var(--blue2)}
nav{position:sticky;top:0;z-index:60;background:rgba(14,35,64,.94);backdrop-filter:blur(14px);color:#F4F7FB;border-bottom:1px solid rgba(244,247,251,.14)}
nav .wrap{display:flex;align-items:center;justify-content:space-between;height:72px;gap:24px}
.brand img{height:34px;width:auto;display:block}
.navlinks{display:flex;gap:22px;font-size:14px;align-items:center}
.navlinks a{text-decoration:none;color:rgba(244,247,251,.78);transition:.15s;white-space:nowrap}
.navlinks a:hover,.navlinks a.on{color:#fff}
.navtop{display:flex;gap:16px;font-size:14px;align-items:center}
.navtop a{text-decoration:none;color:rgba(244,247,251,.7);white-space:nowrap}
.navtop a:hover{color:#fff}
nav .btn{padding:10px 20px;font-size:14px;white-space:nowrap}
.navtoggle{display:none;background:none;border:1px solid rgba(244,247,251,.3);border-radius:2px;width:42px;height:38px;position:relative;cursor:pointer}
.navtoggle span,.navtoggle span:before,.navtoggle span:after{content:"";position:absolute;left:10px;width:20px;height:2px;background:#F4F7FB}
.navtoggle span{top:18px}.navtoggle span:before{top:-6px}.navtoggle span:after{top:6px}
@media(max-width:1340px){.navtop{display:none}}
@media(max-width:980px){
  .navlinks{display:none}
  .navtoggle{display:block}
  nav.open .navlinks{display:flex;position:absolute;left:0;right:0;top:72px;flex-direction:column;background:var(--navy);padding:22px 28px 26px;gap:16px;align-items:flex-start;border-bottom:1px solid rgba(244,247,251,.14)}
}
@media(max-width:520px){nav .btn{display:none}}
.hero{border-top:0;padding:80px 0 96px}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center}
.hero h1{margin:18px 0 8px}
.pagehero h1{margin-bottom:8px}
.sub{font-family:var(--sans);font-weight:500;font-size:clamp(20px,2.2vw,26px);line-height:1.3;color:var(--blue2);margin:14px 0 22px}
.herocta{display:flex;flex-wrap:wrap;gap:12px;margin:30px 0 14px}
@media(max-width:900px){.hero .wrap{grid-template-columns:1fr;gap:48px}}
.diamond{border:1px solid var(--line);border-radius:var(--r);padding:26px 26px 22px;background:rgba(244,247,251,.04)}
.diamond .top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:10px;flex-wrap:wrap}
.diamond .top b{font-family:var(--sans);font-weight:600;font-size:13px;letter-spacing:.12em;text-transform:uppercase}
.toggle{display:flex;border:1px solid var(--line);border-radius:2px;overflow:hidden;font-size:12px}
.toggle button{background:transparent;border:0;color:inherit;padding:7px 12px;cursor:pointer;font-family:var(--sans);opacity:.7}
.toggle button.on{background:var(--blue);color:#fff;opacity:1}
.diamond svg{width:100%;max-width:440px;height:auto;display:block;margin:0 auto}
.diamond .cap{font-size:13px;color:var(--dim);margin-top:10px}
.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:38px}
.cards2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:38px}
.card{border:1px solid var(--line);padding:30px 26px 28px;border-radius:var(--r);display:flex;flex-direction:column;gap:12px;text-decoration:none;background:rgba(255,255,255,.55)}
.dark .card{background:rgba(244,247,251,.03)}
a.card:hover{border-color:var(--blue)}
.card .num{font-size:13px;color:var(--blue);font-weight:500}
.card p{font-size:15px;color:var(--dim);flex:1}
.card .go{font-size:13px;color:var(--blue);font-weight:500}
@media(max-width:820px){.cards3,.cards2{grid-template-columns:1fr}}
.parts{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;background:var(--line);margin-top:40px}
.parts > div{background:var(--light);padding:32px 30px;border-radius:16px}
.parts{gap:14px;background:transparent}
.parts > div{border:1px solid var(--line)}
.band .parts > div{background:var(--light2)}
.dark .parts > div{background:var(--navy)}
.parts b{display:block;font-family:var(--serif);font-size:34px;color:var(--blue);font-weight:700;line-height:1;margin-bottom:12px}
.parts h3{font-size:19px;margin-bottom:8px}
.parts p{font-size:14.5px;color:var(--dim)}
.parts.four{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.parts.four{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.parts,.parts.four{grid-template-columns:1fr}}
.timeline{margin-top:40px;border-left:2px solid var(--blue);padding-left:28px}
.timeline > div{position:relative;padding-bottom:26px}
.timeline > div:before{content:"";position:absolute;left:-35px;top:8px;width:12px;height:12px;border-radius:50%;background:var(--blue)}
.timeline b{display:block;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--blue);margin-bottom:4px}
.timeline h3{margin-bottom:6px}
.timeline p{font-size:15px;color:var(--dim);max-width:64ch}
.plan{border:1px solid var(--line);padding:38px 34px;border-radius:var(--r);background:rgba(255,255,255,.6)}
.dark .plan{background:rgba(244,247,251,.03)}
.plan.hl{border-color:var(--blue)}
.plan .price{font-family:var(--serif);font-weight:700;font-size:54px;line-height:1;margin:14px 0 4px}
.plan .per{font-size:14px;color:var(--dim)}
.plan ul{list-style:none;margin-top:24px;border-top:1px solid var(--line);padding-top:20px}
.plan li{font-size:15px;padding:8px 0 8px 24px;position:relative;color:var(--dim)}
.plan li:before{content:"";position:absolute;left:0;top:15px;width:9px;height:1px;background:var(--blue)}
.prices2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:40px}
@media(max-width:900px){.prices2{grid-template-columns:1fr}}
.quote{border-left:3px solid var(--blue);padding:6px 0 6px 26px;margin-top:34px;max-width:60ch}
.quote p{font-family:var(--sans);font-weight:500;font-size:24px;line-height:1.3}
.quote cite{display:block;font-style:normal;font-size:14px;color:var(--dim);margin-top:12px}
.trust{margin-top:40px;padding:22px 26px;border-radius:16px;background:var(--sunl);border:1px solid rgba(255,209,102,.6);font-weight:500;font-size:18px;line-height:1.4;max-width:70ch}
.faq{margin-top:38px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:20px 40px 20px 0;font-weight:500;font-size:18px;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";position:absolute;right:6px;top:19px;color:var(--blue);font-size:22px;font-weight:300}
.faq details[open] summary:after{content:"\2013"}
.faq p{padding:0 0 22px;color:var(--dim);font-size:15.5px;max-width:70ch}
.tabs{display:flex;gap:4px;flex-wrap:wrap;margin-top:0;border-bottom:1px solid var(--line)}
.tabs button{background:transparent;border:0;border-bottom:3px solid transparent;padding:14px 18px;font-family:var(--sans);font-size:15px;color:var(--dim);cursor:pointer;margin-bottom:-1px}
.tabs button.on{color:var(--ink);border-bottom-color:var(--blue)}
.tabpanel{display:none;padding-top:40px}
.tabpanel.on{display:block}
.incl{list-style:none;margin-top:18px}
.incl li{padding:9px 0 9px 26px;position:relative;border-bottom:1px solid var(--line);font-size:15.5px}
.incl li:before{content:"";position:absolute;left:0;top:18px;width:11px;height:1px;background:var(--blue)}
.dates{margin-top:24px;border-top:1px solid var(--line)}
.dates > div{display:grid;grid-template-columns:1.2fr 1.2fr .8fr .8fr auto;gap:18px;align-items:center;padding:20px 0;border-bottom:1px solid var(--line);font-size:15.5px}
.dates b{font-weight:600;font-size:17px}
@media(max-width:760px){.dates > div{grid-template-columns:1fr 1fr}}
.person{display:grid;border-radius:var(--r);grid-template-columns:120px 1fr;gap:22px;align-items:center;border:1px solid var(--line);padding:22px;margin-top:34px;max-width:620px;background:rgba(255,255,255,.55)}
.dark .person{background:rgba(244,247,251,.03)}
.person img{width:120px;height:120px;object-fit:cover;border-radius:2px}
.person p{font-weight:500;font-size:18px;line-height:1.35}
.person .who{font-size:13px;color:var(--dim);margin-top:6px;font-family:var(--sans)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start;margin-top:40px}
@media(max-width:900px){.two{grid-template-columns:1fr}}
.two h3{margin-bottom:10px}
table.t{width:100%;border-collapse:collapse;margin-top:30px;font-size:15px}
table.t th{text-align:left;font-weight:600;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--blue);padding:10px 12px;border-bottom:1px solid var(--line)}
table.t td{padding:12px;border-bottom:1px solid var(--line);vertical-align:top}
table.t td:first-child{font-weight:500}
form.f{margin-top:36px;max-width:640px;display:grid;gap:16px}
form.f > label{display:grid;gap:6px;font-size:14px;color:var(--dim)}
form.f input,form.f select,form.f textarea{font-family:var(--sans);font-size:15px;padding:13px 16px;border:1px solid var(--line);background:#fff;color:#12345B;border-radius:12px;width:100%}
.dark form.f input,.dark form.f select,.dark form.f textarea{background:rgba(244,247,251,.06);color:#F4F7FB}
form.f textarea{min-height:120px}
.choices{display:flex;gap:10px;flex-wrap:wrap}
.choices label{display:flex;flex-direction:row;align-items:center;gap:8px;border:1px solid var(--line);padding:10px 16px;cursor:pointer;font-size:14px;border-radius:999px}
.choices input{width:auto}
.pagehero{border-top:0;padding:64px 0 76px}
.crumb{font-size:13px;color:var(--dim);margin-bottom:26px}
.crumb a{text-decoration:none}
.crumb a:hover{color:var(--blue)}
.prose{max-width:74ch}
.prose h2{font-size:30px;margin:44px 0 12px}
.prose h3{margin:26px 0 8px}
.prose ul{margin:10px 0 10px 22px}
.prose li{margin-bottom:6px}
footer{background:var(--navy);color:rgba(244,247,251,.76);padding:64px 0 60px;font-size:14px}
footer .fg{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:34px}
footer h4{font-family:var(--sans);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#F4F7FB;margin-bottom:12px}
footer a{color:rgba(244,247,251,.76);text-decoration:none;display:block;margin-bottom:8px}
footer a:hover{color:#fff}
footer img{height:30px;margin-bottom:16px}
footer .legal{margin-top:40px;padding-top:22px;border-top:1px solid rgba(244,247,251,.14);display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between;font-size:13px}
footer .legal a{display:inline;margin:0 14px 0 0}
@media(max-width:900px){footer .fg{grid-template-columns:1fr 1fr}}
@media(max-width:560px){footer .fg{grid-template-columns:1fr}}

/* stat strip and hero photo, zoals mynewbehavior.com */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--line);margin-top:44px}
.stats > div{background:var(--navy);padding:22px 20px}
.stats b{display:block;font-family:var(--serif);font-weight:700;font-size:44px;line-height:1;color:#fff}
.stats b:after{content:"."; color:var(--blue2)}
.stats span{font-size:13px;color:var(--dim)}
@media(max-width:600px){.stats{grid-template-columns:1fr 1fr}}
.heroimg{position:relative}
.heroimg img{width:100%;border-radius:2px;display:block}
.heroimg .cap{position:absolute;left:18px;right:18px;bottom:18px;background:rgba(14,35,64,.86);padding:12px 14px;font-size:13px;line-height:1.4}

/* v2: telefoons (overgenomen van overwinquitter.nl, in MNB-kleuren) */
.phones{position:relative;height:560px}
.phone{position:absolute;width:236px;background:#0E2340;border:1px solid rgba(244,247,251,.2);border-radius:38px;padding:11px 9px;box-shadow:0 30px 70px rgba(0,0,0,.5)}
.phone .screen{background:#F4F8FC;border-radius:30px;padding:16px 13px 13px;height:452px;overflow:hidden;position:relative;color:#12345B}
.notch{width:64px;height:4px;border-radius:4px;background:rgba(18,52,91,.18);margin:0 auto 14px}
.p1{left:0;top:44px;transform:rotate(-4deg);z-index:2}
.p2{left:168px;top:0;z-index:3}
.p3{left:330px;top:64px;transform:rotate(4deg);z-index:1}
@media(max-width:1120px){.p3{display:none}.p2{left:150px}}
@media(max-width:900px){.phones{height:520px;transform:scale(.92);transform-origin:top left}}
@media(max-width:560px){.phones{height:470px;transform:scale(.72)}.p3{display:block}}
.scr-h{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#2C7BB6;font-weight:600;margin-bottom:12px}
.bubble{font-size:11.5px;line-height:1.5;padding:10px 12px;border-radius:12px;margin-bottom:9px}
.bubble.coach{background:#fff;border:1px solid rgba(44,123,182,.25);border-bottom-left-radius:3px;box-shadow:0 2px 6px rgba(18,52,91,.06)}
.bubble.me{background:var(--orange);color:#12345B;border-bottom-right-radius:3px;margin-left:34px}
.week{display:flex;justify-content:space-between;margin:24px 4px 0}
.dot{width:23px;height:23px;border-radius:50%;border:1px solid rgba(18,52,91,.18);display:flex;align-items:center;justify-content:center;font-size:9px;color:rgba(18,52,91,.6)}
.dot.on{background:var(--mint);border-color:var(--mint);color:#0E2340}
.webwrap{padding:2px 2px 0}
.webnote{font-size:9.5px;color:rgba(18,52,91,.65);text-align:center;margin-top:8px;line-height:1.4}
.streakbar{display:flex;gap:12px;align-items:center;margin-top:16px;padding-top:14px;border-top:1px solid rgba(18,52,91,.1)}
.flamesm{font-family:var(--serif);font-weight:700;font-size:32px;color:var(--orange);line-height:1}
.streaklbl{font-size:9.5px;color:rgba(18,52,91,.65);letter-spacing:.1em;text-transform:uppercase}
.streakbar .week{margin-top:6px;gap:4px}
.streakbar .dot{width:18px;height:18px;font-size:8px}
.qname{font-family:var(--serif);font-weight:700;font-size:23px;color:#2C7BB6;line-height:1.1;margin-top:2px}
.qsub{font-size:9.5px;color:rgba(18,52,91,.65);margin-bottom:14px}
.qbars{margin-bottom:14px}
.qbar{margin-bottom:7px}
.qbar span{font-size:9.5px;color:rgba(18,52,91,.65);display:block;margin-bottom:3px}
.qbar i{display:block;height:4px;background:#2C7BB6}
.qfact{font-size:9.5px;color:rgba(18,52,91,.65);line-height:1.45;padding:8px 0;border-top:1px solid rgba(18,52,91,.08)}
.qfact b{display:block;font-weight:500;color:#12345B;font-size:9px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:3px}
/* logos */
.logos{display:flex;gap:40px;align-items:center;flex-wrap:wrap;margin-top:34px;opacity:.75}
.logos span{font-family:var(--serif);font-weight:700;font-size:22px;letter-spacing:.02em}
.logos .lbl{font-family:var(--sans);font-weight:400;font-size:13px;color:var(--dim);letter-spacing:0}
/* solutions list */
.sol{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:38px}
.sol a{border:1px solid var(--line);padding:28px 26px;border-radius:var(--r);text-decoration:none;background:rgba(255,255,255,.55);display:block}
.sol a:hover{border-color:var(--blue)}
.sol h3{margin-bottom:8px}
.sol p{font-size:15px;color:var(--dim)}
@media(max-width:900px){.sol{grid-template-columns:1fr}}
/* subnav */
.subnav{display:flex;gap:26px;flex-wrap:wrap;font-size:14px;border-bottom:1px solid var(--line);padding:16px 0;position:sticky;top:72px;background:var(--light);z-index:5}
.subnav a{text-decoration:none;color:var(--dim)}
.subnav a:hover{color:var(--blue)}
/* dates open */
.lichtingen{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:34px}
.lichting{border:1px solid var(--line);padding:26px 24px;border-radius:var(--r);background:rgba(255,255,255,.6)}
.lichting b{display:block;font-family:var(--serif);font-weight:700;font-size:30px;line-height:1.05}
.lichting .d2{font-size:15px;margin-top:6px}
.lichting .meta{font-size:14px;color:var(--dim);margin:12px 0 18px}
@media(max-width:900px){.lichtingen{grid-template-columns:1fr}}
.dark .lichting{background:rgba(244,247,251,.04)}
/* app screens row */
.approw{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;margin-top:40px}
@media(max-width:900px){.approw{grid-template-columns:1fr}}

/* v2.2 speelse laag */
.mark{position:relative;display:inline-block;z-index:0}
.mark:after{content:"";position:absolute;left:-2%;right:-2%;bottom:.06em;height:.28em;background:var(--orange);opacity:.75;border-radius:2px;transform:rotate(-1.2deg);z-index:-1}
.dark .mark:after{background:var(--orange);opacity:.8}
.bubbleq{position:absolute;left:-10px;bottom:-26px;z-index:5;background:#fff;color:#12345B;font-family:var(--sans);font-size:14px;padding:10px 14px;border-radius:14px;border-bottom-left-radius:3px;box-shadow:0 12px 30px rgba(0,0,0,.25);animation:pop .6s .4s both}
.bubbleq s{color:rgba(18,52,91,.5)}
.bubbleq:before{content:"Quitter zegt";position:absolute;left:12px;top:-18px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#4FA3DC;font-weight:600}
@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.94)}to{opacity:1;transform:none}}
.tick{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:16px 0;white-space:nowrap}
.tick div{display:inline-block;animation:tick 32s linear infinite;font-family:var(--serif);font-weight:700;font-size:26px;letter-spacing:.02em}
.tick span{margin-right:60px}
.tick span:before{content:"\25C6";font-size:12px;color:var(--orange);margin-right:22px;vertical-align:middle}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-25%)}}
@media(prefers-reduced-motion:reduce){.tick div{animation:none}}
.card,.sol a,.lichting,.plan{transition:transform .2s,border-color .2s,box-shadow .2s}
.card:hover,.sol a:hover,.lichting:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(18,52,91,.10)}

.bignum{font-family:var(--serif);font-weight:800;font-size:clamp(90px,14vw,170px);line-height:.85;color:var(--blue);opacity:.16;position:absolute;right:20px;top:10px;pointer-events:none}
.rel{position:relative}
.collage{display:grid;grid-template-columns:1.2fr .9fr 1fr;gap:16px;margin-top:40px;align-items:start}
.ph{background:linear-gradient(135deg,#1B3F6B,#0E2340);border:1px solid var(--line);aspect-ratio:4/3;display:flex;align-items:flex-end;padding:16px;color:rgba(244,247,251,.75);font-size:13px;position:relative;overflow:hidden;box-shadow:0 18px 40px rgba(18,52,91,.16)}
.ph:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 30%,rgba(79,163,220,.35),transparent 60%)}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ph.tall{aspect-ratio:3/4}

.ph span{position:relative;z-index:1;background:rgba(14,35,64,.7);padding:6px 10px;border-radius:2px}
@media(max-width:820px){.collage{grid-template-columns:1fr 1fr}}
.sticker{display:inline-block;background:var(--blue2);color:#0E2340;font-weight:600;font-size:13px;padding:8px 14px;border-radius:999px;margin-right:10px;margin-bottom:8px}
.sticker.alt{background:#fff}
.dark .sticker.alt{color:#12345B}
/*sq*/.squig{display:block;width:90px;height:14px;margin:18px 0 0}
.zig .parts{background:transparent;gap:16px}
.zig .parts > div{border:1px solid var(--line)}
.flameq{font-family:var(--serif);font-weight:800;font-size:64px;color:var(--blue2);line-height:1}
.chatline{display:flex;gap:12px;align-items:flex-end;margin-top:22px}
.chatline .bubble{max-width:360px;font-size:14px}
.chatline .bubble.coach{animation:pop .5s .2s both}
.chatline .bubble.me{animation:pop .5s .9s both}

/* v2.3: mascottes, quiz, flip, ring */
.mascots{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:38px}
.masc{border:1px solid var(--line);border-radius:var(--r);padding:26px 22px;background:rgba(255,255,255,.6);text-align:center;transition:transform .2s}
.masc:hover{transform:translateY(-4px)}
.masc svg{width:120px;height:120px;display:block;margin:0 auto 14px}
.masc h3{margin-bottom:6px}
.masc p{font-size:14.5px;color:var(--dim)}
.masc q{display:block;font-style:italic;color:var(--blue);margin-top:10px;font-size:15px}
@media(max-width:820px){.mascots{grid-template-columns:1fr}}
.quiz{border:1px solid var(--line);border-radius:var(--r);background:#fff;padding:30px 28px;margin-top:38px;max-width:720px}
.dark .quiz{background:rgba(244,247,251,.04)}
.quiz .q{font-weight:600;font-size:18px;margin-bottom:14px}
.quiz .opts{display:grid;gap:10px}
.quiz .opts button{text-align:left;font-family:var(--sans);font-size:15px;padding:12px 16px;border:1px solid var(--line);background:transparent;color:inherit;cursor:pointer;border-radius:2px;transition:.15s}
.quiz .opts button:hover{border-color:var(--blue);background:rgba(44,123,182,.06)}
.quiz .prog{display:flex;gap:6px;margin-bottom:18px}
.quiz .prog i{flex:1;height:4px;background:var(--line)}
.quiz .prog i.on{background:var(--blue)}
.quiz .res{display:none}
.quiz .res h3{font-family:var(--serif);font-size:30px;font-weight:700;color:var(--blue)}
.flip{perspective:900px}
.flip .in{position:relative;transition:transform .5s;transform-style:preserve-3d;min-height:150px}
.flip:hover .in,.flip:focus-within .in{transform:rotateY(180deg)}
.flip .f,.flip .b{position:absolute;inset:0;backface-visibility:hidden;padding:28px 26px}
.flip .b{transform:rotateY(180deg);background:var(--mint);color:#0E2340;border-radius:16px;font-size:14.5px;line-height:1.5}
.flip .b .dim{color:rgba(14,35,64,.7)}
.parts.flipgrid > div{padding:0}
.ring{display:inline-grid;place-items:center;width:150px;height:150px;position:relative}
.ring svg{position:absolute;inset:0;transform:rotate(-90deg)}
.ring b{font-family:var(--serif);font-weight:800;font-size:34px;line-height:1}
.ring span{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.ring circle{fill:none;stroke-width:8}
.ring .bg{stroke:var(--line)}
.ring .fg{stroke:var(--orange);stroke-linecap:round;stroke-dasharray:440;stroke-dashoffset:440;animation:ring 1.6s .3s ease-out forwards}
@keyframes ring{to{stroke-dashoffset:calc(440 - 440 * var(--p))}}
.dayrow{display:flex;gap:26px;align-items:center;margin-top:30px;flex-wrap:wrap}

/* v2.4: beeldmerkfiguren */
.qfig{position:absolute;left:-14px;bottom:-30px;z-index:5;display:flex;align-items:flex-end;gap:6px}
.qfig svg{width:56px;height:56px}
.qfig .bubbleq{position:static;animation:pop .6s .4s both}
.figfill{display:inline-grid;grid-template-columns:150px auto;align-items:center;gap:14px}
.figfill svg{width:150px;height:140px}
.figfill .fill{transform:translateY(150px);animation:figfill 1.6s .3s ease-out forwards}
@keyframes figfill{to{transform:translateY(calc(150px * (1 - .21)))}}
.figfill b{font-family:var(--serif);font-weight:800;font-size:40px;line-height:1;display:block}
.figfill span{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.masc svg{width:120px;height:120px;display:block;margin:0 auto 10px}

/* v2.5: fris */
.hero{position:relative;overflow:hidden}
.hero:before{content:"";position:absolute;width:560px;height:560px;border-radius:50%;background:radial-gradient(circle,rgba(242,140,40,.30),transparent 62%);left:-160px;top:-120px;pointer-events:none}
.hero:after{content:"";position:absolute;width:640px;height:640px;border-radius:50%;background:radial-gradient(circle,rgba(46,196,182,.30),transparent 62%);right:-200px;bottom:-260px;pointer-events:none}
.hero .wrap{position:relative;z-index:1}
.band{background:linear-gradient(180deg,#EEF3F9,#F7FAFD)}
.peach{background:var(--peach)}
.mintb{background:var(--mintl)}
.sunb{background:var(--sunl)}
section.dark{background:linear-gradient(160deg,#12345B,#0E2340)}
nav{background:rgba(14,35,64,.86)}
.eyebrow{color:var(--orange)}
.dark .eyebrow{color:var(--orange2)}
.squig path{stroke:var(--orange)}
h2{letter-spacing:-.005em}
.lead{color:var(--dim)}
.card .go,.sol a h3{color:var(--ink)}
.card .go{color:#C96A0E}
.card .num{color:#C96A0E}
.dates > div,.incl li{border-radius:0}
.lichting b{color:#C96A0E}
.dark .lichting b{color:var(--orange2);filter:none}
.bubbleq{border-radius:18px;border-bottom-left-radius:6px}
.tabs button.on{border-bottom-color:var(--orange)}
.timeline{border-left:2px solid rgba(44,123,182,.35)}
.timeline > div:before{background:var(--orange)}
.parts b{color:#C96A0E}
footer{background:#0E2340}

/* v2.7: foto's */
.photo{border-radius:var(--r);overflow:hidden;aspect-ratio:3/2;background:#DCE5EF}
.photo img{width:100%;height:100%;object-fit:cover;display:block}
.card .photo{margin:-30px -26px 6px;border-radius:var(--r) var(--r) 0 0;aspect-ratio:16/9}
.sol a .photo{margin:-28px -26px 14px;border-radius:var(--r) var(--r) 0 0;aspect-ratio:16/9}
.herophoto{border-radius:28px;overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.35)}
.herophoto img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:4/3}
.strip{display:grid;grid-template-columns:2fr 1fr 1fr;gap:16px;margin-top:40px}
.strip .photo:first-child{grid-row:span 2;aspect-ratio:auto}
@media(max-width:820px){.strip{grid-template-columns:1fr 1fr}.strip .photo:first-child{grid-column:span 2}}

/* v3.0: kleur en toon */
.sol a.pers{background:var(--peach)}
.sol a.org{background:var(--mintl)}
.sol a{display:flex;flex-direction:column}
.sol a p{flex:1}
.sol .lbl{display:inline-block;margin-top:14px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.sol a{border-color:rgba(18,52,91,.14)}
.emoji{font-size:28px;display:block;margin-bottom:10px}
.pill{display:inline-block;padding:6px 12px;border-radius:999px;font-size:13px;font-weight:600;background:var(--mintl);color:#0E5C55;margin-right:8px}
.pill.o{background:var(--peach);color:#8A4A0B}.pill.s{background:var(--sunl);color:#7A5A00}
.big{font-family:var(--serif);font-weight:800;font-size:clamp(60px,9vw,120px);line-height:.9;color:var(--orange)}
.tick span:before{color:var(--mint)}
.plan.hl{border-color:var(--orange);box-shadow:0 20px 50px rgba(242,140,40,.15)}
.ring .fg{stroke:var(--mint)}

/* v3.5: waaier van rapportpagina's */
.fan{position:relative;height:190px;margin:-30px -26px 14px;overflow:hidden;background:var(--light2);border-radius:var(--r) var(--r) 0 0}
.fan img{position:absolute;width:38%;top:22px;border-radius:6px;box-shadow:0 10px 24px rgba(18,52,91,.22);background:#fff}
.fan img:nth-child(1){left:8%;transform:rotate(-8deg)}
.fan img:nth-child(2){left:31%;top:12px;z-index:2;transform:rotate(-1deg)}
.fan img:nth-child(3){left:54%;transform:rotate(7deg)}

/* v3.9: boek-mockup van overwinquitter.nl */
.bookshot{position:relative;padding:34px 0 44px;--coverfront:url('cover-front.png');--coverspine:url('cover-spine.png')}
.bookshot .halo{position:absolute;left:54%;top:46%;transform:translate(-50%,-50%);width:130%;max-width:600px;height:112%;z-index:1;pointer-events:none;background:radial-gradient(50% 50% at 50% 50%,rgba(252,220,138,.86),rgba(232,188,96,.44) 42%,rgba(201,162,75,.12) 62%,transparent 78%);filter:blur(50px)}
.bookshot .floor{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);width:96%;max-width:440px;height:70px;z-index:1;pointer-events:none;background:radial-gradient(50% 50% at 50% 50%,rgba(201,162,75,.18),transparent 70%);filter:blur(22px)}
.bookstage{perspective:1600px;perspective-origin:50% 46%;position:relative;z-index:2}
.book{position:relative;width:100%;max-width:300px;aspect-ratio:170/244;transform-style:preserve-3d;margin:0 auto;transform:rotateY(-22deg) rotateX(3deg)}
.book .front{position:absolute;inset:0;background-image:var(--coverfront);background-size:cover;background-position:center;box-shadow:0 26px 44px rgba(0,0,0,.7)}
.book .front:after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,rgba(255,255,255,.10),rgba(255,255,255,0) 30%,rgba(0,0,0,.30))}
.book .spine{position:absolute;top:0;right:100%;width:15%;height:100%;transform-origin:100% 50%;transform:rotateY(-90deg);background-image:var(--coverspine);background-size:cover;background-position:center;filter:brightness(.7)}
.book .pages{position:absolute;top:0;left:100%;width:15%;height:100%;transform-origin:0 50%;transform:rotateY(90deg);background:linear-gradient(90deg,#FEFCF5,#F3ECDA 42%,#CFC6AC)}
.book .edge{position:absolute;top:-1%;right:-4px;width:9px;height:102%;z-index:4;pointer-events:none;background:linear-gradient(90deg,rgba(255,236,180,0),rgba(255,238,186,.92) 45%,rgba(232,190,110,.55) 70%,rgba(201,162,75,0))}
.appbar{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;border:1px solid var(--line);border-radius:var(--r);padding:26px 30px;background:rgba(255,255,255,.7);margin-top:30px}
@media(max-width:820px){.appbar{grid-template-columns:1fr}}

/* v3.14: artikelen breed */
.artgrid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(280px,.8fr);gap:56px;align-items:start}
.artbody{max-width:none;font-size:18px;line-height:1.7}
.artbody h2{font-size:30px;margin:40px 0 12px}
.artbody p{margin-bottom:16px}
.artside .card{display:block}
@media(max-width:900px){.artgrid{grid-template-columns:1fr}}

/* v3.17: trainingsblok opvallender */
.peach .lead{color:#3B4A5C}
.peach h2{font-size:clamp(34px,4.4vw,52px)}

/* v3.26 */
.lichting .deadline{font-weight:600;color:#C96A0E}

/* v3.28 */
.peachband{background:var(--peach)}

/* v3.29 — navtop verdwijnt nu onder 1340px in plaats van 1100px,
   omdat Webinar als zevende menu-item anders de knop rechts wegdrukt */
.mintband{background:var(--mintl)}

/* v3.34 — inschrijfformulier */
.f .rij2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.f .rij2 label,form.f .keuze{display:grid;gap:6px;font-size:14px;color:var(--dim)}
form.f .veldkop{font-size:14px;font-weight:600;color:var(--ink);margin-top:14px}
form.f label.akkoord{display:flex;gap:11px;align-items:flex-start;font-size:14px;color:var(--dim);cursor:pointer;line-height:1.4}
form.f label.akkoord input[type=checkbox]{width:17px;height:17px;flex:none;margin:2px 0 0;padding:0;border:0;background:none;border-radius:0;accent-color:var(--orange)}
@media(max-width:620px){.f .rij2{grid-template-columns:1fr}}

/* v3.36 — juridische paginas */
.legaal p,.legaal ul{max-width:74ch}
.legaal h2{font-family:var(--sans);font-weight:600;font-size:23px;line-height:1.25;margin:10px 0 14px}
.legaal .artnr{font-size:13px;font-weight:500;letter-spacing:.02em;color:var(--blue);margin-top:38px;margin-bottom:2px}
.legaal .artnr:first-of-type{margin-top:0}
.legaal .kader{display:block;background:var(--light2);border-left:3px solid var(--blue);padding:16px 20px;border-radius:0 12px 12px 0;font-size:16px}
.legaaltabel{width:100%;border-collapse:collapse;margin:8px 0 6px;font-size:15.5px}
.legaaltabel th{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);color:var(--blue);font-weight:600;font-size:13px}
.legaaltabel td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.legaaltabel td:first-child{font-weight:600;width:30%}

/* v3.42 — cookietoestemming */
#cookiebalk{position:fixed;left:0;right:0;bottom:0;z-index:999;background:#0E2340;color:#F4F7FB;
  box-shadow:0 -8px 32px rgba(11,23,41,.3);padding:22px 0}
#cookiebalk .cb-binnen{max-width:1080px;margin:0 auto;padding:0 24px;display:flex;gap:32px;align-items:flex-start}
#cookiebalk .cb-tekst{flex:1}
#cookiebalk b{display:block;font-size:16px;margin-bottom:6px}
#cookiebalk p{font-size:14.5px;line-height:1.55;margin:0;max-width:70ch;color:#C6D4E4}
#cookiebalk a{color:#4FA3DC}
#cookiebalk [hidden]{display:none !important}
#cookiebalk .cb-opties{display:grid;gap:8px;margin-top:14px}
#cookiebalk .cb-opties label{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:#C6D4E4;cursor:pointer}
#cookiebalk .cb-opties input{margin:3px 0 0;accent-color:#F28C28;width:16px;height:16px;flex:none}
#cookiebalk .cb-knoppen{display:grid;gap:10px;flex:none;width:230px}
#cookiebalk .btn{width:100%;justify-content:center;font-size:15px;padding:12px 18px;cursor:pointer;border:0}
#cookiebalk .btn.ghost{background:transparent;border:1px solid rgba(255,255,255,.35);color:#F4F7FB}
#cookiebalk .btn.ghost:hover{background:rgba(255,255,255,.08)}
#cookiebalk .cb-link{background:none;border:0;color:#9FB3CD;font-family:inherit;font-size:14px;
  text-decoration:underline;cursor:pointer;padding:4px}
@media(max-width:820px){#cookiebalk .cb-binnen{flex-direction:column;gap:18px}#cookiebalk .cb-knoppen{width:100%}}

/* ============================================================
   v4.0 | 24 september 2026
   Manrope voor koppen (zelfde familie als overwinquitter.nl),
   glasheader, echte app-schermen in de hero, lijniconen,
   dunnere lijnen, afgeronde hoeken, scroll-animaties.
   ============================================================ */
:root{--serif:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;--line:rgba(18,52,91,.10);--navh:64px;--navtop:12px}
html,body{overflow-x:clip}
html{scroll-padding-top:96px}
h1,h2{font-weight:800;letter-spacing:-.028em;line-height:1.07}
h1{font-size:clamp(40px,5.2vw,66px)}
h2{font-size:clamp(30px,3.7vw,46px)}
.peach h2{font-size:clamp(30px,3.5vw,44px)}
.prose h2,.artbody h2{font-size:27px;letter-spacing:-.02em;line-height:1.2}
.legaal h2{letter-spacing:-.01em}
.parts b{font-weight:800;font-size:28px;letter-spacing:-.02em}
.stats b,.ring b,.figfill b,.flamesm{font-weight:800;letter-spacing:-.03em}
.plan .price{font-weight:800;font-size:46px;letter-spacing:-.03em}
.lichting b{font-weight:800;font-size:25px;letter-spacing:-.02em}
.big{font-weight:800;font-size:clamp(56px,8vw,104px);letter-spacing:-.04em}
.bignum{font-weight:800;letter-spacing:-.05em}
.quiz .res h3{font-weight:800;font-size:27px;letter-spacing:-.02em}
.logos span{font-weight:800;font-size:19px;letter-spacing:-.01em}
.qname{font-weight:800;font-size:20px;letter-spacing:-.02em}
.tick div{font-weight:700;font-size:20px;letter-spacing:-.01em}
.tick{padding:18px 0}
.tick span{margin-right:48px}
.tick span:before{margin-right:18px}

/* hero: rustiger, zoals in lettertypevoorbeeld B */
.mark{color:var(--orange)}
.mark:after{display:none}
.sub{font-weight:400;font-size:clamp(18px,1.5vw,20px);line-height:1.6;color:rgba(244,247,251,.8);max-width:34em}
.dark .sticker{background:rgba(255,255,255,.08);color:#F4F7FB;border:1px solid rgba(255,255,255,.18);font-weight:500}
.dark .sticker:before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--mint);margin-right:9px;position:relative;top:-1px}
.dark .sticker.alt{background:rgba(255,255,255,.08);color:#F4F7FB}

/* ---------- header ---------- */
nav.site{position:fixed;top:0;left:0;right:0;z-index:60;padding:var(--navtop) 16px 0;pointer-events:none;background:none;border:0;-webkit-backdrop-filter:none;backdrop-filter:none;color:#F4F7FB}
.navpill{pointer-events:auto;position:relative;max-width:calc(var(--wrap) - 8px);margin:0 auto;height:var(--navh);display:flex;align-items:center;justify-content:space-between;gap:18px;padding:0 10px 0 22px;border-radius:999px;border:1px solid transparent;background:transparent;transition:background-color .5s ease-out,border-color .5s ease-out,box-shadow .5s ease-out,-webkit-backdrop-filter .5s ease-out,backdrop-filter .5s ease-out}
nav.site.scrolled .navpill{-webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%)}
nav.site.scrolled.on-dark .navpill{background:rgba(14,35,64,.52);border-color:rgba(255,255,255,.14);box-shadow:0 10px 36px -12px rgba(0,0,0,.55)}
nav.site.scrolled.on-light .navpill{background:rgba(255,255,255,.86);border-color:rgba(18,52,91,.09);box-shadow:0 8px 30px -8px rgba(14,35,64,.20)}
nav.site.on-light{color:#12345B}
nav.site .brand{flex:none;display:block}
nav.site .brand img{height:30px;width:auto;display:block}
nav.site .brand .logo-d{display:none}
nav.site.on-light .brand .logo-l,nav.site.open .brand .logo-l{display:none}
nav.site.on-light .brand .logo-d,nav.site.open .brand .logo-d{display:block}
nav.site .navlinks{display:flex;align-items:center;gap:2px;font-size:14.5px}
nav.site .navlinks > a,nav.site .dd > button{position:relative;display:inline-flex;align-items:center;gap:7px;padding:9px 14px;border-radius:999px;color:inherit;opacity:.8;text-decoration:none;background:none;border:0;font:inherit;font-weight:500;cursor:pointer;white-space:nowrap;transition:opacity .2s,background-color .2s}
nav.site .navlinks > a:hover,nav.site .dd > button:hover,nav.site .dd.open > button{opacity:1;background:rgba(255,255,255,.09)}
nav.site.on-light .navlinks > a:hover,nav.site.on-light .dd > button:hover,nav.site.on-light .dd.open > button{background:rgba(18,52,91,.06)}
nav.site .navlinks > a.on,nav.site .dd.on > button{opacity:1}
nav.site .navlinks > a.on:after,nav.site .dd.on > button:before{content:"";position:absolute;left:50%;bottom:2px;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:var(--orange)}
nav.site .dd > button:after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);opacity:.7;transition:transform .2s}
nav.site .dd.open > button:after{transform:translateY(1px) rotate(225deg)}
nav.site .dd{position:relative}
nav.site .dd:before{content:"";position:absolute;left:0;right:0;top:100%;height:16px}
nav.site .ddmenu{position:absolute;top:calc(100% + 12px);left:50%;min-width:230px;transform:translate(-50%,6px);background:#fff;color:#12345B;border:1px solid rgba(18,52,91,.08);border-radius:18px;padding:8px;box-shadow:0 24px 50px -16px rgba(14,35,64,.35);opacity:0;visibility:hidden;transition:opacity .2s,transform .2s,visibility .2s}
@media(hover:hover) and (min-width:981px){nav.site .dd:hover .ddmenu{opacity:1;visibility:visible;transform:translate(-50%,0)}nav.site .dd:hover > button{opacity:1}}
nav.site .dd.open .ddmenu{opacity:1;visibility:visible;transform:translate(-50%,0)}
nav.site .ddmenu a{display:block;padding:10px 14px;border-radius:12px;text-decoration:none;font-size:14.5px;font-weight:500;color:#12345B;white-space:nowrap}
nav.site .ddmenu a:hover{background:#EEF3F9}
nav.site .ddmenu a.on{background:var(--peach);color:#8A4A0B}
nav.site .ddmenu a[href^="http"]:after{content:"\2197";margin-left:6px;opacity:.45}
nav.site .navact{display:flex;align-items:center;gap:8px;flex:none}
nav.site .btn{padding:11px 20px;font-size:14px;white-space:nowrap}
nav.site .navlinks > a.navcta-m{display:none}
nav.site .navtoggle{display:none;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.28);background:none;position:relative;cursor:pointer;color:inherit}
nav.site.on-light .navtoggle,nav.site.open .navtoggle{border-color:rgba(18,52,91,.18)}
nav.site .navtoggle span,nav.site .navtoggle span:before,nav.site .navtoggle span:after{content:"";position:absolute;left:12px;width:18px;height:1.8px;border-radius:2px;background:currentColor;transition:transform .25s,top .25s,opacity .2s}
nav.site .navtoggle span{top:21px}
nav.site .navtoggle span:before{left:0;top:-6px}
nav.site .navtoggle span:after{left:0;top:6px}
nav.site.open .navtoggle span{background:transparent}
nav.site.open .navtoggle span:before{top:0;transform:rotate(45deg);background:#12345B}
nav.site.open .navtoggle span:after{top:0;transform:rotate(-45deg);background:#12345B}
@media(max-width:1100px){nav.site .navlinks > a,nav.site .dd > button{padding:9px 10px}}
@media(max-width:980px){
  nav.site .navlinks{display:none}
  nav.site .navtoggle{display:block}
  nav.site.open{color:#12345B}
  nav.site.open .navpill{background:#fff;border-color:rgba(18,52,91,.08);box-shadow:0 8px 30px -8px rgba(14,35,64,.25)}
  nav.site.open .navlinks{display:flex;position:absolute;left:0;right:0;top:calc(var(--navh) + 10px);flex-direction:column;align-items:stretch;gap:2px;background:#fff;color:#12345B;border-radius:24px;padding:14px;border:1px solid rgba(18,52,91,.08);box-shadow:0 24px 50px -16px rgba(14,35,64,.35);max-height:calc(100vh - 110px);max-height:calc(100dvh - 110px);overflow:auto;animation:pop .25s both}
  nav.site.open .navlinks > a{opacity:1;padding:12px 14px;border-radius:14px;font-size:16px;font-weight:600}
  nav.site.open .navlinks > a.on:after{display:none}
  nav.site.open .navlinks > a.on{background:var(--peach);color:#8A4A0B}
  nav.site.open .dd > button{pointer-events:none;opacity:.55;padding:14px 14px 4px;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:600}
  nav.site.open .dd > button:after,nav.site.open .dd > button:before{display:none}
  nav.site.open .ddmenu{position:static;transform:none;opacity:1;visibility:visible;box-shadow:none;border:0;padding:0;min-width:0;background:none}
  nav.site.open .ddmenu a{font-size:16px;font-weight:600;padding:12px 14px}
  nav.site.open .navlinks > a.navcta-m{display:flex;justify-content:center;margin-top:12px;padding:15px 20px;font-size:15px;opacity:1;color:#12345B;background:var(--orange);border:1px solid var(--orange);border-radius:999px}
}
@media(max-width:520px){nav.site{padding:10px 10px 0}.navpill{padding:0 8px 0 18px}nav.site .navact .btn{display:none}nav.site .brand img{height:27px}}

/* de header ligt nu over de hero heen */
.hero{padding-top:156px}
.pagehero{padding-top:146px}
@media(max-width:700px){.hero{padding-top:118px}.pagehero{padding-top:112px}}

/* ---------- hero: echte app-schermen ---------- */
.heroshots{position:relative;width:100%;max-width:560px;aspect-ratio:560/640;margin:0 0 0 auto}
.hp{position:absolute;height:auto;filter:drop-shadow(0 30px 34px rgba(0,0,0,.34)) drop-shadow(0 6px 10px rgba(0,0,0,.18));animation:hpin 1s cubic-bezier(.22,1,.36,1) both}
.hp1{left:0;top:10%;width:39%;--r:-6deg;transform:rotate(var(--r));z-index:2;animation-delay:.15s}
.hp2{left:29%;top:0;width:43%;--r:0deg;z-index:3}
.hp3{right:0;top:13%;width:39%;--r:6deg;transform:rotate(var(--r));z-index:1;animation-delay:.3s}
@keyframes hpin{from{opacity:0;transform:translateY(34px) rotate(var(--r))}to{opacity:1;transform:rotate(var(--r))}}
.qsays{position:absolute;left:-12%;bottom:6%;z-index:5;width:max-content;max-width:60%}
.qs-lbl{display:inline-flex;align-items:center;gap:8px;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:#F4F7FB;margin:0 0 8px;padding:5px 11px 5px 9px;border-radius:999px;background:rgba(14,35,64,.55);border:1px solid rgba(255,255,255,.16);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);animation:pop .45s .6s both}
.qs-lbl i{width:8px;height:8px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 4px rgba(242,140,40,.22)}
.qs-b{width:max-content;max-width:100%;font-size:15.5px;line-height:1.35;padding:10px 15px;border-radius:18px;margin:0;box-shadow:0 14px 30px -10px rgba(0,0,0,.45)}
p.qs-b + p.qs-b{margin-top:8px}
.qs-q{background:#fff;color:#12345B;border-bottom-left-radius:6px;animation:pop .45s .8s both}
.qs-q s{text-decoration:none;position:relative;animation:qsfade .4s 1.9s forwards}
.qs-q s:after{content:"";position:absolute;left:-3px;right:-3px;top:54%;height:2px;border-radius:2px;background:var(--orange);transform:scaleX(0);transform-origin:left;animation:qsstrike .5s 1.5s cubic-bezier(.65,0,.35,1) forwards}
.qs-me{margin-left:auto;background:var(--orange);color:#12345B;font-weight:700;border-bottom-right-radius:6px;animation:pop .45s 2.1s both}
@keyframes qsstrike{to{transform:scaleX(1)}}
@keyframes qsfade{to{color:rgba(18,52,91,.5)}}
@media(max-width:1180px){.qsays{left:-4%}}
@media(max-width:900px){.heroshots{margin:0 auto;max-width:460px}.qsays{left:0}}
@media(max-width:520px){.qsays{bottom:0}.qs-b{font-size:14px}}
@media(prefers-reduced-motion:reduce){.hp,.qsays,.qs-lbl,.qs-q,.qs-me{animation:none}.qs-q s{animation:none;color:rgba(18,52,91,.5)}.qs-q s:after{animation:none;transform:none}}

/* ---------- founder-strook onder de hero ---------- */
.founderstrip{padding:30px 0;border-top:0;background:#fff}
.fstrip{display:flex;align-items:center;gap:22px}
.fstrip img{width:68px;height:68px;border-radius:50%;object-fit:cover;object-position:50% 16%;flex:none;box-shadow:0 0 0 4px #fff,0 0 0 5px rgba(18,52,91,.10)}
.fstrip p{flex:1;margin:0;font-size:16px;line-height:1.55;color:var(--dim);max-width:72ch}
.fstrip p b{color:var(--ink);font-weight:600}
.fslink{flex:none;display:inline-flex;align-items:center;gap:10px;padding:12px 20px;border-radius:999px;border:1px solid var(--line);font-size:14.5px;font-weight:600;text-decoration:none;color:var(--ink);transition:border-color .2s,color .2s}
.fslink:after{content:"\2193";font-weight:400}
.fslink:hover{border-color:var(--blue);color:var(--blue)}
@media(max-width:820px){.fstrip{flex-wrap:wrap;gap:16px}.fstrip p{flex:1 1 calc(100% - 90px)}.fslink{width:100%;justify-content:center}}

/* ---------- lijniconen in plaats van emoji's ---------- */
.ico{display:inline-grid;place-items:center;width:46px;height:46px;border-radius:14px;background:rgba(255,255,255,.85);border:1px solid rgba(18,52,91,.07);margin-bottom:18px;color:#C96A0E}
.sol a.org .ico{color:#0E7C72}
.ico svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}

/* ---------- dunne lijnen, afgeronde hoeken ---------- */
.sol a{border-color:rgba(18,52,91,.08)}
.toggle{border-radius:999px;padding:3px;gap:2px}
.toggle button{border-radius:999px}
.quiz .opts button{border-radius:12px}
.quiz .prog i{border-radius:4px}
.person img{border-radius:14px}
.heroimg img{border-radius:20px}
.heroimg .cap{border-radius:12px}
.ph span{border-radius:8px}
.subnav a{padding:6px 0}

/* ---------- scroll-animaties (alleen als JavaScript ze aanzet) ---------- */
.rv{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.22,1,.36,1) var(--rvd,0ms),transform .7s cubic-bezier(.22,1,.36,1) var(--rvd,0ms)}
.rv.rv-on{opacity:1;transform:none}
@media(max-width:760px){.lichtingen{grid-template-columns:1fr!important}}
.two{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
@media(max-width:900px){.two{grid-template-columns:minmax(0,1fr)}}
@media(max-width:520px){.heroshots{width:92%}}
@media(max-width:760px){.parts[style*="repeat(3"],.cards3[style*="repeat(3"],.cards2[style*="1fr 1fr"]{grid-template-columns:1fr!important}}
@media(max-width:620px){.legaaltabel{table-layout:fixed;font-size:14.5px}.legaaltabel td,.legaaltabel th{overflow-wrap:anywhere;-webkit-hyphens:auto;hyphens:auto;padding:10px 8px}}
.dark .pill{background:rgba(255,255,255,.08);color:#F4F7FB;border:1px solid rgba(255,255,255,.18);font-weight:500}
.dark .pill:before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--mint);margin-right:8px;position:relative;top:-1px}
.dark .pill.o:before{background:var(--orange)}
.dark .pill.s:before{background:var(--sun)}

/* ============================================================
   v4.1 | 24 september 2026
   Onderdelen in de stijl van bidley.ai: glasknop, bewijsregel,
   probleemkaarten, blok 'doet het anders', stappen met lichtpuntje,
   prijsoverzicht, formulieren, woorden die inkomen.
   ============================================================ */
:root{--ico-cal:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='4' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E");--glow-dot:radial-gradient(circle,#FFE2BF,#F28C28 70%)}
.usps svg,.sc-ico svg,.sc-btn svg,.apill-ico svg,.pl-name svg,.pl-list svg,.eb-ico svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ---------- knoppen: tweede knop op donker wordt glas, kennismaking krijgt een agenda-icoon ---------- */
.dark .btn.ghost{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.26);color:#F4F7FB;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.dark .btn.ghost:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.46);color:#fff}
.dark .btn.ghost:after{content:"\2192";font-weight:400}
.btn.ghost[href^="contact.html"]:before,nav.site .navact .btn[href^="contact.html"]:before{content:"";width:17px;height:17px;flex:none;background:currentColor;-webkit-mask:var(--ico-cal) center/contain no-repeat;mask:var(--ico-cal) center/contain no-repeat}
nav.site .navact .btn[href^="contact.html"]:after{content:none}

/* ---------- hero: bewijsregel en USP's ---------- */
.proof{display:grid;grid-template-columns:auto auto minmax(0,1fr);align-items:center;column-gap:10px;row-gap:4px;margin:26px 0 0;font-size:14.5px;color:rgba(244,247,251,.74)}
@media(max-width:520px){.proof{grid-template-columns:auto minmax(0,1fr)}.proof-txt{grid-column:1/-1}}
.proof-dot{width:8px;height:8px;border-radius:50%;background:var(--mint);animation:ping2 2s ease-out infinite}
@keyframes ping2{0%{box-shadow:0 0 0 0 rgba(46,196,182,.55)}70%{box-shadow:0 0 0 7px rgba(46,196,182,0)}100%{box-shadow:0 0 0 0 rgba(46,196,182,0)}}
.proof-lbl{font-weight:600;color:#F4F7FB}
.proof-txt{display:inline-grid;color:inherit;text-decoration:none;min-width:0;max-width:100%}
.proof-txt span{grid-area:1/1;opacity:0;transform:translateY(6px);transition:opacity .5s ease,transform .5s ease}
.proof-txt span.on{opacity:1;transform:none}
.proof-txt:hover{color:#fff;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.35)}
.usps{list-style:none;display:flex;flex-wrap:wrap;gap:10px 22px;margin:14px 0 0;padding:0;font-size:14px;color:rgba(244,247,251,.74)}
.usps li{display:flex;align-items:center;gap:8px}
.usps svg{width:16px;height:16px;opacity:.9}
@keyframes hpfloat{0%,100%{transform:translateY(0) rotate(var(--r))}50%{transform:translateY(-10px) rotate(var(--r))}}
.hp1{animation:hpin 1s cubic-bezier(.22,1,.36,1) .15s both,hpfloat 7s ease-in-out 1.4s infinite}
.hp2{animation:hpin 1s cubic-bezier(.22,1,.36,1) 0s both,hpfloat 7s ease-in-out 1.1s infinite}
.hp3{animation:hpin 1s cubic-bezier(.22,1,.36,1) .3s both,hpfloat 7s ease-in-out 1.7s infinite}

/* ---------- probleemkaarten als stapel ---------- */
.probleem{background:linear-gradient(180deg,#FFF5EA 0%,#FBFCFE 80%);border-top:0}
.probgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:72px;align-items:center}
.eyebrow.eb-ico{display:inline-flex;align-items:center;gap:8px;text-transform:uppercase;letter-spacing:.14em;font-size:12px;font-weight:600;margin-bottom:14px}
.eyebrow.eb-ico:before{content:none}
.eb-ico svg{width:15px;height:15px}
.stack{max-width:460px;width:100%;margin:0 auto;padding:30px 30px 0 0}
.stack-cards{display:grid;touch-action:pan-y;-webkit-user-select:none;user-select:none}
.scard{-webkit-user-drag:none}
.scard{grid-area:1/1;position:relative;display:flex;flex-direction:column;min-height:390px;padding:34px 34px 30px;border-radius:28px;color:#fff;text-decoration:none;overflow:hidden;background:linear-gradient(155deg,#1B4677 0%,#12345B 40%,#0B1B33 100%);border:1px solid rgba(255,255,255,.10);box-shadow:0 30px 60px -24px rgba(14,35,64,.55),inset 0 1px 0 rgba(255,255,255,.08);transform:translate(calc(var(--pos) * 15px),calc(var(--pos) * -14px)) rotate(calc(var(--pos) * 2.5deg)) scale(calc(1 - var(--pos) * .05));opacity:calc(1 - var(--pos) * .17);transform-origin:50% 60%;transition:transform .6s cubic-bezier(.22,1,.36,1),opacity .45s ease;will-change:transform}
.scard:after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(135deg,rgba(255,255,255,.08),transparent 42%);pointer-events:none}
.sc-glow{position:absolute;right:-70px;top:-80px;width:240px;height:240px;border-radius:50%;background:radial-gradient(closest-side,rgba(79,163,220,.45),transparent 70%);pointer-events:none}
.sc-top{position:relative;display:flex;justify-content:space-between;align-items:center}
.sc-ico{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);color:var(--orange2)}
.sc-ico svg{width:21px;height:21px}
.sc-count{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;color:rgba(255,255,255,.45);font-variant-numeric:tabular-nums}
.sc-h{position:relative;display:block;margin-top:30px;font-family:var(--serif);font-weight:800;font-size:clamp(23px,2.2vw,28px);line-height:1.15;letter-spacing:-.02em}
.sc-p{position:relative;display:block;margin-top:14px;font-size:15.5px;line-height:1.6;color:rgba(244,247,251,.8)}
.sc-foot{position:relative;display:block;margin-top:auto;padding-top:26px}
.sc-lbl{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:rgba(255,255,255,.5)}
.sc-val{display:inline-flex;align-items:center;gap:8px;margin-top:6px;font-family:var(--serif);font-weight:800;font-size:19px;letter-spacing:-.01em;color:var(--orange2)}
.sc-val:after{content:"\2192";font-family:var(--sans);font-weight:400;transition:transform .2s}
.scard:hover .sc-val:after{transform:translateX(4px)}
.scard.out{transform:translate(-118%,16px) rotate(-9deg)!important;opacity:0!important}
.scard.snap,.scard.drag{transition:none!important}
.stack-nav{display:flex;align-items:center;justify-content:space-between;margin-top:26px}
.sc-btn{width:46px;height:46px;border-radius:50%;border:1px solid rgba(18,52,91,.12);background:#fff;color:var(--ink);display:grid;place-items:center;cursor:pointer;box-shadow:0 6px 16px -8px rgba(14,35,64,.25);transition:transform .2s,border-color .2s}
.sc-btn:hover{border-color:var(--blue);transform:translateY(-1px)}
.sc-btn svg{width:18px;height:18px}
.sc-dots{display:flex;gap:8px;align-items:center}
.sc-dots button{width:8px;height:8px;border-radius:999px;border:0;padding:0;background:rgba(18,52,91,.2);cursor:pointer;transition:width .3s,background .3s}
.sc-dots button.on{width:26px;background:var(--navy2)}
@media(max-width:900px){.probgrid{grid-template-columns:minmax(0,1fr);gap:30px}}
@media(max-width:520px){.scard{min-height:350px;padding:28px 26px 24px}.stack{max-width:none;padding:26px 26px 0 0}}

/* ---------- blok 'doet het anders' ---------- */
section.anders{position:relative;overflow:hidden;padding:112px 0 0;border-top:0;background:radial-gradient(120% 80% at 50% 0%,#17436F 0%,#0E2340 55%,#0B1B33 100%)}
.anders-head{text-align:center;max-width:800px;margin:0 auto}
.anders-head .eyebrow{text-transform:uppercase;letter-spacing:.14em;font-size:12px;font-weight:600;color:#7FC0EE}
.anders-head .eyebrow:before{content:none}
.anders h2{font-size:clamp(34px,5.2vw,66px);margin:14px 0 0;letter-spacing:-.035em;line-height:1.04;text-wrap:balance}
.anders-mark{display:inline-block;height:.8em;width:auto;margin-right:.26em;vertical-align:-.06em}
.anders-sub{margin-top:20px;font-family:var(--serif);font-weight:700;font-size:clamp(19px,2vw,24px);letter-spacing:-.015em;color:#F4F7FB}
.anders .lead{margin:12px auto 0;max-width:56ch}
.anders-stage{position:relative;max-width:640px;margin:56px auto 0;display:flex;justify-content:center}
.anders-glow{position:absolute;left:50%;top:46%;width:170%;height:150%;transform:translate(-50%,-50%);background:radial-gradient(42% 38% at 50% 46%,rgba(79,163,220,.34),rgba(79,163,220,0) 72%);pointer-events:none}
.anders-phone{position:relative;z-index:2;width:min(300px,64vw);height:auto;display:block;filter:drop-shadow(0 40px 60px rgba(0,0,0,.45));-webkit-mask-image:linear-gradient(180deg,#000 70%,transparent 97%);mask-image:linear-gradient(180deg,#000 70%,transparent 97%)}
.apill{position:absolute;z-index:3;will-change:transform}
.ap-l{right:calc(50% + 108px)}
.ap-r{left:calc(50% + 108px)}
.apill-in{display:inline-flex;align-items:center;gap:10px;padding:9px 16px 9px 9px;border-radius:999px;background:rgba(255,255,255,.95);color:#12345B;font-size:14.5px;font-weight:600;white-space:nowrap;box-shadow:0 18px 40px -16px rgba(0,0,0,.6);animation:afloat 5s ease-in-out infinite}
.apill-ico{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:rgba(44,123,182,.12);color:var(--blue);flex:none}
.apill-ico svg{width:15px;height:15px}
@keyframes afloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.acount{position:absolute;z-index:4;left:calc(50% + 64px);top:79%;display:grid;gap:3px;padding:14px 18px 14px;border-radius:18px;background:rgba(14,35,64,.7);border:1px solid rgba(255,255,255,.16);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:#F4F7FB;box-shadow:0 20px 40px -18px rgba(0,0,0,.6)}
.ac-lbl{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:#7FC0EE}
.acount b{font-family:var(--serif);font-weight:800;font-size:34px;line-height:1.05;color:var(--orange);font-variant-numeric:tabular-nums}
.ac-sub{font-size:13px;color:rgba(244,247,251,.72)}
@media(max-width:760px){
  section.anders{padding-top:84px}
  .anders-stage{margin-top:40px}
  .apill-in{font-size:12.5px;padding:7px 12px 7px 7px;gap:7px}
  .apill-ico{width:22px;height:22px}.apill-ico svg{width:12px;height:12px}
  .ap-l{right:auto;left:0}
  .ap-r{left:auto;right:0}
  .ap2,.ap3{display:none}
  .acount{left:auto;right:4px;top:74%;padding:10px 14px}.acount b{font-size:26px}
}

/* ---------- stappen met een bewegend lichtpuntje ---------- */
.parts.steps{--g:28px;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:40px var(--g);position:relative;counter-reset:stap;margin-top:48px;text-align:center;background:none}
.parts.steps > div,.zig .parts.steps > div,.band .parts.steps > div{border:0;background:none;padding:0;border-radius:0;counter-increment:stap}
.parts.steps b{position:relative;z-index:1;display:grid;place-items:center;width:58px;height:58px;margin:0 auto 20px;border-radius:18px;background:linear-gradient(135deg,#12345B,#2C7BB6);color:#fff;font-family:var(--serif);font-weight:800;font-size:19px;letter-spacing:-.01em;box-shadow:0 14px 28px -12px rgba(18,52,91,.55),inset 0 1px 0 rgba(255,255,255,.18)}
.parts.steps h3{font-family:var(--serif);font-weight:800;font-size:19px;letter-spacing:-.015em;margin-bottom:8px}
.parts.steps h3:before{content:"Stap " counter(stap);display:block;margin-bottom:6px;font-family:var(--sans);font-size:11.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--dim)}
.parts.steps p{max-width:28ch;margin:0 auto;font-size:15px}
.steptrack{position:absolute;top:29px;height:1px;left:calc(100% / (2 * var(--n)) - (var(--n) - 1) * var(--g) / (2 * var(--n)));right:calc(100% / (2 * var(--n)) - (var(--n) - 1) * var(--g) / (2 * var(--n)));background:rgba(18,52,91,.18)}
.steptrack i{position:absolute;top:50%;left:0;width:9px;height:9px;border-radius:50%;background:var(--glow-dot);box-shadow:0 0 12px 3px rgba(242,140,40,.55),0 0 4px 1px rgba(255,177,105,.9);animation:stepx 4.4s cubic-bezier(.45,0,.55,1) infinite}
.steptrack i + i{animation-delay:-2.2s}
@keyframes stepx{0%{left:0;opacity:0;transform:translate(-50%,-50%) scale(.55)}14%{opacity:1;transform:translate(-50%,-50%) scale(1)}86%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{left:100%;opacity:0;transform:translate(-50%,-50%) scale(.55)}}
@media(max-width:1000px){.parts.steps{--g:18px}.parts.steps p{font-size:14px}}
@media(max-width:760px){
  .parts.steps{grid-template-columns:minmax(0,1fr);text-align:left;gap:30px}
  .parts.steps > div,.zig .parts.steps > div,.band .parts.steps > div{position:relative;padding:0 0 0 78px;min-height:58px}
  .parts.steps b{position:absolute;left:0;top:0;margin:0}
  .parts.steps p{margin:0}
  .steptrack{display:none}
  .parts.steps > div:not(:last-child):before{content:"";position:absolute;left:29px;top:66px;bottom:-24px;width:1px;background:rgba(18,52,91,.18)}
  .parts.steps > div:not(:last-child):after{content:"";position:absolute;left:29px;top:66px;width:9px;height:9px;border-radius:50%;background:var(--glow-dot);box-shadow:0 0 12px 3px rgba(242,140,40,.5);animation:stepy 2.9s cubic-bezier(.45,0,.55,1) infinite}
}
@keyframes stepy{0%{top:66px;opacity:0;transform:translate(-50%,-50%) scale(.55)}16%{opacity:1;transform:translate(-50%,-50%) scale(1)}84%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{top:calc(100% + 24px);opacity:0;transform:translate(-50%,-50%) scale(.55)}}
.timeline{position:relative}
.timeline:after{content:"";position:absolute;left:-1px;top:0;width:9px;height:9px;border-radius:50%;background:var(--glow-dot);box-shadow:0 0 12px 3px rgba(242,140,40,.5);transform:translate(-50%,-50%);animation:tly 7s cubic-bezier(.45,0,.55,1) infinite;pointer-events:none}
@keyframes tly{0%{top:0;opacity:0}8%{opacity:1}92%{opacity:1}100%{top:100%;opacity:0}}

/* ---------- prijsoverzicht ---------- */
section.pricing{background:linear-gradient(180deg,#FBFCFE,#F1F5FA)}
.pr-head{text-align:center;max-width:680px;margin:0 auto}
.pr-head .lead{margin:14px auto 0}
.billing{display:inline-flex;gap:4px;margin-top:30px;padding:5px;border-radius:999px;background:#fff;border:1px solid rgba(18,52,91,.10);box-shadow:0 8px 24px -14px rgba(14,35,64,.25)}
.billing button{border:0;background:none;font:inherit;font-size:14.5px;font-weight:500;color:var(--dim);padding:10px 20px;border-radius:999px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:background-color .25s,color .25s,box-shadow .25s}
.billing button.on{background:var(--navy);color:#fff;box-shadow:0 6px 16px -8px rgba(14,35,64,.6)}
.billing .save{font-size:12px;font-weight:600;color:#1F7A52;background:#E3F5EC;padding:3px 9px;border-radius:999px}
.billing button.on .save{background:rgba(255,255,255,.14);color:#9BE3BE}
.plans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;max-width:860px;margin:46px auto 0;align-items:stretch}
.plan2{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid rgba(18,52,91,.09);border-radius:26px;padding:32px 30px 30px;box-shadow:0 24px 50px -34px rgba(14,35,64,.35)}
.plan2.hl{border:1.5px solid var(--orange);box-shadow:0 30px 60px -30px rgba(242,140,40,.45)}
.pl-badge{position:absolute;top:0;left:50%;transform:translate(-50%,-50%);background:var(--orange);color:#12345B;font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;padding:6px 14px;border-radius:999px;box-shadow:0 8px 18px -8px rgba(242,140,40,.7);white-space:nowrap}
.pl-name{display:flex;align-items:center;gap:10px;font-family:var(--serif);font-weight:800;font-size:22px;letter-spacing:-.02em;color:var(--ink)}
.pl-name svg{width:22px;height:22px;color:var(--blue)}
.plan2.hl .pl-name svg{color:#C96A0E}
.pl-price{margin-top:20px;display:flex;align-items:baseline}
.pl-price b{font-family:var(--serif);font-weight:800;font-size:52px;letter-spacing:-.04em;line-height:1;color:var(--ink)}
.pl-price small{font-size:15px;color:var(--dim);margin-left:6px}
.pl-note{margin-top:10px;font-size:13.5px;color:var(--dim);min-height:1.5em}
section.pricing .j{display:none}
section.pricing.yearly .m{display:none}
section.pricing.yearly .j{display:inline}
section.pricing.yearly .pl-note .j{color:#1F7A52;font-weight:600}
.pl-btn{width:100%;margin-top:22px}
.pl-list{list-style:none;margin:24px 0 0;padding:22px 0 0;border-top:1px solid rgba(18,52,91,.08);display:grid;gap:12px}
.pl-list li{display:flex;gap:11px;align-items:flex-start;font-size:15px;line-height:1.45;color:var(--ink)}
.pl-list svg{flex:none;width:18px;height:18px;margin-top:1px;color:var(--blue);stroke-width:2.2}
.pl-list li.no{color:rgba(18,52,91,.38);text-decoration:line-through;text-decoration-color:rgba(18,52,91,.25)}
.pl-list li.no svg{color:rgba(18,52,91,.3)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pl-inc{margin-top:18px;font-size:13.5px;color:var(--dim)}
@media(max-width:760px){.plans{grid-template-columns:minmax(0,1fr);gap:30px}.pl-price b{font-size:46px}.billing button{padding:9px 14px}}

/* ---------- formulieren ---------- */
section form.f{background:#fff;border:1px solid rgba(18,52,91,.08);border-radius:24px;padding:30px;box-shadow:0 30px 60px -36px rgba(14,35,64,.30)}
section form.f > label,section form.f .rij2 label,section form.f .keuze{color:var(--ink);font-weight:500;font-size:14px}
section form.f input:not([type=radio]):not([type=checkbox]),section form.f select{height:50px}
section form.f input:not([type=radio]):not([type=checkbox]),section form.f select,section form.f textarea{border:1px solid rgba(18,52,91,.14);border-radius:12px;background:#fff;color:#12345B;font-size:15.5px;transition:border-color .2s,box-shadow .2s}
section form.f input:not([type=radio]):not([type=checkbox]):hover,section form.f select:hover,section form.f textarea:hover{border-color:rgba(18,52,91,.28)}
section form.f input:not([type=radio]):not([type=checkbox]):focus,section form.f select:focus,section form.f textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px rgba(44,123,182,.14)}
section form.f ::placeholder{color:rgba(18,52,91,.38)}
section form.f .choices label{position:relative;height:44px;padding:0 18px;border:1px solid rgba(18,52,91,.14);background:#fff;font-weight:500;color:var(--ink);transition:background-color .2s,border-color .2s,color .2s}
section form.f .choices label:hover{border-color:rgba(18,52,91,.3)}
section form.f .choices label:has(input:checked){background:var(--navy);border-color:var(--navy);color:#fff}
section form.f .choices input{position:absolute;opacity:0;pointer-events:none}
section form.f .choices label:has(input:focus-visible){outline:2px solid var(--blue2);outline-offset:2px}
section form.f button[type=submit]{width:100%;height:54px;font-size:16px;margin-top:4px}

/* ---------- koppen: woorden komen in, ring en vulling starten pas in beeld ---------- */
.wr .w{display:inline-block}
.wr:not(.on) .w{opacity:0}
.wr.on .w{animation:wordin .62s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(var(--i) * 42ms + var(--wd, 0ms))}
@keyframes wordin{from{opacity:0;transform:translateY(.35em);filter:blur(8px)}to{opacity:1;transform:none;filter:blur(0)}}
.js .ring:not(.go) .fg,.js .figfill:not(.go) .fill{animation-play-state:paused}

@media(prefers-reduced-motion:reduce){
  .hp1,.hp2,.hp3,.apill-in,.steptrack i,.timeline:after,.proof-dot,.parts.steps > div:after{animation:none}
  .steptrack i,.timeline:after,.parts.steps > div:after{display:none}
  .scard{transition:none}
}

/* ============================================================
   v4.2 | 25 september 2026
   Feedback Max: kleurenschema zonder mint, 'Zo pak je het aan' met
   contrast, nieuwe draaikaarten, rustiger stappenblok, cijferband,
   founder-blok, live-kaart, vaste knop op mobiel, brede
   stappenformulieren met Calendly.
   ============================================================ */
/* kleur: organisatie wordt lichtblauw in plaats van mint, persoonlijk blijft perzik */
:root{--mintl:#EAF3FB;--acc-pers:#F28C28;--acc-pers-bg:#FFF1E3;--acc-pers-ink:#A4570C;--acc-org:#2C7BB6;--acc-org-bg:#EAF3FB;--acc-org-ink:#1E5A8C;--card-shadow:0 1px 2px rgba(14,35,64,.04),0 22px 44px -26px rgba(14,35,64,.28)}
.pill{color:var(--acc-org-ink)}
.sol a.org .ico{color:var(--acc-org)}
.sol a{box-shadow:var(--card-shadow)}
.sol a.pers .lbl{color:var(--acc-pers-ink)}
.sol a.org .lbl{color:var(--acc-org-ink)}
.zhint svg,.gico svg,.sb-link svg,.fi svg,.fmi svg,.fplay-in svg{fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.fplay-in svg path{stroke:none}

/* ---------- 'doet het anders': logo in de kop ---------- */
.anders-logo{display:inline-block;height:1em;width:auto;vertical-align:-.14em;margin-right:.12em}

/* ---------- Zo pak je het aan: witte kaarten met kleur per doelgroep ---------- */
section.ways{background:linear-gradient(180deg,#F2F6FB 0%,#FBFCFE 100%)}
.ways .sol{gap:22px}
.ways .sol a,.ways .sol a.pers,.ways .sol a.org{position:relative;overflow:hidden;background:#fff;border:1px solid rgba(18,52,91,.07);border-radius:22px;padding:32px 28px 28px;box-shadow:var(--card-shadow)}
.ways .sol a.pers{--acc:var(--acc-pers);--accbg:var(--acc-pers-bg);--accink:var(--acc-pers-ink)}
.ways .sol a.org{--acc:var(--acc-org);--accbg:var(--acc-org-bg);--accink:var(--acc-org-ink)}
.ways .sol a:before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--acc)}
.ways .sol a .ico{background:var(--accbg);border-color:transparent;color:var(--acc)}
.ways .sol .lbl{align-self:flex-start;display:inline-flex;margin-top:20px;padding:6px 12px;border-radius:999px;background:var(--accbg);color:var(--accink);font-weight:600;letter-spacing:.1em}
.ways .sol a:after{content:"\2192";position:absolute;right:24px;bottom:22px;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:#F2F6FA;color:var(--ink);font-size:16px;transition:background-color .2s,color .2s,transform .2s}
.ways .sol a:hover{transform:translateY(-4px);box-shadow:0 1px 2px rgba(14,35,64,.05),0 30px 56px -28px rgba(14,35,64,.38);border-color:rgba(18,52,91,.10)}
.ways .sol a:hover:after{background:var(--acc);color:#fff;transform:translateX(3px)}

/* ---------- Zes dingen: draaikaarten ---------- */
section.zes{background:linear-gradient(180deg,#EEF3F9,#F7FAFD)}
.zes-head{display:flex;justify-content:space-between;align-items:flex-end;gap:28px 40px;flex-wrap:wrap}
.zes-head > div:first-child{max-width:660px}
.zes-head h2{text-wrap:balance}
.zes-act{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.seg{display:inline-flex;padding:4px;border-radius:999px;background:#fff;border:1px solid rgba(18,52,91,.10);box-shadow:0 8px 20px -14px rgba(14,35,64,.35)}
.seg button{border:0;background:none;font:inherit;font-size:14px;font-weight:500;color:var(--dim);padding:9px 16px;border-radius:999px;cursor:pointer;transition:background-color .25s,color .25s}
.seg button.on{background:var(--navy);color:#fff}
.zgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:40px}
.zcard{position:relative;perspective:1200px}
.zin{display:grid;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.22,1,.36,1)}
.zcard.on .zin{transform:rotateY(180deg)}
.zf,.zb{grid-area:1/1;-webkit-backface-visibility:hidden;backface-visibility:hidden;border-radius:22px;padding:26px 26px 22px;display:flex;flex-direction:column;align-items:flex-start;min-height:214px}
.zf{background:#fff;border:1px solid rgba(18,52,91,.07);box-shadow:var(--card-shadow);transition:border-color .2s}
.zb{transform:rotateY(180deg);background:linear-gradient(155deg,#1B4677 0%,#12345B 45%,#0B1B33 100%);color:#F4F7FB;box-shadow:0 26px 48px -26px rgba(14,35,64,.65)}
.znum{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,#12345B,#2C7BB6);color:#fff;font-family:var(--serif);font-weight:800;font-size:16px;margin-bottom:16px;box-shadow:0 10px 20px -10px rgba(18,52,91,.6)}
.zf h3{font-family:var(--serif);font-weight:800;font-size:19px;letter-spacing:-.015em;margin-bottom:6px}
.zf p{font-size:15px;color:var(--dim)}
.zlbl{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--orange2);margin-bottom:12px}
.zb p{font-size:16px;line-height:1.55;color:rgba(244,247,251,.92)}
.zhint{margin-top:auto;padding-top:16px;display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--blue)}
.zb .zhint{color:rgba(244,247,251,.6)}
.zhint svg{width:14px;height:14px}
.zbtn{position:absolute;inset:0;z-index:2;border:0;background:none;cursor:pointer;border-radius:22px}
.zbtn:focus-visible{outline:2px solid var(--blue2);outline-offset:3px}
.zcard:hover .zf{border-color:rgba(44,123,182,.35)}
.zes-tip{margin-top:16px}
@media(max-width:900px){.zgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.zgrid{grid-template-columns:minmax(0,1fr);gap:14px}.zf,.zb{min-height:0}.seg button{padding:9px 13px}}

/* ---------- Zo gaat het: rustiger ---------- */
.gaat .bignum{opacity:.1}
.gaat-row{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:18px;margin-top:52px}
.gcard{background:#fff;border:1px solid rgba(18,52,91,.07);border-radius:22px;padding:24px 26px;box-shadow:var(--card-shadow)}
.gring{display:flex;gap:24px;align-items:center}
.gring .ring{flex:none;width:118px;height:118px}
.gring .ring b{font-size:27px}
.gring p{font-size:15.5px;line-height:1.62;color:var(--dim)}
.gtrust{display:flex;flex-direction:column;justify-content:center;gap:14px;background:linear-gradient(160deg,#FFF8E4,#FFF1E3);border-color:rgba(242,140,40,.16)}
.gico{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:#fff;color:#C96A0E;box-shadow:0 8px 18px -12px rgba(201,106,14,.7)}
.gico svg{width:20px;height:20px}
.gtrust p{font-family:var(--serif);font-weight:700;font-size:20px;line-height:1.32;letter-spacing:-.015em;color:var(--ink)}
.gaat .appbar{margin-top:18px;background:#fff;border-color:rgba(18,52,91,.07);border-radius:22px;box-shadow:var(--card-shadow)}
@media(max-width:900px){.gaat-row{grid-template-columns:minmax(0,1fr)}}
@media(max-width:560px){.gring{flex-direction:column;align-items:flex-start}}

/* ---------- cijferband uit het onderzoek ---------- */
section.statsec{border-top:0;padding-bottom:40px}
.statband{position:relative;overflow:hidden;border-radius:30px;padding:56px 56px 48px;color:#fff;background:linear-gradient(120deg,#0E2340 0%,#16406D 48%,#2C7BB6 100%);box-shadow:0 40px 80px -42px rgba(14,35,64,.6)}
.sb-glow{position:absolute;right:-140px;bottom:-180px;width:560px;height:560px;border-radius:50%;background:radial-gradient(closest-side,rgba(242,140,40,.5),transparent 70%);pointer-events:none}
.statband .eyebrow{position:relative;color:#FFD3A6;text-transform:uppercase;letter-spacing:.14em;font-size:12px;font-weight:600}
.statband .eyebrow:before{content:none}
.statband h2{position:relative;color:#fff;margin-top:12px;max-width:17em}
.sb-sub{position:relative;margin-top:10px;color:rgba(244,247,251,.78);font-size:17px}
.sgrid{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;margin-top:40px}
.sgrid > div{border-top:1px solid rgba(255,255,255,.22);padding-top:18px}
.sgrid b{display:block;font-family:var(--serif);font-weight:800;font-size:clamp(40px,4.6vw,58px);letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.sgrid > div > span{display:block;margin-top:10px;font-size:14.5px;line-height:1.45;color:rgba(244,247,251,.82)}
.sb-link{position:relative;display:inline-flex;align-items:center;gap:8px;margin-top:34px;color:#fff;font-weight:600;font-size:15px;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.35);padding-bottom:3px}
.sb-link:hover{border-bottom-color:#fff}
.sb-link svg{width:16px;height:16px;transition:transform .2s}
.sb-link:hover svg{transform:translateX(3px)}
@media(max-width:900px){.sgrid{grid-template-columns:repeat(2,minmax(0,1fr))}.statband{padding:40px 26px 36px;border-radius:24px}}

/* ---------- founder-blok ---------- */
section.founder{padding:112px 0;background:radial-gradient(90% 70% at 15% 0%,#17436F 0%,#0E2340 58%,#0B1B33 100%)}
.fo-grid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:64px;align-items:center}
.fvid{position:relative;border-radius:26px;overflow:hidden;background:#000;aspect-ratio:16/9;box-shadow:0 40px 80px -30px rgba(0,0,0,.65);border:1px solid rgba(255,255,255,.08)}
.fvid video{display:block;width:100%;height:100%;object-fit:cover}
.fplay{position:absolute;inset:0;display:grid;place-items:center;border:0;padding:0;cursor:pointer;background:linear-gradient(180deg,rgba(11,27,51,0) 35%,rgba(11,27,51,.6))}
.fplay-in{position:relative;display:grid;place-items:center;width:86px;height:86px;border-radius:50%;background:rgba(255,255,255,.96);color:var(--orange);box-shadow:0 20px 40px -10px rgba(0,0,0,.55);transition:transform .25s}
.fplay-in:before{content:"";position:absolute;inset:-12px;border-radius:50%;border:2px solid rgba(255,255,255,.55);animation:fring 2.4s ease-out infinite}
@keyframes fring{0%{transform:scale(.82);opacity:.9}100%{transform:scale(1.32);opacity:0}}
.fplay:hover .fplay-in{transform:scale(1.06)}
.fplay-in svg{width:32px;height:32px;margin-left:5px}
.fvid.playing .fplay,.fvid.playing .fdur{display:none}
.fdur{position:absolute;left:18px;top:16px;padding:6px 12px;border-radius:999px;background:rgba(11,27,51,.66);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#F4F7FB;font-size:13px;font-weight:500;pointer-events:none}
.fchips{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 0;padding:0}
.fchips li{padding:7px 13px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);font-size:13px;color:rgba(244,247,251,.86)}
.fo-text h2{margin:14px 0 20px}
.fo-lead{font-size:19px;line-height:1.6;color:rgba(244,247,251,.72)}
.fo-lead strong{color:#fff;font-weight:600}
.fo-text p + p{margin-top:16px;color:rgba(244,247,251,.8)}
.fo-sign{display:flex;align-items:center;gap:14px;margin-top:28px;padding-top:22px;border-top:1px solid rgba(255,255,255,.14)}
.fo-sign img{width:52px;height:52px;border-radius:50%;object-fit:cover;object-position:50% 16%;box-shadow:0 0 0 3px rgba(255,255,255,.12)}
.fo-sign b{display:block;color:#fff;font-size:16px}
.fo-sign span span{font-size:13.5px;color:rgba(244,247,251,.65)}
@media(max-width:900px){section.founder{padding:84px 0}.fo-grid{grid-template-columns:minmax(0,1fr);gap:40px}}

/* ---------- app-pagina: wat de Quitter Coach doet, met live-kaart ---------- */
.qc-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,450px);gap:56px;align-items:center;margin-top:40px}
.qc-list{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.qc-list li{display:flex;gap:18px;align-items:flex-start;padding:18px 20px;border-radius:18px;background:#fff;border:1px solid rgba(18,52,91,.07);box-shadow:var(--card-shadow)}
.qc-list b{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,#12345B,#2C7BB6);color:#fff;font-family:var(--serif);font-weight:800;box-shadow:0 10px 20px -10px rgba(18,52,91,.6)}
.qc-list h3{font-family:var(--serif);font-weight:800;font-size:18px;letter-spacing:-.015em;margin-bottom:4px}
.qc-list p{font-size:15px;color:var(--dim)}
.feed{background:#fff;border:1px solid rgba(18,52,91,.08);border-radius:24px;box-shadow:0 40px 80px -40px rgba(14,35,64,.45);overflow:hidden}
.feed-top{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid rgba(18,52,91,.07)}
.feed-live{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:14.5px;color:var(--ink)}
.feed-live i{width:8px;height:8px;border-radius:50%;background:#2BB673;animation:ping2 2s ease-out infinite}
.feed-tag{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;color:var(--dim)}
.feed-view{height:256px;overflow:hidden;position:relative}
.feed-view:after{content:"";position:absolute;left:0;right:0;bottom:0;height:38px;background:linear-gradient(180deg,rgba(255,255,255,0),#fff);pointer-events:none}
.feed-list{list-style:none;margin:0;padding:0}
.feed-list li{display:flex;align-items:center;gap:12px;height:64px;padding:0 20px;border-bottom:1px solid rgba(18,52,91,.06);transition:opacity .5s ease}
.fi{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:10px}
.fi svg{width:16px;height:16px}
.fi.g{background:#E3F5EC;color:#1F8A5B}.fi.o{background:#FFF1E3;color:#C96A0E}.fi.b{background:#EAF3FB;color:#2C7BB6}.fi.r{background:#FDECEC;color:#C0392B}
.ft{flex:1;font-size:14.5px;color:var(--ink);line-height:1.35}
.fm{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;color:var(--dim)}
@media(max-width:900px){.qc-grid{grid-template-columns:minmax(0,1fr);gap:32px}}

/* ---------- vaste knop onderin op mobiel ---------- */
.mcta{position:fixed;left:12px;right:12px;bottom:12px;z-index:55;display:none;padding:7px;border-radius:999px;background:rgba(255,255,255,.86);-webkit-backdrop-filter:blur(18px) saturate(180%);backdrop-filter:blur(18px) saturate(180%);border:1px solid rgba(18,52,91,.08);box-shadow:0 18px 40px -16px rgba(14,35,64,.45);transform:translateY(150%);transition:transform .45s cubic-bezier(.22,1,.36,1)}
.mcta .btn{width:100%;justify-content:center;padding:14px 20px}
.mcta .btn[href^="contact.html"]:before{content:"";width:17px;height:17px;flex:none;background:currentColor;-webkit-mask:var(--ico-cal) center/contain no-repeat;mask:var(--ico-cal) center/contain no-repeat}
.mcta.show{transform:none}
@media(max-width:760px){.mcta{display:block}}

/* ---------- formulieren: breed, in stappen ---------- */
section.formsec{padding-top:64px}
form.f.fwide{max-width:none}
section form.f.fsteps{padding:34px 36px 32px}
fieldset.fstep{border:0;margin:0;padding:0;min-width:0}
.fgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 20px}
.fgrid .span2{grid-column:1/-1}
.fgrid label,.fgrid .span2 > label{display:grid;gap:6px;font-size:14px;font-weight:500;color:var(--ink)}
.fchoice{display:grid;gap:10px}
.flabel{font-size:14px;font-weight:500;color:var(--ink)}
.fs-head{list-style:none;display:flex;margin:0 0 28px;padding:0 0 22px;border-bottom:1px solid rgba(18,52,91,.08)}
.fs-head li{flex:1;display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600;color:var(--dim);min-width:0}
.fs-head li:last-child{flex:0 0 auto}
.fs-head li:not(:last-child):after{content:"";flex:1;height:2px;margin:0 14px;border-radius:2px;background:rgba(18,52,91,.10);transition:background-color .3s}
.fs-head li.done:after{background:var(--orange)}
.fs-n{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:#EEF3F9;color:var(--dim);font-family:var(--serif);font-weight:800;font-size:14px;transition:background .3s,color .3s,box-shadow .3s}
.fs-head li.on{color:var(--ink)}
.fs-head li.on .fs-n{background:linear-gradient(135deg,#12345B,#2C7BB6);color:#fff;box-shadow:0 8px 18px -8px rgba(18,52,91,.6)}
.fs-head li.done{color:var(--ink);cursor:pointer}
.fs-head li.done .fs-n{background:var(--orange);color:#12345B}
.fs-t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fs-nav{display:flex;align-items:center;gap:12px;margin-top:28px}
section form.f .fs-nav .btn,section form.f .fs-nav button[type=submit]{width:auto;min-width:160px;height:52px;margin:0}
.fs-nav .fs-next,.fs-nav button[type=submit]{margin-left:auto!important}
.fstep-in{animation:fstepin .45s cubic-bezier(.22,1,.36,1) both}
@keyframes fstepin{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
.fsplit{display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);border-radius:26px;overflow:hidden;background:#fff;border:1px solid rgba(18,52,91,.08);box-shadow:0 40px 80px -46px rgba(14,35,64,.45)}
.fsplit .fside{background:linear-gradient(160deg,#16406D,#0E2340);color:#F4F7FB;padding:40px 34px}
.fsplit .fside h3{color:#fff;font-family:var(--serif);font-weight:800;font-size:20px;letter-spacing:-.015em;margin-bottom:8px}
.fsplit .fside p{color:rgba(244,247,251,.8);font-size:15.5px}
.fsplit .fside .btn.ghost{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.26);color:#F4F7FB}
.fsplit .fside .btn.ghost:hover{background:rgba(255,255,255,.16);color:#fff}
section .fsplit form.f{border:0;border-radius:0;box-shadow:none;margin:0}
.fmeta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:22px}
.fmeta > div{display:flex;gap:14px;align-items:flex-start;padding:20px;border-radius:18px;background:#fff;border:1px solid rgba(18,52,91,.07)}
.fmi{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--acc-org-bg);color:var(--acc-org)}
.fmi svg{width:18px;height:18px}
.fmeta p{font-size:14.5px;color:var(--dim);line-height:1.55}
.fmeta b{color:var(--ink)}
.fsteps:not(.nocal) .calfallback{display:none}
.fsteps.nocal .calnote,.fsteps.nocal .calslot{display:none}
form.f .calfallback{font-size:17px;font-weight:500;color:var(--ink)}
.calnote{margin-top:12px}
.calslot.live{height:700px}
.calslot .calendly-inline-widget{min-width:300px;height:700px}
/* voorbeeld-agenda: alleen in de preview, nooit op de echte site */
.calmock{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:26px;padding:24px;border:1px solid rgba(18,52,91,.08);border-radius:20px;background:#FBFCFE}
.cm-tag{grid-column:1/-1;font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#C96A0E}
.cm-month{display:flex;justify-content:space-between;align-items:center;font-weight:700;margin-bottom:12px;color:var(--ink)}
.cm-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;text-align:center;font-size:13px}
.cm-grid span{padding:4px 0;color:var(--dim);font-size:12px}
.cm-grid button{height:38px;border-radius:10px;border:0;background:none;font:inherit;font-size:14px;color:rgba(18,52,91,.3);padding:0}
.cm-grid button.av{background:#EAF3FB;color:var(--blue);font-weight:600;cursor:pointer}
.cm-grid button.sel{background:var(--navy);color:#fff}
.cm-times{display:grid;gap:8px;align-content:start}
.cm-times p{font-weight:600;color:var(--ink);margin-bottom:4px}
.cm-times button{height:46px;border-radius:12px;border:1px solid rgba(18,52,91,.14);background:#fff;font:inherit;font-weight:600;color:var(--ink);cursor:pointer;transition:border-color .2s,color .2s}
.cm-times button:hover{border-color:var(--blue);color:var(--blue)}
.cm-times button.sel{background:var(--orange);border-color:var(--orange);color:#12345B}
.cm-note{grid-column:1/-1;font-size:13px;color:var(--dim)}
/* keuzekaarten (sessie en webinar-datum) */
.sessies,.datums{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:8px}
.dgroep{display:grid;gap:10px;align-content:start}
.dgroep .groepkop{margin:0 0 2px}
form.f label.sessiekeuze{display:flex;gap:14px;align-items:flex-start;cursor:pointer;border:1px solid rgba(18,52,91,.14);border-radius:18px;padding:18px 20px;background:#fff;transition:border-color .2s,background-color .2s}
form.f label.sessiekeuze:hover{border-color:var(--blue)}
form.f label.sessiekeuze:has(input:checked){border-color:var(--orange);background:var(--peach)}
form.f label.sessiekeuze input[type=radio]{width:18px;height:18px;flex:none;margin:3px 0 0;padding:0;border:0;background:none;border-radius:50%;accent-color:var(--orange);box-shadow:none}
.sessiekeuze .dag{display:block;font-weight:600;font-size:17px;color:var(--ink)}
.sessiekeuze .tijd{font-size:14px;color:var(--dim)}
.fwide .instrumenten{grid-template-columns:repeat(4,minmax(0,1fr))}
.fwide .fstep > .veldkop{margin-bottom:6px}
.fwide .fstep > div + div,.fwide .fstep > .fgrid{margin-top:14px}
@media(max-width:900px){.fsplit{grid-template-columns:minmax(0,1fr)}.fwide .instrumenten{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){
  .fgrid,.sessies,.datums{grid-template-columns:minmax(0,1fr)}
  .fs-t{display:none}.fs-head li.on .fs-t{display:inline}
  section form.f.fsteps{padding:24px 20px}
  .fmeta{grid-template-columns:minmax(0,1fr)}
  .calmock{grid-template-columns:minmax(0,1fr)}
  section form.f .fs-nav .btn,section form.f .fs-nav button[type=submit]{min-width:0;flex:1}
}

@media(prefers-reduced-motion:reduce){
  .zin,.fstep-in{transition:none;animation:none}
  .fplay-in:before,.feed-live i{animation:none}
  .mcta{transition:none}
}
.fs-nav [hidden],form.f.stepping [hidden]{display:none!important}
.fsplit form.f{max-width:none}
.sgrid > div > span{overflow-wrap:anywhere;-webkit-hyphens:auto;hyphens:auto}
.feed-list li{height:auto;min-height:64px;padding:12px 20px}
@media(max-width:700px){
  .fs-head li.on{flex:0 0 auto}
  .fs-head li.on .fs-t{display:inline;overflow:visible}
  .fs-head li.on:after{content:none}
  .fs-head li.on{margin-right:14px}
}

/* ---------- v4.3: app-wachtlijst ---------- */
.soon{display:inline-flex;align-items:center;gap:10px;margin:4px 0 0;padding:8px 16px 8px 13px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);font-size:13.5px;font-weight:500;line-height:1.3;color:rgba(244,247,251,.92);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.soon i,.wl-dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--orange);animation:wlpulse 2.4s ease-out infinite}
@keyframes wlpulse{0%{box-shadow:0 0 0 0 rgba(242,140,40,.6)}70%{box-shadow:0 0 0 10px rgba(242,140,40,0)}100%{box-shadow:0 0 0 0 rgba(242,140,40,0)}}
.soon.lt{background:var(--peach);border-color:rgba(242,140,40,.28);color:#9A4F08;margin:0 0 12px;-webkit-backdrop-filter:none;backdrop-filter:none}
section.wlsec{background:#F1F5FA;border-top:0;padding-top:8px}
.fsplit.wl{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
.wl .fside{position:relative;overflow:hidden;padding:48px 44px;display:flex;flex-direction:column;justify-content:flex-start;min-height:430px}
.wl .fside .soon{align-self:flex-start;margin:0}
.wl .fside h2{color:#fff;font-size:clamp(30px,3.2vw,42px);margin:18px 0 12px}
.wl .wl-txt,.wl .wl-count{max-width:calc(100% - 222px)}
.wl-count{display:flex;align-items:center;gap:12px;margin-top:24px;font-size:15px;font-weight:600;color:#fff!important}
.wl .wl-count{margin-top:auto;padding-top:24px}
.wl-phone{position:absolute;right:38px;top:232px;width:190px;height:auto;border-radius:30px;transform:rotate(6deg);box-shadow:0 30px 60px -20px rgba(0,0,0,.55);pointer-events:none}
section .fsplit form.wlform{display:flex;flex-direction:column;justify-content:center;gap:18px;padding:48px 44px}
form.wlform .opt{font-weight:400;color:var(--dim)}
section form.wlform button[type=submit]{margin-top:2px}
.wl-fine{font-size:13.5px;color:var(--dim);line-height:1.5}
.wl-fine a{color:inherit}
.wl-login{font-size:14.5px;color:var(--dim);border-top:1px solid rgba(18,52,91,.08);padding-top:16px}
.wl-login a{color:var(--blue);font-weight:600;text-decoration:none;white-space:nowrap}
.wl-login a:hover{text-decoration:underline}
.hero .soon{margin-top:2px}
@media(max-width:1080px){.wl-phone{display:none}.wl .wl-txt,.wl .wl-count{max-width:none}.wl .fside{min-height:0;justify-content:center}.wl .wl-count{margin-top:0}}
@media(max-width:900px){.fsplit.wl{grid-template-columns:minmax(0,1fr)}}
@media(max-width:700px){.wl .fside{padding:32px 22px}section .fsplit form.wlform{padding:28px 22px}}
@media(prefers-reduced-motion:reduce){.soon i,.wl-dot{animation:none}}

/* ---------- v4.5: Over als organisatie ---------- */
.ofacts{list-style:none;margin:34px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid rgba(244,247,251,.16)}
.ofacts li{padding:18px 22px 0 0;margin-right:22px;border-right:1px solid rgba(244,247,251,.12)}
.ofacts li:last-child{border-right:0;margin-right:0}
.ofacts b{display:block;font-family:var(--serif);font-weight:800;font-size:22px;letter-spacing:-.01em;color:#fff}
.ofacts span{display:block;margin-top:4px;font-size:14px;line-height:1.45;color:rgba(244,247,251,.74)}
section.huis{background:linear-gradient(180deg,#FBFCFE,#F1F5FA)}
.hgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:38px}
.hcard{display:flex;flex-direction:column;gap:10px;padding:28px 26px 26px;background:#fff;border:1px solid rgba(18,52,91,.07);border-radius:22px;box-shadow:var(--card-shadow);text-decoration:none;color:inherit;transition:transform .2s,box-shadow .2s,border-color .2s}
.hcard:hover{transform:translateY(-4px);border-color:rgba(18,52,91,.12);box-shadow:0 1px 2px rgba(14,35,64,.05),0 30px 56px -28px rgba(14,35,64,.38)}
.hico{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:var(--acc-org-bg);color:var(--acc-org);margin-bottom:6px}
.hico svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hcard h3{font-size:20px}
.hcard p{flex:1;font-size:15px;line-height:1.55;color:var(--dim)}
.hgo{margin-top:4px;font-size:14px;font-weight:600;color:var(--blue)}
.hgo:after{content:" \2192"}
.hcard:hover .hgo{color:var(--ink)}
.grond .eyebrow + h2{margin-top:8px}
.creds{list-style:none;padding:0;margin:22px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.creds li{padding:7px 14px;border-radius:999px;background:#fff;border:1px solid rgba(18,52,91,.10);font-size:13.5px;font-weight:600;color:var(--ink)}
.gl-photo{width:100%;max-width:420px;height:auto;justify-self:end;border-radius:26px;box-shadow:0 34px 70px -38px rgba(14,35,64,.55)}
section.keyband{overflow:hidden;background:radial-gradient(120% 90% at 100% 0%,#16406D 0%,#0E2340 60%)}
.kb{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:56px;align-items:center}
.kb h2{color:#fff;margin-top:12px;max-width:16em}
.kfacts{list-style:none;padding:0;margin:26px 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.kfacts li{padding:11px 16px;border-radius:14px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14)}
.kfacts b{display:block;font-size:15px;font-weight:700;color:#fff}
.kfacts span{display:block;font-size:13px;color:rgba(244,247,251,.72)}
.kb-photo{margin:0;width:100%;max-width:420px;justify-self:end;border-radius:26px;overflow:hidden;box-shadow:0 40px 80px -30px rgba(0,0,0,.6)}
.kb-photo img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 18%}
.ogrid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:26px;margin-top:34px;align-items:start}
.mlist{list-style:none;margin:0;padding:6px 26px;background:#fff;border:1px solid rgba(18,52,91,.07);border-radius:22px;box-shadow:var(--card-shadow)}
.mlist li{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:15px 0;border-bottom:1px solid rgba(18,52,91,.08)}
.mlist li:last-child{border-bottom:0}
.mlist span{font-size:15.5px;font-weight:600;color:var(--ink)}
.mlist a{font-size:15px;color:var(--blue);text-decoration:none;text-align:right;overflow-wrap:anywhere}
.mlist a:hover{text-decoration:underline}
.ocomp{padding:28px 28px 30px;border-radius:22px;background:linear-gradient(160deg,#16406D,#0E2340);color:#F4F7FB;box-shadow:0 34px 70px -40px rgba(14,35,64,.55)}
.ocomp h3{font-size:18px;color:#fff}
.ocomp h3:not(:first-child){margin-top:26px}
.ocomp p{margin-top:10px;font-size:15px;line-height:1.55;color:rgba(244,247,251,.8)}
.ocomp p b{color:#fff}
@media(max-width:1000px){.ofacts{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:6px}.ofacts li:nth-child(2){border-right:0;margin-right:0}}
@media(max-width:900px){.hgrid{grid-template-columns:repeat(2,minmax(0,1fr))}.kb,.ogrid{grid-template-columns:minmax(0,1fr)}.kb{gap:40px}.kb-photo,.gl-photo{justify-self:start;max-width:360px}}
@media(max-width:600px){.kfacts{grid-template-columns:minmax(0,1fr)}.hgrid{grid-template-columns:minmax(0,1fr)}.mlist{padding:4px 20px}.mlist li{flex-direction:column;align-items:flex-start;gap:2px}.mlist a{text-align:left}.ofacts li{padding-right:12px;margin-right:12px}}

/* ---------- v4.7: Calendly pas na toestemming ---------- */
.calgate{border:1px solid var(--line);border-radius:16px;padding:22px 24px;background:#fff}
.calgate p{margin:0 0 16px;max-width:60ch}
.calgate-k{display:flex;flex-wrap:wrap;gap:10px}

/* ---------- Stappenbalk op mobiel (3 oktober 2026, formulier-stappen-mobiel.patch) ----------
   Met vier stappen en een lange titel ("Factuurgegevens") was de balk breder dan de witte kaart,
   en schoof het hele formulier (velden en knoppen) rechts naar buiten. Nu rekt de balk het
   formulier niet meer op, wordt de titel van de actieve stap zo nodig afgekort, en houden de
   andere stappen hun bolletje. Alleen tot 700 pixel; daarboven verandert er niets. */
@media(max-width:700px){.fs-head{min-width:0}.fs-head li{min-width:auto}.fs-head li.on{flex:0 1 auto;min-width:0}.fs-head li.on .fs-t{overflow:hidden;text-overflow:ellipsis}}