.hero{ padding: 70px 0 40px; text-align:center; }
.hero h1{ font-size: 52px; line-height:1.08; margin: 20px 0; }
.hero p.lead{ font-size:19px; max-width:640px; margin:0 auto 32px; }
.hero-actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.hero-badges{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:26px; }

.audience-scroller{
  display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin: 36px 0 0;
}
.audience-chip{
  background: var(--surface); border:1px solid var(--border); border-radius:999px;
  padding:10px 18px; font-size:14px; font-weight:600; box-shadow: var(--shadow-pop);
}

.feature-card{ padding:30px; }
.feature-card .emoji{ font-size:36px; margin-bottom:14px; display:block; }
.feature-card h3{ font-size:19px; margin: 0 0 8px; }
.feature-card p{ color: var(--text-muted); font-size:15px; margin:0; }

.steps{ counter-reset: step; }
.step{ position:relative; padding:28px 24px 24px; }
.step::before{
  counter-increment: step; content: counter(step);
  position:absolute; top:-16px; left:24px;
  width:40px; height:40px; border-radius:50%;
  background: linear-gradient(120deg, var(--accent), var(--accent-2));
  color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800;
  box-shadow: var(--shadow-pop);
}

.pricing-card{ padding:44px; text-align:center; max-width:440px; margin:0 auto; position:relative; overflow:hidden; }
.pricing-card .price{ font-size:56px; font-weight:800; font-family: var(--ff-display); margin: 10px 0; }
.pricing-card .price span{ font-size:20px; font-weight:600; color:var(--text-muted); }
.pricing-list{ list-style:none; padding:0; margin: 24px 0 30px; text-align:left; display:inline-block; }
.pricing-list li{ padding:8px 0; font-size:15px; }
.pricing-list li::before{ content:"✅ "; }

.mock-phone{
  width: 260px; margin: 0 auto; border-radius: 34px; background: var(--surface);
  box-shadow: var(--shadow-soft); border: 8px solid var(--surface-2); padding: 14px;
}