/* ==========================================================================
   Faturi marketing-ontwerpsysteem (publieke site)
   Rust, grote typografie, veel witruimte en beweging met een doel.
   Alleen transform/opacity worden geanimeerd (GPU), alles is progressive
   enhancement: zonder JS of met 'prefers-reduced-motion' staat alles gewoon
   zichtbaar en statisch. Kleuren komen uit de thema-tokens van base-styles
   (--green, --card, --bg-alt, ...), dus licht en donker werken vanzelf.
   Bijbehorende JS: /js/site.js
   ========================================================================== */

:root {
    --ease: cubic-bezier(.22, 1, .36, 1);
    --wrap: 1240px;
    --pad: clamp(20px, 4vw, 40px);
    --sec: clamp(72px, 10vw, 140px);
    --shadow-xl: 0 40px 90px -30px rgba(15, 23, 42, .35);
    --glass: color-mix(in srgb, var(--card) 78%, transparent);
    --ring: color-mix(in srgb, var(--green) 35%, transparent);
}
html.dark { --shadow-xl: 0 40px 90px -30px rgba(0, 0, 0, .75); }

/* ---------- Basis: breedte, secties, typografie ---------- */
.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: var(--pad); }
.block { padding-block: var(--sec); position: relative; }
.block--alt { background: var(--bg-alt); }
.block--tight { padding-block: clamp(48px, 7vw, 88px); }
.center { text-align: center; }
.center .lead-xl, .lead-xl.center { margin-inline: auto; text-align: center; }

