/* ============================================================
   БМП — общие стили для всех страниц сайта
   Подключается на каждой странице ПЕРЕД собственными стилями:
   <link rel="stylesheet" href="assets/site.css">
   ============================================================ */
:root{
  --steel:#1C242B; --steel-2:#242E37; --steel-3:#2E3A45;
  --fire:#E8641C; --fire-2:#C6500F;
  --paper:#F3F4F2; --ink:#20272D; --mut:#5B6670;
  --line:#E2E5E1; --line-d:#3A4550;
  --disp:'Russo One',system-ui,sans-serif;
  --body:'Manrope',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--body);color:var(--ink);background:var(--paper);line-height:1.6;font-size:16px;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul{list-style:none}
::selection{background:var(--fire);color:#fff}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--fire);outline-offset:3px;border-radius:4px}
.container{max-width:1200px;margin:0 auto;padding-left:20px;padding-right:20px}

/* ---------- верхняя полоса ---------- */
.topbar{background:var(--steel);color:#B9C2CB;font-size:13px}
.topbar__in{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:38px;flex-wrap:wrap}
.topbar__phones{display:flex;gap:18px;flex-wrap:wrap}
.topbar__phones a{font-family:var(--mono);color:#D7DDE3;transition:color .2s}
.topbar__phones a:hover{color:var(--fire)}
.topbar__login{font-weight:600;color:#D7DDE3;transition:color .2s}
.topbar__login:hover{color:var(--fire)}

/* ---------- шапка ---------- */
.hdr{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--line)}
.hdr__in{display:flex;align-items:center;gap:28px;min-height:74px}
.logo{display:flex;align-items:center;gap:12px;flex-shrink:0}
.logo__mark{display:inline-block;font-family:var(--disp);font-size:20px;letter-spacing:.04em;background:var(--fire);color:#fff;padding:9px 11px;border-radius:6px;line-height:1;flex-shrink:0}
.logo__txt{font-size:12px;line-height:1.35;color:var(--mut)}
.logo__txt b{display:block;color:var(--ink);font-size:13.5px;font-weight:800}
.nav{margin-left:auto;display:flex;gap:24px;font-weight:600;font-size:15px}
.nav a{position:relative;padding:4px 0}
/* только пункты меню, не ссылки панели «Оборудование» (там длинные подписи) */
.nav>a,.nav__drop>a{white-space:nowrap}
.nav a::after{content:'';position:absolute;left:0;right:100%;bottom:-2px;height:2px;background:var(--fire);transition:right .25s}
.nav a:hover{color:var(--fire)}
.nav a:hover::after{right:0}
.nav a.act{color:var(--fire)}
.nav a.act::after{right:0}
.hdr__call{white-space:nowrap;font-family:var(--mono);font-size:14px;padding:11px 18px}
.burger{display:none;width:44px;height:44px;border:1px solid var(--line);border-radius:6px;background:#fff;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px;flex-shrink:0}
.burger i{width:20px;height:2px;background:var(--ink);display:block;transition:transform .25s,opacity .2s}
.burger.open i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.open i:nth-child(2){opacity:0}
.burger.open i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- кнопки ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 26px;border-radius:6px;font-weight:700;font-size:15px;border:1px solid transparent;cursor:pointer;transition:background .2s,color .2s,border-color .2s,transform .2s;font-family:var(--body)}
.btn--fire{background:var(--fire);color:#fff}
.btn--fire:hover{background:var(--fire-2);transform:translateY(-1px)}
.btn--ghost{border-color:rgba(255,255,255,.45);color:#fff}
.btn--ghost:hover{border-color:var(--fire);color:var(--fire);background:rgba(232,100,28,.08)}
.btn--steel{border-color:#C6CCC9;color:var(--ink);background:#fff}
.btn--steel:hover{border-color:var(--fire);color:var(--fire)}

/* ---------- общие элементы ---------- */
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--fire);font-weight:700;display:inline-flex;align-items:center;gap:10px}
.eyebrow::before{content:'';width:26px;height:2px;background:var(--fire)}
.stripe{height:8px;background:repeating-linear-gradient(-45deg,var(--fire) 0 14px,var(--steel) 14px 28px)}
.crumbs{font-family:var(--mono);font-size:12.5px;color:#93A0AC}
.crumbs a:hover{color:var(--fire)}
.crumbs span{margin:0 8px;color:#5B6670}

/* ---------- медиа-блок с запасным фоном ---------- */
.media{position:relative;aspect-ratio:4/3;border-radius:6px;overflow:hidden;background-color:#232D36;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23566270' stroke-width='1.4' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='3.6'/%3E%3Cpath d='M12 2.5v3M12 18.5v3M2.5 12h3M18.5 12h3M5.3 5.3l2.1 2.1M16.6 16.6l2.1 2.1M18.7 5.3l-2.1 2.1M7.4 16.6l-2.1 2.1'/%3E%3C/svg%3E"),linear-gradient(145deg,#2A343E,#1C242B);background-repeat:no-repeat;background-position:center;background-size:56px 56px,cover}
.media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .45s ease}
.media img.is-broken{display:none}

/* ---------- призыв к действию ---------- */
.cta{background:var(--steel-2);color:#fff;padding:72px 0}
.cta__in{display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap}
.cta__in>div:first-child{max-width:640px}
.cta h2{font-family:var(--disp);font-weight:400;font-size:clamp(1.5rem,3vw,2.1rem);margin:14px 0}
.cta .lead{color:#B9C2CB}
.cta__phones{font-family:var(--mono)}
.cta__phones small{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#93A0AC;margin-bottom:8px}
.cta__phones a{display:block;font-size:clamp(1.15rem,2.4vw,1.6rem);font-weight:700;margin:4px 0;transition:color .2s}
.cta__phones a:hover{color:var(--fire)}

/* ---------- подвал ---------- */
.ftr{background:var(--steel);color:#AEB8C2;font-size:14px;padding-top:64px}
.ftr__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:36px;padding-bottom:46px}
.ftr h4{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--fire);margin-bottom:16px;font-weight:700}
.ftr__col a{display:block;padding:5px 0;transition:color .2s}
.ftr__col a:hover{color:#fff}
.ftr__col a.logo{display:flex;align-items:center;gap:12px;padding:0;margin-bottom:4px}
.ftr__about p{margin:14px 0;line-height:1.6}
.ftr__note{font-size:12.5px;color:#7C8894;line-height:1.55;margin-top:14px}
.ftr__note a{display:inline;text-decoration:underline;padding:0}
.ftr__bottom{border-top:1px solid var(--line-d);padding:20px 0;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12.5px;color:#7C8894}
.ftr__bottom a{text-decoration:underline}
.ftr__bottom a:hover{color:#fff}

/* ---------- адаптивность общих блоков ---------- */
/* 861–1140 px (планшет горизонтально, небольшой ноутбук): шапка из макета не помещалась —
   кнопка звонка уходила за край, страница сдвигалась вбок. Подпись логотипа прячем. */
@media (min-width:861px) and (max-width:1140px){
  .hdr__in{gap:20px}
  .nav{gap:18px}
  .logo__txt{display:none}
}
@media (max-width:1020px){
  .ftr__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  .burger{display:flex}
  .hdr__in{gap:14px}
  .logo{margin-right:auto}
  .nav{position:absolute;left:0;right:0;top:100%;margin-left:0;flex-direction:column;gap:0;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 18px 30px rgba(0,0,0,.08);padding:6px 20px 14px;display:none}
  .nav.open{display:flex}
  .nav a{padding:13px 0;border-bottom:1px solid var(--line);font-size:16px}
  .nav a:last-child{border-bottom:none}
  .nav a::after{display:none}
}
@media (max-width:640px){
  .hdr__call{display:none}
  /* логотип сжимается и переносит подпись, иначе на телефонах 320–390 px он выталкивает
     кнопку меню за край экрана (так было в макетах) */
  .logo{flex-shrink:1;min-width:0}
  /* подвал: логотип с подписью — отдельной строкой, под ним две равные колонки */
  .ftr__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:30px 20px}
  .ftr__grid>:first-child{grid-column:1/-1}
}
@media (max-width:520px){
  .topbar__phones a:nth-child(n+2){display:none}
}
@media (max-width:350px){
  .logo__txt{font-size:0}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
}
@media print{
  .topbar,.hdr,.stripe,.cta,.ftr{display:none!important}
}