:root {
            --color-dark-green: #283325;
            --color-medium-green: #2c6853;
            --color-muted-red: #af485a;
            --color-light-red: #d68885;
            --color-peach: #f9c8bc;
            --font-main: 'Inter', sans-serif;
        }

        body {
            font-family: var(--font-main);
            background-color: var(--color-peach);
            color: var(--color-dark-green);
            overflow-x: hidden; 
        }

        
        .bg-dark-green { background-color: var(--color-dark-green); }
        .bg-medium-green { background-color: var(--color-medium-green); }
        .bg-muted-red { background-color: var(--color-muted-red); }
        .bg-light-red { background-color: var(--color-light-red); }
        .bg-peach { background-color: var(--color-peach); }

        .text-dark-green { color: var(--color-dark-green); }
        .text-medium-green { color: var(--color-medium-green); }
        .text-muted-red { color: var(--color-muted-red); }
        .text-light-red { color: var(--color-light-red); }
        .text-peach { color: var(--color-peach); }

        

        
        .parallax-container {
            position: relative;
            overflow: hidden;
            z-index: 1;
        }

        
        .parallax-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 150%; 
            object-fit: cover;
            z-index: -1;
            will-change: transform;
        }

        
        .reveal-on-scroll {
            opacity: 0;
            transform: translateY(40px);
            transition: opacity 0.8s cubic-bezier(0.165, 0.84, 0.44, 1), transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
            transition-delay: 0.1s;
        }

        .reveal-on-scroll.is-visible {
            opacity: 1;
            transform: translateY(0);
        }

        
        #burger-btn {
            width: 30px;
            height: 22px;
            position: relative;
            transform: rotate(0deg);
            transition: .5s ease-in-out;
            cursor: pointer;
        }

        #burger-btn span {
            display: block;
            position: absolute;
            height: 3px;
            width: 100%;
            background: var(--color-dark-green);
            border-radius: 3px;
            opacity: 1;
            left: 0;
            transform: rotate(0deg);
            transition: .25s ease-in-out;
        }

        #burger-btn span:nth-child(1) { top: 0px; }
        #burger-btn span:nth-child(2), #burger-btn span:nth-child(3) { top: 9px; }
        #burger-btn span:nth-child(4) { top: 18px; }

        #burger-btn.open span:nth-child(1), #burger-btn.open span:nth-child(4) {
            top: 9px;
            width: 0%;
            left: 50%;
        }
        #burger-btn.open span:nth-child(2) { transform: rotate(45deg); }
        #burger-btn.open span:nth-child(3) { transform: rotate(-45deg); }
        
        
        #burger-btn.open span { background: var(--color-peach); }

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

        #mobile-menu.open {
            transform: translateX(0);
        }

        

        
        .decorative-line::before {
            content: '';
            position: absolute;
            top: 0;
            left: -30px;
            width: 3px;
            height: 100%;
            background-color: var(--color-light-red);
        }

        
        .watermark-text::after {
            content: 'UX/UI';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) rotate(-10deg);
            font-size: 18rem; 
            font-weight: 800;
            color: var(--color-peach);
            opacity: 0.3;
            z-index: -1;
            white-space: nowrap;
        }

        
        .stepper-item:not(:last-child) .stepper-content::after {
            content: '';
            position: absolute;
            left: 24px; 
            top: 60px; 
            bottom: -80px; 
            width: 2px;
            background-color: var(--color-light-red);
            opacity: 0.5;
        }
        
        
        .stepper-dot {
            width: 50px;
            height: 50px;
            border: 3px solid var(--color-light-red);
            background-color: var(--color-peach);
            color: var(--color-muted-red);
        }
        .is-visible .stepper-dot {
            background-color: var(--color-light-red);
            color: var(--color-dark-green);
            transition: all 0.5s;
        }

        
        .usp-grid-container {
            display: grid;
            grid-template-columns: repeat(12, 1fr);
            grid-template-rows: repeat(8, auto);
            gap: 1rem;
        }

        
        .usp-main-text { grid-area: 2 / 2 / 5 / 8; }
        .usp-callout-1 { grid-area: 1 / 7 / 3 / 12; }
        .usp-callout-2 { grid-area: 5 / 1 / 7 / 6; }
        .usp-callout-3 { grid-area: 6 / 8 / 8 / 12; }

        @media (max-width: 768px) {
            .usp-grid-container {
                display: flex;
                flex-direction: column;
            }
            .usp-main-text, .usp-callout-1, .usp-callout-2, .usp-callout-3 {
                grid-area: auto; 
            }
            
            .watermark-text::after { font-size: 8rem; }
            .stepper-item:not(:last-child) .stepper-content::after { bottom: -40px; }
        }

        
        #notification-box {
            position: fixed;
            bottom: -100px;
            left: 50%;
            transform: translateX(-50%);
            transition: bottom 0.5s ease-in-out;
            z-index: 100;
        }
        #notification-box.show {
            bottom: 30px;
        }