/* ============================================================
   CarpWeather - cw-site.css (v2.0.0)

   De stijl van de hele site: hoofdpagina, de vier verdiepende
   pagina's en de losse pagina's. Een bestand, zodat er niets
   uit elkaar kan lopen.

   Kleuren en fonts komen uit dezelfde bron als de app:
   bosgroen #0F4D24, lime #66BB33, Saira + Outfit.
   ============================================================ */
:root{
  --bosgroen:#0F4D24; --green-mid:#2A8C3A; --lime:#66BB33;
  --bg:#F5F7F2; --bg2:#EBF3E6; --card:#FFFFFF; --ink:#081a0e;
  --text:#0d160f; --text2:#566b56; --text3:#8ba086;
  --border:rgba(15,77,36,.10); --border-strong:rgba(15,77,36,.18);
  --shadow:0 2px 12px rgba(15,77,36,.07); --shadow-md:0 10px 30px rgba(15,77,36,.12);
  --shadow-lg:0 30px 70px rgba(8,26,14,.22);
  --zp:#C44545; --zl:#E89C2A; --zm:#D9BA3A; --zg:#6BC243; --ze:#2A8C3A;
  --r:18px; --r-lg:24px; --pill:999px;
  --fd:'Saira',sans-serif; --fb:'Outfit',sans-serif; --maxw:1180px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:var(--fb);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2.5px solid var(--lime);outline-offset:3px;border-radius:4px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px}

