:root {
    --text: #e9edf7;
    --muted: #b8c0d9;
    --panel-1: #141c2e;
    --panel-2: #101828;
    --stroke: rgba(110, 161, 255, .35);
    --glow: rgba(142, 165, 255, .22);
    --blue: #6ea1ff;
    --red: #ff5b5b;
}

body {
    /* Глобус — самый верхний слой */
    background:
        /* далее ваши блики и фон */
        radial-gradient(60% 100% at 50% 0%, #0e1422 0%, var(--bg-0) 60%);

    background-repeat: no-repeat;
    /* для всех слоёв */
    background-attachment: scroll, scroll, scroll;
    /* при желании: fixed,scroll,scroll */

    color: var(--text-0);
    font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    letter-spacing: .1px;

    position: relative;
    isolation: isolate;
    /* отдельный контекст слоёв */
}

.t-blue {
    color: var(--blue)
}

.t-red {
    color: var(--red)
}

.mt {
    margin-top: 28px
}

/* секция-центровщик: именно она ставит «окно» по центру экрана */
.center-info {
    min-height: 100dvh;
    /* высота окна */
    display: grid;
    place-items: center;
    /* по центру и по вертикали, и по горизонтали */
    padding: clamp(16px, 2vw, 32px);
}

/* карточка/окно */
.center-info__card {
    position: relative;
    width: min(880px, 92vw);
    padding: 42px 46px 42px 46px;
    color: var(--text);
    background: linear-gradient(180deg, #121424, #161B38);
    border: 4px solid #101326;
    border-radius: 28px;

}

.center-info__card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    box-shadow: 0 0 60px 10px var(--glow);
    opacity: .35;
}

/* заголовки и списки */
.center-info__title {
    margin: 0 0 14px;
    font-weight: 800;
    letter-spacing: .2px;
    font-size: clamp(20px, 2.2vw, 28px);
}

.center-info__list {
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--muted);
}

.center-info__list li {
    position: relative;
    margin: .44rem 0;
    padding-left: 18px;
    line-height: 1.6;
}

.center-info__list li::before {
    content: "•";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--blue);
}

/* кнопка */
.center-info__actions {
    display: flex;
    justify-content: center;
    margin-top: 22px;
}

.center-info__primary {
    padding: .9rem 1.4rem;
    font-size: 18px;
    border-radius: 18px;
    border: 0;
    cursor: pointer;
    font-weight: 600;
    color: #0b1224;
    background: linear-gradient(180deg, #FFFFFF, #6F91F6);
    box-shadow: 0 8px 26px rgba(110, 161, 255, .35), 0 1px 0 rgba(255, 255, 255, .15) inset;
}

.center-info__primary:active {
    transform: translateY(1px)
}

/* крестик как в макете (просто декоративный) */
.center-info__close {
    position: absolute;
    top: 38px;
    right: 18px;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    cursor: pointer;
    border: 1px solid var(--stroke);
    color: #bcd0ff;
    background: linear-gradient(180deg, #1b2540, #141d33);
}

/* адаптив — слегка уменьшаем плотность на узких */

@media (max-width:660px) {
    .center-info__close {
        display: none;
    }
}

@media (max-width:600px) {
    .center-info__card {
        padding: 22px 18px 20px;
        border-radius: 22px;
    }

    .center-info__title {
        font-size: 20px;
    }

    .center-info__list li {
        font-size: 14.5px;
    }


}

/* строка заголовка с иконкой */
.center-info__headline {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    color: #bcd0ff;
}

.center-info__headline .center-info__title {
    margin: 0
}

/* синий блок-подсказка */
.center-info__note {
    margin: 12px 0 16px;
    padding: 14px 18px;
    border-radius: 14px;
    background: linear-gradient(90deg, rgba(30, 36, 72, 1), rgba(30, 36, 72, 0.1));
    color: #dbe6ff;
    box-shadow: 0 10px 26px rgba(20, 35, 70, .25) inset;
    font-size: clamp(14px, 1.7vw, 16px);
    border-left: 4px solid #3564F2;
}

/* небольшая плотность на узких */
@media (max-width:600px) {
    .center-info__note {
        padding: 12px 14px;
        border-radius: 12px;
    }
}


/* сетка из карточек */
.needs-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 22px;
    margin: 12px 0 18px;
}

/* карточка-пункт */
.needs-item {
    position: relative;
    padding: 18px 18px 18px 25px;
    border-radius: 16px;
    background: rgba(35, 48, 86, .35);
    border: 1px solid rgba(124, 154, 230, .25);
    box-shadow: inset 0 0 0 1px rgba(120, 160, 255, .05);
    min-height: 84px;
    display: flex;
    align-items: start;
    justify-content: start;
    gap: 1rem;
}

.needs-item__icon {
    margin-top: 0.25rem;
    width: 34px;
}

.needs-item p {
    margin: 0;
    color: var(--text-1, #d7def6);
    font-size: clamp(14px, 1.6vw, 16px);
}

/* кнопки снизу — используем твои базовые, подровняем отступы */
.center-info__actions {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.center-info__primary {
    min-width: 280px;
}

.center-info__ghost {
    min-width: 360px;
    padding: .9rem 1.4rem;
    border-radius: 18px;
    background: #B7BDE1;
    color: #0b1224;
    font-size: 18px;
    font-weight: 600;
    border: 0;
}



/* адаптив */
@media (max-width: 720px) {
    .needs-grid {
        grid-template-columns: 1fr;
    }

    .center-info__ghost,
    .center-info__primary {
        min-width: unset;
        flex: 1;
    }

    .center-info__actions {
        flex-direction: column;
        min-width: none;
    }

    .center-info__actions button {
        font-size: 14px;
        text-align: start;


    }

    .step-1 .center-info__actions button,
    .step-2 .center-info__actions button{
            text-align: center;

    }
}

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

.center-info__lead {
    margin: 6px 0 18px;
    color: var(--text-2, #cbd6ff);
    font-size: clamp(15px, 1.8vw, 18px);
}

/* список CTA-кнопок */
.cta-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 560px;
    margin: 0 auto 18px;
}

.cta-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 14px 22px;
    border-radius: 999px;
    font-weight: 600;
    font-size: clamp(16px, 2.1vw, 22px);
    line-height: 1.2;
    color: #eaf0ff;
    border: 1px solid rgba(130, 160, 255, .35);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, .04),
        0 6px 14px rgba(28, 46, 120, .25);
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
    text-decoration: none;
}

.cta-btn__icon {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    font-size: 18px;
}

/* варианты */
.cta-btn--tg {
    background: linear-gradient(180deg, #5a86ff 0%, #4f7cff 60%, #3f6cf1 100%);
}

.cta-btn--wa {
    background: linear-gradient(180deg, #5fe476 0%, #48d463 60%, #35bf50 100%);
    border-color: rgba(120, 230, 155, .35);
    color: #1d2740;

}

.cta-btn--mail {
    background: linear-gradient(180deg, #cfd6de 0%, #bcc6d0 70%, #b0bac7 100%);
    color: #1d2740;
    border-color: rgba(180, 190, 205, .55);
}

.cta-btn:hover {
    filter: saturate(1.06);
    transform: translateY(-1px);
}

.cta-btn:active {
    transform: translateY(0);
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .08);
}


/* адаптив под узкие */
@media (max-width: 520px) {
    .cta-btn {
        padding: 12px 16px;
    }

    .cta-btn__icon {
        width: 28px;
        height: 28px;
        font-size: 16px;
    }
}

.ready-work .center-info__note{
    max-width: 560px;
    margin: 0 auto;
}