/*
 * Лаборатория Кошмарского — основные стили
 * v2.5.0
 *
 * Палитра:
 *   #6B1A1E  фирменный красный
 *   #4E1215  красный при наведении
 *   #101313  темный (верхняя полоса, футер)
 *   #161918  основной текст
 *   #4F5654  второстепенный текст
 *   #CDD0CC  фон страницы и карточек
 *   #BCC0BB  серый фон секций
 *   #9EA39E  рамки
 *   #4D6158  зеленые галочки
 *   #1A1E1E  темно-бордовый (подложки картинок)
 */

/* ===== RESET ===== */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    color: #161918;
    background: #CDD0CC;
}

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

a {
    color: #6B1A1E;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

h1, h2, h3 {
    margin: 0 0 15px;
    font-weight: 700;
    line-height: 1.25;
}

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ===== ЕДИНАЯ ОБРАБОТКА КАРТИНОК =====
   Все картинки сайта выглядят как кадры из одного архива: почти без цвета,
   с холодным зеленоватым оттенком. sepia дает теплый тон, а hue-rotate
   поворачивает его по цветовому кругу в холодный */
body img,
.business__img,
.face,
.guest,
.mob,
.hero__granny {
    filter: grayscale(.55) sepia(.35) hue-rotate(115deg) saturate(.75) contrast(1.08) brightness(.86);
}

/* Слайду фильтр повесить нельзя: он обесцветит и текст с кнопками внутри.
   Поэтому смешиваем фоновую картинку с цветом фона: режим luminosity берет
   из картинки только яркость, а оттенок — из background-color */
.hero__slide {
    background-color: #3A4744;
    background-blend-mode: luminosity;
}

/* Зерно поверх всей страницы, как на старой пленке. Шум рисует SVG-фильтр feTurbulence */
.grain {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 8990;
    pointer-events: none;
    opacity: .07;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ===== КНОПКИ ===== */
.btn {
    display: inline-block;
    padding: 12px 28px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    border: 2px solid transparent;
    border-radius: 3px;
    cursor: pointer;
    transition: background-color .2s, color .2s, border-color .2s;
}

.btn:hover {
    text-decoration: none;
}

.btn--primary {
    background: #6B1A1E;
    border-color: #6B1A1E;
    color: #ffffff;
}

.btn--primary:hover {
    background: #4E1215;
    border-color: #4E1215;
}

.btn--outline {
    background: transparent;
    border-color: #6B1A1E;
    color: #6B1A1E;
}

.btn--outline:hover {
    background: #6B1A1E;
    color: #ffffff;
}

.btn--white {
    background: #CDD0CC;
    border-color: #ffffff;
    color: #101313;
}

.btn--white:hover {
    background: transparent;
    color: #ffffff;
}

.btn--small {
    padding: 8px 20px;
    font-size: 14px;
}

.btn--block {
    display: block;
    width: 100%;
}

/* ===== ВЕРХНЯЯ ПОЛОСА ===== */
.topbar {
    background: #101313;
    font-size: 13px;
}

.topbar__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.topbar__segments {
    display: flex;
}

.topbar__segments a,
.topbar__right a {
    display: block;
    padding: 9px 14px;
    color: #B5B5B5;
}

.topbar__segments a:hover,
.topbar__right a:hover {
    color: #ffffff;
    text-decoration: none;
}

.topbar__segments li:first-child a {
    padding-left: 0;
}

.topbar__segments .active a {
    color: #ffffff;
    font-weight: 600;
}

.topbar__right {
    display: flex;
}

.topbar__right i {
    margin-right: 4px;
}

/* ===== ШАПКА ===== */
.header {
    background: #CDD0CC;
    border-bottom: 1px solid #9EA39E;
    position: sticky;
    top: 0;
    z-index: 100;
}

.header.scrolled {
    box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
}

.header__inner {
    display: flex;
    align-items: center;
    height: 72px;
}

.logo {
    display: flex;
    align-items: center;
    margin-right: 40px;
    color: #161918;
}

.logo:hover {
    text-decoration: none;
}

.logo__mark {
    width: 40px;
    height: 40px;
    margin-right: 10px;
    background: #6B1A1E;
    color: #ffffff;
    font-size: 24px;
    font-weight: 800;
    line-height: 40px;
    text-align: center;
    border-radius: 3px;
}

.logo__text {
    font-size: 12px;
    line-height: 1.15;
    letter-spacing: .5px;
    text-transform: uppercase;
}

.logo__text b {
    font-size: 16px;
    font-weight: 800;
    letter-spacing: .3px;
}

.nav {
    flex: 1;
}

.nav__list {
    display: flex;
}

.nav__item {
    position: relative;
}

.nav__item > a {
    display: block;
    padding: 0 14px;
    line-height: 72px;
    color: #161918;
    font-weight: 600;
}

.nav__item > a:hover {
    color: #6B1A1E;
    text-decoration: none;
}

.nav__item > a i {
    font-size: 10px;
    margin-left: 3px;
    vertical-align: 2px;
}

.dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    padding: 25px 30px;
    background: #CDD0CC;
    border: 1px solid #9EA39E;
    border-top: 3px solid #6B1A1E;
    box-shadow: 0 6px 12px rgba(0, 0, 0, .1);
    white-space: nowrap;
}

.nav__item--drop:hover .dropdown {
    display: flex;
}

.dropdown__col {
    min-width: 200px;
    margin-right: 30px;
}

.dropdown__col:last-child {
    margin-right: 0;
}

.dropdown__title {
    margin-bottom: 10px;
    color: #4F5654;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.dropdown__col a {
    display: block;
    padding: 4px 0;
    color: #161918;
}

.dropdown__col a:hover {
    color: #6B1A1E;
}

.header__actions {
    display: flex;
    align-items: center;
}

.header__search {
    margin-right: 20px;
    color: #161918;
    font-size: 17px;
}

.header__search:hover {
    color: #6B1A1E;
}

.burger {
    display: none;
    width: 40px;
    height: 40px;
    margin-left: 12px;
    padding: 10px 8px;
    background: none;
    border: 0;
    cursor: pointer;
}

.burger span {
    display: block;
    height: 2px;
    margin-bottom: 6px;
    background: #161918;
}

.burger span:last-child {
    margin-bottom: 0;
}

/* ===== ПРОМО-ПЛАШКА ===== */
.promo-strip {
    padding: 9px 0;
    background: #B3B7AE;
    border-bottom: 1px solid #878B7E;
    font-size: 14px;
    text-align: center;
}

.promo-strip i {
    margin-right: 5px;
    color: #6B1A1E;
}

.promo-strip a {
    margin-left: 8px;
    font-weight: 600;
}

/* ===== СЛАЙДЕР ===== */
.hero {
    position: relative;
    height: 460px;
    overflow: hidden;
    background: #9DA29D;
}

.hero__slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: right center;
    opacity: 0;
    visibility: hidden;
    transition: opacity .6s, visibility .6s;
}

