:root{
  --green:#0f8a3b;
  --dark:#0a0f14;
  --mid:#1f2b36;
  --light:#f6f8f7;
  --text:#0e1a22;
  --accent:#59c174;
  --max:1200px;
  --radius:12px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text); background:#fff; line-height:1.6;
}
a{color:var(--green); text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:var(--max); margin:0 auto; padding:0 20px}
header{border-bottom:1px solid #e6ece9; background:#fff; position:sticky; top:0; z-index:50}
.nav{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
.nav a.logo{font-weight:700; letter-spacing:.2px; color:var(--dark)}
.nav ul{display:flex; gap:16px; list-style:none; margin:0; padding:0}
.nav li a{padding:8px 10px; border-radius:8px}
.nav li a:hover{background:var(--light)}
.hero{
  display:grid; gap:18px; padding:56px 0; background:linear-gradient(180deg,#f4fbf6, #fff);
}
.hero h1{font-size:clamp(28px,4vw,44px); line-height:1.15; margin:0}
.hero p{font-size:clamp(16px,2.1vw,20px); margin:6px 0 0}
.badges{display:flex; flex-wrap:wrap; gap:10px; margin-top:16px}
.badge{background:#eaf6ee; color:#0f5c2d; padding:6px 10px; border-radius:999px; font-size:14px}
.section{padding:56px 0}
.section h2{font-size:clamp(22px,3vw,32px); margin:0 0 8px}
.section p.lead{color:#36454f; margin:0 0 22px}
.grid{display:grid; gap:18px}
.cards{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.card{border:1px solid #e6ece9; border-radius:var(--radius); padding:18px; background:#fff}
.card h3{margin:8px 0}
.card ul{margin:8px 0 0; padding-left:18px}
.cta{
  background:#0f8a3b; color:#fff; border:none; padding:12px 16px; border-radius:10px;
  font-weight:600; cursor:pointer
}
.cta:hover{background:#0c6d30}
.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px}
.kpi{background:#f4fbf6; border:1px solid #d9f0df; border-radius:var(--radius); padding:14px}
.kpi strong{display:block; font-size:22px}
footer{border-top:1px solid #e6ece9; padding:28px 0; background:#fafdfb; margin-top:56px}
.small{font-size:14px; color:#4d5a64}
.list{margin:0; padding-left:18px}
hr.sep{border:0; border-top:1px solid #e6ece9; margin:24px 0}
.img{
  width:100%; height:240px; border-radius:10px; object-fit:cover; background:#d9e7dd
}
.banner{height:300px}
.form{
  display:grid; gap:12px; max-width:640px
}
input, textarea{
  width:100%; padding:12px 14px; border-radius:10px; border:1px solid #cfe2d5; font:inherit
}
textarea{min-height:140px; resize:vertical}