Dark Hero Section with Analytics Visualization

<div
  style="--color-paper:#050505; --color-ink:#ffffff; --color-ink-70:#a3a3a3; --color-ink-50:#737373; --color-accent:#3b82f6; --color-accent-soft:#93c5fd; --radius-0:0px; --shadow-none: none; --blur-soft: 12px; --blur-strong: 22px; --font-sans: 'Inter', system-ui, sans-serif; --space-1:8px; --space-2:16px; --space-3:24px; --space-4:32px; --space-5:40px; --space-6:48px; --space-8:64px; --space-10:80px; --col-left:34vw; --gutter:6.5vw; --rule:1px; background-color: var(--color-paper); color: var(--color-ink); font-family: var(--font-sans); min-height: 100vh;">
  <style>
    .t-eyebrow {
      font-size: 12px;
      line-height: 16px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--color-ink-50);
    }

    .t-headline {
      font-size: 48px;
      line-height: 56px;
      font-weight: 300;
      letter-spacing: -0.02em;
    }

    .t-headline b {
      font-weight: 700;
      color: var(--color-ink);
    }

    .t-sub {
      font-size: 18px;
      line-height: 28px;
      color: var(--color-ink-70);
    }

    .t-stat-num {
      font-size: 28px;
      line-height: 32px;
      font-weight: 700;
      color: var(--color-ink);
    }

    .t-stat-label {
      font-size: 12px;
      line-height: 16px;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--color-ink-50);
    }

    .t-legal {
      font-size: 11px;
      line-height: 16px;
      color: var(--color-ink-50);
    }

    .frame {
      padding: var(--space-8) var(--space-8) var(--space-6) var(--space-8);
    }

    .grid-layout {
      display: grid;
      grid-template-columns: var(--col-left) var(--gutter) 1fr;
      column-gap: 0;
      align-items: start;
    }

    .field {
      position: relative;
      min-height: 72vh;
    }

    .axis {
      position: absolute;
      left: 0;
      right: 0;
      top: 50%;
      height: var(--rule);
      background: rgba(255, 255, 255, 0.15);
    }

    .labels {
      position: absolute;
      left: 0;
      right: 0;
      top: calc(50% + var(--space-2));
      display: flex;
      justify-content: space-between;
      font-size: 12px;
      color: var(--color-ink-50);
    }

    .bar {
      position: absolute;
      bottom: 50%;
      width: 7.5%;
      transform: translateX(-50%);
    }

    .bar::before,
    .bar::after {
      content: "";
      display: block;
      width: 100%;
      filter: blur(var(--blur-soft));
    }

    .bar::before {
      background: linear-gradient(to top, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0.0) 85%);
      opacity: 0.85;
      transform: translateY(0);
      height: 24vh;
    }

    .bar::after {
      background: linear-gradient(to bottom, var(--color-accent), rgba(59, 130, 246, 0.15) 70%, rgba(59, 130, 246, 0) 100%);
      position: relative;
      top: var(--space-2);
      height: 22vh;
      opacity: 0.9;
    }

    .m-1::before {
      height: 18vh;
    }

    .m-1::after {
      height: 16vh;
    }

    .m-2::before {
      height: 22vh;
    }

    .m-2::after {
      height: 18vh;
    }

    .m-3::before {
      height: 28vh;
    }

    .m-3::after {
      height: 20vh;
    }

    .m-4::before {
      height: 34vh;
    }

    .m-4::after {
      height: 22vh;
    }

    .m-5::before {
      height: 26vh;
    }

    .m-5::after {
      height: 18vh;
    }

    .m-6::before {
      height: 20vh;
    }

    .m-6::after {
      height: 16vh;
    }

    .m-7::before {
      height: 24vh;
    }

    .m-7::after {
      height: 18vh;
    }

    .ticks {
      position: absolute;
      left: 0;
      right: 0;
      top: calc(50% - 24vh - var(--space-2));
      height: var(--rule);
      background: rgba(255, 255, 255, 0.08);
    }

    .ticks::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: calc(-24vh - var(--space-2));
      height: var(--rule);
      background: rgba(255, 255, 255, 0.08);
    }

    .cta {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      color: var(--color-ink);
      text-decoration: none;
      border-bottom: var(--rule) solid var(--color-accent);
      padding-bottom: 2px;
      transition: opacity 0.2s;
    }

    .cta:hover {
      opacity: 0.8;
    }

    .cta-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: radial-gradient(circle at 40% 40%, var(--color-accent) 0%, var(--color-accent-soft) 70%, rgba(255, 255, 255, 0) 71%);
    }

    @media (max-width: 1024px) {
      .grid-layout {
        grid-template-columns: 1fr;
      }

      .frame {
        padding: var(--space-4);
      }

      .field {
        min-height: 50vh;
        margin-top: var(--space-8);
      }

      .t-headline {
        font-size: 32px;
        line-height: 40px;
      }
    }
  </style>

  <main class="frame">
    <div class="flex items-center justify-between mb-16">
      <div class="t-eyebrow">Intellectual Logistics</div>
      <div class="t-eyebrow">PAX / SYSTEMS — V2.4</div>
    </div>

    <section class="grid-layout">
      <div>
        <h1 class="t-headline mb-6">
          Stop donating capital to customs. <b class="text-blue-500">Pax</b> deploys autonomous intelligence to reclaim
          the tariffs your supply chain is owed.
        </h1>

        <p class="t-sub mb-8">
          The first end-to-end engine for duty drawback. We ingest your global trade data, map every SKU, and file
          claims automatically—turning compliance into a profit center.
        </p>

        <div class="grid grid-cols-2 gap-y-8 gap-x-4 mt-12">
          <div class="flex flex-col gap-1">
            <div class="t-stat-num">$850K+</div>
            <div class="t-stat-label">Avg. Annual Recovery</div>
          </div>
          <div class="flex flex-col gap-1">
            <div class="t-stat-num">$20B</div>
            <div class="t-stat-label">Unclaimed by US Brands</div>
          </div>
          <div class="flex flex-col gap-1">
            <div class="t-stat-num">100%</div>
            <div class="t-stat-label">Audit-Ready Accuracy</div>
          </div>
          <div class="flex flex-col gap-1">
            <div class="t-stat-num">48H</div>
            <div class="t-stat-label">Implementation Speed</div>
          </div>
        </div>

        <div class="mt-12">
          <a href="#" class="cta">
            <span class="cta-dot"></span>
            <span>Analyze your refund potential</span>
            <svg style="width:14px; height:14px;" viewBox="0 0 24 24" fill="none" stroke="currentColor"
              stroke-width="2">
              <path d="M5 12h14M13 5l7 7-7 7"></path>
            </svg>
          </a>
        </div>
      </div>

      <div class="hidden lg:block"></div>

      <div class="field">
        <div class="ticks"></div>
        <div class="axis"></div>

        <div
          class="absolute left-0 top-[calc(50%-32vh)] text-[11px] uppercase tracking-widest text-[var(--color-ink-50)]">
          Autonomous Discovery
        </div>
        <div
          class="absolute left-0 top-[calc(50%+28vh)] text-[11px] uppercase tracking-widest text-[var(--color-ink-50)]">
          Manual Leakage
        </div>

        <div class="labels px-2">
          <span>Ingest</span>
          <span>Mapping</span>
          <span>Linking</span>
          <span>Vault</span>
          <span>Submit</span>
          <span>Verify</span>
          <span>Capital</span>
        </div>

        <div class="bar m-4" style="left:10%;"></div>
        <div class="bar m-3" style="left:24%;"></div>
        <div class="bar m-5" style="left:38%;"></div>
        <div class="bar m-2" style="left:52%;"></div>
        <div class="bar m-6" style="left:66%;"></div>
        <div class="bar m-1" style="left:80%;"></div>
        <div class="bar m-7" style="left:94%;"></div>

        <div class="absolute right-0 bottom-0 t-legal opacity-60">
          Visualizing the gap between legacy brokerage and Pax AI intelligence mapping.
        </div>
      </div>
    </section>
  </main>

  <script src="https://cdn.jsdelivr.net/npm/lucide@0.344.0/dist/umd/lucide.min.js"></script>
</div>