:root {
  --primary:#2f4f6f;
  --accent:#5ba4cf;
  --bg:#f8fafc;
  --green:#4caf50;
}
body {
  background: var(--bg);
  font-family: 'Poppins','Segoe UI',sans-serif;
  color:#333;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
}
.hero {
  display:flex;
  flex-wrap:wrap;
  max-width:1200px;
  width:100%;
  background:#fff;
  border-radius:1rem;
  box-shadow:0 4px 30px rgba(0,0,0,.08);
  overflow:hidden;
}
.hero-left {
  flex:1 1 66%;
  background:linear-gradient(180deg,#eaf3ff 0%,#f9fafc 100%);
  padding:3rem 2rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
.hero-right {
  flex:1 1 34%;
  background:#fff;
  padding:3rem 2rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
.icon-card {
  background:#fff;
  border-radius:1rem;
  box-shadow:0 4px 10px rgba(0,0,0,.05);
  padding:1rem;
  text-align:center;
  width:140px;
}
.icon-card i { font-size:2rem; color:var(--accent); }
.icon-card .label { margin-top:.5rem; font-weight:600; color:var(--primary); }
.icon-card .desc { font-size:.8rem; color:#666; }
.no-gap {
  display: block;
  line-height: 1.2;
  margin-bottom: 0;
}
@media(max-width:800px){
  .hero{flex-direction:column-reverse;}
  .hero-left{border-top:1px solid #ddd;}
}