:root{--bg:#f7f7f7;--card:#ffffff;--text:#222;--muted:#555;--line:#e2e2e2;--accent:#2e6b57;}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Arial,Helvetica,sans-serif;color:var(--text);background:var(--bg);}
a{color:#0a4aa6;text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1020px;margin:0 auto;padding:16px;}
.topbar{background:#fff;border-bottom:1px solid var(--line);}
.brand{display:flex;align-items:center;gap:10px;padding:12px 0;}
.brand .logo{width:38px;height:38px;border-radius:6px;background:var(--accent);}
.brand .name{font-size:20px;font-weight:700;letter-spacing:.2px}
.nav{display:flex;flex-wrap:wrap;gap:10px;padding:8px 0 12px;}
.nav a{display:inline-block;padding:7px 10px;border:1px solid var(--line);border-radius:999px;background:#fff;font-size:13px}
.hero{background:#fff;border-bottom:1px solid var(--line);}
.hero-inner{display:grid;grid-template-columns:1.25fr .75fr;gap:14px;align-items:stretch;padding:16px 0;}
.hero img{width:100%;height:320px;object-fit:cover;border-radius:10px;border:1px solid var(--line);}
.hero h1{margin:0 0 10px 0;font-size:30px;line-height:1.15}
.hero p{margin:0;color:var(--muted);line-height:1.6}
.section{margin:18px 0;}
.section h2{margin:0 0 10px 0;font-size:20px}
.section p{margin:0 0 10px 0;line-height:1.75;color:var(--text)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:12px}
.card h3{margin:0 0 6px 0;font-size:16px}
.card p{margin:0;color:var(--muted);line-height:1.6;font-size:13px}
.focus{background:#fff;border:1px solid var(--line);border-left:6px solid var(--accent);border-radius:10px;padding:12px}
.footer{border-top:1px solid var(--line);background:#fff;margin-top:24px}
.footer p{margin:0;color:var(--muted);padding:14px 0;font-size:13px}
@media (max-width:860px){
  .hero-inner{grid-template-columns:1fr}
  .grid{grid-template-columns:1fr}
  .hero img{height:240px}
}