:root{
  --zwart:#111111;
  --donker:#1f1f1f;
  --kaart:#2b2b2b;
  --lime:#b5d334;
  --lime-donker:#98b51c;
  --wit:#ffffff;
  --grijs:#5a5a5a;
  --lijn:#e6e6e6;
  --mw:1140px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;font-family:"Open Sans",system-ui,sans-serif;font-size:1rem;line-height:1.65;color:#222;background:var(--wit)}
h1,h2,h3{font-family:"Montserrat",sans-serif;font-weight:800;text-transform:uppercase;line-height:1.1;margin:0 0 .6em;letter-spacing:.01em}
h1{font-size:clamp(1.9rem,4.6vw,3rem)}
h2{font-size:clamp(1.6rem,3.6vw,2.3rem)}
h3{font-size:1.15rem;margin-bottom:.9em}
p{margin:0 0 1em;max-width:66ch}
a{color:inherit}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--lime);outline-offset:3px}
.wrap{max-width:var(--mw);margin:0 auto;padding:0 clamp(1rem,4vw,2rem)}
.sub{color:var(--lime);font-family:"Montserrat",sans-serif;font-weight:800;text-transform:uppercase;font-size:1.05rem;margin:-.4em 0 1.2em}
ul.check{list-style:none;padding:0;margin:0;display:grid;gap:.55rem}
ul.check li{padding-left:1.6rem;position:relative}
ul.check li::before{content:"";position:absolute;left:0;top:.45em;width:.95rem;height:.95rem;background:var(--lime);clip-path:polygon(14% 44%,0 62%,40% 100%,100% 18%,84% 4%,40% 68%)}

