/* ==========================================================================
   Pagina-CSS: Home (agent pages-home).
   Alleen aanvullingen die niet in het gedeelde designsysteem staan.
   Wordt geladen via een <link> bovenaan views/pages/home.ejs (same-origin).
   Nooit public/css/style.css bewerken (dat is van de design-core-agent).
   ========================================================================== */

/*Full-bleed hero met achtergrondfoto*/
.hero-home {
  position: relative;
  min-height: min(92vh, 820px);
  display: flex;
  align-items: center;
  padding: clamp(72px, 12vw, 128px) 0;
  background-color: var(--bordeaux-donker);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  overflow: hidden;
}
/* Warme leesbaarheids-overlay: van links donker naar rechts open. */
.hero-home::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(96deg, rgba(54, 15, 25, 0.78) 0%, rgba(54, 15, 25, 0.5) 42%, rgba(54, 15, 25, 0.12) 78%),
    linear-gradient(0deg, rgba(54, 15, 25, 0.34) 0%, rgba(54, 15, 25, 0) 40%);
  pointer-events: none;
}
.hero-home .wrap { position: relative; z-index: 1; width: 100%; }
/* Tekst links uitlijnen (links van het midden), niet gecentreerd. */
.hero-home .hero-inhoud { max-width: 620px; margin-right: auto; }

.hero-home .kicker { color: var(--goud-licht); margin-bottom: 20px; }
/* Ronde portret-placeholder van Gér, boven de titel. Vervangbaar via het beheer. */
.hero-home .hero-portret {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  margin: 0 0 24px;
  border: 2px solid rgba(230, 205, 128, 0.85);
  box-shadow: 0 6px 22px rgba(30, 8, 14, 0.4);
  background: var(--oudroze-licht);
}
.hero-home h1 {
  color: #fffdfb;
  letter-spacing: -0.01em;
  text-shadow: 0 1px 30px rgba(30, 8, 14, 0.35);
}
.hero-home .hero-introtekst {
  font-family: var(--font-body);
  font-size: clamp(1.1rem, 1.6vw, 1.3rem);
  line-height: 1.7;
  color: #f7e6e3;
  max-width: 56ch;
  margin: 22px 0 32px;
}
.hero-home .hero-acties {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 22px;
  margin-bottom: 22px;
}
/* Gouden knopvariant voor de donkere hero, compacter dan de standaardknop. */
.hero-home .knop {
  background: var(--cta-goud);
  color: var(--bordeaux-donker);
  box-shadow: var(--cta-goud-schaduw);
  padding: 12px 26px;
  font-size: 0.98rem;
}
.hero-home .knop:hover { filter: brightness(1.05); color: var(--bordeaux-donker); transform: translateY(-1px); box-shadow: 0 12px 30px rgba(138, 106, 34, 0.42); }
.hero-home .knop:focus-visible { outline: none; box-shadow: var(--cta-goud-ring), var(--cta-goud-schaduw); }
.hero-home .hero-vertrouwen {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 9px;
  font-size: 0.95rem;
  color: #f3ddda;
  margin: 0;
}
.hero-home .hero-vertrouwen svg { flex: none; width: 19px; height: 19px; margin-top: 3px; color: var(--goud-licht); }
.hero-home .hero-vertrouwen span { min-width: 0; }

/* Liquid-glass statkaarten rechts in de hero: frosted glas over de foto,
   met kerncijfers/USP's. Bewust en spaarzaam ingezet (geen standaard-effect). */
.hero-stats {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.glaskaart {
  position: absolute;
  width: min(230px, 25vw);
  padding: 18px 22px;
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(58, 40, 44, 0.28), rgba(18, 11, 15, 0.38));
  border: 1px solid rgba(255, 255, 255, 0.20);
  box-shadow: 0 16px 42px rgba(14, 7, 10, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.24);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  color: #fff;
  opacity: 0;
}
/* Twee losjes verspreide kaarten die zachtjes zweven, elk in eigen ritme,
   zodat het lijkt alsof ze willekeurig boven de foto hangen. */
.glaskaart:first-child {
  top: 18%;
  right: 3%;
  animation: glas-fade 0.8s ease-out 0.15s forwards;
}
.glaskaart-b {
  top: 57%;
  right: 13%;
  animation: glas-fade 0.8s ease-out 0.3s forwards;
}
.glas-getal {
  display: block;
  font-family: var(--font-kop);
  font-size: clamp(1.6rem, 2.2vw, 2.15rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.01em;
  color: #fffdfb;
  text-shadow: 0 1px 18px rgba(0, 0, 0, 0.32);
}
.glas-tekst {
  display: block;
  margin-top: 9px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.92);
}
@keyframes glas-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .glaskaart { opacity: 1; animation: none; }
}
/* Onder ~1000px is er naast de tekst te weinig ruimte: kaarten netjes verbergen. */
@media (max-width: 1000px) {
  .hero-stats { display: none; }
}

