:root{
  --green:#1f8f2e; --blue:#2ea3d4; --dark:#0f172a; --light:#f8fafc;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,'Noto Sans',sans-serif;color:var(--dark);background:var(--light)}
a{color:var(--green);text-decoration:none}
img{max-width:100%;height:auto}
.container{max-width:1100px;margin:0 auto;padding:0 20px}
.header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,0.9);backdrop-filter:saturate(1.2) blur(6px);border-bottom:1px solid #e5e7eb}
.header-inner{display:flex;gap:20px;align-items:center;justify-content:space-between;padding:10px 0}
.brand{display:flex;gap:12px;align-items:center}
.brand img{width:52px;height:auto}
.brand-title{font-weight:800;color:var(--green);font-size:20px;line-height:1}
.nav{display:flex;gap:16px;align-items:center}
.btn{display:inline-block;padding:12px 18px;border-radius:999px;background:var(--green);color:#fff;font-weight:600}
.btn-outline{background:transparent;border:2px solid var(--green);color:var(--green)}
.hero{display:grid;gap:24px;grid-template-columns:1.2fr 1fr;align-items:center;padding:48px 0 16px}
.hero h1{font-size:44px;margin:0 0 8px 0;color:var(--dark)}
.hero p{font-size:18px;margin:0 0 16px 0}
.badge{display:inline-block;background:#e8f5ed;color:var(--green);border:1px solid #cfead6;padding:6px 10px;border-radius:10px;font-weight:600}
.grid-3{display:grid;gap:18px;grid-template-columns:repeat(3,minmax(0,1fr))}
.card{background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:18px;box-shadow:0 1px 2px rgba(0,0,0,0.03)}
.section{padding:48px 0}
.section h2{margin:0 0 8px 0;font-size:32px}
.kpi{font-size:32px;font-weight:800;color:var(--green)}
.media{border-radius:14px;overflow:hidden;border:1px solid #e5e7eb;background:#fff}
.media video{width:100%;display:block}
.split{display:grid;gap:22px;grid-template-columns:1fr 1fr;align-items:center}
.footer{padding:28px 0;border-top:1px solid #e5e7eb;background:#fff}
.footer small{color:#64748b}
.tagline{color:var(--blue);font-weight:700}
@media (max-width:900px){
  .hero{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr}
}