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

.text-content ul,
.text-content ol {
    margin-bottom: 24px;
    padding-left: 24px;
}

.text-content ul {
    list-style-type: disc;
}

.text-content ol {
    list-style-type: decimal;
}

.text-content li {
    margin-bottom: 8px;
    line-height: var(--lh-body);
}

.text-content li::marker {
    color: var(--color-text);
}

.text-content li:last-child {
    margin-bottom: 0;
}

.text-extern {
    color: var(--color-product-extern);
}

.text-diadoc {
    color: var(--color-product-diadoc);
}

.text-ecp {
    color: var(--color-product-ecp);
}

.text-fokus {
    color: var(--color-product-fokus);
}

.text-zakupki {
    color: var(--color-product-zakupki);
}

.text-elba {
    color: var(--color-product-elba);
}

.text-ofd {
    color: var(--color-product-ofd);
}

.text-logistika {
    color: var(--color-product-logistika);
}

[class*="bg-product-"] {
    color: #fff;
}

.bg-product-extern {
    background-color: var(--color-product-extern) !important;
}

.bg-product-diadoc {
    background-color: var(--color-product-diadoc) !important;
}

.bg-product-ecp {
    background-color: var(--color-product-ecp) !important;
}

.bg-product-fokus {
    background-color: var(--color-product-fokus) !important;
}

.bg-product-zakupki {
    background-color: var(--color-product-zakupki) !important;
}

.bg-product-elba {
    background-color: var(--color-product-elba) !important;
}

.bg-product-logistika {
    background-color: var(--color-product-logistika) !important;
}

.bg-product-ofd {
    background-color: var(--color-product-ofd) !important;
}


.color-product-extern {
    color: var(--color-product-extern) !important;
}

.color-product-diadoc {
    color: var(--color-product-diadoc) !important;
}

.color-product-ecp {
    color: var(--color-product-ecp) !important;
}

.color-product-fokus {
    color: var(--color-product-fokus) !important;
}

.color-product-zakupki {
    color: var(--color-product-zakupki) !important;
}

.color-product-elba {
    color: var(--color-product-elba) !important;
}

.color-product-logistika {
    color: var(--color-product-logistika) !important;
}

.color-product-ofd {
    color: var(--color-product-ofd) !important;
}

.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

.text-bold {
    font-weight: 400;
}

.text-italic {
    font-style: italic;
}


.color-light,
.color-light :is(h2, h3, p, li) {
    color: #fff !important;
}

.h3 {
    font-family: var(--font-main);
    font-size: var(--fs-h3);
    color: var(--color-text);
    line-height: var(--lh-body);
    font-weight: 400;
    margin-bottom: 20px;
}

.p-accent {
    font-size: var(--fs-p-accent);
    font-weight: 400;
    line-height: 1.45;
}

.p-accent-2 {
    font-size: var(--fs-body);
    font-weight: 400;
    max-width: 80%;
    text-align: center;
    margin: 0 auto 20px auto;
}

.p-accent-3 {
    font-size: var(--fs-h3);
    font-weight: 400;
    max-width: 80%;
    margin: 0 auto 20px auto;
}

.p-accent-price {
    font-size: calc(var(--fs-h1) * 1.4);
    font-weight: 700;
    color: var(--color-text);
    letter-spacing: -1px;
    margin-bottom: 4px;
    line-height: 1;
}

.p-accent-period {
    font-weight: 500;
    color: #7d7d7d;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 28px;
}

/* card */

.card {
    position: relative;
    box-sizing: border-box;
    border-radius: var(--radius-main);
    contain: layout style;
    transition: background-color var(--transition),
    box-shadow var(--transition),
    border-color var(--transition);
}

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

.dark-theme .card {

}

/* header */

.card-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 16px;
}

.card-header img {
    flex-shrink: 0;
    display: block;
}

.card-header h3 {
    font-weight: 500;
    color: var(--color-text);
    margin: 0;
    font-style: normal;
}


.card-footer {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
}

.card-footer--left {
    align-items: center;
    justify-content: flex-start;
}

.card-footer--center {
    align-items: center;
    justify-content: center;
}

.card-footer--row-center {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.card-footer--row-left {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.75rem;
}

.card-footer--pt-sm {
    padding-top: 1rem;
}

.card-footer--pt-md {
    padding-top: 1.25rem; /* 20 */
}

.card-footer--pt-lg {
    padding-top: 1.5rem; /* 24 */
}

.card-footer--pt-xl {
    padding-top: 2rem; /* 32 */
}

/* 1 */

.card-1 {
    display: flex;
    flex-direction: column;
    padding: 30px;
    background-color: var(--color-bg-card-white);
    box-shadow: var(--card-soft-shadow);
}

@media (max-width: 1023.99px) {
    .card-1 {
        padding: 24px;
    }
}

.dark-theme .card-1 {

}

/* 2 */

.pk-card-2 {
    padding: 20px;
    border-radius: 20px;
    box-shadow: 2px 2px 10px 0 rgba(34, 34, 34, 0.15);
}

@media (max-width: 1023.99px) {
    .pk-card-2 {
        padding: 16px;
    }
}


/* 3 */

.card-3 {
    display: flex;
    flex-direction: column;
    padding: 1.875rem;
    background-color: var(--color-bg-card-white);
    border: 1px solid #FFF;
}

.card-3 p {
    font-size: 1rem;
    line-height: 1.4;
    opacity: 0.85;
    margin-bottom: 1.5rem;
}

@media (max-width: 1023.99px) {
    .card-3 {
        padding: 1.5rem;
    }
}

.dark-theme .card-3,
.dark-theme .card-4 {
    background-color: var(--color-bg-card-light);
    border: 1px solid rgba(255, 122, 26, 0.25);
    box-shadow: 0 8px 32px 0 rgba(255, 122, 26, 0.03);
}


/* 4 */

.card-4 {
    display: flex;
    flex-direction: column;
    padding: 2.5rem var(--grid-gap);
    background-color: var(--color-bg-card-light);
    border: 1px solid #FFF;
}

.card-4 p {
    margin-bottom: 1.5rem;
}

.dark-theme .card-4 {
    background-color: var(--color-bg-card-light);
    border: 1px solid rgba(255, 122, 26, 0.25);
    box-shadow: 0 8px 32px 0 rgba(255, 122, 26, 0.03);
}


.card-header--border-bottom {
    border-bottom: 1px solid #8e8e8e;
    margin-bottom: 20px;
    padding-bottom: 20px;
}


.card-5 {
    display: flex;
    flex-direction: column;
    background-color: var(--color-bg-body);
    box-shadow: 0 4px 29px rgba(125, 125, 125, 0.18);
    border: 1px solid var(--color-input-border);
    border-radius: 20px;
    overflow: hidden;
}

.card-5-head {
    background-color: #999999;
    padding: 20px 15px;
    text-align: center;
    color: #FFF;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.card-5-head h3,
.card-5-head p {
    margin: 0;
    color: #FFF;
}

.card-5-body {
    padding: 20px 20px 0 20px;
}

.card-5-footer {
    padding: 30px;
    margin-top: auto;
    display: flex;
    justify-content: flex-start;
    gap: 16px;
    border-top: 1px solid #CCC;
}

.card-5 .price {
    font-size: 22px;
    line-height: 35px;
}

.card-5 .price span {
    font-size: 36px;
    text-align: center;
}

.card-5 .period {
    font-size: 20px;
    text-align: center;
}

.card-5 li {
    margin-bottom: 30px;
}

.card-5-footer--static {
    padding: 30px;
    margin-top: 0;
    display: flex;
    justify-content: flex-start;
    gap: 16px;
    border-top: 1px solid #CCC;
}


.card-7 {
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-main);
    padding: var(--padding-card);
    background-color: var(--color-bg-card-7);
    transition: background-color var(--transition),
    box-shadow var(--transition),
    border-color var(--transition);
    box-shadow: var(--shadow-card);
}

.card-7-footer {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}

.card-7-footer p.h3 {
    margin: 0;
}


.card-9 {
    display: flex;
    flex-wrap: nowrap;
    border-radius: 20px;
    padding: var(--padding-card);
    background-color: var(--color-bg-card-white);
    transition: background-color var(--transition);
    justify-content: space-between;
    margin-bottom: 20px;
    align-items: center;
    gap: 15px;
}

.card-9 p {
    margin-bottom: 0;
}

.card-9-content {
    width: calc(100% - 65px);
}


/* диадок */

.tariff-card-1 {
    background-color: var(--color-bg-body);
    box-shadow: 0 4px 29px rgba(125, 125, 125, 0.18);
    border: 1px solid var(--color-input-border);
    border-radius: 20px;
    overflow: hidden;
    padding: 0;
}

.tariff-card-1-body {
    padding: 20px;
}

.tariff-card-1-header {
    padding: 20px;
    background-color: #8b8b8b;
    color: white;
}

.tariff-card-1-header span {
    font-size: 30px;
}

.tariff-card-1-header-price {
    font-size: 30px;
}

.bg-gradient-product-diadoc {
    background: linear-gradient(180deg, #1DAA77 0%, #37AC89 100%);
}


/* header (2) */

/* Плавные переходы и ховеры */
.pk-theme-toggle {
    transition: opacity var(--transition);
}

.pk-theme-toggle:hover {
    opacity: 0.8;
}

/* Сложная анимация поворота солнца/луны */
.pk-theme-toggle svg {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity var(--transition);
}

.pk-icon-sun {
    transform: scale(0.5) rotate(-90deg);
}

.pk-icon-moon {
    transform: scale(1) rotate(0);
}

.dark-theme .pk-icon-sun {
    transform: scale(1) rotate(0);
}

.dark-theme .pk-icon-moon {
    transform: scale(0.5) rotate(90deg);
}

/* Анимация триггера бургера при открытии (в самый первый миг не нужна) */
.pk-burger span,
.pk-burger::before,
.pk-burger::after {
    transition: transform var(--transition), top var(--transition), bottom var(--transition);
}

.pk-burger.pk-burger-opened::before {
    top: 8px;
    transform: rotate(45deg);
}

.pk-burger.pk-burger-opened span {
    opacity: 0;
    transform: scale(0);
}

.pk-burger.pk-burger-opened::after {
    bottom: 8px;
    transform: rotate(-45deg);
}

/* Ховер кнопки заказа */
.pk-header-order {
    transition: background-color var(--transition), color var(--transition);
}

.pk-header-order:hover {
    background-color: var(--color-orange);
    color: #fff;
}

/* Ховеры меню */
.pk-header-menu a,
.pk-header-menu span {
    transition: color 0.2s ease;
}

.pk-header-menu .menu-title::after {
    transition: transform 0.2s ease;
}

.pk-header-menu .menu-dropdown:hover .menu-title::after {
    transform: rotate(180deg);
}

/* --- ВЫПАДАЮЩЕЕ ПОДМЕНЮ (Полностью уходит во 2-й файл) --- */
.pk-header-menu .header-products-submenu {
    position: absolute;
    top: 100%;
    left: 0;
    width: 320px;
    background-color: var(--color-bg-menu);
    padding: 8px;
    margin: 0;
    list-style: none;
    border-radius: 16px;
    box-shadow: 0 10px 30px var(--color-bg-menu-shadow);
    z-index: 100;
    box-sizing: border-box;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.2s ease,
    transform 0.2s ease,
    visibility 0.2s,
    background-color 0.2s ease,
    box-shadow 0.2s ease;
}

.pk-header-menu .header-products-submenu::before {
    content: "";
    position: absolute;
    top: -20px;
    left: 0;
    right: 0;
    height: 20px;
}

.pk-header-menu .menu-dropdown:hover .header-products-submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(6px);
}

.pk-header-menu .header-products-submenu li {
    margin: 0;
}

.pk-header-menu .header-products-submenu a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    transition: background-color 0.2s ease;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.3;
}

.pk-header-menu .header-products-submenu a:hover {
    background-color: var(--color-bg-hover);
}

.pk-header-menu .header-products-submenu img {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}


