*{box-sizing:border-box}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto;
  background:#eef4fb;
  color:#0f172a;
}
main{max-width:1200px;margin:auto;padding:64px 20px}

.hero{
  background:#0f2a44;
  color:#ffffff;
  border-radius:28px;
  padding:64px;
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:48px;
}
.hero h1{font-size:44px;line-height:1.15;margin:0}
.hero p{font-size:18px;color:#dbe7f3}

.badge{
  display:inline-block;
  padding:8px 14px;
  background:#123a5c;
  border-radius:999px;
  font-size:13px;
  margin-bottom:18px;
}

.metric{
  background:#ffffff;
  border-radius:20px;
  padding:36px;
  box-shadow:0 20px 40px rgba(15,42,68,.12);
}
.metric h3{margin:0 0 10px;color:#0f2a44}
.metric span{font-size:36px;font-weight:700;color:#0f2a44}

.grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  margin:72px 0;
}

.path{
  background:#ffffff;
  border-radius:28px;
  padding:48px;
  box-shadow:0 16px 36px rgba(15,42,68,.08);
}
.path h2{margin-top:0;color:#0f2a44}

.step{
  display:grid;
  grid-template-columns:90px 1fr;
  gap:24px;
  margin-bottom:36px;
}
.step div:first-child{
  font-size:13px;
  color:#64748b;
  text-transform:uppercase;
  letter-spacing:.06em;
}

.panel{
  background:#ffffff;
  border-radius:28px;
  padding:56px;
  margin:72px 0;
  box-shadow:0 18px 40px rgba(15,42,68,.08);
}
.panel h2{margin-top:0;color:#0f2a44}

.panel p{font-size:17px;line-height:1.85;color:#1e293b}

.linkbox{
  background:linear-gradient(135deg,#e6f0fa,#f8fbff);
  border-radius:24px;
  padding:44px;
}
.linkbox a{
  color:#0f2a44;
  font-weight:600;
  text-decoration:none;
  border-bottom:2px solid #0f2a44;
}

@media(max-width:900px){
.hero{grid-template-columns:1fr;padding:40px}
.grid{grid-template-columns:1fr}
}