/**
 * Обложка новых разделов (TI/R&D/SaaS, макет 18.08). Токены сняты с
 * Figma-нод обложек (node id 2862:17969 / 2864:6217 / 2865:6524, фрейм
 * 1920 "В разработку (1)"): Desktop/H1 — Inter Medium 168px/100%/-8%
 * tracking, #1A1A1A; Desktop/Text — Inter Regular 20px/120%/-2% tracking,
 * rgba(26,26,26,.8). Брейкпоинты ниже 1920 в макете не сверялись отдельно
 * (нет доступа к части figma MCP из-за лимита) — масштаб 1600/1280/1024
 * взят по той же пропорции, что и у .solutions-detail-h1 (general.css) и
 * требует живой сверки при финальной проверке страниц (см. п.8
 * "Предлагаемого порядка работ" в plan-redesign-18-08.md).
 */
.section-hero__title {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 168px;
    line-height: 1;
    letter-spacing: -0.08em;
    text-transform: uppercase;
    color: #1A1A1A;
    margin: 0;
    /* Страховка на случай, если даже наименьший брейкпоинт не спасает
       длинное слово без пробелов (напр. локализация) — переносить внутри
       слова, а не вылезать за контейнер. */
    overflow-wrap: break-word;
}

/**
 * H0 — второй типографский стиль заголовка (R&D/SaaS), не масштаб H1.
 * Сверено с Figma 2026-09-13 (node 2864:6218 "R&D", 2865:6525 "SaaS"):
 * Desktop/H0 — Inter REGULAR (не Medium) 246px/84%/-7% tracking, без
 * uppercase (у SaaS в макете строчные "aa" — переопределяем
 * text-transform, а не наследуем от .section-hero__title). Брейкпоинты
 * ниже 1920 отдельно не сверены (нет Figma-фреймов R&D/SaaS для них) —
 * взяты в той же пропорции, что и у H1 (168→138→111→89→64→48).
 */
.section-hero--h0 .section-hero__title {
    font-weight: 400;
    font-size: 246px;
    line-height: 0.84;
    letter-spacing: -0.07em;
    text-transform: none;
}

@media (max-width: 1600px) {
    .section-hero--h0 .section-hero__title {
        font-size: 202px;
    }
}

@media (max-width: 1280px) {
    .section-hero--h0 .section-hero__title {
        font-size: 163px;
    }
}

@media (max-width: 1024px) {
    .section-hero--h0 .section-hero__title {
        font-size: 130px;
    }
}

@media (max-width: 600px) {
    .section-hero--h0 .section-hero__title {
        font-size: 94px;
    }
}

@media (max-width: 480px) {
    .section-hero--h0 .section-hero__title {
        font-size: 70px;
    }
}

.section-hero__connector {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 24px auto;
}

.section-hero__connector .line-vert {
    position: relative;
    height: 44px;
    border-left: 1px dashed rgba(26, 26, 26, 0.8);
}

.section-hero__connector .line-vert:before,
.section-hero__connector .line-vert:after {
    background-color: rgba(26, 26, 26, 0.8);
    left: -4px;
}

/* Верхний квадрат-заглушка коннектора: general.css не задаёт :before
   top, поэтому он наследует статичное top:0 и наезжает на верхние 8px
   пунктира. Нужен отдельный кап над линией — симметрично :after
   (bottom:-8px) снизу. Сверено с Figma Frame 9118 (2864:6219/2862:17971):
   верхний квадрат 0-8px, линия 8-52px, нижний квадрат 52-60px, без
   наложения. */
.section-hero__connector .line-vert:before {
    top: -8px;
}

.section-hero__connector .line-vert:after {
    bottom: -8px;
}

.section-hero__subtitle {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: rgba(26, 26, 26, 0.8);
    max-width: 932px;
    margin: 0 auto;
}

/**
 * R&D/SaaS сверены отдельно от Threat Intelligence (2026-09-16, Figma
 * metadata): TI-параграф реально 932px (общий токен выше верный для неё),
 * а у R&D (node 2864:6223) и SaaS (node 2865:6530) текст в макете лежит в
 * контейнере 616px — короче, из-за чего у SaaS он переносится на 2 строки
 * (height=48 в метаданных = 2×24px), а на 932px влезал бы в одну.
 */
.section-hero--h0 .section-hero__subtitle {
    max-width: 616px;
}

.section-hero__illustration {
    /* НЕ display:block — картинка получает desktop-img/tablet-img/
       mobile-img (general.css) для показа по брейкпоинтам через
       display:none/inline-block; безусловный display:block здесь той же
       специфичности перебивал бы это правило порядком подключения (этот
       файл грузится после general.css) — все три картинки показывались
       одновременно. Центрирование — через .text-center на section-hero. */
    margin: 40px auto 0;
    /* min(), не голый 616px — тот же конфликт специфичности/порядка
       подключения, что был с display:block выше: .img-fluid даёт
       max-width:100%, но этот файл грузится позже и той же
       специфичностью его перебивал бы, поэтому на мобильном картинка
       (616px натурально) вылезала за экран вместо масштабирования. */
    max-width: min(616px, 100%);
}

@media (max-width: 1600px) {
    .section-hero__title {
        font-size: 138px;
    }
}

@media (max-width: 1280px) {
    .section-hero__title {
        font-size: 111px;
    }
}

@media (max-width: 1024px) {
    .section-hero__title {
        font-size: 89px;
    }
}

@media (max-width: 600px) {
    .section-hero__title {
        font-size: 64px;
    }
    .section-hero__subtitle {
        max-width: 100%;
    }
}

@media (max-width: 480px) {
    /* На 390px "THREAT INTELLIGENCE" (самое длинное слово-заголовок из
       трёх страниц) при 64px вылезает за контейнер на ~20px (замер
       scrollWidth вживую, Playwright browser_resize/browser_evaluate) —
       48px первый размер, при котором слово влезает без переноса внутри
       себя. */
    .section-hero__title {
        font-size: 48px;
    }
}