/* Шахматные блоки (текст, фото) */

.pk-grid-auto {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px;
    align-items: center;
}

/* --- Size 4 --- */
@media (max-width: 767.99px) {
    .pk-grid-auto {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }

    /* Находим вторые пары элементов в HTML (3 и 4, 7 и 8) и меняем их местами */
    /* Выбираем картинки (3, 7) и опускаем их вниз */
    .pk-grid-auto > :nth-child(4n+3) {
        order: 2;
    }

    /* Выбираем тексты (4, 8) и поднимаем их наверх */
    .pk-grid-auto > :nth-child(4n+4) {
        order: 1;
    }
}


/* Шахматные блоки (текст 60% / Картинка 40%) */
.pk-flex-2-accent-text {
    display: flex;
    gap: 40px;
    align-items: center;
}

.pk-flex-2-accent-text-col-60 {
    width: calc(60% - 20px);
}

.pk-flex-2-accent-text-col-40 {
    width: calc(40% - 20px);
}

.pk-flex-2-accent-text-col-40 img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* --- Size 4 (Мобильные) --- */
@media (max-width: 767.99px) {

    .pk-flex-2-accent-text {
        flex-direction: column !important;
        gap: 24px;
    }

    .pk-flex-2-accent-text-col-60,
    .pk-flex-2-accent-text-col-40 {
        width: 100%;
    }

    .pk-flex-2-accent-text-col-60 {
        order: 1;
    }

    .pk-flex-2-accent-text-col-40 {
        order: 2;
        display: flex;
        justify-content: center;
        align-items: center;
    }

}


/*
.m-y {
    margin-top: var(--space-section);
    margin-bottom: var(--space-section);
}

.p-y {
    padding-top: var(--space-section);
    padding-bottom: var(--space-section);
}
*/


/* list */

.st_logistika_bg {
    background-color: #00BEA2 !important;
}

.st_logistika_color {
    color: #00BEA2 !important;
}


.h2-center-w80 {
    text-align: center;
    max-width: 32ch;
    margin: 0 auto 40px auto;
}

@media (max-width: 767.99px) {

    .h2-center-w80 {
        text-align: left;
        max-width: 100%;
        margin-bottom: 24px;
    }
}


.cta-text-1 {
    text-align: center;
    margin: 0 auto 20px auto;
    font-size: var(--fs-h1);
}


.table-1 {
    border-collapse: collapse;
    text-align: left;
    width: 100%;
    table-layout: fixed;
}

.table-1 th {
    background-color: var(--color-bg-light);
    color: var(--color-text);
    font-weight: 600;
    padding: 16px 24px;
    border-bottom: 2px solid var(--color-border-grid);
}

.table-1 td {
    padding: 18px 24px;
    color: var(--color-text);
    border-bottom: 1px solid var(--color-border-grid);
    transition: background-color var(--transition);
}

.table-1 tbody tr:hover td {
    background-color: var(--color-bg-hover);
}

.table-1 tbody tr:last-child td {
    border-bottom: none;
}

.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius-main);
    box-shadow: var(--shadow-main);
    background-color: var(--color-bg-card-white);
    border: 1px solid var(--color-border-grid);
}

@media (max-width: 1279.99px) {
    .table-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border-radius: var(--radius-main);
        box-shadow: var(--shadow-main);
        background-color: var(--color-bg-card-white);
        border: 1px solid var(--color-border-grid);
    }
}


.m-t-20 {
    margin-block-start: 20px;
}

.m-t-30 {
    margin-block-start: 30px;
}

@media (max-width: 767.99px) {

    .m-t-20 {
        margin-block-start: 18px;
    }

    .m-t-30 {
        margin-block-start: 20px;
    }

}

.m-b-20 {
    margin-block-end: 20px;
}

.m-b-30 {
    margin-block-end: 30px;
}

.m-b-0 {
    margin-block-end: 0;
}


@media (max-width: 767.99px) {

    .m-b-20 {
        margin-block-end: 18px;
    }

    .m-b-30 {
        margin-block-end: 20px;
    }
}


.bg-1 {
    background-color: #F9FAFF;
}

.pk-box-1 {
    padding: 40px;
}

@media (max-width: 767.99px) {
    .pk-box-1 {
        padding: 24px;
    }
}

.pk-box-2 {
    padding: 60px 0;
}

@media (max-width: 767.99px) {
    .pk-box-2 {
        padding: 32px 0;
    }
}


.img-float {
    float: left;
    margin-right: 20px;
    margin-bottom: 10px;
    max-width: 100%;
    height: auto;
}

/* Возможности сервиса Контур.Диадок */

.pk-masonry-2 {
    column-count: 2;
    column-gap: var(--grid-gap);
}

.pk-masonry-2 > * {
    break-inside: avoid;
    margin-bottom: var(--grid-gap);
}

@media (max-width: 767.99px) {
    .pk-masonry-2 {
        column-count: 1;
    }
}


/* Акции, по центру */

.pk-promo-1 {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
    contain: layout style;
}

.pk-promo-1 .big {
    font-size: var(--fs-h1);
    font-weight: 700;
    line-height: 1.15;
    margin-bottom: 20px;
    letter-spacing: -0.02em;
}

.pk-promo-1-btn p:not(.big) {
    font-size: 1.25rem;
    line-height: 1.4;
    max-width: 640px;
    margin-bottom: 32px;
    opacity: 0.9;
}

.pk-promo-1-btn {
    --btn-bg: #62ABE0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 40px;
    background-color: var(--btn-bg);
    color: #fff;
    font-weight: 500;
    border-radius: var(--radius-main);
    transition: transform var(--transition), filter var(--transition);
}

.pk-promo-1-btn:hover {
    color: #fff;
    filter: brightness(0.95);
    transform: translateY(-2px);
}

.pk-promo-1-btn:active {
    transform: translateY(0);
}

@media (max-width: 767.99px) {
    .pk-promo-1-btn {
        width: 100%;
    }
}


.section-bg-1 {
    border-radius: 50px;
    background-color: var(--color-bg-light);
    padding: 50px;
    box-sizing: border-box;
    transition: background-color var(--transition);
}

@media (max-width: 1023.99px) {
    .section-bg-1 {
        border-radius: var(--radius-main);
        padding: 30px;
    }
}

@media (max-width: 767.99px) {
    .section-bg-1 {
        padding: 24px;
    }
}

.dark-theme .section-bg-1 {
    background-color: #161616;
}


.section-bg-2-blue-padding {
    background-color: #F9FAFF;
    padding: 60px 0;
    box-sizing: border-box;
    transition: background-color var(--transition);
}

@media (max-width: 1023.99px) {
    .section-bg-2-blue-padding {
        border-radius: var(--radius-main);
        padding: 30px;
    }
}

@media (max-width: 767.99px) {
    .section-bg-2-blue-padding {
        padding: 24px;
    }
}

.dark-theme .section-bg-2-blue-padding {
    background-color: #161616;
}


#navigate {
    margin: 20px 0 30px 0;
}

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

#navigate ul li {
    display: inline;
}

#navigate ul li:not(:last-child)::after {
    display: inline-block;
    margin: 0 10px;
    content: "→";
}

#navigate ul a {
    color: #117BC9;
}

.img-reset {
    display: inline-block !important;
    max-width: none !important;
    vertical-align: middle !important;
    width: unset !important;
    height: unset !important;
}

.img-center {
    display: block;
    margin: 0 auto;
}


/* --- Модификатор для центрирования некратных элементов --- */

.pk-grid-3--centered {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Центрирует элементы в последнем ряду */
    gap: var(--grid-gap);
}

/* Базовая ширина для 3-х колонок на десктопе */
.pk-grid-3--centered > * {
    flex: 0 1 calc((100% - (var(--grid-gap) * 2)) / 3);
}

/* Переход на 2 колонки (Планшеты) */
@media (max-width: 1023.99px) {
    .pk-grid-3--centered > * {
        flex: 0 1 calc((100% - var(--grid-gap)) / 2);
    }
}

/* Переход на 1 колонку (Мобильные) */
@media (max-width: 767.99px) {
    .pk-grid-3--centered > * {
        flex: 0 1 100%;
    }
}


.pk-grid-2--centered {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Центрирует нечетный элемент в последнем ряду */
    gap: var(--grid-gap);
}

/* Базовая ширина для 2-х колонок на десктопе */
.pk-grid-2--centered > * {
    flex: 0 1 calc((100% - var(--grid-gap)) / 2);
}

/* Переход на 1 колонку (Мобильные / Планшеты) */
@media (max-width: 767.99px) {
    .pk-grid-2--centered > * {
        flex: 0 1 100%;
    }
}


.pk-grid-2--align-top,
.pk-grid-3--align-top {
    align-items: start;
}


.img-style-2 {
    border: 1px solid #dedede;
    border-radius: 8px;
    overflow: hidden;
}


.price-1 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    align-content: flex-start;
    gap: 30px;
}

.price-1 .item {
    width: calc((100% - 60px) / 3);
    background-color: var(--color-bg-body);
    box-shadow: 0 4px 29px rgba(125, 125, 125, 0.18);
    border: 1px solid var(--color-input-border);
    border-radius: 20px;
    overflow: hidden;
}

.price-1-head {
    background-color: #999999;
    padding: 20px 15px;
    text-align: center;
    color: #FFF;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.price-1-head .head-subtitle {
    font-weight: 400;
}

.price-1-head .head-title {
    font-size: 32px;
    margin: 0;
    letter-spacing: -0.5px;
    color: #FFF;
}

.price-1-body {
    padding: 20px 20px 0 20px;
}

.price-1 .price {
    font-weight: bold;
    font-size: 22px;
    line-height: 35px;
    text-align: center;
    color: #117BC9;
    margin: 20px 0 0 0;
}

.price-1 .price span {
    font-size: 36px;
    text-align: center;
}

.price-1 .period {
    font-size: 20px;
    text-align: center;
}

.price-1-footer {
    padding: 30px;
    text-align: center;
}

.price-1 li {
    margin-bottom: 10px;
}


/* size 2 */
@media (max-width: 1279.99px) {

    .price-1-head .head-title {
        font-size: 28px;
    }

}

/* size 3 */
@media (max-width: 1023.99px) {

    .price-1 .item {
        width: calc((100% - 60px) / 2);
    }

}

/* size 4 */
@media (max-width: 767.99px) {

    .price-1 .item {
        width: 100%;
    }

}


.pk-price-2-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--grid-gap);
}

.pk-price-2 {
    display: grid;
    grid-template-rows: auto 1fr;
    background-color: var(--color-bg-card-white);
    box-shadow: 0 4px 24px rgba(34, 34, 34, 0.06);
    border: 1px solid var(--color-border-grid);
    border-radius: 24px;
    overflow: hidden;
    contain: layout style;
}

