Full-Bleed Pattern CTA

<!--
  Full-bleed (w-full, no max-w) so it spans edge to edge. Three layers: a CSS
  dot pattern, a vertical scrim gradient, then the content. The scrim is
  load-bearing - the dots vary the surface luminance, so a gradient overlay is
  what holds white text at 4.5:1 across the whole band.
-->
<section class="relative isolate w-full overflow-hidden bg-gray-900">
  <div class="absolute inset-0 -z-20 bg-[radial-gradient(circle,rgba(255,255,255,0.12)_1px,transparent_1px)] [background-size:16px_16px]" aria-hidden="true"></div>
  <div class="absolute inset-0 -z-10 bg-gradient-to-b from-gray-900/70 to-gray-900/95" aria-hidden="true"></div>

  <div class="mx-auto max-w-3xl px-4 py-16 text-center sm:px-6 sm:py-24">
    <h2 class="text-2xl font-bold tracking-tight text-white sm:text-4xl">
      Ship it. We'll handle the rest.
    </h2>
    <p class="mx-auto mt-4 max-w-xl text-base leading-relaxed text-gray-300">
      Push to main and watch it deploy - no pipelines to babysit, no servers to patch.
    </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-900 motion-reduce:transition-none sm:w-auto"
      >
        Get started
      </a>
    </div>
  </div>
</section>