Trusted Partners Logo Grid with Animated Data Flow

<section class="overflow-visible max-w-7xl mr-auto ml-auto pt-24 pr-6 pb-64 pl-6 relative">
  <!-- Styles for enhanced local animations -->
  <style class="">
    @keyframes flow-custom {
      to {
        stroke-dashoffset: -1000;
      }
    }

    .animate-flow-custom {
      animation: flow-custom 10s linear infinite;
    }

    @keyframes scanner {

      0%,
      100% {
        transform: translateY(-100%);
        opacity: 0;
      }

      50% {
        opacity: 1;
      }

      100% {
        transform: translateY(100%);
        opacity: 0;
      }
    }

    .animate-scanner {
      animation: scanner 3s ease-in-out infinite;
    }
  </style>

  <!-- Background Ambience -->
  <div class="absolute inset-0 pointer-events-none">
    <div
      class="absolute top-0 left-1/2 -translate-x-1/2 w-full h-[800px] bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-blue-900/10 via-transparent to-transparent opacity-40">
    </div>
    <div class="absolute top-24 left-24 h-0.5 w-0.5 bg-white rounded-full opacity-20 animate-pulse"></div>
    <div class="absolute top-48 right-1/4 h-1 w-1 bg-blue-400/20 rounded-full blur-[1px] animate-pulse"
      style="animation-delay: 1s"></div>
    <div class="absolute bottom-32 left-1/3 h-0.5 w-0.5 bg-white rounded-full opacity-10 animate-pulse"
      style="animation-delay: 2s"></div>
  </div>

  <!-- Header Content -->
  <div class="relative z-10 text-center mb-20">
    <h2 class="text-4xl font-medium tracking-tight text-white sm:text-5xl">
      Trusted Partners
    </h2>
    <p class="mx-auto mt-6 max-w-2xl text-lg font-light text-slate-400 leading-relaxed">
      We elevate your cybersecurity to the highest level alongside the
      world's leading brands and infrastructure providers.
    </p>
  </div>

  <!-- Interactive Grid & Flow Visualization -->
  <div class="max-w-5xl mr-auto ml-auto relative">
    <!-- Flow Schema (Desktop) -->
    <svg class="absolute inset-0 -top-12 h-[1000px] w-full pointer-events-none hidden md:block overflow-visible z-0"
      preserveAspectRatio="none" viewBox="0 0 1000 800">
      <defs class="">


      </defs>

      <!-- Static faint tracks -->
      <path d="M 125,280 C 125,550 480,500 500,680" fill="none" stroke="rgba(255,255,255,0.03)" stroke-width="1"
        class=""></path>
      <path d="M 375,280 C 375,550 490,500 500,680" fill="none" stroke="rgba(255,255,255,0.03)" stroke-width="1"
        class=""></path>
      <path d="M 625,280 C 625,550 510,500 500,680" fill="none" stroke="rgba(255,255,255,0.03)" stroke-width="1"
        class=""></path>
      <path d="M 875,280 C 875,550 520,500 500,680" fill="none" stroke="rgba(255,255,255,0.03)" stroke-width="1"
        class=""></path>

      <!-- Animated Data Flow Lines (Base Gradient) -->
      <path class="animate-flow-custom" stroke-dasharray="200, 400" stroke-dashoffset="0"
        d="M 125,280 C 125,550 480,500 500,680" fill="none" stroke="url(#blueFlowGradient)" stroke-width="2"
        style="animation-duration: 8s; opacity: 0.4;"></path>
      <path class="animate-flow-custom" stroke-dasharray="200, 400" stroke-dashoffset="-200"
        d="M 375,280 C 375,550 490,500 500,680" fill="none" stroke="url(#blueFlowGradient)" stroke-width="2"
        style="animation-duration: 10s; opacity: 0.4;"></path>
      <path class="animate-flow-custom" stroke-dasharray="200, 400" stroke-dashoffset="-100"
        d="M 625,280 C 625,550 510,500 500,680" fill="none" stroke="url(#blueFlowGradient)" stroke-width="2"
        style="animation-duration: 9s; opacity: 0.4;"></path>
      <path class="animate-flow-custom" stroke-dasharray="200, 400" stroke-dashoffset="-300"
        d="M 875,280 C 875,550 520,500 500,680" fill="none" stroke="url 0.4;"></path>

      <!-- Animated Data Packets (Bright, Fast, Glowing) -->
      <path class="animate-flow-custom" stroke-dasharray="20, 600" stroke-dashoffset="0"
        d="M 125,280 C 125,550 480,500 500,680" fill="none" stroke="#60a5fa" stroke-width="3" filter="url(#glow)"
        style="animation-duration: 4s; opacity: 1; stroke-linecap: round;"></path>
      <path class="animate-flow-custom" stroke-dasharray="20, 600" stroke-dashoffset="-200"
        d="M 375,280 C 375,550 490,500 500,680" fill="none" stroke="#60a5fa" stroke-width="3" filter="url(#glow)"
        style="animation-duration: 5s; opacity: 1; stroke-linecap: round;"></path>
      <path class="animate-flow-custom" stroke-dasharray="20, 600" stroke-dashoffset="-100"
        d="M 625,280 C 625,550 510,500 500,680" fill="none" stroke="#60a5fa" stroke-width="3" filter="url(#glow)"
        style="animation-duration: 4.5s; opacity: 1; stroke-linecap: round;"></path>
      <path class="animate-flow-custom" stroke-dasharray="20, 600" stroke-dashoffset="-300"
        d="M 875,280 C 875,550 520,500 500,680" fill="none" stroke="#60a5fa" stroke-width="3" filter="url(#glow)"
        style="animation-duration: 6s; opacity: 1; stroke-linecap: round;"></path>
    </svg>

    <style>
      /* Lottie-like Smooth Animations */
      @keyframes lottieDraw {
        0% {
          stroke-dasharray: 60;
          stroke-dashoffset: 60;
          opacity: 0.5;
        }

        40% {
          opacity: 1;
        }

        100% {
          stroke-dasharray: 60;
          stroke-dashoffset: 0;
          opacity: 1;
        }
      }

      @keyframes lottiePop {

        0%,
        100% {
          transform: scale(1);
        }

        50% {
          transform: scale(1.15);
        }
      }

      @keyframes lottieFloat {

        0%,
        100% {
          transform: translateY(0);
        }

        50% {
          transform: translateY(-6px);
        }
      }

      @keyframes lottieWiggle {

        0%,
        100% {
          transform: rotate(0deg);
        }

        25% {
          transform: rotate(-8deg);
        }

        75% {
          transform: rotate(8deg);
        }
      }

      @keyframes lottieRotate {
        0% {
          transform: rotate(0deg);
        }

        100% {
          transform: rotate(360deg);
        }
      }

      @keyframes lottieSlideRight {
        0% {
          transform: translateX(0);
          opacity: 1;
        }

        50% {
          transform: translateX(4px);
          opacity: 0.8;
        }

        100% {
          transform: translateX(0);
          opacity: 1;
        }
      }

      @keyframes lottieSwitch {

        0%,
        100% {
          transform: translateX(0);
        }

        50% {
          transform: translateX(3px);
        }
      }

      /* Class Applications */
      .lottie-stroke path,
      .lottie-stroke rect,
      .lottie-stroke circle,
      .lottie-stroke line,
      .lottie-stroke polyline {
        animation: lottieDraw 3s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate;
        stroke-dasharray: 60;
        /* Approx path length for 24px icon */
      }

      /* Specific Icon Behaviors */
      .anim-slack {
        animation: lottieWiggle 3s ease-in-out infinite;
      }

      .anim-chevron {
        animation: lottieSlideRight 2s ease-in-out infinite;
      }

      .anim-command {
        animation: lottiePop 2.5s ease-in-out infinite;
      }

      .anim-figma {
        animation: lottieFloat 3.5s ease-in-out infinite;
      }

      .anim-asterisk {
        animation: lottieRotate 8s linear infinite;
      }

      .anim-link {
        animation: lottiePop 3s ease-in-out infinite reverse;
      }

      .anim-aperture {
        animation: lottieRotate 12s linear infinite reverse;
      }

      .anim-toggle {
        animation: lottieSwitch 2s ease-in-out infinite;
      }
    </style>

    <!-- Logo Grid -->
    <div class="grid grid-cols-2 gap-6 md:grid-cols-4 z-10 mb-20 relative gap-x-6 gap-y-6">
      <!-- Row 1 -->
      <div
        class="group flex transition-all duration-300 hover:bg-white/[0.02] hover:border-blue-500/30 hover:shadow-[0_0_20px_rgba(59,130,246,0.1)] overflow-hidden bg-[#0B0C10] w-full h-24 border-white/5 border relative items-center justify-center">
        <div
          class="absolute top-0 left-0 h-1.5 w-1.5 border-t border-l border-blue-600/30 group-hover:w-2.5 group-hover:h-2.5 group-hover:border-blue-500 transition-all">
        </div>
        <div
          class="absolute top-0 right-0 h-1.5 w-1.5 border-t border-r border-blue-600/30 group-hover:w-2.5 group-hover:h-2.5 group-hover:border-blue-500 transition-all">
        </div>
        <div
          class="absolute bottom-0 left-0 h-1.5 w-1.5 border-b border-l border-blue-600/30 group-hover:w-2.5 group-hover:h-2.5 group-hover:border-blue-500 transition-all">
        </div>
        <div
          class="absolute bottom-0 right-0 h-1.5 w-1.5 border-b border-r border-blue-600/30 group-hover:w-2.5 group-hover:h-2.5 group-hover:border-blue-500 transition-all">
        </div>

        <!-- Slack Icon -->
        <div class="anim-slack">
          <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="lucide lucide-slack h-8 w-8 text-slate-400 group-hover:text-white transition-all duration-300 lottie-stroke">
            <rect width="3" height="8" x="13" y="2" rx="1.5" class=""></rect>
            <path d="M19 8.5V10h1.5A1.5 1.5 0 1 0 19 8.5" class=""></path>
            <rect width="3" height="8" x="8" y="14" rx="1.5" class=""></rect>
            <path d="M5 15.5V14H3.5A1.5 1.5 0 1 0 5 15.5" class=""></path>
            <rect width="8" height="3" x="14" y="13" rx="1.5" class=""></rect>
            <path d="M15.5 19H14v1.5a1.5 1.5 0 1 0 1.5-1.5" class=""></path>
            <rect width="8" height="3" x="2" y="8" rx="1.5" class=""></rect>
            <path d="M8.5 5H10V3.5A1.5 1.5 0 1 0 8.5 5" class=""></path>
          </svg>
        </div>
      </div>

      <div
        class="group relative h-24 w-full bg-[#0B0C10] border border-white/5 flex items-center justify-center transition-all duration-300 hover:bg-white/[0.02] hover:border-blue-500/30 hover:shadow-[0_0_20px_rgba(59,130,246,0.1)] overflow-hidden">
        <div
          class="absolute top-0 left-0 h-1.5 w-1.5 border-t border-l border-blue-600/30 group-hover:w-2.5 group-hover:h-2.5 group-hover:border-blue-500 transition-all">
        </div>
        <div
          class="absolute top-0 right-0 h-1.5 w-1.5 border-t border-r border-blue-600/30 group-hover:w-2.5 group-hover:h-2.5 group-hover:border-blue-500 transition-all">
        </div>
        <div
          class="absolute bottom-0 left-0 h-1.5 w-1.5 border-b border-l border-blue-600/30 group-hover:w-2.5 group-hover:h-2.5 group-hover:border-blue-500 transition-all">
        </div>
        <div
          class="absolute bottom-0 right-0 h-1.5 w-1.5 border-b border-r border-blue-600/30 group-hover:w-2.5 group-hover:h-2.5 group-hover:border-blue-500 transition-all">
        </div>

        <!-- Chevrons Icon -->
        <div class="anim-chevron">
          <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="lucide lucide-chevrons-right h-8 w-8 text-slate-400 group-hover:text-white transition-all duration-300 lottie-stroke">
            <path d="m6 17 5-5-5-5" class=""></path>
            <path d="m13 17 5-5-5-5" class=""></path>
          </svg>
        </div>
      </div>

      <div
        class="group flex transition-all duration-300 hover:bg-white/[0.02] hover:border-blue-500/30 hover:shadow-[0_0_20px_rgba(59,130,246,0.1)] overflow-hidden bg-[#0B0C10] w-full h-24 border-white/5 border relative items-center justify-center">
        <div class="absolute top-0 left-0 h-1.5 w-1.5 border-t border-l border-blue-600/30 group-hover:w-2."></div>
        <div
          class="absolute top-0 right-0 h-1.5 w-1.5 border-t border-r border-blue-600/30 group-hover:w-2.5 group-hover:h-2.5 group-hover:border-blue-500 transition-all">
        </div>
        <div
          class="absolute bottom-0 left-0 h-1.5 w-1.5 border-b border-l border-blue-600/30 group-hover:w-2.5 group-hover:h-2.5 group-hover:border-blue-500 transition-all">
        </div>
        <div
          class="absolute bottom-0 right-0 h-1.5 w-1.5 border-b border-r border-blue-600/30 group-hover:w-2.5 group-hover:h-2.5 group-hover:border-blue-500 transition-all">
        </div>

        <!-- Command Icon -->
        <div class="anim-command">
          <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="lucide lucide-command h-8 w-8 text-slate-400 group-hover:text-white transition-all duration-300 lottie-stroke">
            <path d="M15 6v12a3 3 0 1 0 3-3H6a3 3 0 1 0 3 3V6a3 3 0 1 0-3 3h12a3 3 0 1 0-3-3" class=""></path>
          </svg>
        </div>
      </div>

      <div
        class="group flex transition-all duration-300 hover:bg-white/[0.02] hover:border-blue-500/30 hover:shadow-[0_0_20px_rgba(59,130,246,0.1)] overflow-hidden bg-[#0B0C10] w-full h-24 border-white/5 border relative items-center justify-center">
        <div
          class="absolute top-0 left-0 h-1.5 w-1.5 border-t border-l border-blue-600/30 group-hover:w-2.5 group-hover:h-2.5 group-hover:border-blue-500 transition-all">
        </div>
        <div
          class="absolute top-0 right-0 h-1.5 w-1.5 border-t border-r border-blue-600/30 group-hover:w-2.5 group-hover:h-2.5 group-hover:border-blue-500 transition-all">
        </div>
        <div
          class="absolute bottom-0 left-0 h-1.5 w-1.5 border-b border-l border-blue-600/30 group-hover:w-2.5 group-hover:h-2.5 group-hover:border-blue-500 transition-all">
        </div>
        <div
          class="absolute bottom-0 right-0 h-1.5 w-1.5 border-b border-r border-blue-600/30 group-hover:w-2.5 group-hover:h-2.5 group-hover:border-blue-500 transition-all">
        </div>

        <!-- Figma Icon -->
        <div class="anim-figma">
          <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="lucide lucide-figma h-8 w-8 text-slate-400 group-hover:text-white transition-all duration-300 lottie-stroke">
            <path d="M5 5.5A3.5 3.5 0 0 1 8.5 2H12v7H8.5A3.5 3.5 0 0 1 5 5.5z" class=""></path>
            <path d="M12 2h3.5a3.5 3.5 0 1 1 0 7H12V2z" class=""></path>
            <path d="M12 12.5a3.5 3.5 0 1 1 7 0 3.5 3.5 0 1 1-7 0z" class=""></path>
            <path d="M5 19.5A3.5 3.5 0 0 1 8.5 23H12v-3.5a3.5 3.5 0 1 1-7 0z" class=""></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" class=""></path>
          </svg>
        </div>
      </div>

      <!-- Row 2 -->
      <div
        class="group relative h-24 w-full bg-[#0B0C10] border border-white/5 flex items-center justify-center transition-all duration-300 hover:bg-white/[0.02] hover:border-blue-500/30 hover:shadow-[0_0_20px_rgba(59,130,246,0.1)] overflow-hidden">
        <div
          class="absolute top-0 left-0 h-1.5 w-1.5 border-t border-l border-blue-600/30 group-hover:w-2.5 group-hover:h-2.5 group-hover:border-blue-500 transition-all">
        </div>
        <div
          class="absolute top-0 right-0 h-1.5 w-1.5 border-t border-r border-blue-600/30 group-hover:w-2.5 group-hover:h-2.5 group-hover:border-blue-500 transition-all">
        </div>
        <div
          class="absolute bottom-0 left-0 h-1.5 w-1.5 border-b border-l border-blue-600/30 group-hover:w-2.5 group-hover:h-2.5 group-hover:border-blue-500 transition-all">
        </div>
        <div
          class="absolute bottom-0 right-0 h-1.5 w-1.5 border-b border-r border-blue-600/30 group-hover:w-2.5 group-hover:h-2.5 group-hover:border-blue-500 transition-all">
        </div>

        <!-- Asterisk Icon -->
        <div class="anim-asterisk">
          <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="lucide lucide-asterisk h-8 w-8 text-slate-400 group-hover:text-white transition-all duration-300 lottie-stroke">
            <path d="M12 6v12" class=""></path>
            <path d="M17.196 9 6.804 15" class=""></path>
            <path d="m6.804 9 10.392 6" class=""></path>
          </svg>
        </div>
      </div>

      <div
        class="group relative h-24 w-full bg-[#0B0C10] border border-white/5 flex items-center justify-center transition-all duration-300 hover:bg-white/[0.02] hover:border-blue-500/30 hover:shadow-[0_0_20px_rgba(59,130,246,0.1)] overflow-hidden">
        <div
          class="absolute top-0 left-0 h-1.5 w-1.5 border-t border-l border-blue-600/30 group-hover:w-2.5 group-hover:h-2.5 group-hover:border-blue-500 transition-all">
        </div>
        <div
          class="absolute top-0 right-0 h-1.5 w-1.5 border-t border-r border-blue-600/30 group-hover:w-2.5 group-hover:h-2.5 group-hover:border-blue-500 transition-all">
        </div>
        <div
          class="absolute bottom-0 left-0 h-1.5 w-1.5 border-b border-l border-blue-600/30 group-hover:w-2.5 group-hover:h-2.5 group-hover:border-blue-500 transition-all">
        </div>
        <div
          class="absolute bottom-0 right-0 h-1.5 w-1.5 border-b border-r border-blue-600/30 group-hover:w-2.5 group-hover:h-2.5 group-hover:border-blue-500 transition-all">
        </div>

        <!-- Link Icon -->
        <div class="anim-link">
          <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="lucide lucide-link h-8 w-8 text-slate-400 group-hover:text-white transition-all duration-300 lottie-stroke">
            <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" class=""></path>
            <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" class=""></path>
          </svg>
        </div>
      </div>

      <div
        class="group relative h-24 w-full bg-[#0B0C10] border border-white/5 flex items-center justify-center transition-all duration-300 hover:bg-white/[0.02] hover:border-blue-500/30 hover:shadow-[0_0_20px_rgba(59,130,246,0.1)] overflow-hidden">
        <div
          class="absolute top-0 left-0 h-1.5 w-1.5 border-t border-l border-blue-600/30 group-hover:w-2.5 group-hover:h-2.5 group-hover:border-blue-500 transition-all">
        </div>
        <div
          class="absolute top-0 right-0 h-1.5 w-1.5 border-t border-r border-blue-600/30 group-hover:w-2.5 group-hover:h-2.5 group-hover:border-blue-500 transition-all">
        </div>
        <div
          class="absolute bottom-0 left-0 h-1.5 w-1.5 border-b border-l border-blue-600/30 group-hover:w-2.5 group-hover:h-2.5 group-hover:border-blue-500 transition-all">
        </div>
        <div
          class="absolute bottom-0 right-0 h-1.5 w-1.5 border-b border-r border-blue-600/30 group-hover:w-2.5 group-hover:h-2.5 group-hover:border-blue-500 transition-all">
        </div>

        <!-- Aperture Icon -->
        <div class="anim-aperture">
          <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="lucide lucide-aperture h-8 w-8 text-slate-400 group-hover:text-white transition-all duration-300 lottie-stroke">
            <circle cx="12" cy="12" r="10" class=""></circle>
            <path d="m14.31 8 5.74 9.94" class=""></path>
            <path d="M9.69 8h11.48" class=""></path>
            <path d="m7.38 12 5.74-9.94" class=""></path>
            <path d="M9.69 16 3.95 6.06" class=""></path>
            <path d="M14.31 16H2.83" class=""></path>
            <path d="m16.62 12-5.74 9.94" class=""></path>
          </svg>
        </div>
      </div>

      <div
        class="group relative h-24 w-full bg-[#0B0C10] border border-white/5 flex items-center justify-center transition-all duration-300 hover:bg-white/[0.02] hover:border-blue-500/30 hover:shadow-[0_0_20px_rgba(59,130,246,0.1)] overflow-hidden">
        <div
          class="absolute top-0 left-0 h-1.5 w-1.5 border-t border-l border-blue-600/30 group-hover:w-2.5 group-hover:h-2.5 group-hover:border-blue-500 transition-all">
        </div>
        <div
          class="absolute top-0 right-0 h-1.5 w-1.5 border-t border-r border-blue-600/30 group-hover:w-2.5 group-hover:h-2.5 group-hover:border-blue-500 transition-all">
        </div>
        <div
          class="absolute bottom-0 left-0 h-1.5 w-1.5 border-b border-l border-blue-600/30 group-hover:w-2.5 group-hover:h-2.5 group-hover:border-blue-500 transition-all">
        </div>
        <div
          class="absolute bottom-0 right-0 h-1.5 w-1.5 border-b border-r border-blue-600/30 group-hover:w-2.5 group-hover:h-2.5 group-hover:border-blue-500 transition-all">
        </div>

        <!-- Toggle Icon -->
        <div class="anim-toggle">
          <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="lucide lucide-toggle-right group-hover:text-white transition-all duration-300 lottie-stroke w-[32px] h-[32px]"
            data-icon-replaced="true" style="color: rgb(255, 255, 255); width: 32px; height: 32px">
            <rect width="20" height="12" x="2" y="6" rx="6" ry="6" class=""></rect>
            <circle cx="16" cy="12" r="2" class=""></circle>
          </svg>
        </div>
      </div>
    </div>

    <!-- Central Convergence Hub -->
    <div class="flex mt-32 z-20 relative justify-center">
      <div class="flex relative items-center justify-center">
        <!-- Connection Tip & Beam -->
        <div
          class="absolute -top-32 h-32 w-[2px] bg-gradient-to-b from-transparent via-blue-500/50 to-blue-500 shadow-[0_0_20px_#3b82f6] overflow-hidden">
          <div class="absolute inset-0 bg-white/50 w-full h-1/2 animate-[scanner_2s_linear_infinite] blur-[2px]"></div>
        </div>

        <!-- Core Icon Wrapper with Orbital Rings -->
        <div
          class="relative flex h-24 w-24 items-center justify-center rounded-full bg-[#020204] shadow-[0_0_50px_rgba(59,130,246,0.5)] border border-blue-500/30">
          <!-- Outer Spinning Ring -->
          <div
            class="absolute inset-[-10px] rounded-full border border-blue-500/20 border-dashed animate-[spin_10s_linear_infinite]">
          </div>

          <!-- Inner Reverse Spinning Ring -->
          <div
            class="absolute inset-[-4px] rounded-full border border-blue-400/30 border-dotted animate-[spin_15s_linear_infinite_reverse]">
          </div>

          <!-- Pulsing Glow -->
          <div class="absolute inset-0 rounded-full bg-blue-500/10 blur-xl animate-pulse"></div>

          <!-- Icon (Lottie Style) -->
          <div class="relative z-10 animate-[pulse_3s_ease-in-out_infinite]">
            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
              class="lucide lucide-atom h-10 w-10 text-white drop-shadow-[0_0_10px_rgba(255,255,255,0.5)] lottie-stroke">
              <circle cx="12" cy="12" r="1" class=""></circle>
              <path
                d="M20.2 20.2c2.04-2.03.02-7.36-4.5-11.9-4.54-4.52-9.87-6.54-11.9-4.5-2.04 2.03-.02 7.36 4.5 11.9 4.54 4.52 9.87 6.54 11.9 4.5Z"
                class=""></path>
              <path
                d="M15.7 15.7c4.52-4.54 6.54-9.87 4.5-11.9-2.03-2.04-7.36-.02-11.9 4.5-4.52 4.54-6.54 9.87-4.5 11.9 2.03 2.04 7.36.02 11.9-4.5Z"
                class=""></path>
            </svg>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>