Dark Glow Hero

<!--
  The hero paints its own near-black surface and its own glow, so it looks
  identical on a light page or a dark one - no dark: variants needed. The glow is
  a radial blur layer, aria-hidden and behind the content on the z-axis. -->
<section class="relative isolate w-full overflow-hidden rounded-2xl bg-gray-950">
  <div class="absolute left-1/2 top-0 -z-10 h-64 w-64 -translate-x-1/2 -translate-y-1/3 rounded-full bg-blue-600/40 blur-3xl sm:h-96 sm:w-96" aria-hidden="true"></div>

  <div class="px-6 py-14 text-center sm:px-8 sm:py-24">
    <p class="inline-block rounded-full border border-white/15 bg-white/5 px-3 py-1 text-xs font-semibold text-gray-200">Now in beta</p>
    <h1 class="mx-auto mt-5 max-w-2xl text-3xl font-bold leading-tight tracking-tight text-white sm:text-5xl">
      The dark-mode-native command center
    </h1>
    <p class="mx-auto mt-4 max-w-xl text-base leading-relaxed text-gray-400">
      Built for the people who live in their terminal and never turn the lights on.
    </p>
    <div class="mt-7 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">
        Start free
      </a>
      <a href="#" class="inline-flex w-full items-center justify-center rounded-lg border border-white/20 px-5 py-2.5 text-sm font-semibold text-gray-100 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>