/* Start:/local/templates/telsis/styles/components/index/hero.css?17931868522560*/

.hero {
    max-width: 1920px;
    margin: 0 auto;
}

.hero__wrapper {
    position: relative;
}

.hero__bg {
    position: relative;
}

.hero__bg-video {
    width: 100%;
    height: 37.5rem;
    object-fit: cover;
    display: block;
}

.hero__bg-img {
    height: 37.5rem; 
    width: 100%;
    object-fit: cover;
    object-position: 50% 15%;
}

.hero__bg::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    background: linear-gradient(
    to top, 
        rgba(0, 0, 0, 0.95) 0%,
        rgba(0, 0, 0, 0) 100%
    );
    pointer-events: none;
}

/* блок на всю ширину контейнера (как в макете): H1 слева, правая колонка начинается на 59,12% ширины
   контейнера (1050 из 1776 px на 1920) и по ширине равна кнопкам — до правого края остаётся 12,3%.
   Между кнопками 24, а не 30 как в макете: кнопки на 4 px шире макетных, и с 30 колонка вышла бы за 1629 */
.hero__content {
    position: absolute;
    bottom: 6rem;
    left: 4.5rem;
    right: 4.5rem;

    display: grid;
    grid-template-columns: 59.12% auto;
    color: var(--color-white);
}

.hero__content h1 {
    line-height: var(--line-height-h1);
    font-size: var(--font-size-h1);
    font-weight: 600;
}

.hero__right {
    justify-self: start;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.hero__right p {
    line-height: var(--line-height-text-large);
    font-size: var(--font-size-text-large);
}

.hero__buttons {
    display: flex;
    gap: 1.5rem;
}

.hero__button {
    font-weight: 600;
    font-size: var(--font-size-text-base);
    line-height: var(--line-height-text-base);
    padding: 0.75rem 1.5rem;
    transition: background-color var(--transition-time);
}

.hero__button.orange {
    background-color: var(--color-primary);
    color: var(--color-white);
}

.hero__button.orange:hover {
    background-color: var(--color-primary-hover);
}

.hero__button.orange:active {
    background-color: var(--color-primary-active);
}

.hero__button.white {
    background-color: var(--color-white);
    color: var(--color-ghost-text);
    transition: color var(--transition-time);
}

.hero__button.white:hover {
    color: var(--color-ghost-text-hover);
}

.hero__button.white:active {
    background-color: var(--color-ghost-bg-active);
    color: var(--color-ghost-text-active);
}
/* End */


/* Start:/local/templates/telsis/styles/components/index/catalog.css?17931868524264*/
.catalog {
    margin-top: var(--section-gap);
}

.catalog__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    border: 1px solid var(--color-border);
    background-color: var(--color-border);
    margin-top: var(--title-gap);
    margin-bottom: 2rem;
}

.catalog__item--brands {
    grid-column: span 2;
}

.category-card {
    display: flex;
    flex-direction: column;
    justify-content: end;
    background-color: var(--color-bg-card);
    padding: var(--card-pad);
    min-height: 16.25rem;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.category-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--color-primary);
    clip-path: inset(100% 100% 0% 0%);
    transition: clip-path var(--transition-time-card) ease-out;
    z-index: -1;
}

.category-card:hover::before {
    clip-path: inset(0% 0% 0% 0%);
}

.category-card__title,
.category-card__desc,
.category-card__arrow {
    position: relative;
    z-index: 1;
    transition: color var(--transition-time-card);
}

.category-card:hover .category-card__title { color: var(--color-white); }
.category-card:hover .category-card__desc { color: var(--color-white); }
.category-card:hover .category-card__arrow { color: var(--color-white); }

.category-card__title {
    font-weight: 600;
    font-size: var(--font-size-title-2);
    line-height: var(--line-height-title-2);
    color: var(--color-text);
    margin-bottom: 0.75rem;
}

