/* ─── hebrew header ─── */
        .tg-hebrew {
            font-size: 14px;
            color: rgba(255, 255, 255, 0.5);
            letter-spacing: 0.5px;
            text-align: center;
            font-weight: 400;
            margin-bottom: 12px;
            direction: rtl;
        }
        .tg-hebrew span {
            display: inline-block;
            background: rgba(255, 255, 255, 0.04);
            padding: 6px 18px;
            border-radius: 40px;
            backdrop-filter: blur(2px);
            -webkit-backdrop-filter: blur(2px);
            border: 1px solid rgba(255, 255, 255, 0.04);
        }

        /* ─── variant group ─── */
        .tg-variant {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
            width: 100%;
            max-width: 680px;
        }
        .tg-variant-label {
            color: rgba(255, 255, 255, 0.3);
            font-size: 11px;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            font-weight: 500;
            align-self: flex-start;
            margin-left: 8px;
        }

        /* ─── pill container ─── */
        .tg-pill {
            position: relative;
            width: 680px;
            max-width: 100%;
            height: 96px;
            border-radius: 48px;
            background: rgba(255, 255, 255, 0.08);
            backdrop-filter: blur(5px);
            -webkit-backdrop-filter: blur(5px);
            display: flex;
            padding: 4px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
            border: 1px solid rgba(255, 255, 255, 0.06);
        }

        /* ─── each button ─── */
        .tg-btn {
            flex: 1;
            border-radius: 44px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            cursor: pointer;
            transition: all 0.3s ease;
            text-decoration: none;
            padding: 0 20px;
            border: none;
            outline: none;
            background: transparent;
            font-family: inherit;
            user-select: none;
            position: relative;
            transition: none !important;
        }
        .tg-btn .tg-icon {
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: none !important;
        }
        .tg-btn .tg-label {
            font-size: 16px;
            font-weight: 600;
            letter-spacing: 0.01em;
            white-space: nowrap;
            transition: none !important;
        }
        /* короткий текст – по умолчанию скрыт */
        .tg-btn .tg-label-short {
            display: none;
            font-size: 16px;
            font-weight: 600;
            letter-spacing: 0.01em;
            white-space: nowrap;
        }

        /* ─── ACTIVE state ─── */
        .tg-btn.tg-active {
            background: #ffffff;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
        }
        .tg-btn.tg-active .tg-label,
        .tg-btn.tg-active .tg-label-short {
            color: #1c1c1c;
        }
        .tg-btn.tg-active .tg-icon svg path {
            stroke: #1c1c1c;
            fill: #1c1c1c;
        }
        .tg-btn.tg-active .tg-icon svg path[stroke] {
            stroke: #1c1c1c;
            fill: none;
        }
        .tg-btn.tg-active .tg-icon svg path[fill] {
            fill: #1c1c1c;
        }
        .tg-btn.tg-active .tg-icon svg path[stroke="#0F0F0F"] {
            stroke: #1c1c1c;
        }
        .tg-btn.tg-active .tg-icon svg path[fill="white"] {
            fill: #1c1c1c;
        }
        .tg-btn.tg-active .tg-icon svg path[stroke="white"] {
            stroke: #1c1c1c;
        }

        /* ─── INACTIVE state — absolutely no background ─── */
        .tg-btn.tg-inactive {
            background: transparent !important;
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
            box-shadow: none !important;
        }
        .tg-btn.tg-inactive .tg-label,
        .tg-btn.tg-inactive .tg-label-short {
            color: #ffffff;
        }
        .tg-btn.tg-inactive .tg-icon svg path {
            stroke: #ffffff;
            fill: #ffffff;
        }
        .tg-btn.tg-inactive .tg-icon svg path[stroke] {
            stroke: #ffffff;
            fill: none;
        }
        .tg-btn.tg-inactive .tg-icon svg path[fill] {
            fill: #ffffff;
        }
        .tg-btn.tg-inactive .tg-icon svg path[stroke="#0F0F0F"] {
            stroke: #ffffff;
        }
        .tg-btn.tg-inactive .tg-icon svg path[fill="white"] {
            fill: #ffffff;
        }
        .tg-btn.tg-inactive .tg-icon svg path[stroke="white"] {
            stroke: #ffffff;
        }

        /* ─── no hover effects for inactive ─── */
        .tg-btn.tg-inactive:hover {
            background: transparent !important;
            transform: none !important;
            box-shadow: none !important;
        }

        /* ─── active hover ─── */
        .tg-btn.tg-active:hover {
            transform: scale(1.01);
            box-shadow: 0 6px 28px rgba(0, 0, 0, 0.2);
        }
        .tg-btn:active {
            transform: scale(0.97);
        }

        /* ─── планшеты и мелкие экраны ─── */
        @media (max-width: 720px) {
            .tg-pill {
                height: 80px;
                border-radius: 40px;
                padding: 3px;
            }
            .tg-btn {
                border-radius: 38px;
                gap: 8px;
                padding: 0 12px;
            }
            .tg-btn .tg-label,
            .tg-btn .tg-label-short {
                font-size: 13px;
            }

            .tg-btn .tg-icon svg {
                width: 28px;
                height: 28px;
            }
            .tg-hebrew {
                font-size: 12px;
            }
            .tg-hebrew span {
                padding: 4px 14px;
            }
        }

        /* ─── МОБИЛЬНАЯ ВЕРСИЯ: короткие названия, без иконок ─── */
        @media (max-width: 480px) {
            .tg-pill {
                height: 56px;
                border-radius: 28px;
                padding: 2px;
            }
            .tg-btn {
                border-radius: 26px;
                gap: 0;
                padding: 0 12px;
            }
            /* принудительно скрываем иконку и полный текст */
            .tg-btn .tg-icon {
                display: none !important;
            }
            .tg-btn .tg-label {
                display: none !important;
            }
            /* показываем короткий текст */
            .tg-btn .tg-label-short {
                display: inline !important;
                font-size: 14px;
                font-weight: 600;
                letter-spacing: 0.01em;
                white-space: nowrap;
            }
            .tg-hebrew {
                font-size: 10px;
            }
            .tg-hebrew span {
                padding: 3px 10px;
            }
            .tg-variant-label {
                font-size: 9px;
                margin-left: 4px;
            }
            body {
                gap: 24px;
                padding: 16px 12px;
            }
            
        }

        @media (max-width: 400px) {
            .tg-pill {
                height: 48px;
                border-radius: 24px;
            }
            .tg-btn {
                border-radius: 22px;
                padding: 0 8px;
            }
            .tg-btn .tg-label-short {
                font-size: 12px;
            }
        }

    .header-two .header__container {
    display: flex;
    flex-direction: column;
    justify-content: center;   /* центрируем по вертикали */
    align-items: center;       /* центрируем по горизонтали */
    text-align: center;        /* выравнивание текста внутри */
    position: relative;        /* чтобы фон был под контентом */
    z-index: 2;                /* поверх фонового видео */
}

