:root{--bg:#f6f4ef;--ink:#1d2320;--mut:#67706b;--line:#d9d6cd;--acc:#2f5d50}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.6 Georgia,'Times New Roman',serif}
a{color:inherit}header,main,footer{max-width:1040px;margin:auto;padding:24px}
header{display:flex;justify-content:space-between;align-items:center;gap:16px}
.logo{font-size:20px;letter-spacing:.04em;text-decoration:none}nav a{margin-left:20px;font:15px system-ui,sans-serif;text-decoration:none;color:var(--mut)}
h1{font-size:clamp(34px,6vw,58px);line-height:1.1;font-weight:400;margin:48px 0 16px;max-width:760px}
.lead{max-width:620px;color:var(--mut)}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin:44px 0}
figure{margin:0}.ph{aspect-ratio:4/3;border-radius:3px}.a{background:linear-gradient(160deg,#7c9a92,#2f5d50 60%,#1d2320)}.b{background:linear-gradient(200deg,#e3c9a8,#b98b63 55%,#5c4635)}.c{background:linear-gradient(180deg,#c6d4db,#7f98a6 60%,#39474f)}
figcaption{font:14px system-ui,sans-serif;color:var(--mut);margin-top:8px}footer{border-top:1px solid var(--line);font:14px system-ui,sans-serif;color:var(--mut)}
.box{max-width:380px;margin:60px auto}label{display:block;font:14px system-ui,sans-serif;margin:14px 0 6px}input{width:100%;padding:11px;border:1px solid var(--line);background:#fff;font:16px system-ui,sans-serif}
button{margin-top:18px;width:100%;padding:12px;border:0;background:var(--acc);color:#fff;font:16px system-ui,sans-serif;cursor:pointer}.err{color:#a33;font:14px system-ui,sans-serif;min-height:22px;margin-top:12px}