/* ==========================================================================
   MisterSocials — rustige, lichte stijl naar model van mediamaatje.nl
   Wit, ronde hoeken, één letterfamilie (Poppins), geel alleen als accent.
   ========================================================================== */

@font-face{font-family:"Poppins";src:url("poppins-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Poppins";src:url("poppins-latin-500-normal.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Poppins";src:url("poppins-latin-600-normal.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Poppins";src:url("poppins-latin-700-normal.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

:root{
  --tekst:    #1B1B1B;
  --tekst-2:  #55554F;
  --wit:      #FFFFFF;
  --veld:     #F7F7F4;      /* lichte wisselsectie */
  --rand:     #EAEAE5;
  --geel:     #FFD400;      /* alleen accent */
  --geel-bg:  #FFF7CC;      /* zachte gele tint voor badges */
  --wa:       #23B855;      /* whatsapp-groen */
  --zwart:    #1B1B1B;

  --max: 1120px;
  --straal: 20px;
  --straal-kn: 999px;
  --schaduw: 0 10px 30px rgba(27,27,27,.06);

  --f: "Poppins","Helvetica Neue",Arial,sans-serif;
}

*{box-sizing:border-box}
[id]{scroll-margin-top:96px}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--wit); color:var(--tekst);
  font-family:var(--f); font-size:16.5px; line-height:1.7; font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;   /* vangnet: absolute elementen mogen de pagina nooit verbreden */
}
img{max-width:100%; display:block}
a{color:inherit}

/* ---------- structuur ---------- */
.wrap{width:100%; max-width:var(--max); margin:0 auto; padding:0 24px}
section{position:relative}
.sec{padding:88px 0}
.sec--kort{padding:64px 0}
.op-papier, .op-geel, .op-zwart2{background:var(--veld); color:var(--tekst)}

.eyebrow{
  display:block; font-size:13px; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:#9A9A90; margin:0 0 14px;
}
.eyebrow::after,.eyebrow::before{display:none}

/* ---------- typografie ---------- */
h1,h2,h3,h4{font-family:var(--f); font-weight:700; margin:0; text-wrap:balance; line-height:1.15; letter-spacing:-.02em; text-transform:none}
.skew{display:inline; transform:none}
h1{font-size:clamp(2.1rem, 4.6vw, 3.3rem)}
h2{font-size:clamp(1.7rem, 3.2vw, 2.3rem)}
h3{font-size:1.12rem; line-height:1.35}
p{margin:0 0 1.1em}
.lead{font-size:clamp(1rem,1.5vw,1.15rem); line-height:1.7; color:var(--tekst-2); max-width:62ch}
.op-papier .lead, .op-geel .lead{color:var(--tekst-2)}
.klein{font-size:.88rem; color:#8B8B82}
.op-papier .klein{color:#8B8B82}
.markeer{background:linear-gradient(transparent 62%, var(--geel) 62%); color:inherit; padding:0 .08em}

/* ---------- knoppen ---------- */
.knoppen{display:flex; flex-wrap:wrap; gap:12px; align-items:center}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--f); font-weight:600; font-size:.95rem;
  padding:14px 28px; border:1.5px solid transparent; border-radius:var(--straal-kn);
  text-decoration:none; cursor:pointer; transition:background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
  white-space:nowrap;
}
.btn:hover{box-shadow:var(--schaduw)}
.btn:focus-visible{outline:3px solid var(--geel); outline-offset:3px}
.btn--geel,.btn--zwart{background:var(--zwart); color:#fff}
.btn--geel:hover,.btn--zwart:hover{background:#333; color:#fff}
.btn--lijn{background:#fff; color:var(--tekst); border-color:#D9D9D2}
.btn--lijn:hover{border-color:var(--tekst)}
.op-papier .btn--lijn, .op-geel .btn--lijn{color:var(--tekst); border-color:#D9D9D2; background:#fff}
a.btn[href*="wa.me"]{background:var(--wa); color:#fff; border-color:transparent}
a.btn[href*="wa.me"]:hover{background:#1EA34B; color:#fff}
.btn svg{width:18px; height:18px; flex:none}

/* ---------- navigatie ---------- */
.nav{position:sticky; top:0; z-index:60; background:rgba(255,255,255,.92); backdrop-filter:blur(10px); border-bottom:1px solid var(--rand)}
.nav__in{display:flex; align-items:center; gap:28px; height:76px}
.nav__logo img{height:34px; width:auto}
.nav__links{display:flex; gap:26px; margin-left:auto; font-size:.93rem; font-weight:500}
.nav__links a{text-decoration:none; color:var(--tekst-2); transition:color .14s}
.nav__links a:hover{color:var(--tekst)}
.nav__cta{display:flex; gap:10px}
.nav__cta .btn{padding:11px 20px; font-size:.88rem}
.nav__menu{display:none; margin-left:auto; position:relative}
.nav__menu summary{list-style:none; cursor:pointer; display:flex; flex-direction:column; gap:5px; padding:12px 10px}
.nav__menu summary::-webkit-details-marker{display:none}
.nav__menu summary span{display:block; width:22px; height:2px; background:var(--tekst); border-radius:2px}
.nav__menu summary:focus-visible{outline:2px solid var(--geel); outline-offset:2px}
.nav__menu-paneel{
  position:absolute; left:0; top:calc(100% + 12px); z-index:70;
  background:#fff; border:1px solid var(--rand); border-radius:16px; min-width:220px;
  display:flex; flex-direction:column; overflow:hidden; box-shadow:var(--schaduw);
}
.nav__menu-paneel a{padding:14px 20px; text-decoration:none; color:var(--tekst); font-weight:500; font-size:.95rem; border-bottom:1px solid var(--rand)}
.nav__menu-paneel a:last-child{border-bottom:0; font-weight:600}
.nav__menu-paneel a:hover{background:var(--veld)}
@media(max-width:980px){ .nav__links{display:none} .nav__menu{display:block} .nav__cta{margin-left:0} }
@media(max-width:560px){ .tel-btn .tel-btn__tekst{display:none} .tel-btn{padding:11px 13px} }
@media(max-width:420px){
  .wrap{padding:0 18px}
  .nav__in{gap:12px}
  .nav__cta .btn{padding:11px 12px}
  .nav__cta a.btn[href*="wa.me"]{font-size:0; gap:0}
  .nav__cta a.btn[href*="wa.me"] svg{width:20px; height:20px}
}
@media(max-width:560px){
  .nav__menu-paneel{position:fixed; left:14px; right:14px; top:80px; min-width:0}
}

/* ---------- hero ---------- */
.hero{padding:52px 0 60px; overflow:visible; background:#FBF6E6; border-bottom:1px solid rgba(27,27,27,.05)}
.hero::before{display:none}
.hero__midden{display:flex; flex-direction:column; align-items:center}
.hero__in{max-width:760px; text-align:center; display:flex; flex-direction:column; align-items:center}
.hero h1{margin-bottom:18px; max-width:none}
.hero h1 .regel{display:inline}
.hero .lead{margin:0 auto 20px; max-width:54ch}
.hero__usps{display:flex; flex-direction:column; gap:7px; margin-bottom:26px; font-size:.95rem; font-weight:500; color:var(--tekst-2)}
.hero .knoppen{justify-content:center}
.tekstlink{
  display:inline-block; margin-top:14px; font-size:.92rem; font-weight:600; color:var(--tekst);
  text-decoration:underline; text-underline-offset:4px; text-decoration-color:var(--geel); text-decoration-thickness:2px;
}
.tekstlink:hover{text-decoration-color:var(--tekst)}

/* publiek-schakel */
.schakel{display:inline-flex; background:#fff; border:1px solid rgba(27,27,27,.08); border-radius:999px; padding:3px; gap:2px; margin-bottom:22px}
.schakel__knop{
  font-family:var(--f); font-weight:600; font-size:.84rem; color:var(--tekst-2);
  padding:8px 16px; border:0; border-radius:999px; background:transparent; cursor:pointer;
  transition:background .15s, color .15s;
}
.schakel__knop:hover{color:var(--tekst)}
.schakel__knop.actief{background:var(--tekst); color:#fff}
.schakel__knop:focus-visible{outline:2px solid var(--geel); outline-offset:2px}
@media(max-width:400px){ .schakel__knop{padding:8px 12px; font-size:.8rem} }

/* telefoon-mock */
.tel{width:min(290px, 74vw); margin:48px auto 0}
@media(max-width:900px){ .tel{width:min(248px, 68vw)} }
.tel__scherm{
  position:relative; aspect-ratio:9/18.5; border-radius:42px; overflow:hidden;
  border:9px solid #141414; box-shadow:0 34px 70px rgba(27,27,27,.28);
}
.tel__notch{position:absolute; top:10px; left:50%; transform:translateX(-50%); width:86px; height:22px; background:#141414; border-radius:12px}
.tel__app{position:absolute; top:16px; left:18px; color:#fff; font-weight:700; font-size:1rem; text-shadow:0 1px 8px rgba(0,0,0,.35)}
.tel__acties{
  position:absolute; right:12px; bottom:96px; display:flex; flex-direction:column; gap:16px;
  color:#fff; text-align:center; font-size:1.15rem; text-shadow:0 1px 8px rgba(0,0,0,.4);
}
.tel__acties span{display:flex; flex-direction:column; gap:2px; line-height:1}
.tel__acties b{font-size:.68rem; font-weight:600}
.tel__voet{
  position:absolute; left:0; right:0; bottom:0; padding:52px 62px 24px 16px;
  background:linear-gradient(transparent, rgba(0,0,0,.75) 70%); color:#fff;
}
.tel__voet b{display:block; font-weight:700; font-size:.9rem; margin-bottom:4px}
.tel__voet span{display:block; font-size:.8rem; line-height:1.45; color:#EDEDE8}
.tel__balk{position:absolute; left:14px; right:14px; bottom:10px; height:3px; background:rgba(255,255,255,.3); border-radius:2px}
.tel__balk i{display:block; width:42%; height:100%; background:var(--geel); border-radius:2px}
.anim .tel__balk i{animation:telbalk 6s linear infinite}
@keyframes telbalk{from{width:0} to{width:100%}}

/* cijferbalk */
.cijfers{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:52px; border:0; background:none}
.cijfers div{background:#fff; border:1px solid rgba(27,27,27,.06); border-radius:var(--straal); padding:24px 22px}
.cijfers b{display:block; font-weight:700; font-size:clamp(1.4rem,2.6vw,1.9rem); color:var(--tekst); line-height:1.1}
.cijfers span{display:block; margin-top:6px; font-size:.85rem; color:var(--tekst-2); line-height:1.5}
@media(max-width:760px){ .cijfers{grid-template-columns:repeat(2,1fr)} }

/* ---------- reels / werk ---------- */
.werk-sec{padding:64px 0 76px; background:var(--wit)}
.werk-sec .eyebrow{margin-bottom:24px}
.reels{display:grid; grid-template-columns:repeat(5,1fr); gap:16px}
.reel{position:relative; aspect-ratio:9/16; background:#EFEFEA; overflow:hidden; border:0; border-radius:var(--straal); box-shadow:var(--schaduw)}
.reel:nth-child(odd){transform:none}
.reel__poster{position:absolute; inset:0}
.reel__poster::after{display:none}
.reel__duur{display:none}
.reel__tag{position:absolute; left:12px; top:12px; font-size:11px; font-weight:600; background:#fff; color:var(--tekst); padding:5px 11px; border-radius:999px}
.reel__voet{position:absolute; left:0; right:0; bottom:0; padding:16px 14px; background:linear-gradient(transparent, rgba(0,0,0,.72) 60%); color:#fff}
.reel__voet b{display:block; font-weight:600; font-size:.95rem}
.reel__voet span{font-size:.8rem; color:#E8E8E2}
@media(max-width:900px){ .reels{grid-template-columns:repeat(3,1fr)} .reel:nth-child(n+4){display:none} }
@media(max-width:520px){ .reels{grid-template-columns:repeat(2,1fr)} .reel:nth-child(n+3){display:none} }

/* ---------- kaarten ---------- */
.grid{display:grid; gap:18px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:940px){ .g3,.g4{grid-template-columns:repeat(2,1fr)} }
@media(max-width:620px){ .g2,.g3,.g4{grid-template-columns:1fr} }

.kaart{background:#fff; border:1px solid var(--rand); border-radius:var(--straal); padding:28px 26px 30px; display:flex; flex-direction:column; gap:10px; box-shadow:var(--schaduw)}
.kaart__nr{font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:#9A9A90}
.kaart p{margin:0; color:var(--tekst-2); font-size:.95rem; line-height:1.65}
.kaart ul{margin:6px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:8px; font-size:.9rem; color:var(--tekst-2)}
.kaart ul li{padding-left:24px; position:relative}
.kaart ul li::before{content:"✓"; position:absolute; left:0; top:0; width:auto; height:auto; background:none; color:#B99400; font-weight:700}
.op-papier .kaart{background:#fff; border-color:var(--rand)}
.op-papier .kaart p, .op-papier .kaart ul{color:var(--tekst-2)}
.op-papier .kaart__nr{color:#9A9A90}

/* stappen */
.stap{display:grid; grid-template-columns:64px 1fr; gap:22px; padding:24px 0; border-top:1px solid var(--rand)}
.stap:last-child{border-bottom:1px solid var(--rand)}
.stap__nr{font-weight:700; font-size:1.15rem; color:var(--tekst); background:var(--geel); border-radius:50%; width:46px; height:46px; display:flex; align-items:center; justify-content:center; transform:none}
.stap h3{margin-bottom:6px}
.stap p{margin:0; color:var(--tekst-2); max-width:62ch}
.op-papier .stap{border-color:var(--rand)}
.op-papier .stap:last-child{border-bottom-color:var(--rand)}
.op-papier .stap p{color:var(--tekst-2)}
.op-papier .stap__nr{color:var(--tekst)}
@media(max-width:620px){ .stap{grid-template-columns:54px 1fr; gap:16px} .stap__nr{width:40px; height:40px; font-size:1rem} }

/* vinkjeslijst */
.vinkjes{list-style:none; margin:22px 0 0; padding:0; display:flex; flex-direction:column; gap:12px; font-size:.95rem; color:var(--tekst-2)}
.vinkjes li{padding-left:30px; position:relative; line-height:1.6}
.vinkjes li::before{content:"✓"; position:absolute; left:0; top:2px; color:var(--tekst); font-weight:700; background:var(--geel); border-radius:50%; width:20px; height:20px; display:inline-flex; align-items:center; justify-content:center; font-size:11px}

/* dashboard-mock */
.dash{background:#fff; border:1px solid var(--rand); border-radius:var(--straal); box-shadow:0 20px 50px rgba(27,27,27,.1); padding:22px; display:flex; flex-direction:column; gap:12px}
.dash__kop{display:flex; align-items:center; justify-content:space-between; gap:12px; padding-bottom:14px; border-bottom:1px solid var(--rand)}
.dash__titel{font-weight:700; font-size:.98rem}
.dash__badge{font-size:.75rem; font-weight:600; background:var(--geel-bg); color:var(--tekst); padding:5px 11px; border-radius:999px; white-space:nowrap}
.dash__tabs{display:flex; gap:8px; padding-bottom:2px}
.dash__tab{
  font-family:var(--f); font-weight:600; font-size:.85rem; letter-spacing:0;
  padding:8px 18px; border:1px solid var(--rand); border-radius:999px; background:#fff;
  color:var(--tekst-2); cursor:pointer; transition:background .15s, color .15s, border-color .15s;
}
.dash__tab:hover{border-color:var(--tekst)}
.dash__tab.actief{background:var(--tekst); color:#fff; border-color:var(--tekst)}
.dash__tab:focus-visible{outline:2px solid var(--geel); outline-offset:2px}
/* voortgang in de actieve tab zolang de tabs vanzelf doorlopen */
.dash__tab{position:relative; overflow:hidden}
.dash--auto .dash__tab.actief::after{
  content:""; position:absolute; left:0; bottom:0; height:2.5px; width:100%;
  background:var(--geel); transform-origin:left; transform:scaleX(0);
  animation:tabloop 7s linear forwards;
}
@keyframes tabloop{to{transform:scaleX(1)}}
@media (prefers-reduced-motion: reduce){ .dash--auto .dash__tab.actief::after{animation:none; display:none} }
.dash__paneel{display:flex; flex-direction:column; gap:0}
.dash__paneel[hidden]{display:none}
.dash__stat{padding:12px 0}
.dash__stat + .dash__stat{border-top:1px solid var(--veld)}
.dash__statkop{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px}
.dash__statkop b{font-weight:600; font-size:.88rem}
.dash__statkop span{font-weight:700; font-size:.95rem; font-variant-numeric:tabular-nums}
.dash__plus{font-style:normal; font-weight:600; font-size:.75rem; color:#1E7C42; margin-left:6px}
.dash__balk{height:6px; background:var(--veld); border-radius:3px; overflow:hidden}
.dash__balk span{display:block; height:100%; background:var(--geel); border-radius:3px}
.dash__les{
  width:44px; height:44px; border-radius:10px; background:var(--veld);
  display:inline-flex; align-items:center; justify-content:center;
  font-weight:700; font-size:.8rem; color:var(--tekst-2);
}
.dash__rij--les{grid-template-columns:44px 1fr auto}
.dash__rij{display:grid; grid-template-columns:44px 1fr auto; gap:14px; align-items:center; padding:10px 0}
.dash__rij + .dash__rij{border-top:1px solid var(--veld)}
.dash__thumb{width:44px; aspect-ratio:9/14; border-radius:8px; display:block}
.dash__rij b{display:block; font-weight:600; font-size:.88rem; line-height:1.3}
.dash__rij div span{font-size:.78rem; color:#8B8B82}
.dash__status{font-size:.75rem; font-weight:600; color:var(--tekst-2); border:1px solid var(--rand); padding:5px 11px; border-radius:999px; white-space:nowrap}
.dash__status--wacht{background:var(--geel); border-color:var(--geel); color:var(--tekst)}
.dash__status--live{background:#EAF7EE; border-color:#EAF7EE; color:#1E7C42}
.dash__voet{margin-top:4px; padding-top:14px; border-top:1px solid var(--rand); font-size:.8rem; color:#8B8B82}
@media(max-width:620px){ .dash__rij{grid-template-columns:36px 1fr auto; gap:10px} .dash__thumb{width:36px} }

/* regiotarief-balk */
.regiobalk{margin-top:28px; background:var(--geel-bg); border-radius:16px; padding:22px 26px; display:flex; flex-wrap:wrap; gap:4px 18px; align-items:baseline}
.regiobalk b{font-weight:700; font-size:.98rem; white-space:nowrap}
.regiobalk p{margin:0; font-size:.92rem; color:#55524A; flex:1; min-width:260px}

/* branches */
.branches{display:flex; flex-wrap:wrap; gap:10px; margin-top:24px}
.branche{font-size:.85rem; font-weight:500; padding:9px 16px; border:1px solid #DDDDD6; border-radius:999px; background:#fff; text-transform:none; letter-spacing:0}

/* ---------- prijzen ---------- */
.prijzen{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; align-items:start}
@media(max-width:940px){ .prijzen{grid-template-columns:1fr; max-width:520px; margin:0 auto} }
.pakket{background:#fff; border:1px solid var(--rand); border-radius:var(--straal); padding:30px 28px 32px; display:flex; flex-direction:column; height:100%; box-shadow:var(--schaduw)}
.pakket--top{background:#fff; color:var(--tekst); border:2px solid var(--tekst)}
.pakket__label{font-size:11.5px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:#9A9A90; margin-bottom:12px}
.pakket--top .pakket__label{color:var(--tekst); background:var(--geel); align-self:flex-start; padding:5px 12px; border-radius:999px}
.pakket h3{font-weight:700; font-size:1.25rem}
.pakket__prijs{font-weight:700; font-size:2.3rem; line-height:1; margin:14px 0 4px; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.pakket__pm{font-size:.82rem; color:#8B8B82; margin-bottom:20px; text-transform:none; letter-spacing:0}
.pakket--top .pakket__pm{color:#8B8B82}
.pakket ul{list-style:none; margin:0 0 24px; padding:0; display:flex; flex-direction:column; gap:10px; font-size:.92rem; color:var(--tekst-2); flex:1}
.pakket--top ul{color:var(--tekst-2)}
.pakket ul li{padding-left:26px; position:relative; line-height:1.55}
.pakket ul li::before{content:"✓"; position:absolute; left:0; top:0; color:#B99400; font-weight:800}
.pakket--top ul li::before{color:#B99400}
.pakket .btn{justify-content:center; width:100%}
.pakket__voet{margin-top:12px; font-size:.8rem; color:#8B8B82; text-align:center}
.pakket--top .pakket__voet{color:#8B8B82}

/* ---------- wel/niet ---------- */
.welniet{display:grid; grid-template-columns:1fr 1fr; gap:18px; border:0; background:none}
.welniet > div{padding:30px 28px; background:#fff; border:1px solid var(--rand); border-radius:var(--straal); box-shadow:var(--schaduw)}
.welniet > div + div{border-left:1px solid var(--rand)}
.welniet h3{font-weight:700; font-size:1.02rem; margin-bottom:16px; text-transform:none; letter-spacing:0}
.welniet ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; font-size:.93rem; color:var(--tekst-2)}
.welniet li{padding-left:26px; position:relative}
.welniet li::before{position:absolute; left:0; top:0; font-weight:700}
.wel li::before{content:"✓"; color:#B99400}
.niet li::before{content:"✕"; color:#C4C4BC}
@media(max-width:700px){ .welniet{grid-template-columns:1fr} .welniet > div + div{border-left:1px solid var(--rand); border-top:1px solid var(--rand)} }

/* ---------- contentcheck ---------- */
.checkkaart{
  background:#fff; border:1px solid var(--rand); border-radius:var(--straal);
  box-shadow:0 20px 50px rgba(27,27,27,.08); padding:34px 36px 30px; margin-top:40px;
  position:relative;
}
@media(max-width:560px){ .checkkaart{padding:24px 20px 22px} }
.check__kop{display:flex; justify-content:space-between; align-items:center; margin-bottom:22px}
.check__stap{font-size:.8rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:#9A9A90}
.check__dots{display:flex; gap:6px}
.check__dots i{width:22px; height:5px; border-radius:3px; background:var(--veld); transition:background .2s}
.check__dots i.actief{background:var(--geel)}
.check__paneel h3{font-size:1.35rem; font-weight:700; margin:0 0 18px; letter-spacing:-.01em}
.check__opties{display:flex; flex-direction:column; gap:10px}
.check__optie{
  display:flex; flex-direction:column; gap:2px; text-align:left; width:100%;
  padding:16px 20px; background:#fff; border:1px solid var(--rand); border-radius:14px;
  font-family:var(--f); color:var(--tekst); cursor:pointer;
  transition:border-color .15s, background .15s, transform .15s;
}
.check__optie:hover{border-color:var(--tekst); transform:translateY(-1px)}
.check__optie:focus-visible{outline:2px solid var(--geel); outline-offset:2px}
.check__optie b{font-weight:700; font-size:1rem}
.check__optie span{font-size:.88rem; color:#8B8B82}
.check__terug{
  margin-top:18px; background:none; border:0; font-family:var(--f); font-weight:600;
  font-size:.88rem; color:#8B8B82; cursor:pointer; padding:6px 0;
}
.check__terug:hover{color:var(--tekst)}
.check__form{display:flex; flex-direction:column; gap:14px; max-width:440px}
.check__veld{display:flex; flex-direction:column; gap:6px}
.check__veld span{font-size:.82rem; font-weight:600; color:var(--tekst-2)}
.check__veld input{
  font-family:var(--f); font-size:1rem; padding:13px 16px;
  border:1px solid var(--rand); border-radius:12px; background:#fff; color:var(--tekst);
  transition:border-color .15s;
}
.check__veld input:focus{outline:none; border-color:var(--tekst)}
.check__veld input::placeholder{color:#B5B5AC}
.check__fout{margin:0; font-size:.85rem; font-weight:600; color:#B3261E}
.check__privacy{margin:2px 0 0; font-size:.8rem; color:#9A9A90; line-height:1.5}
.check__laden{padding:6px 0 10px}
.check__stappen{display:flex; flex-direction:column; gap:16px; margin-top:20px; max-width:440px}
.check__laadstap{display:flex; align-items:center; gap:14px; font-size:.95rem; color:#B5B5AC; transition:color .25s}
.check__laadstap i{
  width:22px; height:22px; border-radius:50%; flex:none; position:relative;
  border:2px solid var(--rand); transition:border-color .25s, background .25s;
}
.check__laadstap.bezig{color:var(--tekst)}
.check__laadstap.bezig i{border-color:var(--geel); border-top-color:transparent; animation:tol .7s linear infinite}
.check__laadstap.af{color:var(--tekst)}
.check__laadstap.af i{border-color:var(--geel); background:var(--geel); animation:none}
.check__laadstap.af i::after{
  content:""; position:absolute; left:6px; top:2.5px; width:5px; height:10px;
  border:solid var(--tekst); border-width:0 2px 2px 0; transform:rotate(42deg);
}
@keyframes tol{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){ .check__laadstap.bezig i{animation:none} }

.check__label{font-size:.8rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:#B98F00; margin:0 0 8px}
.check__resultaat h3{font-size:1.45rem; margin-bottom:10px}
.check__accent{font-size:.98rem; color:var(--tekst-2); margin:0 0 22px; max-width:62ch}
.check__blokken{display:grid; grid-template-columns:1fr 1fr; gap:14px}
@media(max-width:640px){ .check__blokken{grid-template-columns:1fr} }
.check__blok{background:var(--veld); border-radius:14px; padding:18px 20px}
.check__blok h4{margin:0 0 10px; font-size:.8rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#7A776C}
.check__blok ul,.check__blok ol{margin:0; padding-left:0; list-style:none; display:flex; flex-direction:column; gap:8px; font-size:.9rem; color:var(--tekst-2)}
.check__blok ul li{padding-left:22px; position:relative}
.check__blok ul li::before{content:"✓"; position:absolute; left:0; font-weight:700; color:var(--tekst)}
.check__blok ol{counter-reset:s}
.check__blok ol li{padding-left:26px; position:relative; counter-increment:s}
.check__blok ol li::before{content:counter(s); position:absolute; left:0; top:1px; width:18px; height:18px; border-radius:50%; background:var(--geel); font-size:.7rem; font-weight:700; display:inline-flex; align-items:center; justify-content:center}
.check__blok p{margin:0; font-size:.9rem; color:var(--tekst-2); line-height:1.6}

/* ---------- vergelijkingstabel ---------- */
.vergelijkwrap{overflow-x:auto; background:#fff; border:1px solid var(--rand); border-radius:var(--straal); box-shadow:var(--schaduw)}
.vergelijk{border-collapse:collapse; width:100%; min-width:680px; font-size:.92rem}
.vergelijk th,.vergelijk td{text-align:left; padding:15px 18px; border-bottom:1px solid var(--rand); vertical-align:top; color:var(--tekst-2)}
.vergelijk thead th{font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:#9A9A90; border-bottom:1px solid var(--rand)}
.vergelijk tbody td:first-child{font-weight:600; color:var(--tekst)}
.vergelijk tbody tr:last-child td{border-bottom:0}
.vergelijk .vergelijk__ms{background:var(--geel-bg); color:var(--tekst); font-weight:600}
.vergelijk thead .vergelijk__ms{color:var(--tekst)}
.vergelijk .plus{color:#1E7C42; font-weight:800; margin-right:4px}
.vergelijk .min{color:#C4C4BC; font-weight:700}

/* ---------- founder ---------- */
.founder{display:grid; grid-template-columns:minmax(240px,340px) 1fr; gap:56px; align-items:center}
@media(max-width:820px){ .founder{grid-template-columns:1fr; gap:28px} }
.founder__foto{
  aspect-ratio:1/1; border-radius:var(--straal); background:var(--veld); border:1px dashed #D9D9D2;
  display:flex; align-items:center; justify-content:center; text-align:center;
  color:#9A9A90; font-weight:600; font-size:.9rem; line-height:1.5;
}
@media(max-width:820px){ .founder__foto{max-width:280px} }

/* ---------- faq ---------- */
.faq{border-top:1px solid var(--rand)}
.faq details{border-bottom:1px solid var(--rand)}
.faq summary{
  cursor:pointer; list-style:none; padding:20px 44px 20px 0; position:relative;
  font-weight:600; font-size:1rem;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; position:absolute; right:8px; top:16px; font-size:1.4rem; color:var(--tekst); line-height:1; font-weight:400}
.faq details[open] summary::after{content:"–"}
.faq summary:focus-visible{outline:2px solid var(--geel); outline-offset:2px}
.faq p{margin:0 0 20px; color:var(--tekst-2); max-width:72ch; font-size:.95rem}
.op-papier .faq, .op-papier .faq details{border-color:var(--rand)}
.op-papier .faq p{color:var(--tekst-2)}
.op-papier .faq summary::after{color:var(--tekst)}

/* ---------- slot-cta ---------- */
.slot{padding:88px 0}
.slot h2{margin-bottom:16px}
.slot .lead{margin:0 auto 28px; text-align:center}
.slot .knoppen{justify-content:center}
.midden{text-align:center}
.midden .eyebrow{text-align:center}

/* ---------- footer ---------- */
.footer{background:var(--veld); border-top:1px solid var(--rand); padding:56px 0 36px; font-size:.92rem; color:var(--tekst)}
.footer__in{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:36px}
@media(max-width:840px){ .footer__in{grid-template-columns:1fr 1fr} }
@media(max-width:520px){ .footer__in{grid-template-columns:1fr} }
.footer img{height:30px; margin-bottom:14px}
.footer h4{font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:#9A9A90; margin-bottom:12px; font-weight:600}
.footer ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px}
.footer a{color:var(--tekst-2); text-decoration:none}
.footer a:hover{color:var(--tekst)}
.footer__onder{margin-top:44px; padding-top:20px; border-top:1px solid var(--rand); display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; color:#8B8B82; font-size:.84rem}

/* ---------- artikelen ---------- */
.art-kaart{display:flex; flex-direction:column; gap:10px; background:#fff; border:1px solid var(--rand); border-radius:var(--straal); padding:26px 24px 28px; text-decoration:none; transition:box-shadow .15s, transform .15s; box-shadow:var(--schaduw)}
.art-kaart:hover{transform:translateY(-3px); box-shadow:0 16px 40px rgba(27,27,27,.1); border-color:var(--rand)}
.art-kaart__cat{font-size:11.5px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:#9A9A90}
.art-kaart h3{font-size:1.08rem; color:var(--tekst)}
.art-kaart p{margin:0; color:var(--tekst-2); font-size:.92rem}
.art-kaart__meer{margin-top:4px; font-weight:600; font-size:.9rem; color:var(--tekst)}

/* artikel-detail */
.artikel{background:var(--wit); color:var(--tekst)}
.artikel__kop{padding:64px 0 36px; border-bottom:1px solid var(--rand)}
.artikel__kop h1{font-size:clamp(1.8rem,3.8vw,2.7rem); line-height:1.15; max-width:24ch}
.artikel__meta{display:flex; flex-wrap:wrap; gap:14px; margin-top:18px; font-size:12px; font-weight:500; letter-spacing:.04em; text-transform:uppercase; color:#9A9A90}
.artikel__body{display:grid; grid-template-columns:230px 1fr; gap:56px; padding:48px 0 80px; align-items:start}
@media(max-width:900px){ .artikel__body{grid-template-columns:1fr; gap:32px} }
.artikel__body > *{min-width:0}
.toc{position:sticky; top:100px; font-size:.88rem}
.toc h4{font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:#9A9A90; margin-bottom:12px; font-weight:600}
.toc ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px}
.toc a{color:var(--tekst-2); text-decoration:none; line-height:1.4; display:block; border-left:2px solid var(--rand); padding-left:12px}
.toc a:hover{color:var(--tekst); border-color:var(--geel)}
@media(max-width:900px){ .toc{position:static; background:var(--veld); border:1px solid var(--rand); border-radius:16px; padding:20px} }

.prose{max-width:70ch; min-width:0; font-size:1.02rem; line-height:1.75; color:#33332D}
.prose h2{font-size:clamp(1.35rem,2.4vw,1.7rem); margin:48px 0 14px; line-height:1.2}
.prose h2:first-child{margin-top:0}
.prose h3{font-weight:600; font-size:1.08rem; margin:32px 0 8px}
.prose p{margin:0 0 1.15em}
.prose ul,.prose ol{margin:0 0 1.3em; padding-left:22px; display:flex; flex-direction:column; gap:8px}
.prose li{padding-left:4px}
.prose strong{font-weight:600}
.prose a{color:var(--tekst); text-decoration:underline; text-underline-offset:3px}
.prose .intro{font-size:1.12rem; line-height:1.65; color:var(--tekst-2); margin-bottom:1.4em}

.tabelwrap{overflow-x:auto; margin:0 0 1.6em; border:1px solid var(--rand); border-radius:16px; background:#fff}
.prose table{border-collapse:collapse; width:100%; min-width:520px; font-size:.92rem}
.prose th,.prose td{text-align:left; padding:13px 16px; border-bottom:1px solid var(--rand); vertical-align:top}
.prose thead th{background:var(--veld); color:var(--tekst); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; font-weight:600}
.prose tbody tr:last-child td{border-bottom:0}
.prose td:first-child{font-weight:600}

.callout{background:var(--geel-bg); color:var(--tekst); padding:24px 26px; margin:0 0 1.6em; border:0; border-radius:16px}
.callout b{display:block; font-weight:700; font-size:.88rem; margin-bottom:6px; text-transform:none; letter-spacing:0}
.callout p:last-child{margin-bottom:0}

.artikel-cta{background:var(--veld); color:var(--tekst); padding:32px 30px; margin:44px 0; border-radius:var(--straal); border:1px solid var(--rand)}
.artikel-cta h3{font-weight:700; font-size:1.25rem; margin-bottom:8px; text-transform:none}
.artikel-cta p{color:var(--tekst-2); margin-bottom:18px; max-width:52ch}
.prose .btn{text-decoration:none}

.terug{display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:.9rem; text-decoration:none; color:#9A9A90; margin-bottom:24px}
.terug:hover{color:var(--tekst)}

/* ==========================================================================
   Motion-laag — alles hieronder werkt alleen mét JS (html.anim) en
   respecteert prefers-reduced-motion. Zonder JS is de site gewoon af.
   ========================================================================== */

/* hero: binnenkomer in vijf tellen */
.anim .intro-1,.anim .intro-2,.anim .intro-3,.anim .intro-4,.anim .intro-5{
  animation:intro .7s cubic-bezier(.22,1,.36,1) both;
}
.anim .intro-2{animation-delay:.08s}
.anim .intro-3{animation-delay:.16s}
.anim .intro-4{animation-delay:.26s}
.anim .intro-5{animation-delay:.36s}
@keyframes intro{
  from{opacity:0; transform:translateY(22px)}
  to{opacity:1; transform:none}
}

/* de gele marker tekent zichzelf */
.anim .hero .markeer{
  background:linear-gradient(transparent 62%, var(--geel) 62%) no-repeat;
  background-size:0% 100%;
  animation:marker .6s ease-out .7s forwards;
}
@keyframes marker{to{background-size:100% 100%}}

/* wisselwoord in de lead */
.wissel{display:inline-block; border-bottom:2px solid var(--geel); font-weight:600; color:var(--tekst)}
.wissel__woord{display:inline-block; transition:opacity .22s ease, transform .22s ease}
.wissel__woord.weg{opacity:0; transform:translateY(8px)}

/* scroll-reveal */
.anim .reveal{opacity:0; transform:translateY(26px); transition:opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1)}
.anim .reveal.aan{opacity:1; transform:none}

/* reels: strak in het gelid, subtiele lift bij hover */
.anim .reel{transition:transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s}
.anim .reel:hover{transform:translateY(-6px); box-shadow:0 20px 44px rgba(27,27,27,.14); z-index:2}

/* kaarten en pakketten: subtiele lift bij hover */
.anim .kaart, .anim .pakket{transition-property:opacity, transform, box-shadow}
.anim .kaart:hover, .anim .pakket:hover{transform:translateY(-6px); box-shadow:0 18px 44px rgba(27,27,27,.1)}

/* branchechips vullen geel bij hover */
.branche{transition:background .15s, border-color .15s}
.branche:hover{background:var(--geel); border-color:var(--geel)}

/* dashboardbadge ademt */
.anim .dash__badge{animation:adem 2.6s ease-in-out 1s infinite}
@keyframes adem{0%,100%{transform:scale(1)} 50%{transform:scale(1.06)}}

@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important; scroll-behavior:auto !important}
  .anim .reveal{opacity:1; transform:none}
}

/* ==========================================================================
   v18 — herontwerp: wit & premium, donkere check, één CTA, sticky actie
   Deze laag overschrijft bewust eerdere hero/schakel/tel-regels.
   ========================================================================== */

/* nav: één actie */
.nav__actie{margin-left:auto; padding:11px 22px; font-size:.88rem}
.nav__links{margin-left:auto}
.nav__links + details + .nav__actie, .nav__links ~ .nav__actie{margin-left:0}
@media(max-width:980px){ .nav__actie{margin-left:auto} }
@media(max-width:560px){ .nav__actie{padding:10px 14px; font-size:.8rem} }

/* knoppen: premium zwart als standaard, ook voor wa.me-links */
a.btn[href*="wa.me"]{background:var(--zwart); color:#fff}
a.btn[href*="wa.me"]:hover{background:#333; color:#fff}
.btn--groot{padding:16px 34px; font-size:1rem}

/* hero: één sterke compositie op wit, volledige viewport */
.hero{background:var(--wit); border-bottom:0; padding:0}
.hero .hero__grid{
  display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center;
  min-height:calc(100vh - 76px); max-height:860px; padding-top:24px; padding-bottom:24px;
}
.hero .hero__in{max-width:560px; text-align:left; align-items:flex-start; justify-self:end}
.hero h1{font-size:clamp(2.3rem,4.4vw,3.6rem); line-height:1.08; margin-bottom:18px}
.hero .lead{margin:0 0 22px; max-width:46ch; min-height:3.4em}
.hero .schakel{margin-bottom:24px}
.hero__actie{display:flex; flex-direction:column; align-items:flex-start; gap:12px}
.hero .tekstlink{margin-top:0}

/* platform-iconen */
.platforms{display:flex; align-items:center; gap:14px; margin-bottom:28px}
.platforms__label{font-size:.82rem; font-weight:500; color:#9A9A90; margin-right:2px}
.picon{display:inline-flex; width:34px; height:34px; align-items:center; justify-content:center;
  border-radius:10px; background:var(--veld); color:var(--tekst)}
.picon svg{width:18px; height:18px}

/* telefoon volledig in beeld */
.hero .tel{margin:0; justify-self:start; width:auto}
.hero .tel__scherm{height:min(74vh, 640px); aspect-ratio:9/18.5; width:auto}
@media(max-width:900px){
  .hero .hero__grid{grid-template-columns:1fr; min-height:0; max-height:none; gap:36px; padding-top:40px; padding-bottom:56px}
  .hero .hero__in{justify-self:center; text-align:center; align-items:center; max-width:640px}
  .hero .lead{min-height:0}
  .hero__actie{align-items:center}
  .platforms{justify-content:center}
  .hero .tel{justify-self:center}
  .hero .tel__scherm{height:auto; width:min(240px,64vw)}
}

/* werk-strip */
.werk2{padding:88px 0; background:var(--veld)}
.werk2__kop{text-align:center; max-width:560px; margin:0 auto 40px}
.werk2__kop .lead{margin:12px auto 0}
.werk2__rij{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:28px; justify-items:center}
.tel--klein .tel__scherm{height:auto; width:min(230px, 100%); border-width:7px; border-radius:34px}
.tel--klein .tel__app{font-size:.85rem}
@media(max-width:760px){
  .werk2__rij{grid-template-columns:repeat(3,1fr); gap:12px}
  .tel--klein .tel__scherm{width:100%; border-width:5px; border-radius:24px}
  .tel--klein .tel__voet{padding:34px 10px 12px 10px}
  .tel--klein .tel__voet b{font-size:.68rem}
  .tel--klein .tel__voet span{font-size:.62rem}
}

/* donkere sectie: hier knalt de check */
.donker{background:#161614; color:#F4F4EF}
.donker .eyebrow{color:var(--geel); justify-content:center}
.donker h2{color:#fff}
.donker .lead{color:#B9B9B0; margin:14px auto 0; max-width:52ch; text-align:center}
.donker .checkkaart{margin-top:36px; border-color:transparent; box-shadow:0 30px 70px rgba(0,0,0,.4)}
.donker .check__terug{color:#B9B9B0}
.donker .check__terug:hover{color:#fff}

/* systeem: dashboard + team */
.sys{display:grid; grid-template-columns:.9fr 1.1fr; gap:56px; align-items:center}
@media(max-width:900px){ .sys{grid-template-columns:1fr; gap:36px} }
.sys__punten{list-style:none; margin:22px 0 30px; padding:0; display:flex; flex-direction:column; gap:14px; font-size:1rem; color:var(--tekst-2)}
.sys__punten li{padding-left:30px; position:relative; line-height:1.55}
.sys__punten li::before{content:"\2713"; position:absolute; left:0; top:2px; width:20px; height:20px;
  background:var(--geel); border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700; color:var(--tekst)}
.sys__punten b{color:var(--tekst); font-weight:600}
.sys__team{display:flex; gap:16px; align-items:center; background:var(--veld); border-radius:var(--straal); padding:16px 18px}
.sys__foto{width:72px; height:72px; flex:none; border-radius:16px; background:#fff; border:1px dashed #D9D9D2;
  display:flex; align-items:center; justify-content:center; font-size:.68rem; font-weight:600; color:#9A9A90; text-align:center}
.sys__team p{margin:0; font-size:.9rem; color:var(--tekst-2); line-height:1.55}
.sys__team b{color:var(--tekst); font-weight:600}

/* vergelijkingstabel compacter */
.vergelijk th,.vergelijk td{padding:13px 16px; font-size:.9rem}

/* sticky CTA */
.plakcta{
  position:fixed; left:50%; transform:translateX(-50%); bottom:18px; z-index:80;
  background:var(--zwart); color:#fff; text-decoration:none; font-family:var(--f);
  font-weight:600; font-size:.9rem; padding:13px 26px; border-radius:999px;
  box-shadow:0 12px 34px rgba(27,27,27,.3); white-space:nowrap;
}
.plakcta:hover{background:#333}
.plakcta[hidden]{display:none}
@media(min-width:901px){ .plakcta{left:auto; right:26px; transform:none; bottom:24px} }

/* koppen gecentreerd waar .midden wordt gebruikt */
.midden h2{margin:0 auto}
/* checkkaart houdt eigen (donkere) tekstkleur, ook in de donkere sectie */
.donker .checkkaart{color:var(--tekst)}
.donker .checkkaart h3{color:var(--tekst)}

/* ---------- modal (gespreks-funnel) ---------- */
.modal{position:fixed; inset:0; z-index:100}
.modal[hidden]{display:none}
.modal__achtergrond{position:absolute; inset:0; background:rgba(20,20,18,.62); backdrop-filter:blur(4px)}
.modal__venster{
  position:relative; z-index:1; max-width:640px; margin:5vh auto; max-height:90vh;
  overflow-y:auto; background:var(--veld); border-radius:24px; padding:30px 30px 26px;
  box-shadow:0 40px 90px rgba(0,0,0,.4);
  animation:modalin .28s cubic-bezier(.22,1,.36,1);
}
@keyframes modalin{from{opacity:0; transform:translateY(18px)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion: reduce){ .modal__venster{animation:none} }
@media(max-width:700px){ .modal__venster{margin:0; max-height:100vh; height:100%; border-radius:0; padding:22px 16px} }
.modal__sluit{
  position:absolute; top:16px; right:16px; width:38px; height:38px; border:0; border-radius:50%;
  background:#fff; color:var(--tekst); font-size:1.3rem; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center; box-shadow:var(--schaduw);
}
.modal__sluit:hover{background:var(--geel)}
.modal__kop{margin:0 42px 4px 0; font-weight:700; font-size:1.25rem; letter-spacing:-.01em}
.modal__sub{margin:0 0 18px; font-size:.92rem; color:var(--tekst-2)}
.modal .checkkaart{margin-top:0; box-shadow:var(--schaduw); border:1px solid var(--rand); color:var(--tekst)}
body.modal-open{overflow:hidden}

/* ---------- systeem v21: dashboard centraal + teamkaart ---------- */
.sys{display:block}
.sysdash{margin-top:40px}
.sysdash .dash{max-width:640px; margin:0 auto}
.teamkaart{
  display:flex; gap:20px; align-items:center; max-width:640px; margin:20px auto 0;
  background:var(--veld); border-radius:var(--straal); padding:16px 22px 16px 16px;
}
.teamkaart__beeld{width:120px; height:auto; flex:none; border-radius:14px}
.teamkaart p{margin:0; font-size:.92rem; color:var(--tekst-2); line-height:1.6}
.teamkaart b{color:var(--tekst); font-weight:600}
@media(max-width:520px){ .teamkaart{flex-direction:column; align-items:flex-start} .teamkaart__beeld{width:100%; max-width:220px} }

/* results-animatie: balkjes vullen zich zodra het dashboard in beeld komt */
.dash__balk span{transition:width 1.1s cubic-bezier(.22,1,.36,1)}

/* ---------- app-venster om het dashboard (v22): dit is software, geen sectie ---------- */
.inbegrepen{
  display:flex; justify-content:center; align-items:center; gap:8px;
  margin:26px 0 18px; font-size:.85rem; font-weight:600; color:var(--tekst);
}
.inbegrepen span{
  width:20px; height:20px; border-radius:50%; background:var(--geel); flex:none;
  display:inline-flex; align-items:center; justify-content:center; font-size:11px; font-weight:700;
}
.venster{
  max-width:660px; margin:0 auto; border-radius:18px; overflow:hidden;
  border:1px solid var(--rand); box-shadow:0 30px 70px rgba(27,27,27,.14);
  background:#fff;
}
.venster__balk{
  display:flex; align-items:center; gap:7px; padding:11px 14px;
  background:#EFEFEA; border-bottom:1px solid var(--rand);
}
.venster__dot{width:11px; height:11px; border-radius:50%}
.venster__dot--r{background:#FF5F57}
.venster__dot--g{background:#FEBC2E}
.venster__dot--gr{background:#28C840}
.venster__url{
  flex:1; display:flex; align-items:center; justify-content:center; gap:6px;
  margin:0 40px 0 26px; padding:6px 14px; background:#fff; border-radius:8px;
  font-size:.76rem; font-weight:500; color:var(--tekst-2); border:1px solid var(--rand);
  white-space:nowrap; overflow:hidden;
}
.venster .dash{max-width:none; margin:0; border:0; border-radius:0; box-shadow:none}
.dash__balk span{transition:width 2s cubic-bezier(.25,.8,.3,1)}
@media(max-width:520px){ .venster__url{margin:0 8px} }

/* ---------- dashboard v23: klantprofiel, kpi's, grafiek ---------- */
.dash__klant{display:flex; align-items:center; gap:12px; min-width:0}
.dash__logo{
  width:42px; height:42px; border-radius:50%; flex:none;
  background:var(--geel); color:var(--tekst);
  display:inline-flex; align-items:center; justify-content:center;
  font-weight:700; font-size:.85rem; letter-spacing:.02em;
}
.dash__klant b{display:block; font-weight:700; font-size:.95rem; line-height:1.25}
.dash__klant span{display:block; font-size:.78rem; color:#8B8B82}
.kpis{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; padding:14px 0 6px}
.kpi{border:1px solid var(--rand); border-radius:14px; padding:13px 15px; display:flex; flex-direction:column; gap:2px; min-width:0}
.kpi span{font-size:.72rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:#9A9A90; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.kpi b{font-size:1.35rem; font-weight:700; letter-spacing:-.02em; font-variant-numeric:tabular-nums; line-height:1.2}
.kpi .dash__plus{margin-left:0; font-size:.75rem}
@media(max-width:560px){ .kpis{grid-template-columns:1fr 1fr} .kpi:first-child{grid-column:1 / -1} }
.grafiek{padding:10px 0 2px}
.grafiek__label{display:block; font-size:.72rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:#9A9A90; margin-bottom:8px}
.grafiek svg{width:100%; height:110px; display:block}
.grafiek__assen{display:flex; justify-content:space-between; padding:6px 4px 0; font-size:.72rem; color:#B5B5AC}
/* fix: naamregels niet op het logo zelf laten ingrijpen */
.dash__klant .dash__logo{display:inline-flex; font-size:.85rem; color:var(--tekst)}

/* ---------- v24: mobiel rustiger en compacter (Mediamaatje-ritme) ---------- */
@media(max-width:560px){
  .hero .hero__grid{padding-top:26px; padding-bottom:44px; gap:26px}
  .hero h1{font-size:1.95rem; margin-bottom:12px}
  .hero .lead{font-size:.98rem; margin-bottom:16px; max-width:36ch; min-height:0}
  .hero .schakel{margin-bottom:16px}
  .platforms{margin-bottom:20px; gap:10px}
  .platforms__label{font-size:.78rem}
  .picon{width:30px; height:30px; border-radius:9px}
  .picon svg{width:15px; height:15px}
  .btn--groot{padding:14px 28px; font-size:.95rem}
  .hero .tekstlink{font-size:.88rem; margin-top:10px}
  .hero .tel__scherm{width:min(232px, 62vw)}
}

/* vergelijkingstabel op mobiel: 2 kolommen, geen horizontale scroll */
@media(max-width:700px){
  .vergelijk{min-width:0}
  .vergelijk th:nth-child(2), .vergelijk td:nth-child(2){display:none}
  .vergelijk th, .vergelijk td{padding:12px 10px; font-size:.82rem}
  .vergelijk thead th{font-size:.68rem}
}

/* ---------- v25: mobiel maximaal rustig — precies ÉÉN knop in de hero ---------- */
@media(max-width:700px){
  /* nav: alleen logo + hamburger (de sticky CTA verschijnt bij scrollen) */
  .nav__actie{display:none}
  .nav__menu{margin-left:auto}
  /* hero: schakel en check-link weg — de hoofdknop opent toch al de check */
  .hero .schakel{display:none}
  .hero .tekstlink{display:none}
  /* platform-iconen: geen blokjes, gewoon subtiele glyphs */
  .picon{background:none; width:auto; height:auto; border-radius:0; color:#8B8B82}
  .picon svg{width:17px; height:17px}
  .platforms{gap:16px; margin-bottom:24px}
  .hero .hero__grid{padding-top:34px}
}

/* ==========================================================================
   v27 — witte stijl hersteld + feedbackronde (hero, reels, scan, dashboard)
   ========================================================================== */

/* hero: subtiele publieksregel onder de knop */
.hero__voorwie{margin:0; font-size:.85rem; color:#9A9A90}

/* geen horizontale scroll, waar dan ook */
html, body{overflow-x:hidden; overflow-x:clip} /* clip ipv hidden: hidden breekt position:sticky */

/* ---------- mobiel: header niet sticky (pill), telefoon prominent ---------- */
@media(max-width:700px){
  .nav{position:static; background:var(--wit); border-bottom:0; backdrop-filter:none; padding:12px 14px 0}
  .nav__in{
    background:#fff; border:1px solid var(--rand); border-radius:999px; height:56px;
    padding:0 8px 0 18px; box-shadow:0 8px 26px rgba(27,27,27,.07);
  }
  .nav__logo img{height:28px}
  .nav__menu-paneel{position:fixed; left:14px; right:14px; top:76px; min-width:0}
  .hero .hero__grid{padding-top:28px; padding-bottom:44px; gap:30px}
  /* het Mediamaatje-moment: de telefoon groot en trots in beeld */
  .hero .tel__scherm{width:min(300px, 80vw); height:auto}
  .hero .tel{filter:drop-shadow(0 26px 50px rgba(27,27,27,.16))}
}

/* ---------- werk: reels zonder telefoonlijstjes ---------- */
.reelrij{
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:18px;
  max-width:1160px; margin:0 auto; padding:0 24px;
}
.reelkaart{
  position:relative; aspect-ratio:9/16; border-radius:18px; overflow:hidden;
  box-shadow:0 18px 44px rgba(27,27,27,.12);
}
.reelkaart__tag{
  position:absolute; top:12px; left:12px; background:rgba(255,255,255,.92); color:var(--tekst);
  font-size:.72rem; font-weight:600; padding:5px 11px; border-radius:999px;
}
.reelkaart__voet{
  position:absolute; left:0; right:0; bottom:0; padding:44px 14px 14px;
  background:linear-gradient(transparent, rgba(0,0,0,.55)); color:#fff;
  display:flex; flex-direction:column; gap:2px;
}
.reelkaart__voet b{font-size:.85rem; font-weight:600}
.reelkaart__voet span{font-size:.75rem; opacity:.85}
@media(max-width:760px){
  .reelrij{
    display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory;
    padding:4px 16px 18px; -webkit-overflow-scrolling:touch; scrollbar-width:none;
  }
  .reelrij::-webkit-scrollbar{display:none}
  .reelkaart{flex:0 0 64vw; max-width:250px; scroll-snap-align:center}
}

/* ---------- scan-resultaat: video, punten, embedded agenda ---------- */
.rvideo{
  position:relative; aspect-ratio:16/9; border-radius:16px; overflow:hidden;
  background:linear-gradient(150deg,#2A2A26,#161614); color:#fff;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; text-align:center; padding:20px; margin:0 0 20px;
}
.rvideo__play{
  width:54px; height:54px; flex:0 0 auto; box-sizing:border-box; border-radius:50%; background:var(--geel); color:var(--tekst);
  display:flex; align-items:center; justify-content:center; font-size:1.05rem; padding-left:4px;
}
.rvideo b{font-size:1rem; font-weight:600}
.rvideo__sub{font-size:.8rem; color:#B9B9B0}

.check__punten{list-style:none; margin:0 0 22px; padding:0; display:flex; flex-direction:column; gap:10px; font-size:.95rem; color:var(--tekst-2)}
.check__punten li{position:relative; padding-left:30px; line-height:1.55}
.check__punten li::before{
  content:"\2713"; position:absolute; left:0; top:2px; width:20px; height:20px;
  background:var(--geel); border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700; color:var(--tekst);
}

.agenda{border:1px solid var(--rand); border-radius:16px; padding:16px; background:#fff}
.agenda__kop{margin:0 0 12px; font-weight:600; font-size:.95rem}
.agenda iframe{width:100%; height:520px; border:0; border-radius:10px; background:var(--veld)}
.agenda .tekstlink{display:inline-block; margin-top:10px; font-size:.82rem}
@media(max-width:520px){ .agenda{padding:12px} .agenda iframe{height:560px} }

.check__extra{margin-top:18px}
.check__extra summary{cursor:pointer; font-size:.9rem; font-weight:600; color:var(--tekst-2)}
.check__extra summary:hover{color:var(--tekst)}
.check__extra .check__form{margin-top:14px}
.check__veld select{
  padding:13px 14px; border:1px solid var(--rand); border-radius:12px;
  font:inherit; background:#fff; color:var(--tekst); appearance:auto;
}
.check__veld select:focus{outline:none; border-color:var(--tekst)}

/* ---------- popup (exit-intent) ---------- */
.popup{position:fixed; inset:0; z-index:110}
.popup[hidden]{display:none}
.popup__achtergrond{position:absolute; inset:0; background:rgba(20,20,18,.55); backdrop-filter:blur(3px)}
.popup__kaart{
  position:relative; z-index:1; max-width:400px; margin:18vh auto 0;
  background:#fff; border-radius:20px; padding:30px 26px 24px;
  box-shadow:0 40px 90px rgba(0,0,0,.35);
  animation:modalin .28s cubic-bezier(.22,1,.36,1);
}
@media (prefers-reduced-motion: reduce){ .popup__kaart{animation:none} }
@media(max-width:520px){
  .popup__kaart{position:absolute; left:14px; right:14px; bottom:16px; margin:0; max-width:none}
}
.popup__kop{margin:0 40px 6px 0; font-weight:700; font-size:1.2rem; letter-spacing:-.01em}
.popup__sub{margin:0 0 18px; font-size:.92rem; color:var(--tekst-2); line-height:1.6}

/* ---------- dashboard: content-, leads- en trainingtab ---------- */
.ckaart, .lead-rij{display:flex; align-items:center; gap:14px; padding:11px 0; border-bottom:1px solid var(--veld)}
.dash__paneel .ckaart:last-of-type, .dash__paneel .lead-rij:last-of-type{border-bottom:0}
.ckaart__thumb{width:44px; height:58px; border-radius:10px; flex:none}
.ckaart__info, .lead-rij > div{flex:1; min-width:0}
.ckaart__info b, .lead-rij > div b{display:block; font-size:.9rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ckaart__info span, .lead-rij > div span{display:block; font-size:.76rem; color:#8B8B82; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.spil{flex:none; font-size:.72rem; font-weight:600; padding:5px 11px; border-radius:999px; background:var(--veld); color:var(--tekst-2); white-space:nowrap}
.spil--review{background:var(--geel-bg); color:#7A5E00}
.spil--live{background:#DFEDE2; color:#1E7C42}
.lead-rij__avatar{
  width:40px; height:40px; border-radius:50%; flex:none;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:.78rem; font-weight:700; color:var(--tekst);
}

.cursus{padding:4px 0 2px}
.cursus__kop{display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:10px}
.cursus__kop b{display:block; font-size:.95rem; font-weight:700}
.cursus__kop span{display:block; font-size:.76rem; color:#8B8B82}
.cursus__pct{font-size:.8rem; font-weight:700}
.cursus__balk{height:7px; border-radius:99px; background:var(--veld); overflow:hidden; margin-bottom:12px}
.cursus__balk i{display:block; height:100%; background:var(--geel); border-radius:99px}
.les{display:flex; align-items:center; gap:12px; padding:8px 0}
.les__thumb{
  width:42px; height:42px; border-radius:10px; flex:none; background:var(--veld);
  display:inline-flex; align-items:center; justify-content:center; font-size:.8rem; color:var(--tekst);
}
.les > div b{display:block; font-size:.88rem; font-weight:600}
.les > div span{display:block; font-size:.74rem; color:#8B8B82}
.les--nu{background:var(--geel-bg); border-radius:12px; padding:8px 10px; margin:2px -10px}
.les--dicht{opacity:.55}

/* ---------- sticky CTA: smooth erin/eruit zodra de hero-knop uit beeld is ---------- */
.plakcta{
  display:block; opacity:0; pointer-events:none;
  transform:translateX(-50%) translateY(18px);
  transition:opacity .38s ease, transform .38s cubic-bezier(.22,1,.36,1);
}
.plakcta.aan{opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0)}
@media(min-width:901px){
  .plakcta{transform:translateY(18px)}
  .plakcta.aan{transform:translateY(0)}
}
.plakcta[hidden]{display:none} /* alleen vóór JS-init */
@media (prefers-reduced-motion: reduce) and (max-width:900px){
  .plakcta, .plakcta.aan{transition:none; transform:translateX(-50%)}
}
@media (prefers-reduced-motion: reduce) and (min-width:901px){
  .plakcta, .plakcta.aan{transition:none; transform:none}
}

/* ---------- werkwijze: 5 stappen, zigzag aan een gestippelde lijn ---------- */
.stappen{position:relative; max-width:960px; margin:44px auto 0; display:flex; flex-direction:column; gap:34px}
.stappen::before{content:""; position:absolute; top:26px; bottom:26px; left:50%; transform:translateX(-1px); border-left:2px dashed #E3E3DC}
.stapkaart{
  position:relative; width:calc(50% - 34px);
  background:#fff; border:1px solid var(--rand); border-radius:20px;
  padding:24px 26px 22px; box-shadow:0 14px 36px rgba(27,27,27,.06);
}
.stapkaart:nth-child(odd){align-self:flex-start}
.stapkaart:nth-child(even){align-self:flex-end}
.stapkaart::before{
  content:""; position:absolute; top:30px; width:12px; height:12px; border-radius:50%;
  background:var(--geel); border:3px solid #fff; box-shadow:0 0 0 1px var(--rand);
}
.stapkaart:nth-child(odd)::before{right:-43px}
.stapkaart:nth-child(even)::before{left:-43px}
.stapkaart__kop{display:flex; align-items:center; gap:12px; margin-bottom:10px}
.stapnr{
  width:38px; height:38px; flex:none; border-radius:50%; background:var(--geel); color:var(--tekst);
  display:inline-flex; align-items:center; justify-content:center; font-weight:700; font-size:.85rem;
}
.stapkaart h3{margin:0; font-size:1.1rem}
.stapkaart p{margin:0; font-size:.93rem; color:var(--tekst-2); line-height:1.6}
.stapkaart p b{color:var(--tekst); font-weight:600}
@media(max-width:760px){
  .stappen{gap:0}
  .stappen::before{display:none}
  .stapkaart{width:100%}
  .stapkaart::before{display:none}
  .stapkaart:not(:last-child){margin-bottom:26px}
  .stapkaart:not(:last-child)::after{
    content:""; position:absolute; left:50%; bottom:-26px; height:26px;
    border-left:2px dashed #E3E3DC;
  }
}

/* expliciete tekstkleuren op knoppen: sommige viewers duwen thema-kleuren
   in button-elementen door — nooit op inherit vertrouwen in de scan */
.check__optie, .check__optie b{color:var(--tekst)}
.check__optie span{color:#8B8B82}
.check__terug{color:#8B8B82}
.check__veld select{color:var(--tekst)}

/* ---------- hero: echte reel in de telefoon ---------- */
.tel__scherm{position:relative}
.tel__video{position:absolute; inset:0; width:100%; height:100%; border:0; z-index:0; background:transparent; pointer-events:none}
.tel__notch, .tel__app, .tel__acties, .tel__voet, .tel__balk{z-index:2}

/* ---------- systeem: dit is software, geen plaatje ---------- */
.sysdash{position:relative}
.sysdash::before{
  content:""; position:absolute; inset:-46px 0;
  background:radial-gradient(closest-side, rgba(255,212,0,.13), transparent 72%);
  z-index:0; pointer-events:none;
}
@media(min-width:1100px){ .sysdash::before{inset:-46px -80px} }
.sysdash .venster{position:relative; z-index:1}
@media(min-width:1000px){ .venster{max-width:780px} }

.zweef{
  position:absolute; z-index:2; display:none;
  background:#fff; border:1px solid var(--rand); border-radius:16px;
  padding:13px 17px; box-shadow:0 22px 54px rgba(27,27,27,.16);
  font-size:.85rem; line-height:1.3;
}
.zweef b{display:block; font-weight:700; font-size:.88rem}
.zweef span{display:block; color:#8B8B82; font-size:.76rem; margin-top:1px}
.zweef em{font-style:normal; font-size:.72rem; font-weight:600; color:#8B8B82; align-self:flex-start}
.zweef__avatar{
  width:34px; height:34px; flex:none; border-radius:50%; background:#FFE9A8; color:var(--tekst);
  display:inline-flex; align-items:center; justify-content:center; font-weight:700; font-size:.74rem;
}
.zweef__bol{
  width:30px; height:30px; flex:none; border-radius:50%; background:var(--geel); color:var(--tekst);
  display:inline-flex; align-items:center; justify-content:center; font-weight:700; font-size:.8rem;
}
.zweef--melding{gap:12px; align-items:center; transform:rotate(2deg); top:-26px; right:-96px}
.zweef--stat{flex-direction:column; gap:1px; transform:rotate(-2.5deg); top:305px; left:-104px}
.zweef--stat b{font-size:1.25rem; letter-spacing:-.02em}
.zweef--app{gap:11px; align-items:center; transform:rotate(-2deg); bottom:150px; right:-100px}
@media(min-width:1100px){ .zweef{display:flex} }

/* rustige adem op de zwevende kaartjes (alleen met animaties aan) */
@keyframes zweefje{ 0%,100%{margin-top:0} 50%{margin-top:-6px} }
.anim .zweef--melding{animation:zweefje 6s ease-in-out infinite}
.anim .zweef--stat{animation:zweefje 7s ease-in-out .8s infinite}
.anim .zweef--app{animation:zweefje 6.5s ease-in-out 1.6s infinite}

/* reveal eindigt op transform:none — geef de zweefkaartjes hun rotatie terug */
.anim .zweef--melding.reveal{transform:rotate(2deg) translateY(26px)}
.anim .zweef--melding.reveal.aan{transform:rotate(2deg)}
.anim .zweef--stat.reveal{transform:rotate(-2.5deg) translateY(26px)}
.anim .zweef--stat.reveal.aan{transform:rotate(-2.5deg)}
.anim .zweef--app.reveal{transform:rotate(-2deg) translateY(26px)}
.anim .zweef--app.reveal.aan{transform:rotate(-2deg)}

/* ---------- klantenstrip: namen als bewijs, zonder cijfers te verzinnen ---------- */
.klanten{padding:8px 24px 44px}
.klanten__label{
  text-align:center; font-size:.76rem; font-weight:600; letter-spacing:.09em;
  text-transform:uppercase; color:#9A9A90; margin:0 0 16px;
}
.klanten__rij{display:flex; justify-content:center; gap:12px; flex-wrap:wrap; max-width:980px; margin:0 auto}
.klant{
  display:inline-flex; align-items:center; gap:10px;
  background:#fff; border:1px solid var(--rand); border-radius:999px;
  padding:7px 17px 7px 8px; box-shadow:0 6px 18px rgba(27,27,27,.05);
}
.klant i{
  width:34px; height:34px; border-radius:50%; flex:none; font-style:normal;
  font-weight:700; font-size:.72rem; color:var(--tekst);
  display:inline-flex; align-items:center; justify-content:center;
}
.klant b{display:block; font-size:.85rem; font-weight:700; line-height:1.15; white-space:nowrap}
.klant em{display:block; font-style:normal; font-size:.7rem; color:#8B8B82; white-space:nowrap}
@media(max-width:700px){
  .klanten{padding:0 0 36px}
  .klanten__rij{flex-wrap:nowrap; justify-content:flex-start; overflow-x:auto; padding:4px 16px; scrollbar-width:none}
  .klanten__rij::-webkit-scrollbar{display:none}
  .klant{flex:none}
}

/* ---------- prijskaart in het scanresultaat: de indicatie mag gezien worden ---------- */
.prijskaart{
  display:flex; flex-direction:column; gap:3px;
  background:var(--geel-bg); border:1px solid #F1DFA0; border-radius:16px;
  padding:18px 22px; margin:0 0 20px;
}
.prijskaart__label{font-size:.72rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:#7A5E00}
.prijskaart b{font-size:1.45rem; font-weight:700; letter-spacing:-.02em; line-height:1.2; color:var(--tekst)}
.prijskaart__sub{font-size:.82rem; color:var(--tekst-2); line-height:1.5}

/* ---------- agenda-preview (alleen in de artifact-preview zichtbaar) ---------- */
.agenda__preview{
  background:var(--veld); border-radius:10px; padding:38px 22px; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:10px; margin-bottom:12px;
}
.agenda__preview span{font-size:1.6rem}
.agenda__preview p{margin:0; font-size:.88rem; color:var(--tekst-2); line-height:1.6}

/* ---------- hero: WhatsApp als rustige tweede route ---------- */
.hero__wa{
  display:inline-flex; align-items:center; gap:10px; text-decoration:none;
  color:var(--tekst-2); font-size:.9rem; margin-top:2px;
}
.hero__wa b{color:var(--tekst); font-weight:600; text-decoration:underline; text-decoration-color:#25D366; text-decoration-thickness:2px; text-underline-offset:3px}
.hero__wa:hover b{text-decoration-color:var(--tekst)}
.wa-bol{
  width:30px; height:30px; flex:none; border-radius:50%; background:#25D366; color:#fff;
  display:inline-flex; align-items:center; justify-content:center;
}
.wa-bol svg{width:17px; height:17px}
@media(max-width:700px){ .hero__wa{font-size:.88rem} }

/* ---------- resultaat: 1 of 2 profielvideo's ---------- */
.rvideos{margin:0 0 20px}
.rvideos--twee{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.rvideos--twee .rvideo{aspect-ratio:16/11; padding:16px}
.rvideos--twee .rvideo b{font-size:.9rem}
.rvideos--twee .rvideo .rvideo__sub{font-size:.74rem}
.rvideos--twee .rvideo__play{width:44px; height:44px; font-size:.9rem}
.rvideos .rvideo{margin:0}
@media(max-width:560px){ .rvideos--twee{grid-template-columns:1fr} .rvideos--twee .rvideo{aspect-ratio:16/9} }

/* ---------- gespreksplan: dit krijg je op de call ---------- */
.gespreksplan{border:1px solid var(--rand); border-radius:16px; padding:20px 22px 8px; margin:0 0 16px; background:#fff}
.gespreksplan__kop{margin:0 0 14px; font-weight:700; font-size:.98rem}
.gespreksplan__kop span{display:block; font-weight:500; font-size:.78rem; color:#8B8B82; margin-top:2px}
.gstap{display:flex; gap:14px; align-items:flex-start; padding:10px 0 12px; border-top:1px solid var(--veld)}
.gstap > b{
  flex:none; min-width:52px; text-align:center; font-size:.72rem; font-weight:700;
  background:var(--geel-bg); color:#7A5E00; border-radius:999px; padding:5px 8px;
  font-variant-numeric:tabular-nums;
}
.gstap div b{display:block; font-size:.9rem; font-weight:700}
.gstap div span{display:block; font-size:.82rem; color:var(--tekst-2); line-height:1.55; margin-top:1px}

/* gegevens-stap: subregel onder de kop */
.check__sub{margin:-14px 0 18px; font-size:.9rem; color:var(--tekst-2); max-width:52ch}

/* ---------- resultaat compacter: video en agenda zijn de hoofdrol ---------- */
.agenda__sub{margin:-8px 0 12px; font-size:.8rem; color:#8B8B82}
.rvideos .rvideo{cursor:pointer; transition:transform .2s cubic-bezier(.22,1,.36,1), box-shadow .2s}
.rvideos .rvideo:hover{transform:translateY(-3px); box-shadow:0 18px 44px rgba(0,0,0,.25)}
@keyframes playpuls{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
.anim .rvideos .rvideo__play{animation:playpuls 2.4s ease-in-out infinite}

/* ---------- v29: reviewronde Otto ---------- */

/* hero: knop + groene WhatsApp-cirkel naast elkaar */
.hero__knoppen{display:flex; align-items:center; gap:12px}
.wa-knop{
  width:54px; height:54px; flex:none; border-radius:50%; background:#25D366; color:#fff;
  display:inline-flex; align-items:center; justify-content:center; text-decoration:none;
  box-shadow:0 10px 26px rgba(37,211,102,.35);
  transition:transform .15s, box-shadow .15s;
}
.wa-knop:hover{transform:translateY(-2px); box-shadow:0 14px 32px rgba(37,211,102,.45)}
.wa-knop svg{width:26px; height:26px}
@media(max-width:900px){ .hero__knoppen{justify-content:center} }

/* sticky WhatsApp-cirkel naast de sticky CTA */
.plakwa{
  position:fixed; z-index:80; width:52px; height:52px; border-radius:50%;
  background:#25D366; color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:0 12px 30px rgba(37,211,102,.4); text-decoration:none;
  right:16px; bottom:18px;
  opacity:0; pointer-events:none; transform:translateY(18px);
  transition:opacity .38s ease, transform .38s cubic-bezier(.22,1,.36,1);
}
.plakwa.aan{opacity:1; pointer-events:auto; transform:translateY(0)}
.plakwa svg{width:25px; height:25px}
.plakwa[hidden]{display:none}
@media(min-width:901px){ .plakwa{right:26px; bottom:88px} }
@media(max-width:900px){
  /* sticky rij: zwarte pill iets naar links zodat de wa-cirkel ernaast past */
  .plakcta{left:calc(50% - 30px)}
}

/* resultaat: prijsregel i.p.v. AI-kaart */
.prijsregel{margin:0 0 20px; padding:16px 0 0; border-top:1px solid var(--veld)}
.prijsregel b{display:block; font-size:1.35rem; font-weight:700; letter-spacing:-.02em}
.prijsregel span{display:block; margin-top:4px; font-size:.83rem; color:var(--tekst-2); line-height:1.55; max-width:52ch}

/* schakel boven de resultaatvideo (alleen bij 'allebei') */
.vidschakel{display:flex; gap:8px; margin:0 0 12px}
.vidschakel__knop{
  font-family:var(--f); font-weight:600; font-size:.85rem; cursor:pointer;
  padding:9px 18px; border-radius:999px; border:1px solid var(--rand);
  background:#fff; color:var(--tekst-2); transition:all .15s;
}
.vidschakel__knop.actief{background:var(--tekst); color:#fff; border-color:var(--tekst)}
.vidschakel[hidden]{display:none}

/* dashboard-kop op mobiel: badge niet meer door de naam heen */
@media(max-width:560px){
  .dash__kop{flex-wrap:wrap; gap:10px}
  .dash__badge{order:3; width:max-content}
}

/* teambanner onder de werkwijze */
.teambanner{
  display:flex; gap:22px; align-items:center; max-width:760px; margin:44px auto 0;
  background:var(--veld); border-radius:var(--straal); padding:20px 26px 20px 20px;
}
.teambanner__beeld{width:150px; height:auto; flex:none; border-radius:14px}
.teambanner b{display:block; font-size:1.05rem; font-weight:700; margin-bottom:4px}
.teambanner p{margin:0; font-size:.92rem; color:var(--tekst-2); line-height:1.6}
@media(max-width:560px){
  .teambanner{flex-direction:column; align-items:flex-start; gap:14px}
  .teambanner__beeld{width:100%; max-width:240px}
}

/* ---------- centreringen (reviewronde) ---------- */
.agenda__knop{
  display:flex; width:100%; box-sizing:border-box; justify-content:center;
  text-align:center; white-space:normal; margin-top:4px;
}
.check__resultaat > p.klein{text-align:center}
.vidschakel{justify-content:center}
@media(min-width:701px){ .vidschakel{justify-content:flex-start} }

/* dashboard-tabs op smalle schermen: swipen, nooit uit het kader */
@media(max-width:560px){
  .dash__tabs{overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; margin:0 -4px; padding:0 4px 6px}
  .dash__tabs::-webkit-scrollbar{display:none}
  .dash__tab{flex:none}
}

/* ---------- klantenstrip v2: gelinkte profielen, gele premium-ring ---------- */
.klant{text-decoration:none; color:inherit; transition:transform .15s, box-shadow .15s, border-color .15s}
.klant:hover{transform:translateY(-2px); border-color:var(--geel); box-shadow:0 10px 26px rgba(27,27,27,.09)}
.klant i{position:relative; overflow:hidden; box-shadow:0 0 0 2px var(--geel), 0 0 0 4px #fff}
.klant i img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:50%}

/* reelkaarten: echte video's zodra de bestanden er staan */
.reelkaart__video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0}
.reelkaart__tag, .reelkaart__voet{z-index:2}

/* ---------- VSL-thumbnail met leven erin ---------- */
.rvideo--foto{padding:0; overflow:hidden}
.rvideo--foto img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0}
.anim .rvideo--foto img{animation:kenburns 16s ease-in-out infinite alternate}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.07)}}
.rvideo--foto::after{content:""; position:absolute; inset:0; background:linear-gradient(transparent 60%, rgba(0,0,0,.4)); z-index:1}
.rvideo--foto .rvideo__play{position:relative; z-index:2; box-shadow:0 12px 32px rgba(0,0,0,.45)}
.rvideo__chip{
  position:absolute; left:14px; bottom:12px; z-index:2;
  background:rgba(255,255,255,.94); color:var(--tekst);
  font-size:.75rem; font-weight:600; padding:6px 13px; border-radius:999px;
}

/* ---------- levende VSL-thumbnail (personal brands) ---------- */
.vslive{
  display:block; padding:0; text-align:left; overflow:hidden;
  background:#0B0B0B; container-type:inline-size;
}
.vslive__otto{position:absolute; right:-2%; bottom:0; height:104%; width:auto; z-index:0}
.vslive__in{position:relative; z-index:2; padding:5.5% 6% 6%; max-width:58%}
.vslive__in > b{
  display:block; color:#fff; font-weight:700; letter-spacing:-.02em; line-height:1.12;
  font-size:20px; font-size:5.6cqw;
}
.vslive__ond{position:relative; padding-bottom:.06em}
.vslive__ond::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:.1em;
  background:var(--geel); border-radius:2px; transform-origin:left; transform:scaleX(1);
}
.anim .vslive__ond::after{animation:streep 4.5s cubic-bezier(.22,1,.36,1) infinite}
@keyframes streep{0%{transform:scaleX(0)} 28%{transform:scaleX(1)} 82%{transform:scaleX(1)} 100%{transform:scaleX(0)}}
.vslive__sub{display:block; color:#C9C9C0; margin-top:2.5%; font-size:10px; font-size:2.7cqw; white-space:nowrap}
.vslive__avs{display:flex; gap:3.4%; margin-top:6%}
.av{position:relative; flex:none; width:10.5cqw; height:10.5cqw; min-width:34px; min-height:34px; max-width:54px; max-height:54px}
.av::before{
  content:""; position:absolute; inset:-7%; border-radius:50%;
  background:conic-gradient(#FEDA75,#FA7E1E,#D62976,#962FBF,#4F5BD5,#FEDA75);
}
.anim .av::before{animation:ringdraai 5s linear infinite}
@keyframes ringdraai{to{transform:rotate(1turn)}}
.av img{position:relative; z-index:1; width:100%; height:100%; border-radius:50%; border:3px solid #0B0B0B; box-sizing:border-box; object-fit:cover; display:block}
.anim .av{animation:avbob 3.8s ease-in-out infinite}
.av:nth-child(2){animation-delay:.4s} .av:nth-child(3){animation-delay:.8s}
.av:nth-child(4){animation-delay:1.2s} .av:nth-child(5){animation-delay:1.6s}
@keyframes avbob{0%,100%{transform:translateY(0)} 50%{transform:translateY(-6%)}}
.vslive .rvideo__play{
  position:absolute; left:57%; top:46%; z-index:3; margin:0;
  transform:translate(-50%,-50%); box-shadow:0 12px 32px rgba(0,0,0,.5);
}
.vslive .rvideo__chip{left:auto; right:14px}
.anim .vslive .rvideo__play{animation:playpuls2 2.4s ease-in-out infinite}
@keyframes playpuls2{0%,100%{transform:translate(-50%,-50%) scale(1)} 50%{transform:translate(-50%,-50%) scale(1.08)}}

/* ---------- VSL: origineel beeld, alleen de lijn leeft ---------- */
.vsl-orig img{animation:none !important} /* geen zoom: beeld blijft exact origineel */
.vsl-orig::after{display:none}
.vsl-lijn{
  position:absolute; z-index:2; background:var(--geel); border-radius:99px;
  transform-origin:left; transform:scaleX(1);
}
.anim .vsl-lijn{animation:streep 4.5s cubic-bezier(.22,1,.36,1) infinite}
.vsl-orig .rvideo__chip{left:auto; right:14px}

/* ---------- artikelen op mobiel: marges terug en rustiger lezen ---------- */
.wrap.artikel__body{padding-left:24px; padding-right:24px}
html{-webkit-text-size-adjust:100%; text-size-adjust:100%}
@media(max-width:700px){
  .wrap.artikel__body{padding:32px 18px 64px; gap:24px}
  .artikel__kop{padding:44px 0 26px}
  .artikel__kop h1{font-size:1.55rem}
  .artikel__meta{flex-wrap:wrap; row-gap:4px}
  .prose{font-size:.98rem; line-height:1.7}
  .prose .intro{font-size:1.03rem}
  .prose h2{font-size:1.25rem; margin:36px 0 12px}
  .prose h3{font-size:1.02rem}
  .toc{padding:16px}
  .prose table{min-width:440px; font-size:.85rem}
}

/* ---------- scan: zachte overgang tussen de vragen ---------- */
.check__paneel:not([hidden]){animation:paneelin .32s cubic-bezier(.22,1,.36,1)}
@keyframes paneelin{from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:none}}
.check__optie.gekozen{border-color:var(--tekst); background:var(--geel-bg); transform:translateY(-1px)}

/* ---------- resultaat: rustig opbouwen, video krijgt een echte entree ---------- */
.check__resultaat:not([hidden]) > *{animation:paneelin .4s cubic-bezier(.22,1,.36,1) backwards}
.check__resultaat:not([hidden]) > *:nth-child(1){animation-delay:.05s}
.check__resultaat:not([hidden]) > *:nth-child(2){animation-delay:.14s}
.check__resultaat:not([hidden]) > *:nth-child(3){animation-delay:.22s}
.check__resultaat:not([hidden]) > *:nth-child(4){animation-delay:.34s}
.check__resultaat:not([hidden]) > *:nth-child(5){animation-delay:.46s}
.check__resultaat:not([hidden]) > *:nth-child(6){animation-delay:.56s}
.check__resultaat:not([hidden]) .rvideos{animation-name:videoin; animation-duration:.55s}
@keyframes videoin{from{opacity:0; transform:translateY(16px) scale(.965)} to{opacity:1; transform:none}}
/* de foto zelf fadet in zodra hij geladen is; tot die tijd donker vlak */
.vsl-orig img{opacity:0; transition:opacity .5s ease}
.vsl-orig img.geladen{opacity:1}

/* ---------- dashboard voelt levend: panelen glijden, rijen druppelen binnen ---------- */
.dash__paneel:not([hidden]){animation:paneelin .35s cubic-bezier(.22,1,.36,1)}

/* content-, lead- en lesrijen verschijnen na elkaar, als een feed die net binnenkomt */
.dash__paneel:not([hidden]) .ckaart,
.dash__paneel:not([hidden]) .lead-rij,
.dash__paneel:not([hidden]) .les{animation:paneelin .45s cubic-bezier(.22,1,.36,1) backwards}
.dash__paneel:not([hidden]) .ckaart:nth-child(1), .dash__paneel:not([hidden]) .lead-rij:nth-child(1){animation-delay:.1s}
.dash__paneel:not([hidden]) .ckaart:nth-child(2), .dash__paneel:not([hidden]) .lead-rij:nth-child(2){animation-delay:.22s}
.dash__paneel:not([hidden]) .ckaart:nth-child(3), .dash__paneel:not([hidden]) .lead-rij:nth-child(3){animation-delay:.34s}
.dash__paneel:not([hidden]) .les:nth-child(3){animation-delay:.12s}
.dash__paneel:not([hidden]) .les:nth-child(4){animation-delay:.22s}
.dash__paneel:not([hidden]) .les:nth-child(5){animation-delay:.32s}
.dash__paneel:not([hidden]) .les:nth-child(6){animation-delay:.42s}

/* nieuwste lead krijgt een korte gele gloed: het voelt alsof hij n\u00fa binnenkomt */
.dash__paneel:not([hidden]) .lead-rij:first-child{animation-name:leadin}
@keyframes leadin{
  0%{opacity:0; transform:translateY(12px); background:transparent}
  35%{opacity:1; transform:none; background:var(--geel-bg); border-radius:12px}
  100%{background:transparent}
}

/* trainingsbalk vult zich zodra de tab opent */
.cursus__balk i{transform-origin:left}
.dash__paneel:not([hidden]) .cursus__balk i{animation:balkvul 1s .25s cubic-bezier(.22,1,.36,1) backwards}
@keyframes balkvul{from{transform:scaleX(0)}}

/* statuspills komen net na hun rij mee */
.dash__paneel:not([hidden]) .spil{animation:paneelin .4s .45s cubic-bezier(.22,1,.36,1) backwards}

/* ---------- inlogscherm: jouw eigen omgeving, je ziet jezelf binnenkomen ---------- */
.venster{position:relative}
.inlog{
  position:absolute; left:0; right:0; top:41px; bottom:0; z-index:6; background:#fff;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px; padding:30px; text-align:center;
  transition:opacity .6s ease, transform .6s cubic-bezier(.22,1,.36,1);
}
.inlog[hidden]{display:none}
.inlog__welkom{margin:4px 0 0; font-size:1.02rem; color:var(--tekst-2)}
.inlog__welkom b{color:var(--tekst)}
.inlog__veld{
  width:min(300px, 100%); padding:12px 16px; border:1px solid var(--rand); border-radius:12px;
  font-size:.9rem; color:var(--tekst-2); background:var(--veld); text-align:left;
}
.inlog__knop{padding:12px 34px; font-size:.9rem; transition:transform .2s}
.inlog--druk .inlog__knop{transform:scale(.95); background:#333}
.inlog--weg{opacity:0; transform:translateY(-14px); pointer-events:none}

/* ---------- notitie met geel pijltje bij het inlogscherm ---------- */
.notitie{
  position:absolute; z-index:3; top:-38px; left:2px; pointer-events:none;
  display:flex; flex-direction:column; align-items:flex-start; gap:0;
}
.notitie span{font-weight:600; font-style:italic; font-size:1.05rem; letter-spacing:.01em; transform:rotate(-4deg)}
.notitie svg{width:42px; height:42px; margin:2px 0 0 118px; transform:rotate(6deg)}
@media(min-width:1100px){ .notitie{left:-42px; top:-30px} .notitie svg{margin-left:132px} }
@media(max-width:700px){
  .notitie{position:static; align-items:center; margin-bottom:4px}
  .notitie span{font-size:.98rem}
  .notitie svg{width:34px; height:34px; margin:0 0 0 46px}
}

/* inlogscherm: nog cleaner */
.inlog{gap:16px}
.inlog img{margin-bottom:2px}
.inlog__welkom{font-size:1.08rem}
.inlog__veld{box-shadow:inset 0 1px 3px rgba(27,27,27,.04)}
.inlog__knop{padding:13px 40px}

/* ---------- gesprek-route: agenda eerst, video en prijs daaronder ---------- */
.resultaat--gesprek{display:flex; flex-direction:column}
.resultaat--gesprek > h3{order:1}
.resultaat--gesprek > .agenda{order:2; margin-bottom:20px}
.resultaat--gesprek > .check__vintro{order:3}
.resultaat--gesprek > .vidschakel{order:4}
.resultaat--gesprek > .rvideos{order:5}
.resultaat--gesprek > .prijsregel{order:6}
.resultaat--gesprek > .klein, .resultaat--gesprek > p{order:7}

/* verborgen scanpanelen kunnen nooit doorschijnen, wat voor klasse er ook op staat */
.check__paneel[hidden]{display:none !important}

/* intro boven de video */
.check__vintro{margin:0 0 12px; font-size:.9rem; color:var(--tekst-2); line-height:1.6; max-width:56ch}
.check__vintro:empty{display:none}

/* ---------- feedbackronde: visuals vraag 1, agenda-punten, autofill, video-crop ---------- */
.check__opties--vis .check__optie{flex-direction:row; align-items:center; gap:16px}
.check__opties--vis .ot{display:flex; flex-direction:column; gap:2px; text-align:left}
.ovis{
  width:52px; height:52px; flex:none; border-radius:14px; background:var(--veld);
  display:inline-flex; align-items:center; justify-content:center; font-style:normal;
}
.ovis svg{width:34px; height:34px}

.agenda__punten{list-style:none; margin:0 0 14px; padding:0; counter-reset:ap; display:flex; flex-direction:column; gap:7px}
.agenda__punten li{
  counter-increment:ap; position:relative; padding-left:30px;
  font-size:.86rem; color:var(--tekst-2); line-height:1.5;
}
.agenda__punten li::before{
  content:counter(ap); position:absolute; left:0; top:1px; width:20px; height:20px;
  background:var(--geel-bg); color:#7A5E00; border-radius:50%; font-size:.68rem; font-weight:700;
  display:inline-flex; align-items:center; justify-content:center;
}

/* autofill: nooit witte tekst in de velden */
input:-webkit-autofill, input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--tekst);
  -webkit-box-shadow:0 0 0 1000px #fff inset;
  transition:background-color 9999s ease-out;
}

/* video-thumbnail: breder gecropt zodat hij bij de sectie hoort */
@media(min-width:561px){ .rvideos .rvideo{aspect-ratio:21/10} }

/* ---------- footer: inlog voor klanten ---------- */
.footer__inlog{
  display:inline-flex; align-items:center; gap:7px; margin-top:6px;
  font-weight:600; color:var(--tekst) !important;
}
.footer__inlog svg{width:15px; height:15px; color:#B98F00}
.footer__inlog:hover svg{color:var(--tekst)}

/* ---------- kleine fixes: letters strak in cirkels, prijsuitleg ---------- */
.zweef__avatar, .zweef__bol, .lead-rij__avatar, .dash__logo, .klant i{line-height:1}
.zweef__bol{position:relative}
.zweef__bol svg{position:absolute; inset:0; margin:auto; width:15px; height:15px}
.prijsuitleg{margin-top:10px}
.prijsuitleg summary{cursor:pointer; font-size:.85rem; font-weight:600; color:var(--tekst-2)}
.prijsuitleg summary:hover{color:var(--tekst)}
.prijsuitleg p{margin:8px 0 0; font-size:.85rem; color:var(--tekst-2); line-height:1.6; max-width:54ch}

/* ---------- artikel-CTA's: knoptekst altijd zichtbaar, WhatsApp in eigen kleur ---------- */
.prose .btn--geel, .prose .btn--zwart, .artikel-cta .btn--geel, .artikel-cta .btn--zwart{color:#fff}
a.btn--wa, a.btn--wa[href*="wa.me"]{background:#25D366; color:#fff; border-color:transparent}
a.btn--wa:hover, a.btn--wa[href*="wa.me"]:hover{background:#1FB558; color:#fff}
.prose a.btn--wa, .artikel-cta a.btn--wa{color:#fff}


/* ================= FORMATS (drieluik) ================= */
.formats2__sub{color:var(--tekst-2); max-width:560px; margin:10px auto 0}
.fs-avatar{width:30px; height:30px; border-radius:50%; background:var(--geel); color:#1B1B1B; font-weight:700; font-size:11px; display:inline-flex; align-items:center; justify-content:center; flex:none}
.drie{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:38px}
.fk{background:#fff; border:1px solid var(--rand); border-radius:20px; overflow:hidden; box-shadow:var(--schaduw); display:flex; flex-direction:column; transition:transform .35s, box-shadow .35s}
.fk:hover{transform:translateY(-6px); box-shadow:0 22px 48px rgba(27,27,27,.14)}
.fk__vis{position:relative; height:225px; flex:none}
.fk__body{padding:18px 20px 20px; display:flex; flex-direction:column; flex:1}
.fk__body h3{font-size:19px; margin:0}
.fk__body p{font-size:14.5px; color:var(--tekst-2); line-height:1.65; margin:8px 0 14px}
.fk__chips{display:flex; gap:8px; flex-wrap:wrap; margin-top:auto}
.fk__chips i{font-style:normal; font-size:12px; font-weight:600; background:var(--veld); border:1px solid var(--rand); border-radius:999px; padding:3px 11px}
/* visual: short */
.fk__vis--short{background:linear-gradient(170deg,#2E2E28,#111)}
.fk__tag{position:absolute; top:14px; left:14px; background:rgba(255,255,255,.14); color:#fff; font-size:11.5px; font-weight:600; border-radius:999px; padding:3px 11px}
.fk__hook{position:absolute; left:16px; right:16px; bottom:54px; color:#fff; font-weight:700; font-size:19px; line-height:1.32}
.fk__hook em{font-style:normal; box-shadow:inset 0 -9px 0 rgba(255,212,0,.85)}
.fk__voet{position:absolute; left:16px; bottom:16px; display:flex; align-items:center; gap:8px; color:#fff; font-size:12px}
.fk__voet .fs-avatar{width:24px; height:24px; font-size:9px}
.fk__balk{position:absolute; left:0; right:0; bottom:0; height:3px; background:rgba(255,255,255,.18)}
.fk__balk i{display:block; height:100%; width:38%; background:var(--geel); animation:fkbalk 6s linear infinite}
@keyframes fkbalk{from{width:0}to{width:100%}}
/* visual: long */
.fk__vis--long{background:linear-gradient(160deg,#26261F 10%,#111 90%)}
.fk__kicker{position:absolute; top:14px; left:14px; background:var(--geel); color:#1B1B1B; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.6px; border-radius:6px; padding:3px 9px}
.fk__titel{position:absolute; left:16px; bottom:18px; right:76px; color:#fff; font-weight:700; font-size:20px; line-height:1.28}
.fk__duur{position:absolute; right:12px; bottom:12px; background:rgba(0,0,0,.75); color:#fff; font-size:11.5px; font-weight:600; border-radius:6px; padding:2px 7px}
.fk__play{position:absolute; right:18px; top:44%; transform:translateY(-50%); width:48px; height:48px; border-radius:50%; background:var(--geel); display:flex; align-items:center; justify-content:center; padding-left:3px; box-shadow:0 0 0 8px rgba(255,212,0,.16)}
/* visual: ads */
.fk__vis--ads{background:var(--geel); padding:16px; display:flex; flex-direction:column}
.fk__adkop{display:flex; gap:9px; align-items:center}
.fk__adkop .fs-avatar{background:#1B1B1B; color:#fff; width:26px; height:26px; font-size:9.5px}
.fk__adkop b{display:block; font-size:12.5px}
.fk__adkop span{display:block; font-size:10.5px; opacity:.7}
.fk__adhook{font-size:21px; font-weight:700; line-height:1.3; margin:auto 0; padding:10px 0}
.fk__adcta{align-self:flex-start; background:var(--zwart); color:#fff; border-radius:10px; padding:8px 15px; font-size:12.5px; font-weight:700}
@media (max-width:900px){
  .drie{grid-template-columns:1fr; gap:14px; margin-top:26px}
  .fk__vis{height:190px}
  .fk__body{padding:15px 16px 17px}
}
@media (prefers-reduced-motion: reduce){ .fk__balk i{animation:none; width:38%} }

/* klantgezichten in de scan */
.oklant{display:flex; align-items:center; justify-content:center; padding-left:9px}
.oklant img{width:38px; height:38px; border-radius:50%; object-fit:cover; margin-left:-9px; box-shadow:0 0 0 2px var(--geel), 0 0 0 4px #fff}

/* Otto bij het agendablok */
.agenda__met{display:flex; align-items:center; gap:11px; margin-bottom:12px}
.agenda__met img{width:44px; height:44px; border-radius:50%; object-fit:cover; box-shadow:0 0 0 2px var(--geel), 0 0 0 4px #fff}
.agenda__met b{display:block; font-size:14px}
.agenda__met span{display:block; font-size:12px; color:var(--tekst-2)}

/* tijdlabels werkwijze */
.stapkaart__kop{position:relative}
.staptijd{position:absolute; right:0; top:2px; font-style:normal; font-size:11.5px; font-weight:700; color:#7A5E00; background:var(--geel-bg); border-radius:999px; padding:3px 10px}

/* hero gezichtenrij */
.hero__proof{display:flex; align-items:center; gap:12px; margin-top:14px}
.hero__gezichten{display:flex; padding-left:8px; flex:none}
.hero__gezichten img{width:30px; height:30px; border-radius:50%; object-fit:cover; margin-left:-8px; box-shadow:0 0 0 2px var(--geel), 0 0 0 3px #fff}
.hero__proof .hero__voorwie{margin:0; font-size:13.5px}
@media (max-width:900px){ .hero__proof{justify-content:center} .hero__proof .hero__voorwie{text-align:left; max-width:250px} }

/* mix-avatar (bedrijf + gezicht) in de scan */
.oklant--mix em{font-style:normal; width:20px; height:20px; border-radius:50%; background:var(--geel); color:#1B1B1B; font-weight:700; font-size:13px; display:inline-flex; align-items:center; justify-content:center; margin:0 2px 0 -4px; z-index:1; box-shadow:0 0 0 2px #fff}
/* foto-avatars in dashboard-demo */
.zweef__avatar--foto,.lead-rij__avatar--foto{object-fit:cover; padding:0}
img.zweef__avatar{width:34px; height:34px; border-radius:50%}
img.lead-rij__avatar{width:36px; height:36px; border-radius:50%}
/* views-badge op reelkaarten (verborgen zolang leeg) */
.reelkaart__views{position:absolute; right:12px; top:12px; background:rgba(0,0,0,.72); color:#fff; font-size:12px; font-weight:700; border-radius:999px; padding:4px 11px; backdrop-filter:blur(3px)}
.reelkaart__views:empty{display:none}
.reelkaart__views::before{content:"\25B6\FE0E"; font-size:9px; margin-right:5px; color:var(--geel)}

/* popup: opgefrist + dank-animatie */
.popup__kaart{padding-top:26px}
.popup__icoon{width:46px; height:46px; border-radius:14px; background:var(--geel); display:inline-flex; align-items:center; justify-content:center; margin-bottom:14px; box-shadow:0 8px 20px rgba(255,212,0,.35)}
[data-popup-stap][hidden]{display:none !important}
.popup__dank[hidden]{display:none !important}
.popup__dank{display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px; padding:22px 6px 14px; animation:dankin .4s ease both}
.popup__dank b{font-size:1.15rem}
.popup__dank > span:last-child{font-size:.9rem; color:var(--tekst-2); max-width:30ch; line-height:1.6}
.popup__vink{width:72px; height:72px; border-radius:50%; background:#EAF7EE; display:flex; align-items:center; justify-content:center; margin-bottom:8px; animation:vinkpop .45s cubic-bezier(.34,1.56,.64,1) both}
.vink__cirkel{stroke-dasharray:145; stroke-dashoffset:145; animation:vinkteken .55s ease-out .15s forwards}
.vink__pad{stroke-dasharray:34; stroke-dashoffset:34; animation:vinkteken .3s ease-out .6s forwards}
@keyframes vinkteken{to{stroke-dashoffset:0}}
@keyframes vinkpop{from{transform:scale(.6); opacity:0}to{transform:scale(1); opacity:1}}
@keyframes dankin{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}}
@media (prefers-reduced-motion: reduce){
  .popup__dank,.popup__vink{animation:none}
  .vink__cirkel,.vink__pad{animation:none; stroke-dashoffset:0}
}

/* ================= masterclass: De Multiplier ================= */
.mc__hero{padding-bottom:72px}
.mc__hero h1{font-size:clamp(1.9rem,4.6vw,3rem); line-height:1.15; margin:6px 0 0}
.mc__speler{position:relative; max-width:640px; margin:38px auto 0; cursor:pointer}
.mc__scherm{position:relative; aspect-ratio:16/9; border-radius:20px; overflow:hidden; background:linear-gradient(160deg,#26261F 10%,#111 90%); box-shadow:0 30px 70px rgba(0,0,0,.45); transition:transform .35s}
.mc__speler:hover .mc__scherm{transform:translateY(-4px)}
.mc__titel{position:absolute; left:20px; bottom:20px; right:96px; color:#fff; font-weight:700; font-size:22px; line-height:1.3}
.mc__onderschrift{text-align:center; font-size:.88rem; color:rgba(255,255,255,.65); margin:14px auto 0; max-width:44ch}
.mc__lessen{display:flex; flex-direction:column; gap:16px; margin-top:34px}
.mc__playbook{background:#fff; border:1px solid var(--rand); border-radius:22px; padding:34px 32px 28px; box-shadow:var(--schaduw); text-align:left}
.mc__playbook .popup__icoon{margin-bottom:16px}
[data-playbook-stap][hidden]{display:none !important}
@media (max-width:900px){
  .mc__titel{font-size:17px; right:76px}
  .mc__playbook{padding:24px 20px 22px}
}
/* masterclass-band op de homepage */
.mcband{padding:64px 0}
.mcband__in{display:flex; align-items:center; justify-content:space-between; gap:36px}
.mcband__actie{display:flex; flex-direction:column; align-items:flex-start; gap:10px; flex:none}
.mcband .btn--geel{background:var(--geel); color:#1B1B1B}
.mcband .btn--geel:hover{background:#EFC700}
@media (max-width:900px){ .mcband__in{flex-direction:column; align-items:flex-start; gap:20px} }

/* masterclass: profielkaart */
.mcprofiel{background:#1B1B1B; color:#fff; border-radius:22px; padding:24px; max-width:440px; margin:34px auto 0; box-shadow:0 30px 70px rgba(27,27,27,.25)}
.mcprofiel__kop{display:flex; gap:16px; align-items:center}
.mcprofiel__avatar{width:64px; height:64px; border-radius:50%; background:var(--geel); color:#1B1B1B; font-weight:700; font-size:20px; display:flex; align-items:center; justify-content:center; flex:none; box-shadow:0 0 0 3px #1B1B1B, 0 0 0 5px var(--geel)}
.mcprofiel__stats > b{display:block; font-size:16px; margin-bottom:6px}
.mcprofiel__stats > div{display:flex; gap:18px; font-size:12.5px; color:rgba(255,255,255,.65)}
.mcprofiel__stats > div b{display:block; color:#fff; font-size:15px}
.mcprofiel__bio{font-size:13px; line-height:1.6; color:rgba(255,255,255,.85); margin:14px 0}
.mcprofiel__dash{background:rgba(255,255,255,.08); border-radius:14px; padding:13px 16px; margin-bottom:14px}
.mcprofiel__dash b{display:block; font-size:13.5px; margin-bottom:2px}
.mcprofiel__dash span{font-size:13px; color:rgba(255,255,255,.75)}
.ondergeel{font-style:normal; font-weight:700; color:#fff; position:relative; white-space:nowrap}
.ondergeel::after{content:""; position:absolute; left:0; right:0; bottom:-3px; height:4px; border-radius:99px; background:var(--geel); transform:scaleX(0); transform-origin:left; animation:ondergeel .8s ease-out .5s forwards}
@keyframes ondergeel{to{transform:scaleX(1)}}
.mcprofiel__knoppen{display:flex; gap:10px}
.mcprofiel__knoppen span{flex:1; text-align:center; background:rgba(255,255,255,.1); border-radius:10px; padding:9px 0; font-size:13px; font-weight:600}

/* masterclass: testdiagram */
.mcdiag{display:grid; grid-template-columns:250px 1fr; gap:28px; align-items:center; background:#1B1B1B; border-radius:22px; padding:30px; margin:34px 0 22px}
.mcdiag__callouts{display:flex; flex-direction:column; gap:12px}
.mcdiag__c{background:rgba(255,255,255,.07); border-left:3px solid var(--geel); border-radius:12px; padding:12px 15px; color:#fff}
.mcdiag__c b{display:block; font-size:14px}
.mcdiag__c span{display:block; font-size:12px; color:rgba(255,255,255,.6); line-height:1.5; margin-top:2px}
.mcdiag__foons{display:flex; gap:16px; justify-content:center}
.mcfoon{background:#26261F; border:1px solid rgba(255,255,255,.1); border-radius:18px; padding:12px; width:130px; animation:mcfoonzweef 5s ease-in-out infinite}
.mcfoon--mid{animation-delay:1.6s; transform:translateY(-8px)}
.mcfoon:last-child{animation-delay:3.2s}
@keyframes mcfoonzweef{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.mcfoon--mid{animation-name:mcfoonzweefmid}
@keyframes mcfoonzweefmid{0%,100%{transform:translateY(-8px)}50%{transform:translateY(-15px)}}
.mcfoon__kop{display:block; text-align:center; color:rgba(255,255,255,.55); font-size:10px; margin-bottom:8px}
.mcfoon__scherm{aspect-ratio:9/13; border-radius:12px; background:linear-gradient(165deg,#3A3A33,#161613); display:flex; align-items:flex-end; padding:10px}
.mcfoon__scherm b{color:#fff; font-size:11.5px; line-height:1.35; letter-spacing:.02em}
.mcfoon__scherm em{font-style:normal; color:var(--geel)}
.mcfoon__rij{display:flex; align-items:center; justify-content:space-between; margin-top:9px; color:rgba(255,255,255,.75); font-size:10.5px}
.mcfoon__toggle{position:relative; width:28px; height:16px; border-radius:99px; background:var(--geel); display:inline-block}
.mcfoon__toggle::after{content:""; position:absolute; top:2px; right:2px; width:12px; height:12px; border-radius:50%; background:#1B1B1B}
@media (max-width:900px){
  .mcdiag{grid-template-columns:1fr; gap:20px; padding:20px}
  .mcdiag__foons{gap:10px}
  .mcfoon{width:min(30%,120px); padding:9px}
  .mcprofiel{padding:20px}
  .mcprofiel__stats > div{gap:12px}
}
@media (prefers-reduced-motion: reduce){
  .mcfoon,.mcfoon--mid{animation:none}
  .ondergeel::after{animation:none; transform:scaleX(1)}
}
/* masterclass: lessen recht onder elkaar, geen tijdlijn */
.mc__lessen .stapkaart{width:100% !important; max-width:none !important; margin:0 !important; transform:none !important}
.mc__lessen .stapkaart::before,.mc__lessen .stapkaart::after{display:none !important}

/* masterclass: binnenkort-modus */
.mc__soon{position:absolute; left:50%; top:44%; transform:translate(-50%,-50%); background:var(--geel); color:#1B1B1B; font-weight:700; font-size:14px; border-radius:999px; padding:11px 22px; white-space:nowrap; animation:mcsoon 2.4s ease-out infinite}
@keyframes mcsoon{0%{box-shadow:0 0 0 0 rgba(255,212,0,.45)}70%{box-shadow:0 0 0 20px rgba(255,212,0,0)}100%{box-shadow:0 0 0 0 rgba(255,212,0,0)}}
.mc__speler{cursor:default}
.mcnotify{max-width:440px; margin:20px auto 0; text-align:center}
.mcnotify__form{display:flex; gap:10px}
.mcnotify__form input{flex:1; min-width:0; font-family:inherit; font-size:.95rem; padding:13px 16px; border:1px solid rgba(255,255,255,.25); border-radius:12px; background:rgba(255,255,255,.06); color:#fff}
.mcnotify__form input::placeholder{color:rgba(255,255,255,.45)}
.mcnotify__form button{font-family:inherit; font-size:.9rem; font-weight:700; background:var(--geel); color:#1B1B1B; border:0; border-radius:12px; padding:13px 18px; cursor:pointer; white-space:nowrap}
.mcnotify__form button:hover{background:#EFC700}
.mcnotify__dank{display:flex; align-items:center; justify-content:center; gap:10px; color:#fff; font-size:.95rem; padding:12px 0; animation:dankin .4s ease both}
[data-notify-stap][hidden],.mcnotify__dank[hidden]{display:none !important}
@media (max-width:520px){ .mcnotify__form{flex-direction:column} }
@media (prefers-reduced-motion: reduce){ .mc__soon{animation:none} }

/* ================= FORMATS (volle rijen) ================= */
.frijen{display:flex; flex-direction:column; gap:26px; margin-top:40px}
.frij{display:grid; grid-template-columns:1.1fr 1fr; gap:44px; align-items:center; background:#fff; border:1px solid var(--rand); border-radius:24px; padding:38px 42px; box-shadow:var(--schaduw)}
.frij--omgekeerd .frij__vis{order:2}
.frij--omgekeerd .frij__tekst{order:1}
.frij__nr{font-weight:700; font-size:13px; color:#B9B9B0; letter-spacing:.06em}
.frij__tekst h3{font-size:24px; margin:6px 0 10px}
.frij__tekst p{color:var(--tekst-2); line-height:1.7; margin:0 0 16px}
.frij__chips{display:flex; gap:8px; flex-wrap:wrap}
.frij__chips i{font-style:normal; font-size:12.5px; font-weight:600; background:var(--veld); border:1px solid var(--rand); border-radius:999px; padding:4px 12px}

/* anatomie (short form) */
.sfoon{position:relative; aspect-ratio:9/15; border-radius:26px; background:linear-gradient(170deg,#2E2E28,#111); box-shadow:0 18px 44px rgba(27,27,27,.18); overflow:hidden; transition:transform .35s, box-shadow .35s}
.sfoon:hover{transform:translateY(-8px); box-shadow:0 26px 54px rgba(27,27,27,.24)}
.anat{position:relative; width:min(760px,100%); display:flex; justify-content:center; padding:10px 0 6px}
.sfoon--solo{width:min(258px,68vw)}
.sfoon__onder{position:absolute; left:16px; right:16px; bottom:56px; color:rgba(255,255,255,.72); font-size:12px}
.sfoon--solo .sfoon__hook{bottom:88px}
.acall{position:absolute; background:#fff; border:1px solid var(--rand); border-radius:14px; padding:10px 14px; box-shadow:var(--schaduw); max-width:215px}
.acall b{display:block; font-size:14px}
.acall span{display:block; font-size:12px; color:var(--tekst-2); line-height:1.45}
.acall::before{content:""; position:absolute; top:50%; width:34px; border-top:2px solid var(--geel)}
.acall::after{content:""; position:absolute; top:50%; margin-top:-4px; width:8px; height:8px; border-radius:50%; background:var(--geel)}
.acall--1{left:0; top:12%}
.acall--2{right:0; top:26%}
.acall--3{left:12px; bottom:20%}
.acall--4{right:12px; bottom:6%}
.acall--1::before,.acall--3::before{right:-34px}
.acall--1::after,.acall--3::after{right:-40px}
.acall--2::before,.acall--4::before{left:-34px}
.acall--2::after,.acall--4::after{left:-40px}
.sfoon{position:relative; aspect-ratio:9/15; border-radius:26px; background:linear-gradient(170deg,#2E2E28,#111); box-shadow:0 18px 44px rgba(27,27,27,.18); overflow:hidden; transition:transform .35s, box-shadow .35s}
.sfoon:hover{transform:translateY(-8px); box-shadow:0 26px 54px rgba(27,27,27,.24)}
.sfoon--mid{transform:translateY(-16px) scale(1.04)}
.sfoon--mid:hover{transform:translateY(-24px) scale(1.04)}
.sfoon__tag{position:absolute; top:14px; left:14px; background:rgba(255,255,255,.14); color:#fff; font-size:11.5px; font-weight:600; border-radius:999px; padding:3px 11px; backdrop-filter:blur(4px)}
.sfoon__hook{position:absolute; left:16px; right:16px; bottom:64px; color:#fff; font-weight:700; font-size:19px; line-height:1.32}
.sfoon__hook em{font-style:normal; box-shadow:inset 0 -9px 0 rgba(255,212,0,.85)}
.sfoon__voet{position:absolute; left:16px; bottom:18px; display:flex; align-items:center; gap:8px; color:#fff; font-size:12px}
.sfoon__voet .fs-avatar{width:24px; height:24px; font-size:9px}
.sfoon__balk{position:absolute; left:0; right:0; bottom:0; height:3px; background:rgba(255,255,255,.18)}
.sfoon__balk i{display:block; height:100%; width:38%; background:var(--geel)}
.sfoon--solo .sfoon__balk i{animation:fsbalk 6s linear infinite}
@keyframes fsbalk{from{width:0}to{width:100%}}


/* thumbnail-wall (long form) */
.fwall{display:grid; grid-template-columns:1.5fr 1fr; gap:14px}
.fwall__zij{display:grid; grid-template-rows:1fr 1fr; gap:14px}
.lthumb{position:relative; border-radius:18px; overflow:hidden; background:linear-gradient(160deg,#26261F 10%,#111 90%); min-height:150px; box-shadow:var(--schaduw); transition:transform .35s, box-shadow .35s}
.lthumb:hover{transform:translateY(-6px); box-shadow:0 22px 48px rgba(27,27,27,.2)}
.lthumb--groot{aspect-ratio:16/9}
.lthumb--licht{background:linear-gradient(160deg,#4A4638,#1E1C15)}
.lthumb__kicker{position:absolute; top:16px; left:16px; background:var(--geel); color:#1B1B1B; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.6px; border-radius:6px; padding:3px 9px}
.lthumb__titel{position:absolute; left:16px; bottom:58px; right:80px; color:#fff; font-weight:700; font-size:24px; line-height:1.22}
.lthumb--groot .lthumb__titel{font-size:30px; bottom:70px}
.fpaneel--long__zij .lthumb__titel{font-size:16.5px; bottom:16px; right:60px}
.lthumb__duur{position:absolute; right:12px; bottom:12px; background:rgba(0,0,0,.75); color:#fff; font-size:11.5px; font-weight:600; border-radius:6px; padding:2px 7px}
.lthumb__play{position:absolute; right:16px; top:50%; transform:translateY(-50%); width:52px; height:52px; border-radius:50%; background:var(--geel); display:flex; align-items:center; justify-content:center; padding-left:3px; box-shadow:0 0 0 9px rgba(255,212,0,.16)}
.lthumb__play--klein{width:36px; height:36px; box-shadow:0 0 0 6px rgba(255,212,0,.16)}
.lthumb__kanaal{position:absolute; left:16px; bottom:14px; display:flex; gap:10px; align-items:center; color:#fff}
.lthumb__kanaal b{display:block; font-size:13.5px}
.lthumb__kanaal span{display:block; font-size:11.5px; color:rgba(255,255,255,.65)}

.lthumb--groot{aspect-ratio:16/10}
/* creatives (ads) */
.fads{display:grid; grid-template-columns:1fr 1fr; gap:14px; position:relative}
.acre{position:relative; border-radius:18px; padding:16px; min-height:230px; display:flex; flex-direction:column; box-shadow:var(--schaduw); transition:transform .35s, box-shadow .35s}
.acre:hover{transform:translateY(-6px); box-shadow:0 22px 48px rgba(27,27,27,.16)}
.acre__kop{display:flex; gap:9px; align-items:center}
.acre__kop .fs-avatar{width:26px; height:26px; font-size:9.5px; box-shadow:0 0 0 2px rgba(27,27,27,.08)}
.acre__kop b{display:block; font-size:12.5px}
.acre__kop span{display:block; font-size:10.5px; opacity:.65}
.acre__hook{font-size:19px; font-weight:700; line-height:1.3; margin:auto 0; padding:14px 0}
.acre__cta{align-self:flex-start; background:var(--geel); border-radius:10px; padding:8px 14px; font-size:12.5px; font-weight:700}
.acre--geel{background:var(--geel)}
.acre--geel .acre__cta--zwart{background:var(--zwart); color:#fff}
.acre--zwart{background:#1B1B1B; color:#fff}
.acre--zwart .acre__kop span{opacity:.6}
.acre--wit{background:#fff; border:1px solid var(--rand)}
.acre--veld{background:var(--veld); border:1px solid var(--rand)}
.fpil--rij{position:absolute; top:-13px; right:-8px; background:#fff; border:1px solid var(--rand); border-radius:999px; padding:7px 14px; font-size:12px; font-weight:600; box-shadow:var(--schaduw); white-space:nowrap; z-index:2}
@media (max-width:980px){
  .frij{grid-template-columns:1fr; gap:22px; padding:22px 18px}
  .frij--omgekeerd .frij__vis{order:1}
  .frij--omgekeerd .frij__tekst{order:2}
  .frij__tekst h3{font-size:20px}
  .anat{flex-direction:column; align-items:center; gap:12px; padding-bottom:0}
  .sfoon--solo{width:min(220px,60vw)}
  .acall{position:static; max-width:none; width:100%}
  .acall::before,.acall::after{display:none}
  .anat .acall{display:flex; gap:8px; align-items:baseline; padding:9px 13px}
  .anat .acall b{font-size:13px; white-space:nowrap}
  .anat .acall span{font-size:11.5px}
  .fwall{grid-template-columns:1fr}
  .fwall__zij{grid-template-rows:none; gap:12px}
  .fwall__zij .lthumb{min-height:104px}
  .lthumb--groot .lthumb__titel{font-size:21px; bottom:58px}
  .acre{min-height:170px; padding:13px}
  .acre__hook{font-size:15px}
  .fpil--rij{top:-11px; right:2px; font-size:11px}
}

.sfoon__tag{position:absolute; top:14px; left:14px; background:rgba(255,255,255,.14); color:#fff; font-size:11.5px; font-weight:600; border-radius:999px; padding:3px 11px; backdrop-filter:blur(4px)}
.sfoon__hook{bottom:88px}
.sfoon__hook em{font-style:normal; box-shadow:inset 0 -9px 0 rgba(255,212,0,.85)}
.sfoon__voet{position:absolute; left:16px; bottom:18px; display:flex; align-items:center; gap:8px; color:#fff; font-size:12px}
.sfoon__voet .fs-avatar{width:24px; height:24px; font-size:9px}
.sfoon__balk{position:absolute; left:0; right:0; bottom:0; height:3px; background:rgba(255,255,255,.18)}
.sfoon__balk i{display:block; height:100%; width:38%; background:var(--geel)}
.sfoon__onder{position:absolute; left:16px; right:16px; bottom:56px; color:rgba(255,255,255,.72); font-size:12px}
.sfoon--solo .sfoon__hook{bottom:88px}
.sfoon--solo{width:min(258px,68vw)}
@keyframes fsbalk{from{width:0}to{width:100%}}
.sfoon--solo .sfoon__balk i{animation:fsbalk 6s linear infinite}.fwall__zij .lthumb__titel{font-size:16px; bottom:14px; right:58px}
.fwall__zij .lthumb{min-height:120px}

/* fijnslijpen formats-rijen */
.frij .anat{width:100%; min-height:440px; align-items:center}
.frij .sfoon--solo{width:212px}
.frij .sfoon__hook{font-size:16.5px; bottom:80px}
.frij .sfoon__onder{font-size:11px; bottom:52px}
.frij .acall{max-width:186px; padding:9px 13px}
.frij .acall b{font-size:13px}
.frij .acall span{font-size:11.5px}
.frij .acall--1{left:0; top:7%}
.frij .acall--2{right:0; top:24%}
.frij .acall--3{left:0; bottom:26%}
.frij .acall--4{right:0; bottom:3%}
.frij .acall::before{width:24px}
.frij .acall--1::before,.frij .acall--3::before{right:-24px}
.frij .acall--1::after,.frij .acall--3::after{right:-30px}
.frij .acall--2::before,.frij .acall--4::before{left:-24px}
.frij .acall--2::after,.frij .acall--4::after{left:-30px}
.frij .lthumb--groot .lthumb__titel{font-size:21px; bottom:54px; right:64px}
.frij .lthumb--groot{aspect-ratio:auto; min-height:100%}
.frij .fwall__zij .lthumb__titel{font-size:14px; right:56px}
.frij .lthumb__kanaal span{font-size:10.5px}
.frij .lthumb__duur{font-size:10.5px}
.fads{padding-top:10px}
.fpil--rij{top:-6px; right:4px}
@media (max-width:980px){
  .frij .anat{min-height:0}
  .frij .sfoon--solo{width:min(210px,58vw)}
  .frij .acall{max-width:none}
}
/* anatomie: callouts vrij van de tekstzones */
.frij .acall--1{top:16%}
.frij .acall--2{top:42%}
.frij .acall--3{bottom:46%}
.frij .acall--4{bottom:5%}
.frij .lthumb--groot .lthumb__titel{bottom:66px}
.frij .lthumb__kanaal{right:70px}
.frij .acall--2{top:36%}

/* long form als youtube-carrousel */
.ytrij{overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.ytrij__band{display:flex; gap:16px; width:max-content; animation:ytloop 36s linear infinite}
.ytrij:hover .ytrij__band{animation-play-state:paused}
@keyframes ytloop{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ytkaart{width:238px; flex:none}
.ytkaart__thumb{position:relative; aspect-ratio:16/9; border-radius:14px; overflow:hidden; box-shadow:var(--schaduw)}
.ytkaart__thumb .lthumb__kicker{top:10px; left:10px}
.ytkaart__thumb .lthumb__duur{right:8px; bottom:8px}
.ytkaart__info{display:flex; gap:10px; align-items:flex-start; padding:10px 2px 0}
.ytkaart__info .fs-avatar{width:26px; height:26px; font-size:9.5px}
.ytkaart__info b{display:block; font-size:13.5px; line-height:1.35; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical}
.ytkaart__info span:last-child{display:block; font-size:11.5px; color:var(--tekst-2); margin-top:2px}
@media (max-width:980px){
  .ytrij{overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; -webkit-mask-image:none; mask-image:none; padding-bottom:6px}
  .ytrij::-webkit-scrollbar{display:none}
  .ytrij__band{animation:none; width:max-content}
  .ytkaart{width:200px; scroll-snap-align:start}
  .ytrij__band .ytkaart:nth-child(n+6){display:none}
}
@media (prefers-reduced-motion: reduce){ .ytrij__band{animation:none} }
.frij__vis,.frij__tekst{min-width:0}
.frij--breed{display:block}
.frij--breed .frij__tekst{max-width:600px; margin-bottom:24px}
.frij--breed .frij__tekst p{margin-bottom:14px}

/* long form: een grote wisselende thumbnail */
.ytgroot{display:grid; position:relative}
.ytslide{grid-area:1/1; opacity:0; transition:opacity .7s ease; pointer-events:none}
.ytslide.actief{opacity:1; pointer-events:auto}
.ytslide__thumb{position:relative; aspect-ratio:16/9; border-radius:18px; overflow:hidden; box-shadow:0 22px 50px rgba(27,27,27,.22)}
.ytslide__titel{position:absolute; left:18px; bottom:18px; right:86px; color:#fff; font-weight:700; font-size:22px; line-height:1.28}
.ytslide__thumb .lthumb__play{right:18px; top:auto; bottom:16px; transform:none; width:46px; height:46px}
.ytslide__thumb .lthumb__duur{right:auto; left:18px; top:14px; bottom:auto; display:none}
.ytslide__thumb .lthumb__kicker{top:14px; left:14px}
.ytslide__thumb .lthumb__duur{display:block; position:absolute; right:14px; top:14px; left:auto; bottom:auto}
.ytslide .ytkaart__info{padding-top:12px}
.ytslide .ytkaart__info b{font-size:14.5px; -webkit-line-clamp:1}
.ytdots{position:absolute; right:4px; bottom:-24px; display:flex; gap:6px}
.ytdots i{width:7px; height:7px; border-radius:50%; background:#D9D9D2; transition:background .3s, transform .3s}
.ytdots i.actief{background:var(--geel); transform:scale(1.25)}
@media (max-width:980px){
  .ytslide__titel{font-size:17px; right:70px}
  .ytdots{bottom:-20px}
}

/* formats: knoppenmenu boven een paneel */
.fmenu{display:flex; gap:6px; background:var(--veld); border:1px solid var(--rand); border-radius:999px; padding:6px; width:max-content; margin:32px auto 26px}
.fmenu button{border:0; background:none; font:inherit; font-weight:600; font-size:14.5px; padding:10px 24px; border-radius:999px; cursor:pointer; color:var(--tekst-2); transition:color .25s, background .25s, box-shadow .25s}
.fmenu button:hover{color:var(--tekst)}
.fmenu button.actief{background:#fff; color:var(--tekst); box-shadow:0 4px 14px rgba(27,27,27,.10)}
.frijen .frij{display:none}
.frijen[data-f="0"] .frij:nth-of-type(1){display:grid; animation:fpin2 .45s ease both}
.frijen[data-f="1"] .frij:nth-of-type(2){display:grid; animation:fpin2 .45s ease both}
.frijen[data-f="2"] .frij:nth-of-type(3){display:grid; animation:fpin2 .45s ease both}
@keyframes fpin2{from{opacity:0; transform:translateY(10px)}to{opacity:1; transform:none}}
@media (max-width:600px){
  .fmenu{width:100%; justify-content:stretch; padding:5px}
  .fmenu button{flex:1; padding:9px 6px; font-size:13px}
}
@media (prefers-reduced-motion: reduce){ .frijen .frij{animation:none !important} }

/* masterclass: cover-kaarten (Devin-structuur, MS-stijl) */
.mccover{background:#1B1B1B; border-radius:24px; overflow:hidden; margin-top:22px}
.mccover .mcdiag{margin:0; border-radius:0; background:transparent; padding:30px 30px 6px}
.mccover__tekst{padding:20px 30px 28px}
.mccover__tekst h3{color:#fff; font-size:22px; margin:0 0 6px}
.mccover__tekst p{color:rgba(255,255,255,.6); margin:0; line-height:1.65; max-width:52ch}
.mcv{padding:28px 30px 8px}
.mcv__labels{display:flex; gap:12px; justify-content:center; margin-bottom:18px; flex-wrap:wrap}
.mcv__label{background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); color:#fff; font-size:12.5px; font-weight:600; border-radius:10px; padding:7px 14px}
.mcv__rij{display:flex; gap:14px; justify-content:center; align-items:center; flex-wrap:wrap}
.mcv__orig{position:relative}
.mcv__views{display:block; text-align:center; color:#fff; font-weight:700; font-size:13px; margin-top:8px}
.mcv__views--min{color:rgba(255,255,255,.5)}
.mcv__pijl{color:var(--geel); font-size:22px; font-weight:700}
.mcfoon__scherm--kort{aspect-ratio:9/11; display:flex; align-items:center; justify-content:center; text-align:center}
.mcfoon__scherm--kort b{font-size:15px}
.mcv__post{display:block; text-align:center; background:var(--geel); color:#1B1B1B; font-size:11px; font-weight:700; border-radius:8px; padding:5px 0; margin-top:8px}
.mcv__rij--duo{gap:26px}
.mcv__tussen{display:flex; flex-direction:column; gap:8px}
.mcv__tussen span{width:64px; height:8px; border-radius:99px; background:rgba(255,255,255,.12); position:relative; overflow:hidden}
.mcv__tussen span::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg,transparent,rgba(255,212,0,.55),transparent); transform:translateX(-100%); animation:mcvloop 2.6s ease-in-out infinite}
.mcv__tussen span:nth-child(2)::after{animation-delay:.3s}
.mcv__tussen span:nth-child(3)::after{animation-delay:.6s}
.mcv__tussen span:nth-child(4)::after{animation-delay:.9s}
@keyframes mcvloop{to{transform:translateX(100%)}}

/* in het playbook */
.mcbonus{display:grid; grid-template-columns:1.15fr 1fr; gap:40px; align-items:center; margin-top:36px}
.mcbonus__kaart{background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); border-radius:20px; padding:22px}
.mcbonus__kop{display:flex; gap:11px; align-items:center; margin-bottom:14px}
.mcbonus__kop b{display:block; color:#fff; font-size:15px}
.mcbonus__kop span{display:block; color:rgba(255,255,255,.55); font-size:12px}
.mcbonus__graf{width:100%; height:70px; margin-bottom:14px}
.mcbonus__sub{display:block; color:#fff; font-size:13px; margin:10px 0 6px}
.mcbonus__blur{color:rgba(255,255,255,.65); font-size:12.5px; margin:0 0 5px; filter:blur(3.5px); user-select:none; pointer-events:none}
.mcblijst{display:flex; flex-direction:column; gap:20px; align-items:center}
.mcblijst span{color:rgba(255,255,255,.28); font-size:21px; font-weight:600; transition:color .5s, transform .5s; white-space:nowrap}
.mcblijst span:nth-child(1){transform:rotate(-8deg) translateX(-16px)}
.mcblijst span:nth-child(2){transform:rotate(5deg) translateX(14px)}
.mcblijst span:nth-child(4){transform:rotate(-6deg) translateX(10px)}
.mcblijst span:nth-child(5){transform:rotate(7deg) translateX(-12px)}
.mcblijst span.actief{color:#fff; transform:none; font-size:24px}
.mcblijst span.actief::before{content:""; display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--geel); margin-right:10px; vertical-align:3px}

/* grote cta-pill */
.mc__cta{display:inline-block; background:#fff; color:#1B1B1B; font-weight:700; font-size:17px; border-radius:999px; padding:16px 44px; box-shadow:0 0 34px rgba(255,255,255,.35); transition:transform .25s, box-shadow .25s; text-decoration:none}
.mc__cta:hover{transform:translateY(-2px); box-shadow:0 0 46px rgba(255,255,255,.5)}

@media (max-width:900px){
  .mccover .mcdiag{padding:20px 16px 4px}
  .mccover__tekst{padding:16px 18px 22px}
  .mccover__tekst h3{font-size:19px}
  .mcv{padding:20px 14px 6px}
  .mcv__rij .mcfoon{width:min(24%,110px); padding:8px}
  .mcv__rij--duo .mcfoon{width:min(34%,130px)}
  .mcfoon__scherm--kort b{font-size:13px}
  .mcbonus{grid-template-columns:1fr; gap:26px}
  .mcblijst span{font-size:17px}
  .mcblijst span.actief{font-size:20px}
}
@media (prefers-reduced-motion: reduce){ .mcv__tussen span::after{animation:none} }

/* bonussen: draaiende kaarten */
.mcbonus__kaarten{display:grid}
.mcbonus__kaarten .mcbonus__kaart{grid-area:1/1; opacity:0; transform:translateY(8px); transition:opacity .5s ease, transform .5s ease; pointer-events:none}
.mcbonus__kaarten .mcbonus__kaart.actief{opacity:1; transform:none; pointer-events:auto}
.mcblijst span{cursor:pointer}
.mchooks{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.mchook{border-radius:12px; padding:10px; border:1px solid rgba(255,255,255,.09)}
.mchook--a{background:rgba(80,120,255,.10)}
.mchook--b{background:rgba(255,80,80,.10)}
.mchook--c{background:rgba(60,200,120,.10)}
.mchook--d{background:rgba(180,100,255,.10)}
.mchook > span{display:block; color:rgba(255,255,255,.6); font-size:10.5px; margin-bottom:6px}
.mchook__thumb{border-radius:8px; background:linear-gradient(165deg,#33332C,#141412); padding:14px 10px; margin-bottom:6px}
.mchook__thumb b{color:#fff; font-size:11px; line-height:1.35}
.mchook__thumb em{font-style:normal; color:var(--geel)}
.mchook > i{display:block; font-style:normal; color:#fff; font-weight:700; font-size:11px; margin-bottom:4px}
.mchook .mcbonus__blur{font-size:10.5px; margin:0}
.mcrooster{display:flex; flex-direction:column; gap:12px}
.mcrooster__rij{display:flex; gap:12px; align-items:flex-start; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:11px 14px}
.mcrooster__rij i{width:9px; height:9px; border-radius:50%; background:var(--geel); flex:none; margin-top:5px; box-shadow:0 0 0 4px rgba(255,212,0,.15)}
.mcrooster__rij i.stil{background:rgba(255,255,255,.3); box-shadow:none}
.mcrooster__rij b{display:block; color:#fff; font-size:13px}
.mcrooster__rij span{display:block; color:rgba(255,255,255,.6); font-size:12px}
.mccovers3{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
.mccover3{border-radius:12px; background:linear-gradient(165deg,#33332C,#141412); border:1px solid rgba(255,255,255,.09); padding:18px 10px 12px; text-align:center}
.mccover3 b{display:block; color:#fff; font-size:12px; line-height:1.35; margin-bottom:10px}
.mccover3 em{font-style:normal; color:var(--geel)}
.mccover3 .mcbonus__blur{font-size:10.5px; margin:0}
.mccheck{display:flex; flex-direction:column; gap:9px}
.mccheck__rij{display:flex; gap:10px; align-items:center; color:rgba(255,255,255,.85); font-size:13px}
.mccheck__rij span{width:20px; height:20px; border-radius:50%; background:rgba(35,184,85,.18); color:#23B855; font-size:11px; display:inline-flex; align-items:center; justify-content:center; flex:none}
.mccheck__rij i{font-style:normal}
@media (max-width:900px){ .mchooks{gap:8px} .mccovers3{grid-template-columns:1fr 1fr 1fr; gap:8px} }
.mcbonus__kaarten .mcbonus__kaart{align-self:start}
.mcbonus{align-items:start}
.mcblijst{padding-top:30px}

/* masterclass: doorlopend donker */
.donker .mcprofiel{border:1px solid rgba(255,255,255,.12); box-shadow:0 26px 60px rgba(0,0,0,.4)}
.donker .mccover{background:#1F1F1C; border:1px solid rgba(255,255,255,.07)}
.donker .mc__playbook{box-shadow:0 30px 70px rgba(0,0,0,.45)}
.mc__slot .lead{color:#B9B9B0}
.mc__slot .klein{color:rgba(255,255,255,.55)}
.mc__slot .klein a{color:#fff}
.mc__hero,.mc__hero + .sec.donker, .sec.donker + .sec.donker{border-top:0}

/* homepage: clean masterclass-kaartje */
.mckaart{display:flex; align-items:center; gap:18px; background:#fff; border:1px solid var(--rand); border-radius:18px; padding:18px 22px; box-shadow:var(--schaduw); color:var(--tekst); text-decoration:none; transition:transform .3s, box-shadow .3s}
.mckaart:hover{transform:translateY(-3px); box-shadow:0 18px 40px rgba(27,27,27,.12)}
.mckaart:hover .mckaart__pijl{transform:translateX(4px)}
.mckaart__vis{width:46px; height:46px; border-radius:14px; background:var(--geel); display:flex; align-items:center; justify-content:center; padding-left:2px; flex:none}
.mckaart__tekst{flex:1; min-width:0}
.mckaart__tekst b{display:block; font-size:16px; line-height:1.4}
.mckaart__tekst > span{display:block; font-size:13px; color:var(--tekst-2); margin-top:2px}
.mckaart__pijl{font-size:20px; font-weight:700; color:var(--tekst); transition:transform .3s; flex:none}
@media (max-width:600px){
  .mckaart{padding:15px 16px; gap:13px}
  .mckaart__vis{width:40px; height:40px}
  .mckaart__tekst b{font-size:14.5px}
  .mckaart__pijl{display:none}
}
.mc__slot .knoppen{margin-top:30px}
.mc__slot .lead{margin-bottom:6px}

/* anatomie: twee rustige callouts */
.frij .acall--1{top:12%}
.frij .acall--4{bottom:14%}

/* footer: donker en premium, overal */
.footer{background:#161614; border-top:0; color:#D9D9D2}
.footer img{filter:invert(1) brightness(1.6)}
.footer h4{color:rgba(255,255,255,.45)}
.footer a{color:#D9D9D2}
.footer a:hover{color:#fff}
.footer .klein{color:rgba(255,255,255,.5)}
.footer__onder{color:rgba(255,255,255,.45); border-top:1px solid rgba(255,255,255,.1)}
.footer__onder a{color:rgba(255,255,255,.6)}
.footer__inlog{color:var(--geel) !important}
.footer__inlog:hover{color:#fff !important}
.frij .acall--4{bottom:4%}

/* ==========================================================================
   v31 — mobiele opschoning: rustiger, minder geel, compacte footer,
   masterclass met urgency, zwevende CTA weg tijdens de scan
   ========================================================================== */

/* ---------- compacte footer (alle pagina's) ---------- */
.voet{background:#161614; color:#D9D9D2; padding:40px 0 28px}
.voet__in{display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap}
.voet__logo{display:inline-flex; align-items:center; line-height:0}
.voet__logo img{height:26px; filter:invert(1) brightness(1.6)}
.voet__links{display:flex; gap:22px; flex-wrap:wrap; justify-content:center}
.voet__links a{color:#D9D9D2; text-decoration:none; font-size:.9rem; font-weight:500; transition:color .14s}
.voet__links a:hover{color:#fff}
.voet__links a.voet__inlog{color:var(--geel)}
.voet__links a.voet__inlog:hover{color:#fff}
.voet__socials{display:flex; gap:10px}
.voet__socials a{width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,255,255,.16); display:inline-flex; align-items:center; justify-content:center; color:#fff; text-decoration:none; transition:background .14s, border-color .14s}
.voet__socials a:hover{background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.35)}
.voet__socials svg{width:17px; height:17px}
.voet__onder{margin-top:24px; padding-top:18px; border-top:1px solid rgba(255,255,255,.1); display:flex; flex-wrap:wrap; gap:8px 18px; justify-content:space-between; color:rgba(255,255,255,.42); font-size:.78rem}
.voet__onder a{color:rgba(255,255,255,.55); text-decoration:none}
.voet__onder a:hover{color:#fff}
@media(max-width:700px){
  .voet{padding:34px 0 22px}
  .voet__in{flex-direction:column; gap:20px}
  .voet__links{gap:8px 18px}
  .voet__onder{justify-content:center; text-align:center}
}

/* ---------- zwevende CTA: nooit óver de scan of een formulier ---------- */
.plakcta.stil, .plakwa.stil{opacity:0 !important; pointer-events:none !important; transform:translate(-50%, 14px) !important}
@media(min-width:901px){ .plakcta.stil, .plakwa.stil{transform:translateY(14px) !important} }
body.modal-open .plakcta, body.modal-open .plakwa{opacity:0; pointer-events:none}

/* ---------- masterclass: rustiger op mobiel, geel alleen als accent ---------- */
body.mc .markeer{background:none; padding:0}
body.mc .donker .eyebrow{color:rgba(255,255,255,.62); letter-spacing:.1em}
body.mc .donker h2{letter-spacing:-.01em}
body.mc .sec.donker{padding:72px 0}
body.mc .mc__hero{padding-top:56px; padding-bottom:56px}
body.mc .mc__hero h1{font-size:clamp(2rem,5vw,3.1rem); letter-spacing:-.02em}
body.mc .mc__hero .lead{font-size:1.02rem}

/* live-regel met rood puntje: de urgency bovenaan */
.mc__live{display:inline-flex; align-items:center; gap:9px; margin:0 auto 18px; padding:7px 14px 7px 12px; border-radius:999px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12); color:#fff; font-size:.8rem; font-weight:600; letter-spacing:.02em}
.mc__live i{width:8px; height:8px; border-radius:50%; background:#FF4B3E; box-shadow:0 0 0 0 rgba(255,75,62,.7); animation:mclive 1.8s ease-out infinite}
.mc__live b{color:var(--geel); font-weight:700}
@keyframes mclive{0%{box-shadow:0 0 0 0 rgba(255,75,62,.65)} 100%{box-shadow:0 0 0 9px rgba(255,75,62,0)}}
@media (prefers-reduced-motion: reduce){ .mc__live i{animation:none} }

/* speler: witte pill in plaats van geel, kicker subtiel */
body.mc .mc__scherm .fk__kicker{background:rgba(255,255,255,.14); color:#fff; backdrop-filter:blur(4px)}
body.mc .mc__soon{background:#fff; color:#1B1B1B; font-size:13px; padding:10px 20px; animation:none; box-shadow:0 10px 30px rgba(0,0,0,.35)}
body.mc .mc__soon::before{content:""; display:inline-block; width:7px; height:7px; border-radius:50%; background:#FF4B3E; margin-right:8px; vertical-align:1px}
body.mc .mc__titel{font-size:20px}

/* aanmeldblok in de hero */
body.mc .mcnotify{max-width:460px}
body.mc .mcnotify__form button{background:#fff; color:#1B1B1B}
body.mc .mcnotify__form button:hover{background:#F0F0EC}
body.mc .mcnotify__form input{border-color:rgba(255,255,255,.2); background:rgba(255,255,255,.08)}
.mc__krijgt{list-style:none; margin:16px auto 0; padding:0; display:flex; flex-wrap:wrap; justify-content:center; gap:6px 18px; font-size:.84rem; color:rgba(255,255,255,.7)}
.mc__krijgt li{display:inline-flex; align-items:center; gap:7px}
.mc__krijgt li::before{content:"\2713"; color:var(--geel); font-weight:700; font-size:.8rem}
.mc__krijgt li b{color:#fff; font-weight:600}
@media(max-width:520px){
  .mc__krijgt{flex-direction:column; align-items:flex-start; gap:8px; max-width:280px; margin-left:auto; margin-right:auto}
}

/* illustraties: geel terug naar één accent per kaart */
body.mc .mcv__post{background:rgba(255,255,255,.12); color:#fff}
body.mc .mcfoon__toggle{background:#fff}
body.mc .mcprofiel__avatar{background:#fff; box-shadow:none}
body.mc .fs-avatar{background:#fff}
body.mc .mcbonus__kaart .fs-avatar{background:rgba(255,255,255,.14); color:#fff}
body.mc .mcblijst span:not(.actief){transform:none; font-size:15px; color:rgba(255,255,255,.35)}
body.mc .mcblijst span.actief{font-size:18px}
body.mc .mcblijst{gap:10px; padding-top:22px}
@media(min-width:901px){ body.mc .mcblijst span:not(.actief){font-size:18px} body.mc .mcblijst span.actief{font-size:22px} body.mc .mcblijst{gap:16px} }

/* playbookkaart: zwarte kop op wit, altijd leesbaar */
body.mc .mc__playbook, body.mc .mc__playbook h2, body.mc .mc__playbook b{color:var(--tekst)}
body.mc .mc__playbook h2{color:var(--tekst) !important; font-size:1.55rem; letter-spacing:-.01em}
body.mc .mc__playbook .popup__icoon{background:var(--geel)}
body.mc .mc__playbook input{width:100%; box-sizing:border-box; background:#fff; color:var(--tekst)}
.mc__playbook .check__form{display:flex; flex-direction:column; gap:10px}
.mc__playbook__tag{display:inline-block; background:#161614; color:#fff; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; border-radius:6px; padding:4px 9px; margin-bottom:12px}

/* sticky balk onderaan op mobiel: één actie */
.mc__balk{position:fixed; left:0; right:0; bottom:0; z-index:80; padding:10px 16px calc(10px + env(safe-area-inset-bottom)); background:rgba(22,22,20,.92); backdrop-filter:blur(12px); border-top:1px solid rgba(255,255,255,.1); display:flex; align-items:center; gap:14px; transform:translateY(110%); transition:transform .3s ease}
.mc__balk.aan{transform:none}
.mc__balk span{flex:1; min-width:0; color:#fff; font-size:.82rem; line-height:1.3}
.mc__balk span small{display:block; color:rgba(255,255,255,.55); font-size:.74rem}
.mc__balk a{flex:none; background:#fff; color:#1B1B1B; font-weight:700; font-size:.88rem; border-radius:999px; padding:12px 20px; text-decoration:none; white-space:nowrap}
@media(min-width:901px){ .mc__balk{display:none} }
body.mc .mc__slot{padding-bottom:110px}
@media(min-width:901px){ body.mc .mc__slot{padding-bottom:88px} }

/* ---------- v31b: methodekaarten, harder en filmischer ---------- */
.mx{background:radial-gradient(120% 90% at 50% 0%, #26261F 0%, #17171A 60%, #121214 100%); border:1px solid rgba(255,255,255,.08); border-radius:26px; box-shadow:0 30px 80px rgba(0,0,0,.45); margin-top:24px}
.mx__beeld{padding:26px 22px 8px; position:relative}
.mx__labels{display:grid; gap:10px; margin-bottom:22px}
.mx__labels span{position:relative; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); color:#fff; font-size:12.5px; font-weight:600; border-radius:10px; padding:8px 12px; text-align:center; line-height:1.3}
.mx__labels span::after{content:""; position:absolute; left:50%; top:100%; width:2px; height:22px; background:linear-gradient(var(--geel), rgba(255,212,0,.15)); transform:translateX(-50%)}
.mx__labels span::before{content:""; position:absolute; left:50%; top:calc(100% + 20px); width:7px; height:7px; border-radius:50%; background:var(--geel); transform:translateX(-50%); box-shadow:0 0 0 4px rgba(255,212,0,.18)}
.mx__labels--3{grid-template-columns:repeat(3,1fr)}
.mx__labels--2{grid-template-columns:1fr 1fr}
.mx__labels--1-3{grid-template-columns:1fr 2.4fr}
.mx__rij{display:flex; gap:12px; justify-content:center; align-items:center}
.mx__rij--3{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; align-items:start}
.mx__rij--1-3{display:grid; grid-template-columns:1fr auto 2.4fr; gap:8px; align-items:center}
.mx__rij--2{display:grid; grid-template-columns:1fr auto 1fr; gap:12px; align-items:center; max-width:360px; margin:0 auto}
.mx__groep{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; align-items:start}
.mx__foon{background:#1E1E22; border:1px solid rgba(255,255,255,.1); border-radius:14px; padding:8px; min-width:0}
.mx__foon--win{border-color:rgba(255,212,0,.55); box-shadow:0 0 0 1px rgba(255,212,0,.25), 0 16px 40px rgba(0,0,0,.45)}
.mx__kop{display:block; text-align:center; color:rgba(255,255,255,.55); font-size:10px; margin-bottom:7px}
.mx__scherm{position:relative; aspect-ratio:9/14; border-radius:10px; overflow:hidden; background:#2A2A2E center/cover no-repeat; display:flex; align-items:flex-end; padding:7px}
.mx__scherm::before{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.78) 100%)}
.mx__scherm b{position:relative; color:#fff; font-weight:800; font-size:11px; line-height:1.1; letter-spacing:.01em; text-transform:uppercase; text-shadow:0 2px 8px rgba(0,0,0,.6)}
.mx__scherm em{font-style:normal; color:var(--geel)}
.mx__foon--flop .mx__scherm{filter:grayscale(1) brightness(.55)}
.mx__foon--flop .mx__scherm b{color:rgba(255,255,255,.7); font-weight:600}
.mx__rij--1-3 .mx__foon--orig{padding:0; background:none; border:0}
.mx__rij--1-3 .mx__foon--orig .mx__scherm{aspect-ratio:9/15; border-radius:14px}
.mx__rij--1-3 .mx__foon--orig .mx__scherm b{font-size:12px}
.mx__rij .mx__toggle{width:24px; height:14px}
.mx__rij > .mx__foon{min-width:0}
.mx__rij span.mx__pijl{color:rgba(255,255,255,.55); font-size:20px; font-weight:700}
.mx__rij .mx__views{display:inline-flex; align-items:center; justify-content:center; gap:5px; width:100%; margin-top:8px; color:#fff; font-weight:700; font-size:12px}
.mx__views svg{width:13px; height:13px; color:rgba(255,255,255,.7)}
.mx__foon--orig .mx__views{font-size:15px; margin-top:10px}
.mx__foon--flop .mx__views{color:rgba(255,255,255,.5)}
.mx__rij .mx__reg{display:flex; align-items:center; justify-content:space-between; margin-top:7px; color:rgba(255,255,255,.75); font-size:9.5px}
.mx__toggle{position:relative; display:inline-block; width:24px; height:14px; border-radius:99px; background:#fff}
.mx__toggle::after{content:""; position:absolute; top:2px; right:2px; width:10px; height:10px; border-radius:50%; background:#1B1B1B}
.mx__post{display:block; text-align:center; background:rgba(255,255,255,.12); color:#fff; font-size:10px; font-weight:700; border-radius:7px; padding:4px 0; margin-top:6px}
.mx .mccover__tekst{padding:22px 22px 28px}
.mx .mccover__tekst h3{font-size:24px; letter-spacing:-.01em; margin-bottom:8px}
.mx .mccover__tekst p{font-size:16.5px; color:rgba(255,255,255,.55); line-height:1.5}
@media(max-width:560px){
  .mx__beeld{padding:18px 12px 6px}
  .mx__labels{gap:6px; margin-bottom:20px}
  .mx__labels span{font-size:10.5px; padding:7px 6px; border-radius:8px}
  .mx__labels span::after{height:18px}
  .mx__labels span::before{top:calc(100% + 16px); width:6px; height:6px}
  .mx__rij--3, .mx__groep{gap:6px}
  .mx__rij--1-3{gap:4px}
  .mx__foon{padding:6px; border-radius:11px}
  .mx__scherm{padding:5px; border-radius:8px}
  .mx__scherm b{font-size:9px}
  .mx__rij--1-3 .mx__foon--orig .mx__scherm b{font-size:10.5px}
  .mx__rij span.mx__pijl{font-size:16px}
  .mx__post{font-size:9px; padding:3px 0}
  .mx .mccover__tekst{padding:18px 18px 24px}
  .mx .mccover__tekst h3{font-size:22px}
  .mx .mccover__tekst p{font-size:15.5px}
}
@media(min-width:561px){
  .mx__rij--3{max-width:520px; margin:0 auto}
  .mx__labels--3{max-width:520px; margin-left:auto; margin-right:auto}
  .mx__rij--1-3, .mx__labels--1-3{max-width:620px; margin-left:auto; margin-right:auto}
  .mx__labels--2{max-width:360px; margin-left:auto; margin-right:auto}
}
@media(max-width:560px){
  .mx__groep .mx__reg, .mx__groep .mx__kop{display:none}
  .mx__groep .mx__post{margin-top:7px}
  .mx__labels--1-3{grid-template-columns:1fr 2.2fr}
  .mx__rij--1-3{grid-template-columns:1fr auto 2.2fr}
}

/* ---------- v31c: echte reels als beeld, klant-positionering ---------- */
.mx__klant{display:inline-flex; align-items:center; gap:8px; margin-bottom:10px; color:rgba(255,255,255,.7); font-size:12.5px; font-weight:600; letter-spacing:.02em}
.mx__klant img{width:22px; height:22px; border-radius:50%; object-fit:cover; border:1px solid rgba(255,255,255,.2)}
.mx__klant img[src=""], .mx__klant img:not([src]){display:none}
/* speler met thumbnail van Otto: donker gradient zodat tekst en pill leesbaar blijven */
body.mc .mc__scherm{background-size:cover; background-position:center; background-repeat:no-repeat}
body.mc .mc__scherm::before{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.1) 0%, rgba(0,0,0,.25) 50%, rgba(0,0,0,.8) 100%)}
body.mc .mc__scherm > *{z-index:1}
body.mc .mc__scherm::before{z-index:0}
/* hook-thumbs en coverformules: reelcover als achtergrond, tekst erover */
.mchook__thumb, .mccover3{position:relative; background-size:cover; background-position:center top; overflow:hidden; isolation:isolate}
.mchook__thumb::before, .mccover3::before{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.05) 20%, rgba(0,0,0,.75) 100%); z-index:-1}
.mchook__thumb{aspect-ratio:9/12; display:flex; align-items:flex-end}
.mccover3{aspect-ratio:auto}

/* ---------- v32: positionering, offer in drie treden, thuisbasis, telefoon-eerst ---------- */
/* wat we doen */
.doen{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:40px}
.doen__kaart{background:var(--veld); border:1px solid var(--rand); border-radius:20px; padding:26px 24px}
.doen__nr{display:inline-block; font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--tekst-2); background:#fff; border:1px solid var(--rand); border-radius:6px; padding:4px 9px; margin-bottom:14px}
.doen__kaart h3{font-size:1.15rem; margin:0 0 8px; line-height:1.3}
.doen__kaart p{margin:0; font-size:.95rem; color:var(--tekst-2); line-height:1.65}
@media(max-width:820px){ .doen{grid-template-columns:1fr; gap:12px; margin-top:28px} .doen__kaart{padding:22px 20px} }

/* treden */
.treden{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:40px; align-items:stretch}
.trede{background:#fff; border:1px solid var(--rand); border-radius:22px; padding:28px 26px 26px; display:flex; flex-direction:column; gap:0}
.trede--kern{border-color:var(--tekst); box-shadow:0 24px 60px rgba(27,27,27,.12); position:relative}
.trede__label{display:inline-block; align-self:flex-start; font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--tekst-2); background:var(--veld); border-radius:6px; padding:4px 9px; margin-bottom:14px}
.trede--kern .trede__label{background:var(--geel); color:var(--tekst)}
.trede h3{font-size:1.5rem; margin:0 0 6px; letter-spacing:-.01em}
.trede__voor{margin:0 0 18px; font-size:.92rem; color:var(--tekst-2); line-height:1.55; min-height:2.9em}
.trede ul{list-style:none; margin:0 0 22px; padding:0; display:flex; flex-direction:column; gap:9px; font-size:.92rem; color:var(--tekst-2); line-height:1.5; flex:1}
.trede li{padding-left:24px; position:relative}
.trede li::before{content:"\2713"; position:absolute; left:0; top:1px; width:16px; height:16px; border-radius:50%; background:var(--geel); color:var(--tekst); font-size:10px; font-weight:700; display:inline-flex; align-items:center; justify-content:center}
.trede__prijs{margin-bottom:16px; padding-top:18px; border-top:1px solid var(--rand)}
.trede__prijs b{display:block; font-size:1.8rem; letter-spacing:-.02em; line-height:1; font-variant-numeric:tabular-nums}
.trede__prijs span{display:block; font-size:.82rem; color:var(--tekst-2); margin-top:5px}
.trede .btn{justify-content:center; width:100%}
@media(max-width:940px){ .treden{grid-template-columns:1fr; max-width:480px; margin:32px auto 0; gap:14px} .trede--kern{order:-1} .trede__voor{min-height:0} }

/* thuisbasis: tekst + kaart */
.thuis{display:grid; grid-template-columns:1fr 1.1fr; gap:36px; align-items:center; margin-top:56px; background:var(--veld); border:1px solid var(--rand); border-radius:24px; padding:32px}
.thuis__tekst h3{font-size:1.35rem; margin:6px 0 10px; letter-spacing:-.01em}
.thuis__tekst p{margin:0; color:var(--tekst-2); font-size:.95rem; line-height:1.65}
.thuis__tekst .tekstlink{margin-top:16px}
.thuis__kaart{position:relative; border-radius:18px; overflow:hidden; aspect-ratio:16/10; background:#E8E8E2; border:1px solid var(--rand)}
.thuis__kaart iframe{position:absolute; inset:0; width:100%; height:100%; border:0; filter:grayscale(1) contrast(.9); pointer-events:none}
.thuis__pin{position:absolute; left:14px; bottom:14px; background:#1B1B1B; color:#fff; font-size:12px; font-weight:600; border-radius:999px; padding:7px 12px 7px 10px}
.thuis__pin::before{content:""; display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--geel); margin-right:7px; vertical-align:1px}
@media(max-width:820px){ .thuis{grid-template-columns:1fr; gap:20px; padding:22px; margin-top:36px} .thuis__kaart{aspect-ratio:16/11} }

/* scan: hint en optioneel-label */
.check__hint{display:block; font-size:.78rem; font-weight:400; color:#8B8B82; line-height:1.4}
.check__opt{font-style:normal; font-weight:500; color:#9A9A90; margin-left:4px}

/* ---------- v35: Otto als gezicht (masterclass, home, pitch, investering) ---------- */
.door{display:inline-flex; align-items:center; gap:10px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12); border-radius:999px; padding:5px 14px 5px 5px; font-size:.84rem; font-weight:600; color:#fff}
.door img{width:30px; height:30px; border-radius:50%; object-fit:cover; object-position:center top}
.door span{color:rgba(255,255,255,.6); font-weight:500}
.door--licht{background:var(--veld); border-color:var(--rand); color:var(--tekst)}
.door--licht span{color:var(--tekst-2)}

.otto{display:grid; grid-template-columns:.9fr 1.1fr; gap:36px; align-items:center}
.otto__beeld{position:relative; border-radius:24px; overflow:hidden; aspect-ratio:4/5; background:#26261F center/cover no-repeat}
.otto__beeld img{width:100%; height:100%; object-fit:cover; object-position:center 62%; display:block}
.otto__beeld img.otto__hand{position:absolute; left:18px; bottom:16px; width:120px; height:auto; object-fit:contain; opacity:.95; filter:drop-shadow(0 2px 6px rgba(0,0,0,.5))}
.otto__naam{display:block; font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; color:var(--geel); font-weight:700; margin-bottom:8px}
.otto h2, .otto h3{margin:0 0 12px}
.otto__tekst p{margin:0 0 14px; line-height:1.65}
.otto__bewijs{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:18px}
.otto__b{border-radius:14px; padding:14px 16px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1)}
.otto__b b{display:block; font-size:1.35rem; letter-spacing:-.02em; line-height:1.1; color:#fff}
.otto__b span{display:block; font-size:.8rem; color:rgba(255,255,255,.62); margin-top:4px; line-height:1.4}
.otto__meer{margin-top:16px; font-size:.9rem}
.otto__meer summary{cursor:pointer; font-weight:600; color:#fff; list-style:none; display:inline-flex; align-items:center; gap:8px}
.otto__meer summary::-webkit-details-marker{display:none}
.otto__meer summary::after{content:"+"; width:20px; height:20px; border-radius:50%; border:1px solid rgba(255,255,255,.3); display:inline-flex; align-items:center; justify-content:center; font-size:13px}
.otto__meer[open] summary::after{content:"\2013"}
.otto__meer p{margin:10px 0 0; color:rgba(255,255,255,.7); line-height:1.6}
.otto__mini{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:14px}
.otto__mini img{width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:10px; display:block}
/* lichte variant (homepage / investering) */
.otto--licht .otto__naam{color:var(--tekst-2)}
.otto--licht .otto__b{background:#fff; border-color:var(--rand)}
.otto--licht .otto__b b{color:var(--tekst)}
.otto--licht .otto__b span{color:var(--tekst-2)}
.otto--licht .otto__meer summary{color:var(--tekst)}
.otto--licht .otto__meer summary::after{border-color:#D9D9D2}
.otto--licht .otto__meer p{color:var(--tekst-2)}
.otto--licht .otto__tekst p{color:var(--tekst-2)}
@media(max-width:820px){
  .otto{grid-template-columns:1fr; gap:22px}
  .otto__beeld{aspect-ratio:4/4; max-width:420px}
  .otto__bewijs{gap:8px}
  .otto__b{padding:12px 14px}
  .otto__b b{font-size:1.2rem}
}

/* ---------- v36: Otto als profielkaart (Nexus-clean) ---------- */
.igc{max-width:640px; margin:0 auto; text-align:center}
.igc .eyebrow{justify-content:center; color:rgba(255,255,255,.55)}
.igc__kop{color:#fff; font-size:clamp(1.9rem,4.4vw,2.9rem); line-height:1.12; letter-spacing:-.02em; margin:8px 0 30px}
.igc__kaart{text-align:left; background:#1C1C1F; border:1px solid rgba(255,255,255,.1); border-radius:22px; padding:24px; box-shadow:0 30px 70px rgba(0,0,0,.45)}
.igc__top{display:flex; gap:22px; align-items:center}
.igc__avatar{width:84px; height:84px; border-radius:50%; object-fit:cover; object-position:center 20%; flex:none; border:2px solid rgba(255,255,255,.12)}
.igc__rechts{flex:1; min-width:0}
.igc__naam{display:flex; align-items:center; gap:7px; color:#fff; font-size:1.2rem; font-weight:600; margin-bottom:12px}
.igc__vink{width:20px; height:20px; flex:none}
.igc__stats{display:flex; gap:28px}
.igc__stats b{display:block; color:#fff; font-size:1.25rem; line-height:1.1; font-variant-numeric:tabular-nums}
.igc__stats span{display:block; color:rgba(255,255,255,.6); font-size:.82rem; margin-top:2px}
.igc__bio{list-style:none; margin:18px 0 0; padding:0; display:flex; flex-direction:column; gap:6px; color:#EDEDE8; font-size:.95rem; line-height:1.45}
.igc__bio li{display:flex; gap:10px; align-items:flex-start}
.igc__bio i{font-style:normal; flex:none; width:20px; text-align:center}
.igc__link{color:#5DA9F7}
.igc__dash{margin-top:16px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:14px 16px}
.igc__dash b{display:block; color:#fff; font-size:.95rem; margin-bottom:3px}
.igc__dash span{display:block; color:rgba(255,255,255,.7); font-size:.88rem}
.igc__knoppen{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:14px}
.igc__knoppen span{background:rgba(255,255,255,.1); color:#fff; font-size:.88rem; font-weight:600; text-align:center; border-radius:10px; padding:10px}
.igc-sec{border-top:0}
body.mc .igc .eyebrow{color:rgba(255,255,255,.55)}
@media(max-width:560px){
  .igc__kaart{padding:18px}
  .igc__top{gap:16px}
  .igc__avatar{width:68px; height:68px}
  .igc__naam{font-size:1.05rem; margin-bottom:8px}
  .igc__stats{gap:18px}
  .igc__stats b{font-size:1.05rem}
  .igc__stats span{font-size:.72rem}
  .igc__bio{font-size:.88rem}
}
/* masterclass hero: rustiger, één claim */
body.mc .mc__hero h1{font-size:clamp(2.6rem,7vw,4.2rem); letter-spacing:-.03em; margin:4px 0 10px}
body.mc .mc__sub{font-size:clamp(1.05rem,2.2vw,1.35rem); color:#B9B9B0; max-width:30ch; margin:0 auto}
/* v36b: foto naast de kaart, alleen op breed scherm */
.igc--foto{max-width:1040px; display:grid; grid-template-columns:.8fr 1.2fr; gap:40px; align-items:center; text-align:left}
.igc--foto .eyebrow{justify-content:flex-start}
.igc--foto .igc__kop{margin-top:6px}
.igc__foto{width:100%; aspect-ratio:4/5; object-fit:cover; object-position:center 55%; border-radius:24px; display:block}
.igc__inhoud{min-width:0}
@media(max-width:900px){
  .igc--foto{grid-template-columns:1fr; gap:22px; text-align:center}
  .igc--foto .eyebrow{justify-content:center}
  .igc__foto{aspect-ratio:16/10; object-position:center 60%; max-width:560px; margin:0 auto}
}

/* ---------- v37: wie geeft de masterclass, rustig ---------- */
.wie{max-width:960px; margin:0 auto; display:grid; grid-template-columns:.85fr 1.15fr; gap:44px; align-items:center}
.wie__foto{width:100%; aspect-ratio:4/5; object-fit:cover; object-position:center 55%; border-radius:22px; display:block}
.wie .eyebrow{justify-content:flex-start; color:rgba(255,255,255,.5); margin-bottom:8px}
.wie__naam{color:#fff; font-size:1.6rem; letter-spacing:-.01em; margin:0 0 12px}
.wie__tekst p{color:#B9B9B0; font-size:1rem; line-height:1.7; margin:0 0 22px; max-width:52ch}
.wie__cijfers{display:flex; gap:0; border-top:1px solid rgba(255,255,255,.12); padding-top:18px}
.wie__cijfers div{padding-right:28px; margin-right:28px; border-right:1px solid rgba(255,255,255,.12)}
.wie__cijfers div:last-child{border:0; margin:0; padding-right:0}
.wie__cijfers b{display:block; color:#fff; font-size:1.35rem; letter-spacing:-.02em; line-height:1.1; font-variant-numeric:tabular-nums}
.wie__cijfers span{display:block; color:rgba(255,255,255,.55); font-size:.8rem; margin-top:4px}
.wie__hand{width:110px; height:auto; margin-top:22px; opacity:.85; display:block}
.igc-sec{border-top:0}
@media(max-width:820px){
  .wie{grid-template-columns:1fr; gap:22px}
  .wie__foto{aspect-ratio:16/10; object-position:center 60%}
  .wie__naam{font-size:1.4rem}
  .wie__tekst p{font-size:.95rem}
  .wie__cijfers div{padding-right:16px; margin-right:16px}
  .wie__cijfers b{font-size:1.15rem}
  .wie__cijfers span{font-size:.72rem}
}
/* v37b: drie foto's, rustig raster */
.wie__fotos{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.wie__fotos .wie__foto{grid-column:1/-1; aspect-ratio:16/11}
.wie__fotos img{width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:16px; display:block}
.wie__fotos img:nth-child(2){object-position:center 45%}
.wie__fotos img:nth-child(3){object-position:center 30%}
@media(max-width:820px){ .wie__fotos{max-width:560px; margin:0 auto} .wie__fotos .wie__foto{aspect-ratio:16/10} }

/* ---------- v38: masterclass rustiger, Trial Reels, hover, playbook ---------- */
.tm{font-size:.35em; vertical-align:super; font-weight:600; margin-left:2px; opacity:.85}
.alleen-smal{display:none}
@media(max-width:560px){ .alleen-breed{display:none} .alleen-smal{display:inline} }
body.mc .mc__soon--stil{background:rgba(0,0,0,.35); color:#fff; border:1px solid rgba(255,255,255,.35); box-shadow:none; font-size:12px; padding:8px 14px; backdrop-filter:blur(6px)}
/* hover: label + telefoon */
.mx__labels span{cursor:pointer; transition:background .2s, border-color .2s, color .2s}
.mx__labels span.is-aan{background:var(--geel); border-color:var(--geel); color:#1B1B1B}
.mx__labels span.is-aan::before{background:#1B1B1B; box-shadow:0 0 0 4px rgba(255,212,0,.35)}
.mx--focus .mx__foon, .mx--focus .mx__groep{opacity:.35; transition:opacity .25s, transform .25s}
.mx--focus .mx__foon.is-aan, .mx--focus .mx__groep.is-aan, .mx--focus .mx__groep.is-aan .mx__foon{opacity:1}
.mx--focus .mx__foon.is-aan{transform:translateY(-4px); border-color:rgba(255,212,0,.6)}
.mx__foon, .mx__groep{transition:opacity .25s, transform .25s}
/* playbook: preview + formulier, geen grijs gat */
body.mc .mc__playbook{display:grid; grid-template-columns:.8fr 1.2fr; gap:28px; align-items:center; max-width:860px; margin:0 auto}
.pb__preview{background:#F2F2ED; border-radius:16px; padding:22px 18px 0; overflow:hidden; display:flex; justify-content:center}
.pb__doc{width:100%; max-width:220px; background:#fff; border-radius:10px 10px 0 0; box-shadow:0 18px 40px rgba(0,0,0,.12); padding:20px 18px 16px; font-size:12px; color:var(--tekst)}
.pb__kicker{display:block; font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:#9A9A90; margin-bottom:8px}
.pb__doc b{display:block; font-size:16px; line-height:1.2; margin-bottom:12px}
.pb__doc b sup{font-size:8px; vertical-align:super}
.pb__doc ol{margin:0; padding:0 0 0 16px; color:var(--tekst-2); display:flex; flex-direction:column; gap:5px}
.pb__doc img{width:64px; margin-top:12px; display:block; opacity:.8}
.mcbonus__kaarten{position:relative}
.mcbonus__kaarten .mcbonus__kaart:not(.actief){position:absolute; inset:0 auto auto 0; width:100%; visibility:hidden}
@media(max-width:820px){
  body.mc .mc__playbook{grid-template-columns:1fr; gap:18px}
  .pb__preview{padding:16px 16px 0}
  .pb__doc{max-width:200px; padding:16px 16px 12px}
  .pb__doc b{font-size:14px}
}
/* Otto-blok op mobiel: één foto, korte tekst */
.wie__kort{display:none}
@media(max-width:820px){
  .wie__fotos img:nth-child(2), .wie__fotos img:nth-child(3){display:none}
  .wie__fotos{grid-template-columns:1fr}
  .wie__lang{display:none}
  .wie__kort{display:block}
  .wie__hand{width:90px; margin-top:14px}
}
/* mobiel: kortere scrollweg, overal */
@media(max-width:700px){
  .sec, .slot{padding:56px 0}
  body.mc .sec.donker{padding:52px 0}
  .midden h2{font-size:1.65rem}
  .stappen{margin-top:26px; gap:14px}
  .stapkaart p{font-size:.9rem}
}
/* homepage v38: wat we doen met visual, investering als tabs */
.doen--v2 .doen__kaart{background:#161614; border-color:#161614; color:#fff; padding:0 0 24px; overflow:hidden}
.doen--v2 .doen__nr{margin:18px 22px 10px; background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.12); color:rgba(255,255,255,.75)}
.doen--v2 h3{color:#fff; margin:0 22px 6px}
.doen--v2 p{color:#B9B9B0; margin:0 22px}
.doen__vis{height:118px; background:#1F1F1C; border-bottom:1px solid rgba(255,255,255,.06); display:flex; align-items:flex-end; justify-content:center; gap:8px; padding:18px 22px}
.doen__vis--plan{flex-direction:column; align-items:flex-start; justify-content:center; gap:9px}
.doen__vis--plan i{display:block; height:8px; border-radius:99px; background:rgba(255,255,255,.14); width:70%}
.doen__vis--plan i:first-child{width:38%; background:var(--geel)}
.doen__vis--plan i:nth-child(3){width:55%}
.doen__vis--plan i:nth-child(4){width:62%}
.doen__vis--foon{align-items:flex-end}
.doen__vis--foon span{width:58px; height:104px; border-radius:12px 12px 0 0; background:linear-gradient(160deg,#3A3A33,#161613); border:3px solid #2E2E2A; border-bottom:0; position:relative}
.doen__vis--foon span::after{content:""; position:absolute; left:50%; bottom:22px; transform:translateX(-50%); width:0; height:0; border-left:9px solid var(--geel); border-top:6px solid transparent; border-bottom:6px solid transparent}
.doen__vis--graf i{display:block; width:14px; border-radius:4px 4px 0 0; background:rgba(255,255,255,.18)}
.doen__vis--graf i:last-child{background:var(--geel)}
@media(max-width:820px){ .doen__vis{height:90px; padding:14px 18px} .doen--v2 .doen__nr{margin:14px 18px 8px} .doen--v2 h3, .doen--v2 p{margin-left:18px; margin-right:18px} }

.tredeknoppen{display:flex; justify-content:center; gap:6px; margin-top:28px; background:var(--veld); border:1px solid var(--rand); border-radius:999px; padding:5px; width:max-content; max-width:100%; margin-left:auto; margin-right:auto}
.tredeknoppen button{font:inherit; font-weight:600; font-size:.9rem; border:0; background:transparent; color:var(--tekst-2); border-radius:999px; padding:10px 18px; cursor:pointer; white-space:nowrap}
.tredeknoppen button.actief{background:var(--tekst); color:#fff}
.treden--tabs{grid-template-columns:1fr; max-width:520px; margin:18px auto 0}
.treden--tabs .trede{display:none}
.treden--tabs .trede.actief{display:flex}
.treden--tabs .trede--kern{order:0}
.treden--tabs .trede__voor{min-height:0}
@media(max-width:940px){ .treden--tabs{margin-top:16px} }
@media(max-width:400px){ .tredeknoppen button{padding:9px 12px; font-size:.82rem} }

/* ---------- v39: scan-route "nog niet" -> Academy ---------- */
.resultaat--academy .check__vintro, .resultaat--academy .vidschakel, .resultaat--academy .rvideos, .resultaat--academy .prijsregel, .resultaat--academy .agenda{display:none !important}
.racademy__sub{color:var(--tekst-2); margin:0 0 16px; line-height:1.6}
.racademy__kaart{background:var(--veld); border:1px solid var(--rand); border-radius:18px; padding:22px}
.racademy__kaart h4{font-size:1.3rem; margin:10px 0 8px}
.racademy__kaart p{color:var(--tekst-2); margin:0 0 16px; font-size:.95rem; line-height:1.6}

/* v40: echte covers in de methodekaarten */
.mx__scherm[data-blur]{filter:blur(2.5px) brightness(.8)}
.mx__scherm[data-blur]::before{display:none}

/* ============ v41: homepage strakker (SocialNext-ronde) ============ */
/* masterclass-verwijzing verhuisd naar de footer: één rustige regel */
.voet__mc{display:flex; align-items:center; gap:12px; padding:14px 18px; margin-bottom:28px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:14px;
  color:#D9D9D2; text-decoration:none; font-size:.9rem; line-height:1.45; transition:background .14s, border-color .14s}
.voet__mc:hover{background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.28); color:#fff}
.voet__mc b{color:#fff; font-weight:600}
.voet__mc-vis{flex:0 0 auto; width:28px; height:28px; border-radius:50%; background:var(--geel);
  display:inline-flex; align-items:center; justify-content:center}
@media (max-width:700px){ .voet__mc{font-size:.85rem; padding:12px 14px} }
/* staptitels niet onder het tijdlabel laten lopen */
#werkwijze .stapkaart__kop{padding-right:92px; align-items:flex-start}
#werkwijze .stapkaart h3{line-height:1.3}
#werkwijze .stapnr{margin-top:-4px}
/* v42: masterclass-kaart terug als echte kaart, nu in de footer */
.voet__mc,.voet__mc-vis{display:none}
.voet .voet__mckaart{margin-bottom:30px}
@media (max-width:700px){ .voet .voet__mckaart{padding:15px 16px; gap:14px} .voet .voet__mckaart .mckaart__tekst b{font-size:14.5px} }
/* v43: Otto-band op de homepage licht — alleen de scan blijft donker */
.wie-licht .wie .eyebrow{color:var(--tekst-2)}
.wie-licht .wie__naam{color:var(--tekst)}
.wie-licht .wie__tekst p{color:var(--tekst-2)}
.wie-licht .wie__cijfers{border-top-color:var(--rand)}
.wie-licht .wie__cijfers div{border-right-color:var(--rand)}
.wie-licht .wie__cijfers b{color:var(--tekst)}
.wie-licht .wie__cijfers span{color:var(--tekst-2)}
.wie-licht .wie__hand{opacity:.9}