/* Import Google Fonts */
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Poppins:wght@300;400;500;600;700;800;900&display=swap');

        /* Modern Design System */
        :root {
            /* 🌞 Light Mode Colors */
            --primary-50: #f8fafc;
            --primary-100: #f1f5f9;
            --primary-200: #e2e8f0;
            --primary-300: #cbd5e1;
            --primary-400: #94a3b8;
            --primary-500: #64748b;
            --primary-600: #475569;
            --primary-700: #334155;
            --primary-800: #1e293b;
            --primary-900: #0f172a;

            --secondary-50: #fdf4ff;
            --secondary-100: #fae8ff;
            --secondary-200: #f5d0fe;
            --secondary-300: #f0abfc;
            --secondary-400: #e879f9;
            --secondary-500: #d946ef;
            --secondary-600: #c026d3;
            --secondary-700: #a21caf;
            --secondary-800: #86198f;
            --secondary-900: #701a75;

            --neutral-50: #fafafa;
            --neutral-100: #f5f5f5;
            --neutral-200: #e5e5e5;
            --neutral-300: #d4d4d4;
            --neutral-400: #a3a3a3;
            --neutral-500: #737373;
            --neutral-600: #525252;
            --neutral-700: #404040;
            --neutral-800: #262626;
            --neutral-900: #171717;

            --brand-primary: #551A8B;
            --brand-accent: #FFB400;
            --brand-light: #FAFAFA;

            /* Gradients */
            --gradient-primary: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-accent) 100%);
            --gradient-secondary: linear-gradient(135deg, var(--brand-accent) 0%, var(--brand-primary) 100%);
            --gradient-brand: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-accent) 50%, var(--brand-primary) 100%);
            --gradient-hero: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-accent) 50%, var(--brand-primary) 100%);

            /* Shadows */
            --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
            --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
            --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
            --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
            --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
            --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

            /* Spacing */
            --space-xs: 0.25rem;
            --space-sm: 0.5rem;
            --space-md: 0.75rem;
            --space-lg: 1rem;
            --space-xl: 1.25rem;
            --space-2xl: 1.5rem;
            --space-3xl: 2rem;
            --space-4xl: 2.5rem;
            --space-5xl: 3rem;
            --space-6xl: 4rem;

            /* Border Radius */
            --radius-sm: 0.375rem;
            --radius-md: 0.5rem;
            --radius-lg: 0.75rem;
            --radius-xl: 1rem;
            --radius-2xl: 1.5rem;
            --radius-full: 9999px;

            /* Transitions */
            --transition-fast: 0.15s ease-out;
            --transition-normal: 0.3s ease-out;
            --transition-slow: 0.5s ease-out;

            /* Typography */
            --font-display: 'Poppins', system-ui, -apple-system, sans-serif;
            --font-body: 'Inter', system-ui, -apple-system, sans-serif;
        }

        /* Base Styles */
        * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
            padding: 0;
            font-family: var(--font-body);
            background: 
                linear-gradient(135deg, var(--neutral-50) 0%, var(--primary-50) 100%),
                radial-gradient(circle at 20% 80%, rgba(255, 180, 0, 0.08) 0%, transparent 50%),
                radial-gradient(circle at 80% 20%, rgba(85, 26, 139, 0.08) 0%, transparent 50%);
            background-attachment: fixed;
            color: #1A1A1A;
            overflow-x: hidden;
            line-height: 1.6;
            position: relative;
        }

        body::before {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="bodyPattern" width="40" height="40" patternUnits="userSpaceOnUse"><circle cx="20" cy="20" r="1" fill="rgba(52,85,115,0.03)"/><circle cx="10" cy="30" r="0.5" fill="rgba(242,170,82,0.04)"/><circle cx="30" cy="10" r="0.8" fill="rgba(52,85,115,0.02)"/></pattern></defs><rect width="100" height="100" fill="url(%23bodyPattern)"/></svg>');
            z-index: -1;
            animation: backgroundFloat 20s ease-in-out infinite;
        }
        



        /* Hero Section */
        #top-services {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 70vh;
            padding: var(--space-6xl) var(--space-xl);
            background: 
                var(--gradient-hero),
                radial-gradient(circle at 30% 70%, rgba(242, 170, 82, 0.15) 0%, transparent 50%),
                radial-gradient(circle at 70% 30%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
            color: white;
            text-align: center;
            position: relative;
            overflow: hidden;
        }

        #top-services::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="heroPattern" width="50" height="50" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="2" fill="white" opacity="0.05"/><circle cx="10" cy="40" r="1" fill="white" opacity="0.03"/><circle cx="40" cy="10" r="1.5" fill="white" opacity="0.04"/><polygon points="20,20 22,18 24,20 22,22" fill="rgba(242,170,82,0.08)"/></pattern></defs><rect width="100" height="100" fill="url(%23heroPattern)"/></svg>');
            animation: heroShimmer 10s ease-in-out infinite;
            z-index: -1;
        }

        #top-services::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 1px;
            background: linear-gradient(90deg, 
                transparent 0%, 
                rgba(242, 170, 82, 0.5) 25%, 
                rgba(255, 255, 255, 0.3) 50%, 
                rgba(242, 170, 82, 0.5) 75%, 
                transparent 100%);
            box-shadow: 0 1px 10px rgba(242, 170, 82, 0.3);
        }

        #top-text {
            max-width: 800px;
            width: 100%;
            z-index: 1;
            position: relative;
        }

        #top-text h5 {
            font-family: var(--font-display);
            font-size: clamp(0.875rem, 2vw, 1rem);
            font-weight: 600;
            letter-spacing: 0.15em;
            text-transform: uppercase;
            color: var(--secondary-300);
            margin-bottom: var(--space-lg);
            opacity: 0.9;
            animation: slideInUp 0.6s ease-out;
        }

        #top-h1 {
            font-family: var(--font-display);
            font-size: clamp(1.5rem, 4vw, 2.5rem);
            font-weight: 800;
            line-height: 1.2;
            margin: var(--space-xl) 0 var(--space-2xl) 0;
            background: linear-gradient(135deg, white 0%, #f1f5f9 50%, var(--secondary-200) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            position: relative;
            animation: slideInUp 0.8s ease-out 0.2s both;
        }

        #top-h1::after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            width: 60px;
            height: 4px;
            background: var(--gradient-secondary);
            border-radius: 2px;
            box-shadow: 0 2px 10px rgba(242, 170, 82, 0.4);
        }

        #top-text p {
            font-size: clamp(1rem, 2.5vw, 1.25rem);
            font-weight: 400;
            color: rgba(255, 255, 255, 0.9);
            max-width: 600px;
            margin: 0 auto;
            line-height: 1.7;
            animation: slideInUp 1s ease-out 0.4s both;
        }

        /* Services Cards Section */
        #services-cards {
            padding: var(--space-6xl) var(--space-xl);
            background: 
                linear-gradient(135deg, var(--neutral-50) 0%, var(--primary-50) 100%);
            position: relative;
        }

        #services-cards::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="cardsPattern" width="60" height="60" patternUnits="userSpaceOnUse"><circle cx="30" cy="30" r="1" fill="rgba(52,85,115,0.02)"/><circle cx="15" cy="45" r="0.5" fill="rgba(242,170,82,0.03)"/><circle cx="45" cy="15" r="0.8" fill="rgba(52,85,115,0.02)"/></pattern></defs><rect width="100" height="100" fill="url(%23cardsPattern)"/></svg>');
            z-index: -1;
        }

        #cards {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: var(--space-3xl);
            max-width: 1400px;
            margin: 0 auto;
            width: 100%;
        }

        .card {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            padding: var(--space-3xl) var(--space-2xl);
            background: 
                rgba(255, 255, 255, 0.85),
                linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.9) 100%);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.4);
            border-radius: var(--radius-2xl);
            box-shadow: var(--shadow-lg);
            transition: all var(--transition-normal);
            position: relative;
            overflow: hidden;
            color: #1A1A1A;
        }

        .card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: var(--gradient-secondary);
            transform: scaleX(0);
            transition: transform var(--transition-normal);
            transform-origin: left;
        }

        .card::after {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: 
                radial-gradient(circle, rgba(242, 170, 82, 0.05) 0%, transparent 70%);
            transform: scale(0);
            transition: transform var(--transition-slow);
            z-index: -1;
        }

        .card:hover {
            transform: translateY(-8px) scale(1.02);
            box-shadow: var(--shadow-2xl);
            border-color: rgba(242, 170, 82, 0.3);
            background: 
                rgba(255, 255, 255, 0.9),
                linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.9) 100%);
        }

        .card:hover::before {
            transform: scaleX(1);
        }

        .card:hover::after {
            transform: scale(1);
        }

        .card img {
            width: 80px;
            height: 80px;
            margin-bottom: var(--space-xl);
            border-radius: var(--radius-xl);
            box-shadow: var(--shadow-md);
            transition: all var(--transition-normal);
            background: rgba(255, 255, 255, 0.9);
            padding: var(--space-md);
        }

        .card:hover img {
            transform: scale(1.1) rotate(5deg);
            box-shadow: var(--shadow-lg);
        }

        .card h4 {
            font-family: var(--font-display);
            font-size: clamp(1rem, 2vw, 1.25rem);
            font-weight: 700;
            color: #1A1A1A;
            margin: 0 0 var(--space-md) 0;
            background: linear-gradient(135deg, var(--brand-primary) 0%, var(--primary-700) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
        }

        .card h5 {
            font-family: var(--font-display);
            font-size: clamp(0.875rem, 2vw, 1rem);
            font-weight: 600;
            color: #FFB400;
            margin: 0 0 var(--space-sm) 0;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
        }

        .card h6 {
            font-size: 0.875rem;
            font-weight: 500;
            color: #4A4A4A;
            margin: 0 0 var(--space-lg) 0;
            padding: var(--space-xs) var(--space-md);
            background: rgba(255, 180, 0, 0.15);
            border-radius: var(--radius-full);
            border: 1px solid rgba(255, 180, 0, 0.3);
            font-style: italic;
            box-shadow: 0 2px 4px rgba(255, 180, 0, 0.2);
        }

        .card p {
            font-size: clamp(0.875rem, 2vw, 1rem);
            line-height: 1.7;
            color: #2A2A2A;
            margin: 0;
            text-align: left;
            position: relative;
            padding-left: var(--space-lg);
            font-weight: 500;
        }

        .card p::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0.5em;
            width: 4px;
            height: 1.2em;
            background: var(--gradient-secondary);
            border-radius: 2px;
        }

        

    
        /* Animations */
        @keyframes backgroundFloat {
            0%, 100% {
                transform: translateY(0) rotate(0deg);
                opacity: 1;
            }
            50% {
                transform: translateY(-10px) rotate(2deg);
                opacity: 0.8;
            }
        }

        @keyframes heroShimmer {
            0% {
                transform: translateX(-100%) rotate(0deg);
                opacity: 0;
            }
            50% {
                opacity: 0.3;
            }
            100% {
                transform: translateX(100%) rotate(5deg);
                opacity: 0;
            }
        }

        @keyframes slideInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes fadeInScale {
            from {
                opacity: 0;
                transform: scale(0.9);
            }
            to {
                opacity: 1;
                transform: scale(1);
            }
        }

        /* Card Animation on Scroll */
        .card {
            animation: fadeInScale 0.6s ease-out both;
        }

        .card:nth-child(1) { animation-delay: 0.1s; }
        .card:nth-child(2) { animation-delay: 0.2s; }
        .card:nth-child(3) { animation-delay: 0.3s; }
        .card:nth-child(4) { animation-delay: 0.4s; }
        .card:nth-child(5) { animation-delay: 0.5s; }

        /* Responsive Design */
        @media screen and (max-width: 1200px) {
            #cards {
                grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
                gap: var(--space-2xl);
            }
        }

        @media screen and (max-width: 768px) {
            #top-services {
                min-height: 60vh;
                padding: var(--space-4xl) var(--space-lg);
            }

            #services-cards {
                padding: var(--space-4xl) var(--space-lg);
            }

            #cards {
                grid-template-columns: 1fr;
                gap: var(--space-2xl);
            }

            .card {
                padding: var(--space-2xl) var(--space-xl);
            }

            .card img {
                width: 70px;
                height: 70px;
            }
        }

        @media screen and (max-width: 480px) {
            #top-services {
                min-height: 50vh;
                padding: var(--space-3xl) var(--space-md);
            }

            #services-cards {
                padding: var(--space-3xl) var(--space-md);
            }

            .card {
                padding: var(--space-xl) var(--space-lg);
            }

            .card img {
                width: 60px;
                height: 60px;
            }
        }

        /* Additional Responsive Enhancements */
        @media screen and (max-width: 1024px) {
            #top-h1 {
                font-size: clamp(1.25rem, 3vw, 1.875rem);
            }
        }





                 /* Legacy Mobile Menu Styles (Preserved for compatibility) */
         #more-list{
             display: none;
             flex-direction: column;
             align-items: center;
             justify-content: center;
             position: fixed;
             background: 
                 linear-gradient(135deg, rgba(0, 0, 0, 0.95) 0%, rgba(30, 58, 82, 0.95) 100%);
             backdrop-filter: blur(20px);
             width: 100%;
             right: 0px;
             top: 75px;
             z-index: 1000;
             border-radius: var(--radius-lg);
             border: 1px solid rgba(255, 255, 255, 0.1);
             box-shadow: var(--shadow-2xl);
         }

         #more-list a{
             text-decoration: none;
             color: var(--neutral-200);
             padding: var(--space-md) var(--space-lg);
             transition: all var(--transition-normal);
             border-radius: var(--radius-md);
             margin: var(--space-xs);
         }

         #more-list a:hover {
             color: white;
             background: rgba(242, 170, 82, 0.2);
         }

         /* 🌙 Beautiful Dark Mode Styles */
         .dark {
             /* Dark Mode Color Overrides */
             --primary-50: #0a0a0a;
             --primary-100: #1a1a1a;
             --primary-200: #2d2d2d;
             --primary-300: #404040;
             --primary-400: #525252;
             --primary-500: #737373;
             --primary-600: #a3a3a3;
             --primary-700: #d4d4d4;
             --primary-800: #e5e5e5;
             --primary-900: #f5f5f5;

             --secondary-50: #0a0a0a;
             --secondary-100: #1a1a1a;
             --secondary-200: #2d2d2d;
             --secondary-300: #404040;
             --secondary-400: #FFB400;
             --secondary-500: #FFB400;
             --secondary-600: #FFB400;
             --secondary-700: #FFB400;
             --secondary-800: #FFB400;
             --secondary-900: #FFB400;

             --neutral-50: #0a0a0a;
             --neutral-100: #1a1a1a;
             --neutral-200: #2d2d2d;
             --neutral-300: #404040;
             --neutral-400: #525252;
             --neutral-500: #737373;
             --neutral-600: #a3a3a3;
             --neutral-700: #d4d4d4;
             --neutral-800: #e5e5e5;
             --neutral-900: #f5f5f5;

             --brand-primary: #A970FF;
             --brand-accent: #FFB400;
             --brand-light: #2A2A2A;

             /* Dark Mode Gradients */
             --gradient-primary: linear-gradient(135deg, #A970FF 0%, #FFB400 100%);
             --gradient-secondary: linear-gradient(135deg, #FFB400 0%, #A970FF 100%);
             --gradient-brand: linear-gradient(135deg, #A970FF 0%, #FFB400 50%, #A970FF 100%);
             --gradient-hero: linear-gradient(135deg, #A970FF 0%, #FFB400 50%, #A970FF 100%);

             /* Dark Mode Shadows */
             --shadow-xs: 0 1px 2px 0 rgba(169, 112, 255, 0.1);
             --shadow-sm: 0 1px 3px 0 rgba(169, 112, 255, 0.15), 0 1px 2px -1px rgba(169, 112, 255, 0.1);
             --shadow-md: 0 4px 6px -1px rgba(169, 112, 255, 0.2), 0 2px 4px -2px rgba(169, 112, 255, 0.15);
             --shadow-lg: 0 10px 15px -3px rgba(169, 112, 255, 0.25), 0 4px 6px -4px rgba(169, 112, 255, 0.2);
             --shadow-xl: 0 20px 25px -5px rgba(169, 112, 255, 0.3), 0 8px 10px -6px rgba(169, 112, 255, 0.25);
             --shadow-2xl: 0 25px 50px -12px rgba(169, 112, 255, 0.4);
         }

         /* Dark Mode Body */
         .dark body {
             background: 
                 linear-gradient(135deg, #1A1A1A 0%, #202020 100%),
                 radial-gradient(circle at 20% 80%, rgba(169, 112, 255, 0.1) 0%, transparent 50%),
                 radial-gradient(circle at 80% 20%, rgba(255, 180, 0, 0.05) 0%, transparent 50%);
             color: #F2F2F2;
         }

         .dark body::before {
             background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="darkBodyPattern" width="40" height="40" patternUnits="userSpaceOnUse"><circle cx="20" cy="20" r="1" fill="rgba(169,112,255,0.03)"/><circle cx="10" cy="30" r="0.5" fill="rgba(255,180,0,0.04)"/><circle cx="30" cy="10" r="0.8" fill="rgba(169,112,255,0.02)"/></pattern></defs><rect width="100" height="100" fill="url(%23darkBodyPattern)"/></svg>');
         }

         /* Dark Mode Hero Section */
         .dark #top-services {
             background: 
                 var(--gradient-hero),
                 radial-gradient(circle at 30% 70%, rgba(169, 112, 255, 0.15) 0%, transparent 50%),
                 radial-gradient(circle at 70% 30%, rgba(255, 180, 0, 0.1) 0%, transparent 50%);
         }

         .dark #top-services::before {
             background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="darkHeroPattern" width="50" height="50" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="2" fill="white" opacity="0.05"/><circle cx="10" cy="40" r="1" fill="white" opacity="0.03"/><circle cx="40" cy="10" r="1.5" fill="white" opacity="0.04"/><polygon points="20,20 22,18 24,20 22,22" fill="rgba(169,112,255,0.08)"/></pattern></defs><rect width="100" height="100" fill="url(%23darkHeroPattern)"/></svg>');
         }

         .dark #top-services::after {
             background: linear-gradient(90deg, 
                 transparent 0%, 
                 rgba(169, 112, 255, 0.5) 25%, 
                 rgba(255, 180, 0, 0.3) 50%, 
                 rgba(169, 112, 255, 0.5) 75%, 
                 transparent 100%);
             box-shadow: 0 1px 10px rgba(169, 112, 255, 0.3);
         }

         .dark #top-text h5 {
             color: rgba(255, 255, 255, 0.8);
         }

         .dark #top-h1 {
             background: linear-gradient(135deg, white 0%, #F2F2F2 50%, #A970FF 100%);
             -webkit-background-clip: text;
             -webkit-text-fill-color: transparent;
             background-clip: text;
             text-shadow: 0 0 30px rgba(169, 112, 255, 0.3);
         }

         .dark #top-h1::after {
             background: var(--gradient-secondary);
             box-shadow: 0 2px 10px rgba(169, 112, 255, 0.4);
         }

         .dark #top-text p {
             color: rgba(255, 255, 255, 0.9);
         }

         /* Dark Mode Services Cards Section */
         .dark #services-cards {
             background: 
                 linear-gradient(135deg, #1A1A1A 0%, #202020 100%);
         }

         .dark #services-cards::before {
             background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="darkCardsPattern" width="60" height="60" patternUnits="userSpaceOnUse"><circle cx="30" cy="30" r="1" fill="rgba(169,112,255,0.02)"/><circle cx="15" cy="45" r="0.5" fill="rgba(255,180,0,0.03)"/><circle cx="45" cy="15" r="0.8" fill="rgba(169,112,255,0.02)"/></pattern></defs><rect width="100" height="100" fill="url(%23darkCardsPattern)"/></svg>');
         }

         /* Dark Mode Cards */
         .dark .card {
             background: 
                 rgba(42, 42, 42, 0.7),
                 linear-gradient(135deg, rgba(42, 42, 42, 0.9) 0%, rgba(26, 26, 26, 0.8) 100%);
             backdrop-filter: blur(20px);
             border: 1px solid rgba(169, 112, 255, 0.2);
             box-shadow: var(--shadow-lg);
             color: #F2F2F2;
         }

         .dark .card::before {
             background: var(--gradient-secondary);
         }

         .dark .card::after {
             background: radial-gradient(circle, rgba(169, 112, 255, 0.1) 0%, transparent 70%);
         }

         .dark .card:hover {
             transform: translateY(-8px) scale(1.02);
             box-shadow: var(--shadow-2xl);
             border-color: rgba(169, 112, 255, 0.4);
             background: 
                 rgba(42, 42, 42, 0.9),
                 linear-gradient(135deg, rgba(42, 42, 42, 0.95) 0%, rgba(26, 26, 26, 0.9) 100%);
         }

                 .dark .card img {
            box-shadow: var(--shadow-md);
            background: rgba(255, 255, 255, 0.95);
        }

         .dark .card:hover img {
             box-shadow: var(--shadow-lg);
         }

         .dark .card h4 {
             background: linear-gradient(135deg, #A970FF 0%, #FFB400 100%);
             -webkit-background-clip: text;
             -webkit-text-fill-color: transparent;
             background-clip: text;
             text-shadow: 0 2px 8px rgba(169, 112, 255, 0.3);
         }

         .dark .card h5 {
             color: #FFB400;
             text-shadow: 0 2px 8px rgba(255, 180, 0, 0.3);
         }

         .dark .card h6 {
             background: linear-gradient(135deg, #A970FF 0%, #FFB400 50%, #A970FF 100%);
             border: 1px solid rgba(169, 112, 255, 0.4);
             color: #ffffff;
             text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
             box-shadow: 0 4px 12px rgba(169, 112, 255, 0.3);
         }

         .dark .card p {
             color: #E0E0E0;
             font-weight: 500;
             text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
         }

         .dark .card p::before {
             background: var(--gradient-secondary);
         }

         /* Dark Mode Mobile Menu */
         .dark #more-list {
             background: 
                 linear-gradient(135deg, rgba(26, 26, 26, 0.95) 0%, rgba(42, 42, 42, 0.95) 100%);
             border: 1px solid rgba(169, 112, 255, 0.2);
             box-shadow: var(--shadow-2xl);
         }

         .dark #more-list a {
             color: #F2F2F2;
             background: rgba(42, 42, 42, 0.9);
             border: 1px solid rgba(169, 112, 255, 0.2);
             box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
         }

         .dark #more-list a:hover {
             background: linear-gradient(135deg, #A970FF 0%, #FFB400 50%, #A970FF 100%);
             color: #ffffff;
             box-shadow: 0 8px 20px rgba(169, 112, 255, 0.4);
             transform: translateY(-2px);
         }