<section class="relative overflow-hidden rounded-[32px] bg-slate-950 px-6 py-7 text-white shadow-2xl shadow-slate-950/20">
  <div class="absolute inset-x-0 top-0 h-40 bg-gradient-to-r from-cyan-400/20 via-sky-400/10 to-violet-400/20 blur-3xl"></div>
  <div class="absolute -right-10 top-8 h-36 w-36 rounded-full bg-cyan-400/20 blur-3xl"></div>
  <div class="absolute bottom-0 left-0 h-32 w-32 rounded-full bg-violet-500/20 blur-3xl"></div>
  <div class="relative space-y-6">
    <div class="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-3 py-1 text-xs font-medium text-slate-200">
      <span class="h-2 w-2 rounded-full bg-emerald-400"></span>
      Shipping fast UI systems for modern apps
    </div>
    <div class="space-y-3">
      <h1 class="max-w-2xl text-4xl font-semibold tracking-tight text-white">Build a sharper product surface before your first user lands.</h1>
      <p class="max-w-xl text-sm leading-6 text-slate-300">Layered typography, strong spacing, and conversion-ready CTAs for startup launches, product reveals, and campaign microsites.</p>
    </div>
    <div class="flex flex-wrap gap-3">
      <a class="inline-flex items-center justify-center rounded-full bg-white px-5 py-2.5 text-sm font-semibold text-slate-950" href="#">Start free</a>
      <a class="inline-flex items-center justify-center rounded-full border border-white/15 bg-white/5 px-5 py-2.5 text-sm font-semibold text-white" href="#">See demo</a>
    </div>
    <div class="grid gap-3 sm:grid-cols-3">
      <div class="rounded-2xl border border-white/10 bg-white/5 p-4">
        <p class="text-xs uppercase tracking-[0.24em] text-slate-400">Teams</p>
        <p class="mt-2 text-2xl font-semibold">1.2k</p>
      </div>
      <div class="rounded-2xl border border-white/10 bg-white/5 p-4">
        <p class="text-xs uppercase tracking-[0.24em] text-slate-400">Launches</p>
        <p class="mt-2 text-2xl font-semibold">184</p>
      </div>
      <div class="rounded-2xl border border-white/10 bg-white/5 p-4">
        <p class="text-xs uppercase tracking-[0.24em] text-slate-400">Avg. uplift</p>
        <p class="mt-2 text-2xl font-semibold">31%</p>
      </div>
    </div>
  </div>
</section>