Animated Gradient Feature Card Grid

<div class="grid gap-6 sm:gap-8 md:grid-cols-3 overflow-hidden sm:rounded-3xl sm:pt-8 sm:pr-8 sm:pb-8 sm:pl-8 max-w-7xl border-stone-50 rounded-2xl pt-6 pr-6 pb-6 pl-6 relative gap-x-6 gap-y-6" style="background-color: #0f0f14; background-image: radial-gradient(circle, rgba(255, 255, 255, 0.08) 1px, transparent 1px); background-size: 16px 16px; background-position: 0 0, 8px 8px; border: 1px solid rgba(255, 255, 255, 0.08);">
  <!-- Edge highlight lines (sit exactly on the container border edge) -->
  <div aria-hidden="true" class="pointer-events-none absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-white/40 to-transparent"></div>
  <div aria-hidden="true" class="pointer-events-none absolute inset-x-0 bottom-0 h-px bg-gradient-to-r from-transparent via-white/20 to-transparent"></div>

  <!-- Specular flares on the top edge -->
  <div aria-hidden="true" class="pointer-events-none absolute top-0 right-0 h-px bg-gradient-to-r from-transparent via-blue-400/80 to-purple-500/70 w-60 opacity-0 transition-all duration-1000 ease-in-out" id="top-flare" style="opacity: 1;"></div>
  <div aria-hidden="true" class="pointer-events-none absolute top-0 right-0 bg-gradient-to-r from-transparent via-blue-400/30 to-purple-500/30 w-60 h-2 rounded-full blur-sm opacity-0 transition-all duration-1000 ease-in-out" id="top-flare-glow" style="opacity: 1;"></div>

  <!-- Specular flares on the bottom left edge -->
  <div aria-hidden="true" class="pointer-events-none absolute bottom-0 left-0 h-px bg-gradient-to-l from-transparent via-cyan-400/80 to-teal-500/70 w-60 opacity-0 transition-all duration-1000 ease-in-out" id="bottom-flare" style="opacity: 1;"></div>
  <div aria-hidden="true" class="pointer-events-none absolute bottom-0 left-0 bg-gradient-to-l from-transparent via-cyan-400/30 to-teal-500/30 w-60 h-2 rounded-full blur-sm opacity-0 transition-all duration-1000 ease-in-out" id="bottom-flare-glow" style="opacity: 1;"></div>
  <div class="slide-in-up animate-delay-600 shadow-sm backdrop-blur-sm" style="animation-play-state: running;">
            <div class="relative sm:rounded-2xl sm:p-6 bg-neutral-50/5 border-white/10 border rounded-xl pt-4 pr-4 pb-4 pl-4 backdrop-blur-none">
              <div class="flex items-start justify-between mb-4">
                <div class="inline-flex sm:h-12 sm:w-12 sm:rounded-xl text-[#ffffff] bg-[#ffffff]/20 w-10 h-10 border-[#ffffff]/30 border rounded-lg items-center justify-center">
                  <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="sm:h-6 sm:w-6 w-[20px] h-[20px]" data-icon-replaced="true" data-lucide="share-2" style="width: 20px; height: 20px; color: rgb(255, 255, 255);"><circle cx="18" cy="5" r="3" class=""></circle><circle cx="6" cy="12" r="3" class=""></circle><circle cx="18" cy="19" r="3" class=""></circle><line x1="8.59" x2="15.42" y1="13.51" y2="17.49" class=""></line><line x1="15.41" x2="8.59" y1="6.51" y2="10.49" class=""></line></svg>
                </div>
                <span class="rounded-full border border-white/20 bg-white/10 px-2 sm:px-3 py-1 text-xs text-white/80">01</span>
              </div>
              <h3 class="text-lg sm:text-xl font-semibold tracking-tight mb-2">Vision First</h3>
              <p class="text-sm sm:text-base text-white/70 leading-relaxed">
                We start with your big picture goals and work backwards to create solutions that truly matter. Every design decision serves the larger vision.
              </p>
            </div>
          </div>

          <div class="slide-in-up animate-delay-600 shadow-sm backdrop-blur-sm" style="animation-play-state: running;">
            <div class="relative sm:rounded-2xl sm:p-6 bg-neutral-50/5 border-white/10 border rounded-xl pt-4 pr-4 pb-4 pl-4 backdrop-blur-none">
              <div class="flex items-start justify-between mb-4">
                <div class="inline-flex sm:h-12 sm:w-12 sm:rounded-xl text-[#ffffff] bg-[#ffffff]/20 w-10 h-10 border-[#ffffff]/30 border rounded-lg items-center justify-center">
                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="h-5 w-5 sm:h-6 sm:w-6"><path d="M12 2L2 7l10 5 10-5-10-5z" class=""></path><path d="m2 17 10 5 10-5" class=""></path><path d="m2 12 10 5 10-5" class=""></path></svg>
                </div>
                <span class="rounded-full border border-white/20 bg-white/10 px-2 sm:px-3 py-1 text-xs text-white/80">02</span>
              </div>
              <h3 class="text-lg sm:text-xl font-semibold tracking-tight mb-2">Built to Scale</h3>
              <p class="text-sm sm:text-base text-white/70 leading-relaxed">
                Our architecture and design systems grow with your business. We build foundations that handle today's needs and tomorrow's ambitions.
              </p>
            </div>
          </div>

          <div class="slide-in-up animate-delay-600 shadow-sm backdrop-blur-sm" style="animation-play-state: running;">
            <div class="relative sm:rounded-2xl sm:p-6 bg-neutral-50/5 border-white/10 border rounded-xl pt-4 pr-4 pb-4 pl-4 backdrop-blur-none">
              <div class="flex items-start justify-between mb-4">
                <div class="inline-flex sm:h-12 sm:w-12 sm:rounded-xl text-[#ffffff] bg-[#ffffff]/20 w-10 h-10 border-[#ffffff]/30 border rounded-lg items-center justify-center">
                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="h-5 w-5 sm:h-6 sm:w-6"><path d="M12 2v20" class=""></path><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6" class=""></path></svg>
                </div>
                <span class="rounded-full border border-white/20 bg-white/10 px-2 sm:px-3 py-1 text-xs text-white/80">03</span>
              </div>
              <h3 class="text-lg sm:text-xl font-semibold tracking-tight mb-2">Speed &amp; Quality</h3>
              <p class="text-sm sm:text-base text-white/70 leading-relaxed">
                We move fast without breaking things. Our proven processes and skilled team deliver exceptional results on ambitious timelines.
              </p>
            </div>
          </div>
        </div>