/*main_promo.css*/
/*
 * Адаптив только для:
 * 1) шапки сайта;
 * 2) первого экрана главной страницы (.main-promo):
 *    заголовок, текст, изображение с плашками и кнопка «Рассчитать проект».
 *
 * Остальные секции сайта этот файл не изменяет.
 */

.main-promo .main-promo-left,
.main-promo .main-promo-right {
    min-width: 0;
}
/* =========================================================
   ПЕРВЫЙ ЭКРАН / MAIN PROMO
   ========================================================= */

.main-promo .main-promo-content {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 488px 628px;
  column-gap: 24px;
  width: 100%;
  max-width: 1143px;
  height: 418px;
  margin: 80px auto 0;
  align-items: stretch;
}

.main-promo .main-promo-left {
  box-sizing: border-box;
  width: 488px;
  height: 311px;
  align-self: center;
}

.main-promo .promo-breadcrumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;

    margin: 0 0 22px;

    font-family: 'Manrope', Arial, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
}

.main-promo .promo-breadcrumbs a,
.main-promo .promo-breadcrumbs__current {
    color: #B9C0D9;
    text-decoration: none;
}

.main-promo .promo-breadcrumbs a:hover {
    color: #ffffff;
}

.main-promo .promo-breadcrumbs__separator {
    color: #6f768f;
}

.main-promo .main-promo-right {
  width: 628px;
  height: 418px;
}

.main-promo .promo-title-1.font-size-48 {
  font-size: 48px!important;
}

.main-promo .promo-title-1 {
  width: 488px;
  max-width: 488px;
  margin: 0 0 18px;
  font-family: 'Manrope', Arial, sans-serif;
  font-size: 60px;
  font-weight: 700;
  line-height: 60px;
  color: #F2F4FF;
}

.main-promo .promo-text-1 {
  width: 464px;
  max-width: 464px;
  margin: 0;
  font-family: 'Manrope', Arial, sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 25px;
  color: #B9C0D9;
}

.main-promo .btn-green-full {
  box-sizing: border-box;
  width: 232px;
  max-width: 232px;
  height: 54px;
  min-height: 54px;
  margin-top: 44px;
  padding: 16px 40px;
}

/* 3. Правая колонка */

.main-promo .inner-page-promo__image {
  width: 628px;
  height: 418px;
}

.main-promo .promo-image-wrapper {
  position: relative;
  display: block;
  width: 628px;
  height: 418px;
}

/* 5. Ноутбук */

.main-promo .laptop-image {
  position: relative;
  z-index: 1;
  display: block;
  width: 628px;
  max-width: none;
  height: 418px;
  object-fit: contain;
}

/* 6. Плашки */

.main-promo .main-blocks {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 628px;
  height: 418px;
  margin: 0;
  padding: 0;
  pointer-events: none;
}

