Landing Hero with Marquee Logos, Feature Cards & KPIs

<section class="sm:px-6 sm:mt-10 sm:mb-20 lg:px-8 lg:ml-auto lg:mr-auto lg:mt-48 z-10 max-w-7xl mt-8 mr-auto mb-16 ml-auto pr-4 pl-4">
  <!-- Trusted bar -->
<div class="animate-on-scroll [animation:fadeSlideIn_0.7s_ease-out_0.05s_both] border-gradient sm:rounded-[24px] sm:p-4 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 animate bg-neutral-900/40 rounded-[20px] pt-3 pr-3 pb-3 pl-3 backdrop-blur gap-x-3 gap-y-3">
  <div class="flex items-center gap-2 text-[10px] sm:text-xs text-neutral-300">
    <span class="inline-flex h-2 w-2 rounded-full bg-orange-400/80"></span>
    <span>Trusted by engineering-led teams</span>
  </div>
  <div class="w-full flex-1 overflow-hidden">
    <div class="overflow-hidden relative">
      <div style="mask-image: linear-gradient(to right, transparent, black 12%, black 88%, transparent); -webkit-mask-image: linear-gradient(to right, transparent, black 12%, black 88%, transparent);" class="">
        <div class="flex gap-6 will-change-transform animate-[marquee-left_30s_linear_infinite] gap-x-6 gap-y-6">
          <div class="flex gap-6 shrink-0 gap-x-0 sm:gap-x-6 lg:gap-x-20 gap-y-6">
            <a href="#" class="inline-flex items-center justify-center bg-center mix-blend-screen w-[150px] h-[40px] bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/e5f2922d-4fb6-4f7c-8795-cd9ba63105a4_1600w.png)] bg-cover rounded-lg"></a>
            <a href="#" class="inline-flex items-center justify-center bg-center mix-blend-screen w-[150px] h-[40px] bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/92287bc0-bc70-4864-bf05-a89c1b99a218_1600w.png)] bg-cover rounded-lg"></a>
            <a href="#" class="inline-flex items-center justify-center bg-center mix-blend-screen w-[150px] h-[40px] bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/8284c62f-bfed-4d35-aaa2-956d0a8969b3_1600w.png)] bg-cover rounded-lg"></a>
            <a href="#" class="inline-flex items-center justify-center bg-center mix-blend-screen w-[120px] h-[40px] bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/3764a6eb-78e1-495f-9143-c85a648446c4_1600w.png)] bg-cover rounded-lg"></a>
            <a href="#" class="inline-flex items-center justify-center bg-center mix-blend-screen w-[120px] h-[40px] bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/dea31d52-7076-423f-bace-53eeec3014d3_1600w.png)] bg-cover rounded-lg"></a>
            <a href="#" class="inline-flex items-center justify-center bg-center mix-blend-screen w-[150px] h-[40px] bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/b16a9cf6-6be1-4d0d-bc63-07a471092998_1600w.png)] bg-cover rounded-lg"></a>
          </div>
          <div class="flex shrink-0 gap-x-0 sm:gap-x-6 lg:gap-x-20 gap-y-6">
            <a href="#" class="inline-flex items-center justify-center bg-center mix-blend-screen w-[150px] h-[40px] bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/e5f2922d-4fb6-4f7c-8795-cd9ba63105a4_1600w.png)] bg-cover rounded-lg"></a>
            <a href="#" class="inline-flex items-center justify-center bg-center mix-blend-screen w-[150px] h-[40px] bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/92287bc0-bc70-4864-bf05-a89c1b99a218_1600w.png)] bg-cover rounded-lg"></a>
            <a href="#" class="inline-flex items-center justify-center bg-center mix-blend-screen w-[150px] h-[40px] bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/8284c62f-bfed-4d35-aaa2-956d0a8969b3_1600w.png)] bg-cover rounded-lg"></a>
            <a href="#" class="inline-flex items-center justify-center bg-center mix-blend-screen w-[100px] h-[40px] bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/3764a6eb-78e1-495f-9143-c85a648446c4_1600w.png)] bg-cover rounded-lg"></a>
            <a href="#" class="inline-flex items-center justify-center bg-center mix-blend-screen w-[100px] h-[40px] bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/dea31d52-7076-423f-bace-53eeec3014d3_1600w.png)] bg-cover rounded-lg"></a>
            <a href="#" class="inline-flex items-center justify-center bg-center mix-blend-screen w-[150px] h-[40px] bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/b16a9cf6-6be1-4d0d-bc63-07a471092998_1600w.png)] bg-cover rounded-lg"></a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

  <!-- Heading + CTA -->
  <div class="sm:mt-10 grid md:grid-cols-3 animate-on-scroll [animation:fadeSlideIn_0.7s_ease-out_0.1s_both] mt-10 gap-x-6 gap-y-6 items-start animate">
    <div class="md:col-span-2">
      <h2 class="leading-tight sm:text-4xl lg:text-7xl text-3xl font-light text-white tracking-tighter">
        Solutions Tailored to Your Stack
      </h2>
    </div>
    <div class="flex md:justify-end">
      <div class="max-w-sm">
        <p class="sm:text-sm leading-relaxed text-xs text-neutral-400">
          We turn noisy signals into clear decisions. Compose what you need, ship faster, and prove security outcomes anytime.
        </p>
        <div class="mt-3">
          <a href="#" class="btn-wrapper" style="--dot-size: 8px; --line-weight: 1px; --line-distance: 0.8rem 1rem; --animation-speed: 0.35s; --dot-color: #fffa; --line-color: #fffa; --grid-color: #fff3; position: relative; display: inline-flex; justify-content: center; align-items: center; width: auto; height: auto; padding: var(--line-distance); background-color: rgba(0, 0, 0, 0); user-select: none">
            <div class="line horizontal top"></div>
            <div class="line vertical right"></div>
            <div class="line horizontal bottom"></div>
            <div class="line vertical left"></div>
            <div class="dot top left"></div>
            <div class="dot top right"></div>
            <div class="dot bottom right"></div>
            <div class="dot bottom left"></div>
            <button class="btn bg-transparent" style="mask-image: linear-gradient(110deg, transparent, black 35%, black 65%, transparent); -webkit-mask-image: linear-gradient(110deg, transparent, black 35%, black 65%, transparent);">
              <span class="btn-text">Get Started</span>
              <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="btn-svg" style="margin-left:.5rem;width:18px;height:18px;color:#fff4;flex-shrink:0;" data-icon-set="solar" data-solar="arrow-right-up-line-duotone"><g fill="none" class=""><path fill="currentColor" d="M5.47 17.47a.75.75 0 1 0 1.06 1.06zm1.06 1.06l12-12l-1.06-1.06l-12 12z" opacity=".5" class=""></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 6h9v9" class=""></path></g></svg>
            </button>
          </a>
        </div>
      </div>
    </div>
  </div>

  <!-- Cards -->
  <div class="grid grid-cols-1 sm:mt-8 sm:gap-4 md:grid-cols-4 md:mt-48 mt-6 gap-x-3 gap-y-3">
    <!-- Card 1 -->
    <div class="border-gradient animate-on-scroll [animation:fadeSlideIn_0.8s_ease-out_0.05s_both] sm:rounded-[30px] sm:p-5 min-h-[180px] flex flex-col pt-4 pr-4 pb-4 pl-4 backdrop-blur justify-between animate">
      <div class="flex gap-2 text-neutral-300 gap-x-2 gap-y-2 items-center">
        <span class="inline-flex items-center justify-center bg-white/10 w-8 h-8 rounded-xl">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" style="color: rgb(212, 212, 212); width: 16px; height: 16px" class="w-[16px] h-[16px]" data-solar="folder-path-connect-line-duotone" data-icon-set="solar" data-icon-replaced="true" stroke-width="2"><g fill="none" stroke="#d4d4d4" stroke-width="1.5" class=""><path stroke-linecap="round" d="M16.5 7.5h-3" opacity=".5" class=""></path><path d="M5 5.217c0-.573 0-.86.049-1.099c.213-1.052 1.1-1.874 2.232-2.073C7.538 2 7.847 2 8.465 2c.27 0 .406 0 .536.011c.56.049 1.093.254 1.526.587c.1.078.196.167.388.344l.385.358c.571.53.857.795 1.198.972q.284.146.594.228c.377.1.78.1 1.588.1h.261c1.843 0 2.765 0 3.363.5q.083.07.157.146C19 5.802 19 6.658 19 8.369V9.8c0 2.451 0 3.677-.82 4.438c-.82.762-2.14.762-4.78.762h-2.8c-2.64 0-3.96 0-4.78-.761C5 13.477 5 12.25 5 9.8z" class=""></path><path stroke-linecap="round" d="M22 20h-8M2 20h8m2-2v-3" opacity=".5" class=""></path><circle cx="12" cy="20" r="2" class=""></circle></g></svg>
        </span>
      </div>
      <div class="">
        <h3 class="text-base font-semibold text-white tracking-tight mt-48 sm:text-2xl">Identity Intelligence</h3>
        <p class="mt-1 text-xs sm:text-sm text-neutral-400 leading-relaxed">Correlate devices, accounts, and behavior to block takeovers.</p>
      </div>
    </div>

    <!-- Card 2 (Highlighted) -->
    <div class="animate-on-scroll [animation:fadeSlideIn_0.8s_ease-out_0.1s_both] relative rounded-[22px] sm:rounded-[28px] p-0 animate">
      <div class="absolute inset-0 blur-2xl opacity-60 bg-gradient-to-br from-white/10 via-white/0 to-white/10 rounded-[28px] pointer-events-none"></div>
      <div class="sm:rounded-[24px] sm:p-5 min-h-[180px] hover:rotate-0 transition bg-center text-neutral-900 bg-white bg-[url(https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/6bffc319-1a2d-4422-a676-f7e56a1f1002_1600w.webp)] bg-cover rounded-[20px] pt-4 pr-4 pb-4 pl-4 relative shadow-[0_10px_50px_-12px_rgba(255,255,255,0.35)] -rotate-1">
        <div class="flex gap-2 text-neutral-800 gap-x-2 gap-y-2 items-center">
          <span class="inline-flex h-8 w-8 items-center justify-center rounded-xl bg-neutral-900/5">
            <iconify-icon icon="solar:wand-2-line-duotone" width="16" height="16"></iconify-icon>
          </span>
        </div>
        <div class="mt-8">
          <h3 class="text-base font-semibold tracking-tight mt-48 sm:text-xl">Risk Automation</h3>
          <p class="mt-1 text-xs sm:text-sm text-neutral-600 leading-relaxed">Automate decisions with lattice scoring and adaptive policies.</p>
        </div>
      </div>
    </div>

    <!-- Card 3 -->
    <div class="border-gradient animate-on-scroll [animation:fadeSlideIn_0.8s_ease-out_0.15s_both] min-h-[180px] flex flex-col sm:rounded-[24px] sm:p-5 rounded-[20px] pt-4 pr-4 pb-4 pl-4 backdrop-blur justify-between animate">
      <div class="flex gap-2 text-neutral-300 gap-x-2 gap-y-2 items-center">
        <span class="inline-flex items-center justify-center bg-white/10 w-8 h-8 rounded-xl">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" class="" style="" data-icon-set="solar" data-solar="shield-plus-line-duotone"><g fill="none" stroke="currentColor" stroke-width="1.5" class=""><path d="M3 10.417c0-3.198 0-4.797.378-5.335c.377-.537 1.88-1.052 4.887-2.081l.573-.196C10.405 2.268 11.188 2 12 2s1.595.268 3.162.805l.573.196c3.007 1.029 4.51 1.544 4.887 2.081C21 5.62 21 7.22 21 10.417v1.574c0 5.638-4.239 8.375-6.899 9.536C13.38 21.842 13.02 22 12 22s-1.38-.158-2.101-.473C7.239 20.365 3 17.63 3 11.991z" opacity=".5" class=""></path><path stroke-linecap="round" d="M15 12h-3m0 0H9m3 0V9m0 3v3" class=""></path></g></svg>
        </span>
      </div>
      <div class="">
        <h3 class="text-base font-semibold tracking-tight text-white sm:text-2xl">API Shielding</h3>
        <p class="sm:text-sm leading-relaxed text-xs text-neutral-400 mt-1">Protect public and internal APIs with intent-aware controls.</p>
      </div>
    </div>

    <!-- Card 4 -->
    <div class="border-gradient animate-on-scroll [animation:fadeSlideIn_0.8s_ease-out_0.2s_both] min-h-[180px] flex flex-col sm:rounded-[24px] sm:p-5 rounded-[20px] pt-4 pr-4 pb-4 pl-4 backdrop-blur justify-between animate">
      <div class="flex items-center gap-2 text-neutral-300">
        <span class="inline-flex h-8 w-8 items-center justify-center rounded-xl bg-white/10">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" class="" style="" data-icon-set="solar" data-solar="document-text-line-duotone"><g fill="none" stroke="currentColor" stroke-width="1.5" class=""><path d="M3 10c0-3.771 0-5.657 1.172-6.828S7.229 2 11 2h2c3.771 0 5.657 0 6.828 1.172S21 6.229 21 10v4c0 3.771 0 5.657-1.172 6.828S16.771 22 13 22h-2c-3.771 0-5.657 0-6.828-1.172S3 17.771 3 14z" opacity=".5" class=""></path><path stroke-linecap="round" d="M8 12h8M8 8h8m-8 8h5" class=""></path></g></svg>
        </span>
      </div>
      <div class="">
        <h3 class="sm:text-2xl text-base font-semibold text-white tracking-tight">Compliance Reports</h3>
        <p class="mt-1 text-xs sm:text-sm text-neutral-400 leading-relaxed">One‑click, audit‑ready evidence across SOC 2, ISO, and HIPAA.</p>
      </div>
    </div>
  </div>

  <!-- KPIs -->
  <div class="sm:mt-8 grid grid-cols-3 sm:gap-4 animate-on-scroll [animation:fadeSlideIn_0.7s_ease-out_0.05s_both] mt-8 gap-x-3 gap-y-3 animate">
    <div class="border-gradient sm:rounded-[32px] sm:p-8 bg-neutral-900/40 rounded-[24px] pt-5 pr-5 pb-5 pl-5 backdrop-blur">
      <p class="text-[10px] sm:text-xs text-neutral-400">Events/day</p>
      <p class="sm:text-lg md:text-xl text-base font-semibold text-white tracking-tight mt-0.5">12.3B</p>
      <p class="text-[10px] sm:text-xs text-neutral-400 mt-0.5">Processed securely</p>
    </div>
    <div class="border-gradient sm:rounded-[32px] sm:p-8 bg-neutral-900/40 rounded-[24px] pt-5 pr-5 pb-5 pl-5 backdrop-blur">
      <p class="text-[10px] sm:text-xs text-neutral-400">Avg decision</p>
      <p class="mt-0.5 text-base sm:text-lg md:text-xl font-semibold tracking-tight text-white">37ms</p>
      <p class="text-[10px] sm:text-xs text-neutral-400 mt-0.5">P95 latency</p>
    </div>
    <div class="border-gradient sm:rounded-[32px] sm:p-8 bg-neutral-900/40 rounded-[24px] pt-5 pr-5 pb-5 pl-5 backdrop-blur">
      <p class="text-[10px] sm:text-xs text-neutral-400">Attack recall</p>
      <p class="mt-0.5 text-base sm:text-lg md:text-xl font-semibold tracking-tight text-white">98.7%</p>
      <p class="text-[10px] sm:text-xs text-neutral-400 mt-0.5">Across benchmark sets</p>
    </div>
  </div>
</section>