/* =========================================================
   GOLDENCUT — "noveny-hatter" GÖRGŐ háttér variáns (index3.html)
   A növénykép NEM fixed: egy magas, teljes képet tartalmazó
   háttérelem az oldal tetején, ami normálisan görget — így
   lefelé haladva a növény alsóbb részei tárulnak fel
   (mint az eredeti staging oldalon).
   ========================================================= */

/* Sötét vászon az egész oldal mögött */
body.bg-plant-scroll { background: var(--bg); }

/* A teljes növénykép, az oldal szélességében, a tetejére igazítva.
   aspect-ratio = a kép natív aránya (682×1024), így 'cover' nem vág,
   csak az oldal szélességére skáláz. Az elem így ~1.5× olyan magas,
   mint amilyen széles → görgetve végigpásztázzuk a növényt. */
.page-bg {
  position: absolute; top: 0; left: 0; width: 100%; z-index: -3;
  aspect-ratio: 1920 / 2885;
  background: url("assets/bg_hq.jpg") top center / cover no-repeat;
}
/* Olvashatósági scrim + lágy átmenet a sötét tartalomba a kép alján */
.page-bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(5,8,7,0.35) 0%,
    rgba(5,8,7,0.55) 45%,
    rgba(5,8,7,0.80) 80%,
    rgba(5,8,7,1) 100%);
}

/* ---------- HERO ---------- */
.bg-plant-scroll .hero { background: transparent; }
.bg-plant-scroll .hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(90deg,
    rgba(5,8,7,0.86) 0%,
    rgba(5,8,7,0.5) 42%,
    rgba(5,8,7,0.12) 72%,
    transparent 100%);
}
.bg-plant-scroll .hero-content,
.bg-plant-scroll .hero-scroll { position: relative; z-index: 1; }

/* ---------- Áttetsző szekció-panelek ----------
   Ahol a növény mögöttük van (a felső régióban), átdereng;
   lejjebb a sötét vászon adja a hátteret. */
.bg-plant-scroll .marquee {
  background: rgba(3,8,5,0.62); backdrop-filter: blur(3px) saturate(130%);
}
.bg-plant-scroll .categories {
  background: rgba(5,8,7,0.50); backdrop-filter: blur(4px) saturate(120%);
}
.bg-plant-scroll .featured {
  background: rgba(5,8,7,0.62) !important; backdrop-filter: blur(4px) saturate(120%);
}
.bg-plant-scroll .newsletter {
  background:
    radial-gradient(700px 300px at 50% 0%, rgba(210,188,115,0.10), transparent 70%),
    rgba(3,8,5,0.7);
  backdrop-filter: blur(4px) saturate(120%);
}
.bg-plant-scroll .benefits {
  background: rgba(5,8,7,0.5); backdrop-filter: blur(3px);
  max-width: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 1.4rem;
}
.bg-plant-scroll .benefits > .benefit { max-width: 280px; }
.bg-plant-scroll .site-footer {
  background: rgba(3,5,4,0.82); backdrop-filter: blur(6px);
}

/* Kártya-felületek: kicsit tömörebbek, hogy a tartalom éles maradjon */
.bg-plant-scroll .benefit { background: rgba(8,14,11,0.6); }
.bg-plant-scroll .product { background: rgba(12,22,17,0.85); }
.bg-plant-scroll .story-body { background: rgba(12,24,18,0.88); backdrop-filter: blur(4px); }

@media (max-width: 760px) {
  /* Álló képernyőn a natív arány túl alacsony bannert adna — magasabb,
     'cover' háttérrel a növény itt is végigpásztázható görgetéskor. */
  .bg-plant-scroll .page-bg {
    aspect-ratio: auto; height: 150vh;
    background-size: cover; background-position: top center;
  }
  .bg-plant-scroll .hero::before {
    background: linear-gradient(180deg,
      rgba(5,8,7,0.35) 0%,
      rgba(5,8,7,0.55) 55%,
      rgba(5,8,7,0.78) 100%);
  }
  .bg-plant-scroll .benefits > .benefit { max-width: 100%; }
}