.zband{display:flex;height:3px;width:78px;border-radius:2px;overflow:hidden;margin-bottom:16px}
.zband i{flex:1}
.zband i:nth-child(1){background:var(--zp)}.zband i:nth-child(2){background:var(--zl)}
.zband i:nth-child(3){background:var(--zm)}.zband i:nth-child(4){background:var(--zg)}
.zband i:nth-child(5){background:var(--ze)}
.eyebrow{font-family:var(--fd);font-weight:700;font-size:11.5px;letter-spacing:2px;text-transform:uppercase;color:var(--green-mid);display:block}
.on-dark .eyebrow{color:#9fd47a}

h1,h2,h3{font-family:var(--fd);letter-spacing:-.028em;line-height:1.02}
h1{font-weight:800;font-size:clamp(42px,5.6vw,72px)}
h2{font-weight:800;font-size:clamp(31px,3.7vw,50px);line-height:1.06;margin:14px 0 18px}
h3{font-weight:700;font-size:18px;letter-spacing:-.01em;line-height:1.25}
.lead{font-size:19px;color:var(--text2);max-width:560px}
.on-dark .lead,.on-dark p{color:#c9dcc0}

/* logo
   Let op: het logo staat als <symbol> in de pagina en wordt via <use>
   hergebruikt. Daardoor zitten de paden in een shadow-tree en kan CSS van
   buitenaf ze NIET kleuren - vandaar dat de voet een gemaskeerd vlak is in
   plaats van een svg.

   De maat is gemeten aan het gerenderde beeld, niet aan de viewBox: die is
   ruimer dan de tekening (3.239 tegen 3.948 in werkelijkheid). Reken je met
   de viewBox, dan wordt het logo geknepen en valt de cirkel om de vis er
   links en onder af. */
.mark{display:block;height:60px;width:237px}
nav .mark{height:56px;width:221px}
@media(max-width:820px){nav .mark{height:46px;width:182px}}
/* Het logo in de balk is een link naar de startpagina - dat mag je voelen. */
nav .nav-in>a{display:block;line-height:0;transition:opacity .2s ease}
nav .nav-in>a:hover{opacity:.72}
.mark .st1,.mark .st2{fill:var(--bosgroen)}
.on-ink .mark path{fill:#fff!important;stroke:none!important}
.on-ink .mark .st3{fill:none!important}

nav{position:sticky;top:0;z-index:60;background:rgba(245,247,242,.86);backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--border)}
.nav-in{max-width:var(--maxw);margin:0 auto;padding:13px 32px;display:flex;align-items:center;gap:30px}
.nav-links{display:flex;gap:4px;margin-left:auto;align-items:center}
.nav-links a{font-family:var(--fd);font-weight:700;font-size:13.5px;letter-spacing:.01em;
  color:var(--text2);padding:9px 13px;border-radius:var(--pill);white-space:nowrap;
  transition:background .2s ease,color .2s ease}
.nav-links a:hover{color:var(--bosgroen);background:rgba(15,77,36,.06)}
/* Zes items past niet altijd. Onder 1240px valt "Hulp & veelgestelde vragen"
   weg, onder 1060px ook Privacy - allebei blijven bereikbaar via de voet, die op
   elke pagina staat. */
@media(max-width:1240px){.nav-links a[href$="support.html"]{display:none}}
@media(max-width:1060px){.nav-links a[href$="#privacy"]{display:none}}
.soon{font-family:var(--fd);font-weight:700;font-size:12px;letter-spacing:.04em;color:var(--bosgroen);
  border:1.5px solid var(--border-strong);border-radius:var(--pill);padding:9px 17px;white-space:nowrap}

/* ═══════════════════════════════════════════════════════════════
   VLOEIENDE OVERGANGEN

   De pagina was een stapel blokken met harde randen: donker, licht,
   donker. Nu golft elke overgang, zodat het als een doorsnede van een
   water leest in plaats van als losse hoofdstukken.

   Werkt met een MASKER in plaats van een gekleurde svg: dan kan de kleur
   van buitenaf gezet worden en hoeft er niet per overgang een eigen
   bestand te bestaan. Elk donker blok zegt zelf welke kleur erboven en
   eronder ligt via --boven en --onder.
   ═══════════════════════════════════════════════════════════════ */
.dark{background:var(--ink);color:#eef5ea;position:relative;overflow:hidden;
  --boven:var(--bg);--onder:var(--bg)}
.dark::before,.dark::after{content:"";position:absolute;left:0;right:0;height:74px;
  pointer-events:none;z-index:3;
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.dark::before{top:-1px;background:var(--boven);
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 74' preserveAspectRatio='none'%3E%3Cpath d='M0 0h1440v26c-120 22-260 30-420 22S720 20 560 26 180 62 0 44Z' fill='%23000'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 74' preserveAspectRatio='none'%3E%3Cpath d='M0 0h1440v26c-120 22-260 30-420 22S720 20 560 26 180 62 0 44Z' fill='%23000'/%3E%3C/svg%3E")}
.dark::after{bottom:-1px;background:var(--onder);
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 74' preserveAspectRatio='none'%3E%3Cpath d='M0 74h1440V44c-140-22-280-4-430 8s-330 20-470 6S140 24 0 34Z' fill='%23000'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 74' preserveAspectRatio='none'%3E%3Cpath d='M0 74h1440V44c-140-22-280-4-430 8s-330 20-470 6S140 24 0 34Z' fill='%23000'/%3E%3C/svg%3E")}
/* De hero heeft geen bovenrand nodig - daarboven zit de navigatie. */
#top::before,.hero-dark::before{display:none}
.dark:first-of-type::before{display:none}

/* Ook tussen licht en lichtgroen een zachte golf, maar veel subtieler. */
.band{--rand:var(--bg)}
.band::before{content:"";position:absolute;top:-1px;left:0;right:0;height:52px;z-index:3;
  pointer-events:none;background:var(--rand);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 52' preserveAspectRatio='none'%3E%3Cpath d='M0 0h1440v18c-150 18-300 22-460 14S700 16 540 20 150 44 0 30Z' fill='%23000'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 52' preserveAspectRatio='none'%3E%3Cpath d='M0 0h1440v18c-150 18-300 22-460 14S700 16 540 20 150 44 0 30Z' fill='%23000'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat;
  animation:none}
.band::after{top:auto;bottom:-1px;height:52px;
  background:var(--rand);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 52' preserveAspectRatio='none'%3E%3Cpath d='M0 52h1440V32c-160-14-320 0-480 10s-320 14-480 2S120 20 0 26Z' fill='%23000'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 52' preserveAspectRatio='none'%3E%3Cpath d='M0 52h1440V32c-160-14-320 0-480 10s-320 14-480 2S120 20 0 26Z' fill='%23000'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat;
  animation:none;opacity:1;background-image:none}

/* De golfachtergrond zit op het element zelf (twee lagen), zodat ::before en
   ::after vrij blijven voor de golvende randen. */
.band>.golven{display:none}

/* ---- de voortgangsstreep bovenaan ----
   De vijf scorekleuren, die zich vullen terwijl je scrolt. Bindt de hele pagina
   aan waar het product om draait. */
.voortgang{position:fixed;top:0;left:0;height:3px;width:100%;z-index:70;
  transform:scaleX(0);transform-origin:left;
  background:linear-gradient(90deg,var(--zp),var(--zl),var(--zm),var(--zg),var(--ze));
  will-change:transform}
.dark .diep{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.dark .diep path{fill:none;stroke:rgba(102,187,51,.13);stroke-width:1.1}
.dark .glow{position:absolute;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(102,187,51,.22),transparent 64%)}

.hero{padding:100px 0 92px}
.hero-in{max-width:var(--maxw);margin:0 auto;padding:0 32px;display:grid;
  grid-template-columns:1.06fr .94fr;gap:64px;align-items:center;position:relative;z-index:2}
.hero h1{color:#fff;margin-bottom:22px}
.hero .lead{color:#dceed3;font-size:19.5px;margin-bottom:14px}
.hero .sub{font-size:15.5px;color:#9fc090;max-width:520px;line-height:1.6;margin-bottom:30px}
.hero-note{font-size:13px;color:#89a87e;margin-top:22px;display:flex;gap:17px;flex-wrap:wrap}
.hero-note span{display:flex;align-items:center;gap:6px}
.hero-note b{width:5px;height:5px;border-radius:50%;background:var(--lime);display:inline-block}

/* winkelbadges */
.badges{display:flex;gap:13px;flex-wrap:wrap}
.badge-x{display:inline-flex;align-items:center;gap:11px;background:#000;color:#fff;
  border:1px solid rgba(255,255,255,.35);border-radius:11px;padding:9px 17px 9px 14px;min-width:186px}
.badge-x svg{width:25px;height:25px;fill:#fff;flex:0 0 auto}
.bx-t{display:flex;flex-direction:column;line-height:1.12}
.bx-t small{font-size:10px;letter-spacing:.02em;opacity:.9}
.bx-t b{font-family:var(--fd);font-weight:600;font-size:17.5px;letter-spacing:-.01em}
.badge-note{font-size:11.5px;color:#7a9670;margin-top:11px;max-width:420px;line-height:1.5}

section{padding:96px 0;position:relative}
/* ---- het lichte vlak: golven op de achtergrond ----
   Stond leeg, en dat viel op tussen de donkere vlakken die wel textuur hebben.
   Twee lagen die traag langs elkaar schuiven, de een tegen de ander in.
   Op het element zelf, niet op ::before/::after - die zijn voor de randen. */
.band{background-color:var(--bg2);position:relative;overflow:hidden;--rand:var(--bg);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='300' viewBox='0 0 1200 300'%3E%3Cg fill='none' stroke='%230F4D24' stroke-opacity='.07' stroke-width='1.4'%3E%3Cpath d='M0 80 C150 40 300 120 450 80 S750 40 900 80 1050 120 1200 80'/%3E%3Cpath d='M0 140 C170 100 320 175 480 140 S780 105 930 145 1080 175 1200 145'/%3E%3Cpath d='M0 205 C140 170 310 240 470 205 S760 170 920 210 1070 240 1200 205'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1400' height='340' viewBox='0 0 1400 340'%3E%3Cg fill='none' stroke='%232A8C3A' stroke-opacity='.05' stroke-width='1.2'%3E%3Cpath d='M0 110 C200 60 380 165 560 115 S920 60 1120 115 1300 160 1400 120'/%3E%3Cpath d='M0 195 C190 150 400 250 590 200 S950 150 1150 200 1320 245 1400 205'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat:repeat-x,repeat-x;
  background-position:0 22%,0 74%;
  background-size:1200px 300px,1400px 340px;
  animation:bandGolf 58s linear infinite}
@keyframes bandGolf{
  from{background-position:0 22%,0 74%}
  to{background-position:1200px 22%,-1400px 74%}
}
.sec-head{max-width:660px;margin-bottom:48px}
.sec-head.mid{margin-left:auto;margin-right:auto;text-align:center}
.sec-head.mid .zband{margin-left:auto;margin-right:auto}
.two{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;position:relative;z-index:2}
.two.wide-l{grid-template-columns:1.15fr .85fr}
.two.wide-r{grid-template-columns:.85fr 1.15fr}
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;position:relative;z-index:2}

/* ---- telefoon-omlijsting ----
   Het beeld zit in een donkere behuizing met een lichte rand aan de binnenkant,
   zodat het scherm los lijkt te liggen van het frame. De maten volgen een
   iPhone: 9:19,5 en een hoekronding die met de breedte meeschaalt.

   De screenshots hebben zelf al een statusbalk; er komt dus geen inkeping
   overheen - die zit al in het beeld. */
.shot{background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  gap:7px;padding:24px;color:var(--text3)}
.shot.ph{aspect-ratio:9/19.5;max-width:262px;width:100%;margin:0 auto;
  background:linear-gradient(160deg,#16301f,#0a1c12);
  border:none;border-radius:38px;padding:9px;
  box-shadow:0 34px 68px -26px rgba(8,26,14,.5),0 12px 26px rgba(8,26,14,.18),
             inset 0 0 0 1px rgba(255,255,255,.09)}
.shot.ph img{border-radius:30px}
.shot.ph picture{border-radius:30px;overflow:hidden}
.shot.hero-ph{max-width:296px;padding:10px;border-radius:42px;
  box-shadow:0 48px 88px -28px rgba(8,26,14,.55),0 16px 34px rgba(8,26,14,.22),
             inset 0 0 0 1px rgba(255,255,255,.12)}
.shot.hero-ph img{border-radius:33px}
.shot.hero-ph picture{border-radius:33px}
.shot.wide{aspect-ratio:16/10;width:100%}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.duo .shot.ph{max-width:100%}
@media(max-width:520px){.duo{grid-template-columns:1fr;gap:26px}.duo .shot.ph{max-width:262px}}
.s-n{display:block;font-family:var(--fd);font-weight:800;font-size:32px;color:var(--lime);line-height:1}
.s-t{display:block;font-family:var(--fd);font-weight:700;font-size:13.5px;color:var(--text2)}
.s-d{display:block;font-size:11.5px;line-height:1.5;max-width:230px}
.shot{overflow:hidden;box-shadow:var(--shadow-md)}
.shot:not(.ph){padding:0}
.shot img{width:100%;height:100%;object-fit:cover;display:block}
/* <picture> zit tussen het frame en het beeld en is standaard inline; zonder
   deze regel valt het beeld niet meer vullend in de telefoon. */
.shot picture{display:block;width:100%;height:100%}
.shot.wide{border-radius:var(--r-lg)}
.dark .shot{background:rgba(255,255,255,.045);border-color:rgba(102,187,51,.3);color:#8fae84}
.dark .s-t{color:#dceed3}

/* scorekaart, nu op de score-sectie */
.scard{background:linear-gradient(158deg,#12351f,#0a2213);border:1px solid rgba(102,187,51,.22);
  border-radius:var(--r-lg);padding:28px 30px 26px;box-shadow:var(--shadow-lg);color:#eef5ea}
.scard-top{display:flex;align-items:flex-end;gap:16px;margin-bottom:6px}
.scard .big{font-family:var(--fd);font-weight:800;font-size:80px;line-height:.86;letter-spacing:-.05em;color:var(--zg)}
.scard .of{font-family:var(--fd);font-weight:700;font-size:17px;color:#7f9b76;padding-bottom:9px}
.scard .oor{font-family:var(--fd);font-weight:700;font-size:19px;color:#dceed3;padding-bottom:8px;margin-left:auto}
.scard .waarom{font-size:13.5px;color:#9fc090;margin-bottom:20px}
.fb{display:grid;grid-template-columns:78px 1fr 26px;align-items:center;gap:11px;margin-bottom:7px}
.fb-l{font-size:11.5px;color:#8fae84}
.fb-t{height:7px;border-radius:4px;background:rgba(255,255,255,.09);overflow:hidden;display:block}
.fb-t i{display:block;height:100%;border-radius:4px}
.fb-n{font-family:var(--fd);font-weight:700;font-size:11.5px;color:#b8cfae;text-align:right}
.zp{background:var(--zp)}.zl{background:var(--zl)}.zm{background:var(--zm)}
.zg{background:var(--zg)}.ze{background:var(--ze)}
.scard-vt{margin-top:18px;padding-top:16px;border-top:1px solid rgba(255,255,255,.1);font-size:12px;color:#7f9b76}

ul.pts{list-style:none;margin:22px 0 0}
ul.pts li{position:relative;padding-left:30px;margin-bottom:15px;font-size:15.5px;color:var(--text2);line-height:1.55}
ul.pts li b{color:var(--text);font-weight:600}
.on-dark ul.pts li{color:#c9dcc0}
.on-dark ul.pts li b{color:#fff}
ul.pts li::before{content:"";position:absolute;left:2px;top:9px;width:9px;height:9px;border-radius:50%;border:2.5px solid var(--lime)}
.meer{display:inline-flex;align-items:center;gap:7px;font-family:var(--fd);font-weight:700;
  font-size:14px;color:var(--green-mid);margin-top:26px;padding-bottom:3px;border-bottom:2px solid rgba(42,140,58,.28)}
.meer:hover{border-color:var(--green-mid)}
.on-dark .meer{color:#9fd47a;border-color:rgba(159,212,122,.3)}

/* ══════════════════════════════════════════════════════════════
   DE DRAAD DOOR DE PAGINA

   De blokken hadden allemaal dezelfde vorm - tekst links, telefoon
   rechts, en omgekeerd. Dat leest als een lijst. Deze twee dingen maken
   er een betoog van:

   .brug   — een korte regel tussen twee blokken die je meeneemt
   .adem   — het rustpunt halverwege: een zin, groot, en verder niets
   ══════════════════════════════════════════════════════════════ */
.brug{text-align:center;padding:0 32px;margin:-26px auto 64px;max-width:720px;position:relative;z-index:2}
.brug p{font-family:var(--fd);font-weight:700;font-size:clamp(19px,2.1vw,25px);
  line-height:1.32;letter-spacing:-.015em;color:var(--text2)}
.brug b{color:var(--bosgroen);font-weight:700}
.brug::before{content:"";display:block;width:2px;height:34px;margin:0 auto 22px;
  background:linear-gradient(180deg,transparent,rgba(102,187,51,.55))}
.on-ink .brug p,.dark .brug p{color:#a8c49c}
.on-ink .brug b,.dark .brug b{color:#c6e8ae}

/* het rustpunt: alleen een zin, en veel lucht eromheen */
.adem{background:var(--ink);color:#fff;position:relative;overflow:hidden;
  --boven:var(--bg);--onder:var(--bg2)}
.adem-in{max-width:1000px;margin:0 auto;padding:132px 32px;text-align:center;position:relative;z-index:2}
.adem h2{font-family:var(--fd);font-weight:800;font-size:clamp(34px,5.2vw,68px);
  line-height:1.04;letter-spacing:-.035em;color:#fff;margin:0}
.adem .na{font-size:17px;color:#9fc090;margin-top:26px;max-width:520px;
  margin-left:auto;margin-right:auto;line-height:1.6}
.adem .zband{margin:0 auto 26px}
@media(max-width:900px){.adem-in{padding:82px 24px}.brug{margin:-14px auto 44px}}
.stappen{display:flex;flex-direction:column;gap:26px;position:relative;padding-left:4px}
.stappen .stap{position:relative;padding-left:26px}
.stappen .stap::before{content:"";position:absolute;left:0;top:9px;bottom:-26px;width:2px;
  background:linear-gradient(180deg,rgba(102,187,51,.45),rgba(102,187,51,.12))}
.stappen .stap:last-child::before{display:none}
.stappen .stap::after{content:"";position:absolute;left:-3px;top:7px;width:8px;height:8px;
  border-radius:50%;background:var(--lime)}
.stappen .kop{margin:0 0 6px}
.stappen p{margin:0}
/* ══════════════════════════════════════════════════════════════
   OP DE TELEFOON

   Daar komt het meeste verkeer vandaan: een visser die iets opzoekt
   staat aan het water met zijn telefoon in zijn hand.

   Drie dingen die hier gebeuren:
     · minder lucht rondom, zodat er meer op het scherm past
     · kleinere koppen, want een kop van 72px vult een heel scherm
     · een uitklapmenu, want de balk verdween zonder alternatief

   De grens ligt op 760px: alles daaronder is telefoon of kleine tablet.
   ══════════════════════════════════════════════════════════════ */

/* ---- het uitklapmenu ----
   De knop staat alleen op smalle schermen; op een breed scherm blijft de
   gewone balk. Werkt zonder script: een verborgen selectievakje stuurt de
   uitklap. Dat scheelt een afhankelijkheid en werkt ook als JavaScript faalt. */
.menuknop{display:none;margin-left:auto;width:44px;height:44px;border-radius:12px;
  border:1.5px solid var(--border-strong);background:transparent;cursor:pointer;
  align-items:center;justify-content:center;flex-direction:column;gap:5px;padding:0}
.menuknop i{display:block;width:19px;height:2px;background:var(--bosgroen);border-radius:2px;
  transition:transform .25s cubic-bezier(.16,1,.3,1),opacity .2s ease}
#cwMenu{position:absolute;left:-9999px;opacity:0}
#cwMenu:checked ~ .nav-links{display:flex}
#cwMenu:checked ~ .menuknop i:nth-child(1){transform:translateY(7px) rotate(45deg)}
#cwMenu:checked ~ .menuknop i:nth-child(2){opacity:0}
#cwMenu:checked ~ .menuknop i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media(max-width:760px){
  /* ---- ruimte ---- */
  .wrap,.tekst{padding:0 20px}
  section{padding:52px 0}
  .hero{padding:44px 0 40px}
  .hero-in{padding:0 20px;gap:34px}
  .sec-head{margin-bottom:32px}

  /* ---- tekst: kleiner, maar niet te klein om te lezen ---- */
  h1{font-size:clamp(32px,8.4vw,42px)}
  h2{font-size:clamp(26px,6.6vw,34px)}
  .lead{font-size:16.5px}
  .hero .lead{font-size:17px}
  .hero .sub{font-size:14.5px}
  ul.pts li{font-size:15px;margin-bottom:13px}
  .ph1{font-size:clamp(29px,7.6vw,38px)}

  /* ---- de balk: logo links, knop rechts, lijst eronder ---- */
  .nav-in{padding:11px 20px;gap:12px;flex-wrap:wrap;position:relative}
  .menuknop{display:flex}
  .nav-links{display:none;order:3;width:100%;flex-direction:column;gap:2px;
    margin:8px 0 4px;padding-top:10px;border-top:1px solid var(--border)}
  .nav-links a{display:block;width:100%;padding:12px 14px;font-size:15px;border-radius:12px}
  /* op smal scherm passen ze wel: de verbergregels van breed gelden hier niet */
  .nav-links a[href$="support.html"],
  .nav-links a[href$="#privacy"]{display:block}

  /* ---- beelden ---- */
  .shot.ph{max-width:230px}
  .shot.hero-ph{max-width:250px}
  .duo{grid-template-columns:1fr 1fr;gap:12px}
  .duo .shot.ph{max-width:100%}

  /* ---- prijzen ---- */
  .prijs{gap:16px}
  .pcard{padding:26px 22px 24px}
  .pp{font-size:38px}

  /* ---- de golvende randen wat vlakker ---- */
  .dark::before,.dark::after{height:44px}
  .band::before,.band::after{height:32px}

  /* ---- het rustpunt ---- */
  .adem-in{padding:64px 20px}
  .brug{margin:-8px auto 34px}
  .brug p{font-size:17.5px}
  .brug::before{height:24px;margin-bottom:16px}

  /* ---- reviews ---- */
  .quotes-slider .quote{flex:0 0 84%;max-width:84%}
  .rs-arrow{display:none}
  .rev-slider-wrap::before,.rev-slider-wrap::after{width:24px}

  /* ---- de FAQ ---- */
  .faq summary{font-size:15px;padding:15px 46px 15px 17px}
  .faq .ans{padding:0 17px 17px;font-size:14.5px}

  /* ---- knoppen ruim genoeg om te raken (44px is de norm) ---- */
  .btn{padding:15px 24px;min-height:48px}
  .meer{padding:8px 0;display:inline-block}
}

@media(max-width:420px){
  /* de kleinste telefoons: nog een tandje terug */
  .wrap,.tekst{padding:0 16px}
  .hero-in{padding:0 16px}
  section{padding:44px 0}
  h1{font-size:30px}
  h2{font-size:25px}
  .duo{grid-template-columns:1fr;gap:20px}
  .duo .shot.ph{max-width:220px;margin:0 auto}
  .pp{font-size:34px}
  .quotes-slider .quote{flex:0 0 90%;max-width:90%}
}

/* De schuifbalk van de reviews mag met de vinger, dus geen vastklikken op
   heel smalle schermen - dat voelt schokkerig. */
@media(max-width:520px){
  .quotes-slider{scroll-snap-type:none}
}

@media(max-width:980px){.stappen{gap:22px}}

.stap .kop{display:flex;align-items:baseline;gap:11px;margin:20px 0 7px}
.stap .nr{font-family:var(--fd);font-weight:800;font-size:13px;color:var(--lime);letter-spacing:.08em}
.stap p{font-size:15px;color:var(--text2)}
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:26px;box-shadow:var(--shadow)}
.card p{font-size:14.5px;color:var(--text2);margin-top:8px}

.prijs{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;max-width:980px;margin:0 auto;
  align-items:stretch}
.pcard{background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:32px 26px 28px;position:relative;display:flex;flex-direction:column;
  transition:transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s ease}
.pcard:hover{transform:translateY(-5px);box-shadow:var(--shadow-md)}
.pcard.uit{border:2px solid var(--lime);box-shadow:var(--shadow-md);padding-top:36px}
.pcard.uit:hover{box-shadow:0 18px 44px rgba(15,77,36,.18)}
/* De voetnoot naar de onderkant, zodat de drie kaarten even hoog zijn. */
.pfoot{margin-top:auto;padding-top:16px;font-size:12.5px;color:var(--text3)}
.pk{font-family:var(--fd);font-weight:700;font-size:12px;color:var(--text2);letter-spacing:1.6px;text-transform:uppercase}
.pp{font-family:var(--fd);font-weight:800;font-size:44px;margin:10px 0 2px;letter-spacing:-.04em;line-height:1}
.pper{font-size:13px;color:var(--text3);margin-bottom:20px}
.plist{list-style:none;border-top:1px solid var(--border);padding-top:18px}
.plist li{position:relative;padding-left:24px;margin-bottom:11px;font-size:14.5px;color:var(--text2);line-height:1.45}
.plist li:last-child{margin-bottom:0}
.plist li::before{content:"";position:absolute;left:2px;top:7px;width:11px;height:7px;
  border-left:2px solid var(--lime);border-bottom:2px solid var(--lime);transform:rotate(-45deg)}
/* ---- zeven dagen gratis: dit is het argument om te beginnen ----
   Staat in de seizoenspas-kaart, tussen de prijs en de lijst. */
.gratis7{display:flex;align-items:center;gap:10px;background:rgba(102,187,51,.14);
  border:1.5px solid rgba(102,187,51,.45);border-radius:12px;padding:11px 14px;
  margin:0 0 18px;font-family:var(--fd);font-weight:700;font-size:14px;color:var(--bosgroen)}
.gratis7 svg{width:17px;height:17px;stroke:var(--green-mid);stroke-width:2.4;fill:none;flex:0 0 auto}
/* De andere twee kaarten krijgen dezelfde hoogte gereserveerd, zodat de lijsten
   op dezelfde lijn beginnen. Zonder dit staat de middelste kaart hoger. */
.pcard:not(.uit) .plist{margin-top:60px}
@media(max-width:900px){.pcard:not(.uit) .plist{margin-top:0}}

.pfoot-oud{margin-top:16px;font-size:12.5px;color:var(--text3)}
.pn{font-size:13.5px;color:var(--text3);line-height:1.55}
.plabel{position:absolute;top:-13px;left:50%;transform:translateX(-50%);z-index:2;background:var(--lime);
  color:#08210e;font-family:var(--fd);font-weight:700;font-size:11px;padding:5px 13px;
  border-radius:var(--pill);letter-spacing:1px;text-transform:uppercase}

footer{background:var(--ink);color:#9fc090;padding:30px 0 20px;font-size:14px;position:relative;overflow:hidden}
footer .diep{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
footer .diep path{fill:none;stroke:rgba(102,187,51,.1);stroke-width:1.1}
/* ═════════════════════════════════════════════════════════════
   DE VOET — vier kolommen
   Alles stond onder elkaar in één lange sliert. Nu: merk, de app,
   hulp, en contact naast elkaar; onder de 900px zakken ze in.
   ═════════════════════════════════════════════════════════════ */
/* De links verdeeld over de volle breedte. Het logo en de slogan stonden hier
   ook, maar die staan al bovenaan de pagina - dat was dubbel, en het maakte
   de voet onnodig hoog. */
.foot-top{position:relative;z-index:2;margin-bottom:0}
.foot-links{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap}
.foot-links a{font-size:14px;color:#9fc090;line-height:1.3;
  border-bottom:1.5px solid transparent;padding-bottom:2px}
.foot-links a:hover{color:var(--lime);border-color:rgba(102,187,51,.55)}
@media(max-width:700px){
  .foot-links{justify-content:flex-start;gap:12px 22px}
}
/* De oproep met de winkelknoppen, onder de kolommen. De knoppen naast elkaar
   over de volle breedte; in de smalle merk-kolom vielen ze onder elkaar. */
.foot-cta{display:flex;align-items:center;justify-content:space-between;gap:28px;
  flex-wrap:wrap;padding-top:20px;margin-top:20px;
  border-top:1px solid rgba(255,255,255,.1);position:relative;z-index:2}
.foot-cta h3{font-family:var(--fd);font-weight:800;font-size:clamp(18px,2vw,23px);
  color:#fff;letter-spacing:-.025em;line-height:1.15;margin:0;max-width:430px}
.foot-cta p{font-size:13px;color:#9fc090;margin:6px 0 0;max-width:430px}
.foot-cta .badges{display:flex;gap:11px;flex-wrap:wrap;margin:0;flex:0 0 auto}
.foot-merk{max-width:280px}
/* De tagline sluit aan op het logo. */
.foot-tag{font-size:13.5px;color:#9fc090;margin:12px 0 0;line-height:1.5}
.foot-klein a{display:inline;font-size:12.5px;margin:0;color:#9fc090;
  border-bottom:1px solid rgba(159,192,144,.28)}
.foot-klein a:hover{color:var(--lime);border-color:rgba(102,187,51,.5)}
.foot-kol h4{font-family:var(--fd);font-weight:700;font-size:11.5px;letter-spacing:1.6px;
  text-transform:uppercase;color:#c6e8ae;margin:0 0 14px}
.foot-kol a{display:block;font-size:14px;color:#9fc090;margin-bottom:9px;
  border-bottom:1.5px solid transparent;width:fit-content;padding-bottom:1px;line-height:1.3}
.foot-kol a:hover{color:var(--lime);border-color:rgba(102,187,51,.55)}
.foot-klein{font-size:12.5px;color:#78956e;line-height:1.6;margin:16px 0 0}
@media(max-width:900px){
  .foot-cta .badges{width:100%}
}
@media(max-width:560px){
  .foot-cta .badges{flex-direction:column}
  .foot-cta .badge-x{width:100%}
}

/* ---- sociale media ----
   Staan in de onderste balk, rechts tegenover de bedrijfsgegevens. Daar
   verankeren ze de rand; in de merk-kolom hingen ze er los bij. Rustig groen,
   ook bij hover - alleen de rand licht op. */
.sociaal{display:flex;gap:9px;align-items:center}
.sociaal a{width:34px;height:34px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  border:1.5px solid rgba(255,255,255,.16);color:#9fc090;
  transition:color .22s ease,border-color .22s ease,background .22s ease,
             transform .22s cubic-bezier(.16,1,.3,1)}
.sociaal svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.sociaal a:hover{color:var(--lime);border-color:rgba(102,187,51,.55);
  background:rgba(102,187,51,.1);transform:translateY(-2px)}

/* De winkelknoppen zitten nu in hun eigen rij (.foot-cta), niet meer in de
   smalle merk-kolom. */

.foot-bot{border-top:1px solid rgba(255,255,255,.1);padding-top:15px;margin-top:20px;
  display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
  font-size:12.5px;color:#78956e;position:relative;z-index:2}
.foot-bot a{color:#9fc090;border-bottom:1px solid rgba(159,192,144,.3)}
.foot-bot a:hover{color:var(--lime);border-color:rgba(102,187,51,.5)}
/* De bronvermelding van OpenStreetMap stond hier, maar die hoort waar de kaart
   getoond wordt: in de app en in de voorwaarden. Op de site staat geen kaart. */

.note{background:#152018;color:#c2d8b9;font-size:13px;padding:16px 32px;line-height:1.6}
.note b{color:#a8e37a}
.note code{background:rgba(255,255,255,.08);padding:1px 6px;border-radius:4px;font-size:12px}


/* ---------------------------------------------------------------
   BEWEGING - drie dingen, niet meer.
   1. de dieptelijnen driften heel traag, als water
   2. de score-staafjes groeien bij het laden
   3. secties komen op zodra je ze nadert
   Alles staat uit bij "verminder beweging" in de systeeminstellingen.
   --------------------------------------------------------------- */
/* ---- de dieptelijnen: langzaam stromend water ----
   Twee bewegingen over elkaar: het hele veld drift zacht heen en weer, en de
   lijnen zelf golven met een eigen tempo. Samen leest dat als stroming in plaats
   van als een schuivend plaatje. */
.dark .diep,footer .diep{animation:drift 34s ease-in-out infinite alternate}
@keyframes drift{from{transform:translate3d(0,0,0) scaleY(1)}to{transform:translate3d(-26px,9px,0) scaleY(1.035)}}
.dark .diep path,footer .diep path{animation:golf 19s ease-in-out infinite alternate;transform-origin:center}
.dark .diep path:nth-child(2n),footer .diep path:nth-child(2n){animation-duration:24s;animation-delay:-6s}
.dark .diep path:nth-child(3n),footer .diep path:nth-child(3n){animation-duration:29s;animation-delay:-11s}
@keyframes golf{
  0%{transform:translateX(0) translateY(0)}
  50%{transform:translateX(-14px) translateY(4px)}
  100%{transform:translateX(8px) translateY(-3px)}
}

.fb-t i{width:0;animation:groei 1.1s cubic-bezier(.16,1,.3,1) forwards}
.fb:nth-child(1) i{animation-delay:.10s}.fb:nth-child(2) i{animation-delay:.17s}
.fb:nth-child(3) i{animation-delay:.24s}.fb:nth-child(4) i{animation-delay:.31s}
.fb:nth-child(5) i{animation-delay:.38s}.fb:nth-child(6) i{animation-delay:.45s}
.fb:nth-child(7) i{animation-delay:.52s}.fb:nth-child(8) i{animation-delay:.59s}
@keyframes groei{from{width:0}to{width:var(--w)}}

.op{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
.op.in{opacity:1;transform:none}
.op.d1{transition-delay:.07s}.op.d2{transition-delay:.14s}.op.d3{transition-delay:.21s}

nav{transition:box-shadow .3s ease,background .3s ease}
nav.vast{box-shadow:0 4px 20px rgba(15,77,36,.09)}

/* ═══════════════════════════════════════════════════════════════
   DE TELEFOONS KOMEN BINNEN

   Ze stonden plat en recht op, en dat leest als een productfoto.
   Nu staan ze licht gekanteld in de ruimte en glijden ze van de zijkant
   naar binnen zodra je ze nadert - van links als ze links staan, van
   rechts als ze rechts staan. De diepte komt van perspective op de
   omliggende rij, zodat alle telefoons in dezelfde ruimte staan.

   LET OP: geen doorlopende zweef-animatie op deze telefoons. Die zou
   vechten met de transform van het binnenkomen - precies de fout die in
   de app ooit de toetsenbord-animaties brak. De hero-telefoon zweeft wel,
   want die heeft geen binnenkomst.
   ═══════════════════════════════════════════════════════════════ */
.two,.three,.duo{perspective:1600px;perspective-origin:50% 40%}

.shot.ph{transform-style:preserve-3d;
  transition:transform .85s cubic-bezier(.16,1,.3,1),opacity .7s ease,box-shadow .3s ease}

/* rust-stand: licht gekanteld, de kant op waar hij staat */
.two .shot.ph{transform:rotateY(-8deg) rotateX(3.5deg) rotateZ(-1.2deg)}
.two > .shot.ph:first-child,.two > *:first-child .shot.ph{transform:rotateY(8deg) rotateX(3.5deg) rotateZ(1.2deg)}
.three .shot.ph{transform:rotateY(-5deg) rotateX(3deg)}
.three > *:first-child .shot.ph{transform:rotateY(6deg) rotateX(3deg)}
.duo .shot.ph:first-child{transform:rotateY(7deg) rotateX(3deg) rotateZ(1deg)}
.duo .shot.ph:last-child{transform:rotateY(-7deg) rotateX(3deg) rotateZ(-1deg)}

/* binnenkomst: verder weg, schuiner, en dan op zijn plek */
.op:not(.in) .shot.ph{opacity:0;transform:translateX(46px) rotateY(-24deg) rotateX(7deg) scale(.93)}
.op:not(.in) > .shot.ph:first-child,
.op:not(.in) > *:first-child .shot.ph{transform:translateX(-46px) rotateY(24deg) rotateX(7deg) scale(.93)}
.op:not(.in) .duo .shot.ph:first-child{transform:translateX(-34px) rotateY(20deg) scale(.94)}
.op:not(.in) .duo .shot.ph:last-child{transform:translateX(34px) rotateY(-20deg) scale(.94)}
/* de tweede en derde in een rij volgen iets later */
.three > *:nth-child(2) .shot.ph{transition-delay:.09s}
.three > *:nth-child(3) .shot.ph{transition-delay:.18s}
.duo .shot.ph:last-child{transition-delay:.09s}

/* hover: hij richt zich op naar je toe */
.two .shot.ph:hover,.two > *:first-child .shot.ph:hover,
.three .shot.ph:hover,.duo .shot.ph:hover{
  transform:rotateY(0) rotateX(0) rotateZ(0) translateY(-6px) scale(1.015)}

@media(max-width:980px){
  /* op een smal scherm staan ze onder elkaar; dan is kantelen alleen maar onrustig */
  .two .shot.ph,.two > *:first-child .shot.ph,.three .shot.ph,
  .three > *:first-child .shot.ph,.duo .shot.ph:first-child,.duo .shot.ph:last-child{
    transform:none}
  .op:not(.in) .shot.ph{transform:translateY(26px) scale(.97)}
}
@media(prefers-reduced-motion:reduce){
  .shot.ph,.two .shot.ph,.three .shot.ph,.duo .shot.ph,
  .op:not(.in) .shot.ph{transform:none!important;opacity:1!important;transition:none}
}

.shot{transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s ease}
.shot:not(.ph):hover{transform:translateY(-4px)}
.shot.ph:hover{box-shadow:0 42px 80px -26px rgba(8,26,14,.55),0 14px 30px rgba(8,26,14,.2),
             inset 0 0 0 1px rgba(102,187,51,.35)}
.btn,.badge-x{transition:transform .2s cubic-bezier(.16,1,.3,1)}
.badge-x:hover{transform:translateY(-2px)}

@media(prefers-reduced-motion:reduce){
  .dark .diep,footer .diep{animation:none}
  .fb-t i{animation:none;width:var(--w)}
  .op{opacity:1;transform:none;transition:none}
}


/* ---- watermerk: het beeldmerk groot en heel licht in de donkere vlakken ---- */
/* ---- watermerk ----
   Het RONDE beeldmerk (icons/cw-merk-rond.svg), niet het woordmerk. Dat laatste
   is ruim drie keer zo breed als hoog en liep daardoor altijd uit beeld; het
   ronde merk is bijna vierkant en past wel. Zo deed de oude site het ook.

   Gemaskeerd vlak, want het logo heeft eigen kleurverlopen die je van buitenaf
   niet kunt overschrijven. LET OP: laadt het masker niet, dan toont de browser
   een vol vlak. Zie je hier een groen blok, dan ontbreekt het bestand. */
.wm{position:absolute;pointer-events:none;z-index:0;opacity:.09;background:#9fd47a;
  -webkit-mask:url(icons/cw-merk-rond.svg) center/contain no-repeat;
  mask:url(icons/cw-merk-rond.svg) center/contain no-repeat}
.wm-hero{width:380px;height:368px;right:60px;bottom:60px}
.wm-crew{width:300px;height:291px;left:56px;top:64px;opacity:.075}
.wm-priv{width:340px;height:330px;right:56px;top:50%;transform:translateY(-50%);opacity:.07}
.wm-adem{width:300px;height:291px;right:60px;top:50%;transform:translateY(-50%);opacity:.06}
.wm-foot{width:260px;height:252px;right:56px;bottom:44px;opacity:.06}
@media(max-width:900px){
  .wm-hero{width:190px;height:184px;right:18px;bottom:22px}
  .wm-crew{width:160px;height:155px;left:16px;top:24px}
  .wm-priv{width:170px;height:165px;right:14px}
  .wm-adem{width:150px;height:145px;right:12px}
  .wm-foot{width:150px;height:145px;right:16px;bottom:20px}
}

/* icoontjes in de privacykaarten */
.pi{width:44px;height:44px;border-radius:12px;background:rgba(102,187,51,.16);
  display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.pi svg{width:21px;height:21px;stroke:var(--lime);stroke-width:2;fill:none;
  stroke-linecap:round;stroke-linejoin:round}

/* ---- logo in de voet ----
   Het HORIZONTALE woordmerk. Gemaskeerd vlak, want het logo heeft eigen
   kleurverlopen die je van buitenaf niet kunt overschrijven. Zie je hier een
   wit blok, dan ontbreekt het bestand. */
.foot-mark{display:block;width:240px;height:58px;background:#fff;max-width:100%;
  -webkit-mask:url(icons/cw-horz-light.svg) left center/contain no-repeat;
  mask:url(icons/cw-horz-light.svg) left center/contain no-repeat}
@media(max-width:900px){.foot-mark{width:206px;height:50px}}

/* ---- meer leven ---- */
.dark .glow{animation:adem 11s ease-in-out infinite alternate}
@keyframes adem{from{opacity:.75;transform:scale(1)}to{opacity:1;transform:scale(1.09)}}

/* De hero-telefoon en de scorekaart zweven zacht. Die zitten NIET in een .op,
   dus hier vecht geen binnenkomst met de zweving. */
.hero-in{perspective:1600px}
.hero-ph{animation:zweef 8s ease-in-out infinite;
  transform:rotateY(-9deg) rotateX(4deg) rotateZ(-1.5deg)}
.scard{animation:zweef 8s ease-in-out infinite;animation-delay:-2.4s}
@keyframes zweef{
  0%,100%{transform:rotateY(-9deg) rotateX(4deg) rotateZ(-1.5deg) translateY(0)}
  50%{transform:rotateY(-9deg) rotateX(4deg) rotateZ(-1.5deg) translateY(-11px)}
}

/* de scoreband tekent zichzelf */
.zband i{transform:scaleX(0);transform-origin:left;animation:baan .5s cubic-bezier(.16,1,.3,1) forwards}
.zband i:nth-child(1){animation-delay:.05s}.zband i:nth-child(2){animation-delay:.11s}
.zband i:nth-child(3){animation-delay:.17s}.zband i:nth-child(4){animation-delay:.23s}
.zband i:nth-child(5){animation-delay:.29s}
@keyframes baan{to{transform:scaleX(1)}}

/* lijstjes komen regel voor regel */
.op.in ul.pts li,.op.in .plist li{animation:regel .55s cubic-bezier(.16,1,.3,1) both}
ul.pts li:nth-child(1),.plist li:nth-child(1){animation-delay:.10s}
ul.pts li:nth-child(2),.plist li:nth-child(2){animation-delay:.17s}
ul.pts li:nth-child(3),.plist li:nth-child(3){animation-delay:.24s}
ul.pts li:nth-child(4),.plist li:nth-child(4){animation-delay:.31s}
ul.pts li:nth-child(5),.plist li:nth-child(5){animation-delay:.38s}
@keyframes regel{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}

/* het bolletje voor een lijstregel vult zich */
ul.pts li::before{transition:background .3s ease}
ul.pts li:hover::before{background:var(--lime)}

/* de grote titels komen iets later dan hun bovenschrift */
.op.in h2{animation:kop .7s cubic-bezier(.16,1,.3,1) .08s both}
@keyframes kop{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

@media(prefers-reduced-motion:reduce){
  .dark .glow,.hero-ph,.scard{animation:none}
  .dark .diep,footer .diep,.dark .diep path,footer .diep path{animation:none}
  .band::before,.band::after{animation:none}
  .band{animation:none}
  .zband i{transform:none;animation:none}
  .op.in ul.pts li,.op.in .plist li,.op.in h2{animation:none}
  .wm{transition:none}
}

/* ---- reviews (overgenomen uit de bestaande site) ---- */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.quote{background:var(--card);border:1px solid var(--border);border-radius:20px;padding:28px;box-shadow:var(--shadow)}
.quote .qmark{font-family:var(--fd);font-weight:800;font-size:60px;line-height:.6;color:var(--lime);opacity:.3;height:30px}
.quote .stars{color:#FFB020;font-size:13px;letter-spacing:2px;margin:6px 0 12px;display:block}
.quote .qt{font-size:15px;color:var(--text);margin-bottom:18px;line-height:1.6}
.quote .who{display:flex;align-items:center;gap:12px}
.quote .av{width:42px;height:42px;border-radius:50%;color:#fff;font-family:var(--fd);font-weight:800;display:flex;align-items:center;justify-content:center;font-size:15px}
.quote .who b{font-family:var(--fd);font-weight:700;font-size:14px;display:block}
.quote .who span{font-size:12px;color:var(--text3)}
.rev-slider-wrap{position:relative;max-width:var(--maxw);margin:0 auto}
/* ══════════════════════════════════════════════════════════════
   REVIEWS - de schuifbalk
   ══════════════════════════════════════════════════════════════ */
.rev-slider-wrap{position:relative;overflow:hidden;margin:0 -4px}
.quotes-slider{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;padding:6px 4px 18px;-webkit-overflow-scrolling:touch;
  scrollbar-width:none}
.quotes-slider::-webkit-scrollbar{display:none}
.quotes-slider .quote{flex:0 0 330px;max-width:330px;scroll-snap-align:start;padding:26px;
  transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s ease}
.quotes-slider .quote:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.quotes-slider .quote .qt{display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:16px}
/* Vervaagde randen: je ziet dat er meer is, zonder harde afsnijding. */
.rev-slider-wrap::before,.rev-slider-wrap::after{content:"";position:absolute;top:0;bottom:18px;
  width:60px;pointer-events:none;z-index:1}
.rev-slider-wrap::before{left:0;background:linear-gradient(90deg,var(--bg2) 20%,transparent)}
.rev-slider-wrap::after{right:0;background:linear-gradient(270deg,var(--bg2) 20%,transparent)}
.rs-arrow{position:absolute;top:44%;transform:translateY(-50%);width:44px;height:44px;
  border-radius:50%;background:var(--card);border:1px solid var(--border-strong);
  box-shadow:var(--shadow-md);font-family:var(--fd);font-size:24px;color:var(--bosgroen);
  z-index:2;display:flex;align-items:center;justify-content:center;line-height:0;
  padding-bottom:3px;cursor:pointer;
  transition:opacity .15s ease,transform .2s cubic-bezier(.16,1,.3,1),background .2s ease,color .2s ease}
.rs-arrow:hover{background:var(--bosgroen);color:#fff;border-color:var(--bosgroen);
  transform:translateY(-50%) scale(1.08)}
.rs-prev{left:-10px}
.rs-arrow:disabled{opacity:0;pointer-events:none}
.rev-empty{text-align:center;color:var(--text3);font-size:15px;padding:34px 20px;width:100%}
.all-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.all-grid .quote{padding:22px}
.all-grid .quote .qt{font-size:14px;margin-bottom:14px}
.rev-ov{position:fixed;inset:0;background:rgba(5,19,10,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:600;display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;pointer-events:none;transition:.2s}
.rev-ov.show{opacity:1;pointer-events:auto}
/* ══════════════════════════════════════════════════════════════
   HET REVIEWVENSTER
   De invoervelden hadden geen eigen stijl en pakten die van de browser.
   ══════════════════════════════════════════════════════════════ */
.rev-modal{background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);max-width:460px;width:100%;padding:34px;position:relative;
  transform:translateY(16px) scale(.98);transition:transform .28s cubic-bezier(.16,1,.3,1);
  max-height:92vh;overflow-y:auto}
.rev-ov.show .rev-modal{transform:none}
.rev-x{position:absolute;top:16px;right:16px;width:38px;height:38px;border-radius:50%;
  border:1px solid var(--border);background:var(--bg2);color:var(--text2);font-size:20px;
  line-height:1;cursor:pointer;transition:background .18s ease,color .18s ease,transform .18s ease}
.rev-x:hover{color:#fff;background:var(--bosgroen);border-color:var(--bosgroen);transform:rotate(90deg)}
.rev-modal h3{font-family:var(--fd);font-weight:800;font-size:26px;margin-bottom:6px;
  letter-spacing:-.02em;padding-right:44px}
.rev-sub{color:var(--text2);font-size:14.5px;margin-bottom:22px;line-height:1.5}
.rev-stars{display:flex;gap:8px;margin-bottom:20px;font-size:32px;cursor:pointer;user-select:none}
/* De sterren: de gekozen sterren zijn amber, de rest grijs. De klasse komt van
   het script dat uit de oude site is overgenomen. */
.rev-stars span{color:#d7dcd3;transition:color .12s ease,transform .12s ease}
.rev-stars span:hover{transform:scale(1.12)}
.rev-stars span.on,.rev-stars span.aan{color:#E8A62E}

/* invoervelden */
.rev-modal input[type="text"],.rev-modal textarea{
  width:100%;font-family:var(--fb);font-size:15px;color:var(--text);
  background:var(--bg);border:1.5px solid var(--border);border-radius:12px;
  padding:13px 15px;margin-bottom:13px;
  transition:border-color .18s ease,background .18s ease,box-shadow .18s ease}
.rev-modal input[type="text"]::placeholder,.rev-modal textarea::placeholder{color:var(--text3)}
.rev-modal input[type="text"]:focus,.rev-modal textarea:focus{
  outline:none;border-color:var(--lime);background:var(--card);
  box-shadow:0 0 0 4px rgba(102,187,51,.14)}
.rev-modal textarea{resize:vertical;min-height:110px;line-height:1.55}
/* De knop in het venster: alleen de breedte aanpassen, de rest komt van de
   app-standaard hieronder. Zet hier GEEN eigen achtergrond - dan overschrijf je
   het verloop en heb je weer een platte knop. */
.rev-modal .btn{width:100%;margin-top:8px}

.rev-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
.rev-msg{margin-top:12px;font-size:14px;font-weight:600;min-height:18px;text-align:center}
.rev-msg.ok{color:var(--green-mid)}
.rev-msg.err{color:var(--zp)}
/* .reveal kwam mee uit de oude site en zette alles op opacity:0 tot een script
   er 'in' bij zette. Dat script is er niet meer - de nieuwe pagina gebruikt .op.
   Daarom laat het scriptje onderaan .reveal meelopen met dezelfde waarnemer. */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.reveal.in{opacity:1;transform:none}
/* De oude .section-klasse bestond in de vorige stijl en gaf de inhoud een marge.
   Die is er niet meer, dus het reviews-blok liep over de volle breedte. */
.section{max-width:var(--maxw);margin:0 auto;padding-left:32px;padding-right:32px}

@media(max-width:980px){
  .hero-in,.two,.two.wide-l,.two.wide-r,.three,.prijs{grid-template-columns:1fr;gap:38px}
  .nav-links{display:none}
  section,.hero{padding:64px 0}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ══════════════════════════════════════════════════════════════
   KNOPPEN - de standaard van de app

   Overgenomen van de vorige site, want die volgde de app: een verloop
   van licht naar donker met een schaduw eronder, hoofdletters, en een
   lichte rand aan de bovenkant zodat hij bol lijkt.
   ══════════════════════════════════════════════════════════════ */
.btn{font-family:var(--fd);font-weight:700;font-size:13px;letter-spacing:.6px;
  text-transform:uppercase;padding:14px 26px;border-radius:14px;border:none;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;line-height:1;
  transition:transform .16s ease,box-shadow .16s ease,background .16s ease}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:linear-gradient(180deg,#1c6e33,#0F4D24);color:#fff;
  box-shadow:0 8px 22px rgba(15,77,36,.32),inset 0 1px 0 rgba(255,255,255,.18)}
.btn-primary:hover{box-shadow:0 12px 30px rgba(15,77,36,.42);color:#fff}
.btn-lime{background:linear-gradient(180deg,#7ED04A,#5BA838);color:#0a2410;
  box-shadow:0 8px 22px rgba(102,187,51,.4),inset 0 1px 0 rgba(255,255,255,.45)}
.btn-outline{background:transparent;color:var(--bosgroen);
  border:1.5px solid var(--border-strong);box-shadow:none}
.btn-outline:hover{background:var(--bg2)}
/* op een donkere ondergrond */
.btn-ghost{border:1.5px solid rgba(255,255,255,.26);color:#dceed3;background:transparent}
.btn-ghost:hover{background:rgba(255,255,255,.07);color:#fff}

/* Kaarten OP een donker vlak houden hun eigen lichte achtergrond, dus daar moet
   de tekst donker blijven. Zonder de regels hieronder erft de kop het wit van
   .on-ink en lees je niets meer - wit op wit. */
.dark .card,.on-ink .card,.on-dark .card{background:var(--card);border-color:var(--border)}
.dark .card h3,.on-ink .card h3,.on-dark .card h3{color:var(--text)}
.dark .card p,.on-ink .card p,.on-dark .card p{color:var(--text2)}
.dark .card strong,.on-ink .card strong,.on-dark .card strong{color:var(--text)}
#reviews{padding-bottom:84px}
/* Zolang er nog geen goedgekeurde reviews zijn: geen lege schuifbalk met pijlen
   die over de tekst heen vallen, maar een rustige regel. */
.rev-slider-wrap:has(.quotes-slider:empty){min-height:0}
.rev-slider-wrap:has(.quotes-slider:empty) .rs-arrow{display:none}
.quotes-slider:empty{display:block;text-align:center;padding:6px 0 2px}
.quotes-slider:empty::after{content:"Nog geen reviews \2014 wees de eerste.";
  display:block;color:var(--text3);font-size:15px}

/* ==== verdiepende pagina's ==== */
.ph1{font-family:var(--fd);font-weight:800;font-size:clamp(36px,4.6vw,60px);
  line-height:1.03;letter-spacing:-.03em;color:#fff;margin:14px 0 18px;max-width:800px}
.terug{display:inline-flex;align-items:center;gap:7px;font-family:var(--fd);font-weight:700;
  font-size:12px;letter-spacing:1.4px;text-transform:uppercase;color:#9fc090;margin-bottom:26px}
.terug:hover{color:var(--lime)}
.faq{max-width:780px;margin:0 auto}
.faq details{background:var(--card);border:1px solid var(--border);border-radius:var(--r);
  margin-bottom:12px;overflow:hidden;transition:box-shadow .25s ease}
.faq details[open]{box-shadow:var(--shadow)}
.faq summary{font-family:var(--fd);font-weight:700;font-size:16px;padding:18px 22px;
  cursor:pointer;list-style:none;position:relative;padding-right:52px;color:var(--text)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:22px;top:50%;width:9px;height:9px;
  border-right:2px solid var(--green-mid);border-bottom:2px solid var(--green-mid);
  transform:translateY(-70%) rotate(45deg);transition:transform .25s ease}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq .ans{padding:0 22px 20px;font-size:15px;color:var(--text2);line-height:1.6}
.faq .ans p{margin-bottom:10px}
.faq .ans p:last-child{margin-bottom:0}

/* ══════════════════════════════════════════════════════════════
   TEKSTPAGINA'S
   Privacy, voorwaarden, hulp, kinderveiligheid, account verwijderen.

   Die pagina's hadden elk een eigen stijlblok met een eigen kop en
   voet. Daardoor liepen ze uiteen zodra de hoofdpagina veranderde -
   twee bronnen voor hetzelfde ding. Nu gebruiken ze deze stijl, en
   is er nog maar één versie om bij te houden.

   Ze worden ook vanuit de app geopend, in een externe browser. Een
   volledige kop en voet is daar juist goed: je hebt de app verlaten.
   ══════════════════════════════════════════════════════════════ */
.tekst{max-width:800px;margin:0 auto;padding:0 32px}
.tekst h1{font-family:var(--fd);font-weight:800;font-size:clamp(30px,3.6vw,44px);
  letter-spacing:-.03em;line-height:1.08;margin:0 0 8px}
.tekst .upd{color:var(--text3);font-size:13.5px;margin-bottom:34px}
.tekst h2{font-family:var(--fd);font-weight:700;font-size:20px;color:var(--bosgroen);
  margin:40px 0 12px;letter-spacing:-.01em}
.tekst h3{font-family:var(--fd);font-weight:700;font-size:16px;margin:24px 0 8px}
.tekst p{margin-bottom:13px;color:var(--text2);line-height:1.65}
.tekst strong{color:var(--text);font-weight:600}
.tekst ul,.tekst ol{margin:0 0 16px;padding-left:22px;color:var(--text2)}
.tekst li{margin-bottom:8px;line-height:1.6}
.tekst a{color:var(--green-mid);border-bottom:1px solid rgba(42,140,58,.3)}
.tekst a:hover{border-color:var(--green-mid)}
/* Een knop in een tekstblok is een knop, geen link: geen onderstreping en
   geen groene tekstkleur. Zonder dit erft hij de link-opmaak hierboven. */
.tekst a.btn{border-bottom:none;color:#fff}
.tekst a.btn-outline{color:var(--bosgroen)}
.tekst a.btn-lime{color:#0a2410}
.tekst a.btn:hover{border-bottom:none}
.tekst .note{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);
  padding:18px 20px;margin:24px 0;font-size:14.5px;color:var(--text2)}
.tekst .note strong{color:var(--text)}
.tekst .waarsch{background:rgba(224,170,40,.1);border-color:rgba(224,170,40,.35)}

/* het contactblok op de hulppagina */
.tekst .contact{background:var(--card);border:1px solid var(--border);
  border-radius:var(--r);padding:4px 20px 6px;margin:8px 0 30px}
.tekst .crow{display:flex;gap:16px;align-items:flex-start;padding:16px 0;
  border-bottom:1px solid var(--border)}
.tekst .crow:last-child{border-bottom:0}
.tekst .ct{flex:1;min-width:0}
.tekst .ct b{display:block;font-family:var(--fd);font-weight:700;font-size:15px;
  color:var(--text);margin-bottom:3px}
.tekst .ct span{font-size:14.5px;color:var(--text2);line-height:1.6}
.tekst .term{font-family:var(--fd);font-weight:700;font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--green-mid);background:rgba(102,187,51,.14);
  border-radius:var(--pill);padding:6px 12px;white-space:nowrap;flex:0 0 auto}
.tekst .term.snel{color:#a06a10;background:rgba(224,170,40,.16)}

/* de uitklapvragen */
.tekst details.q{background:var(--card);border:1px solid var(--border);
  border-radius:var(--r);margin-bottom:11px;overflow:hidden;
  transition:box-shadow .25s ease}
.tekst details.q[open]{box-shadow:var(--shadow)}
.tekst details.q>summary{font-family:var(--fd);font-weight:700;font-size:15.5px;
  padding:17px 52px 17px 20px;cursor:pointer;list-style:none;position:relative;
  color:var(--text)}
.tekst details.q>summary::-webkit-details-marker{display:none}
.tekst details.q>summary::after{content:"";position:absolute;right:20px;top:50%;
  width:9px;height:9px;border-right:2px solid var(--green-mid);
  border-bottom:2px solid var(--green-mid);transform:translateY(-70%) rotate(45deg);
  transition:transform .25s ease}
.tekst details.q[open]>summary::after{transform:translateY(-30%) rotate(-135deg)}
.tekst details.q>div{padding:0 20px 18px;font-size:15px;color:var(--text2);line-height:1.65}
.tekst details.q>div p:last-child{margin-bottom:0}

/* de kaartjes op account-verwijderen */
.tekst .card{background:var(--card);border:1px solid var(--border);
  border-radius:var(--r);padding:24px;margin:18px 0;box-shadow:var(--shadow)}
.tekst .card h2{margin-top:0}
.tekst .fl{display:flex;flex-wrap:wrap;gap:8px 16px;margin-bottom:12px}

@media(max-width:640px){
  .tekst{padding:0 20px}
  .tekst .crow{flex-direction:column;gap:10px}
}

/* ---- contactformulier op de hulppagina ----
   Netlify vangt de inzending op; er is geen server nodig. */
.cw-form{max-width:640px;margin:24px 0 8px}
.cw-form label{display:block;font-family:var(--fd);font-weight:700;font-size:13px;
  letter-spacing:.02em;color:#3d5a3d;margin-bottom:16px}
.cw-veld-rij{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
@media(max-width:560px){.cw-veld-rij{grid-template-columns:1fr}}
.cw-form input[type="text"],.cw-form input[type="email"],
.cw-form textarea,.cw-form select{
  display:block;width:100%;margin-top:7px;
  font-family:var(--fb);font-weight:400;font-size:15px;color:var(--text);
  background:#fff;border:1.5px solid var(--border);border-radius:12px;padding:13px 15px;
  transition:border-color .18s ease,box-shadow .18s ease}
.cw-form input::placeholder,.cw-form textarea::placeholder{color:var(--text3)}
.cw-form input:focus,.cw-form textarea:focus,.cw-form select:focus{
  outline:none;border-color:var(--lime);box-shadow:0 0 0 4px rgba(102,187,51,.14)}
.cw-form textarea{resize:vertical;min-height:130px;line-height:1.55}
.cw-form select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%232A8C3A' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;background-size:12px;
  padding-right:42px}
.cw-form .btn{margin-top:6px}
.cw-form-msg{min-height:22px;margin-top:14px;font-size:14.5px;font-weight:600}
.cw-form-msg.ok{color:var(--green-mid)}
.cw-form-msg.fout{color:var(--zp)}
.cw-form-klein{font-size:12.5px;color:var(--text3);margin-top:10px;line-height:1.5}
/* De spamval: onzichtbaar voor mensen, wel invulbaar voor robots. */
.val-weg{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}