
:root{
  --color-navy:#1B3A6B;--color-navy-light:#4A6FA5;--color-navy-darker:#142C52;
  --color-link:#6B8FC9;--color-violet:#7B68EE;--color-white:#FFFFFF;
  --color-surface:#F5F5F5;--color-surface-2:#ECEFF3;--color-border:#D0D5DD;
  --dot-red:#FF272B;--dot-green:#24AD39;--dot-yellow:#FFBE1C;--logo-blue:#0084FE;
  --bg:var(--color-white);--bg-alt:var(--color-surface);--bg-dark:var(--color-navy);
  --text:#555F6E;--text-strong:var(--color-navy);--text-muted:#8A93A2;--text-invert:var(--color-white);
  --border:var(--color-border);--accent:var(--color-navy);
  --navy-soft:#EAF0F9;--violet-soft:#EEEBFE;--success:#24AD39;
  
  --f0:#24AD39;--f1:#1B3A6B;--f2:#4A6FA5;--f3:#0084FE;--f4:#7B68EE;
  
  --font-display:'Thicccboi','Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-body:'Nunito',system-ui,-apple-system,'Segoe UI',sans-serif;
  --fs-h1:clamp(2rem,1.5rem + 2vw,2.75rem);--fs-h2:clamp(1.6rem,1.25rem + 1.4vw,2.5rem);
  --fs-h4:1.375rem;--fs-lead:1.25rem;--fs-base:1rem;--fs-sm:.875rem;--fs-xs:.8125rem;
  --lh-tight:1.1;--lh-heading:1.2;--lh-snug:1.4;--lh-body:1.6;
  --fw-regular:400;--fw-medium:500;--fw-semibold:600;--fw-bold:700;--fw-extra:800;
  --ls-tight:-0.02em;--ls-normal:0;--ls-wide:0.12em;
  
  --space-1:.25rem;--space-2:.5rem;--space-3:1rem;--space-4:1.5rem;--space-5:3rem;--space-6:5rem;--space-7:7.5rem;
  --section-py:clamp(4rem,2.5rem + 5vw,7.5rem);
  --container-max:1160px;--container-narrow:760px;--container-pad:clamp(1.25rem,.5rem + 3vw,2.5rem);
  
  --radius-nav:6px;--radius-btn:8px;--radius-card:12px;--radius-pill:999px;
  
  --shadow-card:0 8px 24px rgba(27,58,107,.08);--shadow-lg:0 16px 40px rgba(27,58,107,.12);--shadow-btn:0 4px 12px rgba(27,58,107,.18);
  
  --ease:cubic-bezier(0.22,1,0.36,1);--dur:220ms;
}


*,*::before,*::after{box-sizing:border-box}*{margin:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:var(--font-body);font-size:var(--fs-base);line-height:var(--lh-body);color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
a:hover{color:var(--color-navy-light)}
ul{list-style:none;padding:0}
h1,h2,h3,h4{font-family:var(--font-display);line-height:var(--lh-heading);color:var(--text-strong);text-wrap:balance}
[hidden]{display:none !important}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none !important;transition:none !important;scroll-behavior:auto !important}}


