:root {
    --brand-green: #2D5A27;
    --navy-dark: #0F1024;
    --white: #ffffff;
    --light-bg: #F8FAFC;
    --text: #334155;
}

/* RESET */
* { margin:0; padding:0; box-sizing:border-box; }
body {
    font-family:'Montserrat', sans-serif;
    background:#fff;
    color:var(--text);
    line-height:1.7;
}

.container { max-width:1200px; margin:auto; padding:0 25px; }
.narrow { max-width:800px; margin:auto; }
.text-center { text-align:center; }

/* NAVBAR */
.navbar {
    position:sticky;
    top:0;
    z-index:1000;
    background:rgba(255,255,255,0.95);
    backdrop-filter:blur(10px);
    padding:15px 0;
}

.flex-nav {
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.logo-img { height:45px; }

/* HAMBURGER */
.menu-toggle {
    display:flex;
    flex-direction:column;
    gap:6px;
    background:none;
    border:none;
    cursor:pointer;
}

.bar {
    width:28px;
    height:3px;
    background:var(--brand-green);
    transition:0.3s;
}

.menu-toggle.is-active .bar:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
}
.menu-toggle.is-active .bar:nth-child(2) { opacity:0; }
.menu-toggle.is-active .bar:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
}

/* MOBILE NAV */
.nav-links {
    display:none;
    position:absolute;
    top:100%;
    left:0;
    width:100%;
    background:white;
    padding:40px 20px;
    flex-direction:column;
    gap:25px;
    text-align:center;
}

.nav-links.active { display:flex; }

.nav-links a {
    text-decoration:none;
    font-weight:600;
    color:#111;
}

.nav-cta {
    background:var(--brand-green);
    color:white !important;
    padding:10px 20px;
    border-radius:4px;
}

/* HERO */
.hero {
    padding:180px 0;
    background:
        linear-gradient(
            to right,
            var(--navy-dark) 0%,
            var(--navy-dark) 55%,
            rgba(15,16,36,0.85) 70%,
            rgba(15,16,36,0.4) 85%,
            rgba(15,16,36,0) 100%
        ),
        url('hero-casablanca.jpg') right center/cover no-repeat;
    color:white;
}

/* GLASS */
.glass {
    background: rgba(255,255,255,0.06);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border:1px solid rgba(255,255,255,0.15);
    border-radius:8px;
    padding:60px;
    max-width:700px;
    box-shadow:0 30px 80px rgba(0,0,0,0.4);
}

.hero h1 {
    font-family:'Playfair Display', serif;
    font-size:5rem;
    margin:15px 0;
}

.hero-sub { color:var(--brand-green); margin-bottom:20px; }
.hero-desc { margin-bottom:30px; }

.btn {
    padding:15px 30px;
    text-decoration:none;
    font-weight:600;
    text-transform:uppercase;
    font-size:0.8rem;
    display:inline-block;
    margin-right:15px;
}

.btn-green { background:var(--brand-green); color:white; }
.btn-outline { border:1px solid white; color:white; }

/* SECTIONS */
.section { padding:120px 0; }
.light-bg { background:var(--light-bg); }

.section-heading {
    font-family:'Playfair Display', serif;
    font-size:3rem;
    margin-bottom:30px;
}

.feature-list { list-style:none; }
.feature-list li { padding:12px 0; border-bottom:1px solid #e2e8f0; }

.backbone-grid { display:grid; gap:30px; margin-top:40px; }
.backbone-item {
    padding:25px;
    border-left:4px solid var(--brand-green);
    background:white;
    box-shadow:0 10px 30px rgba(0,0,0,0.05);
}

footer {
    padding:50px 0;
    background:#080914;
    color:rgba(255,255,255,0.4);
}

/* DESKTOP */
@media (min-width:1024px){

    .menu-toggle { display:none; }

    .nav-links {
        display:flex !important;
        position:static;
        flex-direction:row;
        width:auto;
        background:none;
        padding:0;
        gap:35px;
        align-items:center;
    }

}