Security Feature Card

<div class="flex flex-col justify-between rounded-3xl bg-white text-zinc-900 p-8 max-w-sm h-[600px] hover:scale-105 transition-all duration-300 shadow-2xl hover:shadow-3xl group opacity-0 translate-y-[40px] blur-lg animate-[fadeInSlideBlur_0.8s_ease-out_forwards]" style="box-shadow: rgba(0, 0, 0, 0.15) 0px 25px 50px -12px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;">
  <div class="flex flex-1 bg-cover rounded-2xl items-center justify-center" style="background-image: url(https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/686aa8d3-7d4f-455f-afba-ed9399e3708b_800w.jpg);">
    <div class="relative"></div>
  </div>
  <div class="space-y-6 mt-8">
    <div class="flex items-center justify-between">
      <span class="text-sm uppercase tracking-wide text-zinc-700 font-medium font-geist">Enterprise Security</span>
      <div class="flex gap-1">
        <div class="w-2 h-2 bg-green-500 rounded-full"></div>
        <div class="w-2 h-2 bg-green-500 rounded-full"></div>
        <div class="w-2 h-2 bg-green-500 rounded-full"></div>
      </div>
    </div>
    <h2 class="text-2xl sm:text-3xl font-semibold leading-tight tracking-tight font-geist">Military-grade encryption & 2FA authentication</h2>
    <div class="flex items-center justify-between pt-2">
      <div class="text-sm text-zinc-600">
        <p class="font-geist">SOC 2 Type II Certified</p>
        <p class="font-geist">Bank-level security protocols</p>
      </div>
      <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-6 h-6 group-hover:translate-x-1 group-hover:-translate-y-1 transition-transform">
        <path d="M7 7h10v10"></path>
        <path d="M7 17 17 7"></path>
      </svg>
    </div>
  </div>
  <style>@keyframes fadeInSlideBlur { to { opacity: 1; transform: translateY(0); filter: blur(0px); } }</style>
</div>