use moder colour gradients for dashborad also and premium fonts - Follow Up Deployment

index.html

@@ -8,41 +8,36 @@
     <script src="https://unpkg.com/feather-icons"></script>
     
     <style>
-        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
-        
+        @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600&family=Inter:wght@300;400;500;600;700&display=swap');
+
         :root {
-            --primary: #667eea;
-            --secondary: #f093fb;
-            --accent: #4facfe;
-            --success: #43e97b;
-            --warning: #fa709a;
-            --error: #ff6b6b;
+            --primary: #0f172a;
+            --secondary: #1e293b;
+            --accent: #4f46e5;
+            --success: #10b981;
+            --warning: #f59e0b;
+            --error: #ef4444;
         }
 
         * { font-family: 'Inter', sans-serif; }
 
         body {
-            background: linear-gradient(-45deg, #667eea, #764ba2, #f093fb, #4facfe);
-            background-size: 400% 400%;
-            animation: gradientShift 12s ease infinite;
+            background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%);
+            background-attachment: fixed;
         }
 
-        @keyframes gradientShift {
-            0%   { background-position: 0% 50%;   }
-            50%  { background-position: 100% 50%;  }
-            100% { background-position: 0% 50%;   }
-        }
+        h1, h2, h3, h4 { font-family: 'Playfair Display', serif; }
 
         .glass-morphism {
-            background: rgba(255, 255, 255, 0.15);
+            background: rgba(255, 255, 255, 0.05);
             backdrop-filter: blur(16px);
-            border: 1px solid rgba(255, 255, 255, 0.25);
+            border: 1px solid rgba(255, 255, 255, 0.08);
         }
 
         .glow-card {
-            background: linear-gradient(145deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05));
-            box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37);
-            border: 1px solid rgba(255, 255, 255, 0.18);
+            background: linear-gradient(145deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
+            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
+            border: 1px solid rgba(255, 255, 255, 0.08);
             transition: transform 0.4s, box-shadow 0.4s;
         }
         .glow-card:hover {
@@ -54,9 +49,9 @@
             position: relative;
             overflow: hidden;
             border-radius: 1rem;
-            background: linear-gradient(135deg, rgba(255,255,255,0.2), rgba(255,255,255,0.05));
-            box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37);
-            border: 1px solid rgba(255, 255, 255, 0.18);
+            background: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
+            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+            border: 1px solid rgba(255, 255, 255, 0.08);
         }
         .metric-card::before {
             content: '';