/* Mobiel: hero links uitgelijnd (net als desktop), zodat het hartje netjes
   naast de tekst blijft staan en niet los onder de tekst valt. */
@media (max-width: 720px) {
  .hero-home { min-height: min(86vh, 700px); }
  .hero-home::before {
    background:
      linear-gradient(96deg, rgba(54, 15, 25, 0.82) 0%, rgba(54, 15, 25, 0.58) 55%, rgba(54, 15, 25, 0.3) 100%),
      linear-gradient(0deg, rgba(54, 15, 25, 0.3) 0%, rgba(54, 15, 25, 0) 42%);
  }
  .hero-home .hero-inhoud { max-width: 100%; }
  .hero-home .hero-portret { margin-left: auto; margin-right: auto; }
}

/*Klein gouden ornament (korte streep) als rustige scheiding*/
.ornament-streep {
  width: 56px;
  height: 2px;
  border: 0;
  margin: 0 0 26px;
  background: linear-gradient(90deg, var(--goud), var(--goud-licht));
}
.tekst-midden .ornament-streep { margin-left: auto; margin-right: auto; }

/*Beloftes: verfijnde genummerde lijst i.p.v. card-grid*/
.beloftes { list-style: none; margin: 6px 0 0; padding: 0; }
.beloftes li {
  position: relative;
  padding: 22px 0 22px 64px;
  border-top: 1px solid rgba(195, 155, 52, 0.28);
}
.beloftes li:last-child { border-bottom: 1px solid rgba(195, 155, 52, 0.28); }
.beloftes .belofte-icoon {
  position: absolute;
  left: 0;
  top: 22px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--oudroze-licht);
  color: var(--bordeaux);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.beloftes .belofte-icoon svg { width: 23px; height: 23px; }
.beloftes h3 { font-size: 1.2rem; margin: 0 0 6px; }
.beloftes p { margin: 0; color: var(--inkt-zacht); }

/* Portret in de "wie is Gér"-strook */
.portret-foto {
  width: 100%;
  border-radius: var(--radius);
  box-shadow: var(--schaduw-zwaar);
  object-fit: cover;
  aspect-ratio: 4 / 5;
}

/* "Waarom anders": één rechthoekig blok, foto links (groter) + tekst rechts.
   Bewust compact zodat het op een normaal scherm in één keer zichtbaar is. */
.sectie-anders {
  padding-top: clamp(40px, 6vh, 72px);
  padding-bottom: clamp(40px, 6vh, 72px);
}
.anders-blok {
  display: grid;
  grid-template-columns: 1.45fr 1fr;   /* foto duidelijk groter dan de tekst */
  align-items: stretch;
  background: var(--wit);
  border: 1px solid var(--zand);
  border-radius: 28px;
  overflow: hidden;
  box-shadow: var(--schaduw-zwaar);
}
.anders-foto { position: relative; }
.anders-foto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.anders-tekst {
  padding: clamp(26px, 2.8vw, 46px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* Comfortabele, goed leesbare tekstgroottes; de tussenruimtes blijven gematigd
   zodat het blok op een normaal scherm in één keer zichtbaar blijft. */
.anders-tekst > h2 { font-size: clamp(1.7rem, 2.6vw, 2.1rem); margin-bottom: 6px; }
.anders-tekst > .intro-tekst { font-size: 1.2rem; margin-bottom: 14px; }
.anders-tekst .beloftes { margin-top: 4px; }
.anders-tekst .beloftes li { padding-top: 16px; padding-bottom: 16px; padding-left: 60px; }
.anders-tekst .beloftes .belofte-icoon { top: 16px; width: 42px; height: 42px; }
.anders-tekst .beloftes .belofte-icoon svg { width: 22px; height: 22px; }
.anders-tekst .beloftes h3 { font-size: 1.2rem; margin-bottom: 5px; }
.anders-tekst .beloftes p { font-size: 1.05rem; line-height: 1.55; }
.anders-tekst > .mt-3 { margin-top: 18px; }

@media (max-width: 860px) {
  .anders-blok { grid-template-columns: 1fr; }
  .anders-foto { position: relative; }
  .anders-foto img { position: relative; height: clamp(220px, 42vw, 320px); }
}

/*Werkwijze-stappen: iets ruimer, koppen kop-font*/
.werkwijze-stappen .stap h3 { font-family: var(--font-kop); font-weight: 500; }

/*Instagram/nieuwsbrief-strook: rustige twee-kolom*/
.meelezen-grid { align-items: stretch; }
.meelezen-grid .kaart { display: flex; flex-direction: column; }
.meelezen-grid form { margin-top: auto; }