:root{
  --ink:#0a1f14; --ink-soft:#2a3a30; --muted:#64748b;
  --line:#e2e8f0; --line-soft:#f1f5f9;
  --bg:#e9f4ed; --white:#ffffff;
  --brand:#16a34a; --brand-dark:#0f7a37; --brand-darker:#0a5c29;
  --brand-light:#e9f7ee; --brand-lighter:#f0faf3;
  --accent:#22c55e; --water:#0ea5e9; --gold:#f59e0b;
  --shadow-sm:0 1px 2px rgba(10,22,40,.06), 0 1px 3px rgba(10,22,40,.08);
  --shadow-md:0 4px 14px rgba(10,31,20,.08), 0 12px 28px rgba(10,31,20,.06);
  --shadow-lg:0 24px 48px rgba(10,31,20,.14), 0 10px 20px rgba(10,31,20,.08);
  --radius:14px; --radius-lg:22px;
}

/* Dark mode */

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Segoe UI",system-ui,Roboto,Helvetica,Arial,sans-serif;color:var(--ink);background:var(--white);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;transition:background .3s,color .3s}
h1,h2,h3,h4{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",system-ui,Roboto,Helvetica,Arial,sans-serif;font-weight:600;letter-spacing:-.02em;line-height:1.1}
h1{font-size:clamp(2.4rem,5.5vw,4.2rem);font-weight:700;letter-spacing:-.03em}
h2{font-size:clamp(1.9rem,3.8vw,2.8rem)}
h3{font-size:1.35rem}
p{color:var(--ink-soft)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{max-width:1220px;margin:0 auto;padding:0 24px}
em{font-style:italic;color:var(--brand);font-weight:400}

/* HEADER */
header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.88);backdrop-filter:blur(16px);border-bottom:1px solid var(--line);transition:background .3s}
.topbar{background:#0f172a;color:rgba(255,255,255,.92);font-size:.74rem;padding:7px 0;text-align:center;letter-spacing:.02em;max-height:40px;overflow:hidden;transition:max-height .4s cubic-bezier(.4,0,.2,1),padding .4s cubic-bezier(.4,0,.2,1),opacity .3s}
header.scrolled .topbar{max-height:0;padding:0;opacity:0}

/* Hele nav compacter bij scrollen */
.nav{transition:padding .3s cubic-bezier(.4,0,.2,1)}
header.scrolled .nav{padding:8px 0}
header.scrolled .logo{font-size:1.15rem}
header.scrolled .logo-mark{width:36px;height:36px;transition:width .3s,height .3s}
header.scrolled .logo small{display:none}
header.scrolled .nav-cta{padding:8px 16px;font-size:.88rem}
.logo,.logo-mark,.logo small{transition:all .3s cubic-bezier(.4,0,.2,1)}
.topbar .container{display:flex;justify-content:center;gap:28px;align-items:center;flex-wrap:wrap}
.topbar span{opacity:.85;display:flex;align-items:center;gap:6px}
.topbar-sep{display:none}
@media(min-width:640px){.topbar-sep{display:inline;opacity:.3}}

.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0;gap:32px}
.logo{display:flex;align-items:center;gap:12px;font-weight:600;font-size:1.4rem;flex-shrink:0}
.logo-mark{width:48px;height:48px;object-fit:contain;flex-shrink:0}
.logo small{display:block;font-family:inherit;font-size:.66rem;font-weight:600;color:var(--muted);letter-spacing:.16em;text-transform:uppercase;margin-top:-1px}

/* Desktop menu */
.nav-links{display:flex;gap:2px;align-items:center;flex:1;justify-content:center}
.nav-links a{
  display:inline-flex;align-items:center;
  font-weight:500;font-size:.92rem;color:var(--ink-soft);
  padding:8px 14px;border-radius:8px;
  transition:color .18s,background .18s;
  position:relative;
}
.nav-links a:hover{color:var(--brand);background:var(--brand-lighter)}
.nav-links a.is-active{color:var(--brand);background:var(--brand-lighter)}
.nav-links a.is-active::before{
  content:'';position:absolute;left:14px;right:14px;bottom:2px;
  height:2px;background:var(--brand);border-radius:2px;
}

.nav-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}

/* Hamburger button, alleen mobiel */
.nav-toggle{
  display:none;
  width:42px;height:42px;
  background:transparent;border:1px solid var(--line);border-radius:10px;
  cursor:pointer;align-items:center;justify-content:center;
  transition:all .18s;flex-shrink:0;
}
.nav-toggle:hover{border-color:var(--brand);color:var(--brand)}
.nav-toggle svg{width:20px;height:20px}
.nav-toggle .icon-close{display:none}
.nav-toggle.is-open .icon-open{display:none}
.nav-toggle.is-open .icon-close{display:block}
#counter{display:inline-block;min-width:1.4em;text-align:center;font-variant-numeric:tabular-nums}

.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border-radius:10px;font-weight:600;font-size:.95rem;transition:all .2s;cursor:pointer;border:none;font-family:inherit;white-space:nowrap}
.btn-primary{background:var(--brand);color:white;box-shadow:0 4px 12px rgba(22,163,74,.25)}
.btn-primary:hover{background:var(--brand-dark);transform:translateY(-1px);box-shadow:0 6px 20px rgba(22,163,74,.35)}
.btn-outline{background:var(--white);color:var(--brand);border:1.5px solid var(--line)}
.btn-outline:hover{border-color:var(--brand);background:var(--brand-lighter)}
.btn-whatsapp{background:#25d366;color:white;box-shadow:0 4px 12px rgba(37,211,102,.3)}
.btn-whatsapp:hover{background:#1ebe5d;transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--ink)}
.btn-ghost:hover{background:var(--line-soft)}
.nav-cta{display:none}
@media(min-width:768px){.nav-cta{display:inline-flex}}

/* Mobiel menu (<900px) */
@media(max-width:899px){
  .nav-toggle{display:inline-flex}
  .nav-cta{display:none !important}
  .nav-links{
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:4px;
    background:white;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    padding:12px 20px 16px;
    box-shadow:0 12px 32px rgba(0,0,0,.06);
    transform:translateY(-8px);
    opacity:0;visibility:hidden;
    transition:opacity .18s,transform .18s,visibility .18s;
  }
  .nav-links.is-open{
    opacity:1;visibility:visible;transform:translateY(0);
  }
  .nav-links a{
    width:100%;padding:14px 16px;font-size:1rem;
    border-radius:10px;
  }
  .nav-links a.is-active::before{display:none}
  .nav-links a.is-active{background:var(--brand-lighter);color:var(--brand)}
}

/* HERO */
.hero{position:relative;padding:80px 0 70px;background:var(--white);overflow:hidden}
.hero .container{position:relative;z-index:2}

/* Rijdend mini-busje onderaan de hero */
.hero-road{
  position:absolute;left:0;right:0;bottom:0;height:96px;
  z-index:1;pointer-events:none;overflow:hidden;
}
.hero-road-line{
  position:absolute;left:0;right:0;bottom:22px;height:2px;
  background:repeating-linear-gradient(90deg,rgba(22,163,74,.25) 0 22px,transparent 22px 44px);
}
.hero-van{
  position:absolute;bottom:14px;left:0;
  will-change:transform;
  animation:vanDrive 11s linear infinite;
}
.hero-van svg{display:block;filter:drop-shadow(0 6px 10px rgba(0,0,0,.12))}
.van-wheel{animation:vanWheel 1.1s linear infinite}
.van-body{animation:vanBob 0.5s ease-in-out infinite alternate}
@keyframes vanDrive{
  0%   { transform:translateX(-220px); }
  100% { transform:translateX(calc(100vw + 60px)); }
}
@keyframes vanWheel{ to { transform:rotate(360deg); } }
@keyframes vanBob{ from{ transform:translateY(0); } to { transform:translateY(-1.5px); } }
@media(prefers-reduced-motion:reduce){
  .hero-van,.van-wheel,.van-body{animation:none}
  .hero-van{transform:translateX(40px)}
}

.hero-grid{display:grid;grid-template-columns:1fr;gap:0;align-items:center;position:relative}
.hero-content{max-width:760px;margin:0 auto;text-align:center}

.hero-eyebrow{
  font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);font-weight:600;
  margin-bottom:22px;
}

.hero-title{
  font-size:clamp(2.2rem,5vw,3.4rem);
  line-height:1.08;
  font-weight:600;
  letter-spacing:-.02em;
  margin-bottom:22px;
  color:var(--ink);
}
.hero-title em{
  font-style:normal;
  color:var(--brand);
  font-weight:500;
}

.hero-sub{
  font-size:1.08rem;
  color:var(--ink-soft);
  line-height:1.6;
  margin:0 auto 30px;
  max-width:540px;
}

.hero-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-bottom:36px}
.hero-actions .btn{padding:13px 22px;font-size:.95rem}

.hero-services{
  font-size:.88rem;
  color:var(--muted);
  padding:18px 0;
  border-top:1px solid var(--line);
  margin-bottom:18px;
}

.hero-reviews{
  display:inline-flex;align-items:center;gap:12px;
  flex-wrap:wrap;justify-content:center;
  font-size:.92rem;
  color:var(--ink-soft);
}
.hero-reviews-score{
  font-size:1.3rem;font-weight:700;color:var(--ink);
  letter-spacing:-.02em;line-height:1;
}
.hero-reviews-stars{
  color:var(--gold);letter-spacing:1.5px;font-size:.95rem;
}
.hero-reviews-text em{
  font-style:italic;color:var(--ink-soft);
}

/* Trust tegels */
.trust-stack{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;position:relative}
.trust-tile{background:var(--white);padding:22px;border-radius:16px;border:1px solid var(--line);box-shadow:var(--shadow-sm);transition:transform .3s,box-shadow .3s}
.trust-tile:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.trust-tile.featured{grid-column:1/-1;background:linear-gradient(135deg,var(--brand) 0%,var(--brand-darker) 100%);color:white;border:none;position:relative;overflow:hidden}
.trust-tile.featured::before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 85% 20%,rgba(255,255,255,.15),transparent 40%),radial-gradient(circle at 15% 90%,rgba(255,255,255,.08),transparent 40%)}
.trust-tile-label{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin-bottom:8px}
.trust-tile.featured .trust-tile-label{color:rgba(255,255,255,.7)}
.trust-tile-value{font-size:1.8rem;font-weight:700;line-height:1.1;margin-bottom:4px;letter-spacing:-.02em}
.trust-tile-detail{font-size:.9rem;color:var(--muted)}
.trust-tile.featured .trust-tile-detail{color:rgba(255,255,255,.85)}
.trust-tile-icon{width:40px;height:40px;border-radius:10px;background:var(--brand-light);color:var(--brand);display:grid;place-items:center;margin-bottom:14px}
.trust-tile.featured .trust-tile-icon{background:rgba(255,255,255,.15);color:white}

/* Google Review Showcase */
.review-showcase{
  grid-column:1/-1;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:18px;
  padding:22px;
  box-shadow:var(--shadow-sm);
  position:relative;
  overflow:hidden;
}
.review-showcase::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,#4285F4,#34A853,#FBBC05,#EA4335);
}
.review-showcase-top{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:14px;padding-bottom:14px;border-bottom:1px solid var(--line);
  gap:12px;
}
.review-showcase-google{display:flex;align-items:center;gap:10px}
.review-showcase-google strong{display:block;font-size:.88rem;font-weight:700;color:var(--ink);line-height:1.2}
.review-showcase-google small{display:block;font-size:.72rem;color:var(--muted);margin-top:1px}
.review-showcase-score{text-align:right;flex-shrink:0}
.review-showcase-number{font-size:1.8rem;font-weight:700;color:var(--ink);line-height:1;letter-spacing:-.02em}
.review-showcase-stars{font-size:.85rem;color:var(--gold);letter-spacing:2px;line-height:1}
.review-showcase-quotes{position:relative;min-height:70px}
.review-quote{position:absolute;inset:0;opacity:0;transform:translateY(6px);transition:opacity .5s,transform .5s;pointer-events:none}
.review-quote.active{opacity:1;transform:translateY(0);pointer-events:auto}
.review-quote-text{font-size:.92rem;line-height:1.5;color:var(--ink);margin-bottom:6px;font-weight:500}
.review-quote-author{font-size:.78rem;color:var(--muted);font-weight:500}
.review-showcase-dots{display:flex;gap:6px;justify-content:center;margin-top:12px}
.review-dot{width:6px;height:6px;border-radius:50%;background:var(--line);border:none;cursor:pointer;padding:0;transition:all .2s}
.review-dot.active{background:var(--brand);width:20px;border-radius:3px}
.review-dot:hover:not(.active){background:var(--muted)}

/* STATS BAR */
.stats-section{padding:0;margin-top:0;position:relative;z-index:2}
.stats-bar{background:transparent;border:none;border-top:1px solid var(--line);border-bottom:1px solid var(--line);border-radius:0;padding:24px 0;color:var(--ink);display:grid;grid-template-columns:repeat(2,1fr);gap:0;box-shadow:none;position:relative;overflow:visible}
@media(min-width:720px){.stats-bar{grid-template-columns:repeat(4,1fr);padding:28px 0}}
.stats-bar::before{display:none}
.stat{position:relative;text-align:center;padding:8px 12px;border-radius:0;cursor:default;background:transparent;transition:none}
.stat:hover{transform:none;background:transparent;box-shadow:none}
.stat:hover .stat-value{transform:none}
.stat:hover .stat-value em{color:var(--brand)}
.stat:hover .stat-label{color:var(--muted)}
.stat-value{font-size:1.5rem;font-weight:600;line-height:1;margin-bottom:4px;letter-spacing:-.02em;color:var(--ink);transition:none}
.stat-value em{color:var(--brand);font-style:normal;font-weight:600}
.stat-label{font-size:.74rem;color:var(--muted);text-transform:uppercase;letter-spacing:.12em;font-weight:600;transition:none}

/* SECTIONS */
section{padding:96px 0;position:relative}

/* Luxe dividers tussen secties, duidelijker zichtbaar */
section + section::before,
section + .stats-section::before,
.stats-section + section::before{
  content:'';
  position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:min(92%,1100px);height:2px;
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(22,163,74,.15) 10%,
    rgba(22,163,74,.4) 30%,
    rgba(22,163,74,.55) 50%,
    rgba(22,163,74,.4) 70%,
    rgba(22,163,74,.15) 90%,
    transparent 100%);
  pointer-events:none;
  z-index:1;
}

/* Extra accent: glanzend middenpunt boven de lijn */
section + section::after{
  content:'';
  position:absolute;top:-5px;left:50%;transform:translateX(-50%);
  width:100px;height:10px;border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(22,163,74,.45) 0%,rgba(22,163,74,.15) 40%,transparent 70%);
  filter:blur(3px);
  pointer-events:none;
}

/* CTA band heeft eigen ::before (voor de gloed), dus divider uitzetten */
.cta-band{border-top:1px solid rgba(255,255,255,.05)}

.section-head{text-align:center;max-width:680px;margin:0 auto 56px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;background:var(--brand-light);color:var(--brand-darker);padding:7px 14px;border-radius:100px;font-size:.8rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;margin-bottom:20px}
.section-head h2{margin-bottom:16px}
.section-head p{font-size:1.1rem}

