.company-history {
    position: relative;
    background: linear-gradient(180deg, #F7F9FC 0%, #FFF 100%);
}

.company-history__header {
    padding-top: 7.2rem;
    width: 100%;
    text-align: center;
}

.company-history__header .container {
    max-width: 144rem;
    margin: 0 auto;
    padding: 0 2rem;
}


.company-history__timeline {
    position: relative;
    margin-top: 6.4rem;
    padding: 0 2rem;
    max-width: 144rem;
    margin-left: auto;
    margin-right: auto;
}

.company-history__years {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
}

/* Прогресс-бар точно по центру точек */
.company-history__progress-bar {
    position: absolute;
    top: 0;
    height: 0.2rem;
    background: rgba(172, 177, 185, 1);
    z-index: 1;
}

.company-history__progress-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: rgba(92, 137, 238, 1);
    transition: width 0.3s ease;
}

.company-history__year-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    position: relative;
    z-index: 2;
}

/* Точка точно по центру прогресс-бара */
.company-history__year-dot {
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background: rgba(172, 177, 185, 1);
    margin-bottom: 2.4rem;
    transition: background 0.3s ease;
    position: relative;
    z-index: 3;
    margin-top: -0.4rem; /* -4px чтобы точка была точно по центру линии */
}

/* Закрашенные точки для активного и предыдущих */
.company-history__year-item.active .company-history__year-dot,
.company-history__year-item.filled .company-history__year-dot {
    background: rgba(92, 137, 238, 1);
}

.company-history__year-box {
    width: 8rem;
    height: 3.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0.1rem solid rgba(0, 65, 215, 1);
    background: transparent;
    font-family: 'Manrope', sans-serif;
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 2.6rem;
    text-align: center;
    color: rgba(0, 65, 215, 1);
    transition: all 0.3s ease;
}

.company-history__year-item:hover .company-history__year-box {
    background: rgba(216, 233, 255, 1);
}

.company-history__year-item.active .company-history__year-box {
    background: rgba(0, 65, 215, 1);
    color: rgba(255, 255, 255, 1);
    transform: translateY(3.4rem);
}

.company-history__content-wrapper {
    margin-top: 8rem;
    padding-bottom: 8rem;
}

.company-history__content-wrapper .container {
    max-width: 144rem;
    margin: 0 auto;
    padding: 0 2rem;
}

.company-history__content {
    display: none;
}

.company-history__content.active {
    display: block;
}

.company-history__content-box {
    width: 100%;
    max-width: 131.2rem;
    margin: 0 auto;
    padding: 4.8rem;
    background: rgba(255, 255, 255, 1);
    border: 0.1rem solid rgba(224, 224, 224, 1);
}

.company-history__content-inner {
    max-width: 90rem;
    margin: 0 auto;
}

.company-history__text p {
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 2.4rem;
    color: #45474C;
    margin: 0 0 3.2rem 0;
}

.company-history__text p:last-child {
    margin-bottom: 0;
}

.company-history__list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.company-history__list li {
    position: relative;
    padding-left: 2rem;
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 2.4rem;
    color: #45474C;
    margin-bottom: 3.2rem;
}

.company-history__list li:last-child {
    margin-bottom: 0;
}

.company-history__list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 1rem;
    width: 0.4rem;
    height: 0.4rem;
    background: rgba(0, 65, 215, 1);
}

/* Добавить в конец style.css */

