:root{
  --blauw:#0081ff; --blauw-donker:#0a4fb0; --inkt:#0f1b2d; --tekst:#34445c; --zacht:#6b7a90;
  --achter:#ffffff; --grijs:#f3f6fb; --lijn:#e1e8f2; --donker:#0b1626; --kaart:#ffffff;
  --straal:16px; --schaduw:0 10px 30px rgba(15,27,45,.08);
}
@media (prefers-color-scheme:dark){
  :root{ --inkt:#eaf1fb; --tekst:#b7c4d8; --zacht:#8393ab; --achter:#0b1626; --grijs:#0f1e33; --lijn:#1d3050; --kaart:#122540; --schaduw:0 10px 30px rgba(0,0,0,.35); }
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font:17px/1.65 "Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;color:var(--tekst);background:var(--achter)}
img{max-width:100%;height:auto}
a{color:var(--blauw)}
.wrap{width:min(1120px,100% - 32px);margin-inline:auto}
h1,h2,h3{color:var(--inkt);line-height:1.15;margin:0 0 .5em;letter-spacing:-.02em}
h1{font-size:clamp(2.1rem,5vw,3.6rem)}
h2{font-size:clamp(1.6rem,3.2vw,2.3rem)}
h3{font-size:1.2rem;letter-spacing:-.01em}
p{margin:0 0 1em}
.lead{font-size:1.2rem;color:var(--tekst);max-width:46rem}
.oog{font-size:.8rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--blauw);margin-bottom:.8rem}
.accent{background:linear-gradient(100deg,var(--blauw),#00c2ff);-webkit-background-clip:text;background-clip:text;color:transparent}

/* kop */
.kop{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--achter) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--lijn)}
.kop-in{display:flex;align-items:center;justify-content:space-between;min-height:68px}
.merk{display:flex;align-items:center;background:#fff;border-radius:10px;padding:4px 8px}
.merk img{display:block;height:44px;width:auto}
.menu{display:flex;align-items:center;gap:6px}
.menu a{color:var(--inkt);text-decoration:none;font-weight:600;font-size:.95rem;padding:8px 14px;border-radius:999px}
.menu a:hover,.menu a.actief{background:var(--grijs)}
.menu a.knop{color:#fff}
.menu a.knop:hover{background:var(--blauw-donker)}
.menuknop,.hamburger{display:none}

/* knoppen */
.knop{display:inline-block;background:var(--blauw);color:#fff;text-decoration:none;font-weight:700;padding:13px 24px;border-radius:999px;box-shadow:0 8px 20px rgba(0,129,255,.28);transition:transform .15s,background .15s}
.knop:hover{background:var(--blauw-donker);transform:translateY(-1px)}
.knop-klein{padding:8px 18px;box-shadow:none;margin-left:6px}
.knop-licht{background:transparent;color:var(--inkt);box-shadow:inset 0 0 0 2px var(--lijn)}
.knop-licht:hover{background:var(--grijs)}
.knop-wit{background:#fff;color:var(--blauw-donker);box-shadow:none}
.knop-wit:hover{background:#eaf3ff}
.link{font-weight:700;text-decoration:none}

/* hero */
.hero{position:relative;overflow:hidden;padding:72px 0 80px;background:radial-gradient(900px 400px at 85% -10%,rgba(0,129,255,.18),transparent 70%),radial-gradient(600px 300px at 0% 100%,rgba(0,194,255,.10),transparent 70%)}
.hero-in{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.acties{display:flex;flex-wrap:wrap;gap:12px;margin:28px 0}
.tags{list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:0}
.tags li{font-size:.82rem;font-weight:600;color:var(--tekst);background:var(--grijs);border:1px solid var(--lijn);padding:4px 12px;border-radius:999px}
.venster{background:var(--kaart);border:1px solid var(--lijn);border-radius:var(--straal);box-shadow:var(--schaduw);overflow:hidden;transform:rotate(1.2deg)}
.venster-balk{display:flex;align-items:center;gap:6px;padding:10px 14px;background:var(--grijs);border-bottom:1px solid var(--lijn)}
.venster-balk i{width:10px;height:10px;border-radius:50%;background:var(--lijn)}
.venster-balk span{margin-left:8px;font-size:.8rem;font-weight:700;color:var(--zacht)}
.venster-body{padding:18px;display:grid;gap:10px}
.rij{display:flex;align-items:center;gap:8px;font-size:.9rem;color:var(--inkt);margin-bottom:6px}
.rij b{margin-right:auto}
.chip{font-size:.75rem;font-weight:700;padding:3px 10px;border-radius:999px;background:var(--grijs);color:var(--zacht);border:1px solid var(--lijn)}
.chip-ok{background:rgba(0,129,255,.12);color:var(--blauw);border-color:rgba(0,129,255,.35)}
.stap{display:flex;align-items:center;gap:10px;font-size:.92rem;padding:10px 12px;border-radius:10px;background:var(--grijs);color:var(--zacht)}
.stap em{width:12px;height:12px;border-radius:50%;border:2px solid var(--lijn);flex:none}
.stap.klaar{color:var(--inkt)}.stap.klaar em{background:#22c55e;border-color:#22c55e}
.stap.bezig{color:var(--inkt)}.stap.bezig em{border-color:var(--blauw);border-top-color:transparent;animation:draai 1s linear infinite}
.balk{height:8px;border-radius:99px;background:var(--grijs);overflow:hidden;margin-top:6px}
.balk span{display:block;height:100%;width:62%;background:linear-gradient(90deg,var(--blauw),#00c2ff);border-radius:99px}
.onderschrift{text-align:center;font-size:.78rem;color:var(--zacht);margin-top:14px}
@keyframes draai{to{transform:rotate(360deg)}}

/* blokken */
.blok{padding:84px 0}
.blok-grijs{background:var(--grijs)}
.blok-donker{background:var(--donker);color:#b7c4d8}
.blok-donker h2,.blok-donker h3{color:#fff}.blok-donker .lead{color:#b7c4d8}
.kop-blok{max-width:44rem;margin-bottom:40px}
.paginakop{padding:72px 0 48px;background:linear-gradient(180deg,var(--grijs),transparent)}
.kaarten{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.kaarten-2{grid-template-columns:repeat(2,1fr)}
.kaart{background:var(--kaart);border:1px solid var(--lijn);border-radius:var(--straal);padding:28px;box-shadow:var(--schaduw)}
.kaart-donker{background:#112440;border-color:#1d3355;box-shadow:none}
.kaart p:last-child{margin:0}
.icoon{width:48px;height:48px;border-radius:12px;background:rgba(0,129,255,.12);display:grid;place-items:center;margin-bottom:16px}
.icoon svg{width:26px;height:26px;fill:none;stroke:var(--blauw);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.twee{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.stack{display:grid;gap:12px}
.stack div{background:var(--kaart);border:1px solid var(--lijn);border-left:4px solid var(--blauw);border-radius:12px;padding:16px 20px}
.stack b{display:block;color:var(--inkt)}.stack span{font-size:.92rem;color:var(--zacht)}
.stappen,.route{list-style:none;padding:0;margin:0;display:grid;gap:18px;counter-reset:s}
.stappen{grid-template-columns:repeat(4,1fr)}
.route{grid-template-columns:repeat(5,1fr)}
.stappen li,.route li{counter-increment:s;background:var(--kaart);border:1px solid var(--lijn);border-radius:var(--straal);padding:22px}
.stappen li::before,.route li::before{content:counter(s);display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--blauw);color:#fff;font-weight:700;margin-bottom:12px}
.stappen b,.route b{display:block;color:var(--inkt);margin-bottom:4px}
.stappen span,.route span{font-size:.92rem;color:var(--zacht)}
.groot{font-size:1.6rem;font-weight:700;text-decoration:none}

/* cta */
.cta{background:linear-gradient(120deg,var(--blauw-donker),var(--blauw));color:#e6f1ff;text-align:center;padding:72px 0}
.cta h2{color:#fff;max-width:40rem;margin-inline:auto}
.cta p{max-width:36rem;margin:0 auto 24px}

/* voet */
.voet{background:var(--donker);color:#9fb0c8;padding:48px 0 0;font-size:.95rem}
.voet strong{color:#fff;display:block;margin-bottom:8px}
.voet a{color:#9fb0c8;text-decoration:none}.voet a:hover{color:#fff}
.voet-in{display:grid;grid-template-columns:2fr 1fr 1fr;gap:32px}
.voet-onder{border-top:1px solid #1d3355;margin-top:32px;padding:18px 0;font-size:.85rem}

/* onthullen */
.onthul{opacity:0;transform:translateY(16px);transition:opacity .6s,transform .6s}
.onthul.zichtbaar{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.onthul{opacity:1;transform:none;transition:none}.venster{transform:none}}

@media (max-width:900px){
  .hero-in,.twee{grid-template-columns:1fr}
  .kaarten,.kaarten-2,.stappen,.route{grid-template-columns:1fr 1fr}
  .voet-in{grid-template-columns:1fr}
  .hamburger{display:grid;place-items:center;width:44px;height:44px;cursor:pointer;border-radius:10px}
  .hamburger span,.hamburger span::before,.hamburger span::after{display:block;width:22px;height:2px;background:var(--inkt);position:relative;content:""}
  .hamburger span::before{position:absolute;top:-7px}.hamburger span::after{position:absolute;top:7px}
  .menu{display:none;position:absolute;left:0;right:0;top:68px;flex-direction:column;align-items:stretch;background:var(--achter);border-bottom:1px solid var(--lijn);padding:12px 16px}
  .menuknop:checked~.menu{display:flex}
  .menu a{padding:12px 14px}.knop-klein{margin:6px 0 0;text-align:center}
}
@media (max-width:560px){
  .kaarten,.kaarten-2,.stappen,.route{grid-template-columns:1fr}
  .blok{padding:56px 0}.hero{padding:48px 0 56px}
}

/* logo: het blauwe rondje met de uitknop */
.hero-beeld{position:relative}
.hero-orb{position:absolute;right:-30px;top:-70px;width:220px;height:220px;z-index:2;filter:drop-shadow(0 18px 28px rgba(0,129,255,.35));animation:zweef 6s ease-in-out infinite}
.hero-beeld::before{content:"";position:absolute;inset:-40px -20px -20px 20%;background:radial-gradient(closest-side,rgba(94,174,232,.35),transparent);z-index:0}
.venster{position:relative;z-index:1}
.voet-merk{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.voet-merk strong{margin:0}
@keyframes zweef{50%{transform:translateY(-8px)}}
@media (prefers-reduced-motion:reduce){.hero-orb{animation:none}}
@media (max-width:900px){.hero-orb{width:120px;height:120px;right:0;top:-60px}}

/* tickets */
.uitleg{list-style:none;counter-reset:u;padding:0;margin:0 0 1em;display:grid;gap:16px}
.uitleg li{counter-increment:u;position:relative;padding-left:48px}
.uitleg li::before{content:counter(u);position:absolute;left:0;top:0;width:34px;height:34px;border-radius:50%;background:var(--blauw);color:#fff;font-weight:700;display:grid;place-items:center}
.uitleg b{color:var(--inkt)}
.ticket{background:var(--kaart);border:1px solid var(--lijn);border-radius:var(--straal);box-shadow:var(--schaduw);overflow:hidden}
.ticket-body{padding:16px;display:grid;gap:12px}
.shot{width:100%;height:auto;display:block}
.gereedschap{display:flex;gap:8px;flex-wrap:wrap}
.gereedschap span{font-size:.78rem;font-weight:700;padding:4px 12px;border-radius:999px;background:var(--grijs);border:1px solid var(--lijn);color:var(--zacht)}
.gereedschap span:nth-child(2){background:rgba(229,72,77,.12);color:#e5484d;border-color:rgba(229,72,77,.4)}
.veld{background:var(--grijs);border-radius:10px;padding:10px 14px;font-size:.9rem}
.veld b{display:block;color:var(--inkt);font-size:.8rem}.veld span{color:var(--tekst)}
.ticket-knop{justify-self:end;background:var(--blauw);color:#fff;font-weight:700;font-size:.9rem;padding:9px 18px;border-radius:999px}

/* formulier */
.formulier{display:grid;gap:18px;max-width:760px}
.rij-2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.veld-invoer label{display:block;font-weight:600;font-size:.9rem;color:var(--inkt);margin-bottom:6px}
.veld-invoer input,.veld-invoer textarea{width:100%;font:inherit;color:var(--inkt);background:var(--achter);border:1px solid var(--lijn);border-radius:12px;padding:12px 14px}
.veld-invoer input:focus,.veld-invoer textarea:focus{outline:2px solid var(--blauw);outline-offset:1px;border-color:var(--blauw)}
.veld-invoer textarea{resize:vertical;min-height:140px}
.fout{display:block;color:#d6336c;font-size:.85rem;margin-top:4px}
.fout:empty{display:none}
.val{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.formulier-onder{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.formulier-onder .knop{border:0;cursor:pointer;font:inherit;font-weight:700}
.klein{font-size:.85rem;color:var(--zacht);margin:0}
.melding{max-width:760px;border-radius:12px;padding:16px 20px;margin-bottom:18px}
.melding-ok{background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.4);color:var(--inkt)}
.melding-fout{background:rgba(214,51,108,.1);border:1px solid rgba(214,51,108,.4);color:var(--inkt)}
@media (max-width:640px){.rij-2{grid-template-columns:1fr}}

/* Ticketstroom (5 stappen): op tablet en telefoon onder elkaar, het nummer links naast de tekst. */
@media (max-width:900px){
  .route-vloeit{grid-template-columns:1fr}
  .route-vloeit li{display:grid;grid-template-columns:34px 1fr;column-gap:14px;align-items:start}
  .route-vloeit li::before{margin-bottom:0;grid-row:1 / span 2}
}