Responsive Feature Grid Section with Scroll Animations

<section class="z-10 sm:px-6 lg:px-8 lg:pt-8 lg:pb-8 lg:mb-40 lg:mt-60 max-w-7xl mt-40 mr-auto mb-40 ml-auto pt-8 pr-4 pb-8 pl-4 relative" data-element-locator="html &gt; body:nth-of-type(1) &gt; section:nth-of-type(2)">
      <div class="flex flex-col sm:flex-row sm:items-end sm:justify-between gap-4 mb-8">
        <div class="">
          <p class="text-sm font-normal text-white/50 font-geist [animation:fadeSlideIn_0.8s_ease-out_0.2s_both] animate-on-scroll">
            What you get
          </p>
          <h2 class="sm:text-5xl md:text-6xl [animation:fadeSlideIn_0.8s_ease-out_0.1s_both] animate-on-scroll text-4xl font-medium tracking-tight font-geist">
            Features built for efficient growth
          </h2>
          <p class="[animation:fadeSlideIn_0.8s_ease-out_0.1s_both] animate-on-scroll text-lg text-white/70 font-geist mt-3">
            From unlimited creative requests to transparent pricing, our
            operating system helps you scale acquisition with confidence.
          </p>
        </div>
      </div>

      <div class="grid gap-6 md:grid-cols-3">
        <!-- Big feature -->
        <div class="group relative overflow-hidden rounded-2xl bg-white/5 md:col-span-2 md:row-span-2 border-gradient before:rounded-2xl [animation:fadeSlideIn_0.8s_ease-out_0.1s_both] animate-on-scroll">
          <div class="relative">
            <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/b69317f2-ba0a-457c-91ff-24431c9162bb_800w.jpg" alt="Evening office portrait of young professional" class="aspect-video w-full object-cover" style="">
            <div class="pointer-events-none absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent"></div>
          </div>
          <div class="p-5 sm:p-6">
            <div class="flex items-center gap-2">
              <span class="inline-flex items-center gap-1 rounded-full border border-emerald-500/30 bg-emerald-500/15 px-2 py-0.5 text-[11px] font-medium text-emerald-300 font-geist">
                NEW
              </span>
              <span class="text-xs text-white/60 font-geist">
                Unlimited pipeline
              </span>
            </div>
            <h3 class="text-2xl sm:text-3xl font-medium tracking-tight font-geist">
              Launch experiments, not guesses
            </h3>
            <p class="mt-2 text-base sm:text-lg text-white/70 font-geist">
              Submit unlimited test ideas and creative requests. We prioritize
              by impact, ship fast, and report clearly so learnings stack every
              week.
            </p>
            <div class="mt-5 flex flex-wrap items-center gap-3">
              <a href="#" class="inline-flex items-center gap-2 rounded-lg bg-white/5 px-4 py-2 text-sm font-normal text-white/90 backdrop-blur hover:bg-white/10 transition font-geist">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4">
                  <path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" class=""></path>
                  <path d="M14 2v4a2 2 0 0 0 2 2h4" class=""></path>
                  <path d="M10 9H8" class=""></path>
                  <path d="M16 13H8" class=""></path>
                  <path d="M16 17H8" class=""></path>
                </svg>
                See case studies
              </a>
              <a href="#" class="inline-flex items-center gap-2 text-sm font-normal text-black font-geist bg-emerald-500 rounded-lg px-4 py-2 hover:bg-emerald-400 transition">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4">
                  <path d="M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z" class=""></path>
                  <path d="m21.854 2.147-10.94 10.939" class=""></path>
                </svg>
                Start a request
              </a>
            </div>
          </div>
        </div>

        <!-- Right column: Requests & Revisions -->
        <div class="relative overflow-hidden rounded-2xl bg-white/5 hover:border-white/20 transition [animation:fadeSlideIn_0.8s_ease-out_0.2s_both] animate-on-scroll">
          <div class="p-5 sm:p-6">
            <div class="flex items-center justify-between">
              <h3 class="text-xl font-normal tracking-tight font-geist flex items-center gap-2">
                Requests &amp; revisions
              </h3>
              <span class="inline-flex items-center rounded-full border border-emerald-500/30 bg-emerald-500/15 px-2 py-0.5 text-[11px] font-medium text-emerald-300 font-geist">
                NEW
              </span>
            </div>
            <p class="mt-2 text-sm text-white/70 font-geist">
              Iterate quickly with async requests and structured feedback. Every
              round ends with clear rationale and next steps.
            </p>
            <div class="mt-4 rounded-lg overflow-hidden">
              <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/bab21319-4278-459c-a379-8e64c106dd53_800w.jpg" alt="Young executive working late by laptop in monochrome" class="aspect-video w-full object-cover" style="">
            </div>
          </div>
        </div>

        <!-- Right column: Worry-free pricing -->
        <div class="relative overflow-hidden rounded-2xl bg-white/5 hover:border-white/20 transition [animation:fadeSlideIn_0.8s_ease-out_0.3s_both] animate-on-scroll">
          <div class="p-5 sm:p-6">
            <div class="flex items-center justify-between">
              <h3 class="text-xl font-normal tracking-tight font-geist flex items-center gap-2">
                Worry‑free pricing
              </h3>
              <span class="inline-flex items-center rounded-full border border-emerald-500/30 bg-emerald-500/15 px-2 py-0.5 text-[11px] font-medium text-emerald-300 font-geist">
                NEW
              </span>
            </div>
            <p class="mt-2 text-sm text-white/70 font-geist">
              Simple plans, no surprises. Pause anytime. Scale up when you're
              ready.
            </p>
            <div class="mt-4 rounded-lg overflow-hidden border border-white/10">
              <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/6c11aa1a-9842-434f-902a-dd3a7953d434_800w.jpg" alt="Sunlit coder at dual monitors" class="aspect-video w-full object-cover" style="">
            </div>
          </div>
        </div>

        <!-- Bottom small: Quick turnaround -->
        <div class="relative overflow-hidden rounded-2xl bg-white/5 hover:border-white/20 transition [animation:fadeSlideIn_0.8s_ease-out_0.4s_both] animate-on-scroll">
          <div class="p-5 sm:p-6">
            <h3 class="text-lg font-normal tracking-tight font-geist flex items-center gap-2">
              Quick turnaround
              <span class="ml-2 inline-flex items-center rounded-full border border-emerald-500/30 bg-emerald-500/15 px-2 py-0.5 text-[11px] font-medium text-emerald-300 font-geist">
                NEW
              </span>
            </h3>
            <p class="mt-2 text-sm text-white/70 font-geist">
              Most tasks ship in 48–72 hours without sacrificing quality.
            </p>
            <div class="mt-4 rounded-lg overflow-hidden border border-white/10">
              <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/09f960eb-611f-430b-86b4-1d5a280d6eb8_800w.jpg" alt="Professional portrait of young woman in office" class="aspect-video w-full object-cover" style="">
            </div>
          </div>
        </div>

        <!-- Bottom small: Go live in days -->
        <div class="relative overflow-hidden bg-white/5 rounded-2xl hover:border-white/20 transition [animation:fadeSlideIn_0.8s_ease-out_0.5s_both] animate-on-scroll">
          <div class="sm:p-6 pt-5 pr-5 pb-5 pl-5">
            <h3 class="text-lg font-normal tracking-tight font-geist flex items-center gap-2">
              Go live in days
            </h3>
            <p class="mt-2 text-sm text-white/70 font-geist">
              From first brief to live campaigns in a week, with tracking and QA
              handled.
            </p>
            <div class="mt-4 rounded-lg overflow-hidden border border-white/10">
              <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/7347ce47-8599-4d1d-a4b0-c523cdbc26b8_800w.jpg" alt="Focused female developer at dual monitors" class="aspect-video w-full object-cover" style="">
            </div>
          </div>
        </div>

        <div class="relative overflow-hidden bg-white/5 rounded-2xl hover:border-white/20 transition [animation:fadeSlideIn_0.8s_ease-out_0.6s_both] animate-on-scroll">
          <div class="sm:p-6 pt-5 pr-5 pb-5 pl-5">
            <h3 class="text-lg font-normal tracking-tight font-geist flex items-center gap-2">
              Seamless integration
            </h3>
            <p class="mt-2 text-sm text-white/70 font-geist">
              Connect with your existing tools and workflows without disruption.
            </p>
            <div class="mt-4 rounded-lg overflow-hidden border border-white/10">
              <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/595ae332-d34e-45e9-b294-a14e3fb98bad_800w.webp" alt="Man Working on Laptop in Minimalist Blue Window" class="aspect-video w-full object-cover">
            </div>
          </div>
        </div>
      </div>
    </section>