.category-card__desc {
    font-weight: 400;
    font-size: var(--font-size-text-base);
    line-height: var(--line-height-text-base);
    color: var(--color-text-secondary);
    /* описание по макету — не больше двух строк */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

/* название не заходит под стрелку ↗ в правом верхнем углу */
.category-card__wrapper {
    padding-right: 1.5rem;
}

.category-card__arrow {
    position: absolute;
    top: 2.5rem;
    right: 2.5rem;
    width: 1.5rem;
    height: 1.5rem;
}

.brands-block {
    display: flex;
    background-color: var(--color-black);
    color: var(--color-white);
    position: relative;
    overflow: hidden;
}

.brands-block__content {
    position: relative;
    z-index: 2;
    padding: 3.125rem;
    width: 80%; 
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.brands-block__title {
    font-weight: 600;
    font-size: var(--font-size-title-2);
    line-height: var(--line-height-title-2);
    color: var(--color-white);
    margin: 0 0 1.875rem 0;
}

.brands-block__list {
    display: grid;
    grid-template-columns: repeat(3, max-content);
    gap: 0.875rem 2.5rem;
}

.brands-block__item:hover .brands-block__link > span { color: var(--color-primary); }
.brands-block__item:active .brands-block__link > span { color: var(--color-primary-hover); }

.brands-block__link {
    font-weight: 600;
    font-size: var(--font-size-text-base);
    line-height: var(--line-height-text-base);
    color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.brands-block__link > span {
    transition: color var(--transition-time);
}

.brands-block__bg {
    position: absolute;
    top: 0;
    right: 0;
    width: 62%;
    height: 100%;
    z-index: 1;
    overflow: hidden;
}

.brands-block__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 38%;
    transform: scale(1.35);
}

.brands-block__bg::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right,
            rgba(0, 0, 0, 1) 0%,
            rgba(0, 0, 0, 0) 50%,
            rgba(0, 0, 0, 0) 100%);
    pointer-events: none;
}

.brands-block__pattern {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 50%;
    z-index: 2;
    pointer-events: none;
}

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

.catalog__footer {
    display: flex;
    justify-content: flex-end;
}
/* End */


/* Start:/local/templates/telsis/styles/components/index/solutions.css?17931868523909*/

.solutions {
    margin-top: var(--section-gap);
}

.tabs {
    background-color: var(--color-white);
    margin-top: var(--title-gap);
}

.tabs__list {
    display: flex;
    align-items: stretch;
}

.tabs__item {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    transition: background-color var(--transition-time);
}

.tabs__item:not(.tabs__item--active):hover {
    background-color: var(--color-secondary);
}

.tabs__item--active {
    border-bottom: 0.125rem solid var(--color-primary);
}

.tabs__btn {
    width: 100%;
    min-height: 6.25rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: var(--font-size-text-base);
    line-height: var(--line-height-text-base);
    color: #216CFF;
    text-transform: uppercase;
    text-align: center;
}

.tabs__btn img {
    max-width: 100%;
    max-height: 2.5rem;
    object-fit: contain;
}

.case-study {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    margin-top: 1rem;
    background-color: var(--color-white);
}

.case-study__preview {
    position: relative;
    padding: var(--panel-pad);
    overflow: hidden;
    min-height: 37.5rem;
}

.case-study__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.case-study__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.case-study__bg::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.56);
}

.case-study__preview-info {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;

    position: relative;
    z-index: 2;
    color: var(--color-white);
}

.case-study__preview-title {
    font-weight: 600;
    font-size: var(--font-size-h3);
    line-height: var(--line-height-h3);
}

