* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    background: #07101f;
    color: #ffffff;
}

.hero {
    position: relative;
    min-height: 100vh;
    min-height: 800px;
    overflow: hidden;
    background:
        linear-gradient(
            90deg,
            rgba(4, 10, 22, .92) 0%,
            rgba(5, 12, 25, .76) 32%,
            rgba(5, 12, 25, .30) 61%,
            rgba(5, 12, 25, .12) 100%
        ),
        url("/assets/hero-mountain.webp") center center / cover no-repeat;
}

.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(
            180deg,
            rgba(3, 8, 18, .58) 0%,
            transparent 22%,
            transparent 70%,
            rgba(3, 8, 18, .62) 100%
        );
}

.header {
    position: relative;
    z-index: 10;
    width: min(1500px, calc(100% - 96px));
    height: 104px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 250px 1fr 190px;
    align-items: center;
    gap: 30px;
    border-bottom: 1px solid rgba(255,255,255,.12);
}

.logo {
    display: flex;
    align-items: center;
    width: 190px;
}

.logo img {
    display: block;
    width: 100%;
    height: auto;
}

.nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(20px, 2.1vw, 38px);
}

.nav a {
    color: rgba(255,255,255,.76);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    transition: color .2s ease;
}

.nav a:hover {
    color: #ffffff;
}

.header-cta {
    justify-self: end;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-height: 46px;
    padding: 0 22px;
    border: 1px solid rgba(255,255,255,.34);
    border-radius: 999px;
    color: #ffffff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    backdrop-filter: blur(10px);
    background: rgba(255,255,255,.06);
}

.hero-content {
    position: relative;
    z-index: 3;
    width: min(1500px, calc(100% - 96px));
    min-height: calc(100vh - 104px);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 760px) 1fr;
    align-items: center;
    padding: 70px 0 130px;
}

.hero-copy {
    max-width: 760px;
}

.eyebrow {
    margin-bottom: 26px;
    color: #8eb8ff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .18em;
}

h1 {
    max-width: 760px;
    font-size: clamp(64px, 6.1vw, 106px);
    line-height: .94;
    letter-spacing: -.055em;
    font-weight: 650;
}

