System Benefits Feature Section with Orbit Animation

<section class="z-10 md:px-12 lg:pt-20 lg:pb-20 w-full max-w-[1400px] mr-auto ml-auto pt-24 pr-6 pb-24 pl-6 relative">
  <div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
    
    <!-- Text Column -->
    <div class="order-1 lg:order-1">
      <h2 class="md:text-6xl text-3xl font-normal text-white tracking-tight font-serif-custom mb-12 leading-[0.95]" style="">
        Our system
        <span class="bg-clip-text italic text-transparent bg-gradient-to-r from-emerald-400 to-sky-500" style="">offers</span>
      </h2>

      <div class="space-y-8">
        <!-- Item 1: Enhanced Problem-Solving -->
        <div class="group flex gap-4">
          <div class="w-10 h-10 rounded-lg bg-indigo-500/10 border border-indigo-500/20 flex items-center justify-center shrink-0 group-hover:bg-indigo-500/20 transition-colors duration-300">
            <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-indigo-400"><path d="M12 5a3 3 0 1 0-5.997.125 4 4 0 0 0-2.526 5.77 4 4 0 0 0 .556 6.588A4 4 0 1 0 12 18Z" class=""></path><path d="M9 13a4.5 4.5 0 0 0 3-4" class=""></path><path d="M6.003 5.125A3 3 0 0 1 19.5 5.5" class=""></path><path d="M12 18a4 4 0 0 0 4-4 4.5 4.5 0 0 0-3-4" class=""></path><path d="M19.5 5.5a4 4 0 0 0 0 8 4 4 0 0 0-2.5 7.272" class=""></path></svg>
          </div>
          <div class="">
            <h3 class="text-lg font-medium text-white mb-2 group-hover:text-indigo-300 transition-colors duration-300" style="">Enhanced Problem-Solving</h3>
            <p class="text-zinc-400 font-light leading-relaxed text-sm" style="">
              Tackle complex driver recruitment challenges, from finding qualified drivers with specific endorsements to managing high-volume hiring, more effectively by leveraging the diverse expertise of specialized agents.
            </p>
          </div>
        </div>

        <!-- Item 2: Increased Efficiency -->
        <div class="group flex gap-4">
          <div class="w-10 h-10 rounded-lg bg-sky-500/10 border border-sky-500/20 flex items-center justify-center shrink-0 group-hover:bg-sky-500/20 transition-colors duration-300">
            <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"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2" class=""></polygon></svg>
          </div>
          <div class="">
            <h3 class="text-lg font-medium text-white mb-2 group-hover:text-sky-300 transition-colors duration-300" style="">Increased Efficiency</h3>
            <p class="text-zinc-400 font-light leading-relaxed text-sm" style="">
              Collaboration and distributed processing among agents lead to a more efficient allocation of resources. Tasks are matched to the agent best suited for them.
            </p>
          </div>
        </div>

        <!-- Item 3: Scalability -->
        <div class="group flex gap-4">
          <div class="w-10 h-10 rounded-lg bg-emerald-500/10 border border-emerald-500/20 flex items-center justify-center shrink-0 group-hover:bg-emerald-500/20 transition-colors duration-300">
            <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-emerald-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="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>
          </div>
          <div class="">
            <h3 class="text-lg font-medium text-white mb-2 group-hover:text-emerald-300 transition-colors duration-300" style="">Scalability</h3>
            <p class="text-zinc-400 font-light leading-relaxed text-sm" style="">
              Easily expand the system's capabilities by adding more agents to handle increased demand or new areas of specialization, without significant system overhauls.
            </p>
          </div>
        </div>

        <!-- Item 4: Robustness and Reliability -->
        <div class="group flex gap-4">
          <div class="w-10 h-10 rounded-lg bg-pink-500/10 border border-pink-500/20 flex items-center justify-center shrink-0 group-hover:bg-pink-500/20 transition-colors duration-300">
            <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-pink-400"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" class=""></path></svg>
          </div>
          <div class="">
            <h3 class="text-lg font-medium text-white mb-2 group-hover:text-pink-300 transition-colors duration-300" style="">Robustness and Reliability</h3>
            <p class="text-zinc-400 font-light leading-relaxed text-sm" style="">
              The system is more dependable as the malfunction of a single agent won't halt operations. Other agents can step in or redistribute the workload.
            </p>
          </div>
        </div>

        <!-- Item 5: Flexibility and Adaptability -->
        <div class="group flex gap-4">
          <div class="w-10 h-10 rounded-lg bg-violet-500/10 border border-violet-500/20 flex items-center justify-center shrink-0 group-hover:bg-violet-500/20 transition-colors duration-300">
            <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-violet-400"><rect width="18" height="18" x="3" y="3" rx="2" ry="2" class=""></rect><path d="M7 7h3v9" class=""></path><path d="M14 7h3v5" class=""></path></svg>
          </div>
          <div class="">
            <h3 class="text-lg font-medium text-white mb-2 group-hover:text-violet-300 transition-colors duration-300" style="">Flexibility and Adaptability</h3>
            <p class="text-zinc-400 font-light leading-relaxed text-sm" style="">
              Our MAS can dynamically adjust to evolving driver recruitment needs by reconfiguring agents and their responsibilities.
            </p>
          </div>
        </div>
      </div>
    </div>

    <!-- Visual Column -->
    <div class="order-2 lg:order-2 w-full h-full relative flex items-center justify-center min-h-[500px]">
      <div class="relative w-full max-w-[500px] aspect-square">
        <!-- Background Effects -->
        <div class="absolute inset-0 bg-gradient-to-tr from-sky-500/10 via-transparent to-purple-500/10 rounded-full blur-3xl opacity-50"></div>
        
        <!-- Rotating Rings -->
        <div class="absolute inset-0 rounded-full border border-white/5 animate-[spin_30s_linear_infinite]"></div>
        <div class="absolute inset-[15%] rounded-full border border-white/5 animate-[spin_20s_linear_infinite_reverse]"></div>
        <div class="absolute inset-[30%] rounded-full border border-white/5 animate-[spin_15s_linear_infinite]"></div>

        <!-- Core System -->
        <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-32 h-32 z-20">
          <div class="w-full h-full bg-zinc-900 border border-sky-500/30 rounded-full flex items-center justify-center shadow-[0_0_50px_rgba(14,165,233,0.15)] relative z-10 backdrop-blur-md">
            <div class="flex flex-col items-center">
              <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="text-sky-400 mb-1"><path d="M12 2v20" class=""></path><path d="M2 12h20" class=""></path><path d="m4.929 4.929 14.14 14.14" class=""></path><path d="m19.07 4.93-14.14 14.14" class=""></path></svg>
              <span class="text-[9px] font-mono text-sky-300 font-bold uppercase tracking-widest" style="">Core</span>
            </div>
          </div>
          <!-- Pulse Ring -->
          <div class="absolute inset-0 bg-sky-500/20 rounded-full animate-ping [animation-duration:3s]"></div>
        </div>

        <!-- Orbiting Nodes (Agents) -->
        <div class="absolute inset-0 animate-[spin_60s_linear_infinite]">
          <!-- Agent 1 -->
          <div class="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-6">
            <div class="w-12 h-12 bg-zinc-900 border border-white/10 rounded-xl flex items-center justify-center shadow-lg transform -rotate-0 hover:scale-110 transition-transform">
              <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-indigo-400"><path d="M12 5a3 3 0 1 0-5.997.125 4 4 0 0 0-2.526 5.77 4 4 0 0 0 .556 6.588A4 4 0 1 0 12 18Z" class=""></path></svg>
            </div>
          </div>
          <!-- Agent 2 -->
          <div class="absolute bottom-0 left-1/2 -translate-x-1/2 translate-y-6">
            <div class="w-12 h-12 bg-zinc-900 border border-white/10 rounded-xl flex items-center justify-center shadow-lg transform -rotate-0 hover:scale-110 transition-transform">
              <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-emerald-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></svg>
            </div>
          </div>
          <!-- Agent 3 -->
          <div class="absolute left-0 top-1/2 -translate-x-6 -translate-y-1/2">
            <div class="w-12 h-12 bg-zinc-900 border border-white/10 rounded-xl flex items-center justify-center shadow-lg transform -rotate-90 hover:scale-110 transition-transform">
              <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-pink-400"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" class=""></path></svg>
            </div>
          </div>
          <!-- Agent 4 -->
          <div class="absolute right-0 top-1/2 translate-x-6 -translate-y-1/2">
            <div class="w-12 h-12 bg-zinc-900 border border-white/10 rounded-xl flex items-center justify-center shadow-lg transform rotate-90 hover:scale-110 transition-transform">
              <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"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2" class=""></polygon></svg>
            </div>
          </div>
        </div>
        
        <!-- Floating Particles -->
        <div class="absolute w-2 h-2 bg-sky-400 rounded-full top-[30%] left-[30%] animate-ping [animation-duration:3s]"></div>
        <div class="absolute w-1.5 h-1.5 bg-emerald-400 rounded-full bottom-[20%] right-[35%] animate-ping [animation-duration:4s]"></div>
        <div class="absolute w-1.5 h-1.5 bg-pink-400 rounded-full top-[20%] right-[20%] animate-ping [animation-duration:2.5s]"></div>

      </div>
    </div>

  </div>
</section>