/* =========================================================
   ЛИДЕР-С — корпоративный сайт
   Design tokens: графит (глубокий, почти чёрный) + акцент "медь / расплав"
   (концепция 3 — copper→hot градиент вместо плоского молтен-оранжа)
   Display: Oswald (штампованная промышленная табличка)
   Body: Inter | Data/Article-no: IBM Plex Mono
   ========================================================= */

:root{
  --c-graphite:      #0E1013;
  --c-graphite-2:    #17191D;
  --c-steel:         #2B3B4E;
  --c-steel-light:   #48607A;
  --c-fog:           #EEF1F3;
  --c-fog-2:         #E3E8EC;
  --c-white:         #FFFFFF;
  --c-ink:           #14181D;
  --c-ink-soft:      #4B5560;

  --c-molten:        #E08A3E;
  --c-molten-light:  #FF6A3D;
  --c-molten-dark:   #A85A22;
  --c-molten-glow:   rgba(224,138,62,.32);
  --c-cold:          #3E7CB1;
  --c-warn:          #F0A93B;

  --radius-s: 3px;
  --radius-m: 6px;

  --font-display: 'Oswald', 'Arial Narrow', sans-serif;
  --font-body: 'Inter', -apple-system, Segoe UI, Roboto, sans-serif;
  --font-mono: 'IBM Plex Mono', 'Courier New', monospace;

  --shadow-card: 0 1px 2px rgba(20,24,29,.06), 0 6px 20px -8px rgba(20,24,29,.18);
  --shadow-lift: 0 12px 32px -12px rgba(20,24,29,.35);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--c-ink);
  background:var(--c-fog);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{
  font-family:var(--font-display);
  text-transform:uppercase;
  letter-spacing:.02em;
  font-weight:600;
  margin:0 0 .5em;
  color:var(--c-graphite);
}
p{ margin:0 0 1em; }
.container{ max-width:1180px; margin:0 auto; padding:0 24px; }

:focus-visible{ outline:3px solid var(--c-molten-light); outline-offset:2px; }

/* ---------- hazard divider (used sparingly — section seams) ---------- */
.hazard-rule{
  height:6px;
  background:repeating-linear-gradient(
    -45deg,
    var(--c-warn) 0 14px,
    var(--c-graphite) 14px 28px
  );
  opacity:.9;
}

