/* ============================================================
   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 ----------
   De golf is een losse balk ná de hero, en daar hield het stippenpatroon
   dus op: boven de curve stond een leeg stuk.

   Niet oplossen door de stippen ook op .wave te zetten - dan begint het
   raster daar opnieuw bij 0 en sluit het niet aan op dat van de hero,
   want de hoogte van de hero is zelden een veelvoud van 38px.

   In plaats daarvan de golf over de hero heen trekken. Dan is het
   letterlijk dezelfde achtergrond die doorloopt, en klopt de uitlijning
   per definitie. De hero krijgt er onderaan net zoveel opvulling bij, zodat
   de inhoud niet onder de golf verdwijnt. */
.ccv-hero .hero{padding-bottom:154px}          /* 92px + de 62px van de golf */
.ccv-hero .wave{
  display:block;line-height:0;
  margin-top:-62px;
  position:relative;                            /* zodat hij bovenop de hero valt */
}
.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}
}