:root{
  --bg:#f7f4ee;
  --card:#ffffff;
  --text:#20302d;
  --muted:#66736f;
  --accent:#2c7c73;
  --accent2:#d99552;
  --line:#e7dfd3;
  --max:1100px;
}
*{box-sizing:border-box}
body{margin:0;font-family:Arial,Helvetica,sans-serif;background:var(--bg);color:var(--text);line-height:1.65}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.site-header{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}
.nav{max-width:var(--max);margin:auto;padding:14px 20px;display:flex;gap:22px;align-items:center;justify-content:space-between}
.brand{font-weight:800;font-size:20px;color:var(--text)}
.menu{display:flex;gap:16px;flex-wrap:wrap;font-size:14px}
.hero{max-width:var(--max);margin:34px auto 20px;padding:50px 34px;background:linear-gradient(135deg,#eef6f3,#fff7ed);border:1px solid var(--line);border-radius:22px}
.hero h1{font-size:42px;line-height:1.1;margin:0 0 14px}
.hero p{max-width:760px;font-size:18px;color:var(--muted)}
.cta{display:inline-block;margin-top:10px;background:var(--accent);color:#fff;padding:12px 18px;border-radius:10px;font-weight:700}
.wrap{max-width:var(--max);margin:auto;padding:0 20px 50px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px}
.card h2,.card h3{margin-top:0}
.article{max-width:850px;margin:30px auto;background:#fff;border:1px solid var(--line);border-radius:18px;padding:34px}
.article h1{font-size:38px;line-height:1.15}
.article h2{margin-top:34px;font-size:26px}
.article h3{margin-top:24px}
.note{background:#f1f7f5;border-left:4px solid var(--accent);padding:16px 18px;border-radius:8px;margin:22px 0}
.compare{width:100%;border-collapse:collapse;margin:20px 0}
.compare th,.compare td{border:1px solid var(--line);padding:12px;text-align:left;vertical-align:top}
.compare th{background:#f5f1ea}
footer{background:#1f2c29;color:#e8efed;margin-top:50px}
footer .inner{max-width:var(--max);margin:auto;padding:30px 20px;font-size:14px}
footer a{color:#fff}
@media(max-width:800px){
  .nav{align-items:flex-start;flex-direction:column}
  .grid{grid-template-columns:1fr}
  .hero h1,.article h1{font-size:32px}
  .hero{padding:34px 22px}
  .article{padding:24px}
}


.feature-img{margin:22px 0 30px}
.feature-img img{display:block;width:100%;height:430px;object-fit:cover;border-radius:16px;border:1px solid var(--line);background:#eee}
.feature-img figcaption{font-size:12px;color:var(--muted);margin-top:7px}
.hero-photo{margin:22px 0 0}
.hero-photo img{display:block;width:100%;height:380px;object-fit:cover;border-radius:16px}
@media(max-width:800px){
  .feature-img img,.hero-photo img{height:260px}
}