/* Общие стили */
* {
    box-sizing: border-box; /* включаем padding и border в размеры */
}

:root {
    --page-max-width: 1100px; /* ограничение ширины контента */
    --header-vertical-padding: clamp(12px, 1.2vw, 36px); /* вертикальные отступы шапки */
    --header-horizontal-padding: clamp(12px, 2.2vw, 64px); /* горизонтальные отступы шапки */
    --nav-gap: clamp(12px, 3vw, 64px); /* расстояние между пунктами навигации */
}

@font-face {
    font-family: 'MultiroundPro'; /* локальное имя шрифта */
    src: url('/media/fonts/MultiroundPro.otf') format('opentype'); /* источник */
    font-weight: 400 700; /* диапазон весов */
    font-style: normal; /* стиль */
    font-display: swap; /* отображение шрифта */
}

html, body {
    height: 100% /* высота документа */;
    margin: 0 /* убрать отступы */;
    padding: 0 /* убрать padding */;
}

body {
    font-family: 'MultiroundPro', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; /* семейство шрифтов */
    background: #fff /* фон страницы */;
    display: flex /* flex layout */;
    flex-direction: column /* колоночный порядок */;
    min-height: 100vh /* минимум высоты */;
    background-image: url('/media/service/back1.png') /* фоновое изображение */;
    background-repeat: no-repeat /* не повторять */;
    background-size: cover /* покрытие */;
    background-position: center top /* позиция */;
    background-attachment: scroll /* поведение при скролле */;
}

/* Шапка */
.site-header {
    background: #de582f /* фон шапки */;
    padding: var(--header-vertical-padding) var(--header-horizontal-padding) /* вертик./гориз. отступы */;
    position: relative /* относительное позиционирование */;
    z-index: 10 /* высокий слой */;
    flex-shrink: 0 /* не сжимать */;
}

.header-inner {
    max-width: var(--page-max-width) /* ограничение ширины */;
    margin: 0 auto /* центрирование */;
    display: flex /* флекс-контейнер */;
    align-items: center /* вертикальное выравнивание */;
    justify-content: flex-start /* выравнивание слева */;
}

.logo {
    display: flex /* логотип как флекс */;
    align-items: center /* выравнивание */;
    margin-right: clamp(12px, 2.2vw, 48px) /* отступ справа */;
}

.logo-img {
    height: clamp(36px, 3.2vw, 56px) /* адаптивная высота логотипа */;
    width: auto /* сохранить пропорции */;
    display: block /* блочный элемент */;
    max-width: 160px /* ограничение ширины */;
}

.main-nav {
    flex: 1 /* навигация занимает доступное пространство */;
    display: flex /* флекс-контейнер */;
    justify-content: flex-start /* выравнивание слева */;
}

.main-nav ul { list-style: none /* убрать маркеры */; margin: 0 /* убрать отступы */; padding: 0 /* убрать padding */; display: flex /* горизонтальный список */; gap: 8px /* промежуток */; align-items: center /* выравнивание */; max-width: calc(var(--page-max-width) - 220px) /* ограничение ширины */ }

.main-nav a {
    color: #fff /* цвет ссылок */;
    text-decoration: none /* убрать подчеркивание */;
    font-weight: 700 /* полужирный */;
    font-size: clamp(14px, 1.2vw, 20px) /* адаптивный размер */;
    text-transform: uppercase /* верхний регистр */;
    display: block /* блочный элемент */;
    text-align: left /* выравнивание */;
}

/* Основной контент */
.hero {
    flex: 1 /* растянуть геро */;
    padding: clamp(80px, 10vw, 120px) var(--header-horizontal-padding) /* адаптивные паддинги */;
    z-index: 5 /* слой */;
}

.hero-inner {
    display: flex /* флекс-контейнер */;
    max-width: var(--page-max-width) /* ограничение ширины */;
}

.hero-text {
    width: 200px /* фиксированная ширина блока текста */;
    color: #000 /* цвет текста */;
    font-weight: 500 /* вес шрифта */;
    font-size: 20px /* размер текста */;
    line-height: 1 /* высота строки */;
    letter-spacing: 0.2px /* межбуквенный интервал */;
    -webkit-font-smoothing: antialiased /* сглаживание шрифта */;
}

