.hero{
  text-align:center;
  padding:80px 24px 60px;
  max-width:720px;
  margin:0 auto;
  position:relative;
}

.hero h1{
  font-size:36px;
  font-weight:700;
  letter-spacing:-.5px;
  margin-bottom:16px;
  background:var(--gradient);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

.hero p{
  font-size:17px;
  color:var(--color-text-light);
  line-height:1.7;
  max-width:560px;
  margin:0 auto 32px;
}

.hero-illustration{
  width:100%;
  max-width:440px;
  height:auto;
  margin:0 auto;
  display:block;
}

.section{padding:60px 24px;max-width:1080px;margin:0 auto}

.section-title{
  text-align:center;
  font-size:28px;
  font-weight:700;
  letter-spacing:-.3px;
  margin-bottom:12px;
}

.section-subtitle{
  text-align:center;
  font-size:15px;
  color:var(--color-text-light);
  margin-bottom:48px;
  max-width:480px;
  margin-left:auto;
  margin-right:auto;
}

.features-bg{
  background:var(--color-bg-light);
  background-image:url('../img/feature-bg.svg');
  background-size:cover;
  background-position:center;
}

.features-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:24px;
}

.feature-card{
  background:var(--color-bg);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  padding:28px 24px;
  transition:box-shadow .2s,transform .2s;
}

.feature-card:hover{
  box-shadow:var(--shadow-lg);
  transform:translateY(-2px);
}

.feature-card .icon{
  width:40px;
  height:40px;
  margin-bottom:16px;
  display:block;
}

.feature-card h3{
  font-size:15px;
  font-weight:600;
  margin-bottom:8px;
}

.feature-card p{
  font-size:13px;
  color:var(--color-text-light);
  line-height:1.6;
}

.values-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:32px;
  text-align:center;
}

.value-item .icon{
  width:48px;
  height:48px;
  margin:0 auto 16px;
  display:block;
}

.value-item h3{font-size:16px;font-weight:600;margin-bottom:8px}
.value-item p{font-size:14px;color:var(--color-text-light);line-height:1.6}

.stats{
  background:var(--gradient);
  padding:48px 24px;
  margin-top:60px;
}

.stats-inner{
  max-width:1080px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
  text-align:center;
}

.stat-item h3{
  font-size:32px;
  font-weight:700;
  color:#fff;
  margin-bottom:4px;
}

.stat-item p{
  font-size:13px;
  color:rgba(255,255,255,.8);
}

.cta{
  text-align:center;
  padding:60px 24px;
}

.cta h2{font-size:24px;font-weight:700;margin-bottom:12px}
.cta p{font-size:15px;color:var(--color-text-light);margin-bottom:24px}

.btn-cta{
  display:inline-block;
  padding:12px 32px;
  border-radius:var(--radius);
  background:var(--gradient);
  color:#fff;
  font-size:15px;
  font-weight:600;
  border:none;
  cursor:pointer;
  transition:opacity .15s;
}
.btn-cta:hover{opacity:.9;text-decoration:none}

@media(max-width:768px){
  .hero h1{font-size:28px}
  .hero p{font-size:15px}
  .values-grid{grid-template-columns:1fr;gap:24px}
  .stats-inner{grid-template-columns:repeat(2,1fr)}
  .footer-inner{flex-direction:column;gap:16px;text-align:center}
}