.pk-price-2-header {
    padding: 24px;
    background: linear-gradient(180deg, #1DAA77 0%, #37AC89 100%);
    color: #fff;
}

.pk-price-2-header p {
    font-size: 1rem;
    line-height: 1.4;
    font-weight: 400;
    margin: 0;
    color: #fff;
    opacity: 0.95;
    max-width: 80%;
}

.pk-price-2-body {
    display: flex;
    flex-direction: column;
    padding: 30px 24px 24px;
}

.pk-price-2-body .price {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 24px;
}

.pk-price-2-body .price span {
    font-size: 1.75rem;
}

.pk-price-2-btn {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 14px 24px;
    background-color: #00AA90;
    color: #fff;
    font-weight: 500;
    border-radius: 100px;
    transition: transform var(--transition), filter var(--transition);
}

.pk-price-2-btn:hover {
    color: #fff;
    filter: brightness(0.9);
    transform: translateY(-1px);
}

@media (min-width: 1024px) {
    .pk-price-2-grid {
        grid-template-rows: max-content;
    }

    .pk-price-2 {
        grid-row: span 2;
        grid-template-rows: subgrid;
    }
}

@media (max-width: 1023.99px) {
    .pk-price-2-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.99px) {
    .pk-price-2-grid {
        grid-template-columns: 1fr;
    }

    .pk-price-2-header {
        min-height: auto;
        padding: 20px;
    }

    .pk-price-2-body {
        padding: 20px;
    }
}


.news-date {
    font-style: italic;
    color: #117BC9;
}

.news-tizer {
    color: #737373;
    padding: 8px 0 10px 0;
}


.news-pagination {
    max-width: 80%; /* Ограничиваем максимальную ширину до 80% */
    width: 100%; /* Позволяет блоку адаптироваться на маленьких экранах */
    margin-left: auto; /* Автоматический отступ слева для центрирования */
    margin-right: auto; /* Автоматический отступ справа для центрирования */
    margin-top: 30px;
}

.news-pagination ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.news-pagination li {
    display: block;
}

.news-pagination a,
.news-pagination li:not(:has(a)) {
    display: block;
    padding: 5px 8px;
    text-decoration: none;
    background-color: var(--color-bg-body);
    border: 1px solid #e5e5ea;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.news-pagination a:hover {
    background-color: #e5e5ea;
    border-color: #d1d1d6;
}

.news-pagination li:not(:has(a)) {
    color: #ffffff;
    background-color: #0071e3;
    border-color: #0071e3;
    cursor: default;
}


.list-1 {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.list-1 li {
    display: flex;
    align-items: center;
    gap: 10px;
}

.list-1 li::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    background-color: var(--list-marker-color, var(--color-text));
    transition: background-color 0.2s ease;
    --marker-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M18.1678 8.33332C18.5484 10.2011 18.2772 12.1428 17.3994 13.8348C16.5216 15.5268 15.0902 16.8667 13.3441 17.6311C11.5979 18.3955 9.64252 18.5381 7.80391 18.0353C5.9653 17.5325 4.35465 16.4145 3.24056 14.8678C2.12646 13.3212 1.57626 11.4394 1.68171 9.53615C1.78717 7.63294 2.54189 5.8234 3.82004 4.4093C5.09818 2.9952 6.82248 2.06202 8.70538 1.76537C10.5883 1.46872 12.516 1.82654 14.167 2.77916' stroke='black' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3Cpath d='M7.5 9.16671L10 11.6667L18.3333 3.33337' stroke='black' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
    mask: var(--marker-url) no-repeat center / contain;
}

.list-2 {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
    --marker-color: var(--color-text);
    --marker-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}

.list-2 li {
    position: relative;
    padding-left: 28px;
    margin-bottom: 12px;
    line-height: 1.4;
    color: var(--color-text);
}

.list-2 li:last-child {
    margin-bottom: 0;
}

.list-2 li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.2em;
    width: 16px;
    height: 16px;
    background-color: var(--list-marker-color, var(--color-text));
    mask: var(--marker-url) center/contain no-repeat;
}

.list-3 {
    list-style: none;
    padding: 0;
    margin: 0 0 24px 0;
}

.list-3 li {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    font-family: var(--font-main);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--color-text);
}

.list-3 li::before {
    content: "";
    display: inline-block;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    background-color: var(--list-marker-color, var(--color-text));
    background-image: none;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 58 58' fill='none'%3E%3Cpath d='M26.3873 2.61261C26.3873 1.16971 27.557 0 28.9999 0C30.4428 0 31.6125 1.16971 31.6125 2.61261V55.3874C31.6125 56.8303 30.4428 58 28.9999 58C27.557 58 26.3873 56.8303 26.3873 55.3874V2.61261Z' fill='black'/%3E%3Cpath d='M45.8113 8.4939C46.8315 7.47361 48.4858 7.47361 49.506 8.4939C50.5263 9.51419 50.5263 11.1684 49.506 12.1887L12.1886 49.5061C11.1684 50.5264 9.51414 50.5264 8.49386 49.5061C7.47357 48.4858 7.47357 46.8316 8.49386 45.8113L45.8113 8.4939Z' fill='black'/%3E%3Cpath d='M55.3874 26.3874C56.8303 26.3874 58 27.5571 58 29C58 30.4429 56.8303 31.6126 55.3874 31.6126L2.61261 31.6126C1.16971 31.6126 5.11295e-08 30.4429 1.14201e-07 29C1.77272e-07 27.5571 1.16971 26.3874 2.61261 26.3874L55.3874 26.3874Z' fill='black'/%3E%3Cpath d='M49.506 45.8113C50.5263 46.8316 50.5263 48.4858 49.506 49.5061C48.4857 50.5264 46.8315 50.5264 45.8112 49.5061L8.49385 12.1887C7.47356 11.1684 7.47356 9.51418 8.49384 8.49389C9.51413 7.4736 11.1683 7.4736 12.1886 8.49389L49.506 45.8113Z' fill='black'/%3E%3C/svg%3E") no-repeat center / contain;
}

.list-color-extern {
    --list-marker-color: var(--color-product-extern);
}

.list-color-diadoc {
    --list-marker-color: var(--color-product-diadoc);
}

.list-color-ecp {
    --list-marker-color: var(--color-product-ecp);
}

.list-color-fokus {
    --list-marker-color: var(--color-product-fokus);
}

.list-color-zakupki {
    --list-marker-color: var(--color-product-zakupki);
}

.list-color-elba {
    --list-marker-color: var(--color-product-elba);
}

.list-color-ofd {
    --list-marker-color: var(--color-product-ofd);
}

.list-color-logistika {
    --list-marker-color: var(--color-product-logistika);
}


/* fokus */

.list-4 {

}

.list-4 li {
    margin-bottom: 14px;
    text-align: left;
}

.list-4 li:last-child {
    margin-bottom: 0;
}

/* footer */


#footer-block-2 {
    background-color: #222;
    text-align: center;
}

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

footer li {
    margin: 0 0 20px 0;
}

footer li,
footer li a {
    text-decoration: none;
}

footer li.header {
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: 130%;
    margin-bottom: 30px;
}

footer span {
    color: #7A7A7A;
}


/* faq */


.faq_v3 .item {
    margin: 20px 0;
    border-bottom: 1px solid #CCC;
}

.faq_v3 .question {
    padding: 20px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    list-style: none;
}

.faq_v3 .question::-webkit-details-marker {
    display: none;
}

.faq_v3 .question span {
    max-width: 90%;
    color: var(--color-text);
    font-size: 24px;
    font-weight: 500;
    line-height: 120%;
}

.faq_v3 .question::after {
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    background: linear-gradient(to bottom, var(--color-text) 2px, transparent 2px) no-repeat center/100% 2px,
    linear-gradient(to right, var(--color-text) 2px, transparent 2px) no-repeat center/2px 100%;
}

.faq_v3 .item[open] .question::after {
    background: linear-gradient(to bottom, #222 2px, transparent 2px) no-repeat center/100% 2px;
}

.faq_v3 .answer {
    content-visibility: auto;
}

.faq_v3 .answer p {
    color: var(--color-text);
    margin: 0 0 20px 0;
    max-width: 963px;
}

.faq_v3 .item:last-of-type {
    border-bottom: none !important;
}

/* form1 */

.pk-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: stretch;
    box-sizing: border-box;
    padding: 30px;
    border-radius: var(--radius-main);
    background-color: var(--color-bg-card-white);
    box-shadow: var(--card-soft-shadow);
    border: 1px solid rgba(0, 0, 0, 0.06);
    contain: layout style;
    transition: background-color var(--transition), box-shadow var(--transition);
}

.dark-theme .pk-form {
    border-color: rgba(255, 255, 255, 0.08);
}

.pk-form-image {
    width: 100%;
    height: 100%;
    border-radius: calc(var(--radius-main) - 5px);
    overflow: hidden;
}

.pk-form-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Правая колонка с контентом */
.pk-form-content {
    display: flex;
    flex-direction: column;
}

.pk-form h2 {
    font-size: var(--fs-h2);
    font-weight: 500;
    line-height: 1.2;
    margin-bottom: 16px;
}

.pk-form .text-1 {
    margin-bottom: 24px;
    opacity: 0.9;
}

/* Форма теперь тоже флексовая и тянется вниз */
.pk-form form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex-grow: 1;
}

.pk-form input {
    width: 100%;
    height: 58px;
    padding: 0 24px;
    box-sizing: border-box;
    font-family: var(--font-main);
    font-size: 16px;
    background-color: transparent;
    border: 1px solid var(--color-input-border);
    border-radius: 16px;
    color: var(--color-text);
    outline: none;
    transition: border-color var(--transition);
}

.pk-form input::placeholder {
    color: var(--color-input-placeholder);
}

.pk-form input:focus {
    border-color: var(--color-orange);
}

.pk-form-legal {
    font-size: 12px;
    line-height: 1.4;
    opacity: 0.5;
    margin: 4px 0;
    flex-grow: 1;
}

/* Size 3 (Планшеты) */
@media (max-width: 1023.99px) {
    .pk-form {
        gap: 30px;
        padding: 24px;
    }
}

/* Size 4 (Мобильные) */
@media (max-width: 767.99px) {
    .pk-form {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
        padding: 20px;
    }

    .pk-form-image {
        aspect-ratio: 4 / 3;
    }

    .pk-btn-orange {
        align-self: stretch;
        width: 100%;
    }
}


.dark-theme .pk-form h2 {
    color: #ffffff; /* Заголовок должен гореть чистым белым */
}

.dark-theme .pk-form .text-1 {
    color: #e0e0e0; /* Подзаголовок делаем мягким светло-серым */
    opacity: 0.85;
}

.dark-theme .pk-form input {
    border-color: rgba(255, 255, 255, 0.15);
    color: #ffffff; /* Текст, который вводит пользователь — белый */
}

.dark-theme .pk-form input::placeholder {
    color: #a0a0a0; /* Подсказки (Имя, Телефон) делаем отчетливо видимыми! */
}

.dark-theme .pk-form-legal {
    color: #a0a0a0; /* Мелкий юридический текст приподнимаем по читаемости */
    opacity: 0.7;
}


/* ecp тэги на фоне */

.pk-form-image--with-tags {
    position: relative;
}

.pk-form-tags {
    position: absolute;
    bottom: 24px;
    left: 24px;
    right: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 12px 16px;
}

.pk-form-tags li {
    background-color: var(--color-bg-card-white);
    color: var(--color-text);
    font-family: var(--font-main);
    font-size: 1rem;
    font-weight: 500;
    padding: 12px 24px;
    border-radius: 100px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    white-space: nowrap;
}

/* dialog */

dialog#form-5 {
    border: none;
    border-radius: 24px;
    padding: 55px 30px 45px 30px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
    width: 480px;
    height: max-content;
    box-sizing: border-box;
    overflow: hidden;
    background-color: var(--color-bg-card-white);
    margin: auto;
    position: fixed;
}

dialog#form-5[open] {
    display: flex;
    flex-direction: column;
}

@starting-style {
    dialog#form-5[open] {
        opacity: 0;
        transform: scale(0.95);
    }
}

dialog#form-5::backdrop {
    background-color: rgba(0, 0, 0, 0);
    backdrop-filter: blur(0px);
    transition: background-color 0.25s ease, backdrop-filter 0.25s ease, display 0.25s ease allow-discrete;
}

dialog#form-5[open]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(3px);
}

@starting-style {
    dialog#form-5[open]::backdrop {
        background-color: rgba(0, 0, 0, 0);
        backdrop-filter: blur(0px);
    }
}

dialog#form-5.is-closing {
    opacity: 0;
    transform: scale(0.95);
}

dialog#form-5.is-closing::backdrop {
    background-color: rgba(0, 0, 0, 0);
    backdrop-filter: blur(0px);
}

dialog#form-5 .dialog-title {
    font-size: 22px;
    font-weight: 500;
    color: var(--color-text);
    text-align: center;
    margin: 0 0 15px 0;
}

dialog#form-5 .btn-close-x {
    position: absolute;
    top: 20px;
    right: 24px;
    background: none;
    border: none;
    font-size: 28px;
    line-height: 1;
    color: #aaa;
    cursor: pointer;
    padding: 5px;
    transition: color 0.2s ease, transform 0.2s ease;
}

