/**
 * Дополнительные стили для лендинга ViSearch
 * Адаптируют карточки блога под контент лендинга
 */

p {
    margin-top: 0;
}

section {
    padding: 0;
}

.section{
    padding:80px 0
}

/* ─── Hero ─── */
.hero {
    position:relative;
    color:#fff;
    padding: 140px 0 100px;
    overflow:hidden
}

.service-header {
    position: relative;
    padding-bottom: 0;
    max-height: 1120px;
}

.bg-hero {
    position: absolute;
}

.hero-section {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;

}

.hero-content {
    position: relative;
    display: flex;
    flex-direction: column;
    z-index: 2;
    margin: 0 auto;
    text-align: center;
    gap: 20px;
    max-width: 752px;
}

.hero-title {
    font-size: 60px;
    font-weight: 700;
    line-height: 140%;
    margin-top: 190px;
    color: #F5F5FA;
    margin-bottom: 0;
    opacity: 0;
    animation: fadeIn 0.8s ease 0.2s forwards;
}

.mobile_br {
    display: none;
}

.hero-subtitle {
    font-size: 18px;
    line-height: 140%;
    font-weight: 400;
    color: #EBEBF5;
    opacity: 0;
    animation: fadeIn 0.8s ease 0.3s forwards;
}

/* CTA секция */
.hero-cta-section {
    display: flex;
    flex-direction: column;
    gap: 40px;
    margin-bottom: 40px;
    opacity: 0;
    animation: fadeIn 0.8s ease 0.4s forwards;
}

.hero-cta-wrapper {
    position: relative;
    z-index: 1;
    min-width: 213px;
    margin: 0 auto;
    max-width: 350px;
}

.hero-cta-button {
    cursor: pointer;
    display: flex;
    align-items: center;
    flex-direction: column;
    height: auto;
    max-width: max-content;
    margin: 0 auto;
    font-family: inherit;
    text-decoration: none;
    /*max-width: 276px;*/
    background: radial-gradient(100% 404.49% at 0% 50%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 238, 224, 0.8) 70%, rgba(255, 255, 255, 0.8) 92.4%);
    border-radius: 20px;
    border: 2px solid #FFFFFF1A;
    padding: 18px 40px;
    transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);

    span {
        font-weight: 500;
        font-size: 20px;
        line-height: 140%;
        color: #1C1C1F;
        display: inline-block;
    }
}

.hero-cta-button::before {
    content: '';
    position: absolute;
    inset: -10px;
    background: linear-gradient(90deg, #0000ff3d 0%, #FF2200 60%);
    border-radius: 28px;
    filter: blur(22px);
    opacity: 0.6;
    z-index: -1;
    transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.hero-cta-button:hover::before {
    opacity: 1;
    filter: blur(26px);
    transform: translateY(2px);
}

.hero-cta-button:hover {
    opacity: 1;
}

/* materials cards */
.materials-section {
    display: flex;
    gap: 16px;
    /*max-width: 944px;*/
    max-width: min-content;
    margin: 0 auto;
    padding: 80px 0;
}

.materials-item {
    background: linear-gradient(to bottom, #2D2D33, #1D1D24CC);
    backdrop-filter: blur(8px);
    display: flex;
    flex-direction: column;
    gap: 16px;
    border-radius: 24px;
    padding: 24px 32px;
    /*min-width: 304px;*/
    min-width: 320px;

    opacity: 0;
    transform: translateY(-20px);
    animation: fadeIn 0.8s ease 0.6s forwards;

    h2 {
        font-weight: 500;
        font-size: 20px;
        line-height: 140%;
    }
}

.materials-item:nth-child(1) {
    animation-delay: 0.1s;
}

.materials-item:nth-child(2) {
    animation-delay: 0.2s;
}

.materials-item:nth-child(3) {
    animation-delay: 0.3s;
}


/* PARTNERS LOGOS - анимированные логотипы партнеров */
.partners-logos {
    overflow: hidden;
    position: relative;
    mask: linear-gradient(90deg, transparent 0%, black 10%, black 90%, transparent 100%);
    padding-bottom: 120px;
}

.partners-track {
    display: flex;
    gap: 64px;
    animation: scroll-partners 40s linear infinite;
    white-space: nowrap;
}

.partner-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    opacity: 0.6;
    transition: opacity 0.3s ease;
}

.partner-logo:hover {
    opacity: 1;
}

.partner-logo img {
    max-height: 32px;
    width: auto;
    object-fit: contain;
    transition: filter 0.3s ease;
}

@keyframes scroll-partners {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-120%);
    }
}

/* демо */
.demo-section {
    position: relative;
    z-index: 15;
    width: 95%;
    /*max-width: 1130px;*/
    margin: 0 auto;
    transform: translateY(8%);
}

.demo-bg {
    position: absolute;
    inset: -12px;
    z-index: -1;
    border-radius: 24px;
    background: linear-gradient(to bottom, #2D2D33, #1d1d2429);
    backdrop-filter: blur(12px);
    pointer-events: none;
}

.demo-image-desktop {
    position: relative;
    display: block;
    width: 100%;
    /*aspect-ratio: 16 / 9;*/
    height: auto;
    object-fit: cover;
    border-radius: 12px;
}

.demo-image-mobile {
    display: none;
}

.demo-video-desktop {
    display: block;
}

.demo-video-mobile {
    display: none;
}

.service-content {
    background-color: #FFFFFF;
    padding-top: calc(min(95vw, 1130px) * 9 / 60 + 50px);
    position: relative;
    z-index: 1;
    /*padding-bottom: 130px;*/
}

.demo-info-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    padding-bottom: 120px;

    > div {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 4px;
    }
}

.demo-section-subtitle {
    font-weight: 500;
    font-size: 20px;
    line-height: 140%;
    color: #15151A;
    text-align: center;
}

.demo-section-subtitle:first-child {
    font-weight: 400;
    font-size: 16px;
    line-height: 140%;
    color: #6F6F85;
    text-align: center;
}

/* FEATURES */

/*.features {*/
/*    background: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 14.9%, rgba(255, 255, 255, 0) 84.62%, #FFFFFF 100%);*/
/*    position: relative;*/
/*    !*max-width: 1300px;*!*/
/*    max-width: 1341px;*/
/*    max-height: 540px;*/
/*    overflow-y: scroll;*/
/*    direction: rtl;*/
/*    margin: auto;*/
/*}*/

.features {
    background: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 14.9%, rgba(255, 255, 255, 0) 84.62%, #FFFFFF 100%);
    /*background: var(--lilac-2);*/
    position: relative;
    max-width: 1341px;
    margin: auto;
}

.features-card {
    padding-left: 84px;
    direction: ltr;
    display: flex;
    gap: 24px;
    margin-bottom: 100px;
}

.features-card-content-header {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-top: 38px;
}


/* SOLUTIONS FOR PROF - решения для профи */
.solutions-prof {
    max-width: 97%;
    padding: 80px 0;
    margin: auto;
    position: relative;
    z-index: 1;
}

.solution-container {
    display: flex;
    flex-direction: column;
    gap: 89px;
    max-width: 1700px;
    margin: auto;
}

.process-block {
    display: flex;
    flex-direction: column;
    gap: 30px;
    padding-left: 30px;
}

.process-title-wrapper {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0 20px 12px 20px;
}

.process-title {
    font-weight: 700;
    font-size: 54px;
    line-height: 140%;
    color: #F5F5FA;
}

.process-desc {
    font-weight: 500;
    font-size: 20px;
    line-height: 140%;
    color: #EBEBF5;
}

.process-steps {
    display: flex;
    gap: 16px;
}

.process-steps-item {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 0 20px;
}

.process-icon-wrapper {
    width: 88px;
    height: 88px;
    padding: 20px;
    border-radius: 24px;
    background: linear-gradient(to right, #1A1A1F, #19191FCC);

    img {
        width: 48px;
        height: 48px;
    }
}

.process-steps-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 570px;
}

.process-content-header {
    display: flex;
    flex-direction: column;
    gap: 4px;

    span {
        font-weight: 400;
        font-size: 16px;
        line-height: 140%;
        color: #8989A3;
    }

    h3 {
        font-weight: 500;
        font-size: 28px;
        line-height: 140%;
        color: #F5F5FA;

        a {
            color: inherit;
            text-decoration: none;

            &:hover {
                color: #7d91ef;
            }
        }
    }
}

.process-content-desc {
    font-weight: 400;
    font-size: 18px;
    line-height: 140%;
    color: #EBEBF5;
}

.process-lms-container {
    position: relative;
}

