:root{
  --text:#e3e3e3; --muted:#b8c3d4; --strong:#fdfdfd;
  --panel:#232427; --panel2:#1e1f22; --border:rgba(255,255,255,.12);
  --brand:#FFD700; --brand-2:#ffea77;
}

/* === ФОН: точечная сетка + лёгкие радиальные пятна === */
body{
  color:var(--text);
  background-color:#1e1f22;

  /* слой 1–2: «дырчатая резина» */
  background-image:
    radial-gradient(circle, rgba(0,0,0,.40) 24%, rgba(0,0,0,0) 25%),
    radial-gradient(circle, rgba(255,255,255,.06) 28%, rgba(255,255,255,0) 29%),

    /* слой 3–4: мягкие виньетки/пятна света */
    radial-gradient(1200px 700px at 20% 25%, rgba(255,255,255,.05), rgba(255,255,255,0) 60%),
    radial-gradient(1200px 800px at 80% 75%, rgba(255,255,255,.035), rgba(255,255,255,0) 65%);

  /* размер/сдвиг сетки точек */
  background-size: 18px 18px, 18px 18px, auto, auto;
  background-position: 0 0, 9px 9px, 0 0, 0 0;

  /* лёгкая глубина без лишнего «overlay шума» */
  background-blend-mode: normal, overlay, normal, normal;

  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* ===== HERO ===== */
.cat-hero{ text-align:center; padding:44px 16px 8px }
.cat-hero h1{ margin:0 0 6px; color:var(--strong); font-size:clamp(26px,4.6vw,40px) }
.cat-hero .lead{ margin:0 auto; color:var(--muted); max-width:900px }

/* ===== Переключатель (Услуги / Продукция) ===== */
.seg{ padding:12px 16px }
.seg-control{
  max-width:1100px; margin:0 auto 10px;
  display:flex; gap:6px;
}
.seg-btn{
  flex:1; padding:10px 12px; border-radius:10px;
  border:1px solid var(--border); background:var(--panel2);
  cursor:pointer; font-weight:700; color:var(--strong);
  transition:.2s;
}
.seg-btn.active{
  background:linear-gradient(180deg,#2a2b2e,#1f2023);
  outline:2px solid var(--brand);
}

/* ===== Фильтры / поиск ===== */
.seg-tools{
  max-width:1100px; margin:0 auto;
  display:flex; gap:12px;
  align-items:center; justify-content:space-between;
  flex-wrap:wrap;
}
.chips{ display:flex; gap:8px; flex-wrap:wrap }
.chip{
  border:1px solid var(--border);
  background:linear-gradient(180deg,var(--panel),var(--panel2));
  color:var(--strong); padding:8px 12px;
  border-radius:999px; cursor:pointer; font-weight:600;
}
.chip.active{ outline:2px solid var(--brand) }

.search{ position:relative }
.search input{
  background:linear-gradient(180deg,#262729,#1f2023);
  color:var(--text); border:1px solid var(--border);
  border-radius:12px; padding:10px 36px 10px 12px;
}
.search svg{
  width:18px; height:18px;
  position:absolute; right:10px; top:50%;
  transform:translateY(-50%);
  stroke:#9aa3ae; fill:none; stroke-width:2;
}

/* ===== Сетка карточек ===== */
.grid{
  max-width:1100px; margin:10px auto 24px;
  padding:0 16px;
  display:grid; gap:12px;
  grid-template-columns:repeat(3,1fr);
}
.card{
  background:linear-gradient(180deg,#262729,#1f2023);
  border:1px solid var(--border); border-radius:16px;
  overflow:hidden; transition:transform .18s ease, box-shadow .18s ease;
}
.card:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 24px rgba(0,0,0,.35);
}
.card img{
  width:100%; height:180px; object-fit:cover; display:block;
}
.card h3{
  margin:10px 12px 6px;
  color:var(--strong); font-size:16px;
}
.card p{
  margin:0 12px 12px;
  color:var(--muted); font-size:14px;
}

/* ===== CTA ===== */
.cat-cta{ padding:10px 16px 36px }
.cat-cta .box{
  max-width:1000px; margin:0 auto;
  text-align:center; padding:26px;
  background:linear-gradient(180deg,#262729,#1e1f22);
  border:1px solid var(--border);
  border-radius:20px;
  box-shadow:0 12px 28px rgba(0,0,0,.35);
}
.cat-cta .btn{
  display:inline-block; margin-top:8px;
  padding:12px 24px; border-radius:14px;
  text-decoration:none; font-weight:700;
  background:linear-gradient(180deg,var(--brand),var(--brand-2));
  color:#111;
}

/* ===== адаптив ===== */
@media(max-width:980px){
  .grid{ grid-template-columns:repeat(2,1fr) }
}
@media(max-width:560px){
  .grid{ grid-template-columns:1fr }
  .card img{ height:165px }
}