.hero-text p {
    margin: 0 0 10px 0 /* отступы параграфа */;
}

/* Подвал */
.site-footer {
    background: #000 /* фон футера */;
    color: #fff /* цвет текста футера */;
    padding: 60px var(--header-horizontal-padding) /* паддинги футера */;
    flex-shrink: 0 /* не сжимать */;
    z-index: 10 /* слой */;
    position: relative /* относительное позиционирование */;
}

.footer-inner {
    max-width: var(--page-max-width) /* ограничение ширины */;
    margin: 0 auto /* центрирование */;
    display: flex /* флекс-контейнер */;
    flex-direction: column /* столбец */;
    align-items: center /* центрирование */;
    gap: 24px /* промежуток */;
    text-align: center /* выравнивание */;
}

.footer-logo-img {
    height: 32px /* высота логотипа футера */;
    width: auto /* автоширина */;
}

.footer-copyright {
    font-size: 18px /* размер текста */;
    font-weight: 700 /* полужирный */;
}

.footer-contacts {
    display: flex /* флекс-контейнер */;
    flex-direction: column /* столбец */;
    gap: 16px /* промежуток */;
    align-items: center /* центрирование */;
}

.contact-item {
    display: flex /* строка */;
    align-items: center /* выравнивание */;
    gap: 12px /* промежуток */;
}

.contact-icon {
    width: 24px /* ширина иконки */;
    height: 24px /* высота иконки */;
    object-fit: contain /* сохранить пропорции */;
}

.contact-item a {
    color: #fff /* цвет ссылки */;
    text-decoration: none /* убрать подчеркивание */;
    font-weight: 700 /* полужирный */;
    font-size: 16px /* размер текста */;
}

.footer-note {
    font-size: 14px /* размер заметки */;
    opacity: 0.8 /* прозрачность */;
}

/* Адаптивная верстка */
@media (min-width: 1400px) {
    .hero-text {
        font-size: 68px /* очень большой размер текста */;
        width: 300px /* шире блок текста */;
    }
}

@media (min-width: 1200px) and (max-width: 1399px) {
    .hero-text {
        font-size: 60px /* размер для широких экранов */;
    }
}

@media (min-width: 1000px) and (max-width: 1199px) {
    .hero-text {
        font-size: 52px /* размер для средних экранов */;
    }
}

@media (max-width: 999px) {
    .hero-text {
        width: 280px /* уменьшенная ширина */;
        font-size: 46px /* размер текста */;
    }
}

@media (min-width: 1000px) {
    .logo {
        margin-left: -30px /* сдвиг логотипа на больших экранах */;
    }
    .header-inner {
        padding-left: 30px /* добавить отступ слева */;
    }
}

@media (max-width: 600px) {
    body {
        background-image: url('/media/service/back2.png') /* альтернативный фон для мобил */;
        background-position: center top /* позиция */;
        background-size: cover /* покрытие */;
    }

    .header-inner {
        flex-direction: column /* стекание */;
        gap: 12px /* промежуток */;
        align-items: center /* центрирование */;
    }

    .main-nav ul { flex-wrap: wrap /* перенос пунктов */; justify-content: center /* центрирование */; gap: 8px /* промежуток */ }

    .hero {
        padding: 32px 16px /* мобильные паддинги */;
    }

    .hero-text {
        width: 100% /* ширина блока */;
        font-size: 24px /* размер текста на мобил */;
        text-align: left /* выравнивание */;
    }

    .hero-text p {
        margin-bottom: 16px /* отступ */;
    }

    .site-footer {
        padding: 32px 16px /* уменьшенные паддинги футера */;
    }

    .footer-copyright {
        font-size: 16px /* уменьшенный размер */;
    }

    .contact-item a {
        font-size: 14px /* размер ссылок контактов на мобил */;
    }

    .footer-note {
        font-size: 12px /* размер заметки на мобил */;
    }
}

