:root {
            --sage: #8DA18E;
            --dark-sage: #6b7d6c;
            --sand: #F5F2ED;
            --warm-white: #FAF9F6;
            --coral: #E89B86;
            --ink: #1A1A1A;
            --clay: #D4A373;
        }

        body {
            font-family: 'Inter', sans-serif;
            background-color: var(--sand);
            color: var(--ink);
            scroll-behavior: smooth;
            overflow-x: hidden;
        }

        .serif { font-family: 'Playfair Display', serif; }
        .ui-font { font-family: 'Manrope', sans-serif; }

        /* Smooth Section Transitions */
        .section-fade {
            opacity: 0;
            transform: translateY(40px);
            transition: all 1.2s cubic-bezier(0.215, 0.61, 0.355, 1);
        }
        .section-fade.visible {
            opacity: 1;
            transform: translateY(0);
        }

        /* Responsive Hero heights */
        .hero-height { height: 100vh; min-height: 600px; }

        /* Custom Cards */
        .glass-card {
            background: rgba(255, 255, 255, 0.7);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.3);
        }

        .hover-lift {
            transition: transform 0.4s ease, box-shadow 0.4s ease;
        }
        .hover-lift:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 40px rgba(0,0,0,0.05);
        }

        /* Page Management */
        .page { display: none; }
        .page.active { display: block; animation: pageIn 0.8s ease-out forwards; }
        @keyframes pageIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

        /* Navigation Styles */
        .nav-scrolled { background: rgba(250, 249, 246, 0.95); backdrop-filter: blur(10px); box-shadow: 0 2px 20px rgba(0,0,0,0.02); }
        
        /* Interactive Elements */
        .btn-luxe {
            position: relative;
            overflow: hidden;
            transition: all 0.4s ease;
        }
        .btn-luxe::after {
            content: '';
            position: absolute;
            bottom: 0; left: 0; width: 0%; height: 100%;
            background: var(--sage);
            z-index: -1;
            transition: width 0.4s ease;
        }
        .btn-luxe:hover::after { width: 100%; }
        .btn-luxe:hover { color: white; }

        /* Zen Game Canvas */
        #zenCanvas {
            max-width: 100%;
            height: auto;
            background: white;
            border-radius: 40px;
            cursor: crosshair;
        }

        /* Text Gradients */
        .text-gradient {
            background: linear-gradient(45deg, var(--ink), var(--sage));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }