:root{
  --green:#16724d;
  --green-2:#0f5a3e;
  --green-3:#1e8a5f;
  --text:#0f172a;
  --muted:#475569;
  --bg:#ffffff;
  --soft:#f1f5f9;
  --ring: rgba(22,114,77,0.35);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color:var(--text); background:var(--bg); line-height:1.6;
}
a{color:var(--green); text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1160px; margin:0 auto; padding:0 20px}
.btn{
  display:inline-block; padding:12px 18px; border-radius:14px; border:1px solid var(--green);
  transition:.2s ease; font-weight:600; background:#fff;
}
.btn:hover{transform:translateY(-1px); box-shadow:0 8px 24px rgba(0,0,0,.08)}
.btn-primary{background:var(--green); color:#fff; border-color:var(--green)}
.btn-outline{background:#fff; color:var(--green)}
.badge{display:inline-block; padding:4px 10px; border-radius:999px; background:var(--soft); color:var(--muted); font-size:12px; font-weight:600}

.header{
  position:sticky; top:0; z-index:50; backdrop-filter:saturate(180%) blur(6px);
  background:rgba(255,255,255,.85); border-bottom:1px solid #eef2f7;
}
.nav{display:flex; align-items:center; justify-content:space-between; height:72px}
.nav a.logo{font-weight:800; letter-spacing:.2px; font-size:20px; color:var(--green-2)}
.nav .links{display:flex; gap:18px; align-items:center}
.nav .links a{font-weight:600; color:#0b213a}
.nav .cta{display:flex; gap:10px; align-items:center}

.hero{
  position:relative; overflow:hidden;
  padding:80px 0 60px;
  background:linear-gradient(135deg, #f5fff8 0%, #ffffff 40%, #f7fffb 100%);
}
.hero .grid{display:grid; grid-template-columns: 1.2fr .8fr; gap:36px; align-items:center}
.hero h1{font-size:44px; line-height:1.15; margin:10px 0 12px; color:#0b213a}
.hero p{font-size:18px; color:#334155}
.hero .card{
  background:#fff; border:1px solid #e6edf2; border-radius:20px; padding:16px; box-shadow:0 6px 18px rgba(0,0,0,.05);
}
.metrics{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:16px}
.metric{background:#fff; border:1px solid #e6edf2; border-radius:16px; padding:14px}
.metric .t{font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.2px}
.metric .v{font-size:20px; font-weight:800; color:#0b213a}

.section{padding:64px 0; border-top:1px solid #eef2f7}
.section h2{font-size:28px; margin:0 0 12px; color:#0b213a}
.section p.lead{font-size:18px; color:#334155; margin-top:-6px}

.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.card{
  background:#fff; border:1px solid #e6edf2; border-radius:16px; padding:18px; transition:.2s ease;
}
.card:hover{transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,.06)}
.card h3{margin:0 0 8px; font-size:18px; color:#0b213a}
.card p{margin:0; color:#475569}

.list{display:grid; gap:8px}
.list li{display:flex; gap:10px; align-items:flex-start}
.check{width:22px; height:22px; border-radius:6px; border:1px solid var(--green); display:inline-flex; align-items:center; justify-content:center; font-size:14px; color:var(--green); margin-top:2px}

.blog-list{display:grid; grid-template-columns:repeat(2,1fr); gap:16px}
.post{
  background:#fff; border:1px solid #e6edf2; border-radius:16px; padding:16px; display:flex; flex-direction:column; gap:8px
}
.post .meta{font-size:12px; color:#64748b}
.post a.read{font-weight:700}

.faq{display:grid; gap:12px}
.faq details{border:1px solid #e6edf2; border-radius:14px; padding:12px; background:#fff}
.faq summary{cursor:pointer; font-weight:700; color:#0b213a}
.faq p{margin:8px 0 0; color:#475569}

.cta{
  background:linear-gradient(135deg, var(--green) 0%, var(--green-3) 100%);
  color:#fff; border-radius:18px; padding:28px; display:flex; align-items:center; justify-content:space-between; gap:18px
}
.cta .actions{display:flex; gap:12px; flex-wrap:wrap}

.footer{padding:36px 0; color:#475569}
.footer .cols{display:grid; grid-template-columns: 2fr 1fr 1fr; gap:18px}
.footer h4{margin:0 0 8px; color:#0b213a}
.footer ul{list-style:none; padding:0; margin:0; display:grid; gap:8px}

.notice{font-size:12px; color:#64748b; margin-top:10px}

@media (max-width: 900px){
  .hero .grid{grid-template-columns:1fr}
  .blog-list{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr}
  .metrics{grid-template-columns:1fr 1fr 1fr}
  .footer .cols{grid-template-columns:1fr}
}