/* =========================================================
   Beavr: professionele afwerking
   Laadt als laatste. Zachte schaduwen, dunne randen,
   rustige typografie. Geen harde "brutalist"-effecten.
   ========================================================= */
:root {
  --display: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ink: #0f1115;
  --ink-2: #171a20;
  --ink-3: #262a31;
  --text: #2a2d34;
  --muted: #646a75;
  --paper: #f7f6f2;
  --paper-2: #eceae4;
  --line: #e6e3dc;
  --brown: #7a4b27;
  --r-sm: 10px;
  --r: 12px;
  --r-lg: 16px;
  --shadow-sm: 0 1px 2px rgba(15,17,21,.05), 0 1px 1px rgba(15,17,21,.03);
  --shadow: 0 1px 2px rgba(15,17,21,.05), 0 8px 24px -8px rgba(15,17,21,.12);
  --shadow-lg: 0 2px 4px rgba(15,17,21,.04), 0 24px 48px -16px rgba(15,17,21,.22);
  --hard: var(--shadow-lg);
}

body { font-size: 16.5px; letter-spacing: -.003em; }
h1, h2, h3, h4 { font-weight: 700; letter-spacing: -.025em; }
h1 { font-weight: 800; letter-spacing: -.035em; line-height: 1.06; }
h2 { letter-spacing: -.03em; line-height: 1.1; }

/* Neutraal palet: enkel zwart, wit, grijs en het Beavr-geel. Geen bruin/crème. */
:root {
  --text: #1f2430;
  --muted: #5b6478;
  --paper: #f5f6f8;
  --paper-2: #eaecf0;
  --line: #e4e7ec;
  --brown: #111318;
  --yellow-soft: #fff6d6;
}

/* Lange Nederlandse woorden afbreken in plaats van uit het scherm te lopen */
h1, h2, h3, .hero__sub, .page-hero__lead { overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; }

/* Werfstrepen weg */
.stripe, .cta-band::before { display: none; }

/* Markering: rustige onderlijning in plaats van markeerstift */
.mark { background: none; padding: 0; text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: .12em; text-underline-offset: .12em; text-decoration-skip-ink: none; }