h1 span {
    display: block;
    width: fit-content;
    color: transparent;
    background: linear-gradient(90deg, #3e9cff 0%, #7c6cff 52%, #b469ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

.hero-manifesto {
    margin-top: 34px;
    font-size: clamp(20px, 1.55vw, 27px);
    line-height: 1.3;
    font-weight: 500;
    letter-spacing: -.02em;
}

.hero-description {
    max-width: 650px;
    margin-top: 22px;
    color: rgba(255,255,255,.70);
    font-size: 17px;
    line-height: 1.65;
}

.hero-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 38px;
}

.button {
    min-height: 54px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 0 28px;
    border-radius: 999px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 650;
    transition: transform .2s ease, background .2s ease;
}

.button:hover {
    transform: translateY(-2px);
}

.button-primary {
    color: #ffffff;
    background: linear-gradient(100deg, #287cf7 0%, #655cf5 55%, #8b50ed 100%);
    box-shadow: 0 12px 40px rgba(67, 91, 245, .25);
}

.button-secondary {
    color: #ffffff;
    border: 1px solid rgba(255,255,255,.28);
    background: rgba(8, 16, 31, .22);
    backdrop-filter: blur(12px);
}

.hero-side {
    justify-self: end;
    align-self: center;
    width: 245px;
    margin-top: 140px;
    text-align: right;
}

.hero-side-label {
    color: rgba(255,255,255,.56);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .18em;
}

.hero-side-line {
    width: 72px;
    height: 1px;
    margin: 15px 0 15px auto;
    background: linear-gradient(90deg, transparent, #7da9ff);
}

.hero-side-text {
    color: rgba(255,255,255,.9);
    font-size: 13px;
    line-height: 1.55;
    font-weight: 600;
    letter-spacing: .08em;
}

.scroll-hint {
    position: absolute;
    z-index: 5;
    left: 50%;
    bottom: 28px;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 11px;
    color: rgba(255,255,255,.42);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .18em;
}

.scroll-hint span {
    width: 28px;
    height: 1px;
    background: rgba(255,255,255,.36);
}

@media (max-width: 1100px) {
    .header {
        width: calc(100% - 48px);
        grid-template-columns: 190px 1fr;
    }

    .nav {
        display: none;
    }

    .header-cta {
        grid-column: 2;
        grid-row: 1;
    }

    .hero-content {
        width: calc(100% - 48px);
        grid-template-columns: 1fr;
    }

    .hero-side {
        display: none;
    }
}

@media (max-width: 640px) {
    .hero {
        min-height: 760px;
        background-position: 62% center;
    }

    .header {
        width: calc(100% - 32px);
        height: 82px;
        grid-template-columns: 150px 1fr;
    }

    .logo {
        width: 145px;
    }

    .header-cta {
        min-height: 40px;
        padding: 0 15px;
        font-size: 12px;
    }

    .hero-content {
        width: calc(100% - 32px);
        min-height: calc(100vh - 82px);
        padding: 70px 0 100px;
        align-items: center;
    }

    h1 {
        font-size: clamp(52px, 15vw, 72px);
    }

    .hero-description {
        font-size: 15px;
    }

    .hero-actions {
        align-items: stretch;
        flex-direction: column;
        max-width: 360px;
    }

    .button {
        text-align: center;
    }
}


/* =========================================================
   VEDOMO TYPOGRAPHY v2
   ========================================================= */

@font-face {
    font-family: "Inter";
    src: url("/assets/fonts/Inter-Regular.otf") format("opentype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Inter";
    src: url("/assets/fonts/Inter-Medium.otf") format("opentype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Inter";
    src: url("/assets/fonts/Inter-SemiBold.otf") format("opentype");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Inter Display";
    src: url("/assets/fonts/InterDisplay-Medium.otf") format("opentype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Inter Display";
    src: url("/assets/fonts/InterDisplay-SemiBold.otf") format("opentype");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/* Базовая типографика */

body {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Навигация */

.nav a {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: rgba(255,255,255,.78);
}

.header-cta {
    font-size: 14px;
    font-weight: 500;
}

/* Надзаголовок */

.eyebrow {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .20em;
}

/* Главный заголовок */

h1 {
    font-family: "Inter Display", "Inter", sans-serif;
    font-size: clamp(62px, 5.55vw, 96px);
    line-height: .97;
    letter-spacing: -.052em;
    font-weight: 600;
}

/* Данные. Понимание. Решения. */

.hero-manifesto {
    margin-top: 32px;
    font-family: "Inter Display", "Inter", sans-serif;
    font-size: clamp(20px, 1.4vw, 25px);
    line-height: 1.32;
    font-weight: 500;
    letter-spacing: -.025em;
}

/* Основное описание */

.hero-description {
    max-width: 660px;
    margin-top: 20px;
    color: rgba(255,255,255,.78);
    font-size: 16px;
    line-height: 1.68;
    font-weight: 400;
    letter-spacing: -.006em;
}

/* Кнопки */

.button {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -.01em;
}

/* Правый микро-блок */

.hero-side-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .18em;
    text-shadow: 0 1px 12px rgba(0,0,0,.45);
}

.hero-side-text {
    font-size: 12px;
    line-height: 1.6;
    font-weight: 600;
    letter-spacing: .09em;
    text-shadow: 0 1px 14px rgba(0,0,0,.55);
}


/* =========================================================
   VEDOMO HERO — FINAL POLISH v3
   ========================================================= */

/* Навигация — чуть крупнее и спокойнее */
.nav a {
    font-size: 15px;
    font-weight: 500;
    letter-spacing: -0.012em;
}

.header-cta {
    min-height: 48px;
    padding: 0 24px;
    font-size: 14px;
    font-weight: 500;
}

/* Чуть больше воздуха внутри основной композиции */
.hero-copy {
    max-width: 740px;
}

.eyebrow {
    margin-bottom: 30px;
}

/* H1 оставляем главным визуальным акцентом */
h1 {
    font-size: clamp(62px, 5.55vw, 96px);
    line-height: .97;
    font-weight: 600;
    letter-spacing: -.052em;
}

/* Второй уровень — спокойнее H1 */
.hero-manifesto {
    margin-top: 38px;
    font-size: clamp(19px, 1.3vw, 22px);
    line-height: 1.4;
    font-weight: 500;
    letter-spacing: -.022em;
}

/* Основной текст — легче, короче строка, больше воздуха */
.hero-description {
    max-width: 610px;
    margin-top: 24px;
    color: rgba(255,255,255,.80);
    font-size: 16px;
    line-height: 1.75;
    font-weight: 400;
    letter-spacing: -.008em;
}

/* Кнопки */
.hero-actions {
    gap: 16px;
    margin-top: 40px;
}

.button {
    min-height: 56px;
    padding: 0 30px;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: -.012em;
}

/* Вторичная кнопка чуть деликатнее */
.button-secondary {
    border-color: rgba(255,255,255,.30);
    background: rgba(5,12,25,.18);
}

/* Правый блок не должен конкурировать с H1 */
.hero-side {
    width: 255px;
}

.hero-side-label {
    color: rgba(255,255,255,.48);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .19em;
}

.hero-side-line {
    width: 92px;
    margin-top: 17px;
    margin-bottom: 17px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(137,174,255,.80)
    );
}

.hero-side-text {
    color: rgba(255,255,255,.84);
    font-size: 12px;
    line-height: 1.65;
    font-weight: 500;
    letter-spacing: .085em;
}

/* Нижняя подсказка остаётся деликатной, но читаемой */
.scroll-hint {
    bottom: 30px;
    color: rgba(255,255,255,.56);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .17em;
}

.scroll-hint span {
    width: 34px;
    background: rgba(255,255,255,.48);
}


/* =========================================================
   SECTION 02 — PROBLEM
   ========================================================= */

.problem {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 78% 48%, rgba(83,111,255,.075), transparent 30%),
        #f6f8fc;
    color: #0a1425;
}

.problem::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: min(1500px, calc(100% - 96px));
    height: 1px;
    transform: translateX(-50%);
    background: rgba(10,20,37,.08);
}

.problem-inner {
    position: relative;
    width: min(1500px, calc(100% - 96px));
    min-height: 850px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 760px) 1fr;
    gap: 70px;
    align-items: center;
    padding: 120px 0;
}

.problem-copy {
    position: relative;
    z-index: 2;
}

.section-eyebrow {
    margin-bottom: 30px;
    color: #4777e9;
    font-size: 11px;
    line-height: 1.4;
    font-weight: 600;
    letter-spacing: .20em;
}

.problem h2 {
    max-width: 780px;
    font-family: "Inter Display", "Inter", sans-serif;
    font-size: clamp(46px, 4vw, 70px);
    line-height: 1.05;
    letter-spacing: -.052em;
    font-weight: 500;
    color: #0a1425;
}

.problem h2 span {
    color: #667085;
}

.data-stream {
    max-width: 680px;
    margin-top: 46px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 11px 14px;
    color: #536071;
    font-size: 14px;
    line-height: 1.5;
    font-weight: 500;
}

.data-stream i {
    width: 3px;
    height: 3px;
    flex: 0 0 3px;
    border-radius: 50%;
    background: #8c9bad;
}

.problem-conclusion {
    max-width: 610px;
    margin-top: 50px;
    padding-top: 28px;
    border-top: 1px solid rgba(10,20,37,.11);
    color: #647083;
    font-size: 18px;
    line-height: 1.65;
    font-weight: 400;
}

.problem-conclusion strong {
    display: block;
    margin-top: 6px;
    color: #111d30;
    font-weight: 500;
}


/* DATA VISUAL */

.data-visual {
    position: relative;
    justify-self: end;
    width: min(100%, 620px);
    height: 570px;
}

.data-visual::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 390px;
    height: 390px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(78,112,255,.12) 0%,
        rgba(111,81,255,.045) 43%,
        transparent 70%
    );
    filter: blur(4px);
}

.visual-orbit {
    position: absolute;
    left: 50%;
    top: 50%;
    border: 1px solid rgba(64,87,130,.10);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.orbit-one {
    width: 390px;
    height: 390px;
}

.orbit-two {
    width: 520px;
    height: 520px;
    border-style: dashed;
    border-color: rgba(64,87,130,.08);
}

.visual-center {
    position: absolute;
    z-index: 4;
    left: 50%;
    top: 50%;
    width: 116px;
    height: 116px;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(75,101,161,.15);
    border-radius: 50%;
    background: rgba(255,255,255,.76);
    box-shadow:
        0 25px 70px rgba(35,55,95,.10),
        inset 0 0 0 7px rgba(255,255,255,.42);
    backdrop-filter: blur(14px);
}

.visual-center span {
    color: #8290a4;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .16em;
}

.visual-center strong {
    margin-top: 3px;
    font-family: "Inter Display", "Inter", sans-serif;
    color: #345eea;
    font-size: 37px;
    line-height: 1;
    font-weight: 500;
}

.data-card {
    position: absolute;
    z-index: 3;
    padding: 18px 19px;
    border: 1px solid rgba(50,70,105,.10);
    border-radius: 17px;
    background: rgba(255,255,255,.72);
    box-shadow: 0 20px 60px rgba(33,50,82,.08);
    backdrop-filter: blur(18px);
}

.card-top {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #4c596c;
    font-size: 12px;
    font-weight: 500;
}

.card-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2d8cff, #8058f4);
    box-shadow: 0 0 0 4px rgba(72,105,245,.08);
}

.card-sales {
    top: 44px;
    left: 56px;
    width: 215px;
    height: 125px;
    transform: rotate(-2deg);
}

.card-commission {
    top: 70px;
    right: 14px;
    width: 190px;
    height: 112px;
    transform: rotate(2.5deg);
}

.card-ad {
    top: 230px;
    right: 0;
    width: 205px;
    height: 116px;
    transform: rotate(-1deg);
}

.card-logistics {
    bottom: 45px;
    right: 70px;
    width: 210px;
    height: 116px;
    transform: rotate(2deg);
}

.card-stock {
    bottom: 75px;
    left: 18px;
    width: 195px;
    height: 120px;
    transform: rotate(-2.5deg);
}

.fake-chart {
    height: 57px;
    margin-top: 18px;
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

.fake-chart i {
    display: block;
    flex: 1;
    border-radius: 4px 4px 1px 1px;
    background: linear-gradient(180deg, rgba(74,105,239,.62), rgba(74,105,239,.10));
}

.fake-chart i:nth-child(1) { height: 31%; }
.fake-chart i:nth-child(2) { height: 47%; }
.fake-chart i:nth-child(3) { height: 40%; }
.fake-chart i:nth-child(4) { height: 67%; }
.fake-chart i:nth-child(5) { height: 55%; }
.fake-chart i:nth-child(6) { height: 88%; }

.metric-lines {
    margin-top: 20px;
}

.metric-lines i {
    display: block;
    height: 5px;
    margin-top: 9px;
    border-radius: 999px;
    background: #e5eaf2;
}

.metric-lines i:nth-child(1) { width: 88%; }
.metric-lines i:nth-child(2) { width: 63%; }
.metric-lines i:nth-child(3) {
    width: 74%;
    background: linear-gradient(90deg, #d9e3ff, #ece5ff);
}

.mini-wave {
    position: relative;
    height: 50px;
    margin-top: 16px;
    overflow: hidden;
}

.mini-wave::before,
.mini-wave::after {
    content: "";
    position: absolute;
    left: -10%;
    width: 120%;
    height: 38px;
    border-top: 2px solid rgba(83,103,226,.35);
    border-radius: 50%;
}

.mini-wave::before {
    top: 19px;
    transform: rotate(-6deg);
}

.mini-wave::after {
    top: 28px;
    border-color: rgba(145,86,235,.20);
    transform: rotate(5deg);
}

.route-line {
    position: relative;
    height: 45px;
    margin-top: 19px;
}

.route-line::before {
    content: "";
    position: absolute;
    left: 9px;
    right: 9px;
    top: 20px;
    height: 1px;
    background: linear-gradient(90deg, #b8c7e9, #6e8ff0, #c7b9eb);
}

.route-line i {
    position: absolute;
    top: 16px;
    width: 9px;
    height: 9px;
    border: 2px solid #6688e8;
    border-radius: 50%;
    background: #fff;
}

.route-line i:nth-child(1) { left: 5px; }
.route-line i:nth-child(2) { left: 50%; transform: translateX(-50%); }
.route-line i:nth-child(3) { right: 5px; }

.stock-bars {
    height: 48px;
    margin-top: 18px;
    display: flex;
    align-items: center;
    gap: 7px;
}

.stock-bars i {
    display: block;
    height: 6px;
    border-radius: 999px;
    background: #e4e9f2;
}

.stock-bars i:nth-child(1) { width: 42px; background: #7895eb; }
.stock-bars i:nth-child(2) { width: 26px; }
.stock-bars i:nth-child(3) { width: 48px; background: #b7a5eb; }
.stock-bars i:nth-child(4) { width: 23px; }


@media (max-width: 1100px) {
    .problem-inner {
        width: calc(100% - 48px);
        grid-template-columns: 1fr;
        min-height: auto;
        padding: 100px 0;
    }

    .data-visual {
        justify-self: center;
        width: min(100%, 620px);
    }
}

@media (max-width: 640px) {
    .problem-inner {
        width: calc(100% - 32px);
        padding: 80px 0;
        gap: 60px;
    }

    .problem h2 {
        font-size: 42px;
    }

    .data-stream {
        margin-top: 32px;
        gap: 9px 11px;
    }

    .problem-conclusion {
        margin-top: 36px;
        font-size: 16px;
    }

    .data-visual {
        height: 480px;
        transform: scale(.88);
        transform-origin: center top;
    }
}


/* =========================================================
   SECTION 02 — FINAL POLISH v2
   ========================================================= */

/* Чуть меньше лишнего воздуха сверху */
.problem-inner {
    padding-top: 90px;
    padding-bottom: 120px;
}

/* Вторая часть заголовка — контрастнее */
.problem h2 span {
    color: #586579;
}

/* Финальная мысль — более выраженная, но без тяжёлого bold */
.problem-conclusion {
    color: #647083;
    font-size: 18px;
    line-height: 1.68;
}

.problem-conclusion strong {
    display: block;
    margin-top: 8px;
    color: #142033;
    font-family: "Inter Display", "Inter", sans-serif;
    font-size: 20px;
    line-height: 1.5;
    font-weight: 500;
    letter-spacing: -.018em;
}

/* Карточки становятся чуть более материальными */
.data-card {
    border-color: rgba(47,68,105,.15);
    background: rgba(255,255,255,.86);
    box-shadow:
        0 22px 55px rgba(33,50,82,.10),
        0 2px 8px rgba(33,50,82,.025);
}

/* Названия источников данных */
.card-top {
    color: #3f4c60;
    font-weight: 500;
}

/* Чуть яснее визуальные данные */
.fake-chart i {
    background: linear-gradient(
        180deg,
        rgba(74,105,239,.78),
        rgba(74,105,239,.16)
    );
}

.metric-lines i {
    background: #dbe2ed;
}

.metric-lines i:nth-child(3) {
    background: linear-gradient(90deg, #cbd9ff, #dfd2ff);
}

.mini-wave::before {
    border-color: rgba(72,96,225,.52);
}

.mini-wave::after {
    border-color: rgba(137,78,229,.32);
}

.route-line::before {
    background: linear-gradient(
        90deg,
        #aebfe7,
        #5e82ed,
        #b6a5e5
    );
}

.stock-bars i {
    background: #d9e0eb;
}

.stock-bars i:nth-child(1) {
    background: #6484e9;
}

.stock-bars i:nth-child(3) {
    background: #a994e5;
}

/* Центральный вопрос остаётся главным */
.visual-center {
    background: rgba(255,255,255,.90);
    border-color: rgba(65,91,153,.18);
    box-shadow:
        0 28px 75px rgba(48,70,120,.13),
        inset 0 0 0 7px rgba(255,255,255,.50);
}

.visual-center span {
    color: #74839a;
}

.visual-center strong {
    color: #315fe8;
}

/* Орбиты остаются фоновыми */
.orbit-one {
    border-color: rgba(64,87,130,.11);
}

.orbit-two {
    border-color: rgba(64,87,130,.075);
}

@media (max-width: 1100px) {
    .problem-inner {
        padding-top: 90px;
        padding-bottom: 100px;
    }
}

@media (max-width: 640px) {
    .problem-inner {
        padding-top: 72px;
        padding-bottom: 80px;
    }

    .problem-conclusion strong {
        font-size: 18px;
    }
}


/* =========================================================
   SECTION 02 — TRANSFORMATION VISUAL v3
   Разрозненные данные → VEDOMO → понимание
   ========================================================= */

.transformation-visual {
    position: relative;
    justify-self: end;
    width: min(100%, 680px);
    height: 520px;
    display: grid;
    grid-template-columns: 300px 72px 285px;
    align-items: center;
}

/* Убираем элементы предыдущей круговой схемы */
.transformation-visual::before {
    display: none;
}


/* ---------------------------------------------------------
   SOURCE CLOUD
   --------------------------------------------------------- */

.source-cloud {
    position: relative;
    width: 300px;
    height: 400px;
    perspective: 900px;
}

.source-cloud::before {
    content: "";
    position: absolute;
    left: 25px;
    top: 40px;
    width: 255px;
    height: 310px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(70,108,245,.15) 0%,
        rgba(116,92,242,.07) 42%,
        transparent 72%
    );
    filter: blur(16px);
}

.source-card {
    position: absolute;
    width: 165px;
    height: 112px;
    padding: 17px 16px;
    overflow: hidden;
    border: 1px solid rgba(70,92,140,.13);
    border-radius: 16px;
    background: rgba(255,255,255,.67);
    box-shadow:
        0 18px 50px rgba(37,57,100,.09),
        inset 0 1px 0 rgba(255,255,255,.85);
    backdrop-filter: blur(14px);
    transform-style: preserve-3d;
}

.source-card strong {
    position: relative;
    display: inline-block;
    margin-left: 11px;
    color: #536075;
    font-size: 11px;
    line-height: 1.3;
    font-weight: 500;
}

.source-dot {
    position: absolute;
    top: 21px;
    left: 16px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #557cf1;
    box-shadow: 0 0 0 4px rgba(85,124,241,.08);
}

.source-lines {
    margin-top: 18px;
}

.source-lines i {
    display: block;
    height: 4px;
    margin-top: 8px;
    border-radius: 999px;
    background: rgba(105,126,166,.14);
}

.source-lines i:nth-child(1) {
    width: 86%;
}

.source-lines i:nth-child(2) {
    width: 63%;
}

.source-lines i:nth-child(3) {
    width: 74%;
    background: linear-gradient(
        90deg,
        rgba(77,112,238,.22),
        rgba(143,98,231,.16)
    );
}

.source-mini-chart {
    height: 45px;
    margin-top: 16px;
    display: flex;
    align-items: flex-end;
    gap: 6px;
}

.source-mini-chart i {
    display: block;
    width: 20px;
    border-radius: 3px 3px 1px 1px;
    background: linear-gradient(
        180deg,
        rgba(80,112,235,.56),
        rgba(80,112,235,.10)
    );
}

.source-mini-chart i:nth-child(1) { height: 30%; }
.source-mini-chart i:nth-child(2) { height: 48%; }
.source-mini-chart i:nth-child(3) { height: 67%; }
.source-mini-chart i:nth-child(4) { height: 88%; }

.source-route {
    position: relative;
    height: 38px;
    margin-top: 18px;
}

.source-route::before {
    content: "";
    position: absolute;
    left: 5px;
    right: 5px;
    top: 17px;
    height: 1px;
    background: linear-gradient(
        90deg,
        rgba(93,127,232,.28),
        rgba(93,127,232,.68),
        rgba(147,104,221,.34)
    );
}

.source-route i {
    position: absolute;
    top: 13px;
    width: 8px;
    height: 8px;
    border: 2px solid rgba(91,124,228,.70);
    border-radius: 50%;
    background: #fff;
}

.source-route i:nth-child(1) { left: 2px; }
.source-route i:nth-child(2) {
    left: 50%;
    transform: translateX(-50%);
}
.source-route i:nth-child(3) { right: 2px; }


/* Намеренно разрозненная композиция */

.source-sales {
    z-index: 2;
    left: 10px;
    top: 34px;
    opacity: .70;
    transform: rotate(-4deg) translateZ(-20px);
}

.source-ad {
    z-index: 4;
    right: 3px;
    top: 3px;
    opacity: .84;
    transform: rotate(4deg) translateZ(12px);
}

.source-commission {
    z-index: 5;
    left: 2px;
    top: 147px;
    opacity: .91;
    transform: rotate(-2deg) translateZ(20px);
}

.source-stock {
    z-index: 3;
    right: 2px;
    top: 132px;
    opacity: .77;
    transform: rotate(3deg) translateZ(3px);
}

.source-logistics {
    z-index: 6;
    left: 66px;
    bottom: 15px;
    opacity: .95;
    transform: rotate(-1deg) translateZ(30px);
}


/* ---------------------------------------------------------
   TRANSFORMATION ARROW
   --------------------------------------------------------- */

.transform-arrow {
    position: relative;
    z-index: 7;
    width: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.transform-arrow span {
    position: absolute;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(61,111,246,.13),
        transparent 70%
    );
}

.transform-arrow strong {
    position: relative;
    color: #3977ed;
    font-family: "Inter", sans-serif;
    font-size: 35px;
    line-height: 1;
    font-weight: 400;
}


/* ---------------------------------------------------------
   VEDOMO RESULT
   --------------------------------------------------------- */

.vedomo-result-card {
    position: relative;
    z-index: 8;
    width: 285px;
    min-height: 330px;
    padding: 32px 30px;
    border: 1px solid rgba(44,66,110,.13);
    border-radius: 22px;
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.98),
            rgba(248,250,255,.94)
        );
    box-shadow:
        0 32px 80px rgba(35,53,91,.13),
        0 6px 20px rgba(35,53,91,.04),
        inset 0 1px 0 rgba(255,255,255,1);
}

.vedomo-result-card::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -35px;
    border-radius: 50px;
    background: radial-gradient(
        circle at center,
        rgba(62,105,245,.11),
        rgba(122,85,239,.035) 46%,
        transparent 72%
    );
    filter: blur(12px);
}

.result-logo {
    width: 165px;
    height: 44px;
    display: flex;
    align-items: center;
    overflow: hidden;
}

/*
   Наш утверждённый логотип имеет белый wordmark для DARK Hero.
   На светлой карточке оставляем его на фирменной тёмной плашке,
   чтобы не перекрашивать и не подменять master-logo.
*/
.result-logo {
    width: 185px;
    height: 52px;
    padding: 10px 14px;
    border-radius: 12px;
    background: #091426;
}

.result-logo img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

.result-divider {
    width: 100%;
    height: 1px;
    margin: 27px 0 25px;
    background: linear-gradient(
        90deg,
        rgba(35,52,82,.11),
        rgba(35,52,82,.035)
    );
}

.result-list {
    display: flex;
    flex-direction: column;
    gap: 19px;
}

.result-list > div {
    display: grid;
    grid-template-columns: 22px 1fr;
    align-items: start;
    gap: 10px;
}

.result-list span {
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #3974e8;
    background: rgba(57,116,232,.09);
    font-size: 12px;
    line-height: 1;
    font-weight: 600;
}

.result-list p {
    padding-top: 1px;
    color: #253247;
    font-size: 13px;
    line-height: 1.45;
    font-weight: 500;
}


/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

@media (max-width: 1250px) {
    .transformation-visual {
        transform: scale(.90);
        transform-origin: right center;
    }
}

@media (max-width: 1100px) {
    .transformation-visual {
        justify-self: center;
        transform: none;
    }
}

@media (max-width: 720px) {
    .transformation-visual {
        width: 680px;
        max-width: none;
        transform: scale(.72);
        transform-origin: left top;
        margin-bottom: -120px;
    }
}

@media (max-width: 520px) {
    .transformation-visual {
        transform: scale(.54);
        margin-bottom: -210px;
    }
}


/* =========================================================
   SECTION 02 — REFERENCE VERSION v7
   ========================================================= */

.problem-reference {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 68% 48%,
            rgba(82,115,244,.065),
            transparent 29%
        ),
        #f7f9fd;
    color: #0a1425;
}

.problem-ref-inner {
    position: relative;
    width: min(1500px, calc(100% - 96px));
    min-height: 650px;
    margin: 0 auto;
    display: grid;
    grid-template-columns:
        minmax(390px, .95fr)
        minmax(330px, .78fr)
        80px
        minmax(315px, .67fr);
    align-items: center;
    gap: 20px;
    padding: 92px 0 96px;
}


/* ---------------------------------------------------------
   LEFT COPY
   --------------------------------------------------------- */

.problem-ref-copy {
    position: relative;
    z-index: 5;
    align-self: center;
}

.problem-ref-eyebrow {
    margin-bottom: 20px;
    color: #7b879b;
    font-size: 11px;
    line-height: 1;
    font-weight: 600;
    letter-spacing: .19em;
}

.problem-reference .problem-ref-title {
    max-width: 540px;
    margin: 0;
    color: #0b1628;
    font-family: "Inter Display", "Inter", sans-serif;
    font-size: clamp(40px, 3.05vw, 56px);
    line-height: 1.07;
    letter-spacing: -.047em;
    font-weight: 600;
}

.problem-ref-text {
    max-width: 490px;
    margin-top: 34px;
    color: #657185;
    font-size: 17px;
    line-height: 1.62;
    font-weight: 400;
}

.problem-ref-text strong {
    display: block;
    margin-top: 7px;
    color: #18253a;
    font-weight: 500;
}


/* ---------------------------------------------------------
   SOURCE CARDS
   --------------------------------------------------------- */

.problem-ref-sources {
    position: relative;
    width: 360px;
    height: 365px;
    justify-self: center;
    perspective: 1100px;
}

.problem-ref-sources::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 310px;
    height: 300px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(72,111,244,.13) 0%,
        rgba(117,92,239,.055) 46%,
        transparent 72%
    );
    filter: blur(18px);
}