dialog#form-5 .btn-close-x:hover {
    color: #626262;
    transform: scale(1.1);
    outline: none;
}

dialog#form-5 .options-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex-grow: 1;
}

dialog#form-5 .btn-option {
    width: 100%;
    min-height: 68px;
    border: 1px solid #e2e8f0;
    border-radius: 35px;
    background-color: #fff;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 12px 20px;
    box-sizing: border-box;
    transition: all 0.2s ease;
}

dialog#form-5 .btn-option .btn-title {
    font-size: 16px;
    font-weight: 500;
    color: #000;
}

dialog#form-5 .btn-option.btn-primary {
    background-color: #003F5C;
    border-color: #003F5C;
}

dialog#form-5 .btn-option.btn-primary .btn-title {
    color: #fff;
    font-weight: 600;
}

dialog#form-5 .btn-option .btn-subtitle {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.85);
    margin-top: 2px;
}

dialog#form-5 .btn-option:not(.btn-primary):hover {
    background-color: #f8fafc;
    border-color: #cbd5e1;
}

dialog#form-5 .btn-option.btn-primary:hover {
    background-color: #002d42;
    border-color: #002d42;
}

/* Шаг 2: Форма консультации */
dialog#form-5 .consult-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

dialog#form-5 .consult-form input[type="text"] {
    width: 100%;
    height: 52px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 0 16px;
    box-sizing: border-box;
    font-size: 15px;
    color: #1a1a1a;
    background-color: #fff;
    transition: all 0.2s ease;
}

dialog#form-5 .consult-form input[type="text"]:focus {
    outline: none;
    border-color: #003F5C;
    box-shadow: 0 0 0 3px rgba(0, 63, 92, 0.1);
}

dialog#form-5 .form-row {
    display: flex;
    gap: 16px;
    width: 100%;
}

dialog#form-5 .form-row input {
    flex: 1;
    transition: max-width 0.25s ease, margin 0.25s ease, opacity 0.2s ease, visibility 0.2s ease;
    max-width: 100%;
}

dialog#form-5 .text-small {
    font-size: 12px;
    line-height: 1.5;
    color: #718096;
    margin: 4px 0 12px 0;
}

dialog#form-5 .text-small a {
    color: #003F5C;
    text-decoration: none;
}

dialog#form-5 .text-small a:hover {
    text-decoration: underline;
}

dialog#form-5 .btn-submit {
    width: 100%;
    height: 56px;
    border: none;
    border-radius: 28px;
    background-color: #003F5C;
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

dialog#form-5 .btn-submit:hover {
    background-color: #002d42;
}

/* Шаг 3: Техническая поддержка */
dialog#form-5 .support-content {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

dialog#form-5 .support-text {
    color: var(--color-text);
    margin: 0;
}

dialog#form-5 .support-text a {
    color: #003F5C;
    text-decoration: none;
    font-weight: 500;
}

dialog#form-5 .support-text a:hover {
    text-decoration: underline;
}

dialog#form-5 .support-phone {
    font-size: 28px;
    font-weight: 700;
    color: #003F5C;
    text-decoration: none;
    margin-top: 10px;
    display: inline-block;
    transition: color 0.2s ease;
}

dialog#form-5 .support-phone:hover {
    color: #002d42;
}

dialog#form-5 input.form_error_inp {
    border-color: #e53e3e !important;
    box-shadow: 0 0 0 3px rgba(229, 62, 62, 0.1) !important;
}

dialog#form-5 .form-row input[name="kpp"] {
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

dialog#form-5 .form-row input[name="kpp"].kpp-hidden {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    pointer-events: none;
    max-width: 0;
    padding: 0;
    border-width: 0;
    margin-left: -16px;
}

dialog#form-5 .form-row input[name="inn"],
dialog#form-5 .form-row input[name="kpp"] {
    max-width: calc(50% - 8px);
}

form.inn-fullwidth {
    max-width: 100%;
}

dialog#form-5 .btn-close-x:focus,
dialog#form-5 .btn-close-x:focus-visible,
dialog#form-5 .btn-close-x:active {
    outline: none !important;
    box-shadow: none !important;
}

@media (max-width: 767.99px) {

    dialog#form-5 {
        width: 360px;
        max-width: 100vw;
        max-height: 100vh;
        padding: 50px 20px 35px 20px;
    }

    dialog#form-5 .dialog-title {
        font-size: 19px;
        margin-bottom: 25px;
    }

    dialog#form-5 .btn-close-x {
        top: 16px;
        right: 20px;
        font-size: 26px;
    }

    dialog#form-5 .btn-option {
        min-height: 62px;
    }

    dialog#form-5 .btn-option .btn-title {
        font-size: 15px;
    }

    dialog#form-5 .consult-form input[type="text"] {
        height: 48px;
    }

    dialog#form-5 .btn-submit {
        height: 52px;
    }
}


/* buttons */

.pk-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: max-content;
    padding: 15px 30px;
    margin-inline: 0;
    border: 0;
    border-radius: calc(var(--radius-main) - 10px);
    background-color: #004269;
    color: #fff;
    font-family: inherit;
    font-size: 16px;
    font-weight: 400;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    vertical-align: middle;
    transition: background-color var(--transition), transform var(--transition), box-shadow var(--transition);
}

a.pk-btn {
    color: #fff;
}

.pk-btn.pk-btn-w100 {
    display: flex;
    width: 100%;
}

.dark-theme .pk-btn {
    color: #ffffff !important;
}


/* linc arrow */

/* Наши программные продукты — это всем известные */

.pk-btn-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-main);
    font-size: 1rem;
    font-weight: 500;
    color: var(--color-text);
    text-decoration: none;
    transition: color var(--transition);
}

.pk-btn-link::after {
    content: "";
    display: inline-block;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M2 8H14M14 8L9 3M14 8L9 13' stroke='%23ff7a1a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: transform var(--transition);
}

.pk-btn-link:hover::after {
    transform: rotate(-45deg);
}


/* модификатор по центру */

.pk-btn-center {
    display: flex;
    width: max-content;
    margin-left: auto;
    margin-right: auto;
}


.pk-block-buttons-flex-center {
    display: flex;
    gap: 20px;
    justify-content: center;
}

.pk-block-buttons-flex-left {
    display: flex;
    gap: 24px;
    justify-content: left;
}


.pk-btn-ecp-circle {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: none;
    background: var(--color-product-ecp);
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: 0.2s;
}

.pk-btn-ecp-circle:hover {
    opacity: 0.70;
}

.pk-btn-ecp-circle::before {
    content: "";
    width: 20px;
    height: 20px;
    background: #FFF;
    transform: rotate(90deg);
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="black" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><path d="M5 12h14M19 12l-6-6m6 6l-6 6"/></svg>') no-repeat center / contain;
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="black" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><path d="M5 12h14M19 12l-6-6m6 6l-6 6"/></svg>') no-repeat center / contain;
}

.pk-btn-ecp-circle--arrow-right::before {
    transform: rotate(0deg);
}

.pk-btn-bg-white {
    background-color: white !important;
    color: black !important;
}

/* hero */

.pk-hero {
    position: relative;
    overflow: hidden;
    background-color: var(--color-bg-card-white, #fff);
    border-radius: var(--card-soft-radius);
    box-shadow: var(--card-soft-shadow);
    contain: layout style;
}

.pk-hero-content {
    display: flex;
    flex-direction: column;
    padding: 50px;
    width: 60%;
    position: relative;
    z-index: 2;
}

.pk-hero-title {
    font-size: clamp(2rem, 4vw, var(--fs-h1));
    font-weight: 500;
    line-height: 1.15;
    margin-block-end: 40px;
    width: 110%;
}

.pk-hero-content p {
    margin-block-end: 32px;
    max-width: 48ch;
}

.pk-hero-actions {
    display: flex;
    flex-direction: column;
    gap: 60px;
}

.pk-hero-trust {
    display: flex;
    align-items: center;
    gap: 16px;
}

.pk-hero-trust-text {
    max-width: 280px;
    font-size: 0.875rem;
    line-height: 1.4;
    font-weight: 400;
}

.pk-hero-media {
    position: absolute;
    inset-inline-end: -50px;
    bottom: -30px;
    width: 46%;
    height: 100%;
    display: flex;
    align-items: flex-end;
    pointer-events: none;
    z-index: 1;
}

.pk-hero-media img {
    width: 100%;
    height: auto;
    aspect-ratio: 600 / 547;
    object-fit: contain;
}

.pk-hero-container {
    margin: 20px 0 100px 0;
}

@media (max-width: 1279.99px) {

    .pk-hero-content {
        width: 65%;
    }

    .pk-hero-title {
        width: 130%;
    }

    .pk-hero-media {
        width: 48%;
        inset-inline-end: -35px;
        bottom: 0;
    }
}

@media (max-width: 1023.99px) {

    .pk-hero-title {
        width: 160%;
    }

    .pk-hero-media {
        inset-inline-end: -30px;
        bottom: 15px;
    }
}

@media (max-width: 767.99px) {

    .pk-hero {
        border-radius: var(--radius-main);
    }

    .pk-hero-content {
        display: grid;
        grid-template-columns: 1fr;
        padding: 32px 20px;
        width: 100%;
    }

    .pk-hero-title {
        grid-row: 1;
        width: 100%;
        margin-block-end: 24px;
    }

    .pk-hero-content p {
        grid-row: 2;
        width: 100%;
        max-width: none;
        margin-block-end: 24px;
    }

    .pk-hero-media {
        position: static;
        grid-row: 3;
        width: 100%;
        height: auto;
        padding-inline: 16px;
        margin-block-end: 32px;
    }

    .pk-hero-media img {
        display: block;
    }

    .pk-hero-actions {
        grid-row: 4;
        width: 100%;
        gap: 32px;
    }

    .pk-hero-actions .pk-btn {
        width: 100%;
        text-align: center;
    }
}


/* V3 */

.hero-3-container {
    display: grid;
    grid-template-columns: 11fr 9fr;
    grid-template-rows: auto 1fr;
    column-gap: var(--grid-gap);
    row-gap: 40px;
    align-items: center;
    background-color: var(--color-bg-card-light);
    border-radius: var(--card-soft-radius);
    padding: 40px;
    box-sizing: border-box;
}

.dark-theme .hero-3-container {
    border-color: #1e79be;
}

.hero-3-content {
    grid-column: 1;
    grid-row: 1;
}

.hero-3-content p {
    max-width: 500px;
}

.hero-3-btn {
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
    align-self: start;
}

.hero-3-image-wrapper {
    grid-column: 2;
    grid-row: 1 / span 2;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-3-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 30px;
}

@media (max-width: 1023.99px) {

    .hero-3-container {
        padding: 40px;
        border-radius: var(--radius-main);
    }

    .hero-3-img {
        border-radius: 24px;
    }
}

@media (max-width: 767.99px) {

    .hero-3-container {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        padding: 40px 24px 24px 24px;
        gap: 24px;
    }

    .hero-3-content,
    .hero-3-image-wrapper,
    .hero-3-btn {
        grid-column: auto !important;
        grid-row: auto !important;
    }

    .hero-3-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        order: 1;
    }

    .hero-3-content p {
        max-width: initial;
    }

    .hero-3-image-wrapper {
        height: auto;
        order: 2;
    }

    .hero-3-img {
        height: auto;
    }

    .hero-3-btn {
        justify-self: center;
        order: 3;
    }
}


/* hero form */

.hero-form-grid {
    display: grid;
    grid-template-columns: 3fr 2fr; /* 60-40 */
    align-items: center;
}

.hero-form-content {
    padding-right: 40px;
}

.hero-form-content h1 {
    font-size: 2.1875rem; /* 35px */
    font-weight: 500;
    line-height: 1.2;
    margin-bottom: 24px;
    color: var(--color-text);
}

.hero-form-content p {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    max-width: 600px;
}

