:root{
  /* ---------- THEME TOKENS (Design System) ----------
     Deze CSS-variabelen (custom properties) bepalen het thema.
     Pas je kleuren/spacing/glow centraal hier aan en de hele site volgt mee.
  */
  --bg:#0b0b0b;            /* Basis achtergrond (bijna zwart) */
  --bg-2:#111;             /* Secundaire donkere laag / panelen */
  --surface:#151515;       /* Kaart/oppervlak-kleur voor cards */
  --text:#ededed;          /* Primaire tekstkleur */
  --muted:#b8b8b8;         /* Secundaire/gedempte tekstkleur */
  --line:#262626;          /* Lijnen/borders (donkere grijs) */
  --brand:#ff6a00;         /* Merk oranje (primaire accent) */
  --brand-2:#ff8c32;       /* Lichtere oranje (secundaire accent) */
  --ok:#18c37d;            /* Positieve status (groen) */
  --warn:#ffb020;          /* Waarschuwing (oranje/geel) */
  --shadow:0 10px 30px rgba(0,0,0,.45); /* Globale schaduw voor diepte */
  --radius:18px;           /* Standaard afgeronde hoeken */
  --radius-sm:12px;        /* Kleine afronding */
  --max:1200px;            /* Max breedte container */
}

/* ---------- GLOBAL RESET / BASE ---------- */
*{box-sizing:border-box}   /* Voorkomt onverwachte breedtes door padding/border mee te tellen */
html,body{height:100%}     /* Handig voor full-height achtergronden e.d. */
html{scroll-behavior:smooth} /* Smooth anchor scroll (respecteert prefers-reduced-motion via CSS elders) */

body{
  margin:0;                                                    /* Verwijder standaard marges */
  font: 15px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji','Segoe UI Emoji'; /* Systeemfont-stack voor performance/leesbaarheid */
  color:var(--text);                                           /* Primaire tekstkleur */
  background:                                                  
    radial-gradient(1200px 800px at 80% -10%, rgba(255,106,0,.15), transparent 60%), /* Subtiele brand-glow rechtsboven */
    var(--bg);                                                 /* Basiskleur daaronder */
}

/* Links */
a{color:var(--brand); text-decoration:none} /* Merk-kleur links, zonder underline */
a:hover{text-decoration:underline}          /* Onderstreep bij hover voor affordance/SEO */
.container{max-width:var(--max); margin-inline:auto; padding: 0 20px} /* Centrale lay-out container */

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex;               /* Inline knoppen met flex voor icon+tekst alignment */
  align-items:center;                /* Verticaal centreren van inhoud */
  gap:.6rem;                         /* Ruimte tussen icon/tekst */
  padding:.9rem 1.2rem;              /* Klikbare ruimte */
  border-radius:100px;               /* Pilvorm */
  font-weight:700;                   /* Duidelijke call-to-action */
  letter-spacing:.2px;               /* Subtiele tracking */
  border:1px solid transparent;      /* Voor outline-state zonder layout-shift */
  transition:.2s transform, .2s opacity, .2s background, .2s border-color; /* Snelle, vloeiende interactie */
}
.btn:active{transform:translateY(1px)} /* Mini “press” feedback */

.btn-primary{
  background:linear-gradient(135deg, var(--brand), var(--brand-2)); /* Oranje gradient */
  color:#111;                         /* Contrast op oranje */
}
.btn-primary:hover{opacity:.95}       /* Mini accent bij hover */

.btn-outline{
  border-color:var(--line);           /* Subtiele rand */
  color:var(--text);
  background:transparent;
}
.btn-outline:hover{
  border-color:var(--brand);          /* Highlight bij hover */
  color:var(--brand);
}

/* ---------- A11Y: SKIP LINK ----------
   Maakt het mogelijk om keyboardgebruikers direct naar de inhoud te springen.
*/
.skip{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; /* Visueel verbergen maar beschikbaar voor screenreaders */
}
.skip:focus{
  left:20px; top:14px; width:auto; height:auto;  /* Tijdens focus zichtbaar maken */
  background:#111; color:#fff; padding:.5rem .75rem; border-radius:8px; z-index:1000;
}

/* ---------- HEADER / NAV ---------- */
header.site{
  position:sticky; top:0; z-index:50;        /* Sticky navigatie bovenaan */
  backdrop-filter:saturate(140%) blur(8px);   /* Glas-achtig effect bij scroll */
  background:rgba(11,11,11,.6);              /* Semi-transparant voor glas-look */
  border-bottom:1px solid var(--line);        /* Subtiele onderlijn */
}
header .wrap{
  display:flex; align-items:center; justify-content:space-between; /* Logo links / nav rechts */
  gap:1rem; padding:14px 0;
}

