<section class="hero-centered">
  <div class="waitlist-tag">
    <span class="waitlist-dot"></span>
    <span>247 people on the waitlist</span>
  </div>
  <h1 class="hero-title">Coming soon.<br/>Worth the wait.</h1>
  <p class="hero-sub">We're putting the finishing touches on something great. Drop your email and be first to know.</p>
  <form class="waitlist-form" onsubmit="return false">
    <input class="input" type="email" placeholder="your@email.com" required style="min-width:260px" />
    <button type="submit" class="btn btn-primary">Join waitlist →</button>
  </form>
  <p class="hero-sub" style="font-size:0.8125rem">No spam. Unsubscribe anytime.</p>
</section>

<style>
.waitlist-tag {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.8125rem; color: var(--muted);
  border: 1px solid var(--border); padding: 0.375rem 0.875rem;
  border-radius: 9999px; background: var(--surface);
}
.waitlist-dot {
  width: 6px; height: 6px; border-radius: 50%; background: #22C55E;
  box-shadow: 0 0 0 3px rgba(34,197,94,0.2);
  animation: pulse 2s infinite;
}
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 3px rgba(34,197,94,0.2); } 50% { box-shadow: 0 0 0 6px rgba(34,197,94,0.08); } }
.waitlist-form { display: flex; gap: 0.75rem; flex-wrap: wrap; justify-content: center; }
</style>