:root {
            --off-white: #FAFAFA;
            --light-gray: #F3F4F6;
            --charcoal: #111827;
            --coral: #FF6B6B;
            --ocean: #3B82F6;
            --gold: #FFD700;
        }

        body {
            background-color: var(--off-white);
            color: var(--charcoal);
            font-family: 'Lato', sans-serif;
            scroll-behavior: smooth;
            -webkit-font-smoothing: antialiased;
        }

        h1, h2, h3, h4, .font-heading { font-family: 'Montserrat', sans-serif; }

        .page { display: none; opacity: 0; transform: translateY(10px); transition: all 0.5s ease; }
        .page.active { display: block; opacity: 1; transform: translateY(0); }

        .btn-coral {
            background-color: var(--coral);
            color: white;
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            box-shadow: 0 4px 15px rgba(255, 107, 107, 0.2);
        }
        .btn-coral:hover {
            transform: translateY(-3px) scale(1.02);
            box-shadow: 0 12px 30px rgba(255, 107, 107, 0.4);
        }

        .glass-panel {
            background: rgba(255, 255, 255, 0.7);
            backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 255, 255, 0.3);
        }

        /* Memory Game Styles */
        .memory-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 12px;
        }
        @media (max-width: 640px) { .memory-grid { grid-template-columns: repeat(3, 1fr); } }

        .card {
            aspect-ratio: 1;
            cursor: pointer;
            perspective: 1000px;
        }
        .card-inner {
            position: relative;
            width: 100%;
            height: 100%;
            text-align: center;
            transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
            transform-style: preserve-3d;
        }
        .card.flipped .card-inner { transform: rotateY(180deg); }
        .card-front, .card-back {
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 16px;
            font-size: 2rem;
            box-shadow: 0 4px 10px rgba(0,0,0,0.05);
        }
        .card-front { background: white; border: 2px solid var(--light-gray); }
        .card-back { background: var(--ocean); color: white; transform: rotateY(180deg); }

        /* Custom Scrollbar */
        ::-webkit-scrollbar { width: 6px; }
        ::-webkit-scrollbar-track { background: var(--off-white); }
        ::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 10px; }
        ::-webkit-scrollbar-thumb:hover { background: var(--coral); }

        /* Parallax & Image Hover */
        .reveal-img { transition: transform 1.2s cubic-bezier(0, 0, 0.2, 1); }
        .reveal-container:hover .reveal-img { transform: scale(1.08); }

        /* Mobile Menu */
        #mobile-menu {
            transition: transform 0.5s cubic-bezier(0.77, 0, 0.175, 1);
        }