:root{--ink:hsl(40 25% 14%);--acc:hsl(40 56% 34%);--bg:hsl(40 30% 97%);--soft:hsl(40 40% 90%);--muted:hsl(40 12% 40%);--line:hsl(40 20% 85%)}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.65 'Palatino Linotype',Palatino,serif}
.wrap{max-width:940px;margin:0 auto;padding:0 22px}
header{border-bottom:1px solid var(--line);padding:16px 0}
header .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px}
header nav a{color:var(--muted);text-decoration:none;margin-left:18px}
.brand{font-weight:700;color:var(--ink);text-decoration:none}
.hero{padding:51px 0 36px;background:linear-gradient(180deg,var(--soft),transparent)}
h1{font-size:37px;margin:0 0 12px;line-height:1.2}
p{color:var(--muted)}
.btn{display:inline-block;margin-top:18px;background:var(--acc);color:#fff;padding:10px 18px;border-radius:16px;text-decoration:none}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;padding:32px 0}
.card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px}
.card h3{margin:0 0 6px;font-size:18px}
code{background:var(--soft);padding:1px 5px;border-radius:4px}
footer{border-top:1px solid var(--line);margin-top:40px;padding:20px 0;color:var(--muted);font-size:14px}