Animated Three-Card Core Values Section

<section class="md:px-6 lg:pb-16 xl:pb-20 sm:mt-16 md:mt-20 sm:py-12 bg-neutral-50/5 max-w-7xl border-neutral-50/10 border rounded-3xl mt-12 mr-auto ml-auto pt-8 pr-4 pb-8 pl-4">
    <div class="sm:p-8 md:p-10 sm:rounded-3xl border-0 rounded-2xl pt-6 pr-6 pb-6 pl-6 blur-in backdrop-blur-sm" style="animation-play-state: running;">
      <div class="mb-6 sm:mb-8">
        <div class="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-3 py-2 text-xs text-white/80 backdrop-blur mb-4 slide-in-up" style="animation-play-state: running;">
          <span class="inline-flex items-center justify-center text-[#ffffff] bg-stone-50/20 w-6 h-6 rounded-full">
            <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-3 w-3"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z" class=""></path><circle cx="12" cy="12" r="4" class=""></circle></svg>
          </span>
          Core Values
        </div>
        <h2 class="text-2xl sm:text-3xl md:text-4xl font-semibold tracking-tight slide-in-up animate-delay-200" style="animation-play-state: running;">
          How We <span class="bg-clip-text font-light italic text-transparent font-playfair bg-[#ffffff]/60 px-2">Deliver</span>
        </h2>
        <p class="mt-2 text-white/70 text-sm sm:text-base slide-in-up animate-delay-400" style="animation-play-state: running;">Three principles that guide every project we take on.</p>
      </div>
      
      <div class="relative 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" 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>
      </div>
    
  </section>