@font-face{font-family:'Helvetica Rounded';src:url(fonts/helvetica-rounded-bold.otf);font-weight:700;font-display:swap}
@font-face{font-family:'Helvetica';src:url(fonts/Helvetica.ttf);font-weight:400;font-display:swap}
@font-face{font-family:'Helvetica';src:url(fonts/Helvetica-Bold.ttf);font-weight:700;font-display:swap}
@font-face{font-family:'Lemon Milk';src:url(fonts/LEMONMILK-Bold.otf);font-weight:700;font-display:swap}

:root{
  --blauw:#3aaffc;--blauw-hover:#1c93e6;--oranje:#ff5c00;
  --inkt:#0e2a3d;--inkt-diep:#0a1d2b;--grijs:#516673;--lijn:#cad0d4;--vlak:#f3f4f5;
  --display:'Helvetica Rounded','Helvetica',Arial,sans-serif;
  --body:'Helvetica',Arial,sans-serif;
  --accent:'Lemon Milk','Helvetica Rounded',Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#fff;color:var(--inkt);font:400 1.0625rem/1.55 var(--body)}
img{max-width:100%;height:auto;display:block}
a{color:var(--blauw-hover)}
.wrap{max-width:1040px;margin:0 auto;padding:0 16px}
h1,h2,h3{font-family:var(--display);font-weight:700;letter-spacing:-.02em;line-height:1.1;margin:0 0 .5em}
h1{font-size:clamp(2.5rem,1.8rem + 3.4vw,4.25rem)}
h2{font-size:2rem}
h3{font-size:1.25rem}

.hero{background:var(--inkt);color:#fff;padding:32px 0 48px;overflow:hidden}
.logo{display:block;margin-bottom:32px}
.hero-beeld{position:relative;max-width:440px;width:100%;margin:0 auto}
.enso{position:absolute;left:-4%;top:-4%;width:108%;max-width:none;height:auto}
.hero-tekst{position:relative;z-index:1}
.hero-grid{display:grid;gap:24px;align-items:center}
.hero .lead{font-size:1.2rem;max-width:32em;color:#e7eaec}
.prijs{position:relative;display:inline-block;color:var(--oranje);white-space:nowrap}
.prijs img{position:absolute;left:-4%;bottom:-.22em;width:108%;height:.26em}
.hero-trui{position:relative;width:100%}
.pill{display:inline-block;font:700 .8rem/1 var(--accent);text-transform:uppercase;letter-spacing:.06em;background:var(--oranje);color:#fff;padding:9px 16px 8px;border-radius:999px;margin-bottom:20px}

.knop{display:inline-block;background:var(--blauw);color:#fff;font:700 1.1rem/1 var(--display);padding:17px 28px;border-radius:999px;text-decoration:none;border:0;cursor:pointer;transition:background .12s}
.knop:hover{background:var(--blauw-hover)}
.knop-licht{background:#fff;color:var(--inkt);font-size:1rem;padding:14px 22px;margin-top:8px}
.knop-licht:hover{background:#e7eaec}

.kopen{display:grid;gap:32px;padding-top:56px;padding-bottom:64px;scroll-margin-top:0}
.foto img{border-radius:12px}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}
.duo img{width:100%;height:100%;object-fit:cover}
.klein{font-size:.9rem;color:var(--grijs);margin:.6em 0 0}
.maten{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:24px 0 8px}
.maat{display:flex;align-items:center;justify-content:center;min-height:68px;background:var(--blauw);color:#fff;font:700 1.35rem/1 var(--display);border-radius:12px;text-decoration:none;transition:background .12s}
a.maat:hover{background:var(--blauw-hover)}
.maat.uit{background:var(--vlak);color:#7a8a94}
.totaal{margin-top:20px}
.feiten{padding-left:1.1em;margin:16px 0 0}
.feiten li{margin-bottom:.3em}


.doos{background:var(--vlak);padding:56px 0}
.doos-grid{display:grid;gap:24px;align-items:center}
.doos figure{margin:0}
.doos img{border-radius:12px}

.video{padding-top:56px;padding-bottom:64px;max-width:820px}
.speler{position:relative;display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;border-radius:12px;overflow:hidden}
.play{position:absolute;left:50%;top:50%;width:76px;height:76px;margin:-38px 0 0 -38px;border-radius:50%;background:var(--blauw)}
.play::after{content:'';position:absolute;left:30px;top:22px;border-left:24px solid #fff;border-top:16px solid transparent;border-bottom:16px solid transparent}
.video iframe{display:block;width:100%;aspect-ratio:16/9;border:0;border-radius:12px}

.nogmaals{background:var(--inkt);color:#fff;padding:48px 0}
.nogmaals-grid{display:grid;gap:24px;align-items:center}
.nogmaals img{max-width:320px;width:100%;margin:0 auto}
@media (min-width:760px){.nogmaals-grid{grid-template-columns:.8fr 1.2fr}}

footer{background:var(--inkt-diep);color:#cad0d4;padding:24px 0;font-size:.8rem;line-height:1.5}
footer h3,footer h2{color:#fff;font-size:.85rem;font-family:var(--body);letter-spacing:0;margin:0 0 .4em}
footer ul{padding-left:0;list-style:none;margin:0 0 1em}
footer p{margin:0 0 .8em}
footer a{color:#fff}
.voet{display:grid;gap:32px}
.merk{font:700 1.6rem/1 var(--display);color:#fff;margin:0 0 16px}
.links{list-style:none;padding:0;margin:0 0 16px}
.links li{margin-bottom:.4em}

.tekst{max-width:720px;margin:0 auto;padding:40px 16px 64px}
.tekst h2{font-size:1.5rem;margin-top:1.6em}
.tekst h3{margin-top:1.4em}
.terug{display:inline-block;margin-bottom:8px;font-family:var(--display);font-weight:700;text-decoration:none}

form{background:var(--vlak);border-radius:12px;padding:20px;margin:16px 0}
label{display:block;font-weight:700;margin-bottom:14px}
input{display:block;width:100%;font:400 1rem var(--body);padding:12px;margin-top:6px;border:1px solid #a3aeb5;border-radius:6px;background:#fff;color:var(--inkt)}
.bevestigd{background:#dcf0ff;border-radius:12px;padding:20px;margin:16px 0}

@media (min-width:760px){
  .hero{padding:40px 0 72px}
  .hero-grid{grid-template-columns:1.15fr .85fr}
  .kopen{grid-template-columns:.8fr 1.2fr;align-items:start}
  .voet{grid-template-columns:1.3fr 1fr}
  .doos-grid{grid-template-columns:.8fr 1.2fr}
}

.voetlinks{display:flex;flex-wrap:wrap;gap:6px 18px;justify-content:center;list-style:none;padding:0;margin:0}
.voetlinks a{color:#a3aeb5;text-decoration:none}
.voetlinks a:hover{color:#fff}

.verborgen{position:absolute;left:-9999px}

.bedankt{background:var(--inkt);color:#fff;min-height:100vh}
.bedankt main{padding-top:32px;padding-bottom:48px;max-width:640px}
.bedankt .lead{font-size:1.2rem;color:#e7eaec}
.bedankt .knop{margin-top:8px}
.bedankt-trui{max-width:340px;width:100%;margin:40px auto 0}