Full-Screen Canvas Background Wrapper

<section class="z-10 xl:py-24 mt-24 pt-12 pb-12 relative" data-element-locator="html &gt; body:nth-of-type(1) &gt; div:nth-of-type(3) &gt; section:nth-of-type(4)" id="under-the-hood">
  <div class="absolute top-0 right-0 bottom-0 left-0 saturate-0" data-container-bg="true" data-element-locator="html &gt; body:nth-of-type(1) &gt; div:nth-of-type(3) &gt; section:nth-of-type(4) &gt; div:nth-of-type(1)">
  <div data-us-project="p7Ff6pfTrb5Gs59C7nLC" class="-z-10 w-full h-full absolute top-0 left-0" data-us-initialized="true" data-scene-id="id-1ps2g7f0epa0yvx0rdw3xas" data-element-locator="html &gt; body:nth-of-type(1) &gt; div:nth-of-type(3) &gt; section:nth-of-type(4) &gt; div:nth-of-type(1) &gt; div:nth-of-type(1)"></div>
  <script type="text/javascript" class="">
    !function(){if(!window.UnicornStudio){window.UnicornStudio={isInitialized:!1};var i=document.createElement("script");i.src="https://cdn.jsdelivr.net/gh/hiunicornstudio/unicornstudio.js@v1.4.29/dist/unicornStudio.umd.js",i.onload=function(){window.UnicornStudio.isInitialized||(UnicornStudio.init(),window.UnicornStudio.isInitialized=!0)},(document.head || document.body).appendChild(i)}}();
  </script>
