:root { --bg:#f6f4ef; --ink:#1c1c1c; --yel:#f0c419; --card:#fff; --line:#e3dfd4; --mute:#666; }
* { box-sizing:border-box; }
body { margin:0; font:16px/1.55 Verdana, sans-serif; background:var(--bg); color:var(--ink); }
a { color:#8a5a00; }
.w { width:min(1060px, calc(100% - 22px)); margin:0 auto; }
.top { background:#111; color:#f6f4ef; font-size:13px; }
.top .w { display:flex; justify-content:space-between; padding:8px 0; gap:8px; flex-wrap:wrap; }
.top a { color:#f0c419; }
header { background:#fff; border-bottom:4px solid var(--yel); }
header .w { display:flex; align-items:center; justify-content:space-between; min-height:66px; }
.logo { font-weight:800; text-decoration:none; color:#111; letter-spacing:.06em; }
nav a { text-decoration:none; color:#111; margin-left:12px; font-size:13px; font-weight:700; }
.hero { padding:32px 0 8px; display:grid; grid-template-columns:1.4fr .7fr; gap:16px; }
h1 { font-size:clamp(26px,4vw,40px); line-height:1.15; margin:0 0 10px; }
h2 { font-size:22px; }
h3 { font-size:16px; }
.btn { display:inline-block; background:var(--yel); color:#111; text-decoration:none; font-weight:800; padding:10px 14px; }
.box { background:#111; color:#fff; padding:16px; }
.box a { color:var(--yel); }
.grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; }
.card { background:var(--card); border:1px solid var(--line); padding:12px; }
.price { font-weight:800; }
.sec { padding:18px 0; }
footer { background:#111; color:#ddd; padding:18px 0; font-size:13px; margin-top:12px; }
footer a { color:var(--yel); }
label { display:block; font-weight:700; margin:8px 0 4px; }
input, textarea { width:100%; max-width:420px; padding:8px; font:inherit; }
@media (max-width:760px) { .hero, .grid { grid-template-columns:1fr; } nav { display:none; } }