.container{width:100%;max-width:var(--container-max);margin-inline:auto;padding-inline:var(--container-pad)}
.section{padding-block:var(--section-py)}
.section--alt{background:var(--bg-alt)}
.hero{padding-block:clamp(3.5rem,2rem + 6vw,6rem)}
.hero__actions{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-2)}
.eyebrow{display:inline-block;font-family:var(--font-display);font-size:var(--fs-xs);font-weight:var(--fw-bold);letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--color-navy-light)}
.lead{font-size:var(--fs-lead);line-height:var(--lh-snug);font-weight:var(--fw-regular)}
.metaline{font-size:var(--fs-xs);color:var(--text-muted)}
.ico{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
.metarow{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.section-head{display:flex;flex-direction:column;gap:var(--space-3);margin-bottom:var(--space-5);max-width:56ch}
.section-head__title{font-size:var(--fs-h2);font-weight:var(--fw-bold);letter-spacing:var(--ls-tight)}


.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);font-family:var(--font-display);font-weight:var(--fw-semibold);font-size:var(--fs-base);line-height:1;letter-spacing:var(--ls-normal);padding:.875rem var(--space-4);border-radius:var(--radius-btn);border:1px solid transparent;cursor:pointer;transition:background var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease)}
.btn--primary{background:var(--color-navy);color:var(--text-invert)}
.btn--primary:hover{background:var(--color-navy-light);color:var(--text-invert);box-shadow:var(--shadow-btn);transform:translateY(-2px)}
.btn--primary:active{background:var(--color-navy-darker);box-shadow:none;transform:translateY(0)}
.btn--ghost{background:transparent;border-color:var(--border);color:var(--color-navy)}
.btn--ghost:hover{border-color:var(--color-navy);background:var(--navy-soft)}
.btn--ghost:active{background:var(--color-surface-2)}
.btn--blue{background:var(--logo-blue);color:#fff}
.btn--blue:hover{background:#0074E0;color:#fff;box-shadow:var(--shadow-btn);transform:translateY(-2px)}
.btn--blue:active{background:#0066C7;transform:translateY(0);box-shadow:none}
.btn--lg{padding:1.05rem var(--space-5);font-size:var(--fs-lead)}
.btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--navy-soft)}
.btn__icon{width:18px;height:18px;flex:0 0 auto}


.crumbs{display:flex;gap:var(--space-2);align-items:center;font-size:var(--fs-sm);color:var(--text-muted);margin-bottom:var(--space-3)}
.crumbs a:hover{color:var(--color-navy)}
.crumbs span.sep{opacity:.5}


.product{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,1rem + 4vw,4.5rem);align-items:center}
.product__media{position:relative}
.product__body{display:flex;flex-direction:column;gap:var(--space-3);align-items:flex-start}
.product__title{font-size:var(--fs-h1);font-weight:var(--fw-extra);letter-spacing:var(--ls-tight)}
.price-row{display:flex;align-items:baseline;gap:var(--space-3);margin-block:var(--space-2)}
.price-now{font-family:var(--font-display);font-weight:var(--fw-extra);font-size:2.6rem;letter-spacing:var(--ls-tight);color:var(--color-navy)}
.guarantee{display:flex;align-items:center;gap:var(--space-2);font-size:var(--fs-sm);color:var(--text-muted)}
.guarantee svg{width:18px;height:18px}

.cover{position:relative;aspect-ratio:3/4;max-width:380px;margin-inline:auto;border-radius:8px;background:var(--color-navy);color:#fff;display:flex;flex-direction:column;justify-content:space-between;padding:22px;box-shadow:var(--shadow-lg);overflow:hidden}
.cover__fase{display:flex;align-items:center;gap:6px;font-family:var(--font-display);font-size:.72rem;font-weight:var(--fw-bold);letter-spacing:.08em;text-transform:uppercase;opacity:.85}
.cover__title{font-family:var(--font-display);font-weight:var(--fw-bold);font-size:1.5rem;line-height:1.3;text-wrap:balance;overflow-wrap:break-word}
.cover__foot{display:flex;align-items:center;justify-content:space-between;gap:6px}
.cover__dots{display:flex;gap:4px}
.cover__dots i{width:5px;height:5px;border-radius:999px;display:block}
.cover__dots i:nth-child(1){background:var(--dot-red)}.cover__dots i:nth-child(2){background:var(--dot-green)}.cover__dots i:nth-child(3){background:var(--dot-yellow)}


.stchip{display:inline-flex;align-items:center;gap:5px;font-family:var(--font-display);font-size:.72rem;font-weight:var(--fw-bold);letter-spacing:.02em;padding:3px 10px;border-radius:var(--radius-pill);white-space:nowrap}
.st-av{background:var(--navy-soft);color:var(--color-navy)}
.st-soon{background:transparent;color:var(--text-muted);border:1px dashed var(--border)}
.lvl{display:inline-flex;align-items:center;font-family:var(--font-display);font-size:.72rem;font-weight:var(--fw-bold);padding:3px 10px;border-radius:var(--radius-pill);background:var(--violet-soft);color:#5B48D6;white-space:nowrap}
.fdot{width:9px;height:9px;border-radius:999px;display:inline-block;flex:0 0 auto}


.wbcard__fase{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-display);font-size:.7rem;font-weight:var(--fw-bold);letter-spacing:.05em;text-transform:uppercase;color:var(--text-muted)}
.wbcard__req{display:flex;gap:8px;align-items:flex-start;font-size:var(--fs-xs);color:#8A6D00;background:#FFF7DE;border-radius:var(--radius-btn);padding:8px 10px}
.wbcard__req svg{width:13px;height:13px;flex:0 0 auto;margin-top:2px}
.wbcard__in{font-size:var(--fs-xs);color:var(--text-muted)}
.wbcard__in b{color:var(--color-navy-light);font-weight:var(--fw-semibold)}
.wbcard__price{font-family:var(--font-display);font-weight:var(--fw-extra);font-size:1.3rem;color:var(--color-navy)}
.wbcard__price small{font-size:.72rem;font-weight:var(--fw-semibold);color:var(--text-muted)}


.feat-list{display:flex;flex-direction:column;gap:var(--space-3)}
.feat-list li{display:flex;align-items:flex-start;gap:var(--space-3)}
.feat-list__check{flex:0 0 auto;width:24px;height:24px;border-radius:var(--radius-pill);background:var(--navy-soft);color:var(--success);display:inline-flex;align-items:center;justify-content:center;margin-top:2px}
.feat-list__check svg{width:14px;height:14px}
.fase__card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-card);padding:var(--space-4);display:flex;flex-direction:column;gap:var(--space-2);border-top:3px solid var(--fase-accent,var(--color-navy))}


