Footer with overlapping CTA card

Build a footer with Tailwind CSS where a call-to-action card overlaps its top edge. Wrap everything in a relative container: a dark neutral-950 footer with generous top padding, and inside it a white rounded-3xl card pulled upward with a negative margin so it straddles the boundary between the page and the footer. The card is a flex row on md — a headline and one supporting line on the left, a dark primary button and a ghost "Book a demo" button on the right — with a thin shadow. Under the card, the footer proper: a brand column with a wordmark, a one-line description and three small social squares, beside three link columns (Product, Company, Resources) in muted grey that brighten on hover. Close with a divider and a bottom row holding the copyright on the left and Privacy, Terms and Security links on the right, stacking on mobile.

<div class="relative bg-white">
  <footer class="bg-neutral-950 px-6 pb-10 pt-40">
    <div class="mx-auto max-w-6xl">
      <div class="-mt-64 mb-20 rounded-3xl bg-white p-10 shadow-2xl">
        <div class="flex flex-col items-start justify-between gap-6 md:flex-row md:items-center">
          <div>
            <h2 class="text-2xl font-semibold tracking-tight text-neutral-900">Ready when your next release is</h2>
            <p class="mt-2 text-neutral-500">Free for 14 days, no card, and your data leaves with you if it does not fit.</p>
          </div>
          <div class="flex shrink-0 gap-3">
            <a href="#" class="rounded-xl bg-neutral-900 px-5 py-3 text-sm font-medium text-white transition hover:bg-neutral-800">Start building</a>
            <a href="#" class="rounded-xl border border-neutral-200 px-5 py-3 text-sm font-medium text-neutral-900 transition hover:bg-neutral-50">Book a demo</a>
          </div>
        </div>
      </div>

      <div class="grid gap-10 md:grid-cols-4">
        <div>
          <p class="text-lg font-semibold text-white">Acme</p>
          <p class="mt-3 max-w-xs text-sm leading-relaxed text-neutral-400">Build tooling for teams that would rather ship than babysit a pipeline.</p>
          <div class="mt-5 flex gap-2">
            <a href="#" aria-label="GitHub" class="flex h-8 w-8 items-center justify-center rounded-lg bg-white/5 text-sm text-neutral-300 transition hover:bg-white/10"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="M3 7.5A2.5 2.5 0 0 1 5.5 5H9l2 2h7.5A2.5 2.5 0 0 1 21 9.5v7A2.5 2.5 0 0 1 18.5 19h-13A2.5 2.5 0 0 1 3 16.5v-9Z"/></svg></a>
            <a href="#" aria-label="X" class="flex h-8 w-8 items-center justify-center rounded-lg bg-white/5 text-sm text-neutral-300 transition hover:bg-white/10"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="M6 6l12 12M18 6 6 18"/></svg></a>
            <a href="#" aria-label="LinkedIn" class="flex h-8 w-8 items-center justify-center rounded-lg bg-white/5 text-sm text-neutral-300 transition hover:bg-white/10">in</a>
          </div>
        </div>

        <div>
          <p class="text-sm font-medium text-white">Product</p>
          <ul class="mt-4 space-y-2.5 text-sm text-neutral-400">
            <li><a href="#" class="transition hover:text-white">Overview</a></li>
            <li><a href="#" class="transition hover:text-white">Pipelines</a></li>
            <li><a href="#" class="transition hover:text-white">Environments</a></li>
            <li><a href="#" class="transition hover:text-white">Pricing</a></li>
          </ul>
        </div>
        <div>
          <p class="text-sm font-medium text-white">Company</p>
          <ul class="mt-4 space-y-2.5 text-sm text-neutral-400">
            <li><a href="#" class="transition hover:text-white">About</a></li>
            <li><a href="#" class="transition hover:text-white">Careers</a></li>
            <li><a href="#" class="transition hover:text-white">Customers</a></li>
            <li><a href="#" class="transition hover:text-white">Blog</a></li>
          </ul>
        </div>
        <div>
          <p class="text-sm font-medium text-white">Resources</p>
          <ul class="mt-4 space-y-2.5 text-sm text-neutral-400">
            <li><a href="#" class="transition hover:text-white">Docs</a></li>
            <li><a href="#" class="transition hover:text-white">Changelog</a></li>
            <li><a href="#" class="transition hover:text-white">Status</a></li>
            <li><a href="#" class="transition hover:text-white">Support</a></li>
          </ul>
        </div>
      </div>

      <div class="mt-12 flex flex-col gap-3 border-t border-white/10 pt-6 text-xs text-neutral-500 sm:flex-row sm:items-center sm:justify-between">
        <p>© 2026 Acme Labs, Inc.</p>
        <div class="flex gap-5">
          <a href="#" class="transition hover:text-neutral-300">Privacy</a>
          <a href="#" class="transition hover:text-neutral-300">Terms</a>
          <a href="#" class="transition hover:text-neutral-300">Security</a>
        </div>
      </div>
    </div>
  </footer>
</div>