Animated Services Grid Section

<section class="max-w-7xl sm:px-8 mx-auto pb-4">
        <div class="flex items-end justify-between animate-fade-in animate-delay-1000">
          <div class="">
            <h2 class="text-2xl sm:text-3xl text-neutral-100 tracking-tighter font-geist" style="">Services</h2>
            <p class="mt-2 text-sm text-neutral-400 font-geist">Strategy, design, and engineering crafted for momentum.</p>
          </div>
          <a href="#" class="hidden sm:inline-flex items-center gap-2 text-sm text-neutral-300 hover:text-cyan-400 transition-colors duration-300 group font-geist">
            Explore capabilities
            <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" data-lucide="arrow-right" class="lucide lucide-arrow-right w-4 h-4 group-hover:translate-x-1 transition-transform duration-300"><path d="M5 12h14" class=""></path><path d="m12 5 7 7-7 7" class=""></path></svg>
          </a>
        </div>

        <div class="mt-8 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 md:gap-8">
          <div class="group bg-neutral-900/30 backdrop-blur-xl border border-neutral-700/50 rounded-xl p-6 hover:bg-neutral-800/40 hover:border-neutral-600/60 hover:border-cyan-500/30 hover:-translate-y-1 transition-all duration-500 animate-fade-in-up animate-delay-200 shadow-2xl" style="animation-delay: 1.1s;">
            <div class="flex items-center justify-between">
              <div class="inline-flex items-center gap-2 rounded-md border border-neutral-700/50 bg-neutral-800/30 backdrop-blur-sm px-2 py-1 text-xs text-neutral-400 group-hover:border-cyan-500/50 group-hover:bg-cyan-500/10 group-hover:text-cyan-400 transition-all duration-300 font-geist">
                <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" data-lucide="compass" class="lucide lucide-compass w-3.5 h-3.5"><path d="m16.24 7.76-1.804 5.411a2 2 0 0 1-1.265 1.265L7.76 16.24l1.804-5.411a2 2 0 0 1 1.265-1.265z" class=""></path><circle cx="12" cy="12" r="10" class=""></circle></svg>
                Strategy
              </div>
              <span class="text-xs text-neutral-500 group-hover:text-neutral-400 transition-colors duration-300 font-geist">From $4k</span>
            </div>
            <h3 class="mt-5 text-lg font-medium tracking-tight group-hover:text-cyan-400 transition-colors duration-300 font-geist">Brand &amp; Content Strategy</h3>
            <p class="mt-2 text-sm text-neutral-400 group-hover:text-neutral-300 transition-colors duration-300 font-geist">Positioning, narratives, roadmaps. Insights that guide execution.</p>
            <ul class="mt-4 space-y-2 text-sm text-neutral-500">
              <li class="flex items-center gap-2 group-hover:text-neutral-400 transition-colors duration-300 font-geist">
                <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" data-lucide="check" class="lucide lucide-check w-4 h-4 text-cyan-400"><path d="M20 6 9 17l-5-5" class=""></path></svg>
                Audience &amp; competitive research
              </li>
              <li class="flex items-center gap-2 group-hover:text-neutral-400 transition-colors duration-300 font-geist">
                <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" data-lucide="check" class="lucide lucide-check w-4 h-4 text-cyan-400"><path d="M20 6 9 17l-5-5" class=""></path></svg>
                Messaging frameworks
              </li>
            </ul>
          </div>

          <div class="group bg-neutral-900/30 backdrop-blur-xl border border-neutral-700/50 rounded-xl p-6 hover:bg-neutral-800/40 hover:border-neutral-600/60 hover:border-purple-500/30 hover:-translate-y-1 transition-all duration-500 animate-fade-in-up animate-delay-300 shadow-2xl" style="animation-delay: 1.2s;">
            <div class="flex items-center justify-between">
              <div class="inline-flex items-center gap-2 rounded-md border border-neutral-700/50 bg-neutral-800/30 backdrop-blur-sm px-2 py-1 text-xs text-neutral-400 group-hover:border-purple-500/50 group-hover:bg-purple-500/10 group-hover:text-purple-400 transition-all duration-300 font-geist">
                <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" data-lucide="layout-dashboard" class="lucide lucide-layout-dashboard w-3.5 h-3.5"><rect width="7" height="9" x="3" y="3" rx="1" class=""></rect><rect width="7" height="5" x="14" y="3" rx="1" class=""></rect><rect width="7" height="9" x="14" y="12" rx="1" class=""></rect><rect width="7" height="5" x="3" y="16" rx="1" class=""></rect></svg>
                Design
              </div>
              <span class="text-xs text-neutral-500 group-hover:text-neutral-400 transition-colors duration-300 font-geist">From $6k</span>
            </div>
            <h3 class="mt-5 text-lg font-medium tracking-tight group-hover:text-purple-400 transition-colors duration-300 font-geist">Product &amp; Marketing Design</h3>
            <p class="mt-2 text-sm text-neutral-400 group-hover:text-neutral-300 transition-colors duration-300 font-geist">Systems and surfaces with motion, craft, and intent.</p>
            <ul class="mt-4 space-y-2 text-sm text-neutral-500">
              <li class="flex items-center gap-2 group-hover:text-neutral-400 transition-colors duration-300 font-geist">
                <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" data-lucide="check" class="lucide lucide-check w-4 h-4 text-purple-400"><path d="M20 6 9 17l-5-5" class=""></path></svg>
                Design systems &amp; UI kits
              </li>
              <li class="flex items-center gap-2 group-hover:text-neutral-400 transition-colors duration-300 font-geist">
                <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" data-lucide="check" class="lucide lucide-check w-4 h-4 text-purple-400"><path d="M20 6 9 17l-5-5" class=""></path></svg>
                Prototyping &amp; micro‑animations
              </li>
            </ul>
          </div>

          <div class="group bg-neutral-900/30 backdrop-blur-xl border border-neutral-700/50 rounded-xl p-6 hover:bg-neutral-800/40 hover:border-neutral-600/60 hover:border-green-500/30 hover:-translate-y-1 transition-all duration-500 animate-fade-in-up animate-delay-400 shadow-2xl" style="animation-delay: 1.3s;">
            <div class="flex items-center justify-between">
              <div class="inline-flex items-center gap-2 rounded-md border border-neutral-700/50 bg-neutral-800/30 backdrop-blur-sm px-2 py-1 text-xs text-neutral-400 group-hover:border-green-500/50 group-hover:bg-green-500/10 group-hover:text-green-400 transition-all duration-300 font-geist">
                <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" data-lucide="code-2" class="lucide lucide-code-2 w-3.5 h-3.5"><path d="m18 16 4-4-4-4" class=""></path><path d="m6 8-4 4 4 4" class=""></path><path d="m14.5 4-5 16" class=""></path></svg>
                Engineering
              </div>
              <span class="text-xs text-neutral-500 group-hover:text-neutral-400 transition-colors duration-300 font-geist">From $8k</span>
            </div>
            <h3 class="mt-5 text-lg font-medium tracking-tight group-hover:text-green-400 transition-colors duration-300 font-geist">Web Engineering</h3>
            <p class="mt-2 text-sm text-neutral-400 group-hover:text-neutral-300 transition-colors duration-300 font-geist">Fast, accessible, and reliable — built to scale.</p>
            <ul class="mt-4 space-y-2 text-sm text-neutral-500">
              <li class="flex items-center gap-2 group-hover:text-neutral-400 transition-colors duration-300 font-geist">
                <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" data-lucide="check" class="lucide lucide-check w-4 h-4 text-green-400"><path d="M20 6 9 17l-5-5" class=""></path></svg>
                Modern stacks &amp; CMS integrations
              </li>
              <li class="flex items-center gap-2 group-hover:text-neutral-400 transition-colors duration-300 font-geist">
                <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" data-lucide="check" class="lucide lucide-check w-4 h-4 text-green-400"><path d="M20 6 9 17l-5-5" class=""></path></svg>
                QA, a11y, and performance
              </li>
            </ul>
          </div>

          <div class="group bg-neutral-900/30 backdrop-blur-xl border border-neutral-700/50 rounded-xl p-6 hover:bg-neutral-800/40 hover:border-neutral-600/60 hover:border-orange-500/30 hover:-translate-y-1 transition-all duration-500 animate-fade-in-up animate-delay-500 shadow-2xl" style="animation-delay: 1.4s;">
            <div class="flex items-center justify-between">
              <div class="inline-flex items-center gap-2 rounded-md border border-neutral-700/50 bg-neutral-800/30 backdrop-blur-sm px-2 py-1 text-xs text-neutral-400 group-hover:border-orange-500/50 group-hover:bg-orange-500/10 group-hover:text-orange-400 transition-all duration-300 font-geist">
                <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" data-lucide="megaphone" class="lucide lucide-megaphone w-3.5 h-3.5"><path d="M11 6a13 13 0 0 0 8.4-2.8A1 1 0 0 1 21 4v12a1 1 0 0 1-1.6.8A13 13 0 0 0 11 14H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2z" class=""></path><path d="M6 14a12 12 0 0 0 2.4 7.2 2 2 0 0 0 3.2-2.4A8 8 0 0 1 10 14" class=""></path><path d="M8 6v8" class=""></path></svg>
                Growth
              </div>
              <span class="text-xs text-neutral-500 group-hover:text-neutral-400 transition-colors duration-300 font-geist">From $5k</span>
            </div>
            <h3 class="mt-5 text-lg font-medium tracking-tight group-hover:text-orange-400 transition-colors duration-300 font-geist">Campaigns &amp; Content</h3>
            <p class="mt-2 text-sm text-neutral-400 group-hover:text-neutral-300 transition-colors duration-300 font-geist">Launches and always‑on programs that convert.</p>
            <ul class="mt-4 space-y-2 text-sm text-neutral-500">
              <li class="flex items-center gap-2 group-hover:text-neutral-400 transition-colors duration-300 font-geist">
                <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" data-lucide="check" class="lucide lucide-check w-4 h-4 text-orange-400"><path d="M20 6 9 17l-5-5" class=""></path></svg>
                Content calendars &amp; production
              </li>
              <li class="flex items-center gap-2 group-hover:text-neutral-400 transition-colors duration-300 font-geist">
                <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" data-lucide="check" class="lucide lucide-check w-4 h-4 text-orange-400"><path d="M20 6 9 17l-5-5" class=""></path></svg>
                Paid &amp; organic optimization
              </li>
            </ul>
          </div>
        </div>
      </section>