Animated Employee Lifecycle Chevron Section

<section class="z-10 md:px-12 lg:pb-20 lg:pt-20 bg-black/50 w-full max-w-[1400px] border-white/5 border-t mr-auto ml-auto pt-24 pr-6 pb-24 pl-6 relative">
  <!-- Background Gradients -->
  <div class="absolute inset-0 overflow-hidden pointer-events-none">
    <div class="absolute top-0 left-1/4 w-[500px] h-[500px] bg-sky-500/5 rounded-full blur-[100px]"></div>
    <div class="absolute bottom-0 right-1/4 w-[500px] h-[500px] bg-emerald-500/5 rounded-full blur-[100px]"></div>
  </div>

  <!-- Header Content -->
  <div class="z-10 text-center max-w-4xl mr-auto mb-10 ml-auto relative">
    
    <h2 class="text-4xl md:text-5xl lg:text-6xl font-normal text-white tracking-tight font-serif-custom leading-[1.1] mb-8" style="">
      Move beyond basic databases to an 
      <span class="bg-clip-text text-transparent bg-gradient-to-r from-sky-400 via-indigo-400 to-emerald-400 animate-gradient-x" style="">active, intelligent system</span>
    </h2>
    <p class="md:text-xl text-lg font-light text-zinc-400 max-w-2xl mr-auto ml-auto" style="">
      Fuel your driver recruitment growth through a unified, automated lifecycle that transforms candidates into long-term employees.
    </p>
  </div>

  <!-- Animated Lifecycle Visualization -->
  <div class="w-full relative z-10">
    <!-- Horizontal Scroll Container for Mobile -->
    <div class="overflow-x-auto no-scrollbar -mx-6 md:mx-0 md:px-0 pr-6 pb-12 pl-6">
      <div class="min-w-[1000px] relative">
        
        <!-- Employee Lifecycle Title -->
        <div class="flex w-full mb-8 justify-center">
          <span class="text-[10px] uppercase text-lg font-semibold text-zinc-300 tracking-widest bg-white/5 border-white/10 border rounded-full px-3 py-1 backdrop-blur-sm" style="">Employee Lifecycle</span>
        </div>

        <!-- Top Group Labels -->
        <div class="flex w-full mb-2 text-sm font-medium text-white tracking-wide">
          <!-- Employer Brand (1/9 width approx) -->
          <div class="w-[11.11%] text-center flex flex-col items-center">
            <span class="mb-3 opacity-90" style="">Employer Brand</span>
            <div class="w-full h-px bg-gradient-to-r from-transparent via-zinc-700 to-transparent relative">
              <div class="absolute left-1/2 -translate-x-1/2 top-0 w-px h-2 bg-zinc-700"></div>
            </div>
          </div>
          
          <!-- Recruitment Cycle (6/9 width approx) -->
          <div class="w-[66.66%] text-center flex flex-col items-center px-2">
            <span class="mb-3 opacity-90" style="">Recruitment Cycle</span>
            <div class="w-full h-px bg-gradient-to-r from-transparent via-zinc-700 to-transparent relative">
              <div class="absolute left-1/2 -translate-x-1/2 top-0 w-px h-2 bg-zinc-700"></div>
            </div>
          </div>
          
          <!-- Onboarding (2/9 width approx) -->
          <div class="w-[22.22%] text-center flex flex-col items-center">
            <span class="mb-3 opacity-90" style="">Onboarding</span>
            <div class="w-full h-px bg-gradient-to-r from-transparent via-zinc-700 to-transparent relative">
              <div class="absolute left-1/2 -translate-x-1/2 top-0 w-px h-2 bg-zinc-700"></div>
            </div>
          </div>
        </div>

        <!-- Sub Labels (Phase Categories) -->
        <div class="grid grid-cols-9 w-full text-[10px] uppercase tracking-wider font-semibold text-zinc-500 mb-4 text-center">
          <div class="col-span-1" style="">Introduction</div>
          <div class="col-span-1" style="">Welcome</div>
          <div class="col-span-1" style="">Activate</div>
          <div class="col-span-2 border-t border-zinc-800/0 relative" style="">Diagnose &amp; Qualify</div>
          <div class="col-span-2" style="">Prescribe &amp; Offer</div>
          <div class="col-span-2" style="">Retain &amp; Grow</div>
        </div>

        <!-- Chevron Flow Process -->
        <div class="flex w-full h-16 filter drop-shadow-2xl">
          
          <!-- Step 1: Employer Brand -->
          <div class="flex-1 relative group hover:flex-[1.2] transition-all duration-500 ease-out cursor-default">
            <div class="absolute inset-0 bg-sky-950 clip-chevron-start border-r border-white/5 group-hover:bg-sky-900 transition-colors"></div>
            <div class="relative z-10 h-full flex flex-col items-center justify-center text-center px-1">
              <div class="mb-1 opacity-50 group-hover:opacity-100 transition-opacity">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-sky-200"><path d="M12 21.37z" fill="currentColor" fill-opacity="0.2" class=""></path><path d="M12 21.37c-5-2.73-9-5.77-9-10.37a6 6 0 1 1 12 0c0 4.6-4 7.64-9 10.37z" class=""></path><circle cx="12" cy="10" r="3" class=""></circle></svg>
              </div>
              <span class="text-[10px] md:text-xs font-bold text-white uppercase leading-none" style="">EmployerBrand</span>
            </div>
          </div>

          <!-- Step 2: Source -->
          <div class="flex-1 relative group hover:flex-[1.2] transition-all duration-500 ease-out -ml-[14px]">
            <div class="absolute inset-0 bg-sky-700 clip-chevron border-l border-black/20 group-hover:bg-sky-600 transition-colors"></div>
            <div class="relative z-10 h-full flex flex-col items-center justify-center text-center pl-3">
              <span class="text-[10px] md:text-xs font-bold text-white uppercase tracking-tight" style="">Source</span>
            </div>
          </div>

          <!-- Step 3: Activate -->
          <div class="flex-1 relative group hover:flex-[1.2] transition-all duration-500 ease-out -ml-[14px]">
            <div class="absolute inset-0 bg-sky-500 clip-chevron border-l border-black/20 group-hover:bg-sky-400 transition-colors"></div>
            <div class="relative z-10 h-full flex flex-col items-center justify-center text-center pl-3">
              <span class="text-[10px] md:text-xs font-bold text-white uppercase tracking-tight" style="">Activate</span>
            </div>
          </div>

          <!-- Step 4: Apply -->
          <div class="flex-1 relative group hover:flex-[1.2] transition-all duration-500 ease-out -ml-[14px]">
            <div class="absolute inset-0 bg-teal-500 clip-chevron border-l border-black/20 group-hover:bg-teal-400 transition-colors"></div>
            <div class="relative z-10 h-full flex flex-col items-center justify-center text-center pl-3">
              <span class="text-[10px] md:text-xs font-bold text-white uppercase tracking-tight" style="">Apply</span>
            </div>
          </div>

          <!-- Step 5: Engage -->
          <div class="flex-1 relative group hover:flex-[1.2] transition-all duration-500 ease-out -ml-[14px]">
            <div class="absolute inset-0 bg-emerald-500 clip-chevron border-l border-black/20 group-hover:bg-emerald-400 transition-colors"></div>
            <div class="relative z-10 h-full flex flex-col items-center justify-center text-center pl-3">
              <span class="text-[10px] md:text-xs font-bold text-white uppercase tracking-tight" style="">Engage</span>
            </div>
          </div>

          <!-- Step 6: Interview -->
          <div class="flex-1 relative group hover:flex-[1.2] transition-all duration-500 ease-out -ml-[14px]">
            <div class="absolute inset-0 bg-emerald-600 clip-chevron border-l border-black/20 group-hover:bg-emerald-500 transition-colors"></div>
            <div class="relative z-10 h-full flex flex-col items-center justify-center text-center pl-3">
              <span class="text-[10px] md:text-xs font-bold text-white uppercase tracking-tight" style="">Interview</span>
            </div>
          </div>

          <!-- Step 7: Job Offer -->
          <div class="flex-1 relative group hover:flex-[1.2] transition-all duration-500 ease-out -ml-[14px]">
            <div class="absolute inset-0 bg-green-600 clip-chevron border-l border-black/20 group-hover:bg-green-500 transition-colors"></div>
            <div class="relative z-10 h-full flex flex-col items-center justify-center text-center pl-3">
              <span class="text-[10px] md:text-xs font-bold text-white uppercase tracking-tight leading-none" style="">JobOffer</span>
            </div>
          </div>

          <!-- Step 8: On Board -->
          <div class="flex-1 relative group hover:flex-[1.2] transition-all duration-500 ease-out -ml-[14px]">
            <div class="absolute inset-0 bg-green-700 clip-chevron border-l border-black/20 group-hover:bg-green-600 transition-colors"></div>
            <div class="relative z-10 h-full flex flex-col items-center justify-center text-center pl-3">
              <span class="text-[10px] md:text-xs font-bold text-white uppercase tracking-tight leading-none" style="">OnBoard</span>
            </div>
          </div>

          <!-- Step 9: Career Path -->
          <div class="flex-1 relative group hover:flex-[1.2] transition-all duration-500 ease-out -ml-[14px]">
            <div class="absolute inset-0 bg-green-800 clip-chevron-end border-l border-black/20 group-hover:bg-green-700 transition-colors"></div>
            <div class="relative z-10 h-full flex flex-col items-center justify-center text-center pl-3 pr-2">
               <div class="mb-1 opacity-50 group-hover:opacity-100 transition-opacity">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-green-200"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" class=""></path><polyline points="22 4 12 14.01 9 11.01" class=""></polyline></svg>
              </div>
              <span class="text-[10px] md:text-xs font-bold text-white uppercase tracking-tight leading-none" style="">CareerPath</span>
            </div>
          </div>
        </div>

        <!-- Animation Overlay (Pulse Effect) -->
        <div class="absolute top-[6.5rem] left-0 w-full h-16 pointer-events-none mix-blend-overlay opacity-50 overflow-hidden">
             <div class="w-[20%] h-full bg-gradient-to-r from-transparent via-white to-transparent -skew-x-12 animate-[shimmer_3s_infinite_linear]"></div>
        </div>

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

  <style>
    /* Custom Clip Paths for Arrows */
    .clip-chevron {
      clip-path: polygon(0% 0%, calc(100% - 15px) 0%, 100% 50%, calc(100% - 15px) 100%, 0% 100%, 15px 50%);
    }
    .clip-chevron-start {
      clip-path: polygon(0% 0%, calc(100% - 15px) 0%, 100% 50%, calc(100% - 15px) 100%, 0% 100%);
    }
    .clip-chevron-end {
      clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 15px 50%);
    }
    @keyframes shimmer {
        0% { transform: translateX(-100%); }
        100% { transform: translateX(500%); }
    }
  </style>
</section>