/* Убираем лишние отступы у .header__left */
.header-two .header__left {
    width: 100%;
    max-width: 800px;          /* ограничиваем ширину для читаемости */
    padding: 0 20px;          /* отступы по краям */
}

/* Выравниваем кнопки по центру */
.header-two .header__btns {
    justify-content: center;
}


.header-two .row {
    justify-content: center;
}
    .offer-section {
            display: flex;
            align-items: center;        /* вертикальное центрирование содержимого */
            justify-content: space-between; /* равномерное распределение (но мы зададим ширину 50%) */
            max-width: 100%;          /* ограничиваем ширину, чтобы не растягивалось на весь экран */
            margin: 0 auto;             /* центрируем секцию по горизонтали */
            
            border-radius: 16px;        /* скругление углов (опционально) */
        }

        /* Левая и правая части — каждая по 50% */
        .offer-section .left,
        .offer-section .right {
            flex: 0 0 50%;      /* не растягиваться, не сжиматься, базовый размер 50% */
            max-width: 50%;     /* чтобы не выходили за пределы */
            padding: 55px;      /* внутренние отступы для контента */
        }

        /* Контент левой части */
        .offer-section .left h2 {
            font-size: 2.5rem;
            margin-bottom: 16px;
            color: #1a1a2e;
        }

        .offer-section .left p {
            font-size: 1.1rem;
            line-height: 1.6;
            color: #444;
            margin-bottom: 24px;
        }


        /* Кнопка с зелёным фоном */
        .offer-section .green {
            background-color: #02B55F;
            color: #fff;
            border: none;
            padding: 14px 32px;
            border-radius: 40px;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            transition: background-color 0.2s ease;
            box-shadow: 0 4px 12px rgba(45, 106, 79, 0.3);
        }

        .offer-section .green:hover {
            background-color: #1b4d3a;
        }

        /* Изображение в правой части */
        .offer-section .right img {
            display: block;
            width: 100%;        /* заполняет всю ширину родителя */
            height: auto;       /* сохраняет пропорции */
            border-radius: 12px;
            object-fit: cover;
        }

        /* Адаптивность для мобильных устройств — блоки становятся друг под другом */
        @media (max-width: 768px) {
            .offer-section {
                flex-direction: column;
                align-items: stretch;
            }

            .offer-section .left,
            .offer-section .right {
                flex: 0 0 100%;
                max-width: 100%;
                padding: 16px;
            }

            .offer-section .right {
                order: -1;      /* при желании можно переместить изображение вверх */
            }
        }

        .benefits__item h3 {
           font-family: Inter;
font-weight: 600;
font-style: Semi Bold;
font-size: 18px;
leading-trim: NONE;
line-height: 24px;
letter-spacing: -1.25%;

        }
