:root {
            --primary-dark: #41431B;
            --soft-cream: #FFFBF1;
            --warm-cream: #FFF2D0;
            --white: #FFFFFF;
            --transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1);
        }

        * { margin: 0; padding: 0; box-sizing: border-box; }
        
        body {
            font-family: 'Nunito', sans-serif;
            background: var(--soft-cream);
            color: var(--primary-dark);
            overflow-x: hidden;
            scroll-behavior: smooth;
        }

        .quick-popup{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.8);
display:flex;
align-items:center;
justify-content:center;
z-index:9999;
}

.popup-content{
background:white;
max-width:700px;
padding:40px;
border-radius:20px;
overflow-y:auto;
max-height:80vh;
}


        /* --- Buttons --- */
        .btn-dark {
            background: var(--primary-dark);
            color: var(--white);
            padding: 18px 40px;
            border: none;
            border-radius: 60px;
            font-weight: 700;
            cursor: pointer;
            transition: var(--transition);
            text-decoration: none;
            display: inline-block;
        }
        .btn-dark:hover { transform: translateY(-5px); box-shadow: 0 15px 30px rgba(65, 67, 27, 0.2); }

        .btn-warm {
            background: var(--warm-cream);
            color: var(--primary-dark);
            padding: 15px 35px;
            border: none;
            border-radius: 60px;
            font-weight: 700;
            cursor: pointer;
            transition: var(--transition);
        }
        .btn-warm:hover { border: #f0e2b8; transform: translateY(-3px); }
                .btn-outline {
            border: var(--warm-cream);
            color: var(--primary-dark);
            padding: 15px 35px;
            border: none;
            border-radius: 60px;
            font-weight: 700;
            cursor: pointer;
            transition: var(--transition);
        }
        .btn-outline:hover { border: #f0e2b8; transform: translateY(-3px); }


        /* --- Floating Header --- */
        header {
            position: fixed; top: 30px; left: 50%; transform: translateX(-50%);
            width: 90%; max-width: 1200px; z-index: 1000;
            background: var(--soft-cream);
            padding: 15px 40px;
            display: flex; align-items: center; justify-content: space-between;
            border-radius: 100px;
            box-shadow: 0 10px 40px rgba(0,0,0,0.08);
            transition: var(--transition);
        }
        header.scrolled { top: 15px; box-shadow: 0 5px 20px rgba(0,0,0,0.12); }

.logo {
font-size: 1.8rem;
font-weight: 800;
color: var(--primary-dark);
cursor: pointer;
display: flex;
align-items: center;
gap: 10px;
}

.logo img{
height: 40px;
width: auto;
}
        nav { display: flex; gap: 30px; }
        nav a { text-decoration: none; color: var(--primary-dark); font-weight: 700; cursor: pointer; font-size: 0.95rem; }
        
        /* --- Hero Section --- */
        .hero {
            height: 100vh; width: 100%; position: relative; overflow: hidden;
            display: flex; align-items: flex-end; padding: 0 8% 100px;
        }
        .hero-bg {
            position: absolute; inset: 0; z-index: -1;
            background: url('https://i.pinimg.com/736x/2f/e7/73/2fe7733787e8861f6aaf9721e0114518.jpg') center/cover no-repeat;
            animation: slowZoom 25s infinite alternate ease-in-out;
        }
        @keyframes slowZoom { from { transform: scale(1); } to { transform: scale(1.15); } }
        
        .hero-content {
            max-width: 650px; background: rgba(255, 251, 241, 0.85);
            padding: 50px; border-radius: 50px 50px 50px 0;
            backdrop-filter: blur(10px);
            animation: slideUpFade 1.2s forwards;
        }
        @keyframes slideUpFade { from { opacity:0; transform: translateY(40px); } to { opacity:1; transform: translateY(0); } }
        .hero-content h1 { font-size: 5.5rem; line-height: 0.8; margin-bottom: 25px; }
        .hero-content p { font-size: 1.2rem; line-height: 1.6; margin-bottom: 35px; opacity: 0.9; }

        /* --- Story Intro (Curved) --- */
        .story-intro {
            background: var(--warm-cream); padding: 150px 8%;
            border-radius: 100px 100px 0 0; margin-top: -80px; position: relative;
            display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 80px; align-items: center;
        }
        .story-text h2 { font-size: 4rem; margin-bottom: 30px; }
        .story-text p { font-size: 1.3rem; line-height: 1.8; opacity: 0.85; margin-bottom: 30px; }
        
        .card-stack { position: relative; height: 500px; }
        .organic-card {
            background: var(--white); padding: 25px; border-radius: 30px; width: 280px;
            position: absolute; box-shadow: 0 20px 40px rgba(0,0,0,0.05);
            transition: var(--transition);
        }
        .card-1 { top: 0; left: 0; transform: rotate(-5deg); }
        .card-2 { top: 120px; right: 0; transform: rotate(3deg); }
        .card-3 { bottom: 0; left: 40px; transform: rotate(-2deg); }
        .organic-card:hover { transform: scale(1.05) rotate(0deg); z-index: 5; box-shadow: 0 30px 60px rgba(0,0,0,0.1); }
        .organic-card i { color: var(--primary-dark); margin-bottom: 15px; }

        /* --- Wellness Path (Zig-Zag) --- */
        .wellness-path { padding: 120px 8%; background: var(--soft-cream); }
        .path-step { display: flex; align-items: center; margin-bottom: 150px; position: relative; }
        .path-step:nth-child(even) { flex-direction: row-reverse; text-align: right; }
        .step-content { width: 45%; padding: 40px; }
        .step-content h3 { font-size: 3.5rem; margin-bottom: 15px; }
        .step-image { width: 45%; height: 400px; border-radius: 50px; overflow: hidden; }
        .step-image img { width: 100%; height: 100%; object-fit: cover; }
        
        /* --- Featured Programs (Uneven) --- */
        .programs-section { background: var(--primary-dark); color: var(--white); padding: 120px 8%; border-radius: 100px; margin: 40px 20px; }
        .section-header { text-align: center; margin-bottom: 80px; }
        .section-header h2 { font-size: 5rem; color: var(--warm-cream); }
        
        .program-grid { display: flex; justify-content: center; gap: 40px; align-items: center; }
        .prog-card {
            background: var(--warm-cream); color: var(--primary-dark); padding: 45px;
            border-radius: 50px; width: 380px; transition: var(--transition);
        }
        .prog-card:nth-child(1) { transform: translateY(-40px); }
        .prog-card:nth-child(2) { transform: translateY(40px); }
        .prog-card:hover { transform: translateY(-10px) scale(1.02); }
        .prog-card h3 { font-size: 2.8rem; margin-bottom: 20px; }
        .prog-card p { margin-bottom: 30px; opacity: 0.8; line-height: 1.6; }

        /* --- Articles (Magazine Layout) --- */
        .articles-section { padding: 120px 8%; }
        .magazine-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 40px; }
        .article-main { background: var(--white); border-radius: 50px; padding: 50px; box-shadow: 0 10px 30px rgba(0,0,0,0.03); }
        .article-side { display: flex; flex-direction: column; gap: 30px; }
        .article-side-card { background: var(--white); padding: 30px; border-radius: 40px; display: flex; gap: 20px; align-items: center; }
        .article-side-img { width: 120px; height: 120px; border-radius: 20px; background: #eee; flex-shrink: 0; }

        /* --- Testimonials (Bubbles) --- */
        .testimonials { background: var(--warm-cream); padding: 150px 8%; text-align: center; position: relative; overflow: hidden; }
        .bubble-container { display: flex; justify-content: center; flex-wrap: wrap; gap: 30px; margin-top: 60px; }
        .bubble {
            background: var(--white); padding: 40px; border-radius: 50%; width: 300px; height: 300px;
            display: flex; flex-direction: column; align-items: center; justify-content: center;
            animation: float 6s infinite ease-in-out; box-shadow: 0 20px 40px rgba(0,0,0,0.05);
        }
        @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-20px); } }

        /* --- Auth Modal --- */
        .modal {
            position: fixed; inset: 0; background: rgba(65, 67, 27, 0.4);
            backdrop-filter: blur(8px); z-index: 2000; display: none; align-items: center; justify-content: center;
        }
        .auth-card {
            background: var(--soft-cream); padding: 60px; border-radius: 50px; width: 100%; max-width: 500px;
            box-shadow: 0 40px 80px rgba(0,0,0,0.2); position: relative;
        }
        .form-input { width: 100%; padding: 15px 25px; margin-bottom: 20px; border-radius: 30px; border: 1px solid #ddd; outline: none; font-family: inherit; }
        
        /* --- Quick View --- */
        .qv-modal {
            position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 3000; display: none; align-items: center; justify-content: center; padding: 20px;
        }
        .qv-content {
            background: var(--soft-cream); border-radius: 60px; max-width: 1000px; width: 100%; display: grid; grid-template-columns: 1fr 1fr;
            overflow: hidden; animation: zoomIn 0.5s forwards;
        }
        @keyframes zoomIn { from { transform: scale(0.9); opacity:0; } to { transform: scale(1); opacity:1; } }

        /* --- Footer --- */
        footer { background: var(--primary-dark); color: var(--white); padding: 100px 8% 40px; border-radius: 100px 100px 0 0; margin-top: 60px; }
        .footer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 60px; margin-bottom: 60px; }
        .footer-col h4 { font-size: 2rem; color: var(--warm-cream); margin-bottom: 20px; }
        .footer-col ul { list-style: none; }
        .footer-col li { margin-bottom: 12px; opacity: 0.7; cursor: pointer; transition: 0.3s; }
        .footer-col li:hover { opacity: 1; transform: translateX(5px); }

        /* --- Page Router Visibility --- */
        .page { display: none; animation: fadeIn 0.8s forwards; }
        .page.active { display: block; }
        @keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

        @media (max-width: 1024px) {
            .story-intro, .magazine-grid, .footer-grid, .program-grid, .qv-content { grid-template-columns: 1fr; display: block; }
            .path-step, .path-step:nth-child(even) { flex-direction: column; text-align: left; }
            .step-content, .step-image, .prog-card { width: 100%; margin-bottom: 40px; }
            .hero-content h1 { font-size: 4rem; }
        }

        .popup-overlay{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.8);
