/* ============================================================
   ПЕРВЫЙ ЭКРАН (HERO) — КАРТИНКА + КНОПКИ

   ЧТО ИЗМЕНИЛОСЬ В ЭТОЙ ВЕРСИИ.
   1. У фоновых картинок обрезан низ: полоса «Собственное
      производство / Минимальные сроки / Работа с юрлицами /
      Гарантия качества» из изображения убрана. Эти же пункты
      остались ниже по странице в блоке «Почему выбирают нас».
   2. Кнопки больше НЕ висят поверх картинки в процентах.
      Теперь они стоят в обычном потоке сразу под изображением,
      то есть прямо под главным заголовком. Наехать на текст
      внутри картинки они уже не могут ни на каком экране.
   3. Низ картинки плавно уходит в фон страницы (#0f0f0f),
      поэтому места обрезки не видно — стыка нет.

   ЕСЛИ НУЖНО ПОДВИНУТЬ КНОПКИ — правьте одно число:
     .hero-buttons-wrap { padding: ... }  (отступ сверху/снизу)
   Если нужно сделать растушёвку низа картинки длиннее/короче:
     .hero-bg::after { height: ... }
   ============================================================ */

.hero {
    position: relative;
    /* высоту задаёт картинка + полоса с кнопками, а не экран */
    min-height: 0;
    height: auto;
    display: block;
    padding: 0;
    /* старый CSS-фон больше не нужен */
    background: #0f0f0f;
    overflow: hidden;
}

.hero-bg {
    position: relative;
    display: block;
    width: 100%;
}

.hero-bg img {
    display: block;
    width: 100%;
    height: auto;
}

/* Лёгкая затемняющая плёнка поверх картинки */
.hero-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .15);
    z-index: 1;
    pointer-events: none;
}

/* Растушёвка низа картинки в цвет страницы — прячет линию обрезки */
.hero-bg::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;               /* -1px, чтобы не было волоска на дробных масштабах */
    height: 90px;
    background: linear-gradient(to bottom, rgba(15, 15, 15, 0) 0%, #0f0f0f 100%);
    z-index: 2;
    pointer-events: none;
}

/* --- Полоса с кнопками: сразу под картинкой --- */
.hero > .container {
    position: relative;         /* было absolute — теперь обычный поток */
    z-index: 3;
    width: 90%;
    max-width: 1400px;
    margin: 0 auto;
}

.hero-content { width: 100%; }

.hero-left {
    margin-top: 0;
    width: 100%;
    padding-bottom: 0;
}

.hero-buttons-wrap {
    padding: 6px 0 46px;        /* ← отступ кнопок от картинки и от блока ниже */
}

.buttons {
    margin-top: 0;
    justify-content: center;
}

/* --- ТЕЛЕФОНЫ И ПЛАНШЕТЫ ---
   Граница 991px выбрана не случайно — ровно с неё в разметке
   подключается отдельная мобильная картинка (background-mobile).
   Если менять эту границу, менять надо и media в <picture>
   в index.html. */
@media (max-width: 991px) {
    .hero-bg::after { height: 70px; }

    .hero-buttons-wrap { padding: 4px 0 36px; }

    .buttons {
        flex-direction: column;
        gap: 10px;
        width: 100%;
    }

    .buttons .btn,
    .buttons .btn-outline {
        width: 100%;
    }
}

/* --- Маленькие телефоны --- */
@media (max-width: 480px) {
    .buttons .btn,
    .buttons .btn-outline {
        padding: 13px 18px;
        font-size: 13px;
        letter-spacing: .5px;
    }
    .buttons { gap: 8px; }
    .hero-buttons-wrap { padding: 2px 0 30px; }
}