/* Bananas: roze + zonnig geel op blush, stickerkaarten, handgeschreven accenten */
:root{
  --pink:#F2105F; --pink-deep:#C80B4E; --yellow:#FFD21F; --blush:#FFF3F7; --rose:#FFB3CF; --rose-soft:#FFD6E5; --lemon:#FFE45C;
  --ink:#1E1218; --ink-soft:#4A3540; --white:#FFFFFF;
  --f-display:'Baloo 2',ui-rounded,'Arial Rounded MT Bold',system-ui,sans-serif;
  --f-body:'Nunito',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-hand:'Caveat','Comic Sans MS',cursive;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--blush);color:var(--ink);font-family:var(--f-body);font-size:17px;line-height:1.5;overflow-x:hidden}
img{max-width:100%}
a{color:var(--ink)} a:hover{color:var(--pink-deep)}
:focus-visible{outline:3px solid var(--pink);outline-offset:3px}
.wrap{max-width:1240px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.blob{position:absolute;pointer-events:none;z-index:0}
.rel{position:relative;z-index:1}
h1,h2,h3{font-family:var(--f-display);font-weight:800;margin:0;line-height:1;text-wrap:balance}
.hand{font-family:var(--f-hand);font-weight:700}
.eyebrow{margin:0;font-weight:900;font-size:14px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* knoppen */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:0 28px;border-radius:999px;border:3px solid var(--ink);
  background:var(--white);color:var(--ink);font:900 18px/1 var(--f-body);text-decoration:none;cursor:pointer;box-shadow:0 6px 0 var(--ink);transition:transform .08s,box-shadow .08s}
.btn:hover{color:var(--ink)}
.btn:active{transform:translateY(3px);box-shadow:0 3px 0 var(--ink)}
.btn-yellow{background:var(--yellow)}
.btn-pink{background:var(--pink);color:var(--white);border-color:var(--pink);box-shadow:0 10px 24px rgba(242,16,95,.35)}
.btn-pink:hover{color:var(--white)} .btn-pink:active{box-shadow:0 4px 12px rgba(242,16,95,.35)}
.btn[disabled]{opacity:.6;cursor:wait}

/* header */
.site-header{position:relative;z-index:2;padding-block:18px}
.site-header nav{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between}
.logo{display:flex;align-items:center;gap:8px;text-decoration:none}
.logo img{height:58px;width:auto}
.logo-tekst{display:flex;flex-direction:column;line-height:.9}
.logo-tekst b{font-family:var(--f-display);font-weight:800;font-size:34px;letter-spacing:-.5px}
.logo-tekst i{font-style:normal;font-family:var(--f-hand);font-weight:700;font-size:22px;color:var(--pink);transform:rotate(-5deg);margin-left:20px}
.menu{display:flex;flex-wrap:wrap;gap:28px;align-items:center;font-weight:800}
.menu a{text-decoration:none}
.menu .btn{min-height:50px;font-size:16px;padding:0 22px}
@media (max-width:760px){.menu a:not(.btn){display:none}.logo img{height:48px}.logo-tekst b{font-size:28px}}

/* hero */
.hero{position:relative;padding-block:16px 64px}
.hero-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px;align-items:center}
.hero-tekst{display:flex;flex-direction:column;gap:18px;min-width:0}
.hero h1{font-size:clamp(54px,7vw,88px);line-height:.92;letter-spacing:-2px}
.go{font-family:var(--f-hand);font-weight:700;color:var(--pink);font-size:clamp(60px,8vw,100px);line-height:.9;transform:rotate(-4deg);transform-origin:left center;display:block}
.streep{display:block;margin:-4px 0 0 70px;max-width:70%}
.lead{margin:0;font-size:21px;line-height:1.45;max-width:470px}
.usps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;font-weight:800}
.usps li{display:flex;gap:10px;align-items:center}
.usps svg{flex:none}
.cta-rij{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.klein{font-size:15px;font-weight:600;color:var(--ink-soft);margin:0}
.mascot-kolom{position:relative;display:flex;justify-content:center;align-items:center;min-height:500px}
.mascot-kolom img{height:430px;width:auto;transform:rotate(-6deg);filter:drop-shadow(0 18px 24px rgba(30,18,24,.25))}
.notitie{position:absolute;font-family:var(--f-hand);font-weight:700;font-size:30px;line-height:1.05;transform:rotate(-10deg)}
.telefoons{position:relative;display:flex;justify-content:center}
.tel-stage{position:relative;width:380px;max-width:100%;height:560px}
.tel{position:absolute;background:var(--ink);border-radius:40px;padding:10px;box-shadow:0 28px 50px rgba(30,18,24,.3)}
.scherm{border-radius:31px;padding:16px 14px;display:flex;flex-direction:column;gap:10px;min-height:490px}
.tel-1{left:0;top:0;width:240px;transform:rotate(-4deg);z-index:2}
.tel-1 .scherm{background:var(--white)}
.tel-2{right:0;top:50px;width:230px;transform:rotate(6deg);z-index:1}
.tel-2 .scherm{background:#2A1A22;color:var(--white);padding-left:54px;text-align:center;align-items:center}
.chip{font-size:12px;font-weight:800;background:var(--blush);border:1.5px solid var(--rose);padding:4px 10px;border-radius:999px}
.slot{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:6px;height:220px;border-radius:22px;background:var(--rose);color:#6B1E3C;font-size:13px;font-weight:800;text-align:center}
@media (max-width:1100px){.mascot-kolom{display:none}}
@media (max-width:520px){.tel-stage{height:520px}.tel-1{width:220px}.tel-2{width:200px}}

/* iconenrij */
.iconen{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:22px;text-align:center;padding-block:0 56px}
.iconen div{display:flex;flex-direction:column;align-items:center;gap:4px}
.iconen strong{font-size:18px}
.iconen span{font-size:15px;color:var(--ink-soft)}

/* donkere balk */
.balk{background:var(--ink);color:var(--white);padding-block:34px}
.balk .wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:24px;align-items:center}
.balk b{display:block;font-family:var(--f-display);font-weight:800;font-size:42px;line-height:1;color:var(--yellow)}
.balk .hand{font-size:34px;color:#FF8AB4;line-height:1.1}

/* secties */
.sectie{position:relative;padding-block:88px;overflow:hidden}
.kop{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;margin-bottom:44px}
.kop .hand{font-size:40px;transform:rotate(-3deg)}
.kop h2{font-size:clamp(36px,5vw,60px);line-height:1.05}
.roze{background:var(--pink);color:var(--white)}
.roze .kop .hand{color:var(--yellow)}
.kaarten{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px}
.kaart{background:var(--white);color:var(--ink);border:3px solid var(--ink);border-radius:28px;padding:26px;box-shadow:0 8px 0 var(--ink);display:flex;flex-direction:column;gap:10px}
.kaart.geel{background:var(--yellow)}
.kaart:nth-child(even){transform:rotate(-.6deg)}
.kaart h3{font-size:26px}
.kaart p{margin:0}
.stappen{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:36px}
.stap{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px}
.stap .nr{width:80px;height:80px;display:flex;align-items:center;justify-content:center;font-family:var(--f-display);font-weight:800;font-size:38px;border:3px solid var(--ink)}
.stap h3{font-size:28px}
.stap p{margin:0;max-width:330px}

/* wachtlijst */
.wachtlijst{background:var(--yellow);position:relative;overflow:hidden;padding-block:80px}
.wl-grid{display:flex;flex-wrap:wrap;gap:36px;align-items:center;justify-content:center}
.wl-grid>img{height:300px;width:auto;transform:rotate(8deg);filter:drop-shadow(0 14px 20px rgba(30,18,24,.25))}
.wl-tekst{flex:1 1 420px;min-width:0;display:flex;flex-direction:column;gap:14px;max-width:580px}
.wl-tekst .hand{font-size:40px;color:var(--pink-deep);transform:rotate(-4deg);align-self:flex-start}
.wl-tekst h2{font-size:clamp(46px,6vw,78px);line-height:.95}
.formulier{background:var(--white);border:3px solid var(--ink);border-radius:28px;box-shadow:0 8px 0 var(--ink);padding:22px;display:flex;flex-direction:column;gap:14px}
.veld{display:flex;flex-direction:column;gap:6px}
.veld label{font-weight:900;font-size:15px}
.veld .opt{font-weight:600;color:var(--ink-soft)}
.invoer{width:100%;min-height:54px;border:3px solid var(--ink);border-radius:16px;background:var(--white);color:var(--ink);padding:0 16px;font:600 17px var(--f-body)}
select.invoer{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%231E1218' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;padding-right:44px}
.twee{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.melding{margin:0;font-weight:800;border-radius:14px;padding:12px 14px}
.melding.fout{background:#FFE1EA;color:#8A0732}
.melding.goed{background:#E3F6E8;color:#14532D}
.honing{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.privacyregel{margin:0;font-size:14px;color:var(--ink-soft)}

/* footer */
footer{background:var(--ink);color:#F7E6EE;padding-block:40px;text-align:center}
footer .wrap{display:flex;flex-direction:column;gap:12px;align-items:center}
footer .merk{display:flex;align-items:center;gap:10px;font-family:var(--f-display);font-weight:800;font-size:32px;color:var(--yellow)}
footer .merk img{height:46px;width:auto}
footer .hand{font-size:28px;color:#FF8AB4}
footer nav{display:flex;flex-wrap:wrap;gap:24px;justify-content:center;font-size:15px}
footer a{color:#F7E6EE} footer a:hover{color:var(--yellow)}

/* tekstpagina's */
.tekstpagina{max-width:760px;margin:0 auto;padding-block:24px 80px}
.tekstpagina h1{font-size:clamp(40px,6vw,64px);margin-bottom:8px}
.tekstpagina h2{font-size:28px;margin:32px 0 8px}
.tekstpagina p,.tekstpagina li{max-width:65ch}
.midden{min-height:60vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:14px;padding-block:40px}
.midden img{height:220px;width:auto;transform:rotate(-6deg)}
.midden h1{font-size:clamp(44px,7vw,72px)}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn{transition:none}}

/* verfijning breedtes */
@media (min-width:1101px){.hero-grid{grid-template-columns:minmax(0,1.2fr) minmax(0,.75fr) minmax(0,1fr)}}
.hero h1{font-size:clamp(52px,6.2vw,84px)}
.kaarten{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
@media (max-width:640px){
  .iconen{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 12px}
  .balk .wrap{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;text-align:center}
  .balk .hand{grid-column:1/-1}
  .balk b{font-size:36px}
  .wl-grid>img{height:170px}
  .sectie{padding-block:64px}
}