.benefits__item p {
            font-family: Inter;
font-weight: 400;
font-style: Regular;
font-size: 16px;
leading-trim: NONE;
line-height: 24px;
letter-spacing: -1%;

        }

.benefits__item {
    border-radius: 16px;
    background: #ffffff;
    padding: 24px;
    gap: 16px;
}

.offer-section {
    display: flex;
    align-items: center;
    max-width: 1280px;
    margin: 0 auto;
    border-radius: 0px;
}
.blue {
width: 164;
height: 56;
gap: 10px;
angle: 0 deg;
opacity: 1;
border-radius: 999px;
padding-top: 16px;
padding-right: 24px;
padding-bottom: 16px;
padding-left: 24px;
background: var(--Blue-Primary, #0040B9);

}
.white {
    width: 164;
height: 56;
gap: 10px;
angle: 0 deg;
opacity: 1;
border-radius: 999px;
padding-top: 16px;
padding-right: 24px;
padding-bottom: 16px;
padding-left: 24px;
color: #000;
background: var(--Text-Primary, #0F0F0F);

    background: var(--Blue-Surface-Secondary, #0040B90D);

}

.btn-new {
    font-size: 16px;
    font-weight: 600;
    display: flex;
    padding: 12px 32px 13px 32px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 99px;
    background: #fff;
    height: 56px;
    border: none;
    color: #000;
}

/* Обёртка нужна только для маски на мобильных */
    .scroll-wrapper {
      position: relative;
      width: 100%;
      max-width: 100%;
      overflow: hidden; /* обрезаем содержимое по краям */
      border-radius: 12px;
    }

    /* Контейнер с кнопками (по умолчанию – перенос, без скролла) */
    .icon {
      display: flex;
      flex-wrap: wrap;      /* на десктопе кнопки переносятся */
      gap: 12px;
      padding: 10px 0;
      align-items: center;
      /* Скролл отключён для десктопа */
      overflow: visible;
    }

    /* Кнопки */
    .icon button {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 10px 18px;
      border: none;
      border-radius: 40px;
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      white-space: nowrap;
      flex-shrink: 0;
      transition: 0.2s;
    }

    .blue {
      background: #1a5cff;
      color: white;
    }
    .blue svg rect {
      stroke: white;
    }

    .white {
      background: white;
      color: #0f0f0f;
      box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    }
    .white svg path,
    .white svg rect,
    .white svg circle {
      stroke: #0f0f0f;
    }

    /* ----- МОБИЛЬНАЯ ВЕРСИЯ (ширина < 768px) ----- */
    @media (max-width: 767px) {
      .icon {
        flex-wrap: nowrap;          /* кнопки в одну строку */
        overflow-x: auto;           /* включаем горизонтальный скролл */
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;      /* скрываем полосу в Firefox */
        -ms-overflow-style: none;   /* скрываем в IE/Edge */
        padding-right: 20px;        /* отступ, чтобы последняя кнопка не прилипала */
      }

      .icon::-webkit-scrollbar {
        display: none;              /* скрываем полосу в Chrome/Safari */
      }

      /* Градиентная маска, которая скрывает содержимое справа */
      .scroll-wrapper::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 60px;
        height: 100%;
        background: linear-gradient(to right, transparent, #f5f7fa 90%);
        pointer-events: none;       /* чтобы не мешать скроллу */
        z-index: 2;
      }

      /* Небольшая тень для эффекта "ухода" */
      .scroll-wrapper {
        box-shadow: inset -10px 0 15px -5px rgba(0,0,0,0.05);
      }
    }
        .steps-container {
           
            width: 100%;
            padding: 80px 10px;
        }

        /* Каждый шаг — гибкая колонка */
        .item {
            flex: 1 1 0;
            min-width: 0;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
        }

        /* Верхняя строка: номер + стрелка + заголовок */
        .step-header {
            display: flex;
            flex-direction: row;
            align-items: baseline;
            flex-wrap: wrap;
            gap: 4px 6px;
            margin-bottom: 8px;
            font-size: 16px;
            font-weight: 600;
            color: #0f0f0f;
            line-height: 1.3;
        }

        .step-number {
font-family: Inter;
font-weight: 600;
font-style: Semi Bold;
font-size: 40px;
leading-trim: NONE;
line-height: 48px;
letter-spacing: -3%;
margin-bottom: 20px;
        }

        .step-arrow {
            font-weight: 300;
            color: #555;
            flex-shrink: 0;
            margin: 0 2px;
        }

        .step-title {
            font-weight: 600;
            font-size: 16px;
            color: #0f0f0f;
            word-break: break-word;
            margin-bottom: 20px;
    margin-top: 20px;
        }

        /* Описание под шагом */
        .step-desc {
            font-size: 14px;
            font-weight: 400;
            color: #5a5a5a;
            line-height: 1.5;
            padding-right: 4px;
            word-break: break-word;
        }

        /* ── Адаптив ── */
        @media (max-width: 992px) {
            .step-header {
                font-size: 15px;
            }
            .step-number {
                font-size: 16px;
            }
            .step-title {
                font-size: 15px;
            }
            .step-desc {
                font-size: 13px;
            }
            .row2 {
                gap: 16px;
            }
              .container2 {
    width: 100%;
    padding: 0 30px;
}
        }

        @media (max-width: 768px) {
            .row2 {
                flex-direction: column;
                gap: 24px;
            }
            .item {
                border-bottom: 1px solid #f0f0f0;
                padding-bottom: 16px;
            }
            .item:last-child {
                border-bottom: none;
                padding-bottom: 0;
            }
            .step-header {
                font-size: 17px;
            }
            .step-number {
                font-size: 18px;
            }
            .step-title {
                font-size: 17px;
            }
            .step-desc {
                font-size: 14px;
                padding-right: 0;
            }
            .step-icon { display:none; }
              .container2 {
    width: 100%;
    padding: 0 30px;
}
.app {
    margin-bottom: 0;
    padding-top: 0px;
    border-radius: 32px 32px 0px 0px;
    background: linear-gradient(to bottom, #F2F4F7, #FFFFFF) !important;
}
        }

        @media (max-width: 480px) {
            .steps-container {
                padding: 20px 4px;
            }
            .step-header {
                font-size: 15px;
                gap: 3px 4px;
            }
            .step-number {
                font-size: 48px;
            }
            .step-title {
                font-size: 24px;
            }
            .step-desc {
                font-size: 14px;
                margin-bottom: 15px;
            }
              .container2 {
    width: 100%;
    padding: 0 30px;
}

        }
.help__right {
    width: 30%;
    margin-left: auto;
    align-items: center;
}

@media (max-width: 767px) {
  .steps-container .step svg {
    display: none;
  }
  .container2 {
    width: 100%;
    padding: 0 30px;
}
}

.inner-bg .container {
    max-width: 1160px;
}
.new .header__back {
    position: absolute;
    width: 100%;
    height: 100%;
    /* bottom: auto; */
    background-size: cover;
    background-position: center;
    /* width: 100vw; */
    /* height: 100vh; */
}

@media screen and (min-width: 981px) and (max-width: 1439px) {
    .new .header {
        height: 650px;
    }
}

.new .header {
    background: none;
    height: 650px;
    margin-bottom: 0;
}

.container2 {
    width: 100%;
    padding: 0 30px;
}
.help .btn-new {
    margin-left: 0;
}

.app {
    margin-bottom: 0;
    padding-top: 0px;
    border-radius: 32px 32px 0px 0px;
    background: linear-gradient(to bottom, #F2F4F7, #FFFFFF)!important;
}

.container {

    align-items: center;
    max-width: 1280px;
    margin: 0 auto;
    border-radius: 0px;
}

.benefits__row {

}

@media (max-width: 767px) {
    .offer-section {
        display: grid;
        grid-template-columns: 1fr;
        justify-items: center;     /* центрируем всё содержимое по горизонтали */
        
    }

    .green {
        justify-self: center;      /* центрируем кнопку отдельно */
    }
}

@media (max-width: 767px) {
    .offer-section {
        display: unset;
        grid-template-columns: 1fr;
        justify-items: center;
        
    }
}

/* Медиа-запрос для мобильных устройств (ширина до 768px) */
@media (max-width: 768px) {
    .offer-section {
        flex-direction: column; /* блоки идут вертикально */
    }

    .left {
        order: 2;          /* текст и кнопки — вторыми */
        flex: 1 1 auto;
    }

    .right {
        order: 1;          /* картинка — первой */
        flex: 1 1 auto;
        margin-bottom: 20px; /* небольшой отступ снизу */
    }

    /* Дополнительно: чтобы картинка не выходила за пределы экрана */
    .right img {
        max-width: 100%;
        height: auto;
        display: block;
    }
}

.new .header__btns span {
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    color: #fff;
     opacity: 1;
}