.hero-form-actions {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 40px;
}

.hero-form-card {
    background-color: var(--color-bg-card-white);
    border-radius: var(--card-soft-radius);
    padding: 30px 40px;
    box-shadow: var(--card-soft-shadow);
    border: 1px solid rgba(0, 0, 0, 0.04);
}

.hero-form-card h3 {
    font-size: var(--fs-h3);
    font-weight: 600;
    margin-bottom: 32px;
    line-height: 1.25;
}

.hero-form-card form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.hero-form-card input {
    width: 100%;
    padding: 16px 20px;
    font-family: var(--font-main);
    font-size: 1rem;
    color: var(--color-text);
    background-color: transparent;
    border: 1px solid var(--color-input-border);
    border-radius: 12px;
    outline: none;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.hero-form-card input::placeholder {
    color: var(--color-input-placeholder);
}

.hero-form-card input:focus {
    border-color: var(--color-orange);
    box-shadow: 0 0 0 4px rgba(101, 101, 101, 0.1);
}

.form-disclaimer {
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--color-input-placeholder);
    margin-top: 4px;
    margin-bottom: 0;
}

.form-disclaimer a {
    color: var(--color-input-placeholder);
    text-decoration: underline;
}

.form-disclaimer a:hover {
    color: var(--color-orange);
}

.dark-theme .hero-form-card {
    background-color: var(--color-bg-card-light);
    border-color: rgba(255, 255, 255, 0.05);
}

@media (max-width: 1279.99px) {

    .hero-form-grid {
        grid-template-columns: 11fr 9fr; /* 55%/45% */
    }

    .hero-form-content {
        padding-right: 24px;
    }

    .hero-form-card {
        padding: 26px 26px;
    }

}

@media (max-width: 1023.99px) {

    .hero-form-grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .hero-form-content {
        padding-right: 0;
    }

    .hero-form-card {
        padding: 40px 32px;
    }
}

@media (max-width: 767.99px) {

    .hero-form-actions {
        flex-direction: column;
    }

    .btn-main {
        width: 100%;
    }

    .hero-form-card {
        padding: 32px 24px;
        border-radius: var(--radius-main);
    }
}

.form-group-row {
    /*display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));*/
    display: flex;
    gap: 16px;
}

@media (max-width: 480px) {
    .form-group-row {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}


.dark-theme .hero-form-grid {
    filter: drop-shadow(-40px -20px 80px rgba(100, 87, 82, 0.2));
}

.dark-theme .hero-form-card input {
    background-color: rgba(255, 255, 255, 0.03);
}

.dark-theme .hero-form-card input:focus {
    background-color: rgba(255, 255, 255, 0.06);
}


/* mobile menu */

#mobile-menu {
    display: flex;
    flex-direction: column;
    background-color: var(--color-bg-menu);
    font-family: var(--font-main);
    color: var(--color-text);
    border-radius: var(--radius-main);
    box-shadow: var(--shadow-main);

    position: fixed;
    z-index: 999;
    padding: 20px;
    box-sizing: border-box;
    top: 70px;
    left: 15px;
    right: 15px;
    bottom: 15px;

    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);

    transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}

#mobile-menu.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

#mobile-menu .mobile-menu-body {
    flex-grow: 1;
    overflow-y: auto;
    margin-bottom: 15px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

#mobile-menu .mobile-menu-body::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

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

#mobile-menu .mobile-menu-body > ul > li {
    font-size: 15px;
    line-height: 140%;
    border-bottom: 1px solid var(--color-input-border);
}

#mobile-menu .mobile-menu-body > ul > li > a {
    display: block;
    color: var(--color-text);
    text-decoration: none;
    padding: 15px 0;
    transition: color var(--transition);
}

/* Стрелочка */
#mobile-menu .menu_arrow {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
}

#mobile-menu .menu_arrow i {
    content: url('../img/icons/arrow11.svg');
    width: 10px;
    height: 10px;
    transition: transform var(--transition);
}

#mobile-menu .menu_arrow.open i {
    transform: rotate(180deg);
}

/* ПОДМЕНЮ */
#mobile-menu-block-product-submenu {
    display: none;
    padding: 10px 0 10px 15px;
    margin: 0;
    list-style: none;
    background-color: var(--color-bg-menu);
}

#mobile-menu-block-product-submenu.open {
    display: block;
}

#mobile-menu-block-product-submenu li {
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

#mobile-menu-block-product-submenu li a {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    font-size: 14px;
    line-height: 130%;
    color: var(--color-text);
    text-decoration: none;
    padding: 12px 0 !important;
    border-radius: 10px;
    transition: background-color var(--transition);
}

#mobile-menu-block-product-submenu li a:hover,
#mobile-menu-block-product-submenu li a:active {
    background-color: var(--color-bg-hover);
}

#mobile-menu-block-product-submenu .menu-icon {
    display: block !important;
    flex-shrink: 0 !important;
    width: 18px !important;
    height: 18px !important;
    margin-right: 12px !important;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* Логотипы */
#mobile-menu-block-product-submenu li.p-extern .menu-icon {
    background-image: url('/assets/img/logos/extern.svg');
}

#mobile-menu-block-product-submenu li.p-diadoc .menu-icon {
    background-image: url('/assets/img/logos/diadoc.svg');
}

#mobile-menu-block-product-submenu li.p-ecp .menu-icon {
    background-image: url('/assets/img/logos/ecp.svg');
}

#mobile-menu-block-product-submenu li.p-elba .menu-icon {
    background-image: url('/assets/img/logos/elba.svg');
}

#mobile-menu-block-product-submenu li.p-fokus .menu-icon {
    background-image: url('/assets/img/logos/fokus.svg');
}

#mobile-menu-block-product-submenu li.p-ofd .menu-icon {
    background-image: url('/assets/img/logos/ofd.svg');
}

#mobile-menu-block-product-submenu li.p-zakupki .menu-icon {
    background-image: url('/assets/img/logos/zakupki.svg');
}

#mobile-menu-block-product-submenu li.p-logistika .menu-icon {
    background-image: url('/assets/img/logos/logistika.svg');
}

/* ФУТЕР МЕНЮ */
#mobile-menu .mobile-menu-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 15px;
    border-top: 1px solid var(--color-input-border);
    background: var(--color-bg-menu);
}

#mobile-menu .callback-btn {
    cursor: pointer;
    font-size: 14px;
    color: var(--color-orange);
    font-weight: 500;
}

#mobile-menu .phone {
    font-weight: bold;
    color: var(--color-text);
    text-decoration: none;
}

/* блокировка прокрутки */
body.no-scroll {
    overflow: hidden;
    height: 100vh;
}

/* 93б эцп кэп */

.custom-list-1 {
    list-style: none;
    padding: 0;
    margin: 0;
}

.custom-list-1 li {
    position: relative;
    padding-left: 35px;
    margin-bottom: 20px;
}

.custom-list-1 li:last-child {
    margin-bottom: 0;
}

.custom-list-1 li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 13px;
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FF5E3A'%3E%3Cpath d='M12 2v20M2 12h20M4.93 4.93l14.14 14.14M19.07 4.93L4.93 19.07' stroke='%23FF5E3A' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.custom-list-1 li p:first-child {
    color: #FFF;
    font-size: 30px;
    font-style: normal;
    font-weight: 600;
    margin-bottom: 10px;
}

.custom-list-1 li p:last-child {
    color: #E0E0E0;
    margin: 0;
}


/* прайс */

.ecp-tariffs {
    display: flex;
    gap: var(--grid-gap);
    margin-bottom: 40px;
    max-width: 60%;
}

.ecp-tariff {
    flex: 1;
    min-width: 200px;
    background-color: var(--color-bg-card-light);
    border-radius: 20px;
    padding: 20px;
    text-align: center;
    color: var(--color-input-placeholder);
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: background-color var(--transition), color var(--transition);
}

.ecp-tariff-price {
    font-size: var(--fs-h3);
    font-weight: 600;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--color-border-grid);
    color: var(--color-text);
}

.ecp-tariff-period {
    font-size: 1rem;
    padding-top: 15px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ecp-tariff-period span {
    font-size: 0.875rem;
    opacity: 0.8;
}

.ecp-tariff.active {
    background-color: var(--color-product-ecp);
    color: #fff;
}

.ecp-tariff.active .ecp-tariff-price {
    color: #fff;
    border-bottom-color: rgba(255, 255, 255, 0.3);
}

.ecp-service {
    padding: 24px 0;
    border-bottom: 1px solid var(--color-border-grid);
}

.ecp-service-label {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    cursor: pointer;
    user-select: none;
}

.ecp-checkbox {
    width: 22px;
    height: 22px;
    cursor: pointer;
}

.ecp-service-name {
    font-size: var(--fs-h3);
    font-weight: 500;
}

.ecp-service-name small {
    font-weight: 400;
    opacity: 0.6;
}

.ecp-service-price {
    font-size: var(--fs-h3);
    font-weight: 600;
    margin-bottom: 12px;
}

.ecp-service-text {
    font-size: 0.95rem;
    opacity: 0.7;
    max-width: 800px;
}

@media (max-width: 767.99px) {
    .ecp-tariffs {
        flex-direction: column;
        gap: 16px;
        max-width: 100%;
    }
}

.ecp-service-total-price {
    font-size: var(--fs-h2);
    font-weight: 700;
    color: var(--color-text);
    margin-top: 40px;
    display: flex;
    align-items: baseline;
    gap: 12px;
}

.ecp-service-total-price span {
    color: var(--color-product-ecp);
    font-size: 3rem;
    line-height: 1;
}

@media (max-width: 767.99px) {
    .ecp-service-total-price {
        font-size: var(--fs-h3);
        flex-wrap: wrap;
        gap: 8px;
    }

    .ecp-service-total-price span {
        font-size: 2.25rem;
        width: 100%;
    }
}


/* ecp razb */

/* base */

.pk-ecp-image-star {
    --star-size: 24px;
    display: inline-block;
    vertical-align: middle;
    width: var(--star-size);
    height: var(--star-size);
    flex-shrink: 0;
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 155 155" xmlns="http://www.w3.org/2000/svg"><path d="M70.5188 6.98198C70.5178 3.12594 73.6438 0 77.4998 0C81.3559 0 84.4818 3.12594 84.4818 6.98198V148.018C84.4818 151.874 81.3559 155 77.4998 155C73.6438 155 70.5178 151.874 70.5178 148.018V6.98198ZM122.427 22.6992C125.153 19.9726 129.574 19.9726 132.301 22.6992C135.027 25.4258 135.027 29.8466 132.301 32.5732L32.5731 132.301C29.8465 135.027 25.4257 135.027 22.6991 132.301C19.9725 129.574 19.9725 125.153 22.6991 122.427L122.427 22.6992ZM148.018 70.5179C151.874 70.5179 155 73.6439 155 77.4999C155 81.3559 151.874 84.4819 148.018 84.4819H6.98198C3.12594 84.4819 0 81.3559 0 77.4999C0 73.6439 3.12594 70.5179 6.98198 70.5179L148.018 70.5179ZM132.301 122.427C135.027 125.153 135.027 129.574 132.301 132.301C129.574 135.027 125.153 135.027 122.427 132.301L22.6991 32.5732C19.9724 29.8466 19.9724 25.4258 22.6991 22.6992C25.4257 19.9726 29.8464 19.9725 32.5731 22.6992L132.301 122.427Z"/></svg>');
    mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 155 155" xmlns="http://www.w3.org/2000/svg"><path d="M70.5178 6.98198C70.5178 3.12594 73.6438 0 77.4998 0C81.3559 0 84.4818 3.12594 84.4818 6.98198V148.018C84.4818 151.874 81.3559 155 77.4998 155C73.6438 155 70.5178 151.874 70.5178 148.018V6.98198ZM122.427 22.6992C125.153 19.9726 129.574 19.9726 132.301 22.6992C135.027 25.4258 135.027 29.8466 132.301 32.5732L32.5731 132.301C29.8465 135.027 25.4257 135.027 22.6991 132.301C19.9725 129.574 19.9725 125.153 22.6991 122.427L122.427 22.6992ZM148.018 70.5179C151.874 70.5179 155 73.6439 155 77.4999C155 81.3559 151.874 84.4819 148.018 84.4819H6.98198C3.12594 84.4819 0 81.3559 0 77.4999C0 73.6439 3.12594 70.5179 6.98198 70.5179L148.018 70.5179ZM132.301 122.427C135.027 125.153 135.027 129.574 132.301 132.301C129.574 135.027 125.153 135.027 122.427 132.301L22.6991 32.5732C19.9724 29.8466 19.9724 25.4258 22.6991 22.6992C25.4257 19.9726 29.8464 19.9725 32.5731 22.6992L132.301 122.427Z"/></svg>');
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
    background-color: currentColor;
    transition: background-color var(--transition);
    position: absolute;
}

.pk-ecp-image-star--color-1 {
    background-color: #d1acff;
}

.pk-ecp-image-star--color-2 {
    background-color: var(--color-product-ecp);
}


#ecp2_1 {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    height: 482px;
    justify-content: space-between;
    gap: 20px;
}

