1st ver

src/index.css

@@ -0,0 +1,52 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --bg-color: #050505;
+    --text-primary: #f8fafc;
+    --text-secondary: #94a3b8;
+  }
+  
+  html {
+    scroll-behavior: smooth;
+    background-color: var(--bg-color);
+  }
+
+  body {
+    @apply bg-background text-slate-100 font-sans antialiased selection:bg-primary/30 selection:text-white;
+    min-height: 100vh;
+    overflow-x: hidden;
+  }
+}
+
+@layer utilities {
+  .glass {
+    @apply bg-white/5 backdrop-blur-md border border-white/10 shadow-xl;
+  }
+  
+  .glass-card {
+    @apply bg-surface/50 backdrop-blur-lg border border-white/5 rounded-2xl hover:border-white/10 transition-colors duration-300;
+  }
+
+  .text-gradient {
+    @apply bg-clip-text text-transparent bg-gradient-to-r from-blue-400 via-indigo-400 to-purple-400;
+  }
+
+  .bg-grid-pattern {
+    background-image: 
+      linear-gradient(to right, rgba(255,255,255,0.03) 1px, transparent 1px),
+      linear-gradient(to bottom, rgba(255,255,255,0.03) 1px, transparent 1px);
+    background-size: 50px 50px;
+  }
+
+  /* Utility for glow effects behind cards */
+  .glow-effect::before {
+    content: '';
+    @apply absolute inset-0 -z-10 bg-primary/20 blur-2xl rounded-full opacity-0 transition-opacity duration-300;
+  }
+  .glow-effect:hover::before {
+    @apply opacity-100;
+  }
+}