.hero__slide.active {
    opacity: 1;
    visibility: visible;
}

/* Темная вуаль поверх фоновой картинки слайда. Фильтр на сам слайд не подходит:
   он бы обесцветил и текст с кнопками внутри */
.hero__slide::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(10, 14, 14, .42);
}

.hero__slide .container {
    position: relative;
}

.hero__slide .container {
    height: 100%;
    display: flex;
    align-items: center;
}

.hero__content {
    max-width: 480px;
    padding: 30px 35px;
    background: rgba(205, 208, 204, .94);
}

.hero__slide--dark .hero__content {
    background: rgba(17, 21, 24, .85);
    color: #ffffff;
}

.hero__label {
    display: inline-block;
    margin-bottom: 12px;
    padding: 3px 8px;
    background: #6B1A1E;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
}

.hero h1,
.hero h2 {
    font-size: 34px;
}

.hero p {
    margin: 0 0 22px;
    font-size: 17px;
}

.hero__buttons .btn {
    margin: 0 8px 8px 0;
}

.hero__slide--dark .btn--outline {
    border-color: #ffffff;
    color: #ffffff;
}

.hero__note {
    margin-top: 6px;
    color: #4F5654;
    font-size: 12px;
}

.hero__arrow {
    position: absolute;
    top: 50%;
    width: 44px;
    height: 44px;
    margin-top: -22px;
    background: rgba(0, 0, 0, .35);
    border: 0;
    color: #ffffff;
    font-size: 16px;
    cursor: pointer;
    z-index: 5;
}

.hero__arrow:hover {
    background: #6B1A1E;
}

.hero__arrow--prev {
    left: 0;
}

.hero__arrow--next {
    right: 0;
}

.hero__dots {
    position: absolute;
    bottom: 18px;
    left: 0;
    width: 100%;
    text-align: center;
    z-index: 5;
}

.hero__dots button {
    width: 12px;
    height: 12px;
    margin: 0 5px;
    padding: 0;
    background: #CDD0CC;
    border: 2px solid #ffffff;
    border-radius: 50%;
    opacity: .6;
    cursor: pointer;
}

.hero__dots button.active {
    background: #6B1A1E;
    opacity: 1;
}

/* ===== ПРЕИМУЩЕСТВА ===== */
.features {
    padding: 22px 0;
    border-bottom: 1px solid #9EA39E;
}

.features__inner {
    display: flex;
    justify-content: space-between;
}

.feature {
    display: flex;
    align-items: center;
    width: 24%;
}

.feature i {
    margin-right: 14px;
    color: #6B1A1E;
    font-size: 30px;
}

.feature b {
    display: block;
    font-size: 15px;
}

.feature span {
    color: #4F5654;
    font-size: 13px;
}

/* ===== СЕКЦИИ ===== */
.section {
    padding: 60px 0;
}

.section--grey {
    background: #BCC0BB;
}

.section__title {
    font-size: 30px;
    text-align: center;
}

.section__title--left {
    margin: 0;
    text-align: left;
}

.section__subtitle {
    max-width: 700px;
    margin: 0 auto 40px;
    color: #4F5654;
    font-size: 17px;
    text-align: center;
}

.section__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 30px;
}

.section__all {
    font-weight: 600;
}

/* ===== ПРОДУКТЫ ===== */
.products {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: stretch;
}

.product {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 23.8%;
    padding: 0 20px 22px;
    background: #CDD0CC;
    border: 1px solid #9EA39E;
    border-top: 4px solid #B5B5B5;
}

.product--featured {
    border-color: #6B1A1E;
    border-top-color: #6B1A1E;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .1);
}

