Dark Glow CTA

<!--
  The section paints its own near-black surface and a blurred radial glow, so it
  looks identical on a light or a dark page and needs no dark: variants. The
  glow is aria-hidden and sits behind the content on the z-axis; the button
  rings are offset against gray-950, the surface they actually sit on.
-->
<section class="relative isolate mx-auto w-full max-w-5xl overflow-hidden rounded-2xl bg-gray-950">
  <div class="pointer-events-none absolute left-1/2 top-0 -z-10 h-64 w-64 -translate-x-1/2 rounded-full bg-blue-500/30 blur-3xl" aria-hidden="true"></div>

  <div class="px-6 py-14 text-center sm:px-10 sm:py-20">
    <h2 class="text-2xl font-bold tracking-tight text-white sm:text-4xl">
      Build in the dark, ship in the light
    </h2>
    <p class="mx-auto mt-4 max-w-xl text-base leading-relaxed text-gray-300">
      A focused workspace for teams that would rather ship than configure.
    </p>

    <div class="mt-8 flex flex-col items-center justify-center gap-3 sm:flex-row">
      <a
        href="#"
        class="inline-flex w-full items-center justify-center rounded-lg bg-white px-5 py-2.5 text-sm font-semibold text-gray-900 transition-colors hover:bg-gray-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-offset-2 focus-visible:ring-offset-gray-950 motion-reduce:transition-none sm:w-auto"
      >
        Get started
      </a>
      <a
        href="#"
        class="inline-flex w-full items-center justify-center rounded-lg border border-white/20 bg-transparent px-5 py-2.5 text-sm font-semibold text-white transition-colors hover:bg-white/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-offset-2 focus-visible:ring-offset-gray-950 motion-reduce:transition-none sm:w-auto"
      >
        Read the docs
      </a>
    </div>
  </div>
</section>