#ecp2_1 .item {
    padding: 10px;
    background-color: #e0e0e0;
    border-radius: 10px;
}

#ecp2_1 .item1 {
    background-image: url("/assets/img/common/1056.png");
    width: 360px;
    height: 245px;
    background-size: cover;
    background-position: center;
}

#ecp2_1 .item2 {
    background-color: #D1ACFF;
    width: 360px;
    height: 217px;
    box-sizing: border-box;
    padding: 20px;
}

#ecp2_1 .item2 .d_flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#ecp2_1 .item2 .d_flex .img {
    width: 270px;
    height: 68px;
    background-image: url("/assets/img/common/1057.png");
    background-size: cover;
    background-repeat: no-repeat;
}

#ecp2_1 .item3 {
    width: 468px;
    height: 328px;
    background-color: #ffe0d3;
    padding: 20px;
}

#ecp2_1 .item4 {
    width: 468px;
    height: 134px;
    background-color: #abeba5;
}

#ecp2_1 .item5 {
    background-color: #d5f178;
    width: 285px;
    height: 190px;
    padding: 20px;
}

#ecp2_1 .item6 {
    background-color: #65a6c0;
    background-image: url("/assets/img/common/1055.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 285px;
    height: 271px;
}

#ecp2_1 .item2 p {
    font-size: var(--fs-h2);
    font-weight: 500;
    line-height: 48px;
    color: #222;
}

#ecp2_1 .item3 {
    position: relative;
}

#ecp2_1 .item3 p {
    font-size: 20px;
    font-weight: 400;
    color: #707070;
    margin-bottom: 20px;
}

#ecp2_1 .item4 {
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: #a2e89c;
    position: relative;
}

#ecp2_1 .item4::before,
#ecp2_1 .item4::after {
    content: '';
    position: absolute;
    right: 0;
    height: 8px;
    background-color: #c39eff;
    border-radius: 4px 0 0 4px;
}

#ecp2_1 .item4::before {
    bottom: 40px;
    width: 45%;
}

#ecp2_1 .item4::after {
    bottom: 20px;
    width: 52%;
}

#ecp2_1 .item4 div {
    height: 80px;
}

#ecp2_1 .item4 p:nth-child(1) {
    color: #222;
    font-size: 30px;
    font-style: normal;
    font-weight: 600;
    line-height: 120%;
    padding: 0;
    margin: 0;
}

#ecp2_1 .item4 p:nth-child(2) {
    color: #717171;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
}

#ecp2_1 .item5 {
    position: relative;
}

#ecp2_1 .item5 p:nth-child(1) {
    color: #222;
    font-size: 30px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

#ecp2_1 .item5 p:nth-child(2) {
    color: #707070;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
}

#ecp2_1 .item5 img {
    margin-right: 10px;
    width: 30px;
    height: 30px;
}

#ecp2_1 .item5 .row {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    height: 50px;
}

#ecp2_1 .item5 .row div {
    font-size: 30px;
    font-weight: 500;
}

#ecp2_1 .item5 .ecp2_btn_3 {
    position: absolute;
    bottom: 20px;
    right: 20px;
}

/* Size 2 (Ноутбуки) */
@media (max-width: 1279.99px) {

    #ecp2_1 {
        height: 520px;
    }

    #ecp2_1 .item1 {
        width: 340px;
        height: 251px;
        background-image: url("/assets/img/common/1056.png");
    }

    #ecp2_1 .item2 {
        width: 340px;
        height: 249px;
    }

    #ecp2_1 .item3 {
        width: 397px;
        height: 366px;
    }

    #ecp2_1 .item4 {
        width: 397px;
        height: 134px;
    }

    #ecp2_1 .item5 {
        width: 223px;
        height: 225px;
    }

    #ecp2_1 .item6 {
        width: 223px;
        height: 275px;
    }

}

/* Size 3 (Планшеты) */
@media (max-width: 1023.99px) {

    #ecp2_1 {
        height: 994px;
        justify-content: normal;
    }

    #ecp2_1 .item1 {
        width: 294px;
        height: 350px;
        order: 1;
        background-image: url("/assets/img/common/1056.png");
    }

    #ecp2_1 .item2 {
        width: 428px;
        height: 217px;
        order: 2;
    }

    #ecp2_1 .item3 {
        width: 406px;
        height: 350px;
        order: 5;
        margin-left: -138px;
    }

    #ecp2_1 .item4 {
        width: 428px;
        height: 150px;
        order: 3;
    }

    #ecp2_1 .item5 {
        width: 428px;
        height: 151px;
        order: 4;
    }

    #ecp2_1 .item6 {
        width: 268px;
        height: 554px;
        order: 6;
    }

}

/* Size 4 (Мобильные) */
@media (max-width: 767.99px) {

    #ecp2_1 {
        height: auto;
        justify-content: normal;
    }

    #ecp2_1 .item {
        width: 100%;
        margin-bottom: 20px;
    }

    #ecp2_1 .item1 {
        height: 240px;
        order: 2;
        background-image: url("/assets/img/common/1056_m.png");
        background-position: center;
        background-size: cover;
    }

    #ecp2_1 .item2 {
        height: auto;
        order: 5;
    }

    #ecp2_1 .item2 p {
        font-size: 30px;
        font-weight: 700;
    }

    #ecp2_1 .item2 .d_flex .img {
        margin-left: -16px;
    }

    #ecp2_1 .item3 {
        height: auto;
        order: 1;
    }

    #ecp2_1 .item3 .ecp2_btn_bottom_left {
        position: relative;
        bottom: auto;
        left: auto;
    }

    #ecp2_1 .item4 {
        height: auto;
        order: 4;
    }

    #ecp2_1 .item4 div {
        width: 84px;
        height: auto;
    }

    #ecp2_1 .item4:after {
        width: 20px;
        height: 20px;
        background-size: 20px 20px;
    }

    #ecp2_1 .item4 p:nth-child(1) {
        font-size: 25px;
        font-weight: 600;
    }

    #ecp2_1 .item4 p:nth-child(2) {
        font-size: 16px;
        font-weight: 400;
    }

    #ecp2_1 .item4::before,
    #ecp2_1 .item4::after {
        display: none;
    }

    #ecp2_1 .item5 {
        height: 164px;
        order: 3;
    }

    #ecp2_1 .item5 p:nth-child(2) {
        max-width: 220px;
    }

    #ecp2_1 .item6 {
        height: 250px;
        order: 6;
        background-image: url("/assets/img/common/1055_m.png");
        background-position: center;
        background-size: cover;
    }

    #ecp2_1 .item3 h1 {
        font-size: 30px;
        font-weight: 700;
    }

}


#ecp2_6 {
    display: flex;
    background: url("/assets/img/common/1018_1.png") no-repeat;
    background-size: auto;
    border-radius: 20px;
}

#ecp2_6 .left {
    width: 600px;
    height: 550px;
    padding: 20px;
}

#ecp2_8 {
    display: flex;
    background: url("/assets/img/common/1019_1.png") no-repeat;
    background-size: cover;
    border-radius: 20px;
}

#ecp2_8 .left {
    width: 640px;
    padding: 20px;
}


/* Size 2 (Ноутбуки) */
@media (max-width: 1279.99px) {

    #ecp2_6 {
        background-position: right;
    }

    #ecp2_6 .left {
        width: 540px;
    }

    #ecp2_8 {
        background-position: right;
    }

}

/* Size 3 (Планшеты) */
@media (max-width: 1023.99px) {

    #ecp2_6 {
        background: url('/assets/img/common/1018_2.png') no-repeat;
    }

    #ecp2_8 {
        background: url('/assets/img/common/1019_2.svg') no-repeat;
        background-size: cover;
    }

}

/* Size 4 (Мобильные) */
@media (max-width: 767.99px) {

    #ecp2_6 {
        background: url('/assets/img/common/1018_3.svg') no-repeat;
        background-size: cover;
    }

    #ecp2_6 .left {
        width: 100%;
        height: auto;
    }

    #ecp2_8 {
        background: url('/assets/img/common/1019_2.svg') no-repeat;
        background-size: cover;
    }

    #ecp2_8 .left {
        width: 100%;
    }

    #ecp2_8 .ecp2_buttons {
        display: block;
    }

}


/* вроде норм */

.banner-catalog {
    display: flex;
    align-items: center;
    min-height: 520px;
    background: #333333 url("/assets/img/common/1015.svg") no-repeat right bottom / contain;
    border-radius: var(--radius-main);
    padding: 50px;
}

.banner-catalog-content {
    max-width: 55%;
}

.banner-catalog h2,
.banner-catalog p {
    color: #fff;
}

.banner-catalog h2 {
    margin-bottom: 20px;
}

.banner-catalog-note {
    font-size: 1.125rem;
    font-style: italic;
    font-weight: 300;
    opacity: 0.8;
}


@media (max-width: 1279.99px) {

    .banner-catalog {
        min-height: 480px;
        padding: 40px;
    }

    .banner-catalog-content {
        max-width: 58%;
    }
}

@media (max-width: 1023.99px) {

    .banner-catalog {
        flex-direction: column;
        align-items: flex-start;
        min-height: auto;
        background-image: url("/assets/img/common/1015_2.svg");
        background-position: center bottom;
        background-size: 100% auto;
        padding: 40px 40px calc(680px * 0.45);
    }

    .banner-catalog-content {
        max-width: 100%;
    }
}

@media (max-width: 767.99px) {
    .banner-catalog {
        padding: 30px 20px calc((100vw * 0.65) - 100px);
    }
}


/* Экстерн, виды отчётности */

.pk-report-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--grid-gap);
}

.pk-report-item {
    position: relative;
    width: calc(25% - (var(--grid-gap) * 3 / 4));
    min-width: 240px;
    height: 180px;
    background-color: var(--color-bg-card-white);
    border-radius: var(--radius-main);
    box-shadow: var(--shadow-main);
    overflow: hidden;
    display: block;
    transition: background-color var(--transition);
}

@media (max-width: 1023.99px) {
    .pk-report-item {
        width: calc(33.333% - (var(--grid-gap) * 2 / 3));
    }
}

@media (max-width: 767.99px) {
    .pk-report-item {
        width: 100%;
    }
}

.pk-report-item-front {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 12px;
    color: var(--color-text);
    font-weight: 500;
    transition: opacity var(--transition), transform var(--transition);
}

.pk-report-item-front img {
    width: 80px;
    height: 80px;
    object-fit: contain;
}

.pk-report-item-back {
    position: absolute;
    inset: 0;
    padding: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
    font-size: 0.875rem;
    line-height: 1.4;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity var(--transition), transform var(--transition);
}

.pk-report-item:hover {
    background-color: #1e293b;
}

.pk-report-item:hover .pk-report-item-front {
    opacity: 0;
    transform: translateY(-10px);
}