@media (min-width: 860px) and (max-width: 1279px) {
    .company-history {
        height: 814px;
    }
    
    /* Переопределяем контейнер для планшетов */
    .company-history__years {
        display: grid;
        grid-template-columns: repeat(auto-fit, 8rem);
        gap: 7.6rem 7.6rem; /* 76px между элементами */
        row-gap: 4.8rem; /* 48px между строками */
        justify-content: center;
        align-items: start;
        max-width: 78rem; /* 780px как в дизайне */
        margin: 0 auto;
        position: relative;
        padding: 0;
    }
    
    /* Скрываем оригинальный прогресс-бар для планшетов */
    .company-history__years .company-history__progress-bar {
        display: none;
    }
    
    /* Создаем два прогресс-бара через псевдоэлементы */
    .company-history__years::before,
    .company-history__years::after {
        content: '';
        position: absolute;
        height: 0.25rem;
        background: rgba(172, 177, 185, 1);
        z-index: 1;
    }
    
    /* Первый прогресс-бар (верхняя строка) */
    .company-history__years::before {
        top: 0;
        left: var(--first-bar-left, 0);
        width: var(--first-bar-width, 0);
    }
    
    /* Заливка первого прогресс-бара */
    .company-history__years::before {
        background: linear-gradient(
            to right, 
            rgba(92, 137, 238, 1) 0, 
            rgba(92, 137, 238, 1) var(--first-progress-width, 0), 
            rgba(172, 177, 185, 1) var(--first-progress-width, 0)
        );
    }
    
    /* Второй прогресс-бар (нижняя строка) */
    .company-history__years::after {
        top: calc(11.4rem); /* высота элемента + отступ между строками */
        left: var(--second-bar-left, 0);
        width: var(--second-bar-width, 0);
        background: linear-gradient(
            to right, 
            rgba(92, 137, 238, 1) 0, 
            rgba(92, 137, 238, 1) var(--second-progress-width, 0), 
            rgba(172, 177, 185, 1) var(--second-progress-width, 0)
        );
    }

    .company-history__year-item:nth-child(6)::after {
        content: '';
        position: absolute;
        top: 0rem; /* выравниваем с точкой */
        right: -4rem; /* 76px отступ + 8px = 84px влево от следующей позиции */
        width: 7.8rem; /* 78px длина линии */
        height: 0.2rem;
        background: var(--connector-after-color, rgba(172, 177, 185, 1));
        z-index: 1;
    }
    
    /* Соединительная линия перед вторым рядом */
    .company-history__year-item:nth-child(7)::before {
        content: '';
        position: absolute;
        top: 0rem; /* выравниваем с точкой */
        left: -4rem; /* 78px линия + 6px = 84px влево */
        width: 7.8rem; /* 78px длина линии */
        height: 0.25rem;
        background: var(--connector-before-color, rgba(172, 177, 185, 1));
        z-index: 1;
    }
    
    /* Перестраиваем layout для двух строк */
    .company-history__year-item {
        grid-column: auto;
        position: relative;
        z-index: 2;
    }
    
    /* Верхняя строка - первая половина элементов */
    .company-history__year-item:nth-child(-n+6) { /* Максимум 6 элементов в первой строке */
        grid-row: 1;
    }
    
    /* Нижняя строка - вторая половина элементов */
    .company-history__year-item:nth-child(n+7) { /* С 7го элемента */
        grid-row: 2;
    }
    
    /* Выравнивание строк через изменение grid-column-start */
    
    /* Для нечетного количества элементов - сдвигаем вторую строку */
    /* Это работает для распространенных случаев */
    
    /* Если всего 9 элементов (5+4): верхняя строка сдвинута вправо */
    .company-history__year-item:nth-child(5):nth-last-child(5) ~ .company-history__year-item:first-child,
    .company-history__year-item:nth-child(5):nth-last-child(5) ~ .company-history__year-item:nth-child(2),
    .company-history__year-item:nth-child(5):nth-last-child(5) ~ .company-history__year-item:nth-child(3),
    .company-history__year-item:nth-child(5):nth-last-child(5) ~ .company-history__year-item:nth-child(4),
    .company-history__year-item:nth-child(5):nth-last-child(5) {
        grid-column-start: 2; /* Сдвигаем первую строку вправо */
    }
    
    /* Если всего 7 элементов (4+3): первая строка по центру, вторая влево */
    .company-history__year-item:nth-child(4):nth-last-child(4) ~ .company-history__year-item:first-child,
    .company-history__year-item:nth-child(4):nth-last-child(4) ~ .company-history__year-item:nth-child(2),
    .company-history__year-item:nth-child(4):nth-last-child(4) ~ .company-history__year-item:nth-child(3),
    .company-history__year-item:nth-child(4):nth-last-child(4) {
        grid-column-start: 1;
    }
    
    /* Размеры элементов для планшетов */
    .company-history__year-box {
        width: 8rem; /* 80px */
        height: 3.6rem; /* 36px */
        font-size: 1.6rem;
    }
    
    /* Контент для планшетов */
    .company-history__content-wrapper {
        margin-top: 8rem;
        padding-bottom: 4.8rem;
    }
    
    .company-history__content-box {
        padding: 3.6rem;
        max-width: 100rem;
    }

    .company-history__content-inner {
        max-width: 62rem;
    }
}

/* Дополнительные стили для мобильных */
/* Добавить в конец style.css */

