/* ------------------- */
/* Design System & Global Styles */
/* ------------------- */
:root {
--green: #6DBE45;
--beige: #f5f5dc;
--dark-text: #333;
--light-text: #fff;
--white: #ffffff;
--shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
--font-primary: 'Poppins', sans-serif;
--font-secondary: 'Raleway', sans-serif;
--nav-height: 70px; /* Define nav height as a variable */
}

body {
        font-family: var(--font-primary);
        margin: 0;
        padding: 0;
        color: var(--dark-text);
        background-color: var(--white);
        scroll-behavior: smooth;
    }

    .container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 60px 20px;
    }

    h1, h2, h3 {
        font-family: var(--font-primary);
        font-weight: 700;
    }

    h2 {
        text-align: center;
        font-size: 2.5em;
        margin-bottom: 50px;
    }

    .button {
        display: inline-block;
        background-color: var(--green);
        color: var(--light-text);
        padding: 15px 30px;
        border-radius: 50px;
        text-decoration: none;
        font-weight: 600;
        transition: transform 0.3s ease, background-color 0.3s ease;
    }

    .button:hover {
        background-color: #58a83a;
        transform: translateY(-3px);
    }

    /* ------------------- */
    /* Navigation Bar */
    /* ------------------- */
    .navbar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: var(--nav-height);
        padding: 0 20px;
        background: var(--white);
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 1000;
        box-sizing: border-box;
    }
    
    .nav-logo {
        display: flex;
        align-items: center;
        text-decoration: none;
        color: var(--dark-text);
        font-weight: 700;
        font-size: 1.2em;
    }
    
    .nav-logo img {
        height: 40px;
        margin-right: 10px;
    }
    
    .nav-menu {
        list-style: none;
        display: flex;
        gap: 25px;
        margin: 0;
    }
    
    .nav-menu a {
        text-decoration: none;
        color: var(--dark-text);
        font-weight: 600;
        padding: 5px 0;
        position: relative;
        transition: color 0.3s;
    }
    
    .nav-menu a:hover {
        color: var(--green);
    }

    .nav-menu a::after {
        content: '';
        position: absolute;
        width: 0;
        height: 2px;
        bottom: 0;
        left: 0;
        background-color: var(--green);
        transition: width 0.3s;
    }
    
    .nav-menu a:hover::after {
        width: 100%;
    }

    .nav-toggler {
        display: none; /* Hidden on desktop */
        cursor: pointer;
        width: 30px;
        height: 22px;
        flex-direction: column;
        justify-content: space-between;
    }
    
    .nav-toggler span {
        display: block;
        width: 100%;
        height: 3px;
        background-color: var(--dark-text);
        border-radius: 3px;
        transition: all 0.3s;
    }


    /* ------------------- */
    /* Section 1: Hero */
    /* ------------------- */
    #hero {
		position: relative;
		color: var(--white);
		text-align: center;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding-top: var(--nav-height);
		height: 100vh;
		box-sizing: border-box;
		overflow: hidden;
	}

	#hero::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-image: url('https://images.unsplash.com/photo-1542838132-92c53300491e?q=80&w=1974&auto=format&fit=crop');
		background-size: cover;
		background-position: center;
		opacity: 0.5; /* 50% opacity */
		z-index: 0;
	}

	#hero > * {
		position: relative;
		z-index: 1;
	}

    #hero h1 {
        font-size: 4em;
        margin: 0.2em 0;
        text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.6);
    }

    #hero p {
        font-family: var(--font-secondary);
        font-size: 1.2em;
        max-width: 600px;
        margin-bottom: 30px;
        text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);
    }
    
    #how-it-works .columns { display: flex; justify-content: space-around; gap: 30px; text-align: center; }
    #how-it-works .column { flex: 1; padding: 20px; }
    #how-it-works .icon { font-size: 3em; color: var(--green); }
    #products { background-color: #f9f9f9; }
    .product-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 30px; }
    .product-card { background: var(--white); border-radius: 15px; overflow: hidden; box-shadow: var(--shadow); text-align: center; width: 250px; transition: transform 0.3s; display: flex; flex-direction: column; justify-content: space-between; }
    .product-card:hover { transform: translateY(-10px); }
    .product-card img { width: 100%; height: 200px; object-fit: cover; }
    .product-card .product-info { padding: 20px; flex-grow: 1;}
    .product-card h3 { margin-top: 0; font-size: 1.2em; }
    .product-card .price { font-size: 1.3em; font-weight: 700; color: var(--green); margin: 10px 0 20px; }
    .product-card .button { padding: 10px 25px; font-size: 0.9em; }
    .benefits-list { max-width: 800px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; }
    .benefit-item { font-size: 1.1em; display: flex; align-items: center; background: #f9f9f9; padding: 15px 25px; border-radius: 50px; box-shadow: var(--shadow); flex-basis: calc(50% - 40px); }
    .benefit-item .icon { font-size: 1.5em; margin-right: 15px; }
    #faq { background-color: #f9f9f9; }
    .faq-accordion { max-width: 800px; margin: 0 auto; }
    .faq-item { background: var(--white); border-radius: 10px; margin-bottom: 10px; box-shadow: var(--shadow); }
    .faq-item summary { padding: 20px; font-weight: 600; cursor: pointer; list-style: none; position: relative; }
    .faq-item summary::-webkit-details-marker { display: none; }
    .faq-item summary::after { content: '+'; position: absolute; right: 20px; font-size: 1.5em; color: var(--green); transition: transform 0.3s; }
    .faq-item[open] summary::after { transform: rotate(45deg); }
    .faq-item .faq-answer { padding: 0 20px 20px; line-height: 1.6; }
    .about-contact-grid { display: flex; gap: 50px; }
    .about-us, .contact-us { flex: 1; }
    .contact-us { text-align: center; }
    .contact-us ul { list-style: none; padding: 0; font-size: 1.1em; }
    .contact-us li { margin-bottom: 15px; }
    .contact-us .button { margin-top: 20px; }

    /* --- Team Section --- */
    #team { background-color: #f9f9f9; }
    .team-grid { display: flex; justify-content: center; gap: 30px; flex-wrap: wrap; }
    .team-member { background: var(--white); border-radius: 15px; box-shadow: var(--shadow); text-align: center; padding: 20px; width: 220px; transition: transform 0.3s; overflow-wrap: break-word; word-break: break-word; }
    .team-member:hover { transform: translateY(-10px); }
    .team-member img { width: 150px; height: 150px; border-radius: 50%; object-fit: cover; margin-bottom: 15px; border: 4px solid var(--green); }
    .team-member h3 { margin: 10px 0 5px; font-size: 1.2em; }
    .team-member p { font-size: 1em; color: #555; margin: 0; word-wrap: break-word; word-break: break-word; }

    /* --- Instagram Section --- */
    #instagram { background-color: var(--beige); text-align: center; }
    #instagram .icon { width: 60px; height: 60px; margin-bottom: 20px; }
    #instagram h2 { margin-bottom: 15px; }
    #instagram p { font-size: 1.5em; font-weight: 600; color: var(--dark-text); margin-bottom: 30px; }
    #instagram .button { background-color: #E4405F; }
    #instagram .button:hover { background-color: #C13584; }


    #demo { background-color: var(--beige); }
    .demo-grid { display: flex; gap: 40px; align-items: center; }
    .demo-video, .demo-ad { flex: 1; text-align: center; }
    .demo-video .video-placeholder { width: 100%; height: 315px; background-color: #ccc; display: flex; align-items: center; justify-content: center; border-radius: 15px; box-shadow: var(--shadow); font-size: 1.5em; color: #666; }
    .demo-ad img { max-width: 100%; height: auto; border-radius: 15px; box-shadow: var(--shadow); }
    footer { text-align: center; padding: 20px; background-color: var(--dark-text); color: var(--light-text); }
    
    /* --- New Sections Styling --- */
    .strategy-grid { display: flex; gap: 40px; align-items: flex-start; }
    .strategy-column { flex: 1; }
    .strategy-column h3 { font-size: 1.5em; color: var(--green); border-bottom: 2px solid var(--green); padding-bottom: 10px; margin-bottom: 20px;}
    .strategy-column ul { list-style: none; padding: 0; }
    .strategy-column li { font-size: 1.1em; margin-bottom: 15px; line-height: 1.6; position: relative; padding-left: 25px;}
    .strategy-column li::before { content: '✓'; color: var(--green); font-weight: bold; position: absolute; left: 0; }
    
    #pricing { background-color: #f9f9f9; }
    .pricing-table { width: 100%; border-collapse: collapse; margin-bottom: 30px; }
    .pricing-table th, .pricing-table td { padding: 15px; text-align: left; border-bottom: 1px solid #ddd; }
    .pricing-table th { background-color: var(--green); color: var(--light-text); font-size: 1.2em; }
    .pricing-table td:last-child { font-weight: 700; color: var(--dark-text); }
    .pricing-table tr:nth-child(even) { background-color: #f2f2f2; }
    .pricing-highlights { margin-top: 30px; }


    /* ------------------- */
    /* Responsive Design */
    /* ------------------- */
    @media (max-width: 768px) {
        h2 {
            font-size: 2em;
        }

        #hero h1 {
            font-size: 2.5em;
        }

        .nav-menu {
            position: absolute;
            top: var(--nav-height);
            left: 0;
            width: 100%;
            flex-direction: column;
            background-color: var(--white);
            box-shadow: 0 4px 10px rgba(0,0,0,0.1);
            gap: 0;
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.4s ease-in-out;
        }
        
        .nav-menu.active {
            max-height: 350px; /* Or enough height to show all items */
        }

        .nav-menu li {
            width: 100%;
            text-align: center;
            border-bottom: 1px solid #f0f0f0;
        }
        
        .nav-menu a {
            display: block;
            padding: 15px 0;
        }
        
        .nav-toggler {
            display: flex;
        }

        /* Animate hamburger icon */
        .nav-toggler.active span:nth-child(1) {
            transform: translateY(8px) rotate(45deg);
        }
        .nav-toggler.active span:nth-child(2) {
            opacity: 0;
        }
        .nav-toggler.active span:nth-child(3) {
            transform: translateY(-9px) rotate(-45deg);
        }

        #how-it-works .columns,
        .product-grid,
        .about-contact-grid,
        .demo-grid,
        .strategy-grid {
            flex-direction: column;
        }
        
        .benefit-item {
            flex-basis: 100%;
        }
    }