:root{
  --ink:#1b1b1a;
  --muted:#6f6f68;
  --line:#e6e3dc;
  --bg:#fbfaf7;
  --card:#ffffff;
  --accent:#8a6f4e;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-weight:600;letter-spacing:-.01em;margin:0}
a{color:inherit;text-decoration:none}
img{max-width:100%}

/* top bar */
.topbar{background:var(--ink);color:#f4f1ea;text-align:center;font-size:13px}
.topbar p{margin:0;padding:9px 16px}

/* nav */
.nav{
  display:flex;align-items:center;gap:24px;
  padding:18px 32px;border-bottom:1px solid var(--line);
  background:#fff;position:sticky;top:0;z-index:10;
}
.brand{font-size:23px;font-weight:700;letter-spacing:-.02em}
.brand span{color:var(--accent)}
.links{list-style:none;display:flex;gap:26px;margin:0;padding:0;margin-left:auto;font-size:15px}
.links a{color:var(--muted)}
.links a:hover{color:var(--ink)}
.icons{display:flex;gap:18px;font-size:18px;align-items:center}
.badge{
  font-size:11px;background:var(--accent);color:#fff;border-radius:20px;
  padding:1px 6px;margin-left:4px;vertical-align:top;
}

/* hero */
.hero{
  display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:center;
  padding:72px 32px;max-width:1200px;margin:0 auto;
}
.eyebrow{
  text-transform:uppercase;letter-spacing:.16em;font-size:12px;
  color:var(--accent);margin:0 0 14px;font-weight:600;
}
.hero h1{font-size:clamp(32px,5vw,52px);line-height:1.12;margin-bottom:18px}
.hero .sub{color:var(--muted);font-size:17px;max-width:44ch;margin:0 0 28px}
.btn{
  display:inline-block;background:var(--ink);color:#fff;
  padding:13px 28px;border-radius:2px;font-size:15px;
}
.btn:hover{background:var(--accent)}
.hero-art{
  height:360px;border-radius:3px;
  background:
    radial-gradient(circle at 30% 30%, #d9cbb6 0 38%, transparent 39%),
    radial-gradient(circle at 72% 66%, #c3cec4 0 26%, transparent 27%),
    linear-gradient(140deg,#efe9de,#e2ddd2);
}

/* strip */
.strip{
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:#fff;
}
.strip div{padding:22px 20px;text-align:center;border-right:1px solid var(--line)}
.strip div:last-child{border-right:0}
.strip strong{display:block;font-size:15px}
.strip span{color:var(--muted);font-size:13px}

/* sections */
.section{max-width:1200px;margin:0 auto;padding:66px 32px}
.section-head{text-align:center;margin-bottom:38px}
.section-head h2{font-size:30px;margin-bottom:8px}
.section-head p{color:var(--muted);margin:0}

/* product grid */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.card{
  background:var(--card);border:1px solid var(--line);border-radius:3px;
  overflow:hidden;transition:transform .18s ease, box-shadow .18s ease;
}
.card:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(0,0,0,.07)}
.thumb{height:220px}
.t1{background:linear-gradient(135deg,#e8ddcd,#cfc0a8)}
.t2{background:linear-gradient(135deg,#dfe4da,#c0cbbd)}
.t3{background:linear-gradient(135deg,#e6e2dd,#cbc4bb)}
.t4{background:linear-gradient(135deg,#f0e3d5,#dcc7ae)}
.t5{background:linear-gradient(135deg,#dde3e8,#bcc7d1)}
.t6{background:linear-gradient(135deg,#ece0e0,#d3bcbc)}
.t7{background:linear-gradient(135deg,#e9e5d6,#cdc6a9)}
.t8{background:linear-gradient(135deg,#e0e0e4,#c2c2cb)}
.body{padding:16px 18px 20px}
.cat{
  text-transform:uppercase;letter-spacing:.12em;font-size:11px;
  color:var(--muted);margin:0 0 6px;
}
.card h3{font-size:16px;font-weight:500;margin-bottom:6px}
.price{margin:0;font-size:15px;color:var(--accent);font-weight:600}

/* band */
.band{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.band-inner{max-width:760px;margin:0 auto;padding:64px 32px;text-align:center}
.band-inner h2{font-size:28px;margin-bottom:14px}
.band-inner p{color:var(--muted);margin:0;font-size:16px}

/* signup */
.signup{display:flex;gap:10px;max-width:460px;margin:0 auto}
.signup input{
  flex:1;padding:13px 14px;border:1px solid var(--line);
  border-radius:2px;font-size:15px;background:#fff;color:var(--ink);
}
.signup input:focus{outline:2px solid var(--accent);outline-offset:-1px}
.signup button{
  padding:13px 24px;border:0;background:var(--ink);color:#fff;
  border-radius:2px;font-size:15px;cursor:pointer;
}
.signup button:hover{background:var(--accent)}

/* footer */
.footer{background:var(--ink);color:#d8d4cb;padding:52px 32px 26px}
.cols{
  max-width:1200px;margin:0 auto;
  display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:34px;
}
.cols h4{color:#fff;font-size:15px;margin-bottom:12px}
.cols p{margin:0;font-size:14px;color:#a9a49a;max-width:34ch}
.cols a{display:block;font-size:14px;color:#a9a49a;padding:3px 0}
.cols a:hover{color:#fff}
.copy{
  max-width:1200px;margin:34px auto 0;padding-top:20px;
  border-top:1px solid #34332f;font-size:13px;color:#8d8880;
}

/* responsive */
@media (max-width:980px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .hero{grid-template-columns:1fr;padding:48px 22px}
  .hero-art{height:230px}
  .strip{grid-template-columns:repeat(2,1fr)}
  .strip div:nth-child(2){border-right:0}
  .cols{grid-template-columns:1fr 1fr}
}
@media (max-width:620px){
  .nav{padding:14px 18px;gap:14px}
  .links{display:none}
  .section{padding:46px 20px}
  .grid{gap:16px}
  .thumb{height:170px}
  .signup{flex-direction:column}
  .cols{grid-template-columns:1fr}
}