body {
            box-sizing: border-box;
        }
        
        @keyframes fadeInUp {
            from { opacity: 0; transform: translateY(30px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        @keyframes slideIn {
            from { opacity: 0; transform: translateX(-50px); }
            to { opacity: 1; transform: translateX(0); }
        }
        
        @keyframes bounce {
            0%, 20%, 53%, 80%, 100% { transform: translateY(0); }
            40%, 43% { transform: translateY(-30px); }
            70% { transform: translateY(-15px); }
        }
        
        @keyframes pulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.05); }
        }
        
        @keyframes float {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-10px); }
        }
        
        @keyframes heroGlow {
            0%, 100% { 
                text-shadow: 0 0 20px rgba(255,255,255,0.5), 0 0 40px rgba(147,51,234,0.3);
                transform: scale(1);
            }
            50% { 
                text-shadow: 0 0 30px rgba(255,255,255,0.8), 0 0 60px rgba(147,51,234,0.5);
                transform: scale(1.02);
            }
        }
        
        @keyframes particleFloat {
            0% { transform: translateY(100vh) rotate(0deg); opacity: 0; }
            10% { opacity: 1; }
            90% { opacity: 1; }
            100% { transform: translateY(-100px) rotate(360deg); opacity: 0; }
        }
        
        @keyframes typewriter {
            from { width: 0; }
            to { width: 100%; }
        }
        
        @keyframes blink {
            50% { border-color: transparent; }
        }
        
        .animate-fadeInUp { animation: fadeInUp 0.8s ease-out; }
        .animate-slideIn { animation: slideIn 0.6s ease-out; }
        .animate-bounce-custom { animation: bounce 2s infinite; }
        .animate-pulse-custom { animation: pulse 2s infinite; }
        .animate-float { animation: float 3s ease-in-out infinite; }
        .animate-hero-glow { animation: heroGlow 3s ease-in-out infinite; }
        .animate-particle { animation: particleFloat 8s linear infinite; }
        
        .hero-style-image {
            position: absolute;
            animation: float 6s ease-in-out infinite;
            pointer-events: auto;
        }
        
        .hero-style-image:nth-child(2) { animation-delay: 1s; }
        .hero-style-image:nth-child(3) { animation-delay: 2s; }
        .hero-style-image:nth-child(4) { animation-delay: 3s; }
        .hero-style-image:nth-child(5) { animation-delay: 4s; }
        .hero-style-image:nth-child(6) { animation-delay: 5s; }
        
        .typewriter {
            overflow: hidden;
            border-right: 3px solid rgba(255,255,255,0.75);
            white-space: nowrap;
            animation: typewriter 3s steps(40, end), blink 0.75s step-end infinite;
        }
        
        .hero-particles {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            pointer-events: none;
        }
        
        .particle {
            position: absolute;
            width: 4px;
            height: 4px;
            background: rgba(255,255,255,0.6);
            border-radius: 50%;
        }
        
        .card-hover {
            transition: all 0.3s ease;
        }
        
        .card-hover:hover {
            transform: translateY(-10px) scale(1.02);
            box-shadow: 0 25px 50px rgba(0,0,0,0.15);
        }
        
        .page {
            display: none;
        }
        
        .page.active {
            display: block;
        }
        
        .gradient-bg {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        
        .glassmorphism {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        .hero-bg {
            background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url('https://images.unsplash.com/photo-1441986300917-64674bd600d8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80');
            background-size: cover;
            background-position: center;
        }
/* Mobile menu hidden by default */
#mobileMenu {
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease;
    max-height: 0;
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
}

/* Show mobile menu */
#mobileMenu.show {
    max-height: 500px; /* adjust based on content */
    opacity: 1;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

/* Mobile menu buttons */
#mobileMenu button {
    width: 100%;
    text-align: left;
    padding: 0.5rem 1rem;
    font-size: 1rem;
    color: #4B5563; /* gray-700 */
    background: none;
    border: none;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    border-radius: 0.375rem; /* rounded */
}

/* Hover effect */
#mobileMenu button:hover {
    background-color: #EDE9FE; /* light purple */
    color: #6B21A8; /* purple-800 */
}

/* Desktop menu buttons hover */
nav .md\\:flex button:hover {
    color: #6B21A8; /* purple */
    transition: color 0.2s;
}

/* Hamburger icon */
button i {
    font-size: 1.25rem;
    transition: transform 0.3s;
}

/* Optional: rotate icon when active */
button.active i {
    transform: rotate(90deg);
}