.hero {
  position: relative; min-height: 100svh; background-color: var(--color-bg-hero);
  background-image: url("../../../assets/img/Index/hero/Terrain.svg");
  background-repeat: no-repeat; background-position: center bottom; background-size: cover;
  display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;
  padding: var(--section-padding-y) var(--header-padding-x); overflow: hidden;
}
.hero::before {
  content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 65px;
  background-image: url("../../../assets/img/Index/hero/HeroSeparator.svg");
  background-repeat: no-repeat; background-size: 100% 65px; pointer-events: none; z-index: 5;
}
.hero__content { max-width: 800px; z-index: 2; }
.hero__title { font-size: var(--font-size-h1); font-weight: 900; line-height: 1.1; color: var(--color-brand-magenta); margin-bottom: 1.5rem; }
.hero__highlight { display: inline-block; background-color: var(--color-bg-highlight-purple); color: var(--color-brand-purple); padding: 0 0.3em; }
.hero__description { font-size: var(--font-size-body); line-height: 1.6; max-width: 600px; margin: 0 auto 2.5rem; }
.hero__actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

.hero__scroll-down { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); color: var(--color-brand-magenta); font-size: 2rem; text-decoration: none; z-index: 2; animation: bounce 2s infinite; }
@keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateY(0); } 40% { transform: translateX(-50%) translateY(-10px); } 60% { transform: translateX(-50%) translateY(-5px); } }

.floating-element--leaf-left { top: 15%; left: -5%; width: clamp(150px, 20svw, 300px); }
.floating-element--papaya-right { top: 10%; right: -5%; width: clamp(200px, 25svw, 400px); }
.floating-element--bean-1 { top: 30%; left: 15%; width: clamp(110px, 13svw, 200px); }
.floating-element--seed-1 { bottom: 15%; left: 20%; width: clamp(75px, 9svw, 130px); }
.floating-element--seed-3 { bottom: 20%; right: 15%; width: clamp(75px, 9svw, 130px); }

@media (max-width: 768px) {
  .hero::before { height: 65px; background-size: 100% 65px; }
  .hero__actions { flex-direction: column; gap: 0.75rem; }
  .btn { width: 100%; text-align: center; }
  .floating-element--leaf-left { left: -15%; opacity: 0.6; }
  .floating-element--papaya-right { right: -15%; opacity: 0.6; }
  .floating-element--bean-1,
  .floating-element--seed-1, .floating-element--seed-3 { display: none; }
}