.hero {
  background: var(--gradient-hero);
  padding: clamp(100px, 12vw, 140px) 0 72px;
  position: relative;
  overflow: hidden;
}

.hero::before,
.hero::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .35;
  pointer-events: none;
}

.hero::before {
  width: 420px;
  height: 420px;
  background: #10b981;
  left: -120px;
  bottom: -180px;
}

.hero::after {
  width: 460px;
  height: 460px;
  background: #14b8a6;
  right: -160px;
  top: 80px;
}

.hero-content {
  max-width: 850px;
  margin-inline: auto;
  text-align: center;
}

.hero p { max-width: 760px; margin: 20px auto 0; font-size: clamp(1.1rem, 2.4vw, 2rem); }
.hero-actions { margin-top: 30px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

.mockup {
  margin-top: 54px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.12);
  overflow: hidden;
  background: #041122;
  box-shadow: 0 30px 60px rgba(0,0,0,.35);
}
.mockup-bar { height: 44px; background: #18263e; display: flex; align-items: center; padding: 0 16px; gap: 7px; color: #738096; font-size: .9rem; }
.dot { width: 12px; height: 12px; border-radius: 50%; }
.dot.r { background: #ef4444; }
.dot.y { background: #f59e0b; }
.dot.g { background: #10b981; }
.mockup-body { display: grid; gap: 18px; padding: 24px; }
.bars { display: flex; align-items: end; gap: 8px; min-height: 150px; }
.bars span { flex: 1; border-radius: 8px; background: linear-gradient(180deg, #10b981, #0f766e); }
.progress-box { background: rgba(255,255,255,.06); border-radius: 14px; padding: 14px; margin-bottom: 10px; }
.progress-line { height: 8px; border-radius: 99px; background: rgba(255,255,255,.08); margin-top: 8px; }
.progress-line i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #34d399, #22d3ee); }

.step-line {
  position: absolute;
  top: 30px;
  left: 12%;
  width: 76%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(16,185,129,.5), transparent);
}
.step-grid {
  position: relative;
  display: grid;
  gap: 24px;
  text-align: center;
}
.step-number {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  margin: 0 auto 22px;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 2rem;
  background: var(--gradient-cta);
  box-shadow: var(--shadow-glow);
}

.showcase {
  background: var(--gradient-showcase);
}

.faq {
  max-width: 780px;
  margin: 0 auto;
}
.faq-item {
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.faq-trigger {
  width: 100%;
  text-align: left;
  padding: 22px 0;
  background: transparent;
  border: 0;
  color: var(--text-white);
  font-size: 1.4rem;
  font-weight: 700;
  display: flex;
  justify-content: space-between;
}
.faq-answer { display: none; padding-bottom: 18px; }
.faq-item.open .faq-answer { display: block; }

.cta-panel {
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 30px;
  background: radial-gradient(circle at center, rgba(16,185,129,.15), transparent 60%), linear-gradient(140deg, #06140f, #0a1f15, #07231f);
  padding: clamp(30px, 7vw, 80px) 26px;
}

@media (min-width: 860px) {
  .mockup-body { grid-template-columns: 1.7fr 1fr; }
  .step-grid { grid-template-columns: repeat(3, 1fr); }
}