/* Мобильная версия для экранов 480px-859px (4 в ряд) */
@media (min-width: 480px) and (max-width: 859px) {
    .company-history {
        height: auto; /* Убираем фиксированную высоту */
    }
    
    /* Убираем все прогресс-бары на мобильных */
    .company-history__years .company-history__progress-bar,
    .company-history__years::before,
    .company-history__years::after {
        display: none !important;
    }
    
    /* Переопределяем layout на простую сетку */
    .company-history__years {
        display: grid !important;
        grid-template-columns: repeat(4, 8rem); /* 4 блока по 80px */
        gap: 1.6rem; /* 16px отступы */
        justify-content: center;
        align-items: center;
        max-width: none;
        position: static;
    }
    
    /* Центрирование неполной последней строки для 4 в ряд */
    /* Если остался 1 элемент - ставим его в центр (колонка 2-3) */
    .company-history__year-item:nth-child(4n+1):nth-last-child(1) {
        grid-column: 2 / span 2;
    }
    
    /* Если остались 2 элемента - ставим их в центр (колонки 2-3) */
    .company-history__year-item:nth-child(4n+1):nth-last-child(2) {
        grid-column: 2;
    }
    .company-history__year-item:nth-child(4n+2):nth-last-child(1) {
        grid-column: 3;
    }
    
    /* Если остались 3 элемента - сдвигаем на одну позицию вправо */
    .company-history__year-item:nth-child(4n+1):nth-last-child(3) {
        grid-column: 1;
    }
    .company-history__year-item:nth-child(4n+2):nth-last-child(2) {
        grid-column: 2;
    }
    .company-history__year-item:nth-child(4n+3):nth-last-child(1) {
        grid-column: 3;
    }

    /* Убираем специфичное позиционирование элементов */
    .company-history__year-item {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        position: static !important;
        grid-column: auto !important;
        grid-row: auto !important;
        margin: 0 !important;
        z-index: auto !important;
    }
    
    /* Убираем точки на мобильных */
    .company-history__year-dot {
        display: none !important;
    }
    
    /* Стили блоков для мобильных */
    .company-history__year-box {
        width: 8rem !important; /* 80px */
        height: 3.6rem !important; /* 36px */
        font-size: 1.6rem !important;
        margin: 0 !important;
        transform: none !important; /* Убираем анимацию сдвига */
    }
    
    /* Убираем соединительные линии */
    .company-history__year-item::before,
    .company-history__year-item::after {
        display: none !important;
    }
    
    /* Контент */
    .company-history__content-wrapper {
        margin-top: 4rem;
        padding-bottom: 4rem;
    }
    
    .company-history__content-box {
        padding: 3rem;
    }
}

/* Мобильная версия для экранов меньше 479px (3 в ряд) */
@media (max-width: 479px) {
    .company-history {
        height: auto; /* Убираем фиксированную высоту */
    }
    
    .company-history__header {
        padding-top: 6.4rem;
    }
    
    .company-history__title {
        font-size: 3rem;
        line-height: 3.6rem;
    }
    
    
    /* Убираем все прогресс-бары на мобильных */
    .company-history__years .company-history__progress-bar,
    .company-history__years::before,
    .company-history__years::after {
        display: none !important;
    }
    
    /* Переопределяем layout на простую сетку */
    .company-history__years {
        display: grid !important;
        grid-template-columns: repeat(3, 8rem); /* 3 блока по 80px */
        gap: 1.6rem; /* 16px отступы */
        justify-content: center;
        align-items: center;
        max-width: none;
        position: static;
    }

    /* Центрирование неполной последней строки для 3 в ряд */
    /* Если остался 1 элемент - ставим его в центр (колонка 2) */
    .company-history__year-item:nth-child(3n+1):nth-last-child(1) {
        grid-column: 2;
    }
    
    /* Если остались 2 элемента - оставляем как есть (они займут колонки 1-2, что выглядит нормально) */
    /* Но можно центрировать и их тоже */
    .company-history__year-item:nth-child(3n+1):nth-last-child(2) {
        grid-column: 1;
    }
    .company-history__year-item:nth-child(3n+2):nth-last-child(1) {
        grid-column: 3;
    }
    
    /* Убираем специфичное позиционирование элементов */
    .company-history__year-item {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        position: static !important;
        grid-column: auto !important;
        grid-row: auto !important;
        margin: 0 !important;
        z-index: auto !important;
    }
    
    /* Убираем точки на мобильных */
    .company-history__year-dot {
        display: none !important;
    }
    
    /* Стили блоков для мобильных */
    .company-history__year-box {
        width: 8rem !important; /* 80px */
        height: 3.6rem !important; /* 36px */
        font-size: 1.6rem !important;
        margin: 0 !important;
        transform: none !important; /* Убираем анимацию сдвига */
    }
    
    /* Убираем соединительные линии */
    .company-history__year-item::before,
    .company-history__year-item::after {
        display: none !important;
    }
    
    /* Контент */
    .company-history__content-wrapper {
        margin-top: 4rem;
        padding-bottom: 4rem;
    }
    
    .company-history__content-box {
        padding: 3rem;
    }
}

/* Убираем планшетную версию для мобильных */
@media (max-width: 859px) {
    .company-history__tablet-container {
        display: none !important;
    }
    
    .company-history__years {
        display: grid !important; /* Мобильная сетка активна */
    }

    .company-history__header {
        padding-top: 4rem;
    }

    .company-history__timeline {
        margin-top: 3.2rem;
        padding: 0 2rem;
    }
}