Orbit Financial Landing Page with Gradient Hero

<div class="relative w-full min-h-screen overflow-hidden text-white"
  style="background-color: #050508; font-family: 'Inter', sans-serif;">
  <script src="https://cdn.tailwindcss.com"></script>

  <div class="fixed inset-0 pointer-events-none opacity-30"
    style="background-image: radial-gradient(1px 1px at 20px 30px, #fff, transparent), radial-gradient(1px 1px at 40px 70px, #fff, transparent), radial-gradient(2px 2px at 160px 120px, rgba(255, 255, 255, 0.5), transparent); background-size: 200px 200px; z-index: -2;">
  </div>
  <div class="fixed top-0 -right-[20%] w-[80vw] h-screen pointer-events-none opacity-60"
    style="background: radial-gradient(circle at 100% 50%, rgba(255, 87, 34, 0.15) 0%, rgba(106, 27, 154, 0.1) 40%, transparent 70%); z-index: -1;">
  </div>

  <nav class="fixed top-0 left-0 w-full px-10 py-6 flex justify-between items-center z-[100]"
    style="background: linear-gradient(to bottom, rgba(5, 5, 8, 0.9), transparent);">
    <div class="font-bold tracking-widest uppercase text-sm">Orbit Financial</div>
    <div class="hidden md:flex gap-8">
      <a href="#"
        class="text-xs uppercase tracking-widest text-[#8a8a9b] hover:text-white transition-colors">Platform</a>
      <a href="#"
        class="text-xs uppercase tracking-widest text-[#8a8a9b] hover:text-white transition-colors">Solutions</a>
      <a href="#" class="text-xs uppercase tracking-widest text-white">Login</a>
    </div>
  </nav>

  <section class="relative h-screen flex items-center overflow-hidden">
    <div
      class="absolute top-1/2 -right-[10%] w-[60vw] h-[120vh] rounded-full opacity-80 blur-[40px] -translate-y-1/2 pointer-events-none"
      style="background: linear-gradient(to left, #000, transparent), radial-gradient(circle at 100% 50%, #ffcc99 0%, #ff5722 20%, #6a1b9a 60%, transparent 70%); z-index: -1;">
    </div>

    <div class="container mx-auto px-6 relative z-10">
      <div class="max-w-2xl">
        <span class="inline-block text-[10px] uppercase tracking-[0.2em] text-[#8a8a9b] mb-4 border-l border-orange-500 pl-3">Orbit v2.0 // Optimal Efficiency</span>
        <h1 class="text-5xl md:text-7xl font-light leading-[1.1] mb-6 tracking-tight">
          Elevate
          Finance.<br><span class="text-transparent bg-clip-text bg-gradient-to-r from-orange-200 to-orange-500">Automate Everything.</span>
        </h1>
        <p class="text-xl text-[#bcbcc4] font-light mb-10 max-w-lg leading-relaxed">
          The next generation of autonomous financial operations. Scale your company with intelligent workflows that
          eliminate manual reconciliations and close your books instantly.
        </p>
        <div class="flex flex-wrap gap-4">
          <a href="#" class="px-10 py-4 text-xs uppercase tracking-widest font-medium transition-all"
            style="background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.3); backdrop-filter: blur(10px);">Launch
            Transformation</a>
          <a href="#"
            class="px-10 py-4 text-xs uppercase tracking-widest font-medium text-[#8a8a9b] hover:text-white transition-colors">Request
            a Briefing</a>
        </div>
      </div>
    </div>

    <div class="absolute border border-white/5 rounded-full pointer-events-none -z-10"
      style="width: 800px; height: 800px; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(45deg);"></div>
    <div class="absolute border border-white/5 rounded-full pointer-events-none -z-10"
      style="width: 1200px; height: 1200px; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-15deg);">
    </div>
  </section>

  <section class="py-32 relative">
    <div class="container mx-auto px-6">
      <div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
        <div>
          <span class="text-[10px] uppercase tracking-widest text-orange-500 mb-4 block">System Diagnostics</span>
          <h2 class="text-4xl font-light mb-6">Escape Manual Gravity</h2>
          <p class="text-[#bcbcc4] font-light text-lg mb-8">Spreadsheets are the friction slowing your mission. Every
            manual entry is a potential point of failure.</p>
        </div>
        <div class="relative p-8 border border-orange-500/30 bg-[#140a0a]/60 overflow-hidden">
          <div class="absolute top-0 left-0 w-full h-[1px] opacity-50"
            style="background: linear-gradient(90deg, transparent, #ffcc99, transparent); animation: scan 3s linear infinite;">
          </div>
          <style>
            @keyframes scan {
              0% {
                top: 0;
              }

              100% {
                top: 100%;
              }
            }
          </style>
          <div class="space-y-4 font-mono text-sm">
            <div class="flex justify-between py-2 border-b border-white/5 text-orange-500">
              <span>Unreconciled Items</span><span>842</span></div>
            <div class="flex justify-between py-2 border-b border-white/5">
              <span>Reporting Delay</span><span>124 Hours</span></div>
            <div class="flex justify-between py-2 border-b border-white/5 text-orange-500">
              <span>Audit Risk Profile</span><span>CRITICAL</span></div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section class="py-32 border-t border-white/5">
    <div class="container mx-auto px-6 text-center">
      <h2 class="text-4xl font-light mb-12">Continuous Close Architecture</h2>
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        <div class="p-8 border border-white/10 text-left hover:border-white/40 transition-colors"
          style="background: linear-gradient(135deg, rgba(255, 255, 255, 0.03), transparent);">
          <div
            class="w-10 h-10 rounded-full border border-white/20 flex items-center justify-center text-orange-200 mb-6">
            ◈</div>
          <h3 class="text-lg font-medium mb-4">Ingestion</h3>
          <p class="text-sm text-[#8a8a9b]">Real-time synchronization across all ERPs, banks, and payment gateways.</p>
        </div>
        <div class="p-8 border border-white/10 text-left hover:border-white/40 transition-colors"
          style="background: linear-gradient(135deg, rgba(255, 255, 255, 0.03), transparent);">
          <div
            class="w-10 h-10 rounded-full border border-white/20 flex items-center justify-center text-orange-200 mb-6">
            ◎</div>
          <h3 class="text-lg font-medium mb-4">Logic Matching</h3>
          <p class="text-sm text-[#8a8a9b]">Autonomous reconciliation with 99.9% accuracy using proprietary ML.</p>
        </div>
        <div class="p-8 border border-white/10 text-left hover:border-white/40 transition-colors"
          style="background: linear-gradient(135deg, rgba(255, 255, 255, 0.03), transparent);">
          <div
            class="w-10 h-10 rounded-full border border-white/20 flex items-center justify-center text-orange-200 mb-6">
            ◰</div>
          <h3 class="text-lg font-medium mb-4">Auto-Journal</h3>
          <p class="text-sm text-[#8a8a9b]">Self-posting entries for revenue, expenses, and complex intercompany.</p>
        </div>
        <div class="p-8 border border-white/10 text-left hover:border-white/40 transition-colors"
          style="background: linear-gradient(135deg, rgba(255, 255, 255, 0.03), transparent);">
          <div
            class="w-10 h-10 rounded-full border border-white/20 flex items-center justify-center text-orange-200 mb-6">
            ∿</div>
          <h3 class="text-lg font-medium mb-4">Audit Trail</h3>
          <p class="text-sm text-[#8a8a9b]">Immutable logs for every transaction. Ready for external review anytime.</p>
        </div>
      </div>
    </div>
  </section>

  <section class="py-40 text-center relative overflow-hidden"
    style="background: radial-gradient(circle at 50% 100%, rgba(255, 204, 153, 0.1), transparent 50%);">
    <div class="container mx-auto px-6 relative z-10">
      <h2 class="text-5xl font-light mb-6">Ready for Zero-Touch?</h2>
      <p class="text-[#bcbcc4] text-lg mb-12 max-w-xl mx-auto">Join the elite finance teams operating at light speed.
      </p>
      <a href="#" class="inline-block px-12 py-5 text-sm uppercase tracking-widest font-bold text-black"
        style="background: #ff5722; box-shadow: 0 0 30px rgba(255, 87, 34, 0.4);">Initialize Onboarding</a>
    </div>
  </section>
</div>