Animated 4-Step Process Section with CTA

<div class="max-w-7xl mr-auto ml-auto pt-20 pr-6 pb-16 pl-6">
  <!-- Header -->
  <div class="text-center mb-14">
    <h2 class="text-4xl sm:text-5xl lg:text-6xl font-semibold tracking-tight text-neutral-100 leading-[1.1]"></h2><h2 class="sm:text-5xl lg:text-6xl leading-[1.1] text-4xl font-semibold tracking-tight">
      <span class="text-neutral-200">Simple Steps to</span>
      <span class="block text-neutral-100">crypto confidence</span>
    </h2>
      
    <p class="mt-4 max-w-3xl mx-auto text-base sm:text-lg text-neutral-400 leading-relaxed">
      Get started in minutes and take full control of your digital assets. From signup to secure trading, everything is built for speed and clarity.
    </p>
  </div>

  <!-- Steps with animated midline -->
  <div class="relative mt-24 mb-24 items-center justify-center">
    <!-- Animated connection line -->
    <div class="absolute left-0 right-0 top-10 h-0.5 border-t border-dashed border-violet-500/30 overflow-hidden">
      <div class="absolute inset-0 h-full bg-gradient-to-r from-transparent via-violet-400 via-fuchsia-400 to-transparent animate-pulse" style="width: 200px; animation: connectionFlow 3s linear infinite;"></div>
    </div>

    <div class="relative mx-auto mt-14 max-w-5xl px-6">
        <!-- Premium glowing purple light effect at the top -->
        <div class="pointer-events-none relative mb-4">
          <div class="absolute -top-0 left-1/2 h-16 w-full max-w-4xl -translate-x-1/2 rounded-full bg-gradient-to-r from-transparent via-violet-500/40 to-transparent blur-xl"></div>
          <div class="absolute -top-0 left-1/2 h-8 w-3/4 -translate-x-1/2 rounded-full bg-gradient-to-r from-transparent via-fuchsia-400/30 to-transparent blur-lg"></div>
        </div>

    <!-- Steps grid -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-10">
      <!-- Step 1 -->
      <div class="flex flex-col items-center text-center">
        <div class="h-20 w-full relative flex items-center justify-center">
          <span class="inline-flex items-center justify-center font-semibold text-white bg-gradient-to-tr from-fuchsia-500 to-violet-500 w-12 h-12 ring-neutral-50/30 ring-8 rounded-full shadow-lg">1</span>
        </div>
        <p class="leading-relaxed text-sm text-neutral-200 max-w-xs mt-3">Create your account in seconds</p>
      </div>

      <!-- Step 2 -->
      <div class="flex flex-col items-center text-center">
        <div class="relative flex w-full h-20 items-center justify-center">
          <span class="inline-flex items-center justify-center font-semibold text-white bg-gradient-to-tr from-violet-600 to-indigo-500 w-12 h-12 ring-neutral-50/30 ring-8 rounded-full shadow-lg">2</span>
        </div>
        <p class="leading-relaxed text-sm text-neutral-200 max-w-xs mt-3">Complete identity verification process</p>
      </div>

      <!-- Step 3 -->
      <div class="flex flex-col items-center text-center">
        <div class="h-20 w-full relative flex items-center justify-center">
          <span class="inline-flex items-center justify-center font-semibold text-white bg-gradient-to-tr from-fuchsia-500 to-orange-400 w-12 h-12 ring-neutral-50/30 ring-8 rounded-full shadow-lg">3</span>
        </div>
        <p class="mt-3 max-w-xs text-sm text-neutral-200 leading-relaxed">
          Fund your wallet with preferred methods
        </p>
      </div>

      <!-- Step 4 -->
      <div class="flex flex-col items-center text-center">
        <div class="h-20 w-full relative flex items-center justify-center">
          <span class="inline-flex items-center justify-center font-semibold text-white bg-gradient-to-tr from-cyan-500 to-sky-500 w-12 h-12 ring-neutral-50/30 ring-8 rounded-full shadow-lg">4</span>
        </div>
        <p class="mt-3 max-w-xs text-sm text-neutral-200 leading-relaxed">
          Start trading instantly withreal‑time tools
        </p>
      </div>
    </div>

    <!-- CTA - Centered -->
    <div class="mt-10 flex justify-center">
      <a href="#" class="flex justify-center gap-2 items-center lg:font-semibold isolation-auto before:absolute before:w-full before:transition-all before:duration-700 before:hover:w-full before:-left-full before:hover:left-0 before:rounded-full before:bg-emerald-500 hover:text-gray-50 before:-z-10 before:aspect-square before:hover:scale-150 before:hover:duration-700 relative z-10 overflow-hidden group text-lg text-neutral-900 bg-gray-50 max-w-fit border-gray-50 border-2 rounded-full pt-2 pr-4 pb-2 pl-4 shadow-xl backdrop-blur-md">Create Account<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="arrow-up-right" class="lucide lucide-arrow-up-right h-4 w-4"><path d="M7 7h10v10" class=""></path><path d="M7 17 17 7" class=""></path></svg></a>
    </div>
  </div>

  <style>
    @keyframes connectionFlow {
      0% {
        transform: translateX(-200px);
        opacity: 0;
      }
      10% {
        opacity: 1;
      }
      90% {
        opacity: 1;
      }
      100% {
        transform: translateX(calc(100vw + 200px));
        opacity: 0;
      }
    }
  </style>
</div>
</div>