/* Start:/local/templates/2025/assets/css/vision-page.css?1787142383116792*/
/*
 * СуперМаг Vision — стили продуктовой страницы.
 *
 * SAFE REFACTOR · v2.8.0
 * Эталон: принятая руководством версия 2.7.9.
 *
 * Сохранены без изменения:
 * - HTML/PHP-структура страницы;
 * - логика калькулятора и форм;
 * - значения принятого адаптива 2.7.x;
 * - мобильная split-композиция Hero;
 * - финальные desktop, tablet, mobile и XL-коррекции.
 *
 * Удалены только полностью перекрытые исторические Hero-слои
 * 2.5.7 и 2.6.0–2.6.6, а также два промежуточных правила,
 * которые не могли влиять на итоговый каскад.
 */

.vision-page {
    --vision-blue: #1450a3;
    --vision-blue-dark: #0d3d82;
    --vision-text: #151515;
    --vision-muted: #667085;
    --vision-line: #e4e7ec;
    --vision-bg: #f7f8fa;
    --vision-card: #ffffff;
    --vision-radius: 12px;
    color: var(--vision-text);
}

.vision-page,
.vision-page * {
    box-sizing: border-box;
}

.vision-page img {
    display: block;
    max-width: 100%;
}

.vision-section__title {
    margin: 0;
    color: var(--vision-text);
    font-size: clamp(36px, 4vw, 58px);
    line-height: 1.04;
    font-weight: 700;
    letter-spacing: -0.035em;
}

.vision-section__title--compact {
    font-size: clamp(30px, 3vw, 42px);
}

.vision-kicker {
    margin: 0 0 14px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.vision-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 50px;
    padding: 0 24px;
    border: 1px solid transparent;
    border-radius: 6px;
    font-size: 15px;
    line-height: 1;
    font-weight: 700;
    text-decoration: none;
    transition: transform .2s ease, background-color .2s ease, border-color .2s ease, color .2s ease;
}

.vision-button:hover {
    transform: translateY(-1px);
    text-decoration: none;
}

.vision-button--primary {
    border-color: var(--vision-blue);
    background: var(--vision-blue);
    color: #fff;
}

.vision-button--primary:hover {
    border-color: var(--vision-blue-dark);
    background: var(--vision-blue-dark);
    color: #fff;
}

.vision-button--light {
    border-color: #fff;
    background: #fff;
    color: #181818;
}

.vision-button--light:hover {
    background: #f4f4f4;
    color: #181818;
}

.vision-text-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--vision-blue);
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
}

.vision-text-link:hover {
    color: var(--vision-blue-dark);
    text-decoration: none;
}

/* Hero */

.vision-hero {
    position: relative;
    overflow: hidden;
}

/*
 * Базовая геометрия Hero.
 * Эти свойства не являются декоративными: поздние блоки меняют
 * inset/background/min-height, но опираются на этот positioning context.
 */
.vision-hero__background {
    position: absolute;
}

.vision-hero__container {
    position: relative;
    z-index: 1;
    display: block;
}

.vision-hero__content {
    padding: 72px 0 64px;
    color: #fff;
}

.vision-hero__title {
    margin: 0 0 24px;
    color: #fff;
/* Увеличиваем расстояние между строками */
    font-weight: 750;
}

.vision-hero__description {
    margin: 0;
    color: rgba(255,255,255,.9);
}

.vision-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

/* About */

.vision-about__text p {
    margin: 0 0 16px;
}

/* Calculator */

.vision-calculator {
    padding-top: 24px;
}

.vision-calculator__heading p {
    margin: 12px 0 0;
    color: var(--vision-muted);
    line-height: 1.6;
}

.vision-field__head {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    color: #344054;
    line-height: 1.4;
}

.vision-field__head span {
    color: #98a2b3;
}

.vision-field__label {
    color: #344054;
    font-size: 14px;
}

.vision-segments {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.vision-segment {
    min-height: 34px;
    padding: 0 14px;
    border: 1px solid #d0d5dd;
    border-radius: 999px;
    background: #fff;
    color: #344054;
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

.vision-segment.is-active {
    border-color: rgba(20,80,163,.24);
    background: #eef4ff;
    color: var(--vision-blue);
}

.vision-calculator__result {
    flex-direction: column;
}

.vision-result-card,
.vision-pilot-card {
    padding: 24px;
    border: 1px solid var(--vision-line);
    border-radius: 10px;
    background: #fff;
}

.vision-result-card h3,
.vision-pilot-card h3 {
    margin: 0 0 22px;
    font-size: 17px;
    line-height: 1.3;
}

.vision-result-card__current {
    margin: 22px 0 0;
    color: var(--vision-muted);
    font-size: 14px;
}

.vision-result-card__current strong {
    color: var(--vision-text);
}

.vision-pilot-card ul {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}

.vision-pilot-card li {
    position: relative;
    padding-left: 24px;
    color: #344054;
    line-height: 1.45;
}

.vision-pilot-card li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--vision-blue);
    font-weight: 800;
}

.vision-calculator__submit {
    align-self: flex-start;
}

/* Cards */

.vision-use,
.vision-interview,
.vision-cases,
.vision-trust,
.vision-request {
    background: #fff;
}

.vision-use__grid {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
}

.vision-use-card {
    overflow: hidden;
    border: 1px solid var(--vision-line);
    background: #fff;
}

.vision-use-card__media {
    aspect-ratio: 1.65;
    overflow: hidden;
    background: #eef1f4;
}

.vision-use-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}

.vision-use-card:hover img {
    transform: scale(1.025);
}

.vision-use-card__content h3 {
    margin: 0 0 10px;
    line-height: 1.25;
}

.vision-use-card__content p {
    margin: 0;
    color: #475467;
    font-size: 14px;
    line-height: 1.55;
}

.vision-section__footer-link {
    display: flex;
    justify-content: center;
    margin-top: 18px;
}

/* Interview */

.vision-interview__card {
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(0,1.02fr);
    overflow: hidden;
    background: #f7f8fa;
}

.vision-interview__media {
    min-height: 380px;
}

.vision-interview__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vision-interview__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 44px 46px;
}

.vision-interview__content h3 {
    margin: 22px 0 14px;
    font-size: 25px;
    line-height: 1.25;
}

.vision-interview__content p {
    margin: 0 0 24px;
    color: #475467;
    font-size: 15px;
    line-height: 1.65;
}

.vision-interview__content .vision-button {
    align-self: flex-start;
}

/* Cases */

.vision-cases__grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 22px;
}

.vision-case-card {
    position: relative;
    overflow: hidden;
    color: #fff;
    text-decoration: none;
}

.vision-case-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}

.vision-case-card:hover img {
    transform: scale(1.035);
}

.vision-case-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,rgba(0,0,0,.34) 0%,rgba(0,0,0,.08) 40%,rgba(0,0,0,.72) 100%);
}

.vision-case-card__content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 18px;
}

.vision-case-card__name {
    font-size: 15px;
    line-height: 1.35;
    font-weight: 700;
}

.vision-case-card__content strong {
    margin-top: auto;
    font-size: 46px;
    line-height: 1;
    letter-spacing: -0.04em;
}

.vision-case-card__content > span:last-child {
    margin-top: 5px;
    font-size: 14px;
}

/* Trust */

.vision-trust {
    padding-top: 24px;
}

.vision-trust__panel {
    padding: 34px 28px 28px;
    border-radius: var(--vision-radius);
    background: #f7f8fa;
}

.vision-trust__metrics {
    display: grid;
    grid-template-columns: repeat(6,minmax(0,1fr));
    gap: 26px;
    margin-top: 34px;
}

.vision-trust__metric strong {
    display: block;
    color: var(--vision-blue);
    font-size: 34px;
    line-height: 1;
    letter-spacing: -0.04em;
}

.vision-trust__metric span {
    display: block;
    margin-top: 8px;
    color: #475467;
    font-size: 12px;
    line-height: 1.35;
}

.vision-trust__logos {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-top: 40px;
    padding-top: 26px;
    border-top: 1px solid var(--vision-line);
    color: #666b73;
    font-size: 16px;
    font-weight: 800;
    filter: grayscale(1);
    opacity: .82;
}

.vision-trust__action {
    display: flex;
    justify-content: center;
    margin-top: 28px;
}

/* Final CTA */

.vision-request__panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 44px;
    padding: 42px;
    border-radius: var(--vision-radius);
    background: #0d223d;
    color: #fff;
}

.vision-request__content h2 {
    margin: 0;
    max-width: 720px;
    color: #fff;
    font-size: clamp(30px,3vw,46px);
    line-height: 1.08;
    letter-spacing: -0.035em;
}

.vision-request__content p {
    max-width: 720px;
    margin: 16px 0 0;
    color: rgba(255,255,255,.76);
    font-size: 16px;
    line-height: 1.6;
}

.vision-request__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

@media (max-width: 1199px) {
    .vision-hero__container {
        grid-template-columns: minmax(0,1fr) minmax(360px,.9fr);
    }

    .vision-use__grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }

    .vision-trust__metrics {
        grid-template-columns: repeat(3,minmax(0,1fr));
    }

    .vision-trust__logos {
        flex-wrap: wrap;
        justify-content: center;
    }
}

