Neon Hero Section with Process Timeline

<div
  style="--color-paper: #0a0c0e; --color-ink: #ffffff; --color-ink-70: #a1b0b5; --color-ink-50: #6a7d85; --color-accent: #00f2ff; --font-sans: 'Inter', system-ui, -apple-system, sans-serif; --ease-out: cubic-bezier(0.215, 0.61, 0.355, 1); background-color: var(--color-paper); color: var(--color-ink); font-family: var(--font-sans); min-height: 100vh; overflow-x: hidden; position: relative; padding: 2.5rem; background-image: radial-gradient(rgba(0, 242, 255, 0.08) 1px, transparent 1px), radial-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px); background-size: 32px 32px, 16px 16px; background-position: 0 0, 8px 8px;">
  <script src="https://cdn.tailwindcss.com"></script>
  <style>
    .glow-bar {
      height: 48px;
      background: linear-gradient(90deg, rgba(0, 242, 255, 0.01) 0%, var(--color-accent) 100%);
      border-radius: 99px;
      position: relative;
      transform-origin: left;
      animation: growIn 1.2s var(--ease-out) forwards;
      opacity: 0;
      backdrop-filter: blur(4px);
    }

    .glow-bar::after {
      content: '';
      position: absolute;
      top: 50%;
      right: 0;
      width: 80%;
      height: 140%;
      background: inherit;
      transform: translateY(-50%);
      filter: blur(24px);
      opacity: 0.4;
      border-radius: 99px;
    }

    @keyframes growIn {
      from {
        transform: scaleX(0);
        opacity: 0;
      }

      to {
        transform: scaleX(1);
        opacity: 1;
      }
    }

    .stagger-1 {
      animation-delay: 0.1s;
    }

    .stagger-2 {
      animation-delay: 0.2s;
    }

    .stagger-3 {
      animation-delay: 0.3s;
    }

    .stagger-4 {
      animation-delay: 0.4s;
    }

    .stagger-5 {
      animation-delay: 0.5s;
    }

    .stagger-6 {
      animation-delay: 0.6s;
    }

    .stagger-7 {
      animation-delay: 0.7s;
    }

    .process-item {
      transition: all 0.3s ease;
      cursor: pointer;
      opacity: 0.4;
    }

    .process-item:hover,
    .process-item.active {
      opacity: 1;
    }

    .btn-outline {
      border: 1px solid var(--color-accent);
      color: var(--color-accent);
      transition: all 0.3s ease;
    }

    .btn-outline:hover {
      background: var(--color-accent);
      color: var(--color-paper);
      box-shadow: 0 0 20px rgba(0, 242, 255, 0.4);
    }
  </style>

  <header class="flex justify-between items-start mb-12 relative z-10">
    <div class="flex flex-col gap-1">
      <div class="text-2xl font-bold tracking-tight">Vantage</div>
      <div class="text-[0.7rem] uppercase tracking-[0.2em] font-semibold text-[var(--color-accent)] mt-1">Autonomous
        Yield Recovery</div>
    </div>

    <div class="hidden md:flex gap-12">
      <div class="text-right">
        <div class="text-[0.7rem] uppercase tracking-[0.2em] font-semibold text-[var(--color-ink-50)] mb-1">System ID
        </div>
        <div class="font-mono text-sm opacity-80">VT-882-QX</div>
      </div>
      <div class="text-right">
        <div class="text-[0.7rem] uppercase tracking-[0.2em] font-semibold text-[var(--color-ink-50)] mb-1">Engine
          Status</div>
        <div class="flex items-center justify-end gap-2 text-sm">
          <span class="w-2 h-2 rounded-full bg-[var(--color-accent)] animate-pulse"></span>
          Active Scanning
        </div>
      </div>
    </div>
  </header>

  <main class="flex-1 grid grid-cols-1 lg:grid-cols-12 gap-12 relative z-10">
    <div class="lg:col-span-5 flex flex-col justify-center h-full pr-0 lg:pr-8">
      <div class="bg-white/[0.02] backdrop-blur-xl border border-white/[0.08] p-8 rounded-3xl mb-auto">
        <div class="flex justify-between items-end mb-6">
          <div class="text-[0.7rem] uppercase tracking-[0.2em] font-semibold text-[var(--color-ink-50)]">Annual
            Liquidity Gap</div>
          <div class="text-3xl font-light text-[var(--color-accent)]">
            $22B<span class="text-lg opacity-50 ml-1 text-white">/est</span></div>
        </div>
        <div class="w-full bg-white/5 h-px mb-6"></div>
        <p class="text-lg leading-relaxed text-[var(--color-ink-70)]">
          Unclaimed duty drawback is capital left on the table. Our neural engine audits global supply chains to capture
          every cent of refundable trade tariffs.
        </p>
      </div>

      <div class="mt-12">
        <h1 class="font-light text-5xl md:text-6xl lg:text-7xl leading-[0.95] mb-8 tracking-tight">
          Automate your <br>
          <span class="font-bold text-[var(--color-accent)]">global tax</span> recovery.
        </h1>

        <div class="flex flex-wrap items-center gap-8">
          <a href="#"
            class="btn-outline px-8 py-4 rounded-full text-sm font-semibold tracking-wide uppercase inline-flex items-center gap-3 group">
            Explore the Platform
            <svg class="w-4 h-4 transform group-hover:translate-x-1 transition-transform" fill="none"
              stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
            </svg>
          </a>
          <div class="text-sm opacity-50">Zero-touch implementation.</div>
        </div>
      </div>

      <div class="mt-auto pt-12 hidden lg:block">
        <div class="text-[0.7rem] uppercase tracking-[0.2em] font-semibold text-[var(--color-ink-50)] mb-4">Secured by
          Vantage Core</div>
        <div class="flex gap-2">
          <div class="h-1 w-12 bg-[var(--color-accent)] rounded-full"></div>
          <div class="h-1 w-12 bg-white/10 rounded-full"></div>
          <div class="h-1 w-12 bg-white/10 rounded-full"></div>
        </div>
      </div>
    </div>

    <div class="lg:col-span-7 flex flex-col justify-center relative">
      <div class="absolute left-[20%] top-0 bottom-0 w-px bg-white/5 hidden md:block"></div>
      <div class="space-y-6 md:space-y-8 w-full">
        <div class="process-item flex items-center group stagger-1 opacity-100">
          <div class="w-[20%] text-right pr-8">
            <span class="text-[0.7rem] uppercase tracking-[0.2em] font-semibold text-[var(--color-ink-50)]">01 Intake</span>
          </div>
          <div class="flex-1 relative h-12 flex items-center">
            <div class="glow-bar w-[30%]"></div>
            <div
              class="ml-4 text-[10px] font-mono text-[var(--color-accent)] opacity-0 group-hover:opacity-100 transition-opacity">
              Data Normalization</div>
          </div>
        </div>

        <div class="process-item flex items-center group stagger-2">
          <div class="w-[20%] text-right pr-8">
            <span class="text-[0.7rem] uppercase tracking-[0.2em] font-semibold text-[var(--color-ink-50)]">02 Sync</span>
          </div>
          <div class="flex-1 relative h-12 flex items-center">
            <div class="glow-bar w-[45%]"></div>
            <div
              class="ml-4 text-[10px] font-mono text-[var(--color-accent)] opacity-0 group-hover:opacity-100 transition-opacity">
              ERP Integration</div>
          </div>
        </div>

        <div class="process-item active flex items-center group stagger-3">
          <div class="w-[20%] text-right pr-8">
            <span class="text-[0.7rem] uppercase tracking-[0.2em] font-semibold text-white">03 Analyze</span></div>
          <div class="flex-1 relative h-12 flex items-center">
            <div class="glow-bar w-[80%] bg-[var(--color-accent)]/20"></div>
            <div
              class="absolute right-[20%] top-1/2 -translate-y-1/2 w-8 h-8 rounded-full border border-[var(--color-accent)]/50 flex items-center justify-center bg-[#0a0c0e]">
              <div class="w-2 h-2 bg-[var(--color-accent)] rounded-full animate-ping"></div>
            </div>
            <div class="ml-4 text-[10px] font-mono font-bold text-[var(--color-accent)]">Neural Correlation</div>
          </div>
        </div>

        <div class="process-item flex items-center group stagger-4">
          <div class="w-[20%] text-right pr-8">
            <span class="text-[0.7rem] uppercase tracking-[0.2em] font-semibold text-[var(--color-ink-50)]">04 Validate</span>
          </div>
          <div class="flex-1 relative h-12 flex items-center">
            <div class="glow-bar w-[55%]"></div>
          </div>
        </div>

        <div class="process-item flex items-center group stagger-5">
          <div class="w-[20%] text-right pr-8">
            <span class="text-[0.7rem] uppercase tracking-[0.2em] font-semibold text-[var(--color-ink-50)]">05 Claim</span>
          </div>
          <div class="flex-1 relative h-12 flex items-center">
            <div class="glow-bar w-[70%]"></div>
          </div>
        </div>

        <div class="process-item flex items-center group stagger-6">
          <div class="w-[20%] text-right pr-8">
            <span class="text-[0.7rem] uppercase tracking-[0.2em] font-semibold text-[var(--color-ink-50)]">06 Verify</span>
          </div>
          <div class="flex-1 relative h-12 flex items-center">
            <div class="glow-bar w-[40%]"></div>
          </div>
        </div>

        <div class="process-item flex items-center group stagger-7">
          <div class="w-[20%] text-right pr-8">
            <span class="text-[0.7rem] uppercase tracking-[0.2em] font-semibold text-[var(--color-ink-70)]">07 Payout</span>
          </div>
          <div class="flex-1 relative h-12 flex items-center">
            <div class="glow-bar w-[98%]"></div>
            <div class="absolute right-4 text-xl font-light tracking-tight text-[var(--color-accent)]">Net Return</div>
          </div>
        </div>
      </div>

      <div class="absolute bottom-0 right-0 max-w-xs text-right hidden lg:block opacity-40">
        <p class="text-[9px] uppercase tracking-widest leading-relaxed">Cross-border capital recovery lifecycle metrics
          based on Q3 aggregate analysis.</p>
      </div>
    </div>
  </main>

  <div
    class="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[80vw] h-[80vw] bg-[var(--color-accent)] opacity-[0.03] blur-[160px] rounded-full pointer-events-none z-0">
  </div>
</div>