.ref-source {
    position: absolute;
    width: 150px;
    height: 184px;
    padding: 24px 18px;
    border: 1px solid rgba(74,98,150,.12);
    border-radius: 15px;
    background:
        linear-gradient(
            155deg,
            rgba(255,255,255,.79),
            rgba(243,247,255,.52)
        );
    box-shadow:
        0 25px 60px rgba(42,61,105,.075),
        inset 0 1px 0 rgba(255,255,255,.90);
    backdrop-filter: blur(13px);
}

.ref-source span {
    display: block;
    color: #4c5b71;
    font-size: 11px;
    line-height: 1.3;
    font-weight: 500;
}

.ref-source i {
    display: block;
    height: 4px;
    margin-top: 16px;
    border-radius: 99px;
    background: rgba(91,116,167,.11);
}

.ref-source i:nth-of-type(1) {
    width: 78%;
}

.ref-source i:nth-of-type(2) {
    width: 52%;
    margin-top: 9px;
    background: linear-gradient(
        90deg,
        rgba(68,112,239,.18),
        rgba(137,91,231,.10)
    );
}


/* Глубина как в референсе */

.ref-source-back {
    z-index: 1;
    left: 113px;
    top: 8px;
    opacity: .44;
    transform:
        perspective(900px)
        rotateY(-7deg)
        translateZ(-45px);
}

