:root { --ink:#17231f; --muted:#61706a; --green:#176b55; --green-dark:#0b4638; --mint:#dcebe3; --paper:#f4f3ee; --white:#fff; --line:#d7ddd8; --gold:#c8953d; --coral:#d86f54; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
a { color:inherit; text-decoration:none; }
.site-header { height:76px; padding:0 max(24px,calc((100vw - 1200px)/2)); display:flex; align-items:center; gap:42px; background:rgba(244,243,238,.96); border-bottom:1px solid var(--line); position:relative; z-index:5; }
.site-brand { display:flex; align-items:center; gap:10px; font-weight:800; font-size:18px; }
.brand-logo { display:block; width:190px; height:auto; }
.brand-mark,.mini-mark { display:grid; place-items:center; color:#fff; background:var(--green); font-weight:900; }
.brand-mark { width:34px; height:34px; border-radius:6px; }
.site-header nav { display:flex; gap:30px; margin-left:auto; color:var(--muted); font-size:14px; font-weight:650; }
.site-header nav a:hover { color:var(--green); }
.header-login { color:var(--green-dark); border:1px solid #9db8ae; border-radius:6px; padding:9px 15px; font-weight:750; font-size:14px; }
.hero { min-height:calc(100vh - 76px); overflow:hidden; background:linear-gradient(115deg,#e6eee7 0 58%,#d6e3dd 58%); }
.hero-inner { max-width:1200px; min-height:calc(100vh - 76px); margin:auto; padding:72px 24px 0; display:flex; flex-direction:column; align-items:flex-start; }
.eyebrow { margin:0 0 18px; color:var(--green); font-size:13px; font-weight:850; letter-spacing:0; text-transform:uppercase; }
.hero h1 { max-width:820px; margin:0; font-family:Georgia,"Times New Roman",serif; font-size:clamp(48px,6.2vw,88px); line-height:.98; font-weight:500; letter-spacing:0; }
.hero-copy { max-width:660px; margin:24px 0 0; color:#43534d; font-size:20px; line-height:1.55; }
.hero-actions { display:flex; align-items:center; gap:20px; margin-top:30px; }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:0 20px; border-radius:6px; font-size:15px; font-weight:800; }
.button.primary { color:#fff; background:var(--green); }
.button.primary:hover { background:var(--green-dark); }
.text-button { color:var(--green-dark); }
.text-button span { margin-left:9px; }
.product-window { width:100%; margin-top:58px; background:#f9fbf9; border:1px solid #afc0b8; border-bottom:0; border-radius:8px 8px 0 0; box-shadow:0 30px 70px rgba(27,59,47,.17); overflow:hidden; }
.window-bar { height:54px; padding:0 20px; display:flex; align-items:center; justify-content:space-between; background:#fff; border-bottom:1px solid #dce3df; font-size:13px; }
.window-brand { display:flex; align-items:center; gap:9px; font-weight:800; }
.mini-mark { width:25px; height:25px; border-radius:4px; font-size:12px; }
img.mini-mark { display:block; background:none; }
.window-user { color:var(--muted); }
.window-body { min-height:390px; display:grid; grid-template-columns:190px 1fr; }
.preview-nav { padding:28px 20px; display:flex; flex-direction:column; gap:8px; color:#78847f; background:#f0f4f1; border-right:1px solid #dce3df; font-size:13px; }
.preview-nav strong,.preview-nav span { padding:10px 12px; }
.preview-nav strong { color:var(--green-dark); background:#dcebe3; border-radius:5px; }
.preview-content { padding:28px; min-width:0; }
.preview-heading,.preview-card-title { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.preview-heading h2 { margin:3px 0 0; font-size:23px; }
.preview-heading small,.preview-heading>span,.preview-content small { color:#78847f; }
.preview-heading>span { font-size:12px; }
.preview-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:24px 0 14px; }
.preview-stats article,.preview-columns article { background:#fff; border:1px solid #dce3df; border-radius:6px; padding:17px; }
.preview-stats strong { display:block; margin:8px 0 3px; font-size:21px; }
.preview-stats span { font-size:11px; color:#78847f; }.preview-stats .positive { color:var(--green); }
.preview-columns { display:grid; grid-template-columns:1.45fr 1fr; gap:14px; }
.preview-card-title span { color:var(--green); font-size:11px; }.preview-card-title strong { font-size:14px; }
.preview-columns ul { margin:13px 0 0; padding:0; list-style:none; }.preview-columns li { display:flex; align-items:center; gap:11px; padding:10px 0; border-top:1px solid #edf0ee; }.preview-columns b,.preview-columns small { display:block; font-size:11px; }.preview-columns small { margin-top:3px; }
.dot { width:8px; height:8px; border-radius:50%; flex:0 0 auto; }.dot.green { background:var(--green); }.dot.gold { background:var(--gold); }.dot.coral { background:var(--coral); }
.bars { height:112px; margin:18px 0 10px; display:flex; align-items:flex-end; gap:9px; border-bottom:1px solid #cfd8d3; }.bars i { flex:1; min-width:8px; background:var(--green); border-radius:3px 3px 0 0; opacity:.82; }
.trust-strip { min-height:82px; padding:20px max(24px,calc((100vw - 1200px)/2)); display:flex; align-items:center; justify-content:space-between; gap:24px; color:#4c5b55; background:#fff; border-bottom:1px solid var(--line); font-size:13px; font-weight:750; }
.trust-strip span::before { content:"✓"; color:var(--green); margin-right:8px; }
.section { max-width:1200px; margin:auto; padding:110px 24px; }
.section-heading { max-width:700px; }.section h2,.contact-band h2 { margin:0; font-family:Georgia,"Times New Roman",serif; font-weight:500; font-size:46px; line-height:1.08; }.section-heading>p:last-child,.feature-intro>p:not(.eyebrow) { color:var(--muted); font-size:18px; line-height:1.6; }
.audience-grid { margin-top:56px; display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid #bdc8c1; }
.audience-grid article { padding:30px 36px 8px 0; border-right:1px solid #bdc8c1; }.audience-grid article+article { padding-left:36px; }.audience-grid article:last-child { border-right:0; }
.number { color:var(--green); font-size:13px; font-weight:850; }.audience h3 { margin:48px 0 14px; font-size:22px; }.audience article p { color:var(--muted); line-height:1.65; }
.features { max-width:none; padding-left:max(24px,calc((100vw - 1200px)/2)); padding-right:max(24px,calc((100vw - 1200px)/2)); display:grid; grid-template-columns:.8fr 1.2fr; gap:100px; color:#fff; background:var(--green-dark); }
.features .eyebrow { color:#9ed1ba; }.feature-intro>p:not(.eyebrow) { color:#bdcec7; }.feature-list { border-top:1px solid #54766a; }.feature-list article { padding:27px 0; display:grid; grid-template-columns:52px 1fr; border-bottom:1px solid #54766a; }.feature-list article>span { color:#9ed1ba; font-size:13px; }.feature-list h3 { margin:0 0 8px; font-size:20px; }.feature-list p { margin:0; color:#bdcec7; line-height:1.55; }
.proof { display:grid; grid-template-columns:1.4fr .6fr; gap:80px; align-items:end; }.proof blockquote { margin:0; font-family:Georgia,"Times New Roman",serif; font-size:38px; line-height:1.25; }.proof>div { display:grid; gap:7px; padding-left:24px; border-left:3px solid var(--gold); }.proof span { color:var(--muted); line-height:1.5; }
.contact-band { padding:80px max(24px,calc((100vw - 1200px)/2)); display:grid; grid-template-columns:1fr .7fr; gap:100px; color:#fff; background:var(--green); }.contact-band .eyebrow { color:#bce0d1; }.contact-copy p { color:#d6e8e0; line-height:1.6; font-size:17px; }.button.light { margin-top:12px; color:var(--green-dark); background:#fff; border:0; cursor:pointer; }.contact-form { display:grid; gap:14px; margin-top:24px; }.field-row { display:grid; gap:6px; }.field-pair { display:grid; grid-template-columns:1fr 1fr; gap:12px; }.contact-form label { color:#eef7f3; font-size:13px; font-weight:750; }.contact-form input:not([type="checkbox"]),.contact-form textarea { width:100%; padding:11px 12px; color:var(--ink); background:#fff; border:1px solid #a8c7ba; border-radius:5px; font:inherit; }.contact-form textarea { resize:vertical; }.privacy-row { display:flex; align-items:flex-start; gap:8px; line-height:1.4; }.privacy-row input { margin-top:3px; }.errorlist { margin:0; padding:0; color:#fff3bf; list-style:none; font-size:12px; }.contact-success { display:grid; gap:8px; margin-top:24px; padding:20px; color:var(--green-dark); background:#fff; border-radius:6px; }.contact-success span { color:var(--muted); }
footer { min-height:80px; padding:20px max(24px,calc((100vw - 1200px)/2)); display:flex; align-items:center; justify-content:space-between; color:#81908a; background:#102b23; font-size:13px; }
@media (max-width:800px) { .site-header { height:68px; padding:0 18px; }.site-header nav { display:none; }.site-brand { font-size:16px; }.brand-logo { width:172px; }.header-login { margin-left:auto; }.hero { min-height:auto; background:#e6eee7; }.hero-inner { min-height:auto; padding:54px 18px 0; }.hero h1 { font-size:50px; }.hero-copy { font-size:18px; }.hero-actions { align-items:stretch; flex-direction:column; width:100%; }.product-window { margin-top:44px; }.window-body { grid-template-columns:1fr; }.preview-nav { display:none; }.preview-content { padding:18px; }.preview-stats { grid-template-columns:1fr 1fr; }.preview-stats article:last-child { display:none; }.preview-columns { grid-template-columns:1fr; }.preview-columns article:last-child { display:none; }.trust-strip { justify-content:flex-start; flex-wrap:wrap; }.section { padding:78px 20px; }.section h2,.contact-band h2 { font-size:38px; }.audience-grid,.features,.proof,.contact-band { grid-template-columns:1fr; }.audience-grid article,.audience-grid article+article { padding:26px 0; border-right:0; border-bottom:1px solid #bdc8c1; }.audience h3 { margin:22px 0 10px; }.features { gap:48px; padding:78px 20px; }.proof { gap:40px; }.proof blockquote { font-size:31px; }.contact-band { gap:32px; padding:68px 20px; } }
@media (max-width:440px) { .brand-logo { width:148px; }.hero h1 { font-size:43px; }.window-user { display:none; }.preview-stats { grid-template-columns:1fr; }.preview-stats article:nth-child(2) { display:none; }.trust-strip { display:grid; grid-template-columns:1fr 1fr; }.trust-strip span { line-height:1.4; }.field-pair { grid-template-columns:1fr; } }

.site-language select { padding:8px; color:var(--green-dark); background:transparent; border:1px solid #9db8ae; border-radius:6px; font:inherit; font-weight:750; cursor:pointer; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

@media (max-width:800px) {
  .site-header { gap:10px; }
  .site-brand { margin-right:auto; }
  .header-login { margin-left:0; }
}

/* Prijzen */
.pricing-head { display:flex; align-items:flex-end; justify-content:space-between; gap:40px; flex-wrap:wrap; }
.billing-toggle { position:relative; display:inline-flex; margin:0; padding:4px; background:#fff; border:1px solid var(--line); border-radius:999px; }
.billing-toggle input { position:absolute; opacity:0; width:1px; height:1px; }
.billing-toggle label { display:inline-flex; align-items:center; gap:8px; min-height:42px; padding:0 20px; border-radius:999px; color:var(--muted); font-size:15px; font-weight:800; cursor:pointer; transition:background .2s,color .2s; }
.billing-toggle input:checked + label { color:#fff; background:var(--green); }
.billing-toggle input:focus-visible + label { outline:3px solid var(--gold); outline-offset:2px; }
.billing-save { padding:2px 7px; color:var(--green-dark); background:var(--mint); border-radius:999px; font-size:12px; }
.billing-note { margin:28px 0 0; color:var(--muted); font-size:15px; }
.pricing-grid { margin-top:22px; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px; }
.price-card { display:flex; flex-direction:column; gap:6px; padding:24px 20px; background:#fff; border:1px solid var(--line); border-radius:8px; }
.price-card p { margin:0; }
.price-units { margin:0 0 10px; color:var(--green); font-size:14px; font-weight:850; text-transform:uppercase; }
.price-amount strong { display:block; font-family:Georgia,"Times New Roman",serif; font-size:36px; font-weight:500; line-height:1.1; white-space:nowrap; }
.price-amount span { color:var(--muted); font-size:14px; }
.price-sub { color:var(--muted); font-size:14px; line-height:1.45; }
.price-badge { width:fit-content; margin-top:10px !important; padding:5px 10px; line-height:1.35; color:var(--green-dark); background:var(--mint); border-radius:999px; font-size:12px; font-weight:800; }
.price-card-custom { background:var(--green-dark); border-color:var(--green-dark); color:#fff; }
.price-card-custom .price-units { color:#9ed1ba; }
.price-card-custom .price-amount strong { font-size:28px; white-space:normal; }
.price-card-custom .price-sub { color:#bdcec7; }
.price-card-custom .button { margin-top:auto; padding:10px 14px; color:var(--green-dark); background:#fff; text-align:center; line-height:1.25; }
.price-card-custom .button:hover { background:var(--mint); }
.pricing .button:focus-visible, .site-header a:focus-visible { outline:3px solid var(--gold); outline-offset:2px; }
.pricing-included { margin-top:28px; display:grid; grid-template-columns:1.4fr .6fr; gap:40px; align-items:center; padding:28px 30px; background:#fff; border:1px solid var(--line); border-radius:8px; }
.pricing-included h3 { margin:0 0 16px; font-size:18px; }
.pricing-included ul { margin:0; padding:0; list-style:none; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px 24px; }
.pricing-included li { font-size:15px; line-height:1.4; }
.pricing-included li::before { content:"✓"; color:var(--green); font-weight:900; margin-right:8px; }
.pricing-extra { display:grid; gap:16px; padding-left:30px; border-left:3px solid var(--gold); }
.pricing-extra p { margin:0; color:var(--muted); line-height:1.55; }
/* Maand/jaar tonen: via :has() en als terugval via data-billing (gezet door het script). */
.pricing .show-yearly { display:none; }
.pricing:has(#billing-yearly:checked) .show-yearly, .pricing[data-billing="yearly"] .show-yearly { display:block; }
.pricing:has(#billing-yearly:checked) .show-monthly, .pricing[data-billing="yearly"] .show-monthly { display:none; }
@media (max-width:1240px) { .price-amount strong { font-size:32px; } }
@media (max-width:1100px) { .pricing-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .price-card-custom { grid-column:1 / -1; } .pricing-included { grid-template-columns:1fr; } .pricing-extra { padding-left:0; padding-top:20px; border-left:0; border-top:3px solid var(--gold); } }
@media (max-width:640px) { .pricing-grid { grid-template-columns:1fr; } .pricing-included ul { grid-template-columns:1fr; } .pricing-included { padding:22px 20px; } .billing-toggle { width:100%; } .billing-toggle label { flex:1; justify-content:center; padding:0 12px; } }

/* ---------------------------------------------------------------- Tegelmotief uit het logo */
/* Mini-icoon: 2x2 tegels in de verhoudingen van het logo (22/18), met de koraalrode stip. */
.tile-glyph { position:relative; display:inline-grid; grid-template-columns:11fr 9fr; grid-template-rows:11fr 9fr; gap:2px; width:24px; height:24px; padding:4px; margin-right:10px; vertical-align:middle; background:var(--green); border-radius:7px; }
.tile-glyph i { border-radius:2px; background:rgba(255,255,255,.22); transition:background .3s; }
.tile-glyph b { position:absolute; left:54%; top:54%; width:5px; height:5px; border-radius:50%; background:var(--coral); transform:translate(-50%,-50%); }
.tile-glyph.on-1 i:nth-child(1),.tile-glyph.on-2 i:nth-child(2),.tile-glyph.on-3 i:nth-child(3),.tile-glyph.on-4 i:nth-child(4) { background:#fff; }
.tile-glyph.fill-1 i:nth-child(-n+1),.tile-glyph.fill-2 i:nth-child(-n+2),.tile-glyph.fill-3 i:nth-child(-n+3),.tile-glyph.fill-4 i { background:#fff; }
.tile-glyph.fill-1 i:nth-child(2),.tile-glyph.fill-2 i:nth-child(3),.tile-glyph.fill-3 i:nth-child(4) { background:rgba(255,255,255,.22); }
.tile-glyph:not(.fill-4) b { opacity:0; }
.audience .tile-glyph b { opacity:1; }
.number { display:flex; align-items:center; }
.tile-glyph-price { width:34px; height:34px; padding:6px; gap:3px; border-radius:10px; margin:0 0 12px; }
.tile-glyph-price b { width:7px; height:7px; }
.tile-glyph-price-custom { width:34px; height:34px; padding:6px; gap:3px; border-radius:10px; margin:0 0 12px; background:#fff; }
.tile-glyph-price-custom i { background:var(--mint) !important; }
.tile-glyph-price-custom i:nth-child(1),.tile-glyph-price-custom i:nth-child(4) { background:#b9d8c9 !important; }
.tile-glyph-price-custom b { width:7px; height:7px; opacity:1; }
.price-card:hover .tile-glyph-price i:nth-child(n) { transition-delay:0s; }

/* Groot icoon: vier tegels die samenkomen rond de stip. Maten volgen het logo (x7). */
.tile-cluster { --u:7px; position:absolute; width:calc(76 * var(--u)); height:calc(76 * var(--u)); pointer-events:none; }
.tc-frame { position:absolute; inset:0; border:2px dashed rgba(23,107,85,.28); border-radius:calc(18 * var(--u)); }
.tc-tile { position:absolute; border-radius:calc(5 * var(--u)); box-shadow:0 18px 40px -18px rgba(11,70,56,.45); animation:tc-assemble 1.1s cubic-bezier(.2,.8,.2,1) both, tc-float 7s ease-in-out 1.2s infinite; }
.tc-1 { left:calc(16 * var(--u)); top:calc(16 * var(--u)); width:calc(22 * var(--u)); height:calc(22 * var(--u)); background:#fff; --from:translate(-46px,-40px) rotate(-8deg); }
.tc-2 { left:calc(42 * var(--u)); top:calc(16 * var(--u)); width:calc(18 * var(--u)); height:calc(22 * var(--u)); background:#cfe3d8; --from:translate(52px,-34px) rotate(9deg); animation-delay:.08s, 2s; }
.tc-3 { left:calc(16 * var(--u)); top:calc(42 * var(--u)); width:calc(22 * var(--u)); height:calc(18 * var(--u)); background:#cfe3d8; --from:translate(-40px,48px) rotate(7deg); animation-delay:.16s, 2.8s; }
.tc-4 { left:calc(42 * var(--u)); top:calc(42 * var(--u)); width:calc(18 * var(--u)); height:calc(18 * var(--u)); background:var(--green); --from:translate(44px,44px) rotate(-10deg); animation-delay:.24s, 3.6s; }
.tc-dot { position:absolute; left:calc(36 * var(--u)); top:calc(36 * var(--u)); width:calc(10 * var(--u)); height:calc(10 * var(--u)); border-radius:50%; background:var(--coral); box-shadow:0 0 0 calc(2 * var(--u)) rgba(216,111,84,.18); animation:tc-dot-in .5s .9s cubic-bezier(.2,.8,.2,1.4) both; }
@keyframes tc-assemble { from { opacity:0; transform:var(--from); } to { opacity:1; transform:none; } }
@keyframes tc-float { 0%,100% { translate:0 0; } 50% { translate:0 -6px; } }
@keyframes tc-dot-in { from { opacity:0; transform:scale(.2); } to { opacity:1; transform:none; } }

.hero { background:linear-gradient(180deg,#e6eee7,#dde9e2); }
.hero-inner { position:relative; }
.tile-cluster-hero { --u:4.4px; right:24px; top:236px; }
.hero-inner > :not(.tile-cluster) { position:relative; z-index:1; }

.feature-intro { position:relative; }

@media (max-width:1320px) { .tile-cluster-hero { --u:3.8px; top:280px; } }
@media (max-width:1180px) { .tile-cluster-hero { --u:3.2px; top:320px; } }
@media (max-width:1000px) { .tile-cluster-hero { display:none; } }
@media (prefers-reduced-motion:reduce) { .tc-tile,.tc-dot { animation:none; } }

/* ---------------------------------------------------------------- Sectiescheiding en tegelpatroon */
body { overflow-x:clip; }
/* Achtergronden over de volle breedte, terwijl de inhoud in de kolom van 1200px blijft. */
.pricing { position:relative; isolation:isolate; }
/* Geen eigen stapelcontext voor het citaat: zo ligt het icoonfragment boven de witte band, maar onder de tekst. */
.proof { position:relative; }
.proof > * { position:relative; z-index:1; }
.proof::before, .pricing::before { content:""; position:absolute; top:0; bottom:0; left:calc(50% - 50vw); right:calc(50% - 50vw); z-index:-1; }
.proof::before { background:#fff; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.pricing::before { background:linear-gradient(180deg,#e3ede6 0%,#edf3ef 100%); }

.pricing .billing-toggle { box-shadow:0 6px 18px -10px rgba(11,70,56,.35); }
.pricing .price-card:not(.price-card-custom), .pricing .pricing-included { box-shadow:0 14px 30px -22px rgba(11,70,56,.45); }

/* Overgang citaat -> prijzen: een uitvergroot fragment van het icoon dat over de naad ligt. */
.pricing-accent { position:absolute; top:-260px; right:calc(50% - 50vw - 220px); width:520px; height:520px; z-index:-1; pointer-events:none; }
.pa-tile { position:absolute; border-radius:23%; }
.pa-tile-large { top:0; right:0; width:380px; height:380px; background:#d3e5da; }
/* De donkere tegel ligt precies op de naad tussen citaat en prijzen, met de stip op het raakpunt. */
.pa-tile-dark { top:208px; right:400px; width:104px; height:104px; background:var(--green); border-radius:24px; box-shadow:0 20px 40px -20px rgba(11,70,56,.6); }
.pa-dot { position:absolute; top:188px; right:380px; width:40px; height:40px; border-radius:50%; background:var(--coral); box-shadow:0 0 0 10px rgba(216,111,84,.14); animation:pa-pulse 4s ease-in-out infinite; }
@keyframes pa-pulse { 0%,100% { box-shadow:0 0 0 10px rgba(216,111,84,.14); } 50% { box-shadow:0 0 0 18px rgba(216,111,84,.05); } }
/* Verkleinen vanaf de naad (260px van boven), zodat de donkere tegel op de overgang blijft liggen. */
@media (max-width:1320px) { .pricing-accent { transform:scale(.75); transform-origin:100% 260px; } }
@media (max-width:1160px) { .pricing-accent { transform:scale(.6); } }
@media (max-width:1000px) { .pricing-accent { display:none; } }
@media (prefers-reduced-motion:reduce) { .pa-dot { animation:none; } }

/* Overgang prijzen -> contact: het gespiegelde fragment links, als boekensteun rond de prijzen. */
.contact-band { position:relative; isolation:isolate; }
.contact-band > :not(.contact-accent) { position:relative; z-index:1; }
.contact-accent { position:absolute; top:-260px; left:-220px; width:520px; height:620px; z-index:-1; pointer-events:none; }
.ca-tile { position:absolute; border-radius:23%; }
.ca-tile-large { top:262px; left:0; width:380px; height:380px; background:rgba(255,255,255,.07); }
.ca-tile-light { top:190px; left:calc(220px + max(24px, (100vw - 1200px) / 2)); width:104px; height:104px; background:#fff; border-radius:24px; box-shadow:0 20px 40px -20px rgba(11,70,56,.55); }
.ca-dot { top:170px; right:auto; left:calc(220px + max(24px, (100vw - 1200px) / 2) + 84px); }
@media (max-width:1000px) { .contact-accent { display:none; } }

/* ---------------------------------------------------------------- Juridische pagina's */
footer .footer-links { display:flex; flex-wrap:wrap; gap:8px 20px; }
footer .footer-links a:hover, footer .footer-links a:focus-visible { color:#fff; text-decoration:underline; }
.privacy-row a { color:#fff; text-decoration:underline; }
.legal-body { background:var(--paper); }
.legal-body .site-header nav a[aria-current="page"] { color:var(--green); text-decoration:underline; text-underline-offset:6px; }
.legal-page { padding:64px 24px 96px; }
.legal-document { max-width:760px; margin:0 auto; padding:48px 56px; background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:0 20px 50px -30px rgba(11,70,56,.35); line-height:1.65; }
.legal-document h1 { margin:0; font-family:Georgia,"Times New Roman",serif; font-size:42px; font-weight:500; line-height:1.1; }
.legal-document h2 { margin:36px 0 10px; font-size:20px; }
.legal-document h3 { margin:22px 0 6px; font-size:16px; }
.legal-document p, .legal-document li { color:#35443e; }
.legal-document a { color:var(--green); text-decoration:underline; text-underline-offset:3px; }
.legal-document ul { padding-left:20px; }
.legal-document li + li { margin-top:6px; }
.legal-updated { margin:8px 0 28px; color:var(--muted); font-size:14px; }
.legal-lead { font-size:18px; }
.legal-table { width:100%; margin:12px 0; border-collapse:collapse; font-size:14px; }
.legal-table th, .legal-table td { padding:10px 12px; text-align:left; vertical-align:top; border-bottom:1px solid var(--line); }
.legal-table th { color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.04em; }
.legal-table code { padding:2px 6px; background:var(--mint); border-radius:4px; font-size:13px; }
.legal-entity { display:grid; grid-template-columns:180px 1fr; gap:6px 16px; margin:12px 0 8px; padding:18px 20px; background:#f6f8f6; border-left:3px solid var(--gold); border-radius:8px; }
.legal-entity dt { color:var(--muted); font-size:14px; }
.legal-entity dd { margin:0; font-weight:650; }
.legal-footer { display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px 24px; }
.legal-footer nav { display:flex; flex-wrap:wrap; gap:8px 20px; }
.legal-footer a:hover, .legal-footer a:focus-visible { color:#fff; text-decoration:underline; }
@media (max-width:800px) { .legal-page { padding:28px 12px 56px; } .legal-document { padding:28px 22px; } .legal-document h1 { font-size:32px; } .legal-entity { grid-template-columns:1fr; gap:2px; } .legal-entity dd { margin-bottom:8px; } .legal-table { display:block; overflow-x:auto; } }

/* App & meldingen */
.app-showcase { padding:110px max(24px,calc((100vw - 1200px)/2)); background:linear-gradient(180deg,#eef4f0 0%,#f4f3ee 100%); border-top:1px solid var(--line); overflow:hidden; }
.app-showcase-inner { max-width:1200px; margin:auto; display:grid; grid-template-columns:.78fr 1.22fr; gap:64px; align-items:center; }
.app-copy h2 { margin:0; font-family:Georgia,"Times New Roman",serif; font-weight:500; font-size:46px; line-height:1.08; }
.app-lead { color:var(--muted); font-size:18px; line-height:1.6; margin:20px 0 26px; }
.app-benefits { list-style:none; margin:0; padding:0; display:grid; gap:18px; }
.app-benefits li { display:grid; gap:4px; padding-left:34px; position:relative; }
.app-benefits li::before { content:""; position:absolute; left:0; top:1px; width:22px; height:22px; border-radius:7px; background:var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/13px no-repeat; }
.app-benefits strong { font-size:16px; }
.app-benefits span { color:var(--muted); line-height:1.55; font-size:15px; }

.phone-steps { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; align-items:start; }
.phone-step:nth-child(2) { margin-top:34px; }
.phone-step:nth-child(3) { margin-top:68px; }
.phone-caption { display:flex; gap:10px; align-items:flex-start; max-width:230px; margin:18px auto 0; color:#43534d; font-size:14px; line-height:1.45; font-weight:600; }
.phone-caption span { flex:none; display:grid; place-items:center; width:24px; height:24px; border-radius:50%; background:var(--green); color:#fff; font-size:12px; font-weight:850; }

.app-showcase.is-visible .push-card.n1 { animation:push-in .7s cubic-bezier(.2,.9,.3,1.2) both; animation-delay:.5s; }
.app-showcase.is-visible .push-card.n2 { animation:push-in .7s cubic-bezier(.2,.9,.3,1.2) both; animation-delay:.25s; }
.app-showcase.is-visible .push-card.n3 { animation:push-in .7s cubic-bezier(.2,.9,.3,1.2) both; }


@media (max-width:1050px) { .app-showcase-inner { grid-template-columns:1fr; gap:48px; } .phone-steps { max-width:760px; } }
@media (max-width:800px) { .app-showcase { padding:78px 20px; } .app-copy h2 { font-size:38px; } }
@media (max-width:640px) {
  /* Op de gsm zelf: telefoons naast elkaar om door te vegen. */
  .phone-steps { display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; padding:4px 20px 18px; margin:0 -20px; scrollbar-width:none; }
  .phone-steps::-webkit-scrollbar { display:none; }
  .phone-step { flex:0 0 72%; scroll-snap-align:center; margin-top:0 !important; }
}
@media (prefers-reduced-motion:reduce) { .tap-ring,.app-icon.civita img,.app-showcase.is-visible .push-card { animation:none !important; } }
.price-cta { display:inline-flex; margin-top:16px; color:var(--green); font-weight:800; font-size:14px; }
.price-cta:hover { color:var(--green-dark); text-decoration:underline; }

/* Veelgestelde vragen */
.faq { max-width:1200px; }
.faq-list { max-width:980px; }
.faq-list { margin-top:36px; border-top:1px solid #bdc8c1; }
.faq-list details { border-bottom:1px solid #bdc8c1; }
.faq-list summary { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:22px 0; font-size:19px; font-weight:750; cursor:pointer; list-style:none; }
.faq-list summary::-webkit-details-marker { display:none; }
.faq-list summary::after { content:"+"; flex:none; color:var(--green); font-size:26px; font-weight:400; line-height:1; transition:transform .2s; }
.faq-list details[open] summary::after { transform:rotate(45deg); }
.faq-list details p { margin:-6px 0 22px; max-width:760px; color:var(--muted); font-size:17px; line-height:1.65; }

/* Vier doelgroepen */
.audience-grid { grid-template-columns:repeat(4,1fr); }
.audience-grid article { padding-right:26px; }.audience-grid article+article { padding-left:26px; }
@media (max-width:1100px) and (min-width:801px) { .audience-grid { grid-template-columns:repeat(2,1fr); } .audience-grid article:nth-child(2) { border-right:0; } .audience-grid article:nth-child(3) { padding-left:0; } .audience-grid article:nth-child(n+3) { border-top:1px solid #bdc8c1; } }

/* Toestemming voor statistieken */
.consent-banner { position:fixed; left:16px; right:16px; bottom:16px; z-index:50; max-width:620px; margin:0 auto; display:flex; flex-wrap:wrap; align-items:center; gap:14px 20px; padding:18px 20px; color:var(--ink); background:#fff; border:1px solid #c7d4cd; border-radius:14px; box-shadow:0 24px 60px -24px rgba(11,70,56,.45); }
.consent-banner[hidden] { display:none; }
.consent-banner p { flex:1 1 300px; margin:0; font-size:14px; line-height:1.55; }
.consent-banner a { color:var(--green); font-weight:700; }
.consent-actions { display:flex; gap:10px; }
.consent-actions button { min-height:40px; padding:0 18px; border-radius:8px; font:inherit; font-size:14px; font-weight:800; cursor:pointer; }
.consent-decline { color:var(--green-dark); background:transparent; border:1px solid #9db8ae; }
.consent-accept { color:#fff; background:var(--green); border:1px solid var(--green); }
.footer-link-button { padding:0; color:inherit; background:none; border:0; font:inherit; cursor:pointer; }
.footer-link-button:hover { text-decoration:underline; }

/* Oplossingspagina's per doelgroep */
.solution-hero { overflow:hidden; background:linear-gradient(115deg,#e6eee7 0 62%,#d6e3dd 62%); }
.solution-hero-inner { max-width:1200px; margin:auto; padding:56px 24px 90px; }
.solution-hero h1 { max-width:900px; margin:0; font-family:Georgia,"Times New Roman",serif; font-size:clamp(40px,5vw,68px); line-height:1.04; font-weight:500; }
.solution-price-note { margin:22px 0 0; color:#43534d; font-size:15px; font-weight:650; }
.breadcrumbs { display:flex; gap:8px; margin-bottom:28px; color:var(--muted); font-size:13px; font-weight:650; }
.breadcrumbs a { color:var(--green); }
.solution-languages { display:flex; gap:4px; margin-left:0 !important; }
.site-header .solution-languages { gap:4px; }
.solution-languages a { padding:7px 9px; border:1px solid transparent; border-radius:6px; font-size:13px; font-weight:800; }
.solution-languages a[aria-current] { color:var(--green-dark); border-color:#9db8ae; }
.audience-grid.audience-grid-three { grid-template-columns:repeat(3,1fr); }
.solution-pains h3 { margin-top:26px; }
.solution-story blockquote { font-size:30px; }
.solution-story .eyebrow { margin-bottom:22px; }
.solution-step-list { counter-reset:step; display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin:44px 0 34px; padding:0; list-style:none; }
.solution-step-list li { counter-increment:step; display:grid; gap:8px; padding:26px; background:#fff; border:1px solid var(--line); border-radius:10px; }
.solution-step-list li::before { content:counter(step); display:grid; place-items:center; width:36px; height:36px; margin-bottom:6px; color:var(--green-dark); background:var(--mint); border-radius:9px; font-weight:850; }
.solution-step-list strong { font-size:18px; }
.solution-step-list span { color:var(--muted); line-height:1.55; }
.solution-related { padding-top:40px; }
.solution-related h2 { font-size:32px; }
.solution-related-list { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:26px; }
.solution-related-list a { position:relative; display:grid; gap:6px; padding:22px 44px 22px 22px; background:#fff; border:1px solid var(--line); border-radius:10px; }
.solution-related-list a:hover { border-color:var(--green); }
.solution-related-list small { color:var(--green); font-size:12px; font-weight:850; text-transform:uppercase; }
.solution-related-list strong { font-size:16px; line-height:1.35; }
.solution-related-list span { position:absolute; right:18px; top:50%; color:var(--green); transform:translateY(-50%); }
@media (max-width:800px) {
  .solution-hero-inner { padding:40px 18px 60px; }
  .audience-grid.audience-grid-three, .solution-step-list, .solution-related-list { grid-template-columns:1fr; }
  .site-header .solution-languages { display:flex; margin-left:auto !important; }
  .solution-story blockquote { font-size:24px; }
}
.landing-solutions { padding-top:0; }
.landing-solutions .solution-related-list { grid-template-columns:repeat(4,1fr); }
@media (max-width:1100px) { .landing-solutions .solution-related-list { grid-template-columns:repeat(2,1fr); } }
@media (max-width:800px) { .landing-solutions .solution-related-list { grid-template-columns:1fr; } }
.proof > .solution-story { display:block; padding-left:0; border-left:0; }