Animated About Section with Images & Stats

<section class="sm:px-6 sm:mt-16 lg:px-8 lg:ml-auto lg:mr-auto lg:mt-40 lg:mb-40 max-w-7xl mt-10 mr-auto mb-40 ml-auto pr-4 pl-4">
  <div class="grid md:grid-cols-2 gap-6 sm:gap-8 gap-x-6 gap-y-6 items-start">
    <!-- Copy -->
    <div class="animate-on-scroll [animation:fadeSlideIn_0.8s_ease-out_0.05s_both]">
      <p class="text-[10px] sm:text-xs text-neutral-400">About Sentra</p>
      <h2 class="leading-tight sm:text-5xl lg:text-7xl text-3xl font-light text-white tracking-tighter mt-2">
        We believe security isn’t about walls — it’s about trust.
      </h2>
      <p class="leading-relaxed sm:mt-4 sm:text-xl text-xs text-neutral-400 max-w-2xl mt-3">
        Sentra is a full‑stack security platform that helps engineering teams grow with purpose and data‑driven precision. 
        From mapping identities and devices to enforcing least‑privilege and adaptive policies, we turn noisy telemetry into action you can verify.
      </p>
    </div>

    <!-- Visuals -->
    <div class="animate-on-scroll [animation:fadeSlideIn_0.8s_ease-out_0.1s_both]">
      <div class="grid grid-cols-2 gap-3 sm:gap-4 gap-x-3 gap-y-3">
        <!-- Small tile -->
        <figure class="border-gradient overflow-hidden rounded-[18px] sm:rounded-[24px] h-32 sm:h-40 md:h-48 bg-neutral-900/40 backdrop-blur">
          <img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/69a9f306-3b05-4ec0-a78e-2c306e72e38d_800w.webp" alt="Team collaboration" class="w-full h-full object-cover grayscale" loading="lazy">
        </figure>

        <!-- Large tile with overlay -->
        <div class="col-span-1 relative border-gradient overflow-hidden rounded-[18px] sm:rounded-[24px] h-40 sm:h-52 md:h-64 bg-neutral-900/40 backdrop-blur">
          <img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/8f421efe-8b0c-43ef-bd1c-e6ad11ee28a1_800w.webp" alt="Strategy session" class="w-full h-full object-cover absolute top-0 right-0 bottom-0 left-0 grayscale" loading="lazy">
          <div class="absolute inset-x-3 sm:inset-x-4 bottom-3 sm:bottom-4">
            <div class="bg-neutral-900/70 backdrop-blur rounded-[14px] sm:rounded-[16px] p-3 sm:p-4 border-gradient">
              <p class="text-sm sm:text-base font-semibold tracking-tight text-white">Our bold and brilliant builders</p>
              <div class="mt-2">
                <a href="#" class="inline-flex items-center gap-2 text-[11px] sm:text-sm text-neutral-200 hover:text-white transition">
                  <span class="inline-flex items-center justify-center px-3 py-1.5 rounded-full bg-orange-400/80 text-neutral-900 font-medium">Learn more</span>
                  <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-neutral-300" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                    <path d="M7 17L17 7" class=""></path>
                    <path d="M8 7h9v9" class=""></path>
                  </svg>
                </a>
              </div>
            </div>
          </div>
        </div>

        <!-- Wide tile -->
        <figure class="col-span-2 border-gradient overflow-hidden rounded-[18px] sm:rounded-[24px] h-32 sm:h-40 md:h-48 bg-neutral-900/40 backdrop-blur">
          <img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/a160edbd-5573-4188-bafe-7a69220a18de_1600w.webp" alt="Minimal abstract render" class="w-full h-full object-cover grayscale" loading="lazy">
        </figure>
      </div>
    </div>
  </div>

  <!-- Org stats -->
  <div class="sm:mt-8 grid grid-cols-2 md:grid-cols-4 sm:gap-4 animate-on-scroll [animation:fadeSlideIn_0.7s_ease-out_0.05s_both] mt-8 gap-x-3 gap-y-3">
    <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">Customers</p>
      <p class="mt-0.5 text-base sm:text-lg md:text-xl font-semibold tracking-tight text-white">2,400+</p>
      <p class="text-[10px] sm:text-xs text-neutral-400 mt-0.5">Across 18 industries</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">Team</p>
      <p class="mt-0.5 text-base sm:text-lg md:text-xl font-semibold tracking-tight text-white">68</p>
      <p class="text-[10px] sm:text-xs text-neutral-400 mt-0.5">Engineers &amp; researchers</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">Countries</p>
      <p class="mt-0.5 text-base sm:text-lg md:text-xl font-semibold tracking-tight text-white">14</p>
      <p class="text-[10px] sm:text-xs text-neutral-400 mt-0.5">Fully remote</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">NPS</p>
      <p class="mt-0.5 text-base sm:text-lg md:text-xl font-semibold tracking-tight text-white">76</p>
      <p class="text-[10px] sm:text-xs text-neutral-400 mt-0.5">Last 4 quarters</p>
    </div>
  </div>
</section>