@media (max-width: 991px) {

    .vision-hero__container,
    .vision-about__grid,
    .vision-calculator__grid,
    .vision-interview__card {
        grid-template-columns: 1fr;
    }

    .vision-hero__content {
        padding: 78px 0 28px;
    }

    .vision-hero__device,
    .vision-hero__device img {
        max-height: 380px;
    }

    .vision-calculator__grid {
        gap: 28px;
    }

    .vision-cases__grid {
        grid-template-columns: 1fr;
    }

    .vision-request__panel {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 767px) {

    .vision-hero {
        min-height: auto;
    }

    .vision-hero__content {
        padding-top: 62px;
    }

    .vision-hero__description {
        font-size: 16px;
        line-height: 1.58;
    }

    .vision-hero__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .vision-button {
        width: 100%;
    }

    .vision-about__grid {
        gap: 32px;
    }

    .vision-about__text {
        font-size: 16px;
    }

    .vision-use__grid {
        grid-template-columns: 1fr;
    }

    .vision-interview__media {
        min-height: 280px;
    }

    .vision-interview__content {
        padding: 28px 20px;
    }

    .vision-trust__panel {
        padding: 26px 18px;
    }

    .vision-trust__metrics {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }

    .vision-trust__logos {
        justify-content: flex-start;
        overflow-x: auto;
        flex-wrap: nowrap;
    }

    .vision-trust__logos span {
        flex: 0 0 auto;
    }

    .vision-request__panel {
        padding: 28px 20px;
    }

    .vision-request__actions {
        width: 100%;
    }
}

/* Reveal animation
   Спокойное появление для B2B-продуктовой страницы:
   небольшое смещение, без масштабирования и параллакса. */

.vision-reveal-ready .vision-page [data-vision-reveal] {
    opacity: 0;
    transform: translate3d(0, 24px, 0);
    transition:
        opacity 600ms cubic-bezier(.22, 1, .36, 1),
        transform 700ms cubic-bezier(.22, 1, .36, 1);
    transition-delay: var(--vision-reveal-delay, 0ms);
    will-change: opacity, transform;
}

.vision-reveal-ready .vision-page [data-vision-reveal="hero"] {
    transform: translate3d(0, 16px, 0);
}

.vision-reveal-ready .vision-page [data-vision-reveal="hero-device"] {
    transform: translate3d(20px, 0, 0);
}

.vision-reveal-ready .vision-page [data-vision-reveal].is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

/* После завершения анимации браузеру больше не нужен отдельный слой. */
.vision-reveal-ready .vision-page [data-vision-reveal].is-visible {
    will-change: auto;
}

@media (max-width: 767px) {
    .vision-reveal-ready .vision-page [data-vision-reveal],
    .vision-reveal-ready .vision-page [data-vision-reveal="hero"],
    .vision-reveal-ready .vision-page [data-vision-reveal="hero-device"] {
        transform: translate3d(0, 16px, 0);
        transition-duration: 500ms, 560ms;
    }
}

@media (prefers-reduced-motion: reduce) {
    .vision-reveal-ready .vision-page [data-vision-reveal] {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

.vision-hero__container--single .vision-hero__description {
    max-width: 700px;
}

.vision-hero__device {
    display: none !important;
}

.vision-calculator__model-note,
.vision-calculator__hypothesis {
    color: var(--vision-muted);
    font-size: 13px;
    line-height: 1.55;
}

.vision-calculator__hypothesis {
    margin-top: 8px !important;
}

.vision-calculator__model-note {
    border-radius: 8px;
}

.vision-calculator__model-note strong {
    color: var(--vision-text);
}

@media (max-width: 991px) {
    .vision-hero__container {
        min-height: 590px;
        padding-top: 72px;
    }
}

@media (max-width: 767px) {
    .vision-hero__container {
        min-height: 520px;
        padding-top: 54px;
    }
}

/* Wider local container without affecting the global template */
.vision-page .container {
    width: min(1320px, calc(100% - 64px));
    max-width: 1320px;
}

/* Remove technical-looking grey separators between sections */
.vision-page {
    background: #fff;
}

.vision-section {
    padding: 76px 0;
}

/* HERO: account for the fixed/overlay site header */

.vision-hero__actions {
    margin-top: 34px;
}

/* ABOUT: balanced two-column editorial layout */

.vision-about__content {
    padding: 12px 0;
}

/* CALCULATOR: restore two-column layout and premium hierarchy */

.vision-calculator__heading p {
    max-width: 820px;
    font-size: 16px;
}

.vision-calculator__controls {
    gap: 14px;
}

.vision-field {
    grid-template-columns: minmax(0, 1fr) 210px;
    gap: 24px;
    min-height: 52px;
}

.vision-field__head {
    align-items: center;
    font-size: 14px;
}

.vision-field__input {
    height: 48px;
    padding: 0 16px;
    border-color: #cfd6df;
    border-radius: 8px;
    background: #fff;
    font-size: 16px;
}

.vision-field__input:hover {
    border-color: #aeb8c5;
}

.vision-calculator__model-note {
    margin-top: 10px;
    padding: 16px 18px;
    border: 1px solid #e8edf3;
    background: #f4f7fb;
}

.vision-result-card h3 {
    margin-bottom: 28px;
    font-size: 18px;
}

.vision-result-card__current {
    margin-top: 18px;
}

/* Cards and content rhythm */
.vision-section__head {
    margin-bottom: 30px;
}

.vision-use__grid {
    gap: 22px;
}

.vision-use-card {
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(16, 24, 40, .045);
}

.vision-use-card__content {
    padding: 22px;
}

.vision-use-card__content h3 {
    font-size: 20px;
}

.vision-interview__card {
    border-radius: 16px;
}

.vision-case-card {
    min-height: 260px;
    border-radius: 12px;
}

.vision-case-card img {
    min-height: 260px;
}

.vision-trust__panel,
.vision-request__panel {
    border-radius: 16px;
}

/* Responsive */
@media (max-width: 1199px) {
    .vision-page .container {
        width: min(1180px, calc(100% - 48px));
    }
}

@media (max-width: 991px) {
    .vision-page .container {
        width: calc(100% - 40px);
    }

    .vision-section {
        padding: 58px 0;
    }

    .vision-about__grid,
    .vision-calculator__grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    .vision-page .container {
        width: calc(100% - 32px);
    }

    .vision-section {
        padding: 44px 0;
    }

    .vision-field {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .vision-field__head {
        align-items: flex-end;
    }

    .vision-result-card,
    .vision-pilot-card {
        padding: 22px 18px;
    }
}

/*
 * Header текущего шаблона накладывается поверх контента.
 * Фотография начинается строго ниже него, а верхняя тёмная зона
 * визуально продолжает шапку без наложения на оборудование.
 */

.vision-hero__container--single .vision-hero__content {
    display: flex;
    flex-direction: column;
}

.vision-hero__title {
    margin-bottom: 28px;
    line-height: 1.08;
    letter-spacing: -.045em;
    text-wrap: balance;
}

.vision-hero__description {
    font-size: 19px;
    line-height: 1.65;
}

.vision-hero__proof {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    margin-top: 30px;
    color: rgba(255, 255, 255, .76);
    font-size: 13px;
    font-weight: 600;
}

.vision-hero__proof span {
    position: relative;
    padding-left: 16px;
}

.vision-hero__proof span::before {
    content: "";
    position: absolute;
    top: .55em;
    left: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #4f8fe8;
}

/* Первый белый блок должен начинаться сразу после hero, без серой прослойки. */
.vision-about {
    border-top: 0;
}

/* Более сильная продуктовая композиция второго блока. */

/* Чуть плотнее ритм после калькулятора: страница остаётся воздушной,
   но перестаёт выглядеть как набор разнесённых демо-блоков. */
.vision-use,
.vision-interview,
.vision-cases,
.vision-trust,
.vision-request {
    padding-top: 68px;
    padding-bottom: 68px;
}

.vision-use-card,
.vision-case-card,
.vision-interview__card,
.vision-trust__panel,
.vision-request__panel {
    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}

.vision-use-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 42px rgba(16, 24, 40, .085);
}

.vision-case-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 42px rgba(16, 24, 40, .12);
}

/* Не даём sticky-результату калькулятора залезать под фиксированную шапку. */


.vision-about {
    padding: 82px 0 92px;
    background: #fff;
}

.vision-about__grid {
    display: grid;
    align-items: center;
}

.vision-about__content {
    min-width: 0;
}

.vision-about__eyebrow {
    margin: 0 0 18px;
    color: var(--vision-blue);
    font-size: 13px;
    line-height: 1.3;
    font-weight: 750;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.vision-about__title {
    margin: 0;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
}

.vision-about__text {
    max-width: 570px;
    margin-top: 30px;
    color: #46515f;
    font-size: 17px;
    line-height: 1.72;
}

@media (max-width: 1199px) {
    .vision-about__grid {
        grid-template-columns: minmax(0, 47fr) minmax(0, 53fr);
        gap: 48px;
    }

    .vision-about__title {
        font-size: clamp(42px, 4vw, 54px);
    }
}

@media (max-width: 991px) {
    .vision-about {
        padding: 64px 0 72px;
    }

    .vision-about__content,
    .vision-about__title,
    .vision-about__text {
        max-width: 700px;
    }
}

@media (max-width: 767px) {
    .vision-about {
        padding: 52px 0 60px;
    }
}

/*
 * Причина прежнего сдвига:
 * процентная колонка была уже фактической ширины слова
 * «видеораспознавание?» в Montserrat Bold.
 * Теперь текстовая колонка имеет гарантированную ширину.
 */
.vision-about__grid {
    grid-template-columns: 620px minmax(0, 1fr);
    gap: 64px;
}

.vision-about__content {
    width: 620px;
    max-width: 100%;
}

.vision-about__title {
    width: 620px;
    max-width: 100%;
    font-size: 54px;
    line-height: 1.06;
    letter-spacing: -1.8px;
    text-wrap: nowrap;
}

.vision-about__title span {
    display: block;
    white-space: nowrap;
}

/*
 * У fallback-шрифта и Montserrat разные метрики.
 * Достаточная ширина колонки предотвращает layout shift
 * после загрузки веб-шрифта.
 */
.vision-about__media {
    min-width: 0;
}

.vision-about__media img {
    opacity: 1;
    visibility: visible;
}

/* Отключаем reveal только у изображения этого блока:
   карточка не должна несколько мгновений выглядеть пустой. */
.vision-reveal-ready .vision-page .vision-about__media[data-vision-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
}

@media (max-width: 1279px) {
    .vision-about__grid {
        grid-template-columns: 560px minmax(0, 1fr);
        gap: 48px;
    }

    .vision-about__content {
        width: 560px;
    }

    .vision-about__title {
        width: 560px;
        font-size: 49px;
        letter-spacing: -1.5px;
    }
}

@media (max-width: 1099px) {
    .vision-about__grid {
        grid-template-columns: 500px minmax(0, 1fr);
        gap: 38px;
    }

    .vision-about__content {
        width: 500px;
    }

    .vision-about__title {
        width: 500px;
        font-size: 44px;
        letter-spacing: -1.3px;
    }
}

@media (max-width: 991px) {
    .vision-about__grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .vision-about__content,
    .vision-about__title {
        width: auto;
        max-width: 700px;
    }

    .vision-about__title {
        font-size: 52px;
    }
}

@media (max-width: 767px) {
    .vision-about__title {
        font-size: clamp(35px, 9.5vw, 44px);
        letter-spacing: -1px;
        text-wrap: wrap;
    }

    .vision-about__title span {
        white-space: normal;
        overflow-wrap: anywhere;
    }
}

/* =========================================================
   Vision: корректное кадрирование Hero под прозрачной шапкой
   ========================================================= */

.vision-page {
    --vision-header-height: 126px;
}

/* Hero начинается от самого верха, но становится немного выше */
.header.header--vision + main .vision-hero {
    min-height: 840px !important;
}

/* Опускаем фоновое изображение, чтобы верхний дисплей
   не попадал под прозрачную шапку */
.header.header--vision + main .vision-hero__background {

    background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.82) 0%,
            rgba(0, 0, 0, 0.60) 36%,
            rgba(0, 0, 0, 0.16) 69%,
            rgba(0, 0, 0, 0.08) 100%
        ),
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.05) 0%,
            rgba(0, 0, 0, 0.02) 72%,
            rgba(0, 0, 0, 0.20) 100%
        ),
        url("/upload/vision/vision-hero-desktop.webp")
        center calc(50% + 58px) / cover no-repeat !important;
}

/* Контент получает безопасную зону под шапкой */
.header.header--vision + main .vision-hero__container {
    min-height: 840px !important;
}

.header.header--vision + main
.vision-hero__container--single
.vision-hero__content {
    min-height: 840px !important;
    padding-top: calc(var(--vision-header-height) + 36px) !important;
    padding-bottom: 64px !important;
}

@media (max-width: 1199px) {
    .vision-page {
        --vision-header-height: 112px;
    }

    .header.header--vision + main .vision-hero,
    .header.header--vision + main .vision-hero__container,
    .header.header--vision + main
    .vision-hero__container--single
    .vision-hero__content {
        min-height: 760px !important;
    }

    .header.header--vision + main .vision-hero__background {
        background-position: 58% calc(50% + 48px) !important;
    }
}

@media (max-width: 767px) {
    .vision-page {
        --vision-header-height: 82px;
    }

    .header.header--vision + main .vision-hero,
    .header.header--vision + main .vision-hero__container,
    .header.header--vision + main
    .vision-hero__container--single
    .vision-hero__content {
        min-height: 680px !important;
    }

    .header.header--vision + main .vision-hero__background {
        background-position: 66% calc(50% + 32px) !important;
    }

    .header.header--vision + main
    .vision-hero__container--single
    .vision-hero__content {
        padding-top: calc(var(--vision-header-height) + 24px) !important;
        padding-bottom: 40px !important;
    }
}

/* =========================================================
   Vision: шапка поверх Hero без белого служебного отступа
   ========================================================= */