/* DIENSTEN */
.diensten{background:var(--bg)}
.diensten-grid{display:grid;grid-template-columns:1fr;gap:20px}
@media(min-width:640px){.diensten-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:960px){.diensten-grid{grid-template-columns:repeat(3,1fr)}}
.dienst-card{background:var(--white);padding:32px;border-radius:var(--radius-lg);border:1px solid var(--line);transition:all .3s;position:relative;overflow:hidden}
.dienst-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--brand),var(--accent));transform:scaleX(0);transform-origin:left;transition:transform .4s}
.dienst-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:transparent}
.dienst-card:hover::before{transform:scaleX(1)}
.dienst-icon{width:54px;height:54px;border-radius:14px;background:var(--brand-light);color:var(--brand);display:grid;place-items:center;margin-bottom:22px}
.dienst-card h3{margin-bottom:10px}
.dienst-card > p{font-size:.95rem;margin-bottom:18px}
.dienst-features{list-style:none;display:flex;flex-direction:column;gap:8px}
.dienst-features li{font-size:.88rem;color:var(--ink-soft);display:flex;align-items:center;gap:8px}
.dienst-features li::before{content:'';width:14px;height:14px;border-radius:50%;background:var(--brand-light);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316a34a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");background-size:9px;background-position:center;background-repeat:no-repeat;flex-shrink:0}

/* CALCULATOR */
.calculator-section{background:var(--white);padding:70px 0}
.calculator-section .section-head h2{font-size:clamp(1.5rem,3vw,2rem);font-weight:600;letter-spacing:-.01em}
.calculator-section .section-head p{font-size:.95rem}
.calc-wrap{max-width:860px;margin:0 auto;background:var(--white);border-radius:var(--radius-lg);padding:32px;border:1px solid var(--line)}
.calc-grid{display:flex;flex-direction:column;gap:24px}
.calc-fields{display:flex;flex-direction:column;gap:22px}
.calc-field label{display:block;font-size:.74rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-bottom:10px}
.calc-field .calc-desc{display:none}
/* Type pand, nette kaart-grid */
.calc-typegrid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media(min-width:520px){.calc-typegrid{grid-template-columns:repeat(4,1fr)}}
.calc-typegrid button{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  padding:16px 8px;
  border:1.5px solid var(--line);border-radius:14px;
  background:var(--white);color:var(--ink-soft);
  font-family:inherit;font-size:.85rem;font-weight:600;
  cursor:pointer;transition:all .18s;
}
.calc-typegrid button svg{width:26px;height:26px;color:var(--muted);transition:color .18s}
.calc-typegrid button:hover{border-color:var(--brand);background:var(--brand-lighter)}
.calc-typegrid button:hover svg{color:var(--brand)}
.calc-typegrid button.active{
  border-color:var(--brand);background:var(--brand-lighter);color:var(--brand-darker);
  box-shadow:0 0 0 1px var(--brand) inset;
}
.calc-typegrid button.active svg{color:var(--brand)}

/* Sliders */
.calc-slider{display:flex;align-items:center;gap:14px;margin-top:6px}
.calc-slider input{flex:1;accent-color:var(--brand);height:4px}
.calc-slider-value{min-width:36px;text-align:center;font-weight:700;font-size:1rem;color:var(--brand-darker);background:var(--brand-lighter);border-radius:8px;padding:4px 8px;border:none;font-variant-numeric:tabular-nums}

/* Extra diensten, nette checkbox-kaarten */
.calc-services{display:grid;grid-template-columns:1fr;gap:10px}
@media(min-width:520px){.calc-services{grid-template-columns:repeat(2,1fr)}}
.calc-check{
  display:flex;align-items:center;gap:12px;
  padding:14px 16px;
  border:1.5px solid var(--line);border-radius:14px;
  background:var(--white);cursor:pointer;transition:all .18s;
  position:relative;
}
.calc-check:hover{border-color:var(--brand);background:var(--brand-lighter)}
.calc-check input{position:absolute;opacity:0;pointer-events:none}
.calc-check-icon{
  flex-shrink:0;width:40px;height:40px;border-radius:10px;
  background:var(--brand-lighter);color:var(--brand);
  display:grid;place-items:center;transition:all .18s;
}
.calc-check-icon svg{width:22px;height:22px}
.calc-check-text{
  flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;
  font-size:.92rem;font-weight:600;color:var(--ink);line-height:1.25;
}
.calc-check-text small{font-size:.78rem;font-weight:500;color:var(--muted);font-variant-numeric:tabular-nums}
.calc-check-tick{
  flex-shrink:0;width:24px;height:24px;border-radius:50%;
  border:1.5px solid var(--line);
  display:grid;place-items:center;transition:all .18s;color:transparent;
}
.calc-check-tick svg{width:14px;height:14px}
/* Active staat */
.calc-check.active{border-color:var(--brand);background:var(--brand-lighter);box-shadow:0 0 0 1px var(--brand) inset}
.calc-check.active .calc-check-icon{background:var(--brand);color:white}
.calc-check.active .calc-check-text small{color:var(--brand-darker)}
.calc-check.active .calc-check-tick{background:var(--brand);border-color:var(--brand);color:white}

/* Zonnepanelen-teller (verschijnt bij aanvinken) */
.calc-panels{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin-top:10px;padding:14px 16px;
  background:var(--brand-lighter);border:1.5px solid var(--brand);
  border-radius:14px;
}
.calc-panels[hidden]{display:none}
.calc-panels-label{font-size:.9rem;font-weight:600;color:var(--brand-darker);flex:1;min-width:120px}
.calc-stepper{display:flex;align-items:center;background:var(--white);border-radius:10px;border:1px solid var(--line);overflow:hidden}
.calc-stepper button{
  width:38px;height:38px;border:none;background:var(--white);color:var(--brand-darker);
  font-size:1.35rem;font-weight:600;cursor:pointer;transition:background .15s;
  display:grid;place-items:center;line-height:1;
}
.calc-stepper button:hover{background:var(--brand-lighter)}
.calc-stepper button:active{background:var(--brand);color:white}
.calc-stepper span{min-width:42px;text-align:center;font-weight:700;font-size:1rem;font-variant-numeric:tabular-nums;color:var(--ink)}
.calc-panels-total{font-weight:700;color:var(--brand-darker);font-variant-numeric:tabular-nums;min-width:54px;text-align:right;font-size:1.05rem}

/* Nieuwe dienst-selector tool */
.calc-intro{margin-bottom:18px}
.calc-intro h3{font-size:1.25rem;font-weight:700;letter-spacing:-.02em;margin-bottom:4px;color:var(--ink)}
.calc-intro p{font-size:.95rem;color:var(--muted)}
.calc-services{display:grid;grid-template-columns:1fr;gap:10px}
@media(min-width:560px){.calc-services{grid-template-columns:repeat(2,1fr)}}
/* Diensten-kaarten iets prominenter als hoofdtool */
#calc-services .calc-check{padding:16px 18px}

/* Lege staat resultaat */
.calc-result-empty{
  display:flex;align-items:center;gap:14px;
  color:rgba(255,255,255,.75);font-size:.95rem;line-height:1.5;
}
.calc-result-empty svg{width:30px;height:30px;flex-shrink:0;color:rgba(255,255,255,.4)}
.calc-result-empty[hidden]{display:none}
.calc-result-filled[hidden]{display:none}
/* Als gevuld: zelfde grid-indeling als voorheen */
@media(min-width:720px){
  .calc-result-filled{display:grid;grid-template-columns:auto 1fr;gap:32px;align-items:center;width:100%}
  .calc-result-filled .calc-result-side{border-left:1px solid rgba(255,255,255,.12);padding-left:32px}
}
.calc-result-filled{display:flex;flex-direction:column;gap:18px;width:100%}

/* ============ 3-STAPS WIZARD ============ */
/* Voortgangsbalk */
/* Stap 3, Wanneer */
.calc-segment{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.calc-segment button{
  padding:16px 14px;border:1.5px solid var(--line);background:var(--white);border-radius:12px;
  font-weight:600;font-size:1rem;color:var(--ink-soft);cursor:pointer;transition:all .18s;min-height:54px;
}
.calc-segment button:hover{border-color:var(--brand);background:var(--brand-lighter)}
.calc-segment button.active{border-color:var(--brand);background:var(--brand-lighter);color:var(--brand-darker);box-shadow:0 0 0 1px var(--brand) inset}
.calc-pillgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.calc-pillgrid-3{grid-template-columns:repeat(3,1fr)}
.calc-pillgrid button{
  padding:14px 12px;border:1.5px solid var(--line);background:var(--white);border-radius:11px;
  font-weight:600;font-size:.95rem;color:var(--ink-soft);cursor:pointer;transition:all .18s;min-height:50px;
}
.calc-pillgrid button:hover{border-color:var(--brand);background:var(--brand-lighter)}
.calc-pillgrid button.active{border-color:var(--brand);background:var(--brand-lighter);color:var(--brand-darker);box-shadow:0 0 0 1px var(--brand) inset}
.calc-when-grid{display:grid;grid-template-columns:1fr;gap:20px;margin-top:20px}
@media(min-width:560px){.calc-when-grid{grid-template-columns:1fr 1fr;align-items:start}}
.calc-dateinput{
  width:100%;padding:14px 16px;border:1.5px solid var(--line);border-radius:12px;
  font-size:1rem;font-family:inherit;color:var(--ink);background:var(--white);margin-top:8px;min-height:54px;
}
.calc-dateinput:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-lighter)}
.calc-optional{font-weight:500;text-transform:none;letter-spacing:0;color:var(--muted);font-size:.78rem}
#calc-freq-detail[hidden]{display:none}
.calc-progress{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:32px}
.calc-progress-item{display:flex;flex-direction:column;align-items:center;gap:8px;opacity:.5;transition:opacity .25s}
.calc-progress-item.active,.calc-progress-item.done{opacity:1}
.calc-progress-num{
  width:36px;height:36px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--white);border:2px solid var(--line);
  font-weight:700;font-size:.95rem;color:var(--muted);
  transition:all .25s;
}
.calc-progress-item.active .calc-progress-num{background:var(--brand);border-color:var(--brand);color:white}
.calc-progress-item.done .calc-progress-num{background:var(--brand-lighter);border-color:var(--brand);color:var(--brand-darker)}
.calc-progress-label{font-size:.82rem;font-weight:600;color:var(--ink-soft)}
.calc-progress-line{flex:0 0 auto;width:48px;height:2px;background:var(--line);margin-bottom:24px;transition:background .25s}
@media(min-width:560px){.calc-progress-line{width:80px}}

/* Stappen */
.calc-step{display:none;animation:calcFade .3s ease-out}
.calc-step.active{display:block}
@keyframes calcFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.calc-step-head{margin-bottom:20px;text-align:center}
.calc-step-head h3{font-size:1.35rem;font-weight:700;letter-spacing:-.02em;margin-bottom:4px}
.calc-step-head p{font-size:.95rem;color:var(--muted)}

/* Stap-navigatie */
.calc-step-nav{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:24px;padding-top:20px;border-top:1px solid var(--line);
}
.calc-step-nav .btn{flex-shrink:0}
.calc-hint{font-size:.85rem;color:var(--muted)}
.calc-step-nav .btn[disabled]{opacity:.4;cursor:not-allowed;pointer-events:none}

/* Verdiepingen-veld */
.calc-floors-field{margin-top:20px}
.calc-floors-val{font-weight:500;color:var(--muted);text-transform:none;letter-spacing:0;font-size:.8rem}

