/* Dark mode support */
        .dark {
            color-scheme: dark;
        }

        /* Smooth transitions */
        * {
            transition: background-color 0.3s ease, color 0.3s ease;
        }

        /* Header background */
        .header-bg {
            background: linear-gradient(to right, #10b981 0%, #059669 100%);
            position: relative;
            overflow: hidden;
        }

        .dark .header-bg {
            background: linear-gradient(to right, #065f46 0%, #064e3b 100%);
        }

        /* Animated background pattern */
        .header-bg::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background:
                radial-gradient(circle at 20% 50%, rgba(255,255,255,0.1) 0%, transparent 50%),
                radial-gradient(circle at 80% 50%, rgba(255,255,255,0.1) 0%, transparent 50%);
            animation: shimmer 8s ease-in-out infinite;
        }

        @keyframes shimmer {
            0%, 100% { opacity: 0.5; }
            50% { opacity: 1; }
        }

        /* Logo container with glassmorphism */
        .logo-container {
            background: rgba(255, 255, 255, 0.15);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        .dark .logo-container {
            background: rgba(0, 0, 0, 0.3);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        /* Menu animation */
        .mobile-menu {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease-out;
        }

        .mobile-menu.active {
            max-height: 500px;
            transition: max-height 0.5s ease-in;
        }

        /* Logo animation */
        @keyframes pulse-grow {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.05); }
        }

        .logo-animate {
            animation: pulse-grow 2s ease-in-out infinite;
        }

        /* Plant animation */
        @keyframes sway {
            0%, 100% { transform: rotate(-2deg); }
            50% { transform: rotate(2deg); }
        }

        .plant-icon {
            animation: sway 3s ease-in-out infinite;
            display: inline-block;
        }

        /* Online status indicator */
        @keyframes blink {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.3; }
        }

        .status-online {
            animation: blink 2s ease-in-out infinite;
        }

        /* Card hover effect */
        .service-card {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .service-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(93, 92, 222, 0.3);
        }

        .dark .service-card:hover {
            box-shadow: 0 10px 25px rgba(93, 92, 222, 0.5);
        }