.product__ribbon {
    position: absolute;
    top: -4px;
    right: 20px;
    z-index: 2;
    padding: 5px 12px;
    background: #6B1A1E;
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.product__icon {
    width: 64px;
    height: 64px;
    margin-bottom: 18px;
    background: #6B1A1E;
    color: #ffffff;
    font-size: 30px;
    line-height: 64px;
    text-align: center;
    border-radius: 4px;
}

.product__icon--grey {
    background: #6B6E70;
}

.product__icon--dark {
    background: #101313;
}

/* Картинка товара во всю ширину карточки: отрицательные поля «съедают» отступы карточки */
.product__img {
    position: relative;
    height: 150px;
    margin: 0 -20px 18px;
    background: #1A1E1E;
    border-bottom: 1px solid #9EA39E;
}

.product__img > img:first-child {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(.55) sepia(.35) hue-rotate(115deg) saturate(.75) contrast(1.08) brightness(.86);
}

.product__img--black > img:first-child {
    object-fit: contain;
    background: #000000;
}

.product__sticker {
    position: absolute;
    right: 8px;
    bottom: -14px;
    width: 76px;
    transform: rotate(-14deg);
}

.product__caption {
    position: absolute;
    left: 0;
    bottom: 0;
    padding: 2px 7px;
    background: rgba(0, 0, 0, .7);
    color: #B5B5B5;
    font-size: 11px;
}

.product__name {
    margin-bottom: 8px;
    font-size: 21px;
}

.product__desc {
    margin-bottom: 18px;
    color: #4F5654;
    font-size: 14px;
}

.product__list {
    /* flex: 1 растягивает список, чтобы цены и кнопки во всех карточках стояли на одной высоте */
    flex: 1;
    margin-bottom: 20px;
}

.product__list li {
    padding: 5px 0;
    font-size: 14px;
}

.product__list i {
    margin-right: 6px;
    color: #4D6158;
}

.product__devices select {
    width: 100%;
    margin-bottom: 15px;
    padding: 9px 10px;
    font-family: inherit;
    font-size: 14px;
    border: 1px solid #AEB2AD;
    border-radius: 2px;
    background: #CDD0CC;
}

.product__price {
    margin-bottom: 15px;
}

.product__old {
    margin-right: 8px;
    color: #8A8A8A;
    font-size: 16px;
    text-decoration: line-through;
}

.product__new {
    font-size: 28px;
    font-weight: 800;
}

.product__period {
    color: #4F5654;
    font-size: 14px;
}

.product__more {
    display: block;
    margin-top: 14px;
    font-size: 14px;
    text-align: center;
}

.products__footnote {
    margin-top: 25px;
    color: #4F5654;
    font-size: 13px;
    text-align: center;
}

/* ===== СРАВНЕНИЕ ===== */
.compare-wrap {
    overflow-x: auto;
    margin-top: 30px;
}

.compare {
    width: 100%;
    min-width: 640px;
    border-collapse: collapse;
    background: #CDD0CC;
}

.compare th,
.compare td {
    padding: 14px 18px;
    border-bottom: 1px solid #ADB1AC;
    text-align: center;
}

.compare th {
    background: #101313;
    color: #ffffff;
    font-size: 15px;
}

.compare th:first-child,
.compare td:first-child {
    text-align: left;
}

.compare th.compare__hl {
    background: #6B1A1E;
}

.compare td.compare__hl {
    background: #BFC3BF;
}

.compare .fa-check {
    color: #4D6158;
}

.compare .fa-minus {
    color: #C4C4C4;
}

/* ===== НАГРАДЫ ===== */
.awards {
    padding: 40px 0;
    border-bottom: 1px solid #9EA39E;
}

.awards__title {
    margin-bottom: 25px;
    color: #4F5654;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.awards__list {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

.award {
    width: 150px;
    text-align: center;
    color: #4F5654;
    opacity: .85;
    transition: opacity .2s;
}

.award:hover {
    opacity: 1;
}

/* Круглая «печать» с картинкой вместо иконки */
.award__seal {
    width: 78px;
    height: 78px;
    margin: 0 auto 10px;
    background: #BCC0BB;
    border: 3px double #6E6A58;
    border-radius: 50%;
    overflow: hidden;
}

.award__seal img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(.55) sepia(.35) hue-rotate(115deg) saturate(.75) contrast(1.08) brightness(.86);
}

.award span {
    display: block;
    font-size: 13px;
    font-weight: 700;
}

.award small {
    font-size: 12px;
}

/* ===== БЛОКИ С КАРТИНКАМИ ===== */
.split {
    display: flex;
    align-items: center;
    margin-bottom: 60px;
}

.split:last-child {
    margin-bottom: 0;
}

.split--reverse {
    flex-direction: row-reverse;
}

.split__img {
    width: 50%;
}

.split__img img {
    width: 100%;
}

.split__text {
    width: 50%;
    padding: 0 0 0 50px;
}

.split--reverse .split__text {
    padding: 0 50px 0 0;
}

.split__text h2 {
    font-size: 28px;
}

.split__text p {
    margin: 0 0 18px;
    color: #333837;
    font-size: 16px;
}

.split__label {
    margin-bottom: 8px;
    color: #6B1A1E;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.split__label--light {
    color: #8C5A5D;
}

.checklist {
    margin-bottom: 25px;
}

.checklist li {
    position: relative;
    padding: 4px 0 4px 26px;
}

/* Галочка-иконка из Font Awesome через псевдоэлемент: в CSS указываем код символа и семейство шрифта */
.checklist li::before {
    content: "\f00c";
    position: absolute;
    left: 0;
    top: 5px;
    color: #4D6158;
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
}

.stores {
    display: flex;
}

.store {
    display: flex;
    align-items: center;
    margin-right: 12px;
    padding: 7px 16px;
    background: #000000;
    color: #ffffff;
    border-radius: 5px;
}

.store:hover {
    background: #333333;
    text-decoration: none;
}

.store i {
    margin-right: 10px;
    font-size: 24px;
}

.store span {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.1;
}

.store small {
    display: block;
    font-size: 10px;
    font-weight: 400;
}

/* ===== ДЛЯ БИЗНЕСА ===== */
.business {
    display: flex;
    background: #101313;
    color: #ffffff;
}

.business__img {
    width: 50%;
    min-height: 380px;
    background-size: cover;
    background-position: center;
}

.business__text {
    width: 50%;
    max-width: 600px;
    padding: 60px 50px;
    align-self: center;
}

.business__text h2 {
    font-size: 28px;
}

.business__text p {
    margin: 0 0 25px;
    color: #AEB2AD;
    font-size: 16px;
}

/* ===== СЧЕТЧИКИ ===== */
.stats {
    padding: 45px 0;
    background: #6B1A1E;
    color: #ffffff;
}

.stats__inner {
    display: flex;
    justify-content: space-around;
    text-align: center;
}

.stat b {
    display: block;
    font-size: 36px;
    font-weight: 800;
    line-height: 1.1;
}

.stat span {
    font-size: 14px;
    opacity: .85;
}

/* ===== НОВОСТИ ===== */
.news {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.news__item {
    width: 23.8%;
    background: #CDD0CC;
    border: 1px solid #9EA39E;
    color: #161918;
    transition: box-shadow .2s;
}

.news__item:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, .12);
    text-decoration: none;
}

.news__item:hover h3 {
    color: #6B1A1E;
}

.news__img {
    height: 170px;
    overflow: hidden;
}

.news__img img {
    width: 100%;
    height: 100%;
    /* object-fit: cover обрезает картинку под размер блока, не искажая пропорции */
    object-fit: cover;
}

.news__body {
    padding: 20px 22px 25px;
}

.news__meta {
    margin-bottom: 10px;
    color: #8A8A8A;
    font-size: 13px;
}

.news__tag {
    display: inline-block;
    margin-right: 8px;
    padding: 2px 7px;
    background: #BCC0BB;
    color: #4F5654;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.news__body h3 {
    font-size: 18px;
    transition: color .2s;
}

.news__body p {
    margin: 0;
    color: #4F5654;
    font-size: 14px;
}

/* ===== ПОДДЕРЖКА ===== */
/* Кафельная стена-полоса повторяется по горизонтали и тянется на всю высоту блока.
   Полупрозрачный градиент сверху осветляет плитку, чтобы текст читался */
.support {
    background: linear-gradient(rgba(186, 190, 193, .82), rgba(186, 190, 193, .82)),
                url('../img/pack/tile-wall-strip.png') repeat-x left top / auto 100%;
    background-color: #ADB1B4;
    overflow: hidden;
}

.support__inner {
    position: relative;
}

.support__inner {
    display: flex;
    align-items: center;
}

.support__text {
    width: 50%;
    padding: 50px 0;
}

.support__text h2 {
    font-size: 30px;
}

.support__text p {
    margin: 0 0 20px;
    font-size: 16px;
}

.support__links a {
    display: inline-block;
    margin: 0 20px 10px 0;
    font-weight: 600;
}

.support__links i {
    margin-right: 5px;
}

.support__phone {
    margin-top: 10px;
    font-size: 24px;
    font-weight: 700;
}

.support__phone i {
    margin-right: 6px;
    color: #6B1A1E;
    font-size: 20px;
}

.support__phone small {
    display: block;
    color: #4F5654;
    font-size: 13px;
    font-weight: 400;
}

.support__img {
    width: 50%;
    align-self: flex-end;
}

/* ===== ПОДПИСКА ===== */
.subscribe {
    padding: 35px 0;
    background: #BCC0BB;
    border-top: 1px solid #9EA39E;
}

.subscribe__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.subscribe__text b {
    display: block;
    font-size: 20px;
}

.subscribe__text span {
    color: #4F5654;
}

.subscribe__form {
    display: flex;
    flex-wrap: wrap;
    width: 520px;
}

.subscribe__form input[type="email"] {
    flex: 1;
    padding: 12px 14px;
    font-family: inherit;
    font-size: 15px;
    background: #D5D8D4;
    border: 1px solid #AEB2AD;
    border-right: 0;
    border-radius: 3px 0 0 3px;
}

.subscribe__form .btn {
    border-radius: 0 3px 3px 0;
}

.subscribe__agree {
    width: 100%;
    margin-top: 8px;
    color: #4F5654;
    font-size: 12px;
}

/* ===== ФУТЕР ===== */
.footer {
    padding: 50px 0 0;
    background: linear-gradient(rgba(23, 25, 27, .9), rgba(23, 25, 27, .94)),
                url('../img/pack/dark-tiles-strip.png') repeat-x left top / auto 100%;
    background-color: #101313;
    color: #B5B5B5;
    font-size: 14px;
}

.footer__cols {
    display: flex;
    flex-wrap: wrap;
    padding-bottom: 35px;
}

.footer__col {
    width: 18%;
    margin-right: 2%;
}

.footer__col--wide {
    width: 20%;
    margin-right: 0;
}

.footer__title {
    margin-bottom: 14px;
    color: #ffffff;
    font-weight: 700;
}

.footer__title--mt {
    margin-top: 25px;
}

.footer__col a {
    display: block;
    padding: 3px 0;
    color: #B5B5B5;
}

.footer__col a:hover {
    color: #ffffff;
}

.social {
    display: flex;
}

.social a {
    width: 36px;
    height: 36px;
    margin-right: 8px;
    padding: 0;
    background: #353B40;
    color: #ffffff;
    font-size: 16px;
    line-height: 36px;
    text-align: center;
    border-radius: 50%;
}

.social a:hover {
    background: #6B1A1E;
    text-decoration: none;
}

.footer__region {
    width: 100%;
    padding: 8px;
    background: #353B40;
    color: #ffffff;
    font-family: inherit;
    border: 1px solid #4A5055;
}

.footer__bottom {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 20px 0;
    border-top: 1px solid #353B40;
    font-size: 12px;
}

.footer__legal a {
    margin-left: 18px;
    color: #B5B5B5;
}

/* ===== ЛОГОТИП: кто-то выглядывает из-за буквы ===== */
.logo__mark {
    position: relative;
}

.logo__ghost {
    position: absolute;
    right: -9px;
    bottom: -11px;
    width: 17px;
    transform: rotate(18deg);
    opacity: .85;
}

/* ===== ПРОМО: ключик ===== */
.promo-strip__key {
    display: inline-block;
    width: 30px;
    margin: -6px 4px -6px 0;
    vertical-align: middle;
}

/* ===== СЛАЙДЕР: цена и бабушка ===== */
.hero__price {
    margin: -8px 0 20px;
    font-size: 17px;
}

.hero__price b {
    margin-left: 4px;
    font-size: 30px;
    font-weight: 800;
    border-bottom: 3px solid #6B1A1E;
}

/* Спрайт из двух кадров. steps(1) переключает кадры скачком, без плавного переезда.
   mix-blend-mode: lighten делает черный фон спрайта невидимым на темной картинке.
   background-position: 100% прижимает картинку правым краем, то есть показывает второй кадр
   при любом масштабе (на телефоне бабка вдвое меньше) */
.hero__granny {
    position: absolute;
    right: 11%;
    bottom: 0;
    width: 143px;
    height: 360px;
    background: url('../img/pack/granny-sprite.png') no-repeat 0 0 / 294px 360px;
    mix-blend-mode: lighten;
    opacity: .9;
    animation: granny-step 1.4s steps(1) infinite;
}

@keyframes granny-step {
    0%   { background-position: 0 0; }
    50%  { background-position: 100% 0; }
    100% { background-position: 100% 0; }
}

/* ===== СРАВНЕНИЕ: картинки в ячейках ===== */
.compare__ico {
    display: inline-block;
    width: 26px;
    height: 26px;
    margin-right: 8px;
    object-fit: cover;
    vertical-align: middle;
    border-radius: 3px;
    background: #BCC0BB;
}

.compare__price td {
    font-weight: 700;
}

/* Лица и фигурки вырезаем из общих листов-спрайтов: background-size уменьшает лист,
   background-position сдвигает его так, чтобы в окошке оказался нужный кадр */
.face {
    display: inline-block;
    width: 64px;
    height: 64px;
    background: #000000 url('../img/pack/voxel-faces-sheet.png') no-repeat;
    background-size: 650px 300px;
    border-radius: 3px;
    vertical-align: middle;
}

.face--fear     { background-position: -423px -21px; }
.face--surprise { background-position: -293px -121px; }
.face--laugh    { background-position: -553px -121px; }
.face--sneer    { background-position: -163px -221px; }

.guest {
    display: inline-block;
    width: 44px;
    height: 76px;
    background: #23262B url('../img/pack/lowpoly-horror-guests.png') no-repeat;
    background-size: 288px auto;
    border-radius: 3px;
    vertical-align: middle;
}

.guest--jeff      { background-position: -230px -195px; }
.guest--annabelle { background-position: -86px -289px; }
.guest--baldi     { background-position: -14px -6px; }
.guest--slender   { background-position: -86px -195px; }

/* ===== МОБЫ В КОМПЛЕКТЕ ===== */
.mobs {
    margin: -5px 0 25px;
}

.mobs__title {
    margin-bottom: 8px;
    color: #4F5654;
    font-size: 13px;
}

.mob {
    display: inline-block;
    width: 54px;
    height: 72px;
    margin: 0 6px 6px 0;
    background: #11141A url('../img/pack/horror-guests-3d.png') no-repeat;
    background-size: 288px 336px;
    border: 1px solid #9EA39E;
    border-radius: 3px;
}

.mob--baldi    { background-position: -9px -6px; }
.mob--neighbor { background-position: -81px -6px; }
.mob--bendy    { background-position: -153px -6px; }
.mob--huggy    { background-position: -9px -174px; }
.mob--freddy   { background-position: -153px -174px; }
.mob--scp173   { background-position: -153px -258px; }

/* ===== СТАТУС ОБНОВЛЕНИЯ БАЗ ===== */
.updates {
    padding: 14px 0;
    background: #1A1E1E;
    color: #BEC2BE;
    font-size: 13px;
}

.updates__inner {
    display: flex;
    align-items: center;
}

.updates__img {
    flex-shrink: 0;
    width: 76px;
    height: 54px;
    margin-right: 18px;
    border: 1px solid #2C3233;
}

.updates__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.updates__info {
    flex: 1;
}

.updates__head {
    display: flex;
    justify-content: space-between;
    margin-bottom: 6px;
}

.updates__head b {
    color: #ffffff;
}

.updates__bar {
    height: 8px;
    background: #101313;
    border: 1px solid #2C3233;
}

.updates__bar span {
    display: block;
    width: 3%;
    height: 100%;
    background: #6B1A1E;
}

.updates__note {
    margin-top: 5px;
    color: #7B817E;
    font-size: 12px;
}

/* ===== ОТЗЫВЫ ===== */
.reviews {
    display: flex;
    justify-content: space-between;
}

.review {
    width: 32%;
    padding: 28px 25px 22px;
    background: #CDD0CC;
    border: 1px solid #9EA39E;
    text-align: center;
}

.review__photo {
    width: 96px;
    height: 96px;
    margin: 0 auto 14px;
    border: 3px solid #BCC0BB;
    border-radius: 50%;
    overflow: hidden;
}

.review__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.review__stars {
    margin-bottom: 10px;
    color: #6E6A58;
    font-size: 13px;
}

.review p {
    margin: 0 0 14px;
    color: #333837;
}

.review__name {
    font-weight: 700;
}

.review__name span {
    color: #6B1A1E;
    font-weight: 600;
}

.review__cap {
    margin-top: 4px;
    color: #7B817E;
    font-size: 12px;
    font-style: italic;
}

/* ===== РУКОВОДСТВО (старый дом с обоями) ===== */
.board {
    background: linear-gradient(rgba(12, 15, 15, .86), rgba(12, 15, 15, .92)),
                url('../img/pack/wall-texture-strip.png') repeat-x left top / auto 100%;
    background-color: #1A1E1E;
    color: #DADDD9;
}

.board .section__subtitle {
    color: #9DA29D;
}

.board__inner {
    display: flex;
    align-items: flex-start;
}

.board__founders {
    width: 26%;
    margin-right: 4%;
    text-align: center;
}

/* Рамка как у старой фотографии на стене */
.board__frame {
    padding: 10px;
    background: #CDD0CC;
    border: 6px solid #262B2A;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .5);
    transform: rotate(-1.5deg);
}

.board__frame img {
    width: 100%;
    filter: grayscale(.55) sepia(.35) hue-rotate(115deg) saturate(.75) contrast(1.08) brightness(.86);
}

.board__caption {
    margin-top: 14px;
    color: #9DA29D;
    font-size: 13px;
    font-style: italic;
}

.board__people {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 70%;
}

.person {
    width: 31.5%;
    margin-bottom: 25px;
}

.person__photo {
    height: 170px;
    margin-bottom: 10px;
    background: #000000;
    border: 1px solid #2C3233;
}

.person__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.person b {
    display: block;
    font-size: 15px;
}

.person > span {
    color: #9DA29D;
    font-size: 13px;
}

.person__photo--broken {
    position: relative;
}

.person__photo--broken span {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    margin-top: -10px;
    color: #4F5654;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
}

/* ===== ПОДДЕРЖКА: операторы и видеозвонок ===== */
.operators {
    margin-top: 22px;
}

.operators__title {
    margin-bottom: 8px;
    color: #333837;
    font-size: 13px;
    font-weight: 700;
}

.operator {
    display: inline-flex;
    align-items: center;
    margin: 0 22px 8px 0;
    font-size: 13px;
}

.operator b {
    display: block;
}

.operator__ava {
    width: 44px;
    height: 44px;
    margin-right: 10px;
    background: #000000;
    border: 2px solid #4D6158;
    border-radius: 50%;
    overflow: hidden;
}

/* Человечек на картинке мелкий и стоит в центре: увеличиваем, чтобы в кружок попало лицо */
.operator__ava img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(2.2);
    transform-origin: 50% 42%;
}

.operator__ava--far img {
    transform: scale(5);
    transform-origin: 50% 37%;
}

.call {
    position: absolute;
    top: 35px;
    right: 20px;
    z-index: 3;
    width: 215px;
    padding: 0 0 8px;
    background: #101313;
    border: 1px solid #000000;
    border-radius: 3px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .45);
    text-align: center;
}

.call__bar {
    padding: 5px 8px;
    color: #B5B5B5;
    font-size: 11px;
    text-align: left;
}

.call__bar i {
    margin-right: 4px;
    color: #6B1A1E;
}

.call img {
    width: 201px;
    margin: 0 auto 8px;
    background: #1A1E1E;
}

.call__btn {
    width: 32px;
    height: 32px;
    margin: 0 8px;
    padding: 0;
    background: #6B1A1E;
    color: #ffffff;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
}

.call__btn--ok {
    background: #4D6158;
}

/* Экранная метка камеры в углу кадра. Выглядит как служебный текст видеопотока,
   поэтому без подчеркивания и с обычным курсором — заметит только тот, кто наведет мышь.
   bottom: 54px — это высота кнопок с отступами плюс 6px, то есть угол картинки.
   Двойной класс .call .call__osd сильнее правила темы «.theme-2010 a» с подчеркиванием */
.call .call__osd {
    position: absolute;
    right: 13px;
    bottom: 54px;
    z-index: 2;
    color: #CFD3CF;
    font: 9px Consolas, 'Courier New', monospace;
    line-height: 1;
    text-decoration: none;
    text-shadow: 0 0 2px #000000;
    opacity: .45;
    cursor: text;
    transition: opacity .3s;
}

.call .call__osd:hover,
.call .call__osd:focus {
    color: #CFD3CF;
    text-decoration: none;
    opacity: .9;
    cursor: pointer;
}

/* ===== ПОДПИСКА: картинка ===== */
.subscribe__lead {
    display: flex;
    align-items: center;
}

.subscribe__img {
    flex-shrink: 0;
    width: 120px;
    height: 68px;
    margin-right: 18px;
    border: 1px solid #9EA39E;
}

.subscribe__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ===== ФУТЕР: сотрудник месяца ===== */
.employee {
    display: flex;
    align-items: center;
    margin-top: 22px;
    cursor: pointer;
}

.employee img {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    margin-right: 10px;
    background: #353B40;
    border-radius: 3px;
    object-fit: contain;
}

.employee b {
    display: block;
    color: #ffffff;
    font-size: 13px;
}

.employee span {
    font-size: 12px;
}

/* ===== COOKIE: картинка ===== */
.cookie__img {
    flex-shrink: 0;
    width: 54px;
    height: 54px;
    margin-right: 16px;
    border-radius: 50%;
}

.cookie__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cookie p {
    flex: 1;
}

/* Крошечная картинка из подглядывающих: horror.js показывает ее в натуральную величину, увеличиваем */
.kl-peek[src*="squished-face"] {
    height: 200px;
}

/* ===== ОНЛАЙН-КОНСУЛЬТАНТ ===== */
.chat-tab {
    position: fixed;
    right: 25px;
    bottom: 0;
    padding: 10px 18px;
    background: #6B1A1E;
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    border-radius: 4px 4px 0 0;
    box-shadow: 0 0 8px rgba(0, 0, 0, .2);
    z-index: 90;
}

.chat-tab:hover {
    background: #4E1215;
    text-decoration: none;
}

.chat-tab i {
    margin-right: 6px;
}

/* ===== COOKIE ===== */
.cookie {
    display: none;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    /* Снизу запас под ярлык чата soser.net, чтобы он не закрывал кнопку «Принять» */
    padding: 14px 0 50px;
    background: #CDD0CC;
    border-top: 1px solid #9EA39E;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, .1);
    font-size: 13px;
    z-index: 95;
}

.cookie.show {
    display: block;
}

.cookie__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cookie p {
    margin: 0 30px 0 0;
}

/* ===== АДАПТИВ ===== */
@media (max-width: 1100px) {
    .topbar__segments li:nth-child(n+3) {
        display: none;
    }

    .nav__item > a {
        padding: 0 9px;
        font-size: 14px;
    }

    .logo {
        margin-right: 20px;
    }
}

@media (max-width: 960px) {
    .burger {
        display: block;
    }

    .nav {
        display: none;
        position: absolute;
        top: 72px;
        left: 0;
        width: 100%;
        background: #CDD0CC;
        border-bottom: 1px solid #9EA39E;
        box-shadow: 0 6px 12px rgba(0, 0, 0, .1);
    }

    .nav.open {
        display: block;
    }

    .nav__list {
        display: block;
    }

    .nav__item > a {
        padding: 0 20px;
        line-height: 48px;
        border-top: 1px solid #B3B7B2;
    }

    .nav__item--drop:hover .dropdown {
        display: none;
    }

    .header__inner {
        justify-content: space-between;
    }

    .features__inner {
        flex-wrap: wrap;
    }

    .feature {
        width: 50%;
        margin-bottom: 15px;
    }

    .product,
    .news__item {
        width: 48.8%;
        margin-bottom: 20px;
    }

    .hero__granny {
        right: 3%;
        opacity: .5;
    }

    .reviews,
    .board__inner {
        flex-direction: column;
    }

    .review {
        width: 100%;
        margin-bottom: 15px;
    }

    .board__founders {
        width: 60%;
        margin: 0 auto 35px;
    }

    .board__people {
        width: 100%;
    }

    /* relative вместо static: окно остается в потоке, но метка .call__osd
       по-прежнему отсчитывает свои right/bottom от него */
    .call {
        position: relative;
        top: auto;
        right: auto;
        margin: 0 0 25px;
    }

    .split,
    .split--reverse,
    .business,
    .support__inner {
        flex-direction: column;
    }

    .split__img,
    .split__text,
    .business__img,
    .business__text,
    .support__text,
    .support__img {
        width: 100%;
        max-width: none;
    }

    .split__text,
    .split--reverse .split__text {
        padding: 25px 0 0;
    }

    .business__img {
        min-height: 240px;
    }

    .business__text {
        padding: 35px 20px;
    }

    .stats__inner {
        flex-wrap: wrap;
    }

    .stat {
        width: 50%;
        margin-bottom: 20px;
    }

    .subscribe__inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .subscribe__form {
        width: 100%;
        margin-top: 15px;
    }

    .footer__col,
    .footer__col--wide {
        width: 48%;
        margin: 0 2% 25px 0;
    }
}

@media (max-width: 600px) {
    .topbar__segments {
        display: none;
    }

    .topbar__inner {
        justify-content: flex-end;
    }

    .header__search {
        display: none;
    }

    .logo__text b {
        font-size: 14px;
    }

    .hero {
        height: 520px;
    }

    .hero__slide {
        background-position: 45% center;
    }

    .hero__slide .container {
        align-items: flex-end;
        padding-bottom: 45px;
    }

    .hero__content {
        padding: 20px;
    }

    .hero h1,
    .hero h2 {
        font-size: 26px;
    }

    .hero__arrow {
        display: none;
    }

    .feature {
        width: 100%;
    }

    .product,
    .news__item {
        width: 100%;
    }

    /* Внизу слайда на телефоне лежит блок с текстом, поэтому бабка стоит сверху и вдвое меньше */
    .hero__granny {
        top: 15px;
        bottom: auto;
        right: 5%;
        /* 71, а не 72: при 72px в кадр попадает светлая полоса-разделитель между кадрами спрайта */
        width: 71px;
        height: 180px;
        background-size: 147px 180px;
        opacity: .8;
    }

    .topbar__right a {
        padding: 9px 8px;
        white-space: nowrap;
    }

    .person {
        width: 48%;
    }

    .person__photo {
        height: 130px;
    }

    .subscribe__img {
        width: 80px;
        height: 54px;
    }

    .updates__note {
        display: none;
    }

    .section {
        padding: 40px 0;
    }

    .section__title {
        font-size: 24px;
    }

    .section__head {
        flex-direction: column;
    }

    .cookie__inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .cookie p {
        margin: 0 0 10px;
    }

    .footer__legal a {
        display: inline-block;
        margin: 8px 15px 0 0;
    }

    .chat-tab {
        right: 10px;
        padding: 8px 12px;
        font-size: 13px;
    }
}

/* Кто попросил систему убрать анимацию, тому бабка не машет */
@media (prefers-reduced-motion: reduce) {
    .hero__granny {
        animation: none;
    }
}


/* ===== НАГРАДЫ И ОПЕРАТОРЫ: иконки вместо картинок ===== */
.award__seal i {
    display: block;
    color: #4F5654;
    font-size: 30px;
    line-height: 72px;
    text-align: center;
}

.operator__ava i {
    display: block;
    color: #7B817E;
    font-size: 20px;
    line-height: 40px;
    text-align: center;
}

/* ===== СПРЯТАННЫЙ ТЕКСТ =====
   Прозрачный, пока его не выделить мышью: ::selection красит выделенный текст */
.kl-hidden {
    color: transparent;
}

.kl-hidden::selection {
    color: #6B1A1E;
    background: #BCC0BB;
}


/* ===== ЮРИДИЧЕСКИЕ СТРАНИЦЫ (license.html, privacy.html) ===== */
.breadcrumbs {
    padding: 14px 0;
    border-bottom: 1px solid #9EA39E;
    color: #4F5654;
    font-size: 13px;
}

.breadcrumbs a {
    color: #4F5654;
}

.legal {
    padding: 40px 0 70px;
}

.legal__inner {
    display: flex;
    align-items: flex-start;
}

/* Оглавление сбоку едет вместе с прокруткой: sticky держит его у верха экрана */
.legal__toc {
    position: sticky;
    top: 95px;
    flex-shrink: 0;
    width: 250px;
    margin-right: 50px;
    padding-left: 16px;
    border-left: 3px solid #6B1A1E;
    font-size: 13px;
}

.legal__toc b {
    display: block;
    margin-bottom: 8px;
}

.legal__toc a {
    display: block;
    padding: 3px 0;
    color: #161918;
}

.legal__body {
    flex: 1;
    max-width: 780px;
    font-size: 14px;
    line-height: 1.65;
}

.legal__body h1 {
    margin-bottom: 4px;
    font-size: 26px;
}

.legal__sub {
    margin-bottom: 6px;
    font-size: 16px;
    font-weight: 600;
}

.legal__meta {
    margin-bottom: 26px;
    color: #4F5654;
    font-size: 13px;
}

.legal__body h2 {
    margin: 34px 0 12px;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: .3px;
}

.legal__body p {
    margin: 0 0 10px;
}

.legal__note {
    margin: 0 0 24px;
    padding: 12px 16px;
    background: #BCC0BB;
    border-left: 3px solid #4F5654;
    font-size: 13px;
}

/* Мелкий шрифт: то, что обычно никто не читает */
.legal__small {
    margin: -4px 0 12px;
    color: #7B817E;
    font-size: 9px;
    line-height: 1.35;
}

/* Совсем мелкий: читается только с увеличением (Ctrl +) */
.legal__tiny {
    margin-top: 40px;
    color: #9EA39E;
    font-size: 6px;
    line-height: 1.3;
}

/* Закрашенный текст. Цвет букв совпадает с фоном, поэтому видно только плашку.
   При выделении мышью ::selection перекрашивает буквы, и текст проступает */
.legal__redacted {
    padding: 0 2px;
    background: #161918;
    color: #161918;
}

.legal__redacted::selection {
    background: #6B1A1E;
    color: #ffffff;
}

/* Приписка от руки — тот же почерк, что и на фотографиях */
.legal__hand {
    display: block;
    margin: 4px 0 16px 24px;
    color: #6B1A1E;
    font-family: 'Caveat', 'Comic Sans MS', cursive;
    font-size: 21px;
    line-height: 1.1;
    transform: rotate(-1.5deg);
}

.legal__table {
    width: 100%;
    margin: 6px 0 14px;
    border-collapse: collapse;
    font-size: 13px;
}

.legal__table th,
.legal__table td {
    padding: 8px 10px;
    border: 1px solid #9EA39E;
    text-align: left;
    vertical-align: top;
}

.legal__table th {
    background: #101313;
    color: #ffffff;
    font-weight: 600;
}

.legal__table td {
    background: #D5D8D4;
}

.legal__history {
    margin: 0 0 10px;
    padding: 0;
    list-style: none;
    font-size: 13px;
}

.legal__history li {
    padding: 4px 0;
    border-bottom: 1px dotted #9EA39E;
}

.legal__accept {
    margin-top: 34px;
    padding: 16px 18px;
    background: #D5D8D4;
    border: 1px solid #9EA39E;
}

.legal__accept label {
    font-weight: 600;
}

.legal__accept .legal__small {
    margin: 6px 0 0;
}

@media (max-width: 960px) {
    .legal__inner {
        display: block;
    }

    .legal__toc {
        position: static;
        width: auto;
        margin: 0 0 30px;
    }
}


/* ===== ЭЛЕМЕНТЫ ТЕМЫ «2010 ГОД» =====
   Видны только когда у <html> есть класс theme-2010 (см. css/theme-2010.css).
   !important — чтобы их не показали правила вроде «.topbar__right a { display: block }» */
.t2010-only,
.t2010-badges {
    display: none !important;
}


/* ===== ИСТОРИЯ КОМПАНИИ: вертикальная шкала ===== */
.timeline {
    position: relative;
    max-width: 820px;
    margin: 0 auto;
    padding-left: 130px;
}

/* Сама линия шкалы — псевдоэлемент, чтобы не добавлять в разметку пустой div */
.timeline::before {
    content: "";
    position: absolute;
    top: 6px;
    bottom: 6px;
    left: 112px;
    width: 2px;
    background: #9EA39E;
}

.timeline__item {
    position: relative;
    display: flex;
    align-items: flex-start;
    margin-bottom: 26px;
}

.timeline__item::before {
    content: "";
    position: absolute;
    top: 5px;
    left: -23px;
    width: 12px;
    height: 12px;
    background: #6B1A1E;
    border: 2px solid #CDD0CC;
    border-radius: 50%;
}

.timeline__year {
    position: absolute;
    left: -130px;
    width: 95px;
    color: #6B1A1E;
    font-size: 16px;
    font-weight: 700;
    text-align: right;
}

.timeline__img {
    flex-shrink: 0;
    width: 120px;
    height: 80px;
    margin-right: 18px;
    overflow: hidden;
    border: 1px solid #9EA39E;
}

.timeline__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.timeline__img--dark {
    background: #101313;
}

.timeline__img--dark img {
    object-fit: contain;
}

.timeline__text {
    font-size: 14px;
}

.timeline__text b {
    display: block;
    margin-bottom: 2px;
    font-size: 15px;
}

/* ===== ЭНЦИКЛОПЕДИЯ УГРОЗ ===== */
.threats__lead {
    margin: -14px 0 24px;
    color: #4F5654;
}

.threats {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.threat {
    display: flex;
    width: 49%;
    margin-bottom: 16px;
    background: #D5D8D4;
    border: 1px solid #9EA39E;
}

.threat__img {
    flex-shrink: 0;
    width: 150px;
    background: #101313;
}

.threat__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.threat__body {
    padding: 14px 16px 12px;
}

/* Название угрозы набрано моноширинным шрифтом, как в отчетах антивирусов */
.threat__name {
    margin-bottom: 4px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 15px;
    font-weight: 700;
}

.threat__meta {
    margin-bottom: 8px;
    color: #4F5654;
    font-size: 12px;
}

.threat__level {
    display: inline-block;
    margin-right: 6px;
    padding: 1px 7px;
    border-radius: 2px;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.threat__level--high {
    background: #6B1A1E;
}

.threat__level--mid {
    background: #8A6A10;
}

.threat__level--low {
    background: #4D6158;
}

.threat__body p {
    margin: 0;
    font-size: 13px;
}

/* ===== ПАРТНЕРЫ И СЕРТИФИКАТЫ ===== */
.partners {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 34px;
}

/* «Логотипы» партнеров — просто названия в серых плашках, как обесцвеченные логотипы */
.partner {
    margin: 0 8px 10px;
    padding: 12px 20px;
    background: #CDD0CC;
    border: 1px solid #9EA39E;
    color: #6E746F;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .5px;
    text-transform: uppercase;
}

.certs {
    display: flex;
    justify-content: space-between;
}

.cert {
    display: flex;
    align-items: flex-start;
    width: 32%;
    padding: 14px 16px;
    background: #D5D8D4;
    border: 1px solid #9EA39E;
}

.cert i {
    margin-right: 12px;
    color: #6B1A1E;
    font-size: 26px;
}

.cert b {
    display: block;
    font-size: 13px;
}

.cert span {
    color: #4F5654;
    font-size: 12px;
}

/* ===== «ПАРТНЕРЫ»: узкая полоса после блока «Нам доверяют» ===== */
.allies {
    padding: 18px 0;
    border-top: 1px solid #9EA39E;
    border-bottom: 1px solid #9EA39E;
    background: #E4E7E3;
}

.allies__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.allies__title {
    margin-right: 18px;
    color: #6B1A1E;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
}

.allies__list {
    display: flex;
    flex-wrap: wrap;
}

.allies__item {
    margin: 4px 8px 4px 0;
    padding: 4px 12px;
    background: #CDD0CC;
    border: 1px solid #9EA39E;
    color: #4F5654;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    /* Рука-курсор у всех плашек, в том числе у той, что не ссылка */
    cursor: pointer;
}

/* Два класса весят больше, чем a:hover, поэтому подчеркивание ссылок здесь не включается */
.allies__item:hover {
    border-color: #6B1A1E;
    color: #6B1A1E;
    text-decoration: none;
}

/* width: 100% переносит сноску на отдельную строку под названиями */
.allies__note {
    width: 100%;
    margin-top: 6px;
    color: #6E746F;
    font-size: 11px;
}

/* ===== ВАКАНСИИ ===== */
.job {
    display: flex;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid #9EA39E;
}

.job:first-child {
    border-top: 1px solid #9EA39E;
}

.job__title {
    width: 34%;
    font-size: 15px;
    font-weight: 700;
}

.job__dept {
    width: 22%;
    color: #4F5654;
}

.job__place {
    flex: 1;
    color: #4F5654;
    font-size: 13px;
}

/* ===== АДРЕС В ФУТЕРЕ ===== */
.footer__address {
    margin-top: 4px;
    color: #7B817E;
}

/* Ссылки под адресом переносятся на новую строку: у первой убираем отступ слева */
.footer__legal a:first-child {
    margin-left: 0;
}

@media (max-width: 960px) {
    .threat,
    .cert {
        width: 100%;
        margin-bottom: 12px;
    }

    .certs {
        display: block;
    }

    .job {
        flex-wrap: wrap;
    }

    .job__title,
    .job__dept,
    .job__place {
        width: 100%;
        margin-bottom: 4px;
    }
}

@media (max-width: 600px) {
    .timeline {
        padding-left: 24px;
    }

    .timeline::before {
        left: 6px;
    }

    .timeline__item {
        flex-wrap: wrap;
        padding-top: 24px;
    }

    .timeline__year {
        top: 0;
        left: 0;
        width: auto;
        text-align: left;
    }

    .timeline__img {
        margin-bottom: 8px;
    }

    .threat__img {
        width: 110px;
    }
}


/* ===== ЛОГОТИП: знак-щит (img/logo/logo-mark.svg) =====
   Класс сильнее правила «body img», поэтому общая тонировка картинок на логотип не действует */
.logo__emblem {
    width: 36px;
    height: 40px;
    margin-right: 10px;
    filter: none;
}


/* ===== УСЛУГИ И ПОДПИСКИ =====
   Карточки — те же .product, что у продуктов, только по три в ряд и без списка функций */
.services {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 18px;
}

.services .product {
    width: calc(33.333% - 12px);
}

/* Описание растягивается вместо списка функций: цены и кнопки встают на одну линию */
.services .product__desc {
    flex: 1;
}

.services .product__img {
    height: 170px;
}

@media (max-width: 960px) {
    .services .product {
        width: calc(50% - 9px);
    }
}

@media (max-width: 600px) {
    .services .product {
        width: 100%;
    }
}