/* MINDFLOW_MESSENGER_HUB_POLISH_V3_START */

.mh-page {
    overflow: hidden;
    color: #151a2d;
    background:
        radial-gradient(
            circle at 92% 5%,
            rgba(9, 165, 212, .13),
            transparent 27%
        ),
        #fff;
}

.mh-page em {
    color: #09a5d4;
    font-style: normal;
}

.mh-product-logo {
    display: block;
    width: min(500px, 100%);
    height: auto;
    margin-bottom: 26px;
}

.mh-hero {
    display: grid !important;
    grid-template-columns:
        minmax(0, .94fr)
        minmax(580px, 1.06fr) !important;
    gap: clamp(42px, 5vw, 88px) !important;
    align-items: center;
    min-height: auto !important;
    padding:
        clamp(54px, 7vw, 105px)
        clamp(24px, 5vw, 78px)
        clamp(78px, 8vw, 126px) !important;
}

.mh-hero-copy {
    min-width: 0;
}

.mh-hero h1 {
    max-width: 810px;
    margin: 0 0 27px !important;
    font-size: clamp(50px, 5.6vw, 86px) !important;
    line-height: .96 !important;
    letter-spacing: -.065em !important;
}

.mh-hero-copy > p {
    max-width: 780px;
    margin: 0;
    color: #67748b;
    font-size: clamp(17px, 1.35vw, 22px);
    line-height: 1.7;
}

.mh-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 34px;
}

.mh-secondary-action {
    color: #202366 !important;
    border: 1px solid rgba(32, 35, 102, .25) !important;
    background: #fff !important;
    box-shadow: 0 12px 28px rgba(32, 35, 102, .08);
}

.mh-secondary-action:hover {
    color: #fff !important;
    background: #202366 !important;
}

.mh-live-channels {
    display: grid;
    gap: 12px;
    margin-top: 30px;
}

.mh-live-label {
    color: #7b8498;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.mh-live-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.mh-live-item {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 48px;
    padding: 8px 13px 8px 8px;
    color: #192038;
    border: 1px solid #dde4ee;
    border-radius: 14px;
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 10px 24px rgba(19, 24, 63, .05);
    font-size: 12px;
    font-weight: 750;
}

.mh-live-item img {
    width: 31px;
    height: 31px;
    border-radius: 9px;
}

.mh-app-frame {
    position: relative;
    min-width: 0;
    padding: 15px;
    border: 1px solid rgba(255, 255, 255, .82);
    border-radius: 31px;
    background: rgba(255, 255, 255, .74);
    box-shadow:
        0 36px 110px rgba(25, 34, 82, .22),
        0 0 0 1px rgba(205, 217, 234, .5);
    backdrop-filter: blur(15px);
}

.mh-app-window {
    overflow: hidden;
    min-height: 670px;
    border: 1px solid #d8e0ec;
    border-radius: 22px;
    background: #f4f6fb;
}

.mh-app-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    height: 72px;
    padding: 0 20px;
    color: #fff;
    background: #141a3d;
}

.mh-app-topbar img {
    width: 255px;
    max-height: 48px;
    object-fit: contain;
    object-position: left center;
}

.mh-app-state {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #68e7b9;
    font-size: 10px;
    font-weight: 800;
    white-space: nowrap;
}

.mh-app-state::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 5px rgba(104, 231, 185, .1);
}

.mh-app-body {
    display: grid;
    grid-template-columns: 158px minmax(0, 1fr);
    min-height: 598px;
}

.mh-app-sidebar {
    padding: 17px 11px;
    color: #aeb7cf;
    background: #202641;
}

.mh-app-sidebar small {
    display: block;
    padding: 8px 10px;
    color: #717b98;
    font-size: 8px;
    font-weight: 850;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.mh-app-nav {
    display: grid;
    gap: 4px;
    margin-bottom: 14px;
}

.mh-app-nav span {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 650;
}

.mh-app-nav span.active {
    color: #fff;
    background: rgba(9, 165, 212, .25);
}

.mh-app-nav i {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 7px;
    background: rgba(255, 255, 255, .08);
    font-size: 7px;
    font-style: normal;
}

.mh-app-main {
    min-width: 0;
    padding: 17px;
}

.mh-app-main-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}

.mh-app-main-head div {
    min-width: 0;
}

.mh-app-main-head b {
    display: block;
    font-size: 15px;
}

.mh-app-main-head span {
    display: block;
    margin-top: 3px;
    color: #7a8498;
    font-size: 9px;
}

.mh-route-status {
    padding: 7px 9px;
    color: #159669 !important;
    border-radius: 999px;
    background: #e3f8f0;
    font-size: 8px !important;
    font-weight: 850;
    white-space: nowrap;
}

.mh-app-columns {
    display: grid;
    grid-template-columns:
        160px
        minmax(250px, 1fr)
        150px;
    gap: 11px;
    min-height: 518px;
}

