.hero {
  background: linear-gradient(135deg, #0A2540 0%, #0e3460 55%, #0f3d72 100%);
  min-height: 100vh; display: flex; align-items: center;
  padding: calc(var(--hh) + 60px) 0 80px;
  position: relative; overflow: hidden;
}
.hero::before {
  content: ''; position: absolute;
  width: 700px; height: 700px; border-radius: 50%;
  background: radial-gradient(circle, rgba(0,212,160,.12) 0%, transparent 70%);
  right: -200px; top: -100px; pointer-events: none;
}
.hero::after {
  content: ''; position: absolute;
  width: 400px; height: 400px; border-radius: 50%;
  background: radial-gradient(circle, rgba(0,212,160,.07) 0%, transparent 70%);
  left: -100px; bottom: -100px; pointer-events: none;
}
.hero__inner { position: relative; z-index: 1; max-width: 760px; }

.hero__badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(0,212,160,.15);
  border: 1px solid rgba(0,212,160,.3);
  color: var(--accent); padding: 6px 16px; border-radius: 50px;
  font-size: .8125rem; font-weight: 500;
  margin-bottom: 28px; letter-spacing: .02em;
}
.hero__badge::before {
  content: ''; width: 6px; height: 6px;
  background: var(--accent); border-radius: 50%;
}

.hero__title {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 800; color: #fff;
  line-height: 1.15; margin-bottom: 24px;
  letter-spacing: -.02em;
}
.hero__title em { font-style: normal; color: var(--accent); }

.hero__subtitle {
  font-size: clamp(1rem, 2vw, 1.1875rem);
  color: rgba(255,255,255,.75); line-height: 1.7;
  margin-bottom: 44px; max-width: 600px;
}

.hero__actions { display: flex; gap: 16px; flex-wrap: wrap; }

.hero__stats {
  display: flex; gap: 48px;
  margin-top: 72px; padding-top: 40px;
  border-top: 1px solid rgba(255,255,255,.12);
  flex-wrap: wrap;
}
.hero__stat-val {
  font-size: 2rem; font-weight: 800;
  color: var(--accent); line-height: 1;
}
.hero__stat-lbl {
  font-size: .8125rem; color: rgba(255,255,255,.6);
  margin-top: 4px; line-height: 1.4;
}

@media (max-width: 768px) {
  .hero__stats { gap: 28px; }
}
@media (max-width: 480px) {
  .hero__actions { flex-direction: column; }
  .hero__actions .btn { justify-content: center; }
}