/* Hero: match Epix – bigger text, shorter height so next section peeks on iPad */

/* Base hero: shorter height, tight bottom padding so Explore Content sits close */
.hero {
  min-height: auto !important;
  padding: 5rem var(--container-padding-x, 20px) 1.25rem !important;
}
.hero-title {
  font-size: clamp(2.5rem, 6.5vw, 4rem) !important;
  margin-bottom: 1rem !important;
}
.hero-desc {
  font-size: 1.35rem !important;
  margin-bottom: 1.25rem !important;
}
.hero-buttons {
  margin-bottom: 0.25rem !important;
}
.hero-features {
  margin-top: 1.25rem !important;
  padding-top: 0.25rem !important;
}

/* Tablet & iPad (768px–1024px): big hero title, tight bottom so Explore Content is close */
@media (min-width: 768px) and (max-width: 1024px) {
  .hero {
    min-height: auto !important;
    padding: 5.5rem 20px 1rem !important;
  }
  .hero-title {
    font-size: clamp(2.75rem, 7vw, 4.25rem) !important;
    line-height: 1.22 !important;
    margin-bottom: 1rem !important;
  }
  .hero-desc {
    font-size: 1.4rem !important;
    margin-bottom: 1.25rem !important;
  }
  .hero-features {
    margin-top: 1.25rem !important;
    gap: 1rem 1.75rem !important;
  }
}

/* Large tablet / iPad landscape (1025–1280px): keep hero title big */
@media (min-width: 1025px) and (max-width: 1280px) {
  .hero-title {
    font-size: clamp(2.75rem, 4.5vw, 4rem) !important;
    line-height: 1.25 !important;
  }
}

/* Desktop (992px+): optional min-height; bottom gap kept small via padding above */
@media (min-width: 992px) {
  .hero {
    min-height: 70vh !important;
  }
}