.mh-dialogs,
.mh-conversation,
.mh-crm-panel {
    overflow: hidden;
    border: 1px solid #dce3ee;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 7px 18px rgba(17, 24, 39, .035);
}

.mh-panel-title {
    padding: 11px 12px;
    border-bottom: 1px solid #e3e8f0;
    background: #fafbfe;
}

.mh-panel-title b {
    display: block;
    font-size: 10px;
}

.mh-panel-title span {
    display: block;
    margin-top: 3px;
    color: #828ba0;
    font-size: 7px;
}

.mh-dialog-list {
    display: grid;
    gap: 7px;
    padding: 9px;
}

.mh-dialog {
    padding: 9px;
    border: 1px solid #e4e9f1;
    border-radius: 11px;
    background: #fff;
}

.mh-dialog.active {
    border-color: #bad7ea;
    background: #edf7fd;
}

.mh-dialog b {
    display: block;
    font-size: 9px;
}

.mh-dialog p {
    overflow: hidden;
    margin: 4px 0 0;
    color: #7c879b;
    font-size: 7px;
    line-height: 1.4;
}

.mh-dialog-channel {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 7px;
    padding: 4px 6px;
    color: #3f41a9;
    border-radius: 999px;
    background: #eeefff;
    font-size: 6px;
    font-weight: 850;
}

.mh-dialog-channel img {
    width: 13px;
    height: 13px;
    border-radius: 4px;
}

.mh-conversation {
    display: grid;
    grid-template-rows: auto 1fr auto;
}

.mh-message-feed {
    display: flex;
    flex-direction: column;
    gap: 11px;
    padding: 14px 12px;
    background:
        linear-gradient(180deg, #fafbfe, #f3f6fa);
}

.mh-message {
    max-width: 84%;
    padding: 10px 11px;
    border-radius: 12px;
    font-size: 8px;
    line-height: 1.5;
}

.mh-message.in {
    align-self: flex-start;
    border: 1px solid #dfe5ed;
    border-bottom-left-radius: 4px;
    background: #fff;
}

.mh-message.out {
    align-self: flex-end;
    color: #fff;
    border-bottom-right-radius: 4px;
    background: linear-gradient(145deg, #4b4bcf, #3f41a9);
}

.mh-message small {
    display: block;
    margin-top: 5px;
    opacity: .65;
    font-size: 6px;
    text-align: right;
}

.mh-composer {
    padding: 10px;
    border-top: 1px solid #dfe5ed;
    background: #fbfcfe;
}

.mh-composer-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 9px;
    padding: 9px 10px;
    color: #929aac;
    border: 1px solid #dce3ed;
    border-radius: 10px;
    background: #fff;
    font-size: 7px;
}

.mh-composer-box i {
    display: grid;
    place-items: center;
    width: 25px;
    height: 25px;
    color: #fff;
    border-radius: 8px;
    background: #3f41a9;
    font-style: normal;
}

.mh-crm-panel {
    padding: 11px;
}

.mh-crm-panel > small {
    display: block;
    margin-bottom: 10px;
    color: #7b8498;
    font-size: 8px;
    font-weight: 850;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.mh-crm-block {
    margin-bottom: 8px;
    padding: 9px;
    border-radius: 10px;
    background: #f4f6fb;
}

.mh-crm-block.utm {
    color: #2f327e;
    background: #e9eaff;
}

.mh-crm-block.route {
    color: #126d50;
    background: #e7f7f1;
}

.mh-crm-block span {
    display: block;
    color: #7d879a;
    font-size: 6px;
}

.mh-crm-block b {
    display: block;
    margin-top: 4px;
    font-size: 8px;
    line-height: 1.35;
}

.mh-channels {
    color: #fff;
    background:
        radial-gradient(
            circle at 86% 8%,
            rgba(9, 165, 212, .21),
            transparent 30%
        ),
        #13183f;
}

.mh-service-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    max-width: 1440px;
    margin: auto;
}

.mh-service-card {
    min-height: 335px;
    padding: clamp(29px, 3.3vw, 45px);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 23px;
    background: rgba(255, 255, 255, .055);
    transition:
        transform .18s ease,
        background .18s ease;
}

.mh-service-card:hover {
    transform: translateY(-3px);
    background: rgba(255, 255, 255, .08);
}

.mh-service-logo {
    width: 66px;
    height: 66px;
    border-radius: 19px;
    box-shadow: 0 12px 25px rgba(0, 0, 0, .18);
}

.mh-service-state {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 10px;
    padding: 6px 8px;
    color: #6fe9bd;
    border-radius: 999px;
    background: rgba(111, 233, 189, .1);
    font-size: 8px;
    font-weight: 850;
    vertical-align: top;
}

.mh-service-state::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.mh-service-card h3 {
    margin: 68px 0 16px;
    font-size: clamp(28px, 2.5vw, 39px);
    line-height: 1.05;
    letter-spacing: -.04em;
}

.mh-service-card p {
    margin: 0;
    color: rgba(255, 255, 255, .7);
    font-size: 15px;
    line-height: 1.7;
}

.mh-roadmap-title {
    max-width: 1440px;
    margin: 44px auto 17px;
    color: #4de2ff;
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.mh-roadmap-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    max-width: 1440px;
    margin: auto;
}

.mh-roadmap-card {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 15px;
    align-items: center;
    min-height: 145px;
    padding: 22px;
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 19px;
    background: rgba(255, 255, 255, .045);
}

.mh-roadmap-card img {
    width: 52px;
    height: 52px;
    border-radius: 15px;
}

.mh-roadmap-card h4 {
    margin: 0 0 7px;
    color: #fff;
    font-size: 20px;
    letter-spacing: -.03em;
}

.mh-roadmap-card p {
    margin: 0;
    color: rgba(255, 255, 255, .65);
    font-size: 12px;
    line-height: 1.55;
}

.mh-how-layout {
    display: grid;
    grid-template-columns:
        minmax(310px, .65fr)
        minmax(0, 1.35fr);
    gap: clamp(35px, 6vw, 90px);
    max-width: 1440px;
    margin: auto;
}

.mh-how-example {
    align-self: start;
    padding: 30px;
    color: #fff;
    border-radius: 24px;
    background:
        radial-gradient(
            circle at 88% 7%,
            rgba(77, 226, 255, .25),
            transparent 34%
        ),
        #202366;
    box-shadow: 0 25px 55px rgba(32, 35, 102, .18);
}

.mh-how-example small {
    color: #4de2ff;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.mh-how-example h3 {
    margin: 28px 0 17px;
    font-size: clamp(29px, 3vw, 42px);
    line-height: 1.06;
    letter-spacing: -.045em;
}

.mh-how-example p {
    margin: 0;
    color: rgba(255, 255, 255, .7);
    line-height: 1.7;
}

.mh-how-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 25px;
}

