.hero{
  padding: 18px;
  border-radius: 28px;
  border: 1px solid var(--line);
  background:
    radial-gradient(800px 400px at 10% 10%, rgba(124,92,255,.35), transparent 55%),
    radial-gradient(700px 380px at 90% 20%, rgba(46,231,165,.22), transparent 60%),
    linear-gradient(180deg, rgba(15,27,51,.92), rgba(12,24,48,.92));
  box-shadow: var(--shadow);
}
.hero__inner{display:grid;grid-template-columns: 1.2fr .8fr;gap:16px;align-items:center}
@media (max-width: 860px){ .hero__inner{grid-template-columns:1fr} }

.h1{font-size:42px;line-height:1.05;margin:0 0 10px;font-weight:900;letter-spacing:-.4px}
.lead{color:var(--muted);font-size:16px;line-height:1.55;margin:0 0 16px}
.hero__cta{display:flex;gap:10px;flex-wrap:wrap}
.kpis{display:grid;gap:10px}
.kpi{padding:14px;border-radius:18px;border:1px solid var(--line);background: rgba(255,255,255,.05)}
.kpi b{display:block;font-size:18px}
.kpi span{color:var(--muted);font-size:13px}

.section{margin-top:18px}
.section h2{margin:0 0 10px;font-size:22px}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-width: 980px){ .cards{grid-template-columns:1fr} }
.cardx{
  padding:16px;border-radius:22px;border:1px solid var(--line);
  background: rgba(255,255,255,.05);
}
.cardx h3{margin:0 0 8px}
.cardx p{margin:0;color:var(--muted);line-height:1.55}
.steps{display:grid;gap:10px}
.step{
  display:flex;gap:10px;align-items:flex-start;
  padding:14px;border-radius:18px;border:1px solid var(--line);
  background: rgba(255,255,255,.05);
}
.step .dot{
  width:34px;height:34px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  background: rgba(124,92,255,.20);
  border: 1px solid rgba(124,92,255,.30);
  font-weight:900;
}