:root{
  --orange:#D35400;
  --amber:#F5B041;
  --ink:#1E1E1E;
  --muted:#6B7177;
  --bg:#FFFFFF;
  --maxw: 1040px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font:16px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif}

.wrap{max-width:var(--maxw);margin:0 auto;padding:20px}
header{display:flex;gap:18px;align-items:center;border-bottom:1px solid #eee;padding-block:24px}
.logo{width:96px;height:auto;border-radius:12px}
.title h1{margin:0;font-size:clamp(24px,3.2vw,34px);font-weight:800;letter-spacing:-0.02em}
.tagline{margin:6px 0 0 0;color:var(--muted)}

.hero{padding:28px 0}
.hero h2{margin:0 0 8px 0;font-size:clamp(20px,2.6vw,26px)}
.hero p{margin:0 0 16px 0;color:var(--ink)}

.button{display:inline-block;padding:10px 16px;border-radius:10px;background:var(--orange);color:#fff;text-decoration:none;font-weight:600;margin-right:10px}
.button.ghost{background:transparent;color:var(--orange);border:2px solid var(--orange)}

.grid{display:grid;gap:18px;grid-template-columns:repeat(3,1fr);padding:8px 0 36px}
.grid article{border:1px solid #eee;border-radius:12px;padding:16px}
.grid h3{margin:0 0 6px 0;font-size:18px}
.list{margin:0;padding-left:18px}

footer{background:#fafafa;border-top:1px solid #eee;padding:16px 0}
footer .small{color:var(--muted);margin:6px 0 0 0;font-size:14px}

@media (max-width:840px){
  .grid{grid-template-columns:1fr}
}