.ref-source-sales {
    z-index: 3;
    left: 27px;
    top: 48px;
    opacity: .68;
    transform:
        perspective(900px)
        rotateY(8deg)
        rotateZ(-2deg);
}

.ref-source-stock {
    z-index: 4;
    right: 18px;
    top: 65px;
    opacity: .73;
    transform:
        perspective(900px)
        rotateY(-7deg)
        rotateZ(2deg);
}

.ref-source-commission {
    z-index: 5;
    left: 0;
    bottom: 18px;
    opacity: .84;
    transform:
        perspective(900px)
        rotateY(8deg)
        rotateZ(-2deg);
}

.ref-source-logistics {
    z-index: 6;
    right: 43px;
    bottom: 0;
    opacity: .93;
    transform:
        perspective(900px)
        rotateY(-5deg)
        rotateZ(1deg);
}


/* ---------------------------------------------------------
   ARROW
   --------------------------------------------------------- */

.problem-ref-arrow {
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}

.problem-ref-arrow::before {
    content: "";
    position: absolute;
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(55,116,239,.11),
        transparent 68%
    );
}

.problem-ref-arrow span {
    position: relative;
    color: #3177ee;
    font-family: "Inter", sans-serif;
    font-size: 38px;
    line-height: 1;
    font-weight: 400;
}


