:root {
            --mint-green: #DDEB9D;
            --teal: #9A7E6F;
            --cream: #e1f684;
            --neutral: #efd9a4;
            --brown: #83553c;
            --black: #9e6161;
        }

        * { scroll-behavior: smooth; }
        body { font-family: 'Inter', sans-serif; background-color: var(--mint-green); color: var(--black); overflow-x: hidden; }
        .font-bebas { font-family: 'Bebas Neue', sans-serif; }

        /* Custom Header Behavior */
        #main-header { transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
        #main-header.scrolled { background-color: var(--cream); padding: 1rem 0; box-shadow: 0 10px 40px rgba(0,0,0,0.1); }

        /* Typography Animations */
        .line-reveal { overflow: hidden; display: block; }
        .line-reveal span { display: block; transform: translateY(100%); transition: transform 1.2s cubic-bezier(0.19, 1, 0.22, 1); }
        .line-reveal.active span { transform: translateY(0); }

        /* Floating Shapes */
        .shape { position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.15; z-index: 1; animation: float 15s infinite alternate ease-in-out; }
        @keyframes float { 0% { transform: translate(0,0) rotate(0deg); } 100% { transform: translate(50px, 100px) rotate(20deg); } }

        /* Card Effects */
        .card-reveal { opacity: 0; transform: translateY(50px); transition: all 0.8s ease-out; }
        .card-reveal.active { opacity: 1; transform: translateY(0); }
        .service-card { transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); cursor: pointer; border: 1px solid transparent; }
        .service-card:hover { transform: translateY(-15px) rotate(1deg); border-color: var(--teal); box-shadow: 0 30px 60px rgba(101, 146, 135, 0.2); }

        /* Modals */
        .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.9); backdrop-filter: blur(10px); z-index: 9999; display: none; align-items: center; justify-content: center; padding: 20px; }
        .modal-content { max-height: 90vh; overflow-y: auto; background: var(--neutral); border-radius: 40px; }

        /* Custom Scrollbar */
        ::-webkit-scrollbar { width: 10px; }
        ::-webkit-scrollbar-track { background: var(--cream); }
        ::-webkit-scrollbar-thumb { background: var(--teal); border-radius: 5px; }

        /* Filter Tabs */
        .filter-btn.active { background-color: var(--teal); color: white; transform: scale(1.1); }
        
        .bg-hero {
            background: linear-gradient(rgba(211, 241, 223, 0.8), rgba(211, 241, 223, 0.8)), url('https://images.unsplash.com/photo-1554224155-8d04cb21cd6c?auto=format&fit=crop&w=1920&q=80');
            background-size: cover;
            background-position: center;
            background-attachment: fixed;
        }