/* GrowthSourced — all styles.
 * Design tokens first: :root = light (default), :root[data-sl-theme="dark"] = dark.
 * The token names say "mint" for historical reasons; the brand colour is indigo/violet (#5B4FE8).
 * Mobile tweaks live in the @media (max-width:600px) blocks further down. */
:root{
  --cream:#FAF8F2;
  --white:#FFFFFF;
  --ink:#17152B;
  --ink-soft:#5C5A72;
  --mint:#5B4FE8;
  --mint-dark:#4539C9;
  --mint-light:#EEECFF;
  --line:#E7E2EC;
  --screen:#17152B;   /* donkere "schermen": telefoon in de hero, scanner */
  --viz-soft:#9A92F2;   /* de-emphasised chart bars (earlier weeks) */
  --tl-track:rgba(91,79,232,0.2);
  --warn:#A8453C;   /* nepvolgers in "Het verschil tussen kopen en groeien" */   /* the not-yet-travelled part of the route in "Zo pakken we het aan" */
  --header-bg:rgba(250,248,242,0.82);
  --sans:'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  box-sizing: border-box;
}
:root[data-sl-theme="dark"]{
  --cream:#12161C; --white:#1B212B; --ink:#F2F0EA; --ink-soft:#A8B0BC;
  --mint:#6F63F5; --mint-dark:#A89FFF; --mint-light:#1F1D38; --line:rgba(255,255,255,0.12); --viz-soft:#4F4A9C; --tl-track:rgba(168,159,255,0.22); --warn:#EE8A7F; --screen:#1C1A33;
  --header-bg:rgba(18,22,28,0.85);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top: calc(78px + env(safe-area-inset-top,0px)); }
body{
  margin:0; background: var(--cream); color: var(--ink);
  font-family: var(--sans); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
.wrap{ max-width:1160px; margin:0 auto; padding:0 24px; }

h1,h2,h3{ font-family:var(--sans); font-weight:700; margin:0; letter-spacing:-0.015em; color:var(--ink); }
h1{ font-size:clamp(2.3rem,5.4vw,3.7rem); line-height:1.08; }
h2{ font-size:clamp(1.7rem,3.4vw,2.4rem); line-height:1.15; }
h3{ font-size:1.1rem; font-weight:700; }
p{ margin:0; }
.lede{ font-size:1.12rem; color:var(--ink-soft); max-width:44ch; text-wrap:pretty; }
.center{ text-align:center; margin-left:auto; margin-right:auto; }

/* header */
header{ position:sticky; top:0; z-index:40; padding-top:env(safe-area-inset-top,0px);
  background:var(--header-bg); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); }
.nav{ display:flex; align-items:center; justify-content:space-between; padding-top:16px; padding-bottom:16px; gap:12px; }
.btn.nav-cta{ display:none; }
@media (min-width:560px){ .btn.nav-cta{ display:inline-flex; } }
.wordmark{ display:flex; align-items:center; gap:9px; text-decoration:none; font-weight:800; font-size:1.2rem; color:var(--ink); }
.wordmark .mark{ width:26px; height:26px; border-radius:8px; background:var(--mint); display:flex; align-items:center; justify-content:center; }
.wordmark .mark svg{ width:14px; height:14px; }
.navlinks{ display:none; gap:28px; list-style:none; margin:0; padding:0; }
@media (min-width:840px){ .navlinks{ display:flex; } }
.navlinks a{ text-decoration:none; color:var(--ink-soft); font-size:0.94rem; font-weight:500; }
.navlinks a:hover{ color:var(--ink); }

.hamburger{
  display:flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:10px; border:1px solid var(--line); background:var(--white);
  cursor:pointer; flex:none; padding:0; margin-right:8px;
}
@media (min-width:840px){ .hamburger{ display:none; } }
.hamburger svg{ width:18px; height:18px; }

.mobile-menu{
  display:none; position:fixed; inset:0; z-index:60;
  background:var(--cream);
  padding: calc(78px + env(safe-area-inset-top,0px)) 24px 24px;
}
.mobile-menu.is-open{ display:block; }
.mobile-menu ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px; }
.mobile-menu li{ border-bottom:1px solid var(--line); }
.mobile-menu a{ display:block; padding:18px 4px; text-decoration:none; color:var(--ink); font-size:1.15rem; font-weight:600; }
.mobile-menu .btn{ margin-top:24px; width:100%; justify-content:center; }
.menu-close{
  position:absolute; top:calc(18px + env(safe-area-inset-top,0px)); right:20px;
  width:36px; height:36px; border-radius:50%; border:1px solid var(--line); background:var(--white);
  display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0;
}
.menu-close svg{ width:16px; height:16px; }
@media (min-width:840px){ .mobile-menu{ display:none !important; } }

.btn{ display:inline-flex; align-items:center; gap:8px; font-family:var(--sans); font-weight:700; font-size:0.94rem;
  padding:13px 24px; border-radius:999px; text-decoration:none; border:1px solid transparent; cursor:pointer; }
