/* ------------------- */
/* Reset & Base Styles */
/* ------------------- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --border-radius-main: 24px;
    --border-radius-small: 12px;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'DM Sans', sans-serif;
    line-height: 1.6;
    color: var(--grey-950);
    overflow-x: hidden;
    background-color: var(--white);
}

.container {
    max-width: 97.5rem; /* 1560px */
    margin: 0 auto;
    padding: 0 2rem;
}


/* ------------------- */
/* Navigation          */
/* ------------------- */
.navbar {
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 1000;
    padding: 1rem 0;
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 48px; /* Set a fixed height for alignment */
}

.nav-logo {
    display: flex;
}

.logo-img {
    width: 2.5rem; /* 40px */
    height: 2.5rem;
}

.logo-text {
    font-size: 1.5rem; /* 24px */
    font-weight: 700;
}

.logo-text .puff { color: var(--blue-700); }
.logo-text .zero { color: var(--grey-950); }

.nav-menu {
    display: flex;
    align-items: center;
    list-style: none;
    gap: 1.5rem;
}

.nav-link {
    text-decoration: none;
    font-size: 1.125rem; /* 18px */
    font-weight: 500;
    color: var(--grey-900);
    transition: color 0.3s ease;
}

.nav-link:hover { color: var(--blue-700); }

.download-btn {
    background-color: var(--grey-950);
    color: var(--white);
    padding: 0.75rem 1.5rem;
    border-radius: var(--border-radius-main);
    transition: background-color 0.3s ease;
}

.download-btn:hover {
    background-color: var(--grey-800);
    color: var(--white);
}

.hamburger { display: none; cursor: pointer; }
.bar {
    display: block;
    width: 25px;
    height: 3px;
    margin: 5px auto;
    transition: all 0.3s ease-in-out;
    background-color: var(--grey-950);
}


/* ------------------- */
/* Hero Section        */
/* ------------------- */
.hero { padding: 6rem 0; }

.hero-content {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: center;
    text-align: center;
}

.hero-text h1 {
    font-size: 4rem;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 1.5rem;
}

.hero-text .highlight { color: var(--blue-700); }
.hero-text .for-good { color: var(--grey-950); }

.hero-text p {
    font-size: 1.5rem;
    color: var(--grey-800);
    max-width: 45ch;
    margin: 0 auto 2.5rem auto;
}

.app-store-btn img {
    height: 3.5rem; /* 56px */
    width: auto;
}

.hero-image img {
    width: 100%;
    max-width: 750px;
    height: auto;
}


/* ------------------- */
/* Features Section    */
/* ------------------- */
.features { padding: 6rem 0; }

.section-title {
    text-align: center;
    font-size: 4rem;
    font-weight: 600;
    margin-bottom: 6rem;
}

.section-title .highlight { color: var(--blue-700); }

.feature {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6rem;
    align-items: center;
    margin-bottom: 8rem;
}

.feature.reverse > .feature-image-wrapper { order: 2; }
.feature.reverse > .feature-text { order: 1; }

.feature-image-wrapper {
    border-radius: var(--border-radius-main);
    display: flex;
    align-items: center;
    justify-content: center;
}

.feature-image-wrapper img {
    width: 100%;
    max-width: 850px;
    height: auto;
    object-fit: contain;
}

.feature-text h3 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.feature-text p {
    font-size: 1.25rem;
    color: var(--grey-800);
    margin-bottom: 2rem;
    max-width: 50ch;
}

.try-btn {
    display: inline-block;
    background-color: var(--grey-950);
    color: var(--white);
    padding: 0.875rem 2rem;
    border-radius: var(--border-radius-main);
    text-decoration: none;
    font-size: 1.125rem;
    font-weight: 500;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.try-btn:hover {
    background-color: var(--grey-800);
    transform: translateY(-2px);
}


/* ------------------- */
/* Media Queries       */
/* ------------------- */

/* --- Desktop Layout --- */
@media (min-width: 992px) {
    .hero-content {
        grid-template-columns: 1fr 1fr;
        gap: 4rem;
        text-align: left;
    }
    .hero-text p {
        margin-left: 0;
        margin-right: 0;
    }
}

/* --- Tablet Layout --- */
@media (max-width: 991px) {
    .feature, .feature.reverse {
        grid-template-columns: 1fr;
        gap: 3rem;
        text-align: center;
    }
    .feature.reverse > .feature-image-wrapper,
    .feature.reverse > .feature-text {
        order: initial;
    }
    .feature-text p {
        margin-left: auto;
        margin-right: auto;
    }
}

/* --- Mobile Layout & Hamburger Menu --- */
@media (max-width: 768px) {
    .container { padding: 0 1.5rem; }

    /* Font Size Adjustments for Mobile */
    .hero-text h1 { font-size: 2.8rem; }
    .hero-text p { font-size: 1.125rem; }
    .section-title { font-size: 2.5rem; margin-bottom: 4rem; }
    .feature-text h3 { font-size: 2rem; }
    .feature-text p { font-size: 1rem; }
    
    /* Section Padding Adjustments */
    .hero { padding: 4rem 0;}
    .features { padding: 4rem 0; }
    .feature { margin-bottom: 4rem; }

    /* --- Hamburger Menu Logic --- */
    /* UPDATED: Changed from full-screen overlay to dropdown panel */
    .nav-menu {
        position: absolute; /* Position relative to the navbar */
        top: 80px; /* Position it right below the navbar (48px height + 2rem padding) */
        left: 0;
        right: 0;
        flex-direction: column;
        width: 100%;
        background-color: var(--white);
        border-bottom-left-radius: var(--border-radius-small);
        border-bottom-right-radius: var(--border-radius-small);
        
        /* UPDATED: Animation for slide-down effect */
        max-height: 0; /* Initially hidden */
        overflow: hidden;
        transition: max-height 0.4s ease-in-out;
    }

    .nav-menu.active {
        max-height: 300px; /* Reveal the menu. A large enough value to show all content */
        padding-bottom: 1rem; /* Add some space at the bottom when open */
    }

    .nav-item { margin: 1rem 0; }

    .hamburger {
        display: block; /* Show the hamburger icon */
    }

    /* Animate hamburger to "X" shape when active */
    .hamburger.active .bar:nth-child(2) { opacity: 0; }
    .hamburger.active .bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
    .hamburger.active .bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
}