.case-study__meta {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.case-study__meta-item {
    font-weight: 400;
    font-size: var(--font-size-text-base);
    line-height: var(--line-height-text-base);
    color: var(--color-white);
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
}

.case-study__details {
    padding: 3.5rem;
    display: flex;
    gap: 2.5rem;
    flex-direction: column;
    justify-content: space-between;
}

.case-study__client-title {
    font-weight: 600;
    font-size: var(--font-size-title-1);
    line-height: var(--line-height-title-1);
    color: var(--color-text);
    margin-bottom: 2rem;
}

.case-study__desc {
    font-weight: 400;
    font-size: var(--font-size-text-large);
    line-height: var(--line-height-text-large);
    color: var(--color-text-secondary);
    margin-bottom: 1.5rem;
}

.case-study__features {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.case-study__feature-item {
    display: flex;
    gap: 1rem;

    font-weight: 400;
    font-size: var(--font-size-text-large);
    line-height: var(--line-height-text-large);
    color: var(--color-text);
    position: relative;
}

.case-study__feature-item > svg {
    flex-shrink: 0;
}

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

.case-study__actions {
    display: flex;
    align-items: center;
    gap: 2.5rem;
}

.case-study__brand img {
    height: 2.5rem;
}

.solutions__footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: var(--title-gap);
}

.pagination__list {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.pagination__item {
    width: 0.75rem;
    height: 0.75rem;
    background-color: var(--color-primary);
    opacity: 0.35;
    cursor: pointer;
}

.pagination__item.active {
    opacity: 1;
    cursor: default;
}
/* End */


/* Start:/local/templates/telsis/styles/components/index/ready-solutions.css?17931868522390*/
.ready-solutions {
    margin-top: var(--section-gap);
    overflow: hidden;
}

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

.slider-arrows {
    display: flex;
    gap: 0.75rem;
}

.slider-arrows__btn {
    width: 3rem;
    height: 3rem;
    background-color: var(--color-white);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;

    transition: background-color var(--transition-time), color var(--transition-time);
}

.slider-arrows__btn:disabled {
    cursor: default;
    color: var(--color-disabled-text);
}

.slider-arrows__btn:not(:disabled):hover {
    color: var(--color-primary);
}

.slider-arrows__btn:not(:disabled):active {
    background-color: var(--color-secondary);
    color: var(--color-primary-hover);
}

/* видимая область слайдера: обрезает ленту по краю контейнера, а не по краю padding секции */
.ready-solutions__viewport {
    overflow: hidden;
}

/* десктоп (как в макете): лента уходит за правый край контейнера до края экрана, следующая карточка видна
   краем. Слева и в расчёте листания — по-прежнему край контейнера (ширину для Slider даёт сам viewport),
   поэтому последняя карточка долистывается до правого края контейнера; справа ленту обрезает секция */
@media (min-width: 1025px) {
    .ready-solutions__viewport {
        overflow: visible;
        clip-path: inset(0 -4.5rem 0 0);
    }
}

.ready-solutions__slider {
    display: flex;
    gap: 1.5rem;
    margin-top: var(--title-gap);
    transition: transform var(--transition-time-slider) ease-in-out;
    -webkit-user-select: none;
    -ms-user-select: none; 
    user-select: none;
    -webkit-user-drag: none;
    cursor: grab;
}

.ready-solutions__item {
    flex: 0 0 calc((100% - (1.5rem * 3)) / 4);
    min-width: 0;
}

/* карточка .solution-card — общий компонент: styles/components/global/solution-card.css */

.ready-solutions__footer {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--title-gap);
}

/* End */


/* Start:/local/templates/telsis/styles/components/index/about.css?17931868523519*/

.about {
    background-color: var(--color-bg-section);
    margin-top: var(--section-gap);
}

.about__container {
    max-width: 1920px;
    padding: 7.5rem 4.5rem;
    margin: 0 auto;
}

.about__inner {
    display: grid;
    grid-template-columns: 1fr 0.9fr;
    gap: 10.875rem;
}

.about__subtitle {
    font-weight: 600;
    font-size: var(--font-size-title-3);
    line-height: var(--line-height-title-3);
    color: var(--color-text);
    margin-bottom: 1.5rem;
    margin-top: var(--text-title-gap); /* заголовок → текст: 20 / 16 / 12 — эталон для текстовых блоков сайта */
}

.about__text {
    font-weight: 400;
    font-size: var(--font-size-text-base);
    line-height: var(--line-height-text-base);
    color: var(--color-text);
    margin-top: 3.5rem;
}

.about__text p {
    margin: 0 0 var(--paragraph-spacing-text-base) 0;
}

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

.about__text strong {
    color: var(--color-text);
    font-weight: 600;
}

.stats {
    display: flex;
    justify-content: space-between;
    border-top: 0.0625rem solid var(--color-border);
    margin-top: 2.5rem;
    padding-top: 2.5rem;
    margin-bottom: 2.5rem;
}

.stats__item {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.stats__value {
    font-weight: 600;
    font-size: var(--font-size-h2);
    line-height: var(--line-height-h2);
    color: var(--color-text);
}

.stats__label {
    font-weight: 400;
    font-size: var(--font-size-text-large);
    line-height: var(--line-height-text-large);
    color: var(--color-text);
}

.about__footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 3.5rem;
}

.brands-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.125rem;
    background-color: var(--color-border-subtle);
}

.brands-grid__item {
    background-color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;

    transition: background-color var(--transition-time);
}

/* подсветка и рука — только у логотипов со ссылкой на страницу бренда */
.brands-grid__item--link {
    cursor: pointer;
}

.brands-grid__item--link:hover,
.brands-grid__item--link:focus-visible {
    background-color: var(--color-secondary);
}

.brands-grid__img {
    max-width: 100%;
    max-height: 4.625rem;
    object-fit: contain;
}

/* выравнивание по оптическому размеру. Соседние PNG не крупнее своего размера 122×74 px (на 1440 — ~93 px в ширину).
   Eltex (SVG без полей, 4,8:1) — не шире соседей; почти квадратный YADRO — ~0,7 их ширины (по весу как Huawei и Cisco,
   +20% к первому варианту, 26.10.2026), max-height та же.
   Предел в px — как у соседей: rem на планшете растёт с корневым шрифтом, а их PNG — нет */
.brands-grid__img--wide {
    max-width: min(100%, 8.5rem, 122px);
}

.brands-grid__img--compact {
    max-width: min(100%, 5.4rem, 86px);
}
/* логотипа ещё нет (файл не загружен) — название бренда текстом, по центру ячейки */
.brands-grid__name {
    font-size: var(--fs-card-sm);
    line-height: var(--lh-card-sm);
    font-weight: 600;
    color: var(--color-text-secondary);
    text-align: center;
}