.btn-primary{ background:var(--mint); color:#fff; }
.btn-primary:hover{ background:var(--mint-dark); }
.btn-outline{ border-color:var(--line); color:var(--ink); background:var(--white); }
.btn-outline:hover{ border-color:var(--mint); color:var(--mint-dark); }
.btn:focus-visible, a:focus-visible, summary:focus-visible{ outline:2px solid var(--mint); outline-offset:3px; }

/* hero */
.hero{ padding:64px 0 40px; text-align:center; }
.badge{ display:inline-flex; align-items:center; gap:8px; background:var(--white); border:1px solid var(--line);
  border-radius:999px; padding:8px 16px; font-size:0.86rem; font-weight:600; color:var(--ink-soft); margin-bottom:26px; }
.badge .stars{ color:#F5A623; letter-spacing:1px; }
.hero h1{ margin:0 auto 20px; max-width:16ch; text-wrap:balance; }
.hero .lede{ margin:0 auto 34px; }
.hero-cta{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px; margin-bottom:20px; }
.hero-note{ font-size:0.86rem; color:var(--ink-soft); }

.hero-visual{ margin-top:52px; }

/* calculator */
.calc-panel{ background:var(--white); border:1px solid var(--line); border-radius:28px; padding:34px; }
@media (min-width:800px){ .calc-panel{ padding:44px; } }
.calc-grid{ display:grid; grid-template-columns:1fr; gap:36px; }
@media (min-width:800px){ .calc-grid{ grid-template-columns:1.1fr 0.9fr; } }
.calc-field{ margin-bottom:26px; }
.calc-field:last-child{ margin-bottom:0; }
.calc-field label{ display:flex; justify-content:space-between; font-weight:700; font-size:0.95rem; margin-bottom:10px; }
.calc-field label .val{ color:var(--mint-dark); font-weight:800; }
input[type="range"]{ width:100%; -webkit-appearance:none; appearance:none; height:6px; border-radius:999px;
  background:var(--mint-light); outline:none; box-shadow:inset 0 0 0 1px var(--line); }
input[type="range"]::-webkit-slider-thumb{ -webkit-appearance:none; width:22px; height:22px; border-radius:50%;
  background:var(--mint); cursor:pointer; border:3px solid #fff; box-shadow:0 0 0 1px var(--line); }
input[type="range"]::-moz-range-thumb{ width:22px; height:22px; border-radius:50%; background:var(--mint);
  cursor:pointer; border:3px solid #fff; }
.calc-result{ background:var(--mint-light); border-radius:20px; padding:28px; display:flex; flex-direction:column; justify-content:center; }
.calc-result .rlabel{ font-size:0.9rem; color:var(--ink-soft); margin-bottom:6px; }
.calc-sub{ display:flex; justify-content:space-between; padding:10px 0; border-top:1px solid var(--line); font-size:0.9rem; color:var(--ink-soft); }
.calc-sub:first-of-type{ border-top:none; }
.calc-note{ font-size:0.8rem; color:var(--ink-soft); margin-top:18px; }

/* trust */
.trust-grid{ display:grid; grid-template-columns:1fr; gap:18px; }
@media (min-width:760px){ .trust-grid{ grid-template-columns:repeat(2,1fr); max-width:820px; margin:0 auto; } }
.trust-item{ padding:4px 0; }
.trust-item h3{ margin-bottom:8px; }
.trust-item p{ color:var(--ink-soft); font-size:0.94rem; }

/* problem list (narrative style) */
.problem-list{ max-width:74ch; margin:0 auto; }
.problem-row{ display:flex; gap:18px; align-items:flex-start; padding:20px 0; border-top:1px solid var(--line); }
.problem-row:first-child{ border-top:none; }
.problem-row h3{ margin-bottom:6px; }
.problem-row p{ color:var(--ink-soft); font-size:0.95rem; }

/* klantenstrook: zie "klanten" in de laag Ontwerp 2.0 onderaan */

section{ padding:64px 0; }
.section-tint{ background:var(--mint-light); }
.section-head{ max-width:56ch; margin:0 auto 44px; text-align:center; }
.section-head h2{ margin-bottom:12px; }
.section-head .lede{ margin:0 auto; }

/* icon chip (problem rows, audience cards) */
.chip{ width:44px; height:44px; border-radius:14px; background:var(--mint-light); color:var(--mint-dark);
  display:flex; align-items:center; justify-content:center; margin-bottom:16px; }
.chip svg{ width:22px; height:22px; }

/* process */
.process-grid{ display:grid; grid-template-columns:1fr; gap:16px; }
@media (min-width:700px){ .process-grid{ grid-template-columns:1fr 1fr; } }
.pstep{ background:var(--white); border:1px solid var(--line); border-radius:20px; padding:22px 24px; display:flex; gap:16px; }
.pstep .num{ flex:none; width:34px; height:34px; border-radius:50%; background:var(--mint); color:#fff; font-weight:800;
  display:flex; align-items:center; justify-content:center; font-size:0.92rem; }
.pstep h3{ margin-bottom:4px; }
.pstep p{ color:var(--ink-soft); font-size:0.93rem; }

/* audience */
.audience-grid{ display:grid; grid-template-columns:1fr; gap:16px; }
@media (min-width:700px){ .audience-grid{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:1000px){ .audience-grid{ max-width:1000px; margin:0 auto; } }
.aud-card{ background:var(--white); border:1px solid var(--line); border-radius:20px; padding:24px; text-align:left; }
.aud-card h3{ margin-bottom:6px; font-size:1rem; }
.aud-card p{ color:var(--ink-soft); font-size:0.9rem; }

/* results */
.report{ background:var(--white); border:1px solid var(--line); border-radius:28px; padding:34px; }
@media (min-width:800px){ .report{ padding:44px; } }
.report-grid{ display:grid; grid-template-columns:1fr; gap:32px; }
@media (min-width:800px){ .report-grid{ grid-template-columns:1fr 1.2fr; } }
.stat{ margin-bottom:22px; }
.stat:last-child{ margin-bottom:0; }
.stat-label{ font-size:0.9rem; color:var(--ink-soft); margin-bottom:4px; }
.stat-value{ font-weight:800; font-size:2.1rem; color:var(--ink); }
.stat-delta{ display:inline-block; background:var(--mint-light); color:var(--mint-dark); font-weight:700; font-size:0.8rem;
  padding:2px 10px; border-radius:999px; margin-left:8px; vertical-align:middle; }
.range-note{ font-size:0.86rem; color:var(--ink-soft); margin-top:18px; }

/* example monthly report: header strip, daily chart (built in main.js), new followers by role */
.report-top{ display:flex; align-items:center; justify-content:space-between; gap:12px 20px; flex-wrap:wrap;
  padding-bottom:20px; margin-bottom:28px; border-bottom:1px solid var(--line); }
.rt-id{ display:flex; align-items:center; gap:12px; }
.rt-mark{ flex:none; width:36px; height:36px; border-radius:11px; background:var(--mint); display:flex; align-items:center; justify-content:center; }
.rt-mark svg{ width:18px; height:18px; }
.rt-id > div{ display:flex; flex-direction:column; line-height:1.3; }
.rt-id strong{ font-size:1rem; color:var(--ink); }
.rt-id > div > span{ font-size:0.82rem; color:var(--ink-soft); }
.rt-period{ font-size:0.78rem; font-weight:700; color:var(--mint-dark); background:var(--mint-light); padding:6px 12px; border-radius:999px; white-space:nowrap; }
.rc-title{ font-size:0.9rem; font-weight:700; color:var(--ink-soft); margin:0 0 16px; }

.day-chart{ --plot-h:140px; display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:10px; }
.dc-ticks{ position:relative; width:18px; height:var(--plot-h); font-size:0.7rem; color:var(--ink-soft); font-variant-numeric:tabular-nums; }
.dc-ticks span{ position:absolute; right:0; line-height:1; transform:translateY(50%); }
.dc-ticks span:nth-child(1){ bottom:100%; }
.dc-ticks span:nth-child(2){ bottom:50%; }
.dc-ticks span:nth-child(3){ bottom:0; }
.dc-weeks{ position:relative; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:0 14px; }
.dc-weeks::before{ content:""; position:absolute; left:0; right:0; top:0; height:var(--plot-h); pointer-events:none;
  background:linear-gradient(var(--line),var(--line)) 0 0/100% 1px no-repeat,
    linear-gradient(var(--line),var(--line)) 0 50%/100% 1px no-repeat,
    linear-gradient(var(--line),var(--line)) 0 100%/100% 1px no-repeat; }
.dc-bars{ position:relative; display:flex; align-items:flex-end; justify-content:space-between; gap:3px; height:var(--plot-h); }
.dc-bars i{ position:relative; flex:0 1 10px; min-width:3px; background:var(--viz-soft); border-radius:4px 4px 0 0;
  transition:height .8s cubic-bezier(.22,.8,.24,1); transition-delay:calc(var(--i) * 18ms); }
.dc-week.is-current .dc-bars i{ background:var(--mint); }
.dc-bars i::before{ content:""; position:absolute; left:-2px; right:-2px; top:-28px; bottom:0; } /* larger hover target */
.dc-bars i:hover{ background:var(--mint-dark); }
.dc-bars i:hover::after{ content:attr(data-v); position:absolute; left:50%; bottom:calc(100% + 6px); transform:translateX(-50%); z-index:2;
  background:var(--ink); color:var(--white); font-size:0.72rem; font-weight:700; line-height:1; padding:4px 7px; border-radius:6px; white-space:nowrap; pointer-events:none; }
.report.reveal:not(.is-in) .dc-bars i{ height:0 !important; }
.dc-label{ display:block; margin-top:10px; font-size:0.78rem; color:var(--ink-soft); }
.dc-total{ display:block; font-size:0.95rem; font-weight:800; color:var(--ink); font-variant-numeric:tabular-nums; }
.dc-total small{ font-size:0.75rem; font-weight:600; color:var(--ink-soft); }


/* included */
.included{ display:grid; grid-template-columns:1fr; gap:14px; }
@media (min-width:700px){ .included{ grid-template-columns:1fr 1fr; gap:14px 32px; } }
.inc-item{ display:flex; gap:12px; align-items:flex-start; background:var(--white); border:1px solid var(--line);
  border-radius:16px; padding:16px 18px; }
.inc-item .tick{ flex:none; width:22px; height:22px; border-radius:50%; background:var(--mint); display:flex;
  align-items:center; justify-content:center; }
.inc-item .tick svg{ width:12px; height:12px; }
.inc-item p{ color:var(--ink-soft); font-size:0.94rem; }

.callout{ background:var(--white); border:1px solid var(--mint); border-radius:20px; padding:24px 26px; max-width:70ch; margin:0 auto; }
.callout p{ color:var(--ink-soft); }
.callout strong{ color:var(--ink); }

/* pricing ('vanaf'-block styles are at the end of this file) */
.setup-note{ text-align:center; margin-top:34px; font-size:0.9rem; color:var(--ink-soft); }

/* testimonials */
/* carousel: 3 cards per view on desktop, 2 on tablet, 1 (with a peek of the next) on mobile; buttons in main.js */
.testi-track{ display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - 32px) / 3); gap:16px;
  overflow-x:auto; scroll-snap-type:x mandatory; overscroll-behavior-x:contain; scrollbar-width:none; padding:2px 0 6px; }
.testi-track::-webkit-scrollbar{ display:none; }
.testi-track:focus-visible{ outline:2px solid var(--mint); outline-offset:4px; border-radius:20px; }
.testi-track.is-auto{ scroll-snap-type:none; cursor:grab; }   /* slow drift (main.js): no snapping while it moves */
.testi-track.is-dragging{ cursor:grabbing; user-select:none; -webkit-user-select:none; }
@media (max-width:999px){ .testi-track{ grid-auto-columns:calc((100% - 16px) / 2); } }
@media (max-width:600px){ .testi-track{ grid-auto-columns:86%; } }
.testi{ margin:0; background:var(--white); border:1px solid var(--line); border-radius:20px; padding:24px;
  scroll-snap-align:start; display:flex; flex-direction:column; justify-content:space-between; }
.testi-nav{ display:flex; justify-content:center; gap:10px; margin-top:20px; }
.testi-btn{ width:42px; height:42px; border-radius:50%; border:1px solid var(--line); background:var(--white); color:var(--ink);
  display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0; transition:border-color .2s, color .2s, opacity .2s; }
.testi-btn:hover:not(:disabled){ border-color:var(--mint); color:var(--mint-dark); }
.testi-btn:disabled{ opacity:.35; cursor:default; }
.testi-btn:focus-visible{ outline:2px solid var(--mint); outline-offset:3px; }
.testi-btn svg{ width:18px; height:18px; }
.testi blockquote{ margin:0 0 18px; font-size:1.02rem; line-height:1.45; color:var(--ink); font-weight:500; }
.testi-foot{ display:flex; align-items:center; gap:10px; }
.testi-avatar{ width:36px; height:36px; border-radius:50%; background:var(--mint-light); color:var(--mint-dark);
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:0.86rem; }
.testi cite{ font-style:normal; display:flex; flex-direction:column; line-height:1.3; }
.testi cite strong{ font-size:0.9rem; color:var(--ink); font-weight:700; }
.testi cite span{ font-size:0.82rem; color:var(--ink-soft); }

/* faq */
details{ background:var(--white); border:1px solid var(--line); border-radius:16px; padding:18px 22px; margin-bottom:12px; }
summary{ cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:18px; font-weight:700; font-size:1.02rem; }
summary::-webkit-details-marker{ display:none; }
summary .plus{ flex:none; width:26px; height:26px; border-radius:50%; background:var(--mint-light); color:var(--mint-dark);
  display:flex; align-items:center; justify-content:center; font-weight:800; transition:transform .18s ease; }
details[open] summary .plus{ transform:rotate(45deg); }
.faq-a{ padding-top:14px; color:var(--ink-soft); font-size:0.96rem; }

/* final cta */
.final-band{ position:relative; overflow:hidden; border-radius:32px; padding:64px 40px 48px; text-align:center; color:#fff;
  background:radial-gradient(120% 100% at 50% 0%, #7C71F7 0%, #5B4FE8 45%, #4539C9 100%); box-shadow:0 30px 60px -40px rgba(69,57,201,.6); }
.final-band::before{ content:""; position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);
  background-size:32px 32px; -webkit-mask-image:radial-gradient(70% 60% at 50% 15%,#000,transparent); mask-image:radial-gradient(70% 60% at 50% 15%,#000,transparent); }
.final-band::after{ content:""; position:absolute; width:420px; height:420px; left:50%; top:-260px; transform:translateX(-50%);
  background:radial-gradient(circle, rgba(255,255,255,.28), transparent 65%); pointer-events:none; }
.final-band > *{ position:relative; z-index:1; }
.fb-eyebrow{ display:inline-flex; align-items:center; gap:8px; font-size:.74rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:#fff; border:1px solid rgba(255,255,255,.35); background:rgba(255,255,255,.1); padding:7px 14px; border-radius:999px; margin-bottom:22px; }
.fb-eyebrow i{ width:6px; height:6px; border-radius:50%; background:#fff; box-shadow:0 0 10px #fff; }
.final-band h2{ color:#fff; margin:0 auto 16px; max-width:20ch; }
.final-band h2 em{ font-style:normal; color:#fff; }
.final-band .lede{ color:rgba(255,255,255,0.9); margin:0 auto 22px; }
.fb-perks{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px 24px; margin:0 auto 28px; padding:0; list-style:none; font-size:.9rem; color:rgba(255,255,255,.88); }
.fb-perks li::before{ content:"✓"; color:#fff; font-weight:800; margin-right:8px; }
.final-band > .hero-cta .btn-outline{ background:transparent; border-color:rgba(255,255,255,0.35); color:#fff; }
.final-band > .hero-cta .btn-outline:hover{ border-color:#fff; }
.final-band .booking-card{ max-width:640px; margin:28px auto 0; box-shadow:0 24px 50px -28px rgba(30,20,110,.55); }
#analyse{ padding-top:16px; }
@media (max-width:600px){ .final-band{ padding:48px 16px 20px; border-radius:24px; } .final-band .booking-card{ padding:26px 20px; } }

/* booking widget */
.booking-card{ background:var(--white); border-radius:28px; padding:36px; margin-top:28px; text-align:left; color:var(--ink); }
@media (min-width:700px){ .booking-card{ padding:44px; } }
.booking-steps{ display:flex; gap:22px; margin-bottom:28px; flex-wrap:wrap; }
.bstep-dot{ display:flex; align-items:center; gap:8px; font-size:0.86rem; font-weight:700; color:var(--ink-soft); }
.bstep-dot .n{ width:24px; height:24px; border-radius:50%; background:var(--mint-light); color:var(--mint-dark);
  display:flex; align-items:center; justify-content:center; font-size:0.78rem; }
.bstep-dot.is-active{ color:var(--ink); }
.bstep-dot.is-active .n{ background:var(--mint); color:#fff; }
.bstep-dot.is-done .n{ background:var(--mint); color:#fff; }

.bpanel{ display:none; }
.bpanel.is-active{ display:block; }
.bfield{ margin-bottom:16px; }
.bfield label{ display:block; font-size:0.88rem; font-weight:700; margin-bottom:6px; }
.bfield input{ width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:12px; font-family:var(--sans);
  font-size:0.96rem; color:var(--ink); background:var(--cream); }
.bfield input:focus{ outline:2px solid var(--mint); outline-offset:1px; }

.bchoices{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:22px; }
.bchoice{ padding:11px 18px; border-radius:999px; border:1px solid var(--line); background:var(--cream);
  font-family:var(--sans); font-size:0.9rem; font-weight:600; color:var(--ink); cursor:pointer; }
.bchoice.is-selected{ background:var(--mint); border-color:var(--mint); color:#fff; }
.bchoice:hover{ border-color:var(--mint); }

.bconfirm{ background:var(--mint-light); border-radius:16px; padding:20px 22px; margin-bottom:20px; font-size:0.92rem; color:var(--ink); }
.bconfirm strong{ display:block; margin-bottom:4px; }
.bnote{ font-size:0.82rem; color:var(--ink-soft); margin-top:14px; }

.theme-toggle{
  width:36px; height:36px; border-radius:50%; border:1px solid var(--line); background:var(--white);
  display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--ink-soft);
  margin-left:14px; flex:none; padding:0;
}
.theme-toggle:hover{ color:var(--ink); border-color:var(--mint); }
.theme-toggle svg{ width:17px; height:17px; }

footer{ border-top:1px solid var(--line); padding:36px 0; }
.foot-row{ display:flex; flex-wrap:wrap; gap:18px; justify-content:space-between; align-items:center; }
.foot-links{ display:flex; gap:20px; list-style:none; padding:0; margin:0; font-size:0.86rem; }
.foot-links a{ text-decoration:none; color:var(--ink-soft); }
.foot-links a:hover{ color:var(--ink); }
.foot-copy{ font-size:0.82rem; color:var(--ink-soft); }

@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } *{ transition:none !important; } }

/* ===== delight layer ===== */
.scroll-progress{ position:fixed; top:0; left:0; height:3px; width:0; background:linear-gradient(90deg,var(--mint),var(--mint-dark)); z-index:80; }

.live-card{ background:var(--white); border:1px solid var(--line); border-radius:28px; padding:24px 24px 18px; max-width:560px; margin:0 auto;
  box-shadow:0 24px 50px -30px rgba(69,57,201,0.45); text-align:left; position:relative; overflow:hidden; }
.lc-head{ display:flex; align-items:center; gap:12px; }
.lc-avatar{ width:44px; height:44px; border-radius:50%; background:linear-gradient(135deg,var(--mint),var(--mint-dark)); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:800; }
.lc-meta{ display:flex; flex-direction:column; line-height:1.3; }
.lc-meta strong{ font-size:0.98rem; color:var(--ink); }
.lc-meta span{ font-size:0.82rem; color:var(--ink-soft); }
.lc-live{ margin-left:auto; display:inline-flex; align-items:center; gap:6px; font-size:0.76rem; font-weight:700; color:var(--mint-dark);
  background:var(--mint-light); padding:5px 11px; border-radius:999px; }
.lc-live i{ width:7px; height:7px; border-radius:50%; background:var(--mint); animation:pulse 1.6s infinite; }
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgba(91,79,232,0.55);} 70%{ box-shadow:0 0 0 8px rgba(91,79,232,0);} 100%{ box-shadow:0 0 0 0 rgba(91,79,232,0);} }
.lc-count{ display:flex; align-items:baseline; gap:8px; margin:18px 0 4px; }
.lc-count .num{ font-size:2.4rem; font-weight:800; color:var(--ink); font-variant-numeric:tabular-nums; }
.lc-count small{ color:var(--ink-soft); font-size:0.92rem; }
.lc-count .bump{ margin-left:auto; font-size:0.8rem; font-weight:700; color:var(--mint-dark); }
.lc-spark{ width:100%; height:64px; display:block; }
.lc-spark path.line{ fill:none; stroke:var(--mint); stroke-width:3; stroke-linecap:round; stroke-dasharray:600; stroke-dashoffset:600; animation:draw 2.2s ease forwards .3s; }
.lc-spark path.area{ fill:var(--mint-light); opacity:.8; }
@keyframes draw{ to{ stroke-dashoffset:0; } }
.lc-toasts{ position:relative; height:184px; margin-top:14px; overflow:hidden; }
.toast{ position:absolute; left:0; right:0; top:0; height:56px; box-sizing:border-box;
  display:flex; align-items:center; gap:10px; background:var(--cream); border:1px solid var(--line); border-radius:14px; padding:0 12px;
  transition:transform .7s cubic-bezier(.22,.8,.24,1), opacity .5s ease; will-change:transform, opacity; }
.toast .t-av{ width:30px; height:30px; border-radius:50%; background:var(--mint-light); color:var(--mint-dark); font-weight:800; font-size:0.74rem;
  display:flex; align-items:center; justify-content:center; flex:none; }
.toast .t-txt{ display:flex; flex-direction:column; line-height:1.25; min-width:0; }
.toast .t-txt strong{ font-size:0.86rem; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.toast .t-txt span{ font-size:0.76rem; color:var(--ink-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.toast .t-tag{ margin-left:auto; font-size:0.7rem; font-weight:700; color:var(--mint-dark); white-space:nowrap; }

.target-grid{ display:grid; grid-template-columns:1fr; gap:24px; align-items:center; margin-bottom:32px; }
@media (min-width:800px){ .target-grid{ grid-template-columns:300px 1fr; } }
.radar-wrap{ background:var(--white); border:1px solid var(--line); border-radius:24px; padding:18px; text-align:center; }
.radar-wrap h3{ font-size:0.9rem; margin-bottom:10px; color:var(--ink-soft); font-weight:700; }
#radar{ width:100%; max-width:260px; height:auto; display:block; margin:0 auto; }
#radar .ring{ fill:none; stroke:var(--line); }
#radar .sweep{ transform-origin:120px 120px; animation:spin 4s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg);} }
#radar .dot-in{ fill:var(--mint); animation:dotIn .4s ease; }
#radar .dot-out{ fill:var(--ink-soft); opacity:.45; animation:dotFade 1.6s ease forwards; }
@keyframes dotIn{ from{ r:0; } }
@keyframes dotFade{ 0%{ opacity:.5;} 100%{ opacity:0;} }
.radar-legend{ display:flex; justify-content:center; gap:16px; margin-top:10px; font-size:0.78rem; color:var(--ink-soft); flex-wrap:wrap; }
.radar-legend i{ display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:6px; vertical-align:middle; }
.radar-legend .li{ background:var(--mint); } .radar-legend .lo{ background:var(--ink-soft); opacity:.5; }
.target-grid .callout{ max-width:none; margin:0; }
.filter-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.filter-tags span{ font-size:0.8rem; font-weight:600; color:var(--mint-dark); background:var(--mint-light); padding:6px 12px; border-radius:999px; }

.reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
.reveal.is-in{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; }
  .lc-spark path.line{ animation:none; stroke-dashoffset:0; }
  #radar .sweep, .lc-live i{ animation:none; }
  .toast{ transition:none; }
}
.lang-toggle{ margin-left:14px; font:inherit; font-size:0.86rem; font-weight:600; color:var(--ink-soft); background:none; border:0; cursor:pointer; padding:6px 4px; white-space:nowrap; }
.lang-toggle:hover{ color:var(--ink); }
@media (min-width:700px){ .audience-grid.duo-grid{ grid-template-columns:repeat(2,1fr); max-width:760px; margin:0 auto; } }
@media (min-width:700px){ .audience-grid.trio-grid{ grid-template-columns:repeat(3,1fr); max-width:1000px; margin:0 auto; } }
/* four cards ("Geschikt voor"): 2 x 2 on tablets, one row of four on wide screens */
@media (min-width:700px){ .audience-grid.quad-grid{ grid-template-columns:repeat(2,1fr); max-width:820px; margin:0 auto; } }
@media (min-width:1100px){ .audience-grid.quad-grid{ grid-template-columns:repeat(4,1fr); max-width:none; } }
.faq-groups{ display:grid; grid-template-columns:1fr; gap:28px; }
@media (min-width:900px){ .faq-groups{ grid-template-columns:repeat(3,1fr); gap:24px; align-items:start; } }
.faq-label{ font-size:0.8rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--mint-dark); margin:0 0 12px; }
.faq-group details{ margin-bottom:10px; }

/* ===== mobile polish ===== */
@media (max-width:600px){
  .aud-card{ display:grid; grid-template-columns:40px 1fr; column-gap:14px; row-gap:2px; align-items:start; padding:16px 18px; }
  .aud-card .chip{ grid-row:span 2; width:40px; height:40px; border-radius:12px; margin:0; }
  .aud-card h3{ margin:2px 0 4px; }
  .audience-grid{ gap:12px; }
  .booking-steps{ gap:10px 16px; flex-wrap:nowrap; }
  .bstep-dot:not(.is-active) > span[data-i18n]{ display:none; }
}

.chip{ flex:none; }
@media (max-width:600px){
  .wrap{ padding-left:18px; padding-right:18px; }
  .nav{ padding-top:12px; padding-bottom:12px; }
  .wordmark{ font-size:1.08rem; }
  .theme-toggle{ margin-left:8px; }
  .lang-toggle{ margin-left:6px; }
  section{ padding:48px 0; }
  .hero{ padding-top:36px; }
  .badge{ font-size:0.78rem; padding:7px 14px; gap:6px; flex-wrap:wrap; justify-content:center; text-align:center; }
  .hero h1{ font-size:2.15rem; }
  .hero .lede{ font-size:1.02rem; }
  .hero-cta{ flex-direction:column; align-items:stretch; }
  .hero-cta .btn{ justify-content:center; }
  .hero-visual{ margin-top:36px; }
  .live-card{ padding:18px 16px 14px; border-radius:22px; }
  .lc-count .num{ font-size:2rem; }
  .section-head{ margin-bottom:28px; }
  .problem-row{ gap:14px; }
  .calc-panel{ padding:20px 16px; border-radius:22px; }
  .calc-result{ padding:18px 16px; }
  .calc-field label{ font-size:0.9rem; gap:10px; }
  .calc-sub{ font-size:0.86rem; gap:12px; }
  .calc-sub > span:nth-child(2){ white-space:nowrap; text-align:right; }
  .radar-wrap{ padding:14px; }
  .report{ padding:20px 16px; border-radius:22px; }
  .report-top{ padding-bottom:16px; margin-bottom:22px; }
  .day-chart{ --plot-h:120px; column-gap:8px; }
  .dc-weeks{ gap:0 8px; }
  .dc-bars{ gap:2px; }
  .dc-total small{ display:block; }
  .stat-value{ font-size:1.8rem; }
  .pstep{ padding:18px; }
  .aud-card, .testi{ padding:20px; }
  .faq-group details{ padding:14px 16px; }
  summary{ font-size:0.96rem; }
}
.price-from{ text-align:center; margin:-8px auto 32px; }
.pf-label{ display:block; font-size:.8rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--mint-dark); margin-bottom:6px; }
.pf-amount{ font-size:clamp(2.4rem,6vw,3.2rem); font-weight:800; color:var(--ink); letter-spacing:-0.02em; }
.pf-unit{ font-size:1rem; color:var(--ink-soft); margin-left:6px; }
.pf-sub{ margin:6px 0 0; font-size:.9rem; color:var(--ink-soft); }

/* ===== snufjes: niche-strook, story-ring, dubbeltik-hartje, radar trekt volgers naar binnen, stappen lichten op, kostenbalken ===== */

/* niche-strook onder de hero: zonder JavaScript of met "minder beweging" staan de labels gewoon gecentreerd */
.niches{ padding:28px 0 4px; }
.niches-label{ text-align:center; font-size:0.86rem; color:var(--ink-soft); margin:0 0 14px; }
.niches-track{ list-style:none; margin:0 auto; padding:2px 16px; display:flex; flex-wrap:wrap; justify-content:center; gap:10px; max-width:980px; }
.niches-track li{ flex:none; padding:8px 15px; border:1px solid var(--line); border-radius:999px; background:var(--white);
  font-size:0.9rem; font-weight:600; color:var(--ink); white-space:nowrap; }
.niches-track li::before{ content:'#'; content:'#' / ''; color:var(--mint); margin-right:1px; }
.niches-track .dup{ display:none; }
.niches-marquee.is-looping{ overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask-image:linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
.niches-marquee.is-looping .niches-track{ flex-wrap:nowrap; justify-content:flex-start; width:max-content; max-width:none; padding:2px 0; animation:niches-scroll 70s linear infinite; }
.niches-marquee.is-looping .niches-track .dup{ display:block; }
.niches-marquee.is-looping:hover .niches-track{ animation-play-state:paused; }
@keyframes niches-scroll{ to{ transform:translateX(calc(-50% - 5px)); } }

/* story-ring om de avatar in de live kaart; hij draait één rondje bij elke nieuwe volger */
@property --ring-a{ syntax:'<angle>'; inherits:false; initial-value:210deg; }
.lc-avatar{ width:50px; height:50px; border:3px solid transparent;
  background:linear-gradient(135deg,var(--mint),var(--mint-dark)) padding-box,
             conic-gradient(from var(--ring-a), var(--mint), #C4BDFF, var(--mint-dark), #8C82FF, var(--mint)) border-box;
  box-shadow:inset 0 0 0 2px var(--white); }
.lc-avatar.is-spinning{ animation:ring-spin .9s cubic-bezier(.45,0,.2,1); }
@keyframes ring-spin{ from{ --ring-a:210deg; } to{ --ring-a:570deg; } }

/* dubbeltikken of dubbelklikken op de live kaart: een hartje */
.live-card{ -webkit-user-select:none; user-select:none; touch-action:manipulation; }
.lc-heart{ position:absolute; width:76px; height:76px; margin:-38px 0 0 -38px; pointer-events:none; z-index:5; color:var(--mint);
  filter:drop-shadow(0 8px 18px rgba(69,57,201,.35)); animation:heart-pop .95s cubic-bezier(.2,.8,.2,1) forwards; }
.lc-heart svg{ width:100%; height:100%; display:block; }
@keyframes heart-pop{
  0%{ transform:scale(0); opacity:0; } 16%{ transform:scale(1.18); opacity:1; } 30%{ transform:scale(.94); }
  44%{ transform:scale(1); } 78%{ transform:translateY(-6px) scale(1); opacity:1; } 100%{ transform:translateY(-26px) scale(.9); opacity:0; } }

/* radar: passende profielen worden naar jouw account in het midden getrokken */
#radar .dot-in{ transition:transform .8s cubic-bezier(.55,0,.75,.2), opacity .8s cubic-bezier(.7,0,1,1); }
#radar .dot-in.is-pulled{ opacity:0; }
#radar .core-ring{ fill:none; stroke:var(--mint); stroke-width:2; transform-box:fill-box; transform-origin:center; animation:core-ripple .9s ease-out forwards; }
@keyframes core-ripple{ from{ transform:scale(1); opacity:.8; } to{ transform:scale(4); opacity:0; } }
#radar .plus-one{ font-family:var(--sans); font-size:13px; font-weight:800; fill:var(--mint-dark); text-anchor:middle; animation:plus-up 1.1s ease-out forwards; }
@keyframes plus-up{ 0%{ transform:translateY(0); opacity:0; } 20%{ opacity:1; } 100%{ transform:translateY(-26px); opacity:0; } }

/* werkwijze: elke stap licht op zodra je erlangs scrolt (alleen met JavaScript; zonder staan ze meteen "aan") */
@property --ring-p{ syntax:'<number>'; inherits:false; initial-value:0; }
.steps-anim .pstep .num{ position:relative; background:var(--mint-light); color:var(--mint-dark); transition:background-color .3s ease .25s, color .3s ease .25s; }
.steps-anim .pstep .num::before{ content:''; position:absolute; inset:-4px; border-radius:50%;
  background:conic-gradient(var(--mint) calc(var(--ring-p) * 1turn), transparent 0);
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
  mask:radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
  transition:--ring-p .7s ease; }
.steps-anim .pstep.lit .num{ background:var(--mint); color:#fff; }
.steps-anim .pstep.lit .num::before{ --ring-p:1; }

/* calculator: kostenbalken die meebewegen met de schuifjes */
.calc-sub.has-bar{ flex-wrap:wrap; row-gap:8px; }
.calc-bar{ flex:0 0 100%; height:8px; border-radius:4px; background:var(--white); overflow:hidden; }
.calc-bar i{ display:block; height:100%; border-radius:4px; background:var(--viz-soft); transition:width .35s cubic-bezier(.22,.8,.24,1); }
.calc-bar.is-us i{ background:var(--mint); }

/* werkwijze als route: je scrolt van stap naar stap. De lijn volgt je scroll; bereikte stappen lichten op, de huidige valt op.
   Zonder JavaScript staan de stappen gewoon onder elkaar, zonder lijn en zonder dimmen. */
.process-grid.timeline{ grid-template-columns:1fr; gap:18px; max-width:760px; margin:0 auto; position:relative; }
.timeline .pstep{ background:none; border:0; border-radius:0; padding:0; display:grid; grid-template-columns:44px 1fr; gap:18px; align-items:start; }
.timeline .pstep .num{ width:38px; height:38px; margin:12px auto 0; position:relative; z-index:1; }
.timeline .pstep > div:last-child{ background:var(--white); border:1px solid var(--line); border-radius:20px; padding:20px 22px;
  transition:background-color .45s ease, border-color .45s ease, box-shadow .45s ease; }
.timeline .pstep h3{ transition:color .45s ease; }
.timeline .pstep p{ text-wrap:pretty; }
/* stap 3 en 5: het voordeel als label */
.pstep .pstep-win{ display:inline-flex; align-items:flex-start; gap:6px; margin-top:12px; padding:6px 12px 6px 9px; border-radius:14px;
  background:var(--mint-light); box-shadow:inset 0 0 0 1px var(--tl-track); color:var(--mint-dark); font-size:.86rem; font-weight:700; line-height:1.35; }
.pstep-win svg{ width:14px; height:14px; flex:none; margin-top:.15em; }
@media (max-width:600px){ .pstep .pstep-win{ font-size:.82rem; } }
.tl-rail{ display:none; }
.timeline.tl-ready .tl-rail{ display:block; position:absolute; left:21px; width:2px; top:0; height:0; background:var(--tl-track); border-radius:2px; }
.tl-fill{ position:absolute; left:0; top:0; width:100%; height:0; border-radius:2px; background:linear-gradient(var(--mint-dark), var(--mint)); }
.tl-tip{ position:absolute; left:50%; top:0; width:14px; height:14px; margin:-7px 0 0 -7px; border-radius:50%; background:var(--mint);
  box-shadow:0 0 0 5px rgba(91,79,232,.18), 0 0 18px rgba(91,79,232,.55); opacity:0; transition:opacity .3s ease; }
.timeline.tl-moving .tl-tip{ opacity:1; }
/* nog niet bereikt: een lege halte en een open kaart (tekst blijft goed leesbaar); bereikt: gevuld */
.steps-anim .timeline.tl-ready .pstep:not(.lit) .num{ background:var(--white); color:var(--mint-dark); box-shadow:inset 0 0 0 2px var(--tl-track); }
.steps-anim .timeline .pstep .num{ transition:background-color .3s ease .25s, color .3s ease .25s, box-shadow .3s ease; }
.timeline.tl-ready .pstep:not(.lit) > div:last-child{ background:transparent; border-color:var(--tl-track); }
.timeline.tl-ready .pstep:not(.lit) h3{ color:var(--ink-soft); }
.timeline.tl-ready .pstep.is-current > div:last-child{ border-color:var(--mint); box-shadow:0 18px 40px -28px rgba(69,57,201,.55); }
@media (max-width:600px){
  .timeline .pstep{ grid-template-columns:36px 1fr; gap:12px; }
  .timeline .pstep .num{ width:34px; height:34px; margin-top:10px; }
  .timeline.tl-ready .tl-rail{ left:17px; }
  .timeline .pstep > div:last-child{ padding:16px 18px; }
}

@media (prefers-reduced-motion:reduce){
  .niches-marquee.is-looping{ -webkit-mask-image:none; mask-image:none; }
  .niches-marquee.is-looping .niches-track{ animation:none; flex-wrap:wrap; justify-content:center; width:auto; max-width:980px; padding:2px 16px; }
  .niches-marquee.is-looping .niches-track .dup{ display:none; }
  .lc-avatar.is-spinning, .lc-heart, #radar .core-ring, #radar .plus-one{ animation:none; }
}
@media (max-width:600px){
  .niches{ padding-top:22px; }
  .niches-track li{ font-size:0.84rem; padding:7px 13px; }
}

/* Intro (preloader) bij het eerste bezoek in een sessie: het netwerk-icoon bouwt zich op, de naam verschijnt en het
   paneel schuift omhoog naar de site (samen ongeveer 1,5 s). Het script in de <head> van index.html zet html.sl-intro;
   zonder JavaScript of met "minder beweging" verschijnt hij niet. Klikken, scrollen of een toets slaat hem over. */
.intro{ display:none; }
html.sl-intro .intro{ display:grid; place-items:center; position:fixed; inset:0; z-index:100; background:var(--mint); color:#fff;
  animation:intro-lift .6s cubic-bezier(.76,0,.24,1) .9s forwards; }
html.sl-intro .intro.is-skipping{ animation:intro-lift-fast .42s cubic-bezier(.76,0,.24,1) forwards; }
.intro-logo{ display:flex; align-items:center; gap:clamp(12px, 2.2vw, 18px); animation:intro-logo-up .5s cubic-bezier(.76,0,.24,1) .9s forwards; }
.intro.is-skipping .intro-logo{ animation:none; opacity:0; transition:opacity .18s ease; }
.intro-tile{ width:clamp(54px, 9vw, 72px); aspect-ratio:1; border-radius:31%; background:#fff; display:grid; place-items:center;
  opacity:0; transform:scale(.6); animation:intro-tile .45s cubic-bezier(.34,1.56,.64,1) forwards; }
.intro-mark{ width:56%; height:auto; overflow:visible; stroke:var(--mint); }
.intro-node{ transform-box:fill-box; transform-origin:center; transform:scale(0); animation:intro-node .3s cubic-bezier(.34,1.56,.64,1) forwards; }
.intro-node:nth-of-type(1){ animation-delay:.1s; }
.intro-node:nth-of-type(2){ animation-delay:.18s; }
.intro-node:nth-of-type(3){ animation-delay:.26s; }
.intro-link{ stroke-dasharray:1; stroke-dashoffset:1; animation:intro-link .22s ease-out forwards; }
.intro-link:nth-of-type(1){ animation-delay:.26s; }
.intro-link:nth-of-type(2){ animation-delay:.34s; }
.intro-word{ font-weight:800; font-size:clamp(1.9rem, 5.6vw, 2.8rem); letter-spacing:-0.02em; line-height:1; padding:.14em .04em;
  clip-path:inset(0 100% 0 0); animation:intro-word .42s cubic-bezier(.22,.8,.24,1) .32s forwards; }
@keyframes intro-tile{ to{ opacity:1; transform:none; } }
@keyframes intro-node{ to{ transform:none; } }
@keyframes intro-link{ to{ stroke-dashoffset:0; } }
@keyframes intro-word{ to{ clip-path:inset(0 0 0 0); } }
@keyframes intro-logo-up{ to{ transform:translateY(-36px); opacity:0; } }
@keyframes intro-lift{ to{ transform:translateY(-100%); border-radius:0 0 50% 50% / 0 0 16vh 16vh; visibility:hidden; } }
@keyframes intro-lift-fast{ to{ transform:translateY(-100%); border-radius:0 0 50% 50% / 0 0 16vh 16vh; visibility:hidden; } }
@media (prefers-reduced-motion:reduce){ html.sl-intro .intro{ display:none; } }

/* Het verschil tussen kopen en groeien (onder de problemen): een scanner loopt mee met je scroll. Waar hij langs is
   gekomen, worden nepaccounts betrapt (rood kruis) en vallen ze weg, en springen echte profielen uit je niche op hun
   plek, met tellers bovenin. Terugscrollen draait het om. animations.js bouwt de kaartjes op; zonder JavaScript
   blijft alleen de kop met uitleg staan, met "minder beweging" staat meteen de eindstand. Het paneel is in licht
   en donker hetzelfde donkere "scherm". */
.vn{ max-width:980px; margin:56px auto 0; }
.vn-head{ text-align:center; max-width:60ch; margin:0 auto 22px; }
.vn-head h3{ font-size:clamp(1.3rem, 2.4vw, 1.6rem); margin-bottom:8px; }
.vn-head p{ color:var(--ink-soft); text-wrap:pretty; }
.vn-stage{ display:none; }
.vn-ready .vn-stage{ display:grid; place-items:center; position:relative; overflow:hidden; min-height:400px; padding:76px 28px 70px; border-radius:24px;
  background-color:#17152B; color:#fff; box-shadow:0 30px 60px -36px rgba(23,21,43,.65);
  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:28px 28px; }
.vn-bar{ position:absolute; top:18px; left:18px; right:18px; z-index:4; display:flex; flex-wrap:wrap; gap:8px; }
.vn-count{ display:inline-flex; align-items:baseline; gap:7px; padding:6px 13px; border-radius:999px; font-size:.8rem; font-weight:700; }
.vn-count b{ font-size:1.02rem; font-weight:800; font-variant-numeric:tabular-nums; }
.vn-count--fake{ background:rgba(255,138,128,.14); color:#FF9D93; }
.vn-count--real{ background:rgba(168,159,255,.18); color:#D4CFFF; }
.vn-done{ position:absolute; left:50%; bottom:18px; z-index:4; display:inline-flex; align-items:center; gap:7px; padding:7px 14px; border-radius:999px;
  background:#fff; color:#4539C9; font-size:.84rem; font-weight:800; white-space:nowrap; translate:-50% 8px; opacity:0;
  transition:opacity .3s ease, translate .4s cubic-bezier(.34,1.56,.64,1); }
.vn-done svg{ width:15px; height:15px; flex:none; }
.vn-stage.is-done .vn-done{ opacity:1; translate:-50% 0; }
.vn-clean{ position:absolute; inset:0; z-index:0; background:linear-gradient(90deg, rgba(111,99,245,.04), rgba(111,99,245,.24));
  clip-path:inset(0 calc(100% - var(--vn-x, 0px)) 0 0); }
.vn-stage.is-vertical .vn-clean{ background:linear-gradient(180deg, rgba(111,99,245,.04), rgba(111,99,245,.24)); clip-path:inset(0 0 calc(100% - var(--vn-y, 0px)) 0); }
.vn-scan{ position:absolute; z-index:3; pointer-events:none; background:#fff; border-radius:2px;
  box-shadow:0 0 0 1px rgba(255,255,255,.25), 0 0 26px 6px rgba(111,99,245,.85); transition:opacity .3s ease; }
.vn-stage:not(.is-vertical) .vn-scan{ top:0; bottom:0; left:0; width:2px; translate:var(--vn-x, 0px) 0; }
.vn-stage.is-vertical .vn-scan{ left:0; right:0; top:0; height:2px; translate:0 var(--vn-y, 0px); }
.vn-scan::before{ content:'GrowthSourced'; position:absolute; padding:4px 10px; border-radius:999px; background:#fff; color:#17152B;
  font-size:.7rem; font-weight:800; white-space:nowrap; box-shadow:0 0 18px rgba(111,99,245,.7); }
.vn-stage:not(.is-vertical) .vn-scan::before{ bottom:62px; left:1px; translate:-50% 0; }
.vn-stage.is-vertical .vn-scan::before{ right:12px; top:1px; translate:0 -50%; }
/* near the edges the label moves to the inner side of the line, so it is never cut off */
.vn-stage[data-edge="start"]:not(.is-vertical) .vn-scan::before{ translate:6px 0; }
.vn-stage[data-edge="end"]:not(.is-vertical) .vn-scan::before{ translate:calc(-100% - 6px) 0; }
.vn-stage[data-edge="start"].is-vertical .vn-scan::before{ translate:0 6px; }
.vn-stage[data-edge="end"].is-vertical .vn-scan::before{ translate:0 calc(-100% - 6px); }
.vn-stage.is-done .vn-scan{ opacity:0; }
.vn-grid{ position:relative; z-index:1; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px; width:100%; max-width:860px; }
.vn-cloud{ position:absolute; inset:0; z-index:2; pointer-events:none; }
.vn-chip{ display:flex; align-items:center; gap:10px; min-width:0; padding:9px 14px 9px 9px; border-radius:14px; font-size:.86rem; line-height:1.25; }
.vn-av{ flex:none; width:32px; height:32px; border-radius:50%; display:grid; place-items:center; font-size:.72rem; font-weight:800; }
.vn-txt{ min-width:0; }
.vn-txt > *{ display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vn-fake{ position:absolute; max-width:220px; background:#25223D; border:1px dashed rgba(255,255,255,.22);
  rotate:var(--r, 0deg); animation:vn-twitch 2.4s ease-in-out var(--d, 0s) infinite;
  transition:translate .3s ease, opacity .3s ease, rotate .3s ease, border-color .2s ease, background-color .2s ease; }
.vn-fake.is-caught{ translate:0 52px; opacity:0; rotate:calc(var(--r, 0deg) * 2.6); border-color:#FF8A80; border-style:solid; background-color:#3B2133;
  transition:border-color .1s ease, background-color .1s ease, translate .45s cubic-bezier(.55,0,.75,.2) .26s, opacity .35s ease .34s, rotate .45s ease .26s; }
.vn-fake .vn-av{ background:rgba(255,255,255,.1); color:rgba(255,255,255,.6); }
.vn-fake strong{ font-weight:600; color:rgba(255,255,255,.82); }
.vn-fake em{ font-style:normal; font-weight:700; font-size:.74rem; color:#FF9D93; }
.vn-stamp{ position:absolute; right:-8px; top:-8px; width:22px; height:22px; border-radius:50%; background:#FF5E52; color:#fff;
  display:grid; place-items:center; font-size:.78rem; font-weight:800; line-height:1; opacity:0; scale:.3;
  transition:opacity .1s ease, scale .25s cubic-bezier(.34,1.56,.64,1); }
.vn-fake.is-caught .vn-stamp{ opacity:1; scale:1; }
.vn-real{ position:relative; background:#fff; box-shadow:0 14px 28px -16px rgba(0,0,0,.7); opacity:0; scale:.72; translate:0 10px;
  transition:opacity .22s ease, scale .5s cubic-bezier(.34,1.56,.64,1), translate .5s cubic-bezier(.34,1.56,.64,1); }
.vn-real.is-in{ opacity:1; scale:1; translate:0 0; }
.vn-real .vn-av{ background:#5B4FE8; color:#fff; }
.vn-real strong{ font-weight:700; color:#1B211E; }
.vn-real .vn-sub{ color:#5E6960; font-size:.78rem; }
.vn-real::after{ content:'+1'; position:absolute; right:12px; top:-6px; font-size:.82rem; font-weight:800; color:#D4CFFF; opacity:0; pointer-events:none; }
.vn-real.is-in::after{ animation:plus-up .9s ease .12s forwards; }
@keyframes vn-twitch{ 0%,100%{ transform:translate(0,0); } 25%{ transform:translate(1.5px,-1px); } 50%{ transform:translate(-1px,1.2px); } 75%{ transform:translate(1px,1px); } }
@media (max-width:900px){ .vn-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width:600px){
  .vn{ margin-top:40px; }
  .vn-ready .vn-stage{ min-height:0; padding:64px 14px 64px; border-radius:20px; }
  .vn-grid{ grid-template-columns:1fr; gap:8px; }
  .vn-fake{ max-width:168px; }
}
@media (prefers-reduced-motion:reduce){ .vn-fake{ animation:none; } .vn-scan{ display:none; } }

/* ===================================================================================================
   Ontwerp 2.0 (27 oktober 2026). De gebruiker vond de site te "basic" naast cleefio.com. Deze laag geeft de
   hele site grotere, zelfverzekerde typografie, meer ruimte, knoppen met gewicht, een header die pas bij
   scrollen een rand krijgt, en een hero met een telefoon waarin je profiel live groeit. Signatuur: donkere
   indigo "schermen" (telefoon, scanner) op crèmekleurig papier. De laag staat bewust onderaan, zodat hij de
   oudere basisregels overschrijft.
   =================================================================================================== */
body{ font-size:17px; line-height:1.65; }
h1, h2, h3{ letter-spacing:-0.025em; }
h1{ font-size:clamp(2.4rem, 6.2vw, 4.8rem); line-height:1.02; font-weight:800; letter-spacing:-0.042em; }
h2{ font-size:clamp(2rem, 4.4vw, 3.25rem); line-height:1.06; font-weight:800; letter-spacing:-0.035em; text-wrap:balance; }
h3{ font-size:1.14rem; }
.lede{ font-size:1.17rem; line-height:1.55; }
section{ padding:104px 0; }
.section-head{ max-width:62ch; margin-bottom:56px; }
.section-head h2{ margin-bottom:16px; }

/* knoppen */
.btn{ border-radius:14px; padding:14px 22px; font-size:.97rem; justify-content:center;
  transition:background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease; }
.btn-primary{ box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 12px 26px -14px rgba(69,57,201,.85); }
.btn-primary:hover{ transform:translateY(-1px); box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 16px 30px -14px rgba(69,57,201,.9); }
:root[data-sl-theme="dark"] .btn-primary:hover{ background:#7F75F8; }
.btn-outline{ background:var(--white); box-shadow:0 1px 2px rgba(23,21,43,.05); }
.btn-outline:hover{ transform:translateY(-1px); }
.btn-lg{ padding:17px 26px; font-size:1.02rem; border-radius:16px; }
.btn.nav-cta{ padding:10px 16px; font-size:.9rem; border-radius:12px; }

/* header: rustig bovenaan de pagina, met rand en schaduw zodra je scrolt */
header{ border-bottom-color:transparent; transition:border-color .3s ease, box-shadow .3s ease; }
header.is-scrolled{ border-bottom-color:var(--line); box-shadow:0 12px 30px -26px rgba(23,21,43,.45); }
.wordmark .mark{ width:30px; height:30px; border-radius:9px; }
.wordmark .mark svg{ width:16px; height:16px; }
.navlinks a{ position:relative; font-weight:600; }
.navlinks a::after{ content:''; position:absolute; left:0; right:0; bottom:-7px; height:2px; border-radius:2px; background:var(--mint);
  scale:0 1; transform-origin:left; transition:scale .25s ease; }
.navlinks a:hover::after{ scale:1 1; }

/* hero: tekst links, telefoon rechts (onder elkaar op kleinere schermen) */
.hero{ position:relative; overflow:hidden; text-align:left; padding:60px 0 88px; }
.hero-bg{ position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(38% 48% at 77% 50%, rgba(111,99,245,.20), transparent 72%); }
.hero-bg::after{ content:''; position:absolute; inset:0;
  background-image:linear-gradient(rgba(23,21,43,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(23,21,43,.055) 1px, transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(50% 62% at 76% 48%, #000, transparent 78%); mask-image:radial-gradient(50% 62% at 76% 48%, #000, transparent 78%); }
:root[data-sl-theme="dark"] .hero-bg::after{ background-image:linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); }
.hero-grid{ position:relative; z-index:1; display:grid; grid-template-columns:1fr; gap:56px; align-items:center; }
.hero-copy{ text-align:center; }
.hero .badge{ margin-bottom:24px; }
.hero h1{ max-width:12.5ch; margin:0 auto 22px; }
.hero .lede{ max-width:40ch; margin:0 auto 34px; }
/* 31 oktober: de eerste zin zegt meteen dat het organische groei is (op verzoek: "echt duidelijk") */
.lede-lead{ color:var(--ink); font-weight:700; }
.hero-cta{ margin-bottom:22px; }
.hero-note{ display:inline-flex; align-items:flex-start; gap:8px; max-width:46ch; font-size:.88rem; line-height:1.5; text-align:left; }
.hero-note svg{ flex:none; width:18px; height:18px; color:var(--mint); margin-top:1px; }
@media (min-width:1000px){
  .hero{ padding:72px 0 104px; }
  .hero-grid{ grid-template-columns:minmax(0, 1.1fr) minmax(0, .9fr); gap:40px; }
  .hero-copy{ text-align:left; }
  .hero h1, .hero .lede{ margin-left:0; }
  .hero .hero-cta{ justify-content:flex-start; }
}

/* de telefoon met het live profiel. 28 oktober: smaller en hoger, in de verhoudingen van een moderne telefoon
   (71,5 × 149,6 mm, zoals een iPhone 17): dunne randen, ronde hoeken, een pilvormige camera bovenin en een thuisbalk
   onderin. De maten rekenen mee met de breedte van de telefoon (1cqw = 1% daarvan), zodat hij op elk scherm klopt.
   Het scherm vult zich van boven naar onder: de lijst met nieuwe volgers rekt mee en toont zoveel meldingen als passen. */
.hero-visual{ position:relative; margin:0 auto; width:min(100%, 300px); container-type:inline-size; }
.phone{ position:relative; display:flex; flex-direction:column; aspect-ratio:71.5 / 149.6; min-height:0;
  padding:2.6cqw; border:3px solid transparent; border-radius:18cqw;
  background:linear-gradient(var(--screen), var(--screen)) padding-box,
    linear-gradient(150deg, #6E689C, #2A2645 30%, #35314F 62%, #5B5686) border-box;
  box-shadow:0 50px 90px -46px rgba(23,21,43,.75), 0 24px 50px -30px rgba(69,57,201,.6); }
/* zijknoppen: links een korte en twee volumeknoppen, rechts de aan/uit-knop */
.phone::before, .phone::after{ content:''; position:absolute; width:3px; background:#4C4772; }
.phone::before{ left:-6px; top:19%; height:30%; border-radius:2px 0 0 2px;
  background:linear-gradient(#4C4772 0 14%, transparent 14% 26%, #4C4772 26% 57%, transparent 57% 69%, #4C4772 69%); }
.phone::after{ right:-6px; top:29%; height:15%; border-radius:0 2px 2px 0; }
/* statusbalk: tijd links, camera in het midden, bereik, wifi en batterij rechts */
.phone-bar{ position:absolute; z-index:3; top:5.3cqw; left:2.6cqw; right:2.6cqw; height:8.6cqw;
  display:grid; grid-template-columns:1fr 29cqw 1fr; align-items:center; justify-items:center;
  font-size:4cqw; font-weight:700; line-height:1; color:var(--ink); }
.pb-island{ width:100%; height:100%; border-radius:999px; background:#07060D; }
.pb-icons{ height:3.5cqw; width:auto; display:block; }
.phone .live-card{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; max-width:none; margin:0; border:0;
  border-radius:14.4cqw; padding:16.5cqw 4.6cqw 8cqw; background:var(--cream); box-shadow:none; }
.phone .live-card::after{ content:''; position:absolute; left:50%; bottom:2.3cqw; translate:-50% 0; width:33cqw; height:1.4cqw;
  border-radius:999px; background:var(--ink); opacity:.85; }
.phone .lc-head{ gap:3.3cqw; }
.phone .lc-avatar{ width:14.6cqw; height:14.6cqw; font-size:4.2cqw; }
.phone .lc-meta strong{ font-size:4.6cqw; }
.phone .lc-meta span{ font-size:3.7cqw; }
.phone .lc-live{ font-size:3.4cqw; padding:1.3cqw 3cqw; gap:1.6cqw; }
.phone .lc-count{ flex-wrap:wrap; row-gap:2px; margin:7cqw 0 0; }
.phone .lc-count .num{ font-size:12cqw; letter-spacing:-0.03em; }
.phone .lc-count small{ font-size:4.4cqw; }
.phone .lc-count .bump{ flex-basis:100%; margin-left:0; font-size:3.9cqw; }
.phone .lc-spark{ flex:none; height:21cqw; margin-top:3cqw; }
.phone .lc-list{ margin:5.5cqw 0 0; font-size:3.7cqw; font-weight:700; color:var(--ink-soft); }
.phone .lc-toasts{ flex:1 1 0; height:auto; min-height:0; margin-top:2.6cqw; }
.phone .toast{ background:var(--white); gap:3cqw; padding:0 3cqw; }
.phone .toast .t-av{ width:9cqw; height:9cqw; font-size:3.1cqw; }
.phone .toast .t-txt strong{ font-size:4.1cqw; }
.phone .toast .t-txt span{ font-size:3.5cqw; }
.phone .toast .t-tag{ flex:none; padding:.7cqw 2.2cqw; border-radius:999px; background:var(--mint-light); font-size:3.5cqw; font-weight:800; }

/* zwevende kaartjes naast de telefoon (alleen op brede schermen) */
.hv-card{ position:absolute; z-index:4; display:none; background:var(--white); border:1px solid var(--line); border-radius:18px; padding:12px 14px;
  box-shadow:0 26px 50px -26px rgba(23,21,43,.45); font-size:.84rem; font-weight:700; color:var(--ink); animation:hv-float 6s ease-in-out infinite; }
.hv-card--aud{ left:-118px; top:35.9%; padding:10px 12px; }
.hv-card--aud .hv-label{ margin-bottom:6px; }
.hv-card--aud .hv-chips span{ padding:4px 9px; }
/* "Organische groei" met daaronder "Echte mensen, geen bots", naast het aantal volgers, zodat hij geen meldingen afdekt */
.hv-card--real{ right:-84px; top:20%; padding:10px 12px; align-items:center; gap:8px; animation-delay:-3s; }
.hv-card--real .hv-check{ width:22px; height:22px; }
.hv-real-txt{ display:flex; flex-direction:column; gap:1px; line-height:1.25; }
.hv-real-txt strong{ font-size:.88rem; font-weight:800; color:var(--ink); }
.hv-real-txt > span{ font-size:.72rem; font-weight:600; color:var(--ink-soft); white-space:nowrap; }
.hv-label{ display:block; font-size:.74rem; font-weight:600; color:var(--ink-soft); margin-bottom:8px; }
.hv-chips{ display:flex; gap:6px; }
.hv-chips span{ padding:5px 10px; border-radius:999px; background:var(--mint-light); color:var(--mint-dark); font-size:.78rem; font-weight:700; }
.hv-check{ flex:none; width:24px; height:24px; border-radius:50%; background:var(--mint); color:#fff; display:grid; place-items:center; }
.hv-check svg{ width:14px; height:14px; }
@keyframes hv-float{ 0%, 100%{ translate:0 0; } 50%{ translate:0 -9px; } }
@media (min-width:1000px){ .hero-visual{ margin-right:72px; } }
@media (min-width:601px){ .hv-card--aud{ display:block; } .hv-card--real{ display:flex; }
  /* iets meer ruimte boven "Nieuwe volgers", zodat het doelgroep-kaartje (dat 9px op en neer zweeft) niets afdekt */
  .phone .lc-list{ margin-top:9.5cqw; } }
@media (prefers-reduced-motion:reduce){ .hv-card{ animation:none; } }

@media (max-width:600px){
  section{ padding:64px 0; }
  .section-head{ margin-bottom:32px; }
  .lede{ font-size:1.05rem; }
  .hero{ padding:28px 0 56px; }
  .hero h1{ font-size:2.45rem; }
  .hero .lede{ font-size:1.05rem; margin-bottom:26px; }
  .hero-grid{ gap:40px; }
  .hero-visual{ width:min(100%, 280px); }
}

/* ----- Ontwerp 2.0: koppen en indeling per sectie ----- */
/* sectiekoppen: op brede schermen links uitgelijnd, de toelichting ernaast */
@media (min-width:1000px){
  .section-head{ display:grid; grid-template-columns:minmax(0, 1.1fr) minmax(0, .9fr); column-gap:64px; align-items:end;
    max-width:none; margin:0 0 64px; text-align:left; }
  .section-head h2{ margin:0; max-width:15ch; }
  .section-head .lede, .section-head .lede.center{ margin:0; max-width:44ch; justify-self:end; text-align:left; }
  /* .split: kop links (blijft staan terwijl je langs de inhoud scrolt), inhoud rechts */
  .split{ display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); column-gap:72px; align-items:start; }
  .split > .section-head{ display:block; position:sticky; top:118px; margin:0; }
  .split > .section-head h2{ max-width:12ch; }
  .split > .section-head .lede, .split > .section-head .lede.center{ margin:20px 0 0; max-width:36ch; }
}

/* problemen */
.problem-list{ max-width:none; }
.problem-row{ gap:20px; padding:26px 0; }
.problem-row .chip{ width:48px; height:48px; margin:0; }
.problem-row h3{ font-size:1.2rem; margin-bottom:6px; }
.problem-row p{ font-size:1rem; }
@media (min-width:1000px){ .problem-row:first-child{ padding-top:4px; } }
.vn{ margin-top:104px; }
@media (min-width:1000px){
  .vn-head{ display:grid; grid-template-columns:minmax(0, 1.1fr) minmax(0, .9fr); column-gap:64px; align-items:end; max-width:none; margin:0 0 36px; text-align:left; }
  .vn-head h3{ margin:0; font-size:clamp(1.7rem, 3vw, 2.3rem); letter-spacing:-0.03em; line-height:1.1; max-width:16ch; }
  .vn-head p{ justify-self:end; max-width:44ch; }
}

/* targeting: de radar als donker scherm */
.target-grid{ gap:28px; }
@media (min-width:800px){ .target-grid{ grid-template-columns:320px 1fr; } }
.radar-wrap{ background-color:var(--screen); border-color:transparent; border-radius:28px; padding:22px;
  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:24px 24px; box-shadow:0 30px 60px -36px rgba(23,21,43,.6); }
.radar-wrap h3{ color:rgba(255,255,255,.78); }
#radar .ring{ stroke:rgba(255,255,255,.14); }
#radar .dot-in{ fill:#8C82FF; }
#radar .dot-out{ fill:rgba(255,255,255,.6); }
#radar .plus-one{ fill:#D4CFFF; }
#radar .core-ring{ stroke:#8C82FF; }
.radar-legend{ color:rgba(255,255,255,.72); }
.radar-legend .li{ background:#8C82FF; }
.radar-legend .lo{ background:rgba(255,255,255,.6); opacity:1; }
.callout{ border-radius:28px; padding:30px 32px; border-color:var(--line); box-shadow:0 1px 2px rgba(23,21,43,.04); }
.callout p{ font-size:1.06rem; line-height:1.6; }

/* calculator */
.calc-panel{ border-radius:32px; box-shadow:0 34px 70px -46px rgba(23,21,43,.4); }
.calc-result{ border-radius:24px; }
#savingsOut, #savingsYearOut{ font-size:1.22rem; color:var(--ink); letter-spacing:-0.01em; }

/* werkwijze in de .split */
.split .process-grid.timeline{ margin:0; max-width:none; }

/* kaarten (geschikt voor, meer dan een getal) */
.aud-card{ border-radius:24px; padding:30px 28px; box-shadow:0 1px 2px rgba(23,21,43,.04); }
.aud-card .chip{ width:52px; height:52px; border-radius:16px; margin-bottom:22px; color:#fff;
  background:linear-gradient(135deg, #6F63F5, #4539C9); box-shadow:0 12px 24px -14px rgba(69,57,201,.85); }
.aud-card .chip svg{ width:24px; height:24px; }
.aud-card h3{ font-size:1.16rem; margin-bottom:8px; }
.aud-card p{ font-size:.96rem; }

/* maandrapport als app-venster */
.report{ position:relative; border-radius:28px; padding-top:76px; box-shadow:0 44px 90px -54px rgba(23,21,43,.5); }
.report::before{ content:''; position:absolute; top:23px; left:26px; width:11px; height:11px; border-radius:50%;
  background:#FF5F57; box-shadow:18px 0 0 #FEBC2E, 36px 0 0 #28C840; }
.report::after{ content:''; position:absolute; left:0; right:0; top:56px; height:1px; background:var(--line); }
.report .stat-value{ font-size:clamp(2.6rem, 5vw, 3.6rem); line-height:1.05; letter-spacing:-0.04em; }
.report .stat-delta{ font-size:.85rem; letter-spacing:0; }

/* dit zit erin: één kaart met een checklist */
.included{ background:var(--white); border:1px solid var(--line); border-radius:28px; padding:40px 44px; gap:28px 56px;
  box-shadow:0 34px 70px -50px rgba(23,21,43,.4); }
.inc-item{ background:none; border:0; border-radius:0; padding:0; gap:14px; }
.inc-item .tick{ width:28px; height:28px; }
.inc-item .tick svg{ width:14px; height:14px; }
.inc-item p{ color:var(--ink); font-size:1.03rem; line-height:1.55; }

/* prijs: één donkere kaart */
.price-card{ position:relative; overflow:hidden; display:grid; grid-template-columns:1fr; gap:36px; padding:40px; border-radius:32px;
  background:var(--screen); color:#fff; box-shadow:0 44px 90px -50px rgba(23,21,43,.8); }
.price-card::before{ content:''; position:absolute; width:560px; height:560px; right:-180px; top:-280px; pointer-events:none;
  background:radial-gradient(circle, rgba(111,99,245,.5), transparent 65%); }
.price-card > *{ position:relative; }
.price-card .pf-label{ display:block; margin-bottom:12px; font-size:.95rem; font-weight:700; letter-spacing:0; text-transform:none; color:#C9C3FF; }
.pf-line{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 14px; margin:0; }
.price-card .pf-amount{ font-size:clamp(3.8rem, 9vw, 6rem); line-height:.95; font-weight:800; letter-spacing:-0.055em; color:#fff; }
.price-card .pf-unit{ margin:0; font-size:1.06rem; color:rgba(255,255,255,.75); }
.price-card .pf-sub{ margin-top:18px; font-size:1rem; color:rgba(255,255,255,.7); }
.price-feats{ display:flex; flex-direction:column; gap:24px; }
.pfeat{ display:flex; gap:14px; align-items:flex-start; }
.pfeat-ico{ flex:none; width:30px; height:30px; border-radius:50%; display:grid; place-items:center; background:rgba(168,159,255,.18); color:#D4CFFF; }
.pfeat-ico svg{ width:15px; height:15px; }
.pfeat h3{ margin-bottom:4px; font-size:1.14rem; color:#fff; }
.pfeat p{ font-size:.97rem; color:rgba(255,255,255,.72); }
.price-feats .btn{ align-self:flex-start; margin-top:6px; }
.setup-note{ max-width:62ch; margin:28px auto 0; text-wrap:pretty; }
@media (min-width:900px){ .price-card{ grid-template-columns:1fr 1fr; gap:56px; padding:60px; align-items:center; } }
:root[data-sl-theme="dark"] .price-card, :root[data-sl-theme="dark"] .radar-wrap, :root[data-sl-theme="dark"] .vn-stage{ outline:1px solid rgba(255,255,255,.08); outline-offset:-1px; }

/* kaartenrasters: zelfde breedte als de koppen erboven */
.audience-grid.trio-grid, .audience-grid.duo-grid{ max-width:none; }

/* veiligheid */
.trust-grid{ grid-template-columns:1fr; gap:20px; max-width:none; margin:0; }
@media (min-width:700px){ .trust-grid{ grid-template-columns:1fr 1fr; max-width:none; margin:0; } }
.trust-item{ background:var(--white); border:1px solid var(--line); border-radius:24px; padding:30px 28px; }
.trust-ico{ display:grid; place-items:center; width:48px; height:48px; border-radius:14px; margin-bottom:18px; background:var(--mint-light); color:var(--mint-dark); }
.trust-ico svg{ width:24px; height:24px; }
.trust-item h3{ font-size:1.16rem; }
.split .trust-grid{ grid-template-columns:1fr; }
@media (min-width:700px){ .split .trust-item{ display:grid; grid-template-columns:48px 1fr; column-gap:22px; align-items:start; }
  .split .trust-ico{ grid-row:span 2; margin:0; } .split .trust-item h3{ margin:10px 0 8px; } }

/* veelgestelde vragen: één kolom rechts */
.faq-groups{ grid-template-columns:1fr; gap:30px; }
@media (min-width:900px){ .faq-groups{ grid-template-columns:1fr; gap:30px; } }
.faq-label{ letter-spacing:0; text-transform:none; font-size:.95rem; color:var(--ink-soft); }
details{ border-radius:18px; padding:20px 24px; }
summary{ font-size:1.06rem; }
.faq-wa{ margin-top:26px; }

/* afsluiter */
.final-band{ border-radius:36px; padding:84px 48px 56px; }
.final-band h2{ font-size:clamp(2.2rem, 5vw, 3.6rem); max-width:16ch; }
.fb-eyebrow{ letter-spacing:0; text-transform:none; font-size:.88rem; }

/* footer */
footer{ padding:72px 0 28px; }
.foot-grid{ display:grid; grid-template-columns:1fr; gap:34px; }
@media (min-width:800px){ .foot-grid{ grid-template-columns:1.7fr 1fr 1fr; } }
.foot-brand p{ margin-top:14px; max-width:36ch; font-size:.96rem; color:var(--ink-soft); }
.foot-col h3{ margin-bottom:14px; font-size:.96rem; }
.foot-links{ flex-direction:column; gap:10px; font-size:.96rem; }
.foot-bottom{ margin-top:52px; padding-top:22px; border-top:1px solid var(--line); }

@media (max-width:600px){
  .problem-row{ padding:20px 0; gap:14px; }
  .problem-row .chip{ width:42px; height:42px; }
  .problem-row h3{ font-size:1.08rem; }
  .vn{ margin-top:64px; }
  .aud-card .chip{ width:44px; height:44px; border-radius:14px; margin:0; }
  .report{ padding-top:58px; }
  .report::before{ top:18px; left:18px; }
  .report::after{ top:44px; }
  .included{ padding:26px 22px; gap:20px; border-radius:24px; }
  .price-card{ padding:30px 24px; border-radius:26px; }
  .final-band{ padding:56px 18px 22px; border-radius:26px; }
  footer{ padding:52px 0 24px; }
}

/* maandrapport: bereik & interactie (op verzoek, 28 oktober 2026) */
.report-reach{ margin-top:32px; padding-top:26px; border-top:1px solid var(--line); }
.rr-grid{ display:grid; grid-template-columns:1fr; gap:16px; }
@media (min-width:700px){ .rr-grid{ grid-template-columns:1fr 1fr; gap:20px; } }
.rr-tile{ position:relative; overflow:hidden; display:flex; flex-direction:column; border:1px solid var(--line); border-radius:20px; padding:20px 22px 0; background:var(--cream); }
.rr-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.rr-label{ font-size:.92rem; color:var(--ink-soft); }
.rr-val{ margin-top:4px; font-size:clamp(2rem, 3.6vw, 2.6rem); font-weight:800; letter-spacing:-0.035em; line-height:1.1; color:var(--ink); font-variant-numeric:tabular-nums; }
.rr-sub{ margin-top:2px; font-size:.8rem; color:var(--ink-soft); }
.rr-spark{ display:block; flex:none; width:calc(100% + 44px); height:44px; margin:auto -22px 0; padding-top:14px; box-sizing:content-box; }
.rr-area{ fill:var(--mint-light); }
.rr-line{ fill:none; stroke:var(--mint); stroke-width:2.5; vector-effect:non-scaling-stroke; }

/* veelgestelde vragen: kop bovenaan, de vragen in twee kolommen met precies dezelfde opbouw
   (28 oktober: eerst stond de kop alleen in een lege linkerkolom, daarna liepen de kolommen niet gelijk).
   Elke kolom heeft een groep van drie en een groep van twee vragen, zodat de rijen naast elkaar op één lijn
   staan en beide kolommen op dezelfde hoogte eindigen. Daaronder de WhatsApp-balk over de volle breedte. */
.faq-col{ display:flex; flex-direction:column; gap:30px; }
.faq-group details:last-child{ margin-bottom:0; }
.faq-contact{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px 24px;
  margin-top:30px; padding:22px 26px; border-radius:18px; background:var(--mint-light); }
.faq-contact p{ font-weight:600; color:var(--ink); line-height:1.45; }
.faq-contact .faq-wa{ margin-top:0; }
/* pas vanaf 1000px naast elkaar: smaller lopen sommige vragen over twee regels en schuiven de rijen uit elkaar */
@media (min-width:1000px){
  .faq-groups{ grid-template-columns:1fr 1fr; gap:30px 32px; align-items:start; }
}
@media (max-width:560px){
  .faq-contact{ padding:20px; }
  .faq-contact .faq-wa{ width:100%; justify-content:center; }
}

/* klanten (28 oktober): hun profielfoto's als ronde bolletjes met een indigo ring (dezelfde ring als om de avatar in de
   hero), in een strook die langzaam doorloopt (ongeveer 28 px per seconde), ook als je erop wijst (op verzoek, 29 oktober).
   animations.js zet de set dubbel en voegt .is-looping toe; met "minder beweging" staan ze stil in rijen.
   Afscherming: geen namen, geen links, één beeldbestand met de vakjes door elkaar en gespiegeld, één label via ATTR a6,
   noimageindex, robots.txt en _headers (zie CLAUDE.md). */
.clients{ padding:10px 0 34px; -webkit-touch-callout:none; -webkit-user-select:none; user-select:none; }
.clients-label{ text-align:center; font-size:.86rem; color:var(--ink-soft); margin:0 0 16px; text-wrap:balance; }
.clients-marquee{ overflow:hidden; }
.clients-track{ list-style:none; margin:0 auto; padding:4px 16px; display:flex; flex-wrap:wrap; justify-content:center; gap:16px 22px; max-width:1100px; }
.clients-track li{ flex:none; width:84px; height:84px; padding:3px; border-radius:50%;
  background:conic-gradient(from 210deg, var(--mint), #C4BDFF, var(--mint-dark), #8C82FF, var(--mint)); }
/* het beeld is één vakje uit strook.webp: daarin staan alle klanten door elkaar en gespiegeld (tools/klanten-strook.py).
   --x/--y op het bolletje kiezen het vakje, --cols/--rows op de lijst geven de maat van het raster, en scaleX(-1)
   spiegelt het vakje terug. Zo staan er geen losse klantlogo's online en geen bestandsnamen per klant in de pagina. */
.clients-track li::before{ content:''; display:block; box-sizing:border-box; width:100%; height:100%; border-radius:50%; border:3px solid var(--cream);
  background:url("../clients/strook.webp") no-repeat;
  background-size:calc(var(--cols) * 100%) calc(var(--rows) * 100%);
  background-position:calc(var(--x) * 100% / (var(--cols) - 1)) calc(var(--y) * 100% / (var(--rows) - 1));
  transform:scaleX(-1); }
.clients-track li{ -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
.clients-track .dup{ display:none; }
.clients-marquee.is-looping{ -webkit-mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.clients-marquee.is-looping .clients-track{ flex-wrap:nowrap; justify-content:flex-start; width:max-content; max-width:none; padding:4px 0;
  animation:clients-scroll 75s linear infinite; }
.clients-marquee.is-looping .clients-track .dup{ display:block; }
/* één set verder = 50% van de strook plus een halve tussenruimte, zodat de lus naadloos is */
@keyframes clients-scroll{ to{ transform:translateX(calc(-50% - 11px)); } }
/* onder 1000px staat de telefoon onderaan de hero, die alles daarbuiten afsnijdt: een kortere schaduw voorkomt een harde rand */
@media (max-width:999px){
  .phone{ box-shadow:0 30px 56px -36px rgba(23,21,43,.7), 0 16px 34px -24px rgba(69,57,201,.55); }
}
@media (max-width:600px){
  .clients{ padding:4px 0 26px; }
  .clients-track{ gap:12px 16px; }
  .clients-track li{ width:66px; height:66px; padding:2.5px; }
  .clients-track li::before{ border-width:2.5px; }
  @keyframes clients-scroll{ to{ transform:translateX(calc(-50% - 8px)); } }
}
@media (prefers-reduced-motion:reduce){
  .clients-marquee.is-looping{ -webkit-mask-image:none; mask-image:none; }
  .clients-marquee.is-looping .clients-track{ animation:none; flex-wrap:wrap; justify-content:center; width:auto; max-width:1100px; padding:4px 16px; }
  .clients-marquee.is-looping .clients-track .dup{ display:none; }
}
/* de niche-strook staat sinds 28 oktober onderaan "Geschikt voor" (onder de hero staat nu de klantenstrook) */
#doelgroep .niches{ padding:56px 0 0; }
@media (max-width:600px){ #doelgroep .niches{ padding-top:40px; } }

/* ----- telefoon (31 oktober: "goed op de telefoon, met de leuke functies") ----- */
/* de zwevende kaartjes ook op een telefoon: kleiner, "Jouw doelgroep" links over de grafiek en "Organische groei"
   rechtsonder over de rand van de telefoon (onder de laatste melding), en ze zweven minder ver */
@media (max-width:600px){
  .hv-card{ border-radius:13px; box-shadow:0 18px 36px -20px rgba(23,21,43,.45); }
  .hv-card--aud{ display:block; left:-14px; top:35.5%; padding:7px 9px; }
  .hv-card--aud .hv-label{ font-size:.64rem; margin-bottom:4px; }
  .hv-card--aud .hv-chips{ gap:4px; }
  .hv-card--aud .hv-chips span{ font-size:.66rem; padding:3px 7px; }
  .hv-card--real{ display:flex; right:-14px; top:auto; bottom:-22px; padding:8px 10px; gap:7px; }
  .hv-card--real .hv-check{ width:18px; height:18px; }
  .hv-card--real .hv-check svg{ width:11px; height:11px; }
  .hv-real-txt strong{ font-size:.76rem; }
  .hv-real-txt > span{ font-size:.64rem; }
  @keyframes hv-float{ 0%, 100%{ translate:0 0; } 50%{ translate:0 -5px; } }
  /* calculator: het label mag over twee regels, zodat het bedrag rechts op dezelfde regel blijft; past zelfs dat niet
     (heel smalle schermen), dan zakt het bedrag rechts uitgelijnd naar de volgende regel in plaats van uit beeld te lopen */
  .calc-sub{ flex-wrap:wrap; }
  .calc-sub > span:first-child{ flex:1 1 0; }
  .calc-sub > span:nth-child(2){ margin-left:auto; }
  /* taalknop: groter vlak om op te tikken */
  .lang-toggle{ min-height:40px; padding:6px 8px; margin-left:2px; }
  /* filter-labels bij de targeting: even breed onder elkaar, ook als een label over twee regels loopt */
  .filter-tags{ flex-direction:column; align-items:stretch; }
  .filter-tags > span{ border-radius:16px; padding:8px 12px; line-height:1.4; }
  .filter-tags span{ font-size:.78rem; }
  .filter-tags span span{ padding:0; background:none; border-radius:0; }
}
/* veelgestelde vragen: de hele rij is aan te tikken (de ruimte zit nu in de vraag zelf, niet eromheen) */
#faq details{ padding:0; }
#faq summary{ padding:20px 24px; }
#faq .faq-a{ padding:0 24px 20px; }
@media (max-width:600px){ #faq summary{ padding:16px 18px; } #faq .faq-a{ padding:0 18px 16px; } }

/* ----- telefoon: verhoudingen (31 oktober 2026: "op de telefoon niet goed in verhouding", de desktop is "echt perfect") -----
   Alles hieronder geldt alleen tot en met 600 px, dus de desktop verandert niet. Eén rustige schaal: sectiekoppen ±29 px,
   kaarttitels 17 px met een strakke regelafstand, tekst in kaarten 15 px, kaarten 20 px binnenruimte, knoppen ±50 px hoog.
   Kaarten met een icoon: icoon en titel naast elkaar, de tekst eronder over de volle breedte. */
@media (max-width:600px){
  /* koppen en ruimte tussen secties */
  .hero h1{ font-size:clamp(2.1rem, 10vw, 2.45rem); }
  h2{ font-size:clamp(1.6rem, 7.4vw, 1.9rem); line-height:1.1; letter-spacing:-0.032em; }
  .final-band h2{ font-size:clamp(1.75rem, 8vw, 2rem); }
  h3{ line-height:1.3; }
  .vn-head h3{ font-size:1.4rem; line-height:1.15; font-weight:800; letter-spacing:-0.03em; }
  section{ padding:56px 0; }
  .section-head{ margin-bottom:28px; }
  .section-head h2{ margin-bottom:12px; }

  /* knoppen: niet zo hoog (de regelafstand van de lopende tekst maakte ze dik) */
  .btn{ line-height:1.25; text-align:center; }
  .btn-lg{ padding:15px 20px; font-size:1rem; border-radius:14px; }
  .price-feats .btn{ align-self:stretch; padding:15px 12px; font-size:.95rem; }

  /* hero: de regel met het schildje gecentreerd onder de knoppen, net als de rest van de hero */
  .hero-note{ display:block; max-width:34ch; margin:0 auto; text-align:center; font-size:.85rem; }
  .hero-note svg{ display:inline-block; width:16px; height:16px; margin:0 5px 0 0; vertical-align:-3px; }

  /* kaarten met een icoon (Geschikt voor, Meer dan alleen een getal, Veiligheid) */
  .aud-card, .trust-item{ display:grid; grid-template-columns:44px minmax(0, 1fr); column-gap:14px; row-gap:10px; align-items:center;
    padding:20px; border-radius:20px; }
  .aud-card .chip, .trust-ico{ grid-row:auto; width:44px; height:44px; border-radius:13px; margin:0; }
  .aud-card .chip svg, .trust-ico svg{ width:22px; height:22px; }
  .aud-card h3, .trust-item h3{ margin:0; font-size:1.08rem; line-height:1.25; }
  .aud-card p, .trust-item p{ grid-column:1 / -1; font-size:.95rem; line-height:1.55; }
  .trust-grid{ gap:14px; }

  /* overige titels en teksten in kaarten */
  .problem-row h3, .timeline .pstep h3, .pfeat h3{ font-size:1.08rem; line-height:1.25; }
  .problem-row h3, .timeline .pstep h3{ margin-bottom:6px; }
  .problem-row p, .timeline .pstep p, .pfeat p{ font-size:.95rem; line-height:1.55; }
  .callout{ padding:22px 18px; border-radius:22px; }
  .callout p{ font-size:1rem; line-height:1.6; }
  .included{ padding:22px 20px; gap:16px; }
  .inc-item p{ font-size:1rem; line-height:1.5; }
  .inc-item .tick{ width:26px; height:26px; }
  .price-card{ padding:28px 18px; }
  .price-card .pf-sub{ font-size:.95rem; }

  /* calculator: label en bedrag op één lijn, ook als het label over twee regels loopt */
  .calc-sub{ line-height:1.35; }
  .calc-sub:not(.has-bar){ align-items:baseline; }

  /* veelgestelde vragen: iets kleiner, zodat de meeste vragen op één of twee strakke regels passen */
  #faq summary{ font-size:1rem; line-height:1.4; }

  /* afsluiter: de vinkjes netjes onder elkaar in plaats van elk regeltje apart gecentreerd */
  .fb-perks{ flex-direction:column; align-items:flex-start; width:max-content; max-width:100%; gap:8px; margin:0 auto 26px; text-align:left; }

  /* footer: de links per rijtje naast elkaar (in plaats van één lange kolom); naast elkaar in twee kolommen paste
     het e-mailadres niet op smalle telefoons */
  .foot-grid{ gap:28px; }
  .foot-col h3{ margin-bottom:10px; }
  .foot-links{ flex-direction:row; flex-wrap:wrap; gap:6px 20px; }
  .foot-bottom{ margin-top:36px; }
}
/* heel smalle telefoons (320 px): knopteksten iets kleiner, zodat ze op één regel blijven */
@media (max-width:340px){
  .btn-lg, .faq-wa{ font-size:.9rem; padding-left:12px; padding-right:12px; }
}
/* heel smalle telefoons (onder 360 px): de langere naam GrowthSourced (3 november) past dan naast de knoppen in de header */
@media (max-width:359px){
  .nav.wrap{ padding-left:14px; padding-right:14px; }
  .nav{ gap:8px; }
  .wordmark{ font-size:1rem; }
  .lang-toggle{ padding:6px 5px; }
  .theme-toggle{ margin-left:4px; }
}