:root{
  --bg: #f5fff5;
  --bg-2: #eaf7ea;
  --text: #1a1f1a;
  --muted: #3f4a3f;
  --primary: #2e7d32;
  --primary-600:#2a6f2d;
  --accent:#81c784;
  --accent-2:#a5d6a7;
  --white:#ffffff;
  --shadow: 0 10px 30px rgba(0,0,0,.08);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
}

/* Layout helpers */
.container{width:min(1100px, 92%); margin-inline:auto}
.section{padding: clamp(3rem, 6vw, 6rem) 0}
.section.light{background:var(--bg-2)}
.two-col{display:grid; gap:2rem; grid-template-columns: 1.2fr 1fr}
@media (max-width: 900px){
  .two-col{grid-template-columns:1fr}
}
.center{text-align:center}
.mt{margin-top:2rem}

/* Header & Navbar */
.header{
  position:sticky; top:0; z-index:1000;
  background:rgba(245,255,245,.9);
  backdrop-filter: blur(6px);
  border-bottom:1px solid #d9ead9;
}
.nav-container{display:flex; align-items:center; justify-content:space-between; padding:.75rem 0}
.brand{display:flex; gap:.5rem; align-items:center; text-decoration:none; color:var(--primary); font-weight:700}
.brand i{font-size:1.2rem}

.nav{}
.nav-list{list-style:none; display:flex; gap:1rem; margin:0; padding:0; align-items:center}
.nav-link{display:inline-flex; gap:.5rem; align-items:center; text-decoration:none; color:var(--muted); padding:.5rem .75rem; border-radius:999px}
.nav-link:hover{background:var(--accent-2); color:var(--text)}
.dropdown{position:relative}
.dropdown-toggle{background:none; border:none; cursor:pointer; font: inherit; color:var(--muted); padding:.5rem .75rem; border-radius:999px}
.dropdown-toggle:hover{background:var(--accent-2)}
.dropdown-menu{
  position:absolute; top:100%; left:0; min-width:200px;
  background:var(--white); border:1px solid #e2eee2; border-radius:14px; box-shadow:var(--shadow);
  padding:.5rem; display:none;
}
.dropdown-menu li{list-style:none}
.dropdown-menu a{display:block; padding:.6rem .75rem; border-radius:10px; text-decoration:none; color:var(--text)}
.dropdown-menu a:hover{background:var(--bg-2)}
.dropdown:hover .dropdown-menu{display:block}

.hamburger{display:none; background:none; border:none; cursor:pointer}
.hamburger span{display:block; width:24px; height:2px; background:var(--muted); margin:5px 0; transition:.3s}
@media (max-width: 800px){
  .hamburger{display:block}
  .nav{position:absolute; top:100%; left:0; right:0; background:var(--white); border-bottom:1px solid #e2eee2; display:none}
  .nav.open{display:block}
  .nav-list{flex-direction:column; align-items:flex-start; padding:1rem}
  .dropdown:hover .dropdown-menu{display:none}
  .dropdown-menu{position:static; display:none; width:100%; margin-top:.5rem}
  .dropdown.open .dropdown-menu{display:block}
}

/* Hero */
.hero{position:relative}
.hero-inner{display:grid; grid-template-columns:1.1fr 1fr; gap:2rem; align-items:center}
.hero h1{font-size: clamp(2rem, 3.5vw, 3.2rem); line-height:1.1; margin:0 0 1rem}
.hero p{color:var(--muted); margin:0 0 1.25rem}
.hero-media{display:grid; place-items:center}
.scroll-down{position:absolute; bottom:1rem; left:50%; transform:translateX(-50%); color:var(--primary); text-decoration:none; font-size:1.25rem}
@media (max-width: 900px){
  .hero-inner{grid-template-columns:1fr}
}

/* Cards & grids */
.cards{display:grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap:1.25rem}
.card{background:var(--white); border:1px solid #e2eee2; border-radius:18px; box-shadow:var(--shadow); overflow:hidden}
.card img{width:100%; height:200px; object-fit:cover; display:block}
.card-body{padding:1rem}
.card h3{margin:.2rem 0 .3rem}
.card p{margin:0; color:var(--muted)}
.card-icon{font-size:1.8rem; color:var(--primary); margin:1rem}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.75rem 1rem; border-radius:999px; border:2px solid transparent; text-decoration:none; cursor:pointer;
  transition: transform .08s ease;
}
.btn-primary{background:var(--primary); color:white}
.btn-primary:hover{background:var(--primary-600)}
.btn-ghost{background:transparent; border-color:var(--primary); color:var(--primary)}
.btn-ghost:hover{background:var(--accent-2)}
.btn:active, .btn.btn-active{transform: scale(.98)}

/* Images: interactive */
.image-grid{display:grid; grid-template-columns: repeat(2, 1fr); gap:1rem}
.image-card{background:var(--white); border:1px solid #e2eee2; border-radius:18px; overflow:hidden; box-shadow:var(--shadow)}
.image-card img{width:100%; height:100%; display:block; object-fit:cover; transform-origin:center; transition: transform .3s ease, filter .3s ease}
.image-card.interactive:hover img{transform: scale(1.04)}
.image-card.interactive:active img{transform: scale(1.02); filter:saturate(1.15)}

@media (max-width: 700px){
  .image-grid{grid-template-columns:1fr}
}

/* Testimonials */
.testimonials{display:grid; gap:1rem; grid-template-columns: repeat(auto-fit, minmax(260px,1fr))}
.testimonial{background:var(--white); border:1px solid #e2eee2; border-radius:18px; padding:1rem 1.25rem; box-shadow:var(--shadow)}
.testimonial cite{display:block; margin-top:.3rem; color:var(--muted)}

/* Footer */
.footer{background:var(--bg-2); border-top:1px solid #d9ead9; padding-top:2rem}
.footer-grid{display:grid; gap:1.25rem; grid-template-columns:2fr 1fr 1fr}
.footer-grid h5{margin:.2rem 0 .6rem}
.footer-grid ul{list-style:none; padding:0; margin:0}
.footer-grid li{margin:.25rem 0}
.footer-grid a{text-decoration:none; color:var(--muted)}
.footer-grid a:hover{color:var(--primary)}
.socials{display:flex; gap:.75rem}
.footer-bottom{border-top:1px dashed #cfe8cf; padding:1rem 0; text-align:center}
@media (max-width: 800px){
  .footer-grid{grid-template-columns:1fr}
}

/* Anchors offset for sticky header */
.anchor{scroll-margin-top: 90px}

/* Utility */
.icon-list{list-style:none; padding:0; margin:1rem 0 1.2rem}
.icon-list li{display:flex; align-items:center; gap:.6rem; margin:.25rem 0}
.image-card, .card, .testimonial { transition: box-shadow .2s ease, transform .2s ease }
.interactive:hover{box-shadow:0 12px 40px rgba(0,0,0,.12); transform: translateY(-2px)}