.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-4)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4)}
.card{display:flex;flex-direction:column;gap:var(--space-3);background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-card);padding:var(--space-4);transition:box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease)}
.card:hover{box-shadow:var(--shadow-card);transform:translateY(-4px)}
.card__title{font-size:var(--fs-h4);font-weight:var(--fw-semibold);color:var(--color-navy)}
.card__text{font-size:var(--fs-base);color:var(--text)}
.card__link{margin-top:auto;font-family:var(--font-display);font-weight:var(--fw-semibold);font-size:var(--fs-sm);color:var(--color-navy);display:inline-flex;align-items:center;gap:6px}
.card__link svg{width:16px;height:16px;transition:transform var(--dur) var(--ease)}
.card:hover .card__link svg{transform:translateX(3px)}
.buyroute__badge{background:var(--dot-yellow);color:#1f1500;font-family:var(--font-display);font-weight:var(--fw-bold);font-size:.72rem;letter-spacing:.03em;padding:5px 14px;border-radius:var(--radius-pill);box-shadow:0 6px 14px rgba(0,0,0,.16)}


[data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
[data-reveal].in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){[data-reveal]{opacity:1;transform:none}}


@media (max-width:991px){
 .product{grid-template-columns:1fr;gap:var(--space-4)}
 .product__media{max-width:420px;margin-inline:auto}
 .grid-3{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:767px){
 .grid-3,.grid-2{grid-template-columns:1fr}
}

/* ===== Bricks-conversie fixes (page-scoped) ===== */
html{font-size:100%!important;}                 /* rem-root reset: Bricks zet html op 62.5% */
html.tws-builder [data-reveal]{opacity:1!important;transform:none!important;} /* builder: niet leeg */
[data-reveal].in{opacity:1!important;transform:none!important;} /* front-end: onze reveal wint van Bricks' gelaagde .bricks-lazy-hidden{opacity:0!important} (unlayered !important verslaat layered !important) */
.eyebrow.brxe-text-basic,.btn.brxe-text-basic,.invul__tag.brxe-text-basic,.quote__name.brxe-text-basic,.quote__avatar.brxe-text-basic,.media-ph__label.brxe-text-basic,.section-head__title.brxe-text-basic,.card__title.brxe-text-basic,.cta__title.brxe-text-basic,.hero__title.brxe-text-basic,.pack__name.brxe-text-basic,.step__num.brxe-text-basic,.stat__num.brxe-text-basic,.tag.brxe-text-basic,.product__title.brxe-text-basic,.shop-card__title.brxe-text-basic,.shop-card__price.brxe-text-basic,.price-now.brxe-text-basic,.price-badge.brxe-text-basic,.promo__badge.brxe-text-basic,.countdown__num.brxe-text-basic,.legal-eyebrow.brxe-text-basic,.fn-eyebrow.brxe-text-basic,.ov-sec-title.brxe-text-basic,.ov-step__num.brxe-text-basic,.ov-qr__dl.brxe-text-basic,.cover__fase.brxe-text-basic,.cover__title.brxe-text-basic,.wbcard__fase.brxe-text-basic,.stchip.brxe-text-basic,.lvl.brxe-text-basic,.wbcard__price.brxe-text-basic,.buyroute__badge.brxe-text-basic,.card__link.brxe-text-basic,.metarow.brxe-text-basic{font-family:var(--font-display)!important;}

