Beta Access Signup Form Section with Feature List

<section class="relative z-10 max-w-7xl sm:px-6 lg:px-8 mr-auto ml-auto pt-8 pr-4 pb-24 pl-4">
  <div class="relative overflow-hidden rounded-3xl bg-neutral-900 ring-1 ring-white/10">
    <div
      class="absolute inset-0 bg-[radial-gradient(circle_at_30%_20%,rgba(16,185,129,.08),transparent_40%),radial-gradient(circle_at_70%_80%,rgba(99,102,241,.08),transparent_45%)]">
    </div>
    <div class="relative grid grid-cols-1 lg:grid-cols-2 gap-0">
      <div class="p-6 sm:p-10 border-b lg:border-b-0 lg:border-r border-white/10">
        <p class="text-[11px] uppercase tracking-[0.18em] text-neutral-400">Join the beta</p>
        <h2 class="mt-2 text-3xl sm:text-4xl text-white tracking-tighter">Get early access</h2>
        <p class="mt-3 text-sm text-neutral-300">Be first to try multicam sync, AI dialog polish, and new color tools.
          We’ll send limited invites.</p>

        <ul class="mt-6 space-y-3">
          <li class="flex items-center gap-3 text-neutral-200">
            <span class="h-1.5 w-1.5 rounded-full bg-emerald-500"></span>
            Apple Silicon optimized
          </li>
          <li class="flex items-center gap-3 text-neutral-200">
            <span class="h-1.5 w-1.5 rounded-full bg-emerald-500"></span>
            No credit card required
          </li>
          <li class="flex items-center gap-3 text-neutral-200">
            <span class="h-1.5 w-1.5 rounded-full bg-emerald-500"></span>
            Cancel anytime
          </li>
        </ul>
      </div>

      <form class="p-6 sm:p-10 space-y-4" action="#" method="post" aria-label="Beta form">
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
          <label class="block">
              <span class="text-sm text-neutral-300">Name</span>
              <input type="text" required="" class="mt-1 w-full rounded-lg bg-neutral-900 border border-white/10 text-white placeholder:text-neutral-500 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-emerald-500/50" placeholder="Jane Doe">
            </label>
          <label class="block">
              <span class="text-sm text-neutral-300">Email</span>
              <input type="email" required="" class="mt-1 w-full rounded-lg bg-neutral-900 border border-white/10 text-white placeholder:text-neutral-500 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-emerald-500/50" placeholder="jane@studio.com">
            </label>
        </div>

        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
          <label class="block">
              <span class="text-sm text-neutral-300">Use case</span>
              <select class="mt-1 w-full rounded-lg bg-neutral-900 border border-white/10 text-white px-3 py-2 focus:outline-none focus:ring-2 focus:ring-emerald-500/50">
                <option class="bg-neutral-900">YouTube</option>
                <option class="bg-neutral-900">Commercial</option>
                <option class="bg-neutral-900">Film</option>
                <option class="bg-neutral-900">Social</option>
              </select>
            </label>
          <label class="block">
              <span class="text-sm text-neutral-300">Editing system</span>
              <select class="mt-1 w-full rounded-lg bg-neutral-900 border border-white/10 text-white px-3 py-2 focus:outline-none focus:ring-2 focus:ring-emerald-500/50">
                <option class="bg-neutral-900">Apple Silicon</option>
                <option class="bg-neutral-900">Intel Mac</option>
              </select>
            </label>
        </div>

        <label class="block">
            <span class="text-sm text-neutral-300">What do you edit?</span>
            <textarea rows="4" class="mt-1 w-full rounded-lg bg-neutral-900 border border-white/10 text-white placeholder:text-neutral-500 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-emerald-500/50" placeholder="Shorts, vlogs, client work, films..."></textarea>
          </label>

        <label class="mt-2 inline-flex items-start gap-3">
            <input type="checkbox" required="" class="mt-1 h-4 w-4 rounded border-white/20 bg-neutral-900 text-emerald-500 focus:ring-emerald-500/50">
            <span class="text-xs text-neutral-400">I agree to receive product updates.</span>
          </label>

        <div class="pt-2">
          <button type="submit" class="inline-flex items-center justify-center text-base font-medium text-white bg-gradient-to-b from-emerald-500 to-emerald-600 hover:from-emerald-400 hover:to-emerald-600 rounded-full h-12 px-6 ring-1 ring-emerald-400/30 shadow-[0_6px_24px_-8px_rgba(16,185,129,0.5)] transition">
              Request invite
            </button>
        </div>
      </form>
    </div>
  </div>
</section>