/* ============================================================
   CHA CHI VERSACI — de hero

   Dezelfde hero als op de homepage, maar los getrokken zodat elke
   landingspagina hem kan gebruiken. De homepage-wrapper heeft daarom
   twee klassen: <div class="ccv-home ccv-hero">.

   Alles staat onder .ccv-hero, zodat het niet in de Elementor-header,
   de footer of de rest van een pagina lekt.
   ============================================================ */

.ccv-hero *{margin:0;padding:0;box-sizing:border-box}
.ccv-hero{
  font-family:'Nunito',sans-serif;
  color:var(--text);
  line-height:1.65;
  font-weight:600;
  -webkit-font-smoothing:antialiased;
}
.ccv-hero .wrap{max-width:1180px;margin:0 auto;padding:0 26px}
.ccv-hero a{text-decoration:none;color:inherit}
.ccv-hero img{max-width:100%;display:block}
.ccv-hero :focus-visible{outline:3px solid var(--pop);outline-offset:3px;border-radius:8px}

.ccv-hero h1,
.ccv-hero h2,
.ccv-hero h3,
.ccv-hero h4{
  font-family:'Fredoka',sans-serif !important;
  color:var(--ink);
  font-weight:600;
  letter-spacing:-.01em;
}

/* ---------- eyebrow en de groene onderstreping ---------- */
.ccv-hero .eyebrow{
  display:inline-block;font-family:'Fredoka',sans-serif;font-size:13px;font-weight:600;
  letter-spacing:.05em;color:var(--accent-deep);background:var(--pill);
  padding:7px 16px;border-radius:var(--r-pill);margin-bottom:18px;
}
.ccv-hero .squiggle{position:relative;display:inline-block;color:var(--accent-deep)}
.ccv-hero .squiggle::after{
  content:'';position:absolute;left:0;right:0;bottom:-.14em;height:.18em;
  border-radius:var(--r-pill);background:var(--accent);box-shadow:var(--glow-accent);
}

/* ---------- knoppen ---------- */
.ccv-hero .btn{
  display:inline-flex;align-items:center;gap:10px;font-family:'Fredoka',sans-serif;
  font-size:16px;font-weight:500;padding:15px 30px;border-radius:var(--r-pill);
  cursor:pointer;border:0;
  transition:transform .22s cubic-bezier(.2,.9,.3,1.4),box-shadow .22s ease;
}
.ccv-hero .btn-solid{background:var(--accent);color:var(--on-accent);box-shadow:0 6px 0 var(--accent-deep)}
.ccv-hero .btn-solid:hover{transform:translateY(3px);box-shadow:0 3px 0 var(--accent-deep),var(--glow-accent)}
.ccv-hero .btn-solid:active{transform:translateY(6px);box-shadow:0 0 0 var(--accent-deep)}
.ccv-hero .btn-pop{background:var(--pop);color:var(--on-pop);box-shadow:0 6px 0 var(--pop-deep)}
.ccv-hero .btn-pop:hover{transform:translateY(3px);box-shadow:0 3px 0 var(--pop-deep),var(--glow-pop)}
.ccv-hero .btn-outline{background:transparent;color:var(--accent-deep);box-shadow:inset 0 0 0 3px var(--accent)}
.ccv-hero .btn-outline:hover{transform:translateY(-3px);background:var(--pill)}

/* ---------- de hero zelf ---------- */
.ccv-hero .hero{
  position:relative;padding:76px 0 92px;overflow:hidden;
  background:
    radial-gradient(circle at 12% 22%,var(--pill),transparent 42%),
    radial-gradient(circle at 88% 78%,rgba(196,51,240,.10),transparent 45%),
    radial-gradient(circle 3px at 50% 50%,var(--border) 96%,transparent 0) 0 0/38px 38px;
}
.ccv-hero .hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center;position:relative;z-index:2}
.ccv-hero .hero h1{font-size:clamp(46px,8vw,82px);font-weight:700;line-height:1.03;margin-bottom:20px}
.ccv-hero .hero .lead{font-size:19.5px;color:var(--text);max-width:520px;margin-bottom:32px;font-weight:600}
.ccv-hero .cta-row{display:flex;gap:13px;flex-wrap:wrap}

