/* ==========================================================================
   IndoSpiceHub — Homepage
   ========================================================================== */

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  color: var(--color-ivory);
  overflow: hidden;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero__media img { position: relative; z-index: 0; width: 100%; height: 100%; object-fit: cover; }

/* Soft vignette, same treatment as the inner-page heroes. */
.hero__media::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(120% 100% at 50% 26%, transparent 42%, rgb(0 0 0 / 0.32) 100%);
}

/* Directional gradient + Forest Green brand tint — the homepage keeps its
   own slightly more dramatic three-stop curve since it is the flagship,
   full-bleed hero, but now shares the same tint token and responsive
   alpha as every inner page. */
.hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(180deg,
    rgb(var(--tint-forest) / calc(var(--hero-overlay-alpha) * 0.85)) 0%,
    rgb(var(--tint-forest) / calc(var(--hero-overlay-alpha) * 0.7)) 38%,
    rgb(var(--tint-forest) / calc(var(--hero-overlay-alpha) * 1.4)) 100%);
}

.hero__inner {
  padding-block: var(--space-7) var(--space-6);
  width: 100%;
}

.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-gold-200);
  margin-bottom: var(--space-3);
}

.hero h1 {
  font-size: var(--text-h1);
  max-width: 16ch;
  margin-bottom: var(--space-3);
}

.hero__sub {
  font-size: var(--text-body-lg);
  max-width: 52ch;
  color: var(--color-ivory);
  opacity: 0.88;
  margin-bottom: var(--space-5);
}

/* .hero__actions and .cta-band now live in components.css as shared
   components used across the homepage and every inner page. */

.hero__stats {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: var(--space-4);
  border-top: 1px solid rgba(247,244,236,0.2);
  padding-top: var(--space-4);
}
@media (min-width: 640px) {
  .hero__stats { grid-template-columns: repeat(3, 1fr); }
}

.scroll-cue {
  position: absolute;
  right: var(--gutter);
  bottom: var(--space-4);
  writing-mode: vertical-rl;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  opacity: 0.7;
}
.scroll-cue__line { width: 1px; height: 48px; background: var(--color-gold-200); }