/* checkjequickscan — huisstijl.
   Drie kleuren dragen het hele merk, want het zijn de drie ernstniveaus uit het
   rapport zelf: blokkerend, vragenronde, in orde. Ze zijn hier geen versiering. */
:root{
  --diep:#0c1c1b;          /* de donkere grond */
  --diep-2:#123330;
  --vel:#ffffff;
  --papier:#eef2ef;
  --inkt:#0c1c1b;
  --inkt-2:#4d5f5c;
  --flauw:#8b9b97;
  --lijn:#dde5e1;
  --rood:#ff5a36;          /* blokkerend */
  --oker:#f2a81d;          /* vragenronde */
  --groen:#12c08a;         /* in orde */
  --grijs:#94a5a2;         /* vormfout: telt mee, kost geen ronde */
  --schaduw:0 1px 2px rgba(12,28,27,.05), 0 12px 32px -12px rgba(12,28,27,.18);
  --schaduw-op:0 2px 4px rgba(12,28,27,.06), 0 22px 48px -14px rgba(12,28,27,.28);
  --rond:18px;
  --toon:cubic-bezier(.2,.9,.25,1);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --vel:#131d1c; --papier:#0c1413; --inkt:#e8efec; --inkt-2:#a2b2ae;
  --flauw:#7b8c88; --lijn:#243330;
  --schaduw:0 1px 2px rgba(0,0,0,.4), 0 12px 32px -12px rgba(0,0,0,.6);
  --schaduw-op:0 2px 4px rgba(0,0,0,.45), 0 22px 48px -14px rgba(0,0,0,.7);
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  --vel:#131d1c; --papier:#0c1413; --inkt:#e8efec; --inkt-2:#a2b2ae;
  --flauw:#7b8c88; --lijn:#243330;
  --schaduw:0 1px 2px rgba(0,0,0,.4), 0 12px 32px -12px rgba(0,0,0,.6);
  --schaduw-op:0 2px 4px rgba(0,0,0,.45), 0 22px 48px -14px rgba(0,0,0,.7);
  color-scheme:dark;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--papier);color:var(--inkt);
  font-family:"Familjen Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:"Bricolage Grotesque","Familjen Grotesk",sans-serif;
  font-weight:700;letter-spacing:-.02em;line-height:1.08;margin:0}
a{color:inherit}
.wrap{width:min(72rem,100% - 2.4rem);margin-inline:auto}

/* ---------- balk ---------- */
.top{position:sticky;top:0;z-index:40;backdrop-filter:blur(14px);
  background:color-mix(in srgb,var(--papier) 82%,transparent);
  border-bottom:1px solid transparent;transition:border-color .3s}
.top.vast{border-bottom-color:var(--lijn)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;
  gap:1rem;height:64px}
.naam{display:inline-flex;align-items:center;gap:.55rem;text-decoration:none;
  font-weight:700;font-size:1.02rem;letter-spacing:-.01em}
.naam i{font-style:normal;color:var(--inkt-2)}
.knop{display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;
  background:var(--inkt);color:var(--papier);font-weight:600;font-size:.9rem;
  padding:.62rem 1.1rem;border-radius:999px;transition:transform .25s var(--toon),box-shadow .25s}
.knop:hover{transform:translateY(-2px);box-shadow:var(--schaduw-op)}
.knop.licht{background:var(--groen);color:#04201a}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;background:var(--diep);color:#eaf4f0;
  border-radius:0 0 34px 34px;padding:clamp(3.2rem,9vw,6rem) 0 clamp(3rem,7vw,4.6rem)}
.hero::before,.hero::after{content:"";position:absolute;border-radius:50%;
  filter:blur(70px);opacity:.5;pointer-events:none}
.hero::before{width:44rem;height:44rem;right:-14rem;top:-20rem;
  background:radial-gradient(circle,var(--groen),transparent 62%)}
.hero::after{width:34rem;height:34rem;left:-12rem;bottom:-18rem;
  background:radial-gradient(circle,var(--rood),transparent 64%);opacity:.34}
