/* ─────────────────────────────────────────────────────────────────────────
   Doelsterk — gedeelde HERO (single source)
   Sinds 2026-09-14 komt de hero van alle content-pagina's uit dit ene bestand,
   in plaats van een eigen inline-kopie per pagina (die dreef: 3 kicker-namen,
   .hero-inner soms gecentreerd, .hero p met wisselende waarden).

   Wijzig de hero ALLEEN hier. Bump daarna de ?v= in de <link> op elke pagina
   EN CACHE_NAME in sw.js. De ring-SVG-markup staat per pagina in de HTML en
   wordt gestempeld door tools/sync-hero-ring.py, dat blijft zo.

   Kicker heet overal .hero-tag (niet meer .hero-label / .hero-kicker).
   Page-specifieke toevoegingen (homepage-knoppen, masterclass-cta, shop-trust,
   scan-resultaat) blijven in de inline-<style> van die pagina staan.
   ───────────────────────────────────────────────────────────────────────── */

.hero {
  background: #1e4d0a;
  background: radial-gradient(circle at 84% 50%, rgba(125,201,74,0.16), transparent 46%),
              linear-gradient(115deg, #163807 0%, #1e4d0a 52%, #235810 100%);
  padding: 72px 5% 80px;
  position: relative;
  overflow: hidden;
}

.hero-inner {
  max-width: 640px;
  margin: 0;
  position: relative;
  z-index: 1;
}

.hero-tag {
  display: block;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #7dc94a;
  margin-bottom: 16px;
}

.hero h1 {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -1.5px;
  color: #fff;
  margin-bottom: 16px;
}

.hero h1 em {
  font-style: normal;
  color: #7dc94a;
}

.hero p {
  font-family: 'DM Sans', sans-serif;
  font-size: 1.05rem;
  color: rgba(255,255,255,0.9);
  max-width: 480px;
  line-height: 1.75;
  margin: 0;
}

.hero-deco {
  position: absolute;
  right: 3%;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

@media (max-width: 860px) {
  .hero-deco { display: none; }
}