:root{
  --petrol-deep:#0A2E38;
  --petrol:#0D3C49;
  --coral:#EC7249;
  /* Zelfde tint en verzadiging als de merkcoral, alleen donkerder. Voor kleine
     tekst op lichte vlakken, waar #EC7249 op crème 2,64:1 haalt en 4,5 nodig is.
     Deze haalt 4,50:1. Knoppen, vlakken en de hero blijven op --coral. */
  --coral-tekst:#C54115;
  --cream:#F6F1E6;
  --sage:#7E9B8A;
  --white:#F7F4EC;
  --ink:#12333D;
  --on-dark-soft:rgba(246,241,230,.78);
  --on-dark-faint:rgba(246,241,230,.5);
  --ease:cubic-bezier(.22,.61,.2,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Plus Jakarta Sans',sans-serif;
  background:var(--cream);
  color:var(--ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3{font-family:'Cabinet Grotesk',sans-serif;font-weight:700;line-height:1.12}
h1{font-size:clamp(2.7rem,6.2vw,4.7rem);letter-spacing:-.03em;line-height:1.03}
h2{font-size:clamp(1.9rem,3.6vw,2.9rem);font-weight:600;letter-spacing:-.025em}
h3{font-size:1.25rem;font-weight:600;letter-spacing:-.02em}
p{font-size:1.05rem}
a{color:inherit;text-decoration:none}
section{position:relative}
.wrap{max-width:1100px;margin:0 auto;padding:0 clamp(1.4rem,5vw,3rem)}

/* ---------- layout-fix: schermvullende secties + anchor-offset onder de vaste header ---------- */
html{scroll-padding-top:0}
.why,.effect{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;justify-content:center}
/* elke sectie vult exact een scherm: geen randje van de vorige of volgende erbij.
   Bewust `proximity` en niet `mandatory`. Met mandatory moet de scroll altijd op
   een snappunt eindigen, en de <footer> is geen snapgebied: die staat buiten
   .endscreen. Het laatste snappunt lag daardoor 183px boven de bodem, precies de
   hoogte van de footer, waardoor die onbereikbaar was inclusief de link naar de
   privacyverklaring. Met proximity snappen de secties nog steeds, maar kan de
   scroll ook op de bodem eindigen. Zie SEO-Canon, 13-08-2026. */
@media (min-height:520px){html{scroll-snap-type:y proximity}}
.hero,.why,.effect{scroll-snap-align:start}
/* .endscreen is bewust GEEN snap-punt meer, 25-08-2026. Hij begon precies een
   footerhoogte boven het einde van de pagina, dus bij het scrollen naar de
   bodem lag het dichtstbijzijnde snap-punt 269 px hoger en trok de browser je
   daarheen terug. De footer werd zo onbereikbaar. Dit is dezelfde fout als op
   13-08, die toen met mandatory naar proximity is verzacht maar niet gedicht:
   het gat was te klein voor proximity om hem te negeren. De overige drie
   secties snappen nog wel. Zie SEO-Canon. */
/* laatste scherm: CTA en footer samen precies een scherm; CTA centreert in wat overblijft */
.endscreen{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
.endscreen .close{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center}

/* ---------- reveals, motion 2-3/5 ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.12s}
.reveal.d2{transition-delay:.24s}
.reveal.d3{transition-delay:.36s}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .dot,.ring,.eq i,.rings span,.pulse-core{animation:none!important}
  header{transition:none}
}

/* ---------- header ---------- */
header{
  position:fixed;inset:0 0 auto 0;z-index:50;
  display:flex;justify-content:space-between;align-items:center;
  padding:1.3rem clamp(1.4rem,5vw,3rem);
  transition:color .45s var(--ease);
}
/* header blijft altijd transparant en kleurt mee met de sectie eronder */
header.on-light .logo{color:var(--ink)}
header.on-light nav.top{color:rgba(18,51,61,.8)}
/* Op lichte secties zou de coral hover-kleur op cream 2,64:1 halen. */
header.on-light nav.top a:hover,header.on-light nav.top a:focus-visible{color:var(--coral-tekst)}
/* mobiel: balk bevat alleen het logo, dus buiten de hero uit beeld zodat tekst vrij blijft */
@media (max-width:720px){
  header{transition:color .45s var(--ease),opacity .3s var(--ease),transform .35s var(--ease)}
  header:not(.op-hero){opacity:0;transform:translateY(-100%);pointer-events:none}
}
.logo{display:flex;align-items:center;gap:.55rem;color:var(--white);font-weight:600;letter-spacing:.02em;font-size:1.05rem}
.logo svg{flex-shrink:0}
nav.top{display:flex;gap:1.8rem;align-items:center;font-size:.9rem;font-weight:500;color:rgba(247,244,236,.85)}
nav.top a{display:inline-flex;align-items:center;gap:.45rem;transition:color .3s}
nav.top a::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--coral);opacity:.9}
nav.top a:hover,nav.top a:focus-visible{color:var(--coral)}
nav.top a.pill{background:var(--coral);color:#08222a;padding:.55rem 1.2rem;border-radius:999px;font-weight:600}
nav.top a.pill::before{display:none}
nav.top a.pill:hover{background:#e0653c;color:#08222a}
@media(max-width:720px){nav.top{display:none}}

/* ---------- dot navigation ---------- */
.dotnav{position:fixed;right:1.2rem;top:50%;transform:translateY(-50%);z-index:40;display:flex;flex-direction:column;gap:.9rem}
.dotnav a{width:8px;height:8px;border-radius:50%;background:rgba(126,155,138,.5);transition:all .4s var(--ease)}
.dotnav a.active{background:var(--coral);transform:scale(1.4)}
@media(max-width:900px){.dotnav{display:none}}

/* ---------- hero (origineel, geport) ---------- */
.hero{
  min-height:100vh;min-height:100dvh;
  display:flex;flex-direction:column;justify-content:center;
  padding:7rem 0 6rem;
  background:radial-gradient(100% 80% at 82% 0%, #17505f 0%, rgba(23,80,95,0) 52%),linear-gradient(160deg,var(--petrol) 0%,var(--petrol-deep) 70%,#061d24 100%);
  color:var(--white);overflow:hidden;
}
.motif{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.dot{position:absolute;border-radius:50%;background:var(--coral);opacity:var(--op,.4);animation:dotpulse 5.4s ease-in-out infinite}
.dot.sg{background:var(--sage)}
@keyframes dotpulse{0%,100%{transform:scale(.8);opacity:calc(var(--op,.4) * .55)}50%{transform:scale(1.18);opacity:var(--op,.4)}}
.ring{position:absolute;border-radius:50%;border:1.5px solid rgba(236,114,73,.45);transform:translate(-50%,-50%) scale(.4);animation:pulsering 4.4s ease-out infinite}
@keyframes pulsering{0%{transform:translate(-50%,-50%) scale(.4);opacity:.65}100%{transform:translate(-50%,-50%) scale(2.6);opacity:0}}
.eq{position:absolute;left:0;right:0;bottom:0;height:96px;display:flex;align-items:flex-end;gap:5px;padding:0 30px;z-index:1;opacity:.85;mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.eq i{flex:1;border-radius:5px 5px 0 0;background:linear-gradient(var(--coral),rgba(236,114,73,.12));animation:eq 1.4s ease-in-out infinite}
@keyframes eq{0%,100%{transform:scaleY(.16)}50%{transform:scaleY(1)}}
.hero .wrap{position:relative;z-index:3}
.eyebrow{
  display:inline-flex;align-items:center;gap:.55rem;
  font-size:.8rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--sage);margin-bottom:1.4rem;
}
.eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--coral)}
.hero h1{max-width:15ch;margin-bottom:1.7rem}
.hero h1 .hl{color:var(--coral)}
.hero p.lead{font-size:clamp(1.08rem,1.7vw,1.32rem);max-width:48ch;color:var(--on-dark-soft);margin-bottom:2.5rem}
.cta-row{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap}
.hero-note{font-size:.9rem;color:var(--on-dark-faint);max-width:24ch}
.btn{
  display:inline-block;padding:.95rem 1.9rem;border-radius:999px;
  font-weight:600;font-size:.98rem;transition:transform .4s var(--ease),background .4s,box-shadow .4s;
}
.btn:hover,.btn:focus-visible{transform:translateY(-2px)}
.btn-coral{background:var(--coral);color:#08222a;box-shadow:0 8px 28px rgba(236,114,73,.3)}
.btn-coral:hover{background:#e0653c}

/* ---------- waarom ---------- */
.why{background:var(--cream);padding:clamp(5rem,10vw,8rem) 0}
.why h2{max-width:18ch;margin-bottom:1.2rem}
.why .kicker{color:var(--coral-tekst);font-weight:600;font-size:.85rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:1rem}
.why p.body{max-width:52ch;color:#3c5a63}
.why-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,6vw,5rem);align-items:start}
.why-facts{display:flex;flex-direction:column;gap:1.6rem;margin-top:.4rem}
.fact{border-left:2px solid var(--sage);padding-left:1.2rem}
.fact strong{font-family:'Cabinet Grotesk',sans-serif;font-size:1.35rem;font-weight:700;display:block;margin-bottom:.15rem;color:var(--petrol)}
.fact span{font-size:.95rem;color:#4a6570}
@media(max-width:820px){.why-grid{grid-template-columns:1fr}}

/* ---------- effect ---------- */
.effect{background:var(--petrol);padding:clamp(5rem,10vw,8rem) 0}
.effect-inner{
  background:var(--white);border-radius:24px;
  padding:clamp(2.4rem,6vw,4.5rem);
  box-shadow:0 20px 60px rgba(10,46,56,.07);
}
.effect h2{max-width:20ch;margin-bottom:2.6rem}
.effect-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2.4rem}
.eff h3{color:var(--petrol);margin-bottom:.45rem;display:flex;align-items:center;gap:.55rem}
.eff h3::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--sage);flex-shrink:0}
.eff p{font-size:.96rem;color:#4a6570}
@media(max-width:760px){.effect-grid{grid-template-columns:1fr}}

/* ---------- slot CTA ---------- */
.close{
  background:var(--white);
  color:var(--ink);padding:clamp(2.5rem,6vw,4.5rem) 0;text-align:center;overflow:hidden;
}
.rings{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:min(80vw,760px);aspect-ratio:1;pointer-events:none;opacity:.6}
.rings span{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(13,60,73,.2);animation:breathe 7s var(--ease) infinite}
.rings span:nth-child(2){inset:14%;animation-delay:.9s;border-color:rgba(236,114,73,.4)}
.rings span:nth-child(3){inset:28%;animation-delay:1.8s}
.rings span:nth-child(4){inset:42%;animation-delay:2.7s;border-color:rgba(126,155,138,.55)}
.rings .pulse-core{position:absolute;inset:47.5%;border-radius:50%;background:var(--coral);border:none;animation:corebreathe 7s var(--ease) infinite}
@keyframes breathe{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.06);opacity:1}}
@keyframes corebreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.25)}}
.close .wrap{position:relative;z-index:2}
.close h2{max-width:22ch;margin:0 auto 1.2rem}
.close p{color:#3c5a63;max-width:40ch;margin:0 auto 2.4rem}

/* ---------- footer ---------- */
footer{background:var(--petrol-deep);color:rgba(247,244,236,.6);padding:3rem 0;font-size:.88rem}
footer .wrap{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:1.6rem}
footer .logo{font-size:.95rem;margin-bottom:.7rem}
.foot-left span{display:block}
.foot-right{display:flex;flex-direction:column;align-items:flex-end;gap:.5rem}
.foot-right a{border-bottom:1px solid rgba(236,114,73,.6);padding-bottom:1px;transition:color .3s}
.foot-right a:hover,.foot-right a:focus-visible{color:var(--coral)}
@media(max-width:600px){.foot-right{align-items:flex-start}}
/* Voorheen style-attributen in de HTML. De selector staat dubbel
   zodat hij even zwaar weegt als de inline stijl die hij vervangt. */
.s-52322ec4.s-52322ec4 { left:11%; top:30%; width:21px; height:21px; --op:.5; animation-delay:0s; }
.s-1f4a9fed.s-1f4a9fed { left:24%; top:64%; width:16px; height:16px; --op:.5; animation-delay:1.1s; }
.s-ca961e90.s-ca961e90 { left:63%; top:20%; width:17px; height:17px; --op:.32; animation-delay:1.5s; }
.s-9ae60a8b.s-9ae60a8b { left:80%; top:42%; width:27px; height:27px; --op:.5; animation-delay:.4s; }
.s-e705d845.s-e705d845 { left:90%; top:28%; width:16px; height:16px; --op:.45; animation-delay:1.8s; }
.s-f8d48091.s-f8d48091 { left:73%; top:70%; width:13px; height:13px; --op:.4; animation-delay:.7s; }
.s-bfcb84cd.s-bfcb84cd { left:82%; top:34%; width:120px; height:120px; }
.s-50e0958a.s-50e0958a { left:82%; top:34%; width:120px; height:120px; animation-delay:1.5s; }
.s-976bd1e1.s-976bd1e1 { left:82%; top:34%; width:120px; height:120px; animation-delay:3s; }
.s-5281baf2.s-5281baf2 { animation-delay:0s; }
.s-d46287c8.s-d46287c8 { animation-delay:.2s; }
.s-91247317.s-91247317 { animation-delay:.45s; }
.s-37d2bc1a.s-37d2bc1a { animation-delay:.1s; }
.s-f8984dd1.s-f8984dd1 { animation-delay:.6s; }
.s-7d067b56.s-7d067b56 { animation-delay:.3s; }
.s-d73108d5.s-d73108d5 { animation-delay:.75s; }
.s-afc81cf3.s-afc81cf3 { animation-delay:.15s; }
.s-0546222f.s-0546222f { animation-delay:.5s; }
.s-fd44254d.s-fd44254d { animation-delay:.9s; }
.s-ef1072bb.s-ef1072bb { animation-delay:.35s; }
.s-76ee65d1.s-76ee65d1 { animation-delay:.65s; }
.s-31015bf8.s-31015bf8 { animation-delay:.05s; }
.s-d0d1e2ae.s-d0d1e2ae { animation-delay:.55s; }
.s-f6d8701f.s-f6d8701f { animation-delay:.25s; }
.s-ae93b7f9.s-ae93b7f9 { animation-delay:.8s; }
.s-6e5b5fbb.s-6e5b5fbb { animation-delay:.4s; }
.s-f8b76ef3.s-f8b76ef3 { animation-delay:.7s; }
.s-e991910b.s-e991910b { animation-delay:.12s; }
.s-a97a888b.s-a97a888b { animation-delay:.32s; }
.s-4078151b.s-4078151b { animation-delay:.85s; }
.s-450703f5.s-450703f5 { animation-delay:.22s; }