/* Samenvatting stap 3 */
.calc-summary{display:flex;flex-direction:column;gap:2px;margin-bottom:18px}
.calc-summary-row{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:13px 16px;border-radius:12px;background:var(--bg);
}
.calc-summary-row .s-label{display:flex;align-items:center;gap:10px;font-weight:600;font-size:.92rem;color:var(--ink)}
.calc-summary-row .s-label svg{width:18px;height:18px;color:var(--brand);flex-shrink:0}
.calc-summary-row .s-price{font-weight:600;font-size:.92rem;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.calc-summary-pand{
  display:flex;align-items:center;gap:10px;
  padding:13px 16px;font-size:.9rem;color:var(--muted);
}
.calc-summary-pand svg{width:18px;height:18px;color:var(--brand)}

/* Resultaat-balk stap 3 */
.calc-result-bar{
  background:linear-gradient(135deg,var(--brand-lighter) 0%,#fff 100%);
  border:1.5px solid var(--brand);
  color:var(--ink);border-radius:var(--radius-lg);
  padding:24px 28px;display:flex;flex-direction:column;gap:16px;
  box-shadow:0 8px 28px rgba(22,163,74,.12);
}
@media(min-width:600px){.calc-result-bar{flex-direction:row;align-items:center;gap:28px}}
.calc-result-bar .calc-result-side{flex:0 0 auto}
@media(min-width:600px){
  .calc-result-bar .calc-result-note{border-left:1px solid rgba(22,163,74,.2);padding-left:28px;flex:1}
}
.calc-result-bar .calc-result-note{font-size:.82rem;color:var(--muted);line-height:1.5;margin:0}
/* Tekst-kleuren binnen de groene balk */
.calc-result-bar .calc-result-label{color:var(--brand-darker)}
.calc-result-bar .calc-result-price{color:var(--brand-darker)}
.calc-result-bar .calc-result-range{color:var(--muted)}

/* Info-balk stap 3 (geen prijs) */
.calc-note-bar{
  display:flex;gap:14px;align-items:flex-start;
  background:var(--brand-lighter);border:1px solid rgba(22,163,74,.2);
  border-radius:var(--radius-lg);padding:18px 20px;
  font-size:.9rem;color:var(--brand-darker);line-height:1.5;
}
.calc-note-bar svg{width:22px;height:22px;flex-shrink:0;color:var(--brand);margin-top:1px}

/* Panels-hint (vervangt de prijs-total) */
.calc-panels-hint{font-weight:600;color:var(--brand-darker);font-size:.9rem;white-space:nowrap}

/* Adres-blok stap 3 */
.calc-address{margin-top:20px;padding:22px;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-lg)}
.calc-address-head{display:flex;gap:14px;align-items:flex-start;margin-bottom:18px}
.calc-address-head svg{width:24px;height:24px;color:var(--brand);flex-shrink:0;margin-top:2px}
.calc-address-head strong{display:block;font-size:1rem;font-weight:700;color:var(--ink);margin-bottom:2px}
.calc-address-head span{font-size:.88rem;color:var(--muted);line-height:1.45}
.calc-address-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.calc-address-grid .form-group{margin-bottom:0}
.calc-address-grid .fg-name,.calc-address-grid .fg-street{grid-column:1 / -1}
@media(max-width:520px){
  .calc-address{padding:18px}
  .calc-address-grid{grid-template-columns:1fr}
  .calc-address-grid .fg-name,.calc-address-grid .fg-street{grid-column:auto}
}
.calc-result{
  background:var(--ink);color:white;border-radius:var(--radius-lg);
  padding:26px 32px;border:none;
}
@media(min-width:720px){
  .calc-result{padding:28px 36px}
}
.calc-result-main{min-width:0}
.calc-result-label{font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.15em;color:rgba(255,255,255,.55);margin-bottom:8px}
.calc-result-price{font-size:2.8rem;font-weight:700;letter-spacing:-.03em;color:white;line-height:1;margin-bottom:6px;font-variant-numeric:tabular-nums}
.calc-result-range{font-size:.85rem;color:rgba(255,255,255,.6);font-variant-numeric:tabular-nums}
.calc-result-side{display:flex;flex-direction:column;gap:14px;min-width:0}
@media(min-width:720px){
  .calc-result{position:relative}
  .calc-result-side{border-left:1px solid rgba(255,255,255,.12);padding-left:32px}
}
.calc-result-note{font-size:.82rem;color:rgba(255,255,255,.7);line-height:1.5;margin:0}
.calc-result .btn{width:100%;justify-content:center;background:var(--brand);color:white;border:none}
.calc-result .btn:hover{background:var(--brand-darker)}

/* WERKWIJZE */
.werkwijze-grid{display:grid;grid-template-columns:1fr;gap:24px;counter-reset:step}
@media(min-width:700px){.werkwijze-grid{grid-template-columns:repeat(4,1fr)}}
.step-card{position:relative;padding:28px;counter-increment:step}
.step-card::before{content:'0' counter(step);font-size:3rem;font-weight:700;background:linear-gradient(135deg,var(--brand),var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1;display:block;margin-bottom:12px;letter-spacing:-.03em}
.step-card h4{font-size:1.2rem;font-weight:700;margin-bottom:8px}
.step-card p{font-size:.92rem}

/* PLANNER */
.planner-section{background:radial-gradient(ellipse at top,rgba(22,163,74,.06),transparent 60%),var(--bg)}
.planner-wrap{max-width:820px;margin:0 auto}
.planner-intro{text-align:center;margin-bottom:36px}
.planner-phone{display:inline-flex;align-items:center;gap:10px;color:var(--muted);font-size:.95rem;margin-top:14px}
.planner-phone a{color:var(--brand);font-weight:600}
.planner{background:var(--white);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);border:1px solid var(--line);overflow:hidden}
.planner-head{padding:28px 36px 24px;border-bottom:1px solid var(--line);background:linear-gradient(135deg,var(--white),var(--brand-lighter))}
.planner-head h3{font-size:1.45rem;font-weight:700;margin-bottom:6px}
.planner-head p{font-size:.92rem}
.progress{display:flex;gap:6px;margin-top:20px}
.progress-step{flex:1;height:4px;border-radius:4px;background:var(--line);transition:background .3s}
.progress-step.active{background:var(--brand)}
.progress-step.done{background:var(--brand);opacity:.5}
.planner-body{padding:36px}
.step{display:none}
.step.active{display:block;animation:fadeIn .3s ease-out}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.step h4{font-size:1.35rem;font-weight:700;margin-bottom:6px}
.step-desc{color:var(--muted);font-size:.95rem;margin-bottom:24px}
.option-grid{display:grid;grid-template-columns:1fr;gap:10px}
@media(min-width:540px){.option-grid{grid-template-columns:repeat(2,1fr)}}
.option{padding:18px;border:1.5px solid var(--line);border-radius:12px;cursor:pointer;transition:all .2s;background:var(--white);text-align:left;font-family:inherit;font-size:.95rem;display:flex;align-items:center;gap:14px}
.option:hover{border-color:var(--brand);background:var(--brand-lighter)}
.option.selected{border-color:var(--brand);background:var(--brand-light)}
.option-icon{font-size:1.5rem;flex-shrink:0;width:40px;height:40px;display:grid;place-items:center;background:var(--brand-lighter);border-radius:10px}
.option.selected .option-icon{background:var(--white)}
.option-text{flex:1;min-width:0}
.option-text strong{display:block;font-weight:600;color:var(--ink);margin-bottom:2px}
.option.selected .option-text strong{color:var(--brand-darker)}
.option-text small{display:block;font-size:.82rem;color:var(--muted);font-weight:400;line-height:1.4}
.form-group{margin-bottom:18px}
.form-group label{display:block;font-weight:600;font-size:.9rem;margin-bottom:8px;color:var(--ink)}
.form-group input,.form-group textarea{width:100%;padding:13px 16px;border:1.5px solid var(--line);border-radius:10px;font-family:inherit;font-size:.95rem;transition:border-color .2s;background:var(--white);color:var(--ink)}
.form-group input:focus,.form-group textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(22,163,74,.12)}
.form-group textarea{resize:vertical;min-height:90px}
.form-hint{font-size:.82rem;color:var(--muted);margin-top:6px}
.summary{background:var(--bg);border-radius:12px;padding:24px;margin-bottom:20px}
.summary-row{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--line);gap:16px}
.summary-row:last-child{border-bottom:none}
.summary-label{color:var(--muted);font-size:.9rem}
.summary-value{font-weight:600;text-align:right;font-size:.92rem}
.whatsapp-notice{background:#e8f8ec;border:1px solid #bfe5c9;border-radius:12px;padding:18px;display:flex;gap:14px}
.whatsapp-notice-icon{width:40px;height:40px;border-radius:10px;background:#25d366;color:white;display:grid;place-items:center;flex-shrink:0}
.whatsapp-notice strong{color:#0a3d22;font-weight:700}
.whatsapp-notice ol{margin:8px 0 0 20px;padding:0;font-size:.88rem;color:#0c4a2b}
.whatsapp-notice li{margin-bottom:4px}
.planner-footer{padding:20px 36px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:12px;background:var(--bg);flex-wrap:wrap}
.step-indicator{font-size:.85rem;color:var(--muted);font-weight:500}
.btn-group{display:flex;gap:10px;flex-wrap:wrap}

/* CONTRACTEN */
.contracten{background:var(--bg);padding:70px 0}
.contracten .section-head h2{font-size:clamp(1.5rem,3vw,2rem);font-weight:600;letter-spacing:-.01em}
.contracten .section-head p{font-size:.95rem}
.contracten-grid{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:720px){.contracten-grid{grid-template-columns:repeat(3,1fr)}}
.contract-card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);padding:24px;position:relative;transition:border-color .2s,transform .2s,box-shadow .2s;display:flex;flex-direction:column}
.contract-card:hover{border-color:var(--brand-soft,#86efac);transform:translateY(-3px);box-shadow:0 12px 32px rgba(22,163,74,.08)}
.contract-card.popular{border:2px solid var(--brand);box-shadow:none;transform:none;padding:23px}
.contract-card.popular:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(22,163,74,.14)}
.contract-badge{position:absolute;top:-10px;left:24px;background:var(--brand);color:white;padding:3px 10px;border-radius:6px;font-size:.7rem;font-weight:600;letter-spacing:.05em;text-transform:none}
.contract-name{font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);margin-bottom:6px}
.contract-frequency{font-size:.85rem;color:var(--ink-soft);margin-bottom:18px}
.contract-price{display:flex;flex-direction:column;gap:2px;margin-bottom:14px}
.contract-price-amount{font-size:1.7rem;font-weight:600;color:var(--ink);letter-spacing:-.02em;line-height:1.1;font-variant-numeric:tabular-nums}
.contract-card.popular .contract-price-amount{color:var(--ink)}
.contract-price-unit{font-size:.78rem;color:var(--muted);font-weight:400}
.contract-summary{font-size:.88rem;color:var(--ink-soft);line-height:1.6;margin-bottom:20px;flex:1}
.contract-card .btn{width:100%;justify-content:center;font-size:.88rem;padding:10px 14px}
.contracten-note{text-align:center;margin-top:24px;color:var(--muted);font-size:.85rem}
.contracten-note a{color:var(--brand);font-weight:500}

/* BLOG */
.blog{background:var(--white)}
.blog-grid{display:grid;grid-template-columns:1fr;gap:20px}
@media(min-width:720px){.blog-grid{grid-template-columns:repeat(3,1fr)}}
.blog-card{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;cursor:pointer;transition:all .4s cubic-bezier(.16,1,.3,1);display:flex;flex-direction:column}
.blog-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);background:var(--white)}
.blog-visual{height:140px;position:relative;overflow:hidden;display:grid;place-items:center;font-size:3rem}
.blog-visual.v1{background:linear-gradient(135deg,#0ea5e9 0%,#7dd3fc 100%)}
.blog-visual.v2{background:linear-gradient(135deg,#16a34a 0%,#86efac 100%)}
.blog-visual.v3{background:linear-gradient(135deg,#f59e0b 0%,#fcd34d 100%)}
.blog-visual::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.3),transparent 60%)}
.blog-body{padding:24px;display:flex;flex-direction:column;flex:1}
.blog-tag{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--brand);margin-bottom:10px}
.blog-card h3{font-size:1.15rem;font-weight:700;margin-bottom:10px;line-height:1.3}
.blog-card p{font-size:.92rem;margin-bottom:16px;flex:1}
.blog-readmore{display:inline-flex;align-items:center;gap:6px;color:var(--brand);font-weight:600;font-size:.9rem;transition:gap .2s}
.blog-card:hover .blog-readmore{gap:10px}

/* BLOG MODAL */
.blog-modal{position:fixed;inset:0;background:rgba(10,31,20,.7);backdrop-filter:blur(8px);z-index:200;display:none;align-items:center;justify-content:center;padding:20px;overflow-y:auto}
.blog-modal.open{display:flex;animation:modalFade .3s ease-out}
@keyframes modalFade{from{opacity:0}to{opacity:1}}
.blog-modal-content{background:var(--white);border-radius:var(--radius-lg);max-width:720px;width:100%;max-height:90vh;overflow-y:auto;position:relative;animation:modalSlide .4s cubic-bezier(.16,1,.3,1)}
@keyframes modalSlide{from{transform:translateY(40px);opacity:0}to{transform:translateY(0);opacity:1}}
.blog-modal-close{position:absolute;top:18px;right:18px;width:40px;height:40px;border-radius:50%;background:var(--white);border:1px solid var(--line);cursor:pointer;display:grid;place-items:center;color:var(--ink);z-index:2;transition:all .2s}
.blog-modal-close:hover{background:var(--bg);transform:rotate(90deg)}
.blog-modal-visual{height:180px;display:grid;place-items:center;font-size:4rem;position:relative;overflow:hidden}
.blog-modal-visual::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.3),transparent 60%)}
.blog-modal-body{padding:36px 40px 40px}
.blog-modal-body h2{font-size:1.8rem;margin-bottom:16px;letter-spacing:-.02em}
.blog-modal-body p{margin-bottom:14px;line-height:1.7;font-size:1rem}
.blog-modal-body h3{font-size:1.2rem;margin:20px 0 10px}
.blog-modal-body ul{margin:8px 0 16px 22px}
.blog-modal-body li{margin-bottom:6px;color:var(--ink-soft);line-height:1.6}
@media(max-width:640px){
  .contract-card{padding:24px}
  .contract-price-amount{font-size:2rem}
  .blog-modal-content{border-radius:16px}
  .blog-modal-body{padding:24px}
  .blog-modal-body h2{font-size:1.4rem}
  .blog-modal-visual{height:120px;font-size:2.6rem}
}

/* REVIEWS */
.reviews{background:var(--white)}
.reviews-header{display:flex;align-items:center;justify-content:space-between;gap:40px;margin-bottom:50px;flex-wrap:wrap}
.reviews-header-left{flex:1;min-width:260px}
.rating-big{display:flex;align-items:center;gap:24px;background:var(--bg);padding:20px 28px;border-radius:16px;border:1px solid var(--line)}
.rating-number{font-size:3rem;font-weight:700;color:var(--brand);line-height:1;letter-spacing:-.03em}
.rating-details .rating-stars{font-size:1.1rem;margin-bottom:4px}
.rating-details small{color:var(--muted);font-size:.85rem;display:block}
.rating-google{display:inline-flex;align-items:center;gap:6px;font-size:.85rem;font-weight:600;color:var(--muted);margin-top:4px}
.reviews-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:20px}
.review-card{background:var(--bg);padding:28px;border-radius:16px;border:1px solid var(--line);transition:all .3s}
.review-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);background:var(--white)}
.review-card .rating-stars{font-size:.95rem;margin-bottom:14px}
.review-text{font-size:.95rem;color:var(--ink-soft);margin-bottom:18px;line-height:1.55}
.reviewer{display:flex;align-items:center;gap:12px}
.reviewer-avatar{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,var(--brand),var(--accent));display:grid;place-items:center;color:white;font-weight:700}
.reviewer-info strong{display:block;font-size:.92rem}
.reviewer-info small{color:var(--muted);font-size:.8rem}