.eyebrow {
    display: inline-flex; align-items: center; gap: 9px;
    font: 700 12.5px/1 'Inter', system-ui, sans-serif; letter-spacing: .11em; text-transform: uppercase;
    color: var(--accent-dark);
}
.eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px var(--ring); }
html.dark .eyebrow { color: #4ade80; }

.display {
    font-family: 'Khand', 'Inter', sans-serif; font-weight: 700;
    font-size: clamp(3rem, 8.4vw, 6.4rem); line-height: .94; letter-spacing: -.015em; margin: 14px 0 0;
}
.title-xl {
    font-family: 'Khand', 'Inter', sans-serif; font-weight: 700;
    font-size: clamp(2.3rem, 5.6vw, 4.2rem); line-height: 1; letter-spacing: -.012em; margin: 12px 0 0;
}
.title-l { font-family: 'Khand', 'Inter', sans-serif; font-weight: 700; font-size: clamp(1.7rem, 3.4vw, 2.4rem); line-height: 1.05; margin: 0; }
.lead-xl { font-size: clamp(1.05rem, 1.8vw, 1.28rem); line-height: 1.55; color: var(--muted); max-width: 38em; margin: 18px 0 0; }
.accent { color: var(--green); }
.grad-text {
    background: linear-gradient(100deg, var(--green) 10%, #34d399 55%, var(--green-dark) 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}

.btn-lg { padding: 16px 28px; font-size: 17px; border-radius: 14px; width: auto; margin-top: 0; }
.btn-ghost { background: transparent; color: var(--text); border: 1px solid var(--border); box-shadow: none; }
.btn-ghost:hover { background: var(--bg-alt); }
.btn-row-x { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.btn-row-x.center { justify-content: center; }
.link-arrow { color: var(--green-dark); font-weight: 650; text-decoration: none; white-space: nowrap; }
.link-arrow::after { content: " \2192"; transition: margin-left .3s var(--ease); }
.link-arrow:hover::after { margin-left: 4px; }
html.dark .link-arrow { color: #4ade80; }
:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 6px; }

/* ---------- Beweging: onthullen (progressive enhancement) ---------- */
html.js [data-reveal] {
    opacity: 0; transform: translate3d(0, 34px, 0);
    /* translate/box-shadow/border-color erbij, zodat hover-effecten op onthulde kaarten blijven werken. */
    transition: opacity 1s var(--ease), transform 1s var(--ease), translate .5s var(--ease), box-shadow .5s var(--ease), border-color .3s ease;
    transition-delay: calc(var(--i, 0) * 90ms);
    will-change: opacity, transform;
}
html.js [data-reveal="left"] { transform: translate3d(-48px, 0, 0); }
html.js [data-reveal="right"] { transform: translate3d(48px, 0, 0); }
html.js [data-reveal="zoom"] { transform: scale(.92); }
html.js [data-reveal="fade"] { transform: none; }
html.js [data-reveal].is-in { opacity: 1; transform: none; will-change: auto; }

/* Statement waarvan de woorden oplichten tijdens het scrollen. */
.statement { font-family: 'Khand', 'Inter', sans-serif; font-weight: 700; font-size: clamp(2.3rem, 6.4vw, 5rem); line-height: 1.02; letter-spacing: -.012em; max-width: 17em; margin: 0 auto; text-align: center; }
html.js .statement .w { opacity: .16; transition: opacity .35s ease; }
html.js .statement .w.on { opacity: 1; }
.statement em { font-style: normal; color: var(--green); }

/* ---------- Telefoon (CSS 3D) ---------- */
.device {
    --rx: 0deg; --ry: 0deg;
    position: relative; width: min(330px, 78vw); aspect-ratio: 9 / 18.6;
    border-radius: 46px; padding: 11px; background: linear-gradient(145deg, #1f2937, #0b1220);
    box-shadow: var(--shadow-xl), inset 0 0 0 1.5px rgba(255, 255, 255, .12);
    transform-style: preserve-3d;
    transform: perspective(1400px) rotateY(calc(-9deg + var(--p, .3) * 12deg + var(--ry))) rotateX(calc(3deg + var(--rx))) translate3d(0, calc((var(--p, .3) - .5) * -24px), 0);
    transition: transform .25s ease-out;
}
.device::before { /* dynamic island */
    content: ""; position: absolute; top: 18px; left: 50%; width: 88px; height: 25px; margin-left: -44px;
    border-radius: 20px; background: #05080f; z-index: 3;
}
.device-screen {
    position: relative; width: 100%; height: 100%; border-radius: 36px; overflow: hidden;
    background: #efeae2; display: flex; flex-direction: column;
}
html.dark .device-screen { background: #0b141a; }
.wa-top { display: flex; align-items: center; gap: 10px; padding: 46px 16px 12px; background: #0f6b4a; color: #fff; }
.wa-top .av { width: 34px; height: 34px; border-radius: 50%; background: #fff; color: #0f6b4a; font: 700 17px 'Khand', sans-serif; display: grid; place-items: center; }
.wa-top b { display: block; font-size: 14px; line-height: 1.2; }
.wa-top span { font-size: 11.5px; opacity: .85; }
.wa-body { flex: 1; padding: 16px 12px; display: flex; flex-direction: column; gap: 9px; overflow: hidden; }
.wa-b {
    max-width: 86%; padding: 9px 12px; border-radius: 14px; font-size: 13px; line-height: 1.4; color: #111b21;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .12); opacity: 0; transform: translate3d(0, 14px, 0) scale(.96);
    transition: opacity .55s var(--ease), transform .55s var(--ease);
}
.wa-b.me { align-self: flex-end; background: #d9fdd3; border-bottom-right-radius: 4px; }
.wa-b.them { align-self: flex-start; background: #fff; border-bottom-left-radius: 4px; }
html.dark .wa-b { color: #e9edef; }
html.dark .wa-b.me { background: #005c4b; }
html.dark .wa-b.them { background: #202c33; }
.wa-b small { display: block; margin-top: 4px; font-size: 10.5px; opacity: .6; text-align: right; }

/* Zwevende documenten rond de telefoon (verschijnen per stap). */
.stage { position: relative; width: min(560px, 100%); aspect-ratio: 1 / 1.08; margin-inline: auto; display: grid; place-items: center; }
.fly {
    position: absolute; z-index: 4; background: var(--card); border: 1px solid var(--border); border-radius: 16px;
    box-shadow: var(--shadow-xl); opacity: 0; transition: opacity .7s var(--ease), transform .9s var(--ease);
}
.fly-doc { width: 200px; padding: 16px; right: 0; top: 14%; transform: translate3d(-60px, 30px, 0) rotate(0deg) scale(.7); }
.fly-doc .bar { height: 6px; border-radius: 6px; background: var(--green); margin: -16px -16px 14px; border-radius: 16px 16px 0 0; }
.fly-doc .hd { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--muted); font-weight: 700; margin-bottom: 10px; }
.fly-doc .ln { display: flex; justify-content: space-between; font-size: 11.5px; padding: 5px 0; border-bottom: 1px solid var(--border); }
.fly-doc .ln.t { border: 0; font-weight: 800; font-size: 13px; padding-top: 8px; }
.fly-mail { width: 214px; padding: 14px; left: -2%; bottom: 12%; transform: translate3d(60px, 40px, 0) rotate(0deg) scale(.7); }
.fly-mail .to { font-size: 11px; color: var(--muted); line-height: 1.5; }
.fly-mail .btn-fake { display: inline-block; margin-top: 10px; background: var(--green); color: #fff; font-weight: 700; font-size: 12px; padding: 8px 14px; border-radius: 9px; }
.fly-toast { width: 250px; padding: 12px 14px; display: flex; gap: 11px; align-items: center; left: 4%; top: 6%; transform: translate3d(0, -30px, 0) scale(.9); }
.fly-toast .ok { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--green); color: #fff; display: grid; place-items: center; font-weight: 800; }
.fly-toast b { display: block; font-size: 13px; }
.fly-toast span { font-size: 12px; color: var(--muted); }

/* Gekozen stap bepaalt wat zichtbaar is (data-step wordt door site.js gezet). */
.scene[data-step="1"] .wa-b:nth-child(-n+2),
.scene[data-step="2"] .wa-b:nth-child(-n+2),
.scene[data-step="3"] .wa-b:nth-child(-n+3),
.scene[data-step="4"] .wa-b { opacity: 1; transform: none; }
.scene[data-step="2"] .fly-doc, .scene[data-step="3"] .fly-doc, .scene[data-step="4"] .fly-doc { opacity: 1; transform: translate3d(0, 0, 0) rotate(5deg) scale(1); }
.scene[data-step="3"] .fly-doc, .scene[data-step="4"] .fly-doc { transform: translate3d(8px, -8px, 0) rotate(7deg) scale(.82); opacity: .9; }
.scene[data-step="3"] .fly-mail, .scene[data-step="4"] .fly-mail { opacity: 1; transform: translate3d(0, 0, 0) rotate(-4deg) scale(1); }
.scene[data-step="4"] .fly-mail { transform: translate3d(-6px, 8px, 0) rotate(-6deg) scale(.86); opacity: .9; }
.scene[data-step="4"] .fly-toast { opacity: 1; transform: none; }

/* ---------- Scroll-verhaal ---------- */
.scene { --p: 0; }
.scene-steps { display: grid; gap: 14px; }
.scene-step { padding: 22px 24px; border-radius: 20px; border: 1px solid transparent; transition: background .5s var(--ease), border-color .5s var(--ease), opacity .5s var(--ease), transform .5s var(--ease); }
.scene-step .tag { font: 700 12px/1 'Inter', sans-serif; letter-spacing: .1em; color: var(--accent-dark); }
html.dark .scene-step .tag { color: #4ade80; }
.scene-step h3 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); margin: 8px 0 6px; line-height: 1.05; }
.scene-step p { margin: 0; color: var(--muted); font-size: 15.5px; max-width: 30em; }
.scene-step .mini { display: none; margin-top: 18px; }

@media (min-width: 960px) and (prefers-reduced-motion: no-preference) {
    html.js .scene-track { height: 320vh; }
    html.js .scene-sticky { position: sticky; top: 0; height: 100vh; display: grid; align-items: center; }
    html.js .scene-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
    html.js .scene-step { opacity: .35; transform: scale(.98); transform-origin: left center; }
    html.js .scene[data-step="1"] .scene-step:nth-child(1),
    html.js .scene[data-step="2"] .scene-step:nth-child(2),
    html.js .scene[data-step="3"] .scene-step:nth-child(3),
    html.js .scene[data-step="4"] .scene-step:nth-child(4) {
        opacity: 1; transform: none; background: var(--card); border-color: var(--border); box-shadow: var(--shadow-md);
    }
    html.js .scene-steps { gap: 6px; }
    html.js .scene-step { padding-block: 16px; }
}
/* Smal scherm, zonder JS of met verminderde beweging: gestapeld, elke stap met een eigen mini-mockup. */
@media (max-width: 959.98px), (prefers-reduced-motion: reduce) {
    .scene-grid { display: grid; gap: 28px; }
    .stage { display: none; }
    .scene-step .mini { display: block; }
    .scene-step { background: var(--card); border: 1px solid var(--border); }
    html.js .scene-track { height: auto; }
    .wa-b { opacity: 1; transform: none; }
}
html:not(.js) .stage { display: none; }
html:not(.js) .scene-step .mini { display: block; }

.mini-chat, .mini-doc, .mini-mail { border-radius: 16px; border: 1px solid var(--border); background: var(--bg-alt); padding: 14px; font-size: 13px; }
.mini-chat .b { display: inline-block; background: #d9fdd3; color: #111b21; padding: 8px 12px; border-radius: 12px 12px 4px 12px; }
html.dark .mini-chat .b { background: #005c4b; color: #e9edef; }
.mini-doc .l { display: flex; justify-content: space-between; padding: 4px 0; border-bottom: 1px solid var(--border); }
.mini-doc .l.t { border: 0; font-weight: 800; }
.mini-mail .btn-fake { display: inline-block; margin-top: 8px; background: var(--green); color: #fff; font-weight: 700; font-size: 12px; padding: 7px 12px; border-radius: 8px; }

/* ---------- Bento ---------- */
.bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; margin-top: clamp(36px, 5vw, 64px); }
.tile {
    position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 10px;
    grid-column: span 4; min-height: 250px; padding: 24px; border-radius: 28px;
    background: var(--card); border: 1px solid var(--border); color: var(--text); text-decoration: none;
    transition: translate .5s var(--ease), transform .5s var(--ease), box-shadow .5s var(--ease), border-color .3s ease;
}
a.tile:hover, .tile:focus-within { translate: 0 -5px; box-shadow: var(--shadow-lg); border-color: color-mix(in srgb, var(--green) 55%, var(--border)); }
.tile--wide { grid-column: span 8; }
.tile--tall { grid-row: span 2; }
.tile--hero { background: linear-gradient(150deg, #0a5326, #12833f 60%, #1aa352); color: #fff; border-color: transparent; }
.tile.tile--hero p { color: rgba(255, 255, 255, .88); }
.tile .badge { align-self: flex-start; font: 700 11px/1 'Inter', sans-serif; letter-spacing: .06em; text-transform: uppercase; padding: 6px 10px; border-radius: 99px; background: var(--accent-light); color: var(--accent-dark); }
html.dark .tile .badge { color: #4ade80; }
.tile--hero .badge, html.dark .tile--hero .badge { background: rgba(255, 255, 255, .18); color: #fff; }
.tile h3 { font-size: clamp(1.4rem, 2.2vw, 1.8rem); margin: 0; line-height: 1.05; }
.tile p { margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.5; max-width: 30em; }
.tile .more { margin-top: auto; font-weight: 650; font-size: 14px; color: var(--green-dark); }
.tile--hero .more, html.dark .tile--hero .more { color: #fff; }
html.dark .tile .more { color: #4ade80; }
.tile .ill { margin-top: auto; align-self: flex-end; width: 100%; height: 96px; display: flex; align-items: center; justify-content: flex-end; gap: 10px; color: var(--green); }
.tile--hero .ill { color: #fff; }
.ico { width: 46px; height: 46px; stroke: currentColor; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ico .fa { fill: color-mix(in srgb, currentColor 16%, transparent); stroke: none; }
.ico-lg { width: 86px; height: 86px; }

/* Micro-animaties in de tegels (alleen transform/opacity). */
.ill .pill { padding: 8px 14px; border-radius: 99px; background: var(--accent-light); color: var(--accent-dark); font: 700 12.5px 'Inter', sans-serif; white-space: nowrap; }
html.dark .ill .pill { color: #4ade80; }
.tile--hero .ill .pill, html.dark .tile--hero .ill .pill { background: rgba(255, 255, 255, .16); color: #fff; }
.spin-slow { animation: sx-spin 14s linear infinite; transform-origin: 50% 50%; }
.ring-pulse { animation: sx-pulse 2.6s ease-in-out infinite; }
.bell-ring { transform-origin: 50% 12%; animation: sx-ring 5s ease-in-out infinite; }
.pop { animation: sx-pop 5s ease-in-out infinite; }
.pop:nth-child(2) { animation-delay: .25s; } .pop:nth-child(3) { animation-delay: .5s; }
@keyframes sx-spin { to { transform: rotate(360deg); } }
@keyframes sx-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes sx-ring { 0%, 70%, 100% { transform: rotate(0); } 74% { transform: rotate(14deg); } 80% { transform: rotate(-12deg); } 86% { transform: rotate(8deg); } 92% { transform: rotate(-4deg); } }
@keyframes sx-pop { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes sx-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
.float { animation: sx-float 6s ease-in-out infinite; }

@media (max-width: 980px) { .tile, .tile--wide { grid-column: span 6; } .tile--hero { grid-column: span 12; } }
@media (max-width: 620px) { .bento { gap: 12px; } .tile, .tile--wide { grid-column: span 12; min-height: 0; } .tile .ill { height: 72px; } }

/* ---------- Cijferband (cijfers uit de pakketconfig) ---------- */
.stats-x { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: clamp(16px, 3vw, 40px); margin-top: clamp(32px, 5vw, 56px); }
.stat-x { text-align: center; padding: 8px; }
.stat-x .n { display: block; font: 700 clamp(2.8rem, 6vw, 4.6rem)/1 'Khand', sans-serif; letter-spacing: -.01em; color: var(--green); font-variant-numeric: tabular-nums; }
.stat-x .l { display: block; margin-top: 6px; color: var(--muted); font-size: 14.5px; }

/* ---------- Voor/na ---------- */
.vs { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: clamp(32px, 5vw, 56px); }
.vs-col { border-radius: 28px; padding: clamp(22px, 3vw, 36px); border: 1px solid var(--border); background: var(--card); }
.vs-col.met { background: linear-gradient(160deg, color-mix(in srgb, var(--green) 9%, var(--card)), var(--card)); border-color: color-mix(in srgb, var(--green) 45%, var(--border)); box-shadow: 0 30px 70px -40px rgba(22, 163, 74, .55); }
.vs-col h3 { font-size: 1.5rem; margin: 0 0 18px; }
.vs-row { display: grid; grid-template-columns: 26px 1fr; gap: 12px; padding: 13px 0; border-top: 1px solid var(--border); font-size: 15.5px; line-height: 1.4; align-items: start; }
.vs-row:first-of-type { border-top: 0; }
.vs-row .mk { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 800; background: var(--bg-alt); color: var(--muted); }
.met .vs-row .mk { background: var(--green); color: #fff; }
.vs-row b { display: block; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; font-weight: 700; }
@media (max-width: 760px) { .vs { grid-template-columns: 1fr; } }

/* ---------- Calculator ---------- */
.calc { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 4vw, 48px); margin-top: clamp(32px, 5vw, 56px); align-items: start; }
.calc-in, .calc-out { border-radius: 28px; border: 1px solid var(--border); background: var(--card); padding: clamp(22px, 3vw, 34px); }
.calc-out { background: linear-gradient(160deg, #0a5326, #12833f 65%, #1aa352); color: #fff; border-color: transparent; box-shadow: 0 40px 80px -40px rgba(22, 163, 74, .6); }
.calc-row { margin-bottom: 22px; }
.calc-row label { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 8px; font-size: 14.5px; }
.calc-row label output { font: 700 22px 'Khand', sans-serif; color: var(--green-dark); }
html.dark .calc-row label output { color: #4ade80; }
.calc input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 6px; background: linear-gradient(to right, var(--green) var(--fill, 30%), var(--border) var(--fill, 30%)); padding: 0; border: 0; }
.calc input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 2px solid var(--green); box-shadow: 0 2px 8px rgba(0, 0, 0, .25); cursor: grab; }
.calc input[type=range]::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 2px solid var(--green); box-shadow: 0 2px 8px rgba(0, 0, 0, .25); cursor: grab; }
.calc input[type=range]:focus-visible { outline: 2px solid var(--green); outline-offset: 6px; }
.calc-checks { display: grid; gap: 10px; margin-top: 4px; }
.calc-checks label { display: flex; gap: 10px; align-items: center; margin: 0; font-weight: 500; cursor: pointer; }
.calc-checks input { width: 20px; height: 20px; accent-color: var(--green); }
.calc-out .big { font: 700 clamp(3rem, 7vw, 5rem)/1 'Khand', sans-serif; display: block; font-variant-numeric: tabular-nums; }
.calc-out .sub { opacity: .88; font-size: 15px; margin: 4px 0 18px; }
.calc-out hr { border: 0; border-top: 1px solid rgba(255, 255, 255, .22); margin: 18px 0; }
.calc-out .reco { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.calc-out .reco b { font: 700 1.7rem 'Khand', sans-serif; }
.calc-out .fine { font-size: 12.5px; opacity: .78; margin-top: 14px; line-height: 1.5; }
.calc-out .btn { background: #fff; color: #0a5326; margin-top: 18px; width: auto; display: inline-block; }
@media (max-width: 860px) { .calc { grid-template-columns: 1fr; } }

/* ---------- Prijskaarten (compact) ---------- */
.plans-x { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 32px; align-items: stretch; }
.plan-x {
    position: relative; display: flex; flex-direction: column; border-radius: 28px; padding: 28px; background: var(--card); border: 1.5px solid var(--border);
    transition: translate .5s var(--ease), transform .5s var(--ease), box-shadow .5s var(--ease), border-color .3s ease;
}
.plan-x.is-pop { border-color: var(--green); box-shadow: 0 30px 70px -40px rgba(22, 163, 74, .6); }
.plan-x.is-rec { translate: 0 -8px; border-color: var(--green); box-shadow: 0 0 0 4px var(--ring), var(--shadow-lg); }
.plan-x .tagx { position: absolute; top: -13px; left: 28px; background: var(--green); color: #fff; font: 700 11.5px/1 'Inter', sans-serif; padding: 6px 12px; border-radius: 99px; letter-spacing: .04em; }
.plan-x .tagx.biz { background: #7c3aed; }
.plan-x h3 { font-size: 1.4rem; margin: 0; }
.plan-x .pr { font: 700 3.2rem/1 'Khand', sans-serif; margin: 12px 0 0; color: var(--text); }
.plan-x .pr small { font: 500 14px 'Inter', sans-serif; color: var(--muted); }
.plan-x .first { color: var(--muted); font-size: 14px; margin: 2px 0 14px; }
.plan-x ul { list-style: none; margin: 4px 0 20px; padding: 0; display: grid; gap: 9px; font-size: 14.5px; }
.plan-x li { padding-left: 24px; position: relative; }
.plan-x li::before { content: "\2713"; position: absolute; left: 0; color: var(--green); font-weight: 800; }
.plan-x .btn { margin-top: auto; }
@media (max-width: 900px) { .plans-x { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; } .plan-x.is-rec { translate: none; } }

/* ---------- In-pagina navigatie (sticky) ---------- */
.subnav { position: sticky; top: calc(var(--site-banner-height, 0px) + 70px); z-index: 30; display: flex; gap: 8px; overflow-x: auto; padding: 10px 0; scrollbar-width: none; justify-content: center; }
.subnav::-webkit-scrollbar { display: none; }
.subnav a { white-space: nowrap; padding: 9px 16px; border-radius: 99px; font-size: 14px; font-weight: 600; color: var(--text); text-decoration: none; background: var(--glass); border: 1px solid var(--border); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); transition: background .3s ease, color .3s ease, border-color .3s ease; }
.subnav a:hover { border-color: var(--green); }
.subnav a.on { background: var(--green); color: #fff; border-color: var(--green); }

/* ---------- Groepen (functiepagina) ---------- */
.group { padding-block: clamp(40px, 6vw, 80px); border-top: 1px solid var(--border); scroll-margin-top: 140px; }
.group:first-of-type { border-top: 0; }
.group-head { display: flex; gap: 18px; align-items: center; margin-bottom: 26px; }
.group-head .ico { width: 54px; height: 54px; color: var(--green); flex: none; }
.group-head h2 { margin: 0; font-size: clamp(1.9rem, 4vw, 2.8rem); }
.group-head p { margin: 4px 0 0; color: var(--muted); }
.fn-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 14px; }
.fn { border-radius: 22px; padding: 22px; background: var(--card); border: 1px solid var(--border); }
.fn h3 { font-size: 1.15rem; margin: 0 0 6px; }
.fn p { margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.5; }
.fn .tg { display: inline-block; margin-bottom: 8px; font: 700 10.5px/1 'Inter', sans-serif; letter-spacing: .07em; text-transform: uppercase; padding: 5px 9px; border-radius: 99px; background: var(--accent-light); color: var(--accent-dark); }
html.dark .fn .tg { color: #4ade80; }
.fn .tg.biz { background: color-mix(in srgb, #7c3aed 14%, var(--card)); color: #7c3aed; }
html.dark .fn .tg.biz { color: #a78bfa; }

/* ---------- Doorlink-kaarten (voor wie / meer lezen) ---------- */
.go-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-top: 34px; }
.go { display: flex; flex-direction: column; gap: 6px; padding: 24px; border-radius: 24px; background: var(--card); border: 1px solid var(--border); color: var(--text); text-decoration: none; transition: translate .45s var(--ease), transform .45s var(--ease), box-shadow .45s var(--ease), border-color .3s ease; }
.go:hover { translate: 0 -4px; box-shadow: var(--shadow-md); border-color: var(--green); }
.go b { font: 700 1.35rem 'Khand', sans-serif; }
.go span { color: var(--muted); font-size: 14.5px; }
.go i { margin-top: 8px; font-style: normal; font-weight: 650; color: var(--green-dark); font-size: 14px; }
html.dark .go i { color: #4ade80; }

/* ---------- Afsluitende CTA ---------- */
.final { text-align: center; padding-block: clamp(80px, 12vw, 160px); position: relative; overflow: hidden; }
.final::before { content: ""; position: absolute; inset: auto 0 -40% 0; height: 90%; background: radial-gradient(60% 60% at 50% 100%, color-mix(in srgb, var(--green) 22%, transparent), transparent 70%); pointer-events: none; }
.final > * { position: relative; }

/* ---------- Oudere pagina's: zelfde ritme en kaartstijl ---------- */
.public-main .section { padding-block: clamp(48px, 7vw, 96px); }
.public-main .section h2 { font-size: clamp(2rem, 4.6vw, 3.4rem); line-height: 1.02; }
.public-main .section p.lead { font-size: clamp(1rem, 1.6vw, 1.15rem); }
.public-main .feature-card, .public-main .step, .public-main .industry-card, .public-main .pain { border-radius: 24px; }
.public-main .compare .col { border-radius: 26px; padding: clamp(20px, 3vw, 30px); }
.public-main .stat { border-radius: 24px; }
.public-main .cta-band { border-radius: 30px; }
.public-main .plan { border-radius: 26px; }
.public-main .hero h1 { letter-spacing: -.015em; }

/* ---------- Verminderde beweging: alles meteen zichtbaar en rustig ---------- */
@media (prefers-reduced-motion: reduce) {
    html.js [data-reveal], html.js [data-reveal].is-in { opacity: 1; transform: none; transition: none; }
    html.js .statement .w { opacity: 1; transition: none; }
    .spin-slow, .ring-pulse, .bell-ring, .pop, .float { animation: none; }
    .device { transform: none; transition: none; }
    .tile, .go, .plan-x, .scene-step { transition: none; }
    .wa-b, .fly { transition: none; }
}

/* ---------- Echte schermen in een browserkader ---------- */
.shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; margin-top: clamp(28px, 4vw, 48px); align-items: start; }
.shots--two { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); max-width: 980px; margin-inline: auto; }
.shot { margin: 0; border-radius: 20px; overflow: hidden; background: #fff; border: 1px solid var(--border); box-shadow: var(--shadow-lg); }
.shot .frame { display: flex; gap: 6px; padding: 11px 14px; background: #f1f3f5; border-bottom: 1px solid #e3e6ea; }
.shot .frame span { width: 9px; height: 9px; border-radius: 50%; background: #d3d7dc; }
.shot img { display: block; width: 100%; height: auto; }
.shot figcaption { padding: 12px 16px 14px; font-size: 13.5px; color: #4b5563; background: #fff; border-top: 1px solid #eef0f2; }

/* ---------- Contrast van knoppen op de publieke site (WCAG AA) ----------
   Wit op het standaardgroen (#16a34a) haalt 3,3:1, in donker thema (#22c55e) 2,3:1. Op de
   marketingpagina's dus een donkerder groen met witte tekst, en in donker thema donkere tekst. */
.public-main .btn:not(.btn-secondary):not(.btn-ghost) { background: #15803d; color: #fff; }
.public-main .btn:not(.btn-secondary):not(.btn-ghost):hover { background: #166534; }
html.dark .public-main .btn:not(.btn-secondary):not(.btn-ghost) { background: var(--green); color: #052e16; }
html.dark .public-main .btn:not(.btn-secondary):not(.btn-ghost):hover { background: #4ade80; }
.public-main .calc-out .btn { background: #fff; color: #0a5326; }
.fly-mail .btn-fake, .mini-mail .btn-fake { background: #15803d; }
html.dark .fly-mail .btn-fake, html.dark .mini-mail .btn-fake { background: var(--green); color: #052e16; }
.plan-x .tagx { background: #15803d; }

/* Contrast: bellen met donkere tekst op het lichtgroen, actieve subnav en secundaire knoppen in donker thema. */
.public-main .bubble.me { color: #052e16; }
.subnav a.on { background: #15803d; border-color: #15803d; }
html.dark .subnav a.on { background: var(--green); border-color: var(--green); color: #052e16; }
html.dark .public-main .btn-secondary { color: #4ade80; }
.public-main .mock-mail .ideal-btn { background: #15803d; }
html.dark .public-main .mock-mail .ideal-btn { background: var(--green); color: #052e16; }
html.dark .public-main { --accent-dark: #4ade80; }
.tile--soft { justify-content: center; align-items: flex-start; background: var(--accent-light); border-color: transparent; }
.tile--soft p, .public-main .cta-band p { color: #4b5563; }
html.dark .tile--soft p, html.dark .public-main .cta-band p { color: var(--muted); }
.public-main .plan .popular { background: #15803d; }
html.dark .public-main .mock-invoice .avatar { color: #4ade80; }

/* ---------- Kleine afwerking ---------- */
html { scroll-padding-top: 90px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
.public-main .faq details { border-radius: 18px; padding: 0 20px; transition: border-color .3s ease, box-shadow .3s ease; }
.public-main .faq details[open] { border-color: color-mix(in srgb, var(--green) 45%, var(--border)); box-shadow: var(--shadow-sm); }
.public-main .faq summary { padding-block: 17px; font-size: 16.5px; }
.public-main .testimonial-card { border-radius: 24px; }
@media (max-width: 620px) { .tile .ill { height: 56px; } .tile { padding: 20px; } }