/* ---------- header ---------- */
.site-header{
  background:var(--c-graphite);
  color:var(--c-fog);
  position:sticky; top:0; z-index:50;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.site-header::before{
  content:"";
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(180deg, rgba(14,16,19,.93) 0%, rgba(14,16,19,.89) 100%),
    url("../img/hero-texture.jpg");
  background-repeat:no-repeat;
  background-position:center, 30% 55%;
  background-size:auto, cover;
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 24px; gap:24px; flex-wrap:wrap;
}
.logo{ display:flex; align-items:center; }
.logo-img{ height:36px; width:auto; display:block; }

.main-nav{ display:flex; gap:2px; flex-wrap:wrap; }
.main-nav a{
  padding:10px 14px; font-size:14px; font-weight:500;
  color:#C7D0D9; border-radius:var(--radius-s);
  transition:background .15s,color .15s;
  white-space:nowrap;
}
.main-nav a:hover, .main-nav a.active{ background:rgba(255,255,255,.08); color:var(--c-white); }

.header-actions{ display:flex; align-items:center; gap:14px; }
.header-phone{ font-family:var(--font-mono); font-size:15px; color:var(--c-white); }
.header-phone-label{ display:block; font-family:var(--font-body); font-size:11px; color:#9FADBB; }
.header-phone-numbers a{ color:inherit; }
.header-phone-numbers a:hover{ text-decoration:underline; }

.burger{ display:none; background:none; border:0; color:var(--c-white); font-size:24px; cursor:pointer; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-body); font-weight:600; font-size:14px;
  padding:12px 22px; border-radius:var(--radius-s); border:1px solid transparent;
  cursor:pointer; transition:transform .12s, box-shadow .12s, background .15s, border-color .15s;
  line-height:1;
}
.btn:active{ transform:translateY(1px); }
.btn-primary{
  background:linear-gradient(135deg, var(--c-molten) 0%, var(--c-molten-light) 100%);
  color:var(--c-graphite); font-weight:700;
}
.btn-primary:hover{ background:linear-gradient(135deg, var(--c-molten-dark) 0%, var(--c-molten) 100%); color:var(--c-white); }
.btn-outline{ background:transparent; border-color:rgba(255,255,255,.35); color:var(--c-white); }
.btn-outline:hover{ border-color:var(--c-white); }
.btn-ghost{ background:var(--c-fog-2); color:var(--c-graphite); }
.btn-ghost:hover{ background:#D8DFE5; }
.btn-block{ width:100%; }
.btn-sm{ padding:8px 14px; font-size:13px; }

/* ---------- hero ---------- */
.hero{
  position:relative; z-index:0;
  background:
    radial-gradient(1100px 480px at 88% -10%, var(--c-molten-glow), transparent 60%),
    radial-gradient(700px 360px at 6% 115%, rgba(255,106,61,.14), transparent 60%),
    linear-gradient(180deg, var(--c-graphite) 0%, var(--c-graphite-2) 100%);
  color:var(--c-white);
  padding:96px 0 68px;
  overflow:hidden;
}
/* гранёная фактура (фон 1.jpg) под тёмно-медной тонировкой — концепция «Грань. Тёмная» */
.hero::before{
  content:"";
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(100deg, rgba(14,16,19,.95) 0%, rgba(14,16,19,.8) 40%, rgba(224,138,62,.24) 72%, rgba(14,16,19,.55) 100%),
    linear-gradient(0deg, rgba(14,16,19,.9) 0%, transparent 46%),
    url("../img/hero-texture.jpg");
  background-repeat:no-repeat;
  background-position:center, center, 62% 35%;
  background-size:auto, auto, cover;
}
.hero::after{
  content:"";
  position:absolute; inset:auto 0 0 0; height:6px;
  background:repeating-linear-gradient(-45deg, var(--c-warn) 0 14px, var(--c-graphite) 14px 28px);
}
.hero-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center; }
.hero-eyebrow{
  font-family:var(--font-mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--c-molten-light); margin-bottom:14px;
}
.hero h1{
  background:linear-gradient(100deg, var(--c-white) 35%, var(--c-molten-light) 115%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  font-size:50px; line-height:1.04; letter-spacing:0; margin-bottom:20px; max-width:15ch;
}
.hero-lead{ color:#C7D0D9; font-size:17px; max-width:46ch; margin-bottom:30px; }
.hero-cta{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:34px; }
.hero-stats{ display:flex; gap:32px; flex-wrap:wrap; }
.hero-stat b{ display:block; font-family:var(--font-display); font-size:28px; color:var(--c-white); }
.hero-stat span{ font-size:12px; color:#93A2B1; text-transform:uppercase; letter-spacing:.06em; }

.hero-plate{
  background:var(--c-graphite-2);
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius-m);
  padding:24px;
  box-shadow:var(--shadow-lift);
  position:relative;
}
.hero-plate::before, .hero-plate::after{
  content:""; position:absolute; width:8px; height:8px; border-radius:50%;
  background:#3A4655; top:12px; left:12px; box-shadow: 0 0 0 2px rgba(0,0,0,.3) inset;
}
.hero-plate::after{ left:auto; right:12px; }
.hero-plate h3{ color:var(--c-white); font-size:16px; margin-bottom:16px; }

/* ---------- sections ---------- */
.section{ padding:64px 0; }
.section-tight{ padding:44px 0; }
.section-alt{ background:var(--c-white); }
.section-dark{
  position:relative; z-index:0;
  background:
    radial-gradient(900px 380px at 90% 0%, rgba(224,138,62,.14), transparent 55%),
    var(--c-graphite);
  color:var(--c-fog);
}
.section-dark::before{
  content:"";
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(100deg, rgba(14,16,19,.92) 0%, rgba(14,16,19,.78) 45%, rgba(224,138,62,.2) 78%, rgba(14,16,19,.6) 100%),
    url("../img/hero-texture.jpg");
  background-repeat:no-repeat;
  background-position:center, 40% 70%;
  background-size:auto, cover;
}
.section-dark h2{ color:var(--c-white); }
.section-head{ max-width:640px; margin-bottom:40px; }
.section-eyebrow{
  font-family:var(--font-mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--c-molten-dark); margin-bottom:10px; display:block;
}
.section-dark .section-eyebrow{ color:var(--c-molten-light); }
.section-head h2{ font-size:30px; }
.section-head p{ color:var(--c-ink-soft); font-size:15px; }
.section-dark .section-head p{ color:#AFBBC6; }
#about-intro-text{ white-space:pre-line; }

/* ---------- USP cards ---------- */
.usp-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.usp-card{
  background:var(--c-white); border-radius:var(--radius-m); padding:24px 20px;
  box-shadow:var(--shadow-card);
  border-top:3px solid transparent;
  border-image:linear-gradient(90deg, var(--c-molten), var(--c-molten-light)) 1;
  clip-path:polygon(0 0,100% 0,100% 100%,14px 100%,0 calc(100% - 14px));
}
.usp-icon{
  width:40px; height:40px; border-radius:var(--radius-s);
  background:var(--c-graphite); color:var(--c-molten-light);
  display:flex; align-items:center; justify-content:center; margin-bottom:14px;
  font-family:var(--font-mono); font-weight:700;
}
.usp-card h3{ font-size:15px; margin-bottom:8px; }
.usp-card p{ font-size:13.5px; color:var(--c-ink-soft); margin:0; }

/* ---------- category tiles (home) ---------- */
.cat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.cat-tile{
  background:var(--c-graphite-2); color:var(--c-white); border-radius:var(--radius-m);
  padding:22px; position:relative; overflow:hidden; min-height:140px;
  display:flex; flex-direction:column; justify-content:flex-end; gap:6px;
  transition:transform .15s, box-shadow .15s;
}
.cat-tile:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lift); }
.cat-tile::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(135deg, var(--c-molten-glow), transparent 60%);
}
.cat-tile .cat-index{ font-family:var(--font-mono); font-size:12px; color:var(--c-molten-light); position:relative; }
.cat-tile h3{ position:relative; font-size:17px; margin:0; color:var(--c-white); }
.cat-tile span.cat-count{ position:relative; font-size:12px; color:#9FADBB; }

/* ---------- why-us on home reuse usp style ---------- */

/* ---------- catalog layout ---------- */
.catalog-shell{ display:grid; grid-template-columns:260px 1fr; gap:32px; align-items:start; }
.catalog-filters{
  background:var(--c-white); border-radius:var(--radius-m); box-shadow:var(--shadow-card);
  padding:20px; position:sticky; top:88px;
}
.filter-group{ margin-bottom:22px; }
.filter-group:last-child{ margin-bottom:0; }
.filter-title{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--c-ink-soft); margin-bottom:10px;
}
.filter-list li{ margin-bottom:2px; }
.filter-btn{
  width:100%; text-align:left; background:none; border:0; padding:8px 10px; border-radius:var(--radius-s);
  font-size:13.5px; color:var(--c-ink); cursor:pointer; display:flex; justify-content:space-between; gap:8px;
}
.filter-btn:hover{ background:var(--c-fog); }
.filter-btn.active{ background:var(--c-graphite); color:var(--c-white); }
.filter-btn .cnt{ color:var(--c-ink-soft); font-family:var(--font-mono); font-size:11px; }
.filter-btn.active .cnt{ color:#9FADBB; }
.filter-sub{ padding-left:12px; margin-top:2px; display:none; }
.filter-sub.open{ display:block; }

.search-box{
  display:flex; align-items:center; gap:8px; background:var(--c-fog);
  border-radius:var(--radius-s); padding:10px 12px; margin-bottom:18px;
}
.search-box input{
  border:0; background:none; outline:0; font-size:14px; width:100%; font-family:var(--font-body); color:var(--c-ink);
}

.catalog-toolbar{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; flex-wrap:wrap; gap:10px; }
.result-count{ font-size:13px; color:var(--c-ink-soft); }
.breadcrumbs{ font-size:12.5px; color:var(--c-ink-soft); margin-bottom:14px; }
.breadcrumbs a:hover{ color:var(--c-molten-dark); }

.product-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }

/* ---------- product card (spec plate) — signature element ---------- */
.product-card{
  background:var(--c-white); border-radius:var(--radius-m); box-shadow:var(--shadow-card);
  border:1px solid var(--c-fog-2); overflow:hidden; display:flex; flex-direction:column;
  transition:box-shadow .15s, transform .15s;
}
.product-card:hover{ box-shadow:var(--shadow-lift); transform:translateY(-2px); }
.plate-head{
  background:var(--c-graphite); color:var(--c-white); padding:12px 16px;
  display:flex; justify-content:space-between; align-items:center; position:relative;
}
.plate-head .article{ font-family:var(--font-mono); font-size:12px; color:var(--c-molten-light); letter-spacing:.03em; }
.plate-head .tag{ font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:#9FADBB; }
.product-card .body{ padding:16px; flex:1; display:flex; flex-direction:column; gap:10px; }
.product-card h3{ font-size:16px; margin:0; text-transform:none; letter-spacing:0; }
.product-card .desc{ font-size:13.5px; color:var(--c-ink-soft); margin:0; }
.product-card .application{ font-size:12.5px; color:var(--c-graphite); background:var(--c-fog); border-radius:var(--radius-s); padding:8px 10px; }
.product-card .application b{ font-family:var(--font-mono); font-weight:600; font-size:11px; text-transform:uppercase; letter-spacing:.05em; display:block; margin-bottom:3px; color:var(--c-ink-soft); }

/* temperature gradient bar — signature detail */
.temp-scale{ margin-top:2px; }
.temp-scale .labels{ display:flex; justify-content:space-between; font-family:var(--font-mono); font-size:10.5px; color:var(--c-ink-soft); margin-bottom:4px; }
.temp-bar{ height:6px; border-radius:4px; background:linear-gradient(90deg, var(--c-cold), var(--c-warn) 55%, var(--c-molten)); position:relative; }
.temp-bar .marker{ position:absolute; top:-3px; width:2px; height:12px; background:var(--c-graphite); border-radius:1px; }

.card-actions{ display:flex; gap:8px; padding:0 16px 16px; margin-top:auto; }
.card-actions .btn{ flex:1; }

/* ---------- product modal detail table ---------- */
.spec-table{ width:100%; border-collapse:collapse; font-size:13.5px; margin:14px 0; }
.spec-table th, .spec-table td{ text-align:left; padding:9px 10px; border-bottom:1px solid var(--c-fog-2); }
.spec-table th{ width:44%; color:var(--c-ink-soft); font-weight:500; font-family:var(--font-mono); font-size:12px; text-transform:uppercase; letter-spacing:.03em; }

/* ---------- modal ---------- */
.modal-overlay{
  position:fixed; inset:0; background:rgba(20,24,29,.62); display:none;
  align-items:flex-start; justify-content:center; padding:40px 16px; z-index:200; overflow-y:auto;
}
.modal-overlay.open{ display:flex; }
.modal{
  background:var(--c-white); border-radius:var(--radius-m); width:100%; max-width:560px;
  box-shadow:var(--shadow-lift); position:relative; animation:pop .15s ease-out;
}
.modal.modal-wide{ max-width:760px; }
@keyframes pop{ from{ transform:translateY(8px); opacity:0; } to{ transform:translateY(0); opacity:1; } }
.modal-head{ display:flex; justify-content:space-between; align-items:flex-start; padding:20px 22px; border-bottom:1px solid var(--c-fog-2); gap:12px; }
.modal-head h3{ font-size:19px; margin:0; text-transform:none; letter-spacing:0; }
.modal-close{ background:var(--c-fog); border:0; width:32px; height:32px; border-radius:50%; cursor:pointer; font-size:16px; flex:none; }
.modal-close:hover{ background:var(--c-fog-2); }
.modal-body{ padding:22px; }
.modal-note{ font-size:12.5px; color:var(--c-ink-soft); background:var(--c-fog); border-radius:var(--radius-s); padding:10px 12px; margin-top:14px; }

/* ---------- forms ---------- */
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:12px; }
.form-field{ margin-bottom:12px; display:flex; flex-direction:column; gap:6px; }
.form-field label{ font-size:12.5px; font-weight:600; color:var(--c-graphite); }
.form-field label .req{ color:var(--c-molten); }
.form-field input, .form-field select, .form-field textarea{
  border:1px solid #CDD5DC; border-radius:var(--radius-s); padding:10px 12px;
  font-family:var(--font-body); font-size:14px; color:var(--c-ink); background:var(--c-white);
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus{ border-color:var(--c-molten); }
.form-field textarea{ resize:vertical; min-height:80px; }
.field-error{ font-size:12px; color:#C0392B; display:none; }
.form-field.invalid input, .form-field.invalid select, .form-field.invalid textarea{ border-color:#C0392B; }
.form-field.invalid .field-error{ display:block; }
.form-success{
  display:none; background:#EAF6EE; border:1px solid #B7E1C4; color:#1E6B39;
  border-radius:var(--radius-s); padding:14px 16px; font-size:14px; margin-top:14px;
}
.form-success.show{ display:block; }
.form-error{
  display:none; background:#FBEAE9; border:1px solid #F0B8B4; color:#C0392B;
  border-radius:var(--radius-s); padding:14px 16px; font-size:14px; margin-top:14px;
}
.form-error.show{ display:block; }
.checkbox-row{ display:flex; align-items:flex-start; gap:8px; font-size:12px; color:var(--c-ink-soft); margin:14px 0; }
.checkbox-row input{ margin-top:2px; }

/* ---------- why-us / about page blocks ---------- */
.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; }
.img-frame{
  background:var(--c-graphite-2); border-radius:var(--radius-m); aspect-ratio:4/3;
  display:flex; align-items:center; justify-content:center; color:#5A6674;
  font-family:var(--font-mono); font-size:12px; text-align:center; padding:20px; border:1px dashed #3A4655;
}
.gallery-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.gallery-grid .img-frame{ aspect-ratio:1/1; }

.cert-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.cert-card{ background:var(--c-white); border-radius:var(--radius-m); box-shadow:var(--shadow-card); padding:18px; text-align:center; }
.cert-card .img-frame{ aspect-ratio:3/4; margin-bottom:10px; }
.cert-card span{ font-size:12.5px; color:var(--c-ink-soft); }

.partners-strip{ display:flex; flex-wrap:wrap; gap:14px; }
.partner-chip{
  background:var(--c-white); border-radius:var(--radius-s); box-shadow:var(--shadow-card);
  padding:16px 22px; font-family:var(--font-display); letter-spacing:.03em; color:var(--c-steel-light);
  text-transform:uppercase; font-size:13px;
}

/* ---------- timeline (history) ---------- */
.timeline{ border-left:2px solid var(--c-fog-2); margin-left:6px; }
.timeline-item{ position:relative; padding:0 0 28px 26px; }
.timeline-item::before{ content:""; position:absolute; left:-7px; top:2px; width:12px; height:12px; border-radius:50%; background:var(--c-molten); border:3px solid var(--c-white); box-shadow:0 0 0 2px var(--c-fog-2); }
.timeline-item b{ font-family:var(--font-mono); color:var(--c-molten-dark); font-size:13px; display:block; margin-bottom:4px; }

/* ---------- articles ---------- */
.article-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.article-card{ background:var(--c-white); border-radius:var(--radius-m); box-shadow:var(--shadow-card); overflow:hidden; display:flex; flex-direction:column; }
.article-card .img-frame{ aspect-ratio:16/10; border-radius:0; border:none; }
.article-card .body{ padding:18px; display:flex; flex-direction:column; gap:8px; flex:1; }
.article-card h3{ font-size:16px; margin:0; text-transform:none; letter-spacing:0; }
.article-card p{ font-size:13.5px; color:var(--c-ink-soft); margin:0; }
.article-card .read-more{ margin-top:auto; font-size:13px; font-weight:600; color:var(--c-molten-dark); }
.article-full{ display:none; }
.article-full.open{ display:block; }
.article-full .article-body{ font-size:14.5px; color:var(--c-ink-soft); }
.article-full .article-body p{ margin-bottom:1em; }

/* ---------- contacts ---------- */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:32px; }
.contact-card{ background:var(--c-white); border-radius:var(--radius-m); box-shadow:var(--shadow-card); padding:26px; }
.contact-line{ display:flex; gap:12px; align-items:flex-start; margin-bottom:18px; }
.contact-line .ico{ width:36px; height:36px; border-radius:var(--radius-s); background:var(--c-graphite); color:var(--c-molten-light); display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-size:14px; flex:none; }
.contact-line a, .contact-line span{ font-size:14.5px; }
.contact-line .label{ display:block; font-size:11.5px; color:var(--c-ink-soft); text-transform:uppercase; letter-spacing:.05em; margin-bottom:2px; }
.map-stack{ display:flex; flex-direction:column; gap:16px; height:100%; }
.map-frame{ position:relative; background:var(--c-graphite-2); border-radius:var(--radius-m); overflow:hidden; flex:1 1 0; min-height:220px; }
.map-frame iframe{ width:100%; height:100%; min-height:220px; border:0; display:block; }
.map-frame .map-label{ position:absolute; top:10px; left:10px; z-index:1; background:rgba(20,22,26,.78); color:#fff; font-family:var(--font-mono); font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; padding:5px 10px; border-radius:var(--radius-s); pointer-events:none; }
.map-frame .map-fallback-link{ position:absolute; bottom:10px; left:10px; z-index:1; background:rgba(20,22,26,.78); color:#fff; font-family:var(--font-mono); font-size:11.5px; padding:6px 10px; border-radius:var(--radius-s); text-decoration:none; }
.map-frame .map-fallback-link:hover{ background:rgba(20,22,26,.92); text-decoration:underline; }

/* ---------- footer ---------- */
.site-footer{ position:relative; z-index:0; background:var(--c-graphite); color:#8E9BA8; padding:48px 0 24px; }
.site-footer::before{
  content:"";
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(180deg, rgba(14,16,19,.92) 0%, rgba(14,16,19,.85) 55%, rgba(224,138,62,.14) 100%),
    url("../img/hero-texture.jpg");
  background-repeat:no-repeat;
  background-position:center, 75% 20%;
  background-size:auto, cover;
}
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.1fr; gap:32px; margin-bottom:32px; }
.footer-grid h4{ color:var(--c-white); font-size:13px; margin-bottom:14px; }
.footer-grid ul li{ margin-bottom:8px; }
.footer-grid a{ font-size:13.5px; color:#8E9BA8; }
.footer-grid a:hover{ color:var(--c-white); }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.08); padding-top:20px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:12.5px; }
.footer-bottom a{ color:#8E9BA8; }
.footer-bottom a:hover{ color:var(--c-white); }

/* ---------- dev banner (build note) ---------- */
/* ---------- responsive ---------- */
@media (max-width:980px){
  .hero-grid{ grid-template-columns:1fr; }
  .usp-grid{ grid-template-columns:repeat(2,1fr); }
  .cat-grid{ grid-template-columns:repeat(2,1fr); }
  .catalog-shell{ grid-template-columns:1fr; }
  .catalog-filters{ position:static; }
  .product-grid{ grid-template-columns:1fr; }
  .two-col{ grid-template-columns:1fr; }
  .gallery-grid{ grid-template-columns:repeat(2,1fr); }
  .cert-grid{ grid-template-columns:repeat(2,1fr); }
  .article-grid{ grid-template-columns:1fr; }
  .contact-grid{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:640px){
  .main-nav{ display:none; }
  .burger{ display:block; }
  .hero{ padding:56px 0 44px; }
  .hero h1{ font-size:32px; }
  .usp-grid{ grid-template-columns:1fr; }
  .cat-grid{ grid-template-columns:1fr; }
  .form-row{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; }
  .header-phone{ display:none; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}
