:root{
  --bg: #ecfdf5;
  --green-700: #047857;
  --green-500: #10b981;
  --accent: #f59e0b;
  --card: #ffffff;
  --muted: #6b7280;
  --radius: 12px;
  --maxw: 1100px;
  --shadow: 0 8px 28px rgba(4,7,10,0.08);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:Inter, "Segoe UI", Roboto, Arial, sans-serif;
  background:var(--bg); color:#07332f;
  -webkit-font-smoothing:antialiased;
}
.header{position:sticky; top:0; z-index:50; background:rgba(255,255,255,0.98); backdrop-filter: blur(6px); box-shadow: var(--shadow);}
.header .inner{max-width:var(--maxw); margin:0 auto; padding:14px 20px; display:flex; align-items:center; justify-content:space-between; gap:12px;}
.brand{display:flex; align-items:center; gap:12px}
.brand img{height:42px}
.navlinks a{margin:0 10px; color:var(--green-700); font-weight:600; text-decoration:none}
.navlinks a:hover{color:var(--green-500)}
.cta{background:var(--green-700); color:white; padding:8px 14px; border-radius:8px; font-weight:700; text-decoration:none}
.hero{position:relative; min-height:68vh; display:flex; align-items:center; justify-content:center; background: url("assets/hero.jpg") center/cover no-repeat;}
.hero::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(6,40,21,0.45), rgba(255,255,255,0.15)); mix-blend-mode:multiply;}
.hero .card{position:relative; z-index:2; max-width:var(--maxw); margin:40px; padding:36px; background:linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.9)); border-radius:16px; box-shadow:var(--shadow); display:flex; gap:24px; align-items:center; flex-wrap:wrap;}
.hero h1{margin:0; color:var(--green-700); font-size:2rem}
.hero p{color:var(--muted); margin:8px 0 16px; max-width:640px; line-height:1.6}
.btn-row{display:flex;gap:12px;flex-wrap:wrap}
.btn{padding:10px 18px; border-radius:10px; font-weight:700; border:none; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:8px;}
.btn-primary{background:var(--green-700); color:white}
.btn-outline{background:transparent; border:2px solid var(--green-700); color:var(--green-700)}
.btn-secondary{background:var(--accent); color:white}
.container{max-width:var(--maxw); margin:36px auto; padding:0 20px;}
.card{background:var(--card); border-radius:12px; padding:22px; box-shadow:var(--shadow); margin-bottom:20px}
.features{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.feature{padding:20px; border-radius:12px; background:#fff; text-align:center}
.feature h3{color:var(--green-700); margin-bottom:8px}
.feature p{color:var(--muted); font-size:0.98rem}
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px; margin-top:18px}
.stat{background:linear-gradient(180deg,#fff,#fcfff7); border-radius:12px; padding:18px; text-align:center; box-shadow:0 6px 18px rgba(10,20,12,0.04)}
.stat h3{margin:0; color:var(--green-700); font-size:1.6rem}
.stat p{margin:8px 0 0; color:var(--muted)}
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px}
.prod{border-radius:12px; overflow:hidden; background:#fff; box-shadow:var(--shadow)}
.prod img{width:100%; height:210px; object-fit:cover}
.prod .body{padding:14px}
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.info p{margin:8px 0; color:var(--muted)}
.form .input, .form textarea{width:100%; padding:10px; border-radius:8px; border:1px solid #e6f0ea; margin-bottom:10px}
.form button{background:var(--green-700); color:white; padding:10px 16px; border-radius:8px; border:none; font-weight:700}
footer{background:var(--green-700); color:white; text-align:center; padding:18px 20px; margin-top:36px}
@media(max-width:900px){
  .features{grid-template-columns:1fr;}
  .contact-grid{grid-template-columns:1fr}
  .hero h1{font-size:1.6rem}
  .hero p{font-size:0.95rem}
}