.pk-report-item:hover .pk-report-item-back {
    opacity: 1;
    transform: translateY(0);
}


/* Более 1 170 000 клиентов пользуются продуктами СКБ Контур */

.pk-promo-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.pk-promo-media {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    overflow: hidden;
}

.pk-promo-person {
    position: relative;
    z-index: 2;
    max-width: 90%;
    height: auto;
    display: block;
}


@media (max-width: 1023.99px) {
    .pk-promo-media {
        height: auto;
        aspect-ratio: 4 / 3; /* задаем пропорции контейнера */
        margin-top: 30px;
    }

    .pk-promo-person {
        max-width: 75%;
    }
}


/* шапка прайса */

.extern-tabs-container {
    display: flex;
    justify-content: center;
    margin-bottom: 40px;
}

.extern-tabs-switcher {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    padding: 8px;
    background-color: var(--color-bg-light);
    border-radius: 20px;
    border: 1px solid var(--color-input-border);
    max-width: 100%;
}

.extern-tab-btn {
    font-family: var(--font-main);
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--color-text);
    background: transparent;
    border: none;
    padding: 12px 24px;
    border-radius: 14px;
    cursor: pointer;
    white-space: nowrap; /* Текст больше никогда не обрежется троеточием */
    transition: background-color var(--transition), color var(--transition), box-shadow var(--transition);
}

.extern-tab-btn:hover:not(.is-active) {
    background-color: var(--color-bg-hover);
}

/* Активная кнопка — аккуратный белый островок */
.extern-tab-btn.is-active {
    background-color: var(--color-bg-card-white);
    color: var(--color-link);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.dark-theme .extern-tab-btn.is-active {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Size 4 */
@media (max-width: 767.99px) {

    .extern-tabs-container {
        margin-inline: -20px;
    }

    .extern-tabs-switcher {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        scrollbar-width: none;
        padding-inline: 20px;
        background: transparent;
        border: none;
    }

    .extern-tabs-switcher::-webkit-scrollbar {
        display: none;
    }

    .extern-tab-btn {
        background-color: var(--color-bg-light);
        border: 1px solid var(--color-input-border);
    }
}


/* section-1: Главная / Популярные решения */

.section-1 .arrow {
    display: block;
    background: url('/assets/img/icons/arrow10.svg');
    width: 52px;
    height: 12px;
    margin-top: 25px;
    position: absolute;
    bottom: 20px;
    -webkit-transition: -webkit-filter var(--transition);
    transition: filter var(--transition);
}

@media (hover: hover) {

    /* фоны при наведении */
    .section-1 .item_extern:hover {
        background: #FF8227 url("/assets/img/fp/item_bg/extern.svg");
    }

    .section-1 .item_diadoc:hover {
        background: #00CCAE url("/assets/img/fp/item_bg/diadoc.svg");
    }

    .section-1 .item_ecp:hover {
        background: #FF5A49 url("/assets/img/fp/item_bg/ecp.svg");
    }

    .section-1 .item_elba:hover {
        background: #4E7BF9 url("/assets/img/fp/item_bg/elba.svg");
    }

    .section-1 .item_fokus:hover {
        background: #3DBC5D url("/assets/img/fp/item_bg/fokus.svg");
    }

    .section-1 .item_ofd:hover {
        background: #4E9FFF url("/assets/img/fp/item_bg/ofd.svg");
    }

    .section-1 .item_zakupki:hover {
        background: #4E7BF9 url("/assets/img/fp/item_bg/zakupki.svg");
    }

    .section-1 .card:hover {
        transition: 400ms ease-in-out;
        background-repeat: no-repeat;
        background-position: right;
    }

    .section-1 [class*="item_"]:hover h3,
    .section-1 [class*="item_"]:hover p {
        color: #FFF !important;
    }

    .section-1:hover .arrow {
        -webkit-filter: brightness(0) invert(1);
        filter: brightness(0) invert(1);
    }

}


/* section-2: */

.section-2 .card-footer {
    padding-top: 15px;
}

.section-2 .card-footer a,
.section-2 .card-footer .date {
    white-space: nowrap;
}

.section-2 .card-footer a {
    padding: 16px 12px;
}

.section-2 .card-footer .date {
    text-align: right;
    color: #FF8227;
}

/* Size 2 (Ноутбуки) */
@media (max-width: 1279.99px) {

    .section-2 .card-footer {
        display: grid;
        grid-template-columns: 1fr;
    }

    .section-2 .card-footer a {
        display: flex;
        width: 100%;
    }

    .section-2 .card-footer .date {
        text-align: center;
    }
}

/* Size 3 (Планшеты) */
@media (max-width: 1023.99px) {

    .section-2 .card-footer {
        grid-template-columns: repeat(2, 1fr);
    }

    .section-2 .card-footer a {
        display: inline-flex;
        width: max-content;
    }

    .section-2 .card-footer .date {
        text-align: center;
    }

    .section-2 .card:nth-child(1) {
        order: 1;
    }

    .section-2 .card:nth-child(2) {
        order: 2;
    }

    .section-2 .card:nth-child(3) {
        order: 3;
    }

    .section-2 .card:nth-child(4) {
        order: 6;
    }

    .section-2 .card:nth-child(5) {
        order: 5;
    }

    .section-2 .card:nth-child(6) {
        order: 5;
    }

}

/* Size 4 (Мобильные) */
@media (max-width: 767.99px) {

    .section-2 .card-footer {
        grid-template-columns: 1fr;
    }

    .section-2 .card-footer a {
        display: flex;
        width: 100%;
    }

    .section-2 .card-footer .date {
        text-align: center;
    }

    .section-2 .card:nth-child(3) {
        display: none;
    }

    .section-2 .card:nth-child(4) {
        display: none;
    }

}


.card.pk-bg-image-full-size {
    padding: 0;
    overflow: hidden;
    position: relative;
    min-height: 340px;
}

.card.pk-bg-image-full-size picture,
.card.pk-bg-image-full-size img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    z-index: -1;
}


/* главная, Наши продукты помогают тратить меньше времени на рутину */

.section-3 .text-center {
    text-align: center;
    max-width: 900px;
    margin-inline: auto;
}

.section-3 .items {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--grid-gap);
}

.section-3 .block1 {
    grid-row: span 2;
    background-color: var(--color-bg-card-light);
    border-radius: var(--card-soft-radius);
    display: grid;
    place-items: center;
    padding: var(--grid-gap);
}

.section-3 .image {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 50%;
}

