/* ---------- Шрифт (локальный, без обращения к внешним CDN) ---------- */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/open-sans-cyrillic-400-normal.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/open-sans-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/open-sans-cyrillic-600-normal.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/open-sans-latin-600-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/open-sans-cyrillic-700-normal.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/open-sans-latin-700-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}

/* ---------- Переменные ---------- */
:root {
  --text: #404040;
  --red: #b02418;
  --dark: #333333;
  --band: #f4f4f4;
  --footer-text: #d6d6d6;
  --wrap: 1228px;
  --pad: 34px;
}

/* ---------- База ---------- */
* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: #fff;
  color: var(--text);
  font-family: 'Open Sans', 'Segoe UI', Arial, sans-serif;
  font-size: 17px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }

a { color: var(--red); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--pad);
}

/* ---------- Индикатор прокрутки (красная линия сверху) ---------- */
/* Не нужен — удалите этот блок и <div class="scroll-progress"> в index.html */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 20;
  width: 0;
  height: 2px;
  background: var(--red);
}

/* ---------- Шапка ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: #fff;
}

.header-inner {
  display: flex;
  align-items: center;
  height: 80px;
}

.logo img { width: auto; height: 44px; }

/* ---------- Баннер ---------- */
.hero {
  display: flex;
  align-items: center;
  height: 180px;
  background: var(--dark) url('img/hero.jpg') no-repeat right center;
  background-size: auto 100%;
}

.hero .wrap { width: 100%; }

.hero h1 {
  margin: 0;
  color: #fff;
  font-size: 54px;
  font-weight: 400;
  line-height: 1.1;
}

/* ---------- О компании ---------- */
.about { padding: 130px 0; }

.about-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  gap: 40px;
}

.about-head h2 {
  margin: 0;
  font-size: 40px;
  font-weight: 400;
  line-height: 1.15;
}

.about-logo { width: 360px; height: auto; }

.about-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 40px;
  margin-top: 60px;
}

.about-cols p { margin: 0 0 26px; }
.about-cols p:last-child { margin-bottom: 0; }

/* ---------- Контакты ---------- */
.contacts {
  padding: 105px 0;
  background: var(--band);
}

.contacts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  text-align: center;
}

.icon-box {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60px;
  margin-bottom: 6px;
}

.icon-box img { width: auto; }

.ic-address { height: 60px; }
.ic-mail    { height: 41px; }
.ic-site    { height: 54px; }

.contact h3 {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
}

.contact p { margin: 0; }

/* ---------- Подвал ---------- */
.site-footer {
  display: flex;
  align-items: center;
  min-height: 240px;
  background: var(--dark);
  color: var(--footer-text);
}

.footer-inner {
  display: flex;
  align-items: center;
  width: 100%;
}

.footer-logo { width: auto; height: 44px; flex: none; }

.copyright {
  margin: 0 auto 0 31px;
  max-width: 420px;
  line-height: 1.55;
}

.footer-actions {
  display: flex;
  align-items: center;
  gap: 17px;
  flex: none;
}

.footer-actions img { width: 37px; height: auto; }
.footer-actions a:hover { text-decoration: none; opacity: .85; }

/* ---------- Планшет ---------- */
@media (max-width: 1000px) {
  .about { padding: 80px 0; }

  .about-head { grid-template-columns: 1fr; align-items: start; gap: 32px; }
  .about-head h2 { font-size: 34px; }
  .about-logo { width: 300px; }

  .about-cols { grid-template-columns: 1fr; gap: 26px; margin-top: 44px; }

  .contacts { padding: 70px 0; }
  .contacts-grid { grid-template-columns: repeat(2, 1fr); gap: 48px 32px; }

  .hero { height: 150px; }
  .hero h1 { font-size: 42px; }
}

/* ---------- Телефон ---------- */
@media (max-width: 640px) {
  :root { --pad: 20px; }

  body { font-size: 16px; }

  .header-inner { height: 68px; }
  .logo img { height: 36px; }

  .hero {
    height: 120px;
    background:
      linear-gradient(90deg, #333 0%, rgba(51, 51, 51, .92) 30%, rgba(51, 51, 51, 0) 75%),
      var(--dark) url('img/hero.jpg') no-repeat right center;
    background-size: auto, auto 100%;
  }
  .hero h1 { font-size: 30px; }

  .about { padding: 56px 0; }
  .about-head h2 { font-size: 26px; }
  .about-logo { width: 240px; }

  .contacts { padding: 52px 0; }
  .contacts-grid { grid-template-columns: 1fr; gap: 40px; }

  .site-footer { min-height: 0; padding: 40px 0; }

  .footer-inner { flex-wrap: wrap; gap: 24px; }
  .copyright { margin: 0; max-width: none; order: 3; width: 100%; }
  .footer-actions { margin-left: auto; }
}