fix: Resolve PostCSS syntax errors in globals.css

frontend/globals.css

@@ -27,7 +27,10 @@
 
 @layer base {
   body {
-    @apply bg-[#030303] text-foreground antialiased;
+    background-color: #030303;
+    color: hsl(var(--foreground));
+    font-feature-settings: "rlig" 1, "calt" 1;
+    -webkit-font-smoothing: antialiased;
     background-image: 
       radial-gradient(at 0% 0%, hsla(263, 70%, 50%, 0.15) 0px, transparent 50%),
       radial-gradient(at 100% 100%, hsla(190, 70%, 50%, 0.1) 0px, transparent 50%);
@@ -37,11 +40,16 @@
 
 @layer components {
   .glass-card {
-    @apply bg-black/40 backdrop-blur-md border border-white/10 shadow-xl transition-all duration-300;
+    background-color: rgba(0, 0, 0, 0.4);
+    backdrop-filter: blur(12px);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   }
   
   .glass-card:hover {
-    @apply border-white/20 bg-black/50;
+    border-color: rgba(255, 255, 255, 0.2);
+    background-color: rgba(0, 0, 0, 0.5);
   }
 
   .premium-gradient {
@@ -49,7 +57,9 @@
   }
 
   .text-gradient {
-    @apply bg-clip-text text-transparent bg-gradient-to-r from-indigo-400 via-purple-400 to-pink-400;
+    background-image: linear-gradient(to right, #818cf8, #c084fc, #f472b6);
+    -webkit-background-clip: text;
+    color: transparent;
   }
 }