Cyber Themed SaaS Hero with Metrics and Nav

<main class="relative w-full min-h-screen flex flex-col text-white overflow-hidden"
  style="font-family: 'Inter', sans-serif; background: radial-gradient(at 0% 0%, hsla(222,64%,55%,1) 0, transparent 50%), radial-gradient(at 50% 0%, hsla(242,58%,30%,1) 0, transparent 50%), radial-gradient(at 100% 0%, hsla(222,67%,55%,1) 0, transparent 50%), radial-gradient(at 0% 100%, hsla(242,58%,30%,1) 0, transparent 50%), radial-gradient(at 100% 100%, hsla(195,80%,70%,1) 0, transparent 50%), radial-gradient(at 50% 50%, hsla(242,100%,70%,1) 0, transparent 50%);">
  <script src="https://cdn.tailwindcss.com/3.4.17"></script>
  <script src="https://unpkg.com/@phosphor-icons/web"></script>
  <link
    href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600&display=swap"
    rel="stylesheet">

  <!-- Navigation -->
  <nav class="relative z-50 w-full px-8 md:px-12 py-8 flex justify-between items-center">
    <div class="text-2xl font-bold tracking-wider" style="font-family: 'Outfit', sans-serif;">
      QUANTUM<span class="font-light text-cyan-300">FLOW</span>
    </div>

    <div class="hidden md:flex gap-10 text-sm font-medium text-blue-100/80">
      <a href="#" class="hover:text-white transition-colors">Infrastructure</a>
      <a href="#" class="hover:text-white transition-colors">Enterprise</a>
      <a href="#" class="hover:text-white transition-colors flex items-center gap-1">Security
        <i class="ph ph-caret-down"></i></a>
      <a href="#" class="hover:text-white transition-colors">Pricing</a>
    </div>

    <button class="bg-white/10 hover:bg-white/20 text-white px-8 py-3 rounded-full text-sm font-medium transition-all backdrop-blur-md border border-white/20">
            Get Access
        </button>
  </nav>

  <!-- Hero Section -->
  <div class="flex-grow flex flex-col justify-center px-8 md:px-24 py-20 relative z-10">
    <div class="max-w-5xl">
      <div
        class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/5 border border-white/10 mb-8 backdrop-blur-sm">
        <span class="w-2 h-2 rounded-full bg-cyan-400 animate-pulse"></span>
        <span class="text-xs font-semibold tracking-widest uppercase text-cyan-200">v4.0 Engine Live</span>
      </div>

      <h1 class="text-6xl md:text-8xl font-bold leading-[1.1] tracking-tight mb-8"
        style="font-family: 'Outfit', sans-serif; text-shadow: 0 0 30px rgba(255, 255, 255, 0.1);">
        Orchestrate <br/>
        <span class="text-transparent bg-clip-text bg-gradient-to-r from-cyan-200 to-blue-400">Enterprise Data</span>
        <br/>
                Seamlessly.
      </h1>

      <p class="text-lg md:text-xl text-blue-100/70 max-w-2xl font-light leading-relaxed mb-12">
        Unify your cloud infrastructure with high-performance intelligence. Our proprietary engine automates complex
        neural workflows while maintaining total data sovereignty.
      </p>

      <div class="flex flex-col sm:flex-row gap-6">
        <button class="bg-white text-blue-900 px-8 py-4 rounded-xl font-bold flex items-center justify-center gap-3 hover:bg-cyan-50 transition-all shadow-xl shadow-blue-900/20 group">
                    Start Integration
                    <i class="ph-bold ph-arrow-right group-hover:translate-x-1 transition-transform"></i>
                </button>
        <button class="px-8 py-4 rounded-xl border border-white/20 hover:bg-white/5 transition-all backdrop-blur-sm font-medium">
                    Review Architecture
                </button>
      </div>
    </div>

    <!-- Metric Section -->
    <div class="mt-24 grid grid-cols-2 md:grid-cols-4 gap-8 pt-12 border-t border-white/10">
      <div>
        <div class="text-3xl font-bold mb-1" style="font-family: 'Outfit', sans-serif;">99.9%</div>
        <div class="text-xs uppercase tracking-widest text-blue-300/60 font-semibold">Uptime SLA</div>
      </div>
      <div>
        <div class="text-3xl font-bold mb-1" style="font-family: 'Outfit', sans-serif;">&lt;12ms</div>
        <div class="text-xs uppercase tracking-widest text-blue-300/60 font-semibold">Average Latency</div>
      </div>
      <div>
        <div class="text-3xl font-bold mb-1" style="font-family: 'Outfit', sans-serif;">256-bit</div>
        <div class="text-xs uppercase tracking-widest text-blue-300/60 font-semibold">Edge Encryption</div>
      </div>
      <div>
        <div class="text-3xl font-bold mb-1" style="font-family: 'Outfit', sans-serif;">150+</div>
        <div class="text-xs uppercase tracking-widest text-blue-300/60 font-semibold">Global Nodes</div>
      </div>
    </div>
  </div>

  <!-- Footer-like watermark -->
  <div class="absolute bottom-8 right-12 opacity-30 text-[10px] tracking-[0.3em] font-mono pointer-events-none">
    QS-CORE // PROTOCOL ACTIVATED
  </div>

  <script>
    document.querySelectorAll('button').forEach(btn => {
            btn.addEventListener('mousedown', () => {
                btn.style.transform = 'scale(0.97)';
            });
            btn.addEventListener('mouseup', () => {
                btn.style.transform = 'scale(1)';
            });
            btn.addEventListener('mouseleave', () => {
                btn.style.transform = 'scale(1)';
            });
        });
  </script>
</main>