.main-promo .main-block {
  box-sizing: border-box;
  position: absolute;
  display: flex;
  width: 232px;
  height: 79px;
  padding: 10px 20px;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  border-radius: 20px;
  background: rgba(0, 0, 0, .3);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  font-family: 'Manrope', Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #fff;
}
/**/
.main-promo .main-block {
    pointer-events: auto;
    cursor: default;
    will-change: transform;
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

    .main-promo .main-block {
        animation:
            promo-block-float
            3.2s
            ease-in-out
            infinite;

        animation-delay:
            var(--promo-cloud-delay, 0s);
    }

    .main-promo .main-block img {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  object-fit: contain;
}

/* 7. Позиции плашек */

.main-promo .main-block-1 {
  top: 14px;
  left: 56px;
  width: 232px;
  height: 79px;
  transform: none;
}

.main-promo .main-block-2 {
  top: 330px;
  left: 57.5px;
  width: 233px;
  height: 79px;
  transform: none;
}

.main-promo .main-block-3 {
  top: 243px;
  left: 376px;
  width: 232px;
  height: 79px;
  transform: none;
}

/* =========================================================
   КОМПАКТНЫЙ DESKTOP: 1024–1278 px
   ========================================================= */
@media (min-width: 1024px) and (max-width: 1278px) {
    /* ---------- Первый экран ---------- */
    .main-promo {
        position: relative;
        overflow: visible;
    }

    .main-promo .main-promo-right,
    .main-promo .inner-page-promo__image,
    .main-promo .promo-image-wrapper {
        overflow: visible;
    }

    .main-promo .promo-glow-ellipse {
        --ellipse-width: 115%;
        --ellipse-height: 145%;
        --ellipse-left: 50%;
        --ellipse-top: 52%;
        --ellipse-radius: 50%;
        --ellipse-blur: 135px;
        --ellipse-opacity: 1;
        left: 55px;
    }

    .main-promo > .inner-width {
        width: auto;
        max-width: none;
        margin-right: clamp(
            42px,
            6vw,
            76px
        );
        margin-left: clamp(
            42px,
            6vw,
            76px
        );
    }

    .main-promo .main-promo__content-wrapper,
    .main-promo .main-promo__content-height-fix {
        min-height: 0;
        height: auto;
    }

    .main-promo .main-promo-content {
        display: grid;
        grid-template-columns: minmax(0, 1.05fr) minmax(400px, .95fr);
        gap: clamp(
            28px,
            4vw,
            56px
        );
        align-items: center;
        margin: 0; /*clamp(
            48px,
            5vw,
            68px
        ) 0 46px;*/
    }

    .main-promo .main-promo-left,
    .main-promo .main-promo-right {
        width: auto;
        margin: 0;
    }

    .main-promo .promo-title-1 {
        width: 100%;
        max-width: 650px;
        margin: 0 0 22px;
        font-size: clamp(
            52px,
            5vw,
            60px
        );
        line-height: 1;
        letter-spacing: -1px;
    }

    .main-promo .promo-text-1 {
        width: 100%;
        max-width: 520px;
        font-size: 18px;
        line-height: 1.4;
    }

    .main-promo .btn-green-full {
        margin-top: 36px;
    }

    /* ---------- Изображение и плашки ---------- */
    .main-promo .inner-page-promo__image {
        width: 100%;
    }

    .main-promo .promo-image-wrapper {
        position: relative;
        display: block;
        width: min(100%, 530px);
        aspect-ratio: 628 / 418;
        margin: 0 auto;
    }

    .main-promo .promo-image-wrapper .laptop-image {
        position: absolute;
        z-index: 1;
        inset: 0;
        width: 100%;
        max-width: none;
        height: 100%;
        object-fit: contain;
    }

    .main-promo .promo-image-wrapper .main-blocks {
        position: absolute;
        z-index: 2;
        inset: 0;
        display: block;
        width: 100%;
        height: 100%;
        padding: 0;
    }

    .main-promo .promo-image-wrapper .main-block {
        box-sizing: border-box;
        min-height: 72px;
        height: auto;
        margin: 0;
        padding: 10px 16px;
        gap: 10px;
        border-radius: 22px;
        font-size: clamp(
            15px,
            1.45vw,
            18px
        );
        line-height: 1.3;
        justify-content: flex-start;
        transform: none;
    }

    .main-promo .promo-image-wrapper .main-block img {
        flex: 0 0 auto;
        width: clamp(
            38px,
            4vw,
            46px
        );
        height: clamp(
            38px,
            4vw,
            46px
        );
    }

    .main-promo .promo-image-wrapper .main-block-1 {
        top: 10%;
        left: 0;
        width: 56%;
    }

    .main-promo .promo-image-wrapper .main-block-2 {
        top: auto;
        bottom: 10%;
        left: 0;
        width: 58%;
    }

    .main-promo .promo-image-wrapper .main-block-3 {
        top: 48%;
        right: 0;
        left: auto;
        width: 58%;
    }
}

/* =========================================================
   ПЛАНШЕТ: 768–1023 px
   ========================================================= */
@media (min-width: 768px) and (max-width: 1023px) {
    /* ---------- Первый экран ---------- */
    /*
     * На соседних диапазонах свечение не зажимается границами
     * правой колонки. На планшете делаем точно так же.
     */
    .main-promo {
        position: relative;
        overflow: visible;
    }

    .main-promo .main-promo-right,
    .main-promo .inner-page-promo__image,
    .main-promo .promo-image-wrapper {
        overflow: visible;
    }

    .main-promo .promo-glow-ellipse {
        --ellipse-width: 125%;
        --ellipse-height: 140%;
        --ellipse-left: 50%;
        --ellipse-top: 52%;
        --ellipse-radius: 50%;
        --ellipse-blur: 110px;
        --ellipse-opacity: 1;
        left: -20px;
    }

    .main-promo > .inner-width {
        width: auto;
        max-width: none;
        margin-right: clamp(
            28px,
            4.5vw,
            44px
        );
        margin-left: clamp(
            28px,
            4.5vw,
            44px
        );
    }

    .main-promo .main-promo__content-wrapper,
    .main-promo .main-promo__content-height-fix {
        min-height: 0;
        height: auto;
    }

    .main-promo .main-promo-content {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(300px, .92fr);
        gap: clamp(
            18px,
            3vw,
            32px
        );
        align-items: center;
        margin: 42px 0 42px;
    }

    .main-promo .main-promo-left,
    .main-promo .main-promo-right {
        width: auto;
        margin: 0;
    }

    .main-promo .promo-title-1 {
        width: 100%;
        max-width: 500px;
        margin: 0 0 18px;
        font-size: clamp(
            40px,
            5.2vw,
            50px
        );
        line-height: 1.02;
        letter-spacing: -.8px;
    }

    .main-promo .promo-text-1 {
        width: 100%;
        max-width: 440px;
        font-size: clamp(
            16px,
            2vw,
            18px
        );
        line-height: 1.4;
    }

    .main-promo .btn-green-full {
        width: min(100%, 260px);
        margin-top: 30px;
    }

    /* ---------- Изображение и плашки ---------- */
    .main-promo .inner-page-promo__image {
        width: 100%;
    }

    .main-promo .promo-image-wrapper {
    position: relative;
    display: block;

    /* Картинка немного выходит за ширину правой колонки */
    width: min(112%, 480px);
    aspect-ratio: 628 / 418;

    /* Незначительно сдвигаем к центру страницы */
    margin-right: auto;
    margin-left: -5%;
}

    .main-promo .promo-image-wrapper .laptop-image {
        position: absolute;
        z-index: 1;
        inset: 0;
        width: 100%;
        max-width: none;
        height: 100%;
        object-fit: contain;
    }

    .main-promo .promo-image-wrapper .main-blocks {
        position: absolute;
        z-index: 2;
        inset: 0;
        display: block;
        width: 100%;
        height: 100%;
        padding: 0;
    }

    .main-promo .promo-image-wrapper .main-block {
        box-sizing: border-box;
        min-height: 62px;
        height: auto;
        margin: 0;
        padding: 8px 12px;
        gap: 8px;
        border-radius: 19px;
        font-size: clamp(
            13px,
            1.8vw,
            16px
        );
        line-height: 1.3;
        justify-content: flex-start;
        transform: none;
    }

    .main-promo .promo-image-wrapper .main-block img {
        flex: 0 0 auto;
        width: clamp(
            32px,
            4.4vw,
            40px
        );
        height: clamp(
            32px,
            4.4vw,
            40px
        );
    }

    .main-promo .promo-image-wrapper .main-block-1 {
        top: -11%;
        left: 0;
        width: 45%;
    }

    .main-promo .promo-image-wrapper .main-block-2 {
        top: auto;
        bottom: 7%;
        left: 0;
        width: 52%;
    }

    .main-promo .promo-image-wrapper .main-block-3 {
        top: 30%;
        right: 0;
        left: auto;
        width: 52%;
    }
}

/* =========================================================
   МОБИЛЬНЫЙ: до 767 px
   ========================================================= */
@media (max-width: 767px) {
    /* ---------- Первый экран ---------- */
    .header + .main-promo {
        margin-top: 0px;
        padding-top: 90px;
    }

    .main-promo {
        position: relative;
        overflow: hidden;
    }

    .main-promo .main-promo-bg {
        position: absolute;
        z-index: 0;
        inset: 0;
        background:
            radial-gradient(
                ellipse 82% 54% at 53% 29%,
                rgba(203, 167, 250, .50) 0%,
                rgba(139, 106, 176, .38) 34%,
                rgba(72, 55, 102, .20) 58%,
                rgba(14, 12, 32, 0) 80%
            ),
            linear-gradient(
                180deg,
                #29213f 0%,
                #1b1732 58%,
                #0e0c20 100%
            );
        pointer-events: none;
    }

    .main-promo > .inner-width {
        position: relative;
        z-index: 1;
        width: auto;
        max-width: none;
        margin-right: clamp(
            16px,
            4.75vw,
            22px
        );
        margin-left: clamp(
            16px,
            4.75vw,
            22px
        );
    }

    .main-promo .main-promo__content-wrapper,
    .main-promo .main-promo__content-height-fix {
        min-height: 0;
        height: auto;
    }

    .main-promo .main-promo-content {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 48px;
        margin: 40px 0 28px;
        min-height: 600px;
    }

    .main-promo .main-promo-right {
        order: 1;
        width: 100%;
        max-height: 280px;
    }

    .main-promo .main-promo-left {
        order: 2;
        width: 100%;
        margin: 0;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    /* ---------- Изображение и плашки ---------- */
    .main-promo .inner-page-promo__image {
        width: 100%;
    }

    .main-promo .promo-image-wrapper {
        position: relative;
        display: block;
        width: min(100%, 410px);
        height: auto;
        aspect-ratio: 410 / 285;
        margin: 0 auto;
    }

    .main-promo .promo-image-wrapper .laptop-image {
        position: absolute;
        z-index: 1;
        top: 0;
        left: 50%;
        width: 130%;
        max-width: none;
        height: auto;
        transform: translateX(-50%);
    }

    .main-promo .promo-glow-ellipse {
        --ellipse-width: 125%;
        --ellipse-height: 125%;
        --ellipse-left: 55%;
        --ellipse-top: 56%;
        --ellipse-radius: 50%;
        --ellipse-blur: 76px;
        --ellipse-opacity: 1;
    }

    .main-promo .promo-image-wrapper .main-blocks {
        position: absolute;
        z-index: 2;
        inset: 0;
        display: block;
        width: 100%;
        height: 100%;
        padding: 0;
    }

    .main-promo .promo-image-wrapper .main-block {
        box-sizing: border-box;
        min-height: 64px;
        height: auto;
        margin: 0;
        padding: 9px 15px;
        gap: 9px;
        border: 1px solid rgba(255, 255, 255, .14);
        border-radius: 20px;
        font-family: 'Manrope', 'Rubik', Arial, sans-serif;
        font-size: clamp(
            14px,
            3.45vw,
            16px
        );
        line-height: 1.35;
        text-align: left;
        justify-content: flex-start;
        color: #fff;
        background: rgba(29, 26, 52, .62);
        box-shadow:
            0 7px 22px rgba(5, 3, 18, .20),
            inset 1px 1px 7px rgba(255, 255, 255, .08);
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
        transform: none;
    }

    .main-promo .promo-image-wrapper .main-block img {
        flex-shrink: 0;
        width: clamp(
            34px,
            9vw,
            40px
        );
        height: clamp(
            34px,
            9vw,
            40px
        );
    }

    .main-promo .promo-image-wrapper .main-block-1 {
        top: 2%;
        left: 7%;
        width: 50%;
    }

    .main-promo .promo-image-wrapper .main-block-2 {
        top: 88%;
        left: 7%;
        width: 60%;
    }

    .main-promo .promo-image-wrapper .main-block-3 {
        top: 42%;
        right: 8px;
        left: auto;
        width: 58%;
    }

    /* ---------- Заголовок, текст и кнопка ---------- */
    .main-promo .promo-title-1 {
        width: 100%;
        max-width: 430px;
        margin: 0 auto 18px;
        font-family: 'Manrope', 'Rubik', Arial, sans-serif;
        font-size: clamp(
            34px,
            9vw,
            40px
        );
        font-weight: 700;
        line-height: 1.08;
        letter-spacing: -.7px;
        text-align: center;
        color: #F2F4FF;
    }

    .main-promo .promo-text-1 {
        width: 100%;
        max-width: 315px;
        margin: 0 auto;
        font-family: 'Manrope', 'Rubik', Arial, sans-serif;
        font-size: clamp(
            15px,
            3.7vw,
            17px
        );
        font-weight: 400;
        line-height: 1.35;
        text-align: center;
        color: #B9C0D9;
    }

    .main-promo .btn-green-full {
        display: flex;
        width: 100%;
        height: 64px;
        margin-top: 24px;
        border-radius: 14px;
        line-height: normal;
        align-items: center;
        padding: 16px 10px;
    }

    .main-promo .btn-green-full a,
    .main-promo .btn-green-full button,
    .main-promo .btn-green-full input[type='button'],
    .main-promo .btn-green-full input[type='submit'] {
        box-sizing: border-box;
        width: 100%;
        height: 100%;
        min-height: 64px;
        padding: 0 18px;
        border: 0;
        border-radius: inherit;
        font-family: 'Manrope', 'Rubik', Arial, sans-serif;
        font-size: 18px;
        font-weight: 700;
        line-height: 1.2;
        color: #000;
        background: transparent;
    }
}

/* =========================================================
   ОЧЕНЬ УЗКИЕ ЭКРАНЫ: до 374 px
   ========================================================= */
@media (max-width: 374px) {
    .main-promo .main-promo-content {
        margin-top: 36px;
    }

    .main-promo .main-promo-right {
        margin-bottom: 22px;
    }

    .main-promo .promo-image-wrapper {
        width: min(100%, 350px);
    }

    .main-promo .promo-image-wrapper .main-block {
        min-height: 56px;
        padding: 7px 11px;
        border-radius: 17px;
        font-size: 13px;
    }

    .main-promo .promo-title-1 {
        font-size: 32px;
    }

    .main-promo .btn-green-full,
    .main-promo .btn-green-full a,
    .main-promo .btn-green-full button,
    .main-promo .btn-green-full input[type='button'],
    .main-promo .btn-green-full input[type='submit'] {
        min-height: 58px;
        height: 58px;
    }
}

@media (min-width: 1400px) /*and (max-width: 1920px)*/ {
    .main-promo > .inner-width { 
        max-width: clamp(1143px, calc(243px + 62.5vw), 1443px); 
    }

    .main-promo .main-promo-content {
        grid-template-columns: clamp(488px, calc(103.748px + 26.684vw), 616.084px) clamp(628px, calc(133.512px + 34.339vw), 792.829px);
        column-gap: clamp(24px, calc(5.102px + 1.312vw), 30.299px);
        max-width: clamp(1143px, calc(243px + 62.5vw), 1443px);
        height: clamp(418px, calc(88.866px + 22.857vw), 527.711px); margin-top: clamp(80px, calc(17.008px + 4.374vw), 100.997px);
    }
    .main-promo .main-promo-left { 
        width: clamp(488px, calc(103.748px + 26.684vw), 616.084px);
        height: clamp(311px, calc(66.118px + 17.006vw), 392.627px); 
    }
    .main-promo .promo-title-1 { 
        width: clamp(488px, calc(103.748px + 26.684vw), 616.084px);
        max-width: clamp(488px, calc(103.748px + 26.684vw), 616.084px); 
        margin-bottom: clamp(18px, calc(3.827px + 0.984vw), 22.724px); 
        font-size: clamp(60px, calc(12.756px + 3.281vw), 75.748px); 
        line-height: clamp(60px, calc(12.756px + 3.281vw), 75.748px); 
    }
    .main-promo .promo-text-1 { 
        width: clamp(464px, calc(98.646px + 25.372vw), 585.785px);
        max-width: clamp(464px, calc(98.646px + 25.372vw), 585.785px); 
        font-size: clamp(18px, calc(3.827px + 0.984vw), 22.724px); 
        line-height: clamp(25px, calc(5.315px + 1.367vw), 31.562px); 
    }
    .main-promo .btn-green-full { 
        width: clamp(232px, calc(49.323px + 12.686vw), 292.892px);
        max-width: clamp(232px, calc(49.323px + 12.686vw), 292.892px); 
        height: clamp(54px, calc(11.48px + 2.953vw), 68.173px); 
        min-height: clamp(54px, calc(11.48px + 2.953vw), 68.173px);
        margin-top: clamp(44px, calc(9.354px + 2.406vw), 55.549px); 
        padding: clamp(16px, calc(3.402px + 0.875vw), 20.199px) clamp(40px, calc(8.504px + 2.187vw), 50.499px); 
        border-radius: clamp(10px, calc(2.126px + 0.547vw), 12.625px); 
    }
    .main-promo .btn-green-full a { 
        font-size: clamp(16px, calc(3.402px + 0.875vw), 20.199px); 
    }
    .main-promo .main-promo-right,
    .main-promo .inner-page-promo__image,
    .main-promo .promo-image-wrapper,
    .main-promo .laptop-image,
    .main-promo .main-blocks { 
        width: clamp(628px, calc(133.512px + 34.339vw), 792.829px); 
        height: clamp(418px, calc(88.866px + 22.857vw), 527.711px); 
    }
    .main-promo .promo-glow-ellipse { 
        left: clamp(176px, calc(37.417px + 9.624vw), 222.194px); 
        top: clamp(110px, calc(23.386px + 6.015vw), 138.871px); 
        width: clamp(395px, calc(83.976px + 21.599vw), 498.675px); 
        height: clamp(265px, calc(56.339px + 14.49vw), 334.554px); 
        border-radius: clamp(180px, calc(38.268px + 9.843vw), 227.244px); 
        filter: blur(clamp(118.8px, calc(25.257px + 6.496vw), 149.981px));
    }
    .main-promo .main-block {
        width: clamp(232px, calc(49.323px + 12.686vw), 292.892px); 
        height: clamp(79px, calc(16.795px + 4.32vw), 99.735px); 
        padding: clamp(10px, calc(2.126px + 0.547vw), 12.625px) clamp(20px, calc(4.252px + 1.094vw), 25.249px); 
        gap: clamp(10px, calc(2.126px + 0.547vw), 12.625px); 
        border-radius: clamp(20px, calc(4.252px + 1.094vw), 25.249px); 
        font-size: clamp(16px, calc(3.402px + 0.875vw), 20.199px); 
    }
    .main-promo .main-block img { 
        width: clamp(40px, calc(8.504px + 2.187vw), 50.499px); 
        height: clamp(40px, calc(8.504px + 2.187vw), 50.499px); 
        flex-basis: clamp(40px, calc(8.504px + 2.187vw), 50.499px); 
    }
    .main-promo .main-block-1 { 
        top: clamp(14px, calc(2.976px + 0.766vw), 17.675px); 
        left: clamp(56px, calc(11.906px + 3.062vw), 70.698px); 
        width: clamp(232px, calc(49.323px + 12.686vw), 292.892px); 
        height: clamp(79px, calc(16.795px + 4.32vw), 99.735px); 
    }
    .main-promo .main-block-2 { 
        top: clamp(330px, calc(70.157px + 18.045vw), 416.614px); 
        left: clamp(57.5px, calc(12.224px + 3.144vw), 72.592px); 
        width: clamp(233px, calc(49.535px + 12.741vw), 294.155px); 
        height: clamp(79px, calc(16.795px + 4.32vw), 99.735px); 
    }
    .main-promo .main-block-3 { 
        top: clamp(243px, calc(51.661px + 13.287vw), 306.78px); 
        left: clamp(376px, calc(79.937px + 20.56vw), 474.688px);
        width: clamp(232px, calc(49.323px + 12.686vw), 292.892px); 
        height: clamp(79px, calc(16.795px + 4.32vw), 99.735px); 
    }
}

@media (min-width: 1921px) and (min-device-width: 2200px) {
    /* =========================================================
       Первый экран / MAIN PROMO
       Большой desktop
       ========================================================= */

    /* ---------- Общая сетка ---------- */

    .main-promo > .inner-width {
        width: 100%;
        max-width: clamp(
            1443px,
            calc(-292.890411px + 90.410959vw),
            2103px
        );

        margin-right: auto;
        margin-left: auto;
    }

    .main-promo .main-promo-content {
        display: grid;

        grid-template-columns:
            clamp(
                616.084px,
                calc(-125.394411px + 38.618630vw),
                898px
            )
            clamp(
                792.829px,
                calc(-162.359630px + 49.749452vw),
                1156px
            );

        column-gap: clamp(
            30.299px,
            calc(-5.737329px + 1.876849vw),
            44px
        );

        width: 100%;
        max-width: clamp(
            1443px,
            calc(-292.890411px + 90.410959vw),
            2103px
        );

        height: clamp(
            527.711px,
            calc(-106.911849px + 33.053274vw),
            769px
        );

        margin:
            clamp(
                100.997px,
                calc(-19.997192px + 6.301781vw),
                147px
            )
            auto
            0;

        align-items: stretch;
    }

    /* ---------- Левая колонка ---------- */

    .main-promo .main-promo-left {
        width: clamp(
            616.084px,
            calc(-125.394411px + 38.618630vw),
            898px
        );

        height: clamp(
            392.627px,
            calc(-79.148562px + 24.571644vw),
            572px
        );

        align-self: center;
    }   

    /* ---------- Заголовок ---------- */

    .main-promo .promo-title-1 {
        width: clamp(
            616.084px,
            calc(-125.394411px + 38.618630vw),
            898px
        );
        max-width: clamp(
            616.084px,
            calc(-125.394411px + 38.618630vw),
            898px
        );

        margin-bottom: clamp(
            22.724px,
            calc(-4.302849px + 1.407671vw),
            33px
        );

        font-size: clamp(
            75.748px,
            calc(-14.339123px + 4.692055vw),
            110px
        );

        line-height: clamp(
            75.748px,
            calc(-14.339123px + 4.692055vw),
            110px
        );

        letter-spacing: normal;
    }

    /* ---------- Текст ---------- */

    .main-promo .promo-text-1 {
        width: clamp(
            585.785px,
            calc(-119.657055px + 36.741781vw),
            854px
        );
        max-width: clamp(
            585.785px,
            calc(-119.657055px + 36.741781vw),
            854px
        );

        margin: 0;

        font-size: clamp(
            22.724px,
            calc(-4.302849px + 1.407671vw),
            33px
        );

        line-height: clamp(
            31.562px,
            calc(-6.412521px + 1.977840vw),
            46px
        );
    }

    /* ---------- Кнопка ---------- */

    .main-promo .btn-green-full {
        width: clamp(
            292.892px,
            calc(-59.830411px + 18.370959vw),
            427px
        );
        max-width: clamp(
            292.892px,
            calc(-59.830411px + 18.370959vw),
            427px
        );

        height: clamp(
            68.173px,
            calc(-12.906233px + 4.222877vw),
            99px
        );

        min-height: clamp(
            68.173px,
            calc(-12.906233px + 4.222877vw),
            99px
        );

        margin-top: clamp(
            55.549px,
            calc(-11.390616px + 3.486438vw),
            81px
        );

        padding:
            clamp(
                20.199px,
                calc(-2.948836px + 1.205616vw),
                29px
            )
            clamp(
                50.499px,
                calc(-11.311849px + 3.219315vw),
                74px
            );

        border-radius: clamp(
            12.625px,
            calc(-1.511986px + 0.736301vw),
            18px
        );
    }

    .main-promo .btn-green-full a {
        font-size: clamp(
            20.199px,
            calc(-2.948836px + 1.205616vw),
            29px
        );
    }

    /* ---------- Правая колонка ---------- */

    .main-promo .main-promo-right,
    .main-promo .inner-page-promo__image,
    .main-promo .promo-image-wrapper,
    .main-promo .laptop-image,
    .main-promo .main-blocks {
        width: clamp(
            792.829px,
            calc(-162.359630px + 49.749452vw),
            1156px
        );

        height: clamp(
            527.711px,
            calc(-106.911849px + 33.053274vw),
            769px
        );
    }

    .main-promo .promo-image-wrapper {
        position: relative;
    }

    .main-promo .laptop-image {
        max-width: none;
        object-fit: contain;
    }

    /* ---------- Свечение ---------- */

    .main-promo .promo-glow-ellipse {
        left: clamp(
            222.194px,
            calc(-45.569726px + 13.946027vw),
            324px
        );

        top: clamp(
            138.871px,
            calc(-27.166918px + 8.647808vw),
            202px
        );

        width: clamp(
            498.675px,
            calc(-101.851027px + 31.277397vw),
            727px
        );

        height: clamp(
            334.554px,
            calc(-69.030000px + 21.020000vw),
            488px
        );

        border-radius: clamp(
            227.244px,
            calc(-45.648493px + 14.213151vw),
            331px
        );

        filter: blur(
            clamp(
                149.981px,
                calc(-31.548425px + 9.454658vw),
                219px
            )
        );
    }

    /* ---------- Плашки ---------- */

    .main-promo .main-block {
        width: clamp(
            292.892px,
            calc(-59.830411px + 18.370959vw),
            427px
        );

        height: clamp(
            99.735px,
            calc(-19.318151px + 6.200685vw),
            145px
        );

        padding:
            clamp(
                12.625px,
                calc(-1.511986px + 0.736301vw),
                18px
            )
            clamp(
                25.249px,
                calc(-5.657740px + 1.609726vw),
                37px
            );

        gap: clamp(
            12.625px,
            calc(-1.511986px + 0.736301vw),
            18px
        );

        border-radius: clamp(
            25.249px,
            calc(-5.657740px + 1.609726vw),
            37px
        );

        font-size: clamp(
            20.199px,
            calc(-2.948836px + 1.205616vw),
            29px
        );
    }

    .main-promo .main-block img {
        flex:
            0 0
            clamp(
                50.499px,
                calc(-11.311849px + 3.219315vw),
                74px
            );

        width: clamp(
            50.499px,
            calc(-11.311849px + 3.219315vw),
            74px
        );

        height: clamp(
            50.499px,
            calc(-11.311849px + 3.219315vw),
            74px
        );
    }

    /* ---------- Позиции плашек ---------- */

    .main-promo .main-block-1 {
        top: clamp(
            17.675px,
            calc(-4.220890px + 1.140411vw),
            26px
        );

        left: clamp(
            70.698px,
            calc(-14.260685px + 4.424932vw),
            103px
        );

        width: clamp(
            292.892px,
            calc(-59.830411px + 18.370959vw),
            427px
        );

        height: clamp(
            99.735px,
            calc(-19.318151px + 6.200685vw),
            145px
        );
    }

    .main-promo .main-block-2 {
        top: clamp(
            416.614px,
            calc(-84.127260px + 26.080274vw),
            607px
        );

        left: clamp(
            72.592px,
            calc(-15.275616px + 4.576438vw),
            106px
        );

        width: clamp(
            294.155px,
            calc(-60.505822px + 18.471918vw),
            429px
        );

        height: clamp(
            99.735px,
            calc(-19.318151px + 6.200685vw),
            145px
        );
    }

    .main-promo .main-block-3 {
        top: clamp(
            306.78px,
            calc(-62.017808px + 19.208219vw),
            447px
        );

        left: clamp(
            474.688px,
            calc(-96.872329px + 29.768767vw),
            692px
        );

        width: clamp(292.892px, calc(-59.830411px + 18.370959vw),
            427px
        );

        height: clamp(99.735px, calc(-19.318151px + 6.200685vw), 145px);
    }
}
.promo-info{
  margin-bottom: 50px;
}
@media (max-width: 767px) {
  .promo-info{
    margin-bottom: 20px;
  }
}
.promo-title{
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 700;
  font-size: 48px;
  line-height: 57px;
  background: linear-gradient(90deg, #0B72B9 0%, #FFFFFF 100%), #FFFFFF;
  background-clip: text;
  color: transparent;
}
.promo-text{
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 400;
  font-size: 20px;
  line-height: 24px;
  color: #FFFFFF;
}

.promo-dop-info{
  width: 70%;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid #FFFFFF;
  border-radius: 30px;
  padding: 5px 20px;
  color: #FFFFFF;
  display: flex;
  justify-content: space-evenly;
  margin-bottom: 60px;
}
@media (max-width: 767px) {
    .promo-dop-info{
      font-size: 0.9rem;
    }
}
.inner-page-promo__info{
  width: 100%;
}
/* 4. Свет */

.promo-glow-ellipse {
  position: absolute;
  z-index: 0;
  left: 176px;
  top: 110px;
  width: 395px;
  height: 265px;
  border-radius: 180px;
  background: #CBA7FA;
  filter: blur(118.8px);
  pointer-events: none;
  user-select: none;
}
@keyframes promo-block-float {

    0%,
    100% {
        translate: 0 -4px;
    }

    50% {
        translate: 0 -11px;
    }
}