:root{
  --green:#6DAE2A;--green-700:#437019;--lime:#9BD64A;--lime-soft:#C9EC9A;
  --ink:#14170F;--ink-700:#3A4030;--cream:#F6F4EC;--cream-2:#FBFAF3;
  --line:#E2DDCD;--muted:#6C705F;
  --font-display:"Plus Jakarta Sans",system-ui,sans-serif;
  --font-body:"Inter",system-ui,-apple-system,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--font-body);background:var(--cream);color:var(--ink);line-height:1.75;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
::selection{background:var(--green);color:#fff}

/* Header */
.ah{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:11px clamp(18px,5vw,48px);background:rgba(30,40,26,.92);
  backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);
  border-bottom:1px solid rgba(255,255,255,.1)}
.ah-brand img{height:42px;width:auto;transition:transform .3s var(--ease)}
.ah-brand:hover img{transform:scale(1.04)}
.ah-back{color:rgba(246,244,236,.85);font-weight:600;font-size:.92rem;display:inline-flex;align-items:center;gap:6px}
.ah-back:hover{color:#fff}

/* Article */
.article{width:min(100% - 40px,720px);margin:clamp(34px,6vw,66px) auto 0}
.a-cat{font-size:.8rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--green-700)}
.article h1{font-family:var(--font-display);font-weight:800;font-size:clamp(2rem,5.2vw,3rem);line-height:1.08;letter-spacing:-.025em;margin:14px 0}
.a-lead{font-size:clamp(1.12rem,2vw,1.32rem);color:var(--ink-700);font-weight:500;line-height:1.6;
  margin-bottom:30px;padding-bottom:30px;border-bottom:1px solid var(--line)}

.a-body{font-size:1.07rem}
.a-body h2{font-family:var(--font-display);font-weight:700;font-size:clamp(1.4rem,3vw,1.65rem);letter-spacing:-.01em;margin:38px 0 12px}
.a-body h3{font-family:var(--font-display);font-weight:600;font-size:1.22rem;margin:28px 0 10px}
.a-body p{margin-bottom:18px}
.a-body ul,.a-body ol{margin:0 0 20px;padding-left:0;list-style:none}
.a-body ul li{position:relative;padding-left:28px;margin-bottom:11px}
.a-body ul li::before{content:"";position:absolute;left:4px;top:.6em;width:10px;height:10px;border-radius:50%;
  background:var(--lime);border:2px solid var(--green)}
.a-body ol{counter-reset:s;padding-left:0}
.a-body ol li{position:relative;padding-left:38px;margin-bottom:11px;counter-increment:s}
.a-body ol li::before{content:counter(s);position:absolute;left:0;top:0;width:24px;height:24px;border-radius:50%;
  background:#eaf3df;color:var(--green-700);font-family:var(--font-display);font-weight:700;font-size:.8rem;
  display:flex;align-items:center;justify-content:center}
.a-body strong{color:var(--ink);font-weight:600}
.a-body a{color:var(--green-700);text-decoration:underline;text-underline-offset:2px}
.a-body blockquote{margin:24px 0;padding:4px 0 4px 22px;border-left:3px solid var(--green);
  font-family:var(--font-display);font-size:1.2rem;font-weight:500;color:var(--ink-700)}

/* CTA */
.a-cta{margin:48px 0 0;padding:clamp(28px,4vw,40px);border-radius:28px;
  background:linear-gradient(150deg,var(--green),var(--green-700));color:#fff;text-align:center;position:relative;overflow:hidden}
.a-cta::before{content:"";position:absolute;width:200px;height:200px;border-radius:50%;background:rgba(255,255,255,.12);top:-90px;right:-50px}
.a-cta h2{font-family:var(--font-display);font-weight:800;font-size:1.55rem;margin-bottom:8px;position:relative}
.a-cta p{color:#ffffffe0;margin-bottom:22px;position:relative}
.a-btn{display:inline-flex;align-items:center;gap:8px;background:#fff;color:var(--ink);font-weight:600;
  padding:15px 28px;border-radius:100px;transition:transform .3s var(--ease),box-shadow .3s var(--ease);position:relative}
.a-btn:hover{transform:translateY(-3px);box-shadow:0 16px 30px -14px rgba(0,0,0,.4)}

/* Footer */
.af{border-top:1px solid var(--line);margin-top:64px;padding:30px clamp(18px,5vw,48px);
  display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center}
.af p{color:var(--muted);font-size:.85rem}
.af nav{display:flex;gap:18px}
.af nav a{color:var(--ink-700);font-size:.88rem;font-weight:500}
.af nav a:hover{color:var(--green-700)}

@media (max-width:600px){
  .af{flex-direction:column;text-align:center}
}