:root {
            --charcoal: #37353E;
            --neon-aqua: #00F7FF;
            --soft-yellow: #FEA405;
            --mint-bg: #EDFFF0;
            --sky: #8CE4FF;
            --white: #FFFFFF;
        }

        body {
            font-family: 'Commissioner', sans-serif;
            background-color: var(--mint-bg);
            color: black;
            overflow-x: hidden;
        }

        /* Motion UI Global System */
        .reveal { opacity: 0; transform: translateY(30px); transition: all 0.8s ease-out; }
        .reveal.active { opacity: 1; transform: translateY(0); }

        .neon-pulse { animation: neonPulse 2s infinite; }
        @keyframes neonPulse {
            0% { filter: drop-shadow(0 0 2px var(--neon-aqua)); }
            50% { filter: drop-shadow(0 0 10px var(--neon-aqua)); }
            100% { filter: drop-shadow(0 0 2px var(--neon-aqua)); }
        }

        .text-breath { animation: breath 4s ease-in-out infinite; }
        @keyframes breath {
            0%, 100% { opacity: 0.7; transform: scale(1); }
            50% { opacity: 1; transform: scale(1.02); }
        }

        .float-bounce { animation: floatBounce 6s ease-in-out infinite; }
        @keyframes floatBounce {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-15px); }
        }

        /* Glassmorphism */
        .glass {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        /* Custom Components */
        .sticky-header {
            position: sticky;
            top: 0;
            z-index: 1000;
            background-color: var(--charcoal);
            backdrop-filter: blur(10px);
            transition: all 0.3s;
        }

        .fixed-parallax {
            background-attachment: fixed;
            background-position: center;
            background-size: cover;
        }

        /* Hide Scrollbar but keep functionality */
        ::-webkit-scrollbar { width: 6px; }
        ::-webkit-scrollbar-track { background: var(--charcoal); }
        ::-webkit-scrollbar-thumb { background: var(--neon-aqua); border-radius: 10px; }

        .page-content { display: none; }
        .page-content.active { display: block; animation: fadeIn 0.5s ease-in-out; }
        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

        /* Custom Card Hover */
        .yoga-card-small {
            transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .yoga-card-small:hover {
            transform: translateY(-10px);
            z-index: 10;
        }