Dark Feature Card with Pro Badge and Check Icons

<article class="relative bg-neutral-900 border-white/10 border rounded-2xl pt-6 pr-6 pb-6 pl-6">
  <div class="flex items-center justify-between">
    <h3 class="text-white text-lg sm:text-xl tracking-tight font-medium">Color Grading Tools</h3>
    <span class="text-[11px] text-neutral-300">Pro</span>
  </div>
  <p class="mt-2 text-sm text-neutral-300">Cinema-grade color correction with real-time GPU processing.</p>

  <div class="mt-6 space-y-3">
    <div class="flex items-center justify-between rounded-lg ring-1 ring-emerald-400/20 bg-emerald-500/10 px-3 py-2">
      <span class="text-sm text-emerald-200">Color Wheels</span>
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
        stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
        class="text-emerald-400 w-4 h-4">
        <path d="M20 6 9 17l-5-5" class=""></path>
      </svg>
    </div>
    <div class="flex items-center justify-between rounded-lg ring-1 ring-emerald-400/20 bg-emerald-500/10 px-3 py-2">
      <span class="text-sm text-emerald-200">Curves &amp; LUTs</span>
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
        stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
        class="text-emerald-400 w-4 h-4">
        <path d="M20 6 9 17l-5-5" class=""></path>
      </svg>
    </div>
    <div class="flex items-center justify-between rounded-lg ring-1 ring-emerald-400/20 bg-emerald-500/10 px-3 py-2">
      <span class="text-sm text-emerald-200">HDR Support</span>
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
        stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
        class="text-emerald-400 w-4 h-4">
        <path d="M20 6 9 17l-5-5" class=""></path>
      </svg>
    </div>
    <div class="flex items-center justify-between rounded-lg ring-1 ring-indigo-400/20 bg-indigo-500/10 px-3 py-2">
      <span class="text-sm text-indigo-200">Real-time Scopes</span>
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
        stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
        class="text-indigo-400 w-4 h-4">
        <path d="M20 6 9 17l-5-5" class=""></path>
      </svg>
    </div>
  </div>

  <div class="mt-4">
    <span class="inline-flex items-center gap-2 text-[11px] text-emerald-200 bg-emerald-500/10 rounded-full px-2 py-1 ring-1 ring-emerald-400/20">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="w-3.5 h-3.5">
              <path d="M12 22a1 1 0 0 1 0-20 10 9 0 0 1 10 9 5 5 0 0 1-5 5h-2.25a1.75 1.75 0 0 0-1.4 2.8l.3.4a1.75 1.75 0 0 1-1.4 2.8z" class=""></path>
              <circle cx="13.5" cy="6.5" r=".5" fill="currentColor" class=""></circle>
              <circle cx="17.5" cy="10.5" r=".5" fill="currentColor" class=""></circle>
              <circle cx="6.5" cy="12.5" r=".5" fill="currentColor" class=""></circle>
              <circle cx="8.5" cy="7.5" r=".5" fill="currentColor" class=""></circle>
            </svg>
            Professional grade
          </span>
  </div>
</article>