:root {
            --color1: #8e6757;
            --color2: #9f8f7f;
            --color3: #005f67;
            --color4: #568d84;
            --color5: #a5bcaf;
        }
        
        .color1 { color: var(--color1); }
        .color2 { color: var(--color2); }
        .color3 { color: var(--color3); }
        .color4 { color: var(--color4); }
        .color5 { color: var(--color5); }
        
        .bg-color1 { background-color: var(--color1); }
        .bg-color2 { background-color: var(--color2); }
        .bg-color3 { background-color: var(--color3); }
        .bg-color4 { background-color: var(--color4); }
        .bg-color5 { background-color: var(--color5); }
        
        .border-color1 { border-color: var(--color1); }
        .border-color3 { border-color: var(--color3); }
        .border-color4 { border-color: var(--color4); }
        
        .parallax-container {
            overflow: hidden;
            position: relative;
        }
        
        .parallax-layer {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        }
        
        .floating-element {
            animation: float 6s ease-in-out infinite;
        }
        
        .floating-delayed {
            animation: float 6s ease-in-out infinite;
            animation-delay: -2s;
        }
        
        @keyframes float {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-20px); }
        }
        
        .fade-in-up {
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.8s ease-out;
        }
        
        .fade-in-up.visible {
            opacity: 1;
            transform: translateY(0);
        }
        
        .slide-in-left {
            opacity: 0;
            transform: translateX(-50px);
            transition: all 1s ease-out;
        }
        
        .slide-in-left.visible {
            opacity: 1;
            transform: translateX(0);
        }
        
        .slide-in-right {
            opacity: 0;
            transform: translateX(50px);
            transition: all 1s ease-out;
        }
        
        .slide-in-right.visible {
            opacity: 1;
            transform: translateX(0);
        }
        
        .geometric-bg {
            background-image: 
                radial-gradient(circle at 25% 25%, var(--color5) 2px, transparent 2px),
                radial-gradient(circle at 75% 75%, var(--color4) 2px, transparent 2px);
            background-size: 40px 40px;
        }
        
        .zen-pattern {
            background-image: 
                linear-gradient(45deg, transparent 30%, var(--color5) 30%, var(--color5) 32%, transparent 32%),
                linear-gradient(-45deg, transparent 30%, var(--color4) 30%, var(--color4) 32%, transparent 32%);
            background-size: 60px 60px;
        }
        
        .organic-shapes::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle at 30% 70%, var(--color5) 0%, transparent 50%),
                        radial-gradient(circle at 70% 30%, var(--color4) 0%, transparent 40%);
            opacity: 0.1;
            pointer-events: none;
        }
        
        .text-shadow {
            text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
        }
        
        .notification {
            transform: translateY(-100px);
            opacity: 0;
            transition: all 0.5s ease-out;
        }
        
        .notification.show {
            transform: translateY(0);
            opacity: 1;
        }
        
        .btn-hover-effect {
            position: relative;
            overflow: hidden;
            transition: all 0.3s ease;
        }
        
        .btn-hover-effect::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
            transition: left 0.5s ease;
        }
        
        .btn-hover-effect:hover::before {
            left: 100%;
        }
        
        .decorative-corner {
            position: relative;
        }
        
        .decorative-corner::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100px;
            height: 100px;
            border-top: 3px solid var(--color4);
            border-left: 3px solid var(--color4);
        }
        
        .decorative-corner::after {
            content: '';
            position: absolute;
            bottom: 0;
            right: 0;
            width: 100px;
            height: 100px;
            border-bottom: 3px solid var(--color4);
            border-right: 3px solid var(--color4);
        }
        
        @media (max-width: 768px) {
            .decorative-corner::before,
            .decorative-corner::after {
                width: 50px;
                height: 50px;
            }
        }
        
        .image-mask {
            clip-path: polygon(20% 0%, 100% 0%, 80% 100%, 0% 100%);
        }
        
        .wavy-divider {
            height: 100px;
            background: url("data:image/svg+xml,%3Csvg width='100' height='20' viewBox='0 0 100 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 10c20 0 20-10 40-10s20 10 40 10 20-10 40-10 20 10 40 10v10H0V10z' fill='%23a5bcaf'/%3E%3C/svg%3E") repeat-x;
            background-size: 100px 20px;
        }