AI Feature Highlight Card with Radar Animation

<div
  class="group relative overflow-hidden transition-all duration-500 hover:border-fuchsia-500/30 hover:ring-fuchsia-500/20 bg-gradient-to-br from-neutral-900/80 to-neutral-950/90 border-white/10 border ring-white/5 ring-1 rounded-2xl">
  <div
    class="absolute -bottom-16 -right-16 h-56 w-56 rounded-full bg-gradient-to-tr from-violet-500/30 via-fuchsia-500/20 to-cyan-500/10 blur-3xl transition-all duration-700 group-hover:scale-110">
  </div>
  <div
    class="absolute -top-8 -left-8 bg-gradient-to-br from-fuchsia-500/25 via-violet-500/15 to-transparent w-40 h-40 rounded-full blur-2xl">
  </div>

  <div class="pt-6 pr-6 pb-6 pl-6">
    <div class="flex mb-4 items-start justify-between">

      <span class="inline-flex items-center gap-1.5 text-xs font-medium text-[#ffffff] bg-[#ffffff]/0 ring-[#ffffff]/20 ring-1 rounded-lg pt-1 pr-2.5 pb-1 pl-2.5 grayscale-0">
          <div class="h-1.5 w-1.5 animate-pulse bg-fuchsia-400 rounded-full"></div>
          AI Powered
        </span>
    </div>

    <h3 class="text-lg font-semibold tracking-tight text-neutral-100 mb-2">Built‑in AI for smarter workflows</h3>
    <p class="leading-relaxed text-sm text-neutral-400 mb-6">Get your investments on autopilot with powerful AI
      integrated right into the platform always ready to help you stay ahead of market trends.</p>

    <!-- Enhanced Concentric guides with better visual hierarchy -->
    <div
      class="relative overflow-hidden bg-gradient-to-b from-white/5 via-white/5 to-transparent h-44 ring-white/5 ring-1 rounded-xl px-48 py-3 items-center justify-center">
      <div
        class="relative w-[150px] h-[150px] rounded-full border border-[#333] shadow-[25px_25px_75px_rgba(0,0,0,0.55)] flex items-center justify-center overflow-hidden before:content-[''] before:absolute before:inset-5 before:rounded-full before:border before:border-dashed before:border-[#444] before:shadow-[inset_-5px_-5px_25px_rgba(0,0,0,0.25),inset_5px_5px_35px_rgba(0,0,0,0.25)] after:content-[''] after:absolute after:w-[50px] after:h-[50px] after:rounded-full after:border after:border-dashed after:border-[#444] after:shadow-[inset_-5px_-5px_25px_rgba(0,0,0,0.25),inset_5px_5px_35px_rgba(0,0,0,0.25)]">

        <span class="absolute top-1/2 left-1/2 origin-top-left border-dashed animate-[radar81_4s_linear_infinite] before:content-[''] before:absolute before:top-0 before:left-0 before:w-full before:h-full before:bg-gradient-to-r before:from-fuchsia-500/50 before:to-fuchsia-500/0 before:origin-top-left before:rotate-[-55deg] before:blur-xl bg-transparent w-1/2 h-full border-white border-t"></span>
      </div>

      <style>
        @keyframes radar81 {
          0% {
            transform: rotate(0deg);
          }

          100% {
            transform: rotate(360deg);
          }
        }
      </style>

      <!-- Enhanced floating chips with better positioning -->
      <div class="absolute top-4 left-4">
        <span class="inline-flex items-center ring-1 ring-white/10 text-xs font-medium text-neutral-200 bg-[#ffffff]/10 rounded-full pt-1 pr-3 pb-1 pl-3 backdrop-blur-sm">consult</span>
      </div>
      <div class="absolute top-3 right-4">
        <span class="inline-flex items-center text-xs font-medium text-neutral-200 bg-[#ffffff]/10 ring-white/10 ring-1 rounded-full pt-1 pr-3 pb-1 pl-3 backdrop-blur-sm">How to check balance?</span>
      </div>
      <div class="absolute left-3 top-1/2 -translate-y-1/2">
        <span class="inline-flex items-center text-xs font-medium text-neutral-200 bg-[#ffffff]/10 ring-white/10 ring-1 rounded-full pt-1 pr-3 pb-1 pl-3 backdrop-blur-sm">Summarize last week</span>
      </div>
      <div class="absolute right-3 top-1/2 -translate-y-1/2">
        <span class="inline-flex items-center text-xs font-medium text-neutral-200 bg-[#ffffff]/10 ring-white/10 ring-1 rounded-full pt-1 pr-3 pb-1 pl-3 backdrop-blur-sm">report</span>
      </div>
      <div class="absolute bottom-4 left-4">
        <span class="inline-flex items-center text-xs font-medium text-neutral-200 bg-[#ffffff]/10 ring-white/10 ring-1 rounded-full pt-1 pr-3 pb-1 pl-3 backdrop-blur-sm">invest</span>
      </div>
      <div class="absolute bottom-3 right-4">
        <span class="inline-flex items-center rounded-full bg-gradient-to-r from-fuchsia-500/20 to-violet-500/20 px-3 py-1 text-xs font-medium text-neutral-200 ring-1 ring-white/10 backdrop-blur-sm">Generate report</span>
      </div>

      <!-- Enhanced center badge -->
      <div class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">

      </div>
    </div>
  </div>
</div>