/* ---------------------------------------------------------
   VEDOMO RESULT CARD
   --------------------------------------------------------- */

.problem-ref-result {
    position: relative;
    z-index: 8;
    width: 100%;
    max-width: 330px;
    min-height: 360px;
    justify-self: end;
    padding: 38px 34px 36px;
    border: 1px solid rgba(47,69,111,.11);
    border-radius: 18px;
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.99),
            rgba(249,251,255,.97)
        );
    box-shadow:
        0 32px 80px rgba(36,55,94,.105),
        0 4px 15px rgba(36,55,94,.025),
        inset 0 1px 0 #fff;
}

.problem-ref-result::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -42px;
    border-radius: 70px;
    background: radial-gradient(
        circle,
        rgba(59,111,242,.10),
        rgba(115,81,238,.025) 52%,
        transparent 72%
    );
    filter: blur(15px);
}


/* ---------------------------------------------------------
   LIGHT VERSION OF BRAND
   --------------------------------------------------------- */

.ref-brand {
    display: flex;
    align-items: center;
    gap: 11px;
}

/*
   Берём только цветной знак из утверждённого master PNG.
   Исходный файл не меняем.
*/
.ref-brand-mark {
    width: 47px;
    height: 38px;
    overflow: hidden;
    flex: 0 0 47px;
}