.section-3 .items > div:not(.block1) {
    background-color: var(--color-bg-card-light);
    border-radius: var(--radius-main);
    padding: 40px var(--grid-gap);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.section-3 .text1 {
    font-size: var(--fs-h1);
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 20px;
}

.section-3 .text2 {
    font-size: 1rem;
    line-height: 1.4;
    margin-bottom: 0;
}

.section-3 h2 {
    width: 75%;
}

@media (max-width: 1279.99px) {

    .section-3 .items > div:not(.block1) {
        padding: 30px var(--grid-gap);
    }

}

@media (max-width: 1023.99px) {

    .section-3 .items {
        grid-template-columns: repeat(2, 1fr);
    }

    .section-3 .block1 {
        grid-row: span 2;
    }

    .section-3 .block2 {
        order: 1;
    }

    .section-3 .block4 {
        order: 2;
    }

    .section-3 .block3 {
        order: 3;
    }

    .section-3 .block5 {
        order: 4;
    }
}

@media (max-width: 767.99px) {

    .section-3 .items {
        grid-template-columns: 1fr;
    }

    .section-3 .block1 {
        grid-row: span 1;
    }
}


/* Главная / Пользователи сервисов СКБ Контур */

.section-4 {
    margin-bottom: var(--space-section);
}

.section-4 .text_center {
    text-align: center;
    max-width: 900px;
    margin-inline: auto;
    margin-bottom: var(--space-h2-bottom);
}

.section-4 .logos {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background-color: var(--color-border-grid);
    gap: 1px;
    border: 1px solid var(--color-bg-body);
}

.section-4 .logos div {
    display: grid;
    place-items: center;

    aspect-ratio: 16 / 9;
    background-color: var(--color-bg-body);
}

.section-4 .logos img {
    max-width: 110px;
    max-height: 50px;
    width: auto;
    height: auto;
    object-fit: contain;
}

@media (max-width: 767.99px) {
    .section-4 .logos {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* 5 */

.section-5 .card-footer {
    margin-top: auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
    gap: 16px;
}

.section-5 .card-footer a,
.section-5 .card-footer .date {
    white-space: nowrap;
}

.section-5 .card-footer a {
    padding: 16px 12px;
}

.section-5 .card-footer .date {
    text-align: right;
    color: var(--color-text);
}

/* Size 2 (Ноутбуки) */
@media (max-width: 1279.99px) {

    .section-5 .card-footer {
        grid-template-columns: 1fr;
    }

    .section-5 .card-footer a {
        display: flex;
        width: 100%;
    }

    .section-5 .card-footer .date {
        text-align: center;
    }
}

/* Size 3 (Планшеты) */
@media (max-width: 1023.99px) {

    .section-5 .card-footer {
        grid-template-columns: repeat(2, 1fr);
    }

    .section-5 .card-footer a {
        display: inline-flex;
        width: max-content;
    }

    .section-5 .card-footer .date {
        text-align: center;
    }

}

/* Size 4 (Мобильные) */
@media (max-width: 767.99px) {

    .section-5 .card-footer {
        grid-template-columns: 1fr;
    }

    .section-5 .card-footer a {
        display: flex;
        width: 100%;
    }

    .section-5 .card-footer .date {
        text-align: center;
    }

}


/* 6 */

.section-6 .item {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 32px;
    border-radius: var(--radius-main);
    color: #fff;
    font-size: 1rem;
    line-height: 1.4;
}

.section-6 .item.bg-red {
    background-color: #fc5151;
}

.section-6 .item.bg-blue {
    background-color: #428fc7;
}

.section-6 .item img {
    margin-top: auto;
    align-self: flex-start;
    width: auto;
    height: 40px;
}


/* Size 3 (Планшеты) */
@media (max-width: 1023.99px) {

    .section-6 .item:nth-child(1) {
        order: 1
    }

    .section-6 .item:nth-child(2) {
        order: 2
    }

    .section-6 .item:nth-child(3) {
        order: 4
    }

    .section-6 .item:nth-child(4) {
        order: 3
    }

    .section-6 .item:nth-child(5) {
        order: 5
    }

    .section-6 .item:nth-child(6) {
        order: 6
    }

}

/* Size 4 (Мобильные) */
@media (max-width: 767.99px) {

    .section-6 .item:nth-child(1) {
        order: 1
    }

    .section-6 .item:nth-child(2) {
        order: 2
    }

    .section-6 .item:nth-child(3) {
        order: 3
    }

    .section-6 .item:nth-child(4) {
        order: 4
    }

    .section-6 .item:nth-child(5) {
        order: 5
    }

    .section-6 .item:nth-child(6) {
        order: 6
    }

}


.section-7 {
    display: grid;
    grid-template-columns: 410px minmax(0, 1fr);
    gap: 40px;
    align-items: center;
    background-color: var(--color-bg-card-white);
    border-radius: var(--radius-main);
    box-shadow: var(--shadow-main);
    padding: 60px 60px 60px 0;
}

.section-7-decor {
    width: 100%;
    height: 100%;
    min-height: 435px;
    background-color: rgba(213, 241, 120, 0.51);
    border-radius: 50px 50px 214px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    position: relative;
}

.section-7-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.section-7-content h2 {
    margin-bottom: 24px;
}


/* Size 2 */
@media (max-width: 1279.99px) {

    .section-7 {
        grid-template-columns: 320px minmax(0, 1fr);
        gap: 32px;
        padding: 45px 45px 45px 0;
    }

    .section-7-decor {
        min-height: 380px;
    }
}

/* Size 3 */
@media (max-width: 1023.99px) {

    .section-7 {
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
        padding: 32px;
    }

    .section-7-decor {
        order: -1;
        min-height: 240px;
        border-radius: 50px 50px 50px 0;
    }

    .section-7-img {
        max-width: 320px;
        height: auto;
    }

}

/* Size 4 */
@media (max-width: 767.99px) {

    .section-7 {
        padding: 24px;
        gap: 24px;
    }

    .section-7-decor {
        min-height: 180px;
        border-radius: 30px 30px 30px 0;
    }

    .section-7-img {
        max-width: 280px;
        height: auto;
    }

}


.section-8 {
    display: grid;
    grid-template-columns: 42% 1fr;
    gap: var(--grid-gap) 60px;
    align-items: center;
}

.section-8-img {
    grid-row: span 2;
}

.section-8 h2 {
    margin-bottom: 0 !important;
}

@media (max-width: 767.99px) {

    .section-8 {
        grid-template-columns: 1fr;
        grid-template-areas:
            "title"
            "image"
            "text";
        gap: var(--grid-gap);
    }

    .section-8 h2 {
        grid-area: title;
        margin-bottom: 0 !important;
    }

    .section-8-img {
        grid-area: image;
        grid-row: auto;
        width: 100%;
    }

    .section-8-text {
        grid-area: text;
    }
}


.section-9 {
    overflow: hidden;
    background-color: var(--color-bg-card-white);
    border-radius: var(--card-soft-radius);
    box-shadow: var(--card-soft-shadow);
    padding: 50px;
}

@media (max-width: 1023.99px) {
    .section-9 {
        padding: 30px;
    }
}


.section-10 {
    display: grid;
    gap: 20px;
    grid-template-columns: 3.5fr 6.5fr;
    grid-template-areas:
    "area-1 area-2"
    "area-1 area-3"
    "area-1 area-4";
}

.section-10-grid-item {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
}

.section-10-grid-item-body {
    display: flex;
    flex-direction: column;
}

.section-10-item-1 {
    grid-area: area-1;
    position: relative;
    overflow: hidden;
}

.section-10-item-2 {
    grid-area: area-2;
}

.section-10-item-3 {
    grid-area: area-3;
}

.section-10-item-4 {
    grid-area: area-4;
}

.section-10-item-1 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.section-10 p {
    color: #707070;
}

@media (max-width: 767.99px) {
    .section-10 {
        grid-template-columns: 1fr;
        grid-template-areas:
      "area-1"
      "area-2"
      "area-3"
      "area-4";
    }

    .section-10-item-1 {
        height: 250px;
    }

}

.section-10-acc .section-10-acс-content-extend {
    display: none;
}

.section-10-acc .section-10-acс-opened .section-10-acс-content-extend {
    display: block;
}

.section-10-acc .section-10-acс-opened .section-10-item-btn button {
    display: none;
}

.section-10-acc .section-10-item-1 {
    grid-row: 1 / span 3;
    position: relative;
    overflow: hidden;
    height: 100%;
}

.section-10-acc .section-10-item-1 img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100 cqh;
    min-height: 100%;
    object-fit: cover;
    object-position: top center;
    backface-visibility: hidden;
    transform: translate3d(0, 0, 0);
}

@media (max-width: 767.99px) {
    .section-10-acc .section-10-item-1 {
        grid-row: auto;
        width: 100%;
        aspect-ratio: 2 / 1;
        height: auto;
        max-height: 300px;
        overflow: hidden;
    }

    .section-10-acc .section-10-picture,
    .section-10-acc .section-10-picture img {
        display: block;
        position: static;
        transform: none;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }
}


.section-11 {
    display: grid;
    grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
    grid-template-rows: auto auto;
    gap: 24px 40px;
    align-items: center;
}

.section-11-image {
    grid-column: 1;
    grid-row: 1 / span 2;
    position: relative;
    height: 100%;
    width: 100%;
}

.section-11-image img.section-7-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
}

.section-11 h2 {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
}

.section-11-content {
    grid-column: 2;
    grid-row: 2;
}


/* Size 4 (мобильные) */
@media (max-width: 767.99px) {

    .section-11 {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .section-11 h2 {
        order: 1;
        margin: 0;
    }

    .section-11-image {
        order: 2;
        position: relative;
        width: 100%;
        height: 200px;
        overflow: hidden;
    }

    .section-11-image img.section-7-img {
        position: absolute;
        top: 0;
        left: 0;
        max-width: none !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover;
        object-position: center top;
    }

    .section-11-content {
        order: 3;
    }
}


.section-12 {
    background-size: cover;
    border-radius: 20px;
    position: relative;
    background: url("/assets/img/common/1020.svg") no-repeat right center;
}

.section-12-content {
    padding: 20px;
    max-width: 680px;
}

.section-12:after {
    content: "";
    width: 356px;
    height: 811px;
    position: absolute;
    right: 80px;
    bottom: 0;
    background: url("/assets/img/common/1021.png") no-repeat;
    background-size: cover;
}


/* Size 2 */
@media (max-width: 1279.99px) {

    .section-12:after {
        width: 321px;
        height: 743px;
        right: -18px;
    }

}

/* Size 3 */
@media (max-width: 1023.99px) {

    .section-12:after {
        display: none;
    }

    .section-12-content {
        width: 80%;
    }

}


.section-13 img {
    margin-bottom: 20px;
    border-radius: 24px;
}

.section-13-grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.section-13-grid-container .grid-item {
    min-height: 200px;
}

.section-13-grid-container .item-large {
    grid-column: span 2;
    background: url("/assets/img/common/1052.webp") no-repeat center;
    background-size: cover;
}

.item-large-content {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.item-large-content-head {
    display: flex;
    gap: 20px;
    color: white;
}

.item-large-content-head p {
    font-size: var(--fs-h2);
    color: white;
}

.item-large-content p {
    font-size: var(--fs-h3);
    color: white;
}

@media (max-width: 1023px) {

    .section-13-grid-container {
        grid-template-columns: repeat(2, 1fr);
    }

    .section-13-grid-container .item-large {
        grid-column: span 1;
    }
}

@media (max-width: 767px) {

    .section-13-grid-container {
        grid-template-columns: 1fr;
    }

}

.section-14 {
    background-size: cover;
    border-radius: 20px;
    padding: 20px;
    background: #333333 url("/assets/img/common/1020.svg") no-repeat right center;
}

.section-14 h2,
.section-14 p,
.section-14 li {
    color: white;
}

.section-14 h2 {
    margin-bottom: 0;
}

.section-14-grid {
    display: grid;
    gap: 20px;
    grid-template-columns: 3fr 2fr; /* 60% и 40% */
    grid-template-areas:
        "head image"
        "content image";
}

.section-14-head {
    grid-area: head;
}

.section-14-content {
    grid-area: content;
}

.section-14-image {
    grid-area: image;
    overflow: hidden;
    border-radius: 20px;
}

.section-14-image picture,
.section-14-image img {
    display: block;
    width: 100%;
    height: 100%;
}

.section-14-image img {
    object-fit: cover;
    object-position: center;
}

@media (max-width: 1023.99px) {

    .section-14 {
        background-size: cover;
        border-radius: 20px;
        padding: 20px;
        background: #333333 url("/assets/img/common/1020.svg") no-repeat right bottom;
    }

    .section-14-grid {
        grid-template-columns: 100%;
        grid-template-areas:
            "head"
            "image"
            "content";
    }

    .section-14-image {
        min-height: 200px;
    }
}


.section-client-review .name {
    margin-bottom: 0;
    font-weight: bold;
}

.section-client-review .post {
    color: #7A7A7A;
    margin-bottom: 20px;
}

.section-15 {
    background-color: #0050B2;
    text-align: center;
    padding: 60px 0;
}

.section-16-w80 {
    width: 80%;
    margin: 0 auto;
    text-align: center;
}

@media (max-width: 767.99px) {
    .section-16-w80 {
        width: 100%;
    }
}

.section-17 .items {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}

.section-17 .items .item {
    background-color: var(--color-bg-card-white);
    box-shadow: var(--card-soft-shadow);
    padding: 20px;
    width: 150px;
    border-radius: 20px;
    font-size: var(--fs-body);

    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;

}

.section-17 .items .item img {
    /* Фиксируем размеры картинок, чтобы они были одинаковыми */
    width: 80px;
    height: 80px;
    object-fit: contain;

    /* Задаем отступ снизу до текста */
    margin-bottom: 20px;

    /* Убираем все автоматические отступы сверху */
    margin-top: 0;
}

.section-17 .items .item p {
    margin-bottom: 0;
}


/* extern otchetnost nav */


.section-18 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

.section-18-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 240px;
    height: 180px;
    background-color: var(--color-bg-card-white);
    border-radius: var(--radius-main);
    box-shadow: var(--shadow-main);
    overflow: hidden;
    transition: background-color var(--transition);
    text-align: center;
    padding: 20px;
    width: calc(25% - (20px * 3 / 4));
}

@media (max-width: 1023.99px) {
    .section-18-item {
        width: calc(33.333% - (20px * 2 / 3));
    }
}

@media (max-width: 767.99px) {
    .section-18-item {
        width: 100%;
    }
}

.section-18-item:hover,
.section-18-item-selected {
    background-color: #e8f0fe;
    border: 1px solid #c2dbff;
    box-shadow: none;
}

.section-19-content {
    background: url("/assets/img/common/1111.svg") no-repeat right center;
    padding: 60px 440px 60px 50px;
    border-radius: 20px;
    overflow: hidden;
}

.section-19-content .pk-btn {
    background-color: #FFF;
    color: var(--color-product-extern);
}

/* Size 4 */
@media (max-width: 767.99px) {

    .section-19-content {
        padding: 40px;
        background: var(--color-product-extern) none;
    }

}


.section-20 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

.section-20 a span {
    display: block;
    margin-bottom: 8px;
}


/* подключение, старая форма */

.connect-info {
    display: flex;
    align-items: flex-start;
}

.connect-info-step-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    flex-shrink: 0;
    font-size: 24px;
    font-weight: bold;
    color: #ffffff;
    margin-right: 20px;
}

.connect-info h3 {
    margin: 0 0 10px 0;
    color: var(--color-text);
}

.connect-info p {
    margin: 0;
    color: var(--color-text);
}

#link_max {
    width: 32px;
    display: block;
    height: 32px;
    bottom: 15px;
    position: fixed;
    right: 15px;
    cursor: pointer;
    background-image: url('/assets/img/logos/max.svg');
    background-size: contain;
}

#cookie_info {
    width: 500px;
    height: auto;
    background-color: #F9F9F9;
    display: none;
    box-sizing: border-box;
    padding: 5px;
    position: fixed;
    bottom: 10px;
    left: 10px;
    font-size: 14px;
    line-height: 20px;
    border-radius: 10px;
}

#cookie_info a {
    font-size: 14px;
    line-height: 20px;
    text-decoration: underline;
}

#cookie_info_button {
    padding: 4px;
    background-color: #00CC66;
    border-radius: 10px;
    color: #FFF;
    cursor: pointer;
    width: max-content;
    margin-top: 5px;
}


/* Size 4 */
@media (max-width: 767.99px) {
    #cookie_info {
        width: 100%;
        height: auto;
        bottom: 80px;
        left: 0;
        font-size: 10px;
        line-height: 16px;
    }

    #cookie_info a {
        font-size: 10px;
        line-height: 16px;
    }
}

.news-header-info {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
    gap: 30px;
}

.news-header-info-date,
.news-header-info-product {
    border-radius: 8px;
    background-color: #a6a6a6;
    color: white;
    padding: 2px 5px;
}

.news-header-info-product-id-1 {
    background-color: var(--color-product-extern);
}

.news-header-info-product-id-2 {
    background-color: var(--color-product-diadoc);
}

.news-header-info-product-id-3 {
    background-color: var(--color-product-ecp);
}


.h1-center {
    text-align: center;
    max-width: 32ch;
    margin: 0 auto 40px auto;
}

@media (max-width: 767.99px) {

    .h1-center {
        text-align: left;
        max-width: 90%;
        margin: 0 0 24px 0 !important;
    }
}