.knop{display:inline-block;text-decoration:none;font-family:"Montserrat",sans-serif;font-weight:800;text-transform:uppercase;font-size:.95rem;padding:1.05rem 2rem;border:0;cursor:pointer;background:var(--wit);color:var(--zwart);text-align:center}
.knop.lime{background:var(--lime);color:var(--zwart)}
.knop.lime:hover{background:var(--lime-donker)}
.knop.zwart{background:var(--zwart);color:var(--lime);font-size:.8rem;padding:.7rem 1.4rem;text-transform:none;font-weight:600}
.knop.zwart:hover{background:#000}
.knop:hover{background:#f0f0f0}
.knop.lime:hover,.knop.zwart:hover{color:inherit}
.knop.lime:hover{color:var(--zwart)}

/* nav */
.top{background:var(--zwart);color:var(--wit);position:sticky;top:0;z-index:20;border-bottom:1px solid #000}
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:4rem;gap:1rem}
.logo{display:flex;align-items:baseline;gap:.4rem;text-decoration:none;font-family:"Montserrat",sans-serif;font-weight:800;font-size:1.7rem;letter-spacing:-.03em;white-space:nowrap}
.logo b{color:var(--lime);font-size:1.25em;letter-spacing:-.05em}
.logo small{font-size:.5em;font-weight:700;letter-spacing:0;color:#ddd}
.nav{display:flex;gap:1.5rem;font-size:.85rem;font-weight:600}
.nav a{text-decoration:none;color:var(--wit)}
.nav a:hover{color:var(--lime)}
@media (max-width:760px){.nav a:not(.bel){display:none}.nav .bel{color:var(--lime)}}

/* hero */
.hero{position:relative;color:var(--wit);background:#222 url("hero.jpg") center/cover;padding:clamp(3rem,8vw,6rem) 0 clamp(4rem,9vw,7rem);overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.82),rgba(0,0,0,.55))}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3.5rem;background:var(--lime);clip-path:polygon(0 100%,100% 45%,100% 100%)}
.hero .wrap{position:relative}
.hero h1{margin-bottom:1.2rem}
.hero .check{grid-template-columns:1fr 1fr;gap:.5rem 2rem;max-width:56rem;font-size:.95rem}
@media (max-width:700px){.hero .check{grid-template-columns:1fr}}
.hero .acties{display:grid;grid-template-columns:1fr 1fr;gap:1rem;max-width:56rem;margin-top:2.2rem}
@media (max-width:700px){.hero .acties{grid-template-columns:1fr}}
.hero .knop{box-shadow:0 8px 24px rgba(0,0,0,.35)}

/* split white */
.split{display:grid;grid-template-columns:1fr 1fr;align-items:stretch}
@media (max-width:820px){.split{grid-template-columns:1fr}}
.split .tekst{padding:clamp(2.5rem,6vw,5rem) clamp(1rem,5vw,4rem);display:flex;flex-direction:column;justify-content:center}
.split .beeld{background:#2a2a2a;min-height:20rem;overflow:hidden}
.split .beeld img{width:100%;height:100%;object-fit:cover;object-position:center 45%;display:block}
.split .tekst p{font-size:.95rem;color:#333}
.split strong{color:var(--lime-donker)}

/* dark cards */
.donker{background:var(--zwart);color:var(--wit);padding:clamp(3rem,7vw,5.5rem) 0;text-align:center}
.donker h2{margin-bottom:.15em}
.donker .sub{font-size:clamp(1.3rem,3vw,1.9rem);margin-bottom:2.5rem}
.kaarten{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;text-align:left}
@media (max-width:820px){.kaarten{grid-template-columns:1fr}}
.kaart{background:var(--kaart);padding:1.8rem 1.6rem 2rem;display:flex;flex-direction:column;gap:.4rem}
.kaart p{font-size:.95rem;flex:1;color:#ddd}

/* lime diagonal */
.lime-sectie{display:grid;grid-template-columns:1.05fr 1fr}
@media (max-width:820px){.lime-sectie{grid-template-columns:1fr}}
.lime-sectie .links{background:var(--lime);padding:clamp(2.5rem,6vw,4.5rem) clamp(1rem,5vw,4rem);clip-path:polygon(0 0,100% 0,88% 100%,0 100%);margin-right:-1px}
@media (max-width:820px){.lime-sectie .links{clip-path:polygon(0 0,100% 0,100% 90%,0 100%)}}
.lime-sectie .links h2{color:var(--wit);font-size:clamp(1.8rem,4vw,2.6rem);text-shadow:0 1px 2px rgba(0,0,0,.08)}
.lime-sectie .rechts{padding:clamp(2.5rem,6vw,4.5rem) clamp(1rem,5vw,4rem)}
.bel-groot{font-family:"Montserrat",sans-serif;font-weight:800;font-size:clamp(2.2rem,6vw,3.6rem);color:var(--zwart);line-height:1;text-decoration:none;display:block;margin:.2em 0 .4em;letter-spacing:-.02em}
.bel-groot:hover{color:var(--lime-donker)}
.contactregels{list-style:none;padding:0;margin:0;display:grid;gap:.35rem;font-size:.95rem}
.contactregels b{display:inline-block;min-width:6.5rem;font-weight:700}

/* features */
.features{padding:clamp(3rem,7vw,5.5rem) 0}
.features h2{text-align:center}
.features>.wrap>p{text-align:center;margin:0 auto 3rem;max-width:60ch;font-size:.95rem}
.grid6{display:grid;grid-template-columns:1fr 1fr;gap:2.2rem 3.5rem}
@media (max-width:820px){.grid6{grid-template-columns:1fr}}
.feat{display:grid;grid-template-columns:3rem 1fr;gap:1.1rem;align-items:start}
.feat svg{width:2.6rem;height:2.6rem;color:var(--lime-donker)}
.feat h3{font-size:.95rem;text-transform:none;font-weight:800;margin:0 0 .35em}
.feat p{font-size:.92rem;margin:0;color:#333}

/* inkoop */
.inkoop{background:#f5f5f5;padding:clamp(3rem,7vw,5.5rem) 0}
.inkoop .wrap{display:grid;grid-template-columns:1fr 1fr;gap:3rem}
@media (max-width:820px){.inkoop .wrap{grid-template-columns:1fr}}
.inkoop ol{padding-left:1.2rem;margin:0 0 1.5rem;font-size:.95rem}
.inkoop ol li{margin-bottom:.6rem}
form{display:grid;gap:.9rem}
label{display:grid;gap:.3rem;font-size:.85rem;font-weight:700}
input,textarea{font:inherit;font-size:.95rem;padding:.7rem .8rem;border:1px solid #cfcfcf;background:#fff;width:100%}
input:focus,textarea:focus{border-color:var(--zwart)}
textarea{min-height:7rem;resize:vertical}
.rij{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
@media (max-width:560px){.rij{grid-template-columns:1fr}}
.hp{position:absolute;left:-9999px}

/* voordelen */
.voordelen{background:linear-gradient(180deg,#0f2a12,#243a12 60%,#3f5a1a);color:var(--wit);padding:clamp(3rem,7vw,5.5rem) 0}
.voordelen h2{text-transform:none;font-weight:800;font-size:clamp(1.8rem,4vw,2.6rem)}
.voordelen .twee{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}
@media (max-width:820px){.voordelen .twee{grid-template-columns:1fr}}
.logoblok{background:var(--zwart);aspect-ratio:16/10;display:flex;align-items:center;justify-content:center}
.logoblok .logo{font-size:clamp(2.6rem,7vw,4.5rem)}
.voordelen .check{gap:.9rem;font-size:1rem}

/* footer */
footer{background:var(--zwart);color:#ddd;padding:clamp(3rem,7vw,5rem) 0 2.5rem;font-size:.9rem}
footer h2{color:var(--wit);text-align:center;max-width:24ch;margin:0 auto 3.5rem;font-size:clamp(1.4rem,3vw,1.9rem)}
.kolommen{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem}
@media (max-width:820px){.kolommen{grid-template-columns:1fr 1fr}}
@media (max-width:500px){.kolommen{grid-template-columns:1fr}}
footer h3{color:var(--lime);font-size:.95rem}
footer ul{list-style:none;padding:0;margin:0;display:grid;gap:.4rem}
footer a{color:#ddd}
footer a:hover{color:var(--lime)}
footer p{max-width:none;margin:0 0 .5em}
.copy{border-top:1px solid #333;margin-top:3rem;padding-top:1.5rem;color:#888;font-size:.8rem;display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem}

/* subpages */
.pagina{padding:clamp(3rem,7vw,5rem) 0}
.pagina h1{font-size:clamp(1.6rem,4vw,2.4rem)}
.pagina h2{font-size:1.15rem;margin-top:2rem}
.pagina p{font-size:.95rem}
input[type=file]{padding:.5rem;background:#fff;font-weight:400}
.fotostatus{font-size:.85rem;color:var(--grijs);margin:-.3rem 0 0;min-height:1.2em}