Interactive Skills & Expertise Cards Section

<div class="max-w-7xl bg-neutral-950/90 border-neutral-800 border rounded-3xl mr-auto ml-auto pt-24 pr-24 pb-24 pl-24">
          <div class="mb-8">
            <h2 class="text-[44px] sm:text-[56px] md:text-[64px] font-light tracking-tighter font-playfair mb-8" style="">Skills &amp; Expertise</h2>
          </div>

          <div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-4" id="industry-cards">
            <!-- Card 1 -->
            <div class="fade-in-up relative rounded-3xl bg-neutral-900/60 p-6 ring-1 ring-white/10 backdrop-blur supports-[backdrop-filter]:bg-neutral-900/40 hover:bg-neutral-900/80 hover:ring-white/20 hover:scale-105 hover:-translate-y-2 transition-all duration-300 cursor-pointer group visible" style="transform: none; opacity: 1;">
              <div class="mb-4 flex items-center justify-between">
                <div class="grid h-12 w-12 place-items-center rounded-xl bg-white/5 ring-1 ring-white/10 group-hover:ring-emerald-400/30 group-hover:bg-emerald-400/10 transition-all duration-300">
                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="layers" class="lucide lucide-layers w-[20px] h-[20px] text-zinc-400 group-hover:text-emerald-400 group-hover:scale-110 transition-all duration-300" style="width: 20px; height: 20px;"><path d="m12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z" class=""></path><path d="m22 17.65-9.17 4.16a2 2 0 0 1-1.66 0L2 17.65" class=""></path><path d="m22 12.65-9.17 4.16a2 2 0 0 1-1.66 0L2 12.65" class=""></path></svg>
                </div>
                <span class="text-xs text-neutral-500 font-sans group-hover:text-emerald-400 transition-colors" style="">01</span>
              </div>
              <h3 class="mb-2 text-lg font-semibold tracking-tight font-sans group-hover:text-emerald-200 transition-colors" style="">UX/UI Design</h3>
              <p class="text-sm text-neutral-400 group-hover:text-neutral-300 transition-colors font-sans" style="">Creating intuitive interfaces and user experiences through wireframing, prototyping, and visual design.</p>
            </div>

            <!-- Card 2 -->
            <div class="fade-in-up stagger-delay-1 relative ring-1 ring-white/10 supports-[backdrop-filter]:bg-neutral-900/40 bg-neutral-900/60 rounded-3xl pt-6 pr-6 pb-6 pl-6 backdrop-blur hover:bg-neutral-900/80 hover:ring-white/20 hover:scale-105 hover:-translate-y-2 transition-all duration-300 cursor-pointer group visible" style="transform: none; opacity: 1;">
              <div class="mb-4 flex items-center justify-between">
                <div class="grid h-12 w-12 place-items-center rounded-xl bg-white/5 ring-1 ring-white/10 group-hover:ring-emerald-400/30 group-hover:bg-emerald-400/10 transition-all duration-300">
                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="users" class="lucide lucide-users w-[20px] h-[20px] text-zinc-400 group-hover:text-emerald-400 group-hover:scale-110 transition-all duration-300" style="width: 20px; height: 20px;"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" class=""></path><circle cx="9" cy="7" r="4" class=""></circle><path d="m22 21-2-2" class=""></path><circle cx="20" cy="16" r="3" class=""></circle></svg>
                </div>
                <span class="text-xs text-neutral-500 font-sans group-hover:text-emerald-400 transition-colors" style="">02</span>
              </div>
              <h3 class="mb-2 text-lg font-semibold tracking-tight font-sans group-hover:text-emerald-200 transition-colors" style="">User Research</h3>
              <p class="text-sm text-neutral-400 group-hover:text-neutral-300 transition-colors font-sans" style="">Conducting user interviews, surveys, and usability testing to inform design decisions with data-driven insights.</p>
            </div>

            <!-- Card 3 (Emphasis) -->
            <div class="fade-in-up stagger-delay-2 relative overflow-hidden ring-1 ring-emerald-400/30 bg-neutral-900/70 rounded-3xl pt-6 pr-6 pb-6 pl-6 hover:bg-neutral-900/90 hover:ring-emerald-400/50 hover:scale-105 hover:-translate-y-2 transition-all duration-300 cursor-pointer group visible" style="transform: none; opacity: 1;">
              <span class="mb-3 inline-flex items-center gap-2 rounded-full bg-emerald-400/10 px-2.5 py-1 text-[11px] font-medium text-emerald-300 ring-1 ring-emerald-400/30 font-sans group-hover:bg-emerald-400/20 group-hover:text-emerald-200 transition-all" style="">
                Core Specialty
              </span>
              <h3 class="mb-2 text-xl font-semibold tracking-tight font-sans group-hover:text-emerald-200 transition-colors" style="">Design Systems</h3>
              <p class="group-hover:text-neutral-200 transition-colors text-sm text-neutral-300 mb-4" style="">Building scalable design systems and component libraries that ensure consistency across products and teams.</p>
              <button class="inline-flex items-center gap-2 rounded-xl bg-neutral-800 px-4 py-2 text-xs font-medium text-neutral-100 ring-1 ring-white/10 hover:bg-neutral-700 hover:scale-105 transition-all duration-200 font-sans">
                View Portfolio
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="arrow-right" class="lucide lucide-arrow-right h-4 w-4 group-hover:translate-x-1 transition-transform"><path d="M5 12h14" class=""></path><path d="m12 5 7 7-7 7" class=""></path></svg>
              </button>
            </div>

            <!-- Card 4 -->
            <div class="fade-in-up stagger-delay-3 relative rounded-3xl bg-neutral-900/60 p-6 ring-1 ring-white/10 backdrop-blur supports-[backdrop-filter]:bg-neutral-900/40 hover:bg-neutral-900/80 hover:ring-white/20 hover:scale-105 hover:-translate-y-2 transition-all duration-300 cursor-pointer group visible" style="transform: none; opacity: 1;">
              <div class="mb-4 flex items-center justify-between">
                <div class="grid h-12 w-12 place-items-center rounded-xl bg-white/5 ring-1 ring-white/10 group-hover:ring-emerald-400/30 group-hover:bg-emerald-400/10 transition-all duration-300">
                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="code" class="lucide lucide-code w-[20px] h-[20px] text-zinc-400 group-hover:text-emerald-400 group-hover:scale-110 transition-all duration-300" style="width: 20px; height: 20px;"><polyline points="16,18 22,12 16,6" class=""></polyline><polyline points="8,6 2,12 8,18" class=""></polyline></svg>
                </div>
                <span class="text-xs text-neutral-500 font-sans group-hover:text-emerald-400 transition-colors" style="">04</span>
              </div>
              <h3 class="mb-2 text-lg font-semibold tracking-tight font-sans group-hover:text-emerald-200 transition-colors" style="">Prototyping</h3>
              <p class="text-sm text-neutral-400 group-hover:text-neutral-300 transition-colors font-sans" style="">Building interactive prototypes using Figma, Framer, and code to validate ideas and communicate designs effectively.</p>
            </div>
          </div>

          <!-- Tools & Technologies -->
          <div class="fade-in-up stagger-delay-4 mt-8 p-6 bg-neutral-900/40 rounded-2xl ring-1 ring-white/10 visible">
            <h4 class="text-lg font-semibold font-sans mb-4 text-neutral-200">Tools &amp; Technologies</h4>
            <div class="flex flex-wrap gap-3">
              <span class="px-3 py-2 bg-neutral-800/50 rounded-lg text-sm font-sans text-neutral-300">Figma</span>
              <span class="px-3 py-2 bg-neutral-800/50 rounded-lg text-sm font-sans text-neutral-300">Adobe Creative Suite</span>
              <span class="px-3 py-2 bg-neutral-800/50 rounded-lg text-sm font-sans text-neutral-300">Sketch</span>
              <span class="px-3 py-2 bg-neutral-800/50 rounded-lg text-sm font-sans text-neutral-300">Principle</span>
              <span class="px-3 py-2 bg-neutral-800/50 rounded-lg text-sm font-sans text-neutral-300">Framer</span>
              <span class="px-3 py-2 bg-neutral-800/50 rounded-lg text-sm font-sans text-neutral-300">HTML/CSS</span>
              <span class="px-3 py-2 bg-neutral-800/50 rounded-lg text-sm font-sans text-neutral-300">JavaScript</span>
              <span class="px-3 py-2 bg-neutral-800/50 rounded-lg text-sm font-sans text-neutral-300">React</span>
            </div>
          </div>
        </div>