Gaming Latency Optimization Feature Section

<div class="container border-x border-b max-w-7xl border-white/10 mr-auto ml-auto pt-24 pr-6 pb-24 pl-6">
        <div class="grid grid-cols-1 lg:grid-cols-12 border border-white/10 bg-black/40 backdrop-blur-sm rounded-none overflow-hidden divide-y lg:divide-y-0 lg:divide-x divide-white/10">
          <div class="lg:col-span-7 flex flex-col flashlight-card aura-reveal is-visible" style="--mouse-x: 438px; --mouse-y: 444px;">
            <div class="p-8 md:p-12 border-b border-white/10 bg-gradient-to-br from-white/[0.02] to-transparent relative group">
              <div class="flex flex-col md:flex-row items-center gap-12 h-full">
                <div class="relative w-full max-w-xs shrink-0">
                  <div class="bg-zinc-900/60 backdrop-blur-xl border border-white/10 rounded-2xl p-5 shadow-2xl relative z-20 group-hover:-translate-y-2 transition-transform duration-500 ease-out">
                    <div class="flex items-center justify-center w-12 h-12 bg-white rounded-xl mb-4 shadow-lg shadow-white/10">
                      <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" class="lucide lucide-shield-check w-6 h-6 text-black">
                        <path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z" class=""></path>
                        <path d="m9 12 2 2 4-4" class=""></path>
                      </svg>
                    </div>
                    <div class="text-sm font-medium text-white mb-0.5">
                      Optimized
                    </div>
                    <div class="text-xs text-zinc-500 mb-6 font-mono">
                      Ping: 14ms
                    </div>

                    <div class="flex items-center gap-3 pt-4 border-t border-white/5">
                      <div class="w-5 h-5 rounded-full bg-gradient-to-br from-blue-600 via-white to-red-600 shadow-inner"></div>
                      <div class="text-xs text-zinc-400">Frankfurt, DE</div>
                      <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" class="lucide lucide-chevron-right w-3 h-3 text-zinc-600 ml-auto">
                        <path d="m9 18 6-6-6-6" class=""></path>
                      </svg>
                    </div>
                  </div>
                  <div class="absolute -inset-4 bg-white/5 blur-2xl rounded-full z-10 opacity-50"></div>
                </div>

                <div class="text-left">
                  <h3 class="text-2xl font-semibold tracking-tight text-white mb-3">
                    Low Latency
                  </h3>
                  <p class="text-base text-zinc-400 leading-relaxed mb-6">
                    Experience gaming and streaming without interruptions. Our
                    smart routing finds the shortest path to game servers.
                  </p>
                  <a href="#" class="inline-flex items-center text-sm font-medium text-white hover:text-zinc-300 transition-colors group">
                    See our plans
                    <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" class="lucide lucide-arrow-right w-4 h-4 ml-1 group-hover:translate-x-1 transition-transform">
                      <path d="M5 12h14" class=""></path>
                      <path d="m12 5 7 7-7 7" class=""></path>
                    </svg>
                  </a>
                </div>
              </div>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 divide-y md:divide-y-0 md:divide-x divide-white/10 flex-grow">
              <div class="p-8 md:p-10 bg-gradient-to-br from-transparent to-white/[0.02] relative overflow-hidden group">
                <h3 class="text-xl font-semibold tracking-tight text-white mb-2 relative z-10">
                  Packet Loss Fix
                </h3>
                <p class="text-sm text-zinc-400 relative z-10">
                  Stabilize your connection instantly.
                </p>
              </div>
              <div class="p-8 md:p-10 flex flex-col justify-center bg-black">
                <div class="text-4xl md:text-5xl font-semibold tracking-tighter text-white mb-1">
                  -40%
                </div>
                <div class="text-sm text-zinc-400">Average Ping Reduction</div>
              </div>
            </div>
          </div>

          <div class="lg:col-span-5 p-8 md:p-12 flex flex-col justify-between bg-zinc-900/20 flashlight-card aura-reveal is-visible" style="animation-delay: 100ms;">
            <div class="">
              <h3 class="text-3xl font-semibold tracking-tight text-white mb-4">
                Competitive Edge In Every Game
              </h3>
              <p class="text-base text-zinc-400 leading-relaxed mb-10">
                Don't let your ISP's bad routing cost you the match. Finex
                ensures your packets take the most direct route.
              </p>
              <ul class="space-y-4 mb-10">
                <li class="flex items-start gap-3">
                  <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" class="lucide lucide-zap w-5 h-5 text-white shrink-0 mt-0.5">
                    <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2" class=""></polygon>
                  </svg>
                  <span class="text-sm text-zinc-300">
                    Reduce Latency &amp; Jitter
                  </span>
                </li>
                <li class="flex items-start gap-3">
                  <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" class="lucide lucide-shield w-5 h-5 text-white shrink-0 mt-0.5">
                    <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" class=""></path>
                  </svg>
                  <span class="text-sm text-zinc-300">
                    DDoS Protection Included
                  </span>
                </li>
                <li class="flex items-start gap-3">
                  <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" class="lucide lucide-route w-5 h-5 text-white shrink-0 mt-0.5">
                    <circle cx="6" cy="19" r="3" class=""></circle>
                    <path d="M9 19h8.5a3.5 3.5 0 0 0 0-7h-11a3.5 3.5 0 0 1 0-7H15" class=""></path>
                    <circle cx="18" cy="5" r="3" class=""></circle>
                  </svg>
                  <span class="text-sm text-zinc-300">
                    Smart Traffic Routing
                  </span>
                </li>
              </ul>
            </div>
            <button class="bg-white text-black px-6 py-2.5 rounded-lg text-sm font-semibold hover:bg-zinc-200 transition-colors w-fit">
              Get Started
            </button>
          </div>
        </div>
      </div>