Animated Radar Feature Card

<div class="group overflow-hidden hover:border-white/20 transition-colors duration-500 md:p-8 flex flex-col h-full border-white/10 border rounded-3xl pt-6 pr-6 pb-6 pl-6 relative">
        <div class="absolute inset-0 bg-gradient-to-br from-sky-500/10 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none"></div>
        
        <!-- Visual -->
        <div class="relative w-full h-48 mb-8 rounded-2xl bg-black/40 border border-white/5 overflow-hidden flex items-center justify-center">
          <div class="absolute inset-0 bg-[radial-gradient(circle_at_center,_var(--tw-gradient-stops))] from-sky-500/10 via-transparent to-transparent animate-pulse"></div>
          <!-- Radar Effect -->
          <div class="absolute w-64 h-64 border border-sky-500/20 rounded-full flex items-center justify-center">
            <div class="w-48 h-48 border border-sky-500/20 rounded-full flex items-center justify-center">
              <div class="w-32 h-32 border border-sky-500/20 rounded-full flex items-center justify-center">
                <div class="w-2 h-2 bg-sky-400 rounded-full shadow-[0_0_10px_rgba(56,189,248,1)]"></div>
              </div>
            </div>
            <!-- Scanner -->
            <div class="absolute inset-0 bg-gradient-to-r from-transparent via-sky-500/10 to-transparent w-full h-full rounded-full animate-[spin_4s_linear_infinite]" style="mask-image: conic-gradient(transparent 270deg, black 360deg);"></div>
          </div>
          <!-- Floating Dots -->
          <div class="absolute top-10 right-10 w-1.5 h-1.5 bg-sky-400 rounded-full animate-ping [animation-duration:3s]"></div>
          <div class="absolute bottom-12 left-12 w-1.5 h-1.5 bg-indigo-400 rounded-full animate-ping [animation-duration:4s]"></div>
        </div>

        <h3 class="text-xl font-medium text-white mb-3 flex items-center gap-2" style="">
          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-sky-400"><path d="M12 2v4" class=""></path><path d="m16.2 7.8 2.9-2.9" class=""></path><path d="M18 12h4" class=""></path><path d="m16.2 16.2 2.9 2.9" class=""></path><path d="M12 18v4" class=""></path><path d="m4.9 19.1 2.9-2.9" class=""></path><path d="M2 12h4" class=""></path><path d="m4.9 4.9 2.9 2.9" class=""></path></svg>
          Always-On Intelligence
        </h3>
        <p class="text-zinc-400 font-light leading-relaxed text-sm" style="">
          AI operates continuously, automating tasks like driver sourcing and providing up-to-date context in real-time. Your recruiters can focus on building relationships while AI handles the data.
        </p>
      </div>