/* Фоновые рисунки шапок (SVG из images/bg). Картинка задаётся в style самой секции. */
.hero-section.has-bg {
    background-color: var(--primary, #2c3e50);
    background-size: cover;
    background-position: right center;
    background-repeat: no-repeat;
}

/* Телефоны: название компании и заголовки шапки не должны вылезать за экран */
@media (max-width: 600px) {
    .main-header .logo {
        font-size: 1.35rem;
        line-height: 1.3;
    }

    .main-header .tagline {
        font-size: 0.95rem;
    }

    .hero-section h1 {
        font-size: 1.6rem;
        line-height: 1.25;
        overflow-wrap: break-word;
        hyphens: auto;
    }

    .hero-section .hero-text {
        font-size: 1rem;
    }

    /* меню из 5 пунктов в столбик не держим прилипшим: оно закрывало бы четверть экрана */
    .main-nav {
        position: static;
    }

    /* на узком экране рисунок шапки ложится под заголовок, оставляем только градиент */
    .hero-section.has-bg {
        background-image: linear-gradient(135deg, var(--primary, #2c3e50), var(--secondary, #3a7bd5)) !important;
    }
}

/* Фон всей страницы (images/bg/page-*.svg). Отдельный закреплённый слой вместо
   background-attachment: fixed, чтобы фон не дёргался и работал на iPhone. */
body[data-bg]::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    background-color: #e3effc;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    pointer-events: none;
}

body[data-bg="devices"]::before { background-image: url('../images/bg/page-devices.svg'); }
body[data-bg="video"]::before { background-image: url('../images/bg/page-video.svg'); }
body[data-bg="glonass"]::before { background-image: url('../images/bg/page-glonass.svg'); }
body[data-bg="corporate"]::before { background-image: url('../images/bg/page-corporate.svg'); }