/* ===== Basis ===== */
:root{
  --bg:#FFF7EF; --ink:#2b2b2b; --ink-soft:#5b5b5b; --border:#efe3e7; --card:#ffffff;
  --pink:#ff6fa5; --pink-dark:#e04480; --aqua:#8ee7d6; --lemon:#ffd84d; --cyan:#6ad0ff; --violet:#a8c5ff;
  --shadow:0 10px 30px rgba(0,0,0,.08);
  --header-h: 72px; /* wordt exact gezet door JS */
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  padding-top: var(--header-h);           /* ruimte voor fixed header */
  background:var(--bg);
  color:var(--ink);
  font:16px/1.6 Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;
}
html{ scroll-behavior: smooth; }

/* ===== Header (fixed + compact bij scroll) ===== */
.site-header{
  position:fixed; left:0; right:0; top:0; z-index:1000;
  display:flex;justify-content:space-between;align-items:center;
  padding:clamp(14px,2vw,22px) clamp(16px,3vw,34px);
  border-bottom:1px solid var(--border);
  background:
    radial-gradient(900px 500px at -10% -20%, rgba(255,111,165,.12), transparent 60%),
    radial-gradient(1200px 600px at 110% -10%, rgba(142,231,214,.15), transparent 60%),
    #fffdf8;
  box-shadow:var(--shadow);
  transition: background .25s ease, box-shadow .25s ease, padding .25s ease, border-color .25s ease;
  backdrop-filter: blur(4px);
}
.site-header.is-scrolled{
  padding: 10px clamp(16px,3vw,34px);
  background:#fff;
  border-color:#ece2e6;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}
.brand{display:flex;flex-direction:column;gap:6px}
.logo-text{font-size:clamp(28px,3.6vw,44px);line-height:1;letter-spacing:.5px;color:var(--pink);font-weight:900}
.logo-sub{color:#7a7a7a}
.nav a{color:#6a6a6a;text-decoration:none;margin-left:clamp(10px,1.6vw,20px);font-weight:600}
.nav a:hover{color:var(--pink)}

/* ===== HERO: full-bleed ===== */
.hero-grid{
  width:100vw; padding:0;
  display:grid; gap:0;
  grid-template-columns:1.2fr 1fr;
  grid-template-rows: minmax(320px, 42vh) minmax(260px, 36vh);
}
@media (max-width: 980px){
  .hero-grid{grid-template-columns:1fr; grid-template-rows:none}
}
.hero{
  position:relative; background:#fff; border:0; border-radius:0;
  box-shadow:none; min-height:260px;
}
.hero + .hero{border-left:1px solid var(--border)}
.hero:nth-child(n+3){border-top:1px solid var(--border)}

.hero-text{padding:clamp(18px,4vw,50px)}
.hero-text h1{font-size:clamp(38px,6vw,72px);line-height:1.04;margin:0 0 8px;color:#2e1f1f}
.hero-text h1 em{color:var(--pink);font-style:normal}
.hero-text p{max-width:70ch;color:#6b6b6b;margin:0 0 16px}

.hero-img{background:linear-gradient(135deg,#ffd2e1,#ffe9a8)}

.hero-split{display:grid;grid-template-columns:1fr 1fr}
.hero-split .split{position:relative}
.hero-split .split::after{
  content:""; position:absolute; inset:0;
  background-image:
    radial-gradient(#0000 68%,rgba(255,255,255,.8) 69%),
    radial-gradient(#0000 68%,rgba(255,255,255,.8) 69%);
  background-size:120px 120px; background-position:0 0,60px 60px; mix-blend-mode:overlay; opacity:.35;
}
.seed-row{position:absolute; left:0; right:0; bottom:0; height:14px;
  background: radial-gradient(6px 3px at 6px 6px, #2e2e2e 52%, transparent 53%) repeat-x;
  background-size:28px 12px; opacity:.18}

.hero-cta{padding:clamp(18px,4vw,50px); background:linear-gradient(180deg,#fff,#ffe6f3)}
.hero-cta h2{margin:0 0 8px;color:#cf3774;font-size:clamp(22px,3.2vw,34px)}
.cta-form{display:flex;gap:10px;margin-top:12px;max-width:680px}
.cta-form input{flex:1;border:1px solid var(--border);border-radius:999px;padding:14px 18px;font-size:16px}
.cta-form .btn{border-radius:999px}

/* Driehoeken */
.tri{position:absolute;width:0;height:0;border-style:solid;opacity:.95;
  filter:drop-shadow(0 10px 20px rgba(0,0,0,.1))}
.tri-pink{border-width:120px 0 120px 210px;border-color:transparent transparent transparent var(--pink);
  right:-30px; top:50%; transform:translateY(-50%)}
.tri-yellow{border-width:70px 160px 0 0;border-color:var(--lemon) transparent transparent transparent;left:-16px;top:-16px}

/* ===== Buttons ===== */
.btn{display:inline-block;padding:12px 18px;border-radius:12px;border:1px solid #ffd1e3;background:#fff;
  text-decoration:none;color:#4a4a4a;font-weight:800}
.btn-primary{background:var(--pink);border-color:var(--pink);color:#fff}
.btn-primary:hover{background:var(--pink-dark)}
.btn-secondary{background:#fff;border-color:#ddd}

/* ===== Sections: full-bleed ===== */
.wrap{width:100vw; padding:clamp(22px,5vw,70px)}
.section-head{text-align:center;margin-bottom:clamp(12px,2vw,18px)}
.section-head h2{font-size:clamp(28px,3.6vw,44px);margin:0 0 6px}
.section-head p{color:#777;margin:0}
.filters{margin-top:12px}
.pill{display:inline-block;padding:10px 14px;border-radius:999px;border:1px solid #ddd;text-decoration:none;color:#444;margin:0 6px}
.pill.active{background:var(--pink);border-color:var(--pink);color:#fff}

/* ===== Cards (boeken) ===== */
.cards{
  background:
    linear-gradient(180deg,#fff, #fff7fb 60%, #fff1f7);
  border-top:1px solid var(--border); border-bottom:1px solid var(--border);
}
.card-grid{
  display:grid; gap:clamp(12px,2vw,22px);
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
}
.card{border:1px solid var(--border);border-radius:18px;background:#fff;box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column}
.card-media{height:clamp(240px,32vw,420px);background-size:cover;background-position:center}
.card-body{padding:clamp(14px,1.8vw,18px)}
.card h3{margin:6px 0 8px;font-size:clamp(18px,1.8vw,22px)}
.card p{margin:0 0 12px;color:#666}

/* ===== Bundles (PDF’s) ===== */
.bundles{background:#fff}
.bundle-list{display:flex;flex-direction:column;gap:clamp(8px,1.4vw,14px)}
.bundle-row{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;
  gap:clamp(10px,1.6vw,18px);
  border:1px solid var(--border);border-radius:16px;background:#fff;box-shadow:var(--shadow);
  padding:clamp(12px,1.6vw,18px) clamp(14px,2vw,22px);
}
.bundle-title a{color:#2c2c2c;text-decoration:none;font-weight:800}
.bundle-title a:hover{color:var(--pink)}
.bundle-title .date{display:block;color:#8b8b8b}
.badge{font-weight:900;padding:8px 14px;border-radius:999px;border:1px solid #ddd;background:#fff;min-width:72px;text-align:center}
.badge.cti{background:#c9f2de;border-color:#a7e8c7;color:#104b3a}
.badge.trend{background:#ffd1e3;border-color:#ffb6d3;color:#7a1032}
.badge.case{background:#a8c5ff;border-color:#88a9ff;color:#0c2d75}

/* ===== Over ons ===== */
.about{
  background:
    radial-gradient(900px 500px at -10% 10%, rgba(255,216,77,.18), transparent 60%),
    radial-gradient(900px 500px at 110% 0%, rgba(106,208,255,.15), transparent 60%),
    #fffdf8;
}
.about-grid{display:grid;gap:clamp(12px,2vw,18px);grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){.about-grid{grid-template-columns:1fr}}
.about-card{border:1px solid var(--border);border-radius:18px;background:linear-gradient(180deg,#fff,#fff8fb);padding:clamp(14px,2vw,18px);box-shadow:var(--shadow)}

/* ===== Footer ===== */
.site-footer{width:100vw;padding:clamp(18px,3vw,28px);text-align:center;color:#666;border-top:1px solid var(--border);background:#fff}

/* ===== Reveal animatie ===== */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .5s ease, transform .5s ease}
.reveal.in{opacity:1;transform:none}