</div>
  <div class="mx-auto max-w-7xl px-6 lg:px-8">
    <div class="grid gap-10 lg:grid-cols-12 items-start">
      <!-- Left copy -->
      <div class="lg:col-span-6">
        <div class="inline-flex items-center gap-2 rounded-full border-gradient before:rounded-full bg-white/5 px-3 py-1.5 backdrop-blur [animation:fadeSlideIn_0.5s_ease-in-out_0.1s_both] animate-on-scroll">
          <span class="text-xs text-white/70 inline-flex items-center gap-2 font-geist">
            <span class="h-1.5 w-1.5 rounded-full bg-white/50"></span>
          Platform Architecture
          </span>
        </div>

        <h2 class="[animation:fadeSlideIn_0.5s_ease-in-out_0.2s_both] animate-on-scroll md:text-6xl md:font-medium text-4xl text-white tracking-tighter font-geist mt-5 drop-shadow-xl" style="">
          Enterprise infrastructure that scales with you
        </h2>

        <p class="md:text-lg [animation:fadeSlideIn_0.5s_ease-in-out_0.3s_both] animate-on-scroll text-base text-white/70 max-w-xl mt-6 font-geist">
          Our platform combines cutting-edge technology with military-grade security to deliver lightning-fast
          performance and uncompromising reliability for your financial operations.
        </p>

        <div class="mt-8 h-px bg-white/10 [animation:fadeSlideIn_0.5s_ease-in-out_0.35s_both] animate-on-scroll"></div>

        <dl class="mt-8 space-y-6 [animation:fadeSlideIn_0.5s_ease-in-out_0.4s_both] animate-on-scroll">
          <div class="grid grid-cols-1 sm:grid-cols-5 gap-3">
            <dt class="sm:col-span-2 text-sm font-medium text-white font-geist">Lightning Performance</dt>
            <dd class="sm:col-span-3 text-sm text-white/70 font-geist">Advanced caching and optimized queries deliver
              instant response times across all operations and devices.</dd>
          </div>
          <div class="grid grid-cols-1 sm:grid-cols-5 gap-3">
            <dt class="sm:col-span-2 text-sm font-medium text-white font-geist">Military-grade security</dt>
            <dd class="sm:col-span-3 text-sm text-white/70 font-geist">Multi-layer encryption, advanced threat
              detection, and continuous security audits protect your data 24/7.</dd>
          </div>
          <div class="grid grid-cols-1 sm:grid-cols-5 gap-3">
            <dt class="sm:col-span-2 text-sm font-medium text-white font-geist">Global infrastructure</dt>
            <dd class="sm:col-span-3 text-sm text-white/70 font-geist">Distributed across multiple regions with
              intelligent load balancing to serve millions of transactions seamlessly.</dd>
          </div>
          <div class="grid grid-cols-1 sm:grid-cols-5 gap-3">
            <dt class="sm:col-span-2 text-sm font-medium text-white font-geist">99.99% uptime guarantee</dt>
            <dd class="sm:col-span-3 text-sm text-white/70 font-geist">Redundant systems and automatic failover ensure
              your business never stops, with real-time monitoring and alerts.</dd>
          </div>
        </dl>
      </div>

      <!-- Right visuals -->
      <div class="lg:col-span-6">
        <div class="grid grid-cols-2 gap-4 [animation:fadeSlideIn_0.5s_ease-in-out_0.5s_both] animate-on-scroll">
          <!-- Visual 1 -->
          <div class="relative col-span-2 h-56 md:h-64 overflow-hidden rounded-2xl border-gradient before:rounded-hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/dfa9776b-475d-4470-9c26-68e42de7819a_1600w.webp" alt="Abstract system grid">
            <div class="bg-gradient-to-t from-black/40 via-black/10 to-transparent absolute top-0 right-0 bottom-0 left-0">
            </div>
            <div class="absolute top-4 right-4 inline-flex items-center gap-2 rounded-lg bg-neutral-900/70 backdrop-blur px-3 py-1.5 border-gradient before:rounded-lg">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="gauge" class="lucide lucide-gauge h-4 w-4 text-white/80"><path d="m12 14 4-4" class=""></path><path d="M3.34 19a10 10 0 1 1 17.32 0" class=""></path></svg>
              <span class="text-xs text-white/80 font-geist">Performance</span>
            </div>
            <div class="absolute bottom-4 left-4 right-4">
              <div class="rounded-xl bg-neutral-900/70 backdrop-blur px-4 py-3 border-gradient before:rounded-xl">
                <p class="text-sm font-semibold text-white font-geist">Blazing fast responses</p>
                <p class="mt-1 text-xs text-white/70 font-geist">Optimized architecture with edge computing for instant
                  data access worldwide.</p>
              </div>
            </div>
          </div>

          <!-- Visual 2 -->
          <div class="relative h-56 overflow-hidden rounded-2xl border-gradient before:rounded-2xl bg-white/5">
            <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/4cbc70cc-3abd-4e06-95fa-6aee041735db_800w.webp" alt="Security abstract" class="absolute inset-0 h-full w-full object-cover opacity-60">
            <div class="absolute inset-0 bg-gradient-to-b from-black/30 to-black/50"></div>
            <div class="absolute top-4 left-4 inline-flex items-center gap-2 rounded-lg bg-neutral-900/70 backdrop-blur px-3 py-1.5 border-gradient before:rounded-lg">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="shield" class="lucide lucide-shield h-4 w-4 text-emerald-300"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z" class=""></path></svg>
              <span class="text-xs text-white/80 font-geist">Security</span>
            </div>
            <div class="absolute bottom-4 left-4 right-4">
              <div class="rounded-xl bg-neutral-900/70 backdrop-blur px-4 py-3 border-gradient before:rounded-xl">
                <p class="text-sm font-semibold text-white font-geist">Protected at every level</p>
                <p class="mt-1 text-xs text-white/70 font-geist">Advanced encryption, compliance certifications, and
                  comprehensive audit logs.</p>
              </div>
            </div>
          </div>

          <!-- Visual 3 -->
          <div class="relative h-56 overflow-hidden rounded-2xl border-gradient before:rounded-2xl bg-white/5">
            <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/7630a941-c2b6-4893-a7b0-c0098a01c825_800w.webp" alt="Scalable infrastructure abstract" class="absolute inset-0 h-full w-full object-cover opacity-60">
            <div class="absolute inset-0 bg-gradient-to-b from-black/20 to-black/60"></div>
            <div class="absolute top-4 left-4 inline-flex items-center gap-2 rounded-lg bg-neutral-900/70 backdrop-blur px-3 py-1.5 border-gradient before:rounded-lg">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="layers" class="lucide lucide-layers h-4 w-4 text-white/80"><path d="M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z" class=""></path><path d="M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12" class=""></path><path d="M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17" class=""></path></svg>
              <span class="text-xs text-white/80 font-geist">Scale</span>
            </div>
            <div class="absolute bottom-4 left-4 right-4">
              <div class="rounded-xl bg-neutral-900/70 backdrop-blur px-4 py-3 border-gradient before:rounded-xl">
                <p class="text-sm font-semibold text-white font-geist">Built to scale infinitely</p>
                <p class="mt-1 text-xs text-white/70 font-geist">Auto-scaling infrastructure adapts to your growth with
                  zero downtime migrations.</p>
              </div>
            </div>
          </div>
        </div>

        <!-- Inline reassurance -->
        <div class="mt-4 flex items-center gap-4 text-xs text-white/60 [animation:fadeSlideIn_0.5s_ease-in-out_0.6s_both] animate-on-scroll">
          <span class="inline-flex items-center gap-1">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="zap" class="lucide lucide-zap h-3.5 w-3.5 text-orange-300"><path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z" class=""></path></svg>
            <span class="font-geist">Speed optimized</span>
          </span>
          <span class="inline-flex items-center gap-1">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="lock" class="lucide lucide-lock h-3.5 w-3.5 text-emerald-300"><rect width="18" height="11" x="3" y="11" rx="2" ry="2" class=""></rect><path d="M7 11V7a5 5 0 0 1 10 0v4" class=""></path></svg>
            <span class="font-geist">Fully compliant</span>
          </span>
          <span class="inline-flex items-center gap-1">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="globe" class="lucide lucide-globe h-3.5 w-3.5 text-white/70"><circle cx="12" cy="12" r="10" class=""></circle><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20" class=""></path><path d="M2 12h20" class=""></path></svg>
            <span class="font-geist">Global coverage</span>
          </span>
        </div>
      </div>
    </div>
  </div>
</section>