Feature Card with Animated Orbit Effect

<section
  class="group relative overflow-hidden shadow-[0_0_0_1px_rgba(255,255,255,0.03),0_20px_60px_rgba(0,0,0,0.5)] border-white/10 border rounded-3xl">
  <!-- Subtle corner light -->
  <div
    class="pointer-events-none absolute -top-24 -left-24 h-64 w-64 rounded-full bg-[conic-gradient(from_180deg_at_50%_50%,rgba(59,130,246,0.25),transparent_60%)] blur-2xl">
  </div>

  <!-- Visual field -->
  <div class="relative h-72 sm:h-80 md:h-[22rem] overflow-hidden">
    <!-- Soft radial glow -->
    <div class="absolute inset-0"></div>

    <!-- Pulsating concentric orbits -->
    <div class="pointer-events-none absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
      <!-- middle orbit (icons align to this one: radius = 120px) -->
      <div
        class="absolute left-1/2 top-1/2 h-[240px] w-[240px] -translate-x-1/2 -translate-y-1/2 rounded-full border border-blue-400/20 animate-pulse"
        style="animation-delay:0s;"></div>
      <!-- inner orbit -->
      <div
        class="absolute left-1/2 top-1/2 h-[200px] w-[200px] -translate-x-1/2 -translate-y-1/2 rounded-full border border-white/10 animate-pulse"
        style="animation-delay:.6s;"></div>
      <!-- outer orbit -->
      <div
        class="absolute left-1/2 top-1/2 h-[280px] w-[280px] -translate-x-1/2 -translate-y-1/2 rounded-full border border-white/10 animate-pulse"
        style="animation-delay:1.2s;"></div>
      <!-- added layers for fuller spread -->
      <div
        class="absolute left-1/2 top-1/2 h-[320px] w-[320px] -translate-x-1/2 -translate-y-1/2 rounded-full border border-white/10 animate-pulse"
        style="animation-delay:1.8s;"></div>
      <div
        class="absolute left-1/2 top-1/2 h-[360px] w-[360px] -translate-x-1/2 -translate-y-1/2 rounded-full border border-white/10 animate-pulse"
        style="animation-delay:2.4s;"></div>
      <div
        class="absolute left-1/2 top-1/2 h-[400px] w-[400px] -translate-x-1/2 -translate-y-1/2 rounded-full border border-blue-400/15 animate-pulse"
        style="animation-delay:3s;"></div>
    </div>

    <!-- Floating icons aligned to the middle orbit (smaller logos) -->
    <div class="absolute left-1/2 top-1/2 hidden sm:block"
      style="transform: translate(-50%, -50%) rotate(-20deg) translateX(120px);">
      <div
        class="h-10 w-10 items-center justify-center rounded-2xl border border-white/10 bg-white/5 text-slate-300/80 backdrop-blur-sm flex hover:border-white/20 hover:text-slate-200 transition"
        style="transform: rotate(20deg);">
        <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" data-lucide="mail"
          class="lucide lucide-mail h-4 w-4">
          <path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7"></path>
          <rect x="2" y="4" width="20" height="16" rx="2"></rect>
        </svg>
      </div>
    </div>

    <div class="absolute left-1/2 top-1/2 hidden md:block"
      style="transform: translate(-50%, -50%) rotate(50deg) translateX(120px);">
      <div
        class="h-10 w-10 items-center justify-center rounded-2xl border border-white/10 bg-white/5 text-slate-300/80 backdrop-blur-sm flex hover:border-white/20 hover:text-slate-200 transition"
        style="transform: rotate(-50deg);">
        <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" data-lucide="figma"
          class="lucide lucide-figma w-[16px] h-[16px]" style="width: 16px; height: 16px; color: rgb(226, 232, 240);">
          <path d="M5 5.5A3.5 3.5 0 0 1 8.5 2H12v7H8.5A3.5 3.5 0 0 1 5 5.5z"></path>
          <path d="M12 2h3.5a3.5 3.5 0 1 1 0 7H12V2z"></path>
          <path d="M12 12.5a3.5 3.5 0 1 1 7 0 3.5 3.5 0 1 1-7 0z"></path>
          <path d="M5 19.5A3.5 3.5 0 0 1 8.5 16H12v3.5a3.5 3.5 0 1 1-7 0z"></path>
          <path d="M5 12.5A3.5 3.5 0 0 1 8.5 9H12v7H8.5A3.5 3.5 0 0 1 5 12.5z"></path>
        </svg>
      </div>
    </div>

    <div class="absolute left-1/2 top-1/2 hidden sm:block"
      style="transform: translate(-50%, -50%) rotate(140deg) translateX(120px);">
      <div
        class="h-10 w-10 items-center justify-center rounded-2xl border border-white/10 bg-white/5 text-slate-300/80 backdrop-blur-sm flex hover:border-white/20 hover:text-slate-200 transition"
        style="transform: rotate(-140deg);">
        <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"
          data-lucide="square-user" class="lucide lucide-square-user h-4 w-4">
          <rect width="18" height="18" x="3" y="3" rx="2"></rect>
          <circle cx="12" cy="10" r="3"></circle>
          <path d="M7 21v-2a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v2"></path>
        </svg>
      </div>
    </div>

    <div class="absolute left-1/2 top-1/2 hidden md:block"
      style="transform: translate(-50%, -50%) rotate(220deg) translateX(120px);">
      <div
        class="h-10 w-10 items-center justify-center rounded-2xl border border-white/10 bg-white/5 text-slate-300/80 backdrop-blur-sm flex hover:border-white/20 hover:text-slate-200 transition"
        style="transform: rotate(-220deg);">
        <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" data-lucide="notebook"
          class="lucide lucide-notebook h-4 w-4">
          <path d="M2 6h4"></path>
          <path d="M2 10h4"></path>
          <path d="M2 14h4"></path>
          <path d="M2 18h4"></path>
          <rect width="16" height="20" x="4" y="2" rx="2"></rect>
          <path d="M16 2v20"></path>
        </svg>
      </div>
    </div>



    <!-- Center orb -->
    <div class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-10">
      <div
        class="pointer-events-none absolute -inset-10 rounded-full bg-[radial-gradient(circle_at_center,rgba(59,130,246,0.25),transparent_60%)] blur-2xl transition-all duration-500 group-hover:scale-110">
      </div>
      <div
        class="relative flex h-28 w-28 items-center justify-center rounded-full border border-white/10 bg-slate-900/70 shadow-[0_0_0_1px_rgba(255,255,255,0.04),0_20px_60px_rgba(2,6,23,0.75)] ring-1 ring-blue-400/20 backdrop-blur-md transition-transform duration-300 group-hover:scale-105 sm:h-32 sm:w-32">
        <svg class="md:w-14 md:h-14 w-[36px] h-[36px]" viewBox="0 0 48 48" aria-hidden="true" stroke-width="2"
          style="width: 36px; height: 36px;">
          <path d="M24 8 L40 36 H8 Z" fill="currentColor" class=""></path>
        </svg>
        <div class="pointer-events-none absolute inset-0 rounded-full shadow-[0_0_40px_6px_rgba(59,130,246,0.25)]">
        </div>
      </div>
    </div>

    <!-- Bottom floating icon aligned to orbit (smaller logo) -->
    <div class="absolute left-1/2 top-1/2 hidden sm:block"
      style="transform: translate(-50%, -50%) rotate(270deg) translateX(120px);">
      <div
        class="items-center justify-center rounded-2xl border border-white/10 bg-white/5 p-3 text-slate-300/80 backdrop-blur-sm flex hover:border-white/20 hover:text-slate-200 transition"
        style="transform: rotate(-270deg);">
        <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" data-lucide="layers"
          class="lucide lucide-layers h-4 w-4">
          <path
            d="M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z">
          </path>
          <path d="M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12"></path>
          <path d="M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17"></path>
        </svg>
      </div>
    </div>
  </div>

  <!-- Content -->
  <div class="relative border-white/10 border-t">
    <div class="sm:p-8 pt-6 pr-6 pb-6 pl-6">
      <h3 class="text-2xl sm:text-3xl tracking-tight font-semibold text-slate-100">
        Adaptive Automations
      </h3>
      <p class="max-w-3xl leading-relaxed text-slate-400 mt-3">
        Coordinate complex work across your stack with event‑driven flows. Compose steps, approvals, and handoffs—fast,
        reliable, and observable from end to end.
      </p>

      <div class="flex flex-wrap gap-3 mt-6 items-center">
        <span class="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-3 py-1.5 text-sm text-slate-300/90">
                <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" data-lucide="bolt" class="lucide lucide-bolt h-4 w-4"><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"></path><circle cx="12" cy="12" r="4"></circle></svg>
                Real‑time triggers
              </span>
        <span class="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-3 py-1.5 text-sm text-slate-300/90">
                <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" data-lucide="shield-check" class="lucide lucide-shield-check h-4 w-4"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"></path><path d="m9 12 2 2 4-4"></path></svg>
                Safe by default
              </span>
        <button class="ml-auto inline-flex items-center gap-2 rounded-full bg-white/90 px-4 py-2 text-sm font-medium text-slate-900 transition hover:bg-white">
                Get started
                <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" data-lucide="arrow-right" class="lucide lucide-arrow-right h-4 w-4"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg>
              </button>
      </div>
    </div>
  </div>
</section>