/* Sweets Julianadorp — schone statische rebuild */
:root{
  --lav:#e3b6f6;
  --lav-soft:#ecccf9;
  --pink:#f23ccb;
  --pink-light:#ff63d6;
  --pink-hot:#ff5cd8;
  --ink:#2e1f2e;
  --muted:#5b4b5b;
  --card:linear-gradient(150deg,rgba(255,255,255,.48),rgba(255,236,250,.3));
  --sidebar-w:310px;
  --radius:18px;
  --shadow:0 14px 30px rgba(90,20,90,.18);
  --font:'Poppins',-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  --display:'Fredoka',var(--font);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--font);color:var(--ink);line-height:1.55;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}

/* ---------- Layout shell ---------- */
.layout{display:flex;min-height:100vh}
.sidebar{
  width:var(--sidebar-w);flex:0 0 var(--sidebar-w);
  background:var(--lav);
  display:flex;flex-direction:column;align-items:center;
  padding:34px 24px 40px;gap:14px;
  position:sticky;top:0;align-self:flex-start;
  height:100vh;overflow-y:auto;z-index:20;
}
.brand{margin-bottom:26px}
.brand img{width:210px;height:auto}
.nav{display:flex;flex-direction:column;align-items:center;gap:22px;width:100%}
.pill{
  display:inline-block;text-align:center;
  font-weight:600;font-size:.95rem;color:#fff;
  background:linear-gradient(180deg,var(--pink-light),var(--pink));
  padding:11px 22px;border-radius:999px;
  box-shadow:0 6px 14px rgba(200,30,170,.35);
  transition:transform .15s ease,box-shadow .15s ease;white-space:nowrap;
}
.pill:hover{transform:translateY(-2px);box-shadow:0 9px 18px rgba(200,30,170,.45)}
.pill.active{background:#fff;color:var(--pink);text-decoration:underline;text-underline-offset:3px}

.main{flex:1;min-width:0;position:relative;overflow:hidden}
/* vibrant mesh gradient like original */
.mesh{
  background:
    radial-gradient(at 0% 0%, #62c8f5 0, transparent 48%),
    radial-gradient(at 100% 16%, #f23bce 0, transparent 50%),
    radial-gradient(at 4% 100%, #ff4d6d 0, transparent 46%),
    radial-gradient(at 100% 100%, #5b6bf0 0, transparent 52%),
    linear-gradient(135deg,#7db8f0 0%,#b06cf0 38%,#ef4bcf 72%,#ff5ca8 100%);
}
.page{padding:54px 60px 90px}
.page-title{
  font-family:var(--font);font-weight:800;color:#fff;
  font-size:clamp(2.2rem,5vw,3.6rem);letter-spacing:.22em;
  text-transform:uppercase;margin:0 0 42px;text-shadow:0 3px 12px rgba(120,10,90,.25)}

/* ---------- Home splash ---------- */
.splash .main{display:flex;align-items:center;justify-content:center;background:var(--pink-hot)}
.splash-words{text-align:center;color:#fff;padding:20px}
.splash-words .word{font-family:var(--display);font-weight:600;font-size:clamp(4rem,13vw,9rem);line-height:.9}
.splash-words .sub{font-weight:700;letter-spacing:.38em;font-size:clamp(1.2rem,3.4vw,2.4rem);margin-top:6px}

/* ---------- Cards grid (assortiment) ---------- */
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px;max-width:760px}
.card{
  background:var(--card);border-radius:var(--radius);padding:16px 16px 22px;
  box-shadow:var(--shadow);backdrop-filter:blur(3px)}
.card img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:12px}
.card h3{margin:16px 0 8px;font-size:1.35rem;font-weight:700;text-align:center;color:#241624}
.card p{margin:0;text-align:center;color:var(--muted);font-size:.95rem;padding:0 6px}

/* ---------- Over ons ---------- */
.about{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:start}
.about .text{
  background:var(--card);backdrop-filter:blur(3px);
  border-radius:var(--radius);padding:34px 36px;box-shadow:var(--shadow);
  text-align:center;color:#33233a;font-size:1.02rem}
.about .text p{margin:0 0 16px}
.about .photos{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.about .photos img{width:100%;height:100%;object-fit:cover;border-radius:14px;box-shadow:var(--shadow)}
.about .photos .wide{grid-column:1/3;aspect-ratio:16/7}
.about .photos .sq{aspect-ratio:1/1}

/* ---------- Contact ---------- */
.contact-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:start}
.panel{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);backdrop-filter:blur(3px)}
.hours{padding:30px 38px}
.hours .row{display:flex;justify-content:space-between;gap:20px;padding:6px 0;font-weight:600;color:#241624}
.hours .row span:last-child{font-weight:500;color:var(--muted)}
.info{margin-top:34px;padding:30px;display:flex;justify-content:space-around;text-align:center;
  background:var(--card);backdrop-filter:blur(3px);color:#241624}
.info .ico{width:54px;height:54px;border-radius:50%;background:linear-gradient(180deg,var(--pink-light),var(--pink));color:#fff;
  display:flex;align-items:center;justify-content:center;margin:0 auto 12px;font-size:1.5rem}
.info b{display:block;margin-bottom:4px;font-size:1.05rem}
.info a{color:var(--pink);text-decoration:underline;text-underline-offset:3px}

.form{padding:30px 32px}
.form label{display:block;font-size:.9rem;margin:14px 0 6px;color:#33233a}
.form label:first-child{margin-top:0}
.form input,.form textarea{
  width:100%;border:1px solid #f0b9e6;border-radius:999px;padding:13px 18px;
  font-family:inherit;font-size:.95rem;background:rgba(255,255,255,.9);color:#241624}
.form textarea{border-radius:16px;min-height:120px;resize:vertical}
.form input::placeholder,.form textarea::placeholder{color:#b59ab0}
.btn{margin-top:22px;width:100%;border:0;cursor:pointer;color:#fff;font-weight:700;font-size:1rem;
  padding:14px;border-radius:999px;background:linear-gradient(180deg,var(--pink-light),var(--pink));
  box-shadow:0 8px 18px rgba(200,30,170,.4)}
.btn:hover{filter:brightness(1.05)}

/* ---------- Galerij ---------- */
.gallery{columns:3;column-gap:16px;max-width:1000px}
.gallery img{width:100%;margin:0 0 16px;border-radius:14px;box-shadow:var(--shadow);break-inside:avoid}

/* ---------- Mobile ---------- */
.menu-btn{display:none}
@media(max-width:880px){
  .layout{flex-direction:column}
  .sidebar{width:100%;flex:none;flex-direction:row;flex-wrap:wrap;justify-content:center;
    padding:18px 16px;gap:12px;height:auto;overflow:visible}
  .brand{width:100%;text-align:center;margin-bottom:6px}
  .brand img{width:150px;margin:0 auto}
  .nav{flex-direction:row;flex-wrap:wrap;gap:10px}
  .splash .main{min-height:60vh}
  .page{padding:34px 22px 70px}
  .page-title{letter-spacing:.1em}
  .grid,.about,.contact-grid{grid-template-columns:minmax(0,1fr)}
  .contact-grid>*,.panel{min-width:0}
  .info a{overflow-wrap:anywhere}
  .about .photos{grid-template-columns:1fr 1fr}
  .gallery{columns:2}
  .hours{padding:24px 20px}
  .info{padding:26px 18px}
  .form{padding:26px 20px}
  .card{padding:14px 14px 20px}
}
@media(max-width:520px){
  .gallery{columns:1}
  .pill{font-size:.85rem;padding:9px 16px}
  .page{padding:28px 16px 60px}
  .page-title{letter-spacing:.05em;font-size:clamp(1.8rem,7.5vw,2.4rem)}
  .hours{padding:20px 16px}
  .hours .row{gap:10px;font-size:.92rem}
  .info{padding:24px 14px;gap:8px}
}

/* ---------- Bedankt-pagina ---------- */
.thanks{max-width:620px;margin:9vh auto 0;text-align:center}
.thanks-card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);
  backdrop-filter:blur(3px);padding:52px 44px}
.thanks-card .mark{font-family:var(--display);font-size:3.2rem;line-height:1;color:var(--pink);margin-bottom:10px}
.thanks-card h1{font-family:var(--display);font-weight:600;color:#241624;
  font-size:clamp(2.2rem,6vw,3.2rem);margin:0 0 14px}
.thanks-card p{color:var(--muted);font-size:1.05rem;margin:0 0 28px}