/* Убираем общий отступ шаблона перед содержимым */
.header.header--vision + main {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Убираем локальный отступ страницы */
.header.header--vision + main > .vision-page {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Hero должен начинаться непосредственно от верха страницы */

.header.header--vision {
    position: absolute !important;
    top: 0;
    left: 0;
    z-index: 101;
    width: 100%;

    background: linear-gradient(
        180deg,
        rgba(18, 18, 18, 0.68) 0%,
        rgba(18, 18, 18, 0.38) 58%,
        rgba(18, 18, 18, 0) 100%
    ) !important;

    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.header.header--vision + main,
.header.header--vision + main > .vision-page {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.header.header--vision + main .vision-hero {
    margin-top: 0 !important;
}

.header.header--vision + main .vision-hero__background {
    inset: 0 !important;
}

.vision-calculator {
    padding: 72px 0 88px;
    background: #fff;
}

.vision-calculator__panel {
    padding: 48px;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    background: #f8fafc;
    box-shadow: 0 28px 70px rgba(20, 80, 163, .13);
}

.vision-calculator__heading {
    max-width: 820px;
    margin-bottom: 38px;
}

.vision-calculator__eyebrow {
    margin: 0 0 12px !important;
    color: var(--vision-blue) !important;
    font-size: 13px !important;
    line-height: 1.3 !important;
    font-weight: 750;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.vision-calculator__lead {
    margin: 14px 0 0 !important;
    color: #667085 !important;
    font-size: 17px !important;
    line-height: 1.55 !important;
}

.vision-calculator__grid {
    display: grid;
    align-items: start;
}

.vision-calculator__controls {
    display: block;
}

.vision-calculator__fields {
    display: grid;
    gap: 14px;
}

.vision-calculator .vision-field {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 220px;
    gap: 24px;
    min-height: 52px;
}

.vision-calculator .vision-field__label {
    color: #344054;
    font-size: 14px;
    line-height: 1.45;
    font-weight: 600;
}

.vision-field__control {
    position: relative;
}

.vision-calculator .vision-field__input {
    width: 100%;
    height: 48px;
    padding: 0 76px 0 15px;
    border: 1px solid #cfd7e3;
    border-radius: 9px;
    background: #fff;
    color: #101828;
    font-size: 16px;
    font-weight: 600;
    outline: none;
}

.vision-calculator .vision-field__input:focus {
    border-color: var(--vision-blue);
    box-shadow: 0 0 0 3px rgba(20, 80, 163, .10);
}

.vision-field__unit {
    position: absolute;
    top: 50%;
    right: 14px;
    max-width: 64px;
    overflow: hidden;
    color: #98a2b3;
    font-size: 12px;
    line-height: 1;
    white-space: nowrap;
    transform: translateY(-50%);
    pointer-events: none;
}

.vision-scenario {
    margin: 28px 0 0;
    padding: 0;
    border: 0;
}

.vision-scenario legend {
    color: #344054;
    line-height: 1.4;
    font-weight: 700;
}

.vision-scenario__buttons {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.vision-scenario__button {
    border: 1px solid #d8e0ea;
    border-radius: 10px;
    background: #fff;
    color: #475467;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition:
        border-color .2s ease,
        background-color .2s ease,
        box-shadow .2s ease;
}

.vision-scenario__button span,
.vision-scenario__button strong {
    display: block;
}

.vision-scenario__button strong {
    margin-top: 5px;
}

.vision-scenario__button:hover {
    border-color: #aebed2;
}

.vision-scenario__button.is-active {
    border-color: rgba(20, 80, 163, .38);
    background: #eef4ff;
    box-shadow: inset 0 0 0 1px rgba(20, 80, 163, .08);
}

.vision-scenario__custom-toggle {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--vision-blue);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.vision-scenario__custom {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 160px;
    align-items: center;
    gap: 20px;
    margin-top: 14px;
    padding: 14px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #fff;
}

.vision-scenario__custom[hidden] {
    display: none;
}

.vision-scenario__custom label {
    color: #475467;
    font-size: 13px;
    font-weight: 600;
}

.vision-calculator__warning {
    margin-top: 18px;
    padding: 12px 14px;
    border: 1px solid #f1d7a6;
    border-radius: 9px;
    background: #fffbeb;
    color: #8a5a00;
    font-size: 13px;
    line-height: 1.45;
}

.vision-calculator__warning p {
    margin: 0;
}

.vision-calculator__warning p + p {
    margin-top: 5px;
}

.vision-calculator__result {
    position: sticky;
    top: 146px;
    display: grid;
    gap: 16px;
}

.vision-result-card {
    padding: 30px;
    border: 1px solid #d7e3f1;
    border-radius: 16px;
    background:
        linear-gradient(145deg, #f4f8ff 0%, #ffffff 78%);
    box-shadow: 0 18px 46px rgba(20, 80, 163, .08);
}

.vision-result-card__eyebrow {
    margin: 0 0 24px;
    color: #344054;
    font-size: 15px;
    line-height: 1.4;
    font-weight: 750;
}

.vision-result-card__metric strong {
    display: block;
}

.vision-result-card__metric span {
    display: block;
    margin-top: 8px;
}

.vision-result-card__facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    padding-top: 22px;
    border-top: 1px solid #dfe7f1;
}

.vision-result-card__facts span,
.vision-result-card__facts strong {
    display: block;
}

.vision-result-card__facts span {
    color: #667085;
    font-size: 12px;
    line-height: 1.35;
}

.vision-result-card__facts strong {
    margin-top: 5px;
    color: #101828;
    font-size: 14px;
    line-height: 1.35;
}

.vision-result-card__coverage {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 20px;
}

.vision-result-card__coverage span {
    padding: 7px 10px;
    border-radius: 999px;
    background: #edf3fa;
    color: #475467;
    font-size: 12px;
    line-height: 1;
    font-weight: 650;
}

.vision-result-card.is-updating {
    animation: vision-result-update 360ms ease;
}

@keyframes vision-result-update {
    0% {
        transform: translateY(0);
        box-shadow: 0 18px 46px rgba(20, 80, 163, .08);
    }
    45% {
        transform: translateY(-2px);
        box-shadow: 0 22px 58px rgba(20, 80, 163, .16);
    }
    100% {
        transform: translateY(0);
        box-shadow: 0 18px 46px rgba(20, 80, 163, .08);
    }
}

.vision-pilot-card {
    border: 1px solid #e1e7ef;
    border-radius: 14px;
    background: #fff;
}

.vision-pilot-card h3 {
    margin: 0 0 16px;
    font-size: 17px;
}

.vision-pilot-card ul {
    gap: 8px;
}

.vision-calculator__submit {
    justify-self: start;
    min-width: 240px;
}

.vision-calculator__disclaimer {
    margin: 26px 0 0;
    color: #98a2b3;
    font-size: 12px;
    line-height: 1.55;
}

@media (max-width: 1199px) {

    .vision-calculator .vision-field {
        grid-template-columns: minmax(0, 1fr) 190px;
    }
}

@media (max-width: 991px) {
    .vision-calculator__panel {
        padding: 34px 28px;
    }

    .vision-calculator__result {
        position: static;
    }
}

@media (max-width: 767px) {
    .vision-calculator {
        padding: 52px 0 64px;
    }

    .vision-calculator__panel {
        padding: 26px 18px;
        border-radius: 15px;
    }

    .vision-calculator .vision-field {
        grid-template-columns: 1fr;
        gap: 7px;
    }

    .vision-scenario__buttons {
        grid-template-columns: 1fr;
    }

    .vision-scenario__custom {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .vision-result-card {
        padding: 24px 18px;
    }

    .vision-result-card__metrics,
    .vision-result-card__facts {
        grid-template-columns: 1fr;
    }

    .vision-calculator__submit {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .vision-result-card.is-updating {
        animation: none;
    }
}

.vision-calculator__configuration {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 18px;
    padding: 14px 16px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #fff;
}

.vision-calculator__configuration span {
    color: #667085;
    font-size: 13px;
}

.vision-calculator__configuration strong {
    color: #101828;
    font-size: 14px;
    text-align: right;
}

.vision-result-card__facts > div {
    min-width: 0;
}

.vision-result-card__facts strong {
    overflow-wrap: anywhere;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 767px) {
    .vision-result-card__metrics {
        grid-template-columns: 1fr;
    }
}

.vision-calculator .vision-result-card .vision-result-card__metrics {
    display: block !important;
    grid-template-columns: none !important;
    gap: 0 !important;
}

.vision-calculator .vision-result-card .vision-result-card__metric {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 22px 0 !important;
    gap: 8px !important;
}

.vision-calculator .vision-result-card .vision-result-card__metric:first-child {
    padding-top: 0 !important;
}

.vision-calculator .vision-result-card .vision-result-card__metric + .vision-result-card__metric {
    border-top: 1px solid #dfe7f1 !important;
}

.vision-calculator .vision-result-card .vision-result-card__metric span {
    order: 1 !important;
    display: block !important;
    max-width: none !important;
    margin: 0 !important;
    color: #667085 !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
    font-weight: 650 !important;
}

.vision-calculator .vision-result-card .vision-result-card__metric strong {
    order: 2 !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    color: var(--vision-blue) !important;
    font-size: clamp(42px, 4vw, 58px) !important;
    line-height: .98 !important;
    letter-spacing: -.045em !important;
    white-space: nowrap !important;
    text-align: left !important;
    font-variant-numeric: tabular-nums !important;
}

.vision-calculator .vision-result-card .vision-result-card__facts {
    margin-top: 10px !important;
}

@media (max-width: 1199px) {
    .vision-calculator .vision-result-card .vision-result-card__metric strong {
        font-size: clamp(38px, 4vw, 52px) !important;
    }
}

@media (max-width: 767px) {
    .vision-calculator .vision-result-card .vision-result-card__metric {
        padding: 18px 0 !important;
    }

    .vision-calculator .vision-result-card .vision-result-card__metric strong {
        font-size: 40px !important;
        white-space: normal !important;
    }
}

.vision-calculator__grid {
    grid-template-columns: minmax(0, 1.08fr) minmax(430px, .92fr);
    gap: 48px;
}

.vision-scenario {
    margin-top: 30px;
}

.vision-scenario legend {
    max-width: 460px;
    margin-bottom: 14px;
    font-size: 15px;
}

.vision-scenario__buttons {
    gap: 10px;
}

.vision-scenario__button {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 74px;
    padding: 12px 14px;
}

.vision-scenario__button strong {
    order: 1;
    margin: 0 0 7px;
    color: var(--vision-blue);
    font-size: 22px;
    line-height: 1;
}

.vision-scenario__button span {
    order: 2;
    color: #475467;
    font-size: 12px;
    line-height: 1.25;
}

.vision-scenario__button.is-active strong {
    color: var(--vision-blue);
}

.vision-scenario__note {
    max-width: 520px;
    margin: 12px 0 0;
    color: #7b8797;
    font-size: 12px;
    line-height: 1.45;
}

.vision-scenario__custom-toggle {
    margin-top: 10px;
}

/* Уплотняем правую колонку, чтобы её высота была ближе к левой */
.vision-pilot-card {
    padding: 22px 24px;
}

.vision-pilot-card h3 {
    margin-bottom: 14px;
}

.vision-pilot-card ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 20px;
    row-gap: 8px;
}

.vision-pilot-card li {
    font-size: 13px;
}

.vision-calculator__submit {
    min-height: 48px;
}

.vision-calculator__disclaimer {
    max-width: 760px;
    margin-top: 20px;
}

@media (max-width: 1199px) {
    .vision-calculator__grid {
        grid-template-columns: minmax(0, 1fr) minmax(400px, .88fr);
        gap: 34px;
    }
}

@media (max-width: 991px) {
    .vision-calculator__grid {
        grid-template-columns: 1fr;
    }

    .vision-pilot-card ul {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .vision-scenario__buttons,
    .vision-pilot-card ul {
        grid-template-columns: 1fr;
    }

    .vision-scenario__button {
        min-height: 62px;
    }
}

.vision-page .vision-about__media {
    display: block;
    height: 500px;
    min-height: 500px;
    padding: 0;
    overflow: hidden;
    border-radius: 18px;
    background: #f4f6f8;
}

.vision-page .vision-about__media::after {
    display: none;
}

.vision-page .vision-about__media img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    min-height: 0;
    border-radius: inherit;
    object-fit: cover;
    object-position: 50% 50%;
}

@media (max-width: 1199px) {
    .vision-page .vision-about__media {
        height: 460px;
        min-height: 460px;
    }
}

@media (max-width: 991px) {
    .vision-page .vision-about__media {
        height: auto;
        min-height: 0;
        aspect-ratio: 1 / 1;
    }
}

@media (max-width: 767px) {
    .vision-page .vision-about__media {
        height: auto;
        min-height: 0;
        aspect-ratio: 1 / 1;
        border-radius: 14px;
    }
}

.vision-calculator .vision-field {
    align-items: start;
}

.vision-calculator .vision-field__label {
    padding-top: 14px;
}

.vision-calculator .vision-field__help {
    grid-column: 1 / 2;
    max-width: 100%;
    margin: -12px 0 4px;
    padding-right: 18px;
    color: #7b8797;
    font-size: 12px;
    line-height: 1.45;
}

@media (max-width: 767px) {
    .vision-calculator .vision-field__label {
        padding-top: 0;
    }

    .vision-calculator .vision-field__help {
        grid-column: 1 / -1;
        margin-top: -2px;
        padding-right: 0;
    }
}

.vision-field__error {
    margin: 8px 0 0;
    color: #d93025;
    font-size: 14px;
    line-height: 1.45;
}

.vision-field__error-link {
    color: #d93025;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.vision-field__input.is-error {
    border-color: #d93025;
    box-shadow: 0 0 0 3px rgba(217, 48, 37, 0.12);
}

/* Спокойное ограничение поля "Устройств Vision на один магазин" */

.vision-field__notice {
    grid-column: 2;
    min-height: 42px;
    margin: -10px 0 0;
    color: #1450a3;
    font-size: 12px;
    line-height: 1.35;
    opacity: 0;
    visibility: hidden;
    transition: opacity .18s ease, visibility .18s ease;
}

.vision-field__notice.is-visible {
    opacity: 1;
    visibility: visible;
}

.vision-field__notice-link {
    color: #1450a3;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.vision-field__input.is-limit {
    border-color: #1450a3;
    box-shadow: 0 0 0 3px rgba(20, 80, 163, .12);
}

@media (max-width: 767px) {
    .vision-field__notice {
        grid-column: 1;
        min-height: auto;
        margin-top: 2px;
    }
}

/* Vision calculator — спокойное ограничение 30 устройств
   Фикс совместимости: работает и с новым is-limit, и со старым is-error. */

.vision-calculator .vision-field__input.is-error {
    border-color: #1450a3;
    box-shadow: 0 0 0 3px rgba(20, 80, 163, .12);
}

.vision-calculator .vision-field__notice[hidden] {
    display: block !important;
}

.vision-calculator .vision-field__notice.is-visible,
.vision-calculator .vision-field:has([data-vision-field="devicesPerStore"].is-limit) .vision-field__notice,
.vision-calculator .vision-field:has([data-vision-field="devicesPerStore"].is-error) .vision-field__notice {
    opacity: 1 !important;
    visibility: visible !important;
}

.vision-calculator .vision-field:has([data-vision-field="devicesPerStore"]) {
    align-items: start;
}

.vision-calculator .vision-field:has([data-vision-field="devicesPerStore"]) .vision-field__label {
    padding-top: 14px;
}

.vision-calculator .vision-field:has([data-vision-field="devicesPerStore"]) .vision-field__notice {
    grid-column: 2;
    min-height: 42px;
    margin: -10px 0 0;
    color: #1450a3;
    font-size: 12px;
    line-height: 1.35;
}

@media (max-width: 767px) {
    .vision-calculator .vision-field:has([data-vision-field="devicesPerStore"]) .vision-field__notice {
        grid-column: 1;
        min-height: auto;
        margin-top: 2px;
    }
}
/* Vision calculator — подсказка без влияния на высоту строки */

.vision-calculator .vision-field--devices .vision-field__notice.is-visible,
.vision-calculator .vision-field--devices:has([data-vision-field="devicesPerStore"].is-limit) .vision-field__notice,
.vision-calculator .vision-field--devices:has([data-vision-field="devicesPerStore"].is-error) .vision-field__notice {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0);
    pointer-events: auto;
}

.vision-calculator .vision-field--devices .vision-field__notice-link {
    color: #1450a3;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Vision calculator — popover-подсказка с закрытием */

.vision-calculator .vision-field--devices {
    position: relative;
}

.vision-calculator .vision-field--devices .vision-field__notice {
    position: absolute;
    top: 54px;
    right: 0;
    z-index: 40;

    width: min(360px, 100%);
    min-height: 0 !important;
    margin: 0 !important;
    padding: 12px 38px 12px 14px;

    border: 1px solid rgba(20, 80, 163, .18);
    border-radius: 10px;
    background: #fff;

    color: #1450a3;
    font-size: 12px;
    line-height: 1.4;

    box-shadow: 0 14px 34px rgba(16, 24, 40, .14);

    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(-4px);
    pointer-events: none;

    transition:
        opacity .18s ease,
        visibility .18s ease,
        transform .18s ease;
}

.vision-calculator .vision-field--devices.is-notice-open .vision-field__notice {
    transform: translateY(0);
}

.vision-calculator .vision-field--devices.is-notice-dismissed .vision-field__notice {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none;
}

.vision-calculator .vision-field__notice-text {
    padding-right: 4px;
}

.vision-calculator .vision-field__notice-link {
    color: #1450a3;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.vision-calculator .vision-field__notice-close {
    position: absolute;
    top: 7px;
    right: 8px;

    width: 24px;
    height: 24px;
    padding: 0;

    border: 0;
    border-radius: 50%;
    background: #eef4ff;

    color: #1450a3;
    font-size: 18px;
    line-height: 22px;
    font-weight: 500;

    cursor: pointer;
}

.vision-calculator .vision-field__notice-close:hover {
    background: #dbeafe;
}

.vision-calculator .vision-field__input.is-limit,
.vision-calculator .vision-field__input.is-error {
    border-color: #1450a3;
    box-shadow: 0 0 0 3px rgba(20, 80, 163, .12);
}

@media (max-width: 767px) {
    .vision-calculator .vision-field--devices .vision-field__notice {
        top: calc(100% + 6px);
        left: 0;
        right: auto;
        width: 100%;
    }
}

/* Vision calculator — закрытие popover-подсказки */

.vision-calculator .vision-field--devices.is-notice-dismissed .vision-field__notice,
.vision-calculator .vision-field--devices.is-notice-dismissed:has([data-vision-field="devicesPerStore"].is-limit) .vision-field__notice,
.vision-calculator .vision-field--devices.is-notice-dismissed:has([data-vision-field="devicesPerStore"].is-error) .vision-field__notice {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(-4px) !important;
}

.vision-calculator .vision-field--devices.is-notice-open .vision-field__notice {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* =========================================================
   Vision 2.3.2 — FINAL MOBILE ADAPTIVE LAYER
   Только адаптив. Структура, тексты и логика страницы не меняются.
   Этот блок намеренно расположен в самом конце файла и перекрывает
   накопленные ранее mobile-правила без вмешательства в desktop.
   ========================================================= */

@media (max-width: 767px) {
    /* Общая мобильная сетка */
    .vision-page .container {
        width: calc(100% - 32px) !important;
        max-width: none !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .vision-section {
        padding-top: 48px !important;
        padding-bottom: 48px !important;
    }

    .vision-section__title,
    .vision-section__title--compact {
        font-size: clamp(29px, 8.1vw, 38px) !important;
        line-height: 1.08 !important;
        letter-spacing: -.035em !important;
    }

    /* -----------------------------------------------------
       HERO
       ----------------------------------------------------- */
    .vision-page {
        --vision-header-height: 82px;
    }

    .header.header--vision + main .vision-hero,
    .header.header--vision + main .vision-hero__container,
    .header.header--vision + main
    .vision-hero__container--single
    .vision-hero__content {
        min-height: 700px !important;
    }

    .header.header--vision + main .vision-hero__background {
        inset: 0 !important;
        background:
            linear-gradient(
                90deg,
                rgba(0,0,0,.86) 0%,
                rgba(0,0,0,.72) 44%,
                rgba(0,0,0,.30) 68%,
                rgba(0,0,0,.08) 100%
            ),
            linear-gradient(
                180deg,
                rgba(0,0,0,.10) 0%,
                rgba(0,0,0,.02) 62%,
                rgba(0,0,0,.28) 100%
            ),
            url("/upload/vision/vision-hero-desktop.webp")
            77% calc(50% + 28px) / cover no-repeat !important;
    }

    .header.header--vision + main
    .vision-hero__container--single
    .vision-hero__content {
        justify-content: flex-start !important;
        width: 100% !important;
        max-width: 100% !important;
        padding-top: calc(var(--vision-header-height) + 62px) !important;
        padding-bottom: 42px !important;
    }

    .vision-page .vision-kicker {
        margin-bottom: 18px !important;
        font-size: 13px !important;
        line-height: 1.3 !important;
    }

    .vision-page .vision-hero__title {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 26px !important;
        font-size: clamp(29px, 8.2vw, 35px) !important;
        line-height: 1.09 !important;
        letter-spacing: -.045em !important;
        text-wrap: initial !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
        hyphens: none !important;
    }

    .vision-page .vision-hero__description {
        width: 100% !important;
        max-width: 335px !important;
        font-size: 17px !important;
        line-height: 1.58 !important;
    }

    .vision-page .vision-hero__actions {
        width: 100% !important;
        max-width: 335px !important;
        margin-top: 30px !important;
        gap: 12px !important;
    }

    .vision-page .vision-hero__actions .vision-button {
        width: 100% !important;
        min-height: 52px !important;
        padding-left: 18px !important;
        padding-right: 18px !important;
    }

    /* -----------------------------------------------------
       ABOUT
       ----------------------------------------------------- */
    .vision-about {
        padding-top: 52px !important;
        padding-bottom: 58px !important;
    }

    .vision-about__grid {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }

    .vision-about__content,
    .vision-about__title,
    .vision-about__text {
        width: 100% !important;
        max-width: 100% !important;
    }

    .vision-about__eyebrow {
        margin-bottom: 14px !important;
        font-size: 12px !important;
    }

    .vision-about__title {
        font-size: clamp(28px, 7.8vw, 34px) !important;
        line-height: 1.08 !important;
        letter-spacing: -.035em !important;
        text-wrap: initial !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
    }

    .vision-about__title span {
        white-space: normal !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
    }

    .vision-about__text {
        margin-top: 22px !important;
        font-size: 15px !important;
        line-height: 1.65 !important;
    }

    .vision-page .vision-about__media {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        aspect-ratio: 1 / 1 !important;
        padding: 0 !important;
        border-radius: 14px !important;
    }

    .vision-page .vision-about__media img {
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        max-width: none !important;
        max-height: none !important;
        object-fit: cover !important;
        object-position: center center !important;
    }

    /* -----------------------------------------------------
       CALCULATOR
       ----------------------------------------------------- */
    .vision-calculator {
        padding: 50px 0 58px !important;
    }

    .vision-calculator__panel {
        padding: 24px 16px !important;
        border-radius: 14px !important;
    }

    .vision-calculator__heading {
        margin-bottom: 28px !important;
    }

    .vision-calculator__eyebrow {
        font-size: 12px !important;
    }

    .vision-calculator__lead {
        margin-top: 10px !important;
        font-size: 14px !important;
        line-height: 1.5 !important;
    }

    .vision-calculator__grid {
        grid-template-columns: 1fr !important;
        gap: 28px !important;
    }

    .vision-calculator__fields {
        gap: 18px !important;
    }

    .vision-calculator .vision-field {
        grid-template-columns: 1fr !important;
        gap: 7px !important;
        min-height: 0 !important;
    }

    .vision-calculator .vision-field__label {
        padding-top: 0 !important;
        font-size: 13px !important;
        line-height: 1.4 !important;
    }

    .vision-calculator .vision-field__help {
        grid-column: 1 !important;
        margin: 1px 0 0 !important;
        padding-right: 0 !important;
        font-size: 11.5px !important;
        line-height: 1.45 !important;
    }

    .vision-calculator .vision-field__input {
        height: 48px !important;
        font-size: 16px !important;
    }

    .vision-calculator__configuration {
        align-items: flex-start !important;
        flex-direction: column !important;
        gap: 5px !important;
        margin-top: 18px !important;
        padding: 13px 14px !important;
    }

    .vision-calculator__configuration strong {
        text-align: left !important;
        overflow-wrap: anywhere !important;
    }

    .vision-scenario {
        margin-top: 24px !important;
    }

    .vision-scenario legend {
        margin-bottom: 12px !important;
        font-size: 14px !important;
    }

    .vision-scenario__buttons {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 7px !important;
    }

    .vision-scenario__button {
        min-height: 70px !important;
        padding: 10px 8px !important;
    }

    .vision-scenario__button strong {
        margin-bottom: 6px !important;
        font-size: 20px !important;
    }

    .vision-scenario__button span {
        font-size: 10.5px !important;
        line-height: 1.25 !important;
    }

    .vision-scenario__note {
        margin-top: 10px !important;
        font-size: 11.5px !important;
    }

    .vision-scenario__custom {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    .vision-calculator__result {
        position: static !important;
        top: auto !important;
        gap: 14px !important;
    }

    .vision-result-card {
        padding: 22px 16px !important;
        border-radius: 13px !important;
    }

    .vision-result-card__eyebrow {
        margin-bottom: 18px !important;
        font-size: 13px !important;
    }

    .vision-calculator .vision-result-card .vision-result-card__metric {
        padding: 18px 0 !important;
    }

    .vision-calculator .vision-result-card .vision-result-card__metric strong {
        font-size: clamp(34px, 10.5vw, 44px) !important;
        line-height: 1 !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }

    .vision-result-card__facts {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        padding-top: 18px !important;
    }

    .vision-result-card__coverage {
        gap: 6px !important;
        margin-top: 16px !important;
    }

    .vision-result-card__coverage span {
        font-size: 11px !important;
        line-height: 1.25 !important;
    }

    .vision-pilot-card {
        padding: 20px 16px !important;
    }

    .vision-pilot-card ul {
        grid-template-columns: 1fr !important;
    }

    .vision-calculator__submit {
        width: 100% !important;
        min-width: 0 !important;
    }

    .vision-calculator__disclaimer {
        margin-top: 18px !important;
        font-size: 11px !important;
    }

    /* Popover ограничения 30 устройств не должен выходить за экран */
    .vision-calculator .vision-field--devices .vision-field__notice {
        top: calc(100% + 6px) !important;
        left: 0 !important;
        right: auto !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* -----------------------------------------------------
       USE CASES
       ----------------------------------------------------- */
    .vision-use,
    .vision-interview,
    .vision-trust,
    .vision-request {
        padding-top: 48px !important;
        padding-bottom: 48px !important;
    }

    .vision-section__head {
        margin-bottom: 22px !important;
    }

    .vision-use__grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .vision-use-card__content {
        padding: 18px !important;
    }

    .vision-use-card__content h3 {
        font-size: 18px !important;
    }

    .vision-use-card__content p {
        font-size: 13px !important;
    }

    /* -----------------------------------------------------
       INTERVIEW
       ----------------------------------------------------- */
    .vision-interview__card {
        grid-template-columns: 1fr !important;
        border-radius: 14px !important;
    }

    .vision-interview__media {
        min-height: 220px !important;
        height: 220px !important;
    }

    .vision-interview__content {
        padding: 24px 18px !important;
    }

    .vision-interview__content h3 {
        margin: 16px 0 12px !important;
        font-size: 21px !important;
    }

    .vision-interview__content p {
        margin-bottom: 20px !important;
        font-size: 14px !important;
        line-height: 1.58 !important;
    }

    /* -----------------------------------------------------
       TRUST
       ----------------------------------------------------- */
    .vision-trust__panel {
        padding: 24px 16px !important;
        border-radius: 14px !important;
    }

    .vision-trust__metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 20px 16px !important;
        margin-top: 26px !important;
    }

    .vision-trust__metric strong {
        font-size: 28px !important;
    }

    .vision-trust__logos {
        justify-content: flex-start !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        gap: 22px !important;
        margin-top: 28px !important;
        padding-top: 20px !important;
        padding-bottom: 6px !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .vision-trust__logos::-webkit-scrollbar {
        display: none;
    }

    .vision-trust__logos span {
        flex: 0 0 auto !important;
    }

    /* -----------------------------------------------------
       FINAL CTA
       ----------------------------------------------------- */
    .vision-request__panel {
        align-items: stretch !important;
        flex-direction: column !important;
        gap: 24px !important;
        padding: 26px 18px !important;
        border-radius: 14px !important;
    }

    .vision-request__content h2 {
        font-size: clamp(28px, 8vw, 36px) !important;
    }

    .vision-request__content p {
        margin-top: 12px !important;
        font-size: 14px !important;
    }

    .vision-request__actions {
        width: 100% !important;
        flex-direction: column !important;
    }
}

/* 390 px и близкие размеры: чуть плотнее Hero и поля */
@media (max-width: 430px) {
    .vision-page .container {
        width: calc(100% - 28px) !important;
    }
.vision-page .vision-hero__description,
    .vision-page .vision-hero__actions {
        max-width: 320px !important;
    }

    .vision-result-card__coverage span {
        max-width: 100%;
        white-space: normal;
    }
}

/* 375–360 px */
@media (max-width: 374px) {
    .vision-page .container {
        width: calc(100% - 24px) !important;
    }

    .vision-page .vision-hero__title {
        font-size: 29px !important;
    }
.vision-scenario__buttons {
        gap: 6px !important;
    }

    .vision-scenario__button {
        padding-left: 6px !important;
        padding-right: 6px !important;
    }
}

/* 320–340 px: максимально безопасная версия без горизонтального скролла */
@media (max-width: 340px) {
    .vision-page .vision-hero__title {
        font-size: 27px !important;
        line-height: 1.1 !important;
    }

    .vision-page .vision-hero__description {
        font-size: 16px !important;
    }

    .vision-about__title {
        font-size: 27px !important;
    }

    .vision-scenario__buttons {
        grid-template-columns: 1fr !important;
    }

    .vision-scenario__button {
        min-height: 58px !important;
    }

    .vision-trust__metrics {
        gap: 18px 12px !important;
    }
}

/* ==========================================================
   Vision 2.4.2 — CONTACT MODAL
   Canonical block after safe refactor.
   Финальное поведение полностью соответствует рабочей 2.4.1:
   desktop + low-height notebook + tablet + mobile.
   ========================================================== */

html.vision-modal-open,
html.vision-modal-open body {
    overflow: hidden;
}

.vision-contact-modal {
    --vision-blue: #1450a3;
    --vision-blue-dark: #0d3d82;

    position: fixed;
    inset: 0;
    z-index: 10050;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.vision-contact-modal.is-open {
    display: flex;
}


.vision-contact-modal,
.vision-contact-modal * {
    box-sizing: border-box;
}

.vision-contact-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(10, 18, 30, .62);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.vision-contact-modal__dialog {
    position: relative;
    z-index: 1;
    width: min(100%, 520px);
    max-height: min(820px, calc(100dvh - 32px));
    overflow-y: auto;
    padding: 38px;
    border: 1px solid #e4e7ec;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 28px 80px rgba(15, 23, 42, .24);
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.vision-contact-modal__close {
    position: absolute;
    top: 14px;
    right: 16px;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: #f2f4f7;
    color: #344054;
    font-size: 27px;
    line-height: 1;
    cursor: pointer;
}

.vision-contact-modal__eyebrow {
    margin: 0 44px 10px 0;
    color: #1450a3;
    font-size: 12px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.vision-contact-modal__title {
    margin: 0 44px 12px 0;
    color: #151515;
    font-size: clamp(28px, 4vw, 38px);
    line-height: 1.08;
    letter-spacing: -.035em;
}

.vision-contact-modal__text {
    margin: 0 0 26px;
    color: #667085;
    font-size: 15px;
    line-height: 1.55;
}

.vision-contact-form {
    display: grid;
    gap: 17px;
}

.vision-contact-form__field {
    display: grid;
    gap: 7px;
}

.vision-contact-form__field label {
    color: #344054;
    font-size: 13px;
    font-weight: 700;
}

.vision-contact-form__field input {
    width: 100%;
    height: 52px;
    padding: 0 15px;
    border: 1px solid #d0d5dd;
    border-radius: 8px;
    background: #fff;
    color: #151515;
    font: inherit;
    outline: none;
}

.vision-contact-form__field input:focus {
    border-color: #1450a3;
    box-shadow: 0 0 0 3px rgba(20, 80, 163, .1);
}

.vision-contact-form__field input[aria-invalid="true"] {
    border-color: #d92d20;
}

.vision-contact-form__agreement {
    margin-top: 2px;
}

.vision-contact-form__agreement label {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    color: #667085;
    font-size: 12px;
    line-height: 1.45;
    cursor: pointer;
}

.vision-contact-form__agreement input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.vision-contact-form__check {
    position: relative;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    border: 1px solid #cbd5e1;
    border-radius: 5px;
    background: #fff;
}

.vision-contact-form__agreement input:checked + .vision-contact-form__check {
    border-color: #1450a3;
    background: #1450a3;
}

.vision-contact-form__agreement input:checked + .vision-contact-form__check::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.vision-contact-form__agreement a {
    color: #1450a3;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.vision-contact-form__error {
    min-height: 0;
    margin: 0;
    color: #b42318;
    font-size: 11px;
    line-height: 1.35;
}

.vision-contact-form__error:empty {
    display: none;
}

.vision-contact-form__server-error {
    margin: 0;
    color: #b42318;
    font-size: 12px;
    line-height: 1.45;
}

.vision-contact-form__server-error:empty {
    display: none;
}

.vision-contact-form__submit {
    width: 100%;
    margin-top: 2px;
    border-color: #1450a3;
    background: #1450a3;
    color: #fff;
    cursor: pointer;
}

.vision-contact-form__submit:hover {
    border-color: #0d3d82;
    background: #0d3d82;
    color: #fff;
}

.vision-contact-form__submit:disabled {
    opacity: .65;
    cursor: wait;
}

.vision-contact-modal__success {
    padding: 18px 0 6px;
    text-align: center;
}

.vision-contact-modal__success[hidden] {
    display: none;
}

.vision-contact-modal__success-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: #eef4ff;
    color: #1450a3;
    font-size: 26px;
    font-weight: 800;
}

.vision-contact-modal__success h2 {
    margin: 0 0 10px;
    font-size: 30px;
    line-height: 1.1;
}

.vision-contact-modal__success p {
    margin: 0 auto 24px;
    max-width: 380px;
    color: #667085;
    line-height: 1.55;
}

/* Notebook: 1366×768 / 1440×800 and similar */
@media (max-height: 820px) and (min-width: 576px) {
    .vision-contact-modal {
        padding: 12px 20px;
    }

    .vision-contact-modal__dialog {
        width: min(100%, 500px);
        max-height: calc(100dvh - 24px);
        padding: 24px 30px 26px;
        border-radius: 16px;
    }

    .vision-contact-modal__close {
        top: 10px;
        right: 12px;
        width: 34px;
        height: 34px;
        font-size: 24px;
    }

    .vision-contact-modal__eyebrow {
        margin-bottom: 8px;
        font-size: 11px;
    }

    .vision-contact-modal__title {
        margin-bottom: 8px;
        font-size: 31px;
        line-height: 1.04;
    }

    .vision-contact-modal__text {
        margin-bottom: 18px;
        font-size: 14px;
        line-height: 1.42;
    }

    .vision-contact-form {
        gap: 11px;
    }

    .vision-contact-form__field {
        gap: 5px;
    }

    .vision-contact-form__field label {
        font-size: 12px;
    }

    .vision-contact-form__field input {
        height: 44px;
        padding: 0 13px;
    }

    .vision-contact-form__agreement label {
        font-size: 11px;
        line-height: 1.35;
    }

    .vision-contact-form__submit {
        min-height: 46px;
    }
}

/* Very low notebook viewport */
@media (max-height: 700px) and (min-width: 576px) {
    .vision-contact-modal__dialog {
        width: min(100%, 480px);
        padding: 20px 26px 22px;
    }

    .vision-contact-modal__eyebrow {
        margin-bottom: 6px;
    }

    .vision-contact-modal__title {
        font-size: 28px;
    }

    .vision-contact-modal__text {
        margin-bottom: 14px;
        font-size: 13px;
    }

    .vision-contact-form {
        gap: 9px;
    }

    .vision-contact-form__field input {
        height: 42px;
    }
}

/* Tablet */
@media (max-width: 767px) {
    .vision-contact-modal {
        padding: 10px;
    }

    .vision-contact-modal__dialog {
        width: min(100%, 520px);
        max-height: calc(100dvh - 20px);
        padding: 26px 22px 24px;
        border-radius: 16px;
    }

    .vision-contact-modal__title {
        margin-right: 38px;
        font-size: clamp(27px, 7vw, 32px);
        line-height: 1.05;
    }

    .vision-contact-modal__text {
        margin-bottom: 18px;
    }

    .vision-contact-form {
        gap: 12px;
    }

    .vision-contact-form__field input {
        height: 48px;
    }
}

/* Mobile: full-height sheet */
@media (max-width: 575px) {
    .vision-contact-modal {
        align-items: stretch;
        padding: 0;
    }

    .vision-contact-modal__dialog {
        width: 100%;
        max-height: 100dvh;
        min-height: 100dvh;
        padding:
            max(22px, env(safe-area-inset-top))
            18px
            max(20px, env(safe-area-inset-bottom));
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .vision-contact-modal__close {
        position: sticky;
        float: right;
        top: 8px;
        z-index: 3;
        width: 36px;
        height: 36px;
        margin: -6px -2px 0 8px;
    }

    .vision-contact-modal__eyebrow {
        margin-top: 8px;
        margin-right: 44px;
        font-size: 11px;
    }

    .vision-contact-modal__title {
        margin-right: 0;
        margin-bottom: 10px;
        font-size: clamp(26px, 8.2vw, 31px);
        line-height: 1.04;
        letter-spacing: -.035em;
    }

    .vision-contact-modal__text {
        margin-bottom: 18px;
        font-size: 14px;
        line-height: 1.45;
    }

    .vision-contact-form {
        gap: 12px;
    }

    .vision-contact-form__field {
        gap: 5px;
    }

    .vision-contact-form__field label {
        font-size: 12px;
    }

    .vision-contact-form__field input {
        height: 48px;
        font-size: 16px;
    }

    .vision-contact-form__agreement label {
        font-size: 11px;
        line-height: 1.38;
    }

    .vision-contact-form__submit {
        min-height: 50px;
    }

    .vision-contact-modal__success {
        min-height: calc(100dvh - 70px);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .vision-contact-modal__success[hidden] {
        display: none;
    }
}

@media (max-width: 374px) {
    .vision-contact-modal__dialog {
        padding-left: 15px;
        padding-right: 15px;
    }

    .vision-contact-modal__title {
        font-size: 26px;
    }

    .vision-contact-modal__text {
        font-size: 13px;
    }
}

/* Low-height mobile / landscape */
@media (max-width: 767px) and (max-height: 620px) {
    .vision-contact-modal__dialog {
        min-height: 0;
        max-height: 100dvh;
        padding-top: 16px;
        padding-bottom: 16px;
    }

    .vision-contact-modal__eyebrow {
        margin-top: 0;
        margin-bottom: 5px;
    }

    .vision-contact-modal__title {
        margin-bottom: 6px;
        font-size: 25px;
    }

    .vision-contact-modal__text {
        margin-bottom: 12px;
        font-size: 12px;
    }

    .vision-contact-form {
        gap: 8px;
    }

    .vision-contact-form__field input {
        height: 42px;
    }
}

/* ==========================================================
   Vision 2.5.2 — SECTION RHYTHM
   Сокращаем только вертикальные расстояния между крупными блоками.
   Hero, header, внутренние paddings карточек и модалка не меняются.
   ========================================================== */

/* Desktop / notebook */
@media (min-width: 768px) {
    .vision-section {
        padding-top: 58px;
        padding-bottom: 58px;
    }

    .vision-about {
        padding-top: 62px;
        padding-bottom: 66px;
    }

    .vision-calculator {
        padding-top: 58px;
        padding-bottom: 66px;
    }

    .vision-use,
    .vision-interview,
    .vision-cases,
    .vision-trust,
    .vision-request {
        padding-top: 54px;
        padding-bottom: 54px;
    }
}

/* Mobile: немного плотнее, без изменения внутренней композиции */
@media (max-width: 767px) {
    .vision-section {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }

    .vision-about {
        padding-top: 44px !important;
        padding-bottom: 46px !important;
    }

    .vision-calculator {
        padding-top: 44px !important;
        padding-bottom: 48px !important;
    }

    .vision-use,
    .vision-interview,
    .vision-cases,
    .vision-trust,
    .vision-request {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }
}

/* ==========================================================
   Vision 2.5.4 — INTERVIEW MOBILE IMAGE CROP FIX
   На ширинах <= 767px сохраняем голову спикера в кадре.
   ========================================================== */

@media (max-width: 767px) {
    .vision-interview__media {
        height: auto !important;
        min-height: 0 !important;
        aspect-ratio: 16 / 9 !important;
        overflow: hidden !important;
    }

    .vision-interview__media img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: 50% 24% !important;
    }
}

/* На очень узких телефонах делаем кадр чуть выше,
   чтобы лицо и плечи не выглядели тесно. */
@media (max-width: 430px) {
    .vision-interview__media {
        aspect-ratio: 4 / 3 !important;
    }

    .vision-interview__media img {
        object-position: 50% 20% !important;
    }
}

/* ==========================================================
   Vision 2.5.6 — CALCULATOR PRODUCT ZONE
   Калькулятор становится отдельной продуктовой зоной страницы.
   Внутренняя структура и логика не меняются.
   ========================================================== */

.vision-calculator {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 78% 18%,
            rgba(72, 139, 220, .18) 0%,
            rgba(72, 139, 220, 0) 34%
        ),
        linear-gradient(
            135deg,
            #102b4c 0%,
            #12385f 52%,
            #174774 100%
        ) !important;
}

/* Очень мягкая сетка/свечение, чтобы фон не был плоским */
.vision-calculator::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(
            90deg,
            rgba(255, 255, 255, .025) 1px,
            transparent 1px
        ),
        linear-gradient(
            180deg,
            rgba(255, 255, 255, .02) 1px,
            transparent 1px
        );
    background-size: 48px 48px;
    opacity: .7;
}

.vision-calculator > .container {
    position: relative;
    z-index: 1;
}

/* Белая рабочая панель остаётся главным интерфейсом */
.vision-calculator__panel {
    position: relative;
    border-color: rgba(255, 255, 255, .22) !important;
    background: #ffffff !important;
    box-shadow:
        0 32px 84px rgba(3, 18, 35, .28),
        0 0 0 1px rgba(255, 255, 255, .06) !important;
}

/* Старый короткий синий штрих больше не нужен */
.vision-calculator__panel::before {
    display: none !important;
}

/* Сохраняем фирменный синий eyebrow внутри панели */
.vision-calculator__eyebrow {
    color: #1450a3 !important;
}

@media (max-width: 767px) {
    .vision-calculator {
        background:
            radial-gradient(
                circle at 82% 12%,
                rgba(72, 139, 220, .14) 0%,
                rgba(72, 139, 220, 0) 32%
            ),
            linear-gradient(
                145deg,
                #102b4c 0%,
                #153d68 100%
            ) !important;
    }

    .vision-calculator::before {
        background-size: 40px 40px;
        opacity: .55;
    }

    .vision-calculator__panel {
        box-shadow:
            0 24px 58px rgba(3, 18, 35, .24) !important;
    }
}

/* ==========================================================
   Vision 2.5.8 — SUPER COMPACT PAGE RHYTHM
   ----------------------------------------------------------
   Цель:
   сделать страницу заметно плотнее по вертикали без изменения
   Hero, модалок и бизнес-логики калькулятора.

   Как управлять:
   - padding-top    = воздух перед содержимым секции;
   - padding-bottom = воздух после содержимого секции;
   - расстояние между двумя соседними блоками визуально складывается
     из padding-bottom первого + padding-top второго.
   ========================================================== */


/* ==========================================================
   DESKTOP / NOTEBOOK · 768px+
   ========================================================== */
@media (min-width: 768px) {

    /*
     * Базовый ритм всех секций.
     * 30px + 30px вместо прежних 50–60px.
     */
    .vision-section {
        padding-top: 30px !important;
        padding-bottom: 30px !important;
    }

    /*
     * ABOUT
     * После Hero оставляем чуть больше воздуха,
     * чтобы первый информационный блок не прилипал к обложке.
     */
    .vision-about {
        padding-top: 38px !important;
        padding-bottom: 30px !important;
    }

    /*
     * CALCULATOR
     * Тёмная продуктовая зона уже сама визуально отделяет блок,
     * поэтому большой вертикальный запас не нужен.
     */
    .vision-calculator {
        padding-top: 32px !important;
        padding-bottom: 34px !important;
    }

    /*
     * Все основные контентные секции после калькулятора.
     */
    .vision-use,
    .vision-interview,
    .vision-cases,
    .vision-trust,
    .vision-request {
        padding-top: 28px !important;
        padding-bottom: 28px !important;
    }

    /*
     * Заголовок секции → контент.
     * Было около 30px, делаем компактнее.
     */
    .vision-section__head {
        margin-bottom: 18px !important;
    }

    /*
     * Карточки use-cases.
     */
    .vision-use__grid {
        gap: 14px !important;
    }

    /*
     * Cases.
     */
    .vision-cases__grid {
        gap: 14px !important;
    }

    /*
     * Trust:
     * уменьшаем расстояние от заголовка до метрик.
     */
    .vision-trust__metrics {
        margin-top: 22px !important;
        gap: 18px !important;
    }

    /*
     * Логотипы / доверие.
     */
    .vision-trust__logos {
        margin-top: 24px !important;
        padding-top: 18px !important;
    }

    .vision-trust__action {
        margin-top: 20px !important;
    }

    /*
     * Interview:
     * внутренние отступы карточки слегка уменьшаем,
     * но сохраняем комфортную читаемость.
     */
    .vision-interview__content {
        padding: 34px 36px !important;
    }

    .vision-interview__content h3 {
        margin-top: 16px !important;
        margin-bottom: 10px !important;
    }

    .vision-interview__content p {
        margin-bottom: 18px !important;
    }

    /*
     * Final CTA:
     * уменьшаем внутренний воздух,
     * чтобы блок не выглядел как отдельная длинная секция.
     */
    .vision-request__panel {
        padding: 30px 34px !important;
    }
}


/* ==========================================================
   TABLET / MOBILE · <=767px
   ========================================================== */
@media (max-width: 767px) {

    /*
     * Общая плотность мобильной страницы.
     */
    .vision-section {
        padding-top: 24px !important;
        padding-bottom: 24px !important;
    }

    /*
     * Первый блок после Hero.
     */
    .vision-about {
        padding-top: 30px !important;
        padding-bottom: 26px !important;
    }

    /*
     * Calculator.
     */
    .vision-calculator {
        padding-top: 26px !important;
        padding-bottom: 28px !important;
    }

    /*
     * Основные контентные блоки.
     */
    .vision-use,
    .vision-interview,
    .vision-cases,
    .vision-trust,
    .vision-request {
        padding-top: 24px !important;
        padding-bottom: 24px !important;
    }

    /*
     * Заголовок → контент.
     */
    .vision-section__head {
        margin-bottom: 16px !important;
    }

    /*
     * About:
     * сокращаем расстояние между текстом и изображением.
     */
    .vision-about__grid {
        gap: 22px !important;
    }

    .vision-about__text {
        margin-top: 16px !important;
    }

    /*
     * Calculator panel:
     * немного плотнее внутри, но поля не ужимаем по высоте.
     */
    .vision-calculator__panel {
        padding-top: 20px !important;
        padding-bottom: 20px !important;
    }

    .vision-calculator__heading {
        margin-bottom: 20px !important;
    }

    .vision-calculator__grid {
        gap: 22px !important;
    }

    /*
     * Use cases.
     */
    .vision-use__grid {
        gap: 12px !important;
    }

    /*
     * Interview.
     */
    .vision-interview__content {
        padding-top: 20px !important;
        padding-bottom: 20px !important;
    }

    .vision-interview__content h3 {
        margin-top: 12px !important;
        margin-bottom: 10px !important;
    }

    .vision-interview__content p {
        margin-bottom: 16px !important;
    }

    /*
     * Trust.
     */
    .vision-trust__metrics {
        margin-top: 18px !important;
        gap: 16px 12px !important;
    }

    .vision-trust__logos {
        margin-top: 20px !important;
        padding-top: 16px !important;
    }

    .vision-trust__action {
        margin-top: 18px !important;
    }

    /*
     * Final CTA.
     */
    .vision-request__panel {
        gap: 18px !important;
        padding-top: 22px !important;
        padding-bottom: 22px !important;
    }
}


/* ==========================================================
   VERY SMALL MOBILE · <=430px
   Ещё чуть плотнее только по вертикали.
   ========================================================== */
@media (max-width: 430px) {

    .vision-about {
        padding-top: 26px !important;
        padding-bottom: 22px !important;
    }

    .vision-calculator {
        padding-top: 22px !important;
        padding-bottom: 24px !important;
    }

    .vision-use,
    .vision-interview,
    .vision-cases,
    .vision-trust,
    .vision-request {
        padding-top: 22px !important;
        padding-bottom: 22px !important;
    }
}

/* ==========================================================
   Vision 2.5.9 — FINAL SECTION SPACING
   ----------------------------------------------------------
   Финальная настройка расстояний между крупными секциями
   по визуальным правкам со страницы.

   ВАЖНО:
   Этот блок меняет ТОЛЬКО вертикальные отступы между секциями.
   Hero, header, изображения, карточки, калькулятор, модалки,
   JS/PHP и внутренние компоненты не меняются.
   ========================================================== */


/* ==========================================================
   DESKTOP / NOTEBOOK · 768px+
   ========================================================== */
@media (min-width: 768px) {

    /* ------------------------------------------------------
       HERO → "Что такое видеораспознавание?"
       ------------------------------------------------------
       Уменьшаем белый воздух сразу после Hero.
       ------------------------------------------------------ */
    .vision-about {
        padding-top: 24px !important;
    }


    /* ------------------------------------------------------
       "Что такое видеораспознавание?" → Calculator
       ------------------------------------------------------
       Уменьшаем нижний воздух About и верх тёмной зоны.
       ------------------------------------------------------ */
    .vision-about {
        padding-bottom: 18px !important;
    }

    .vision-calculator {
        padding-top: 22px !important;
    }


    /* ------------------------------------------------------
       Calculator → "Для чего нужен СуперМаг Vision"
       ------------------------------------------------------ */
    .vision-calculator {
        padding-bottom: 22px !important;
    }

    .vision-use {
        padding-top: 12px !important;
    }


    /* ------------------------------------------------------
       Use cases → Interview
       ------------------------------------------------------ */
    .vision-use {
        padding-bottom: 18px !important;
    }

    .vision-interview {
        padding-top: 12px !important;
    }


    /* ------------------------------------------------------
       Interview → Trust
       ------------------------------------------------------ */
    .vision-interview {
        padding-bottom: 16px !important;
    }

    .vision-trust {
        padding-top: 10px !important;
    }


    /* ------------------------------------------------------
       Trust → Final CTA
       ------------------------------------------------------ */
    .vision-trust {
        padding-bottom: 14px !important;
    }

    .vision-request {
        padding-top: 10px !important;
    }


    /* ------------------------------------------------------
       Final CTA → Footer
       ------------------------------------------------------
       Убираем лишнюю белую полосу перед футером.
       ------------------------------------------------------ */
    .vision-request {
        padding-bottom: 8px !important;
        margin-bottom: 0 !important;
    }

    .vision-request__panel {
        margin-bottom: 0 !important;
    }
}


/* ==========================================================
   MOBILE / TABLET PORTRAIT · <=767px
   ----------------------------------------------------------
   Сохраняем тот же плотный ритм, но оставляем чуть больше
   воздуха для читаемости на узком экране.
   ========================================================== */
@media (max-width: 767px) {

    /* Hero → About */
    .vision-about {
        padding-top: 22px !important;
    }

    /* About → Calculator */
    .vision-about {
        padding-bottom: 18px !important;
    }

    .vision-calculator {
        padding-top: 20px !important;
    }

    /* Calculator → Use */
    .vision-calculator {
        padding-bottom: 20px !important;
    }

    .vision-use {
        padding-top: 14px !important;
    }

    /* Use → Interview */
    .vision-use {
        padding-bottom: 16px !important;
    }

    .vision-interview {
        padding-top: 14px !important;
    }

    /* Interview → Trust */
    .vision-interview {
        padding-bottom: 14px !important;
    }

    .vision-trust {
        padding-top: 12px !important;
    }

    /* Trust → Final CTA */
    .vision-trust {
        padding-bottom: 14px !important;
    }

    .vision-request {
        padding-top: 10px !important;
        padding-bottom: 8px !important;
        margin-bottom: 0 !important;
    }

    /* Final CTA → Footer */
    .vision-request__panel {
        margin-bottom: 0 !important;
    }
}

/* ==========================================================
   Vision 2.8.0 — CANONICAL RESPONSIVE LAYER
   ----------------------------------------------------------
   Это принятая компоновка Hero. Полностью перекрытые исторические
   Hero-фиксы 2.5.7 и 2.6.0–2.6.6 удалены при безопасном рефакторинге.
   Правила остальных секций и общий CSS шаблона не изменялись.

   Контрольные диапазоны синхронизированы с фактической шапкой:
   1281+       — desktop;
   1024–1280   — compact desktop;
   768–1023    — tablet / compact header;
   <=767       — mobile split layout;
   480/481     — без отдельного скачка, размеры меняются плавно.
   ========================================================== */

.vision-page {
    --vision-header-desktop: 138px;
    --vision-header-compact: 76px;
    --vision-hero-gutter: clamp(20px, 4vw, 72px);
}

/* Ограничиваем затемнение самой шапкой, а не высотой Hero. */
.header.header--vision {
    background: linear-gradient(
        180deg,
        rgba(8, 11, 14, .94) 0%,
        rgba(8, 11, 14, .76) 68%,
        rgba(8, 11, 14, 0) 100%
    ) !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* Общая геометрия desktop/tablet. */
.header.header--vision + main .vision-hero,
.header.header--vision + main .vision-hero__container,
.header.header--vision + main
.vision-hero__container--single
.vision-hero__content {
    height: auto !important;
    max-height: none !important;
}

.header.header--vision + main .vision-hero {
    min-height: clamp(720px, 100svh, 1080px) !important;
    background-color: #0a0e12;
}

.header.header--vision + main .vision-hero__background {
    inset: 0 !important;
    width: auto !important;
    height: auto !important;
    background:
        linear-gradient(
            90deg,
            rgba(5, 8, 11, .88) 0%,
            rgba(5, 8, 11, .68) 34%,
            rgba(5, 8, 11, .24) 61%,
            rgba(5, 8, 11, .05) 100%
        ),
        linear-gradient(
            180deg,
            rgba(5, 8, 11, .14) 0%,
            rgba(5, 8, 11, 0) 70%,
            rgba(5, 8, 11, .22) 100%
        ),
        url("/upload/vision/vision-hero-desktop.webp")
        center bottom / cover no-repeat !important;
    background-color: #0a0e12 !important;
}

.header.header--vision + main .vision-hero__container {
    display: flex !important;
    align-items: center;
    min-height: clamp(720px, 100svh, 1080px) !important;
}

.header.header--vision + main
.vision-hero__container--single
.vision-hero__content {
    width: min(780px, 58vw) !important;
    min-height: 0 !important;
    padding: calc(var(--vision-header-desktop) + 72px) 0 64px !important;
    overflow: visible !important;
}

.vision-page .vision-kicker {
    margin-bottom: 12px !important;
    font-size: clamp(12px, .9vw, 14px) !important;
}

.vision-page .vision-hero__title {
    max-width: 780px;
    margin-bottom: clamp(18px, 2.2vh, 26px) !important;
    font-size: clamp(54px, 4.8vw, 82px) !important;
    line-height: 1.04 !important;
    letter-spacing: -.045em;
    text-wrap: balance;
}

.vision-page .vision-hero__description {
    max-width: 720px !important;
    font-size: clamp(17px, 1.25vw, 21px) !important;
    line-height: 1.55 !important;
}

.vision-page .vision-hero__actions {
    margin-top: clamp(24px, 3vh, 34px) !important;
    gap: 14px;
}


/* Compact desktop: полное горизонтальное меню, но более плотный Hero. */
@media (min-width: 1024px) and (max-width: 1280px) {
    .header.header--vision + main .vision-hero,
    .header.header--vision + main .vision-hero__container {
        min-height: clamp(680px, 100svh, 900px) !important;
    }

    .header.header--vision + main
    .vision-hero__container--single
    .vision-hero__content {
        width: min(700px, 64vw) !important;
        padding: 174px 0 44px !important;
    }

    .vision-page .vision-hero__title {
        font-size: clamp(50px, 5.6vw, 68px) !important;
    }
}

/* Tablet / compact header: текст защищён затемнением слева,
   КСО остаётся в правой части кадра. */
@media (min-width: 768px) and (max-width: 1023px) {
    .header.header--vision {
        background: rgba(8, 11, 14, .96) !important;
    }

    .header.header--vision + main .vision-hero,
    .header.header--vision + main .vision-hero__container {
        min-height: clamp(700px, 100svh, 960px) !important;
    }

    .header.header--vision + main .vision-hero__background {
        background:
            linear-gradient(
                90deg,
                rgba(5, 8, 11, .94) 0%,
                rgba(5, 8, 11, .72) 48%,
                rgba(5, 8, 11, .16) 77%,
                rgba(5, 8, 11, .04) 100%
            ),
            url("/upload/vision/vision-hero-tablet.webp")
            62% center / cover no-repeat !important;
    }

    .header.header--vision + main
    .vision-hero__container--single
    .vision-hero__content {
        width: min(610px, 68vw) !important;
        min-height: 0 !important;
        padding: calc(var(--vision-header-compact) + 64px) 0 48px !important;
    }

    .vision-page .vision-hero__title {
        font-size: clamp(46px, 6.3vw, 62px) !important;
    }

    .vision-page .vision-hero__description {
        font-size: 17px !important;
    }
}

/* Mobile: два управляемых слоя.
   Сверху — чистая тёмная область с H1 и CTA.
   Снизу — отдельный кадр оборудования без текста поверх него. */
@media (max-width: 767px) {
    .vision-page {
        --vision-mobile-header: 58px;
        --vision-mobile-pad: clamp(14px, 4.2vw, 24px);
        --vision-mobile-image: clamp(420px, 125vw, 680px);
    }

    .header.header--vision {
        background: rgba(8, 11, 14, .98) !important;
        box-shadow: 0 1px 0 rgba(255, 255, 255, .06);
    }

    .header.header--vision + main .vision-hero {
        min-height: 0 !important;
        padding-bottom: var(--vision-mobile-image);
        overflow: hidden;
        background: #080b0e;
    }

    .header.header--vision + main .vision-hero__container {
        display: block !important;
        min-height: 0 !important;
        padding-right: var(--vision-mobile-pad) !important;
        padding-left: var(--vision-mobile-pad) !important;
        background: #080b0e;
    }

    .header.header--vision + main
    .vision-hero__container--single
    .vision-hero__content {
        width: 100% !important;
        min-height: 0 !important;
        padding: calc(var(--vision-mobile-header) + 42px) 0 34px !important;
        transform: none !important;
    }

    .header.header--vision + main .vision-hero__background {
        top: auto !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: var(--vision-mobile-image) !important;
        background:
            linear-gradient(
                180deg,
                rgba(8, 11, 14, .34) 0%,
                rgba(8, 11, 14, 0) 24%,
                rgba(8, 11, 14, .08) 100%
            ),
            url("/upload/vision/vision-hero-mobile.webp")
            center top / 100% auto no-repeat !important;
        background-color: #11161a !important;
    }

    .vision-page .vision-kicker {
        margin-bottom: 16px !important;
        font-size: 12px !important;
        line-height: 1.3;
    }

    .vision-page .vision-hero__title {
        max-width: 100%;
        margin-bottom: 20px !important;
        font-size: clamp(32px, 8.8vw, 44px) !important;
        line-height: 1.06 !important;
        letter-spacing: -.035em;
        overflow-wrap: normal;
        word-break: normal;
    }

    .vision-page .vision-hero__description {
        max-width: 34em !important;
        font-size: clamp(16px, 4.2vw, 18px) !important;
        line-height: 1.5 !important;
    }

    .vision-page .vision-hero__actions {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
        margin-top: 28px !important;
        gap: 12px;
    }

    .vision-page .vision-hero__actions .vision-button {
        width: 100%;
        min-height: 52px !important;
        padding-right: 18px;
        padding-left: 18px;
        font-size: 15px;
    }
}

/* Узкие телефоны: защищаем CTA и H1 от переполнения. */
@media (max-width: 374px) {
    .vision-page {
        --vision-mobile-image: 125vw;
    }

    .header.header--vision + main
    .vision-hero__container--single
    .vision-hero__content {
        padding-top: calc(var(--vision-mobile-header) + 32px) !important;
        padding-bottom: 28px !important;
    }

    .vision-page .vision-hero__title {
        font-size: 31px !important;
    }

    .vision-page .vision-hero__description {
        font-size: 15px !important;
    }
}

/* Крупный телефон / узкий планшет: используем более широкий tablet-кадр,
   чтобы не получать пустые поля по бокам изображения. */
@media (min-width: 600px) and (max-width: 767px) {
    .vision-page {
        --vision-mobile-image: clamp(520px, 82vw, 640px);
    }

    .header.header--vision + main .vision-hero__background {
        background:
            linear-gradient(
                180deg,
                rgba(8, 11, 14, .30) 0%,
                rgba(8, 11, 14, 0) 22%,
                rgba(8, 11, 14, .08) 100%
            ),
            url("/upload/vision/vision-hero-tablet.webp")
            center center / cover no-repeat !important;
    }
}

/* Mobile landscape: не привязываем секцию к высоте окна — контент
   остаётся доступным при небольшой высоте viewport. */
@media (max-width: 767px) and (orientation: landscape) {
    .vision-page {
        --vision-mobile-image: clamp(300px, 62vw, 440px);
    }

    .header.header--vision + main
    .vision-hero__container--single
    .vision-hero__content {
        max-width: 620px;
        padding-top: calc(var(--vision-mobile-header) + 28px) !important;
    }

    .vision-page .vision-hero__actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ==========================================================
   Vision 2.7.2 — VISUAL QA CORRECTIONS
   ----------------------------------------------------------
   1. Центрируем desktop-контент без дополнительного сдвига вниз.
   2. На невысоких ноутбуках показываем дизайнерский кадр целиком.
   3. Умещаем длинное русское слово в H1 на телефонах.
   ========================================================== */

/* Desktop 19": в 2.7.1 этот transform опускал всю группу на 64px. */
@media (min-width: 1281px) {
    .header.header--vision + main
    .vision-hero__container--single
    .vision-hero__content {
        transform: none !important;
    }
}

/* 14" notebook определяется фактической высотой viewport.
   contain приоритетнее декоративного заполнения: весь монитор КСО,
   весы и яблоки должны находиться внутри первого экрана. */
@media (min-width: 992px) and (max-height: 820px) {
    .header.header--vision + main .vision-hero,
    .header.header--vision + main .vision-hero__container {
        height: 100svh !important;
        min-height: 0 !important;
        max-height: none !important;
    }

    .header.header--vision + main .vision-hero__background {
        background:
            linear-gradient(
                90deg,
                rgba(5, 8, 11, .82) 0%,
                rgba(5, 8, 11, .58) 35%,
                rgba(5, 8, 11, .15) 68%,
                rgba(5, 8, 11, .04) 100%
            ) center / 100% 100% no-repeat,
            linear-gradient(
                180deg,
                rgba(5, 8, 11, .06) 0%,
                rgba(5, 8, 11, 0) 70%,
                rgba(5, 8, 11, .18) 100%
            ) center / 100% 100% no-repeat,
            url("/upload/vision/vision-hero-desktop.webp")
            center center / contain no-repeat !important;
        background-color: #0a0e12 !important;
    }

    .header.header--vision + main
    .vision-hero__container--single
    .vision-hero__content {
        min-height: 0 !important;
        padding-top: 150px !important;
        padding-bottom: 20px !important;
        transform: none !important;
    }
}

/* Очень низкие ноутбуки: сохраняем CTA внутри первого экрана. */
@media (min-width: 992px) and (max-height: 720px) {
    .header.header--vision + main
    .vision-hero__container--single
    .vision-hero__content {
        padding-top: 132px !important;
        padding-bottom: 14px !important;
    }

    .vision-page .vision-hero__title {
        font-size: clamp(46px, 4.6vw, 60px) !important;
    }

    .vision-page .vision-hero__actions .vision-button {
        min-height: 46px !important;
    }
}

/* Телефон: сохраняем слово целиком на первой строке.
   Разрыв слова через overflow-wrap/word-break намеренно не используется. */
@media (max-width: 480px) {
    .vision-page .vision-hero__title {
        width: 100%;
        max-width: 100%;
        font-size: clamp(24px, 7.5vw, 36px) !important;
        line-height: 1.08 !important;
        letter-spacing: -.04em;
        overflow-wrap: normal;
        word-break: normal;
    }
}

/* ==========================================================
   Vision 2.7.3 — TABLET & LARGE-PHONE VERIFICATION
   ----------------------------------------------------------
   Исправляет только диапазон 481–1023px.
   Desktop, notebook full-frame и телефоны <=480px сохраняют
   проверенную геометрию 2.7.2.
   ========================================================== */

/* TABLET · 768–1023px
   Текст остаётся поверх фотографии, но заканчивается до монитора КСО. */
@media (min-width: 768px) and (max-width: 1023px) {
    .header.header--vision + main .vision-hero__background {
        background:
            linear-gradient(
                90deg,
                rgba(5, 8, 11, .96) 0%,
                rgba(5, 8, 11, .82) 42%,
                rgba(5, 8, 11, .30) 62%,
                rgba(5, 8, 11, .04) 100%
            ),
            url("/upload/vision/vision-hero-tablet.webp")
            62% center / cover no-repeat !important;
    }

    .header.header--vision + main
    .vision-hero__container--single
    .vision-hero__content {
        width: min(560px, 56vw) !important;
        transform: translateY(20px) !important;
    }

    .vision-page .vision-hero__title {
        max-width: 100%;
        font-size: clamp(38px, 4.8vw, 50px) !important;
        line-height: 1.05 !important;
        letter-spacing: -.04em;
    }

    .vision-page .vision-hero__description {
        max-width: 460px !important;
        font-size: 16px !important;
        line-height: 1.5 !important;
    }

    .vision-page .vision-hero__actions {
        gap: 10px;
    }

    .vision-page .vision-hero__actions .vision-button {
        min-height: 48px !important;
        padding-right: 18px;
        padding-left: 18px;
        font-size: 14px;
    }
}

/* COMPACT TABLET · 600–767px
   Это небольшие Android-планшеты в portrait, foldable-устройства
   и узкое окно браузера. Текст и изображение остаются раздельными,
   но блок больше не выглядит растянутой телефонной версией. */
@media (min-width: 600px) and (max-width: 767px) {
    .vision-page {
        --vision-mobile-image: clamp(500px, 75vw, 575px);
    }

    .header.header--vision + main
    .vision-hero__container--single
    .vision-hero__content {
        padding-top: calc(var(--vision-mobile-header) + 30px) !important;
        padding-bottom: 28px !important;
    }

    .header.header--vision + main .vision-hero__background {
        background:
            linear-gradient(
                180deg,
                rgba(8, 11, 14, 1) 0%,
                rgba(8, 11, 14, .46) 9%,
                rgba(8, 11, 14, 0) 24%,
                rgba(8, 11, 14, .08) 100%
            ),
            url("/upload/vision/vision-hero-tablet.webp")
            center center / cover no-repeat !important;
    }

    .vision-page .vision-kicker {
        margin-bottom: 12px !important;
    }

    .vision-page .vision-hero__title {
        margin-bottom: 16px !important;
        font-size: clamp(40px, 5.5vw, 42px) !important;
        line-height: 1.06 !important;
    }

    .vision-page .vision-hero__description {
        max-width: 620px !important;
        font-size: 16px !important;
    }

    .vision-page .vision-hero__actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-top: 22px !important;
        gap: 10px;
    }

    .vision-page .vision-hero__actions .vision-button {
        min-height: 50px !important;
        padding-right: 12px;
        padding-left: 12px;
        font-size: 14px;
    }
}

/* LARGE PHONE · 481–599px
   Расширяем проверенный mobile type-fit без отдельной ступеньки на 480px. */
@media (min-width: 481px) and (max-width: 599px) {
    .vision-page .vision-hero__title {
        width: 100%;
        max-width: 100%;
        font-size: clamp(30px, 7.5vw, 40px) !important;
        line-height: 1.08 !important;
        letter-spacing: -.04em;
        overflow-wrap: normal;
        word-break: normal;
    }
}

/* Сохраняем проверенный notebook full-frame на пограничной ширине
   992–1023px, если высота окна соответствует ноутбуку. */
@media (min-width: 992px) and (max-width: 1023px) and (max-height: 820px) {
    .header.header--vision + main .vision-hero__background {
        background:
            linear-gradient(
                90deg,
                rgba(5, 8, 11, .82) 0%,
                rgba(5, 8, 11, .58) 35%,
                rgba(5, 8, 11, .15) 68%,
                rgba(5, 8, 11, .04) 100%
            ) center / 100% 100% no-repeat,
            linear-gradient(
                180deg,
                rgba(5, 8, 11, .06) 0%,
                rgba(5, 8, 11, 0) 70%,
                rgba(5, 8, 11, .18) 100%
            ) center / 100% 100% no-repeat,
            url("/upload/vision/vision-hero-desktop.webp")
            center center / contain no-repeat !important;
        background-color: #0a0e12 !important;
    }
}

/* DESKTOP OPTICAL CENTER · 1281px+
   Поднимаем всю контентную группу, а не отдельный H1.
   Высота от 821px исключает проверенный notebook full-frame режим. */
@media (min-width: 1281px) and (min-height: 821px) {
    .header.header--vision + main
    .vision-hero__container--single
    .vision-hero__content {
        transform: translateY(-74px) !important;
    }
}


/* iPad и аналогичные планшеты в портретной ориентации */
@media (min-width: 768px) and (max-width: 1023px) and (min-height: 821px) {
    .header.header--vision + main
    .vision-hero__container--single
    .vision-hero__content {
        transform: translateY(-60px) !important;
    }
}

/* Финальный CTA: одинаковые кнопки без переноса текста */
.vision-request__actions .vision-button {
    white-space: nowrap !important;
}

@media (min-width: 992px) {
    .vision-request__actions {
        flex: 0 0 300px;
        width: 300px;
    }

    .vision-request__actions .vision-button {
        width: 100%;
        min-width: 300px;
    }
}

/* Планшеты и мобильные: центрируем только итоговые цифры */
@media (max-width: 1024px) {
    .vision-calculator
    .vision-result-card
    .vision-result-card__metric
    strong[data-vision-result="month"],
    
    .vision-calculator
    .vision-result-card
    .vision-result-card__metric
    strong[data-vision-result="year"] {
        text-align: center !important;
    }
}

/* ==========================================================
   Vision 2.7.6 — XL Hero для больших мониторов
   Используется вместо растягивания desktop-фона 2400 px.
   ========================================================== */

@media (min-width: 1921px) {
    .header.header--vision + main .vision-hero__background {
        background:
            linear-gradient(
                90deg,
                rgba(5, 8, 11, .88) 0%,
                rgba(5, 8, 11, .68) 34%,
                rgba(5, 8, 11, .24) 61%,
                rgba(5, 8, 11, .05) 100%
            ),
            linear-gradient(
                180deg,
                rgba(5, 8, 11, .14) 0%,
                rgba(5, 8, 11, 0) 70%,
                rgba(5, 8, 11, .22) 100%
            ),
            url("/upload/vision/vision-hero-desktop-xl.webp")
            center center / cover no-repeat !important;

        background-color: #0a0e12 !important;
    }
}


/* ==========================================================
   Vision 2.7.7 — плавный переход шапки в Hero на XL-экранах
   ========================================================== */

@media (min-width: 1921px) {

    /* Полностью убираем размытие фотографии под шапкой */
    html body .header.header--vision {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        will-change: auto !important;
        background-clip: border-box !important;
        overflow: visible;

        /* Нижняя точка совпадает с началом продолжения градиента */
        background: linear-gradient(
            180deg,
            rgba(8, 11, 14, .92) 0%,
            rgba(8, 11, 14, .82) 50%,
            rgba(8, 11, 14, .54) 78%,
            rgba(8, 11, 14, .28) 100%
        ) !important;
    }

    /* Продлеваем затемнение ниже шапки и плавно растворяем в Hero */
    html body .header.header--vision::after {
        content: "";
        position: absolute;
        top: 100%;
        right: 0;
        left: 0;
        height: 220px;
        z-index: 0;
        pointer-events: none;

        background: linear-gradient(
            180deg,
            rgba(8, 11, 14, .28) 0%,
            rgba(8, 11, 14, .15) 42%,
            rgba(8, 11, 14, .06) 72%,
            rgba(8, 11, 14, 0) 100%
        );
    }

    /* Меню и логотип остаются поверх дополнительного градиента */
    html body .header.header--vision > .container {
        position: relative;
        z-index: 1;
    }
}

/* ==========================================================
   Vision mobile final corrections · 320–480px
   ========================================================== */

@media (min-width: 320px) and (max-width: 480px) {

    .header.header--vision + main
    .vision-hero__container--single
    .vision-hero__content {
        padding-bottom: 6px !important;
    }

    /* Немного увеличиваем и поднимаем фото,
       чтобы скрыть встроенную чёрную полосу */
    .header.header--vision + main .vision-hero__background {
        background:
            url("/upload/vision/vision-hero-mobile.webp")
            center -5vw / 105% auto no-repeat !important;

        background-color: #11161a !important;
    }

    .vision-page .vision-hero__actions {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        width: min(100%, 300px) !important;
        max-width: 300px !important;
        margin-right: auto !important;
        margin-left: auto !important;
        gap: 12px !important;
    }

    .vision-page .vision-hero__actions .vision-button {
        width: 100% !important;
        max-width: none !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
        white-space: nowrap !important;
    }
}

/* ==========================================================
   Wide and low desktop windows
   Убираем боковые поля только в широких невысоких окнах
   ========================================================== */

@media (min-width: 1281px)
       and (max-height: 900px)
       and (min-aspect-ratio: 21 / 10) {

    .header.header--vision + main .vision-hero__background {
        background:
            linear-gradient(
                90deg,
                rgba(5, 8, 11, .82) 0%,
                rgba(5, 8, 11, .58) 35%,
                rgba(5, 8, 11, .15) 68%,
                rgba(5, 8, 11, .04) 100%
            ),
            linear-gradient(
                180deg,
                rgba(5, 8, 11, .06) 0%,
                rgba(5, 8, 11, 0) 70%,
                rgba(5, 8, 11, .18) 100%
            ),
            url("/upload/vision/vision-hero-desktop.webp")
            center 46% / cover no-repeat !important;

        background-color: #0a0e12 !important;
    }
}

/* Одинаковые CTA на планшетах */
@media (min-width: 768px) and (max-width: 1023px) {

    .vision-page .vision-hero__actions {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: stretch !important;
        gap: 10px !important;
    }

    .vision-page .vision-hero__actions .vision-button {
        flex: 0 0 230px !important;
        width: 230px !important;
        min-width: 230px !important;
        min-height: 48px !important;
        white-space: nowrap !important;
    }
}

/* End */


/* Start:/local/templates/2025/assets/css/vision-sticky-header.css?17871423831218*/
/* Закрепление шапки только на планшетах и телефонах */
@media (max-width: 1023px) {

    /* Повышенная специфичность перекрывает position:absolute шаблона */
    html body .header.header--vision {
        position: fixed !important;
        top: 0;
        right: 0;
        left: 0;
        z-index: 1000;
        width: 100%;
        transition:
            background-color .24s ease,
            box-shadow .24s ease,
            backdrop-filter .24s ease;
    }

    /* Тёмный фон появляется после начала прокрутки */
    html body .header.header--vision.header--vision-scrolled {
        background: rgba(8, 11, 14, .98) !important;
        box-shadow: 0 6px 22px rgba(0, 0, 0, .24);
        -webkit-backdrop-filter: blur(14px);
        backdrop-filter: blur(14px);
    }

    /* Компенсация закреплённой шапки при переходе по якорям */
    .vision-page [id] {
        scroll-margin-top: 82px;
    }
}

@media (max-width: 1023px) and (prefers-reduced-motion: reduce) {
    html body .header.header--vision {
        transition: none;
    }
}
/* End */
/* /local/templates/2025/assets/css/vision-page.css?1787142383116792 */
/* /local/templates/2025/assets/css/vision-sticky-header.css?17871423831218 */