.ref-brand-mark img {
    display: block;
    width: 172px;
    max-width: none;
    height: auto;
    transform: translate(-1px, -1px);
}

.ref-brand-name {
    color: #101c30;
    font-family: "Inter Display", "Inter", sans-serif;
    font-size: 20px;
    line-height: 1;
    font-weight: 600;
    letter-spacing: .025em;
}

.ref-result-line {
    width: 100%;
    height: 1px;
    margin: 28px 0 27px;
    background: linear-gradient(
        90deg,
        rgba(36,55,89,.10),
        rgba(36,55,89,.025)
    );
}


/* ---------------------------------------------------------
   BENEFITS
   --------------------------------------------------------- */

.ref-benefits {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.ref-benefit {
    display: grid;
    grid-template-columns: 22px 1fr;
    align-items: center;
    gap: 11px;
}

.ref-benefit span {
    width: 21px;
    height: 21px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #3176e9;
    background: rgba(49,118,233,.085);
    font-size: 12px;
    line-height: 1;
    font-weight: 600;
}

.ref-benefit p {
    margin: 0;
    color: #2c394d;
    font-size: 14px;
    line-height: 1.4;
    font-weight: 500;
}


/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

@media (max-width: 1250px) {

    .problem-ref-inner {
        grid-template-columns:
            minmax(360px, 1fr)
            315px
            60px
            290px;
        gap: 12px;
    }

    .problem-ref-sources {
        transform: scale(.90);
        transform-origin: center;
    }
}

@media (max-width: 1050px) {

    .problem-ref-inner {
        width: calc(100% - 48px);
        grid-template-columns: 1fr 1fr;
        gap: 65px 30px;
        padding: 90px 0;
    }

    .problem-ref-copy {
        grid-column: 1 / -1;
    }

    .problem-ref-sources {
        justify-self: center;
    }

    .problem-ref-arrow {
        display: none;
    }

    .problem-ref-result {
        justify-self: center;
    }
}

@media (max-width: 700px) {

    .problem-ref-inner {
        width: calc(100% - 32px);
        display: block;
        padding: 75px 0;
    }

    .problem-reference .problem-ref-title {
        font-size: 42px;
    }

    .problem-ref-text {
        font-size: 16px;
    }

    .problem-ref-sources {
        margin: 60px auto 25px;
        transform: scale(.88);
    }

    .problem-ref-result {
        margin: 20px auto 0;
    }
}


/* =========================================================
   VEDOMO — PROBLEM SECTION FINAL
   Approved composition
   ========================================================= */

.problem-final {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(
            ellipse at 65% 51%,
            rgba(93,126,244,.07) 0%,
            rgba(93,126,244,.025) 31%,
            transparent 59%
        ),
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f9fbff 100%
        );
}

