/* =========================
   HOME HERO
========================= */
.hero{
  position:relative;
  background:#eee;
}

.hero-media{
  height:520px;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

/* Overlay card placement */
.hero-overlay{
  position:absolute;
  left:0;
  right:0;
  bottom:42px;
}

.hero-card{
  width:min(640px, 92%);
  background:#fff;
  border-radius:22px;
  padding:34px 34px 28px;
  box-shadow:0 18px 40px rgba(0,0,0,0.14);
}

.hero-card h1{
  margin:0 0 14px 0;
  font-size:48px;
  letter-spacing:-1px;
  line-height:1.05;
  color:#0a1a3a;
}

.hero-card p{
  margin:0 0 22px 0;
  color:#5b667d;
  line-height:1.7;
  font-size:16px;
  max-width:70ch;
}

.btn-primary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:14px 26px;
  border-radius:999px;
  background:var(--primary);
  color:#fff;
  font-weight:800;
}

.btn-primary:hover{
  background:var(--primary-2);
}

/* =========================
   WHY SECTION
========================= */
.why{
  background:var(--muted-bg);
  padding:54px 0 64px;
}

.why h2{
  margin:0 0 26px 0;
  font-size:clamp(32px, 3.2vw, 54px);
  letter-spacing:-0.8px;
  color:#0a1a3a;
}

.why-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:56px 56px;
  align-items:start;
}

/* bottom row centered like screenshot */
.why-grid > .why-item:nth-child(4){ grid-column:1 / span 1; }
.why-grid > .why-item:nth-child(5){ grid-column:2 / span 1; }

.why-iconbox{
  width:94px;
  height:72px;
  border-radius:14px;
  background:#eef2f7;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:12px;
}

.why-iconimg{
  width:100px;
  height:52px;
  object-fit:contain;
}

.why-item h3{
  margin:16px 0 12px;
  font-size:22px;
  line-height:1.25;
  color:#0a1a3a;
  letter-spacing:-0.2px;
}

.why-item p{
  margin:0;
  color:#5b667d;
  line-height:1.9;
  font-size:16px;
  max-width:44ch;
}

/* =========================
   RESPONSIVE HOME
========================= */
@media (max-width: 980px){
  .hero-media{ height:440px; }
  .hero-overlay{ bottom:22px; }

  .hero-card h1{ font-size:40px; }

  .why-grid{
    grid-template-columns:1fr;
    gap:34px;
  }
  .why-grid > .why-item:nth-child(4),
  .why-grid > .why-item:nth-child(5){
    grid-column:auto;
  }
}