:root {
            --grass-deep: #1A3C2A;
            --emerald: #2D5A42;
            --sage: #A8B89F;
            --cream: #FAF9F6;
            --beige: #F2EDE4;
            --gold: #C5A059;
        }

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

        .serif { font-family: 'DM Serif Display', serif; }
        .playfair { font-family: 'Playfair Display', serif; }

        .nav-blur {
            background: rgba(250, 249, 246, 0.9);
            backdrop-filter: blur(20px);
            border-bottom: 1px solid rgba(26, 60, 42, 0.05);
        }

        .btn-golf {
            background-color: var(--grass-deep);
            color: white;
            transition: all 0.7s cubic-bezier(0.16, 1, 0.3, 1);
            letter-spacing: 0.15em;
            position: relative;
            overflow: hidden;
        }

        .btn-golf:hover {
            background-color: var(--emerald);
            transform: translateY(-3px);
            box-shadow: 0 15px 40px rgba(26, 60, 42, 0.15);
        }

        .reveal { 
            opacity: 0; 
            transform: translateY(40px); 
            transition: all 1.2s cubic-bezier(0.16, 1, 0.3, 1); 
        }
        .reveal.active { 
            opacity: 1; 
            transform: translateY(0); 
        }

        .plant-card:hover .card-img { transform: scale(1.1); }
        .card-img { transition: transform 2s cubic-bezier(0.16, 1, 0.3, 1); }

        .gold-stroke {
            height: 1px;
            background: linear-gradient(90deg, transparent, var(--gold), transparent);
            width: 100%;
        }

        .mask-top {
            mask-image: linear-gradient(to bottom, transparent, black 20%);
        }

        .filter-btn.active {
            background: var(--grass-deep);
            color: white;
            border-color: var(--grass-deep);
        }

        /* Mobile Adjustments */
        @media (max-width: 768px) {
            .hero-title { font-size: 3.5rem; line-height: 1; }
            .section-padding { padding-top: 5rem; padding-bottom: 5rem; }
        }

        .parallax-bg {
            background-attachment: fixed;
            background-position: center;
            background-size: cover;
        }
        
        @media (hover: none) {
            .parallax-bg { background-attachment: scroll; }
        }