Network Optimization Feature Section

<section class="container max-w-7xl mx-auto px-6 border-x border-b border-white/10 py-24">
        <!-- Section Header -->
        <div class="flex flex-col lg:flex-row lg:items-end justify-between mb-16 gap-12">
          <div class="flex-1 aura-reveal">
            <div class="inline-flex items-center justify-center px-3 py-1 mb-6 border border-purple-500/30 bg-purple-500/10 text-purple-200 text-xs font-medium tracking-wide uppercase">
              Intelligent Protection
            </div>
            <h2 class="text-6xl md:text-7xl lg:text-8xl font-oswald uppercase tracking-tight leading-[0.9] text-white">
              Speed Without
              <br>
              Compromise
            </h2>
          </div>

          <div class="flex flex-col justify-end items-start lg:items-end lg:text-right max-w-md gap-12 aura-reveal" style="animation-delay: 100ms;">
            <p class="text-zinc-400 text-lg leading-relaxed text-left lg:text-left">
              Your connection, supercharged by our global node network.
            </p>
            <div class="w-full flex justify-end">
              <span class="text-sm text-zinc-500 font-mono">001 — 003</span>
            </div>
          </div>
        </div>

        <!-- Main Feature Visual Area -->
        <div class="relative w-full aspect-[16/10] md:aspect-[21/9] bg-[#0A0A0A] border border-white/10 mb-10 overflow-hidden group shadow-2xl shadow-purple-900/20 aura-reveal">
          <!-- Background ambient glow -->
          <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[400px] bg-purple-800/20 blur-[120px] rounded-full pointer-events-none"></div>

          <!-- Dark overlay gradient -->
          <div class="absolute inset-0 bg-gradient-to-t from-[#020202] via-transparent to-transparent z-10"></div>

          <!-- Abstract UI Interface (Sharp Edges) -->
          <div class="absolute inset-10 md:inset-16 flex border border-white/5 bg-[#050505] shadow-2xl z-20">
            <!-- Sidebar -->
            <div class="w-16 border-r border-white/5 flex flex-col items-center py-6 gap-6 bg-black/20 backdrop-blur-md">
              <div class="w-8 h-8 bg-zinc-800 flex items-center justify-center">
                <svg class="w-4 h-4 text-zinc-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                  <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" class=""></path>
                  <polyline points="9 22 9 12 15 12 15 22" class=""></polyline>
                </svg>
              </div>
              <div class="w-8 h-8 bg-purple-600/20 flex items-center justify-center border-l-2 border-purple-500">
                <svg class="w-4 h-4 text-purple-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                  <path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20" class=""></path>
                  <path d="M2 12h20" class=""></path>
                </svg>
              </div>
              <div class="w-8 h-8 flex items-center justify-center opacity-50">
                <svg class="w-4 h-4 text-zinc-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                  <rect x="2" y="3" width="20" height="14" rx="2" ry="2" class=""></rect>
                  <line x1="8" y1="21" x2="16" y2="21" class=""></line>
                  <line x1="12" y1="17" x2="12" y2="21" class=""></line>
                </svg>
              </div>
            </div>

            <!-- Main Content -->
            <div class="flex-1 p-8 relative overflow-hidden">
              <!-- Header UI -->
              <div class="flex items-center justify-between mb-8 border-b border-white/5 pb-4">
                <div class="flex items-center gap-3">
                  <div class="w-2 h-2 bg-green-500 shadow-[0_0_10px_rgba(34,197,94,0.5)]"></div>
                  <span class="text-sm font-mono text-zinc-300 tracking-wider">
                    OPTIMIZATION_ACTIVE
                  </span>
                </div>
                <div class="flex gap-3">
                  <div class="px-3 py-1 border border-white/10 text-[10px] text-zinc-400 uppercase tracking-widest hover:bg-white/5 transition-colors cursor-pointer">
                    Protocol: Wireguard
                  </div>
                  <div class="px-3 py-1 border border-white/10 text-[10px] text-zinc-400 uppercase tracking-widest hover:bg-white/5 transition-colors cursor-pointer">
                    IP: 192.168.X.X
                  </div>
                </div>
              </div>

              <!-- Main Stats Grid -->
              <div class="grid grid-cols-2 gap-4 aura-reveal">
                <!-- Card 1 -->
                <div class="border border-white/10 bg-white/[0.02] p-4 group/card hover:bg-white/[0.04] transition-colors">
                  <div class="flex items-start justify-between mb-4">
                    <div class="p-2 bg-purple-500/10 border border-purple-500/20">
                      <svg class="w-5 h-5 text-purple-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                        <path d="M21 12V7H5a2 2 0 0 1 0-4h14v4" class=""></path>
                        <path d="M3 5v14a2 2 0 0 0 2 2h16v-5" class=""></path>
                        <path d="M18 12a2 2 0 0 0 0 4h4v-4Z" class=""></path>
                      </svg>
                    </div>
                    <span class="text-xs text-zinc-500 font-mono">
                      Reduced from 45ms
                    </span>
                  </div>
                  <div class="text-lg text-white font-medium">12ms</div>
                  <div class="text-xs text-zinc-500 mt-1">
                    Military grade standard
                  </div>
                </div>

                <!-- Card 2 -->
                <div class="border border-white/10 bg-white/[0.02] p-4 group/card hover:bg-white/[0.04] transition-colors">
                  <div class="flex items-start justify-between mb-4">
                    <div class="p-2 bg-blue-500/10 border border-blue-500/20">
                      <svg class="w-5 h-5 text-blue-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                        <path d="M12 2a10 10 0 1 0 10 10 4 4 0 0 1-5-5 4 4 0 0 1-5-5" class=""></path>
                        <path d="M8.5 8.5v.01" class=""></path>
                        <path d="M16 15.5v.01" class=""></path>
                        <path d="M12 12v.01" class=""></path>
                        <path d="M11 17v.01" class=""></path>
                        <path d="M7 14v.01" class=""></path>
                      </svg>
                    </div>
                    <span class="text-xs text-zinc-500 font-mono">
                      No Packet Loss
                    </span>
                  </div>
                  <div class="text-lg text-white font-medium">100%</div>
                  <div class="text-xs text-zinc-500 mt-1">Latency: 14ms</div>
                </div>

                <!-- List Item -->
                <div class="col-span-2 mt-4">
                  <div class="text-xs text-zinc-500 font-mono mb-3 uppercase tracking-wider">
                    Recent Activity
                  </div>
                  <div class="space-y-1">
                    <div class="flex items-center justify-between p-3 border border-white/5 bg-white/[0.01] hover:bg-white/[0.03]">
                      <div class="flex items-center gap-3">
                        <div class="w-1.5 h-1.5 bg-green-500"></div>
                        <span class="text-sm text-zinc-300">
                          Route Re-optimized
                        </span>
                      </div>
                      <span class="text-xs text-zinc-600 font-mono">
                        00:00:05
                      </span>
                    </div>
                    <div class="flex items-center justify-between p-3 border border-white/5 bg-white/[0.01] hover:bg-white/[0.03]">
                      <div class="flex items-center gap-3">
                        <div class="w-1.5 h-1.5 bg-blue-500"></div>
                        <span class="text-sm text-zinc-400">
                          Jitter Spike Mitigated
                        </span>
                      </div>
                      <span class="text-xs text-zinc-600 font-mono">
                        00:01:12
                      </span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- Abstract Decorative Elements inside the main window -->
          <div class="absolute right-0 top-0 bottom-0 w-32 bg-gradient-to-l from-black via-transparent to-transparent z-30 pointer-events-none"></div>
          <div class="absolute bottom-0 left-0 right-0 h-32 bg-gradient-to-t from-black via-transparent to-transparent z-30 pointer-events-none"></div>

          <!-- Decorative floating squares (like reference image) -->

          <div class="absolute right-[5%] top-[20%] w-24 h-24 border border-white/5 bg-white/[0.02] backdrop-blur-sm z-10 rotate-45 opacity-20"></div>
        </div>

        <!-- Feature Navigation Grid -->
        <div class="grid grid-cols-1 md:grid-cols-4 border-t border-white/10">
          <div class="group pt-6 pr-4 cursor-pointer">
            <h3 class="text-sm font-semibold text-white mb-2 group-hover:text-purple-300 transition-colors">
              Smart Pathing
            </h3>
            <p class="text-xs text-zinc-500 leading-relaxed group-hover:text-zinc-400 transition-colors">
              We find the fastest physical path to the game server.
            </p>
          </div>
          <div class="relative pt-6 pr-4 px-0 md:px-4 cursor-pointer">
            <div class="absolute top-0 left-0 right-0 h-[1px] bg-gradient-to-r from-transparent via-white to-transparent shadow-[0_0_15px_rgba(255,255,255,0.7)]"></div>
            <h3 class="text-sm font-semibold text-white mb-2">FPS Boost</h3>
            <p class="text-xs text-zinc-400 leading-relaxed">
              Free up system resources and optimize network drivers.
            </p>
          </div>
          <div class="group pt-6 pr-4 px-0 md:px-4 cursor-pointer">
            <h3 class="text-sm font-semibold text-white mb-2 group-hover:text-purple-300 transition-colors">
              Packet Loss Fix
            </h3>
            <p class="text-xs text-zinc-500 leading-relaxed group-hover:text-zinc-400 transition-colors">
              Redundant data transmission ensures 0% packet loss.
            </p>
          </div>
          <div class="group pt-6 px-0 md:px-4 cursor-pointer">
            <h3 class="text-sm font-semibold text-white mb-2 group-hover:text-purple-300 transition-colors">
              Game Support
            </h3>
            <p class="text-xs text-zinc-500 leading-relaxed group-hover:text-zinc-400 transition-colors">
              Custom profiles for over 1000+ competitive titles.
            </p>
          </div>
        </div>
      </section>