/* ---------- Knoppen ---------- */
.btn { border: 1px solid transparent; border-radius: var(--r-sm); font-weight: 600; letter-spacing: -.005em; }
.btn--primary,
.roi__result .btn--primary, .start__form .btn--primary, .cta-band .btn--primary, .footer__cta .btn--primary {
  background: var(--yellow); color: var(--ink); border-color: var(--yellow);
  box-shadow: 0 1px 2px rgba(15,17,21,.08), inset 0 -1px 0 rgba(0,0,0,.08);
}
.btn--primary:hover { background: #ffcc3d; transform: none; box-shadow: 0 1px 2px rgba(15,17,21,.08), 0 8px 20px -8px rgba(229,168,0,.7); }
.btn--primary:active { transform: translateY(1px); box-shadow: 0 1px 1px rgba(15,17,21,.1); }
.btn--dark { background: var(--ink); border-color: var(--ink); }
.btn--line { border-color: var(--line); background: var(--white); color: var(--ink); box-shadow: var(--shadow-sm); }
.btn--line:hover { border-color: #cfcac0; background: var(--white); color: var(--ink); }
.btn--line-light { border-color: rgba(255,255,255,.2); }
.link-arrow, button.link-arrow { border-bottom: 0; padding: 0; color: var(--ink); }
.link-arrow:hover { color: var(--brown); }

/* ---------- Navigatie ---------- */
.nav { background: rgba(255,255,255,.85); }
.nav__burger { border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.nav__link::after, .dd__btn::after { height: 2px; bottom: -2px; border-radius: 2px; }
.dd__panel { border: 1px solid var(--line); box-shadow: var(--shadow-lg); border-radius: var(--r-lg); }
.dd__icon { background: var(--paper); color: var(--ink); }
.dd__item:hover .dd__icon { background: var(--yellow-soft); color: var(--brown); }

/* ---------- Kaarten en panelen: dunne rand + zachte schaduw ---------- */
.calc, .demo-preview, .vak-card, .range-visual, .signup__card, .track, .compare__col--new, .plan--pro {
  border: 1px solid var(--line); box-shadow: var(--shadow-lg);
}
.calc { box-shadow: 0 2px 4px rgba(15,17,21,.06), 0 32px 64px -20px rgba(15,17,21,.45); }
.plan--pro { border: 2px solid var(--yellow); }
.plan__flag { border: 0; background: var(--ink); color: var(--yellow); padding: 7px 12px; }
.compare__col--new { border: 2px solid var(--yellow); }

.trade, .article-card { border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.trade:hover, .trade:focus-visible, .article-card:hover, .track:hover {
  border-color: #d6d1c6; box-shadow: var(--shadow); transform: translateY(-2px);
}
.trade__icon { background: var(--yellow-soft); color: var(--brown); }
.trade:hover .trade__icon { background: var(--yellow); color: var(--ink); }
.trade--more { box-shadow: none; }
.trade--more:hover { box-shadow: var(--shadow); border-color: var(--ink); }
.trade--more .trade__icon { background: var(--ink-3); color: var(--yellow); }

.step__visual, .flow__visual, .feature-row__visual { border: 1px solid var(--line); }
.step__visual--code, .flow__visual--code { border-color: var(--ink); }

/* Review en uitgelicht klantverhaal: donker en ingetogen i.p.v. felgeel */
.quote { background: var(--ink); border: 0; box-shadow: var(--shadow-lg); }
.quote blockquote { color: var(--white); font-weight: 600; }
.quote__mark { fill: var(--yellow); }
.quote figcaption { color: #a7abb3; }
.quote figcaption b { color: var(--white); }
.quote .avatar { background: var(--yellow); color: var(--ink); }
.case--big { background: var(--ink); border: 0; box-shadow: var(--shadow-lg); }
.case--big h2 { color: var(--white); }
.case--big p, .case__who { color: #a7abb3 !important; }
.case--big .case__trade { color: var(--yellow) !important; }
.case--big .case__tag { color: var(--yellow); border-color: rgba(255,194,26,.5); }
.case__who b { color: var(--white); }
.case__stats { border-top-color: var(--ink-3); }
.case__stats div { border-bottom-color: var(--ink-3); }
.case__stats dt { color: var(--yellow); }
.case__stats dd { color: #a7abb3; }

/* ---------- Elementen die te speels waren ---------- */
.flow__no { -webkit-text-stroke: 0; color: var(--brown); font-size: 1rem; font-weight: 700; letter-spacing: .02em; }
.flow__no::before { content: "Stap "; }
.mock-input { border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.logic__node { border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.logic > .logic__node { background: var(--ink); color: var(--white); border-color: var(--ink); }
.logic__split::before { border-width: 1px; border-color: #cfcac0; }
.faq summary::after { border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.faq details[open] summary::after { background-color: var(--yellow-soft); }
.faq summary:hover::after { background-color: var(--paper); }
.faq__list, .value-list, .rollout, .numbers, .vak-links, .faq__nav, .objection { border-top-width: 1px; border-top-color: var(--line); }
.numbers { border-top: 1px solid var(--line); }
input[type="range"]::-webkit-slider-thumb { border: 2px solid var(--white); background: var(--ink); box-shadow: 0 0 0 1px var(--ink), 0 2px 6px rgba(15,17,21,.3); }
input[type="range"]::-moz-range-thumb { border: 2px solid var(--white); background: var(--ink); }
input[type="range"] { height: 4px; }
.seg button.is-on { box-shadow: 0 1px 2px rgba(15,17,21,.1), 0 0 0 1px var(--line); }
.toast { box-shadow: var(--shadow-lg); border: 1px solid var(--line); }
.ticks svg { background: var(--yellow-soft); color: var(--brown); }
.compare__col--new li svg { background: var(--yellow-soft); color: var(--brown); }
.est__done-icon { border: 0; }
.kicker::before { width: 16px; }
.kicker { font-size: .82rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; }
.jump a, .chip, .tag-cloud li { box-shadow: var(--shadow-sm); }

/* Gsm-menu: in- en uitfaden binnen het scherm (geen zijwaarts scrollen) */
@media (max-width: 1280px) {
  .mnav { transform: translateY(-8px); opacity: 0; visibility: hidden; transition: opacity .2s, transform .25s var(--ease), visibility .2s; }
  .mnav.is-open { transform: none; opacity: 1; visibility: visible; }
}

/* Op tablet en gsm: 12-koloms rasters worden één kolom (voorkomt overloop) */
@media (max-width: 960px) {
  .hero__inner, .head--split, .reviews, .roi, .faq, .start__inner, .footer__inner,
  .page-hero__grid, .split, .split-demo, .flow__row, .feature-row__grid, .contact,
  .signup__grid, .about, .case--big, .int-group {
    grid-template-columns: minmax(0, 1fr);
  }
  .footer__inner { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .footer__inner .footer__col { grid-column: span 2; }
}
@media (max-width: 640px) {
  .footer__inner .footer__col { grid-column: span 2; }
}

/* Formuliervelden mogen krimpen (lange opties in een keuzelijst) */
.form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.field, .field select, .field input { min-width: 0; }
@media (max-width: 640px) { .form-grid { grid-template-columns: minmax(0, 1fr); } }

/* Vakkenraster: kolommen mogen krimpen, lange woorden afbreken */
.trades { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.trade__name { overflow-wrap: anywhere; hyphens: auto; }
@media (max-width: 1100px) { .trades { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .trades { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 360px) { .trades { grid-template-columns: minmax(0, 1fr); } .trade { min-height: 0; } }

/* Demo-venster */
.modal__backdrop { background: rgba(15,17,21,.55); backdrop-filter: blur(4px); }
.modal__dialog { border: 0; box-shadow: 0 40px 80px -20px rgba(0,0,0,.5); }
.modal__close { background: rgba(255,255,255,.1); }
.est__opt { border-width: 1px; }
.est__opt.is-on { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.est__opt .box { border-width: 1px; }
.est__opt.is-on .box { background: var(--ink); color: var(--yellow); border-color: var(--ink); }

/* Formulieren */
.field input:not([type="checkbox"]), .field select, .field textarea, .est__form input { border-width: 1px; box-shadow: var(--shadow-sm); }
.field input:focus, .field select:focus, .field textarea:focus, .est__form input:focus { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(255,194,26,.35); }
.start__form input { border-width: 1px; }

/* Hero van de homepage */
.hero { background: linear-gradient(180deg, var(--paper), #fff 85%); }
.hero__sub { font-weight: 600; color: var(--brown); letter-spacing: -.01em; }
.hero__note { border: 1px solid var(--line); border-top: 0; box-shadow: var(--shadow-sm); }
.hero__sub { margin-bottom: var(--s5); }
.hero__try { color: var(--ink); }
.works li { font-family: var(--display); font-weight: 700; color: #b0aca3; }

/* =========================================================
   Hero: gecentreerd en symmetrisch
   ========================================================= */
.hero--center { position: relative; overflow: hidden; background: #fff; padding: var(--s12) 0 0; border-bottom: 0; text-align: center; }
.hero--center .hero__grid-bg { position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 64px 64px; background-position: center top;
  -webkit-mask-image: radial-gradient(ellipse 60% 55% at 50% 30%, #000 30%, transparent 75%);
          mask-image: radial-gradient(ellipse 60% 55% at 50% 30%, #000 30%, transparent 75%); opacity: .7; }
.hero--center .hero__grid-bg::after { content: ""; position: absolute; left: 50%; top: 18%; width: 720px; height: 420px; transform: translateX(-50%); background: radial-gradient(ellipse, rgba(255,194,26,.18), transparent 70%); }
.hero--center .container { position: relative; }
.hero--center .hero__copy { max-width: 960px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; }
.hero--center h1 { font-size: clamp(2.5rem, 5.4vw, 4.4rem); line-height: 1.06; text-wrap: balance; }
.hero--center .hero__sub { font-family: var(--body); font-weight: 500; color: var(--muted); font-size: clamp(1.1rem, 1.7vw, 1.3rem); line-height: 1.5; letter-spacing: -.005em; max-width: none; margin: var(--s3) 0 var(--s5); text-wrap: balance; }
.hero--center .hero__cta--stack { align-items: center; }
.hero--center .hero__note { margin: -1px 0 0; }
.hero--center .hero__try { margin-top: var(--s4); font-weight: 600; }
.br-desk { display: inline; }

/* Showcase: aanvraag | calculator | mascotte, op één donker paneel */
.showcase { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 360px minmax(0, 1fr); column-gap: var(--s5); align-items: end; margin-top: var(--s10); padding: 0 var(--s5); text-align: left; }
.showcase::before { content: ""; position: absolute; left: 0; right: 0; top: 120px; bottom: 0; background: var(--ink); border-radius: 24px 24px 0 0; }
.showcase > * { position: relative; }
.showcase .calc { position: relative; left: auto; bottom: auto; width: 100%; margin: 0 0 var(--s6); }
.showcase__side { height: 100%; display: flex; align-items: flex-end; }
.showcase__side--left { justify-content: flex-end; padding-bottom: var(--s6); }
.showcase__side--right { justify-content: center; align-self: stretch; }
.showcase__side--right img { width: auto; max-width: 100%; height: 440px; object-fit: contain; object-position: bottom;
  -webkit-mask-image: radial-gradient(ellipse 62% 64% at 50% 44%, #000 62%, transparent 100%);
          mask-image: radial-gradient(ellipse 62% 64% at 50% 44%, #000 62%, transparent 100%); }

.mini-lead { width: 100%; max-width: 300px; background: var(--ink-2); border: 1px solid var(--ink-3); border-radius: var(--r-lg); padding: var(--s3); color: #a7abb3; }
.mini-lead__head { display: flex; align-items: center; gap: var(--s1); font-size: .8rem; font-weight: 600; color: #a7abb3; margin-bottom: var(--s2); }
.mini-lead__name { font-family: var(--display); font-weight: 700; font-size: 1.15rem; color: var(--white); }
.mini-lead__meta { font-size: .88rem; margin-top: 2px; }
.mini-lead__price { margin: var(--s2) 0; padding: 12px var(--s2); border-radius: var(--r-sm); background: rgba(255,194,26,.1); border: 1px solid rgba(255,194,26,.25); }
.mini-lead__price span { display: block; font-size: .75rem; color: #a7abb3; }
.mini-lead__price b { font-family: var(--display); color: var(--yellow); font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.mini-lead__rows div { display: flex; justify-content: space-between; padding: 8px 0; border-top: 1px solid var(--ink-3); font-size: .85rem; }
.mini-lead__rows b { color: var(--white); font-weight: 500; }

/* Strook "werkt op elke website" onder het paneel */
.hero--center .works { margin-top: 0; border-top: 0; background: var(--ink); border-radius: 0 0 24px 24px; padding: var(--s3) var(--s5); }
.hero--center .works > span { color: #8b909a; }
.hero--center .works li { color: #5d626c; }
.hero--center + .section { padding-top: var(--s12); }

@media (max-width: 1100px) {
  .showcase { grid-template-columns: minmax(0, 1fr) 340px minmax(0, 1fr); column-gap: var(--s3); padding: 0 var(--s3); }
  .showcase__side--right img { height: 380px; }
}
@media (max-width: 960px) {
  .br-desk { display: none; }
  .hero--center { padding-top: var(--s8); }
  .showcase { grid-template-columns: minmax(0, 1fr); padding: 0 var(--s2); margin-top: var(--s8); }
  .showcase::before { top: 96px; }
  .showcase__side { display: none; }
  .showcase .calc { max-width: 420px; margin: 0 auto var(--s4); }
  .hero--center .works { padding: var(--s3); align-items: center; text-align: center; }
  .hero--center .works ul { justify-content: center; }
}
@media (max-width: 640px) {
  .hero--center h1 { font-size: 2.3rem; }
  .hero--center .hero__cta--stack { align-self: stretch; }
}
/* Logo in de header: kleiner */
.nav__logo img { height: 28px; width: auto; }
@media (max-width: 640px) { .nav__logo img { height: 24px; } }
/* Showcase zonder calculator: aanvraag en mascotte in twee gelijke helften */
.showcase--duo { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s5); }
.showcase--duo::before { top: 96px; }
.showcase--duo .showcase__side--left { justify-content: center; padding-bottom: var(--s6); }
.showcase--duo .mini-lead { max-width: 360px; }
@media (max-width: 960px) {
  .showcase--duo { grid-template-columns: minmax(0, 1fr); }
  .showcase--duo::before { top: 72px; }
  .showcase--duo .showcase__side--right { display: flex; }
  .showcase--duo .showcase__side--right img { height: 300px; }
}
/* Hero zonder showcase: gelijke ruimte boven en onder, dunne lijn als afsluiting */
.hero--center { padding: var(--s15) 0 var(--s15); border-bottom: 1px solid var(--line); }
.hero--center + .section { padding-top: var(--s15); }
@media (max-width: 960px) { .hero--center { padding: var(--s10) 0; } .hero--center + .section { padding-top: var(--s12); } }
/* =========================================================
   Sectie "Offerte aanvragen" kost je klanten
   ========================================================= */
.problem { background: linear-gradient(180deg, #fff 0%, var(--paper) 100%); }
.problem__head { max-width: 760px; margin: 0 auto var(--s8); text-align: center; display: flex; flex-direction: column; align-items: center; }
.problem__head h2 { text-wrap: balance; margin: var(--s2) 0; }
.problem__head p { color: var(--muted); font-size: 1.1rem; line-height: 1.6; text-wrap: balance; }
.eyebrow-pill { display: inline-flex; align-items: center; gap: var(--s1); height: 32px; padding: 0 14px; border-radius: 99px; background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow-sm); font-size: .82rem; font-weight: 600; color: var(--ink); }
.eyebrow-pill svg { width: 16px; height: 16px; color: var(--yellow-deep); }

/* Vergelijking: elke rij links en rechts op exact dezelfde hoogte */
.vs { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s4); max-width: 1056px; margin: 0 auto; }
.vs__cell { position: relative; display: grid; grid-template-columns: 28px 1fr; gap: var(--s2); align-items: start; padding: var(--s3) var(--s4); }
.vs__cell p { margin: 0; color: var(--muted); line-height: 1.55; }
.vs__cell p b { display: block; color: var(--ink); font-weight: 600; margin-bottom: 2px; }
.vs__cell:not(.vs__cell--last):not(.vs__cell--head)::after { content: ""; position: absolute; left: var(--s4); right: var(--s4); bottom: 0; height: 1px; background: var(--line); }
.vs__cell--old { background: var(--paper-2); }
.vs__cell--new { background: var(--white); border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
.vs__cell--head { grid-template-columns: 48px 1fr; align-items: center; padding-top: var(--s4); padding-bottom: var(--s3); border-radius: var(--r-lg) var(--r-lg) 0 0; }
.vs__cell--head::after { content: ""; position: absolute; left: var(--s4); right: var(--s4); bottom: 0; height: 2px; background: var(--line); }
.vs__cell--new.vs__cell--head { border-top: 1px solid var(--line); }
.vs__cell--new.vs__cell--head::after { background: var(--yellow); }
.vs__cell--last { padding-bottom: var(--s4); border-radius: 0 0 var(--r-lg) var(--r-lg); }
.vs__cell--new.vs__cell--last { border-bottom: 1px solid var(--line); }
.vs__cell--new { box-shadow: 0 30px 60px -40px rgba(15,17,21,.35); }
.vs__title { font-family: var(--display); font-weight: 700; font-size: 1.2rem; color: var(--ink) !important; letter-spacing: -.015em; }
.vs__sub { font-size: .9rem; }
.vs__icon { width: 48px; height: 48px; border-radius: var(--r); display: grid; place-items: center; }
.vs__icon svg { width: 24px; height: 24px; }
.vs__cell--old .vs__icon { background: var(--white); color: var(--muted); border: 1px solid var(--line); }
.vs__cell--new .vs__icon { background: var(--yellow); color: var(--ink); }
.vs__mark { width: 28px; height: 28px; padding: 6px; border-radius: 50%; stroke-width: 2.6; margin-top: 1px; }
.vs__cell--old .vs__mark { background: var(--white); color: #98a2b3; border: 1px solid var(--line); }
.vs__cell--new .vs__mark { background: var(--ink); color: var(--yellow); }
.vs__cell--old p b { color: #475467; }
.vs__badge { position: absolute; z-index: 2; left: 50%; top: 56px; transform: translate(-50%, -50%); width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--yellow); font-family: var(--display); font-weight: 800; font-size: .95rem; letter-spacing: .02em; box-shadow: 0 0 0 6px #fff, var(--shadow); }

/* Cijfers: drie gelijke vakken, gecentreerd */
.stats3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1056px; margin: var(--s8) auto 0; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }
.stats3 > div { padding: var(--s4) var(--s3); text-align: center; }
.stats3 > div + div { border-left: 1px solid var(--line); }
.stats3 dt { font-family: var(--display); font-weight: 800; font-size: clamp(2.25rem, 4vw, 3rem); line-height: 1; letter-spacing: -.04em; color: var(--ink); font-variant-numeric: tabular-nums; }
.stats3 dt::after { content: ""; display: block; width: 32px; height: 3px; margin: var(--s2) auto; border-radius: 3px; background: var(--yellow); }
.stats3 dd { margin: 0 auto; max-width: 20em; color: var(--muted); text-wrap: balance; }

@media (max-width: 760px) {
  .vs { grid-template-columns: minmax(0, 1fr); }
  .vs__cell--old { order: 1; }
  .vs__badge { order: 2; position: relative; left: auto; top: auto; transform: none; justify-self: center; margin: var(--s3) 0; }
  .vs__cell--new { order: 3; }
  .vs__cell { padding: var(--s2) var(--s3); }
  .vs__cell:not(.vs__cell--last):not(.vs__cell--head)::after, .vs__cell--head::after { left: var(--s3); right: var(--s3); }
  .stats3 { grid-template-columns: minmax(0, 1fr); }
  .stats3 > div + div { border-left: 0; border-top: 1px solid var(--line); }
}
/* =========================================================
   Intro: korte, gecentreerde tekst onder de hero
   ========================================================= */
.intro { background: linear-gradient(180deg, #fff 0%, var(--paper) 100%); }
.intro__inner { max-width: 820px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; }
.intro__inner h2 { margin: var(--s3) 0 var(--s2); text-wrap: balance; }
.intro__lead { font-size: 1.15rem; line-height: 1.6; color: var(--muted); max-width: 36em; text-wrap: balance; }
.intro__result { margin: var(--s5) 0; padding: var(--s3) var(--s4); max-width: 44em; border-radius: var(--r-lg); background: var(--ink); color: #d0d5dd; font-size: 1.1rem; line-height: 1.5; text-wrap: balance; }
.intro__result span { color: var(--yellow); font-weight: 700; }
.intro__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); width: 100%; margin-bottom: var(--s5); }
.intro__card { display: grid; grid-template-columns: 48px 1fr; gap: var(--s2); align-items: start; text-align: left; padding: var(--s3); background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }
.intro__icon { width: 48px; height: 48px; border-radius: var(--r); background: var(--yellow); color: var(--ink); display: grid; place-items: center; }
.intro__icon svg { width: 22px; height: 22px; }
.intro__card p { margin: 0; color: var(--muted); line-height: 1.5; }
.intro__card b { display: block; color: var(--ink); font-weight: 600; margin-bottom: 2px; }
.intro .btn svg { width: 18px; height: 18px; }
@media (max-width: 640px) {
  .intro__cards { grid-template-columns: minmax(0, 1fr); }
  .intro__result { padding: var(--s2) var(--s3); }
}
/* =========================================================
   Hero: donker en aangekleed (i.p.v. bleek)
   ========================================================= */
.hero--center { background: radial-gradient(ellipse 80% 60% at 50% 0%, #22262e 0%, var(--ink) 60%); border-bottom: 0; color: #b4bac6; isolation: isolate; }
.hero--center .hero__grid-bg { opacity: 1; z-index: -1;
  background-image: linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 40%, #000 20%, transparent 80%);
          mask-image: radial-gradient(ellipse 70% 70% at 50% 40%, #000 20%, transparent 80%); }
.hero--center .hero__grid-bg::after { display: none; }
.hero__glow { position: absolute; z-index: -1; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient(circle, rgba(255,194,26,.28), transparent 65%); filter: blur(10px); pointer-events: none; }
.hero__glow--l { left: -180px; bottom: -260px; }
.hero__glow--r { right: -180px; bottom: -260px; }
.hero--center h1 { color: var(--white); }
.hero--center .mark { text-decoration-color: var(--yellow); }
.hero--center .hero__sub { color: #b4bac6; }
.hero--center .hero__note { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); color: #b4bac6; box-shadow: none; }
.hero--center .hero__try { color: var(--white); }
.hero--center .hero__try:hover { color: var(--yellow); }
.hero--center .btn--primary { box-shadow: 0 0 0 1px rgba(255,194,26,.4), 0 12px 32px -10px rgba(255,194,26,.55); }

/* Zwevende kaartjes, gespiegeld links en rechts */
.hero-chip { position: absolute; top: 46%; display: flex; align-items: center; gap: 12px; padding: 12px 18px 12px 12px; background: var(--white); border-radius: 14px; box-shadow: 0 24px 48px -16px rgba(0,0,0,.6); text-align: left; z-index: 1; }
.hero-chip b { display: block; color: var(--ink); font-size: .92rem; font-weight: 600; line-height: 1.25; font-variant-numeric: tabular-nums; }
.hero-chip span { font-size: .8rem; color: var(--muted); }
.hero-chip__icon { width: 40px; height: 40px; flex: none; border-radius: 10px; display: grid; place-items: center; background: var(--yellow); color: var(--ink); }
.hero-chip__icon--green { background: #dcfae6; color: #079455; }
.hero-chip__icon svg { width: 20px; height: 20px; }
.hero-chip--l { left: max(24px, calc(50% - 700px)); transform: rotate(-4deg); animation: chipL 7s ease-in-out infinite; }
.hero-chip--r { right: max(24px, calc(50% - 700px)); transform: rotate(4deg); animation: chipR 7s ease-in-out infinite; }
@keyframes chipL { 50% { transform: rotate(-4deg) translateY(-10px); } }
@keyframes chipR { 50% { transform: rotate(4deg) translateY(-10px); } }
@media (max-width: 1280px) { .hero-chip { display: none; } }

/* =========================================================
   Intro: foto links, tekst met bullets rechts
   ========================================================= */
.intro2 { background: var(--white); }
.intro2__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: center; }
.intro2__media { grid-column: 1 / span 5; position: relative; height: 600px; border-radius: 24px; overflow: hidden; background: radial-gradient(circle at 50% 35%, #2a2f38 0%, var(--ink) 70%); }
.intro2__media::before { content: ""; position: absolute; left: 50%; top: 38%; width: 360px; height: 360px; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, rgba(255,194,26,.35), transparent 65%); }
.intro2__media img { position: absolute; left: 50%; bottom: -24px; height: 94%; width: auto; max-width: none; transform: translateX(-50%);
  -webkit-mask-image: radial-gradient(ellipse 58% 62% at 50% 44%, #000 62%, transparent 100%);
          mask-image: radial-gradient(ellipse 58% 62% at 50% 44%, #000 62%, transparent 100%); }
.intro2__badge { position: absolute; left: var(--s3); right: var(--s3); bottom: var(--s3); display: flex; align-items: center; gap: 12px; padding: 12px var(--s2); background: rgba(255,255,255,.96); border-radius: 14px; box-shadow: 0 20px 40px -16px rgba(0,0,0,.6); }
.intro2__badge b { display: block; color: var(--ink); font-size: .92rem; font-weight: 600; }
.intro2__badge span:not(.intro2__badge-icon) { font-size: .82rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.intro2__badge-icon { width: 36px; height: 36px; flex: none; border-radius: 50%; background: #dcfae6; color: #079455; display: grid; place-items: center; }
.intro2__badge-icon svg { width: 18px; height: 18px; stroke-width: 2.6; }

.intro2__text { grid-column: 7 / span 6; display: flex; flex-direction: column; align-items: flex-start; }
.intro2__text h2 { margin: var(--s3) 0 var(--s2); text-wrap: balance; }
.intro2__lead { font-size: 1.15rem; line-height: 1.6; color: var(--muted); }
.intro2__list { list-style: none; margin: var(--s4) 0 var(--s5); padding: 0; width: 100%; border-top: 1px solid var(--line); }
.intro2__list li { display: grid; grid-template-columns: 28px 1fr; gap: var(--s2); align-items: start; padding: 14px 0; border-bottom: 1px solid var(--line); }
.intro2__list li > span { width: 28px; height: 28px; border-radius: 50%; background: var(--yellow); color: var(--ink); display: grid; place-items: center; }
.intro2__list li > span svg { width: 15px; height: 15px; stroke-width: 3; }
.intro2__list p { margin: 3px 0 0; color: var(--muted); line-height: 1.5; }
.intro2__list b { color: var(--ink); font-weight: 600; }
.intro2 .btn svg { width: 18px; height: 18px; }

@media (max-width: 960px) {
  .intro2__grid { grid-template-columns: minmax(0, 1fr); row-gap: var(--s6); }
  .intro2__media, .intro2__text { grid-column: 1 / -1; }
  .intro2__media { height: 460px; }
}
@media (max-width: 640px) {
  .intro2__media { height: 380px; }
  .intro2 .btn { width: 100%; }
}
/* =========================================================
   Transparante header
   ========================================================= */
.nav__logo .logo-light { display: none; }
.nav { background: rgba(255,255,255,.62); -webkit-backdrop-filter: saturate(180%) blur(16px); backdrop-filter: saturate(180%) blur(16px); border-bottom: 1px solid transparent; transition: background .25s, border-color .25s; }
.nav.is-scrolled { background: rgba(255,255,255,.78); border-bottom-color: rgba(228,231,236,.8); }

/* Homepage: header ligt volledig doorzichtig over de donkere hero */
.page-dark-hero .nav { position: fixed; top: 0; left: 0; right: 0; }
.page-dark-hero .nav:not(.is-scrolled):not(:has(.mnav.is-open)) { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.page-dark-hero .nav:not(.is-scrolled):not(:has(.mnav.is-open)) .logo-dark { display: none; }
.page-dark-hero .nav:not(.is-scrolled):not(:has(.mnav.is-open)) .logo-light { display: block; }
.page-dark-hero .nav:not(.is-scrolled):not(:has(.mnav.is-open)) :is(.nav__link, .dd__btn, .nav__login) { color: rgba(255,255,255,.88); }
.page-dark-hero .nav:not(.is-scrolled):not(:has(.mnav.is-open)) :is(.nav__link, .dd__btn, .nav__login):hover { color: #fff; }
.page-dark-hero .nav:not(.is-scrolled):not(:has(.mnav.is-open)) .nav__burger { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); }
.page-dark-hero .nav:not(.is-scrolled):not(:has(.mnav.is-open)) .nav__burger span { background: #fff; }
.page-dark-hero .hero--center { padding-top: calc(72px + var(--s15)); }
@media (max-width: 960px) { .page-dark-hero .hero--center { padding-top: calc(72px + var(--s10)); } }
@media (max-width: 640px) { .page-dark-hero .hero--center { padding-top: calc(64px + var(--s8)); } }

/* =========================================================
   Hero-achtergrond: raster, spot bovenaan en een gloeiende horizon
   ========================================================= */
.hero--center { padding-bottom: calc(var(--s15) + 40px); }
.hero__spot { position: absolute; z-index: -1; left: 50%; top: -240px; width: 900px; height: 520px; transform: translateX(-50%); background: radial-gradient(ellipse at center, rgba(255,255,255,.08), transparent 65%); pointer-events: none; }
.hero__horizon { position: absolute; z-index: -1; left: 50%; bottom: -1040px; width: 1800px; height: 1120px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(ellipse at 50% 0%, #1b1e25 0%, var(--ink) 60%); box-shadow: 0 -1px 0 rgba(255,194,26,.9), 0 -12px 40px rgba(255,194,26,.35), 0 -60px 160px rgba(255,194,26,.18); pointer-events: none; }
.hero__horizon::before { content: ""; position: absolute; left: 50%; top: -2px; width: 480px; height: 4px; transform: translateX(-50%); border-radius: 4px; background: linear-gradient(90deg, transparent, #ffe08a, transparent); filter: blur(1px); }
@media (max-width: 960px) { .hero__horizon { width: 1100px; height: 800px; bottom: -740px; } }

/* =========================================================
   Intro-bullets: elke bullet op één regel (desktop)
   ========================================================= */
.intro2__list li { align-items: center; }
.intro2__list p { margin: 0; }
@media (min-width: 1100px) { .intro2__list p { white-space: nowrap; } }
/* =========================================================
   Hero met mascotte: stijgt op uit de gloeiende horizon
   ========================================================= */
.hero--center { padding-bottom: 0; }
.hero--center .hero__copy { position: relative; z-index: 3; }
.hero__mascot { position: relative; z-index: 1; display: flex; justify-content: center; margin-top: var(--s6); }
.hero__mascot img { display: block; height: 460px; width: auto; filter: drop-shadow(0 30px 40px rgba(0,0,0,.45)); }
.hero__horizon { z-index: 2; bottom: -1050px; }
/* Zonnestralen achter de mascotte, symmetrisch vanuit het midden */
.hero__rays { position: absolute; z-index: 0; left: 50%; bottom: -380px; width: 1400px; height: 1400px; transform: translateX(-50%); pointer-events: none;
  background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(255,194,26,.10) 0deg 6deg, transparent 6deg 18deg);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 12%, transparent 55%);
          mask-image: radial-gradient(circle at 50% 50%, #000 12%, transparent 55%);
  animation: raysSpin 120s linear infinite; }
.hero__rays::after { content: ""; position: absolute; left: 50%; top: 50%; width: 560px; height: 560px; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, rgba(255,194,26,.30), rgba(255,194,26,.08) 45%, transparent 70%); }
@keyframes raysSpin { to { transform: translateX(-50%) rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .hero__rays { animation: none; } }
@media (max-width: 960px) { .hero__mascot img { height: 360px; } .hero__rays { width: 1000px; height: 1000px; bottom: -300px; } }
@media (max-width: 640px) { .hero__mascot img { height: 300px; } .hero__mascot { margin-top: var(--s5); } }

/* Intro-foto met uitgeknipte mascotte (geen masker meer nodig) */
.intro2__media img { -webkit-mask-image: none; mask-image: none; height: 88%; bottom: 0; filter: drop-shadow(0 20px 30px rgba(0,0,0,.5)); }
/* Horizon op tablet/gsm: ook daar de onderkant van de mascotte bedekken */
@media (max-width: 960px) { .hero__horizon { width: 1100px; height: 800px; bottom: -740px; } }
@media (max-width: 640px) { .hero__horizon { width: 900px; height: 700px; bottom: -650px; } }
/* =========================================================
   Hero terug wit, met subtiele textuur
   ========================================================= */
.hero--center { padding: var(--s15) 0 var(--s15); color: var(--text); border-bottom: 1px solid var(--line);
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%, rgba(255,194,26,.14), transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    #fff; }
.hero--center .hero__grid-bg { z-index: -1; opacity: 1;
  background-image: radial-gradient(circle, rgba(15,17,21,.13) 1px, transparent 1.4px);
  background-size: 22px 22px; background-position: center top;
  -webkit-mask-image: radial-gradient(ellipse 70% 75% at 50% 40%, #000 25%, transparent 80%);
          mask-image: radial-gradient(ellipse 70% 75% at 50% 40%, #000 25%, transparent 80%); }
.hero--center h1 { color: var(--ink); }
.hero--center .hero__sub { color: var(--muted); }
.hero--center .hero__note { background: #fff; border-color: var(--line); color: var(--muted); box-shadow: var(--shadow-sm); }
.hero--center .hero__try { color: var(--ink); }
.hero--center .hero__try:hover { color: var(--yellow-deep); }
.hero--center .btn--primary { box-shadow: 0 1px 2px rgba(15,17,21,.08), 0 10px 24px -10px rgba(229,168,0,.6); }
.page-light-hero .hero--center + .section { padding-top: var(--s15); }
@media (max-width: 960px) { .hero--center { padding: var(--s10) 0; } }
/* =========================================================
   Hero "live": minder saai, wel gecentreerd en symmetrisch
   ========================================================= */
.hero--live { padding-bottom: 0; }
.hero--live .hero__copy { position: relative; z-index: 2; }

/* Bewegende lichtvlekken */
.hero__blobs { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.hero__blobs i { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .55; }
.hero__blobs .b1 { width: 460px; height: 460px; left: calc(50% - 560px); top: 10%; background: #ffd65c; animation: blobA 18s ease-in-out infinite; }
.hero__blobs .b2 { width: 460px; height: 460px; right: calc(50% - 560px); top: 10%; background: #ffc9a3; animation: blobB 18s ease-in-out infinite; }
.hero__blobs .b3 { width: 520px; height: 280px; left: 50%; top: -120px; margin-left: -260px; background: #fff0b8; opacity: .8; animation: blobC 14s ease-in-out infinite; }
@keyframes blobA { 50% { transform: translate(60px, 40px) scale(1.08); } }
@keyframes blobB { 50% { transform: translate(-60px, 40px) scale(1.08); } }
@keyframes blobC { 50% { transform: scale(1.15); } }

/* Label met pulserend bolletje */
.hero__badge { display: inline-flex; align-items: center; gap: 10px; height: 34px; padding: 0 16px; margin-bottom: var(--s3); border-radius: 99px; background: rgba(255,255,255,.8); border: 1px solid var(--line); box-shadow: var(--shadow-sm); font-size: .88rem; font-weight: 500; color: var(--text); backdrop-filter: blur(6px); }
.pulse { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--yellow-deep); }
.pulse::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--yellow); animation: pulse 1.8s ease-out infinite; }
@keyframes pulse { to { transform: scale(3); opacity: 0; } }

/* Handgetekende kronkel die zichzelf tekent */
.squiggle { position: relative; display: inline-block; white-space: nowrap; }
.squiggle svg { position: absolute; left: -2%; bottom: -.22em; width: 104%; height: .32em; overflow: visible; }
.squiggle path { fill: none; stroke: var(--yellow); stroke-width: 7; stroke-linecap: round; stroke-dasharray: 520; stroke-dashoffset: 520; animation: draw 1.1s cubic-bezier(.6,.1,.2,1) .4s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* Glans over de knop */
.btn--shine { position: relative; overflow: hidden; }
.btn--shine::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.65), transparent); transform: skewX(-20deg); animation: shine 4.5s ease-in-out 1.5s infinite; }
@keyframes shine { 0% { left: -60%; } 25%, 100% { left: 130%; } }

/* Doorlopende band met vakken */
.marquee { position: relative; z-index: 2; margin-top: var(--s10); padding: var(--s3) 0; border-top: 1px solid var(--line); background: rgba(255,255,255,.6); overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee__track { display: flex; gap: var(--s2); width: max-content; animation: marquee 40s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee a { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 18px; border-radius: 99px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); text-decoration: none; font-weight: 600; font-size: .95rem; color: var(--ink); white-space: nowrap; transition: border-color .15s, transform .15s; }
.marquee a:hover { border-color: var(--yellow-deep); transform: translateY(-2px); }
.marquee a svg { width: 20px; height: 20px; color: var(--ink); padding: 0; }
@keyframes marquee { to { transform: translateX(calc(-50% - var(--s1))); } }

@media (prefers-reduced-motion: reduce) {
  .hero__blobs i, .pulse::after, .btn--shine::after, .marquee__track { animation: none !important; }
  .squiggle path { animation: none; stroke-dashoffset: 0; }
}
@media (max-width: 960px) {
  .hero--live { padding-bottom: 0; }
  .marquee { margin-top: var(--s8); }
  .hero__blobs .b1 { left: -200px; } .hero__blobs .b2 { right: -200px; }
}
@media (max-width: 640px) {
  .squiggle { white-space: normal; }
  .squiggle svg { display: none; }
  .squiggle { text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: .12em; text-underline-offset: .12em; }
  .hero__badge { font-size: .78rem; height: auto; padding: 6px 12px; }
}
/* Intro: bredere tekstkolom zodat de langere bullets op één regel passen */
.intro2__text { grid-column: 6 / span 7; padding-left: var(--s4); }
.intro2__list p { font-size: .95rem; }
.intro2__list p { white-space: normal; }
@media (min-width: 1240px) { .intro2__list p { white-space: nowrap; } }
@media (max-width: 960px) { .intro2__text { grid-column: 1 / -1; padding-left: 0; } }
/* Band met vakken: niet klikbaar, loopt altijd door */
.marquee { pointer-events: none; user-select: none; }
.marquee__track > span { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 18px; border-radius: 99px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); font-weight: 600; font-size: .95rem; color: var(--ink); white-space: nowrap; }
.marquee__track > span svg { width: 20px; height: 20px; }
.marquee:hover .marquee__track { animation-play-state: running; }
/* =========================================================
   Hero: tekst links, mascotte rechts op een gele cirkel
   ========================================================= */
.hero--split-m { text-align: left; padding-top: var(--s12); }
.hero--split-m .hero__blobs .b1 { left: auto; right: -120px; top: 5%; opacity: .45; }
.hero--split-m .hero__blobs .b2, .hero--split-m .hero__blobs .b3 { display: none; }
.hero--split-m .hero__grid-bg { -webkit-mask-image: radial-gradient(ellipse 55% 75% at 72% 45%, #000 25%, transparent 78%); mask-image: radial-gradient(ellipse 55% 75% at 72% 45%, #000 25%, transparent 78%); }
.hs { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: center; }
.hs .hero__copy { grid-column: 1 / span 7; max-width: none; margin: 0; align-items: flex-start; }
.hero--split-m h1 { text-align: left; font-size: clamp(2.5rem, 4.6vw, 4rem); text-wrap: initial; }
.hero--split-m .hero__sub { text-align: left; max-width: 32em; text-wrap: pretty; }
.hero--split-m .hero__cta--stack { align-items: flex-start; }
.hero--split-m .hero__note { margin-left: var(--s4); }

.hs__art { grid-column: 8 / span 5; position: relative; aspect-ratio: 1 / 1; width: 100%; max-width: 500px; justify-self: end; }
.hs__circle { position: absolute; inset: 6%; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffd95e 0%, var(--yellow) 45%, #f2ae00 100%);
  box-shadow: 0 40px 80px -30px rgba(229,168,0,.55), inset 0 -20px 40px rgba(0,0,0,.06); }
.hs__ring { position: absolute; inset: 0; border-radius: 50%; border: 2px dashed rgba(15,17,21,.18); animation: ringSpin 60s linear infinite; }
.hs__ring::before, .hs__ring::after { content: ""; position: absolute; width: 14px; height: 14px; border-radius: 50%; background: var(--ink); border: 3px solid #fff; box-shadow: var(--shadow-sm); }
.hs__ring::before { top: 12%; left: 12%; }
.hs__ring::after { bottom: 12%; right: 12%; background: var(--yellow-deep); }
@keyframes ringSpin { to { transform: rotate(360deg); } }
.hs__art img { position: absolute; left: 50%; bottom: 6%; height: 104%; width: auto; max-width: none; transform: translateX(-50%); filter: drop-shadow(0 24px 30px rgba(15,17,21,.35));
  -webkit-mask-image: linear-gradient(180deg, #000 88%, transparent 100%); mask-image: linear-gradient(180deg, #000 88%, transparent 100%); }
@media (prefers-reduced-motion: reduce) { .hs__ring { animation: none; } }

@media (max-width: 1100px) {
  .hs .hero__copy { grid-column: 1 / span 7; }
  .hs__art { grid-column: 8 / span 5; }
}
@media (max-width: 960px) {
  .hero--split-m { padding-top: var(--s8); }
  .hs { grid-template-columns: minmax(0, 1fr); row-gap: var(--s6); }
  .hs .hero__copy, .hs__art { grid-column: 1 / -1; }
  .hs__art { max-width: 360px; justify-self: center; }
}
@media (max-width: 640px) {
  .hero--split-m .hero__cta--stack { align-items: stretch; align-self: stretch; }
  .hero--split-m .hero__note { margin-left: 0; align-self: center; }
  .hs__art { max-width: 280px; }
}
/* Band met vakken: gewone doorlopende tekst, geen knoppen */
.marquee { background: transparent; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: var(--s3) 0; }
.marquee__track { gap: 0; align-items: center; }
.marquee__track > span { height: auto; padding: 0 var(--s4); background: none; border: 0; border-radius: 0; box-shadow: none;
  font-family: var(--display); font-weight: 600; font-size: 1.15rem; letter-spacing: -.01em; color: #98a2b3; position: relative; }
.marquee__track > span svg { width: 20px; height: 20px; color: var(--yellow-deep); }
.marquee__track > span::after { content: ""; position: absolute; right: -4px; top: 50%; width: 8px; height: 8px; transform: translateY(-50%) rotate(45deg); background: var(--yellow); border-radius: 1px; }
@keyframes marquee { to { transform: translateX(-50%); } }
/* De band blijft altijd bewegen (op vraag), bij "minder beweging" wel trager */
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: marquee 80s linear infinite !important; }
}
/* Titel hero: drie gelijke regels op desktop, gebalanceerd op kleinere schermen */
.hero--split-m h1 { font-size: clamp(2.4rem, 4.3vw, 3.75rem); line-height: 1.06; }
@media (max-width: 960px) { .hero--split-m h1 { text-wrap: balance; font-size: clamp(2.2rem, 6.4vw, 3.2rem); } }
@media (max-width: 640px) { .hero--split-m h1 { font-size: 2.2rem; } }
.hero--split-m .hero__sub { margin: var(--s3) 0 var(--s5); }
/* Gsm: titel netjes verdeeld, geen woord alleen op de laatste regel */
@media (max-width: 640px) {
  .hero--split-m h1 { font-size: 2rem; text-wrap: balance; }
  .hero--split-m .squiggle { display: inline; }
}
@media (max-width: 360px) { .hero--split-m h1 { font-size: 1.75rem; } }
/* Volledige mascotte (met werkschoenen) op de gele cirkel */
.hs__art img { height: 112%; bottom: -3%; -webkit-mask-image: none; mask-image: none; filter: drop-shadow(0 18px 24px rgba(15,17,21,.28)); }
.hs__art { margin-top: var(--s4); }
/* Intro-foto: volledige mascotte */
.intro2__media img { height: 90%; bottom: 3%; }

/* Ondertitel hero: twee evenwichtige regels, "3–5×" nooit afgebroken */
.nw { white-space: nowrap; }
.hero--split-m .hero__sub { max-width: none; text-wrap: balance; }
@media (max-width: 960px) { .hero--split-m .hero__sub { max-width: 34em; } }
/* Ondertitel: twee even lange regels op desktop */
.hero--split-m .hero__sub { max-width: 30em; text-wrap: balance; }
/* Vaste regelbreuk in de ondertitel op tablet en desktop, vrij op gsm */
.br-sub { display: inline; }
@media (max-width: 640px) { .br-sub { display: none; } }
.hero--split-m .hero__sub { max-width: none; }
/* Knopblok hero: ordelijk en op één linkerlijn */
.hero-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.hero-actions .btn { gap: 12px; }
.hero-actions .btn svg { width: 18px; height: 18px; }
.hero-actions__meta { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: .92rem; color: var(--muted); }
.hero-actions__meta svg { width: 18px; height: 18px; padding: 3px; border-radius: 50%; background: #dcfae6; color: #079455; stroke-width: 3; }
.hero-actions__link { display: inline-flex; align-items: center; gap: 8px; margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--line); font-weight: 600; color: var(--ink); text-decoration: none; }
.hero-actions__link svg { width: 16px; height: 16px; transition: transform .2s var(--ease); }
.hero-actions__link:hover { color: #7a5600; }
.hero-actions__link:hover svg { transform: translateY(3px); }
@media (max-width: 640px) {
  .hero-actions { align-self: stretch; align-items: stretch; }
  .hero-actions .btn { white-space: normal; height: auto; min-height: 56px; padding: 12px var(--s3); text-align: center; line-height: 1.3; }
  .hero-actions__meta { justify-content: center; }
  .hero-actions__link { align-self: stretch; justify-content: center; }
}
/* Titel: rechte gele onderlijning (i.p.v. kronkel) */
.hero--split-m .mark { text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: .12em; text-underline-offset: .14em; text-decoration-skip-ink: none; }
/* Band met vakken: ingetogen en premium (geen iconen, geen gele ruitjes) */
.marquee { padding: 28px 0; background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.marquee__track > span { padding: 0 var(--s5); font-family: var(--display); font-weight: 600; font-size: 1.05rem; letter-spacing: -.01em; color: #475467; }
.marquee__track > span svg { display: none; }
.marquee__track > span::after { width: 5px; height: 5px; right: -2px; border-radius: 50%; transform: translateY(-50%); background: #d0d5dd; }
/* Twee geruststellingen naast elkaar onder de knop */
ul.hero-actions__meta { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px var(--s3); }
ul.hero-actions__meta li { display: inline-flex; align-items: center; gap: 8px; }
@media (max-width: 640px) { ul.hero-actions__meta { justify-content: center; } }
/* Vinkjes precies onder de knop: zelfde breedte, gecentreerd */
.hero-actions { display: inline-flex; align-items: stretch; }
ul.hero-actions__meta { justify-content: center; gap: 8px var(--s4); }

/* Verhoudingen hero: gelijke ruimte boven en onder, mascotte op dezelfde middenhoogte */
.hs__art { margin-top: 0; }
.hero--split-m { padding-top: var(--s12); }
.hero--split-m .marquee { margin-top: var(--s12); }
@media (max-width: 960px) { .hero--split-m .marquee { margin-top: var(--s8); } }
/* =========================================================
   Zwevende, transparante header
   ========================================================= */
.nav, .nav.is-scrolled { position: fixed !important; top: 0; left: 0; right: 0; padding: 12px 0 0; background: transparent !important; border: 0 !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.nav__inner { height: 64px; padding: 0 20px; border-radius: 16px; border: 1px solid transparent; background: transparent; transition: background .25s, border-color .25s, box-shadow .25s; }
.nav.is-scrolled .nav__inner, .nav:has(.mnav.is-open) .nav__inner {
  background: rgba(255,255,255,.78); border-color: rgba(228,231,236,.9);
  -webkit-backdrop-filter: saturate(180%) blur(16px); backdrop-filter: saturate(180%) blur(16px);
  box-shadow: 0 1px 2px rgba(15,17,21,.04), 0 12px 32px -12px rgba(15,17,21,.18); }
.nav:has(.mnav.is-open) .nav__inner { background: #fff; }

/* Kleiner logo */
.nav__logo img { height: 24px; }
@media (max-width: 640px) { .nav__logo img { height: 22px; } .nav__inner { height: 58px; padding: 0 14px; } }

/* Eerste sectie van elke pagina schuift onder de zwevende header door */
main > :first-child:not([data-vak]):not([data-article]),
main > [data-vak] > :first-child,
main > [data-article] > :first-child { border-top: 76px solid transparent; background-origin: border-box; }
.hero__grid-bg, .hero__blobs { top: -76px; }

/* Gsm-menu onder de zwevende balk */
@media (max-width: 1280px) { .mnav { top: 84px; left: 12px; right: 12px; bottom: 12px; border-radius: 16px; border: 1px solid var(--line); box-shadow: var(--shadow-lg); } }
@media (max-width: 640px) { .mnav { top: 78px; } }
/* Knopblok: alles netjes onder elkaar op de linkerrand van de knop */
.hero-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
ul.hero-actions__meta { justify-content: flex-start; gap: 8px var(--s3); width: auto; }
.hero-actions__link { margin-top: var(--s3); padding-top: 0; border-top: 0; color: var(--ink); }
.hero-actions__link:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: 2px; text-underline-offset: 4px; }
@media (max-width: 640px) {
  .hero-actions { align-items: stretch; }
  ul.hero-actions__meta { justify-content: center; }
  .hero-actions__link { justify-content: center; }
}
/* Vinkjes over de volle breedte van de knop: links begint, rechts eindigt gelijk met de knop */
.hero-actions { display: inline-flex; flex-direction: column; align-items: stretch; align-self: flex-start; }
ul.hero-actions__meta { width: 100%; justify-content: space-between; }
@media (max-width: 640px) { .hero-actions { align-self: stretch; } ul.hero-actions__meta { justify-content: center; } }
/* Vinkjes: dicht bij elkaar, als duo gecentreerd onder de knop */
ul.hero-actions__meta { justify-content: center; gap: 8px var(--s4); }
/* =========================================================
   Intro: gecentreerd, vijf kaarten (3 + 2), zonder foto
   ========================================================= */
.intro3 { background: linear-gradient(180deg, var(--paper) 0%, #fff 100%); }
.intro3__head { max-width: 820px; margin: 0 auto var(--s8); text-align: center; display: flex; flex-direction: column; align-items: center; }
.intro3__head h2 { margin: var(--s3) 0 var(--s2); text-wrap: balance; }
.intro3__head p { font-size: 1.15rem; line-height: 1.6; color: var(--muted); max-width: 36em; text-wrap: balance; }

.intro3__grid { list-style: none; margin: 0 auto; padding: 0; max-width: 1056px; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s3); }
.intro3__card { flex: 0 0 calc((100% - 2 * var(--s3)) / 3); display: flex; flex-direction: column; align-items: center; text-align: center; padding: var(--s5) var(--s4); background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-sm); transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s; }
.intro3__card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: #d6d1c6; }
.intro3__icon { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; margin-bottom: var(--s3); background: var(--yellow); color: var(--ink); box-shadow: 0 8px 20px -8px rgba(229,168,0,.6); }
.intro3__icon svg { width: 26px; height: 26px; }
.intro3__card h3 { font-size: 1.2rem; margin-bottom: var(--s1); }
.intro3__card p { margin: 0; color: var(--muted); line-height: 1.55; max-width: 22em; }
.intro3__cta { display: flex; justify-content: center; margin-top: var(--s6); }
.intro3__cta .btn svg { width: 18px; height: 18px; }

@media (max-width: 960px) { .intro3__card { flex-basis: calc((100% - var(--s3)) / 2); } }
@media (max-width: 640px) { .intro3__card { flex-basis: 100%; padding: var(--s4) var(--s3); } .intro3__cta .btn { width: 100%; } }
/* Alle vijf kaarten even hoog */
@media (min-width: 961px) { .intro3__card { min-height: 272px; } }
@media (min-width: 641px) and (max-width: 960px) { .intro3__card { min-height: 272px; } }
/* =========================================================
   Intro: gecentreerde tekst met vetgedrukte kernwoorden
   ========================================================= */
.intro4 { background: #fff; }
.intro4__inner { max-width: 860px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; }
.intro4 h2 { font-size: clamp(2.2rem, 4.2vw, 3.5rem); margin-bottom: var(--s4); text-wrap: balance; }
.intro4 p { margin: 0 0 var(--s3); font-size: clamp(1.05rem, 1.4vw, 1.2rem); line-height: 1.6; color: var(--muted); text-wrap: balance; }
.intro4 p b { color: var(--ink); font-weight: 700; }
.intro4__btn { margin-top: var(--s2); height: 56px; padding: 0 var(--s4); gap: 12px; border-radius: 999px; background: var(--ink); color: #fff; border-color: var(--ink); font-weight: 600; box-shadow: 0 16px 32px -14px rgba(15,17,21,.55); }
.intro4__btn:hover { background: #22262e; transform: translateY(-1px); }
.intro4__btn svg { width: 18px; height: 18px; }
@media (max-width: 640px) { .intro4__btn { width: 100%; } }
/* =========================================================
   Cijferbalk onder de intro
   ========================================================= */
.statband { background: var(--ink); color: #a7abb3; padding: var(--s10) 0; position: relative; overflow: hidden; }
.statband::before { content: ""; position: absolute; left: 50%; top: -200px; width: 900px; height: 400px; transform: translateX(-50%); background: radial-gradient(ellipse, rgba(255,194,26,.14), transparent 70%); pointer-events: none; }
.statband .container { position: relative; }
.statband__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; }
.statband__grid > div { padding: var(--s2) var(--s4); text-align: center; }
.statband__grid > div + div { border-left: 1px solid rgba(255,255,255,.1); }
.statband dt { font-family: var(--display); font-weight: 800; font-size: clamp(2.6rem, 5vw, 4rem); line-height: 1; letter-spacing: -.04em; color: var(--yellow); font-variant-numeric: tabular-nums; }
.statband dd { margin: var(--s2) auto 0; max-width: 18em; font-size: 1.02rem; line-height: 1.5; color: #c4c8cf; text-wrap: balance; }
.statband__note { max-width: 760px; margin: var(--s6) auto 0; padding-top: var(--s5); border-top: 1px solid rgba(255,255,255,.1); text-align: center; font-size: clamp(1.05rem, 1.5vw, 1.25rem); line-height: 1.6; color: #a7abb3; text-wrap: balance; }
.statband__note b { color: #fff; font-weight: 600; }
@media (max-width: 760px) {
  .statband__grid { grid-template-columns: minmax(0, 1fr); }
  .statband__grid > div { padding: var(--s3) 0; }
  .statband__grid > div + div { border-left: 0; border-top: 1px solid rgba(255,255,255,.1); }
}
/* =========================================================
   Intro aangekleed: stippen, gloed, marker en label
   ========================================================= */
.intro4 { position: relative; overflow: hidden; isolation: isolate; background: linear-gradient(180deg, #fff 0%, #fbfaf6 100%); }
.intro4__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 45% 40% at 50% 38%, rgba(255,194,26,.16), transparent 70%),
    radial-gradient(circle, rgba(15,17,21,.10) 1px, transparent 1.4px) center / 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 70% 75% at 50% 45%, #000 30%, transparent 80%);
          mask-image: radial-gradient(ellipse 70% 75% at 50% 45%, #000 30%, transparent 80%); }
.hl-marker { position: relative; z-index: 0; white-space: nowrap; }
.hl-marker::after { content: ""; position: absolute; z-index: -1; left: -.08em; right: -.08em; bottom: .06em; height: .36em; border-radius: 6px; background: var(--yellow); opacity: .85; transform: rotate(-1deg); }
.intro4 p b { background: linear-gradient(transparent 62%, rgba(255,194,26,.35) 62%); padding: 0 .1em; border-radius: 2px; }
.intro4__pill { display: inline-flex; align-items: center; gap: 8px; margin: var(--s2) 0 var(--s3) !important; padding: 6px 16px; border-radius: 99px; background: var(--ink); color: var(--yellow) !important; font-weight: 700; font-size: .95rem !important; letter-spacing: .01em; box-shadow: 0 8px 20px -10px rgba(15,17,21,.6); }
.intro4__pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--yellow); }

/* =========================================================
   Cijferbalk aangekleed: iconen, glazen tegels, raster, lichtlijn
   ========================================================= */
.statband { padding: var(--s12) 0; }
.statband::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 40%, #000 30%, transparent 80%);
          mask-image: radial-gradient(ellipse 70% 80% at 50% 40%, #000 30%, transparent 80%); }
.statband > .container { z-index: 1; }
.statband__line { display: none; }
.statband .container::before { content: ""; display: block; width: 100%; max-width: 560px; height: 1px; margin: 0 auto var(--s6); background: linear-gradient(90deg, transparent, rgba(255,194,26,.8), transparent); }
.statband__grid { gap: var(--s3); }
.statband__grid > div { padding: var(--s5) var(--s3); border-radius: 20px; background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border: 1px solid rgba(255,255,255,.08); transition: border-color .25s, transform .25s var(--ease); }
.statband__grid > div + div { border-left: 1px solid rgba(255,255,255,.08); }
.statband__grid > div:hover { border-color: rgba(255,194,26,.4); transform: translateY(-3px); }
.statband__icon { display: grid; place-items: center; width: 52px; height: 52px; margin: 0 auto var(--s3); border-radius: 50%; background: rgba(255,194,26,.1); border: 1px solid rgba(255,194,26,.35); color: var(--yellow); box-shadow: 0 0 0 6px rgba(255,194,26,.05); }
.statband__icon svg { width: 24px; height: 24px; }
.statband dt { text-shadow: 0 0 32px rgba(255,194,26,.35); }
.statband__note { border-top: 0; padding-top: 0; }
@media (max-width: 760px) {
  .statband__grid { gap: var(--s2); }
  .statband__grid > div + div { border-top: 1px solid rgba(255,255,255,.08); }
}
/* Rustiger: minder effecten */
.intro4 p b { background: none; padding: 0; }
.intro4__bg { opacity: .6; }
.statband::after { display: none; }
.statband dt { text-shadow: none; }
.statband__grid > div:hover { transform: none; border-color: rgba(255,255,255,.08); }
.statband__icon { box-shadow: none; }
/* Cijferbalk compacter: icoon naast het cijfer, minder witruimte */
.statband { padding: var(--s8) 0; }
.statband .container::before { margin-bottom: var(--s5); max-width: 420px; }
.statband__grid { gap: var(--s2); }
.statband__grid > div { display: grid; grid-template-columns: 44px 1fr; column-gap: var(--s2); align-items: center; text-align: left; padding: var(--s3); border-radius: 16px; }
.statband__icon { grid-row: span 2; width: 44px; height: 44px; margin: 0; }
.statband__icon svg { width: 20px; height: 20px; }
.statband dt { font-size: clamp(2rem, 3.2vw, 2.75rem); }
.statband dd { margin: 4px 0 0; max-width: none; font-size: .92rem; text-wrap: pretty; }
.statband__note { margin-top: var(--s4); font-size: 1.02rem; max-width: 680px; }
@media (max-width: 1024px) { .statband__grid > div { padding: var(--s2); } }
@media (max-width: 760px) { .statband__grid > div { padding: var(--s3); } }
/* =========================================================
   Cijferbalk, nieuw design: licht, één kaart, drie kolommen
   ========================================================= */
.statband { background: var(--paper); color: var(--muted); padding: var(--s8) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.statband::before, .statband::after, .statband .container::before { display: none !important; }
.statband__grid { gap: 0; background: #fff; border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow-sm); overflow: hidden; }
.statband__grid > div { display: flex; flex-direction: column; align-items: center; text-align: center; padding: var(--s4) var(--s3); border: 0 !important; border-radius: 0; background: none; }
.statband__grid > div + div { border-left: 1px solid var(--line) !important; }
.statband__icon { display: none; }
.statband dt { color: var(--ink); font-size: clamp(2.2rem, 3.6vw, 3rem); text-shadow: none; }
.statband dt::after { content: ""; display: block; width: 28px; height: 3px; margin: 12px auto 0; border-radius: 3px; background: var(--yellow); }
.statband dd { margin: 12px auto 0; max-width: 17em; font-size: .95rem; color: var(--muted); text-wrap: balance; }
.statband__note { margin: var(--s4) auto 0; max-width: 640px; font-size: 1rem; color: var(--muted); }
.statband__note b { color: var(--ink); }
@media (max-width: 760px) {
  .statband__grid > div + div { border-left: 0 !important; border-top: 1px solid var(--line) !important; }
  .statband__grid > div { padding: var(--s3); }
}
/* Vloeiende overgang intro -> cijferbalk: één doorlopende achtergrond */
.intro4 { background: linear-gradient(180deg, #fff 0%, #fbfaf6 100%); padding-bottom: var(--s8); }
.statband { background: #fbfaf6; border-top: 0; padding-top: 0; padding-bottom: var(--s10); border-bottom: 0; }
/* =========================================================
   "Probeer het zelf": URL-invoer + klikbare demo
   ========================================================= */
.try { background: linear-gradient(180deg, #fbfaf6 0%, #fff 22%); border-top: 1px solid var(--line); }
.try__head { max-width: 780px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; }
.try__eyebrow { font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #7a5600; margin-bottom: var(--s2); }
.try__head h2 { font-size: clamp(2rem, 3.8vw, 3.1rem); text-wrap: balance; }
.try__sub { margin-top: var(--s2); font-size: 1.12rem; line-height: 1.6; color: var(--muted); text-wrap: balance; }

.try__url { display: flex; align-items: center; gap: 8px; width: 100%; max-width: 640px; margin-top: var(--s5); padding: 8px 8px 8px 18px; background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 1px 2px rgba(15,17,21,.04), 0 16px 40px -20px rgba(15,17,21,.25); transition: border-color .15s, box-shadow .15s; }
.try__url:focus-within { border-color: var(--ink); box-shadow: 0 0 0 4px rgba(255,194,26,.3), 0 16px 40px -20px rgba(15,17,21,.25); }
.try__url.is-error { border-color: #e53935; }
.try__url-icon { color: #98a2b3; display: grid; place-items: center; }
.try__url-icon svg { width: 20px; height: 20px; }
.try__url input { flex: 1; min-width: 0; height: 48px; border: 0; outline: none; font: 500 1.02rem var(--body); color: var(--ink); background: transparent; }
.try__url input::placeholder { color: #98a2b3; }
.try__url .btn { flex: none; gap: 10px; }
.try__url .btn svg { width: 18px; height: 18px; }
.try__small { margin-top: 12px; font-size: .9rem; color: var(--muted); }
.try__msg { max-width: 640px; margin-top: var(--s2); padding: 14px 18px; border-radius: 12px; background: var(--yellow-soft); border: 1px solid rgba(229,168,0,.35); font-size: .95rem; line-height: 1.5; color: var(--text); text-align: left; }
.try__msg a { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-weight: 700; color: var(--ink); }
.try__msg a svg { width: 16px; height: 16px; }
.try__msg.is-error { background: #fef3f2; border-color: #fecdca; color: #b42318; }

.try__pick { margin: var(--s8) auto var(--s3); text-align: center; }
.try__pick > p { color: var(--muted); margin-bottom: var(--s2); }
.try__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.try__chip { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px; border-radius: 99px; border: 1px solid var(--line); background: #fff; font: 600 .92rem var(--body); color: var(--text); cursor: pointer; transition: border-color .15s, background .15s, color .15s; }
.try__chip svg { width: 18px; height: 18px; color: var(--muted); }
.try__chip:hover { border-color: #cfcac0; }
.try__chip.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }
.try__chip.is-on svg { color: var(--yellow); }

.try__demo { max-width: 860px; margin: 0 auto; }
.demo { background: #fff; border: 1px solid var(--line); border-radius: 24px; box-shadow: 0 2px 4px rgba(15,17,21,.03), 0 30px 60px -30px rgba(15,17,21,.25); overflow: hidden; }
.demo__top { display: flex; justify-content: space-between; align-items: center; gap: var(--s2); padding: 16px var(--s4); border-bottom: 1px solid var(--line); background: #fcfcfd; }
.demo__brand { display: flex; align-items: center; gap: 10px; font-size: .9rem; font-weight: 600; color: var(--text); }
.demo__logo { width: 32px; height: 32px; border-radius: 9px; background: var(--yellow); display: grid; place-items: center; color: var(--ink); }
.demo__logo svg { width: 18px; height: 18px; }
.demo__badge { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #7a5600; background: var(--yellow-soft); border: 1px solid rgba(229,168,0,.35); padding: 4px 10px; border-radius: 99px; }
.demo__progress { padding: var(--s3) var(--s4) 0; }
.demo__progress-row { display: flex; justify-content: space-between; font-size: .85rem; font-weight: 600; color: var(--muted); margin-bottom: 8px; }
.demo__bar { height: 6px; border-radius: 99px; background: var(--paper-2); overflow: hidden; }
.demo__bar i { display: block; height: 100%; border-radius: 99px; background: var(--yellow); transition: width .35s var(--ease); }
.demo__body { padding: var(--s4); }
.demo__q { font-size: clamp(1.35rem, 2.2vw, 1.7rem); margin-bottom: var(--s3); text-wrap: balance; }

.qcards { display: grid; gap: 12px; }
.qcards--photo { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); }
.qcard { position: relative; display: flex; flex-direction: column; text-align: left; padding: 0; border: 2px solid var(--line); border-radius: 16px; background: #fff; cursor: pointer; overflow: hidden; font: inherit; color: inherit; transition: border-color .15s, box-shadow .15s, transform .15s; }
.qcard:hover { border-color: #cfcac0; transform: translateY(-1px); }
.qcard.is-on { border-color: var(--yellow); box-shadow: 0 0 0 4px rgba(255,194,26,.22); }
.qcard__img { display: block; aspect-ratio: 16 / 9; background: var(--paper); overflow: hidden; }
.qcard__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.qcard__ph { width: 100%; height: 100%; display: grid; place-items: center; color: #98a2b3; background: repeating-linear-gradient(135deg, #f5f6f8 0 12px, #eff1f4 12px 24px); }
.qcard__ph svg { width: 40px; height: 40px; stroke-width: 1.4; }
.qcard__txt { display: block; padding: var(--s2) var(--s3) var(--s3); }
.qcard__txt b { display: block; font-family: var(--display); font-weight: 700; font-size: 1.1rem; color: var(--ink); }
.qcard__txt small { display: block; margin-top: 4px; font-size: .92rem; color: var(--muted); line-height: 1.45; }
.qcard__check { position: absolute; top: 12px; right: 12px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 2px solid var(--line); color: transparent; transition: background .15s, border-color .15s, color .15s; }
.qcard__check svg { width: 14px; height: 14px; stroke-width: 3; }
.qcard.is-on .qcard__check { background: var(--yellow); border-color: var(--yellow); color: var(--ink); }
.qcard--row { flex-direction: row; align-items: center; min-height: 60px; }
.qcard--row .qcard__txt { padding: 16px 56px 16px 18px; }
.qcard--row .qcard__txt b { font-size: 1rem; font-family: var(--body); font-weight: 600; }
.qcard--row .qcard__check { top: 50%; transform: translateY(-50%); right: 16px; }

.qslider { padding: var(--s2) 0; }
.qslider__val { font-family: var(--display); font-weight: 800; font-size: 2.6rem; letter-spacing: -.03em; color: var(--ink); margin-bottom: var(--s2); }
.qslider__val span { font-size: 1.1rem; color: var(--muted); font-weight: 600; letter-spacing: 0; }
.qslider input[type="range"] { background: linear-gradient(90deg, var(--yellow) var(--p, 30%), var(--paper-2) var(--p, 30%)); height: 6px; }
.qslider input[type="range"]::-webkit-slider-thumb { background: var(--yellow); border: 3px solid #fff; box-shadow: 0 0 0 1px rgba(229,168,0,.6), 0 2px 6px rgba(15,17,21,.25); }
.qslider__scale { display: flex; justify-content: space-between; margin-top: 10px; font-size: .85rem; color: var(--muted); }

.demo__nav { display: flex; justify-content: space-between; align-items: center; gap: var(--s2); margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--line); }
.demo__back, .demo__restart { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; font: 600 .95rem var(--body); color: var(--muted); cursor: pointer; padding: 8px 0; }
.demo__back svg { width: 16px; height: 16px; }
.demo__back:hover, .demo__restart:hover { color: var(--ink); }
.demo__back[disabled] { visibility: hidden; }
.demo__next { gap: 10px; }
.demo__next svg { width: 16px; height: 16px; }
.demo__next[disabled] { opacity: .4; pointer-events: none; }

.demo__result { text-align: center; display: flex; flex-direction: column; align-items: center; }
.demo__result-icon { width: 56px; height: 56px; border-radius: 50%; background: var(--yellow); display: grid; place-items: center; margin-bottom: var(--s2); }
.demo__result-icon svg { width: 26px; height: 26px; stroke-width: 2.8; }
.demo__result h3 { font-size: clamp(1.4rem, 2.4vw, 1.8rem); }
.demo__result > p { color: var(--muted); margin-top: 8px; max-width: 30em; }
.demo__form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px var(--s2); width: 100%; margin-top: var(--s3); text-align: left; }
.demo__form .btn { grid-column: 1 / -1; margin-top: 4px; gap: 10px; }
.demo__form .btn svg { width: 18px; height: 18px; }
.demo__note { margin-top: 12px; font-size: .82rem; color: var(--muted); }
.demo__result .demo__nav { width: 100%; }
.demo__result > .btn { margin-top: var(--s3); gap: 10px; }
.demo__result > .btn svg { width: 18px; height: 18px; }
.demo__restart--solo { margin-top: var(--s2); }

.try__callout { display: flex; align-items: center; gap: var(--s2); margin-top: var(--s3); padding: var(--s3); border: 1px dashed #d6d1c6; border-radius: 16px; background: #fcfcfd; }
.try__callout-icon { flex: none; width: 44px; height: 44px; border-radius: 12px; background: var(--ink); color: var(--yellow); display: grid; place-items: center; }
.try__callout-icon svg { width: 20px; height: 20px; }
.try__callout h3 { font-size: 1.05rem; margin-bottom: 2px; }
.try__callout p { margin: 0; color: var(--muted); font-size: .95rem; }

@media (max-width: 760px) {
  .try__url { flex-wrap: wrap; padding: 8px; }
  .try__url-icon { display: none; }
  .try__url input { flex-basis: 100%; padding: 0 10px; }
  .try__url .btn { width: 100%; }
  .demo__top, .demo__progress, .demo__body { padding-left: var(--s3); padding-right: var(--s3); }
  .qcards--photo, .demo__form { grid-template-columns: minmax(0, 1fr); }
  .try__callout { align-items: flex-start; }
}
/* =========================================================
   Vakkenraster ("Probeer het voorbeeld")
   ========================================================= */
.tgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3); max-width: 1120px; margin: 0 auto; }
.tcard { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s2); min-height: 200px; padding: var(--s4) var(--s3) var(--s3); text-align: left; text-decoration: none; color: var(--ink); font: inherit; background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-sm); cursor: pointer; transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s; }
.tcard:hover, .tcard:focus-visible { transform: translateY(-3px); box-shadow: var(--shadow); border-color: #d6d1c6; outline: none; }
.tcard__icon { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--yellow-soft); color: #7a5600; transition: background .2s, color .2s; }
.tcard__icon svg { width: 24px; height: 24px; }
.tcard:hover .tcard__icon { background: var(--yellow); color: var(--ink); }
.tcard__name { margin-top: auto; font-family: var(--display); font-weight: 700; font-size: 1.2rem; }
.tcard__cta { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: .95rem; color: #7a5600; }
.tcard__cta svg { width: 16px; height: 16px; transition: transform .2s var(--ease); }
.tcard:hover .tcard__cta svg { transform: translateX(4px); }
.tcard--more { background: var(--ink); border-color: var(--ink); color: #fff; }
.tcard--more .tcard__icon { background: rgba(255,255,255,.08); color: var(--yellow); }
.tcard--more .tcard__cta { color: var(--yellow); }
.tcard--more:hover { border-color: var(--ink); }
.try__callout { max-width: 1120px; margin: var(--s4) auto 0; }
@media (max-width: 1024px) { .tgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .tgrid { grid-template-columns: minmax(0, 1fr); } .tcard { min-height: 0; flex-direction: row; align-items: center; flex-wrap: wrap; } .tcard__name { margin-top: 0; flex: 1; } .tcard__cta { width: 100%; } }

/* =========================================================
   Venster met voorbeeldcalculator
   ========================================================= */
.emodal { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: var(--s3); visibility: hidden; opacity: 0; transition: opacity .2s, visibility .2s; }
.emodal.is-open { visibility: visible; opacity: 1; }
.emodal__backdrop { position: absolute; inset: 0; background: rgba(15,17,21,.55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.emodal__dialog { position: relative; width: 100%; max-width: 1000px; height: min(760px, calc(100vh - 48px)); display: flex; flex-direction: column; background: #fff; border-radius: 22px; overflow: hidden; box-shadow: 0 40px 80px -24px rgba(0,0,0,.5); transform: translateY(12px) scale(.98); transition: transform .3s var(--ease); }
.emodal.is-open .emodal__dialog { transform: none; }
.emodal__head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s2); padding: 18px var(--s4); border-bottom: 1px solid var(--line); }
.emodal__head h2 { font-size: 1.25rem; }
.emodal__head p { margin-top: 2px; font-size: .85rem; color: var(--muted); }
.emodal__close { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--paper); color: var(--ink); display: grid; place-items: center; cursor: pointer; }
.emodal__close:hover { background: var(--paper-2); }
.emodal__close svg { width: 18px; height: 18px; }
.emodal__bar { height: 4px; background: var(--paper-2); }
.emodal__bar i { display: block; height: 100%; background: var(--yellow); transition: width .35s var(--ease); }
.emodal__body { flex: 1; overflow-y: auto; background: #fafaf8; padding: 0 var(--s4) var(--s5); }
.emodal__foot { display: flex; justify-content: flex-end; gap: 12px; padding: 16px var(--s4); border-top: 1px solid var(--line); background: #fff; }

.em-top { display: flex; justify-content: space-between; align-items: center; padding: 14px 0 0; font-size: .9rem; font-weight: 500; color: var(--text); }
.em-restart { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; font: 500 .9rem var(--body); color: var(--text); cursor: pointer; }
.em-restart svg { width: 16px; height: 16px; }
.em-restart:hover { color: var(--ink); text-decoration: underline; }
.em-q { max-width: 820px; margin: 0 auto; padding-top: var(--s5); text-align: center; }
.em-cat { font-size: .82rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); margin-bottom: 10px; }
.em-q h3 { font-size: clamp(1.6rem, 3.2vw, 2.3rem); line-height: 1.15; text-wrap: balance; }
.em-hint { margin-top: 10px; color: var(--muted); font-size: 1rem; text-wrap: balance; }

.em-grid { display: grid; gap: var(--s2); margin: var(--s5) auto 0; }
.em-grid--2 { grid-template-columns: repeat(2, minmax(0, 260px)); justify-content: center; }
.em-grid--3 { grid-template-columns: repeat(3, minmax(0, 260px)); justify-content: center; }
.em-grid--4 { grid-template-columns: repeat(2, minmax(0, 260px)); justify-content: center; }
.em-card { position: relative; display: block; padding: 0; border: 2px solid transparent; border-radius: 14px; overflow: hidden; cursor: pointer; background: #fff; font: inherit; text-align: center; box-shadow: 0 0 0 1px var(--line), 0 6px 16px -10px rgba(15,17,21,.3); transition: transform .15s var(--ease), box-shadow .15s, border-color .15s; }
.em-card:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px #cfcac0, 0 14px 28px -14px rgba(15,17,21,.35); }
.em-card.is-on { border-color: var(--yellow); box-shadow: 0 0 0 4px rgba(255,194,26,.3); }
.em-card--photo { aspect-ratio: 4 / 5; }
.em-card__media { position: absolute; inset: 0; }
.em-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.em-card__ph { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255,255,255,.55); background: radial-gradient(circle at 50% 35%, #3a3f49 0%, #1c1f25 75%); }
.em-card__ph svg { width: 64px; height: 64px; stroke-width: 1.2; }
.em-card--photo .em-card__label { position: absolute; left: 0; right: 0; bottom: 0; padding: 48px 14px 16px; color: #fff; background: linear-gradient(180deg, transparent, rgba(0,0,0,.75)); }
.em-card__label { display: flex; align-items: center; justify-content: center; gap: 10px; font-weight: 500; font-size: 1rem; line-height: 1.3; }
.em-card__label small { display: block; margin-top: 2px; font-size: .82rem; opacity: .85; font-weight: 400; }
.em-card__label > span { text-align: left; }
.em-radio { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 2px solid currentColor; position: relative; }
.em-card.is-on .em-radio { border-color: var(--yellow); }
.em-card.is-on .em-radio::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--yellow); }
.em-card--icon { aspect-ratio: 1 / 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s3); color: var(--ink); }
.em-card__big svg { width: 76px; height: 76px; stroke-width: 1.3; }
.em-card--icon .em-card__label { color: var(--ink); }
.em-card--icon.is-on { background: var(--yellow-soft); }

.em-slider { max-width: 560px; margin: var(--s5) auto 0; padding: var(--s4); background: #fff; border: 1px solid var(--line); border-radius: 16px; }
.em-slider__val { font-family: var(--display); font-weight: 800; font-size: 3rem; letter-spacing: -.03em; color: var(--ink); margin-bottom: var(--s3); }
.em-slider__val span { font-size: 1.2rem; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.em-slider input[type="range"] { height: 6px; background: linear-gradient(90deg, var(--yellow) var(--p, 30%), var(--paper-2) var(--p, 30%)); }
.em-slider input[type="range"]::-webkit-slider-thumb { background: var(--yellow); border: 3px solid #fff; box-shadow: 0 0 0 1px rgba(229,168,0,.6), 0 2px 6px rgba(15,17,21,.25); }
.em-slider__scale { display: flex; justify-content: space-between; margin-top: 10px; font-size: .85rem; color: var(--muted); }

.em-form { display: grid; gap: var(--s2); max-width: 520px; margin: var(--s4) auto 0; text-align: left; }
.em-form label { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; }
.em-demo { margin: 0; font-size: .82rem; color: var(--muted); text-align: center; }
.em-done { padding-top: var(--s8); display: flex; flex-direction: column; align-items: center; }
.em-done__icon { width: 64px; height: 64px; border-radius: 50%; background: var(--yellow); display: grid; place-items: center; margin-bottom: var(--s3); }
.em-done__icon svg { width: 30px; height: 30px; stroke-width: 2.8; }

.em-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 22px; border-radius: 10px; font: 600 .98rem var(--body); text-decoration: none; cursor: pointer; transition: background .15s, border-color .15s, opacity .15s; }
.em-btn svg { width: 16px; height: 16px; }
.em-btn--ghost { background: #fff; color: var(--ink); border: 1px solid var(--line); }
.em-btn--ghost:hover { border-color: var(--ink); }
.em-btn--primary { background: var(--yellow); color: var(--ink); border: 1px solid var(--yellow); }
.em-btn--primary:hover { background: #ffcc3d; }
.em-btn--primary[disabled] { opacity: .4; pointer-events: none; }

@media (max-width: 760px) {
  .emodal { padding: 0; align-items: end; }
  .emodal__dialog { height: 94vh; border-radius: 20px 20px 0 0; }
  .emodal__head, .emodal__foot { padding-left: var(--s3); padding-right: var(--s3); }
  .emodal__body { padding: 0 var(--s3) var(--s4); }
  .em-grid--2, .em-grid--3, .em-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .em-card--photo { aspect-ratio: 3 / 4; }
  .em-card__big svg { width: 52px; height: 52px; }
  .em-card__label { font-size: .9rem; }
  .emodal__foot .em-btn { flex: 1; }
}
/* Geen verspringing als een venster de pagina vergrendelt */
html { scrollbar-gutter: stable; }
/* =========================================================
   Vragenmotor: extra vraagtypes
   ========================================================= */
.em-grid--c1 { grid-template-columns: minmax(0, 260px); justify-content: center; }
.em-grid--c2 { grid-template-columns: repeat(2, minmax(0, 260px)); justify-content: center; }
.em-grid--c3 { grid-template-columns: repeat(3, minmax(0, 240px)); justify-content: center; }
.em-grid--c4 { grid-template-columns: repeat(4, minmax(0, 200px)); justify-content: center; }
.em-grid--c5 { grid-template-columns: repeat(5, minmax(0, 160px)); justify-content: center; }
.em-grid--compact .em-card--photo { aspect-ratio: 1 / 1; }
.em-grid--compact .em-card__ph svg { width: 44px; height: 44px; }
.em-grid--icons .em-card--icon { aspect-ratio: auto; min-height: 160px; padding: var(--s3) 12px; }
.em-grid--icons .em-card__big svg { width: 48px; height: 48px; }
.em-grid--c2.em-grid--icons { grid-template-columns: repeat(2, minmax(0, 220px)); }

.em-rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 720px; margin: var(--s5) auto 0; text-align: left; }
.em-row { display: flex; align-items: center; gap: 14px; min-height: 60px; padding: 14px 18px; border: 2px solid transparent; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px var(--line); font: 500 1rem var(--body); color: var(--ink); cursor: pointer; text-align: left; transition: box-shadow .15s, border-color .15s, background .15s; }
.em-row:hover { box-shadow: 0 0 0 1px #cfcac0, 0 8px 18px -12px rgba(15,17,21,.3); }
.em-row.is-on { border-color: var(--yellow); background: var(--yellow-soft); box-shadow: none; }
.em-row small { display: block; font-size: .85rem; color: var(--muted); font-weight: 400; margin-top: 2px; }
.em-row .em-radio { color: #98a2b3; }
.em-row.is-on .em-radio { border-color: var(--ink); }
.em-row.is-on .em-radio::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--ink); }
.em-box { flex: none; width: 20px; height: 20px; border-radius: 6px; border: 2px solid #98a2b3; display: grid; place-items: center; color: transparent; }
.em-box svg { width: 12px; height: 12px; stroke-width: 3.2; }
.em-row.is-on .em-box { background: var(--ink); border-color: var(--ink); color: var(--yellow); }

.em-field { max-width: 560px; margin: var(--s5) auto 0; }
.em-field--short { max-width: 260px; }
.em-field select, .em-field textarea, .em-field input { width: 100%; font: 500 1.02rem var(--body); color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; outline: none; box-shadow: var(--shadow-sm); transition: border-color .15s, box-shadow .15s; }
.em-field select { appearance: none; -webkit-appearance: none; height: 56px; padding-right: 44px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6.5 9.5 5.5 5.5 5.5-5.5' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 16px center / 18px no-repeat; }
.em-field textarea { resize: vertical; line-height: 1.5; }
.em-field input { height: 56px; text-align: center; font-size: 1.2rem; letter-spacing: .08em; }
.em-field :is(select, textarea, input):focus { border-color: var(--ink); box-shadow: 0 0 0 4px rgba(255,194,26,.3); }

.em-number { display: inline-flex; align-items: center; gap: 12px; margin: var(--s5) auto 0; padding: 10px; background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-sm); }
.em-number input { width: 110px; height: 56px; border: 0; outline: none; text-align: right; font: 800 2rem var(--display); color: var(--ink); background: none; -moz-appearance: textfield; }
.em-number input::-webkit-outer-spin-button, .em-number input::-webkit-inner-spin-button, .em-slider__val input::-webkit-outer-spin-button, .em-slider__val input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.em-number__unit { font-weight: 600; color: var(--muted); min-width: 44px; }
.em-step { width: 48px; height: 48px; border-radius: 12px; border: 1px solid var(--line); background: var(--paper); font: 600 1.4rem var(--body); color: var(--ink); cursor: pointer; }
.em-step:hover { background: var(--yellow-soft); border-color: var(--yellow); }

.em-slider__val { display: flex; align-items: baseline; justify-content: center; gap: 8px; }
.em-slider__val input { width: 150px; border: 0; border-bottom: 2px dashed var(--line); outline: none; background: none; text-align: center; font: 800 3rem var(--display); letter-spacing: -.03em; color: var(--ink); -moz-appearance: textfield; }
.em-slider__val input:focus { border-bottom-color: var(--yellow); }

.em-drop { display: flex; flex-direction: column; align-items: center; gap: 6px; max-width: 560px; margin: var(--s5) auto 0; padding: var(--s5) var(--s3); border: 2px dashed #d0d5dd; border-radius: 16px; background: #fff; cursor: pointer; transition: border-color .15s, background .15s; }
.em-drop:hover { border-color: var(--yellow); background: var(--yellow-soft); }
.em-drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.em-drop__icon { width: 48px; height: 48px; border-radius: 50%; background: var(--yellow); display: grid; place-items: center; margin-bottom: 4px; }
.em-drop small { color: var(--muted); }
.em-drop:focus-within { border-color: var(--ink); }
.em-thumbs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 560px; margin: 12px auto 0; }
.em-thumbs img { width: 72px; height: 72px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); }

.em-form--lead { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 620px; gap: var(--s2) var(--s3); }
.em-form--lead .field--full { grid-column: 1 / -1; }
.em-form--lead label { text-transform: none; letter-spacing: 0; font-size: .92rem; }

.em-lead { width: 100%; max-width: 560px; margin-top: var(--s4); text-align: left; background: #fff; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; box-shadow: var(--shadow); }
.em-lead__head { display: flex; align-items: center; gap: 8px; padding: 12px 18px; background: var(--paper); border-bottom: 1px solid var(--line); font-size: .88rem; font-weight: 600; color: var(--text); }
.em-lead dl { margin: 0; padding: 4px 18px; }
.em-lead dl div { display: grid; grid-template-columns: 160px 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: .95rem; }
.em-lead dl div:last-child { border-bottom: 0; }
.em-lead dt { color: var(--muted); }
.em-lead dd { margin: 0; color: var(--ink); font-weight: 600; }
.em-done { padding-top: var(--s5); }

@media (max-width: 900px) {
  .em-grid--c4, .em-grid--c5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .em-grid--c2, .em-grid--c3, .em-grid--c4, .em-grid--c5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .em-grid--c1 { grid-template-columns: minmax(0, 1fr); }
  .em-rows, .em-form--lead { grid-template-columns: minmax(0, 1fr); }
  .em-lead dl div { grid-template-columns: 1fr; gap: 2px; }
  .em-grid--icons .em-card--icon { min-height: 130px; }
}
/* =========================================================
   Intro-resultaten + cijfers: nieuw design
   ========================================================= */
.intro4__pill { margin-top: var(--s4) !important; }
.intro4__results { list-style: none; margin: 0 0 var(--s5); padding: 0; width: 100%; max-width: 1040px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s2); }
.intro4__results li { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: var(--s3) var(--s2); background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-sm); text-align: center; }
.intro4__ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--yellow-soft); color: #7a5600; margin-bottom: 6px; }
.intro4__ico svg { width: 22px; height: 22px; }
.intro4__results b { font-family: var(--display); font-size: 1.02rem; color: var(--ink); }
.intro4__results small { font-size: .9rem; color: var(--muted); line-height: 1.45; }

.statband__grid { gap: var(--s2) !important; background: none !important; border: 0 !important; box-shadow: none !important; overflow: visible !important; }
.statband__grid > div { position: relative; overflow: hidden; align-items: flex-start !important; text-align: left !important; padding: var(--s4) !important; border-radius: 20px !important; border: 1px solid var(--line) !important; background: #fff !important; }
.statband__grid > div + div { border-left: 1px solid var(--line) !important; border-top: 1px solid var(--line) !important; }
.statband__grid > div:nth-child(1) { background: var(--yellow) !important; border-color: var(--yellow) !important; }
.statband__grid > div:nth-child(2) { background: var(--ink) !important; border-color: var(--ink) !important; }
.statband__grid > div:nth-child(2) dt { color: var(--yellow) !important; }
.statband__grid > div:nth-child(2) dd { color: #c4c8cf !important; }
.statband__grid > div:nth-child(1) dd { color: #4a3a0a !important; }
.statband dt { font-size: clamp(2.6rem, 4.4vw, 3.5rem) !important; }
.statband dt::after { display: none !important; }
.statband dd { margin: 10px 0 0 !important; max-width: 16em !important; text-align: left; font-size: .98rem !important; }
.statband__icon { display: grid !important; position: absolute; top: var(--s3); right: var(--s3); width: 40px !important; height: 40px !important; margin: 0 !important; border: 0 !important; background: rgba(15,17,21,.08) !important; color: var(--ink) !important; }
.statband__grid > div:nth-child(2) .statband__icon { background: rgba(255,255,255,.08) !important; color: var(--yellow) !important; }
.statband__grid > div:nth-child(3) .statband__icon { background: var(--yellow-soft) !important; color: #7a5600 !important; }
.statband__icon svg { width: 20px !important; height: 20px !important; }
@media (max-width: 960px) { .intro4__results { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .statband__grid > div { padding: var(--s3) !important; } }
@media (max-width: 520px) { .intro4__results { grid-template-columns: minmax(0, 1fr); } .intro4__results li { flex-direction: row; text-align: left; flex-wrap: wrap; column-gap: 12px; } .intro4__results small { flex-basis: 100%; padding-left: 56px; margin-top: -6px; } .intro4__ico { margin: 0; } }
/* Vraagtype "adres" met kaart */
.em-addr { position: relative; max-width: 680px; margin: var(--s5) auto 0; text-align: left; }
.em-addr__search { display: flex; align-items: center; gap: 10px; height: 56px; padding: 0 16px; background: #fff; border: 2px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-sm); transition: border-color .15s, box-shadow .15s; }
.em-addr__search:focus-within { border-color: var(--ink); box-shadow: 0 0 0 4px rgba(255,194,26,.3); }
.em-addr__search svg { width: 20px; height: 20px; color: var(--muted); }
.em-addr__search input { flex: 1; min-width: 0; height: 100%; border: 0; outline: none; background: none; font: 500 1.02rem var(--body); color: var(--ink); }
.em-addr__list { position: absolute; z-index: 5; left: 0; right: 0; top: 62px; list-style: none; margin: 0; padding: 6px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lg); }
.em-addr__list button { display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 10px 12px; border: 0; border-radius: 8px; background: none; font: 500 .92rem var(--body); color: var(--ink); text-align: left; cursor: pointer; }
.em-addr__list button:hover, .em-addr__list button:focus-visible { background: var(--yellow-soft); outline: none; }
.em-addr__list svg { width: 18px; height: 18px; flex: none; margin-top: 1px; color: #7a5600; }
.em-addr__empty { padding: 10px 12px; font-size: .9rem; color: var(--muted); }
.em-addr__map { position: relative; margin-top: 12px; height: 320px; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: #e8eef2; }
.em-addr__map iframe { width: 100%; height: 100%; border: 0; display: block; }
.em-addr__hint { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 99px; background: rgba(255,255,255,.95); box-shadow: var(--shadow); font-size: .92rem; font-weight: 600; color: var(--ink); pointer-events: none; }
.em-addr__hint svg { width: 18px; height: 18px; color: #7a5600; }
.em-addr__note { margin: 8px 0 0; font-size: .8rem; color: var(--muted); }
@media (max-width: 760px) { .em-addr__map { height: 240px; } }
/* Kop "Bekijk het in actie": ruimte tot het vakkenraster */
.try__head { margin-bottom: var(--s6); }
/* Kop "Bekijk het in actie": links uitgelijnd op de rand van het vakkenraster */
.try__head { max-width: 1120px; margin-left: auto; margin-right: auto; text-align: left; align-items: flex-start; }
.try__head h2 { max-width: 18em; }
.try__sub { max-width: 40em; text-wrap: pretty; }
/* =========================================================
   Sectie "Bekijk het in actie": donker design
   ========================================================= */
.try { position: relative; overflow: hidden; isolation: isolate; background: #0f1115 !important; border-top: 0 !important; color: #a7abb3; }
.try::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 30% 20%, #000 20%, transparent 75%);
          mask-image: radial-gradient(ellipse 70% 60% at 30% 20%, #000 20%, transparent 75%); }
.try::after { content: ""; position: absolute; z-index: -1; left: -10%; top: -260px; width: 820px; height: 520px; border-radius: 50%; background: radial-gradient(ellipse, rgba(255,194,26,.18), transparent 70%); pointer-events: none; }
.try__eyebrow { color: var(--yellow) !important; }
.try__head h2 { color: #fff; }
.try__sub { color: #a7abb3 !important; }

.tcard { background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025)) !important; border: 1px solid rgba(255,255,255,.09) !important; box-shadow: none !important; color: #fff !important; }
.tcard:hover, .tcard:focus-visible { border-color: rgba(255,194,26,.55) !important; background: linear-gradient(180deg, rgba(255,194,26,.10), rgba(255,255,255,.03)) !important; box-shadow: 0 20px 40px -24px rgba(0,0,0,.8) !important; }
.tcard__icon { background: rgba(255,194,26,.12) !important; color: var(--yellow) !important; }
.tcard:hover .tcard__icon { background: var(--yellow) !important; color: var(--ink) !important; }
.tcard__name { color: #fff; }
.tcard__cta { color: #c4c8cf !important; }
.tcard:hover .tcard__cta { color: var(--yellow) !important; }
.tcard--more { background: var(--yellow) !important; border-color: var(--yellow) !important; color: var(--ink) !important; }
.tcard--more .tcard__name, .tcard--more .tcard__cta { color: var(--ink) !important; }
.tcard--more .tcard__icon { background: rgba(15,17,21,.1) !important; color: var(--ink) !important; }
.tcard--more:hover { background: #ffcc3d !important; border-color: #ffcc3d !important; }
.tcard--more:hover .tcard__icon { background: var(--ink) !important; color: var(--yellow) !important; }

.try__callout { background: rgba(255,255,255,.04) !important; border: 1px solid rgba(255,255,255,.09) !important; }
.try__callout h3 { color: #fff; }
.try__callout p { color: #a7abb3 !important; }
.try__callout-icon { background: var(--yellow) !important; color: var(--ink) !important; }
/* =========================================================
   Sectie "Bekijk het in actie": licht, warm geel getint (vervangt zwart)
   ========================================================= */
.try { background: linear-gradient(180deg, #fff7df 0%, #fffaf0 100%) !important; color: var(--text); border-top: 1px solid #f4e7c2 !important; border-bottom: 1px solid #f4e7c2; }
.try::before { background-image: radial-gradient(circle, rgba(154,109,0,.14) 1px, transparent 1.4px); background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 60% 55% at 25% 15%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse 60% 55% at 25% 15%, #000 20%, transparent 75%); }
.try::after { background: radial-gradient(ellipse, rgba(255,194,26,.22), transparent 70%); }
.try__eyebrow { color: #7a5600 !important; }
.try__head h2 { color: var(--ink); }
.try__sub { color: var(--muted) !important; }

.tcard { background: #fff !important; border: 1px solid #f0e4c4 !important; box-shadow: 0 1px 2px rgba(15,17,21,.04), 0 12px 28px -18px rgba(154,109,0,.35) !important; color: var(--ink) !important; }
.tcard:hover, .tcard:focus-visible { border-color: var(--yellow) !important; background: #fff !important; box-shadow: 0 0 0 3px rgba(255,194,26,.25), 0 18px 36px -20px rgba(154,109,0,.45) !important; }
.tcard__icon { background: var(--yellow-soft) !important; color: #7a5600 !important; }
.tcard:hover .tcard__icon { background: var(--yellow) !important; color: var(--ink) !important; }
.tcard__name { color: var(--ink); }
.tcard__cta { color: #7a5600 !important; }
.tcard:hover .tcard__cta { color: var(--ink) !important; }
.tcard--more { background: var(--ink) !important; border-color: var(--ink) !important; color: #fff !important; }
.tcard--more .tcard__name { color: #fff !important; }
.tcard--more .tcard__cta { color: var(--yellow) !important; }
.tcard--more .tcard__icon { background: rgba(255,255,255,.1) !important; color: var(--yellow) !important; }
.tcard--more:hover { background: #22262e !important; border-color: #22262e !important; }
.tcard--more:hover .tcard__icon { background: var(--yellow) !important; color: var(--ink) !important; }

.try__callout { background: #fff !important; border: 1px dashed #e6d3a0 !important; }
.try__callout h3 { color: var(--ink); }
.try__callout p { color: var(--muted) !important; }
.try__callout-icon { background: var(--ink) !important; color: var(--yellow) !important; }
/* Label iets donkerder voor voldoende contrast op de lichte achtergrond */
.try__eyebrow { color: #7a5600 !important; }
/* Vinkvakje op fotokaarten (meerkeuze) */
.em-box--photo { border-color: #fff; color: transparent; }
.em-card.is-on .em-box--photo { background: var(--yellow); border-color: var(--yellow); color: var(--ink); }
/* ===== Try: fotokaarten (v2) ===== */
.tgrid { gap: 20px !important; }
.tcard--photo { position: relative; overflow: hidden; min-height: 400px !important; padding: 0 !important; justify-content: flex-end; border: 0 !important; background: #1b1e24 !important; color: #fff !important; isolation: isolate; box-shadow: 0 1px 2px rgba(15,17,21,.06), 0 18px 36px -22px rgba(15,17,21,.45) !important; }
.tcard--photo:hover, .tcard--photo:focus-visible { background: #1b1e24 !important; box-shadow: 0 0 0 3px var(--yellow), 0 24px 44px -24px rgba(15,17,21,.55) !important; }
.tcard__media { position: absolute; inset: 0; z-index: -1; }
.tcard__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease); }
.tcard__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,17,21,0) 30%, rgba(15,17,21,.55) 58%, rgba(15,17,21,.92) 100%); }
.tcard--photo:hover .tcard__media img { transform: scale(1.05); }
.tcard__count { position: absolute; top: 16px; left: 16px; padding: 5px 10px; border-radius: 999px; background: rgba(255,255,255,.92); color: var(--ink); font-size: .78rem; font-weight: 700; letter-spacing: .01em; }
.tcard__body { display: flex; flex-direction: column; gap: 12px; width: 100%; padding: 22px; }
.tcard--photo .tcard__name { margin: 0; color: #fff !important; font-size: 1.45rem; }
.tcard__tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.tcard__tags li { padding: 4px 9px; border-radius: 8px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.18); font-size: .78rem; color: #eef0f3; backdrop-filter: blur(4px); }
.tcard--photo .tcard__cta { margin-top: 4px; padding-top: 14px; width: 100%; border-top: 1px solid rgba(255,255,255,.16); color: var(--yellow) !important; }
.tcard--photo:hover .tcard__cta { color: var(--yellow) !important; }

.tcard--more { position: relative; overflow: hidden; min-height: 400px !important; justify-content: flex-start; gap: 10px !important; padding: 26px 22px !important; background: var(--yellow) !important; border: 0 !important; color: var(--ink) !important; box-shadow: 0 18px 36px -24px rgba(154,109,0,.6) !important; }
.tcard--more:hover, .tcard--more:focus-visible { background: #ffcc3d !important; box-shadow: 0 0 0 3px var(--ink), 0 24px 44px -24px rgba(154,109,0,.6) !important; }
.tcard--more .tcard__name { margin: 0; color: var(--ink) !important; font-size: 1.45rem; line-height: 1.2; }
.tcard__txt { font-size: .95rem; line-height: 1.5; color: rgba(15,17,21,.75); }
.tcard--more .tcard__cta { position: relative; z-index: 1; color: var(--ink) !important; }
.tcard__mascot { position: absolute; right: -18px; bottom: -14px; width: 78%; max-width: 230px; pointer-events: none; transition: transform .35s var(--ease); }
.tcard--more:hover .tcard__mascot { transform: translateY(-6px) rotate(-3deg); }

.try__callout { border: 0 !important; border-left: 4px solid var(--yellow) !important; border-radius: 14px !important; box-shadow: 0 1px 2px rgba(15,17,21,.04), 0 10px 24px -20px rgba(154,109,0,.4); }

@media (max-width: 1024px) { .tcard--photo, .tcard--more { min-height: 340px !important; } }
@media (max-width: 520px) {
  .tcard--photo { min-height: 300px !important; flex-direction: column !important; align-items: stretch !important; }
  .tcard--more { min-height: 260px !important; flex-direction: column !important; align-items: flex-start !important; }
  .tcard--photo .tcard__name, .tcard--more .tcard__name { flex: none !important; }
  .tcard__mascot { width: 44%; }
  .tcard--more .tcard__txt { max-width: 62%; }
}
.tcard__mascot { width: auto !important; max-width: none !important; height: 48%; right: -6px; bottom: -10px; }
@media (max-width: 520px) { .tcard__mascot { height: 62%; } }
@media (max-width: 520px) { .tcard--more .tcard__cta { width: auto !important; } }

/* ===== Try: kop in twee kolommen ===== */
.try__head--split { max-width: 1120px !important; display: grid !important; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 56px; align-items: end; padding-bottom: 36px; margin-bottom: 40px !important; border-bottom: 1px solid #f0e2bb; }
.try__head--split h2 { max-width: none; font-size: clamp(2.1rem, 3.9vw, 3.2rem); line-height: 1.08; letter-spacing: -.02em; margin: 0; }
.try__eyebrow { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 12px; border-radius: 999px; background: #fff; border: 1px solid #f0e2bb; box-shadow: 0 1px 2px rgba(15,17,21,.04); font-size: .74rem !important; margin-bottom: 20px !important; }
.try__live { position: relative; width: 8px; height: 8px; border-radius: 50%; background: #1fa55b; }
.try__live::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; background: rgba(31,165,91,.25); animation: tryPulse 2s ease-out infinite; }
@keyframes tryPulse { 0% { transform: scale(.6); opacity: 1; } 100% { transform: scale(1.8); opacity: 0; } }
.try__intro .try__sub { margin: 0 0 20px; max-width: none; font-size: 1.05rem; line-height: 1.65; }
.try__facts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.try__facts li { display: inline-flex; align-items: center; gap: 8px; font-size: .92rem; font-weight: 600; color: var(--ink); }
.try__facts svg { width: 18px; height: 18px; padding: 3px; border-radius: 50%; background: var(--yellow); color: var(--ink); }
@media (max-width: 900px) { .try__head--split { grid-template-columns: minmax(0, 1fr); gap: 20px; padding-bottom: 28px; margin-bottom: 28px !important; } }
.try__head--split { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 48px; }
.try__head--split h2 { font-size: clamp(2rem, 3.5vw, 2.9rem); }
.try__facts { gap: 8px 16px; }
.try__facts li { font-size: .88rem; }
@media (max-width: 900px) { .try__head--split { grid-template-columns: minmax(0, 1fr); gap: 20px; } }

/* ===== Over ons ===== */
.about__text .kicker { margin-bottom: 12px; }
.about-fix { display: flex; align-items: flex-start; gap: 18px; margin-top: 28px; padding: 24px 28px; background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--yellow); border-radius: 16px; box-shadow: 0 1px 2px rgba(15,17,21,.04); }
.about-fix__icon { flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--yellow); color: var(--ink); display: grid; place-items: center; }
.about-fix__icon svg { width: 18px; height: 18px; }
.about-fix p { margin: 0; font-size: 1.05rem; line-height: 1.65; color: var(--muted); }
.about-fix strong { color: var(--ink); }
.vision { max-width: 820px; margin: 0 auto; text-align: center; }
.vision .kicker { justify-content: center; }
.vision .kicker::after { content: ""; width: 16px; height: 2px; background: currentColor; }
.vision h2 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); line-height: 1.12; text-wrap: balance; margin-bottom: 16px; }
.vision p { font-size: 1.1rem; line-height: 1.65; color: var(--muted); text-wrap: balance; margin: 0; }
@media (max-width: 600px) { .about-fix { flex-direction: column; padding: 20px; } }
.try__intro .try__sub { margin-bottom: 0; }

/* ===== Klantverhaal MOS-X ===== */
.case { background: #fff; border-top: 1px solid var(--line); }
.case__grid { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.case__label { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin: 0 0 28px; font-size: .88rem; color: var(--muted); }
.case__logo { font-family: var(--display); font-weight: 800; font-size: 1.15rem; letter-spacing: .02em; color: var(--ink); padding: 4px 10px; border: 1.5px solid var(--ink); border-radius: 8px; }
.case__logo b { color: #7a5600; }
.case__quote { margin: 0; position: relative; }
.case__quote::before { content: ""; position: absolute; left: -2px; top: -30px; width: 56px; height: 6px; border-radius: 3px; background: var(--yellow); }
.case__quote p { margin: 0; font-family: var(--display); font-weight: 600; font-size: clamp(1.4rem, 2.4vw, 1.9rem); line-height: 1.35; letter-spacing: -.01em; color: var(--ink); text-wrap: pretty; }
.case__person { display: flex; align-items: center; gap: 14px; margin-top: 28px; }
.case__avatar { width: 48px; height: 48px; border-radius: 50%; background: var(--ink); color: var(--yellow); display: grid; place-items: center; font-weight: 700; font-size: .95rem; }
.case__person b { display: block; color: var(--ink); }
.case__person small { color: var(--muted); font-size: .9rem; }
.case__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 36px 0 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.case__facts > div { padding: 20px 0 20px 20px; border-left: 1px solid var(--line); }
.case__facts > div:first-child { padding-left: 0; border-left: 0; }
.case__facts dt { font-family: var(--display); font-weight: 800; font-size: 1.7rem; color: var(--ink); line-height: 1.1; }
.case__facts dd { margin: 4px 0 0; font-size: .9rem; color: var(--muted); }
.case__link { display: inline-flex; align-items: center; gap: 8px; margin-top: 28px; font-weight: 700; color: var(--ink); text-decoration: none; border-bottom: 2px solid var(--yellow); padding-bottom: 2px; }
.case__link svg { width: 16px; height: 16px; transition: transform .2s var(--ease); }
.case__link:hover svg { transform: translateX(4px); }

.case__demo { position: relative; padding: 28px; border-radius: 28px; background: linear-gradient(160deg, #fff4cf 0%, #ffe9a6 100%); }
.case__browser { background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 1px 2px rgba(15,17,21,.06), 0 24px 48px -24px rgba(122,86,0,.45); }
.case__bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: #f5f6f8; border-bottom: 1px solid var(--line); }
.case__bar i { width: 9px; height: 9px; border-radius: 50%; background: #d9dce2; }
.case__bar span { margin-left: 10px; flex: 1; padding: 4px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-size: .78rem; color: var(--muted); }
.case__calc { padding: 24px; }
.case__kicker { margin: 0 0 6px; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #7a5600; }
.case__calc h3 { margin: 0 0 18px; font-size: 1.25rem; line-height: 1.25; }
.case__steps { list-style: none; margin: 0 0 20px; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; counter-reset: st; }
.case__steps li { counter-increment: st; font-size: .66rem; color: var(--muted); text-align: center; padding-top: 10px; border-top: 3px solid var(--line); }
.case__steps li.is-on { border-color: var(--yellow); color: var(--ink); font-weight: 700; }
.case__q { margin: 0 0 12px; font-weight: 700; font-size: .95rem; color: var(--ink); }
.case__opts { display: grid; gap: 8px; }
.case__opts span { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border: 1.5px solid var(--line); border-radius: 12px; font-size: .9rem; font-weight: 600; color: var(--ink); }
.case__opts svg { width: 18px; height: 18px; color: #7a5600; }
.case__opts .is-sel { border-color: var(--yellow); background: #fff8e1; box-shadow: 0 0 0 3px rgba(255,194,26,.2); }
.case__ticks { list-style: none; margin: 18px 0 0; padding: 14px 0 0; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .78rem; color: var(--muted); }
.case__ticks li::before { content: "✓"; margin-right: 5px; color: #1fa55b; font-weight: 700; }
.case__badge { position: absolute; left: 50%; bottom: -16px; transform: translateX(-50%); margin: 0; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; padding: 8px 16px; border-radius: 999px; background: var(--ink); color: #fff; font-size: .82rem; font-weight: 700; box-shadow: 0 10px 24px -12px rgba(15,17,21,.6); }
.case__badge svg { width: 15px; height: 15px; color: var(--yellow); }

@media (max-width: 960px) { .case__grid { grid-template-columns: minmax(0, 1fr); gap: 56px; } }
@media (max-width: 520px) {
  .case__demo { padding: 16px; border-radius: 20px; }
  .case__calc { padding: 18px; }
  .case__steps li { font-size: 0; padding-top: 0; }
  .case__facts dt { font-size: 1.35rem; }
  .case__facts > div { padding-left: 12px; }
}

/* ===== Waarom Beavr (verspringende kaarten) ===== */
.why { background: #fff; }
.why__title { text-align: center; font-size: clamp(2rem, 3.8vw, 3rem); letter-spacing: -.02em; margin: 0 0 72px; }
.why__grid { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; align-items: start; }
.why__card { position: relative; padding: 72px 24px 32px; text-align: center; background: #fff; border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 1px 2px rgba(15,17,21,.03), 0 16px 32px -24px rgba(15,17,21,.18); transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s; }
.why__card--low { margin-top: 96px; }
.why__card--mid { margin-top: 48px; }
.why__card:hover { transform: translateY(-4px); border-color: #f0d98f; box-shadow: 0 1px 2px rgba(15,17,21,.04), 0 22px 40px -24px rgba(154,109,0,.35); }
.why__icon { position: absolute; left: 50%; top: 0; transform: translate(-50%, -50%); width: 92px; height: 92px; border-radius: 22px; background: #fff; border: 1px solid var(--line); box-shadow: 0 10px 24px -16px rgba(15,17,21,.25); display: grid; place-items: center; }
.why__icon::before { content: ""; position: absolute; inset: 18px; border-radius: 50%; background: var(--yellow-soft, #fff3cc); }
.why__icon svg { position: relative; width: 32px; height: 32px; color: var(--ink); stroke-width: 1.8; }
.why__card:hover .why__icon::before { background: var(--yellow); }
.why__card h3 { margin: 0 0 12px; font-size: 1.3rem; }
.why__card p { margin: 0; font-size: 1rem; line-height: 1.6; color: var(--muted); text-wrap: balance; }
@media (max-width: 1024px) {
  .why__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 72px; }
  .why__card--low { margin-top: 48px; }
  .why__card--mid { margin-top: 0; }
}
@media (max-width: 560px) {
  .why__title { margin-bottom: 64px; }
  .why__grid { grid-template-columns: minmax(0, 1fr); row-gap: 64px; }
  .why__card--low, .why__card--mid { margin-top: 0; }
}

/* ===== ROI (homepage) ===== */
.rx { background: #fff; }
.rx__title { text-align: center; font-size: clamp(2rem, 3.8vw, 3rem); letter-spacing: -.02em; margin: 0 0 40px; }
.rx__panel { max-width: 1040px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; padding: 24px; border-radius: 28px; background: var(--paper, #f5f6f8); border: 1px solid var(--line); }
.rx__inputs, .rx__results { display: grid; gap: 16px; align-content: start; }
.rx__box, .rx__card { border-radius: 18px; padding: 22px 24px; }
.rx__box { background: #fff; border: 1px solid var(--line); }
.rx__box label { display: block; margin-bottom: 18px; font-weight: 600; color: var(--ink); font-size: .98rem; }
.rx__box input[type="range"] { background: linear-gradient(90deg, var(--yellow) var(--p, 50%), #e9ebef var(--p, 50%)); height: 6px; }
.rx__box input[type="range"]::-webkit-slider-thumb { background: #fff; border: 3px solid var(--yellow); box-shadow: 0 2px 6px rgba(15,17,21,.2); }
.rx__box input[type="range"]::-moz-range-thumb { background: #fff; border: 3px solid var(--yellow); box-shadow: 0 2px 6px rgba(15,17,21,.2); }
.rx__scale { display: flex; justify-content: space-between; align-items: baseline; margin-top: 10px; font-size: .82rem; color: var(--muted); }
.rx__scale output { font-family: var(--display); font-weight: 800; font-size: 1.35rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.rx__hint { margin-top: 18px; padding: 14px 16px; border-radius: 12px; background: #fff8e1; font-size: .85rem; color: var(--muted); }
.rx__hint b { display: block; margin-top: 4px; font-family: var(--display); font-size: 1.35rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.rx__note { margin: 12px 0 0; text-align: center; font-size: .85rem; color: var(--muted); }
.rx__note b { color: var(--ink); }
.rx__money { display: flex; align-items: center; gap: 10px; padding: 0 16px; border: 1.5px solid var(--line); border-radius: 12px; background: #fff; transition: border-color .2s, box-shadow .2s; }
.rx__money:focus-within { border-color: var(--yellow); box-shadow: 0 0 0 3px rgba(255,194,26,.25); }
.rx__money span { font-weight: 700; color: var(--muted); }
.rx__money input { flex: 1; min-width: 0; border: 0; outline: 0; padding: 14px 0; font: inherit; font-weight: 700; font-size: 1.05rem; color: var(--ink); background: transparent; }

.rx__card h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: 1.05rem; }
.rx__card h3 i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity: .5; }
.rx__card dl { margin: 0; }
.rx__card dl > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 7px 0; font-size: .88rem; }
.rx__card dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.rx__card .rx__total { margin-top: 6px; padding-top: 12px; border-top: 1px solid currentColor; border-top-color: rgba(15,17,21,.12); }
.rx__card .rx__total dd { font-family: var(--display); font-size: 1.3rem; font-weight: 800; }
.rx__card--now { background: #fff; border: 1px solid var(--line); color: var(--ink); }
.rx__card--now dt { color: var(--muted); }
.rx__card--beavr { background: var(--yellow); color: var(--ink); box-shadow: 0 16px 32px -22px rgba(154,109,0,.7); }
.rx__card--beavr dt { color: rgba(15,17,21,.7); }
.rx__card--beavr .rx__total { border-top-color: rgba(15,17,21,.18); }
.rx__card--extra { background: var(--ink); color: #fff; text-align: center; padding: 26px 24px; }
.rx__card--extra h3 { justify-content: center; }
.rx__card--extra h3 i { background: var(--yellow); opacity: 1; }
.rx__big { margin: 6px 0 8px; font-family: var(--display); font-weight: 800; font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1.15; color: var(--yellow); font-variant-numeric: tabular-nums; }
.rx__small { margin: 0; font-size: .82rem; color: #a7abb3; }
.rx__disclaimer { max-width: 620px; margin: 20px auto 0; text-align: center; font-size: .82rem; line-height: 1.55; color: var(--muted); }
@media (max-width: 860px) { .rx__panel { grid-template-columns: minmax(0, 1fr); padding: 16px; border-radius: 22px; } }

/* ===== Prijzen: eigen sectie ===== */
.pricing { position: relative; overflow: hidden; background: linear-gradient(180deg, #fff8e4 0%, #fffdf7 100%); border-top: 1px solid #f0e2bb; border-bottom: 1px solid #f0e2bb; }
.pricing::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(154,109,0,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(154,109,0,.07) 1px, transparent 1px); background-size: 48px 48px; -webkit-mask-image: radial-gradient(ellipse 70% 55% at 50% 0%, #000 30%, transparent 75%); mask-image: radial-gradient(ellipse 70% 55% at 50% 0%, #000 30%, transparent 75%); pointer-events: none; }
.pricing > .container { position: relative; }
.pricing__head { max-width: 720px; margin: 0 auto 64px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.pricing__label { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #7a5600; }
.pricing__label::before, .pricing__label::after { content: ""; width: 24px; height: 2px; border-radius: 2px; background: var(--yellow); }
.pricing__head h2 { font-size: clamp(2rem, 3.8vw, 3rem); line-height: 1.12; letter-spacing: -.02em; text-wrap: balance; margin: 0; }
.pricing__sub { margin: 16px 0 0; font-size: 1.08rem; color: var(--muted); }
.pricing .toggle { margin-top: 24px; background: #fff; border: 1px solid #f0e2bb; border-radius: 999px; padding: 5px; box-shadow: 0 1px 2px rgba(15,17,21,.04); }
.pricing .toggle button { border-radius: 999px; height: 38px; padding: 0 18px; }
.pricing .toggle button.is-on { background: var(--ink); color: #fff; box-shadow: none; }
.pricing .toggle button.is-on em { color: var(--yellow); }
.pricing .toggle em { color: #177a41; }

.pricing .plans { max-width: 1080px; margin: 0 auto; gap: 24px; align-items: stretch; }
.pricing .plan { border: 1px solid #efe3c3; border-radius: 24px; padding: 36px 30px; background: #fff; box-shadow: 0 1px 2px rgba(15,17,21,.04), 0 18px 36px -26px rgba(154,109,0,.35); transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.pricing .plan:hover { transform: translateY(-4px); }
.pricing .plan__desc { min-height: 3.2em; }
.pricing .plan__price { border-color: #f1ead6; }
.pricing .plan li svg { color: #177a41; }
.pricing .plan--pro { background: var(--ink); color: #fff; border: 1px solid var(--ink); transform: translateY(-14px); box-shadow: 0 30px 60px -30px rgba(15,17,21,.6); }
.pricing .plan--pro:hover { transform: translateY(-18px); }
.pricing .plan--pro h3, .pricing .plan--pro li { color: #fff; }
.pricing .plan--pro .plan__desc, .pricing .plan--pro .per { color: #a7abb3; }
.pricing .plan--pro .plan__price { border-color: rgba(255,255,255,.12); }
.pricing .plan--pro .amt { color: var(--yellow); }
.pricing .plan--pro li svg { color: var(--yellow); }
.pricing .plan--pro .plan__flag { left: 50%; transform: translateX(-50%); top: -15px; background: var(--yellow); color: var(--ink); border: 0; padding: 8px 14px; box-shadow: 0 8px 18px -10px rgba(154,109,0,.8); }
@media (max-width: 900px) {
  .pricing .plan--pro, .pricing .plan--pro:hover { transform: none; }
  .pricing__head { margin-bottom: 48px; }
}
@media (min-width: 1025px) { .footer__inner .footer__brand { grid-column: 1 / span 6; } }

/* ===== Hoe het werkt (homepage) ===== */
.how { background: #fff; }
.how__head { max-width: 760px; margin: 0 auto 64px; text-align: center; }
.how__head h2 { font-size: clamp(2rem, 3.8vw, 3rem); letter-spacing: -.02em; margin: 0; }
.how__sub { margin: 14px 0 0; font-size: 1.2rem; color: var(--muted); }
.how__punch { margin: 10px 0 0; font-size: 1.1rem; color: var(--muted); }
.how__punch b { color: var(--ink); }
.how__steps { list-style: none; margin: 0 auto; padding: 0; max-width: 1160px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.how__steps li { position: relative; text-align: center; }
.how__steps li:not(:last-child)::after { content: ""; position: absolute; top: 56px; left: calc(50% + 64px); right: calc(-50% + 64px - 32px); height: 2px; background: repeating-linear-gradient(90deg, #f3d77a 0 6px, transparent 6px 12px); }
.how__icon { position: relative; display: grid; place-items: center; width: 112px; height: 112px; margin: 0 auto 28px; border-radius: 26px; background: #fff7da; border: 1px solid #f7e7ae; color: #c48a00; transition: transform .25s var(--ease), background .25s; }
.how__icon svg { width: 44px; height: 44px; stroke-width: 1.7; }
.how__icon i { position: absolute; top: -12px; right: -12px; width: 40px; height: 40px; border-radius: 50%; background: var(--yellow); color: var(--ink); font-style: normal; font-weight: 800; font-size: .92rem; display: grid; place-items: center; border: 3px solid #fff; }
.how__steps li:hover .how__icon { transform: translateY(-4px); background: #ffefb8; }
.how__steps h3 { margin: 0 0 12px; font-size: 1.25rem; }
.how__steps p { margin: 0 auto; max-width: 28ch; font-size: 1rem; line-height: 1.6; color: var(--muted); }
@media (max-width: 960px) {
  .how__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 48px; }
  .how__steps li::after { display: none; }
}
@media (max-width: 520px) {
  .how__head { margin-bottom: 48px; }
  .how__steps { grid-template-columns: minmax(0, 1fr); }
}

/* ===== Hoe het werkt: kaarten met visual ===== */
.how { background: linear-gradient(180deg, #fff 0%, #f7f8fa 100%); }
.how__steps--cards { max-width: 1160px; gap: 20px; }
.how__steps--cards li::after { display: none !important; }
.hcard { display: flex; flex-direction: column; text-align: left !important; background: #fff; border: 1px solid var(--line); border-radius: 22px; overflow: hidden; box-shadow: 0 1px 2px rgba(15,17,21,.04), 0 18px 36px -28px rgba(15,17,21,.3); transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s; }
.hcard:hover { transform: translateY(-4px); border-color: #f0d98f; box-shadow: 0 1px 2px rgba(15,17,21,.04), 0 24px 44px -26px rgba(154,109,0,.4); }
.hcard__visual { position: relative; height: 188px; padding: 22px 20px; display: flex; flex-direction: column; justify-content: center; gap: 10px; background: #fff8e4; background-image: radial-gradient(rgba(154,109,0,.12) 1px, transparent 1px); background-size: 14px 14px; border-bottom: 1px solid #f3e6bf; }
.hcard__body { padding: 22px 22px 26px; }
.hcard__no { display: inline-block; margin-bottom: 12px; padding: 4px 10px; border-radius: 999px; background: var(--ink); color: var(--yellow); font-size: .75rem; font-weight: 800; letter-spacing: .06em; }
.hcard h3 { margin: 0 0 8px; font-size: 1.2rem; }
.hcard p { margin: 0; max-width: none; font-size: .96rem; line-height: 1.6; color: var(--muted); }

/* 01 URL */
.hv-url { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 12px; background: #fff; border: 1.5px solid var(--yellow); border-radius: 12px; box-shadow: 0 0 0 4px rgba(255,194,26,.18); font-size: .85rem; font-weight: 600; color: var(--ink); }
.hv-url svg { width: 16px; height: 16px; color: #7a5600; flex: none; }
.hv-url span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hv-url b { padding: 6px 10px; border-radius: 8px; background: var(--ink); color: #fff; font-size: .75rem; }
.hv-found { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 6px; font-size: .78rem; color: var(--ink); }
.hv-found li { display: flex; align-items: center; gap: 8px; }
.hv-found svg { width: 16px; height: 16px; padding: 2px; border-radius: 50%; background: #1fa55b; color: #fff; stroke-width: 3; }
.hv-found .is-busy { color: var(--muted); }
.hv-found .is-busy i { width: 16px; height: 16px; border-radius: 50%; border: 2px solid #e8d9a8; border-top-color: #7a5600; animation: hvSpin 1s linear infinite; }
@keyframes hvSpin { to { transform: rotate(360deg); } }

/* 02 Preview */
.hv-calc { padding: 12px; background: #fff; border-radius: 14px; border: 1px solid #efe3c3; box-shadow: 0 10px 22px -16px rgba(122,86,0,.45); }
.hv-calc__bar { height: 4px; border-radius: 4px; background: #eef0f3; overflow: hidden; margin-bottom: 10px; }
.hv-calc__bar i { display: block; height: 100%; background: var(--yellow); }
.hv-calc p { margin: 0 0 8px !important; font-size: .8rem !important; font-weight: 700; color: var(--ink) !important; }
.hv-calc__opts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.hv-calc__opts span { display: flex; align-items: center; gap: 6px; padding: 8px; border: 1.5px solid var(--line); border-radius: 10px; font-size: .72rem; font-weight: 600; color: var(--ink); }
.hv-calc__opts svg { width: 14px; height: 14px; color: #7a5600; flex: none; }
.hv-calc__opts .is-sel { border-color: var(--yellow); background: #fff8e1; }
.hv-tag { position: absolute; top: 12px; right: 12px; display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 999px; background: var(--ink); color: #fff; font-size: .7rem; font-weight: 700; }
.hv-tag svg { width: 12px; height: 12px; color: var(--yellow); }

/* 03 Edit */
.hv-edit { padding: 14px; background: #fff; border-radius: 14px; border: 1px solid #efe3c3; box-shadow: 0 10px 22px -16px rgba(122,86,0,.45); display: grid; gap: 9px; }
.hv-edit__row { display: flex; justify-content: space-between; align-items: baseline; font-size: .8rem; font-weight: 600; color: var(--ink); }
.hv-edit__row b { font-family: var(--display); font-size: .95rem; }
.hv-edit__row small { font-size: .7rem; color: var(--muted); font-weight: 600; }
.hv-edit__row--muted { color: var(--muted); padding-top: 8px; border-top: 1px dashed var(--line); }
.hv-edit__slider { position: relative; height: 5px; border-radius: 5px; background: #eef0f3; }
.hv-edit__slider i { position: absolute; inset: 0 auto 0 0; border-radius: 5px; background: var(--yellow); }
.hv-edit__slider em { position: absolute; top: 50%; width: 15px; height: 15px; margin: -7.5px 0 0 -7.5px; border-radius: 50%; background: #fff; border: 3px solid var(--yellow); box-shadow: 0 2px 5px rgba(15,17,21,.2); }
.hv-edit__add { display: inline-flex; align-items: center; gap: 5px; font-size: .72rem; font-weight: 700; color: #7a5600; }
.hv-edit__add svg { width: 13px; height: 13px; }

/* 04 Live */
.hv-code { display: block; padding: 10px 12px; border-radius: 10px; background: var(--ink); color: #e6e8ec; font: 600 .74rem/1.4 ui-monospace, SFMono-Regular, Consolas, monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hv-code span { color: var(--yellow); }
.hv-toast { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: #fff; border-radius: 12px; border: 1px solid #efe3c3; box-shadow: 0 12px 24px -16px rgba(15,17,21,.35); animation: hvPop 3.2s var(--ease) infinite; }
.hv-toast__dot { flex: none; width: 30px; height: 30px; border-radius: 9px; background: var(--yellow); display: grid; place-items: center; color: var(--ink); }
.hv-toast__dot svg { width: 16px; height: 16px; }
.hv-toast b { display: block; font-size: .8rem; color: var(--ink); }
.hv-toast small { font-size: .72rem; color: var(--muted); }
@keyframes hvPop { 0%, 12% { transform: translateY(6px); opacity: 0; } 22%, 88% { transform: none; opacity: 1; } 100% { transform: translateY(-4px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .hv-toast { animation: none; } .hv-found .is-busy i { animation: none; } }

@media (max-width: 1100px) { .how__steps--cards { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 20px; } }
@media (max-width: 560px) { .how__steps--cards { grid-template-columns: minmax(0, 1fr); } .hcard__visual { height: 172px; } }

/* ===== Hoe het werkt v3: lijst + app-venster ===== */
.how { background: #fff !important; }
.how__head { margin-bottom: 56px !important; }
.how2 { max-width: 1160px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 56px; align-items: center; }
.how2__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.how2__step { position: relative; width: 100%; display: flex; gap: 18px; align-items: flex-start; padding: 20px 22px; text-align: left; font: inherit; color: inherit; background: transparent; border: 1px solid transparent; border-radius: 18px; cursor: pointer; overflow: hidden; transition: background .3s, border-color .3s, box-shadow .3s; }
.how2__step:hover { background: #fafafa; }
.how2__step.is-on { background: #fff; border-color: var(--line); box-shadow: 0 1px 2px rgba(15,17,21,.04), 0 16px 32px -24px rgba(15,17,21,.25); }
.how2__num { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .82rem; color: var(--muted); border: 1.5px solid var(--line); transition: all .3s; }
.how2__step.is-on .how2__num { background: var(--yellow); border-color: var(--yellow); color: var(--ink); }
.how2__txt b { display: block; font-family: var(--display); font-size: 1.12rem; color: var(--muted); transition: color .3s; }
.how2__step.is-on .how2__txt b { color: var(--ink); }
.how2__txt small { display: block; max-height: 0; opacity: 0; overflow: hidden; margin-top: 0; font-size: .95rem; line-height: 1.55; color: var(--muted); transition: max-height .4s var(--ease), opacity .3s, margin .3s; }
.how2__step.is-on .how2__txt small { max-height: 6em; opacity: 1; margin-top: 6px; }
.how2__prog { position: absolute; left: 22px; right: 22px; bottom: 0; height: 2px; background: transparent; }
.how2__step.is-on .how2__prog::after { content: ""; position: absolute; inset: 0; width: 0; background: var(--yellow); animation: how2Prog var(--how2-t, 5s) linear forwards; }
.how2.is-paused .how2__step.is-on .how2__prog::after { animation: none; width: 100%; }
@keyframes how2Prog { to { width: 100%; } }

.how2__stage { position: relative; padding: 36px; border-radius: 32px; background: linear-gradient(145deg, #fff6d6 0%, #fde8a8 100%); }
.how2__stage::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(circle at 85% 10%, rgba(255,255,255,.7), transparent 45%); pointer-events: none; }
.how2__win { position: relative; background: #fff; border-radius: 18px; overflow: hidden; box-shadow: 0 1px 2px rgba(15,17,21,.06), 0 30px 60px -30px rgba(122,86,0,.55); }
.how2__bar { display: flex; align-items: center; gap: 6px; padding: 12px 16px; border-bottom: 1px solid #eef0f3; background: #fafbfc; }
.how2__bar i { width: 10px; height: 10px; border-radius: 50%; background: #e2e5ea; }
.how2__bar span { margin: 0 auto; padding: 4px 14px; border-radius: 8px; background: #f1f3f6; font-size: .75rem; color: var(--muted); transform: translateX(-18px); }
.how2__screens { position: relative; height: 360px; }
.how2__screen { position: absolute; inset: 0; padding: 30px 32px; display: flex; flex-direction: column; opacity: 0; transform: translateY(8px); transition: opacity .45s var(--ease), transform .45s var(--ease); pointer-events: none; }
.how2__screen.is-on { opacity: 1; transform: none; }

.s-kicker { margin: 0 0 6px; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #7a5600; }
.s-title { margin: 0 0 20px; font-family: var(--display); font-size: 1.35rem; color: var(--ink); }
.s-url { display: flex; align-items: center; gap: 4px; padding: 6px 6px 6px 16px; border: 1.5px solid var(--yellow); border-radius: 12px; box-shadow: 0 0 0 4px rgba(255,194,26,.16); font-size: .95rem; }
.s-url span { color: var(--muted); }
.s-url b { flex: 1; color: var(--ink); font-weight: 600; }
.s-url em { font-style: normal; padding: 9px 16px; border-radius: 9px; background: var(--ink); color: #fff; font-size: .85rem; font-weight: 700; }
.s-list { list-style: none; margin: 20px 0 0; padding: 0; display: grid; }
.s-list li { display: grid; grid-template-columns: 24px 1fr auto; gap: 12px; align-items: center; padding: 11px 0; border-top: 1px solid #f0f1f4; font-size: .9rem; color: var(--ink); }
.s-list small { font-size: .82rem; color: var(--muted); }
.s-ok { width: 22px; height: 22px; border-radius: 50%; background: #e7f6ee; color: #177a41; display: grid; place-items: center; }
.s-ok svg { width: 13px; height: 13px; stroke-width: 3; }
.s-spin { width: 20px; height: 20px; margin: 1px; border-radius: 50%; border: 2px solid #eee3c2; border-top-color: #c48a00; animation: hvSpin 1s linear infinite; }
.s-list .is-busy span:nth-child(2) { color: var(--muted); }

.s-prog { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; font-size: .78rem; color: var(--muted); }
.s-prog i { flex: 1; height: 5px; border-radius: 5px; background: #eef0f3; overflow: hidden; }
.s-prog b { display: block; height: 100%; background: var(--yellow); }
.s-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.s-opts span { display: flex; align-items: center; gap: 10px; padding: 14px; border: 1.5px solid #e6e8ec; border-radius: 12px; font-size: .9rem; font-weight: 600; color: var(--ink); }
.s-opts svg { width: 20px; height: 20px; color: #7a5600; }
.s-opts .is-sel { border-color: var(--yellow); background: #fffaeb; box-shadow: 0 0 0 3px rgba(255,194,26,.18); }
.s-foot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; font-size: .88rem; color: var(--muted); }
.s-foot em { font-style: normal; padding: 10px 18px; border-radius: 10px; background: var(--yellow); color: var(--ink); font-weight: 700; }

.s-rows { display: grid; }
.s-row { display: grid; grid-template-columns: 1.1fr 1fr auto; gap: 16px; align-items: center; padding: 14px 12px; margin: 0 -12px; border-radius: 12px; font-size: .9rem; color: var(--ink); }
.s-row + .s-row { border-top: 1px solid #f0f1f4; }
.s-row.is-edit { background: #fffaeb; box-shadow: inset 0 0 0 1.5px rgba(255,194,26,.55); }
.s-row b { font-family: var(--display); min-width: 74px; text-align: right; }
.s-row small { font-size: .72rem; color: var(--muted); }
.s-slider { position: relative; height: 5px; border-radius: 5px; background: #eef0f3; }
.s-slider i { position: absolute; inset: 0 auto 0 0; border-radius: 5px; background: #d9dce2; }
.s-row.is-edit .s-slider i { background: var(--yellow); }
.s-slider em { position: absolute; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: #fff; border: 3px solid var(--yellow); box-shadow: 0 2px 6px rgba(15,17,21,.2); }
.s-add { margin-top: 16px; display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; font-weight: 700; color: #7a5600; }
.s-add svg { width: 15px; height: 15px; }

.s-code { display: block; padding: 16px 18px; border-radius: 12px; background: var(--ink); color: #d7dae0; font: 500 .82rem/1.6 ui-monospace, SFMono-Regular, Consolas, monospace; word-break: break-all; }
.s-code span { color: var(--yellow); }
.s-toast { margin-top: auto; display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 14px; background: #fff; border: 1px solid #eef0f3; box-shadow: 0 18px 36px -20px rgba(15,17,21,.35); }
.how2__screen.is-on .s-toast { animation: sToast .6s .35s var(--ease) both; }
@keyframes sToast { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.s-toast__ico { flex: none; width: 38px; height: 38px; border-radius: 11px; background: var(--yellow); display: grid; place-items: center; color: var(--ink); }
.s-toast__ico svg { width: 18px; height: 18px; }
.s-toast b { display: block; font-size: .92rem; color: var(--ink); }
.s-toast small { font-size: .8rem; color: var(--muted); }
.s-toast em { margin-left: auto; font-style: normal; font-size: .75rem; color: var(--muted); }

@media (max-width: 960px) {
  .how2 { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .how2__stage { order: -1; padding: 20px; border-radius: 24px; }
}
@media (max-width: 520px) {
  .how2__screens { height: 380px; }
  .how2__screen { padding: 22px 18px; }
  .s-opts { grid-template-columns: 1fr; }
  .s-row { grid-template-columns: 1fr auto; }
  .s-row .s-slider { display: none; }
  .how2__step { padding: 16px; }
}
.how2__screens { height: 392px; }
.s-list li { padding: 10px 0; }
.s-title { margin-bottom: 18px; }
@media (max-width: 520px) { .how2__screens { height: 420px; } }

/* Scherm 02: fotokaarten zoals in de echte calculator */
.s-photos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.s-photos span { position: relative; display: block; aspect-ratio: 3 / 4; border-radius: 12px; overflow: hidden; background: #1b1e24; box-shadow: 0 0 0 1px rgba(15,17,21,.06); }
.s-photos img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.s-photos span::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,17,21,0) 45%, rgba(15,17,21,.78) 100%); }
.s-photos i { position: absolute; z-index: 1; left: 50%; bottom: 34px; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; border: 2px solid #fff; display: grid; place-items: center; }
.s-photos b { position: absolute; z-index: 1; left: 4px; right: 4px; bottom: 10px; text-align: center; color: #fff; font-size: .72rem; font-weight: 600; line-height: 1.2; }
.s-photos .is-sel { box-shadow: 0 0 0 3px var(--yellow), 0 10px 22px -12px rgba(154,109,0,.6); }
.s-photos .is-sel i { background: var(--yellow); border-color: var(--yellow); color: var(--ink); }
.s-photos .is-sel i svg { width: 10px; height: 10px; stroke-width: 3.5; }
@media (max-width: 520px) { .s-photos { grid-template-columns: repeat(2, minmax(0, 1fr)); } .s-photos span { aspect-ratio: 4 / 3; } }

/* Scherm 04: minder technisch */
.s-site { border: 1px solid #eceef2; border-radius: 12px; overflow: hidden; background: #fff; }
.s-site__nav { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid #f0f1f4; }
.s-site__logo { width: 54px; height: 12px; border-radius: 4px; background: #d9dce2; margin-right: auto; }
.s-site__nav i { width: 28px; height: 6px; border-radius: 3px; background: #eceef2; }
.s-site__hero { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 14px; background: linear-gradient(135deg, #f7f8fa, #eef0f3); }
.s-site__lines { flex: 1; display: grid; gap: 7px; }
.s-site__lines i { height: 8px; border-radius: 4px; background: #d9dce2; }
.s-site__lines i:first-child { height: 11px; width: 85%; background: #c9cdd4; }
.s-site__lines i.short { width: 55%; }
.s-site__btn { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; border-radius: 10px; background: var(--yellow); color: var(--ink); font-size: .8rem; font-weight: 700; white-space: nowrap; box-shadow: 0 0 0 5px rgba(255,194,26,.22); }
.s-site__btn svg { width: 13px; height: 13px; }
.how2__screen.is-on .s-site__btn { animation: sPulse 2.4s ease-in-out infinite; }
@keyframes sPulse { 0%, 100% { box-shadow: 0 0 0 5px rgba(255,194,26,.22); } 50% { box-shadow: 0 0 0 9px rgba(255,194,26,.12); } }
.s-works { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; font-size: .8rem; color: var(--muted); }
.s-works svg { width: 16px; height: 16px; padding: 2px; border-radius: 50%; background: #e7f6ee; color: #177a41; stroke-width: 3; flex: none; }

/* Scherm 03: offerte / prijsindicatie */
.s-quote__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.s-quote__head .s-title { margin-bottom: 16px; }
.s-quote__meta { text-align: right; font-size: .76rem; line-height: 1.5; color: var(--muted); }
.s-quote { border: 1px solid #eceef2; border-radius: 14px; overflow: hidden; }
.s-qrow { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; font-size: .88rem; color: var(--ink); }
.s-qrow + .s-qrow { border-top: 1px solid #f0f1f4; }
.s-qrow small { display: block; margin-top: 3px; font-size: .76rem; color: var(--muted); }
.s-qrow em { display: inline-flex; align-items: center; gap: 4px; margin-left: 2px; padding: 2px 8px; border-radius: 6px; font-style: normal; font-weight: 700; color: var(--ink); background: #fff3c4; box-shadow: inset 0 0 0 1.5px var(--yellow); }
.s-qrow em svg { width: 11px; height: 11px; color: #7a5600; }
.s-qrow b { font-variant-numeric: tabular-nums; }
.s-qrow.is-edit { background: #fffcf2; }
.s-qtotal { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; background: var(--ink); color: #fff; }
.s-qtotal span { font-weight: 600; font-size: .9rem; }
.s-qtotal small { margin-left: 4px; font-size: .72rem; color: #a7abb3; font-weight: 500; }
.s-qtotal b { font-family: var(--display); font-size: 1.15rem; color: var(--yellow); font-variant-numeric: tabular-nums; }
.s-note { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; font-size: .8rem; color: var(--muted); }
.s-note svg { width: 15px; height: 15px; color: #7a5600; flex: none; }

/* Hoe het werkt: aangeklede achtergrond */
.how { position: relative; overflow: hidden; isolation: isolate; background: linear-gradient(180deg, #ffffff 0%, #fbfaf6 100%) !important; }
.how::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(15,17,21,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(15,17,21,.045) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: radial-gradient(ellipse 75% 65% at 50% 40%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse 75% 65% at 50% 40%, #000 20%, transparent 75%); }
.how::after { content: ""; position: absolute; z-index: -1; width: 720px; height: 720px; right: -160px; bottom: -260px; border-radius: 50%; background: radial-gradient(circle, rgba(255,194,26,.28) 0%, rgba(255,194,26,0) 65%); filter: blur(10px); }
.how .container { position: relative; }
.how .container::before { content: ""; position: absolute; z-index: -1; width: 460px; height: 460px; left: -200px; top: -120px; border-radius: 50%; background: radial-gradient(circle, rgba(255,194,26,.14) 0%, rgba(255,194,26,0) 65%); }
.how2__stage { box-shadow: 0 40px 80px -50px rgba(154,109,0,.55); }

/* ===== Resultaten: één strak paneel ===== */
.intro4__pill { background: transparent !important; box-shadow: none !important; padding: 0 !important; color: #7a5600 !important; font-size: .8rem !important; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; gap: 12px !important; }
.intro4__pill::before, .intro4__pill::after { content: ""; width: 24px !important; height: 2px !important; border-radius: 2px !important; background: var(--yellow) !important; }
.intro4__results { gap: 0 !important; max-width: 1080px !important; background: #fff; border: 1px solid #ebe6d8; border-radius: 24px; box-shadow: 0 1px 2px rgba(15,17,21,.04), 0 30px 60px -40px rgba(122,86,0,.45); overflow: hidden; }
.intro4__results li { position: relative; align-items: flex-start !important; text-align: left !important; gap: 0 !important; padding: 32px 28px 30px !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; transition: background .25s; }
.intro4__results li + li { border-left: 1px solid #f0ece0 !important; }
.intro4__results li::before { content: ""; position: absolute; left: 28px; right: 28px; top: 0; height: 3px; border-radius: 0 0 3px 3px; background: var(--yellow); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.intro4__results li:hover { background: #fffdf6 !important; }
.intro4__results li:hover::before { transform: scaleX(1); }
.intro4__ico { width: 40px !important; height: 40px !important; margin: 0 0 20px !important; border-radius: 50% !important; background: var(--ink) !important; color: var(--yellow) !important; }
.intro4__ico svg { width: 19px !important; height: 19px !important; }
.intro4__results b { font-size: 1.1rem !important; line-height: 1.3; letter-spacing: -.01em; white-space: nowrap; }
.intro4__results small { margin-top: 8px; font-size: .94rem !important; line-height: 1.55 !important; }
@media (max-width: 960px) {
  .intro4__results li:nth-child(3) { border-left: 0 !important; }
  .intro4__results li:nth-child(n+3) { border-top: 1px solid #f0ece0 !important; }
}
@media (max-width: 520px) {
  .intro4__results li { flex-direction: column !important; padding: 24px 22px !important; }
  .intro4__results li + li { border-left: 0 !important; border-top: 1px solid #f0ece0 !important; }
  .intro4__results small { padding-left: 0 !important; margin-top: 6px !important; flex-basis: auto !important; }
  .intro4__ico { margin-bottom: 14px !important; }
  .intro4__results b { white-space: normal; }
}
.intro4__results { width: min(1080px, calc(100vw - 32px)) !important; max-width: none !important; align-self: center; }
@media (max-width: 1100px) { .intro4__results b { white-space: normal; } }

/* ===== Resultaten: lichter ===== */
.intro4__results { background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; overflow: visible !important; }
.intro4__results li { padding: 6px 28px !important; }
.intro4__results li:hover { background: transparent !important; }
.intro4__results li::before { display: none !important; }
.intro4__results li + li { border-left: 1px solid #ebe6d8 !important; }
.intro4__ico { width: auto !important; height: auto !important; margin: 0 0 14px !important; border-radius: 0 !important; background: transparent !important; color: #b07d00 !important; }
.intro4__ico svg { width: 24px !important; height: 24px !important; }
.intro4__results b { font-size: 1.05rem !important; }
.intro4__results small { font-size: .92rem !important; }
.intro4__btn { background: transparent !important; color: var(--ink) !important; box-shadow: none !important; border: 0 !important; padding: 0 0 3px !important; height: auto !important; border-radius: 0 !important; border-bottom: 2px solid var(--yellow) !important; font-weight: 700; }
.intro4__btn:hover { border-bottom-color: var(--ink) !important; transform: none !important; }
@media (max-width: 960px) { .intro4__results li:nth-child(n+3) { border-top: 0 !important; padding-top: 24px !important; } }
@media (max-width: 520px) { .intro4__results li, .intro4__results li + li { border: 0 !important; padding: 14px 0 !important; } }

/* Waarom Beavr: subtiel bevershoofd op de achtergrond */
.why { position: relative; overflow: hidden; isolation: isolate; }
.why::before { content: ""; position: absolute; z-index: -1; width: 560px; height: 546px; right: -120px; bottom: -110px; background: #f6ecd0; -webkit-mask: url("assets/beavr-head.png") center / contain no-repeat; mask: url("assets/beavr-head.png") center / contain no-repeat; opacity: .55; transform: rotate(-12deg); }
.why::after { content: ""; position: absolute; z-index: -1; width: 300px; height: 292px; left: -90px; top: 60px; background: #f6ecd0; -webkit-mask: url("assets/beavr-head.png") center / contain no-repeat; mask: url("assets/beavr-head.png") center / contain no-repeat; opacity: .35; transform: rotate(14deg); }
@media (max-width: 760px) { .why::before { width: 320px; height: 312px; right: -90px; bottom: -60px; } .why::after { display: none; } }
.why::before, .why::after { -webkit-mask: none !important; mask: none !important; background: url("assets/beavr-head.png") center / contain no-repeat !important; filter: grayscale(1); }
.why::before { opacity: .05 !important; }
.why::after { opacity: .04 !important; }

/* Prijzen: 4 pakketten */
.pricing .plans--4 { max-width: 1200px; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.pricing .plans--4 .plan { padding: 32px 24px; }
.pricing .plans--4 .plan h3 { font-size: 1.35rem; }
.pricing .plans--4 .plan__price .amt, .plan__price .amt-custom { font-size: 2.6rem; }
.plan__price .amt-custom { font-family: var(--display); font-weight: 800; line-height: 1; letter-spacing: -.03em; color: var(--ink); }
.plan__price .per-custom { font-size: .9rem; color: var(--muted); margin-top: var(--s1); }
.pricing .plans--4 .plan ul { gap: 10px; font-size: .94rem; }
.pricing .plans--4 .plan li b { font-weight: 700; color: inherit; }
.pricing .plan--ent { background: #fbf8ef; border-color: #ebe2c6; }
@media (max-width: 1100px) { .pricing .plans--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; row-gap: 28px; } .pricing .plans--4 .plan--pro, .pricing .plans--4 .plan--pro:hover { transform: none; } }
@media (max-width: 640px) { .pricing .plans--4 { grid-template-columns: minmax(0, 1fr); max-width: 480px; } }
.plan__price .per s { margin-left: 6px; color: #a7abb3; text-decoration-thickness: 1.5px; }
.pricing .plan--pro .plan__price .per s { color: #6b7079; }

/* ===== Meten op de luchtfoto ===== */
.em-meas { position: relative; margin-top: 12px; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); background: #1b1e24; }
.em-meas__map { height: 340px; background: #2a2e36; }
.em-meas__map.is-drawing { cursor: crosshair; }
.em-meas__map .leaflet-container, .em-meas__map.leaflet-container { font: inherit; }
.em-meas__map .leaflet-control-attribution { font-size: 10px; }
.em-meas__hint { position: absolute; z-index: 500; left: 50%; top: 150px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; background: #fff; color: var(--ink); font-size: .9rem; font-weight: 600; box-shadow: 0 10px 24px -12px rgba(15,17,21,.5); white-space: nowrap; pointer-events: none; }
.em-meas__hint svg { width: 16px; height: 16px; color: #7a5600; }
.em-meas__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 16px; background: #fff; border-top: 1px solid var(--line); }
.em-meas__val small { display: block; font-size: .78rem; color: var(--muted); }
.em-meas__val b { font-family: var(--display); font-size: 1.4rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.em-meas__tools { display: flex; gap: 8px; flex-wrap: wrap; }
.em-meas__btn { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; border-radius: 10px; border: 1.5px solid var(--line); background: #fff; color: var(--ink); font: 600 .88rem/1 var(--body); cursor: pointer; }
.em-meas__btn svg { width: 15px; height: 15px; }
.em-meas__btn--main { background: var(--ink); border-color: var(--ink); color: #fff; }
.em-meas__btn--main svg { color: var(--yellow); }
.em-meas__btn:hover { border-color: #c9ccd3; }
.em-meas__btn--main:hover { background: #22262e; }
.em-meas__off { margin: 0; padding: 40px 20px; text-align: center; color: #fff; }
.em-meas__open { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; height: 44px; padding: 0 18px; border-radius: 12px; border: 1.5px dashed #e0c878; background: #fffaeb; color: var(--ink); font: 700 .92rem/1 var(--body); cursor: pointer; }
.em-meas__open svg { width: 18px; height: 18px; color: #7a5600; }
.em-meas__open:hover { border-style: solid; border-color: var(--yellow); }
.em-meas__wrap { margin-top: 18px; text-align: left; }
.em-meas__note { display: flex; align-items: flex-start; gap: 8px; max-width: 560px; margin: 0 auto 18px; padding: 12px 14px; border-radius: 12px; background: #eefaf3; color: #1d5b39; font-size: .9rem; line-height: 1.5; text-align: left; }
.em-meas__note svg { flex: none; width: 18px; height: 18px; margin-top: 1px; color: #177a41; stroke-width: 2.6; }
@media (max-width: 560px) { .em-meas__map { height: 280px; } .em-meas__hint { top: 120px; white-space: normal; text-align: center; width: 80%; } }
.em-meas__spin { display: inline-block; width: 22px; height: 22px; border-radius: 50%; border: 3px solid #eee3c2; border-top-color: #c48a00; animation: hvSpin 1s linear infinite; vertical-align: middle; }
.em-meas__btn[hidden], .em-meas__open[hidden] { display: none !important; }

/* Oppervlakte: bereiken met foto */
.em-ranges { margin-bottom: 6px; }
.em-ranges .em-card__label small { display: block; margin-top: 2px; font-weight: 500; opacity: .85; }
.em-or { display: flex; align-items: center; gap: 14px; max-width: 560px; margin: 22px auto 14px; color: var(--muted); font-size: .85rem; }
.em-or::before, .em-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* Meten: duidelijke kop + adreslijst */
.em-meas { margin-top: 14px; }
.em-meas__head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: #fff; border-bottom: 1px solid var(--line); text-align: left; }
.em-meas__ico { flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--yellow); color: var(--ink); }
.em-meas__ico svg { width: 18px; height: 18px; }
.em-meas__head b { display: block; font-size: .95rem; color: var(--ink); }
.em-meas__head small { display: block; margin-top: 2px; font-size: .84rem; color: var(--muted); line-height: 1.4; }
.em-meas__map.is-drawing { cursor: crosshair !important; }
.em-meas__map.is-drawing .leaflet-interactive { cursor: pointer; }
.em-addr__list button span { display: flex; flex-direction: column; text-align: left; }
.em-addr__list button b { font-weight: 600; color: var(--ink); }
.em-addr__list button small { font-size: .8rem; color: var(--muted); }
/* Leaflet-tekenlaag niet laten krimpen door de icoon-regels (svg 20x20) */
.leaflet-container svg, .leaflet-pane svg { width: auto !important; height: auto !important; max-width: none !important; max-height: none !important; }

/* ===== Pagina: Hoe het werkt ===== */
.hw-label { display: inline-flex; align-items: center; gap: 12px; margin: 0 0 14px; font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #7a5600; }
.hw-label::before, .hw-label::after { content: ""; width: 22px; height: 2px; border-radius: 2px; background: var(--yellow); }
.hw-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--ink); text-decoration: none; border-bottom: 2px solid var(--yellow); padding-bottom: 2px; }
.hw-link svg { width: 15px; height: 15px; transition: transform .2s var(--ease); }
.hw-link:hover svg { transform: translateX(3px); }
.hw-link--light { color: #fff; }

.hw-hero { position: relative; overflow: hidden; padding: 150px 0 72px; text-align: center; background: linear-gradient(180deg, #fff8e4 0%, #fff 100%); }
.hw-hero::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(154,109,0,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(154,109,0,.06) 1px, transparent 1px); background-size: 48px 48px; -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 30%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse 70% 70% at 50% 30%, #000 20%, transparent 75%); pointer-events: none; }
.hw-hero__in { position: relative; max-width: 820px; margin: 0 auto; }
.hw-hero h1 { font-size: clamp(2.2rem, 4.6vw, 3.6rem); line-height: 1.08; letter-spacing: -.025em; text-wrap: balance; margin: 0; }
.hw-hero__sub { max-width: 640px; margin: 20px auto 0; font-size: 1.15rem; line-height: 1.6; color: var(--muted); text-wrap: balance; }
.hw-hero__cta { display: flex; justify-content: center; align-items: center; gap: 24px; flex-wrap: wrap; margin-top: 32px; }
.hw-hero__cta .btn svg { width: 18px; height: 18px; }
.hw-hero__meta { list-style: none; display: flex; justify-content: center; gap: 22px; flex-wrap: wrap; margin: 18px 0 0; padding: 0; font-size: .9rem; color: var(--muted); }
.hw-hero__meta li { display: inline-flex; align-items: center; gap: 6px; }
.hw-hero__meta svg { width: 16px; height: 16px; color: #177a41; stroke-width: 2.6; }

.hw-part { padding-top: 24px; }
.hw-panel { max-width: 1160px; margin: 0 auto; padding: 64px 56px 72px; border-radius: 32px; background: linear-gradient(180deg, #fff7dc 0%, #fffdf6 40%, #fff 100%); border: 1px solid #f3e6bf; }
.hw-panel__head { max-width: 640px; margin: 0 auto 56px; text-align: center; }
.hw-panel__head h2, .hw-live__head h2 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); letter-spacing: -.02em; line-height: 1.12; margin: 0; text-wrap: balance; }
.hw-panel__head p:not(.hw-label) { margin: 12px 0 0; color: var(--muted); font-size: 1.05rem; }

.zz__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.zz__row--flip .zz__visual { order: 2; }
.zz__win { max-width: 470px; margin: 0 auto; box-shadow: 0 1px 2px rgba(15,17,21,.06), 0 30px 60px -34px rgba(122,86,0,.5); }
.zz__screen { padding: 24px 26px 26px; }
.zz__screen--sm { padding: 18px; }
.zz__toast { margin-top: 16px; }
.zz__text { max-width: 440px; }
.zz__no { display: block; font-family: var(--display); font-weight: 800; font-size: 4.2rem; line-height: 1; letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1.5px #e7cf85; margin-bottom: 8px; }
.zz__text h3 { margin: 0 0 12px; font-size: 1.55rem; letter-spacing: -.01em; }
.zz__text p { margin: 0; font-size: 1.05rem; line-height: 1.65; color: var(--muted); }
.zz__text .hw-link { margin-top: 20px; }
.zz__link { display: block; width: 100%; height: 90px; margin: 8px 0; overflow: visible; }
.zz__link path { fill: none; stroke: #e7cf85; stroke-width: 2; stroke-dasharray: 7 8; vector-effect: non-scaling-stroke; }

.hw-live { background: #fff; }
.hw-live__head { text-align: center; margin: 0 auto 48px; max-width: 720px; }
.hw-cards { max-width: 1160px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.hw-card { text-align: center; }
.hw-card__shot { height: 260px; display: grid; place-items: center; padding: 22px; margin-bottom: 26px; border-radius: 22px; background: linear-gradient(145deg, #fff6d6, #fde8a8); }
.hw-card__shot .how2__win { width: 100%; box-shadow: 0 20px 40px -26px rgba(122,86,0,.55); text-align: left; }
.hw-card__shot .s-title { font-size: 1rem; margin-bottom: 12px; }
.hw-card__shot .s-photos b { font-size: .62rem; }
.hw-card h3 { margin: 0 0 10px; font-size: 1.25rem; }
.hw-card p { margin: 0 auto; max-width: 34ch; color: var(--muted); line-height: 1.6; }
.hw-mail { display: grid; gap: 0; }
.hw-mail__top { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; margin-bottom: 4px; border-bottom: 1px solid #f0f1f4; }
.hw-mail__top b { display: block; font-size: .88rem; color: var(--ink); }
.hw-mail__top small { font-size: .75rem; color: var(--muted); }
.hw-mail__row { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; font-size: .82rem; color: var(--muted); border-bottom: 1px solid #f5f6f8; }
.hw-mail__row b { color: var(--ink); font-weight: 600; }
.hw-price { margin: 4px 0 2px; font-family: var(--display); font-weight: 800; font-size: 1.7rem; color: var(--ink); }
.hw-price__sub { margin: 0 0 16px; font-size: .8rem; color: var(--muted); }
.hw-price__btn { display: block; padding: 11px; border-radius: 10px; background: var(--yellow); color: var(--ink); font-weight: 700; font-size: .85rem; text-align: center; }
.hw-price__alt { display: block; margin-top: 8px; font-size: .76rem; color: var(--muted); text-align: center; }

.hw-end { padding: 24px 0 96px; }
.hw-end__box { max-width: 1160px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; padding: 44px 48px; border-radius: 28px; background: var(--ink); color: #fff; box-shadow: 0 30px 60px -40px rgba(15,17,21,.7); }
.hw-end__box h2 { margin: 0 0 8px; color: #fff; font-size: clamp(1.5rem, 2.6vw, 2rem); }
.hw-end__box p { margin: 0; color: #a7abb3; }
.hw-end__cta { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }

@media (max-width: 900px) {
  .hw-panel { padding: 40px 20px 48px; border-radius: 24px; }
  .zz__row { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .zz__row--flip .zz__visual { order: 0; }
  .zz__text { max-width: none; text-align: center; }
  .zz__link { height: 48px; }
  .zz__link path { d: path("M500 0 L500 90"); }
  .hw-cards { grid-template-columns: minmax(0, 1fr); max-width: 460px; gap: 44px; }
  .hw-end__box { padding: 32px 24px; }
}
@media (max-width: 520px) { .hw-hero { padding: 120px 0 48px; } .zz__screen { padding: 18px; } .zz__no { font-size: 3.2rem; } }

/* ===== CTA's onder secties ===== */
.sec-cta { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 56px auto 0; text-align: center; }
.sec-cta .btn svg { width: 18px; height: 18px; }
.sec-cta__link { font-weight: 700; color: var(--ink); text-decoration: none; border-bottom: 2px solid var(--yellow); padding-bottom: 2px; font-size: .95rem; }
.sec-cta__link:hover { border-bottom-color: var(--ink); }
.sec-cta__meta { margin: 0; font-size: .85rem; color: var(--muted); }
@media (min-width: 640px) { .sec-cta { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 14px 24px; } .sec-cta__meta { flex-basis: 100%; } }

/* Vaste CTA onderaan op gsm */
.m-cta { display: none; }
@media (max-width: 760px) {
  .m-cta { display: block; position: fixed; z-index: 60; left: 12px; right: 12px; bottom: 12px; padding: 8px; border-radius: 16px; background: rgba(255,255,255,.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 10px 30px -10px rgba(15,17,21,.35); transform: translateY(140%); transition: transform .3s var(--ease); }
  .m-cta.is-on { transform: none; }
  .m-cta .btn svg { width: 18px; height: 18px; }
}
.pricing--flat { background: transparent !important; border: 0 !important; overflow: visible; }
.pricing--flat::before { display: none; }
.pricing--flat .plans--4 { margin-top: 24px; }

/* Oppervlakte: twee manieren op één pagina */
.em-tabs { display: inline-flex; gap: 4px; padding: 5px; margin: 0 auto 20px; border-radius: 14px; background: #f1f2f5; }
.em-q .em-tabs { display: flex; width: fit-content; max-width: 100%; }
.em-tabs button { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 18px; border: 0; border-radius: 10px; background: transparent; color: var(--muted); font: 600 .92rem/1 var(--body); cursor: pointer; transition: background .2s, color .2s, box-shadow .2s; }
.em-tabs button svg { width: 17px; height: 17px; }
.em-tabs button.is-on { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(15,17,21,.08), 0 4px 12px -6px rgba(15,17,21,.2); }
.em-tabs button.is-on svg { color: #7a5600; }
.em-pane[hidden] { display: none !important; }
.em-pane__alt { margin: 14px 0 0; font-size: .88rem; color: var(--muted); text-align: center; }
.em-pane__alt button { border: 0; background: none; padding: 0 0 1px; font: inherit; font-weight: 700; color: var(--ink); border-bottom: 2px solid var(--yellow); cursor: pointer; }
.em-alt { margin-top: 8px; }
.em-alt .em-or { margin-top: 26px; }
@media (max-width: 520px) { .em-tabs button { padding: 0 12px; font-size: .85rem; } }
.em-meas__calc { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; padding: 10px 14px; border-radius: 12px; background: #eefaf3; color: #1d5b39; font-size: .9rem; }
.em-meas__calc[hidden] { display: none; }
.em-meas__calc svg { flex: none; width: 18px; height: 18px; color: #177a41; stroke-width: 2.6; }

/* ===== Pagina: Functies ===== */
.fx-hero { padding-bottom: 56px; }
.fx-nav { position: sticky; top: 84px; z-index: 40; display: flex; justify-content: center; padding: 0 16px; margin: -26px 0 0; pointer-events: none; }
.fx-nav__in { pointer-events: auto; display: inline-flex; gap: 4px; padding: 5px; border-radius: 999px; background: rgba(255,255,255,.9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--line); box-shadow: 0 10px 30px -18px rgba(15,17,21,.35); }
.fx-nav a { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px 0 8px; border-radius: 999px; color: var(--muted); text-decoration: none; font-weight: 600; font-size: .92rem; transition: background .2s, color .2s; }
.fx-nav a b { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: .75rem; background: #f1f2f5; color: var(--muted); transition: inherit; }
.fx-nav a:hover { color: var(--ink); }
.fx-nav a.is-on { background: var(--ink); color: #fff; }
.fx-nav a.is-on b { background: var(--yellow); color: var(--ink); }

.fx-chapter { position: relative; padding: 96px 0; background: #fff; scroll-margin-top: 90px; }
.fx-chapter--warm { background: linear-gradient(180deg, #fff8e4 0%, #fffdf7 100%); border-top: 1px solid #f3e6bf; border-bottom: 1px solid #f3e6bf; }
.fx-head { max-width: 1160px; margin: 0 auto 48px; display: flex; align-items: flex-start; gap: 22px; }
.fx-head__no { flex: none; width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: var(--ink); color: var(--yellow); font-family: var(--display); font-weight: 800; font-size: 1.5rem; }
.fx-head .hw-label { margin-bottom: 6px; }
.fx-head .hw-label::before { display: none; }
.fx-head h2 { margin: 0; font-size: clamp(1.8rem, 3.2vw, 2.5rem); letter-spacing: -.02em; line-height: 1.12; }
.fx-head p:not(.hw-label) { margin: 8px 0 0; color: var(--muted); font-size: 1.05rem; }

.fx-main { max-width: 1160px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 56px; align-items: center; padding: 44px; border-radius: 28px; background: #fff; border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(15,17,21,.04), 0 30px 60px -44px rgba(15,17,21,.35); }
.fx-chapter--warm .fx-main { border-color: #efe3c3; }
.fx-main--flip .fx-main__visual { order: -1; }
.fx-tag { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: #fff3c4; color: #7a5600; font-size: .8rem; font-weight: 700; }
.fx-tag svg { width: 15px; height: 15px; }
.fx-main__text h3 { margin: 16px 0 12px; font-size: clamp(1.4rem, 2.4vw, 1.8rem); letter-spacing: -.015em; line-height: 1.2; }
.fx-main__text > p { margin: 0; color: var(--muted); font-size: 1.04rem; line-height: 1.65; }
.fx-ticks { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 10px; }
.fx-ticks li { display: flex; align-items: flex-start; gap: 10px; font-size: .96rem; color: var(--ink); }
.fx-ticks svg { flex: none; width: 20px; height: 20px; padding: 3px; margin-top: 1px; border-radius: 50%; background: #e7f6ee; color: #177a41; stroke-width: 3; }
.fx-main__visual { padding: 28px; border-radius: 22px; background: linear-gradient(145deg, #fff6d6, #fde8a8); }
.fx-main__visual .how2__win { box-shadow: 0 24px 48px -30px rgba(122,86,0,.55); }
.fx-main__visual .lead-card { margin: 0; box-shadow: 0 24px 48px -30px rgba(122,86,0,.55); }

.fx-grid { max-width: 1160px; margin: 24px auto 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.fx-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fx-card { display: flex; flex-direction: column; padding: 28px; border-radius: 24px; background: #fff; border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(15,17,21,.04); transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.fx-chapter--warm .fx-card { border-color: #efe3c3; }
.fx-card:hover { transform: translateY(-3px); box-shadow: 0 1px 2px rgba(15,17,21,.04), 0 24px 44px -30px rgba(15,17,21,.35); }
.fx-card__visual { display: flex; flex-direction: column; justify-content: center; min-height: 210px; margin-bottom: 22px; padding: 22px; border-radius: 18px; background: #f7f8fa; }
.fx-chapter--warm .fx-card__visual { background: #fffaf0; }
.fx-card__visual .logic, .fx-card__visual .brand-mock, .fx-card__visual .est__price { margin: 0; }
.fx-plan { align-self: flex-start; margin-bottom: 10px; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line); font-size: .74rem; font-weight: 700; color: var(--muted); }
.fx-card h3 { margin: 0 0 8px; font-size: 1.2rem; }
.fx-card p { margin: 0; color: var(--muted); line-height: 1.6; font-size: .96rem; }
.fx-card__ico { width: 48px; height: 48px; margin-bottom: 18px; border-radius: 14px; display: grid; place-items: center; background: var(--ink); color: var(--yellow); }
.fx-card__ico svg { width: 22px; height: 22px; }
.fx-more { font-weight: 700; color: var(--ink); text-decoration: none; border-bottom: 2px solid var(--yellow); }
.fx-note { display: block; margin-top: 8px; font-size: .78rem; opacity: .85; }
.fx-fin__tot { float: right; font-family: var(--display); font-size: 1.1rem; color: var(--ink); }
#finDemo .seg { margin: 12px 0 14px; }

.fx-map { position: relative; border-radius: 16px; overflow: hidden; background: #6f8f58; box-shadow: 0 24px 48px -30px rgba(122,86,0,.55); }
.fx-map__art, .fx-map__shape { display: block; width: 100%; height: 260px; }
.fx-map__shape { position: absolute; inset: 0; }
.fx-map__shape path { fill: rgba(255,194,26,.38); stroke: #ffc21a; stroke-width: 3; vector-effect: non-scaling-stroke; }
.fx-map__pin { position: absolute; top: 14px; left: 14px; padding: 7px 12px; border-radius: 999px; background: #fff; font-size: .78rem; font-weight: 600; color: var(--ink); box-shadow: 0 6px 16px -8px rgba(15,17,21,.5); }
.fx-map__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; background: #fff; }
.fx-map__bar small { display: block; font-size: .75rem; color: var(--muted); }
.fx-map__bar b { font-family: var(--display); font-size: 1.3rem; color: var(--ink); }
.fx-map__bar em { font-style: normal; font-size: .82rem; font-weight: 600; color: #1d5b39; background: #eefaf3; padding: 6px 10px; border-radius: 999px; }

@media (max-width: 960px) {
  .fx-main { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 24px; }
  .fx-main--flip .fx-main__visual { order: 0; }
  .fx-grid, .fx-grid--3 { grid-template-columns: minmax(0, 1fr); }
  .fx-chapter { padding: 64px 0; }
}
@media (max-width: 560px) {
  .fx-nav { top: 76px; }
  .fx-nav a { padding: 0 12px 0 6px; font-size: .84rem; gap: 6px; }
  .fx-head { gap: 14px; } .fx-head__no { width: 44px; height: 44px; font-size: 1.2rem; border-radius: 12px; }
  .fx-main__visual { padding: 16px; }
}

/* ===== Functies v2: rustiger, minder kaders ===== */
.fx-chapter { padding: 120px 0; }
.fx-chapter--warm { background: #fafaf8 !important; border-color: #efefeb !important; }
.fx-chapter + .fx-chapter { border-top: 1px solid #efefeb; }

/* Kop: groot dun cijfer i.p.v. zwart blok */
.fx-head { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 0 32px; align-items: start; margin-bottom: 64px; }
.fx-head__no { width: auto; height: auto; border-radius: 0; background: none; color: transparent; -webkit-text-stroke: 1.5px #d9d3c2; font-size: 5.5rem; line-height: .9; font-weight: 800; letter-spacing: -.05em; }
.fx-head__no::before { content: "0"; }
.fx-head .hw-label { color: #7a5600; }
.fx-head .hw-label::after { display: none; }
.fx-head h2 { font-size: clamp(2rem, 3.6vw, 2.9rem); letter-spacing: -.025em; max-width: 18ch; }
.fx-head p:not(.hw-label) { max-width: 52ch; }

/* Hoofdfunctie: geen kaart meer, tekst en beeld op de achtergrond */
.fx-main { padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; border-radius: 0; gap: 72px; }
.fx-main__visual { padding: 36px; border-radius: 24px; background: #f3f4f6; border: 1px solid #ebecef; }
.fx-chapter--warm .fx-main__visual { background: #fff; border-color: #ecebe6; }
.fx-main__visual .how2__win, .fx-main__visual .lead-card, .fx-map { box-shadow: 0 1px 2px rgba(15,17,21,.05), 0 24px 48px -32px rgba(15,17,21,.35) !important; }
.fx-tag { padding: 0; background: none; border-radius: 0; color: #7a5600; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; gap: 8px; }
.fx-main__text h3 { margin-top: 14px; font-size: clamp(1.6rem, 2.6vw, 2.1rem); letter-spacing: -.02em; }
.fx-ticks { margin-top: 24px; gap: 12px; }
.fx-ticks li { font-size: 1rem; }
.fx-ticks svg { background: none; padding: 0; width: 18px; height: 18px; color: #b07d00; }

/* Kleinere functies: geen kaders, gescheiden door lucht en een lijn */
.fx-grid { margin-top: 88px; gap: 56px; padding-top: 56px; border-top: 1px solid #ebebe7; }
.fx-card, .fx-chapter--warm .fx-card { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none !important; }
.fx-card:hover { transform: none; }
.fx-card__visual { min-height: 220px; margin-bottom: 26px; padding: 26px; border-radius: 20px; background: #f3f4f6; border: 1px solid #ebecef; }
.fx-chapter--warm .fx-card__visual { background: #fff; border-color: #ecebe6; }
.fx-plan { padding: 0; border: 0; border-radius: 0; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: #9aa0a8; }
.fx-card h3 { font-size: 1.3rem; letter-spacing: -.01em; margin-bottom: 10px; }
.fx-card__ico { width: 40px; height: 40px; border-radius: 12px; background: #f3f4f6; color: var(--ink); border: 1px solid #ebecef; margin-bottom: 20px; }
.fx-card__ico svg { width: 19px; height: 19px; }

/* Navigatie iets lichter */
.fx-nav a.is-on { background: #fff3c4; color: var(--ink); }
.fx-nav a.is-on b { background: var(--ink); color: #fff; }

@media (max-width: 960px) {
  .fx-chapter { padding: 80px 0; }
  .fx-head { grid-template-columns: minmax(0, 1fr); gap: 8px; margin-bottom: 40px; }
  .fx-head__no { font-size: 3.6rem; }
  .fx-main { gap: 32px; }
  .fx-grid { margin-top: 56px; padding-top: 40px; gap: 48px; }
}
@media (max-width: 560px) { .fx-main__visual { padding: 18px; } .fx-card__visual { padding: 18px; min-height: 0; } }
.fx-head__no { display: block !important; white-space: nowrap; }

/* ===== Functies v3: vloeiende overgangen en merkkleuren ===== */
:root { --warm-0: #fffdf8; --warm-1: #fff8e6; --warm-2: #fff3cf; --warm-line: #f1e8cf; --warm-panel: #fbf7ec; }

/* Hero loopt naadloos door in hoofdstuk 1 */
.fx-hero { background: linear-gradient(180deg, var(--warm-1) 0%, var(--warm-0) 100%) !important; }
#bouwen { background: linear-gradient(180deg, var(--warm-0) 0%, #fff 420px) !important; }

/* Geen harde lijnen meer tussen hoofdstukken */
.fx-chapter, .fx-chapter + .fx-chapter { border: 0 !important; }

/* Hoofdstuk 2: warme band die zacht in- en uitvloeit */
.fx-chapter--warm { background: linear-gradient(180deg, #fff 0%, var(--warm-1) 180px, var(--warm-1) calc(100% - 180px), #fff 100%) !important; }

/* Beeldvlakken in warme tinten i.p.v. koud grijs */
.fx-main__visual, .fx-card__visual { background: var(--warm-panel) !important; border-color: var(--warm-line) !important; }
.fx-chapter--warm .fx-main__visual, .fx-chapter--warm .fx-card__visual { background: #fff !important; border-color: var(--warm-line) !important; }
.fx-card__ico { background: var(--warm-2) !important; border-color: var(--warm-line) !important; color: #7a5600 !important; }
.fx-grid { border-top-color: var(--warm-line) !important; }
.fx-head__no { -webkit-text-stroke-color: #e6d49a !important; }

/* Afsluiter: geel blok, zodat het loskomt van de donkere footer */
.hw-end { padding: 40px 0 120px; background: linear-gradient(180deg, #fff 0%, var(--warm-0) 100%); }
.hw-end__box { position: relative; overflow: hidden; background: var(--yellow) !important; color: var(--ink) !important; box-shadow: 0 30px 60px -36px rgba(154,109,0,.6) !important; }
.hw-end__box::after { content: ""; position: absolute; right: -60px; bottom: -80px; width: 280px; height: 280px; background: url("assets/beavr-head.png") center / contain no-repeat; opacity: .12; transform: rotate(-12deg); pointer-events: none; }
.hw-end__box > * { position: relative; z-index: 1; }
.hw-end__box h2 { color: var(--ink) !important; }
.hw-end__box p { color: rgba(15,17,21,.72) !important; }
.hw-end__box .btn--primary { background: var(--ink) !important; color: #fff !important; border-color: var(--ink) !important; box-shadow: 0 10px 24px -12px rgba(15,17,21,.6); }
.hw-end__box .btn--primary:hover { background: #22262e !important; }
.hw-link--light { color: var(--ink) !important; border-bottom-color: var(--ink) !important; }

/* ===== Functies v4: zelfde stijl als "Hoe het werkt" ===== */
.fx-part { padding: 40px 0 72px; background: #fff; scroll-margin-top: 80px; }
.fx-part:first-of-type { padding-top: 64px; }
.fx-part .hw-panel { padding: 64px 56px; }
.fx-part .zz__row { margin-top: 8px; }
.fx-part .zz__visual { display: flex; justify-content: center; }
.fx-part .zz__visual > * { width: 100%; max-width: 480px; }
.fx-tag2 { display: inline-block; margin-bottom: 12px; font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #7a5600; }
.fx-part .zz__text h3 { font-size: clamp(1.5rem, 2.5vw, 1.9rem); }
.fx-part .fx-ticks { margin-top: 22px; }
.fx-cards { margin-top: 56px; }
.fx-shot { height: 250px; }
.fx-shot > * { width: 100%; }
.fx-shot .logic, .fx-shot .brand-mock, .fx-shot .est__price { margin: 0; background: #fff; border-radius: 16px; padding: 18px; box-shadow: 0 20px 40px -26px rgba(122,86,0,.55); text-align: left; }
.fx-plan2 { margin: 0 0 8px !important; font-size: .72rem !important; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #7a5600 !important; }
.fx-ico-shot { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 26px 18px; border-radius: 16px; background: #fff; box-shadow: 0 20px 40px -26px rgba(122,86,0,.55); }
.fx-ico-shot svg { width: 44px; height: 44px; padding: 10px; border-radius: 14px; background: var(--ink); color: var(--yellow); }
.fx-ico-shot span { font-weight: 600; font-size: .92rem; color: var(--ink); }
.fx-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px; border-radius: 16px; background: #fff; box-shadow: 0 20px 40px -26px rgba(122,86,0,.55); }
.fx-photos span { position: relative; aspect-ratio: 4 / 5; border-radius: 12px; overflow: hidden; }
.fx-photos img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fx-photos span::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(15,17,21,.75)); }
.fx-photos b { position: absolute; z-index: 1; left: 0; right: 0; bottom: 10px; text-align: center; color: #fff; font-size: .8rem; }
.fx-photos .is-sel { box-shadow: 0 0 0 3px var(--yellow); }
.fx-fin { padding: 18px; border-radius: 16px; background: #fff; box-shadow: 0 20px 40px -26px rgba(122,86,0,.55); text-align: left; }
.fx-fin .seg { margin: 10px 0 12px; }
.fx-fin .calc__label { margin: 0; }
@media (max-width: 900px) { .fx-part .hw-panel { padding: 40px 20px 44px; } .fx-cards { margin-top: 44px; } }
.fx-shot { height: 290px; }

/* Symmetrische regels: gelijk verdeelde lijnen, geen losse woorden */
.hw-hero h1, .hw-hero__sub, .hw-panel__head h2, .hw-panel__head p, .hw-live__head h2,
.zz__text h3, .hw-card h3, .hw-card p, .hw-end__box h2, .hw-end__box p, .fx-head h2 { text-wrap: balance !important; }
.zz__text p, .fx-ticks li { text-wrap: pretty; }
.fx-cards .hw-card p { max-width: 32ch; }
.fx-cards .hw-card p { max-width: 34ch; }
.zz__text p { text-wrap: balance !important; }
.fx-hero h1 { max-width: none; }

/* Kaartteksten over de volle breedte (2 gelijke regels) */
.fx-cards .hw-card p { max-width: none !important; }

/* ===== Functies: design-afwerking ===== */
.fx-part .hw-panel { position: relative; overflow: hidden; isolation: isolate; box-shadow: 0 1px 2px rgba(122,86,0,.05), 0 40px 80px -60px rgba(122,86,0,.45); }
.fx-part .hw-panel::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(154,109,0,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(154,109,0,.07) 1px, transparent 1px); background-size: 44px 44px; -webkit-mask-image: radial-gradient(ellipse 60% 45% at 50% 0%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse 60% 45% at 50% 0%, #000 20%, transparent 75%); }
.fx-part .hw-panel__head .hw-label { padding: 6px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--warm-line, #f1e8cf); }
.fx-part .zz__visual > * { box-shadow: 0 1px 2px rgba(15,17,21,.05), 0 30px 60px -36px rgba(122,86,0,.55) !important; }

.fx-cards .hw-card { position: relative; padding: 16px 16px 28px; border-radius: 26px; transition: transform .3s var(--ease), background .3s, box-shadow .3s; }
.fx-cards .hw-card::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 48px; height: 3px; border-radius: 3px; background: var(--yellow); transform: translateX(-50%) scaleX(0); transition: transform .3s var(--ease); }
.fx-cards .hw-card:hover { transform: translateY(-4px); background: #fff; box-shadow: 0 1px 2px rgba(15,17,21,.04), 0 24px 48px -32px rgba(15,17,21,.3); }
.fx-cards .hw-card:hover::after { transform: translateX(-50%) scaleX(1); }
.fx-cards .hw-card__shot { margin-bottom: 22px; border: 1px solid #f3e2a8; }
.fx-cards .hw-card h3 { font-size: 1.22rem; letter-spacing: -.01em; }

/* Functies: extra uitleg in het paneel + 4 kolommen */
.fx-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; margin-top: 56px; padding-top: 40px; border-top: 1px solid #efe1b8; }
.fx-duo__item { display: flex; gap: 16px; align-items: flex-start; }
.fx-duo__ico { flex: none; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: #fff; border: 1px solid #f0e2bb; color: #7a5600; box-shadow: 0 6px 16px -10px rgba(122,86,0,.5); }
.fx-duo__ico svg { width: 20px; height: 20px; }
.fx-duo h4 { margin: 2px 0 6px; font-size: 1.08rem; font-family: var(--display); color: var(--ink); }
.fx-duo p { margin: 0; color: var(--muted); font-size: .96rem; line-height: 1.6; text-wrap: balance; }
.fx-cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.fx-cards--4 .fx-shot { height: 200px; }
.fx-cards--4 .hw-card h3 { font-size: 1.1rem; }
.fx-cards--4 .hw-card p { font-size: .92rem; }
.fx-shot .lab, .fx-shot .mock-serp { margin: 0; padding: 16px; border-radius: 16px; background: #fff; box-shadow: 0 20px 40px -26px rgba(122,86,0,.55); text-align: left; }
.fx-shot .lab__row { font-size: .82rem; }
.fx-shot .mock-serp { font-size: .82rem; }
.fx-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 22px 16px; border-radius: 16px; background: #fff; box-shadow: 0 20px 40px -26px rgba(122,86,0,.55); }
.fx-chips span { padding: 8px 12px; border-radius: 999px; border: 1.5px solid var(--line); font-size: .82rem; font-weight: 600; color: var(--muted); }
.fx-chips span.is-on { border-color: var(--yellow); background: #fff8e1; color: var(--ink); }
.fx-chips em { flex-basis: 100%; margin-top: 6px; text-align: center; font-style: normal; font-size: .8rem; font-weight: 600; color: #1d5b39; }
@media (max-width: 1100px) { .fx-cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .fx-duo { grid-template-columns: minmax(0, 1fr); gap: 24px; margin-top: 36px; padding-top: 28px; } }
@media (max-width: 560px) { .fx-cards--4 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .fx-nav a:not(.is-on) span { display: none; } .fx-nav a:not(.is-on) { padding: 0 6px; } }

/* ===== Menselijkere labels: geen spatieerde hoofdletters, geen lijntjes of pillen ===== */
.hw-label, .kicker, .pricing__label, .fx-tag2, .intro4__pill, .fx-head .hw-label,
.fx-part .hw-panel__head .hw-label {
  display: inline-block !important; padding: 0 !important; background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  text-transform: none !important; letter-spacing: 0 !important;
  font-family: var(--body) !important; font-size: 1rem !important; font-weight: 600 !important; color: #7a5600 !important;
}
.hw-label::before, .hw-label::after, .kicker::before, .kicker::after, .pricing__label::before, .pricing__label::after, .intro4__pill::before, .intro4__pill::after { display: none !important; content: none !important; }
.hw-label { margin-bottom: 10px !important; }
.intro4__pill { color: var(--ink) !important; font-size: 1.05rem !important; }
.fx-plan2, .fx-plan { text-transform: none !important; letter-spacing: 0 !important; font-size: .85rem !important; font-weight: 500 !important; color: #626873 !important; padding: 0 !important; border: 0 !important; }
.fx-tag2 { margin-bottom: 8px !important; font-size: .95rem !important; }

/* Geen rastertjes/gloed meer op de achtergrond */
.hw-hero::before, .fx-part .hw-panel::before, .pricing::before, .how::before { display: none !important; }
.how::after, .how .container::before { opacity: .5; }
.em-cat, .em-form label, .s-kicker, .demo__badge, .case__tag, .case__kicker, .try__eyebrow, .fx-tag, .fx-plan {
  text-transform: none !important; letter-spacing: 0 !important;
}
.em-cat { font-weight: 600 !important; font-size: .92rem !important; color: #7a5600 !important; }
.em-form label { font-size: .9rem !important; font-weight: 600; }
.s-kicker { font-size: .82rem !important; font-weight: 600 !important; }

/* ===== Afsluitende CTA boven de footer (op elke pagina) ===== */
.fcta { position: relative; padding: 40px 0 0; background: linear-gradient(180deg, transparent 0 55%, var(--ink) 55% 100%); }
.fcta + .footer { border-top: 0; padding-top: 72px; }
.fcta__box { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 32px; min-height: 300px; padding: 56px 64px; border-radius: 32px; background: var(--yellow); box-shadow: 0 40px 80px -40px rgba(0,0,0,.55); isolation: isolate; }
.fcta__box::before { content: ""; position: absolute; z-index: -1; right: -120px; top: -160px; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.45) 0%, rgba(255,255,255,0) 65%); }
.fcta__text { position: relative; max-width: 620px; }
.fcta h2 { margin: 0; font-size: clamp(1.9rem, 3.6vw, 2.9rem); line-height: 1.08; letter-spacing: -.025em; color: var(--ink); text-wrap: balance; }
.fcta p { margin: 14px 0 0; font-size: 1.12rem; line-height: 1.55; color: rgba(15,17,21,.75); text-wrap: balance; }
.fcta__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 24px; margin-top: 28px; }
.fcta .btn--dark { background: var(--ink) !important; color: #fff !important; border-color: var(--ink) !important; box-shadow: 0 12px 26px -12px rgba(15,17,21,.6); }
.fcta .btn--dark:hover { background: #22262e !important; }
.fcta .btn svg { width: 18px; height: 18px; }
.fcta__link { font-weight: 700; color: var(--ink); text-decoration: none; border-bottom: 2px solid var(--ink); padding-bottom: 2px; }
.fcta__link:hover { border-bottom-color: transparent; }
.fcta__meta { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 22px 0 0; padding: 0; font-size: .92rem; font-weight: 500; color: rgba(15,17,21,.8); }
.fcta__meta li { display: inline-flex; align-items: center; gap: 6px; }
.fcta__meta svg { width: 16px; height: 16px; stroke-width: 2.6; }
.fcta__mascot { position: absolute; right: 48px; bottom: -40px; width: auto; height: 340px; pointer-events: none; filter: drop-shadow(0 20px 30px rgba(122,86,0,.35)); }
@media (max-width: 1100px) { .fcta__mascot { height: 280px; right: 16px; } .fcta__text { max-width: 560px; } }
@media (max-width: 860px) {
  .fcta__box { flex-direction: column; align-items: flex-start; padding: 36px 24px 200px; border-radius: 24px; }
  .fcta__mascot { height: 210px; right: 50%; transform: translateX(50%); bottom: -24px; }
}
.fcta__text { max-width: 720px; } .fcta__meta { gap: 8px 22px; }
@media (max-width: 1100px) { .fcta__text { max-width: 600px; } }
.fx-map__art { height: 300px !important; background: #2a2e36; }
.fx-map__roof { fill: rgba(255,194,26,.32); stroke: #ffc21a; stroke-width: 6; stroke-linejoin: round; }
.fx-map__art circle { fill: #fff; stroke: #0f1115; stroke-width: 3; }

/* ===== Pagina: Aanmelden ===== */
.su { padding: 140px 0 96px; background: linear-gradient(180deg, #fff8e4 0%, #fffdf8 55%, #fff 100%); }
.su__grid { max-width: 1160px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: start; }
.su__side h1 { margin: 0; font-size: clamp(2.3rem, 4.4vw, 3.5rem); line-height: 1.06; letter-spacing: -.03em; text-wrap: balance; }
.su__lead { margin: 18px 0 0; max-width: 46ch; font-size: 1.15rem; line-height: 1.6; color: var(--muted); text-wrap: balance; }
.su__ticks { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 12px; }
.su__ticks li { display: flex; align-items: center; gap: 12px; font-size: 1.02rem; font-weight: 500; color: var(--ink); }
.su__ticks svg { flex: none; width: 24px; height: 24px; padding: 5px; border-radius: 50%; background: var(--yellow); color: var(--ink); stroke-width: 3; }
.su__next { margin-top: 40px; padding-top: 32px; border-top: 1px solid #efe1b8; }
.su__next-title { margin: 0 0 16px; font-weight: 700; color: var(--ink); }
.su__next ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; position: relative; }
.su__next ol::before { content: ""; position: absolute; left: 15px; top: 18px; bottom: 18px; width: 2px; background: repeating-linear-gradient(180deg, #e7cf85 0 5px, transparent 5px 10px); }
.su__next li { position: relative; display: flex; gap: 16px; align-items: flex-start; }
.su__next b { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 2px solid var(--yellow); font-size: .85rem; color: var(--ink); }
.su__next strong { display: block; color: var(--ink); font-size: .98rem; }
.su__next span { font-size: .92rem; color: var(--muted); line-height: 1.5; }
.su__help { display: flex; align-items: center; gap: 18px; margin-top: 36px; padding: 18px 20px; border-radius: 20px; background: #fff; border: 1px solid #f0e2bb; box-shadow: 0 16px 32px -26px rgba(122,86,0,.45); }
.su__help img { flex: none; width: 58px; height: auto; }
.su__help p { margin: 0; font-size: .92rem; line-height: 1.5; color: var(--muted); }
.su__help strong { display: block; color: var(--ink); font-size: .98rem; }
.su__help a { font-weight: 700; color: var(--ink); text-decoration: none; border-bottom: 2px solid var(--yellow); }

.su__card { position: sticky; top: 100px; padding: 36px; border-radius: 28px; background: #fff; border: 1px solid #efe7d2; box-shadow: 0 1px 2px rgba(15,17,21,.04), 0 40px 80px -50px rgba(122,86,0,.5); }
.su__card-head { margin-bottom: 22px; }
.su__card-head h2 { margin: 0; font-size: 1.5rem; letter-spacing: -.015em; }
.su__card-head p { margin: 4px 0 0; color: var(--muted); font-size: .95rem; }
.su__plan { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 22px; padding: 12px 16px; border-radius: 14px; background: #fff8e1; border: 1px solid #f3e2a8; }
.su__plan[hidden] { display: none; }
.su__plan small { display: block; font-size: .78rem; color: var(--muted); }
.su__plan b { color: var(--ink); }
.su__plan a { font-weight: 700; font-size: .88rem; color: var(--ink); text-decoration: none; border-bottom: 2px solid var(--yellow); }
.su__card .btn svg { width: 18px; height: 18px; }
.su__card .btn--block { margin-top: 6px; }
.su__safe { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 14px 0 0; font-size: .85rem; color: var(--muted); }
.su__safe svg { width: 15px; height: 15px; color: #177a41; }
.su__card .form-note { text-align: center; }
@media (max-width: 960px) {
  .su { padding-top: 120px; }
  .su__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .su__card { position: static; order: -1; padding: 24px; }
  .su__side { order: 0; }
}

/* ===== Pagina: Prijzen ===== */
.pr-hero { padding-bottom: 40px; }
.pr-hero .toggle { margin: 28px auto 0; background: #fff; border: 1px solid #f0e2bb; border-radius: 999px; padding: 5px; }
.pr-hero .toggle button { border-radius: 999px; height: 40px; padding: 0 18px; }
.pr-hero .toggle button.is-on { background: var(--ink); color: #fff; box-shadow: none; }
.pr-hero .toggle button.is-on em { color: var(--yellow); }
.pr-hero .toggle em { color: #177a41; }
.pr-plans { padding-top: 32px !important; background: linear-gradient(180deg, #fffdf8 0%, #fff 100%) !important; }
.pr-plans .plans--4 { margin-top: 0 !important; }

.pr-incl { padding-top: 24px; }
.pr-incl__panel { padding: 48px 48px 44px !important; }
.pr-incl__panel .hw-panel__head { margin-bottom: 32px; }
.pr-incl__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.pr-incl__list li { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 16px; background: #fff; border: 1px solid #f0e2bb; font-weight: 600; color: var(--ink); }
.pr-incl__list span { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--ink); color: var(--yellow); }
.pr-incl__list svg { width: 19px; height: 19px; }

.pr-roi__grid { max-width: 1060px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.pr-roi h2 { margin: 0; font-size: clamp(1.9rem, 3.4vw, 2.6rem); letter-spacing: -.02em; }
.pr-roi__lead { margin: 14px 0 22px; font-size: 1.08rem; line-height: 1.65; color: var(--muted); text-wrap: balance; }
.pr-roi__card { padding: 28px; border-radius: 24px; background: #fff; border: 1px solid #efe7d2; box-shadow: 0 30px 60px -44px rgba(122,86,0,.55); }
.pr-roi__row { display: flex; justify-content: space-between; gap: 12px; padding: 14px 0; border-bottom: 1px solid #f1f2f4; color: var(--muted); }
.pr-roi__row b { color: var(--ink); font-variant-numeric: tabular-nums; }
.pr-roi__total { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 16px; padding: 16px 18px; border-radius: 14px; background: var(--yellow); color: var(--ink); font-weight: 600; }
.pr-roi__total b { font-family: var(--display); font-size: 1.2rem; }
.pr-roi__note { margin: 12px 0 0; font-size: .8rem; color: var(--muted); }

.pr-compare { background: linear-gradient(180deg, #fff 0%, #fffaf0 100%); }
.pr-compare__sub { margin: 10px 0 0; color: var(--muted); }
.pr-compare .hw-live__head { margin-bottom: 36px; }
.pr-table { background: #fff; border-radius: 20px; overflow: hidden; box-shadow: 0 1px 2px rgba(15,17,21,.04), 0 30px 60px -46px rgba(122,86,0,.5); }
.pr-table thead th { position: sticky; top: 76px; z-index: 2; background: #fff; font-family: var(--display); font-size: 1.05rem; color: var(--ink); }
.pr-table thead th small { display: block; margin-top: 2px; font-family: var(--body); font-size: .8rem; font-weight: 500; color: var(--muted); }
.pr-table thead th.is-pro { background: var(--ink); color: #fff; }
.pr-table thead th.is-pro small { color: var(--yellow); }
.pr-table .pt-group th { padding: 22px 16px 8px; background: #fffaf0; font-size: .95rem; font-weight: 700; color: #7a5600; text-align: left; border-top: 1px solid #f3e6bf; }
.pr-table td.is-pro { background: #fffbeb; }
.pr-table td svg { color: #177a41; }

.pr-faq .faq__intro .hw-label { margin-bottom: 8px !important; }
@media (max-width: 900px) {
  .pr-incl__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pr-incl__panel { padding: 32px 20px !important; }
  .pr-roi__grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}
@media (max-width: 520px) { .pr-incl__list { grid-template-columns: minmax(0, 1fr); } }

/* ===== Pagina: FAQ ===== */
.fq-hero { padding-bottom: 48px; }
.fq-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 30px; }
.fq-nav a { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px; border-radius: 999px; background: #fff; border: 1px solid #f0e2bb; color: var(--ink); font-weight: 600; font-size: .92rem; text-decoration: none; transition: border-color .2s, box-shadow .2s, transform .2s; }
.fq-nav a svg { width: 16px; height: 16px; color: #7a5600; }
.fq-nav a:hover { border-color: var(--yellow); box-shadow: 0 8px 20px -14px rgba(122,86,0,.6); transform: translateY(-1px); }
.fq-wrap { max-width: 1160px; margin: 0 auto; padding: 24px 0 72px; }
.fq-topic { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 56px; padding: 56px 0; border-top: 1px solid #efe7d2; scroll-margin-top: 90px; }
.fq-topic:first-child { border-top: 0; }
.fq-topic__head { position: sticky; top: 110px; align-self: start; }
.fq-topic__ico { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 18px; border-radius: 14px; background: var(--yellow); color: var(--ink); }
.fq-topic__ico svg { width: 22px; height: 22px; }
.fq-topic__head h2 { margin: 0 0 10px; font-size: clamp(1.6rem, 2.6vw, 2rem); letter-spacing: -.02em; }
.fq-topic__head p { margin: 0; color: var(--muted); line-height: 1.6; text-wrap: balance; }
.fq-topic__count { display: inline-block; margin-top: 16px; font-size: .88rem; font-weight: 600; color: #7a5600; }
.fq-list { display: grid; gap: 12px; }
.fq-list details { border-radius: 18px; background: #fff; border: 1px solid #efe7d2; transition: border-color .2s, box-shadow .2s; }
.fq-list details[open] { border-color: #f0d98f; box-shadow: 0 20px 40px -32px rgba(122,86,0,.5); }
.fq-list summary { position: relative; list-style: none; cursor: pointer; padding: 20px 60px 20px 22px; font-weight: 600; font-size: 1.04rem; color: var(--ink); line-height: 1.45; }
.fq-list summary::-webkit-details-marker { display: none; }
.fq-list summary::after { content: ""; position: absolute; right: 20px; top: 50%; width: 28px; height: 28px; margin-top: -14px; border-radius: 50%; background: #fff3c4 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f1115' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center / 14px no-repeat; transition: transform .25s var(--ease), background-color .2s; }
.fq-list details[open] summary::after { transform: rotate(45deg); background-color: var(--yellow); }
.fq-list summary:hover { color: #7a5600; }
.fq-a { padding: 0 22px 20px; }
.fq-a p { margin: 0 0 12px; color: var(--muted); line-height: 1.7; max-width: 64ch; }
.fq-a p:last-child { margin-bottom: 0; }
.fq-a a { color: var(--ink); font-weight: 600; border-bottom: 2px solid var(--yellow); text-decoration: none; }

.fq-still { display: flex; align-items: center; gap: 28px; margin-top: 24px; padding: 32px 36px; border-radius: 28px; background: #fff8e4; border: 1px solid #f0e2bb; }
.fq-still img { flex: none; width: 76px; height: auto; }
.fq-still h2 { margin: 0 0 6px; font-size: 1.5rem; }
.fq-still p { margin: 0; color: var(--muted); max-width: 52ch; text-wrap: balance; }
.fq-still__cta { margin-left: auto; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.fq-still .btn--dark { background: var(--ink) !important; color: #fff !important; }
@media (max-width: 900px) {
  .fq-topic { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 40px 0; }
  .fq-topic__head { position: static; }
  .fq-still { flex-direction: column; align-items: flex-start; padding: 28px 24px; }
  .fq-still__cta { margin-left: 0; }
}
.fq-hero .hw-hero__in { max-width: 1040px; } .fq-hero h1 { max-width: 820px; margin-left: auto; margin-right: auto; } .fq-nav a { padding: 0 14px; }

/* ===== Pagina: Waarom een prijscalculator ===== */
.wy-hero h1 { max-width: none; }
.wy-what__grid { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.wy-what h2, .wy-demo h2 { margin: 0; font-size: clamp(1.8rem, 3.2vw, 2.5rem); letter-spacing: -.02em; line-height: 1.12; text-wrap: balance; }
.wy-lead { margin: 14px 0 0; font-size: 1.08rem; line-height: 1.65; color: var(--muted); text-wrap: balance; }
.wy-what__visual { padding: 32px; border-radius: 26px; background: linear-gradient(145deg, #fff6d6, #fde8a8); }
.wy-what__visual .how2__win { max-width: 420px; margin: 0 auto; box-shadow: 0 30px 60px -34px rgba(122,86,0,.55); }

.wy-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.wy-duo__card { padding: 30px; border-radius: 22px; background: #fff; border: 1px solid #f0e2bb; }
.wy-duo__card h3 { margin: 18px 0 10px; font-size: 1.3rem; }
.wy-duo__card p { margin: 0 0 10px; color: var(--muted); line-height: 1.65; text-wrap: pretty; }
.wy-duo__card p:last-child { margin-bottom: 0; }

.wy-cards { gap: 24px; }
.wy-card { padding: 30px 28px; border-radius: 22px; background: #fff; border: 1px solid #efe7d2; text-align: left; transition: transform .25s var(--ease), box-shadow .25s; }
.wy-card:hover { transform: translateY(-3px); box-shadow: 0 24px 48px -34px rgba(15,17,21,.35); }
.wy-card__quote { margin: 0 0 12px; font-family: var(--display); font-weight: 700; font-size: 1.3rem; color: var(--ink); }
.wy-card p { margin: 0; color: var(--muted); line-height: 1.65; max-width: none; text-wrap: pretty; }
.wy-card h3 { margin: 0 0 10px; font-size: 1.22rem; }
.wy-card .fx-card__ico { margin-bottom: 18px; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--ink); color: var(--yellow); }
.wy-myths { background: #fff; }
.wy-why { background: linear-gradient(180deg, #fff 0%, #fffaf0 100%); }

.wy-demo__box { max-width: 1160px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; padding: 44px 48px; border-radius: 28px; background: var(--ink); color: #fff; }
.wy-demo__box h2 { color: #fff; }
.wy-demo__box p { margin: 10px 0 0; color: #a7abb3; }
.wy-demo__box .hw-label { color: var(--yellow) !important; }
.wy-demo__box .btn svg { width: 18px; height: 18px; }

.wy-tips__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.wy-tip { padding: 28px; border-radius: 22px; background: #fff; border: 1px solid #f0e2bb; }
.wy-tip__no { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--yellow); font-family: var(--display); font-weight: 800; color: var(--ink); }
.wy-tip h3 { margin: 16px 0 14px; font-size: 1.22rem; }
.wy-tip ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.wy-tip li { display: flex; gap: 10px; align-items: flex-start; font-size: .95rem; line-height: 1.5; color: var(--muted); }
.wy-tip li svg { flex: none; width: 18px; height: 18px; margin-top: 2px; color: #b07d00; stroke-width: 2.6; }
@media (max-width: 960px) {
  .wy-what__grid, .wy-duo, .wy-tips__grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .wy-demo__box { padding: 32px 24px; }
}
.wy-hero .hw-hero__in { max-width: 1040px; } .wy-hero h1 { font-size: clamp(2.1rem, 4.2vw, 3.3rem); } .wy-hero .hw-hero__sub { max-width: 660px; }
/* Menu met 5 items past ook op laptops: pas onder 960px het hamburgermenu */
@media (min-width: 961px) and (max-width: 1280px) {
  .nav__inner { grid-template-columns: auto 1fr auto !important; }
  .nav__menu { display: flex !important; }
  .nav__actions .nav__login, .nav__actions .btn { display: inline-flex !important; }
  .nav__burger { display: none !important; }
  .mnav { display: none !important; }
}
.fq-wrap { padding-left: var(--gutter, 24px) !important; padding-right: var(--gutter, 24px) !important; }
.wy-intro { max-width: 640px; margin: 14px auto 0; } .wy-intro p { margin: 6px 0 0; font-size: 1.08rem; line-height: 1.6; color: var(--muted); text-wrap: balance; } .wy-intro b { color: var(--ink); }
.wy-lead b { color: var(--ink); }
.wy-hero h1 { font-size: clamp(2rem, 3.7vw, 2.95rem) !important; text-wrap: nowrap; } @media (max-width: 1000px) { .wy-hero h1 { text-wrap: balance; } }

/* ===== Homepage: quote van de oprichter ===== */
.founder { padding: 96px 0; background: #fff; }
.founder__box { position: relative; max-width: 900px; margin: 0 auto; text-align: center; }
.founder__box::before { content: "\201C"; position: absolute; left: 50%; top: -40px; transform: translateX(-50%); font-family: var(--display); font-weight: 800; font-size: 11rem; line-height: 1; color: #fff1c2; z-index: 0; pointer-events: none; }
.founder__box > * { position: relative; z-index: 1; }
.founder__swap { display: inline-flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: center; margin-bottom: 34px; }
.founder__old { position: relative; padding: 10px 18px; border-radius: 12px; background: #f1f2f5; color: #626873; font-weight: 600; font-size: .95rem; }
.founder__old::after { content: ""; position: absolute; left: 10px; right: 10px; top: 50%; height: 3px; border-radius: 3px; background: #e0463a; transform: rotate(-4deg); }
.founder__arrow { width: 22px; height: 22px; color: #b07d00; }
.founder__new { padding: 10px 18px; border-radius: 12px; background: var(--yellow); color: var(--ink); font-weight: 700; font-size: .95rem; box-shadow: 0 10px 22px -12px rgba(154,109,0,.7); }
.founder__quote { margin: 0; }
.founder__quote p:first-child { margin: 0; font-family: var(--display); font-weight: 800; font-size: clamp(2rem, 4.2vw, 3.3rem); line-height: 1.1; letter-spacing: -.025em; color: var(--ink); text-wrap: balance; }
.founder__more { max-width: 660px; margin: 22px auto 0 !important; font-size: 1.15rem; line-height: 1.65; color: var(--muted); text-wrap: balance; }
.founder__by { display: inline-flex; align-items: center; gap: 14px; margin-top: 30px; text-align: left; }
.founder__avatar { flex: none; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--yellow); font-weight: 800; font-size: 1rem; box-shadow: 0 0 0 4px #fff, 0 0 0 5px #f0e2bb; }
.founder__by b { display: block; color: var(--ink); font-size: 1.02rem; }
.founder__by small { color: var(--muted); font-size: .9rem; }
@media (max-width: 560px) { .founder { padding: 72px 0; } .founder__box::before { font-size: 8rem; top: -24px; } }

/* ===== Homepage: één vast ritme van wit en warme banden ===== */
:root { --band: #fff8e6; --band-fade: 170px; --sec-pad: 112px; }
/* geen harde lijnen tussen secties */
#waarom, .statband, #oprichter, #hoe, #voorbeelden, #waarom-beavr, #prijzen, #roi { border-top: 0 !important; border-bottom: 0 !important; }
/* witte secties */
#waarom, .statband, #hoe, #waarom-beavr, #roi { background: #fff !important; }
#hoe::before, #hoe::after, #hoe .container::before { display: none !important; }
/* warme banden die zacht in- en uitvloeien */
#oprichter, #voorbeelden, #prijzen {
  background: linear-gradient(180deg, #fff 0, var(--band) var(--band-fade), var(--band) calc(100% - var(--band-fade)), #fff 100%) !important;
}
#voorbeelden::before, #voorbeelden::after { display: none !important; }
/* gelijke witruimte */
#oprichter, #hoe, #voorbeelden, #waarom-beavr, #prijzen, #roi { padding-top: var(--sec-pad) !important; padding-bottom: var(--sec-pad) !important; }
#waarom { padding-top: var(--sec-pad) !important; padding-bottom: 56px !important; }
.statband { padding-top: 0 !important; padding-bottom: var(--sec-pad) !important; }
/* kaarten in warme banden iets duidelijker afgelijnd */
#oprichter .founder__old { background: #fff; border: 1px solid #efe7d2; }
#prijzen .plan { border-color: #efe3c3; }
@media (max-width: 760px) { :root { --sec-pad: 80px; --band-fade: 100px; } }
.founder__more + .founder__more { margin-top: 12px !important; color: var(--ink); font-weight: 600; }

/* Quote van de oprichter: resultaten en live link */
.founder__more + .founder__more { margin-top: 14px !important; color: var(--muted) !important; font-weight: 400 !important; }
.founder__punch { margin-top: 18px !important; color: var(--ink) !important; font-weight: 700 !important; font-size: 1.2rem !important; }
.founder__results { list-style: none; margin: 40px auto 0; padding: 0; max-width: 960px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; text-align: left; }
.founder__results li { display: flex; flex-direction: column; gap: 6px; padding: 22px; border-radius: 20px; background: #fff; border: 1px solid #efe3c3; box-shadow: 0 18px 36px -30px rgba(122,86,0,.5); }
.founder__ico { width: 40px; height: 40px; margin-bottom: 8px; border-radius: 12px; display: grid; place-items: center; background: var(--ink); color: var(--yellow); }
.founder__ico svg { width: 19px; height: 19px; }
.founder__results b { color: var(--ink); font-size: 1.05rem; }
.founder__results small { color: var(--muted); font-size: .92rem; line-height: 1.5; text-wrap: balance; }
.founder__live { display: inline-flex; align-items: center; gap: 8px; margin-top: 28px; font-weight: 700; color: var(--ink); text-decoration: none; border-bottom: 2px solid var(--yellow); padding-bottom: 2px; }
.founder__live svg { width: 16px; height: 16px; transition: transform .2s var(--ease); }
.founder__live:hover svg { transform: translateX(4px); }
@media (max-width: 760px) { .founder__results { grid-template-columns: minmax(0, 1fr); } }

/* ===== Pagina: Over Beavr ===== */
.ab-story { background: linear-gradient(180deg, #fff 0, #fff8e6 140px, #fff8e6 calc(100% - 140px), #fff 100%) !important; padding: 112px 0 !important; }
.ab-mission { padding: 112px 0; }
.ab-mission__grid { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: start; }
.ab-mission h2 { margin: 0; font-size: clamp(1.9rem, 3.4vw, 2.6rem); letter-spacing: -.02em; line-height: 1.12; text-wrap: balance; }
.ab-lead { margin: 0 0 16px; font-size: 1.1rem; line-height: 1.7; color: var(--muted); text-wrap: pretty; }
.ab-p { margin: 0; color: var(--muted); line-height: 1.6; font-size: .96rem; }
.ab-fix { display: flex; align-items: flex-start; gap: 16px; margin-top: 28px; padding: 22px 24px; border-radius: 20px; background: #fff; border: 1px solid #f0e2bb; }
.ab-fix p { margin: 0; color: var(--muted); line-height: 1.65; }
.ab-fix strong { color: var(--ink); }
.ab-vision { padding: 112px 0; }
.ab-vision h2 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); letter-spacing: -.02em; text-wrap: balance; }
.ab-vision__sub { max-width: 640px; margin: 16px auto 0; font-size: 1.1rem; line-height: 1.65; color: var(--muted); text-wrap: balance; }
@media (max-width: 900px) { .ab-mission__grid { grid-template-columns: minmax(0, 1fr); gap: 20px; } }
.ab-story .hw-live__head { margin-bottom: 40px; }
.ab-story .founder__quote p:first-child { font-size: clamp(1.8rem, 3.6vw, 2.8rem); }
.ab-hero .hw-hero__in { max-width: 1040px; } .ab-hero h1 { font-size: clamp(2rem, 3.8vw, 3.1rem) !important; text-wrap: nowrap; } .ab-hero .hw-hero__sub { max-width: 620px; }
@media (max-width: 1000px) { .ab-hero h1 { text-wrap: balance; } }

/* ===== Over Beavr + Waarom: vast ritme en betere opbouw ===== */
.ab-hero, .wy-hero { padding: 150px 0 88px !important; background: linear-gradient(180deg, #fff8e4 0%, #fff 100%) !important; }
.ab-mission, .ab-why, .ab-vision, .ab-story,
.wy-what, .wy-psych, .wy-myths, .wy-demo, .wy-why, .wy-tips { padding: 112px 0 !important; border: 0 !important; }
.ab-mission, .ab-why, .ab-vision, .wy-what, .wy-psych, .wy-demo, .wy-tips { background: #fff !important; }
.ab-story, .wy-myths, .wy-why { background: linear-gradient(180deg, #fff 0, #fff8e6 170px, #fff8e6 calc(100% - 170px), #fff 100%) !important; }
@media (max-width: 760px) { .ab-mission, .ab-why, .ab-vision, .ab-story, .wy-what, .wy-psych, .wy-myths, .wy-demo, .wy-why, .wy-tips { padding: 80px 0 !important; } }

/* Missie: statement + drie pijlers */
.ab-mission__head { max-width: 760px; margin: 0 auto 48px; text-align: center; }
.ab-mission__head h2 { margin: 0; font-size: clamp(2rem, 3.8vw, 3rem); letter-spacing: -.025em; line-height: 1.1; text-wrap: balance; }
.ab-mission__lead { margin: 16px auto 0; max-width: 620px; font-size: 1.12rem; line-height: 1.65; color: var(--muted); text-wrap: balance; }
.ab-pillars { max-width: 1060px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.ab-pillar { padding: 30px 28px; border-radius: 22px; background: #fffaf0; border: 1px solid #f0e2bb; text-align: center; transition: transform .25s var(--ease), box-shadow .25s; }
.ab-pillar:hover { transform: translateY(-3px); box-shadow: 0 24px 44px -32px rgba(122,86,0,.5); }
.ab-pillar__ico { width: 52px; height: 52px; margin: 0 auto 18px; border-radius: 16px; display: grid; place-items: center; background: var(--yellow); color: var(--ink); }
.ab-pillar__ico svg { width: 24px; height: 24px; }
.ab-pillar h3 { margin: 0 0 8px; font-size: 1.3rem; }
.ab-pillar p { margin: 0; color: var(--muted); line-height: 1.6; text-wrap: balance; }

/* Visie: sterk slotblok */
.ab-vision__box { position: relative; overflow: hidden; max-width: 1060px; margin: 0 auto; padding: 64px 56px; border-radius: 32px; text-align: center; background: #fff; border: 1px solid #efe3c3; box-shadow: 0 40px 80px -56px rgba(122,86,0,.5); isolation: isolate; }
.ab-vision__box::after { content: ""; position: absolute; z-index: -1; right: -60px; bottom: -80px; width: 320px; height: 312px; background: url("assets/beavr-head.png") center / contain no-repeat; opacity: .06; transform: rotate(-12deg); }
.ab-vision__box h2 { margin: 0; font-size: clamp(1.9rem, 3.6vw, 2.8rem); letter-spacing: -.025em; text-wrap: balance; }
.ab-vision__steps { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 34px; flex-wrap: wrap; }
.ab-vision__steps span { display: flex; flex-direction: column; gap: 2px; padding: 14px 20px; border-radius: 16px; background: #f5f6f8; color: #626873; font-weight: 600; font-size: .95rem; }
.ab-vision__steps span b { font-size: .78rem; font-weight: 600; color: #9aa0a8; }
.ab-vision__steps span.is-on { background: var(--yellow); color: var(--ink); box-shadow: 0 12px 26px -14px rgba(154,109,0,.7); }
.ab-vision__steps span.is-on b { color: rgba(15,17,21,.6); }
.ab-vision__steps i { width: 56px; height: 2px; background: repeating-linear-gradient(90deg, #e7cf85 0 6px, transparent 6px 12px); }

/* Waarom: bezwaar → waarom het niet klopt */
.wy-myths__grid { max-width: 1160px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.wy-myth { display: flex; flex-direction: column; border-radius: 24px; background: #fff; border: 1px solid #efe3c3; overflow: hidden; box-shadow: 0 24px 48px -40px rgba(122,86,0,.5); }
.wy-myth__q { display: flex; align-items: center; gap: 12px; padding: 22px 24px; background: #f5f6f8; font-family: var(--display); font-weight: 700; font-size: 1.15rem; color: var(--ink); }
.wy-myth__x, .wy-myth__ok { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; }
.wy-myth__x { background: #fde2df; color: #d0392c; }
.wy-myth__ok { background: #e7f6ee; color: #177a41; }
.wy-myth__x svg, .wy-myth__ok svg { width: 15px; height: 15px; stroke-width: 3; }
.wy-myth__a { display: flex; gap: 12px; align-items: flex-start; padding: 22px 24px 26px; }
.wy-myth__a p { margin: 0; color: var(--muted); line-height: 1.65; text-wrap: pretty; }

/* Waarom: demoblok warm i.p.v. zwart */
.wy-demo__box { background: var(--yellow) !important; color: var(--ink) !important; box-shadow: 0 30px 60px -40px rgba(154,109,0,.6); position: relative; overflow: hidden; isolation: isolate; }
.wy-demo__box::after { content: ""; position: absolute; z-index: -1; right: -40px; bottom: -70px; width: 260px; height: 253px; background: url("assets/beavr-head.png") center / contain no-repeat; opacity: .14; transform: rotate(-12deg); }
.wy-demo__box h2 { color: var(--ink) !important; }
.wy-demo__box p { color: rgba(15,17,21,.72) !important; }
.wy-demo__box .hw-label { color: rgba(15,17,21,.7) !important; }
.wy-demo__box .btn--primary { background: var(--ink) !important; color: #fff !important; border-color: var(--ink) !important; }

@media (max-width: 960px) {
  .ab-pillars, .wy-myths__grid { grid-template-columns: minmax(0, 1fr); }
  .ab-vision__box { padding: 40px 24px; }
}

/* ===== Pagina: Contact ===== */
.ct { padding: 140px 0 112px; background: linear-gradient(180deg, #fff8e4 0%, #fffdf8 45%, #fff 100%); }
.ct__grid { max-width: 1160px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.ct__main h1 { margin: 0; font-size: clamp(2.2rem, 4.2vw, 3.3rem); line-height: 1.06; letter-spacing: -.03em; text-wrap: balance; }
.ct__lead { margin: 16px 0 28px; max-width: 54ch; font-size: 1.12rem; line-height: 1.6; color: var(--muted); text-wrap: balance; }
.ct__card { padding: 32px; border-radius: 28px; background: #fff; border: 1px solid #efe7d2; box-shadow: 0 1px 2px rgba(15,17,21,.04), 0 40px 80px -52px rgba(122,86,0,.5); }
.ct__topics { margin: 0 0 22px; padding: 0; border: 0; }
.ct__topics legend { margin-bottom: 12px; padding: 0; font-weight: 600; color: var(--ink); }
.ct__chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ct-chip { position: relative; cursor: pointer; }
.ct-chip input { position: absolute; opacity: 0; pointer-events: none; }
.ct-chip span { display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 14px; border-radius: 12px; border: 1.5px solid var(--line); background: #fff; font-size: .9rem; font-weight: 600; color: var(--muted); transition: border-color .2s, background .2s, color .2s, box-shadow .2s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct-chip svg { flex: none; width: 17px; height: 17px; color: #b07d00; }
.ct-chip:hover span { border-color: #e0c878; color: var(--ink); }
.ct-chip input:checked + span { border-color: var(--yellow); background: #fff8e1; color: var(--ink); box-shadow: 0 0 0 3px rgba(255,194,26,.22); }
.ct-chip input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
.ct__card .btn svg { width: 18px; height: 18px; }
.ct__card .btn--block { margin-top: 6px; }
#c-naam { scroll-margin-top: 180px; }

.ct__side { position: sticky; top: 100px; display: grid; gap: 16px; padding-top: 112px; }
.ct__info { display: grid; gap: 10px; }
.ct__item { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 18px; background: #fff; border: 1px solid #efe7d2; text-decoration: none; color: inherit; transition: border-color .2s, transform .2s; }
a.ct__item:hover { border-color: var(--yellow); transform: translateY(-2px); }
.ct__ico { flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--ink); color: var(--yellow); }
.ct__ico svg { width: 19px; height: 19px; }
.ct__item small { display: block; font-size: .8rem; color: var(--muted); }
.ct__item b { color: var(--ink); font-size: 1rem; }
.ct__quick { padding: 20px; border-radius: 20px; background: #fffaf0; border: 1px solid #f0e2bb; }
.ct__quick-title { margin: 0 0 10px; font-weight: 700; color: var(--ink); }
.ct__quick a { display: grid; grid-template-columns: 22px 1fr 18px; gap: 12px; align-items: center; padding: 12px 4px; border-top: 1px solid #f0e2bb; text-decoration: none; color: var(--muted); font-size: .88rem; }
.ct__quick a:first-of-type { border-top: 0; }
.ct__quick a b { display: block; color: var(--ink); font-size: .96rem; }
.ct__quick svg { width: 20px; height: 20px; color: #b07d00; }
.ct__quick .go { width: 16px; height: 16px; color: var(--muted); transition: transform .2s var(--ease); }
.ct__quick a:hover .go { transform: translateX(4px); color: var(--ink); }
.ct__help { margin-top: 0; }
@media (max-width: 960px) {
  .ct { padding-top: 120px; }
  .ct__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .ct__side { position: static; padding-top: 0; }
}
@media (max-width: 600px) { .ct__chips { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ct__card { padding: 22px; } }
@media (max-width: 600px) { .ct-chip span { height: auto; min-height: 48px; padding: 8px 12px; white-space: normal; line-height: 1.25; font-size: .86rem; } }
@media (max-width: 600px) { .ct-chip { display: grid; } .ct-chip span { min-height: 54px; } }

/* ===== Chat-assistent ===== */
.bchat { position: fixed; z-index: 80; right: 20px; bottom: 20px; font-family: var(--body); transition: bottom .3s var(--ease); }
.bchat.is-raised { bottom: 96px; }
.bchat__launch { position: relative; width: 64px; height: 64px; border-radius: 50%; border: 0; padding: 10px; background: var(--yellow); cursor: pointer; box-shadow: 0 14px 32px -12px rgba(15,17,21,.45), 0 0 0 4px #fff; transition: transform .25s var(--ease); }
.bchat__launch:hover { transform: translateY(-2px) scale(1.04); }
.bchat__launch img { width: 100%; height: 100%; object-fit: contain; }
.bchat__dot { position: absolute; top: 4px; right: 4px; width: 14px; height: 14px; border-radius: 50%; background: #1fa55b; border: 3px solid #fff; }
.bchat.is-open .bchat__launch { transform: scale(.9); }
.bchat__bubble { position: absolute; right: 76px; bottom: 12px; width: max-content; max-width: 240px; padding: 10px 14px; border-radius: 14px 14px 4px 14px; background: #fff; color: var(--ink); font-size: .9rem; font-weight: 500; box-shadow: 0 12px 30px -12px rgba(15,17,21,.35); cursor: pointer; animation: bchatIn .4s var(--ease); }
.bchat__bubble[hidden] { display: none; }
@keyframes bchatIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.bchat__panel { position: absolute; right: 0; bottom: 78px; width: 370px; height: min(560px, calc(100vh - 140px)); display: flex; flex-direction: column; border-radius: 22px; overflow: hidden; background: #fff; border: 1px solid #ebe6d8; box-shadow: 0 30px 70px -24px rgba(15,17,21,.45); animation: bchatIn .3s var(--ease); }
.bchat__panel[hidden] { display: none; }
.bchat__head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--ink); color: #fff; }
.bchat__avatar { flex: none; width: 40px; height: 40px; border-radius: 50%; padding: 6px; background: var(--yellow); }
.bchat__avatar img { width: 100%; height: 100%; object-fit: contain; }
.bchat__who b { display: block; font-size: .98rem; }
.bchat__who small { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; color: #a7abb3; }
.bchat__who small i { width: 7px; height: 7px; border-radius: 50%; background: #1fa55b; }
.bchat__close { margin-left: auto; width: 34px; height: 34px; border-radius: 10px; border: 0; background: rgba(255,255,255,.08); color: #fff; display: grid; place-items: center; cursor: pointer; }
.bchat__close svg { width: 16px; height: 16px; }
.bchat__log { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; background: #fbfaf6; }
.bchat__msg { max-width: 86%; padding: 11px 14px; border-radius: 16px; font-size: .92rem; line-height: 1.5; color: var(--ink); overflow-wrap: anywhere; }
.bchat__msg--bot { align-self: flex-start; background: #fff; border: 1px solid #efe7d2; border-bottom-left-radius: 4px; }
.bchat__msg--me { align-self: flex-end; background: var(--yellow); border-bottom-right-radius: 4px; font-weight: 500; }
.bchat__msg a { color: var(--ink); font-weight: 600; }
.bchat__cta { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 8px 12px; border-radius: 10px; background: var(--ink); color: #fff !important; font-size: .85rem; text-decoration: none; }
.bchat__cta svg { width: 14px; height: 14px; }
.bchat__typing { display: inline-flex; gap: 4px; padding: 14px 16px; }
.bchat__typing i { width: 7px; height: 7px; border-radius: 50%; background: #c9ccd3; animation: bchatDot 1s infinite ease-in-out; }
.bchat__typing i:nth-child(2) { animation-delay: .15s; } .bchat__typing i:nth-child(3) { animation-delay: .3s; }
@keyframes bchatDot { 0%, 80%, 100% { transform: translateY(0); opacity: .5; } 40% { transform: translateY(-4px); opacity: 1; } }
.bchat__quick { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 14px 0; background: #fbfaf6; }
.bchat__quick[hidden] { display: none; }
.bchat__quick button { padding: 7px 12px; border-radius: 999px; border: 1.5px solid #f0d98f; background: #fff; font: 600 .82rem/1.2 var(--body); color: var(--ink); cursor: pointer; }
.bchat__quick button:hover { background: #fff8e1; border-color: var(--yellow); }
.bchat__form { display: flex; gap: 8px; padding: 12px 14px; background: #fbfaf6; border-top: 1px solid #efe7d2; }
.bchat__form input { flex: 1; min-width: 0; height: 44px; padding: 0 14px; border-radius: 12px; border: 1.5px solid var(--line); font: inherit; font-size: .92rem; background: #fff; }
.bchat__form input:focus { outline: none; border-color: var(--yellow); box-shadow: 0 0 0 3px rgba(255,194,26,.2); }
.bchat__form button { flex: none; width: 44px; height: 44px; border-radius: 12px; border: 0; background: var(--ink); color: var(--yellow); display: grid; place-items: center; cursor: pointer; }
.bchat__form button svg { width: 18px; height: 18px; }
.bchat__note { margin: 0; padding: 0 14px 12px; background: #fbfaf6; font-size: .72rem; color: #9aa0a8; }
.bchat__note a { color: inherit; }
@media (max-width: 520px) {
  .bchat { right: 14px; bottom: 14px; }
  .bchat.is-raised { bottom: 88px; }
  .bchat__panel { position: fixed; left: 10px; right: 10px; bottom: 10px; top: 80px; width: auto; height: auto; }
  .bchat.is-open .bchat__launch { opacity: 0; pointer-events: none; }
  .bchat__bubble { max-width: 200px; }
}
@media print { .bchat { display: none; } }
.wy-hero h1 { font-size: clamp(2.3rem, 4.6vw, 3.6rem) !important; }
.wy-hero h1 { font-size: clamp(2rem, 3.9vw, 3rem) !important; }

/* ===== Pagina: Plan een gesprek ===== */
.bk__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) !important; }
.bk__info { padding-top: 8px; }
.bk__facts { display: grid; gap: 10px; margin: 8px 0 24px; }
.bk__facts > div { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 16px; background: #fff; border: 1px solid #efe7d2; }
.bk__facts small { display: block; font-size: .8rem; color: var(--muted); }
.bk__facts b { color: var(--ink); }
.bk__agenda { padding: 20px 22px; border-radius: 20px; background: #fffaf0; border: 1px solid #f0e2bb; }
.bk__card { position: sticky; top: 100px; }
.bk__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.bk__head h2 { margin: 0; font-size: 1.4rem; }
.bk__tz { font-size: .82rem; color: var(--muted); }
.bk__days { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.bk__day { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 4px; border-radius: 14px; border: 1.5px solid var(--line); background: #fff; cursor: pointer; font: inherit; color: var(--ink); transition: border-color .2s, background .2s, box-shadow .2s; }
.bk__day small { font-size: .74rem; color: var(--muted); text-transform: lowercase; }
.bk__day b { font-family: var(--display); font-size: 1.35rem; line-height: 1.1; }
.bk__day:hover { border-color: #e0c878; }
.bk__day.is-on { border-color: var(--yellow); background: #fff8e1; box-shadow: 0 0 0 3px rgba(255,194,26,.22); }
.bk__label { margin: 22px 0 10px; font-weight: 600; color: var(--ink); font-size: .95rem; }
.bk__times { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 22px; min-height: 40px; }
.bk__time { height: 42px; border-radius: 10px; border: 1.5px solid var(--line); background: #fff; font: 600 .92rem/1 var(--body); color: var(--ink); cursor: pointer; transition: border-color .2s, background .2s; }
.bk__time:hover:not(:disabled) { border-color: #e0c878; }
.bk__time.is-on { border-color: var(--ink); background: var(--ink); color: #fff; }
.bk__time:disabled { color: #c3c7ce; background: #f7f8fa; text-decoration: line-through; cursor: not-allowed; }
.bk__card .btn:disabled { opacity: .45; cursor: not-allowed; }
.bk__card .btn svg { width: 18px; height: 18px; }
.bk__back { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; padding: 0; font: 600 .92rem/1 var(--body); color: var(--muted); cursor: pointer; }
.bk__back svg { width: 16px; height: 16px; }
.bk__picked { display: flex; align-items: center; gap: 10px; margin: 0 0 20px; padding: 14px 16px; border-radius: 14px; background: #fff8e1; border: 1px solid #f3e2a8; font-weight: 600; color: var(--ink); }
.bk__picked svg { flex: none; width: 18px; height: 18px; color: #7a5600; }
.bk__done { text-align: center; }
.bk__done h2 { margin: 12px 0 14px; }
.bk__done .bk__picked { justify-content: center; }
.bk__done-note { color: var(--muted); margin: 0 0 20px; }
.bk__done .btn svg { width: 17px; height: 17px; }
.bk__embed iframe { width: 100%; height: 680px; border: 0; border-radius: 16px; }
@media (max-width: 960px) { .bk__card { position: static; order: -1; } .bk__grid { grid-template-columns: minmax(0, 1fr) !important; } }
@media (max-width: 480px) { .bk__days { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; } .bk__day b { font-size: 1.1rem; } .bk__times { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* =========================================================
   Over ons: ons verhaal (redactioneel)
   ========================================================= */
.st { position: relative; padding: 120px 0 110px; background: #fbf8f1; overflow: clip; }
.st::before { content: ""; position: absolute; inset: 0; background: radial-gradient(900px 480px at 88% 0%, rgba(255,194,26,.16), transparent 70%), radial-gradient(700px 420px at 0% 100%, rgba(255,194,26,.10), transparent 70%); pointer-events: none; }
.st .container { position: relative; }
.st__head { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px 64px; align-items: end; margin-bottom: 64px; }
.st__eyebrow { grid-column: 1 / -1; display: inline-flex; align-items: center; gap: 12px; margin: 0; font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #8a6400; }
.st__eyebrow span { width: 28px; height: 2px; background: var(--yellow); border-radius: 2px; }
.st__title { margin: 0; font-family: var(--display); font-weight: 800; font-size: clamp(2.8rem, 6.4vw, 5.4rem); line-height: .98; letter-spacing: -.045em; color: var(--ink); }
.st__intro { margin: 0 0 10px; max-width: 420px; font-size: 1.15rem; line-height: 1.6; color: #5b5a55; }

.st__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: start; }

/* Beeld: luchtfoto met meting en prijs */
.st__visual { position: sticky; top: 104px; margin: 0; aspect-ratio: 4 / 5; border-radius: 32px; overflow: visible; }
.st__visual img, .st__measure { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 32px; }
.st__visual img { object-fit: cover; box-shadow: 0 40px 80px -40px rgba(40,28,0,.55); }
.st__visual::after { content: ""; position: absolute; inset: 0; border-radius: 32px; background: linear-gradient(180deg, rgba(15,17,21,0) 45%, rgba(15,17,21,.45)); pointer-events: none; }
.st__measure polygon { fill: rgba(255,194,26,.28); stroke: #ffc21a; stroke-width: 5; stroke-linejoin: round; stroke-dasharray: 14 10; animation: stDash 14s linear infinite; }
.st__measure circle { fill: #fff; stroke: #ffc21a; stroke-width: 4; }
@keyframes stDash { to { stroke-dashoffset: -480; } }
.st__chip { position: absolute; z-index: 2; left: 22px; top: 22px; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 99px; background: rgba(15,17,21,.62); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: #fff; font-size: .85rem; font-weight: 600; }
.st__chip i { width: 8px; height: 8px; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 0 4px rgba(61,220,132,.25); }
.st__price { position: absolute; z-index: 2; right: -28px; bottom: 36px; width: 250px; padding: 18px 20px; border-radius: 20px; background: #fff; box-shadow: 0 30px 60px -24px rgba(40,28,0,.45), 0 0 0 1px rgba(15,17,21,.04); }
.st__price small { display: block; font-size: .78rem; font-weight: 600; color: #626873; }
.st__price b { display: block; margin: 4px 0 6px; font-family: var(--display); font-weight: 800; font-size: 1.55rem; letter-spacing: -.02em; color: var(--ink); }
.st__price span { display: block; padding-top: 8px; border-top: 1px solid #f0ece2; font-size: .8rem; color: #6b6f76; }

/* Verhaal als tijdlijn */
.st__steps { list-style: none; margin: 0; padding: 0; }
.st__steps li { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 20px; padding-bottom: 40px; }
.st__steps li:not(:last-child)::before { content: ""; position: absolute; left: 27px; top: 50px; bottom: 6px; width: 2px; background: linear-gradient(#e9dcb4, rgba(233,220,180,0)); }
.st__no { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; background: #fff; border: 1px solid #eee3c6; font-family: var(--display); font-weight: 800; font-size: 1rem; color: #8a6400; box-shadow: 0 10px 24px -18px rgba(122,86,0,.6); }
.st__steps li:last-child .st__no { background: var(--ink); color: var(--yellow); border-color: var(--ink); }
.st__steps h3 { margin: 12px 0 10px; font-family: var(--display); font-weight: 800; font-size: 1.4rem; letter-spacing: -.02em; color: var(--ink); }
.st__steps p { margin: 0; font-size: 1.06rem; line-height: 1.72; color: #5b5a55; }
.st__steps em { font-style: normal; font-weight: 600; color: var(--ink); background: linear-gradient(transparent 62%, rgba(255,194,26,.45) 62%); }

.st__quote { margin: 8px 0 0 76px; padding: 28px 30px; border-radius: 24px; background: #fff; border: 1px solid #eee3c6; box-shadow: 0 24px 50px -38px rgba(122,86,0,.6); }
.st__quote p { margin: 0 0 20px; font-family: var(--display); font-weight: 700; font-size: 1.35rem; line-height: 1.4; letter-spacing: -.015em; color: var(--ink); }
.st__quote footer { display: flex; align-items: center; gap: 14px; }
.st__avatar { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--yellow); font-weight: 800; font-size: .95rem; }
.st__quote b { display: block; color: var(--ink); font-size: 1rem; }
.st__quote small { color: #6b6f76; font-size: .88rem; }

/* Donkere resultatenbalk */
.st__band { margin-top: 96px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; align-items: center; border-radius: 28px; background: #111214; color: #fff; overflow: hidden; box-shadow: 0 40px 80px -48px rgba(0,0,0,.6); }
.st__band > div { padding: 30px 32px; border-right: 1px solid rgba(255,255,255,.08); }
.st__band b { display: block; font-family: var(--display); font-weight: 800; font-size: 1.15rem; letter-spacing: -.01em; }
.st__band span { display: block; margin-top: 4px; font-size: .9rem; color: rgba(255,255,255,.6); }
.st__band a { margin: 0 28px; display: inline-flex; align-items: center; gap: 8px; padding: 13px 20px; border-radius: 99px; background: var(--yellow); color: var(--ink); font-weight: 700; font-size: .95rem; text-decoration: none; white-space: nowrap; transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.st__band a:hover { transform: translateY(-2px); box-shadow: 0 12px 26px -12px rgba(255,194,26,.8); }
.st__band a svg { width: 16px; height: 16px; }

@media (max-width: 1080px) {
  .st__band { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .st__band a { grid-column: 1 / -1; justify-self: start; margin: 0 32px 28px; }
  .st__band > div { border-bottom: 1px solid rgba(255,255,255,.08); }
}
@media (max-width: 900px) {
  .st { padding: 84px 0 80px; }
  .st__head { grid-template-columns: minmax(0, 1fr); margin-bottom: 44px; }
  .st__grid { grid-template-columns: minmax(0, 1fr); gap: 56px; }
  .st__visual { position: relative; top: 0; max-width: 520px; width: calc(100% - 20px); }
  .st__price { right: -20px; width: 220px; }
  .st__band { margin-top: 64px; grid-template-columns: minmax(0, 1fr); }
  .st__band > div { border-right: 0; padding: 22px 26px; }
  .st__band a { margin: 6px 26px 26px; }
}
@media (max-width: 560px) {
  .st__steps li { grid-template-columns: 44px minmax(0, 1fr); gap: 14px; }
  .st__no { width: 44px; height: 44px; border-radius: 14px; font-size: .9rem; }
  .st__steps li:not(:last-child)::before { left: 21px; top: 40px; }
  .st__steps h3 { margin-top: 8px; font-size: 1.2rem; }
  .st__quote { margin-left: 0; padding: 22px; }
  .st__quote p { font-size: 1.15rem; }
  .st__price { width: 200px; padding: 14px 16px; bottom: 20px; }
  .st__price b { font-size: 1.3rem; }
}
@media (prefers-reduced-motion: reduce) { .st__measure polygon { animation: none; } }
/* Band met koppelingen op de homepage */
.marquee--int .marquee__label { position: absolute; left: 0; top: 0; bottom: 0; z-index: 3; display: flex; align-items: center; gap: 10px; padding: 0 56px 0 max(20px, calc((100vw - 1200px) / 2)); background: linear-gradient(90deg, #fff 70%, rgba(255,255,255,0)); font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #8a6400; white-space: nowrap; }
.marquee--int .marquee__label::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: var(--yellow); }
.marquee--int .marquee__track > span { color: #344054; }
@media (max-width: 640px) { .marquee--int .marquee__label { padding-right: 36px; font-size: .7rem; } .marquee--int .marquee__label::before { display: none; } }

/* Homepage: vaste strook met koppelingen (Teamleader altijd vooraan) */
.intstrip { position: relative; z-index: 2; margin-top: var(--s10); padding: 26px 0 30px; background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.intstrip__label { margin: 0 0 16px; text-align: center; font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #8a6400; }
.intstrip__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 12px; }
.intstrip__list li { display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 18px 0 7px; border-radius: 99px; background: #fff; border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(16,24,40,.04); font-family: var(--display); font-weight: 700; font-size: .98rem; letter-spacing: -.01em; color: #1d2939; white-space: nowrap; transition: border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease); }
.intstrip__list li:hover { border-color: #f0d27a; transform: translateY(-2px); box-shadow: 0 10px 22px -14px rgba(122,86,0,.45); }
.intstrip__m { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #111214; color: var(--yellow); font-size: .85rem; font-weight: 800; }
.intstrip__list li:first-child { border-color: #f0d27a; background: #fffaeb; }
.intstrip__list li:first-child .intstrip__m { background: var(--yellow); color: #111214; }
.intstrip__list li.intstrip__more { padding: 0; border: 0; background: none; box-shadow: none; }
.intstrip__list li.intstrip__more:hover { transform: none; box-shadow: none; }
.intstrip__more a { display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 16px; border-radius: 99px; font-family: var(--display); font-weight: 700; font-size: .95rem; color: var(--ink); text-decoration: none; }
.intstrip__more a:hover { background: #fffaeb; }
.intstrip__more svg { width: 16px; height: 16px; transition: transform .2s var(--ease); }
.intstrip__more a:hover svg { transform: translateX(3px); }
.hero--split-m .intstrip { margin-top: var(--s12); }
@media (max-width: 960px) { .hero--split-m .intstrip, .intstrip { margin-top: var(--s8); } }
@media (max-width: 640px) {
  .intstrip { padding: 20px 0 22px; }
  .intstrip__list { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; margin: 0 -20px; padding: 2px 20px 6px; scroll-snap-type: x mandatory; }
  .intstrip__list::-webkit-scrollbar { display: none; }
  .intstrip__list li { scroll-snap-align: start; flex: none; height: 42px; font-size: .92rem; }
  .intstrip__m { width: 28px; height: 28px; }
}

.intstrip__head { display: flex; align-items: center; justify-content: center; gap: 8px 18px; flex-wrap: wrap; margin-bottom: 16px; }
.intstrip__head .intstrip__label { margin: 0; }
.intstrip__all { display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; font-weight: 700; color: var(--ink); text-decoration: none; border-bottom: 2px solid var(--yellow); padding-bottom: 1px; }
.intstrip__all svg { width: 14px; height: 14px; transition: transform .2s var(--ease); }
.intstrip__all:hover svg { transform: translateX(3px); }
.intstrip__list { flex-wrap: nowrap; gap: 8px; }
.intstrip__list li { height: 42px; padding: 0 14px 0 6px; gap: 8px; font-size: .92rem; }
.intstrip__m { width: 28px; height: 28px; font-size: .8rem; }
@media (max-width: 1140px) {
  .intstrip__list { justify-content: flex-start; overflow-x: auto; scrollbar-width: none; margin: 0 -20px; padding: 2px 20px 8px; scroll-snap-type: x mandatory; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 20px, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, transparent 0, #000 20px, #000 calc(100% - 40px), transparent); }
  .intstrip__list::-webkit-scrollbar { display: none; }
  .intstrip__list li { flex: none; scroll-snap-align: start; }
}
/* Rekenvoorbeeld: titel op de donkere kaart was onzichtbaar (zwart op zwart) */
.rx__card--extra h3 { color: #fff !important; }
/* Kleine klikdoelen op de gsm groot genoeg maken (WCAG 2.5.8: minstens 24 px) */
.footer a { display: inline-block; min-height: 24px; line-height: 24px; }
.nav__logo, .link-arrow { min-height: 24px; }



/* Ankers op de Concierge-pagina: niet onder de zwevende kop verdwijnen */
.cc section[id] { scroll-margin-top: 96px; }

/* Zwarte balk bovenaan: prijscalculator of Concierge */
.pswitch { position: relative; z-index: 51; background: #111318; color: #c9ccd3; font-size: 13px; }
.pswitch__in { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px; }
.pswitch__seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: rgba(255,255,255,.08); }
.pswitch__seg a { display: inline-flex; align-items: center; gap: 7px; min-height: 30px; padding: 0 14px; border-radius: 999px; color: #c9ccd3; font-weight: 600; text-decoration: none; transition: background .15s, color .15s; }
.pswitch__seg a svg { width: 15px; height: 15px; }
.pswitch__seg a:hover { color: #fff; }
.pswitch__seg a.is-on { background: #fff; color: #111318; }
.pswitch__seg em { padding: 1px 7px; border-radius: 999px; background: var(--yellow); color: #111318; font-style: normal; font-size: 10.5px; font-weight: 700; letter-spacing: .02em; }
.pswitch__seg a:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }
.pswitch__txt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 720px) { .pswitch__in { justify-content: center; } .pswitch__txt { display: none; } }
/* De zwevende kop begint onder de balk en schuift na het scrollen naar boven */
.nav { transition: top .2s ease; }
body:has(> .pswitch) .nav:not(.is-scrolled) { top: 44px !important; }
@media (max-width: 480px) { .pswitch__seg { gap: 0; } .pswitch__seg a { gap: 5px; padding: 0 10px; font-size: 12.5px; } .pswitch__seg a svg { display: none; } .pswitch__seg em { display: none; } }