/* Google-reviews badge */
.greviews-badge{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;justify-content:center;
  max-width:560px;margin:0 auto 40px;padding:20px 26px;background:var(--white);
  border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-sm);
}
.greviews-glogo{flex-shrink:0}
.greviews-glogo svg{width:42px;height:42px;display:block}
.greviews-meta{display:flex;flex-direction:column;gap:3px;text-align:left}
.greviews-title{font-size:.92rem;font-weight:700;color:var(--ink)}
.greviews-scorerow{display:flex;align-items:center;gap:10px}
.greviews-score{font-size:1.6rem;font-weight:800;color:var(--ink);line-height:1;letter-spacing:-.02em}
.greviews-stars{color:#fbbc05;font-size:1.05rem;letter-spacing:1px}
.greviews-count{font-size:.82rem;color:var(--muted)}
.greviews-link{
  margin-left:auto;font-size:.85rem;font-weight:600;color:var(--brand);
  text-decoration:none;white-space:nowrap;padding:9px 16px;border:1px solid var(--line);
  border-radius:10px;transition:all .18s;
}
.greviews-link:hover{border-color:var(--brand);background:var(--brand-lighter)}
/* Reviews in phonestore-stijl */
.grev-statcard{display:grid;grid-template-columns:repeat(3,1fr);max-width:1000px;margin:0 auto 42px;background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:0 20px 48px rgba(10,31,20,.1);overflow:hidden;position:relative;padding:0;gap:0}
.grev-statcard::before{content:"";position:absolute;top:0;left:0;right:0;height:5px;background:linear-gradient(90deg,#4285F4 0%,#EA4335 35%,#FBBC05 65%,#34A853 100%)}
.grev-stat{padding:40px 22px 34px;text-align:center;border-right:1px solid var(--line)}
.grev-stat:last-child{border-right:none}
.grev-score,.grev-big{font-size:clamp(2.1rem,4vw,2.9rem);font-weight:800;color:var(--ink);line-height:1;letter-spacing:-.02em}
.grev-stars{color:#fbbc05;font-size:1.15rem;letter-spacing:3px;margin-top:10px}
.grev-glabel{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:12px;color:var(--muted);font-weight:600;font-size:.9rem}
.grev-glabel svg{width:18px;height:18px}
.grev-sub{color:var(--muted);margin-top:8px;font-size:.95rem}
@media(max-width:640px){.grev-statcard{grid-template-columns:1fr}.grev-stat{border-right:none;border-bottom:1px solid var(--line);padding:26px}.grev-stat:last-child{border-bottom:none}}
.reviews-grid .review-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px}
.rc-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:2px}
.rc-stars{color:#fbbc05;font-size:1.05rem;letter-spacing:2px}
.rc-glogo svg{width:24px;height:24px;display:block}
.rc-quote{font-family:Georgia,serif;font-size:2.8rem;line-height:.55;color:#d7e5dd;height:22px}
.reviews-grid .review-card .review-text{color:var(--ink-soft);font-size:.98rem;line-height:1.6;flex:1;margin:6px 0 0}
.rc-author{display:flex;align-items:center;gap:12px;margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.rc-author .reviewer-avatar{width:42px;height:42px}
.grev-cta{text-align:center;margin-top:38px}
.grev-cta .btn svg{width:18px;height:18px}

/* Reviewkaart in Google-stijl */
.review-top{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.review-glogo{margin-left:auto;flex-shrink:0}
.review-glogo svg{width:22px;height:22px;display:block;opacity:.9}
.review-starrow{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.review-card .review-starrow .rating-stars{color:#fbbc05;font-size:1rem;margin:0;letter-spacing:1px}
.review-date{font-size:.78rem;color:var(--muted)}
.review-card .reviewer-avatar{background:var(--brand)}

/* WAAROM */
.waarom{background:var(--bg)}
.waarom-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:40px}
.waarom-item{text-align:center}
.waarom-num{font-size:3rem;font-weight:700;background:linear-gradient(135deg,var(--brand),var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1;display:block;margin-bottom:10px;letter-spacing:-.03em}
.waarom-item h4{font-size:1.2rem;font-weight:700;margin-bottom:8px}
.waarom-item p{font-size:.94rem}

/* FAQ */
.faq{background:var(--white)}
.faq-wrap{max-width:760px;margin:0 auto}
.faq-item{background:var(--bg);border:1px solid var(--line);border-radius:14px;margin-bottom:12px;overflow:hidden;transition:all .3s}
.faq-item.open{border-color:var(--brand);box-shadow:var(--shadow-sm)}
.faq-question{width:100%;padding:22px 26px;display:flex;align-items:center;justify-content:space-between;gap:16px;background:transparent;border:none;cursor:pointer;font-family:inherit;font-size:1.02rem;font-weight:600;color:var(--ink);text-align:left;transition:color .2s}
.faq-question:hover{color:var(--brand)}
.faq-icon{flex-shrink:0;width:32px;height:32px;border-radius:50%;background:var(--brand-light);color:var(--brand);display:grid;place-items:center;transition:transform .3s,background .3s}
.faq-item.open .faq-icon{transform:rotate(45deg);background:var(--brand);color:white}
.faq-answer{max-height:0;overflow:hidden;transition:max-height .4s ease}
.faq-answer-inner{padding:0 26px 22px;color:var(--ink-soft);font-size:.95rem;line-height:1.65}

/* CONTACT */
.contact-section{background:var(--bg)}
.contact-grid{display:grid;grid-template-columns:1fr;gap:28px}
@media(min-width:860px){.contact-grid{grid-template-columns:1fr 1fr}}
@media(min-width:1100px){.contact-grid{grid-template-columns:1.1fr .9fr 1fr}}
.contact-card{background:var(--white);padding:38px;border-radius:var(--radius-lg);border:1px solid var(--line)}
.contact-card h3{font-size:1.4rem;font-weight:700;margin-bottom:24px}

/* Werkgebied kaart */
.map-card{padding:0;overflow:hidden;position:relative;display:flex;flex-direction:column}
.map-card-head{padding:28px 28px 16px}
.map-card-head h3{margin-bottom:6px}
.map-card-head p{font-size:.88rem;color:var(--muted)}
.map-svg{width:100%;height:auto;display:block;flex:1;background:linear-gradient(180deg,#f0f9ff 0%,#e0f2fe 100%)}
.map-city{transition:transform .3s,filter .3s;cursor:default}
.map-city:hover{filter:drop-shadow(0 4px 8px rgba(22,163,74,.4))}
.map-city-hub .pulse{
  transform-origin:center;
  animation:mapPulse 2.5s ease-in-out infinite;
}
@keyframes mapPulse{
  0%,100%{transform:scale(1);opacity:.4}
  50%{transform:scale(2);opacity:0}
}
.map-footer{padding:14px 28px 22px;background:var(--bg);border-top:1px solid var(--line);font-size:.85rem;color:var(--muted);text-align:center}
.map-footer strong{color:var(--brand);font-weight:700}
.contact-item{display:flex;gap:16px;padding:16px 0;border-bottom:1px solid var(--line)}
.contact-item:last-child{border-bottom:none}
.contact-icon{width:46px;height:46px;border-radius:12px;background:var(--bg);color:var(--brand);display:grid;place-items:center;flex-shrink:0;border:1px solid var(--line)}
.contact-item strong{display:block;font-size:.78rem;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin-bottom:4px;font-weight:700}
.contact-item a,.contact-item span{color:var(--ink);font-weight:600;font-size:1.02rem}
.contact-item a:hover{color:var(--brand)}
.hours-list{list-style:none}
.hours-list li{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--line);font-size:.95rem}
.hours-list li:last-child{border-bottom:none}
.hours-list li.today{color:var(--brand-darker);font-weight:600}
.hours-list .day{color:var(--ink-soft)}
.hours-list li.today .day{color:var(--brand-darker)}
.hours-list .time{font-weight:600}

/* CTA BAND */
.cta-band{background:linear-gradient(135deg,var(--ink) 0%,#132e20 100%);color:white;padding:80px 0;position:relative;overflow:hidden}
.cta-band::before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 15% 30%,rgba(22,163,74,.25),transparent 40%),radial-gradient(circle at 85% 70%,rgba(34,197,94,.15),transparent 50%)}
.cta-band-inner{position:relative;text-align:center;max-width:640px;margin:0 auto}
.cta-band h2{color:white;margin-bottom:18px}
.cta-band h2 em{color:#86efac}
.cta-band p{color:rgba(255,255,255,.8);font-size:1.1rem;margin-bottom:30px}
.cta-band-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* FOOTER */
footer{background:var(--ink);color:white;padding:70px 0 30px;border-top:1px solid rgba(255,255,255,.08)}
footer p,footer a{color:rgba(255,255,255,.7);font-size:.9rem}
footer a:hover{color:white}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px;margin-bottom:48px}
@media(max-width:860px){.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.footer-grid{grid-template-columns:1fr}}
.footer-brand p{margin-top:16px;max-width:320px;line-height:1.7}
.footer-brand .logo{color:white}
.footer-brand .logo small{color:rgba(255,255,255,.55)}
footer h5{font-size:1.05rem;color:white;margin-bottom:18px;font-weight:700}
footer ul{list-style:none}
footer li{margin-bottom:10px}
.footer-bottom{padding-top:30px;border-top:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.85rem;align-items:center}
.footer-bottom-right{display:flex;gap:20px}

/* FAB + SCROLL TOP */
.fab{position:fixed;bottom:24px;right:24px;z-index:50;width:60px;height:60px;border-radius:50%;background:#25d366;color:white;display:grid;place-items:center;box-shadow:0 8px 24px rgba(37,211,102,.4);transition:transform .2s}
.fab:hover{transform:scale(1.08)}
.fab svg{width:30px;height:30px}
.fab::after{content:'';position:absolute;inset:-6px;border-radius:50%;border:1.5px solid #25d366;animation:fabPulse 3s infinite;opacity:.6}
@keyframes fabPulse{0%{transform:scale(1);opacity:.8}100%{transform:scale(1.4);opacity:0}}

.scroll-top{position:fixed;bottom:100px;right:30px;z-index:49;width:48px;height:48px;border-radius:50%;background:var(--ink);color:white;display:grid;place-items:center;box-shadow:var(--shadow-md);cursor:pointer;border:none;opacity:0;pointer-events:none;transition:opacity .3s,transform .3s}
.scroll-top.visible{opacity:1;pointer-events:auto}
.scroll-top:hover{transform:translateY(-3px)}

/* STICKY MOBILE CTA */
.mobile-cta{position:fixed;bottom:0;left:0;right:0;z-index:60;background:var(--white);border-top:1px solid var(--line);padding:12px 16px;display:none;gap:10px;box-shadow:0 -4px 20px rgba(0,0,0,.08)}
.mobile-cta .btn{flex:1;justify-content:center;padding:14px 12px}
@media(max-width:640px){
  .mobile-cta{display:flex}
  body{padding-bottom:80px}
  .fab{bottom:90px}
  .scroll-top{bottom:160px}
}

/* COOKIE BAR */
.cookie-bar{position:fixed;bottom:20px;left:20px;right:20px;z-index:70;background:var(--white);border:1px solid var(--line);border-radius:16px;padding:24px;box-shadow:var(--shadow-lg);max-width:440px;margin-left:auto;display:none}
.cookie-bar.show{display:block;animation:cookieIn .5s cubic-bezier(.34,1.56,.64,1)}
@keyframes cookieIn{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}
.cookie-bar h4{font-size:1rem;font-weight:700;margin-bottom:8px}
.cookie-bar p{font-size:.87rem;margin-bottom:16px;line-height:1.5}
.cookie-buttons{display:flex;gap:8px;flex-wrap:wrap}
.cookie-buttons .btn{flex:1;justify-content:center;font-size:.88rem;padding:10px 16px}
@media(max-width:640px){
  .cookie-bar{bottom:96px}
}

/* ========== ANIMATIES ========== */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
.reveal.in{opacity:1;transform:translateY(0)}
.hero .rating-badge{animation:fadeInUp .5s cubic-bezier(.16,1,.3,1) both}
.hero h1{animation:fadeInUp .6s cubic-bezier(.16,1,.3,1) .05s both}
.hero .hero-sub{animation:fadeInUp .6s cubic-bezier(.16,1,.3,1) .12s both}
.hero .hero-actions{animation:fadeInUp .6s cubic-bezier(.16,1,.3,1) .18s both}
.hero .hero-chips{animation:fadeInUp .6s cubic-bezier(.16,1,.3,1) .24s both}
.hero .trust-stack > *{animation:fadeInRight 1s cubic-bezier(.16,1,.3,1) both}
.hero .trust-stack > *:nth-child(1){animation-delay:.15s}
.hero .trust-stack > *:nth-child(2){animation-delay:.22s}
.hero .trust-stack > *:nth-child(3){animation-delay:.3s}
@keyframes fadeInUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeInRight{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:translateX(0)}}
.hero h1 em{background:linear-gradient(120deg,var(--brand) 0%,var(--accent) 50%,var(--brand) 100%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-title.animate em{animation:shine 2s ease-in-out 1 forwards}
@keyframes shine{0%{background-position:0% 50%}100%{background-position:100% 50%}}

/* ========== RAMENWASSER HERO ========== */
.hero-title{position:relative}

/* "Glanzend schoon" glas-glans, 1x */
.glass-text{
  position:relative;
  background:linear-gradient(105deg,
    var(--ink) 0%,
    var(--ink) 38%,
    rgba(255,255,255,.95) 48%,
    rgba(134,239,172,.9) 52%,
    var(--ink) 62%,
    var(--ink) 100%);
  background-size:250% 100%;
  background-position:120% 50%;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
}
.hero-title.animate .glass-text{animation:glassWipe 1.8s ease-in-out 1 forwards}
@keyframes glassWipe{
  0%{background-position:120% 50%}
  100%{background-position:-20% 50%}
}

/* "of juist niet" letters = vuil. Op hover: letters verdwijnen, raam zichtbaar */
.hero-title{position:relative}

/* "Vakwerk dat je ziet" blijft statisch (geen loop meer) */
.glass-text{
  position:relative;
  color:var(--ink);
}

.streak-wrap{position:relative;display:inline-block;overflow:visible;cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'><defs><filter id='s' x='-20%25' y='-20%25' width='140%25' height='140%25'><feDropShadow dx='1' dy='2' stdDeviation='1.2' flood-opacity='0.3'/></filter></defs><g filter='url(%23s)'><path d='M4 22 L40 22 L40 27 L4 27 Z' fill='%236b7280'/><path d='M4 20 L40 20 L40 24 L4 24 Z' fill='%23ffffff' stroke='%23d1d5db' stroke-width='0.5'/><path d='M18 12 L30 12 Q34 12 34 16 L34 20 L14 20 L14 16 Q14 12 18 12 Z' fill='%23ffffff' stroke='%23d1d5db' stroke-width='0.5'/><ellipse cx='24' cy='16' rx='6' ry='2.5' fill='%234b5563'/></g></svg>") 24 24,pointer}

/* Raam-uitzicht: alleen zichtbaar op hover */
.window-view{
  position:absolute;
  inset:0 -4px -10px -4px;
  border-radius:4px;overflow:hidden;
  opacity:0;z-index:1;pointer-events:none;
  border:3px solid #0a1f14;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.5),
    0 2px 8px rgba(0,0,0,.2),
    0 1px 3px rgba(0,0,0,.15);
  background:#0a1f14;
  transform:scale(.96);
  transition:opacity .5s cubic-bezier(.4,0,.2,1),transform .5s cubic-bezier(.4,0,.2,1);
}
.streak-wrap:hover .window-view{opacity:1;transform:scale(1)}

/* Geen kruis in midden */
.window-view::before,
.window-view::after{display:none}

.sky{
  position:absolute;inset:0;
  background:linear-gradient(180deg,#7dd3fc 0%,#bae6fd 40%,#e0f2fe 100%);
}

.sun{
  position:absolute;top:3px;right:6px;
  width:11px;height:11px;border-radius:50%;
  background:radial-gradient(circle,#fef08a 0%,#fde047 30%,#facc15 60%,#f59e0b 100%);
  box-shadow:0 0 12px rgba(250,204,21,.7),0 0 4px rgba(255,255,255,.8);
  z-index:2;
}

.cloud{
  position:absolute;background:rgba(255,255,255,.95);border-radius:50%;
  filter:blur(.5px);z-index:2;
}
.cloud-1{
  width:16px;height:6px;top:22%;left:8%;
  box-shadow:
    6px -1px 0 -1px rgba(255,255,255,.95),
    11px 0 0 -2px rgba(255,255,255,.95),
    -4px 0 0 -1px rgba(255,255,255,.9);
}
.cloud-2{
  width:12px;height:4px;top:72%;left:60%;
  box-shadow:
    5px -1px 0 -1px rgba(255,255,255,.9),
    10px 0 0 -2px rgba(255,255,255,.9);
}

/* DE LETTERS = HET VUIL. Altijd zichtbaar, verdwijnen bij hover */
.dirt-text{
  position:relative;display:inline-block;z-index:3;
  font-style:italic;font-weight:400;
  color:#57534e;
  text-shadow:
    1px 0 0 rgba(68,64,60,.4),
    0 1px 0 rgba(68,64,60,.3),
    2px 1px 2px rgba(41,37,36,.3);
  filter:blur(.3px) contrast(1.1);
  transition:
    opacity .5s cubic-bezier(.4,0,.2,1),
    transform .6s cubic-bezier(.4,0,.2,1),
    filter .5s ease;
}
.streak-wrap:hover .dirt-text{
  opacity:0;
  transform:scale(1.05);
  filter:blur(8px) contrast(.5);
}

/* Eindglinster, gaat mee met hover */
.final-shine{
  position:absolute;top:-20%;left:-50%;width:50%;height:140%;
  background:linear-gradient(115deg,
    transparent 35%,
    rgba(255,255,255,.6) 45%,
    rgba(255,255,255,.95) 50%,
    rgba(255,255,255,.6) 55%,
    transparent 65%);
  transform:translateX(-80%) rotate(18deg);
  opacity:0;pointer-events:none;z-index:5;
  filter:blur(.5px);
}
.streak-wrap:hover .final-shine{
  animation:shineOnHover 1.2s cubic-bezier(.25,.46,.45,.94) .4s 1 forwards;
}
@keyframes shineOnHover{
  0%{opacity:0;transform:translateX(-80%) rotate(18deg)}
  20%{opacity:.9}
  100%{opacity:0;transform:translateX(280%) rotate(18deg)}
}

/* Sparkles op hover */
.sparkle{
  position:absolute;pointer-events:none;z-index:6;opacity:0;
  width:14px;height:14px;
  background:
    radial-gradient(circle,rgba(255,255,255,1) 0%,rgba(255,255,255,.8) 20%,transparent 40%),
    linear-gradient(0deg,transparent 45%,rgba(255,255,255,.9) 48%,rgba(255,255,255,.9) 52%,transparent 55%),
    linear-gradient(90deg,transparent 45%,rgba(255,255,255,.9) 48%,rgba(255,255,255,.9) 52%,transparent 55%);
  filter:drop-shadow(0 0 4px rgba(255,255,255,.9));
}
.sp-1{top:5%;left:15%}
.sp-2{top:55%;right:20%;width:10px;height:10px}
.sp-3{top:20%;right:40%;width:8px;height:8px}
.streak-wrap:hover .sp-1{animation:sparkleOnHover 1s ease-out .9s 1 forwards}
.streak-wrap:hover .sp-2{animation:sparkleOnHover 1s ease-out 1.1s 1 forwards}
.streak-wrap:hover .sp-3{animation:sparkleOnHover 1s ease-out 1s 1 forwards}
@keyframes sparkleOnHover{
  0%{opacity:0;transform:scale(.3) rotate(0deg)}
  40%{opacity:1;transform:scale(1.2) rotate(90deg)}
  100%{opacity:0;transform:scale(.4) rotate(180deg)}
}

@media (prefers-reduced-motion: reduce){
  .dirt-text,.window-view{transition:opacity .2s}
  .final-shine,.sparkle{display:none}
}

/* Waterdruppels, 1x */
.drops-wrap{position:relative;display:inline-block}
.drop{
  position:absolute;width:8px;height:10px;
  background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.9),rgba(14,165,233,.8) 40%,rgba(14,165,233,.5) 70%);
  border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;
  opacity:0;pointer-events:none;
  box-shadow:inset -1px -1px 2px rgba(14,165,233,.3);
}
.drop-1{top:-14px;right:15%}
.drop-2{top:-14px;right:35%}
.drop-3{top:-14px;right:55%}
.hero-title.animate .drop-1{animation:dropFall 2s ease-in 1s 1 forwards}
.hero-title.animate .drop-2{animation:dropFall 2.2s ease-in 1.4s 1 forwards}
.hero-title.animate .drop-3{animation:dropFall 2.1s ease-in 1.8s 1 forwards}
@keyframes dropFall{
  0%{opacity:0;transform:translateY(0) scale(.8)}
  15%{opacity:1;transform:translateY(4px) scale(1)}
  80%{opacity:.8}
  100%{opacity:0;transform:translateY(70px) scale(.7)}
}

/* Zeepbellen, 1x */
.hero-title::before,.hero-title::after{
  content:'';position:absolute;border-radius:50%;
  background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.95),rgba(134,239,172,.4) 40%,rgba(22,163,74,.1) 70%);
  border:1px solid rgba(255,255,255,.5);
  pointer-events:none;opacity:0;
  box-shadow:inset -2px -2px 4px rgba(22,163,74,.1);
}
.hero-title::before{width:18px;height:18px;bottom:-10px;left:20%}
.hero-title::after{width:12px;height:12px;bottom:-10px;left:60%}
.hero-title.animate::before{animation:bubbleRise 3.5s ease-in .5s 1 forwards}
.hero-title.animate::after{animation:bubbleRise 4s ease-in 1.2s 1 forwards}
@keyframes bubbleRise{
  0%{opacity:0;transform:translateY(0) translateX(0) scale(.3)}
  15%{opacity:.85}
  60%{transform:translateY(-60px) translateX(8px) scale(1);opacity:.6}
  100%{opacity:0;transform:translateY(-140px) translateX(-4px) scale(.8)}
}

@media(max-width:640px){
  .drop{width:6px;height:8px}
  .hero-title::before{width:14px;height:14px}
  .hero-title::after{width:10px;height:10px}
}

/* Respect motion voorkeur */
@media (prefers-reduced-motion: reduce){
  .glass-text{animation:none;background:var(--ink);-webkit-background-clip:unset;background-clip:unset;color:var(--ink)}
  .squeegee-line,.drop,.hero-title::before,.hero-title::after{animation:none;display:none}
}
header .logo{transition:transform .3s cubic-bezier(.16,1,.3,1)}
header .logo:hover{transform:translateY(-2px)}
header .logo-mark{transition:transform .4s cubic-bezier(.34,1.56,.64,1)}
header .logo:hover .logo-mark{transform:rotate(-8deg) scale(1.08)}
.btn{position:relative;overflow:hidden}
.btn::before{content:'';position:absolute;top:50%;left:50%;width:0;height:0;background:rgba(255,255,255,.25);border-radius:50%;transform:translate(-50%,-50%);transition:width .6s,height .6s;pointer-events:none}
.btn:hover::before{width:300px;height:300px}
.btn-primary{transition:all .3s cubic-bezier(.34,1.56,.64,1)}
.btn-primary:hover{transform:translateY(-2px) scale(1.02)}
.btn-primary:active{transform:translateY(0) scale(.98)}
.trust-tile{transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s}
.trust-tile:hover{transform:translateY(-6px) scale(1.02)}
.trust-tile.featured .trust-tile-icon{animation:floatIcon 4s ease-in-out infinite}
@keyframes floatIcon{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-4px) rotate(5deg)}}
.hero-chips .chip{opacity:0;animation:chipIn .5s cubic-bezier(.16,1,.3,1) both;transition:transform .2s,background .2s,color .2s}
.hero-chips .chip:nth-child(1){animation-delay:.7s}
.hero-chips .chip:nth-child(2){animation-delay:.8s}
.hero-chips .chip:nth-child(3){animation-delay:.9s}
.hero-chips .chip:nth-child(4){animation-delay:1s}
.hero-chips .chip:nth-child(5){animation-delay:1.1s}
.hero-chips .chip:hover{transform:translateY(-2px);background:var(--brand);color:white}
@keyframes chipIn{from{opacity:0;transform:translateY(10px) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}}
.stat-value{display:inline-block;opacity:0;transform:translateY(20px) scale(.9);transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1)}
.stats-bar.in .stat-value{opacity:1;transform:translateY(0) scale(1)}
.stats-bar.in .stat:nth-child(1) .stat-value{transition-delay:.1s}
.stats-bar.in .stat:nth-child(2) .stat-value{transition-delay:.2s}
.stats-bar.in .stat:nth-child(3) .stat-value{transition-delay:.3s}
.stats-bar.in .stat:nth-child(4) .stat-value{transition-delay:.4s}
.dienst-card{transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s,border-color .4s}
.dienst-card:hover{transform:translateY(-6px)}
.dienst-icon{transition:transform .4s cubic-bezier(.34,1.56,.64,1),background .3s}
.dienst-card:hover .dienst-icon{transform:scale(1.1) rotate(-5deg);background:var(--brand)}
.dienst-icon svg{transition:stroke .3s}
.dienst-card:hover .dienst-icon svg{stroke:white}
.step-card{transition:transform .3s}
.step-card:hover{transform:translateY(-4px)}
.step-card::before{transition:transform .4s cubic-bezier(.34,1.56,.64,1)}
.step-card:hover::before{transform:scale(1.1)}
.option{transition:all .25s cubic-bezier(.16,1,.3,1)}
.option:hover{transform:translateX(4px)}
.option.selected{animation:selectBounce .4s cubic-bezier(.34,1.56,.64,1)}
@keyframes selectBounce{0%{transform:scale(1)}50%{transform:scale(1.03)}100%{transform:scale(1)}}
.option-icon{transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.option.selected .option-icon{transform:scale(1.15) rotate(-5deg)}
.progress-step{transition:background .5s cubic-bezier(.16,1,.3,1),opacity .3s}
.review-card{transition:all .4s cubic-bezier(.16,1,.3,1)}
.review-card:hover{transform:translateY(-4px)}
.reviews-grid .review-card:nth-child(2):hover{transform:translateY(-4px) rotate(.5deg)}
.review-card:hover .reviewer-avatar{animation:avatarBounce .5s cubic-bezier(.34,1.56,.64,1)}
@keyframes avatarBounce{0%,100%{transform:scale(1)}50%{transform:scale(1.15) rotate(-10deg)}}
.rating-number{animation:glow 3s ease-in-out infinite}
@keyframes glow{0%,100%{text-shadow:0 0 0 rgba(22,163,74,0)}50%{text-shadow:0 0 20px rgba(22,163,74,.3)}}
.waarom-item{transition:transform .3s}
.waarom-item:hover{transform:translateY(-6px)}
.waarom-num{transition:transform .4s cubic-bezier(.34,1.56,.64,1);display:inline-block}
.waarom-item:hover .waarom-num{transform:scale(1.15)}
.contact-item{transition:transform .3s}
.contact-item:hover{transform:translateX(4px)}
.contact-icon{transition:all .3s cubic-bezier(.34,1.56,.64,1)}
.contact-item:hover .contact-icon{background:var(--brand);color:white;transform:scale(1.1) rotate(-5deg)}
.contact-item:hover .contact-icon svg{stroke:white}
.hours-list li.today{position:relative}
.hours-list li.today .day{display:inline-flex;align-items:center;gap:10px}
.hours-list li.today .day::before{
  content:none;
  display:inline-block;
  background:var(--brand);color:white;
  padding:3px 9px;border-radius:6px;
  font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  line-height:1;
  animation:todayBadge 2.5s ease-in-out infinite;
}
@keyframes todayBadge{
  0%,100%{box-shadow:0 0 0 0 rgba(22,163,74,.4)}
  50%{box-shadow:0 0 0 6px rgba(22,163,74,0)}
}
.cta-band::before{animation:ctaGlow 8s ease-in-out infinite}
@keyframes ctaGlow{0%,100%{opacity:1}50%{opacity:.6}}
.fab{animation:fabEnter .8s cubic-bezier(.34,1.56,.64,1) 1s both}
@keyframes fabEnter{from{opacity:0;transform:scale(0) rotate(-180deg)}to{opacity:1;transform:scale(1) rotate(0)}}
.fab:hover{animation:fabWiggle .5s ease-in-out}
@keyframes fabWiggle{0%,100%{transform:scale(1.08) rotate(0)}25%{transform:scale(1.08) rotate(-10deg)}75%{transform:scale(1.08) rotate(10deg)}}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .hero-blob{animation:none !important}
}

/* ========== COMPACTE MOBIELE WEERGAVE ========== */
@media(max-width:640px){
  .container{padding:0 16px}

  /* Kleinere headings */
  h1{font-size:1.85rem !important;line-height:1.15}
  h2{font-size:1.5rem !important}
  h3{font-size:1.08rem}

  /* Topbar compacter */
  .topbar{font-size:.66rem;padding:4px 0;max-height:30px}
  .topbar .container{gap:8px}

  /* Nav compacter */
  .nav{padding:10px 0}
  .logo{font-size:1.1rem;gap:10px}
  .logo-mark{width:36px;height:36px}
  .logo small{font-size:.55rem;letter-spacing:.12em}

  /* Secties fors minder lucht */
  section{padding:64px 0}
  .section-head{margin-bottom:22px}
  .section-head p{font-size:.9rem}
  .eyebrow{font-size:.68rem;padding:4px 10px;margin-bottom:10px}
  .section-head{margin:0 auto 40px}
  .section-head h2{font-size:1.6rem}
  .section-head p{font-size:1rem}

  /* Hero compact */
  .hero{padding:32px 0 72px}
  .hero-blob{filter:blur(60px)}
  .hero-blob-1{width:340px;height:340px;top:-80px;left:-80px}
  .hero-blob-2{width:280px;height:280px;right:-80px;top:30%}
  .hero-blob-3{width:220px;height:220px;bottom:-50px;left:20%}
  .hero-grid{gap:22px}
  .hero-sub{font-size:.95rem;margin-bottom:18px}
  .hero h1{margin-bottom:16px}
  .hero-actions{gap:8px;margin-bottom:18px}
  .hero-actions .btn{padding:11px 16px;font-size:.88rem;flex:1;justify-content:center}
  .hero-chips{gap:5px}
  .chip{font-size:.74rem;padding:4px 9px}
  /* Busje compacter op mobiel */
  .hero-road{height:72px}
  .hero-van{bottom:12px}
  .hero-van svg{width:138px;height:63px}
  .hero-road-line{bottom:17px}

  /* Trust tiles compacter */
  .trust-stack{gap:8px}
  .trust-tile{padding:14px}
  .trust-tile-value{font-size:1.25rem}
  .trust-tile-detail{font-size:.78rem}
  .trust-tile-label{font-size:.62rem;margin-bottom:5px}
  .trust-tile-icon{width:30px;height:30px;margin-bottom:8px}

  /* Stats-bar compact */
  .stats-section{margin-top:-24px}
  .stats-bar{padding:18px 14px;gap:10px;border-radius:16px}
  .stat-value{font-size:1.45rem;margin-bottom:3px}
  .stat-label{font-size:.64rem}

  /* Calculator compact */
  .calc-wrap{padding:18px;border-radius:16px}
  .calc-grid{gap:16px}
  .calc-fields{gap:14px}
  .calc-field label{font-size:.84rem;margin-bottom:8px}
  .calc-typegrid{gap:8px}
  .calc-typegrid button{padding:13px 6px;font-size:.8rem}
  .calc-typegrid button svg{width:23px;height:23px}
  .calc-slider{gap:12px}
  .calc-slider-value{min-width:44px;padding:6px 10px;font-size:1rem}
  .calc-services{gap:8px}
  .calc-check{padding:12px 13px;gap:11px}
  .calc-check-icon{width:36px;height:36px}
  .calc-check-icon svg{width:20px;height:20px}
  .calc-check-text{font-size:.88rem}
  .calc-check-text small{font-size:.76rem}
  .calc-result{padding:22px;border-radius:14px;gap:18px}
  .calc-result-price{font-size:2.2rem}
  .calc-result-note{font-size:.82rem}

  /* Planner compact */
  .planner{border-radius:16px}
  .planner-head{padding:16px 18px 14px}
  .planner-head h3{font-size:1.1rem}
  .planner-head p{font-size:.85rem}
  .progress{margin-top:14px}
  .planner-body{padding:18px}
  .step h4{font-size:1.08rem}
  .step-desc{font-size:.85rem;margin-bottom:14px}
  .option{padding:11px;gap:9px;font-size:.86rem}
  .option-icon{width:30px;height:30px;font-size:1.1rem}
  .option-text small{font-size:.72rem}
  .form-group{margin-bottom:14px}
  .form-group input,.form-group textarea{padding:10px 13px;font-size:.9rem}
  .form-group textarea{min-height:70px}
  .planner-footer{padding:12px 18px}
  .btn-group{width:100%}
  .planner-footer .btn{flex:1;justify-content:center;padding:10px 12px;font-size:.84rem}
  .step-indicator{width:100%;text-align:center;margin-bottom:2px;font-size:.8rem}
  .whatsapp-notice{padding:12px;gap:9px}
  .whatsapp-notice-icon{width:30px;height:30px}
  .whatsapp-notice ol{font-size:.82rem}
  .summary{padding:14px;margin-bottom:14px}
  .summary-row{padding:7px 0;font-size:.86rem}

  /* Reviews compact */
  .reviews-header{gap:16px;margin-bottom:22px}
  .rating-big{padding:12px 16px;gap:14px;width:100%}
  .rating-number{font-size:1.9rem}
  .rating-details small{font-size:.78rem}
  .reviews-grid{gap:10px}
  .review-card{padding:18px;border-radius:14px}
  .review-text{font-size:.86rem;margin-bottom:12px;line-height:1.5}
  .reviewer-avatar{width:36px;height:36px}
  .reviewer-info strong{font-size:.85rem}
  .reviewer-info small{font-size:.74rem}

  /* Waarom compact */
  .waarom-grid{gap:18px;grid-template-columns:repeat(2,1fr)}
  .waarom-num{font-size:1.9rem;margin-bottom:4px}
  .waarom-item h4{font-size:1rem;margin-bottom:4px}
  .waarom-item p{font-size:.82rem}

  /* FAQ compact */
  .faq-item{margin-bottom:8px;border-radius:12px}
  .faq-question{padding:13px 16px;font-size:.9rem;gap:10px}
  .faq-icon{width:24px;height:24px}
  .faq-answer-inner{padding:0 16px 14px;font-size:.86rem;line-height:1.55}

  /* Contact compact */
  .contact-card{padding:18px;border-radius:16px}
  .contact-card h3{font-size:1.08rem;margin-bottom:10px}
  .contact-item{padding:10px 0;gap:10px}
  .contact-icon{width:34px;height:34px}
  .contact-icon svg{width:18px;height:18px}
  .contact-item strong{font-size:.7rem;margin-bottom:2px}
  .contact-item a,.contact-item span{font-size:.9rem}
  .hours-list li{padding:8px 0;font-size:.86rem}
  .hours-list li.today .day::before{padding:2px 7px;font-size:.58rem}

  /* CTA band compact */
  .cta-band{padding:64px 0}
  .cta-band p{font-size:.92rem;margin-bottom:18px}
  .cta-band-actions{gap:8px}
  .cta-band-actions .btn{flex:1;justify-content:center;padding:11px 14px;font-size:.88rem}

  /* Footer compact */
  footer{padding:48px 0 24px}
  .footer-grid{gap:20px;margin-bottom:20px;grid-template-columns:1fr 1fr}
  .footer-brand{grid-column:1/-1}
  .footer-brand p{font-size:.8rem;margin-top:10px}
  footer h5{font-size:.88rem;margin-bottom:8px}
  footer li{margin-bottom:5px}
  footer p,footer a{font-size:.78rem}
  .footer-bottom{font-size:.72rem;flex-direction:column;align-items:flex-start;gap:6px;padding-top:18px}

  /* Floating elementen compacter */
  .fab{width:48px;height:48px;bottom:78px;right:14px}
  .fab svg{width:22px;height:22px}
  .scroll-top{width:38px;height:38px;right:18px;bottom:134px}
  .scroll-top svg{width:16px;height:16px}

  /* Mobile CTA bar compact */
  .mobile-cta{padding:8px 10px;gap:7px}
  .mobile-cta .btn{padding:10px 8px;font-size:.86rem}
  body{padding-bottom:64px !important}

  /* Cookie-bar compacter */
  .cookie-bar{left:10px;right:10px;padding:14px;bottom:72px;border-radius:12px}
  .cookie-bar h4{font-size:.9rem;margin-bottom:4px}
  .cookie-bar p{font-size:.78rem;margin-bottom:10px}
  .cookie-buttons .btn{font-size:.82rem;padding:8px 12px}
}

/* Extra compact voor heel kleine schermen */
@media(max-width:380px){
  h1{font-size:1.65rem !important}
  .container{padding:0 12px}
  .trust-stack{grid-template-columns:1fr}
  .waarom-grid{grid-template-columns:1fr;gap:14px}
  .calc-typegrid{grid-template-columns:1fr 1fr}
  .calc-services{grid-template-columns:1fr}
  section{padding:26px 0}
  .stats-bar{grid-template-columns:repeat(4,1fr);padding:14px 8px;gap:4px}
  .stat-value{font-size:1.2rem}
  .stat-label{font-size:.58rem}
}



/* ============ ADMIN ENTRY (knauf wrapper) ============ */
.knauf-admin-btn{
  position:fixed;bottom:24px;left:24px;
  z-index:85;
  width:44px;height:44px;
  background:rgba(10,31,20,.88);
  color:rgba(255,255,255,.7);
  border-radius:50%;
  display:grid;place-items:center;
  cursor:pointer;border:1px solid rgba(255,255,255,.12);
  transition:all .2s;
  backdrop-filter:blur(8px);
}
.knauf-admin-btn:hover{
  background:#16a34a;color:white;border-color:#16a34a;
  transform:scale(1.08);
}

.knauf-login-modal{
  position:fixed;inset:0;
  background:rgba(10,31,20,.92);
  backdrop-filter:blur(12px);
  z-index:500;display:none;
  align-items:center;justify-content:center;
  padding:20px;
}
.knauf-login-modal.open{display:flex}
.knauf-login-card{
  background:white;
  max-width:400px;width:100%;
  padding:42px 36px;
  border-radius:16px;
  position:relative;
  box-shadow:0 30px 80px rgba(0,0,0,.3);
  text-align:center;
}
.knauf-login-icon{
  width:54px;height:54px;
  background:#16a34a;color:white;
  display:grid;place-items:center;
  border-radius:50%;
  margin:0 auto 18px;
}
.knauf-login-card h2{font-size:1.25rem;margin-bottom:6px;font-weight:600}
.knauf-login-card p{color:#64748b;font-size:.88rem;margin-bottom:26px}
.knauf-login-card input{
  width:100%;padding:13px 16px;
  border:1px solid #e2e8f0;border-radius:8px;
  font-size:.95rem;font-family:inherit;margin-bottom:12px;
  text-align:center;letter-spacing:.08em;
}
.knauf-login-card input:focus{outline:none;border-color:#16a34a}
.knauf-login-err{color:#dc2626;font-size:.82rem;min-height:1em;margin-bottom:10px;font-weight:600}
.knauf-login-close{
  position:absolute;top:14px;right:14px;
  width:32px;height:32px;border-radius:50%;
  background:#f8faf9;border:none;cursor:pointer;
  display:grid;place-items:center;
}
.knauf-login-close:hover{background:#dc2626;color:white}

.knauf-shell{
  position:fixed;inset:0;
  z-index:450;
  display:none;
  overflow:hidden;
  background:#000;
}
.knauf-shell.open{display:block}

.knauf-shell #knauf-root{
  width:100%;height:100%;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}

.knauf-logout-btn{
  position:fixed;top:env(safe-area-inset-top,0);right:8px;
  z-index:600;
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 12px;
  font-size:.74rem;font-weight:600;
  background:rgba(255,255,255,.08);
  color:rgba(255,255,255,.85);
  border:1px solid rgba(255,255,255,.15);
  border-radius:6px;
  cursor:pointer;
  font-family:inherit;
  margin:8px;
  backdrop-filter:blur(8px);
}
.knauf-logout-btn:hover{background:rgba(255,255,255,.18);color:white}



/* Nieuwe simpele afspraak-sectie (vervangt de 4-staps planner) */
.afspraak-section{padding:80px 0;background:linear-gradient(180deg,#f9fafb 0%,#fff 100%)}
.afspraak-card{
  max-width:760px;margin:0 auto;
  background:white;border:1px solid var(--line);border-radius:24px;
  padding:48px 40px;
  text-align:center;
  box-shadow:0 4px 24px rgba(0,0,0,.04);
}
.afspraak-icon{
  width:72px;height:72px;border-radius:20px;
  background:#25d366;color:white;
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 20px;
  box-shadow:0 8px 24px rgba(37,211,102,.3);
}
.afspraak-card .eyebrow{margin-bottom:12px}
.afspraak-card h2{margin-bottom:14px;font-size:2rem}
.afspraak-lead{font-size:1.1rem;color:var(--ink-soft);max-width:520px;margin:0 auto 28px;line-height:1.55}
.afspraak-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:32px}
.btn-large{padding:16px 28px;font-size:1rem}
.afspraak-trust{
  display:flex;gap:24px;justify-content:center;flex-wrap:wrap;
  padding-top:24px;border-top:1px solid var(--line);
  font-size:.88rem;color:var(--muted);
}
.afspraak-trust span{display:inline-flex;align-items:center;gap:6px}
.afspraak-trust svg{color:var(--brand)}
@media(max-width:640px){
  .afspraak-section{padding:48px 0}
  .afspraak-card{padding:32px 20px;border-radius:18px}
  .afspraak-card h2{font-size:1.5rem}
  .afspraak-lead{font-size:.98rem}
  .afspraak-actions{flex-direction:column}
  .afspraak-actions .btn{width:100%;justify-content:center}
  .afspraak-trust{gap:14px;font-size:.82rem}
}

/* ============================================================
   POLISH SLAG, consistent spacing, subtieler design
   ============================================================ */

/* 1. Sectie spacing consistent overal */
section,
.afspraak-section{padding:96px 0 !important}
.calculator-section,
.contracten{padding:96px 0 !important}
.hero{padding:96px 0 120px !important}
.cta-band{padding:88px 0 !important}
footer{padding:80px 0 32px !important}

@media(max-width:768px){
  section,
  .afspraak-section,
  .calculator-section,
  .contracten{padding:64px 0 !important}
  .hero{padding:56px 0 48px !important}
  .cta-band{padding:64px 0 !important}
  footer{padding:56px 0 24px !important}
}

/* 2. Dividers tussen secties: rustiger (alleen subtiele lijn, geen gloed) */
section + section::before,
section + .stats-section::before,
.stats-section + section::before{
  width:min(80%,420px) !important;
  height:1px !important;
  background:linear-gradient(90deg,transparent,rgba(0,0,0,.07) 50%,transparent) !important;
}
section + section::after{display:none !important}

/* 3. Topbar dunner en eleganter */
.topbar{
  padding:7px 0 !important;
  font-size:.72rem !important;
  letter-spacing:.04em !important;
  background:#0d1f17 !important;
}
.topbar .container{gap:20px !important}
.topbar svg{width:11px !important;height:11px !important;opacity:.7}

/* 4. Body en typografie ruimer */
body{line-height:1.6}
p{line-height:1.65}
.hero-sub,.section-head p,.afspraak-lead{line-height:1.6}

/* 5. Section-head meer adem */
.section-head{margin-bottom:64px !important}
@media(max-width:768px){.section-head{margin-bottom:44px !important}}

/* 6. Hero ruimer en aansprekender */
.hero-eyebrow{margin-bottom:24px !important;font-size:.78rem;letter-spacing:.16em}
.hero-title{margin-bottom:22px !important;line-height:1.05 !important}
.hero-sub{margin-bottom:36px !important;font-size:1.15rem;max-width:620px;margin-left:auto;margin-right:auto}
.hero-actions{margin-bottom:40px !important;gap:12px !important}
.hero-services{
  padding:16px 0 !important;
  font-size:.86rem;letter-spacing:.02em;
  color:var(--muted);
}
.hero-reviews{margin-top:24px}

/* 7. Stats-bar verfijnd */
.stats-bar{
  border-color:rgba(0,0,0,.06) !important;
  padding:32px 0 !important;
}
@media(min-width:720px){.stats-bar{padding:36px 0 !important}}
.stat-value{font-size:1.7rem;letter-spacing:-.02em}
.stat-label{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:4px}

/* 8. Eyebrow pill subtieler */
.eyebrow{
  font-size:.74rem !important;
  letter-spacing:.12em !important;
  padding:6px 12px !important;
  margin-bottom:18px !important;
}

/* 9. Buttons met meer presence */
.btn{padding:13px 22px;font-weight:600}
.btn-large{padding:16px 28px !important;font-size:1rem !important}
.btn-whatsapp{
  background:#25d366;
  box-shadow:0 6px 20px rgba(37,211,102,.35) !important;
}
.btn-whatsapp:hover{
  background:#1ebe5d;
  transform:translateY(-2px);
  box-shadow:0 10px 28px rgba(37,211,102,.45) !important;
}

/* 10. Card padding consistent */
.contract-card,.review-card,.blog-card,.faq-item{
  border-radius:18px !important;
}

/* 11. Headings consistente kerning */
h1,h2,h3,h4{letter-spacing:-.02em}
h2{line-height:1.15}

/* 12. Container max-width iets ruimer voor moderne schermen */
.container{padding:0 24px}
@media(min-width:768px){.container{padding:0 32px}}

/* ============================================================
   MINDER WIT, ritme via sectie-achtergronden + diepte
   ============================================================ */

/* HERO: zachte groene gradient achtergrond + subtiele radial glow */
.hero{
  background:linear-gradient(180deg,#f3f8f4 0%,#fafdfb 60%,#fff 100%) !important;
  position:relative;overflow:hidden;
}
.hero::before{
  content:'';position:absolute;top:-10%;right:-10%;
  width:600px;height:600px;
  background:radial-gradient(circle,rgba(22,163,74,.10) 0%,rgba(22,163,74,.04) 35%,transparent 65%);
  pointer-events:none;z-index:0;
}
.hero::after{
  content:'';position:absolute;bottom:-20%;left:-15%;
  width:500px;height:500px;
  background:radial-gradient(circle,rgba(22,163,74,.06) 0%,transparent 60%);
  pointer-events:none;z-index:0;
}
.hero .container{position:relative;z-index:2}

/* SECTIE-RITME: afwisselend wit / off-white */
.stats-section{background:#fff}
.calculator-section{background:#fff !important}
.afspraak-section{background:linear-gradient(180deg,#f3f8f4 0%,#fff 100%) !important}
.contracten{background:#f7f9f8 !important}
.reviews{background:#fff !important}
.blog{background:#f7f9f8 !important}
.faq{background:#fff !important}
.contact-section{background:#f7f9f8 !important}

/* CARDS: meer diepte met zachte schaduw, niet langer plat wit op wit */
.contract-card,
.review-card,
.blog-card,
.faq-item{
  background:#fff !important;
  border:1px solid rgba(0,0,0,.05) !important;
  box-shadow:
    0 1px 2px rgba(0,0,0,.04),
    0 8px 24px rgba(0,0,0,.04) !important;
  transition:transform .25s ease,box-shadow .25s ease !important;
}
.contract-card:hover,
.review-card:hover,
.blog-card:hover{
  transform:translateY(-3px);
  box-shadow:
    0 4px 8px rgba(0,0,0,.04),
    0 16px 40px rgba(0,0,0,.08) !important;
}

/* Afspraak-card: extra warmte met subtiele groene gloed */
.afspraak-card{
  background:#fff !important;
  border:1px solid rgba(22,163,74,.12) !important;
  box-shadow:
    0 4px 12px rgba(0,0,0,.04),
    0 24px 60px rgba(22,163,74,.08) !important;
}

/* DIVIDERS terug met subtiel groen accent */
section + section::before,
section + .stats-section::before,
.stats-section + section::before{
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(22,163,74,.15) 30%,
    rgba(22,163,74,.25) 50%,
    rgba(22,163,74,.15) 70%,
    transparent 100%) !important;
  width:min(85%,520px) !important;
  height:1px !important;
}

/* EYEBROW: groener en meer presence */
.eyebrow{
  background:rgba(22,163,74,.1) !important;
  color:var(--brand-darker, #0e7a37) !important;
  border:1px solid rgba(22,163,74,.18);
}
.hero-eyebrow{
  background:rgba(22,163,74,.1);
  color:var(--brand-darker, #0e7a37);
  padding:6px 14px;border-radius:100px;
  display:inline-block;
  border:1px solid rgba(22,163,74,.18);
}

/* HERO REVIEWS strip: subtiel kaderkleur en meer presence */
.hero-reviews{
  background:rgba(255,255,255,.7);
  backdrop-filter:blur(8px);
  display:inline-flex;
  padding:10px 18px;border-radius:100px;
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 4px 16px rgba(0,0,0,.04);
  margin-top:28px;
  gap:10px;align-items:center;
}
.hero-reviews-score{color:var(--brand-darker, #0e7a37);font-weight:700}
.hero-reviews-stars{color:#fbbf24}

/* STATS-BAR: meer presence, groen accent */
.stats-bar{
  border-top-color:rgba(22,163,74,.15) !important;
  border-bottom-color:rgba(22,163,74,.15) !important;
  background:linear-gradient(180deg,#fafdfb 0%,#fff 100%) !important;
}
.stat-value em{
  color:var(--brand);font-style:normal;font-weight:700;
}

/* TOPBAR: warmer donkergroen i.p.v. zwart-achtig */
.topbar{
  background:linear-gradient(90deg,#0a2f1d 0%,#0e3d27 100%) !important;
}

/* SELECTIE: groene markeerkleur */
::selection{background:rgba(22,163,74,.2);color:#0a2f1d}

/* ============================================================
   MOBIEL COMPACTER, meer zichtbaar per scherm (<768px)
   ============================================================ */
@media(max-width:768px){
  
  /* Veel compactere sectie-padding, je ziet meer per scherm */
  section,
  .afspraak-section,
  .calculator-section,
  .contracten{padding:40px 0 !important}
  .hero{padding:32px 0 90px !important}
  .cta-band{padding:44px 0 !important}
  footer{padding:40px 0 20px !important}
  
  /* Section-head compacter */
  .section-head{margin-bottom:28px !important}
  .section-head h2{font-size:1.45rem !important;margin-bottom:8px !important}
  .section-head p{font-size:.95rem !important}
  .eyebrow{margin-bottom:12px !important;font-size:.68rem !important;padding:5px 10px !important}
  
  /* HERO compacter maar rijk */
  .hero-eyebrow{margin-bottom:14px !important;font-size:.7rem !important}
  .hero-title{font-size:2rem !important;margin-bottom:14px !important;line-height:1.1 !important}
  .hero-sub{font-size:1rem !important;margin-bottom:22px !important}
  .hero-actions{margin-bottom:24px !important;gap:10px !important}
  .hero-actions .btn{width:100%;justify-content:center}
  .hero-services{font-size:.78rem !important;padding:12px 0 !important;line-height:1.5}
  .hero-reviews{margin-top:18px !important;padding:8px 14px !important;font-size:.82rem}
  
  /* STATS-BAR: 4 koloms ook op mobiel (compacter, meer info zichtbaar) */
  .stats-bar{
    grid-template-columns:repeat(4,1fr) !important;
    padding:18px 0 !important;
    gap:4px !important;
  }
  .stat-value{font-size:1.15rem !important}
  .stat-value em{font-size:1.15rem !important}
  .stat-label{font-size:.6rem !important;letter-spacing:.04em !important;margin-top:2px !important}
  
  /* CARDS compacter */
  .contract-card{padding:20px 18px !important}
  .contract-name{font-size:1.05rem !important}
  .contract-price{font-size:1.6rem !important}
  .review-card{padding:18px !important}
  .blog-card .blog-body{padding:16px !important}
  .blog-visual{height:120px !important;font-size:2.5rem !important}
  .faq-item{padding:0 !important}
  .faq-question{padding:16px 18px !important;font-size:.95rem !important}
  
  /* Grids: blijf 1 koloms maar met kleinere gap */
  .contracten-grid,
  .reviews-grid,
  .blog-grid{gap:14px !important}
  
  /* Afspraak-card compacter */
  .afspraak-card{padding:28px 20px !important}
  .afspraak-icon{width:56px !important;height:56px !important;margin-bottom:14px !important}
  .afspraak-card h2{font-size:1.4rem !important}
  .afspraak-lead{font-size:.95rem !important;margin-bottom:20px !important}
  .afspraak-actions{margin-bottom:20px !important;gap:10px !important}
  .afspraak-trust{gap:10px !important;font-size:.78rem !important;padding-top:18px !important}
  
  /* CALCULATOR compacter */
  .calc-wrap{padding:0 !important}
  .calc-grid{gap:16px !important}
  
  /* CTA-band compacter */
  .cta-band h2{font-size:1.5rem !important}
  .cta-band p{font-size:.95rem !important}
  .cta-band-actions{gap:10px !important}
  .cta-band-actions .btn{width:100%;justify-content:center}
  
  /* Body tekst iets compacter op mobiel */
  body{line-height:1.55}
  p{line-height:1.55}
  
  /* Buttons compacter op mobiel */
  .btn{padding:12px 18px !important;font-size:.92rem !important}
  .btn-large{padding:14px 22px !important;font-size:.95rem !important}
  
  /* Reviews tekst compacter */
  .review-text{font-size:.92rem !important;line-height:1.5 !important}
  
  /* Contact items compacter */
  .contact-item{padding:12px 0 !important}
  .hours-list li{padding:9px 0 !important;font-size:.9rem !important}
  
  /* Footer compacter */
  .footer-grid{gap:24px !important}
}

/* Extra kleine schermen (<400px), nog iets compacter */
@media(max-width:400px){
  .hero-title{font-size:1.75rem !important}
  .stat-value{font-size:1rem !important}
  .stat-label{font-size:.55rem !important}
  .section-head h2{font-size:1.3rem !important}
}

/* ============================================================
   HEADER, desktop normaal (logo links), mobiel logo gecentreerd
   ============================================================ */
/* Mobiele spacer alleen op mobiel zichtbaar (balanceert hamburger) */
.nav-mobile-spacer{display:none}

/* DESKTOP (≥900px): normale layout, logo links, menu midden, acties rechts */
@media(min-width:900px){
  .nav{
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    padding:14px 0;
  }
  .nav-mobile-spacer{display:none !important}
  .logo{flex-shrink:0}
  .nav-links{flex:1;justify-content:center}
  .nav-actions{flex-shrink:0}
}

/* MOBIEL (<900px): logo gecentreerd, hamburger rechts, menu klapt uit */
@media(max-width:899px){
  .nav{
    display:grid !important;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    gap:8px;
    padding:12px 0;
  }
  .nav-mobile-spacer{display:block;grid-column:1}
  .logo{
    grid-column:2;
    justify-self:center;
  }
  .nav-actions{
    grid-column:3;
    justify-self:end;
  }
  /* Menu klapt uit als dropdown onder de header */
  .nav-links{
    grid-column:1 / -1;
    border-top:none !important;
    margin-top:0 !important;
    padding:12px 20px 16px !important;
  }
}

/* ============ SCÈNE-ANIMATIE ============ */
.scene-section{padding:96px 0;background:var(--bg)}
.scene{
  max-width:920px;margin:0 auto;background:linear-gradient(180deg,#ffffff,#f6fbf8);
  border:1px solid var(--line);border-radius:var(--radius-lg);padding:20px;
  box-shadow:var(--shadow-md);overflow:hidden;
}
.scene-svg{width:100%;height:auto;display:block}
.sc-van{animation:scVan 17s cubic-bezier(.45,0,.2,1) infinite}
.sc-ladder,.sc-worker-a,.sc-worker-b,.sc-bucket,.sc-sparkles{animation:scCrew 17s ease-in-out infinite}
.sc-sparkles-b{animation-delay:.4s}
.sc-arm-a{transform-box:fill-box;transform-origin:left center;animation:scWipe 17s ease-in-out infinite}
.sc-arm-b{transform-box:fill-box;transform-origin:right center;animation:scWipe 17s ease-in-out infinite;animation-delay:.5s}
.sc-shine{opacity:0;animation:scShine 17s ease-in-out infinite}
.sc-shine-2{animation-delay:.5s}.sc-shine-3{animation-delay:1s}.sc-shine-4{animation-delay:1.5s}
.sc-sun{transform-box:fill-box;transform-origin:center;animation:scSun 60s linear infinite}
.sc-cloud-1{animation:scDrift 22s ease-in-out infinite alternate}
.sc-cloud-2{animation:scDrift 30s ease-in-out infinite alternate}
.sc-spark{animation:scTwinkle 1.6s ease-in-out infinite}
.sc-spark.s2{animation-delay:.5s}.sc-spark.s3{animation-delay:1s}
@keyframes scVan{0%{transform:translateX(-580px)}16%{transform:translateX(0)}84%{transform:translateX(0)}100%{transform:translateX(940px)}}
@keyframes scCrew{0%,14%{opacity:0}21%{opacity:1}82%{opacity:1}89%,100%{opacity:0}}
@keyframes scWipe{0%,25%{transform:rotate(0deg)}30%{transform:rotate(-13deg)}37%{transform:rotate(9deg)}44%{transform:rotate(-11deg)}51%{transform:rotate(7deg)}58%{transform:rotate(-9deg)}65%,100%{transform:rotate(0deg)}}
@keyframes scShine{0%,42%{transform:translateX(-26px);opacity:0}52%{opacity:.95}66%{transform:translateX(66px);opacity:.8}74%,100%{transform:translateX(66px);opacity:0}}
@keyframes scSun{to{transform:rotate(360deg)}}
@keyframes scDrift{from{transform:translateX(0)}to{transform:translateX(34px)}}
@keyframes scTwinkle{0%,100%{opacity:0;transform:scale(.4)}50%{opacity:1;transform:scale(1)}}
@media(max-width:640px){.scene-section{padding:64px 0}.scene{padding:12px;border-radius:18px}}

/* ============ ZACHTERE SECTIE-RUIMTE + TOEGANKELIJKHEID ============ */
.calculator-section,.scene-section,.contracten,.reviews,.blog,.faq,.afspraak-section{padding-top:104px;padding-bottom:104px}
.section-head{margin-bottom:56px}
section[id],.scene-section,.calculator-section{scroll-margin-top:96px}
@media(max-width:640px){
  .calculator-section,.scene-section,.contracten,.reviews,.blog,.faq,.afspraak-section{padding-top:64px;padding-bottom:64px}
  .section-head{margin-bottom:36px}
  body{font-size:16.5px;line-height:1.65}
  p{line-height:1.65}
  .btn{min-height:48px}
  input,select,textarea,.calc-dateinput{font-size:16px}
}

/* ============ HERO (premium topstuk) ============ */
.hero{position:relative;overflow:hidden;background:radial-gradient(110% 80% at 78% -10%,#dcf6e6 0%,rgba(220,246,230,0) 55%),linear-gradient(180deg,#f3fbf6 0%,#f8faf9 100%)}
.hero::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(22,163,74,.028) 1px,transparent 1px);background-size:34px 34px;-webkit-mask-image:linear-gradient(180deg,#000,transparent 55%);mask-image:linear-gradient(180deg,#000,transparent 55%);pointer-events:none}
.hero .container{position:relative;z-index:2}
.hero-eyebrow{display:inline-flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-sm);color:var(--brand-darker);padding:8px 16px;border-radius:999px;font-weight:600;font-size:.84rem}
.hero-dot{width:9px;height:9px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 0 rgba(22,163,74,.5);animation:heroPulse 2.2s ease-out infinite}
@keyframes heroPulse{0%{box-shadow:0 0 0 0 rgba(22,163,74,.45)}70%{box-shadow:0 0 0 9px rgba(22,163,74,0)}100%{box-shadow:0 0 0 0 rgba(22,163,74,0)}}
.hero-title{margin-top:8px}
.hero-actions .btn-large{padding:16px 26px;font-size:1.02rem;border-radius:13px}
.hero-actions .btn-whatsapp{box-shadow:0 10px 24px rgba(37,211,102,.32)}
.hero-actions .btn-whatsapp:hover{transform:translateY(-2px);box-shadow:0 16px 32px rgba(37,211,102,.38)}
.hero-micro{display:flex;align-items:center;gap:9px;margin-top:16px;color:var(--muted);font-size:.92rem;font-weight:500}
.hero-micro svg{color:var(--brand);flex-shrink:0}
.hero-trust{display:inline-flex;align-items:center;gap:10px;margin-top:26px}
/* Hero tweekoloms + 3D glaspaneel */
.hero-grid{display:grid;grid-template-columns:1fr;gap:30px;align-items:center}
.hero-content{text-align:center}
@media(min-width:920px){.hero-grid{grid-template-columns:1.04fr .96fr;gap:48px}.hero-content{text-align:left}}
.hero-road{display:none !important}
.hero-visual{perspective:1100px;display:flex;justify-content:center;align-items:center;min-height:380px;margin-top:36px}
@media(max-width:919px){.hero-visual{margin-top:48px}}
.glass-stage{transform-style:preserve-3d;animation:gFloat 7s ease-in-out infinite}
@keyframes gFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.glass-card{position:relative;width:min(340px,76vw);aspect-ratio:4/5;transform-style:preserve-3d;transform:rotateY(var(--rx,-7deg)) rotateX(var(--ry,5deg));transition:transform .25s cubic-bezier(.16,1,.3,1)}
.glass-card>*{position:absolute;border-radius:18px}
.g-reflection{inset:0;background:linear-gradient(160deg,#a9d8f2 0%,#e8f6ff 45%,#dbf1e6 100%);transform:translateZ(-30px);box-shadow:0 50px 80px rgba(10,31,20,.25)}
.g-reflection::after{content:"";position:absolute;left:0;right:0;bottom:0;height:38%;background:linear-gradient(180deg,transparent,rgba(15,122,55,.16));border-radius:0 0 18px 18px}
.g-frame{inset:0;border:13px solid #fff;box-shadow:inset 0 0 0 1px rgba(10,31,20,.06), 0 0 0 4px #7c3325, 0 0 18px 5px rgba(0,0,0,.24), 0 18px 30px rgba(0,0,0,.22);background:linear-gradient(160deg,rgba(255,255,255,.22),rgba(255,255,255,.04));transform:translateZ(2px)}
.g-mullion-v,.g-mullion-h{position:absolute;background:#fff;border-radius:5px}
.g-mullion-v{left:50%;top:8px;bottom:8px;width:9px;margin-left:-4.5px}
.g-mullion-h{top:50%;left:8px;right:8px;height:9px;margin-top:-4.5px}
.g-gleam{inset:0;background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.55) 46%,rgba(255,255,255,.9) 50%,rgba(255,255,255,.5) 54%,transparent 68%);background-size:250% 100%;transform:translateZ(16px);mix-blend-mode:screen;opacity:.85;animation:gSweep 5.5s ease-in-out infinite}
@keyframes gSweep{0%,100%{background-position:140% 0}50%{background-position:-40% 0}}
.g-drop{background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.95),rgba(175,215,238,.55) 60%,rgba(130,185,218,.25));box-shadow:0 5px 10px rgba(10,31,20,.14);transform:translateZ(38px);border-radius:50%}
.g-drop.d1{width:20px;height:20px;top:16%;left:20%;animation:wipeD1 6s ease-in-out infinite}
.g-drop.d2{width:13px;height:13px;top:64%;left:28%;animation:wipeD2 6s ease-in-out infinite}
.g-drop.d3{width:15px;height:15px;top:38%;left:70%;animation:wipeD3 6s ease-in-out infinite}
.g-drop.d4{width:11px;height:11px;top:78%;left:60%;animation:wipeD4 6s ease-in-out infinite}
@keyframes wipeD1{0%,53%{opacity:1}59%{opacity:0}94%{opacity:0}100%{opacity:1}}
@keyframes wipeD2{0%,48%{opacity:1}54%{opacity:0}94%{opacity:0}100%{opacity:1}}
@keyframes wipeD3{0%,20%{opacity:1}26%{opacity:0}94%{opacity:0}100%{opacity:1}}
@keyframes wipeD4{0%,26%{opacity:1}32%{opacity:0}94%{opacity:0}100%{opacity:1}}
.g-squeegee{width:15px;height:74%;top:13%;left:50%;margin-left:-7px;background:linear-gradient(90deg,#22c55e,#16a34a 50%,#0f7a37);border-radius:8px;box-shadow:0 0 22px rgba(34,197,94,.45),0 10px 20px rgba(10,31,20,.3);transform:translateZ(54px) translateX(150px);animation:squeegeeWipe 6s ease-in-out infinite}
.g-squeegee::after{content:"";position:absolute;left:-3px;right:-3px;top:-12px;height:15px;border-radius:6px;background:#0a5c29}
@keyframes squeegeeWipe{0%{transform:translateZ(54px) translateX(150px);opacity:0}6%{opacity:1}14%{transform:translateZ(54px) translateX(120px)}62%{transform:translateZ(54px) translateX(-150px);opacity:1}70%{opacity:0}100%{transform:translateZ(54px) translateX(-150px);opacity:0}}
.g-badge{top:-16px;left:-20px;display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:9px 15px;box-shadow:0 16px 34px rgba(10,31,20,.2);transform:translateZ(62px);font-weight:800;color:var(--ink)}
.g-badge .gb-stars{color:#fbbc05;font-size:.85rem;font-weight:400}
.g-wall{inset:-15% -13% -11% -13%;transform:translateZ(-55px);border-radius:8px;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.10) 0 2px,transparent 2px 54px),repeating-linear-gradient(0deg,rgba(244,235,228,.16) 0 2px,transparent 2px 25px),linear-gradient(160deg,#b15644 0%,#8e3a2c 100%);
  box-shadow:0 55px 90px rgba(10,31,20,.3)}
.g-wall::before{content:"";position:absolute;inset:0;border-radius:8px;background-image:repeating-linear-gradient(0deg,transparent 0 25px,rgba(244,235,228,.14) 25px 27px);background-position:27px 0}
.g-dirt{inset:0;transform:translateZ(6px);opacity:.9;mix-blend-mode:multiply;
  background:
    radial-gradient(ellipse at 18% 22%,rgba(108,90,58,.55),transparent 40%),
    radial-gradient(ellipse at 76% 34%,rgba(120,100,66,.5),transparent 42%),
    radial-gradient(ellipse at 38% 74%,rgba(98,82,56,.55),transparent 44%),
    radial-gradient(ellipse at 84% 80%,rgba(112,94,62,.45),transparent 40%),
    radial-gradient(ellipse at 60% 12%,rgba(105,88,60,.4),transparent 36%),
    repeating-linear-gradient(100deg,rgba(86,70,48,.14) 0 2px,transparent 2px 9px),
    repeating-linear-gradient(7deg,rgba(78,64,44,.11) 0 3px,transparent 3px 13px),
    linear-gradient(160deg,rgba(150,130,95,.26),rgba(116,100,72,.34));
  animation:wipeDirt 6s ease-in-out infinite}
@keyframes wipeDirt{0%,12%{opacity:.9}60%{opacity:0}88%{opacity:0}100%{opacity:.9}}
.g-sill{left:-7%;right:-7%;bottom:-8%;height:20px;transform:translateZ(10px);border-radius:6px;background:linear-gradient(#ffffff,#e4eae6);box-shadow:0 12px 20px rgba(10,31,20,.2)}
@media(prefers-reduced-motion:reduce){.glass-stage,.g-gleam,.g-squeegee,.g-drop,.g-dirt{animation:none}.g-squeegee{transform:translateZ(54px) translateX(-150px);opacity:0}.g-dirt{opacity:.25}}

/* ============ ZACHTGROENE ACHTERGROND ============ */
html{overflow-x:clip}
body{background-color:#e9f4ed;background-image:radial-gradient(rgba(22,163,74,.03) 1px,transparent 1px);background-size:30px 30px;overflow-x:clip;max-width:100%}

/* ============ GAMIFICATIE OFFERTEPANEEL (zakelijk 3D) ============ */
.calc-wrap{box-shadow:0 44px 90px rgba(10,31,20,.13),0 14px 30px rgba(10,31,20,.08);perspective:1000px}
.calc-check{transition:transform .28s cubic-bezier(.16,1,.3,1),box-shadow .28s,border-color .2s,background .2s}
.calc-check:hover{transform:translateY(-4px);box-shadow:0 16px 30px rgba(10,31,20,.13)}
.calc-check.active{box-shadow:0 14px 28px rgba(22,163,74,.22),0 0 0 1px var(--brand) inset;animation:calcPop .42s cubic-bezier(.34,1.56,.64,1)}
@keyframes calcPop{0%{transform:translateY(-2px) scale(.98)}60%{transform:translateY(-6px) scale(1.04)}100%{transform:translateY(-3px) scale(1.02)}}
.calc-check.active{transform:translateY(-3px) scale(1.02)}
.calc-check.active .calc-check-tick svg{animation:tickPop .4s cubic-bezier(.34,1.56,.64,1)}
@keyframes tickPop{0%{transform:scale(0) rotate(-25deg)}100%{transform:scale(1) rotate(0)}}
.calc-typegrid button{transition:transform .22s cubic-bezier(.16,1,.3,1),box-shadow .22s,border-color .2s,background .2s}
.calc-typegrid button:hover{transform:translateY(-4px);box-shadow:0 14px 26px rgba(10,31,20,.13)}
.calc-typegrid button.active{transform:translateY(-3px);box-shadow:0 12px 24px rgba(22,163,74,.2)}
.calc-progress-item.active .calc-progress-num{animation:stepPulse 2.2s ease-in-out infinite}
@keyframes stepPulse{0%,100%{box-shadow:0 0 0 0 rgba(22,163,74,.4)}50%{box-shadow:0 0 0 8px rgba(22,163,74,0)}}
.calc-segment button,.calc-pillgrid button{transition:transform .2s,box-shadow .2s,border-color .2s,background .2s,color .2s}
.calc-segment button:hover,.calc-pillgrid button:hover{transform:translateY(-3px);box-shadow:0 10px 20px rgba(10,31,20,.1)}

/* ============ 3D ABONNEMENTSKAARTEN MET OVERFLOW ============ */
.contracten-grid{perspective:1300px}
.contract-card{transition:transform .45s cubic-bezier(.16,1,.3,1),box-shadow .45s;transform-style:preserve-3d;position:relative}
.contract-card:hover{transform:translateY(-12px) rotateX(3.5deg);box-shadow:0 40px 75px rgba(10,31,20,.2)}
.contract-card.popular{transform:translateY(-14px) scale(1.035);z-index:3;box-shadow:0 44px 84px rgba(22,163,74,.22)}
.contract-card.popular:hover{transform:translateY(-20px) scale(1.045) rotateX(2.5deg);box-shadow:0 52px 96px rgba(22,163,74,.26)}
.contract-badge{transform:translateZ(28px);box-shadow:0 10px 22px rgba(22,163,74,.35)}
.contract-card .contract-price-amount{transition:transform .3s}
.contract-card:hover .contract-price-amount{transform:translateZ(20px) scale(1.04);display:inline-block}
@media(prefers-reduced-motion:reduce){
  .calc-check,.calc-check.active,.calc-typegrid button,.calc-progress-item.active .calc-progress-num,.contract-card,.contract-card.popular{animation:none;transform:none}
  .contract-card.popular{transform:scale(1.02)}
}
@media(max-width:560px){.glass-card{width:min(290px,74vw)}.g-squeegee{width:120px;right:-16px}.hero-visual{min-height:330px}}
.hero-trust-rating{display:flex;align-items:center;gap:9px}
.hero-trust-stars{color:#fbbc05;font-size:1.05rem;letter-spacing:1px}
.hero-trust-score{font-weight:800;font-size:1.15rem;color:var(--ink)}
.hero-trust-sub{color:var(--muted);font-size:.84rem}
.hero-trust-div{width:1px;height:26px;background:var(--line)}
.hero-trust-badge{display:inline-flex;align-items:center;gap:7px;font-size:.9rem;font-weight:600;color:var(--ink-soft)}
.hero-trust-badge svg{color:var(--brand)}
.hero-services{margin-top:20px;color:var(--muted);font-size:.9rem;font-weight:500}
/* Blog-teaser met echte foto's */
.blog-card{overflow:hidden}
.blog-card .blog-visual{height:190px !important;position:relative;display:block !important;place-items:initial}
.blog-card .blog-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.blog-card:hover .blog-img{transform:scale(1.06)}
.blog-visual::before{opacity:.22;z-index:1}
@media(max-width:640px){.blog-card .blog-visual{height:170px !important}}
.blog-cta-wrap{text-align:center;margin-top:38px}
/* Blogkaarten zijn nu links; voorkom dat de titels de groene linkkleur erven */
.blog-card{color:var(--ink);text-decoration:none}
.blog-card h3{color:var(--ink)}
.blog-card p{color:var(--ink-soft)}
/* Werkgebied doorgeefluik */
.gebied{padding:96px 0;background:linear-gradient(180deg,#f3fbf6,#f8faf9)}
.gebied-pills{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;max-width:840px;margin:0 auto}
.gebied-pills a{background:#fff;border:1px solid var(--line);border-radius:999px;padding:11px 18px;font-size:.94rem;font-weight:600;color:var(--ink-soft);text-decoration:none;transition:transform .2s,border-color .2s,background .2s,color .2s}
.gebied-pills a:hover{border-color:var(--brand);color:var(--brand-dark);background:var(--brand-lighter);transform:translateY(-2px)}
.gebied-cta{text-align:center;margin-top:32px}
@media(max-width:640px){.gebied{padding:64px 0}}
@media(max-width:640px){
  .hero-trust{gap:8px;margin-top:22px}
}

/* ============ 3D DIEPTE ============ */
@media(prefers-reduced-motion:no-preference){
  .diensten-grid > *, .contract-card, .review-card, .blog-card,
  .lp-card, .bp-card, .greviews-badge, .hero-trust{
    transition:transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s cubic-bezier(.16,1,.3,1);
    will-change:transform;
  }
  .diensten-grid > *:hover, .contract-card:hover, .blog-card:hover,
  .lp-card:hover, .bp-card:hover{
    transform:perspective(1100px) translateY(-8px) rotateX(3deg) scale(1.012);
    box-shadow:0 34px 64px rgba(10,31,20,.17), 0 10px 22px rgba(10,31,20,.10);
  }
  .review-card:hover{transform:perspective(1100px) translateY(-6px) rotateX(2.5deg)}
  /* Diepte op sleutelblokken */
  .calc-wrap{box-shadow:0 44px 88px rgba(10,31,20,.12), 0 14px 30px rgba(10,31,20,.08)}
  .scene{box-shadow:0 40px 80px rgba(10,31,20,.16), 0 12px 26px rgba(10,31,20,.08)}
  .hero-trust:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
  /* Zachte zweef-animatie voor de trust-kaart in de hero */
  .greviews-badge{box-shadow:0 18px 40px rgba(10,31,20,.10)}
}
@media(prefers-reduced-motion:reduce){
  .diensten-grid > *:hover,.contract-card:hover,.blog-card:hover,.lp-card:hover,.bp-card:hover,.review-card:hover{transform:none}
}

/* ============ ZACHTE SECTOR-ACHTERGRONDEN + SUBTIELE VECTORS ============ */
/* Heel licht getinte secties met een fijn glazenwasser-watermerk. Bewust subtiel. */
.scene-section{
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90' viewBox='0 0 90 90'%3E%3Cpath d='M45 22c7 9 11 15 11 22a11 11 0 0 1-22 0c0-7 4-13 11-22z' fill='%230ea5e9' fill-opacity='0.035'/%3E%3C/svg%3E") 0 0/90px 90px,
    linear-gradient(180deg,#f1f8fd,#f4fbf6);
}
.calculator-section{
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cg fill='none' stroke='%2316a34a' stroke-opacity='0.045' stroke-width='2'%3E%3Crect x='34' y='30' width='28' height='34' rx='2'/%3E%3Cpath d='M48 30v34M34 47h28'/%3E%3C/g%3E%3C/svg%3E") 0 0/96px 96px,
    linear-gradient(180deg,#ffffff,#f0faf3) !important;
}
.contracten{
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='84' viewBox='0 0 84 84'%3E%3Cpath d='M42 20c6 8 10 13 10 19a10 10 0 0 1-20 0c0-6 4-11 10-19z' fill='%2322c55e' fill-opacity='0.04'/%3E%3C/svg%3E") 0 0/84px 84px,
    linear-gradient(180deg,#f3fbf6,#eef8f1);
}
.reviews{
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%230ea5e9' stroke-opacity='0.04' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='50' cy='48' r='8'/%3E%3Cpath d='M50 32v-6M50 70v-6M34 48h-6M72 48h-6M39 37l-4-4M65 63l-4-4M61 37l4-4M35 63l4-4'/%3E%3C/g%3E%3C/svg%3E") 0 0/100px 100px,
    linear-gradient(180deg,#f6fbff,#f3fbf6) !important;
}
.blog{
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90' viewBox='0 0 90 90'%3E%3Cpath d='M45 22c7 9 11 15 11 22a11 11 0 0 1-22 0c0-7 4-13 11-22z' fill='%2316a34a' fill-opacity='0.035'/%3E%3C/svg%3E") 0 0/90px 90px,
    linear-gradient(180deg,#fbfaf6,#f4fbf6) !important;
}
.faq{
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cg fill='none' stroke='%2316a34a' stroke-opacity='0.04' stroke-width='2'%3E%3Crect x='34' y='30' width='28' height='34' rx='2'/%3E%3Cpath d='M48 30v34M34 47h28'/%3E%3C/g%3E%3C/svg%3E") 0 0/96px 96px,
    linear-gradient(180deg,#f3fbf6,#f8faf9);
}
.afspraak-section{
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='84' viewBox='0 0 84 84'%3E%3Cpath d='M42 20c6 8 10 13 10 19a10 10 0 0 1-20 0c0-6 4-11 10-19z' fill='%2322c55e' fill-opacity='0.045' /%3E%3C/svg%3E") 0 0/84px 84px,
    linear-gradient(180deg,#eef8f1,#f3fbf6);
}

/* ============ PROMO-GIF (rand tot rand) ============ */
.promo-video{padding:0;margin:0;background:#0a1f14;line-height:0;font-size:0}
.pv-media{display:block;width:100%;height:auto}
.pv-fallback{display:none;flex-direction:column;align-items:center;justify-content:center;gap:16px;
  min-height:clamp(240px,46vw,560px);line-height:1.4;text-align:center;padding:30px;
  background:radial-gradient(120% 90% at 50% 30%,#1eb45c,#0c6e31)}
.pv-logo{width:118px;height:auto;filter:drop-shadow(0 6px 14px rgba(0,0,0,.3))}
.pv-fallback p{color:rgba(255,255,255,.92);font-weight:600;font-size:1.02rem;margin:0}
/* Video + illustratie als één geheel: video bovenaan flush, daaronder de scène */
.scene-section{padding-top:0 !important}
.scene-below{padding-top:60px}
.scene-below .section-head{margin-bottom:34px}
@media(max-width:640px){.scene-below{padding-top:40px}}

/* Werkgebied-kaart */
.gebied-map-wrap{max-width:940px;margin:0 auto 34px}
.gebied-map{height:620px;border-radius:20px;overflow:hidden;border:1px solid var(--line);
  box-shadow:0 40px 80px rgba(10,31,20,.18),0 12px 28px rgba(10,31,20,.10);background:#e9eff0}
@media(max-width:640px){.gebied-map{height:540px}}
.leaflet-container{font-family:inherit}
.gm-pin{background:none !important;border:none !important}
.gm-pin a{display:flex;flex-direction:column;align-items:center;text-decoration:none;filter:drop-shadow(0 3px 4px rgba(10,31,20,.3))}
.gm-pin-dot{width:15px;height:15px;border-radius:50% 50% 50% 0;background:var(--brand);border:2.5px solid #fff;transform:rotate(-45deg)}
.gm-pin-label{margin-top:4px;background:#fff;color:var(--ink);font-size:10px;font-weight:700;padding:2px 6px;border-radius:6px;white-space:nowrap;border:1px solid var(--line);box-shadow:0 1px 4px rgba(10,31,20,.16)}
.gm-pin a:hover .gm-pin-dot{background:var(--brand-darker);transform:rotate(-45deg) scale(1.12)}
.gm-pin a:hover .gm-pin-label{color:var(--brand-darker);border-color:var(--brand)}
/* Oude gestileerde werkgebied-kaart onderaan verbergen (vervangen door 3D-kaart) */
.map-card{display:none !important}
/* Regen en wind vanuit zee over de 3D-kaart */
.gebied-map-wrap{position:relative}
.gm-weather{position:absolute;inset:0;pointer-events:none;overflow:hidden;border-radius:20px;z-index:6}
.gm-mist{position:absolute;inset:0;background:linear-gradient(90deg,rgba(176,202,219,.5),rgba(176,202,219,0) 42%)}
.gm-rain{position:absolute;inset:-25%;opacity:.55;background-image:repeating-linear-gradient(74deg,rgba(255,255,255,0) 0 6px,rgba(190,214,232,.5) 6px 7px);animation:gmRain .6s linear infinite;-webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,1) 0%,rgba(0,0,0,.45) 50%,rgba(0,0,0,.12) 100%);mask-image:linear-gradient(90deg,rgba(0,0,0,1) 0%,rgba(0,0,0,.45) 50%,rgba(0,0,0,.12) 100%)}
.gm-rain.r2{opacity:.32;animation-duration:1s;background-image:repeating-linear-gradient(74deg,rgba(255,255,255,0) 0 10px,rgba(205,224,238,.45) 10px 11px)}
@keyframes gmRain{from{transform:translate(0,0)}to{transform:translate(22px,90px)}}
@media(prefers-reduced-motion:reduce){.gm-rain{animation:none;opacity:.12}}