/* ==========================================================================
   Homepage-only layout (index.html). Shared theme lives in style.css.
   ========================================================================== */

/* Hero */
.hero {
  background-image: var(--grad-hero), url('../../AdobeStock_1916990736-scaled.jpeg');
  background-size: cover; background-position: center;
  background-color: #092761; padding: 60px 0 240px; overflow: hidden;
}
.hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.hero h1 { font-family: var(--font-head); font-size: 62px; font-weight: 600; color: #fff; max-width: 910px; margin-bottom: 22px; }
.hero p { color: #fff; font-family: var(--font-head); font-size: 18px; line-height: 1.6; max-width: 550px; margin-bottom: 35px; }
.hero-buttons { display: flex; flex-wrap: wrap; gap: 16px; }
.hero-video { position: relative; border-radius: 8px; overflow: hidden; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35); aspect-ratio: 16 / 9; }
.hero-video iframe { width: 100%; height: 100%; border: 0; }

/* Feature cards (pulled up over hero) */
.problem { padding: 0 0 90px; display: flow-root; }
.features {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
  margin-top: -126px; position: relative; z-index: 5; margin-bottom: 120px;
}

/* Problem two-column */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.problem-images { position: relative; }
.problem-images .img-back { border-radius: 5px; overflow: hidden; max-width: 531px; margin-left: auto; }
.problem-images .img-front { border-radius: 5px; overflow: hidden; max-width: 414px; margin-top: -125px; box-shadow: 0 15px 45px rgba(0, 0, 0, 0.15); }
.problem-text h2 { font-size: 61px; margin-bottom: 7px; }
.problem-text p { margin-bottom: 16px; font-size: 18px; line-height: 1.8; }
.problem-text .btn { margin-top: 24px; }

/* Solution — dark navy */
.solution { background: var(--navy-deep); padding: 120px 0 200px; }
.solution-intro { max-width: 900px; margin-bottom: 45px; }
.solution-intro h2 { font-size: 61px; color: #fff; margin-bottom: 12px; }
.solution-intro p { color: rgba(255, 255, 255, 0.85); font-family: var(--font-head); font-size: 16px; line-height: 1.8; margin-bottom: 6px; }
.solution .steps { grid-template-columns: repeat(3, 1fr); }

/* Stats — bright blue box overlapping the solution above */
.stats { background: #fff; display: flow-root; }
.stats-box {
  background: var(--blue-box); border-radius: 5px; overflow: hidden;
  display: grid; grid-template-columns: 1fr 1fr; text-align: center;
  padding: 50px 20px; margin-top: -126px; position: relative; z-index: 10;
  width: 90%; max-width: var(--maxw); margin-left: auto; margin-right: auto;
}
.stat { padding: 5px 20px; }
.stat:first-child { border-right: 1px solid rgba(255, 255, 255, 0.35); }
.stat .num { font-family: var(--font-head); font-weight: 600; font-size: 58px; color: #fff; line-height: 1.1; }
.stat p { color: #fff; font-family: var(--font-head); font-size: 17px; margin-top: 4px; }

/* Audience — white, underlined blocks */
.audience { padding: 94px 0 60px; }
.audience-head { display: grid; grid-template-columns: 3fr 2fr; gap: 40px; align-items: center; margin-bottom: 42px; }
.audience-head h2 { font-size: 61px; color: var(--navy); }
.audience-head p { color: var(--body-text); font-family: var(--font-head); font-size: 18px; line-height: 1.8; }
.audience-card { padding: 33px 0; border-bottom: 1px solid #cccccc; }
.audience-card h3 { font-family: var(--font-head); font-size: 32px; color: var(--navy); line-height: 1.2; margin-bottom: 3px; }
.audience-card p { color: var(--body-text); font-family: var(--font-head); font-size: 18px; line-height: 1.8; max-width: 730px; }

/* Responsive */
@media (max-width: 980px) {
  .hero h1 { font-size: 46px; }
  .hero-grid { grid-template-columns: 1fr; }
  .features { grid-template-columns: 1fr 1fr; margin-top: -80px; }
  .two-col { grid-template-columns: 1fr; }
  .problem-text h2 { font-size: 44px; }
  .solution-intro h2 { font-size: 44px; }
  .solution .steps { grid-template-columns: 1fr; }
  .stats-box { grid-template-columns: 1fr; gap: 30px; }
  .stat:first-child { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.35); padding-bottom: 25px; }
  .audience-head { grid-template-columns: 1fr; }
  .audience-head h2 { font-size: 44px; }
  .problem-images { max-width: 480px; margin: 0 auto; }
}
@media (max-width: 560px) {
  .hero h1 { font-size: 32px; }
  .features { grid-template-columns: 1fr; }
  .solution-intro h2, .audience-head h2, .problem-text h2 { font-size: 30px; }
  .audience-card h3 { font-size: 26px; }
}