/* Адаптив для 320px: вертикальное и центрированное меню */
@media (max-width: 320px) {
    .header-inner { 
    padding-left: 0 /* убрать паддинг */; 
    padding-right: 0 /* убрать паддинг */; 
    flex-direction: column /* столбец */; 
    gap: 18px /* промежуток */; 
    align-items: center /* центрирование */ 
}
    .logo-img { 
        max-width: 120px /* ограничение ширины логотипа */; 
        height: 40px /* высота логотипа */ }
    .main-nav ul { 
        display:flex /* вертикальный список */;
        flex-direction: column /* столбец */; 
        gap: 18px /* промежуток */; 
        align-items: center /* центрирование */; 
        justify-content:center /* центрирование */; 
        width:100% }
    .main-nav a { 
        font-size: 20px /* крупный шрифт */; 
        font-weight: 800 /* очень жирный */; 
        text-align: center /* центрирование */; 
        display:block /* блочный элемент */; 
        padding:6px 0 /* вертикальные отступы */ }
    .hero { padding: 16px 8px /* маленькие паддинги */ }
    .hero-text { 
        font-size: 18px /* размер текста */; 
        width: 100% /* ширина */; 
        text-align: center /* центрирование */ }
    .site-footer { padding: 16px 8px /* уменьшенные паддинги футера */ }
    .footer-copyright { font-size: 12px /* маленький размер */ }
}

/* Адаптив для 425px */
@media (min-width: 321px) and (max-width: 425px) {
    .logo-img {
        max-width: 120px /* ширина логотипа */;
        height: 36px /* высота логотипа */;
    }
    .main-nav a {
        font-size: 13px /* размер пунктов меню */;
    }
    .hero {
        padding: 20px 8px /* паддинги */;
    }
    .hero-text {
        font-size: 18px /* размер текста */;
        width: 100% /* ширина */;
    }
    .site-footer {
        padding: 20px 8px /* паддинги футера */;
    }
    .footer-copyright {
        font-size: 14px /* размер */;
    }
}

/* Адаптив для 768px */
@media (min-width: 426px) and (max-width: 768px) {
    .logo-img {
        max-width: 140px /* ширина логотипа */;
        height: 40px /* высота логотипа */;
    }
    .main-nav a {
        font-size: 15px /* размер меню */;
    }
    .hero {
        padding: 28px 12px /* паддинги */;
    }
    .hero-text {
        font-size: 16px /* размер текста */;
        width: 35% /* ширина блока */;
        max-width: 240px /* максимальная ширина */;
    }
    .site-footer {
        padding: 28px 12px /* паддинги футера */;
    }
    .footer-copyright {
        font-size: 16px /* размер */;
    }
}

/* Адаптив для 1024px */
@media (min-width: 769px) and (max-width: 1024px) {
    .logo-img {
        max-width: 160px /* ширина логотипа */;
        height: 48px /* высота логотипа */;
    }
    .main-nav a {
        font-size: 17px /* размер меню */;
    }
    .hero {
        padding: 36px 24px /* паддинги */;
    }
    .hero-text {
        font-size: 26px /* размер текста */;
        width: 55% /* ширина блока */;
        max-width: 400px /* максимальная ширина */;
    }
    .site-footer {
        padding: 36px 24px /* паддинги футера */;
    }
    .footer-copyright {
        font-size: 18px /* размер */;
    }
}

/* Адаптив для 1440px */
@media (min-width: 1025px) and (max-width: 1440px) {
    .logo-img {
        max-width: 180px /* ширина логотипа */;
        height: 56px /* высота логотипа */;
    }
    .main-nav a {
        font-size: 19px /* размер меню */;
    }
    .hero {
        padding: 48px 32px /* паддинги */;
    }
    .hero-text {
        font-size: 38px /* размер текста */;
        width: 50% /* ширина блока */;
        max-width: 450px /* максимальная ширина */;
    }
    .site-footer {
        padding: 48px 32px /* паддинги футера */;
    }
    .footer-copyright {
        font-size: 20px /* размер */;
    }
}