Gradient Feature Card with Hover Interaction

<div class="group relative overflow-hidden hover:border-white/15 transition-all text-center bg-black/40 border-white/10 border rounded-[28px] px-8 py-8">
        <div class="absolute inset-0 pointer-events-none -z-10" style="background:
          radial-gradient(180px 140px at 4% 0%, rgba(59,130,246,0.45), transparent 60%),
          radial-gradient(220px 160px at 100% 100%, rgba(147,197,253,0.10), transparent 70%),
          linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.00))"></div>
        <div class="mx-auto inline-flex h-10 w-10 items-center justify-center rounded-lg bg-white/5 ring-1 ring-white/10">
          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="settings-2" class="lucide lucide-settings-2 w-[18px] h-[18px] text-gray-300"><path d="M14 17H5" class=""></path><path d="M19 7h-9" class=""></path><circle cx="17" cy="17" r="3" class=""></circle><circle cx="7" cy="7" r="3" class=""></circle></svg>
        </div>
        <h3 class="mt-4 text-2xl sm:text-3xl tracking-tight" style="font-weight: 600">System controls</h3>
        <p class="mt-3 text-sm text-gray-300 max-w-md mx-auto">
          Toggle Wi‑Fi, Bluetooth, Focus, audio, and more—hands‑free.
        </p>
      </div>