Animated Multi-Modality 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-purple-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">
          <!-- Center Hub -->
          <div class="absolute w-16 h-16 bg-zinc-900 rounded-xl border border-white/10 flex items-center justify-center z-10 shadow-2xl">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-white"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" class=""></path><circle cx="9" cy="7" r="4" class=""></circle><path d="M22 21v-2a4 4 0 0 0-3-3.87" class=""></path><path d="M16 3.13a4 4 0 0 1 0 7.75" class=""></path></svg>
          </div>
          
          <!-- Orbiting Nodes -->
          <div class="absolute w-32 h-32 animate-[spin_10s_linear_infinite]">
            <!-- Node 1: Resume -->
            <div class="absolute -top-3 left-1/2 -translate-x-1/2 w-8 h-8 bg-zinc-800 rounded-lg border border-white/10 flex items-center justify-center animate-[spin_10s_linear_infinite_reverse]">
               <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-purple-300"><path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z" class=""></path><polyline points="14 2 14 8 20 8" class=""></polyline><path d="M16 13H8" class=""></path><path d="M16 17H8" class=""></path><path d="M10 9H8" class=""></path></svg>
            </div>
            <!-- Node 2: Audio -->
            <div class="absolute bottom-2 right-0 w-8 h-8 bg-zinc-800 rounded-lg border border-white/10 flex items-center justify-center animate-[spin_10s_linear_infinite_reverse]">
               <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-pink-300"><path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z" class=""></path><path d="M19 10v2a7 7 0 0 1-14 0v-2" class=""></path><line x1="12" x2="12" y1="19" y2="22" class=""></line></svg>
            </div>
             <!-- Node 3: Chat -->
            <div class="absolute bottom-2 left-0 w-8 h-8 bg-zinc-800 rounded-lg border border-white/10 flex items-center justify-center animate-[spin_10s_linear_infinite_reverse]">
               <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-sky-300"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" class=""></path></svg>
            </div>
          </div>
          
          <!-- Connecting Lines -->
          <svg class="absolute inset-0 w-full h-full pointer-events-none opacity-20">
            <circle cx="50%" cy="50%" r="64" fill="none" stroke="white" stroke-width="1" stroke-dasharray="4 4" class=""></circle>
          </svg>
        </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-purple-400"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z" class=""></path><polyline points="7.5 4.21 12 6.81 16.5 4.21" class=""></polyline><polyline points="7.5 19.79 7.5 14.6 3 12" class=""></polyline><polyline points="21 12 16.5 14.6 16.5 19.79" class=""></polyline><polyline points="3.27 6.96 12 12.01 20.73 6.96" class=""></polyline><line x1="12" x2="12" y1="22.08" y2="12" class=""></line></svg>
          Multi-Modality
        </h3>
        <p class="text-zinc-400 font-light leading-relaxed text-sm" style="">
          Our system understands unstructured and multimodal data—resumes, recordings, job descriptions, and logs—providing a comprehensive view of every candidate.
        </p>
      </div>