/* End */


/* Start:/local/templates/telsis/styles/components/index/ecosystem.css?17931868522824*/

.ecosystem {
    margin-top: var(--section-gap);
}

.ecosystem__grid {
    display: grid;
    /* все направления в один ряд: --eco-count — число карточек из инфоблока (шаблон news.list/ecosystem) */
    grid-template-columns: repeat(var(--eco-count, 5), 1fr);
    gap: 2px;
    background-color: var(--color-border-subtle);
    border: 2px solid var(--color-border-subtle);
    margin-top: var(--title-gap);
    transition: transform var(--transition-time-slider) ease-in-out;
}

.ecosystem-card {
    background-color: var(--color-white);
    padding: var(--card-pad);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 17.5rem;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

/* Наведение по макету: заливка оранжевым (#FF7F1F), название, описание и логотип белые, переход 250 мс.
   Только для устройств с мышью — на сенсорных экранах эффекта нет (иначе карточка «залипает» после касания). */
.ecosystem-card {
    --ecosystem-hover-time: 0.25s;
}

.ecosystem-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--color-primary);
    clip-path: inset(100% 100% 0% 0%);
    transition: clip-path var(--ecosystem-hover-time) ease-out;
    z-index: -1;
}

.ecosystem-card__title,
.ecosystem-card__desc {
    transition: color var(--ecosystem-hover-time);
}

@media (hover: hover) and (pointer: fine) {
    .ecosystem-card:hover::before { clip-path: inset(0% 0% 0% 0%); }
    .ecosystem-card:hover .ecosystem-card__logo { filter: brightness(0) invert(1); }
    .ecosystem-card:hover .ecosystem-card__title { color: var(--color-white); }
    .ecosystem-card:hover .ecosystem-card__desc { color: var(--color-white); }
}

.ecosystem-card__logo {
    height: 2rem;
    display: flex;
    align-items: center;
    transition: filter var(--ecosystem-hover-time);
}

.ecosystem-card__img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.ecosystem-card__title {
    font-weight: 600;
    font-size: var(--font-size-title-3);
    line-height: var(--line-height-title-3);
    color: var(--color-text);
    margin-bottom: 0.75rem;
}

.ecosystem-card__desc {
    font-weight: 400;
    font-size: var(--font-size-text-base);
    line-height: var(--line-height-text-base);
    color: var(--color-text-secondary);
}

.ecosystem-card--main {
    position: relative;
}

.ecosystem__footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 3.5rem;
}

.ecosystem__slider-controls { display: none; }

.ecosystem__slider-wrapper {
    overflow: hidden;
}
/* End */


/* Start:/local/templates/telsis/components/bitrix/news.list/solutions/style.css?1793186852364*/
div.news-list
{
	word-wrap: break-word;
}
div.news-list img.preview_picture
{
	float:left;
	margin:0 4px 6px 0;
}
.news-date-time {
	color:#486DAA;
}

/* «Читать отзыв» скрыта, пока у проекта нет отзыва: display у .link-arrow перебивает атрибут hidden */
.case-study__review[hidden] {
    display: none;
}

/* End */


/* Start:/local/templates/telsis/components/bitrix/news.list/ready-solutions/style.css?1793186852150*/
div.news-list
{
	word-wrap: break-word;
}
div.news-list img.preview_picture
{
	float:left;
	margin:0 4px 6px 0;
}
.news-date-time {
	color:#486DAA;
}

/* End */


/* Start:/local/templates/telsis/components/bitrix/news.list/ecosystem/style.css?1793186852150*/
div.news-list
{
	word-wrap: break-word;
}
div.news-list img.preview_picture
{
	float:left;
	margin:0 4px 6px 0;
}
.news-date-time {
	color:#486DAA;
}

/* End */
/* /local/templates/telsis/styles/components/index/hero.css?17931868522560 */
/* /local/templates/telsis/styles/components/index/catalog.css?17931868524264 */
/* /local/templates/telsis/styles/components/index/solutions.css?17931868523909 */
/* /local/templates/telsis/styles/components/index/ready-solutions.css?17931868522390 */
/* /local/templates/telsis/styles/components/index/about.css?17931868523519 */
/* /local/templates/telsis/styles/components/index/ecosystem.css?17931868522824 */
/* /local/templates/telsis/components/bitrix/news.list/solutions/style.css?1793186852364 */
/* /local/templates/telsis/components/bitrix/news.list/ready-solutions/style.css?1793186852150 */
/* /local/templates/telsis/components/bitrix/news.list/ecosystem/style.css?1793186852150 */