.mh-how-tags span {
    padding: 7px 9px;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 999px;
    background: rgba(255, 255, 255, .07);
    font-size: 9px;
    font-weight: 750;
}

.mh-flow-v3 {
    display: grid;
    gap: 12px;
}

.mh-flow-step {
    position: relative;
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
    padding: 23px 25px;
    border: 1px solid #dce3ed;
    border-radius: 19px;
    background: #fff;
    box-shadow: 0 9px 23px rgba(17, 24, 39, .035);
}

.mh-flow-step:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 51px;
    bottom: -13px;
    width: 2px;
    height: 13px;
    background: #b9ddeb;
}

.mh-flow-number {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    color: #fff;
    border-radius: 17px;
    background: linear-gradient(145deg, #09a5d4, #3f41a9);
    font-size: 13px;
    font-weight: 900;
}

.mh-flow-step h3 {
    margin: 2px 0 9px;
    font-size: 22px;
    letter-spacing: -.035em;
}

.mh-flow-step p {
    margin: 0;
    color: #69758b;
    font-size: 14px;
    line-height: 1.65;
}

@media (max-width: 1320px) {
    .mh-hero {
        grid-template-columns: 1fr !important;
    }

    .mh-app-frame {
        width: min(920px, 100%);
    }

    .mh-app-columns {
        grid-template-columns: minmax(0, 1fr) 160px;
    }

    .mh-dialogs {
        display: none;
    }
}

@media (max-width: 1050px) {
    .mh-service-grid,
    .mh-roadmap-grid {
        grid-template-columns: 1fr;
    }

    .mh-how-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .mh-app-window {
        min-height: auto;
    }

    .mh-app-topbar img {
        width: 205px;
    }

    .mh-app-state {
        display: none;
    }

    .mh-app-body {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .mh-app-sidebar {
        display: none;
    }

    .mh-app-main {
        padding: 11px;
    }

    .mh-app-columns {
        grid-template-columns: 1fr;
        min-height: 500px;
    }

    .mh-crm-panel {
        display: none;
    }

    .mh-service-card {
        min-height: auto;
    }

    .mh-service-card h3 {
        margin-top: 42px;
    }

    .mh-flow-step {
        grid-template-columns: 45px minmax(0, 1fr);
        padding: 19px;
    }

    .mh-flow-number {
        width: 45px;
        height: 45px;
        border-radius: 14px;
    }
}

/* MINDFLOW_MESSENGER_HUB_POLISH_V3_END */

/* SVYAZKA_FOUR_CHANNELS_V1_START */

.mh-service-grid {
    grid-template-columns:
        repeat(4, minmax(0, 1fr)) !important;
}

.mh-product-logo {
    width: min(450px, 100%) !important;
}

.mh-app-topbar img {
    width: 220px !important;
}

@media (max-width: 1280px) {
    .mh-service-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 760px) {
    .mh-service-grid {
        grid-template-columns: 1fr !important;
    }
}

/* SVYAZKA_FOUR_CHANNELS_V1_END */