display:none;
align-items:center;
justify-content:center;
z-index:9999;
}

.popup-box{
background:#0b0b0b;
padding:40px;
width:420px;
max-width:90%;
border:1px solid #222;
color:white;
position:relative;
}

.popup-box input,
.popup-box select{
width:100%;
padding:12px;
margin-bottom:15px;
background:#000;
border:1px solid #333;
color:white;
}

.close-popup{
position:absolute;
top:10px;
right:10px;
background:none;
border:none;
color:white;
font-size:20px;
cursor:pointer;
}

/* MOBILE MENU BUTTON */
.menu-toggle{
display:none;
font-size:28px;
cursor:pointer;
}

/* TABLET */
@media (max-width:1024px){

header{
padding:12px 25px;
}

nav{
gap:20px;
}

}

/* MOBILE */
@media (max-width:768px){

header{
width:95%;
padding:12px 20px;
}

.menu-toggle{
display:block;
}

/* hide nav initially */
nav{
position:absolute;
top:80px;
left:0;
width:100%;
background:var(--soft-cream);
flex-direction:column;
align-items:center;
padding:30px 0;
gap:20px;
display:none;
border-radius:20px;
box-shadow:0 10px 30px rgba(0,0,0,0.1);
}

/* when active */
nav.active{
display:flex;
}

#user-actions{
display:none;
}

.logo{
font-size:1.5rem;
}

}