Forensic Protocol Audit Feature Section

<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');

  .paradigm-section {
    --paper: #F2F0EB;
    --ink: #1C1C1B;
    --forest: #2A382E;
    --clay: #C9A690;
    --highlight: #D4E157;
    background-color: #E8E6E1;
    font-family: 'Inter', sans-serif;
    color: var(--ink);
  }

  .serif {
    font-family: 'Fraunces', serif;
  }

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

<section class="paradigm-section py-32 px-8 border-b border-black"
  style="min-height: 100vh; display: flex; align-items: center;">
  <div class="max-w-4xl mx-auto w-full">
    <div class="text-center mb-16">
      <div class="mono text-xs font-bold text-[#2A382E] mb-6 uppercase tracking-widest" style="color: #2A382E;">
        — Deep Protocol Audit
      </div>
      <h2 class="serif text-5xl md:text-7xl mb-8 font-light tracking-tighter" style="line-height: 0.9;">
        Intelligence beyond <br>observation.
      </h2>
      <p class="text-xl text-gray-700 max-w-2xl mx-auto leading-relaxed">
        While traditional systems review records, our neural engine simulates outcomes. Paradigm identifies the exact
        intersection of legal compliance and maximum liquidity.
      </p>
    </div>

    <div class="bg-[#1C1C1B] text-white p-8 md:p-12 rounded-sm shadow-2xl" style="background-color: #1C1C1B;">
      <div class="flex justify-between border-b border-white/20 pb-6 mb-10">
        <span class="mono text-[0.7rem] opacity-60">SYSTEM: FORENSIC_SCAN_v4.2</span>
        <span class="mono text-[0.7rem] opacity-60">REAL-TIME CALIBRATION</span>
      </div>

      <div class="space-y-10">
        <div class="flex flex-col md:flex-row md:items-center gap-4">
          <span class="mono text-[0.7rem] w-40 text-gray-400 uppercase">Legacy Logic</span>
          <div class="flex-grow h-1 bg-white/10 relative">
            <div class="absolute inset-y-0 left-0 bg-gray-500 w-[42%]"></div>
          </div>
          <span class="mono text-xs text-gray-400 w-24 text-right">$18,940.00</span>
        </div>

        <div class="flex flex-col md:flex-row md:items-center gap-4">
          <span class="mono text-[0.7rem] w-40 uppercase text-[#C9A690]" style="color: #C9A690;">Paradigm Core</span>
          <div class="flex-grow h-1 bg-white/10 relative">
            <div class="absolute inset-y-0 left-0 bg-[#D4E157] w-[14%]" style="background-color: #D4E157;"></div>
          </div>
          <span class="mono text-xs text-[#D4E157] w-24 text-right" style="color: #D4E157;">$2,105.00</span>
        </div>
      </div>

      <div class="flex justify-between items-end mt-16 pt-8 border-t border-white/10">
        <div class="space-y-1">
          <div class="mono text-[0.6rem] text-gray-500 uppercase">Efficiency Variance</div>
          <div class="serif text-4xl text-[#D4E157]" style="color: #D4E157;">88.9%</div>
        </div>
        <div class="text-right">
          <button class="mono text-[0.7rem] border border-white/30 px-6 py-3 hover:bg-white hover:text-black transition-colors">
                        EXECUTE STRATEGY
                    </button>
        </div>
      </div>
    </div>

    <div class="mt-12 grid grid-cols-1 md:grid-cols-3 gap-8 px-4">
      <div class="border-t border-black/10 pt-4">
        <div class="mono text-[0.6rem] mb-2 opacity-50">01 / DISCOVERY</div>
        <p class="text-sm italic text-gray-600">Automated ingestion of fragmented financial data points.</p>
      </div>
      <div class="border-t border-black/10 pt-4">
        <div class="mono text-[0.6rem] mb-2 opacity-50">02 / VALIDATION</div>
        <p class="text-sm italic text-gray-600">Cross-referencing against 742,000 regulatory parameters.</p>
      </div>
      <div class="border-t border-black/10 pt-4">
        <div class="mono text-[0.6rem] mb-2 opacity-50">03 / SHIELD</div>
        <p class="text-sm italic text-gray-600">Constructing a verifiable defense for every deduction.</p>
      </div>
    </div>
  </div>
</section>