:root{--bg:#f4f3ec;--surface:#fff;--ink:#1c1a1a;--ink2:#555349;--ink3:#8f8c7e;
--line:#e4e2d5;--pine:#0e4a38;--pine-2:#13624b;--pine-soft:#e2efe7;--lime:#e9ff96;
--r:20px;--r-sm:14px;--shadow:0 1px 2px rgba(28,26,26,.04),0 16px 40px -18px rgba(28,26,26,.16)}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Onest',-apple-system,'Segoe UI',Roboto,sans-serif;background:var(--bg);color:var(--ink);line-height:1.5}
a{color:var(--pine);text-decoration:none}
.wrap{max-width:920px;margin:0 auto;padding:0 20px}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:20px 0;border-bottom:1px solid var(--line)}
.logo{font-family:'Unbounded',sans-serif;font-size:19px;font-weight:700;color:var(--ink)}
.logo i{color:#0aa87e;font-style:normal}
.btn{display:inline-block;padding:13px 22px;border-radius:14px;font-weight:600;font-size:15px;transition:transform .15s,box-shadow .15s}
.btn-brand{background:var(--pine);color:#fff!important}
.btn-brand:hover{transform:translateY(-1px);box-shadow:0 10px 24px -10px rgba(14,74,56,.5)}
.btn-ghost{border:1.5px solid var(--line);color:var(--ink)!important;background:var(--surface)}
.btn-ghost:hover{border-color:var(--pine)}
.hero{padding:52px 0 30px}
.badge{display:inline-block;font-size:12.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--pine);background:var(--pine-soft);border-radius:99px;padding:7px 14px;margin-bottom:18px}
h1{font-family:'Unbounded',sans-serif;font-size:clamp(26px,4.5vw,40px);line-height:1.18;margin-bottom:16px;max-width:760px}
.lead{font-size:17px;color:var(--ink2);max-width:700px;margin-bottom:26px}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:26px}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{font-size:12.5px;color:var(--pine);background:var(--pine-soft);border-radius:99px;padding:6px 12px;font-weight:600}
section{padding:30px 0}
h2{font-family:'Unbounded',sans-serif;font-size:22px;margin-bottom:18px}
.points{list-style:none;display:grid;gap:10px}
.points li{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);padding:14px 18px 14px 44px;position:relative;font-size:15px;box-shadow:var(--shadow)}
.points li::before{content:"";position:absolute;left:17px;top:19px;width:9px;height:9px;border-radius:50%;background:var(--pine);box-shadow:0 0 0 4px var(--pine-soft)}
.tests{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.test{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);padding:16px 18px;box-shadow:var(--shadow)}
.test b{display:block;font-size:14.5px;margin-bottom:6px}
.test span{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--ink3)}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.step{display:flex;gap:14px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);padding:18px;box-shadow:var(--shadow)}
.step-num{flex:none;width:34px;height:34px;border-radius:11px;background:var(--pine);color:#fff;display:grid;place-items:center;font-weight:700;font-family:'Unbounded',sans-serif;font-size:14px}
.step b{display:block;font-size:14.5px;margin-bottom:5px}
.step p{font-size:13px;color:var(--ink2)}
.faq details{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);padding:16px 19px;margin-bottom:10px;box-shadow:var(--shadow)}
.faq summary{cursor:pointer;font-weight:600;font-size:15px;list-style:none}
.faq summary::before{content:"+";color:var(--pine);font-weight:700;margin-right:10px}
.faq details[open] summary::before{content:"–"}
.faq details p{margin-top:10px;font-size:14px;color:var(--ink2);line-height:1.6}
.samples{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
.sample{display:block;background:var(--surface);border:1.5px solid var(--pine-soft);border-radius:var(--r-sm);padding:16px 18px;box-shadow:var(--shadow);transition:border-color .15s,transform .15s}
.sample:hover{border-color:var(--pine);transform:translateY(-2px)}
.sample b{display:block;color:var(--pine);font-size:14.5px;margin-bottom:4px}
.sample i{font-style:normal;font-size:12.5px;color:var(--ink3)}
.dirnav{display:flex;gap:8px;flex-wrap:wrap}
.dirnav a{font-size:13px;font-weight:600;color:var(--ink2);border:1.5px solid var(--line);border-radius:99px;padding:8px 15px;background:var(--surface)}
.dirnav a:hover{border-color:var(--pine);color:var(--pine)}
.dirnav a.cur{border-color:var(--pine);color:var(--pine);background:var(--pine-soft)}
footer{border-top:1px solid var(--line);margin-top:34px;padding:26px 0 44px;font-size:13.5px;color:var(--ink2)}
footer .cols{display:flex;gap:26px;flex-wrap:wrap;align-items:center;justify-content:space-between}
.note{font-size:12px;color:var(--ink3);margin-top:14px}
@media (max-width:640px){
 .hero{padding:36px 0 22px}
 .cta .btn{flex:1;text-align:center}
 .points li{padding-left:40px}
}