Sticky Feature Section with Animated Processing Card

<div class="sticky mb-8 top-36">
  <div
    class="max-w-6xl shadow-black/30 sm:p-10 bg-[#2d2e32]/95 border-white/10 border rounded-3xl pt-4 pr-4 pb-4 pl-4 shadow-2xl backdrop-blur-sm">
    <div class="grid grid-cols-1 lg:grid-cols-12 lg:gap-8 gap-8 items-center">
      <div class="lg:col-span-2 flex items-center justify-center">
        <span class="text-[180px] leading-none font-semibold tracking-tight text-white/5 select-none">2</span>
      </div>
      <div class="lg:col-span-5">
        <h3 class="text-2xl sm:text-3xl font-semibold text-white tracking-tight">AI processes instantly</h3>
        <p class="text-base sm:text-lg text-slate-300 mt-4">
          Our AI analyzes your request, understands context, and generates intelligent responses in seconds—pulling from
          knowledge bases and workflows.
        </p>
        <div class="mt-6 flex flex-col gap-4">
          <div
            class="inline-flex text-sm text-slate-200 w-full max-w-full border-white/10 border rounded-2xl px-4 py-3 shadow-sm gap-3 items-center"
            style="box-shadow: inset 0 -12px 24px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.04)">
            <span class="inline-flex items-center justify-center shrink-0 w-10 h-10 rounded-xl ring-white/10 ring-1">
                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-4.5 w-4.5 text-white/90"><circle cx="12" cy="12" r="1" class=""></circle><circle cx="12" cy="5" r="1" class=""></circle><circle cx="12" cy="19" r="1" class=""></circle></svg>
                  </span>
            <span class="font-medium tracking-[-0.01em]">Context-aware responses every time.</span>
          </div>
          <div
            class="inline-flex text-sm text-slate-200 w-full max-w-full border-white/10 border rounded-2xl px-4 py-3 shadow-sm gap-3 items-center"
            style="box-shadow: inset 0 -12px 24px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.04)">
            <span class="inline-flex items-center justify-center shrink-0 w-10 h-10 ring-white/10 ring-1 rounded-xl">
                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-4.5 w-4.5 text-white/90"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12" class=""></polyline></svg>
                  </span>
            <span class="font-medium tracking-[-0.01em]">Real-time learning from your workflows.</span>
          </div>
        </div>
      </div>
      <div class="lg:col-span-5 relative">
        <style>
          @keyframes spin {
            from {
              transform: rotate(0deg);
            }

            to {
              transform: rotate(360deg);
            }
          }

          @keyframes progressGrow {
            from {
              width: 0%;
            }

            to {
              width: 65%;
            }
          }

          @keyframes scaleIn {
            from {
              transform: scale(0.8);
              opacity: 0;
            }

            to {
              transform: scale(1);
              opacity: 1;
            }
          }
        </style>
        <div class="relative overflow-hidden rounded-2xl border border-white/10 bg-white/[0.03] shadow-lg aspect-[4/3]">
          <div class="opacity-20 absolute inset-0"
            style="background-image: linear-gradient(0deg, rgba(255,255,255,0.06) 1px, rgba(0,0,0,0) 1px), linear-gradient(90deg, rgba(255,255,255,0.06) 1px, rgba(0,0,0,0) 1px); background-size: 48px 48px">
          </div>
          <div class="pointer-events-none absolute inset-0 rounded-2xl ring-1 ring-white/10"></div>
          <div class="absolute inset-8 flex items-center justify-center">
            <div
              class="rounded-2xl border border-white/10 bg-gradient-to-br from-white/10 via-white/5 to-white/10 backdrop-blur-md px-8 py-12 shadow-black/30 shadow-lg w-full"
              style="animation: scaleIn 0.5s ease-out;">
              <div class="flex flex-col items-center gap-6">
                <div class="relative">
                  <div
                    class="h-16 w-16 rounded-full ring-2 ring-white/20 flex items-center justify-center animate-pulse"
                    style="background: radial-gradient(60% 60% at 50% 50%, rgba(139,92,246,.5), rgba(99,102,241,.5));">
                    <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none"
                      stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                      class="text-white" style="animation: spin 2s linear infinite;">
                      <path d="M12 2v4" class=""></path>
                      <path d="m16.2 7.8 2.9-2.9" class=""></path>
                      <path d="M18 12h4" class=""></path>
                      <path d="m16.2 16.2 2.9 2.9" class=""></path>
                      <path d="M12 18v4" class=""></path>
                      <path d="m4.9 19.1 2.9-2.9" class=""></path>
                      <path d="M2 12h4" class=""></path>
                      <path d="m4.9 4.9 2.9 2.9" class=""></path>
                    </svg>
                  </div>
                </div>
                <div class="text-center">
                  <p class="text-white/90 text-lg font-medium">Processing...</p>
                  <p class="text-slate-300 text-sm mt-2">Analyzing your request</p>
                </div>
                <div class="w-full bg-white/10 rounded-full h-2 overflow-hidden">
                  <div class="bg-gradient-to-r from-indigo-500 to-violet-500 h-full rounded-full"
                    style="width: 65%; animation: progressGrow 2s ease-out;"></div>
                </div>
              </div>
            </div>
          </div>
          <div class="pointer-events-none absolute -inset-1 rounded-2xl opacity-60 blur-xl"
            style="background: radial-gradient(60% 60% at 50% 50%, rgba(139,92,246,.22), rgba(217,70,239,0) 70%);">
          </div>
        </div>
      </div>
    </div>
  </div>
</div>