@font-face{
  font-family:"Manrope";
  src:url("fonts/manrope-var.woff2")format("woff2-variations"),
      url("fonts/manrope-var.woff2")format("woff2");
  font-weight:200 800; font-display:swap; font-style:normal;
}
:root{
  --fluor:#6EED00;
  --inkt:#14180F;
  --inkt-zacht:#3B4436;
  --papier:#FFFFFF;
  --papier-warm:#F7F9F5;
  --lijn:#E3E8DE;
  --donker:#111311;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--papier); color:var(--inkt-zacht);
  font-family:"Manrope",system-ui,sans-serif; font-weight:400;
  min-height:100svh; display:grid; place-items:center; padding:2.5rem 1.5rem;
}
img,svg{max-width:100%;height:auto}
.wrap{width:100%;max-width:42rem;text-align:center}
.logo{width:min(25rem,82vw);margin:0 auto 3rem;display:block}
h1{
  font-weight:800; font-size:clamp(2.1rem,6vw,3.6rem);
  letter-spacing:-.03em; line-height:1.05; color:var(--inkt); text-wrap:balance;
}
h1 em{
  font-style:normal;
  color:var(--fluor);
  background:linear-gradient(135deg,#A2FF51 0%,#6EED00 45%,#1F4C00 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
@supports not (background-clip:text){ h1 em{-webkit-text-fill-color:var(--fluor)} }
.lead{
  margin:1.4rem auto 0; max-width:38ch;
  font-size:clamp(1rem,2.2vw,1.12rem); line-height:1.7;
}
.diensten{
  display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center;
  margin:2.5rem 0 0; list-style:none;
}
.diensten li{
  border:1.5px solid var(--fluor); background:var(--papier); border-radius:99px;
  padding:.5rem 1.1rem; font-size:.92rem; font-weight:600; color:var(--inkt);
}
.kaart{
  margin-top:3rem; background:var(--donker);
  border-radius:14px; padding:2rem 1.75rem;
}
.kaart__label{
  font-size:.76rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--fluor); font-weight:700;
}
.kaart a{
  display:inline-block; margin-top:.55rem;
  font-size:clamp(1.05rem,2.6vw,1.3rem); font-weight:700;
  color:var(--fluor); text-decoration:none;
  border-bottom:2px solid transparent; padding-bottom:.12rem;
  transition:border-color .18s ease;
}
.kaart a:hover,.kaart a:focus-visible{border-bottom-color:var(--fluor)}
.kaart a:focus-visible{outline:2px solid var(--fluor);outline-offset:5px;border-radius:2px}
.voet{
  margin-top:3.25rem; padding-top:1.4rem; border-top:1px solid var(--lijn);
  font-size:.82rem; color:#71807a;
}
.wrap>*{animation:op .5s ease both}
.wrap>*:nth-child(2){animation-delay:.06s}
.wrap>*:nth-child(3){animation-delay:.12s}
.wrap>*:nth-child(4){animation-delay:.18s}
.wrap>*:nth-child(5){animation-delay:.24s}
@keyframes op{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.wrap>*{animation:none}}