Orbital Finance Landing Hero with Cosmic Background

<div
  style="background-color: #030305; color: #E2E2E8; font-family: 'JetBrains Mono', monospace; overflow-x: hidden; position: relative;">
  <script src="https://cdn.tailwindcss.com"></script>
  <script src="https://unpkg.com/lucide@latest"></script>
  <link
    href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;1,400&family=JetBrains+Mono:wght@300;400;500&display=swap"
    rel="stylesheet">

  <style>
    .starfield {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      z-index: 0;
      background: radial-gradient(1px 1px at 10% 10%, #fff 100%, transparent), radial-gradient(1px 1px at 20% 20%, #fff 100%, transparent), radial-gradient(2px 2px at 30% 30%, #fff 100%, transparent);
      background-size: 550px 550px;
      opacity: 0.3;
      pointer-events: none;
    }

    .planet-horizon {
      position: fixed;
      bottom: -40vh;
      right: -20vw;
      width: 120vw;
      height: 120vw;
      border-radius: 50%;
      background: radial-gradient(circle at 50% 0%, rgba(0, 0, 0, 1) 40%, #2a2a35 60%, #D66D50 65%, #FFD28E 68%, transparent 72%);
      z-index: 0;
      filter: blur(40px);
      opacity: 0.6;
      pointer-events: none;
      transition: transform 2s cubic-bezier(0.2, 0.8, 0.2, 1);
    }

    .glass-panel {
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid rgba(255, 255, 255, 0.08);
      backdrop-filter: blur(4px);
    }

    .btn-primary {
      background: rgba(255, 210, 142, 0.1);
      border: 1px solid #FFD28E;
      color: #FFD28E;
      padding: 1rem 2rem;
      text-transform: uppercase;
      font-size: 0.8rem;
      letter-spacing: 0.1em;
      transition: all 0.4s ease;
    }

    .btn-primary:hover {
      background: #FFD28E;
      color: #030305;
      box-shadow: 0 0 20px rgba(255, 210, 142, 0.3);
    }

    @keyframes fadeIn {
      from {
        opacity: 0;
        transform: translateY(20px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
  </style>

  <div class="starfield"></div>
  <div class="planet-horizon" id="planet"></div>

  <nav
    class="fixed top-0 w-full z-50 flex justify-between items-center px-8 py-6 backdrop-blur-sm border-b border-white/5">
    <div class="flex items-center gap-4">
      <div class="w-4 h-4 rounded-full border border-white"></div>
      <span class="tracking-widest text-sm font-bold">ORBITAL<span class="text-gray-500">_FINANCE</span></span>
    </div>
    <button class="text-xs border border-gray-600 px-4 py-2 hover:bg-white hover:text-black transition-all">SYSTEM_ACCESS</button>
  </nav>

  <section class="relative h-screen w-full flex flex-col justify-center px-8 md:px-24 pt-20 overflow-hidden z-10">
    <div class="max-w-4xl">
      <div class="flex items-center gap-4 mb-6 opacity-0" style="animation: fadeIn 1s forwards 0.2s;">
        <div class="h-[1px] w-12 bg-gray-500"></div>
        <span class="text-xs tracking-[0.3em] text-gray-400">SYSTEM_PROTOCOL_ALPHA</span>
      </div>

      <h1 class="text-5xl md:text-8xl leading-tight mb-8 opacity-0"
        style="font-family: 'Playfair Display', serif; animation: fadeIn 1s forwards 0.5s;">
        Sovereign Finance.<br>
        <span class="italic text-transparent bg-clip-text bg-gradient-to-r from-white via-gray-300 to-gray-600">Zero Friction.</span>
      </h1>

      <p class="text-lg md:text-xl text-gray-400 max-w-xl mb-12 font-light opacity-0"
        style="animation: fadeIn 1s forwards 0.8s;">
        Navigate complex accounting cycles with absolute precision. Our autonomous engine streamlines reconciliations
        and reporting at the speed of light.
      </p>

      <div class="flex flex-col md:flex-row gap-6 opacity-0" style="animation: fadeIn 1s forwards 1.1s;">
        <button class="btn-primary flex items-center gap-2 group">
                    Launch Command Center 
                    <i data-lucide="arrow-right" class="w-4 h-4 group-hover:translate-x-1 transition-transform"></i>
                </button>
        <button class="px-8 py-4 border border-gray-600 text-xs tracking-widest uppercase hover:bg-white/5 transition-all">
                    View Trajectory
                </button>
      </div>
    </div>

    <div class="absolute bottom-12 left-8 md:left-24 flex gap-12 text-[10px] text-gray-600 font-mono">
      <div><span class="block text-gray-400 uppercase">Drift</span>0.0000s</div>
      <div><span class="block text-gray-400 uppercase">Sync_Index</span>99.98%</div>
      <div><span class="block text-gray-400 uppercase">Void_Stability</span>NOMINAL</div>
    </div>

    <script>
      lucide.createIcons();
            window.addEventListener('scroll', () => {
                const planet = document.getElementById('planet');
                planet.style.transform = `translateY(${window.scrollY * 0.1}px) scale(${1 + window.scrollY * 0.0005})`;
            });
    </script>
  </section>

  <section class="relative py-32 px-8 md:px-24 border-t border-white/5 z-10">
    <div class="grid grid-cols-1 md:grid-cols-2 gap-24 items-center">
      <div>
        <h2 class="text-4xl md:text-5xl mb-6" style="font-family: 'Playfair Display', serif;">The Gravity of Manual Data
        </h2>
        <p class="text-gray-400 leading-relaxed mb-8">Static ledgers are the debris of a legacy era. Orbital Finance
          cleans the flight path, removing the friction of manual entry and human error.</p>
        <div class="grid grid-cols-2 gap-4 text-[10px] font-mono">
          <div class="glass-panel p-4 border-l-2 border-l-orange-500">AUTO_RECON_ACTIVE</div>
          <div class="glass-panel p-4 border-l-2 border-l-blue-500">LEDGER_INTEGRITY_MAX</div>
        </div>
      </div>
      <div
        class="glass-panel p-8 rounded-lg aspect-video flex items-center justify-center relative overflow-hidden group">
        <div
          style="position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: linear-gradient(90deg, transparent, #fff, transparent); animation: scan 4s infinite linear;">
        </div>
        <i data-lucide="activity" class="w-16 h-16 text-gray-700 group-hover:text-orange-400 transition-colors"></i>
      </div>
    </div>
  </section>

  <section class="py-20 px-8 md:px-24 text-center z-10 relative">
    <h2 class="text-3xl serif mb-12">Seamless Integration Across the Cluster</h2>
    <div class="flex flex-wrap justify-center gap-8 opacity-40 grayscale">
      <div class="h-8 w-24 bg-white/20 rounded"></div>
      <div class="h-8 w-24 bg-white/20 rounded"></div>
      <div class="h-8 w-24 bg-white/20 rounded"></div>
      <div class="h-8 w-24 bg-white/20 rounded"></div>
    </div>
  </section>

  <footer
    class="py-12 px-8 border-t border-white/5 text-center text-[10px] text-gray-600 tracking-widest uppercase z-10 relative">
    &copy; 2024 Orbital Finance Inc // Deep Space Infrastructure
  </footer>

  <style>
    @keyframes scan {
      0% {
        top: 0%;
      }

      100% {
        top: 100%;
      }
    }
  </style>
</div>