:root{
  --bg:#fafafa; --card:#ffffff; --text:#111; --muted:#555;
  --accent:#111; --line:#e6e6e6;
  --radius:14px;
}
*{box-sizing:border-box}
body{
  margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--bg); color:var(--text);
}
.container{max-width:980px; margin:0 auto; padding:28px 18px}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:14px 0;
}
.brand{font-weight:700; letter-spacing:.2px}
.nav a{color:var(--text); text-decoration:none; margin-left:14px}
.nav a:hover{text-decoration:underline}
.hero{
  border:1px solid var(--line); background:var(--card);
  border-radius:var(--radius); padding:26px; margin-top:10px;
}
.hero h1{margin:0 0 10px; font-size:34px}
.hero p{margin:0; color:var(--muted); line-height:1.6}
.btns{display:flex; flex-wrap:wrap; gap:10px; margin-top:18px}
.btn{
  display:inline-block; padding:12px 14px; border-radius:12px;
  border:1px solid var(--accent); text-decoration:none;
  color:var(--bg); background:var(--accent);
}
.btn.secondary{background:transparent; color:var(--accent)}
.grid{display:grid; gap:14px; margin-top:16px}
@media(min-width:780px){.grid{grid-template-columns:repeat(3,1fr)}}
.card{
  border:1px solid var(--line); background:var(--card);
  border-radius:var(--radius); padding:16px;
}
.card h3{margin:0 0 8px}
.small{color:var(--muted); font-size:14px; line-height:1.6}
.footer{margin-top:26px; color:var(--muted); font-size:13px}
hr{border:none; border-top:1px solid var(--line); margin:22px 0}
.list{margin:0; padding-left:18px; color:var(--muted); line-height:1.
}
.products{
  display:grid; gap:14px; margin-top:16px;
}
@media(min-width:780px){.products{grid-template-columns:repeat(3,1fr)}}

.product{
  display:block;
  border:1px solid var(--line);
  background:var(--card);
  border-radius:var(--radius);
  overflow:hidden;
  text-decoration:none;
  color:var(--text);
}
.product:hover{transform:translateY(-1px)}
.product img{
  width:100%;
  height:190px;
  object-fit:cover;
  display:block;
  background:#f0f0f0;
}
.product .pbody{padding:14px}
.product .ptitle{font-weight:650; margin:0 0 6px}
.product .pmeta{margin:0; color:var(--muted); font-size:14px; line-height:1.5}
.badge{
  display:inline-block; padding:6px 10px; border-radius:999px;
  border:1px solid var(--line); background:#fff; color:var(--muted);
  font-size:13px;
}