.problem-final-inner {
    width: min(1540px, calc(100% - 110px));
    min-height: 650px;
    margin: 0 auto;

    display: grid;
    grid-template-columns:
        minmax(430px, 1.05fr)
        minmax(370px, .82fr)
        80px
        minmax(350px, .78fr);

    gap: 24px;
    align-items: center;

    padding: 94px 0 100px;
}


/* =========================================================
   LEFT SIDE
   ========================================================= */

.problem-final-copy {
    position: relative;
    z-index: 10;
}

.problem-final-eyebrow {
    margin-bottom: 20px;

    color: #8491aa;

    font-family: "Inter", sans-serif;
    font-size: 12px;
    line-height: 1;
    font-weight: 600;

    letter-spacing: .19em;
}

.problem-final-copy h2 {
    max-width: 570px;

    margin: 0;

    color: #071426;

    font-family: "Inter Display", "Inter", sans-serif;
    font-size: clamp(42px, 3.1vw, 58px);
    line-height: 1.06;
    font-weight: 600;

    letter-spacing: -.048em;
}

.problem-final-message {
    max-width: 550px;

    margin-top: 38px;

    font-family: "Inter", sans-serif;
    font-size: 17px;
    line-height: 1.62;
}

.problem-final-message p {
    margin: 0;

    color: #627089;

    font-weight: 400;
}

.problem-final-message strong {
    display: block;

    margin-top: 7px;

    color: #1b2c47;

    font-weight: 600;
}


/* =========================================================
   DATA CLOUD
   ========================================================= */

.problem-final-chaos {
    position: relative;

    justify-self: center;

    width: 390px;
    height: 390px;

    perspective: 1200px;
}

.problem-final-chaos::before {
    content: "";

    position: absolute;

    left: 50%;
    top: 50%;

    width: 340px;
    height: 340px;

    transform: translate(-50%, -50%);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(67,111,245,.14) 0%,
            rgba(92,114,242,.075) 32%,
            rgba(131,97,239,.025) 57%,
            transparent 74%
        );

    filter: blur(18px);
}


/* Base card */

.chaos-card {
    position: absolute;

    box-sizing: border-box;

    overflow: hidden;

    border: 1px solid rgba(93,126,198,.11);
    border-radius: 13px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.72),
            rgba(239,245,255,.45)
        );

    box-shadow:
        0 24px 55px rgba(61,83,136,.065),
        inset 0 1px 0 rgba(255,255,255,.9);

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

.chaos-card b {
    display: block;

    padding: 19px 18px 0;

    color: #33445f;

    font-family: "Inter", sans-serif;
    font-size: 12px;
    line-height: 1.2;
    font-weight: 500;
}


/* Main vertical cards */

.chaos-ad {
    z-index: 1;

    width: 160px;
    height: 202px;

    left: 122px;
    top: 0;

    opacity: .45;

    transform:
        perspective(900px)
        rotateY(-5deg)
        translateZ(-40px);
}

.chaos-sales {
    z-index: 3;

    width: 164px;
    height: 205px;

    left: 34px;
    top: 53px;

    opacity: .68;

    transform:
        perspective(900px)
        rotateY(7deg)
        rotateZ(-1.5deg);
}

.chaos-stock {
    z-index: 4;

    width: 166px;
    height: 207px;

    right: 14px;
    top: 78px;

    opacity: .74;

    transform:
        perspective(900px)
        rotateY(-7deg)
        rotateZ(1.5deg);
}

.chaos-commission {
    z-index: 5;

    width: 165px;
    height: 205px;

    left: 0;
    bottom: 20px;

    opacity: .84;

    transform:
        perspective(900px)
        rotateY(8deg)
        rotateZ(-2deg);
}

.chaos-logistics {
    z-index: 6;

    width: 168px;
    height: 207px;

    right: 48px;
    bottom: 0;

    opacity: .91;

    transform:
        perspective(900px)
        rotateY(-5deg)
        rotateZ(1deg);
}


/* Small supporting cards */

.chaos-small-one,
.chaos-small-two {
    width: 108px;
    height: 76px;

    padding: 24px 17px;
}

.chaos-small-one {
    z-index: 7;

    left: 30px;
    bottom: 2px;

    opacity: .69;
}

