:root{
  --yellow:#ffd400;
  --yellow-dark:#e0ab00;
  --ink:#1c1c1c;
  --dark:#232323;
  --muted:#6b6b6b;
  --bg:#ffffff;
  --panel:#f7f7f5;
  --border:#e7e3d8;
}
*{box-sizing:border-box;}
body{
  margin:0;
  font-family:'Segoe UI',Roboto,Tahoma,Arial,sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.6;
}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px;}
a{color:inherit;}

.topbar{
  background:var(--dark);color:#fff;font-size:13px;
}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;padding:8px 24px;flex-wrap:wrap;gap:6px;}
.topbar span{opacity:.85;}

header.main{
  padding:22px 0;border-bottom:3px solid var(--yellow);
}
header.main .wrap{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:18px;}
.brand{display:flex;align-items:center;gap:14px;}
.brand img{width:58px;height:58px;border-radius:50%;}
.brand h1{margin:0;font-size:22px;}
.brand p{margin:2px 0 0;color:var(--muted);font-size:13px;}
.contact-block{text-align:right;font-size:14px;}
.contact-block .phone{font-weight:700;font-size:19px;}

nav.pagenav{
  background:var(--yellow);
}
nav.pagenav .wrap{display:flex;gap:24px;flex-wrap:wrap;padding:10px 24px;}
nav.pagenav a{
  text-decoration:none;color:var(--ink);font-weight:600;font-size:14px;
}

.hero{background:var(--panel);padding:48px 0;}
.hero .inner{display:flex;align-items:center;gap:36px;flex-wrap:wrap;}
.hero .text{flex:1 1 380px;}
.hero h2{font-size:30px;margin:0 0 14px;}
.hero p{color:var(--muted);font-size:16px;margin:0 0 10px;max-width:520px;}
.hero img{max-width:360px;width:100%;height:auto;flex:1 1 320px;}

.stats{padding:44px 0;background:var(--ink);color:#fff;}
.stats .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:24px;text-align:center;}
.stats .num{font-size:34px;font-weight:700;color:var(--yellow);}
.stats .label{font-size:14px;color:#cfcfcf;margin-top:4px;}

section{padding:52px 0;}
section h2{font-size:24px;margin:0 0 6px;text-align:center;}
section .lede{text-align:center;color:var(--muted);margin:0 auto 32px;max-width:600px;font-size:14px;}

.popular-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:22px;}
.popular-card{
  border:1px solid var(--border);border-radius:12px;padding:20px;text-align:center;background:var(--panel);
}
.popular-card img{max-width:120px;max-height:100px;margin:0 auto 14px;display:block;}
.popular-card h3{font-size:15px;margin:0;}

.cat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:26px;}
.cat-card{border:1px solid var(--border);border-radius:12px;padding:22px 20px;}
.cat-card h3{
  margin:0 0 12px;font-size:15px;text-transform:uppercase;letter-spacing:.03em;
  border-bottom:3px solid var(--yellow);padding-bottom:8px;
}
.cat-card ul{margin:0;padding:0;list-style:none;}
.cat-card li{font-size:13.5px;padding:3px 0;}

.tags{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;max-width:900px;margin:0 auto;}
.tags span{
  background:var(--panel);border:1px solid var(--border);padding:7px 14px;border-radius:999px;font-size:13px;
}

.makes-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px;
  max-width:960px;margin:0 auto;
}
.makes-grid span{
  display:block;text-align:center;background:var(--panel);border:1px solid var(--border);
  border-radius:8px;padding:8px 6px;font-size:12.5px;
}

.boxes{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px;}
.boxes .box{border:1px solid var(--border);border-radius:12px;padding:24px;text-align:center;}
.boxes .box img{max-width:150px;max-height:130px;margin:0 auto 14px;display:block;}
.boxes .box h3{margin:0 0 8px;font-size:16px;}
.boxes .box p{color:var(--muted);font-size:13.5px;margin:0;}

.news-list{max-width:700px;margin:0 auto;}
.news-item{display:flex;gap:18px;padding:14px 0;border-bottom:1px solid var(--border);}
.news-item .date{color:var(--muted);font-size:13px;min-width:90px;}
.news-item .title{font-size:15px;}

.contacts-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:30px;}
.contacts-grid .block h3{font-size:15px;margin:0 0 10px;border-bottom:3px solid var(--yellow);display:inline-block;padding-bottom:4px;}
.contacts-grid .block p{margin:4px 0;font-size:14px;}

footer{background:var(--ink);color:#cfcfcf;text-align:center;padding:26px 0;font-size:13px;}
footer .brand-small{color:#fff;font-weight:700;}