/* Branding (logo + naam) */
.brand{display:flex; align-items:center; gap:.75rem} /* Logo + tekst netjes uitlijnen */
.brand .logo{
  width:36px; height:36px; border-radius:10px;      /* Vierkant icoon met afgeronde hoeken */
  background:
    radial-gradient(16px 16px at 60% 35%, #fff4, #0000), /* Subtiele highlight */
    conic-gradient(from 200deg at 50% 50%, var(--brand), var(--brand-2)); /* Merk-kleur draaiende gradient */
  position:relative; box-shadow:0 4px 16px rgba(255,106,0,.15); /* Glow */
}
.brand strong{font-size:1.05rem; letter-spacing:.3px} /* Merknaam */

/* Mobile nav toggle (hamburger) */
.nav-toggle{
  display:none; border:1px solid var(--line); background:#131313; color:var(--text);
  border-radius:12px; padding:.55rem .7rem;                  /* Compacte knop */
}
.nav-toggle[aria-expanded="true"]{border-color:var(--brand)} /* Accent als open */

/* Primaire navigatie */
nav{display:flex; gap:1.2rem}          /* Horizontale lijst desktop */
nav a{color:var(--muted)}              /* Gedempte kleur standaard */
nav a:hover{color:var(--text)}         /* Helder bij hover */
nav a[aria-current="page"]{color:var(--text); font-weight:700} /* Actieve sectie */

/* Mobile breakpoint */
@media (max-width: 860px){
  nav{
    display:none;                      /* Verberg desktop-nav */
    position:absolute; right:20px; top:62px; /* Dropdown positie */
    background:#0f0f0f; border:1px solid var(--line);
    border-radius:14px; padding:10px;  /* Paneeltje */
    flex-direction:column; box-shadow:var(--shadow);
  }
  nav.open{display:flex}               /* Toon bij open-state (JS toggelt .open) */
  .nav-toggle{display:inline-flex}     /* Toon hamburger-knop */
}

/* ---------- HERO ---------- */
.hero{position:relative; overflow:hidden;} /* Houd achtergrond-effect binnen hero */
.hero .bg{
  position:absolute; inset:0; pointer-events:none; /* Decoratieve laag, niet klikbaar */
  background:
    radial-gradient(400px 300px at 15% 25%, rgba(255,140,50,.12), transparent 60%), /* Glow linksboven */
    radial-gradient(600px 350px at 85% 10%, rgba(255,106,0,.18), transparent 60%);  /* Glow rechtsboven */
}
.hero .inner{padding: 72px 0 36px} /* Verticale ruimte hero */
.headline{display:grid; gap:1.25rem; grid-template-columns:1.1fr .9fr; align-items:center} /* Tekst+visual 2 kolommen */

@media (max-width: 960px){
  .headline{grid-template-columns:1fr} /* Stack op mobiel */
  .hero .inner{padding:48px 0 28px}    /* Minder verticale ruimte */
}

/* Typografie */
h1{font-size: clamp(2rem, 4.6vw, 3.2rem); line-height:1.1; margin:0} /* Responsive titel */
.accent{
  background: linear-gradient(90deg, var(--brand), var(--brand-2)); /* Kleurverloop in tekst */
  -webkit-background-clip:text; background-clip:text; color:transparent; /* Text gradient */
}
.lede{color:var(--muted); font-size:1.05rem} /* Intro/lede */

/* Hero card (rechts) */
.hero-card{
  background:linear-gradient(180deg, #171717, #121212); /* Subtiel paneelverloop */
  border:1px solid var(--line); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow);
}

/* Badges/voordelen */
.badges{display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1rem}
.badge{
  border:1px solid var(--line); color:var(--muted);
  padding:.45rem .7rem; border-radius:999px; font-size:.88rem; /* Pill chips */
}

/* CTA knoppenrij */
.cta{display:flex; gap:.8rem; align-items:center; flex-wrap:wrap; margin-top:1rem}

/* Stats (3 kolommen) */
.stats{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:14px}
.stat{border:1px dashed #2a2a2a; border-radius:var(--radius-sm); padding:12px; text-align:center}
.stat b{display:block; font-size:1.1rem}

/* Secties */
section{scroll-margin-top:80px}      /* Zorg dat anchor-links onder sticky header zichtbaar starten */
.section{padding:60px 0; border-top:1px solid var(--line)} /* Verticale ritme + subtiele scheiding */
h2{font-size: clamp(1.4rem, 3vw, 2rem); margin:0 0 10px}   /* Responsive tussenkop */
p{margin:0 0 12px}                                          /* Consistente paragraaf spacing */

/* Grid helpers */
.grid{display:grid; gap:16px}
.cols-2{grid-template-columns:1fr 1fr}                      /* Twee kolommen */
.cols-3{grid-template-columns:repeat(3,1fr)}                /* Drie kolommen */
@media (max-width: 900px){.cols-2,.cols-3{grid-template-columns:1fr}} /* Stack onder 900px */

/* Card component */
.card{
  background:linear-gradient(180deg, #171717, #111); /* Paneelverloop */
  border:1px solid var(--line); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow);
}
.card h3{margin:0 0 6px; font-size:1.15rem}
.chip-row{display:flex; flex-wrap:wrap; gap:.4rem; margin-top:10px}
.chip{font-size:.85rem; border:1px solid #2a2a2a; border-radius:999px; padding:.3rem .6rem; color:var(--muted)}

/* Tabel (vergelijking) */
.table{width:100%; border-collapse:collapse; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden}
.table th,.table td{padding:12px; border-bottom:1px solid var(--line); text-align:left}
.table th{background:#131313; color:#ddd}
.table tr:hover td{background:#121212}

/* Stappenlijst */
.steps{counter-reset: step} /* Initialiseert CSS counter */
.step{
  display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:flex-start; padding:14px 0;
}
.step:before{
  counter-increment:step; content: counter(step); /* Nummertje voor de stap */
  display:grid; place-items:center; width:36px; height:36px;
  border-radius:50%; background:linear-gradient(135deg, var(--brand), var(--brand-2)); color:#111; font-weight:800;
}

/* FAQ (optioneel, geen markup hier maar styles staan klaar) */
.faq details{background:linear-gradient(180deg, #171717, #111); border:1px solid var(--line); border-radius:var(--radius); padding:12px 14px}
.faq details+details{margin-top:10px}
.faq summary{cursor:pointer; font-weight:700}

/* Contact sectie layout + formulier */
.contact{display:grid; gap:16px; grid-template-columns:1.2fr .8fr} /* Content + aside */
@media (max-width: 900px){.contact{grid-template-columns:1fr}}     /* Stack op mobiel */
form{display:grid; gap:10px}                                        /* Verticale spacing per veld */
label{font-weight:600; font-size:.92rem}                            /* Duidelijke labels */
input, textarea, select{
  width:100%; background:#111; color:var(--text);                   /* Donker invoerveld */
  border:1px solid var(--line); border-radius:12px; padding:12px;   /* Consistente vorm */
}
input::placeholder, textarea::placeholder{color:#888}               /* Subtiele placeholder */
textarea{min-height:130px}                                          /* Fijne starthoogte */
.hint{font-size:.85rem; color:var(--muted)}                         /* Uitleg/footnote tekst */

/* Footer */
footer{border-top:1px solid var(--line); padding:26px 0 46px; color:#a2a2a2}

/* Kleine label boven kopjes (kicker) */
.kicker{
  display:inline-block; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  font-size:.74rem; color:#f0a66d; /* Warme tint */
}

/* ---------- SCROLL REVEAL (progressive enhancement) ----------
   Elementen met [data-reveal] faden subtiel in als ze in beeld komen.
   Wordt uitgeschakeld via prefers-reduced-motion (zie hieronder).
*/
[data-reveal]{opacity:0; transform: translateY(10px); transition: .6s ease}
[data-reveal].visible{opacity:1; transform:none}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}          /* Respecteer gebruikersinstelling */
  [data-reveal]{opacity:1; transform:none; transition:none}
}

/* ---------- HERO ILLUSTRATIE (decoratief) ----------
   Simuleert een laser-achtige glow + schuine lichtbalk.
*/
.illus{
  background:
    radial-gradient(160px 90px at 70% 10%, rgba(255,140,50,.35), transparent), /* Boven-glow */
    linear-gradient(180deg, #1a1a1a, #0f0f0f);                                  /* Paneel shading */
  border:1px solid var(--line); border-radius:var(--radius); aspect-ratio:16/10; /* Brede kaart */
  position:relative; overflow:hidden; box-shadow:var(--shadow)
}
.beam{
  position:absolute; inset:auto -10% 15% -10%; /* Vult horizontaal, onderin */
  height:40%; transform:skewY(-8deg);          /* Schuin effect */
  background:linear-gradient(90deg, transparent, rgba(255,122,0,.1), rgba(255,122,0,.25), rgba(255,122,0,.1), transparent) /* Lichtbaan */
}
.spark{
  position:absolute; width:6px; height:6px; border-radius:50%;    /* Puntjes/vonken */
  background:radial-gradient(circle, #fff, rgba(255,255,255,.1));  /* Kern + halo */
  box-shadow:0 0 18px 6px rgba(255,120,0,.35)                      /* Gloed */
}