body{
margin:0;
font-family:Montserrat,sans-serif;
background:#F7F5EE;
}

*{
box-sizing:border-box;
}

html,
body{
overflow-x:hidden;
}

/* =====================================
HEADER
===================================== */

.brand-header{
background:#17351F;
height:100px;
display:flex;
justify-content:center;
align-items:center;
}

.brand-header img{
max-height:70px;
}

/* =====================================
NAVIGATION
===================================== */

.navbar{
display:flex;
justify-content:space-between;
align-items:center;
padding:15px 25px;
background:#17351F;
color:#fff;
position:sticky;
top:0;
z-index:1000;
}

.logo{
font-size:1.25rem;
font-weight:700;
letter-spacing:.3px;
}

.links{
display:flex;
align-items:center;
gap:20px;
}

.links a{
    color:#fff;
    text-decoration:none;
    font-size:1rem;
    font-weight:600;
    transition:.2s ease;
}

.links a:hover{
    color:#C9A227;
}

.download-btn{
    background:#C9A227;
    color:#000 !important;
    padding:10px 16px;
    border-radius:8px;
    text-decoration:none;
    font-size:1rem;
    font-weight:600;
    display:inline-block;
}

.links .download-btn{
    color:#000 !important;
}

/* Hamburger */

.nav-toggle{
display:none;
flex-direction:column;
justify-content:center;
gap:4px;
width:40px;
height:40px;
background:none;
border:none;
cursor:pointer;
}

.nav-toggle span{
width:24px;
height:3px;
background:#fff;
border-radius:2px;
display:block;
}

.mobile-download{
display:none;
}

.desktop-download{
display:inline-block;
}

/* =====================================
HERO
===================================== */

.hero{
display:grid;
grid-template-columns:1fr 1fr;
gap:40px;
padding:60px;
align-items:center;
background:linear-gradient(180deg,#17351F,#1F4B2A);
color:#fff;
}

.phone{
max-width:320px;
margin:auto;
border:12px solid #111;
border-radius:30px;
padding:8px;
background:#000;
box-shadow:0 15px 40px rgba(0,0,0,.3);
}

.phone img{
width:100%;
border-radius:20px;
}

/* =====================================
CARDS
===================================== */

.stats,
.features{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
gap:20px;
padding:40px;
max-width:1200px;
margin:auto;
}

.stats div,
.card{
background:#fff;
padding:20px;
border-radius:12px;
text-align:center;
}

/* =====================================
HOMEPAGE SECTIONS
===================================== */

.carousel,
.community,
.download{
text-align:center;
padding:60px 20px;
max-width:1200px;
margin:auto;
}

.grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:20px;
}

.grid img{
width:100%;
border-radius:12px;
}

.dots span{
display:inline-block;
width:10px;
height:10px;
border-radius:50%;
background:#ccc;
margin:4px;
}

.dots .active{
background:#C9A227;
}

/* =====================================
STATS CARDS
===================================== */

.stats{
display:grid;
grid-template-columns:repeat(5,1fr);
gap:20px;
max-width:1200px;
margin:0 auto;
padding:40px 20px;
width:100%;
box-sizing:border-box;
}

.stat-card{
background:#ffffff;
border-radius:16px;
padding:24px;
text-align:center;
box-shadow:0 4px 12px rgba(0,0,0,.08);
transition:transform .2s ease;
}

.stat-card:hover{
transform:translateY(-4px);
}

.stat-card h3{
margin:0;
color:#17351F;
font-size:1.4rem;
font-weight:700;
}

.stat-card p{
margin-top:8px;
color:#666;
font-size:.95rem;
}

/* =====================================
FOOTER
===================================== */

footer{
background:#17351F;
color:#fff;
text-align:center;
padding:30px;
}

.footer-social{
display:flex;
justify-content:center;
align-items:center;
gap:18px;
margin-top:20px;
}

.footer-social img{
width:24px;
height:24px;
display:block;
transition:.2s ease;
}

.footer-social img:hover{
transform:translateY(-2px);
opacity:.85;
}

.footer-legal{
margin-top:20px;
}

.footer-legal a{
color:#fff;
text-decoration:none;
font-size:.95rem;
}

.footer-legal a:hover{
text-decoration:underline;
}

.footer-legal span{
margin:0 10px;
opacity:.6;
}

/* =====================================
RESPONSIVE
===================================== */

@media(max-width:900px){

    .stats{
        grid-template-columns:repeat(2,1fr);
    }

}

@media(max-width:768px){

    .hero{
        grid-template-columns:1fr;
        padding:40px 20px;
        text-align:center;
    }

    .hero h1{
        font-size:2rem;
    }

    .phone{
        max-width:280px;
    }

    .nav-toggle{
        display:flex;
    }

    .desktop-download{
        display:none;
    }

    .links{
        position:absolute;
        top:100%;
        left:0;
        right:0;
        background:#17351F;
        display:none;
        flex-direction:column;
        align-items:flex-start;
        padding:20px 25px;
        gap:15px;
        box-shadow:0 10px 20px rgba(0,0,0,.15);
    }

    .links.open{
        display:flex;
    }

    .links a{
        width:100%;
    }

    .mobile-download{
        display:inline-block;
        margin-top:10px;
    }
}

@media(max-width:600px){

    .stats{
        grid-template-columns:1fr;
    }

    .stat-card{
        width:auto;
    }

}