:root{
 --forest:#183d36;
 --forest2:#285d4c;
 --cream:#f8f5eb;
 --paper:#fffdf8;
 --amber:#dbad5b;
 --ink:#263b36;
 --muted:#64766e;
 --line:#dbe5da;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
 margin:0;background:var(--cream);color:var(--ink);
 font:16px/1.8 Arial,sans-serif
}
a{color:inherit;text-decoration:none}
.wrap{max-width:1150px;margin:auto;padding:0 25px}
header{background:var(--paper);border-bottom:1px solid var(--line)}
nav{
 display:flex;justify-content:space-between;align-items:center;
 gap:20px;min-height:86px
}
.logo{font-size:26px;font-weight:800}
.logo span{color:var(--forest2)}
.menu{display:flex;flex-wrap:wrap;gap:24px}
.menu a{font-size:14px;font-weight:700}
.menu a:hover{color:var(--forest2)}
.hero{
 background:radial-gradient(circle at 80% 20%,#397463,transparent 38%),
 linear-gradient(125deg,#142f2c,#285d4c);
 color:white;padding:110px 0
}
.kicker{
 color:var(--forest2);text-transform:uppercase;
 font-size:12px;font-weight:800;letter-spacing:2px
}
.hero .kicker{color:var(--amber)}
h1,h2,h3{line-height:1.22}
h1{font-size:clamp(40px,7vw,72px);max-width:850px}
h2{font-size:clamp(29px,4vw,42px)}
h3{font-size:23px}
p{color:var(--muted)}
.hero p{color:#dce8df;font-size:21px;max-width:750px}
.button{
 display:inline-block;background:var(--amber);
 padding:14px 27px;border-radius:7px;
 font-weight:800;color:#21362f;margin-top:20px
}
section{padding:72px 0}
.grid{
 display:grid;grid-template-columns:repeat(3,1fr);
 gap:22px;margin-top:34px
}
.card{
 display:block;background:var(--paper);
 border:1px solid var(--line);padding:30px;
 border-radius:12px;transition:.2s
}
.card:hover{transform:translateY(-4px);border-color:var(--forest2)}
.card small{
 color:var(--forest2);font-size:12px;
 font-weight:800;letter-spacing:1px;text-transform:uppercase
}
.card p{font-size:15px}
.article{
 max-width:850px;margin:70px auto;
 padding:0 25px;min-height:55vh
}
.article h1{font-size:clamp(38px,6vw,57px)}
.article h2{font-size:29px;margin-top:38px}
.article p{font-size:17px;line-height:2}
.feature{
 background:#e4eadb;border-left:5px solid var(--amber);
 padding:40px;border-radius:10px
}
footer{background:var(--forest);color:white;padding:45px 0}
footer p{color:#c8d9d0}
@media(max-width:900px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:650px){
 nav{flex-direction:column;align-items:flex-start;padding:20px 0}
 .menu{gap:13px}.grid{grid-template-columns:1fr}
 .hero{padding:65px 0}section{padding:48px 0}
 .feature{padding:25px}
}