:root {
            --primary: #5B532C;
            --soft-green: #B0CE88;
            --fresh-green: #CBF3BB;
            --mint: #ABE7B2;
            --dark-olive: #3d371d;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="%23ABE7B2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/></svg>'), auto;
        }

        body {
            font-family: 'Lexend Exa', sans-serif;
            background-color: var(--primary);
            color: var(--fresh-green);
            overflow-x: hidden;
            letter-spacing: 0.08em;
            scroll-behavior: smooth;
        }

        /* ATMOSPHERIC BACKGROUND */
        .ambient-bg {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            background: linear-gradient(180deg, var(--primary) 0%, var(--dark-olive) 100%);
        }

        .bg-glow {
            position: absolute;
            width: 150vw;
            height: 150vh;
            background: radial-gradient(circle, rgba(171, 231, 178, 0.08) 0%, transparent 70%);
            animation: moveGlow 20s infinite alternate ease-in-out;
            pointer-events: none;
        }

        @keyframes moveGlow {
            0% { transform: translate(-20%, -20%); }
            100% { transform: translate(10%, 10%); }
        }

        /* THE BREATHING CORE */
        .breath-circle-container {
            position: relative;
            width: 400px;
            height: 400px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .breath-orb {
            position: absolute;
            border-radius: 50%;
            background: var(--mint);
            filter: blur(40px);
            opacity: 0.15;
            animation: breatheOrb 8s infinite ease-in-out;
        }

        @keyframes breatheOrb {
            0%, 100% { width: 200px; height: 200px; opacity: 0.1; }
            50% { width: 380px; height: 380px; opacity: 0.3; }
        }

        .breath-label {
            z-index: 10;
            font-size: 0.7rem;
            font-weight: 300;
            text-transform: uppercase;
            letter-spacing: 0.5em;
            color: var(--mint);
            animation: labelText 8s infinite ease-in-out;
        }

        @keyframes labelText {
            0%, 40%, 100% { content: "Inhale"; opacity: 0.5; transform: scale(0.9); }
            50%, 90% { content: "Exhale"; opacity: 1; transform: scale(1.1); }
        }

        /* SECTION ANIMATIONS */
        .reveal {
            opacity: 0;
            transform: translateY(50px) scale(0.98);
            transition: all 1.5s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .reveal.active {
            opacity: 1;
            transform: translateY(0) scale(1);
        }

        /* NAVIGATION */
        header {
            transition: background 0.5s ease;
        }

        .nav-link {
            font-size: 0.65rem;
            text-transform: uppercase;
            letter-spacing: 0.3em;
            position: relative;
            padding-bottom: 4px;
        }

        .nav-link::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0;
            height: 1px;
            background: var(--mint);
            transition: width 0.4s ease;
        }

        .nav-link:hover::after {
            width: 100%;
        }

        /* CUSTOM BUTTON */
        .btn-wise {
            padding: 18px 45px;
            border: 1px solid rgba(171, 231, 178, 0.4);
            border-radius: 100px;
            color: var(--mint);
            background: transparent;
            font-size: 0.75rem;
            text-transform: uppercase;
            letter-spacing: 0.3em;
            transition: all 0.6s ease;
            position: relative;
            overflow: hidden;
            display: inline-block;
        }

        .btn-wise:hover {
            background: var(--mint);
            color: var(--primary);
            box-shadow: 0 0 40px rgba(171, 231, 178, 0.2);
            transform: translateY(-3px);
        }

        /* IMAGE CARDS */
        .image-container {
            overflow: hidden;
            border-radius: 30px;
            position: relative;
        }

        .image-container img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            filter: grayscale(40%) contrast(90%);
            transition: transform 2s ease, filter 1s ease;
        }

        .image-container:hover img {
            transform: scale(1.1);
            filter: grayscale(0%) contrast(100%);
        }

        /* MODAL */
        #modal-overlay {
            position: fixed;
            inset: 0;
            background: rgba(45, 41, 22, 0.98);
            z-index: 500;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.8s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }

        #modal-overlay.active {
            opacity: 1;
            pointer-events: auto;
        }

        .modal-content {
            width: 100%;
            max-width: 900px;
            background: var(--primary);
            border-radius: 50px;
            padding: 60px;
            border: 1px solid rgba(255, 255, 255, 0.05);
            max-height: 90vh;
            overflow-y: auto;
        }

        /* FLOATING CLUSTERS */
        .cluster-item {
            animation: float 6s infinite ease-in-out;
        }

        @keyframes float {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-20px); }
        }

        /* HAMBURGER */
        #mobile-menu {
            transform: translateX(100%);
            transition: transform 0.6s cubic-bezier(0.7, 0, 0.3, 1);
        }
        #mobile-menu.active { transform: translateX(0); }

        ::-webkit-scrollbar { width: 5px; }
        ::-webkit-scrollbar-track { background: var(--primary); }
        ::-webkit-scrollbar-thumb { background: var(--soft-green); border-radius: 10px; }