Responsive Services Section with CTA

<div class="sm:pl-6 sm:pr-6 lg:pl-8 lg:pr-8 max-w-7xl mr-auto ml-auto pr-4 pl-4">
        <div class="mb-16 grid lg:grid-cols-2 gap-8 items-start">
          <h2 class="sm:text-5xl md:text-6xl text-4xl font-semibold text-white tracking-tight">Services That Drive Results</h2>
          <div class="flex flex-col items-start lg:items-end gap-6">
            <p class="text-lg text-neutral-300 max-w-xl text-left lg:text-right">
              Comprehensive design solutions tailored to elevate your brand and create meaningful user experiences.
            </p>
            <button class="inline-flex items-center justify-center px-6 py-3 rounded-full bg-white text-black text-sm font-medium hover:bg-neutral-200 transition-colors">
              Get started
            </button>
          </div>
        </div>

        <div class="grid lg:grid-cols-3 gap-0 border-t border-white/10">
          <!-- Service 1 -->
          <div class="divide-y divide-white/10 lg:border-r border-white/10">
            <div class="p-8">
              <div class="flex items-center gap-4 mb-6">
                <div class="w-12 h-12 rounded-full bg-white/10 flex 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-6 w-6 text-white"><rect width="18" height="18" x="3" y="3" rx="2" class=""></rect><path d="M9 9h6v6H9z" class=""></path></svg>
                </div>
                <div class="">
                  <div class="text-white font-medium">UI/UX Design</div>
                  <div class="text-sm text-neutral-400">User-centered design</div>
                </div>
              </div>
              <p class="text-neutral-300 leading-relaxed">
                Crafting intuitive and beautiful user interfaces that prioritize user experience. From wireframing to high-fidelity prototypes, I ensure every interaction is meaningful and efficient.
              </p>
            </div>
            <div class="p-8">
              <div class="flex items-center gap-4 mb-6">
                <div class="w-12 h-12 rounded-full bg-white/10 flex 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-6 w-6 text-white"><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>
                <div class="">
                  <div class="text-white font-medium">Brand Identity</div>
                  <div class="text-sm text-neutral-400">Visual storytelling</div>
                </div>
              </div>
              <p class="text-neutral-300 leading-relaxed">
                Developing comprehensive brand identities that capture your essence. Logo design, color palettes, typography, and brand guidelines that resonate with your audience.
              </p>
            </div>
          </div>

          <!-- Service 2 -->
          <div class="divide-y divide-white/10 lg:border-r border-white/10">
            <div class="p-8">
              <div class="flex items-center gap-4 mb-6">
                <div class="w-12 h-12 rounded-full bg-white/10 flex 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-6 w-6 text-white"><rect width="20" height="14" x="2" y="5" rx="2" class=""></rect><line x1="2" x2="22" y1="10" y2="10" class=""></line></svg>
                </div>
                <div class="">
                  <div class="text-white font-medium">Web Design</div>
                  <div class="text-sm text-neutral-400">Responsive experiences</div>
                </div>
              </div>
              <p class="text-neutral-300 leading-relaxed">
                Creating modern, responsive websites that perform beautifully across all devices. From landing pages to complex web applications, built with user experience at the forefront.
              </p>
            </div>
            <div class="p-8">
              <div class="flex items-center gap-4 mb-6">
                <div class="w-12 h-12 rounded-full bg-white/10 flex 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-6 w-6 text-white"><rect width="14" height="20" x="5" y="2" rx="2" ry="2" class=""></rect><path d="M12 18h.01" class=""></path></svg>
                </div>
                <div class="">
                  <div class="text-white font-medium">Mobile App Design</div>
                  <div class="text-sm text-neutral-400">iOS &amp; Android</div>
                </div>
              </div>
              <p class="text-neutral-300 leading-relaxed">
                Designing native mobile experiences that feel natural and engaging. Focus on platform conventions while maintaining your unique brand personality.
              </p>
            </div>
          </div>

          <!-- Service 3 -->
          <div class="divide-y divide-white/10">
            <div class="p-8">
              <div class="flex items-center gap-4 mb-6">
                <div class="w-12 h-12 rounded-full bg-white/10 flex 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-6 w-6 text-white"><path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z" class=""></path></svg>
                </div>
                <div class="">
                  <div class="text-white font-medium">Design Systems</div>
                  <div class="text-sm text-neutral-400">Scalable solutions</div>
                </div>
              </div>
              <p class="leading-relaxed text-neutral-300">Building comprehensive design systems that ensure consistency across all digital touchpoints. Component libraries, style guides, and design tokens for scalable growth.
              </p>
            </div>
            <div class="p-8">
              <div class="flex items-center gap-4 mb-6">
                <div class="w-12 h-12 rounded-full bg-white/10 flex 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-6 w-6 text-white"><path d="M9 12l2 2 4-4" class=""></path><path d="M21 12c.552 0 1-.448 1-1V5c0-.552-.448-1-1-1H3c-.552 0-1 .448-1 1v6c0 .552.448 1 1 1" class=""></path><path d="M3 10v6c0 .552.448 1 1 1h16c.552 0 1-.448 1-1v-6" class=""></path></svg>
                </div>
                <div>
                  <div class="text-white font-medium">Consultation</div>
                  <div class="text-sm text-neutral-400">Strategic guidance</div>
                </div>
              </div>
              <p class="text-neutral-300 leading-relaxed">
                Strategic design consultation to help you make informed decisions about your digital presence. UX audits, design strategy, and optimization recommendations.
              </p>
            </div>
          </div>
        </div>
      </div>