/* =====================================================
   МебельСелл — style-index.css
   Уникальные блоки главной страницы (index.html):
   hero, trust-strip, каталог категорий, process, cta-band.
   Шапка/подвал — в style-header-footer.css (header.html/footer.html).
   ===================================================== */

:root{
  --ink:#2B2E33;
  --cream:#F7F5F1;
  --wood:#B8875A;
  --sage:#69766B;
  --line:#DCD6C9;
  --white:#FFFFFF;
  --rust:#A85C32;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
html, body{overflow-x:hidden; max-width:100%;}
body{
  font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background:var(--cream);
  color:var(--ink);
  line-height:1.5;
}
a{color:inherit; text-decoration:none;}
img{display:block; max-width:100%;}
ul{list-style:none;}

.wrap{max-width:1240px; margin:0 auto; padding:0 32px;}

@media(max-width:960px){
  .wrap{padding:0 20px;}
}

/* ---------- HERO ---------- */
.hero{
  position:relative; overflow:hidden;
  min-height:640px;
  display:flex; align-items:center;
  background:linear-gradient(100deg, #F2EEE6 0%, #EDE7DA 55%, #E6DFCF 100%);
}
.hero-rays{
  position:absolute; inset:0; z-index:0;
  background:repeating-linear-gradient(
    70deg,
    rgba(255,255,255,.55) 0px, rgba(255,255,255,.55) 46px,
    transparent 46px, transparent 132px
  );
  mix-blend-mode:soft-light;
}
.hero-room{
  position:absolute; right:20px; bottom:0; z-index:1;
  height:78%; max-height:460px; width:auto; max-width:44%;
  display:flex; align-items:flex-end; justify-content:flex-end;
}
.hero-room svg{height:100%; width:auto; max-width:100%; display:block;}
.hero::after{
  content:''; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(90deg, #F2EEE6 0%, rgba(242,238,230,.85) 34%, rgba(242,238,230,0) 62%);
}
.hero-inner{
  position:relative; z-index:3; width:100%;
  padding:110px 0;
}
.eyebrow{
  font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.14em;
  color:var(--rust); margin-bottom:18px;
  display:flex; align-items:center; gap:10px;
}
.eyebrow::before{content:''; width:26px; height:1px; background:var(--rust);}
h1{
  font-family:Arial, sans-serif; font-weight:800; text-transform:uppercase;
  letter-spacing:-0.02em; font-size:60px; line-height:.98; margin-bottom:26px;
  color:var(--ink); max-width:640px;
}
h1 em{
  font-style:normal; color:var(--rust);
}
.hero-sub{
  font-size:17px; color:#4a4e52; max-width:460px; margin-bottom:34px;
  font-family: Georgia, 'Times New Roman', serif; line-height:1.7;
}
.hero-actions{display:flex; gap:14px; margin-bottom:16px;}
.btn-primary{
  background:var(--ink); color:var(--cream); padding:15px 28px;
  font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.03em;
  border-radius:8px; display:inline-block;
}
.btn-primary:hover{background:var(--wood);}
.btn-ghost{
  border:1.5px solid var(--ink); color:var(--ink); padding:14px 26px;
  font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.03em;
  border-radius:8px; display:inline-block;
}
.btn-ghost:hover{background:var(--ink); color:var(--cream);}

/* ---------- TRUST STRIP ---------- */
.trust{
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:26px 0; background:var(--white);
}
.trust-row{display:flex; justify-content:space-between; flex-wrap:wrap; gap:20px;}
.trust-item{
  display:flex; align-items:center; gap:12px; font-size:13px; color:#4a4e52; flex:1; min-width:220px;
}
.trust-item b{
  font-family:Arial,sans-serif; font-weight:800; font-size:15px; color:var(--ink); display:block;
}
.trust-dot{
  width:34px; height:34px; border-radius:50%; background:var(--cream);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  font-size:15px;
}

/* ---------- CATALOG (8 категорий на главной) ---------- */
.catalog{padding:100px 0 40px; scroll-margin-top:90px;}
.section-head{
  display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:44px; gap:20px; flex-wrap:wrap;
}
.section-head h2{
  font-family:Arial,sans-serif; font-weight:800; text-transform:uppercase; font-size:32px; letter-spacing:-0.01em;
}
.section-head p{
  font-size:14px; color:#6b6f73; max-width:340px;
}

.cat-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:20px;
}
.cat-card{
  background:var(--white); border:1px solid var(--line); border-radius:10px; overflow:hidden;
  transition:transform .2s ease, box-shadow .2s ease;
}
.cat-card:hover{transform:translateY(-4px); box-shadow:0 20px 40px rgba(43,46,51,.1);}
.cat-swatch{
  height:150px; position:relative;
}
@media(min-width:901px){
  .cat-swatch{height:280px;}
}
.cat-swatch img{width:100%; height:100%; object-fit:cover;}
.cat-card:nth-child(1) .cat-swatch{background:#EFEBE3;}
.cat-card:nth-child(2) .cat-swatch{background:#EFEBE3;}
.cat-card:nth-child(3) .cat-swatch{background:#EFEBE3;}
.cat-card:nth-child(4) .cat-swatch{background:#EFEBE3;}
.cat-card:nth-child(5) .cat-swatch{background:#EFEBE3;}
.cat-card:nth-child(6) .cat-swatch{background:#EFEBE3;}
.cat-card:nth-child(7) .cat-swatch{background:#EFEBE3;}
.cat-card:nth-child(8) .cat-swatch{background:#EFEBE3;}
.cat-body{padding:18px 20px 22px;}
.cat-body h3{
  font-family:Arial,sans-serif; font-weight:800; text-transform:uppercase; font-size:16px; margin-bottom:6px;
}
.cat-body p{font-size:12.5px; color:#6b6f73; margin-bottom:14px;}
.cat-link{font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--rust);}
.cat-link::after{content:' →';}

/* ---------- PROCESS ("Как купить") ---------- */
.process{padding:90px 0;}
.process-row{
  display:grid; grid-template-columns:repeat(3,1fr); gap:0;
  border-top:1px solid var(--line);
}
.process-item{
  padding:44px 26px 34px 24px;
}
.process-item:first-child{padding-left:0;}
.process-item:not(:last-child){border-right:1px solid var(--line);}
.process-item .num{
  font-family:Arial,sans-serif; font-weight:800; font-size:13px; color:var(--rust); margin-bottom:14px;
}
.process-item h4{
  font-family:Arial,sans-serif; font-weight:800; text-transform:uppercase; font-size:16px; margin-bottom:10px;
}
.process-item p{font-size:13.5px; color:#54595E; line-height:1.65;}

/* ---------- CTA BAND ---------- */
.cta-band{
  background:var(--white); color:var(--ink); padding:70px 0; margin-top:20px;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  scroll-margin-top:90px;
}
.cta-band .wrap{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:24px;}
.cta-band h3{
  font-family:Arial,sans-serif; font-weight:800; text-transform:uppercase; font-size:26px; max-width:460px; line-height:1.15;
  color:var(--ink);
}
.cta-band .btn-primary{background:var(--ink); color:var(--cream);}
.cta-band .btn-primary:hover{background:var(--wood);}

/* ---------- MEDIA ---------- */
@media(max-width:900px){
  .cat-grid{grid-template-columns:repeat(2,1fr);}
  .process-row{grid-template-columns:1fr;}
  .process-item{border-right:none; border-bottom:1px solid var(--line);}
  h1{font-size:38px;}
  .hero{min-height:520px;}
  .hero-inner{padding:70px 0;}
  .hero-room{display:none;}
  .hero::after{background:none;}
}