/* Gegenereerd door build_wp.py uit src/page.html. Niet met de hand wijzigen. */
:root{
  --navy:#202945;
  --navy-deep:#161c30;
  --navy-card:#1b2340;
  --line:#2f3a5e;
  --neon:#72c7d5;
  --neon-bright:#a3e6ef;
  --magenta:#af5396;
  --ink:#ffffff;
  --ink-soft:#a3abc2;
  --ink-quiet:#7b8399;
  --warn:#ffcf6b;

  --display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --body:"Barlow","Helvetica Neue",Arial,sans-serif;

  --step-0:1rem;
  --step-1:1.1875rem;
  --step-2:1.5rem;
  --step-3:2.125rem;
  --step-4:3rem;

  --gap:clamp(1.25rem,3vw,2rem);
  --pad:clamp(1.25rem,4vw,2.5rem);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--navy);
  color:var(--ink);
  font-family:var(--body);
  font-size:var(--step-0);
  line-height:1.6;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
h1,h2,h3{margin:0;text-wrap:balance}
p{margin:0}
a{color:var(--neon)}

.wrap{width:100%;max-width:860px;margin:0 auto;padding-inline:var(--pad)}

/* ---------- hero ---------- */
.hero{position:relative;padding:clamp(2rem,7vw,4.5rem) 0 clamp(1.5rem,4vw,2.5rem);overflow:hidden}
.hero::before{
  content:"";position:absolute;inset:-30% -20% auto -20%;height:150%;
  background:
    radial-gradient(50% 42% at 50% 46%, color-mix(in srgb, var(--magenta) 22%, transparent) 0%, transparent 72%);
  filter:blur(40px);
  pointer-events:none;
}
.hero .wrap{position:relative}
.hero h1{margin:0 auto;max-width:min(540px,92vw)}
.hero h1 img{margin:0 auto;width:100%}

.stamp{
  margin-top:clamp(1rem,3vw,1.75rem);
  display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem 2rem;
  font-family:var(--display);
  font-variation-settings:"wdth" 112;
  font-style:italic;font-weight:800;
  font-size:clamp(.9375rem,2.6vw,1.125rem);
  text-transform:uppercase;letter-spacing:.06em;
  color:var(--neon);
  font-variant-numeric:tabular-nums;
}
.stamp b{color:var(--ink);font-weight:800}
.stamp span{color:var(--neon)}

/* ---------- rule ---------- */
.rule{border:0;height:2px;margin:0;background:linear-gradient(90deg,transparent,var(--neon) 18%,var(--magenta) 82%,transparent);opacity:.55}

/* ---------- sections ---------- */
section{padding-block:clamp(2rem,6vw,3.25rem)}
.lede{display:flex;flex-direction:column;gap:1rem}
.lede p{max-width:62ch}
.lede p{font-size:var(--step-1);color:#dfe3ee}
.lede p.small{font-size:var(--step-0);color:var(--ink-soft)}

h2{
  font-family:var(--display);
  font-variation-settings:"wdth" 118;
  font-style:italic;font-weight:900;
  font-size:var(--step-3);
  line-height:1;
  text-transform:uppercase;
  letter-spacing:-.01em;
  margin-bottom:1.25rem;
}
h2 em{font-style:italic;color:var(--neon)}

.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--gap);list-style:none;padding:0;margin:0}
.facts li{border:1px solid var(--line);border-top:3px solid var(--neon);background:var(--navy-deep);padding:1.125rem 1.25rem;display:flex;flex-direction:column;gap:.375rem}
.facts dt,.facts .k{
  font-family:var(--display);font-variation-settings:"wdth" 100;
  font-weight:700;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--neon)
}
.facts .v{font-size:var(--step-1);font-weight:600;line-height:1.3}
.facts .n{color:var(--ink-soft);font-size:.9375rem}