.process-lms {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 30px;
    padding: 48px;
    border-radius: 32px;
    background: linear-gradient(to right, #1A1A1F, #19191FCC);
}

.process-lms-shadow {
    position: absolute;
    inset: -45px;
    background: radial-gradient(circle at 50% 50%, rgb(51 51 255 / 64%), transparent 60%);
    border-radius: 52px;
    filter: blur(100px);
    opacity: 0.2;
    z-index: 1;
}

.process-lms-title {
    font-weight: 700;
    font-size: 54px;
    line-height: 140%;
    color: #F5F5FA;
}

.lms-logos {
    display: flex;
    gap: 16px;
}

.lms-icon-wrapper {
    display: flex;
    align-items: center;
    width: 88px;
    height: 88px;
    padding: 20px;
    border-radius: 24px;
    background: linear-gradient(to right, #222229, #1D1D2499);
    position: relative;

    img {
        width: 48px;
        max-height: 48px;
    }
}

.lms-icon-wrapper:hover {
    background: linear-gradient(180deg, #292933 0%, rgba(36, 36, 46, 0.6) 100%);
}

.lms-icon-wrapper::after {
    content: attr(data-tooltip);
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 5px;
    padding: 4px 16px;
    background: #FFFFFF;
    color: #15151A;
    font-weight: 400;
    font-size: 20px;
    line-height: 140%;
    border-radius: 12px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s;
    pointer-events: none;
    z-index: 10;
}

.lms-icon-wrapper:hover::after {
    opacity: 1;
    visibility: visible;
}

.integrations {
    display: flex;
    gap: 16px;
    width: 100%;
}

.integrations-item {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 32px;
    border-radius: 20px;
    background: linear-gradient(to bottom, #222229, #1D1D2499);
    flex: 1;
}

.integrations-item-header {
    display: flex;
    flex-direction: column;
    gap: 4px;

    span {
        font-weight: 400;
        font-size: 16px;
        line-height: 140%;
        color: #8989A3;
    }

    h3 {
        font-weight: 700;
        font-size: 36px;
        line-height: 140%;
        color: #F5F5FA;
    }
}

.integrations-item-desc {
    font-weight: 400;
    font-size: 18px;
    line-height: 140%;
    color: #EBEBF5;
}

.about-us {
    background-color: #FFFFFF;
    /*padding-top: 160px;*/
    padding-bottom: 80px;
    position: relative;
    z-index: 1;
}

/* HOW WORKS */

.how-it-work-section {
    background: linear-gradient(180deg, rgba(235, 235, 250, 0) 0%, #EBEBFA 62.5%, rgba(235, 235, 250, 0) 100%);
    display: flex;
    flex-direction: column;
    gap: 60px;
    padding-top: 80px;
}

.how-it-work-title {
    color: #1C1C1F;
    font-weight: 700;
    font-size: 54px;
    line-height: 140%;
    text-align: center;
}

.how-it-work-content {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 49px;
    margin-left: 42px;
    margin-bottom: 100px;
}

.how-it-work-cards {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.how-it-work-cards-item {
    display: flex;
    gap: 12px;
    align-items: center;
    background-color: #FFFFFF;
    border-radius: 84px;
    padding: 20px 32px 20px 20px;
}

.how-it-work-cards-item_right {
    padding: 20px 20px 20px 32px;
}

.how-it-work-image {
    max-width: 443px;
    max-height: 474px;
    border-radius: 16px;
}

.how-it-work-image, .how-it-work-cards-item_right {
    img {
        height: 56px;
    }
}

.how-it-work-text {
    font-weight: 400;
    font-size: 20px;
    line-height: 140%;
    color: #1C1C1F;
    flex: 1;
}

.rectangle-1 {
    position: relative;
    width: 90px;
}

.rectangle-1-image-dot {
    position: absolute;
    top: -80px;
    left: 37px;
}

.rectangle-1-image-bottom {
    position: absolute;
    bottom: -10px;
    left: -3px;
    transform: scale(-1, 1) rotate(180deg);
}

.rectangle-1-image-center {
    position: absolute;
    bottom: -11px;
    left: -4%;
}

.rectangle-1-image-top {
    position: absolute;
    top: -11px;
    left: -4%;
    transform: scale(-1, 1) rotate(180deg);
}

.rectangle-2 {
    position: relative;
    width: 120px;
}

.rectangle-2-image-dot {
    position: absolute;
    left: 54px;
    top: 79px;
    z-index: 1;
}

.rectangle-2-image-bottom {
    position: absolute;
    top: 1px;
    left: -1px;
}

.rectangle-2-image-center {
    position: absolute;
    top: -6px;
}

.rectangle-2-image-top {
    position: absolute;
    bottom: -10px;
}

.use-cases {
    scroll-margin-top: 200px;
    background: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 14.9%, rgba(255, 255, 255, 0) 84.62%, #FFFFFF 100%);
    position: relative;
    max-width: 1300px;
    max-height: 740px;
    margin: 0 auto 100px;
    overflow-y: scroll;
    direction: rtl;
}

.use-cases::-webkit-scrollbar,
.features::-webkit-scrollbar {
    display: block; /* Убеждаемся, что скроллбар виден */
    width: 4px;
    height: 480px;
}

.use-cases::-webkit-scrollbar-thumb,
.features::-webkit-scrollbar-thumb {
    background: linear-gradient(360deg, #B8A1E6 0%, #4785FF 100%);
    border-radius: 999px;
}

.use-cases::-webkit-scrollbar-track,
.features::-webkit-scrollbar-track {
    background: #EBEBF5;
    border-radius: 999px;
    margin: 81px 0;
}

.use-cases-card {
    padding-left: 84px;
    direction: ltr;
    display: flex;
    gap: 92px;
    padding-top: 40px;
    padding-bottom: 40px;

    img {
        max-width: 388px;
        max-height: 642px;
    }
}

.use-cases-card:last-child, .features-card:last-child {
    margin-bottom: 0;
}

.use-cases-card-content {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.use-cases-card-content-header {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.use-cases-card-content-header-tag {
    display: flex;
    gap: 2px;
    padding: 4px 8px;
    border-radius: 20px;
    background: linear-gradient(270deg, rgba(71, 133, 255, 0.12) 0%, rgba(184, 161, 230, 0.12) 100%);
    max-width: max-content;


    span {
        color: #15151A;
        font-weight: 500;
        font-size: 24px;
        line-height: 140%;
    }

}

.header-tag {
    display: flex;
    gap: 2px;
    padding: 4px 8px;
    border-radius: 20px;
    background: linear-gradient(270deg, rgba(71, 133, 255, 0.12) 0%, rgba(184, 161, 230, 0.12) 100%);
    max-width: max-content;

    span {
        color: #15151A;
        font-weight: 500;
        font-size: 16px;
        line-height: 140%;
    }

}

.use-cases-card-content-header-title {
    color: #09090A;
    font-weight: 700;
    font-size: 36px;
    line-height: 140%;
}

.prob-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
    padding: 0 16px;
}

.use-cases-card-content-header-desc {
    display: flex;
    flex-direction: column;
    gap: 12px;

    h4 {
        font-weight: 500;
        font-size: 20px;
        line-height: 140%;
        color: #09090A;
    }

    .desc-lead {
        font-weight: 500;
        font-size: 20px;
        line-height: 140%;
        color: #09090A;
    }

    p:not(.desc-lead) {
        font-weight: 400;
        font-size: 18px;
        line-height: 140%;
        color: #15151A;
    }

    ul {
        padding-left: 0;
        font-weight: 500;
        font-size: 20px;
        line-height: 140%;
        color: #09090A;
    }

    li {
        font-weight: 400;
        font-size: 18px;
        line-height: 140%;
        color: #15151A;
        list-style: none;
        padding-left: 10px;
        margin-top: 8px;
    }
}

.use-cases-card-content-statistic {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.use-cases-card-content-statistic-card {
    display: flex;
    gap: 12px;
    align-items: center;
}

.use-cases-card-content_features {
    display: flex;
    flex-direction: column;
    padding-left: 20px;
}

.use-cases-card-content_features-text {
    color: #6F6F85;
    font-family: PT Root UI;
    font-weight: 400;
    font-size: 16px;
    line-height: 140%;
    margin: 0;
}

.features-img {
    /* width: 100%; */
    max-width: 500px;
    /* height: auto; */
    /* max-height: 500px; */
    flex: 1;
}

.statistic-card-icon {
    background: linear-gradient(180deg, rgba(71, 133, 255, 0.12) 0%, rgba(184, 161, 230, 0.12) 100%);
    padding: 12px;
    border-radius: 16px;
    width: 64px;
    height: 64px;
}

.statistic-card-desc {
    h5 {
        font-weight: 500;
        font-size: 28px;
        line-height: 140%;
        color: #09090A;
    }

    span {
        font-weight: 400;
        font-size: 18px;
        line-height: 140%;
        color: #15151A;
    }
}

.statistic-card-text {
    font-weight: 400;
    font-size: 18px;
    line-height: 140%;
    color: #15151A;
}

.tariffs {
    background: linear-gradient(180deg, rgba(235, 235, 250, 0) 0%, #EBEBFA 35.1%, #EBEBFA 69.71%, rgba(235, 235, 250, 0) 100%);
    display: flex;
    flex-direction: column;
    gap: 60px;
    /*padding-bottom: 60px;*/
}

.tariff-card-wrapper {
    display: flex;
    gap: 16px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px;
}

.tariff-card {
    background-color: #FFFFFF;
    border-radius: 16px;
    padding: 4px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex: 1;
    justify-content: flex-end;
}

.tariff-card_pro {
    background: radial-gradient(98.8% 98.8% at 50% 1.2%, #09090A 0%, #15151A 100%);
}

.tariff-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
}

.tariff-header-text {
    display: flex;
    flex-direction: column;
}

.tariff-header-text_pro {
    span {
        color: #FFFFFF;
    }
}

.tariff-header-text_name {
    color: #1C1C1F;
    font-weight: 500;
    font-size: 16px;
    line-height: 140%;
}

.tariff-header-text_price {
    color: #1C1C1F;
    font-weight: 700;
    font-size: 32px;
    line-height: 140%;
}

.tariff-header-icon {
    background-color: #F7F7FC;
    padding: 12px;
    border-radius: 16px;
    width: 52px;
    height: 52px;
}

.tariff-header-icon_pro {
    background: linear-gradient(180deg, #222229 0%, rgba(29, 29, 36, 0.6) 100%);
}

.tariff-desc {
    color: #1C1C1F;
    font-weight: 400;
    font-size: 16px;
    line-height: 140%;
    padding: 0 20px;
}

.tariff-desc_pro {
    color: #F5F5FA;
}

.tariff-features {
    background-color: #F7F7FC;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    border-radius: 12px;
    flex: 1;
}

.tariff-features_pro {
    background: #F7F7FC0D;
}

.tariff-features-item {
    display: flex;
    align-items: start;
    gap: 8px;
}

.feature-text {
    font-weight: 400;
    font-size: 16px;
    line-height: 140%;
    color: #1C1C1F;
}

.feature-text_pro {
    color: #FFFFFF;
}

.feature-badge {
    width: 35px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    padding: 4px 8px;
    background: linear-gradient(180deg, rgba(255, 51, 0, 0.12) 0%, rgba(255, 136, 0, 0.12) 100%);

    span {
        font-family: PT Root UI;
        font-weight: 500;
        font-size: 12px;
        line-height: 140%;
        background: linear-gradient(270deg, #FF3300 0%, #FF8800 100%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        -webkit-text-fill-color: transparent; /* для старых браузеров */
    }
}

/* Поддержка и признание */
.recognition {
    display: flex;
    flex-direction: column;
    gap: 60px;
}

.recognition-title {
    padding-top: 20px;
    color: #09090A;
    font-weight: 700;
    font-size: 54px;
    line-height: 140%;
    text-align: center;
}

.company {
    max-width: 1136px;
    margin: 0 auto;
    display: flex;
    gap: 12px;
}

.company-item {
    background-color: #F5F5FA;
    padding: 24px;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 230px;
    flex: 1;
    /*text-align: center;*/

    img {
        /*align-self: center;*/
        width: 64px;
        height: 64px;
    }
}

.company-item-text {
    color: #15151A;
    font-weight: 400;
    font-size: 16px;
    line-height: 140%;
}

.feature-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:50px;
    align-items:center;
    margin-bottom:120px
}

.recognition-desc {
    color: #09090A;
    font-weight: 500;
    font-size: 20px;
    line-height: 140%;
    text-align: center;
}

.service-footer {
    background: radial-gradient(98.8% 98.8% at 50% 1.2%, #09090A 0%, #15151A 100%);
    padding-top: 120px;
    position: relative;
    z-index: 1;
}

.service-footer-bg {
    background: radial-gradient(98.8% 98.8% at 50% 1.2%, #09090A 0%, #15151A 100%);
    display: flex;
    flex-direction: column;
    gap: 120px;
}

.users-feedback {
    position: relative;
    z-index: 1;
    padding-bottom: 120px;
    display: flex;
    flex-direction: column;
    gap: 60px;
    margin-bottom: 20px;
}

.users-feedback-title {
    color: #F5F5FA;
    text-align: center;
}

.support-form-section {
    position: relative;
    z-index: 20;
    padding: 48px 16px;
    /*background: linear-gradient(180deg, #15151a96 0%, rgb(21 21 26) 100%);*/
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
}

.support-form-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin-bottom: 30px;
}

.support-form-title {
    font-weight: 700;
    font-size: 54px;
    line-height: 140%;
    letter-spacing: -.025em;
    text-wrap: balance;
    margin: 0 auto;
    max-width: 14ch;
}

.support-form-desc {
    font-size: 36px;
    color: #d4d4e0;
    line-height: 140%;
    margin-bottom: 36px;
    margin-top: 120px;
}

.support-form-container {
    width: 753px;
}

.support-form {
    width: 100%;

    button:active,
    button:focus,
    button:hover {
        color: #1C1C1F !important;
    }
}

.form-fields {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.form-field-user_info-wrapper {
    display: flex;
    gap: 16px;
    width: 100%;
}

.form-field {
    width: 100%;
    text-align: left;

    label {
        font-size: 18px;
        font-weight: 500;
        letter-spacing: .01em;
        color: #E4E4FF;
    }

    input, textarea {
        width: 100%;
        background: rgba(255, 255, 255, .03);
        border: 1px solid rgba(255, 255, 255, .10);
        color: #fff;
        font-family: 'Manrope', sans-serif;
        font-size: 18px;
        line-height: 140%;
        padding: 14px 16px;
        border-radius: 12px;
        transition: border-color .18s, background .18s, box-shadow .18s;
        outline: none;
    }

    textarea {
        min-height: 176px;
    }
}

.form-button {
    font-weight: 500;
    font-size: 20px;
    line-height: 140%;
    color: #1C1C1F;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 294px;
    height: 60px;
    background: radial-gradient(100% 404.49% at 0% 50%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 238, 224, 0.8) 70%, rgba(255, 255, 255, 0.8) 92.4%);
    border-radius: 20px;
    border: 2px solid #FFFFFF1A;
    transition: all 300ms
    cubic-bezier(0.4, 0, 0.2, 1);
}

.form-button:hover {
    color: #1C1C1F;
}

/* Анимация появления карточек при попадании в зону видимости */

.process-steps-item,
.tariff-card,
.company-item,
.faq-item-border,
.integrations-item {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.process-steps-item.animate-in,
.tariff-card.animate-in,
.company-item.animate-in,
.faq-item-border.animate-in,
.integrations-item.animate-in {
    opacity: 1;
    transform: translateY(0);
}

.desctop-br-rostselmash {
    display: block;
}

.more-details-link-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
}

.details-links-wrapper {
    display: flex;
    align-items: center;
    gap: 16px;
}

.feature-row h3{
    font-size:42px;
    font-family:'PT Sans',sans-serif;
    font-weight:700;
    letter-spacing:-.02em;
    line-height:140%;
    margin-bottom:20px;
    color: #09090A;
}

.how-head h2{
    font-size:48px;
    margin-top:16px;
    font-family:'PT Sans',sans-serif;
    font-weight:700;
    letter-spacing:-.02em;
    line-height:140%;
}

.pr-head h2{font-size:48px;margin-top:16px;font-family:'PT Sans',sans-serif;font-weight:700;letter-spacing:-.02em}


.more-details-link {
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: linear-gradient(90deg, rgba(51, 51, 255, 0.12) 0%, rgba(255, 92, 51, 0.12) 100%);
    padding: 8px 16px;
    border: 1px solid rgba(51, 51, 255, 0.2);
    backdrop-filter: blur(4px);
    border-radius: 12px;
    cursor: pointer;
    opacity: 1;

    p {
        opacity: 1;
        font-weight: 500;
        font-size: 18px;
        line-height: 140%;
        color: #15151A;
    }
}

.use-case-more-button {
    max-width: max-content;
    background: linear-gradient(90deg, rgba(51, 51, 255, 0.12) 0%, rgba(255, 92, 51, 0.12) 100%);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(51, 51, 255, 0.2);
    cursor: pointer;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    border-radius: 12px;
    justify-content: center;

    font-weight: 500;
    font-size: 18px;
    line-height: 140%;
    color: #15151A;
}

.features-head{text-align:center;max-width:780px;margin:0 auto 80px}

.use-case-more-button:hover,
.more-details-link:hover {
    opacity: 1;
    background: linear-gradient(90deg, rgba(51, 51, 255, 0.25) 0%, rgba(255, 92, 51, 0.25) 100%);
    color: #15151A;
}

@media (max-width: 1420px) {
    .rectangle-1-image-bottom,
    .rectangle-1-image-top,
    .rectangle-1-image-dot,
    .rectangle-2-image-bottom,
    .rectangle-2-image-top,
    .rectangle-2-image-dot {
        display: none;
    }

    .rectangle-1-image-center,
    .rectangle-2-image-center {
        transform: rotate(90deg);
        position: absolute;
        bottom: -37px;
        left: 20%;
        max-width: 60px;
    }

    .rectangle-2-image-center {
        top: -37px;
    }

    .how-it-work-image {
        margin-top: 61px;
        margin-bottom: 61px;
    }

    .how-it-work-cards {
        width: 100%;
    }

    .how-it-work-content {
        max-width: max-content;
        align-items: center;
        margin-bottom: 120px;
        flex-direction: column;
        margin-left: auto;
        margin-right: auto;
    }

    .features {
        margin: auto 16px;
    }
}

@media screen and (max-width: 1376px) {
    .details-links-wrapper {
        display: flex;
        flex-direction: column;
        align-items: start;
    }
}

@media screen and (max-width: 1280px){
    .lms-logos {
        overflow-x: scroll;
        overflow-y: hidden;
    }

    .lms-logos::-webkit-scrollbar {
        display: none;
    }

    .lms-icon-wrapper {
        min-width: 88px;
    }
}

@media (max-width: 1150px) {
    .hero-title {
        font-size: 54px;
    }

    .hero-subtitle {
        font-size: 16px;
    }

    .materials-section {
        max-width: max-content;
    }

    .materials-item {
        min-width: 270px;
        max-width: 235px;
        margin: 0 auto;
    }

    .partners-logos {
        padding-bottom: 60px;
    }

    /* .demo-section overlap removed — uses normal flow */

    .process-title {
        font-size: 48px;
    }

    /*.solutions-prof {*/
    /*    padding: 60px 0 60px 16px;*/
    /*}*/

    .process-lms {
        width: auto;
        max-width: 100%;
        padding: 30px;
    }

    .process-lms-title {
        font-size: 48px;
    }

    .integrations {
        flex-direction: column;
    }

    .about-us {
        padding-top: 60px;
        padding-bottom: 60px;
    }

    .how-it-work-section {
        gap: 20px;
        background: linear-gradient(180deg, rgba(235, 235, 250, 0) 0%, #EBEBFA 30.5%, rgba(235, 235, 250, 0) 100%);
        padding: 0 16px;
    }

    .how-it-work-title {
        font-size: 48px;
    }

    .demo-info-block {
        padding-bottom: 60px;
    }

    .use-cases,
    .features {
        margin: 0 16px 60px;
    }

    .features {
        overflow-y: auto;
        max-height: max-content;
        margin-bottom: 0;
    }

    .features-card {
        padding-left: 0;
        gap: 0;
        padding-top: 0;
        flex-direction: column;
        margin-bottom: 40px;
    }

    .features-img {
        width: 100%;
        max-width: 100%;
        height: auto;
        max-height: none;
        object-fit: contain;
    }

    .tariffs {
        gap: 40px;
        max-width: 100%;
        margin: auto 16px;
    }

    .recognition-title {
        padding-top: 0;
        font-size: 48px;
    }

    .recognition {
        gap: 40px;
        max-width: 97%;
        margin: 0 auto;
    }

    .recognition-desc {
        margin: 0 16px;
        text-align: start;
    }

    .service-footer {
        padding-top: 40px;
    }

    .footer-widget {
        width: 95%;
        margin: 0 auto;
    }

    .service-content {
        padding-bottom: 0;
        padding-top: calc(min(95vw, 1130px) * 9 / 40 + 50px);
    }
}

@media (max-width: 1024px) {
    .service-content {
        padding-bottom: 0;
        padding-top: calc(min(95vw, 1130px) * 9 / 30 + 50px);
    }

    .process-block {
        padding-left: 16px;
    }

    .support-form-container {
        width: 100%;
    }

    .tariff-card-wrapper {
        flex-direction: column;
    }

    .service-header {
        max-height: 900px;
    }
}

@media (max-width: 862px) {

    .features-head {
        margin: 0 auto 40px;
    }

    .prob-grid {
        gap: 50px;
    }

    .bg-hero {
        min-width: 1004px;
        height: 756px;
    }

    .hero-content {
        max-width: 97%;
        width: 100%;
    }

    .hero-title {
        margin-top: 190px;
        font-size: 36px;
    }

    .materials-section {
        max-width: 100%;
        margin: 16px auto;
        padding: 80px 0 68px 0;
        flex-direction: column;
    }

    .materials-item {
        width: 100%;
        max-width: 343px;
    }

    .demo-image-desktop {
        width: 100%;
    }

    .solutions-prof {
        padding: 40px 0;
        max-width: 100%;
    }

    .process-title-wrapper {
        padding: 0 16px;
    }

    .process-block {
        gap: 36px;
    }

    .process-title {
        font-size: 36px;
    }

    .support-form-title {
        font-size: 36px;

        .grad-text-bottom {
            font-size: 28px;
            line-height: 140%;
        }
    }

    .support-form-desc {
        font-size: 24px;
        line-height: 140%;
        margin-top: 80px;
    }

    .form-fields {
        padding-bottom: 60px;
    }

    .process-desc {
        font-size: 16px;
    }

    .process-steps {
        padding: 0 16px;
        flex-direction: column;
        gap: 20px;
    }

    .process-steps-item {
        padding: 0;
    }

    .process-lms-title {
        font-size: 36px;
    }

    .process-lms {
        padding: 16px 24px;
    }

    .integrations-item {
        padding: 20px;
    }

    .integrations-item-header {
        span {
            font-size: 14px;
        }
    }

    .integrations-item-header {
        h3 {
            font-size: 24px;
        }
    }

    .integrations-item-desc {
        font-size: 16px;
    }

    .integrations {
        gap: 12px;
    }

    .how-it-work-title {
        font-size: 36px;
    }

    .pr-head h2 {
        font-size: 36px;
    }

    .how-it-work-cards-item {
        padding: 16px;
    }

    .how-it-work-cards {
        gap: 8px;
        max-width: 100%;
        padding: 0 16px;
    }

    .how-it-work-content {
        max-width: 100%;
        margin-bottom: 60px;
    }

    .how-it-work-image {
        max-width: 90%;
    }

    .support-form-section {
        padding: 0 16px;
    }

    .grad-text-bottom {
        font-size: 24px;
    }

    .use-cases {
        overflow-y: auto;
        max-height: max-content;
        margin-bottom: 0;
    }

    .use-cases-card {
        padding-left: 0;
        gap: 0;
        padding-top: 0;
        flex-direction: column;
    }

    .use-cases-card-content-header-title {
        font-size: 28px;
    }

    .use-cases-card-content-header-desc {
        .desc-lead {
            font-size: 16px;
        }

        p:not(.desc-lead) {
            font-size: 16px;
        }
    }

    .statistic-card-desc {
        display: flex;
        flex-direction: column;
        /*gap: 8px;*/

        h5 {
            font-size: 18px;
        }

        span {
            font-size: 16px;
        }
    }

    .use-cases-card-content-statistic {
        gap: 20px;
    }

    .statistic-card-text {
        font-size: 16px;
    }

    .desctop-br-rostselmash {
        display: none;
    }

    .use-cases-card-content-header-tag {
        span {
            font-size: 18px;
        }
    }

    .header-tag {
        span {
            font-size: 14px;
        }
    }

    .features-img {
        max-width: 100%;
        height: auto;
    }

    .tariffs {
        gap: 20px;
        margin: 0;
        padding: 0 16px;
    }

    .recognition {
        gap: 20px;
        max-width: 100%;
        padding-left: 16px;
    }

    .recognition-title {
        padding-top: 120px;
        font-size: 36px;
        text-align: start;
    }

    .recognition-desc {
        margin: 0;
    }

    .company {
        overflow-x: scroll;
        max-width: 100%;
    }

    .company::-webkit-scrollbar {
        display: none;
    }

    .company-item {
        min-width: 216px;
    }

    .service-footer {
        border-radius: 20px;
    }

    .feature-row{
        gap:20px;
        margin-bottom: 40px;
    }
}

@media screen and (max-width: 648px) {
    .prob ul {
        padding-left: 10px;
    }
    .feature-row ul {
        padding-left: 10px;
    }

    .how-head h2 {
        font-size: 36px;
    }

    .feature-row h3 {
        font-size: 28px;
    }

    .section {
        padding:50px 0
    }

    .demo-image-desktop {
        display: none;
    }

    .demo-image-mobile {
        display: block;
        max-width: 85%;
        border-radius: 30px;
        margin-left: auto;
        margin-right: auto;
    }

    .demo-bg {
        display: none;
    }

    .service-content {
        padding-top: calc(min(95vw, 1130px) * 9 / 15 + 50px);
    }

    .details-links-wrapper {
        flex-direction: column;
        gap: 8px;
    }

    .more-details-link {
        width: 100%;
        align-items: center;
    }

    .service-header {
        max-height: 1000px;
    }

    .hero {
        padding: 80px 0 100px;
    }
}

@media screen and (max-width: 526px) {

    .service-content {
        padding-top: calc(min(95vw, 1130px) * 9 / 20 + 50px);
    }

    .hero-cta-button {
        padding: 12px 36px;
        max-width: 100%;
    }

    .mobile_br {
        display: block;
    }

    .partners-track {
        animation: scroll-partners 15s linear infinite;
    }

    .process-block {
        padding-left: 0;
    }

    .demo-section-subtitle:first-child {
        font-size: 14px;
    }

    .demo-info-block {
        padding-bottom: 40px;

        > div:first-child {
            max-width: 85%;
        }
    }

    .demo-section-subtitle {
        font-size: 18px;
    }

    .hero-cta-wrapper {
        width: max-content;
        border-radius: 12px;
        max-width: 358px;
    }

    .form-field-user_info-wrapper {
        flex-direction: column;
    }

    .form-button {
        width: 100%;
    }

    .hero-title {
        margin-top: 140px;
    }

    .service-header {
        max-height: 1140px;
    }
}

@media screen and (max-width: 470px) {
    .service-header {
        max-height: 1200px;
    }
}


:root{
    --ink:#09090a; --ink-2:#15151a; --ink-3:#1f1f26;
    --paper:#fff; --lilac:#ebebfa; --lilac-2:#f5f4fc; --line:#e8e4f5;
    --muted:#6f6f85; --muted-2:#a4a4b8;
    --blue:#3333ff; --orange:#ff5c33; --violet:#c01dff; --teal:#17d2c7; --green:#14fc95;
    --grad:linear-gradient(90deg, #3333ff 0%, #ff5c33 100%);
    --grad-logo:linear-gradient(90deg, #c01dff 0%, #17d2c7 50%, #14fc95 100%);
    --grad-soft:linear-gradient(135deg, rgba(51,51,255,.08), rgba(255,92,51,.08));
}
.display{font-family:'PT Sans',sans-serif;font-weight:700;letter-spacing:-.02em;line-height:140%}
.grad-text{
    background:var(--grad);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    font-size: 48px;
}
.wrap{max-width:1280px;margin:0 auto;
    /*padding:0 56px*/
}
.eyebrow{font-size:16px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.eyebrow.light{color:var(--muted-2)}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 26px;border-radius:14px;font-weight:600;font-size:20px;transition:transform .15s, box-shadow .2s;white-space:nowrap}
.btn:hover{transform:translateY(-1px);}
.btn-primary{background:var(--grad);color:#fff;box-shadow:0 12px 32px rgba(51,51,255,.25)}
.btn-primary:hover{box-shadow:0 16px 40px rgba(51,51,255,.35)}
.btn-ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.2)}
.btn-ghost.dark{color:var(--ink);border-color:var(--line)}
.btn-dark{background:var(--ink);color:#fff}
.btn-small{padding:10px 18px;font-size:13px;border-radius:10px}

/* ─── Nav ─── */
.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.85);backdrop-filter:blur(20px);border-bottom:1px solid var(--line)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 56px;max-width:1440px;margin:0 auto}
.logo{display:flex;align-items:center;gap:10px;font-family:'PT Sans',sans-serif;font-weight:700;font-size:22px;letter-spacing:-.02em}
.logo .mark{width:32px;height:32px;border-radius:8px;background:var(--grad-logo);display:grid;place-items:center;flex-shrink:0}
.logo .mark svg{width:18px;height:18px;color:#fff}
.nav-links{display:flex;gap:32px;font-size:14px;font-weight:500;color:var(--ink)}
.nav-links a{display:flex;align-items:center;gap:4px;transition:color .2s}
.nav-links a:hover{color:var(--blue)}
.nav-right{display:flex;align-items:center;gap:14px}

.hero-inner{position:relative;text-align:center;margin:0 auto}

.hero h1{
    font-size: 60px;
    margin-bottom: 20px;
    font-family:'PT Sans',sans-serif;
    font-weight:700;
    letter-spacing: -2%;
    line-height: 140%;
    color: #F5F5FA;
}

.hero .sub{
    font-size: 18px;
    line-height: 140%;
    color:#EBEBF5;
    margin:0 auto 32px;
    max-width:720px;
    font-weight:400
}
.hero .sub strong{
    color:#fff;
    font-weight:600
}
.hero .features-line {
    font-size: 18px;
    color:var(--muted-2);
    margin-bottom:48px;
    display:flex;
    gap:16px;
    justify-content:center;
    flex-wrap:wrap
}
.hero .features-line span{
    display:flex;
    align-items:center;
    gap:6px;
    padding: 8px 12px;
    border-radius: 25px;
    border: 1px solid #a4a4b8b8;
}
.hero-ctas{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:32px}
.hero .proof{font-size:14px;color:var(--muted-2);max-width:600px;margin:0 auto}

/* ─── Hero mock ─── */
.hero-mock{position:relative;margin-top:80px;max-width:1080px;margin-left:auto;margin-right:auto;border-radius:24px;overflow:hidden;box-shadow:0 40px 100px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.06)}
.hero-mock::before{content:"";position:absolute;inset:-2px;background:var(--grad);border-radius:26px;z-index:-1;opacity:.5}
.hero-mock-bar{background:#1a1a22;padding:12px 18px;display:flex;align-items:center;gap:10px;border-bottom:1px solid rgba(255,255,255,.06)}
.hero-mock-bar .dot{width:11px;height:11px;border-radius:50%}
.hero-mock-bar .addr{flex:1;text-align:center;font-size:12px;color:#888}
.hero-mock-body{background:#0e0e14;min-height:420px;display:grid;grid-template-columns:280px 1fr;gap:0}
.hm-side{background:#15151a;padding:24px;border-right:1px solid rgba(255,255,255,.05)}
.hm-side-title{font-size:12px;color:#888;letter-spacing:.1em;text-transform:uppercase;margin-bottom:16px;font-weight:600}
.hm-side-item{padding:10px 12px;border-radius:8px;font-size:13px;color:#d4d4e0;margin-bottom:4px;display:flex;align-items:center;gap:10px}
.hm-side-item.active{background:rgba(51,51,255,.15);color:#fff}
.hm-side-item .ic{width:14px;height:14px;border-radius:4px;background:#444;flex-shrink:0}
.hm-side-item.active .ic{background:var(--grad)}
.hm-main{padding:32px}
.hm-search{display:flex;align-items:center;gap:12px;background:#15151a;border:1px solid rgba(255,255,255,.08);padding:14px 18px;border-radius:14px;margin-bottom:24px;box-shadow:0 0 0 3px rgba(51,51,255,.15)}
.hm-search svg{width:18px;height:18px;color:#a4a4b8;flex-shrink:0}
.hm-search input{flex:1;background:none;border:none;color:#fff;font-size:15px;font-family:inherit}
.hm-search input:focus{outline:none}
.hm-search .kbd{font-size:11px;color:#888;border:1px solid rgba(255,255,255,.1);padding:2px 6px;border-radius:4px}
.hm-result-h{font-size:12px;color:#888;letter-spacing:.1em;text-transform:uppercase;margin-bottom:12px;font-weight:600}
.hm-result{display:grid;grid-template-columns:140px 1fr 70px;gap:16px;padding:12px;background:#15151a;border-radius:10px;margin-bottom:8px;align-items:center;border:1px solid rgba(255,255,255,.04)}
.hm-result.hot{border-color:rgba(51,51,255,.4);background:linear-gradient(90deg, rgba(51,51,255,.12), rgba(255,92,51,.06))}
.hm-thumb{aspect-ratio:16/9;background:linear-gradient(135deg,#3a3a4a,#1a1a22);border-radius:6px;position:relative;overflow:hidden}
.hm-thumb::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:0;height:0;border:7px solid transparent;border-left-color:rgba(255,255,255,.6)}
.hm-result-title{font-size:14px;color:#fff;font-weight:500;line-height:140%;margin-bottom:4px}
.hm-result-title mark{background:rgba(51,51,255,.3);color:#fff;padding:1px 4px;border-radius:3px}
.hm-result-meta{font-size:12px;color:#888}
.hm-tc{font-family:'PT Sans',sans-serif;font-weight:700;font-size:14px;color:#8a8aff;text-align:right}

/* ─── Trust bar ─── */
.trust{padding:64px 0;background:var(--lilac-2);border-bottom:1px solid var(--line)}
.trust-label{text-align:center;font-size:13px;color:var(--muted);font-weight:500;margin-bottom:32px}
.trust-logos{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:48px;margin-bottom:48px}
.trust-logo{font-family:'PT Sans',sans-serif;font-weight:700;font-size:22px;color:#9090a8;letter-spacing:-.01em;opacity:.75;transition:opacity .2s}
.trust-logo:hover{opacity:1}
.trust-rec{display:flex;justify-content:center;gap:48px;flex-wrap:wrap;font-size:13px;color:var(--muted)}
.trust-rec span{display:flex;align-items:center;gap:8px}
.trust-rec span::before{content:"★";color:var(--orange)}

/* ─── Problem ─── */
.problem{background:#fff}
.prob h2{font-size:42px;margin:16px 0 28px;font-family:'PT Sans',sans-serif;font-weight:700;letter-spacing:-.02em;line-height:140%; color: #09090A;}
.prob p{
    font-size:18px;
    color: #15151A;
    margin-bottom:18px;
    line-height:140%;
}
.prob p strong{color:var(--ink);font-weight:600}
.prob ul{list-style:none;margin-top:24px;display:flex;flex-direction:column;}
.prob ul li{
    display:flex;
    gap:12px;
    align-items:flex-start;
    font-size:18px;
    color:var(--ink)
}
.prob ul li::before{content:"";width:18px;height:18px;border-radius:50%;background:var(--grad);flex-shrink:0;margin-top:2px;display:grid;place-items:center;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'><path d='M3.5 8L7 11.5L13 5' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>"),var(--grad);
    background-size:cover}
.stat-block__left h2{
    font-size:42px;
    font-family:'PT Sans',sans-serif;
    font-weight:700;
    letter-spacing:-.02em;
    line-height:140%;
    color:#09090A;
    margin-bottom:1.25rem;
}
.stat-block__left p{
    font-size:18px;
    line-height:140%;
    color:#15151A;
    margin-bottom:0.75rem;
}
.stat-block__left p.strong{
    color:#15151A;
    font-weight:500;
    margin-bottom:0;
}
.stat-card{
    background:#F4F3FF;
    border-radius:20px;
    padding:2rem 1.75rem 1.5rem;
}
.stat-card__number{
    font-size:72px;
    font-weight:800;
    line-height:1;
    letter-spacing:-2px;
    margin-bottom:0.4rem;
    background:linear-gradient(90deg, #4B5BFF 0%, #8B5CF6 45%, #D95F4B 100%);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
}
.stat-card__label{
    font-size:16px;
    font-weight:600;
    color:#1a1a2e;
    line-height:1.4;
    margin-bottom:0.35rem;
}
.stat-card__label .highlight{
    background:linear-gradient(90deg, #4B5BFF, #8B5CF6);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
}
.stat-card__aside{
    font-size:14px;
    color:#6B6B8A;
    font-style:italic;
    margin-bottom:1.5rem;
}
.stat-card__footer{
    border-top:1px solid rgba(100, 90, 180, 0.2);
    padding-top:1.1rem;
}
.stat-card__reason{
    font-size:14px;
    font-weight:600;
    color:#2a2a4a;
    line-height:1.4;
    letter-spacing:-0.01em;
    margin-bottom:0.9rem;
}
.stat-card__sources{
    font-size:11px;
    color:#9090A8;
    line-height:1.8;
}
.stat-card__sources a{
    color:#6B6BCC;
    text-decoration:none;
    border-bottom:1px solid rgba(107, 107, 204, 0.3);
}
.stat-card__sources a:hover{
    border-bottom-color:#6B6BCC;
}
.stat-card__sources .sep{
    margin:0 6px;
    color:#c0c0d8;
}

/* ─── Features ─── */

.features-head h2{font-size:56px;margin:16px 0 0;font-family:'PT Sans',sans-serif;font-weight:700;letter-spacing:-.02em;line-height:1.08; color: #09090A;}

.feature-row:last-child{margin-bottom:0}
.feature-row.flip .feature-text{order:2}
.feature-num{display:flex;align-items:center;gap:6px;padding:4px 12px;border-radius:20px;background:linear-gradient(270deg, rgba(71, 133, 255, 0.12) 0%, rgba(184, 161, 230, 0.12) 100%);max-width:max-content;margin-bottom:14px}
.feature-num img{width:20px;height:20px;flex-shrink:0}
.feature-num span{color:#15151A;font-weight:500;font-size:16px;line-height:140%}
.feature-row p{
    font-size:18px;
    color: #09090A;
    line-height:140%;
    margin-bottom:24px
}
.feature-row ul{list-style:none;margin-bottom:28px;display:flex;flex-direction:column; padding-left: 8px;}
.feature-row ul li{
    display:flex;
    gap:10px;
    align-items:flex-start;
    font-size:18px;
    color:var(--ink);
    margin-top: 8px;
}
.feature-row ul li::before{content:"✓";color:var(--blue);font-weight:700;flex-shrink:0;}
.feature-row .who{font-size:18px;color:var(--muted);padding-top:20px;border-top:1px solid var(--line)}
.feature-row .who strong{color:var(--ink);font-weight:600;display:inline-block;margin-bottom:6px;font-size:20px;letter-spacing:.1em;text-transform:uppercase}
.pull-quote{
    margin-top:24px;
    padding-left:24px;
    border-left:4px solid #EBEBF5;
    display:flex;
    flex-direction:column;
    gap:8px;
    font-weight:400;
    font-style:italic;
    font-size:16px;
    line-height:140%;
    color:var(--ink)
}
.pull-quote cite{display:block;font-style:normal;font-weight:500;font-size:18px;line-height:140%;color:#15151A}
@media screen and (max-width: 526px){
    .pull-quote{padding-left:16px;font-size:14px}
    .pull-quote cite{font-size:16px}
}

/* ─── Feature mockups ─── */
.mock{background:#fff;border-radius:24px;border:1px solid var(--line);box-shadow:0 20px 50px rgba(51,51,255,.08);overflow:hidden}
.mock-bar{padding:10px 14px;background:#fafaff;border-bottom:1px solid var(--line);display:flex;gap:6px;align-items:center}
.mock-bar .d{width:9px;height:9px;border-radius:50%}
.mock-bar .ti{flex:1;text-align:center;font-size:11px;color:var(--muted-2)}
.mock-body{padding:24px;min-height:340px}

/* mock specific styles */
.mock-search{background:var(--lilac-2);padding:12px 16px;border-radius:12px;display:flex;align-items:center;gap:10px;margin-bottom:16px;font-size:14px;color:var(--ink);border:1px solid var(--line)}
.mock-search svg{width:16px;height:16px;color:var(--muted)}
.mock-search .q{color:var(--ink);font-weight:500}
.mock-row{display:grid;grid-template-columns:80px 1fr 64px;gap:12px;padding:10px;background:var(--lilac-2);border-radius:10px;margin-bottom:6px;align-items:center;font-size:13px}
.mock-row .tc{font-family:'PT Sans',sans-serif;font-weight:700;color:var(--blue)}
.mock-row .thumb{aspect-ratio:16/9;background:linear-gradient(135deg,#5a5a72,#1a1a22);border-radius:4px;position:relative}
.mock-row .thumb::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 50%, rgba(255,255,255,.2), transparent 50%)}
.mock-row .meta{color:var(--ink);font-weight:500;line-height:140%}
.mock-row .meta mark{background:rgba(51,51,255,.15);color:var(--ink);padding:0 3px;border-radius:3px}
.mock-row .meta small{display:block;color:var(--muted);font-size:11px;margin-top:2px;font-weight:400}
.mock-row .lang{font-size:10px;font-weight:700;color:var(--blue);letter-spacing:.05em;text-align:right}

.mock-transcript{font-size:13px;line-height:140%;color:var(--ink)}
.mock-transcript .line{display:grid;grid-template-columns:60px 80px 1fr;gap:12px;padding:8px 0;border-bottom:1px solid var(--lilac)}
.mock-transcript .line:last-child{border-bottom:none}
.mock-transcript .tc{font-family:'PT Sans',sans-serif;font-weight:700;color:var(--blue);font-size:12px}
.mock-transcript .spk{font-weight:600;color:var(--orange);font-size:12px}
.mock-transcript .txt mark{background:rgba(51,51,255,.15);padding:0 3px;border-radius:3px}

.mock-chapters{display:flex;flex-direction:column;gap:8px}
.mock-ch{display:grid;grid-template-columns:64px 1fr;gap:14px;padding:12px;background:var(--lilac-2);border-radius:10px;align-items:flex-start;cursor:pointer;transition:background .2s}
.mock-ch:hover{background:#eeeaff}
.mock-ch .tc{font-family:'PT Sans',sans-serif;font-weight:700;color:var(--blue);font-size:13px}
.mock-ch .ch-t{font-size:13px;font-weight:600;color:var(--ink);margin-bottom:3px}
.mock-ch .ch-d{font-size:12px;color:var(--muted);line-height:140%}

.mock-summary{font-size:13px;line-height:140%;}
.mock-summary h4{font-size:14px;font-weight:700;color:var(--ink);margin-bottom:10px;padding-bottom:8px;border-bottom:2px solid var(--blue);display:flex;align-items:center;gap:8px}
.mock-summary h4 .num{background:var(--grad);color:#fff;width:22px;height:22px;border-radius:6px;display:grid;place-items:center;font-size:11px;font-family:'PT Sans',sans-serif}
.mock-summary section{margin-bottom:18px}
.mock-summary ul{list-style:none;padding-left:12px}
.mock-summary li{position:relative;padding:4px 0 4px 16px;color:var(--ink);font-size:13px}
.mock-summary li::before{content:"";position:absolute;left:0;top:13px;width:6px;height:6px;border-radius:50%;background:var(--blue)}

.mock-quiz .q{background:var(--lilac-2);padding:14px 16px;border-radius:12px;margin-bottom:10px}
.mock-quiz .q-h{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);font-weight:600;letter-spacing:.05em;margin-bottom:8px}
.mock-quiz .q-h .tc{color:var(--blue);font-family:'PT Sans',sans-serif;font-weight:700}
.mock-quiz .q-t{font-size:13px;color:var(--ink);font-weight:600;margin-bottom:10px;line-height:140%;}
.mock-quiz .opt{display:flex;align-items:center;gap:8px;padding:7px 10px;background:#fff;border-radius:8px;font-size:12px;color:var(--ink);margin-bottom:4px;border:1px solid var(--line)}
.mock-quiz .opt.correct{background:linear-gradient(90deg, rgba(51,51,255,.08), rgba(255,92,51,.05));border-color:var(--blue);font-weight:600}
.mock-quiz .opt .o{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--muted-2);display:grid;place-items:center;flex-shrink:0;font-size:10px;color:var(--muted);font-weight:600}
.mock-quiz .opt.correct .o{background:var(--grad);border-color:transparent;color:#fff}

/* ─── How it works ─── */
.how{background:#fff}
.how-head{text-align:center;max-width:780px;margin:0 auto 20px;}
.how-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;position:relative}
.how-steps::before{content:"";position:absolute;top:50px;left:18%;right:18%;height:2px;background:linear-gradient(90deg,var(--blue),var(--orange));opacity:.3;z-index:0}
.step{position:relative;background:#fff;border:1px solid var(--line);border-radius:24px;padding:32px;text-align:center;z-index:1}
.step .badge{width:56px;height:56px;border-radius:50%;background:var(--grad);color:#fff;display:grid;place-items:center;font-family:'PT Sans',sans-serif;font-weight:700;font-size:24px;margin:0 auto 24px;box-shadow:0 8px 24px rgba(51,51,255,.25)}
.step h4{font-family:'PT Sans',sans-serif;font-size:22px;font-weight:700;margin-bottom:12px;letter-spacing:-.01em}
.step p{font-size:14.5px;color:var(--muted);line-height:140%;}

/* ─── Use cases ─── */
.uc{}
.uc-head{text-align:center;max-width:760px;margin:0 auto 56px}
.uc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.uc-card{
    background: var(--lilac-2);
    border:1px solid var(--line);
    border-radius:24px;
    padding:24px;
    display:flex;
    flex-direction:column;
    gap:16px
}
.uc-card:nth-child(4){grid-column:1 / 3}
.uc-icon{width:48px;height:48px;border-radius:12px;background:var(--grad-soft);display:grid;place-items:center}
.uc-icon svg{width:24px;height:24px;color:var(--blue)}
.uc-card h4{font-family:'PT Sans',sans-serif;font-size:26px;font-weight:700;letter-spacing:-.01em; color: #1C1C1F;}
.uc-card p{font-size:18px;color:var(--muted);line-height:140%;flex:1}
.uc-key{
    display:flex;
    gap:10px;
    align-items:flex-start;
    padding:14px 16px;
    background: #FFFFFF;
    border-radius:12px;
    font-size:18px;
    color:var(--ink);
    line-height:140%;
    box-shadow: 0 20px 60px rgb(51 51 255 / 12%);
}
.uc-key::before{
    content:"";
    width:25px;
    height:25px;
    border-radius:6px;
    background:var(--grad);
    flex-shrink:0;
    margin-top:1px;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='white' d='M8 1l2 5h5l-4 3 1.5 5L8 11 3.5 14 5 9 1 6h5z'/></svg>"),var(--grad);
    background-size:25px;
    background-repeat:no-repeat;
    background-position:center
}

/* ─── Case studies ─── */
.cs{background:#fff}
.cs-grid{display:grid;grid-template-columns:1fr;gap:24px;margin-top:48px}
.cs-card{display:grid;grid-template-columns:1fr 1fr;gap:48px;background:linear-gradient(135deg,#fafaff,#f0eefb);border-radius:32px;padding:48px;border:1px solid var(--line)}
.cs-card .label{font-size:12px;font-weight:700;color:var(--blue);letter-spacing:.12em;text-transform:uppercase;margin-bottom:14px}
.cs-card h3{font-family:'PT Sans',sans-serif;font-size:32px;font-weight:700;letter-spacing:-.02em;line-height:140%;margin-bottom:18px; color: #1C1C1F;}
.cs-card .body{font-size:15px;color:var(--muted);line-height:140%;margin-bottom:18px}
.cs-card .body strong{color:var(--ink);font-weight:600}
.cs-card blockquote{font-style:italic;color:var(--ink);font-size:15px;line-height:140%;padding-top:18px;border-top:1px solid var(--line);margin-top:8px}
.cs-results{display:flex;flex-direction:column;gap:12px}
.cs-results .res{background:#fff;padding:18px 22px;border-radius:14px;border:1px solid var(--line);display:flex;gap:14px;align-items:center}
.cs-results .res .arr{font-family:'PT Sans',sans-serif;font-weight:700;font-size:22px;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;flex-shrink:0;line-height:140%;}
.cs-results .res .t{font-size:14px;color:var(--ink);line-height:140%;}

/* ─── Integrations ─── */
.int{background:var(--ink);color:#fff;position:relative;overflow:hidden}
.int::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 40%, rgba(51,51,255,.2),transparent 50%),radial-gradient(circle at 70% 60%, rgba(255,92,51,.15),transparent 50%);pointer-events:none}
.int-head{text-align:center;max-width:780px;margin:0 auto 48px;position:relative}
.int-head h2{font-size:48px;margin-top:16px;font-family:'PT Sans',sans-serif;font-weight:700;letter-spacing:-.02em}
.int-logos{display:flex;flex-wrap:wrap;justify-content:center;gap:18px;margin-bottom:64px;position:relative}
.int-logo{padding:12px 22px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:99px;font-family:'PT Sans',sans-serif;font-weight:700;font-size:15px;color:#fff}
.int-options{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;position:relative}
.int-opt{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:24px;padding:32px}
.int-opt .tag{display:inline-block;font-size:11px;font-weight:700;color:#fff;background:var(--grad);padding:4px 10px;border-radius:99px;letter-spacing:.08em;margin-bottom:18px}
.int-opt h4{font-family:'PT Sans',sans-serif;font-size:22px;font-weight:700;margin-bottom:12px}
.int-opt p{font-size:14px;color:#b8b8c8;line-height:140%;margin-bottom:16px}
.int-opt code{font-family:'SF Mono',Menlo,monospace;font-size:12px;background:#000;padding:10px 14px;border-radius:8px;color:#8a8aff;display:block}

/* ─── Pricing ─── */
.pr{background:var(--lilac-2)}
.pr-head{text-align:center;max-width:760px;margin:40px auto 0}
.pr-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.pr-card{background:#fff;border:1px solid var(--line);border-radius:24px;padding:32px;display:flex;flex-direction:column;gap:14px;position:relative}
.pr-card.featured{background:linear-gradient(180deg,#15151a,#1f1f26);color:#fff;border-color:transparent;box-shadow:0 20px 60px rgba(51,51,255,.25);transform:scale(1.02)}
.pr-card.featured .ribbon{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--grad);color:#fff;padding:5px 14px;border-radius:99px;font-size:11px;font-weight:700;letter-spacing:.08em}
.pr-name{font-family:'PT Sans',sans-serif;font-size:22px;font-weight:700;letter-spacing:-.01em}
.pr-desc{font-size:13px;color:var(--muted);min-height:36px}
.pr-card.featured .pr-desc{color:#b8b8c8}
.pr-price{display:flex;align-items:baseline;gap:6px;padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pr-card.featured .pr-price{border-color:rgba(255,255,255,.1)}
.pr-price .v{font-family:'PT Sans',sans-serif;font-weight:700;font-size:36px;letter-spacing:-.02em;line-height:140%}
.pr-price .u{font-size:13px;color:var(--muted)}
.pr-card.featured .pr-price .u{color:#b8b8c8}
.pr-feats{list-style:none;display:flex;flex-direction:column;gap:8px;font-size:13px;color:var(--ink);flex:1}
.pr-card.featured .pr-feats{color:#d4d4e0}
.pr-feats li{display:flex;gap:8px}
.pr-feats li::before{content:"✓";color:var(--blue);font-weight:700}
.pr-card.featured .pr-feats li::before{color:#8a8aff}
.pr-card .btn{justify-content:center}

/* ─── Final CTA ─── */
.cta{background:linear-gradient(135deg,#15151a 0%,#1f1f26 100%);color:#fff;position:relative;overflow:hidden}
.cta::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 50%, rgba(51,51,255,.25),transparent 60%)}
.cta-inner{text-align:center;max-width:760px;margin:0 auto;position:relative}
.cta h2{font-family:'PT Sans',sans-serif;font-size:56px;font-weight:700;letter-spacing:-.025em;line-height:140%;margin-bottom:24px}
.cta p{font-size:18px;color:#d4d4e0;line-height:1.6;margin-bottom:36px}
.cta-ctas{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:20px}
.cta .fine{font-size:13px;color:var(--muted-2);font-style:italic}

/* ─── Footer ─── */
.ft{background:var(--ink);color:#d4d4e0;padding:80px 0 40px}
.ft-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:48px;margin-bottom:48px}
.ft-tag{font-size:14px;color:var(--muted-2);max-width:280px;margin-top:18px;font-style:italic;line-height:140%;}
.ft-col h5{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#fff;margin-bottom:18px}
.ft-col ul{list-style:none;display:flex;flex-direction:column;gap:10px;font-size:14px;color:var(--muted-2)}
.ft-col ul a:hover{color:#fff}
.ft-bottom{padding-top:32px;border-top:1px solid rgba(255,255,255,.08);display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--muted-2);flex-wrap:wrap;gap:16px}
.ft-social{display:flex;gap:16px}
.ft-social a{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.06);display:grid;place-items:center;transition:background .2s}
.ft-social a:hover{background:var(--grad)}
.ft-social svg{width:16px;height:16px}

.proof-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 20px 8px 8px;
    border-radius: 99px;
    /*background: rgba(255, 255, 255, .04);*/
    /*border: 1px solid rgba(255, 255, 255, .08);*/
    /*backdrop-filter: blur(20px);*/
    margin: 0 auto;
}

.proof-badge .avatars {
    display: flex;
}

.proof-badge .av.a1 {
    background: linear-gradient(135deg, #3333ff, #8a5aff);
}
.proof-badge .av:first-child {
    margin-left: 0;
}

.proof-badge .av {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid #15151a;
    margin-left: -10px;
    flex-shrink: 0;
    font-family: 'PT Sans', sans-serif;
    font-weight: 700;
    font-size: 12px;
    color: #fff;
    display: grid;
    place-items: center;
    letter-spacing: -.02em;
}

.proof-badge .av.a2 {
    background: linear-gradient(135deg, #ff5c33, #ff8c5a);
}

.proof-badge .av.a3 {
    background: linear-gradient(135deg, #17d2c7, #14fc95);
}

.proof-badge .av.a4 {
    background: linear-gradient(135deg, #c01dff, #8a5aff);
}

.proof-badge .av.more {
    background: #2a2a35;
    color: #a4a4b8;
    font-size: 11px;
}

.proof-badge .pulse {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #14fc95;
    box-shadow: 0 0 0 0 rgba(20, 252, 149, .6);
    animation: proofPulse 2s infinite;
    flex-shrink: 0;
}

.proof-badge .txt {
    font-size: 18px;
    color: #d4d4e0;
    line-height: 140%;
    text-align: center;
}

.proof-badge-leaf {
    flex-shrink: 0;
    width: 37px;
    height: 37px;
}

.proof-badge-leaf_right {
    transform: scaleX(-1);
}

.proof-badge .txt strong {
    color: #fff;
    font-weight: 700;
    font-family: 'PT Sans', sans-serif;
    background: var(--grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-size: 18px;
    letter-spacing: -.01em;
    padding-right: 2px;
}

@keyframes proofPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(20, 252, 149, .5);
    }
    70% {
        box-shadow: 0 0 0 8px rgba(20, 252, 149, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(20, 252, 149, 0);
    }
}

/* ─── Responsive ─── */
@media (max-width:1024px){
    .nav-links{display:none}
    .hero h1{font-size:56px}
    .hero .sub{
        font-size:18px;
        padding-left: 16px;
        padding-right: 16px;
    }

    .problem {
        padding-left: 16px;
        padding-right: 16px;
    }

    .prob-grid, .feature-row, .hero-mock-body{display: flex; flex-direction: column}
    .feature-row.flip .feature-text{order:0}
    .features-head h2,.prob h2,.cta h2{font-size:36px}
    .stat-card__number{font-size:56px}
    .how-steps,.uc-grid,.pr-grid,.int-options{grid-template-columns:1fr; padding-left: 16px; padding-right: 16px;}
    .how-steps::before{display:none}
    .cs-card{grid-template-columns:1fr;padding:32px}
    .uc-card:nth-child(4){grid-column:auto}
    .ft-top{grid-template-columns:1fr 1fr;gap:32px}
    .hm-side{display:none}
    .hero-mock-body{grid-template-columns:1fr;min-height:auto}
    /*.wrap{padding:0 24px}*/
    .nav-inner{padding:12px 24px}

    .proof-badge {
        padding: 8px 16px 8px 16px;
        gap: 0;
    }
}

@media screen and (max-width: 526px) {
    .proof-badge .txt {
        max-width: 250px;
    }

    .proof-badge .pulse {
        display: none;
    }

    .proof-badge .avatars {
        display: none;
    }

    .eyebrow {
        font-size: 12px;
    }

    .process-lms-title {
        text-align: center;
    }
}

:root{
    --muted-2:#a4a4b8;
    --grad:linear-gradient(90deg,#3333ff 0%,#ff5c33 100%);
}
.wrap{max-width:1200px;width:100%;margin:0 auto;position:relative}

.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

.grad-text-bottom {
    font-family: 'PT Sans', sans-serif;
    font-weight: 700;
    font-size: 36px;
    line-height: 140%;
    letter-spacing: -.015em;
    text-wrap: balance;
    margin: 0 auto;
    max-width: 32ch;
}

.btn{display:inline-flex;align-items:center;gap:10px;padding:16px 32px;border-radius:14px;font-weight:600;font-size:16px;cursor:pointer;border:none;font-family:inherit;transition:transform .15s, box-shadow .2s;white-space:nowrap;text-decoration:none;color:inherit}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--grad);color:#fff;box-shadow:0 12px 32px rgba(51,51,255,.25)}
.btn-primary:hover{box-shadow:0 16px 40px rgba(51,51,255,.35)}
.arr{font-family:'PT Sans',sans-serif;font-weight:700}

/* Glow halo around the card */
.stage{position:relative;border-radius:40px}
.stage::before{
    content:"";position:absolute;inset:-40px;pointer-events:none;
    background:
            radial-gradient(circle at 80% 20%,rgba(51,51,255,.20),transparent 50%),
            radial-gradient(circle at 20% 90%,rgba(255,92,51,.14),transparent 55%);
    filter:blur(20px);
    z-index:0;
}

.vB{
    position:relative;z-index:1;
    background:linear-gradient(135deg,#ffffff 0%,#f5f6ff 60%,#fff3ec 100%);
    border:1px solid #EBEBF5;
    box-shadow:0 20px 60px rgba(51,51,255,.08);
    border-radius:32px;padding:64px 80px;
    display:grid;grid-template-columns:1fr auto;gap:48px;align-items:center;
    overflow:hidden;
}
.vB::before{
    content:"";position:absolute;top:-80px;right:-80px;width:380px;height:380px;
    background:radial-gradient(circle,rgba(71,133,255,.18),transparent 65%);
    border-radius:50%;
}
.vB::after{
    content:"";position:absolute;bottom:-100px;left:-60px;width:340px;height:340px;
    background:radial-gradient(circle,rgba(255,92,51,.12),transparent 65%);
    border-radius:50%;
}

.vB-text{position:relative;z-index:1}
.vB-text h2{
    font-family:'PT Sans',sans-serif;font-weight:700;
    font-size:48px;line-height:140%;letter-spacing:-.02em;
    margin-bottom:16px;text-wrap:balance;color:#15151A;
}
.vB-text p{font-size:18px;color:#54546B;line-height:140%;max-width:680px}
.vB-text .badges{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.vB-text .badge{
    padding:6px 12px;border-radius:99px;
    background:rgba(255,255,255,.7);color:#15151A;
    border:1px solid #EBEBF5;
    font-size:16px;font-weight:600;letter-spacing:.02em;
    display:inline-flex;align-items:center;gap:6px;
    backdrop-filter:blur(8px);
}
.vB-text .badge::before{
    content:"";width:6px;height:6px;border-radius:50%;background:var(--grad);
}

.vB-cta{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.vB-cta .note{font-size:12px;color:var(--muted-2);font-style:italic}

@media (max-width:980px){
    .vB{grid-template-columns:1fr;gap:32px;padding:40px 28px;border-radius:24px}
    .vB-text h2{font-size:36px}
    .vB-text {
        .grad-text {
            font-size: 36px;
        }
    }
    .vB-cta{align-items:flex-start}
    .stage::before{inset:-20px}
}