Fintech Hero Section with Animated Ledger Card

<section
  style="background-color: #F2F0EB; color: #1C1C1B; font-family: 'Inter', sans-serif; min-height: 100vh; display: flex; flex-direction: column;">
  <script src="https://cdn.tailwindcss.com/3.4.17"></script>
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,600;1,9..144,400&family=Inter:wght@300;400;500&family=JetBrains+Mono:wght@400;500&display=swap');

    .serif {
      font-family: 'Fraunces', serif;
      letter-spacing: -0.03em;
    }

    .mono {
      font-family: 'JetBrains Mono', monospace;
      letter-spacing: 0.05em;
    }

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

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .animate-entry {
      animation: fadeIn 0.8s ease-out forwards;
    }
  </style>

  <header class="w-full max-w-4xl mx-auto px-8 py-8 flex justify-between items-center border-b border-black/10">
    <div class="serif text-2xl font-semibold tracking-tighter">ZENITH.</div>
    <button class="mono text-[10px] border border-black px-5 py-2 hover:bg-black hover:text-white transition-colors duration-300">
            SYSTEM_INIT
        </button>
  </header>

  <main class="flex-grow flex flex-col items-center justify-center px-8 py-20 text-center max-w-4xl mx-auto">
    <div class="animate-entry" style="animation-delay: 0.1s;">
      <div class="mono text-[11px] mb-6 text-[#C9A690] font-bold uppercase tracking-widest">
        ◆ Next-Gen Fiscal Orchestration
      </div>

      <h1 class="serif text-7xl md:text-8xl leading-[0.85] mb-8 font-light">
        Capital is<br><span class="italic text-[#2A382E]">code</span>.
      </h1>

      <p class="text-lg md:text-xl max-w-xl mx-auto mb-10 text-gray-600 font-light leading-relaxed">
        Zenith bridges the gap between raw financial data and algorithmic tax optimization. We deploy autonomous agents
        to secure your legacy with forensic precision.
      </p>

      <div class="flex flex-col sm:flex-row gap-4 justify-center items-center mb-16">
        <a href="#" class="bg-[#1C1C1B] text-[#F2F0EB] px-8 py-4 mono text-xs hover:opacity-90 transition-opacity">
          DEPLOY STRATEGY
        </a>
        <a href="#" class="border border-black px-8 py-4 mono text-xs hover:bg-black hover:text-white transition-all">
          VIEW PROTOCOLS
        </a>
      </div>
    </div>

    <div class="w-full max-w-md animate-entry" style="animation-delay: 0.4s;">
      <div
        style="background: #F2F0EB; padding: 2rem; border: 1px solid rgba(0,0,0,0.1); box-shadow: 0 30px 60px -12px rgba(0,0,0,0.15); text-align: left;">
        <div class="flex justify-between border-b-2 border-dashed border-gray-300 pb-4 mb-6">
          <div class="mono text-[10px] text-gray-500">LEDGER ID: 009-ZA</div>
          <div class="mono text-[10px] bg-[#D4E157] px-2 py-0.5">OPTIMIZED</div>
        </div>

        <div class="space-y-3">
          <div class="flex justify-between mono text-[11px]">
            <span>Portfolio Delta</span>
            <span class="font-bold">+$114,200.00</span>
          </div>
          <div class="flex justify-between mono text-[11px]">
            <span>Effective Liability</span>
            <span class="text-red-700">8.4%</span>
          </div>
          <div class="flex justify-between mono text-[11px] bg-[#D4E157]/30 p-1 -mx-1">
            <span>Strategy Applied</span>
            <span class="font-bold">QSBS_EXEMPT</span>
          </div>
          <div class="flex justify-between mono text-[11px]">
            <span>Confidence Score</span>
            <span class="text-green-800">99.98%</span>
          </div>
        </div>

        <div class="mt-8 pt-4 border-t border-gray-100 flex justify-center">
          <div class="mono text-[9px] text-gray-400 tracking-tighter">
            ENCRYPTED VIA RSA-4096 — ASSET SHIELD ACTIVE
          </div>
        </div>
      </div>
    </div>
  </main>

  <script>
    document.addEventListener('DOMContentLoaded', () => {
            console.log('Zenith Core Initialized');
            // Subtle parallax or hover effects can be added here
        });
  </script>
</section>