Globe CTA Band

<!--
  A dark CTA band with a half-globe bleeding off the right edge as backdrop. The
  globe is aria-hidden and clipped by the band's overflow-hidden; the copy and
  button carry all the meaning. Stacks centered on phones, row on md+.
-->
<style>
  @keyframes gcb-spin { to { transform: rotate(1turn); } }
</style>

<section class="relative isolate w-full overflow-hidden rounded-2xl bg-gray-950 px-6 py-12 sm:px-10">
  <div class="absolute -right-16 top-1/2 -z-10 h-72 w-72 -translate-y-1/2 opacity-70 sm:-right-8" aria-hidden="true">
    <svg viewBox="0 0 200 200" class="h-full w-full text-sky-400/60 [animation:gcb-spin_40s_linear_infinite] motion-reduce:[animation:none]">
      <defs>
        <pattern id="gcb-dots" width="8" height="8" patternUnits="userSpaceOnUse">
          <circle cx="1.6" cy="1.6" r="1.3" fill="currentColor" />
        </pattern>
        <clipPath id="gcb-clip"><circle cx="100" cy="100" r="92" /></clipPath>
      </defs>
      <g clip-path="url(#gcb-clip)">
        <rect width="200" height="200" fill="url(#gcb-dots)" />
        <ellipse cx="100" cy="100" rx="92" ry="20" fill="none" stroke="currentColor" stroke-opacity="0.4" />
        <ellipse cx="100" cy="100" rx="46" ry="92" fill="none" stroke="currentColor" stroke-opacity="0.3" />
      </g>
      <circle cx="100" cy="100" r="92" fill="none" stroke="currentColor" stroke-opacity="0.5" />
    </svg>
  </div>

  <div class="flex max-w-xl flex-col items-start gap-5 text-left">
    <div>
      <h2 class="text-2xl font-bold tracking-tight text-white sm:text-3xl">Deploy where your users are</h2>
      <p class="mt-2 text-sm leading-relaxed text-gray-300 sm:text-base">Spin up in 34 regions in a single command. No infra tickets, no waiting.</p>
    </div>
    <a href="#" class="inline-flex 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">Get started</a>
  </div>
</section>