.hero .wrap{position:relative;z-index:1}
.hero h1{font-size:clamp(2.3rem,6.4vw,4.5rem);max-width:16ch}
.hero h1 em{font-style:normal;
  background:linear-gradient(96deg,var(--oker),var(--rood));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.aanhef{font-size:clamp(1.05rem,1.9vw,1.28rem);line-height:1.55;max-width:46ch;
  color:#b9cfc8;margin:1.4rem 0 0}
.hero-knoppen{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:2rem}
.hero .knop{background:#eaf4f0;color:var(--diep)}
.hero .knop.rand{background:transparent;color:#eaf4f0;box-shadow:inset 0 0 0 1px rgba(234,244,240,.34)}

/* de drie ernstniveaus, het merk in één regel */
.ernsten{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.6rem}
.pil{display:inline-flex;align-items:center;gap:.45rem;font-size:.76rem;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;padding:.34rem .78rem;border-radius:999px;
  background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.13)}
.pil s{width:.52rem;height:.52rem;border-radius:50%;background:currentColor;
  text-decoration:none;flex:none}
.p-rood{color:var(--rood)} .p-oker{color:var(--oker)}
.p-grijs{color:#a9bab6} .p-groen{color:var(--groen)}

/* ---------- secties ---------- */
.sectie{padding:clamp(3rem,7vw,5rem) 0}
.sectie h2{font-size:clamp(1.6rem,3.3vw,2.35rem);max-width:20ch}
.lood{color:var(--inkt-2);max-width:52ch;margin:.85rem 0 0;font-size:1.03rem}

.duo{display:grid;gap:1.4rem;align-items:start}
@media(min-width:56rem){.duo{grid-template-columns:1fr 1fr;gap:3.4rem}}

/* het voorbeeld: de kern van wat wij verkopen */
.bewijs{background:var(--vel);border-radius:var(--rond);box-shadow:var(--schaduw);
  padding:1.5rem;border-top:4px solid var(--rood)}
.bewijs .label{display:inline-flex;align-items:center;gap:.4rem;font-size:.72rem;
  font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--rood)}
.bewijs blockquote{margin:.9rem 0;font-size:1.06rem;line-height:1.5;
  border-left:3px solid var(--rood);padding-left:.95rem}
.bewijs .na{color:var(--inkt-2);font-size:.95rem;margin:0}

/* de vijf gebreken */
.kaarten{display:grid;gap:1rem;margin-top:2.2rem}
@media(min-width:46rem){.kaarten{grid-template-columns:repeat(2,1fr)}}
@media(min-width:68rem){.kaarten{grid-template-columns:repeat(3,1fr)}}
.kaart{background:var(--vel);border-radius:var(--rond);padding:1.4rem;
  box-shadow:var(--schaduw);position:relative;overflow:hidden;
  transition:transform .3s var(--toon),box-shadow .3s}
.kaart:hover{transform:translateY(-4px);box-shadow:var(--schaduw-op)}
.kaart::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--kleur)}
.kaart h3{font-size:1.08rem;margin-bottom:.45rem}
.kaart p{margin:0;color:var(--inkt-2);font-size:.95rem}
.kaart .nr{position:absolute;right:1rem;top:.9rem;font-weight:700;font-size:1.5rem;
  color:var(--kleur);opacity:.22}

/* het donkere paneel: privacy */
.paneel{background:var(--diep);color:#dfece7;border-radius:26px;padding:clamp(1.6rem,4vw,2.8rem);
  position:relative;overflow:hidden}
.paneel::after{content:"";position:absolute;width:26rem;height:26rem;right:-10rem;top:-12rem;
  border-radius:50%;filter:blur(64px);opacity:.32;
  background:radial-gradient(circle,var(--groen),transparent 62%)}
.paneel>*{position:relative;z-index:1}
.paneel h2{color:#fff}
.paneel ol{list-style:none;counter-reset:n;padding:0;margin:1.6rem 0 0;
  display:grid;gap:.8rem}
@media(min-width:52rem){.paneel ol{grid-template-columns:1fr 1fr;gap:1rem 2rem}}
.paneel li{counter-increment:n;padding-left:2.5rem;position:relative;color:#b9cfc8;font-size:.98rem}
.paneel li::before{content:counter(n);position:absolute;left:0;top:-.05rem;width:1.75rem;height:1.75rem;
  border-radius:50%;display:grid;place-items:center;font-size:.82rem;font-weight:700;
  color:var(--groen);background:rgba(18,192,138,.13);box-shadow:inset 0 0 0 1px rgba(18,192,138,.3)}
.paneel b{color:#fff}

/* grenzen, twee eenvoudige kolommen */
.grens{background:var(--vel);border-radius:var(--rond);padding:1.4rem;box-shadow:var(--schaduw)}
.grens h3{font-size:1.05rem;margin-bottom:.5rem}
.grens p{margin:0;color:var(--inkt-2);font-size:.95rem}

/* ---------- afsluiting ---------- */
.slot{text-align:center;padding:clamp(3.4rem,8vw,5.5rem) 0}
.slot h2{font-size:clamp(1.8rem,4vw,2.8rem);margin-inline:auto}
.slot .lood{margin-inline:auto;text-align:center}
.adres{display:inline-block;margin-top:1.8rem;font-family:"Bricolage Grotesque",sans-serif;
  font-weight:700;font-size:clamp(1.1rem,2.8vw,1.7rem);text-decoration:none;
  padding:.85rem 1.7rem;border-radius:999px;color:#04201a;
  background:linear-gradient(96deg,var(--groen),#7ee0b6);
  transition:transform .25s var(--toon),box-shadow .25s;box-shadow:var(--schaduw)}
.adres:hover{transform:translateY(-3px);box-shadow:var(--schaduw-op)}

footer{border-top:1px solid var(--lijn);padding:1.6rem 0 2.4rem;color:var(--flauw);
  font-size:.88rem}
footer .wrap{display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;align-items:center}
footer a{color:var(--inkt-2);text-decoration:none}
footer a:hover{color:var(--inkt);text-decoration:underline}
footer span:first-child{font-weight:600;color:var(--inkt-2)}

/* ---------- losse pagina's (voorwaarden, privacy, 404) ---------- */
.doc{background:var(--vel);border-radius:26px;box-shadow:var(--schaduw);
  padding:clamp(1.6rem,4vw,3rem);margin:2rem 0 3rem;max-width:46rem}
.doc h1{font-size:clamp(1.8rem,4vw,2.6rem)}
.doc h2{font-size:1.18rem;margin:2rem 0 .5rem}
.doc p,.doc li,.doc dd{color:var(--inkt-2)}
.doc dt{font-weight:700;color:var(--inkt);margin-top:.9rem}
.doc dd{margin:.2rem 0 0}
.doc .datum{color:var(--flauw);font-size:.9rem;margin-top:.4rem}
.doc a{color:var(--groen);font-weight:600}
.terug-link{display:inline-block;margin-top:2rem;color:var(--inkt-2);text-decoration:none;
  font-weight:600}
.terug-link:hover{color:var(--inkt)}

/* ---------- beweging ---------- */
/* Zichtbaar tenzij javascript het overneemt. Valt het script uit of vuurt de
   waarnemer niet, dan staat de pagina er gewoon; verbergen doen we alleen als we
   ook kunnen laten zien. */
.op{transition:opacity .7s var(--toon),transform .7s var(--toon)}
html.js .op{opacity:0;transform:translateY(18px)}
html.js .op.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .op{opacity:1;transform:none;transition:none}
  .kaart:hover,.knop:hover,.adres:hover{transform:none}
}

/* ---------- aanleverformulier ---------- */
.formulier{background:var(--vel);border-radius:26px;box-shadow:var(--schaduw);
  padding:clamp(1.4rem,3.5vw,2.2rem);margin:2.2rem auto 0;max-width:44rem;text-align:left;
  display:grid;gap:1rem}
.veldrij{display:grid;gap:1rem}
@media(min-width:40rem){.veldrij{grid-template-columns:1fr 1fr}}
.formulier label{display:grid;gap:.4rem;font-weight:600;font-size:.92rem}
.formulier .bij{font-weight:400;color:var(--flauw);font-size:.84rem}
.formulier input[type=text],.formulier input[type=email],.formulier input:not([type]),
.formulier textarea{
  font:inherit;font-weight:400;color:var(--inkt);background:var(--papier);
  border:1px solid var(--lijn);border-radius:12px;padding:.7rem .85rem;width:100%;
  transition:border-color .2s,box-shadow .2s}
.formulier input:focus-visible,.formulier textarea:focus-visible{outline:none;
  border-color:var(--groen);box-shadow:0 0 0 3px rgba(18,192,138,.18)}
.formulier textarea{resize:vertical;min-height:5rem}
.bestandsveld input[type=file]{font:inherit;font-size:.9rem;padding:.6rem 0}
.bestandsveld input[type=file]::file-selector-button{font:inherit;font-weight:600;
  font-size:.88rem;border:0;border-radius:999px;padding:.5rem 1rem;margin-right:.8rem;
  background:var(--inkt);color:var(--papier);cursor:pointer}
.vinkje{grid-template-columns:auto 1fr;align-items:start;gap:.65rem;font-weight:400;
  font-size:.92rem;color:var(--inkt-2)}
.vinkje input{margin-top:.25rem;width:1.05rem;height:1.05rem;accent-color:var(--groen);flex:none}
.formulier .klein,.slot .klein{font-size:.86rem;color:var(--inkt-2);margin:0}
.slot .klein{margin-top:1.4rem}
.formulier a,.slot .klein a{color:var(--groen);font-weight:600}
.knop.groot{justify-content:center;padding:.85rem 1.6rem;font-size:1rem;
  background:linear-gradient(96deg,var(--groen),#7ee0b6);color:#04201a;border:0;
  cursor:pointer;font-family:inherit}
.knop.groot:disabled{opacity:.55;cursor:progress;transform:none}
.melding{margin:0;font-size:.92rem;padding:.7rem .9rem;border-radius:12px;
  background:var(--papier);color:var(--inkt-2)}
.melding.goed{background:rgba(18,192,138,.12);color:var(--inkt)}
.melding.fout{background:rgba(255,90,54,.12);color:var(--inkt)}
.cf-turnstile:empty{display:none}