Interactive Vehicle Specs Grid Cards

<div class="grid grid-cols-2 gap-3">
              <div class="spec-card p-4 rounded-xl bg-white/5 backdrop-blur-xl border border-white/10 hover:bg-white/10 hover:scale-105 hover:border-cyan-400/30 transition-all duration-300 cursor-pointer">
                <div class="flex items-center gap-3">
                  <div class="spec-icon w-10 h-10 rounded-lg bg-gradient-to-r from-cyan-500 to-orange-500 grid place-items-center hover:scale-110 transition-transform duration-200">
                    <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" class="w-5 h-5 text-white"><path d="m12 14 4-4"></path><path d="M3.34 19a10 10 0 1 1 17.32 0"></path></svg>
                  </div>
                  <div>
                    <p id="top-speed" class="text-lg font-semibold text-white counter" data-target="330">0</p>
                    <p class="text-xs text-white/60">km/h</p>
                  </div>
                </div>
              </div>
              
              <div class="spec-card p-4 rounded-xl bg-white/5 backdrop-blur-xl border border-white/10 hover:bg-white/10 hover:scale-105 hover:border-indigo-400/30 transition-all duration-300 cursor-pointer">
                <div class="flex items-center gap-3">
                  <div class="spec-icon w-10 h-10 rounded-lg bg-gradient-to-r from-indigo-500 to-blue-500 grid place-items-center hover:scale-110 transition-transform duration-200">
                    <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" class="w-5 h-5 text-white zap-animation"><path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z"></path></svg>
                  </div>
                  <div class="">
                    <p id="acceleration" class="text-lg font-semibold text-white counter" data-target="2.7" data-decimal="1">0</p>
                    <p class="text-xs text-white/60">0-100</p>
                  </div>
                </div>
              </div>

              <div class="spec-card p-4 rounded-xl bg-white/5 backdrop-blur-xl border border-white/10 hover:bg-white/10 hover:scale-105 hover:border-purple-400/30 transition-all duration-300 cursor-pointer">
                <div class="flex items-center gap-3">
                  <div class="spec-icon w-10 h-10 rounded-lg bg-gradient-to-r from-purple-500 to-pink-500 grid place-items-center hover:scale-110 transition-transform duration-200">
                    <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" class="w-5 h-5 text-white"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path><path d="M16 3.128a4 4 0 0 1 0 7.744"></path><path d="M22 21v-2a4 4 0 0 0-3-3.87"></path><circle cx="9" cy="7" r="4"></circle></svg>
                  </div>
                  <div>
                    <p id="seating" class="text-lg font-semibold text-white">2+2</p>
                    <p class="text-xs text-white/60">Seats</p>
                  </div>
                </div>
              </div>

              <div class="spec-card p-4 rounded-xl bg-white/5 backdrop-blur-xl border border-white/10 hover:bg-white/10 hover:scale-105 hover:border-emerald-400/30 transition-all duration-300 cursor-pointer">
                <div class="flex items-center gap-3">
                  <div class="spec-icon w-10 h-10 rounded-lg bg-gradient-to-r from-emerald-500 to-green-500 grid place-items-center hover:scale-110 transition-transform duration-200">
                    <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" class="w-5 h-5 text-white gear-rotate"><path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915"></path><circle cx="12" cy="12" r="3"></circle></svg>
                  </div>
                  <div class="">
                    <p id="transmission" class="text-lg font-semibold text-white">PDK</p>
                    <p class="text-xs text-white/60">Auto</p>
                  </div>
                </div>
              </div>
            </div>