/* ================================================================
   SAMAAN MIKHAEL — HOMEPAGE ONLY  |  assets/css/index.css
   Styles specific to index.html that live outside main.css.
   ================================================================ */

/* ── Hero Portrait Ground
   A gradient fade at the base of the portrait image anchors it
   visually to the section instead of floating in space.
   ================================================================ */
.hero-portrait-ground {
  position: absolute;
  bottom: -2px;
  left: -15%;
  right: -15%;
  height: 140px;
  background: linear-gradient(to top, var(--bg) 0%, var(--bg) 20%, transparent 100%);
  pointer-events: none;
  z-index: 3;
  transition: background 0.7s cubic-bezier(0.76,0,0.24,1);
}

/* Decorative horizontal rule beneath portrait */
.hero-portrait-rule {
  position: absolute;
  bottom: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(187,38,73,0.5) 50%, transparent);
  z-index: 4;
}

/* ── Hero CTA sub-option hover refinements ── */
.hero-subopt-link {
  transition: background 0.25s ease, color 0.25s ease, transform 0.3s cubic-bezier(0.23,1,0.32,1);
}
.hero-subopt-link:hover {
  background: rgba(187,38,73,0.08);
  transform: translateX(4px);
}
.hero-cta-choice {
  transition: background 0.25s ease, color 0.25s ease;
  border-radius: 0.75rem;
}
.hero-cta-choice:hover {
  background: rgba(187,38,73,0.06);
}

/* ── GSAP Number Counter — stat display elements ── */
.stat-count {
  display: inline;
  font-variant-numeric: tabular-nums;
}