/* ---------- form ---------- */
form{background:var(--navy-card);border:1px solid var(--line);padding:var(--pad);display:flex;flex-direction:column;gap:clamp(1.5rem,4vw,2.25rem)}
fieldset{border:0;padding:0;margin:0;display:flex;flex-direction:column;gap:.875rem}
legend{
  font-family:var(--display);font-variation-settings:"wdth" 100;
  font-weight:800;font-size:.8125rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--neon);padding:0;margin-bottom:.25rem;width:100%;
  display:flex;align-items:center;gap:.625rem;
}
legend::after{content:"";flex:1;height:1px;background:var(--line)}
.hint{color:var(--ink-soft);font-size:.9375rem;margin-top:-.375rem}

.row{display:grid;gap:.875rem}
@media (min-width:34rem){
  .row.two{grid-template-columns:1fr 1fr}
  .row.pc{grid-template-columns:minmax(9rem,.5fr) 1fr}
}
label{display:flex;flex-direction:column;gap:.375rem;font-size:.875rem;color:var(--ink-soft);font-weight:500}
.lbl{display:block}
label .req{color:var(--neon)}
input[type=text],input[type=email],input[type=tel],select,textarea{
  font-family:var(--body);font-size:1rem;color:var(--ink);
  background:var(--navy-deep);border:1px solid var(--line);border-radius:3px;
  padding:.6875rem .75rem;width:100%;
}
textarea{resize:vertical;min-height:5.5rem}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--neon) 50%),linear-gradient(135deg,var(--neon) 50%,transparent 50%);background-position:calc(100% - 18px) 52%,calc(100% - 13px) 52%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:2.5rem}
input::placeholder,textarea::placeholder{color:var(--ink-quiet)}
:is(input,select,textarea):focus-visible,button:focus-visible,a:focus-visible{
  outline:2px solid var(--neon);outline-offset:2px;
  box-shadow:0 0 0 4px color-mix(in srgb, var(--neon) 22%, transparent);
}
input[aria-invalid=true]{border-color:#e2748f}

#code{
  font-family:var(--display);font-variation-settings:"wdth" 110;font-weight:800;
  text-transform:uppercase;letter-spacing:.16em;font-size:1.25rem;max-width:14rem;
}
.codestate{font-size:.9375rem;min-height:1.4em;font-weight:600}
.codestate[data-ok=yes]{color:var(--neon-bright)}
.codestate[data-ok=no]{color:#f0919f}

.choices{display:flex;flex-wrap:wrap;gap:.625rem}
.choice{position:relative}
.choice input{position:absolute;inset:0;opacity:0;cursor:pointer;margin:0}
.choice span{
  display:block;border:1px solid var(--line);background:var(--navy-deep);
  padding:.5625rem .9375rem;font-size:.9375rem;color:#d6dae7;
  transition:border-color .15s,color .15s,background .15s;
}
.choice input:checked + span{border-color:var(--neon);color:var(--ink);background:color-mix(in srgb, var(--neon) 12%, var(--navy-deep))}
.choice input:focus-visible + span{outline:2px solid var(--neon);outline-offset:2px}

[hidden]{display:none !important}

button.send{
  font-family:var(--display);font-variation-settings:"wdth" 112;
  font-style:italic;font-weight:900;font-size:1.1875rem;text-transform:uppercase;letter-spacing:.04em;
  background:var(--neon);color:#0f1526;border:0;border-radius:3px;
  padding:.9375rem 1.75rem;cursor:pointer;align-self:flex-start;
  box-shadow:0 0 0 rgba(114,199,213,0);transition:box-shadow .2s,transform .1s;
}
button.send:hover{box-shadow:0 6px 28px color-mix(in srgb, var(--neon) 40%, transparent)}
button.send:active{transform:translateY(1px)}
.sendrow{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.25rem}
.sendhint{color:var(--ink-quiet);font-size:.875rem;max-width:34ch}
button.send:disabled{background:#39426a;color:#8c94ab;cursor:not-allowed;box-shadow:none}
button.send:disabled:hover{box-shadow:none}
.fout{display:block;color:#f0919f;font-size:.875rem;font-weight:500}
.melding{border:1px solid #f0919f;border-left:3px solid #f0919f;background:color-mix(in srgb, #f0919f 8%, var(--navy-deep));padding:.75rem 1rem;margin-bottom:1.25rem;max-width:62ch}
.legal{color:var(--ink-quiet);font-size:.8125rem;max-width:62ch;line-height:1.55}

/* ---------- done ---------- */
.done{background:var(--navy-card);border:1px solid var(--neon);border-top:3px solid var(--neon);padding:var(--pad);display:flex;flex-direction:column;gap:1rem}
.done h2{margin-bottom:0}
.done dl{margin:0;display:grid;gap:.5rem .875rem;grid-template-columns:auto 1fr;font-size:.9375rem}
.done dt{color:var(--ink-quiet)}
.done dd{margin:0;color:var(--ink)}
.done button{background:none;border:1px solid var(--line);color:var(--ink-soft);font-family:var(--body);font-size:.875rem;padding:.5rem .875rem;border-radius:3px;cursor:pointer;align-self:flex-start}

footer{border-top:1px solid var(--line);padding-block:2rem;color:var(--ink-quiet);font-size:.875rem}
footer .wrap{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;justify-content:space-between}

/* de QR wordt met een telefoon gescand, dus daar mag het logo tot de rand */
@media (max-width:33.9375rem){
  .hero .stamp{padding-inline:var(--pad);font-size:.9375rem;flex-direction:column;align-items:center;text-align:center;gap:.25rem}
  .hero{padding-top:1.25rem}
}

/* ---------- vrije blokken uit de pagina-editor ----------
   Alles wat je in WordPress als gewone alinea, kop of lijst typt, staat direct
   in de body. Deze regels geven dat dezelfde breedte en ritme als de rest, zodat
   je teksten kunt aanpassen zonder iets van opmaak te weten. */
.cg-body > :is(p,h2,h3,h4,ul,ol,dl,figure,blockquote,table,.wp-block-group,.wp-block-columns,.wp-block-buttons){
  width:100%;max-width:860px;margin-inline:auto;padding-inline:var(--pad);
}
.cg-body > :is(p,ul,ol){margin-block:0 1rem;color:#dfe3ee;max-width:none}
.cg-body > :is(p,ul,ol) > *{max-width:62ch}
.cg-body > p{max-width:calc(62ch + 2 * var(--pad))}
.cg-body > h2{
  font-family:var(--display);font-variation-settings:"wdth" 118;
  font-style:italic;font-weight:900;font-size:var(--step-3);line-height:1;
  text-transform:uppercase;letter-spacing:-.01em;
  margin-block:clamp(2rem,5vw,3rem) 1.25rem;color:var(--ink);
}
.cg-body > h3{font-size:1rem;font-weight:600;color:var(--ink);margin-block:1.25rem .25rem}
.cg-body > h4{font-size:.9375rem;font-weight:600;color:var(--ink-soft);margin-block:1rem .25rem}
.cg-body > ul{padding-left:1.25rem}
.cg-body > :first-child{margin-top:clamp(1.5rem,4vw,2.5rem)}
.cg-body > :last-child{margin-bottom:clamp(1.5rem,4vw,2.5rem)}

/* ---------- gesloten ---------- */
.closed{display:flex;flex-direction:column;gap:1rem;align-items:flex-start}
.closed>*{max-width:56ch;width:100%}
.closed .box{border:1px solid var(--line);border-left:3px solid var(--warn);background:var(--navy-deep);padding:1.25rem 1.5rem;display:flex;flex-direction:column;gap:.75rem}

.faq{margin:0;display:grid;gap:.75rem;max-width:70ch}
.faq dt{font-weight:600;color:var(--ink);font-size:1rem}
.faq dd{margin:0 0 .5rem;color:var(--ink-soft);font-size:.9375rem}
.faq dd:last-child{margin-bottom:0}

@media (prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important}}