AI Studio Feature Section with Stats & Marquee

<section class="md:px-12 md:py-32 text-stone-800 bg-[#EAE8E2] w-full pt-20 pr-6 pb-20 pl-6 relative overflow-hidden"
  style="font-family: 'Inter', sans-serif;">
  <style>
    @keyframes revealFlow {
      0% {
        opacity: 0;
        transform: translateY(40px) scale(0.98);
        filter: blur(12px);
      }

      100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
      }
    }

    @keyframes scrollPartners {
      0% {
        transform: translateX(0);
      }

      100% {
        transform: translateX(-100%);
      }
    }

    .reveal-item {
      opacity: 0;
      will-change: transform, opacity, filter;
    }

    .reveal-active {
      animation: revealFlow 1.2s cubic-bezier(0.2, 0.6, 0.2, 1) both;
    }

    .delay-100 {
      animation-delay: 100ms;
    }

    .delay-200 {
      animation-delay: 200ms;
    }

    .delay-300 {
      animation-delay: 300ms;
    }

    .delay-400 {
      animation-delay: 400ms;
    }

    .delay-500 {
      animation-delay: 500ms;
    }

    .animate-scroll {
      animation: scrollPartners 40s linear infinite;
    }
  </style>

  <!-- Section Tag -->
  <div class="mb-12 border-b border-stone-300/50 pb-6 md:mb-24 reveal-item">
    <div class="flex items-center justify-between text-xs font-medium uppercase tracking-widest text-stone-500">
      <span style="letter-spacing: -0.025em;">// Because true power is intelligent foresight.</span>
      <button class="rounded-full border border-stone-400/30 p-2 hover:bg-stone-200 transition-colors">
        <iconify-icon icon="solar:arrow-left-linear" style="font-size: 1.125rem;"></iconify-icon>
      </button>
    </div>
  </div>

  <!-- Main Content Grid -->
  <div class="grid grid-cols-1 gap-y-16 lg:grid-cols-12 lg:gap-x-12">
    <!-- Left Column: Image -->
    <div class="flex flex-col gap-4 lg:col-span-4 lg:mt-24 reveal-item delay-100">
      <div class="group relative aspect-[4/5] overflow-hidden rounded-sm bg-stone-300">
        <img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/0c8f3560-bcc7-441d-9d12-6eb2fbb9aeea_800w.webp" alt="Architecture" class="h-full w-full object-cover transition-transform duration-700 group-hover:scale-105">
      </div>
      <div class="flex justify-between text-xs font-medium uppercase tracking-widest text-stone-500">
        <span style="letter-spacing: -0.025em;">[01] Global Research Hub</span>
        <span style="letter-spacing: -0.025em;">©2025</span>
      </div>
    </div>

    <!-- Right Column Area -->
    <div class="flex flex-col gap-20 lg:col-span-8">
      <p class="leading-tight md:text-5xl lg:text-[3.5rem] lg:leading-[1.15] text-3xl font-light text-stone-900 reveal-item delay-200"
        style="font-family: 'DM Sans', sans-serif; letter-spacing: -0.05em;">
        At <span style="font-weight: 300;">Etheria</span>, we see artificial intelligence as the ultimate architect of
        the future. Every element of our approach is curated for impact.
      </p>

      <!-- Sub Grid -->
      <div class="grid grid-cols-1 gap-12 md:grid-cols-2">
        <div class="flex flex-col gap-4 reveal-item delay-300">
          <div class="group relative aspect-[4/5] overflow-hidden rounded-sm bg-stone-300">
            <img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/1f6c82f7-e18c-4dc9-82dc-96bb615bfa30_800w.webp" alt="Neural Lab" class="h-full w-full object-cover transition-transform duration-700 group-hover:scale-105">
          </div>
          <div class="flex justify-between text-xs font-medium uppercase tracking-widest text-stone-500">
            <span style="letter-spacing: -0.025em;">[02] Neural Lab</span>
            <span style="letter-spacing: -0.025em;">©2025</span>
          </div>
        </div>

        <div class="flex flex-col justify-between py-4">
          <div class="space-y-8 reveal-item delay-400">
            <p class="leading-relaxed text-lg text-stone-600" style="letter-spacing: -0.025em;">
              We work with visionaries who embrace the transformative power of machine learning, those who value
              precision over noise.
            </p>
            <div class="flex gap-1 text-stone-400">
              <iconify-icon icon="solar:star-linear" style="font-size: 0.75rem;"></iconify-icon>
              <iconify-icon icon="solar:star-linear" style="font-size: 0.75rem;"></iconify-icon>
              <iconify-icon icon="solar:star-linear" style="font-size: 0.75rem;"></iconify-icon>
            </div>
          </div>

          <!-- Stats -->
          <div class="mt-12 flex items-end justify-between border-t border-stone-300/50 pt-12 reveal-item delay-500">
            <div class="flex gap-12">
              <div>
                <span class="text-5xl text-stone-900 font-light" style="font-family: 'DM Sans', sans-serif; letter-spacing: -0.05em;">96%</span>
                <p class="mt-2 text-xs uppercase text-stone-500" style="letter-spacing: -0.025em;">Accuracy</p>
              </div>
              <div>
                <span class="text-5xl text-stone-900 font-light" style="font-family: 'DM Sans', sans-serif; letter-spacing: -0.05em;">99%</span>
                <p class="mt-2 text-xs uppercase text-stone-500" style="letter-spacing: -0.025em;">Success</p>
              </div>
            </div>
            <button class="rounded-full border border-stone-400/30 p-3 hover:bg-stone-200 transition-colors">
              <iconify-icon icon="solar:arrow-right-linear" style="font-size: 1.25rem;"></iconify-icon>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Trusted Partners Marquee -->
  <div class="reveal-item delay-200 border-stone-300/50 border-t mt-24 pt-12">
    <p class="uppercase text-xs text-stone-400 mb-8" style="letter-spacing: -0.025em;">Trusted by teams at</p>
    <div class="group relative flex w-full overflow-hidden"
      style="mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent); -webkit-mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);">
      <div
        class="flex shrink-0 animate-scroll items-center gap-12 pr-12 opacity-60 grayscale transition-all duration-500 group-hover:opacity-100 group-hover:grayscale-0">
        <iconify-icon icon="logos:google" width="96"></iconify-icon>
        <iconify-icon icon="logos:openai" width="96"></iconify-icon>
        <iconify-icon icon="logos:microsoft" width="96"></iconify-icon>
        <iconify-icon icon="logos:stripe" width="96"></iconify-icon>
        <iconify-icon icon="logos:anthropic" width="96"></iconify-icon>
        <iconify-icon icon="logos:linear" width="96"></iconify-icon>
      </div>
      <div
        class="flex shrink-0 animate-scroll items-center gap-12 pr-12 opacity-60 grayscale transition-all duration-500 group-hover:opacity-100 group-hover:grayscale-0"
        aria-hidden="true">
        <iconify-icon icon="logos:google" width="96"></iconify-icon>
        <iconify-icon icon="logos:openai" width="96"></iconify-icon>
        <iconify-icon icon="logos:microsoft" width="96"></iconify-icon>
        <iconify-icon icon="logos:stripe" width="96"></iconify-icon>
        <iconify-icon icon="logos:anthropic" width="96"></iconify-icon>
        <iconify-icon icon="logos:linear" width="96"></iconify-icon>
      </div>
    </div>
  </div>

  <script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
  <script>
    (function() {
      const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
          if (entry.isIntersecting) {
            entry.target.classList.add('reveal-active');
          }
        });
      }, { threshold: 0.1 });
      document.querySelectorAll('.reveal-item').forEach(el => observer.observe(el));
    })();
  </script>
</section>