diff --git a/dist/output.css b/dist/output.css
index 7a04178..8546a22 100644
--- a/dist/output.css
+++ b/dist/output.css
@@ -1568,6 +1568,50 @@ body:is(.dark *) {
   transition-duration: 500ms;
 }
 
+.pricing-card {
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 500ms;
+}
+
+.pricing-card:hover {
+  --tw-scale-x: 1.05;
+  --tw-scale-y: 1.05;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+  background-color: rgb(255 255 255 / 0.05);
+}
+
+.pricing-card {
+  box-shadow: 0 0 0 rgba(255, 255, 255, 0);
+}
+
+.pricing-card:hover {
+  box-shadow: 0 0 60px rgba(255, 255, 255, 0.15);
+}
+
+.pricing-card.popular {
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 500ms;
+}
+
+.pricing-card.popular:hover {
+  --tw-scale-x: 1.05;
+  --tw-scale-y: 1.05;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+  background-color: rgb(255 255 255 / 0.15);
+}
+
+.pricing-card.popular {
+  box-shadow: 0 0 30px rgba(107, 114, 128, 0.3);
+  border: 1px solid transparent;
+}
+
+.pricing-card.popular:hover {
+  box-shadow: 0 0 100px rgba(107, 114, 128, 0.5);
+  border-color: rgba(255, 255, 255, 0.1);
+}
+
 .fade-up {
   opacity: 0;
   transform: translateY(30px);
diff --git a/src/index.html b/src/index.html
index e61bf38..33583a9 100644
--- a/src/index.html
+++ b/src/index.html
@@ -245,7 +245,7 @@
                     </fieldset>
                   </div>
                   <div class="isolate mx-auto mt-10 grid max-w-md grid-cols-1 gap-8 lg:mx-0 lg:max-w-none lg:grid-cols-3">
-                    <div class="rounded-3xl p-8 ring-1 ring-white/10 xl:p-10">
+                    <div class="pricing-card rounded-3xl p-8 ring-1 ring-white/10 xl:p-10">
                       <div class="flex items-center justify-between gap-x-4">
                         <h3 id="tier-freelancer" class="text-lg/8 font-semibold text-white">For Teams</h3>
                       </div>
@@ -290,7 +290,7 @@
                           </li>
                       </ul>
                     </div>
-                    <div class="rounded-3xl bg-white/5 p-8 ring-2 ring-gray-400 xl:p-10">
+                    <div class="pricing-card popular rounded-3xl bg-white/5 p-8 ring-2 ring-gray-400 xl:p-10">
                       <div class="flex items-center justify-between gap-x-4">
                         <h3 id="tier-startup" class="text-lg/8 font-semibold text-white">For Companies</h3>
                         <p class="rounded-full bg-gray-500 px-2.5 py-1 text-xs/5 font-semibold text-white">Most popular</p>
@@ -336,7 +336,7 @@
                         </li>
                       </ul>
                     </div>
-                    <div class="rounded-3xl p-8 ring-1 ring-white/10 xl:p-10">
+                    <div class="pricing-card rounded-3xl p-8 ring-1 ring-white/10 xl:p-10">
                       <div class="flex items-center justify-between gap-x-4">
                         <h3 id="tier-enterprise" class="text-lg/8 font-semibold text-white">For Businesses</h3>
                       </div>
diff --git a/src/input.css b/src/input.css
index c472e4c..8adfe62 100644
--- a/src/input.css
+++ b/src/input.css
@@ -135,6 +135,26 @@
 }
 
 @layer utilities {
+  .pricing-card {
+    @apply transition-all duration-500 hover:scale-105 hover:bg-white/5;
+    box-shadow: 0 0 0 rgba(255, 255, 255, 0);
+  }
+
+  .pricing-card:hover {
+    box-shadow: 0 0 60px rgba(255, 255, 255, 0.15);
+  }
+
+  .pricing-card.popular {
+    @apply transition-all duration-500 hover:scale-105 hover:bg-white/15;
+    box-shadow: 0 0 30px rgba(107, 114, 128, 0.3);
+    border: 1px solid transparent;
+  }
+
+  .pricing-card.popular:hover {
+    box-shadow: 0 0 100px rgba(107, 114, 128, 0.5);
+    border-color: rgba(255, 255, 255, 0.1);
+  }
+
   .fade-up {
     opacity: 0;
     transform: translateY(30px);