:root{
  --ink:#0B0B0C;
  --porcelain:#F6F5F3;
  --metal:#C9C7C2;
  --champagne:#A38B5F;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--porcelain);color:var(--ink);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;line-height:1.45}
.container{max-width:1200px;margin:0 auto;padding:24px}
.nav{display:flex;justify-content:space-between;align-items:center}
.logo{font-weight:700;letter-spacing:.5px}
.nav-links a{margin-left:16px;text-decoration:none;color:var(--ink);opacity:.8}
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:32px;align-items:center;padding-top:24px;padding-bottom:24px}
.hero h1{font-size:40px;line-height:1.1;margin:0 0 8px}
.hero p{font-size:18px;opacity:.9;margin:0 0 16px}
.cta-row{display:flex;gap:12px;margin:18px 0}
.btn{border:1px solid var(--ink);padding:12px 18px;border-radius:12px;text-decoration:none;display:inline-block}
.btn.primary{background:var(--ink);color:white;border-color:var(--ink)}
.btn.ghost{background:transparent}
.btn.small{padding:10px 14px;font-size:14px}
.trust{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px;opacity:.8;font-size:14px}
.hero-media .bag-frame{height:360px;border-radius:24px;background:linear-gradient(120deg,#ddd,#eee);display:flex;align-items:center;justify-content:center;color:#666}
.usps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:24px}
.usp{background:white;border:1px solid #e5e5e5;border-radius:16px;padding:16px}
.inside{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:24px;align-items:center}
.inside-media{height:280px;border-radius:20px;border:1px dashed #c8c8c8;display:flex;align-items:center;justify-content:center;color:#777;background:#fff}
.colors h2,.compare h2,.ugc h2,.faq h2{margin-top:8px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.card{background:white;border:1px solid #e5e5e5;border-radius:16px;padding:16px}
.swatch{height:120px;border-radius:12px;background:#111}
.swatch.graffiti{background:repeating-linear-gradient(45deg,#222 0 10px,#444 10px 20px,#666 20px 30px)}
.swatch.beige{background:linear-gradient(135deg,#d1c7b8,#b08d62)}
.compare .table{display:grid;border-radius:16px;overflow:hidden;border:1px solid #e5e5e5;background:white}
.compare .row{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:12px;padding:12px 16px;border-bottom:1px solid #eee}
.compare .row.head{background:#fafafa;font-weight:600}
.ugc blockquote{background:white;border-left:4px solid var(--champagne);margin:0;padding:16px;border-radius:12px;border:1px solid #eee}
.band{background:var(--ink);color:white;padding:18px;border-radius:14px;text-align:center}
.faq details{background:white;border:1px solid #e5e5e5;border-radius:12px;padding:12px;margin-bottom:10px}
.footer{display:flex;justify-content:space-between;align-items:center;opacity:.8;font-size:14px;margin-top:24px}
.mini-links a{margin-left:12px;color:inherit;text-decoration:none;opacity:.8}
@media (max-width: 900px){
  .hero{grid-template-columns:1fr}
  .inside{grid-template-columns:1fr}
  .usps{grid-template-columns:1fr 1fr}
  .grid3{grid-template-columns:1fr}
}