/* ---------- de drie USP-kaartjes ----------
   Een vast raster van drie, zodat ze op één rij blijven staan. Met flex-wrap
   viel de derde eronder zodra een label wat langer werd. */
.ccv-hero .stats{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;margin-top:44px;max-width:560px;
}
.ccv-hero .stat{
  background:var(--card);border-radius:var(--r-md);padding:16px 14px;
  box-shadow:var(--shadow);text-align:center;
  transition:transform .3s cubic-bezier(.2,.9,.3,1.4);
}
.ccv-hero .stat:hover{transform:translateY(-5px) rotate(var(--tilt))}
.ccv-hero .stat .num{font-family:'Fredoka',sans-serif;font-size:26px;font-weight:600;color:var(--accent-deep);line-height:1.1}
.ccv-hero .stat .cap{font-size:12px;color:var(--muted);font-weight:700;line-height:1.35;margin-top:2px}

/* ---------- de foto in de blob ---------- */
.ccv-hero .portrait-zone{position:relative}
.ccv-hero .portrait{
  position:relative;aspect-ratio:1/1;overflow:hidden;
  border-radius:58% 42% 46% 54%/48% 52% 48% 52%;
  background:linear-gradient(150deg,var(--accent-bright),var(--pop-deep));
  display:grid;place-items:center;box-shadow:var(--shadow),var(--glow-accent);
  animation:ccv-blob 14s ease-in-out infinite;
}
.ccv-hero .portrait img{width:100%;height:100%;object-fit:cover}

/* De blob is vierkant, de foto op de voorpagina staand. Zonder correctie
   zou het bijsnijden op het midden van de foto uitkomen — dat is het
   T-shirt. Iets hoger uitsnijden houdt het gezicht in beeld. */
body.ccv-front .ccv-hero .portrait img{object-position:center 18%}
@keyframes ccv-blob{
  0%,100%{border-radius:58% 42% 46% 54%/48% 52% 48% 52%}
  50%{border-radius:44% 56% 58% 42%/56% 44% 56% 44%}
}

/* ---------- de zwevende labels ---------- */
.ccv-hero .sticker{
  position:absolute;font-family:'Fredoka',sans-serif;font-size:14px;font-weight:600;
  padding:11px 18px;border-radius:var(--r-pill);white-space:nowrap;z-index:3;
}
.ccv-hero .st1{top:4%;right:-5%;transform:rotate(7deg);background:var(--accent);color:var(--on-accent);box-shadow:0 5px 0 var(--accent-deep),var(--glow-accent);animation:ccv-bob 4.2s ease-in-out infinite}
.ccv-hero .st2{bottom:18%;left:-8%;transform:rotate(-8deg);background:var(--card);color:var(--accent-deep);box-shadow:0 5px 0 var(--border);animation:ccv-bob 5.4s ease-in-out infinite .6s}
.ccv-hero .st3{bottom:-1%;right:6%;transform:rotate(4deg);background:var(--pop);color:var(--on-pop);box-shadow:0 5px 0 var(--pop-deep),var(--glow-pop);animation:ccv-bob 4.8s ease-in-out infinite 1.1s}
@keyframes ccv-bob{0%,100%{translate:0 0}50%{translate:0 -9px}}

/* ---------- de golf onderaan ---------- */
.ccv-hero .wave{display:block;line-height:0}
.ccv-hero .wave svg{display:block;width:100%;height:62px}

@media(max-width:900px){
  .ccv-hero .hero-grid{grid-template-columns:1fr;gap:44px}
  .ccv-hero .portrait-zone{max-width:340px;margin:0 auto}
}
@media(max-width:640px){
  .ccv-hero .hero{padding:52px 0 66px}
  .ccv-hero .st2{left:-2%}
}
@media(prefers-reduced-motion:reduce){
  .ccv-hero *{animation:none !important;transition-duration:.01ms !important}
}