.chaos-small-two {
    z-index: 7;

    right: 2px;
    bottom: 49px;

    opacity: .58;
}

.chaos-small-one span,
.chaos-small-two span {
    color: #3477ee;

    font-size: 20px;
    letter-spacing: 3px;
}


/* Fake analytics inside cards */

.chaos-bars {
    height: 72px;

    margin: 27px 17px 0;

    display: flex;
    align-items: flex-end;
    gap: 7px;
}

.chaos-bars i {
    display: block;

    flex: 1;

    border-radius: 3px 3px 1px 1px;

    background:
        linear-gradient(
            180deg,
            rgba(70,112,239,.34),
            rgba(70,112,239,.06)
        );
}

.chaos-bars i:nth-child(1) {
    height: 32%;
}

.chaos-bars i:nth-child(2) {
    height: 48%;
}

.chaos-bars i:nth-child(3) {
    height: 68%;
}

.chaos-bars i:nth-child(4) {
    height: 88%;
}


.chaos-lines {
    margin: 31px 17px 0;
}

.chaos-lines i {
    display: block;

    height: 4px;

    margin-bottom: 10px;

    border-radius: 99px;

    background: rgba(87,112,167,.13);
}

.chaos-lines i:nth-child(1) {
    width: 83%;
}

.chaos-lines i:nth-child(2) {
    width: 65%;
}

.chaos-lines i:nth-child(3) {
    width: 74%;

    background:
        linear-gradient(
            90deg,
            rgba(64,111,238,.23),
            rgba(133,91,232,.13)
        );
}


.chaos-line-chart {
    position: relative;

    height: 72px;

    margin: 24px 17px 0;
}

.chaos-line-chart::before,
.chaos-line-chart::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;

    height: 1px;

    transform-origin: left center;
}

.chaos-line-chart::before {
    top: 38px;

    background: rgba(65,111,239,.40);

    transform: rotate(-7deg);
}

.chaos-line-chart::after {
    top: 43px;

    background: rgba(137,90,230,.20);

    transform: rotate(4deg);
}


/* =========================================================
   ARROW
   ========================================================= */

.problem-final-arrow {
    position: relative;
    z-index: 20;

    justify-self: center;

    color: #1670ee;

    font-family: "Inter", sans-serif;
    font-size: 48px;
    line-height: 1;
    font-weight: 300;
}


/* =========================================================
   RESULT CARD
   ========================================================= */

.problem-final-result {
    position: relative;
    z-index: 15;

    width: 100%;
    max-width: 365px;
    min-height: 365px;

    justify-self: end;

    box-sizing: border-box;

    padding: 34px 38px 38px;

    border: 1px solid rgba(60,83,126,.08);
    border-radius: 21px;

    background: rgba(255,255,255,.94);

    box-shadow:
        0 30px 80px rgba(53,75,121,.085),
        0 5px 18px rgba(53,75,121,.025);

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

.problem-final-result::before {
    content: "";

    position: absolute;
    z-index: -1;

    inset: -45px;

    border-radius: 70px;

    background:
        radial-gradient(
            circle,
            rgba(62,111,244,.075),
            transparent 67%
        );

    filter: blur(15px);
}


/* =========================================================
   REAL LIGHT LOGO
   ========================================================= */

.problem-final-logo {
    width: 220px;
    height: 68px;

    display: flex;
    align-items: center;

    overflow: hidden;
}

.problem-final-logo img {
    display: block;

    width: 100%;
    height: auto;

    object-fit: contain;
}


/* =========================================================
   BENEFITS — SIMPLE CHECKMARKS
   ========================================================= */

.problem-final-benefits {
    margin-top: 28px;

    display: flex;
    flex-direction: column;

    gap: 22px;
}

.problem-final-benefits > div {
    display: grid;

    grid-template-columns: 27px 1fr;

    gap: 13px;

    align-items: center;
}

.final-check {
    display: block;

    color: #1670ee;

    font-family: "Inter", sans-serif;
    font-size: 25px;
    line-height: 1;
    font-weight: 500;
}

.problem-final-benefits p {
    margin: 0;

    color: #17263d;

    font-family: "Inter", sans-serif;
    font-size: 15px;
    line-height: 1.4;
    font-weight: 400;
}


/* =========================================================
   DESKTOP TUNING
   ========================================================= */

@media (max-width: 1350px) {

    .problem-final-inner {
        width: calc(100% - 70px);

        grid-template-columns:
            minmax(390px, 1fr)
            350px
            65px
            330px;

        gap: 15px;
    }

    .problem-final-chaos {
        transform: scale(.92);
        transform-origin: center;
    }

    .problem-final-result {
        max-width: 330px;
    }
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1080px) {

    .problem-final-inner {
        width: calc(100% - 48px);

        grid-template-columns: 1fr 1fr;

        gap: 55px 35px;

        padding: 85px 0;
    }

    .problem-final-copy {
        grid-column: 1 / -1;
    }

    .problem-final-chaos {
        justify-self: center;
    }

    .problem-final-arrow {
        display: none;
    }

    .problem-final-result {
        justify-self: center;

        max-width: 360px;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 720px) {

    .problem-final-inner {
        width: calc(100% - 32px);

        display: block;

        min-height: 0;

        padding: 72px 0 78px;
    }

    .problem-final-copy h2 {
        font-size: 42px;
    }

    .problem-final-message {
        font-size: 16px;
    }

    .problem-final-chaos {
        margin: 55px auto 20px;

        transform: scale(.86);
        transform-origin: center;
    }

    .problem-final-result {
        margin: 15px auto 0;

        max-width: 365px;
    }
}

@media (max-width: 460px) {

    .problem-final-copy h2 {
        font-size: 36px;
    }

    .problem-final-chaos {
        width: 390px;

        margin-left: 50%;
        margin-bottom: -30px;

        transform:
            translateX(-50%)
            scale(.72);

        transform-origin: center;
    }

    .problem-final-logo {
        width: 195px;
    }
}