:root {
    --g-blue: #0b57d0;
    --g-blue-hover: #0842a0;
    --g-text: #202124;
    --g-muted: #5f6368;
    --g-border: #dadce0;
    --g-bg: #ffffff;
    --g-soft: #f8fafd;
    --g-soft-blue: #e8f0fe;
    --g-green: #188038;
}

.integration-page {
    background: var(--g-bg);
    color: var(--g-text);
    font-family: Arial, Helvetica, sans-serif;
}

.integration-page * {
    box-sizing: border-box;
}

.integration-page .container {
    width: min(1240px, calc(100% - 48px));
    margin: 0 auto;
}

.integration-hero {
    padding: 88px 0 72px;
    background: #fff;
}

.integration-hero .integration-kicker {
    display: none;
}

.integration-hero h1 {
    max-width: 920px;
    margin: 0;
    font-size: clamp(46px, 6vw, 76px);
    line-height: 1.04;
    letter-spacing: -.045em;
    font-weight: 500;
    color: var(--g-text);
    text-align: left;
}

.integration-lead {
    max-width: 760px;
    margin: 28px 0 0;
    font-size: 20px;
    line-height: 1.55;
    color: var(--g-muted);
    text-align: left;
}

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

.integration-google-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 24px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.integration-google-btn-primary {
    background: var(--g-blue);
    color: #fff;
    border: 1px solid var(--g-blue);
}

.integration-google-btn-primary:hover {
    background: var(--g-blue-hover);
    border-color: var(--g-blue-hover);
}

.integration-google-btn-secondary {
    background: #fff;
    color: var(--g-blue);
    border: 1px solid var(--g-border);
}

.integration-google-btn-secondary:hover {
    background: #f8fafd;
}

.integration-schema {
    margin: 72px 0 0;
    display: grid;
    grid-template-columns: 1fr 170px 1fr;
    align-items: center;
    gap: 24px;
}

.integration-node {
    min-height: 170px;
    padding: 32px;
    border: 1px solid var(--g-border);
    border-radius: 28px;
    background: #fff;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: var(--g-text);
}

.integration-node span {
    font-size: 28px;
    line-height: 1.15;
    font-weight: 500;
    color: var(--g-text);
}

.integration-node small {
    margin-top: 10px;
    font-size: 14px;
    line-height: 1.4;
    color: var(--g-muted);
}

.integration-node-1c {
    background: var(--g-soft);
}

.integration-flow {
    display: flex;
    align-items: center;
}

.integration-flow-line {
    height: 1px;
    flex: 1;
    background: var(--g-border);
}

.integration-flow-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--g-blue);
}

.integration-flow b {
    margin: 0 10px;
    font-size: 12px;
    font-weight: 600;
    color: var(--g-muted);
}

/* choice section */

.integration-choice-section {
    padding: 84px 0 96px;
    background: var(--g-soft);
}

.integration-choice-head {
    max-width: 760px;
    margin-bottom: 42px;
}

.integration-choice-head h2 {
    margin: 0;
    font-size: clamp(38px, 4vw, 56px);
    line-height: 1.08;
    letter-spacing: -.035em;
    font-weight: 500;
    color: var(--g-text);
}

.integration-choice-head p {
    margin: 18px 0 0;
    font-size: 18px;
    line-height: 1.55;
    color: var(--g-muted);
}

.integration-choice-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.integration-choice-card {
    min-height: 230px;
    padding: 26px;
    border: 1px solid var(--g-border);
    border-radius: 24px;
    background: #fff;
    cursor: pointer;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.integration-choice-card:hover {
    border-color: #b7c6e3;
    box-shadow: 0 4px 18px rgba(60,64,67,.12);
    transform: translateY(-2px);
}

.integration-choice-card.active {
    border: 2px solid var(--g-blue);
    background: #fff;
}

.integration-choice-card small {
    display: block;
    color: var(--g-muted);
    font-size: 13px;
    margin-bottom: 36px;
}

.integration-choice-card h3 {
    margin: 0 0 12px;
    font-size: 22px;
    line-height: 1.2;
    font-weight: 500;
    color: var(--g-text);
}

.integration-choice-card p {
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--g-muted);
}

.integration-choice-detail {
    margin-top: 24px;
    padding: 28px 32px;
    border-radius: 24px;
    background: var(--g-soft-blue);
}

.integration-choice-detail h3 {
    margin: 0;
    font-size: 24px;
    font-weight: 500;
    color: var(--g-text);
}

.integration-choice-detail p {
    margin: 10px 0 0;
    max-width: 850px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--g-muted);
}

/* temporarily normalize old sections */

.integration-demo-section,
.integration-log-section,
.integration-info-section,
.integration-scenarios-section,
.integration-erp-section,
.integration-protocols-section,
.integration-cta-section {
    background: #fff;
    color: var(--g-text);
}

.integration-demo-section,
.integration-log-section,
.integration-info-section,
.integration-scenarios-section,
.integration-erp-section,
.integration-protocols-section,
.integration-cta-section {
    padding: 88px 0;
}

.integration-section-head h2 {
    color: var(--g-text);
    font-weight: 500;
}

.integration-section-head .integration-kicker {
    color: var(--g-muted);
}

@media (max-width: 1000px) {
    .integration-choice-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 800px) {
    .integration-schema {
        grid-template-columns: 1fr;
    }

    .integration-flow {
        width: 180px;
        margin: 0 auto;
        transform: rotate(90deg);
    }
}

@media (max-width: 620px) {
    .integration-page .container {
        width: min(100% - 28px, 1240px);
    }

    .integration-hero {
        padding: 58px 0 50px;
    }

    .integration-choice-grid {
        grid-template-columns: 1fr;
    }

    .integration-choice-card {
        min-height: 0;
    }
}

/* =========================================================
   DEMO — Google-style light UI
   ========================================================= */

.integration-demo-section {
    padding: 96px 0;
    background: #fff;
    color: var(--g-text);
}

.integration-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
    margin-bottom: 38px;
}

.integration-section-head .integration-kicker {
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--g-muted);
}

.integration-section-head h2 {
    margin: 0;
    font-size: clamp(38px, 4vw, 56px);
    line-height: 1.08;
    letter-spacing: -.035em;
    font-weight: 500;
    color: var(--g-text);
}

.integration-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 16px;
    border: 1px solid var(--g-border);
    border-radius: 999px;
    background: #fff;
    color: var(--g-muted);
    font-size: 14px;
    white-space: nowrap;
}

.integration-status span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--g-green);
}


/* tabs */

.integration-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 32px;
    flex-wrap: wrap;
}

.integration-tabs button {
    min-height: 42px;
    padding: 0 18px;
    border: 1px solid var(--g-border);
    border-radius: 999px;
    background: #fff;
    color: var(--g-text);
    font: inherit;
    font-size: 14px;
    cursor: pointer;
}

.integration-tabs button:hover {
    background: var(--g-soft);
}

.integration-tabs button.active {
    border-color: var(--g-blue);
    background: var(--g-soft-blue);
    color: var(--g-blue);
}


/* panels */

.integration-panel {
    display: none;
}

.integration-panel.active {
    display: block;
}


/* 1C → site */

.integration-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 170px minmax(0, 1fr);
    gap: 24px;
    align-items: stretch;
}

.integration-card {
    min-width: 0;
    padding: 30px;
    border: 1px solid var(--g-border);
    border-radius: 24px;
    background: #fff;
    color: var(--g-text);
}

.integration-card-label {
    margin-bottom: 24px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--g-muted);
}

.integration-product {
    display: grid;
}

.integration-product > div {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 20px;
    align-items: center;
    min-height: 58px;
    border-bottom: 1px solid var(--g-border);
}

.integration-product small {
    font-size: 14px;
    color: var(--g-muted);
}

.integration-product strong {
    min-width: 0;
    text-align: right;
    font-size: 16px;
    font-weight: 600;
    color: var(--g-text);
    overflow-wrap: anywhere;
}


/* transfer */

.integration-transfer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
}

.integration-transfer-track {
    position: relative;
    height: 60px;
    display: flex;
    align-items: center;
}

.integration-transfer-track::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--g-border);
}

.integration-transfer-track span {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 34px;
    border-radius: 8px;
    background: var(--g-blue);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
}

.integration-transfer-track span.run {
    animation: packetMoveGoogle .8s cubic-bezier(.2,.8,.2,1) forwards;
}

@keyframes packetMoveGoogle {
    from { margin-left: 0; }
    to { margin-left: calc(100% - 50px); }
}


/* demo buttons */

.integration-secondary-btn,
.integration-sync-btn {
    appearance: none;
    border-radius: 999px;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.integration-secondary-btn {
    min-height: 44px;
    margin-top: 24px;
    padding: 0 18px;
    border: 1px solid var(--g-border);
    background: #fff;
    color: var(--g-blue);
}

.integration-secondary-btn:hover {
    background: var(--g-soft);
}

.integration-sync-btn {
    width: 100%;
    min-height: 46px;
    padding: 0 18px;
    border: 1px solid var(--g-blue);
    background: var(--g-blue);
    color: #fff;
}

.integration-sync-btn:hover {
    background: var(--g-blue-hover);
}

.integration-sync-btn:disabled {
    opacity: .65;
    cursor: default;
}

.integration-success {
    display: none;
    margin-top: 22px;
    padding: 12px 14px;
    border-radius: 12px;
    background: #e6f4ea;
    color: var(--g-green);
    font-size: 14px;
    font-weight: 500;
}

.integration-success.show {
    display: block;
}


/* JSON / XML */

.integration-code-block {
    margin-top: 24px;
    overflow: hidden;
    border: 1px solid var(--g-border);
    border-radius: 24px;
    background: var(--g-soft);
}

.integration-code-head {
    min-height: 58px;
    padding: 0 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--g-border);
}

.integration-code-head > span {
    font-size: 14px;
    font-weight: 600;
}

.integration-code-head > div {
    display: flex;
    gap: 6px;
}

.integration-code-head button {
    border: 0;
    border-radius: 999px;
    padding: 7px 12px;
    background: transparent;
    color: var(--g-muted);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

.integration-code-head button.active {
    background: var(--g-soft-blue);
    color: var(--g-blue);
}

.integration-code-block pre {
    margin: 0;
    padding: 24px;
    overflow: auto;
    color: var(--g-text);
    font-size: 13px;
    line-height: 1.65;
}


/* Site → 1C */

.integration-order-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.integration-result {
    display: none;
}

.integration-result.show {
    display: grid;
}

.integration-result > div {
    display: grid;
    grid-template-columns: 130px minmax(0, 1fr);
    gap: 18px;
    align-items: center;
    min-height: 58px;
    border-bottom: 1px solid var(--g-border);
}

.integration-result small {
    color: var(--g-muted);
    font-size: 14px;
}

.integration-result strong {
    text-align: right;
    color: var(--g-text);
    font-size: 16px;
}

.integration-result-empty {
    min-height: 180px;
    display: flex;
    align-items: center;
    color: var(--g-muted);
    font-size: 15px;
}

.integration-result-empty.hide {
    display: none;
}


/* ERP demo */

.integration-erp-card {
    padding: 32px;
}

.integration-erp-flow {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.integration-erp-flow .erp-step {
    position: relative;
    min-height: 150px;
    padding: 20px;
    border: 1px solid var(--g-border);
    border-radius: 18px;
    background: #fff;
    display: flex;
    flex-direction: column;
    transition: .2s ease;
}

.integration-erp-flow .erp-step > span {
    font-size: 12px;
    color: var(--g-muted);
}

.integration-erp-flow .erp-step small {
    margin-top: auto;
    font-size: 13px;
    color: var(--g-muted);
}

.integration-erp-flow .erp-step strong {
    margin-top: 4px;
    font-size: 17px;
    color: var(--g-text);
}

.integration-erp-flow .erp-step em {
    margin-top: 10px;
    font-size: 12px;
    font-style: normal;
    color: var(--g-muted);
}

.integration-erp-flow .erp-step.is-running {
    border-color: var(--g-blue);
    background: var(--g-soft-blue);
}

.integration-erp-flow .erp-step.is-running em {
    color: var(--g-blue);
}

.integration-erp-flow .erp-step.is-done {
    border-color: #81c995;
}

.integration-erp-flow .erp-step.is-done em {
    color: var(--g-green);
}

.integration-erp-flow .erp-step.is-done::after {
    content: "✓";
    position: absolute;
    top: 16px;
    right: 16px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #e6f4ea;
    color: var(--g-green);
    font-size: 13px;
}

.erp-action-row {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 24px;
}

.erp-action-row .integration-sync-btn {
    width: auto;
    min-width: 230px;
}

.erp-progress {
    flex: 1;
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--g-border);
}

.erp-progress span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: var(--g-blue);
    transition: width .35s ease;
}


/* responsive */

@media (max-width: 900px) {
    .integration-section-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .integration-grid,
    .integration-order-grid {
        grid-template-columns: 1fr;
    }

    .integration-transfer {
        min-height: 130px;
    }

    .integration-erp-flow {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 600px) {
    .integration-erp-flow {
        grid-template-columns: 1fr;
    }

    .erp-action-row {
        flex-direction: column;
        align-items: stretch;
    }

    .erp-action-row .integration-sync-btn {
        width: 100%;
    }
}


/* =========================================================
   REMAINING PAGE — Google-style light UI
   ========================================================= */


/* ---------------------------------------------------------
   Integration log
   --------------------------------------------------------- */

.integration-log-section {
    padding: 96px 0;
    background: var(--g-soft);
    color: var(--g-text);
}

.integration-log-section .integration-section-head {
    margin-bottom: 36px;
}

.integration-log {
    overflow: hidden;
    border: 1px solid var(--g-border);
    border-radius: 24px;
    background: #fff;
}

.integration-log > div {
    display: grid;
    grid-template-columns: 110px 150px minmax(0, 1fr) 110px;
    gap: 24px;
    align-items: center;
    min-height: 64px;
    padding: 0 24px;
    border-bottom: 1px solid var(--g-border);
}

.integration-log > div:last-child {
    border-bottom: 0;
}

.integration-log time,
.integration-log span {
    color: var(--g-muted);
    font-size: 14px;
}

.integration-log b {
    min-width: 0;
    color: var(--g-text);
    font-size: 15px;
    font-weight: 500;
}

.integration-log em {
    justify-self: end;
    padding: 6px 10px;
    border-radius: 999px;
    background: #e6f4ea;
    color: var(--g-green);
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
}


/* ---------------------------------------------------------
   Old "Не только JSON" block
   --------------------------------------------------------- */

.integration-info-section {
    padding: 96px 0;
    background: #fff;
}

.integration-tech-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.integration-tech-grid article {
    min-height: 190px;
    padding: 28px;
    border: 1px solid var(--g-border);
    border-radius: 24px;
    background: #fff;
}

.integration-tech-grid strong {
    display: block;
    margin-bottom: 14px;
    color: var(--g-text);
    font-size: 21px;
    font-weight: 500;
}

.integration-tech-grid p {
    max-width: 520px;
    margin: 0;
    color: var(--g-muted);
    font-size: 14px;
    line-height: 1.6;
}


/* ---------------------------------------------------------
   What we integrate
   --------------------------------------------------------- */

.integration-scenarios-section {
    padding: 96px 0;
    background: var(--g-soft);
}

.integration-scenario-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.integration-scenario-grid article {
    min-height: 220px;
    padding: 28px;
    border: 1px solid var(--g-border);
    border-radius: 24px;
    background: #fff;
}

.integration-scenario-grid article > span {
    display: block;
    margin-bottom: 46px;
    color: var(--g-muted);
    font-size: 12px;
}

.integration-scenario-grid h3 {
    margin: 0 0 12px;
    color: var(--g-text);
    font-size: 24px;
    line-height: 1.2;
    font-weight: 500;
}

.integration-scenario-grid p {
    margin: 0;
    color: var(--g-muted);
    font-size: 14px;
    line-height: 1.6;
}


/* ---------------------------------------------------------
   ERP process map
   --------------------------------------------------------- */

.integration-erp-section {
    padding: 96px 0;
    background: #fff;
}

.integration-erp-map {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.integration-erp-map > div {
    min-height: 190px;
    padding: 24px;
    border: 1px solid var(--g-border);
    border-radius: 20px;
    background: #fff;
    display: flex;
    flex-direction: column;
}

.integration-erp-map span {
    color: var(--g-muted);
    font-size: 12px;
}

.integration-erp-map strong {
    margin-top: auto;
    color: var(--g-text);
    font-size: 19px;
    font-weight: 500;
}

.integration-erp-map p {
    margin: 9px 0 0;
    color: var(--g-muted);
    font-size: 13px;
    line-height: 1.5;
}


/* ---------------------------------------------------------
   Protocols
   --------------------------------------------------------- */

.integration-protocols-section {
    padding: 96px 0;
    background: var(--g-soft);
}

.integration-protocol-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.integration-protocol-list article {
    min-height: 250px;
    padding: 26px;
    border: 1px solid var(--g-border);
    border-radius: 22px;
    background: #fff;
}

.integration-protocol-list article > div {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    margin-bottom: 44px;
    padding: 0 12px;
    border-radius: 9px;
    background: var(--g-soft-blue);
    color: var(--g-blue);
    font-size: 12px;
    font-weight: 600;
}

.integration-protocol-list strong {
    display: block;
    margin-bottom: 12px;
    color: var(--g-text);
    font-size: 20px;
    font-weight: 500;
}

.integration-protocol-list p {
    margin: 0;
    color: var(--g-muted);
    font-size: 13px;
    line-height: 1.6;
}


/* ---------------------------------------------------------
   Documentation tab
   --------------------------------------------------------- */

.integration-docs-panel {
    padding-top: 8px;
}

.integration-docs {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 72px;
    align-items: start;
}

.integration-docs-nav {
    position: sticky;
    top: 100px;
}

.integration-docs-nav-title {
    margin-bottom: 16px;
    color: var(--g-text);
    font-size: 14px;
    font-weight: 600;
}

.integration-docs-nav nav {
    display: flex;
    flex-direction: column;
}

.integration-docs-nav a {
    padding: 9px 0 9px 14px;
    border-left: 2px solid var(--g-border);
    color: var(--g-muted);
    font-size: 13px;
    line-height: 1.35;
    text-decoration: none;
}

.integration-docs-nav a:hover,
.integration-docs-nav a.active {
    border-left-color: var(--g-blue);
    color: var(--g-blue);
}

.integration-docs-content {
    min-width: 0;
    max-width: 820px;
}

.integration-docs-header {
    padding-bottom: 54px;
    border-bottom: 1px solid var(--g-border);
}

.integration-docs-header .integration-kicker {
    margin-bottom: 10px;
    color: var(--g-muted);
    font-size: 14px;
}

.integration-docs-header h2 {
    margin: 0 0 24px;
    color: var(--g-text);
    font-size: clamp(40px, 4vw, 58px);
    line-height: 1.08;
    letter-spacing: -.035em;
    font-weight: 500;
}

.integration-docs-header > p {
    max-width: 720px;
    margin: 0;
    color: var(--g-muted);
    font-size: 17px;
    line-height: 1.65;
}

.integration-docs-content > section {
    scroll-margin-top: 110px;
    padding: 56px 0;
    border-bottom: 1px solid var(--g-border);
}

.integration-docs-content > section:last-child {
    border-bottom: 0;
}

.integration-docs-content h3 {
    margin: 0 0 22px;
    color: var(--g-text);
    font-size: 34px;
    line-height: 1.12;
    letter-spacing: -.02em;
    font-weight: 500;
}

.integration-docs-content h4 {
    margin: 34px 0 10px;
    color: var(--g-text);
    font-size: 18px;
    font-weight: 500;
}

.integration-docs-content p,
.integration-docs-content li {
    color: var(--g-text);
    font-size: 15px;
    line-height: 1.7;
}

.integration-docs-content p {
    max-width: 740px;
    margin: 0 0 20px;
}

.integration-docs-content ol,
.integration-docs-content ul {
    max-width: 740px;
    margin: 22px 0;
    padding-left: 22px;
}

.integration-docs-content li {
    padding: 4px 0 4px 5px;
}


/* documentation architecture diagram */

.integration-docs-schema {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    gap: 12px;
    align-items: center;
    margin: 34px 0;
}

.integration-docs-schema > div {
    min-height: 120px;
    padding: 20px;
    border: 1px solid var(--g-border);
    border-radius: 18px;
    background: var(--g-soft);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.integration-docs-schema strong {
    color: var(--g-text);
    font-size: 16px;
    font-weight: 500;
}

.integration-docs-schema span {
    margin-top: 6px;
    color: var(--g-muted);
    font-size: 12px;
    line-height: 1.4;
}

.integration-docs-schema > b {
    color: var(--g-blue);
    font-size: 20px;
    font-weight: 500;
}


/* documentation data table */

.integration-docs-table {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    margin-top: 28px;
    overflow: hidden;
    border: 1px solid var(--g-border);
    border-radius: 20px;
    background: var(--g-border);
}

.integration-docs-table > div {
    padding: 22px;
    background: #fff;
}

.integration-docs-table strong {
    display: block;
    margin-bottom: 6px;
    color: var(--g-text);
    font-size: 15px;
    font-weight: 500;
}

.integration-docs-table span {
    color: var(--g-muted);
    font-size: 13px;
    line-height: 1.5;
}


/* documentation note */

.integration-docs-note {
    max-width: 740px;
    margin-top: 28px;
    padding: 22px 24px;
    border-radius: 16px;
    background: var(--g-soft-blue);
}

.integration-docs-note strong {
    display: block;
    margin-bottom: 8px;
    color: var(--g-text);
    font-size: 14px;
}

.integration-docs-note p {
    margin: 0;
    color: var(--g-text);
}


/* ---------------------------------------------------------
   CTA
   --------------------------------------------------------- */

.integration-cta-section {
    padding: 96px 0;
    background: #fff;
}

.integration-cta {
    padding: 52px;
    border-radius: 28px;
    background: var(--g-soft);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 48px;
    align-items: end;
}

.integration-cta .integration-kicker {
    margin-bottom: 12px;
    color: var(--g-muted);
    font-size: 14px;
}

.integration-cta h2 {
    max-width: 760px;
    margin: 0;
    color: var(--g-text);
    font-size: clamp(38px, 4vw, 56px);
    line-height: 1.08;
    letter-spacing: -.035em;
    font-weight: 500;
}

.integration-cta p {
    max-width: 670px;
    margin: 20px 0 0;
    color: var(--g-muted);
    font-size: 15px;
    line-height: 1.6;
}

.integration-cta-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: auto !important;
    min-width: 210px;
    min-height: 48px;
    padding: 0 24px !important;
    border: 1px solid var(--g-blue) !important;
    border-radius: 999px !important;
    background: var(--g-blue) !important;
    color: #fff !important;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    position: static !important;
}

.integration-cta-btn::before,
.integration-cta-btn::after {
    display: none !important;
}

.integration-cta-btn:hover {
    background: var(--g-blue-hover) !important;
}


/* ---------------------------------------------------------
   Responsive
   --------------------------------------------------------- */

@media (max-width: 1000px) {
    .integration-erp-map,
    .integration-protocol-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .integration-docs {
        grid-template-columns: 200px minmax(0, 1fr);
        gap: 40px;
    }
}

@media (max-width: 800px) {
    .integration-log > div {
        grid-template-columns: 90px minmax(0, 1fr);
        gap: 8px 16px;
        padding: 16px 20px;
    }

    .integration-log b,
    .integration-log em {
        grid-column: 2;
    }

    .integration-log em {
        justify-self: start;
    }

    .integration-tech-grid,
    .integration-scenario-grid {
        grid-template-columns: 1fr;
    }

    .integration-docs {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .integration-docs-nav {
        position: static;
    }

    .integration-docs-nav nav {
        flex-direction: row;
        overflow-x: auto;
        gap: 8px;
        padding-bottom: 8px;
    }

    .integration-docs-nav a {
        flex: 0 0 auto;
        padding: 9px 14px;
        border: 1px solid var(--g-border);
        border-radius: 999px;
        white-space: nowrap;
    }

    .integration-docs-nav a.active {
        border-color: var(--g-blue);
        background: var(--g-soft-blue);
    }

    .integration-docs-schema {
        grid-template-columns: 1fr;
    }

    .integration-docs-schema > b {
        text-align: center;
        transform: rotate(90deg);
    }

    .integration-cta {
        grid-template-columns: 1fr;
        align-items: start;
    }
}

@media (max-width: 600px) {
    .integration-erp-map,
    .integration-protocol-list,
    .integration-docs-table {
        grid-template-columns: 1fr;
    }

    .integration-cta {
        padding: 32px 24px;
    }
}


/* smooth anchor navigation */

#integration-demo,
#how-it-works {
    scroll-margin-top: 110px;
}

html {
    scroll-behavior: smooth;
}


/* spacing before documentation */

.integration-docs-panel {
    margin-top: 72px;
}


/* =========================================================
   PAGE MODES — stable version
   ========================================================= */

.integration-mode-bar {
    position: sticky;
    top: 0;
    z-index: 50;
    padding: 14px 0;
    background: rgba(255,255,255,.96);
    border-top: 1px solid var(--g-border);
    border-bottom: 1px solid var(--g-border);
    backdrop-filter: blur(12px);
}

.integration-mode-nav {
    position: relative;
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    border-radius: 999px;
    background: #f1f3f4;
}

.integration-mode-indicator {
    position: absolute;
    left: 0;
    top: 4px;
    z-index: 0;
    height: calc(100% - 8px);
    border-radius: 999px;
    background: #fff;
    box-shadow:
        0 1px 3px rgba(60,64,67,.18),
        0 1px 2px rgba(60,64,67,.08);

    transition:
        transform .38s cubic-bezier(.2,.8,.2,1),
        width .38s cubic-bezier(.2,.8,.2,1);
}

.integration-mode-nav button {
    position: relative;
    z-index: 1;
    min-height: 42px;
    padding: 0 20px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--g-muted);
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: color .25s ease;
}

.integration-mode-nav button.active {
    color: var(--g-blue);
}


/* плавное исчезновение / появление */
.integration-page .integration-choice-section,
.integration-page .integration-demo-section,
.integration-page .integration-log-section,
.integration-page .integration-info-section,
.integration-page .integration-scenarios-section,
.integration-page .integration-erp-section,
.integration-page .integration-protocols-section,
.integration-page .integration-docs-panel {
    transition:
        opacity .22s ease,
        transform .28s cubic-bezier(.2,.8,.2,1);
}

.integration-page.is-mode-changing {
    opacity: .985;
}


/* =========================================================
   OVERVIEW
   ========================================================= */

.integration-page[data-page-mode="overview"]
.integration-demo-section,

.integration-page[data-page-mode="overview"]
.integration-log-section {
    display: none;
}


/* docs внутри demo никогда не показываем в overview */
.integration-page[data-page-mode="overview"]
.integration-docs-panel {
    display: none;
}


/* =========================================================
   DEMO
   ========================================================= */

.integration-page[data-page-mode="demo"]
.integration-choice-section,

.integration-page[data-page-mode="demo"]
.integration-info-section,

.integration-page[data-page-mode="demo"]
.integration-scenarios-section,

.integration-page[data-page-mode="demo"]
.integration-erp-section,

.integration-page[data-page-mode="demo"]
.integration-protocols-section {
    display: none;
}

.integration-page[data-page-mode="demo"]
.integration-docs-panel {
    display: none;
}


/* =========================================================
   DOCS
   ========================================================= */

.integration-page[data-page-mode="docs"]
.integration-choice-section,

.integration-page[data-page-mode="docs"]
.integration-log-section,

.integration-page[data-page-mode="docs"]
.integration-info-section,

.integration-page[data-page-mode="docs"]
.integration-scenarios-section,

.integration-page[data-page-mode="docs"]
.integration-erp-section,

.integration-page[data-page-mode="docs"]
.integration-protocols-section {
    display: none;
}


/*
 * docs находятся внутри integration-demo-section,
 * поэтому сам demo section остаётся видимым.
 */
.integration-page[data-page-mode="docs"]
.integration-demo-section {
    display: block;
    padding-top: 72px;
}


/* скрываем непосредственно интерфейс демо */
.integration-page[data-page-mode="docs"]
.integration-demo-section > .container > .integration-section-head,

.integration-page[data-page-mode="docs"]
.integration-demo-section > .container > .integration-tabs,

.integration-page[data-page-mode="docs"]
.integration-demo-section > .container > .integration-panel {
    display: none;
}


/* документация остаётся */
.integration-page[data-page-mode="docs"]
.integration-docs-panel {
    display: block;
    margin-top: 0;
}


/* =========================================================
   CTA всегда остаётся
   ========================================================= */

.integration-cta-section {
    display: block !important;
}


/* =========================================================
   entrance
   ========================================================= */

.integration-page:not(.is-mode-changing)
.integration-demo-section,

.integration-page:not(.is-mode-changing)
.integration-choice-section,

.integration-page:not(.is-mode-changing)
.integration-info-section,

.integration-page:not(.is-mode-changing)
.integration-scenarios-section,

.integration-page:not(.is-mode-changing)
.integration-erp-section,

.integration-page:not(.is-mode-changing)
.integration-protocols-section,

.integration-page:not(.is-mode-changing)
.integration-docs-panel {
    animation: modeContentIn .28s ease both;
}

@keyframes modeContentIn {
    from {
        opacity: 0;
        transform: translateY(7px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* =========================================================
   1C HERO VISUAL
   ========================================================= */

.onec-hero-visual {
    margin-top: 72px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px minmax(0, 1fr);
    gap: 28px;
    align-items: center;
}

.onec-system-card {
    min-height: 300px;
    padding: 28px;
    border: 1px solid var(--g-border);
    border-radius: 28px;
    background: #fff;
}

.onec-system-1c {
    background: #fffdf5;
    border-color: #eadca2;
}

.onec-system-title {
    display: flex;
    align-items: center;
    gap: 14px;
}

.onec-system-title strong {
    display: block;
    color: var(--g-text);
    font-size: 23px;
    font-weight: 500;
}

.onec-system-title span {
    display: block;
    margin-top: 3px;
    color: var(--g-muted);
    font-size: 13px;
}

.onec-system-icon {
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: var(--g-soft-blue);
}

.onec-system-icon svg {
    width: 23px;
    height: 23px;
    fill: none;
    stroke: var(--g-blue);
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.onec-logo-mark {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #ffd735;
    color: #1f1f1f;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -.03em;
}

.onec-ui-window {
    margin-top: 28px;
    overflow: hidden;
    border: 1px solid var(--g-border);
    border-radius: 16px;
    background: #fff;
}

.onec-ui-window-1c {
    border-color: #e6d99f;
}

.onec-ui-head {
    min-height: 42px;
    padding: 0 15px;
    display: flex;
    align-items: center;
    background: #fff6c9;
    border-bottom: 1px solid #e6d99f;
    color: #4f4a30;
    font-size: 13px;
    font-weight: 600;
}

.onec-ui-row {
    min-height: 46px;
    padding: 0 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    border-bottom: 1px solid var(--g-border);
}

.onec-ui-row:last-child {
    border-bottom: 0;
}

.onec-ui-window-1c .onec-ui-row {
    border-color: #eee5bb;
}

.onec-ui-row span {
    color: var(--g-muted);
    font-size: 12px;
}

.onec-ui-row b {
    color: var(--g-text);
    font-size: 13px;
    font-weight: 500;
    text-align: right;
}


/* bridge */

.onec-data-bridge {
    position: relative;
    min-height: 240px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 34px;
}

.onec-api-core {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 3;
    width: 58px;
    height: 58px;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--g-blue);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    box-shadow: 0 0 0 9px #fff;
}

.onec-flow {
    position: relative;
}

.onec-flow-tags {
    display: flex;
    justify-content: space-between;
    gap: 5px;
    margin-bottom: 10px;
}

.onec-flow-tags span {
    padding: 6px 9px;
    border-radius: 999px;
    background: var(--g-soft);
    color: var(--g-muted);
    font-size: 10px;
    white-space: nowrap;
}

.onec-flow-line {
    position: relative;
    height: 1px;
    background: var(--g-border);
}

.onec-flow-line i {
    position: absolute;
    top: -3px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--g-blue);
}

.onec-flow-to-site .onec-flow-line i {
    right: 0;
}

.onec-flow-to-1c .onec-flow-line i {
    left: 0;
}

.onec-flow-to-site .onec-flow-line::after {
    content: "";
    position: absolute;
    right: 0;
    top: -4px;
    width: 8px;
    height: 8px;
    border-top: 1.5px solid var(--g-blue);
    border-right: 1.5px solid var(--g-blue);
    transform: rotate(45deg);
}

.onec-flow-to-1c .onec-flow-line::before {
    content: "";
    position: absolute;
    left: 0;
    top: -4px;
    width: 8px;
    height: 8px;
    border-left: 1.5px solid var(--g-blue);
    border-bottom: 1.5px solid var(--g-blue);
    transform: rotate(45deg);
}

.onec-flow-to-1c .onec-flow-tags {
    margin-top: 10px;
    margin-bottom: 0;
}


/* subtle 1C accent */

.onec-system-1c::before {
    content: "";
    display: block;
    height: 3px;
    margin: -28px -28px 25px;
    border-radius: 28px 28px 0 0;
    background: #ffd735;
}


/* responsive */

@media (max-width: 1000px) {
    .onec-hero-visual {
        grid-template-columns: 1fr;
    }

    .onec-data-bridge {
        width: min(100%, 520px);
        margin: 0 auto;
    }
}


/* 1C hero card balance */

.onec-system-card {
    height: 330px;
    min-height: 330px;
    display: flex;
    flex-direction: column;
}

.onec-system-1c::before {
    display: none;
}

.onec-system-web .onec-ui-window,
.onec-system-1c .onec-ui-window {
    margin-top: 28px;
}

.onec-system-1c {
    border-color: #eadca2;
}

.onec-system-web,
.onec-system-1c {
    align-self: stretch;
}

@media (max-width: 1000px) {
    .onec-system-card {
        height: auto;
        min-height: 0;
    }
}

/* =========================================================
   DEMO — 1C visual styling
   ========================================================= */

/* Общий блок */
.integration-demo-section {
    background: #fff;
}

.integration-demo-section .integration-section-head {
    margin-bottom: 34px;
}


/* ---------------------------------------------------------
   Левая карточка — 1С
   --------------------------------------------------------- */

.integration-panel[data-integration-panel="catalog"]
.integration-grid > .integration-card:first-child {
    position: relative;
    background: #fffdf5;
    border-color: #e8d99a;
}

.integration-panel[data-integration-panel="catalog"]
.integration-grid > .integration-card:first-child::before {
    content: "1С";
    position: absolute;
    top: 22px;
    right: 22px;
    min-width: 34px;
    height: 34px;
    padding: 0 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: #ffd735;
    color: #202124;
    font-size: 12px;
    font-weight: 700;
}

.integration-panel[data-integration-panel="catalog"]
.integration-grid > .integration-card:first-child
.integration-card-label {
    color: #746b42;
}

.integration-panel[data-integration-panel="catalog"]
.integration-grid > .integration-card:first-child
.integration-product > div {
    border-color: #ece3bc;
}


/* ---------------------------------------------------------
   Правая карточка — сайт
   --------------------------------------------------------- */

.integration-panel[data-integration-panel="catalog"]
.integration-grid > .integration-card:last-child {
    position: relative;
    background: #f8faff;
    border-color: #cbdaf4;
}

.integration-panel[data-integration-panel="catalog"]
.integration-grid > .integration-card:last-child::before {
    content: "WEB";
    position: absolute;
    top: 22px;
    right: 22px;
    height: 34px;
    padding: 0 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: var(--g-soft-blue);
    color: var(--g-blue);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
}

.integration-panel[data-integration-panel="catalog"]
.integration-grid > .integration-card:last-child
.integration-product > div {
    border-color: #dbe4f4;
}


/* ---------------------------------------------------------
   Заголовки карточек
   --------------------------------------------------------- */

.integration-card-label {
    padding-right: 55px;
    font-size: 12px;
    letter-spacing: .08em;
    font-weight: 600;
}


/* ---------------------------------------------------------
   Центральный канал обмена
   --------------------------------------------------------- */

.integration-transfer {
    position: relative;
}

.integration-transfer::before {
    content: "обмен данными";
    position: absolute;
    top: 28%;
    left: 50%;
    transform: translateX(-50%);
    color: var(--g-muted);
    font-size: 10px;
    white-space: nowrap;
}

.integration-transfer-track {
    height: 86px;
}

.integration-transfer-track::before {
    height: 1px;
    background: #bdc7d8;
}

.integration-transfer-track::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    width: 8px;
    height: 8px;
    border-top: 1.5px solid var(--g-blue);
    border-right: 1.5px solid var(--g-blue);
    transform: translateY(-50%) rotate(45deg);
}

.integration-transfer-track span {
    width: auto;
    min-width: 52px;
    height: 34px;
    padding: 0 10px;
    border-radius: 9px;
    background: var(--g-blue);
    box-shadow: 0 3px 10px rgba(11,87,208,.18);
}


/* ---------------------------------------------------------
   Синхронизация
   --------------------------------------------------------- */

.integration-sync-btn {
    min-height: 48px;
    border-radius: 999px;
    font-weight: 600;
    box-shadow: none;
}

.integration-transfer .integration-sync-btn {
    margin-top: 10px;
}


/* ---------------------------------------------------------
   Успешная синхронизация
   --------------------------------------------------------- */

.integration-success {
    position: relative;
    padding-left: 38px;
    background: #e6f4ea;
    color: #137333;
}

.integration-success::before {
    content: "✓";
    position: absolute;
    left: 14px;
    top: 50%;
    width: 18px;
    height: 18px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #188038;
    color: #fff;
    font-size: 11px;
}


/* ---------------------------------------------------------
   Ответ 1С
   --------------------------------------------------------- */

.integration-code-block {
    margin-top: 28px;
    border-radius: 22px;
    background: #f8f9fa;
}

.integration-code-head {
    background: #fff;
}

.integration-code-head > span::before {
    content: "↳ ";
    color: #f9ab00;
}

.integration-code-block pre {
    color: #3c4043;
    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        monospace;
    font-size: 12px;
}


/* ---------------------------------------------------------
   Tabs — немного плотнее
   --------------------------------------------------------- */

.integration-tabs button {
    transition:
        background .18s ease,
        color .18s ease,
        border-color .18s ease;
}

.integration-tabs button.active {
    background: #e8f0fe;
    border-color: #a8c7fa;
    color: #0b57d0;
}


/* ---------------------------------------------------------
   Site → 1C
   --------------------------------------------------------- */

.integration-panel[data-integration-panel="order"]
.integration-order-grid > .integration-card:first-child {
    background: #f8faff;
    border-color: #cbdaf4;
}

.integration-panel[data-integration-panel="order"]
.integration-order-grid > .integration-card:last-child {
    background: #fffdf5;
    border-color: #e8d99a;
}


/* ---------------------------------------------------------
   ERP scenario
   --------------------------------------------------------- */

.integration-panel[data-integration-panel="erp"]
.integration-erp-card {
    background: #fffdf8;
    border-color: #eadfae;
}

.integration-panel[data-integration-panel="erp"]
.erp-step {
    background: #fff;
}

.integration-panel[data-integration-panel="erp"]
.erp-step.is-running {
    border-color: #f9ab00;
    background: #fff8dd;
}

.integration-panel[data-integration-panel="erp"]
.erp-step.is-done {
    border-color: #81c995;
    background: #f2fbf4;
}


/* ---------------------------------------------------------
   Mobile
   --------------------------------------------------------- */

@media (max-width: 900px) {

    .integration-transfer::before {
        top: 5px;
    }

    .integration-transfer-track::after {
        display: none;
    }

}


/* =========================================================
   Stable mode navigation
   ========================================================= */

.integration-mode-bar {
    position: relative !important;
    top: auto !important;
    z-index: 10;
}


.integration-page.is-mode-changing
.integration-choice-section,
.integration-page.is-mode-changing
.integration-demo-section,
.integration-page.is-mode-changing
.integration-log-section,
.integration-page.is-mode-changing
.integration-info-section,
.integration-page.is-mode-changing
.integration-scenarios-section,
.integration-page.is-mode-changing
.integration-erp-section,
.integration-page.is-mode-changing
.integration-protocols-section,
.integration-page.is-mode-changing
.integration-docs-panel {
    opacity: 0;
    transform: translateY(4px);
}


/* =========================================================
   Keep page mode nav below global header
   ========================================================= */

:root {
    --bfd-header-height: 80px;
}

.integration-mode-bar {
    position: sticky !important;
    top: var(--bfd-header-height) !important;
    z-index: 40 !important;
}

/* глобальная шапка всегда выше локального меню */
header,
.header,
.header-main,
.site-header {
    position: relative;
    z-index: 100 !important;
}


/* Dynamic position under visible global header */

.integration-mode-bar {
    top: var(--integration-mode-top, 0px) !important;
    transition: top .12s linear;
}


/* =========================================================
   ISOLATED 1C PAGE HEADER
   ========================================================= */

.onec-design-page {
    margin: 0;
}

.onec-site-header {
    position: relative;
    z-index: 100;
    width: 100%;
    background: rgba(255,255,255,.96);
    border-bottom: 1px solid #e5e7eb;
    backdrop-filter: blur(14px);
}

.onec-site-header__inner {
    width: min(1240px, calc(100% - 48px));
    height: 76px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 40px;
}

.onec-site-header__logo {
    display: inline-flex;
    align-items: center;
    color: #20376d;
}

.onec-site-header__logo svg {
    display: block;
}

.onec-site-header__nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 34px;
}

.onec-site-header__nav a {
    position: relative;
    color: #3c4043;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}

.onec-site-header__nav a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 100%;
    bottom: -7px;
    height: 2px;
    background: #0b57d0;
    transition: right .18s ease;
}

.onec-site-header__nav a:hover {
    color: #0b57d0;
}

.onec-site-header__nav a:hover::after {
    right: 0;
}


.onec-site-header__actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.onec-site-header__lang {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 42px;

    color: #3c4043;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

.onec-site-header__contact {
    min-height: 44px;
    padding: 0 19px;

    border: 0;
    border-radius: 999px;

    background: #0b57d0;
    color: #fff;

    font: inherit;
    font-size: 13px;
    font-weight: 600;

    cursor: pointer;
}

.onec-site-header__contact:hover {
    background: #0842a0;
}


/* burger */

.onec-site-header__burger {
    display: none;

    width: 42px;
    height: 42px;

    padding: 0;
    border: 1px solid #dadce0;
    border-radius: 50%;

    background: #fff;
    cursor: pointer;
}

.onec-site-header__burger span {
    display: block;
    width: 16px;
    height: 1px;
    margin: 4px auto;

    background: #202124;
    transition: transform .2s ease;
}


/* mobile menu */

.onec-mobile-menu {
    display: none;

    padding: 28px 24px 34px;
    border-top: 1px solid #e5e7eb;
    background: #fff;
}

.onec-mobile-menu.is-open {
    display: block;
}

.onec-mobile-menu nav {
    display: flex;
    flex-direction: column;
}

.onec-mobile-menu nav a {
    padding: 14px 0;

    border-bottom: 1px solid #eee;

    color: #202124;
    font-size: 20px;
    text-decoration: none;
}

.onec-mobile-menu__contacts {
    display: flex;
    flex-direction: column;
    gap: 8px;

    margin-top: 28px;
}

.onec-mobile-menu__contacts a {
    color: #5f6368;
    font-size: 14px;
    text-decoration: none;
}


@media (max-width: 1050px) {

    .onec-site-header__nav {
        display: none;
    }

    .onec-site-header__inner {
        grid-template-columns: auto 1fr;
    }

    .onec-site-header__actions {
        justify-self: end;
    }

    .onec-site-header__burger {
        display: block;
    }

}

@media (max-width: 650px) {

    .onec-site-header__inner {
        width: calc(100% - 28px);
        height: 66px;
    }

    .onec-site-header__contact,
    .onec-site-header__lang {
        display: none;
    }

}


/* =========================================================
   ISOLATED 1C FOOTER
   ========================================================= */

.onec-site-footer {
    padding: 88px 0 32px;
    background: #f8fafd;
    color: #202124;
}

.onec-site-footer__inner {
    width: min(1240px, calc(100% - 48px));
    margin: 0 auto;
}


/* CTA */

.onec-footer-cta {
    min-height: 330px;
    padding: 54px 58px;

    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 70px;
    align-items: end;

    border-radius: 32px;
    background: #0b57d0;
    color: #fff;
}

.onec-footer-cta__label {
    margin-bottom: 18px;

    color: rgba(255,255,255,.68);

    font-size: 13px;
    font-weight: 600;
    letter-spacing: .06em;
}

.onec-footer-cta h2 {
    max-width: 760px;
    margin: 0;

    color: #fff;

    font-size: clamp(42px, 5vw, 68px);
    line-height: 1.02;
    letter-spacing: -.045em;
    font-weight: 500;
}

.onec-footer-cta p {
    max-width: 680px;
    margin: 24px 0 0;

    color: rgba(255,255,255,.78);

    font-size: 15px;
    line-height: 1.6;
}

.onec-footer-cta__button {
    min-height: 58px;
    padding: 0 22px 0 26px;

    display: inline-flex;
    align-items: center;
    gap: 26px;

    border: 0;
    border-radius: 999px;

    background: #fff;
    color: #0b57d0;

    font: inherit;
    font-size: 14px;
    font-weight: 600;

    cursor: pointer;
    white-space: nowrap;
}

.onec-footer-cta__button svg {
    width: 22px;
    height: 22px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;

    transition: transform .2s ease;
}

.onec-footer-cta__button:hover svg {
    transform: translateX(4px);
}


/* main */

.onec-site-footer__main {
    padding: 72px 0 58px;

    display: grid;
    grid-template-columns: minmax(280px, 1.7fr) repeat(3, minmax(140px, .7fr));
    gap: 54px;

    border-bottom: 1px solid #dadce0;
}

.onec-site-footer__logo {
    display: inline-flex;
    color: #20376d;
}

.onec-site-footer__brand p {
    max-width: 350px;
    margin: 24px 0 0;

    color: #5f6368;

    font-size: 14px;
    line-height: 1.6;
}

.onec-site-footer__column {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

.onec-site-footer__column strong {
    margin-bottom: 7px;

    color: #202124;

    font-size: 13px;
    font-weight: 600;
}

.onec-site-footer__column a {
    color: #5f6368;

    font-size: 14px;
    line-height: 1.4;
    text-decoration: none;
}

.onec-site-footer__column a:hover {
    color: #0b57d0;
}


/* bottom */

.onec-site-footer__bottom {
    padding-top: 26px;

    display: flex;
    justify-content: space-between;
    gap: 30px;

    color: #80868b;
    font-size: 12px;
}

.onec-site-footer__bottom > div {
    display: flex;
    gap: 24px;
}

.onec-site-footer__bottom a {
    color: inherit;
    text-decoration: none;
}

.onec-site-footer__bottom a:hover {
    color: #0b57d0;
}


@media (max-width: 900px) {

    .onec-footer-cta {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .onec-footer-cta__button {
        justify-self: start;
    }

    .onec-site-footer__main {
        grid-template-columns: 1fr 1fr;
    }

}

@media (max-width: 600px) {

    .onec-site-footer {
        padding-top: 54px;
    }

    .onec-site-footer__inner {
        width: calc(100% - 28px);
    }

    .onec-footer-cta {
        min-height: 0;
        padding: 36px 26px;
        border-radius: 24px;
    }

    .onec-site-footer__main {
        grid-template-columns: 1fr;
        gap: 36px;
        padding: 54px 0;
    }

    .onec-site-footer__bottom {
        flex-direction: column;
    }

    .onec-site-footer__bottom > div {
        flex-direction: column;
        gap: 8px;
    }

}


/* =========================================================
   1C PAGE — ORDER MODAL REDESIGN
   Functionality remains global/original
   ========================================================= */

/*
 * Fancybox переносит modal непосредственно в body,
 * поэтому scope через body.onec-design-page сохраняется.
 */

body.onec-design-page #modal-order {
    width: min(920px, calc(100vw - 32px)) !important;
    max-width: 920px !important;

    padding: 0 !important;

    border-radius: 30px !important;

    background: #fff !important;
    color: #202124 !important;

    overflow: hidden;
}


/* убираем старую тёмную визуальную систему */

body.onec-design-page #modal-order,
body.onec-design-page #modal-order * {
    box-sizing: border-box;
}


/* заголовки */

body.onec-design-page #modal-order h1,
body.onec-design-page #modal-order h2,
body.onec-design-page #modal-order h3,
body.onec-design-page #modal-order .modal__title,
body.onec-design-page #modal-order .form__title {
    color: #202124 !important;
}


/* основная область */

body.onec-design-page #modal-order form {
    padding: 50px !important;
    background: #fff !important;
}


/* inputs */

body.onec-design-page #modal-order input,
body.onec-design-page #modal-order textarea,
body.onec-design-page #modal-order select {
    width: 100%;

    border: 1px solid #dadce0 !important;
    border-radius: 14px !important;

    background: #fff !important;
    color: #202124 !important;

    box-shadow: none !important;

    font-family: inherit !important;
    font-size: 15px !important;

    transition:
        border-color .15s ease,
        box-shadow .15s ease;
}

body.onec-design-page #modal-order input,
body.onec-design-page #modal-order select {
    min-height: 56px !important;
    padding: 0 17px !important;
}

body.onec-design-page #modal-order textarea {
    min-height: 150px !important;
    padding: 17px !important;
    resize: vertical;
}


/* placeholders */

body.onec-design-page #modal-order input::placeholder,
body.onec-design-page #modal-order textarea::placeholder {
    color: #80868b !important;
    opacity: 1;
}


/* focus */

body.onec-design-page #modal-order input:focus,
body.onec-design-page #modal-order textarea:focus,
body.onec-design-page #modal-order select:focus {
    outline: none !important;

    border-color: #0b57d0 !important;

    box-shadow:
        0 0 0 3px rgba(11,87,208,.10) !important;
}


/* labels / checkbox texts */

body.onec-design-page #modal-order label,
body.onec-design-page #modal-order .form__label,
body.onec-design-page #modal-order .checkbox {
    color: #5f6368 !important;
    font-size: 13px !important;
}


/* links */

body.onec-design-page #modal-order a {
    color: #0b57d0 !important;
}


/* submit */

body.onec-design-page #modal-order button[type="submit"] {
    min-height: 56px !important;
    padding: 0 28px !important;

    border: 0 !important;
    border-radius: 999px !important;

    background: #0b57d0 !important;
    color: #fff !important;

    font: inherit !important;
    font-size: 14px !important;
    font-weight: 600 !important;

    cursor: pointer;
}

body.onec-design-page #modal-order button[type="submit"]:hover {
    background: #0842a0 !important;
}


/* fancybox close */

body.onec-design-page .fancybox__container:has(#modal-order)
.f-button.is-close-btn {
    top: 20px !important;
    right: 20px !important;

    color: #5f6368 !important;
    background: #f1f3f4 !important;
}


/* старые декоративные элементы формы не должны доминировать */

body.onec-design-page #modal-order svg {
    max-width: 100%;
}


@media (max-width: 700px) {

    body.onec-design-page #modal-order {
        width: calc(100vw - 20px) !important;
        border-radius: 22px !important;
    }

    body.onec-design-page #modal-order form {
        padding: 28px 20px !important;
    }

}


/* =========================================================
   Native cursor for isolated 1C design
   ========================================================= */

body.onec-design-page,
body.onec-design-page * {
    cursor: default !important;
}

body.onec-design-page a,
body.onec-design-page button,
body.onec-design-page [role="button"],
body.onec-design-page label,
body.onec-design-page select {
    cursor: pointer !important;
}

body.onec-design-page input,
body.onec-design-page textarea {
    cursor: text !important;
}


/* =========================================================
   1C MODAL — final isolated design
   ========================================================= */

body.onec-design-page .onec-order-modal {
    width: min(820px, calc(100vw - 32px)) !important;
    max-width: 820px !important;
    max-height: calc(100vh - 32px);

    padding: 0 !important;
    margin: 0 !important;

    border-radius: 28px !important;

    background: #fff !important;
    color: #202124 !important;

    overflow-y: auto !important;
}


/* form */

body.onec-design-page .onec-order-form {
    width: 100% !important;
    max-width: none !important;

    padding: 48px !important;
    margin: 0 !important;

    background: #fff !important;
}


/* heading */

.onec-order-form__header {
    max-width: 620px;
    margin-bottom: 36px;
}

.onec-order-form__eyebrow {
    margin-bottom: 10px;

    color: #0b57d0;

    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.onec-order-form__header h2 {
    margin: 0 !important;

    color: #202124 !important;

    font-size: clamp(36px, 5vw, 52px) !important;
    line-height: 1.02 !important;
    letter-spacing: -.04em !important;
    font-weight: 500 !important;
}

.onec-order-form__header p {
    max-width: 560px;

    margin: 18px 0 0 !important;

    color: #5f6368 !important;

    font-size: 15px !important;
    line-height: 1.55 !important;
}


/* fields */

.onec-order-form__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.onec-field {
    display: block;
}

.onec-field > span,
.onec-order-form__section-title {
    display: block;

    margin-bottom: 8px;

    color: #5f6368 !important;

    font-size: 12px !important;
    font-weight: 500;
}

.onec-field input,
.onec-field textarea {
    width: 100% !important;

    border: 1px solid #dadce0 !important;
    border-radius: 12px !important;

    background: #fff !important;
    color: #202124 !important;

    box-shadow: none !important;

    font: inherit !important;
    font-size: 14px !important;
}

.onec-field input {
    height: 52px !important;
    min-height: 52px !important;
    padding: 0 15px !important;
}

.onec-field textarea {
    min-height: 150px !important;
    padding: 15px !important;
    resize: vertical;
}

.onec-field input::placeholder,
.onec-field textarea::placeholder {
    color: #9aa0a6 !important;
}

.onec-field input:focus,
.onec-field textarea:focus {
    outline: none !important;

    border-color: #0b57d0 !important;

    box-shadow:
        0 0 0 3px rgba(11,87,208,.08) !important;
}


/* budget */

.onec-order-form__section {
    margin-top: 24px;
}

.onec-budget {
    position: relative;
}

.onec-budget__value {
    width: 100%;
    min-height: 52px;

    padding: 0 44px 0 15px;

    border: 1px solid #dadce0;
    border-radius: 12px;

    background: #fff;
    color: #5f6368;

    font: inherit;
    font-size: 14px;
    text-align: left;

    cursor: pointer;
}

.onec-budget__value::after {
    content: "";

    position: absolute;
    right: 18px;
    top: 21px;

    width: 7px;
    height: 7px;

    border-right: 1.5px solid #5f6368;
    border-bottom: 1.5px solid #5f6368;

    transform: rotate(45deg);
}

.onec-budget__options {
    display: none;

    margin-top: 8px;
    padding: 8px;

    border: 1px solid #dadce0;
    border-radius: 14px;

    background: #fff;

    box-shadow: 0 8px 28px rgba(60,64,67,.14);
}

.onec-budget:focus-within .onec-budget__options,
.onec-budget.is-open .onec-budget__options {
    display: grid;
}

.onec-budget__options label {
    display: block;

    padding: 11px 12px;

    border-radius: 9px;

    color: #3c4043 !important;

    font-size: 13px !important;

    cursor: pointer;
}

.onec-budget__options label:hover {
    background: #f8fafd;
}

.onec-budget__options input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}


/* message */

.onec-field_message {
    margin-top: 24px;
}


/* file */

.onec-order-file {
    margin-top: 10px;
}

.onec-order-file input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.onec-order-file label {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    color: #0b57d0 !important;

    font-size: 13px !important;

    cursor: pointer;
}

.onec-order-file svg {
    width: 17px;
    height: 17px;
}


/* footer */

.onec-order-form__bottom {
    margin-top: 30px;

    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    gap: 28px;
    align-items: center;
}


/* policy */

.onec-order-policy {
    display: flex;
    align-items: flex-start;
    gap: 10px;

    color: #5f6368 !important;

    font-size: 12px !important;
    line-height: 1.45;
}

.onec-order-policy > input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.onec-order-policy__check {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;

    border: 1px solid #bdc1c6;
    border-radius: 4px;

    background: #fff;
}

.onec-order-policy > input[type="checkbox"]:checked
+ .onec-order-policy__check {
    border-color: #0b57d0;
    background: #0b57d0;
}

.onec-order-policy > input[type="checkbox"]:checked
+ .onec-order-policy__check::after {
    content: "✓";

    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100%;

    color: #fff;

    font-size: 11px;
}

.onec-order-policy a {
    color: #0b57d0 !important;
}


/* submit */

.onec-order-submit {
    min-height: 52px;
    padding: 0 20px 0 24px;

    display: inline-flex;
    align-items: center;
    gap: 24px;

    border: 0;
    border-radius: 999px;

    background: #0b57d0;
    color: #fff;

    font: inherit;
    font-size: 13px;
    font-weight: 600;

    white-space: nowrap;
    cursor: pointer;
}

.onec-order-submit:hover {
    background: #0842a0;
}

.onec-order-submit svg {
    width: 20px;
    height: 20px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* thank you */

body.onec-design-page .onec-thankyou {
    width: min(560px, calc(100vw - 32px)) !important;

    padding: 0 !important;

    border-radius: 28px !important;

    background: #fff !important;
}

.onec-thankyou__inner {
    padding: 60px;
    text-align: center;
}

.onec-thankyou__mark {
    width: 48px;
    height: 48px;

    margin: 0 auto 24px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #e6f4ea;
    color: #188038;

    font-size: 20px;
}

.onec-thankyou h2 {
    margin: 0;

    color: #202124;

    font-size: 38px;
    font-weight: 500;
}

.onec-thankyou p {
    margin: 14px auto 0;

    max-width: 380px;

    color: #5f6368;

    font-size: 14px;
    line-height: 1.55;
}


/* fancybox */

body.onec-design-page
.fancybox__container:has(.onec-order-modal)
.fancybox__content {
    padding: 0 !important;
    background: transparent !important;
}

body.onec-design-page
.fancybox__container:has(.onec-order-modal)
.f-button.is-close-btn {
    top: 18px !important;
    right: 18px !important;

    width: 38px !important;
    height: 38px !important;

    border-radius: 50% !important;

    background: #f1f3f4 !important;
    color: #5f6368 !important;
}


@media (max-width: 700px) {

    body.onec-design-page .onec-order-modal {
        width: calc(100vw - 20px) !important;
        border-radius: 22px !important;
    }

    body.onec-design-page .onec-order-form {
        padding: 34px 22px !important;
    }

    .onec-order-form__grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .onec-order-form__bottom {
        grid-template-columns: 1fr;
    }

    .onec-order-submit {
        width: 100%;
        justify-content: space-between;
    }

}


/* =========================================================
   1C modal bottom layout fix
   ========================================================= */

.onec-order-form__bottom {
    margin-top: 28px;

    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 22px;
}

.onec-order-policy {
    max-width: 520px;
}

.onec-order-submit {
    align-self: flex-end;
    min-width: 230px;
    justify-content: space-between;
}

@media (max-width: 700px) {
    .onec-order-submit {
        align-self: stretch;
        width: 100%;
    }
}


/* =========================================================
   1C modal — old composition in new design
   ========================================================= */

body.onec-design-page .onec-order-modal {
    width: min(1180px, calc(100vw - 32px)) !important;
    max-width: 1180px !important;
    max-height: calc(100vh - 32px);
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 32px !important;
    background: #ffffff !important;
    color: #202124 !important;
    overflow-y: auto !important;
}

body.onec-design-page .onec-order-form {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    padding: 54px 54px 42px !important;
    background: #ffffff !important;
    color: #202124 !important;
    box-sizing: border-box;
}

body.onec-design-page .onec-order-form__layout {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 40px;
    align-items: start;
}

body.onec-design-page .onec-order-form__intro {
    padding-top: 6px;
}

body.onec-design-page .onec-order-form__eyebrow {
    margin-bottom: 18px;
    font-size: 15px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #0b57d0;
}

body.onec-design-page .onec-order-form__intro h2 {
    margin: 0 0 22px;
    font-size: clamp(48px, 5vw, 72px);
    line-height: .95;
    font-weight: 500;
    letter-spacing: -.04em;
    color: #202124;
}

body.onec-design-page .onec-order-form__intro p {
    margin: 0;
    max-width: 260px;
    font-size: 17px;
    line-height: 1.55;
    color: #5f6368;
}

body.onec-design-page .onec-order-form__content {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

body.onec-design-page .onec-order-form__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 18px;
}

body.onec-design-page .onec-order-field {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
}

body.onec-design-page .onec-order-field--full {
    width: 100%;
}

body.onec-design-page .onec-order-field > span {
    font-size: 14px;
    line-height: 1.3;
    font-weight: 500;
    color: #5f6368;
}

body.onec-design-page .onec-order-field input,
body.onec-design-page .onec-order-field select,
body.onec-design-page .onec-order-field textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #d2d7e0 !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    color: #202124 !important;
    box-shadow: none !important;
    outline: none !important;
    font-family: inherit;
    font-size: 18px;
    line-height: 1.4;
    transition: border-color .2s ease, box-shadow .2s ease;
}

body.onec-design-page .onec-order-field input,
body.onec-design-page .onec-order-field select {
    height: 60px;
    padding: 0 18px;
}

body.onec-design-page .onec-order-field textarea {
    min-height: 180px;
    padding: 18px;
    resize: vertical;
}

body.onec-design-page .onec-order-field input:focus,
body.onec-design-page .onec-order-field select:focus,
body.onec-design-page .onec-order-field textarea:focus {
    border-color: #0b57d0 !important;
    box-shadow: 0 0 0 4px rgba(11, 87, 208, .10) !important;
}

body.onec-design-page .onec-order-field select {
    appearance: none;
    -webkit-appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, #5f6368 50%),
        linear-gradient(135deg, #5f6368 50%, transparent 50%);
    background-position:
        calc(100% - 24px) calc(50% - 3px),
        calc(100% - 18px) calc(50% - 3px);
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    padding-right: 46px;
}

body.onec-design-page .onec-order-file {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: fit-content;
    font-size: 16px;
    line-height: 1.4;
    color: #5f6368;
    cursor: pointer;
}

body.onec-design-page .onec-order-file input[type="file"] {
    display: none;
}

body.onec-design-page .onec-order-file::before {
    content: "↗";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 999px;
    border: 1px solid #d2d7e0;
    color: #5f6368;
    font-size: 12px;
}

body.onec-design-page .onec-order-form__checks {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 28px;
    margin-top: 4px;
}

body.onec-design-page .onec-order-check {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 15px;
    line-height: 1.5;
    color: #5f6368;
}

body.onec-design-page .onec-order-check input {
    margin: 3px 0 0;
    flex: 0 0 auto;
}

body.onec-design-page .onec-order-check a {
    color: #0b57d0;
    text-decoration: none;
}

body.onec-design-page .onec-order-check a:hover {
    text-decoration: underline;
}

body.onec-design-page .onec-order-submit--wide {
    margin-top: 34px;
    width: 100%;
    min-height: 104px;
    border: 0;
    border-radius: 999px;
    background: #0b57d0;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 0 34px 0 40px;
    font-family: inherit;
    font-size: clamp(26px, 3.4vw, 36px);
    line-height: 1;
    font-weight: 500;
    letter-spacing: -.03em;
    cursor: pointer;
    transition: background .2s ease, transform .2s ease;
}

body.onec-design-page .onec-order-submit--wide:hover {
    background: #0842a0;
}

body.onec-design-page .onec-order-submit--wide svg {
    flex: 0 0 auto;
}

body.onec-design-page .fancybox-close-small {
    top: 16px !important;
    right: 16px !important;
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    border-radius: 999px;
    background: #f3f6fb !important;
    color: #5f6368 !important;
}

body.onec-design-page .fancybox-close-small:hover {
    background: #e8f0fe !important;
    color: #0b57d0 !important;
}

@media (max-width: 980px) {
    body.onec-design-page .onec-order-form {
        padding: 36px 28px 28px !important;
    }

    body.onec-design-page .onec-order-form__layout {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    body.onec-design-page .onec-order-form__intro p {
        max-width: none;
    }

    body.onec-design-page .onec-order-form__grid,
    body.onec-design-page .onec-order-form__checks {
        grid-template-columns: 1fr;
    }

    body.onec-design-page .onec-order-submit--wide {
        min-height: 84px;
        font-size: 24px;
    }
}

@media (max-width: 640px) {
    body.onec-design-page .onec-order-modal {
        width: calc(100vw - 16px) !important;
        max-height: calc(100vh - 16px);
        border-radius: 24px !important;
    }

    body.onec-design-page .onec-order-form {
        padding: 22px 18px 18px !important;
    }

    body.onec-design-page .onec-order-form__intro h2 {
        font-size: 42px;
    }

    body.onec-design-page .onec-order-field input,
    body.onec-design-page .onec-order-field select {
        height: 54px;
    }

    body.onec-design-page .onec-order-submit--wide {
        min-height: 72px;
        padding: 0 22px 0 24px;
        font-size: 20px;
    }
}


/* =========================================================
   1C modal — desktop viewport fit
   ========================================================= */

/* одинаковое пространство вокруг модалки */
body.onec-design-page
.fancybox__container:has(.onec-order-modal)
.fancybox__slide {
    padding: 24px !important;
}


/* шире на desktop */
body.onec-design-page .onec-order-modal {
    width: min(1320px, calc(100vw - 48px)) !important;
    max-width: 1320px !important;

    max-height: none !important;
    overflow: visible !important;

    border-radius: 30px !important;
}


/* чуть компактнее внутренние отступы */
body.onec-design-page .onec-order-form {
    padding: 38px 46px 34px !important;
}


/* левая колонка немного шире */
body.onec-design-page .onec-order-form__layout {
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 48px;
}


/* заголовок сохраняем крупным, но уменьшаем высоту блока */
body.onec-design-page .onec-order-form__eyebrow {
    margin-bottom: 13px;
}

body.onec-design-page .onec-order-form__intro h2 {
    margin-bottom: 18px;
    font-size: clamp(52px, 4.5vw, 68px);
}

body.onec-design-page .onec-order-form__intro p {
    font-size: 16px;
    line-height: 1.5;
}


/* поля немного ниже */
body.onec-design-page .onec-order-field input,
body.onec-design-page .onec-order-field select {
    height: 54px;
}

body.onec-design-page .onec-order-field textarea {
    min-height: 140px;
    height: 140px;
}


/* уменьшаем вертикальные интервалы */
body.onec-design-page .onec-order-form__content {
    gap: 14px;
}

body.onec-design-page .onec-order-form__grid {
    gap: 14px 18px;
}

body.onec-design-page .onec-order-field {
    gap: 7px;
}

body.onec-design-page .onec-order-form__checks {
    margin-top: 0;
}


/* кнопка как в старой композиции, но не такая высокая */
body.onec-design-page .onec-order-submit--wide {
    min-height: 78px;
    margin-top: 24px;
    padding: 0 30px 0 34px;

    font-size: clamp(24px, 2.5vw, 32px);
}


/* На нормальном desktop никакого внутреннего scroll */
@media (min-width: 901px) and (min-height: 760px) {

    body.onec-design-page .onec-order-modal {
        max-height: none !important;
        overflow: visible !important;
    }

}


/* Если экран реально низкий — разрешаем scroll */
@media (max-height: 759px) {

    body.onec-design-page .onec-order-modal {
        max-height: calc(100vh - 24px) !important;
        overflow-y: auto !important;
    }

}


/* tablet / mobile */
@media (max-width: 900px) {

    body.onec-design-page
    .fancybox__container:has(.onec-order-modal)
    .fancybox__slide {
        padding: 12px !important;
    }

    body.onec-design-page .onec-order-modal {
        width: calc(100vw - 24px) !important;
        max-height: calc(100vh - 24px) !important;
        overflow-y: auto !important;
    }

    body.onec-design-page .onec-order-form__layout {
        grid-template-columns: 1fr;
        gap: 28px;
    }

}


/* =========================================================
   1C modal — visual polish
   ========================================================= */

/* Снова выраженно округлая модалка */
body.onec-design-page .onec-order-modal {
    border-radius: 36px !important;
    overflow: hidden !important;
}


/* Поля — мягче, как в остальном новом интерфейсе */
body.onec-design-page .onec-order-field input,
body.onec-design-page .onec-order-field select,
body.onec-design-page .onec-order-field textarea {
    border-radius: 20px !important;
}

body.onec-design-page .onec-order-field input,
body.onec-design-page .onec-order-field select {
    height: 58px !important;
}

body.onec-design-page .onec-order-field textarea {
    border-radius: 22px !important;
}


/* Нижняя зона */
body.onec-design-page .onec-order-form__checks {
    display: flex !important;
    align-items: flex-start;
    justify-content: space-between;
    gap: 34px;
    margin-top: 6px;
}


/* Полностью сбрасываем старые стили checkbox */
body.onec-design-page .onec-order-check {
    flex: 1 1 0;
    min-width: 0;

    display: grid !important;
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 10px;

    align-items: start;

    color: #5f6368 !important;

    font-size: 13px !important;
    line-height: 1.45 !important;
}

body.onec-design-page .onec-order-check input[type="checkbox"] {
    appearance: none !important;
    -webkit-appearance: none !important;

    position: static !important;

    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 1px solid #bdc1c6 !important;
    border-radius: 6px !important;

    background: #fff !important;

    box-shadow: none !important;

    cursor: pointer !important;
}

body.onec-design-page .onec-order-check input[type="checkbox"]:checked {
    border-color: #0b57d0 !important;
    background:
        #0b57d0
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5 8.3 14 15 6.8' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
        center / 16px 16px
        no-repeat !important;
}


/* Текст политики не должен расползаться */
body.onec-design-page .onec-order-check span {
    min-width: 0;
}

body.onec-design-page .onec-order-check a {
    display: inline;
}


/* Прикрепить файл — заметнее */
body.onec-design-page .onec-order-file {
    margin-top: 2px;

    display: inline-flex;
    align-items: center;
    gap: 10px;

    width: fit-content;

    color: #3c4043 !important;

    font-size: 14px !important;
    font-weight: 500;
}

body.onec-design-page .onec-order-file::before {
    content: "＋";

    width: 28px;
    height: 28px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 1px solid #dadce0;
    border-radius: 50%;

    background: #fff;

    color: #0b57d0;

    font-size: 18px;
    line-height: 1;
}

body.onec-design-page .onec-order-file:hover::before {
    background: #e8f0fe;
    border-color: #a8c7fa;
}


/* Закрытие тоже в общей системе */
body.onec-design-page .fancybox-close-small,
body.onec-design-page
.fancybox__container:has(.onec-order-modal)
.f-button.is-close-btn {
    width: 42px !important;
    height: 42px !important;

    border-radius: 50% !important;

    background: #f1f3f4 !important;
}


/* mobile */
@media (max-width: 760px) {
    body.onec-design-page .onec-order-form__checks {
        flex-direction: column;
        gap: 14px;
    }
}


/* =========================================================
   1C modal — width + checkbox final fix
   ========================================================= */

/* Desktop: одинаковые поля вокруг формы */
body.onec-design-page .onec-order-modal {
    width: calc(100vw - 56px) !important;
    max-width: 1440px !important;
    min-width: 0 !important;

    max-height: none !important;
    overflow: visible !important;

    border-radius: 36px !important;
}

/* внутренний layout */
body.onec-design-page .onec-order-form {
    padding: 42px 52px 34px !important;
}

body.onec-design-page .onec-order-form__layout {
    grid-template-columns: 330px minmax(0, 1fr) !important;
    gap: 64px !important;
}

/* правая колонка реально занимает всё оставшееся место */
body.onec-design-page .onec-order-form__content {
    width: 100%;
    min-width: 0;
}

/* чуть шире поля */
body.onec-design-page .onec-order-form__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px 20px !important;
}


/* =========================================================
   CHECKBOX — completely isolated
   ========================================================= */

body.onec-design-page .onec-order-form__checks {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 24px !important;
    align-items: start !important;

    margin-top: 8px !important;
}

/* убираем влияние старых глобальных checkbox-стилей */
body.onec-design-page .onec-order-check {
    position: relative !important;

    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;

    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;

    color: #5f6368 !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
}

/* настоящий checkbox полностью прячем */
body.onec-design-page .onec-order-check > input[type="checkbox"] {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    margin: 0 !important;
    padding: 0 !important;

    opacity: 0 !important;
    pointer-events: none !important;
}

/* рисуем свой checkbox */
body.onec-design-page .onec-order-check::before {
    content: "";

    flex: 0 0 20px;

    width: 20px;
    height: 20px;

    margin-top: 1px;

    border: 1px solid #bdc1c6;
    border-radius: 6px;

    background: #fff;

    box-sizing: border-box;
}

/* checked */
body.onec-design-page .onec-order-check:has(> input[type="checkbox"]:checked)::before {
    border-color: #0b57d0;

    background:
        #0b57d0
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5 8.3 14 15 6.8' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
        center / 16px 16px
        no-repeat;
}

/* hover */
body.onec-design-page .onec-order-check:hover::before {
    border-color: #0b57d0;
}

/* текст checkbox */
body.onec-design-page .onec-order-check > span {
    display: block !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;
}

/* политика */
body.onec-design-page .onec-order-check a {
    color: #0b57d0 !important;
}


/* =========================================================
   File link — slightly stronger
   ========================================================= */

body.onec-design-page .onec-order-file {
    margin: 2px 0 2px !important;

    font-size: 14px !important;
    font-weight: 500 !important;
}


/* =========================================================
   Desktop viewport
   ========================================================= */

body.onec-design-page
.fancybox__container:has(.onec-order-modal)
.fancybox__slide {
    padding: 28px !important;
}


/* Только когда экран физически маленький — разрешаем scroll */
@media (max-width: 900px), (max-height: 760px) {

    body.onec-design-page .onec-order-modal {
        width: calc(100vw - 24px) !important;
        max-height: calc(100vh - 24px) !important;
        overflow-y: auto !important;
    }

}


/* mobile */
@media (max-width: 760px) {

    body.onec-design-page .onec-order-form {
        padding: 28px 20px 22px !important;
    }

    body.onec-design-page .onec-order-form__layout {
        grid-template-columns: 1fr !important;
        gap: 26px !important;
    }

    body.onec-design-page .onec-order-form__checks {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

}


/* =========================================================
   1C modal — final desktop width / radius fix
   ========================================================= */

/* Сам контейнер Fancybox не ограничивает ширину */
body.onec-design-page
.fancybox__container:has(.onec-order-modal)
.fancybox__slide {
    padding: 28px !important;
}

/* Именно эта обёртка сейчас зажимает форму */
body.onec-design-page
.fancybox__container:has(.onec-order-modal)
.fancybox__content {
    width: min(1440px, calc(100vw - 56px)) !important;
    max-width: none !important;
    min-width: 0 !important;

    padding: 0 !important;
    margin: auto !important;

    border-radius: 38px !important;

    background: #fff !important;

    overflow: hidden !important;

    box-shadow:
        0 24px 80px rgba(32, 33, 36, .18) !important;
}


/* Внутренняя modal занимает всю ширину обёртки */
body.onec-design-page .onec-order-modal {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    border-radius: 38px !important;

    background: #fff !important;

    overflow: hidden !important;
}


/* Форма тоже без собственных ограничений */
body.onec-design-page .onec-order-form {
    width: 100% !important;
    max-width: none !important;

    padding: 42px 54px 34px !important;

    border-radius: 38px !important;

    background: #fff !important;
}


/* На широком экране даём больше места правой части */
body.onec-design-page .onec-order-form__layout {
    grid-template-columns: 340px minmax(0, 1fr) !important;
    gap: 72px !important;
}


/* Поля сохраняют мягкое скругление */
body.onec-design-page .onec-order-field input,
body.onec-design-page .onec-order-field select {
    border-radius: 20px !important;
}

body.onec-design-page .onec-order-field textarea {
    border-radius: 22px !important;
}


/* Кнопка тоже в общей округлой системе */
body.onec-design-page .onec-order-submit--wide {
    border-radius: 999px !important;
}


/* Нормальный desktop — форма целиком, без scroll */
@media (min-width: 901px) and (min-height: 760px) {

    body.onec-design-page
    .fancybox__container:has(.onec-order-modal)
    .fancybox__content,
    body.onec-design-page .onec-order-modal {
        max-height: none !important;
        overflow: hidden !important;
    }

}


/* Только если экран физически не вмещает форму */
@media (max-width: 900px), (max-height: 759px) {

    body.onec-design-page
    .fancybox__container:has(.onec-order-modal)
    .fancybox__content {
        width: calc(100vw - 24px) !important;
        max-height: calc(100vh - 24px) !important;
        overflow-y: auto !important;

        border-radius: 26px !important;
    }

    body.onec-design-page .onec-order-modal {
        border-radius: 26px !important;
    }

    body.onec-design-page .onec-order-form {
        padding: 30px 24px 24px !important;
        border-radius: 26px !important;
    }

}


/* =========================================================
   1C modal — exact Fancybox width fix
   #modal-order IS .fancybox__content
   ========================================================= */

body.onec-design-page .fancybox__content.onec-order-modal {
    width: calc(100vw - 48px) !important;
    max-width: none !important;
    min-width: 0 !important;

    height: auto !important;
    max-height: calc(100dvh - 48px) !important;

    margin: auto !important;
    padding: 0 !important;

    border-radius: 36px !important;

    background: #fff !important;

    overflow-x: hidden !important;
    overflow-y: visible !important;

    box-shadow: 0 24px 80px rgba(32,33,36,.18) !important;
}

body.onec-design-page
.fancybox__slide:has(.fancybox__content.onec-order-modal) {
    padding: 24px !important;
}


/* На обычном desktop вся форма должна помещаться без своего scroll */
@media (min-width: 901px) and (min-height: 760px) {

    body.onec-design-page .fancybox__content.onec-order-modal {
        overflow: hidden !important;
    }

}


/* Scroll только когда экран действительно тесный */
@media (max-width: 900px), (max-height: 759px) {

    body.onec-design-page .fancybox__content.onec-order-modal {
        width: calc(100vw - 24px) !important;
        max-height: calc(100dvh - 24px) !important;

        border-radius: 26px !important;

        overflow-y: auto !important;
    }

    body.onec-design-page
    .fancybox__slide:has(.fancybox__content.onec-order-modal) {
        padding: 12px !important;
    }

}

/* =========================================================
   FINAL modal width override
   beats old #modal-order 920px rule by specificity
   ========================================================= */

html body.onec-design-page
#modal-order.onec-order-modal.fancybox__content {
    width: calc(100vw - 48px) !important;
    max-width: none !important;
    min-width: 0 !important;

    margin-left: 24px !important;
    margin-right: 24px !important;

    border-radius: 36px !important;
}

@media (max-width: 900px) {
    html body.onec-design-page
    #modal-order.onec-order-modal.fancybox__content {
        width: calc(100vw - 24px) !important;

        margin-left: 12px !important;
        margin-right: 12px !important;

        border-radius: 26px !important;
    }
}


#integration-mode-anchor {
    width: 100%;
    height: 0;
    margin: 0;
    padding: 0;
}

/* Submit button aligned with right form column */

body.onec-design-page .onec-order-submit--wide {
    width: auto !important;
    min-width: 0 !important;

    margin:
        24px
        52px
        34px
        calc(340px + 72px + 52px) !important;

    padding: 0 32px 0 38px !important;

    align-self: stretch;
}

@media (max-width: 1099px) {
    body.onec-design-page .onec-order-submit--wide {
        width: calc(100% - 60px) !important;
        margin: 0 30px 28px !important;
    }
}


/* Submit = ширина правой колонки формы */

body.onec-design-page .onec-order-submit--wide {
    width: calc(100% - 52px - 340px - 72px - 52px) !important;
    max-width: none !important;

    margin:
        24px
        52px
        34px
        calc(52px + 340px + 72px) !important;

    min-height: 78px !important;

    justify-content: space-between !important;
}

@media (max-width: 1099px) {
    body.onec-design-page .onec-order-submit--wide {
        width: calc(100% - 60px) !important;
        margin: 0 30px 28px !important;
    }
}

/* Submit = exactly the same width as right form column */

body.onec-design-page .onec-order-form {
    --form-left: 340px;
    --form-gap: 72px;
    --form-pad-x: 52px;
}

body.onec-design-page .onec-order-submit--wide {
    width: auto !important;

    margin-left:
        calc(
            var(--form-pad-x) +
            var(--form-left) +
            var(--form-gap)
        ) !important;

    margin-right:
        var(--form-pad-x) !important;

    margin-top: 24px !important;
    margin-bottom: 34px !important;

    display: flex !important;
    align-items: center;
    justify-content: space-between !important;
}

@media (max-width: 1099px) {
    body.onec-design-page .onec-order-submit--wide {
        margin-left: 30px !important;
        margin-right: 30px !important;
    }
}


/* Submit button = exact width of right form column */

html body.onec-design-page
#modal-order
.onec-order-form
> .onec-order-submit--wide {
    margin-left: 464px !important;
    margin-right: 52px !important;

    width: calc(100% - 516px) !important;
    max-width: none !important;

    box-sizing: border-box !important;

    min-height: 78px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

@media (max-width: 1099px) {
    html body.onec-design-page
    #modal-order
    .onec-order-form
    > .onec-order-submit--wide {
        margin-left: 30px !important;
        margin-right: 30px !important;

        width: calc(100% - 60px) !important;
    }
}


/* Submit lives inside right column — same width as textarea */

html body.onec-design-page
#modal-order
.onec-order-form__content
> .onec-order-submit--wide {
    width: 100% !important;
    max-width: none !important;

    margin: 8px 0 0 !important;

    min-height: 78px !important;

    box-sizing: border-box !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}


/* Submit exactly matches right column width */

html body.onec-design-page
#modal-order
.onec-order-form__content
> .onec-order-submit--wide {
    width: 100% !important;
    max-width: none !important;

    margin: 10px 0 0 !important;

    min-height: 78px !important;

    box-sizing: border-box !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}


/* submit is physically inside the right column */

html body.onec-design-page
#modal-order
.onec-order-form__content
> .onec-order-submit--wide {
    width: 100% !important;
    max-width: none !important;

    margin: 10px 0 0 !important;

    min-height: 78px !important;

    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}


/* =========================================================
   OVERVIEW — scenario cards visual system
   ========================================================= */

.integration-page[data-page-mode="overview"]
.integration-choice-section {
    background: #f8fafd;
}

.integration-choice-grid {
    gap: 18px !important;
}

.integration-choice-card {
    position: relative;

    min-height: 280px !important;
    padding: 28px !important;

    display: flex !important;
    flex-direction: column;

    border: 1px solid #dadce0 !important;
    border-radius: 26px !important;

    background: #fff !important;

    transition:
        transform .2s ease,
        border-color .2s ease,
        box-shadow .2s ease,
        background .2s ease !important;
}

.integration-choice-card:hover {
    transform: translateY(-3px);

    border-color: #b7c7e6 !important;

    box-shadow:
        0 8px 26px rgba(60,64,67,.10) !important;
}

.integration-choice-card.active {
    border: 2px solid #0b57d0 !important;

    background:
        linear-gradient(
            180deg,
            #fff 0%,
            #f8fbff 100%
        ) !important;

    box-shadow:
        0 8px 28px rgba(11,87,208,.08) !important;
}


/* icon */

.integration-choice-icon {
    width: 56px;
    height: 56px;

    margin-bottom: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 17px;

    background: #e8f0fe;
}

.integration-choice-icon svg {
    width: 27px;
    height: 27px;

    fill: none;
    stroke: #0b57d0;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.integration-choice-icon--1c {
    position: relative;

    background: #fff4bf;
}

.integration-choice-icon--1c svg {
    width: 24px;
    height: 24px;

    stroke: #8a6d00;
    opacity: .48;
}

.integration-choice-icon--1c span {
    position: absolute;
    z-index: 2;

    color: #202124;

    font-size: 14px;
    font-weight: 700;
}


/* typography */

.integration-choice-card small {
    margin-bottom: 14px;

    color: #80868b !important;

    font-size: 12px !important;
    font-weight: 500;
}

.integration-choice-card h3 {
    margin: 0 0 12px !important;

    color: #202124 !important;

    font-size: 23px !important;
    line-height: 1.15 !important;
    font-weight: 500 !important;
}

.integration-choice-card p {
    margin: 0 !important;

    color: #5f6368 !important;

    font-size: 14px !important;
    line-height: 1.5 !important;
}


/* выбранный сценарий */

.integration-choice-detail {
    margin-top: 22px !important;
    padding: 28px 32px !important;

    display: grid;
    grid-template-columns: 220px minmax(0,1fr);
    gap: 34px;
    align-items: start;

    border: 0 !important;
    border-radius: 24px !important;

    background: #e8f0fe !important;
}

.integration-choice-detail h3 {
    margin: 0 !important;

    color: #202124 !important;

    font-size: 24px !important;
    font-weight: 500 !important;
}

.integration-choice-detail p {
    margin: 0 !important;

    max-width: 760px;

    color: #5f6368 !important;

    font-size: 14px !important;
    line-height: 1.6 !important;
}


@media (max-width: 900px) {

    .integration-choice-grid {
        grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    }

    .integration-choice-detail {
        grid-template-columns: 1fr;
        gap: 12px;
    }

}

@media (max-width: 600px) {

    .integration-choice-grid {
        grid-template-columns: 1fr !important;
    }

    .integration-choice-card {
        min-height: 240px !important;
    }

}


/* ERP icon = same visual language as other overview cards */
.integration-choice-card .integration-choice-icon--erp,
.integration-choice-card:has(h3:contains("ERP-процесс")) .integration-choice-icon {
    background: #e8f0fe !important;
    color: #1967d2 !important;
    border: none !important;
    box-shadow: none !important;
}

.integration-choice-card .integration-choice-icon--erp svg,
.integration-choice-card:has(h3:contains("ERP-процесс")) .integration-choice-icon svg {
    stroke: currentColor !important;
    fill: none !important;
}

.integration-choice-card .integration-choice-icon--erp polygon,
.integration-choice-card .integration-choice-icon--erp path[fill],
.integration-choice-card .integration-choice-icon--erp rect[fill="#fbbc04"],
.integration-choice-card .integration-choice-icon--erp rect[fill="#F4B400"],
.integration-choice-card .integration-choice-icon--erp polygon[fill],
.integration-choice-card .integration-choice-icon--erp .diamond {
    display: none !important;
}

/* ERP icon — same style as the other scenario icons */
.integration-choice-icon--1c {
    background: #e8f0fe !important;
}

.integration-choice-icon--1c span {
    display: none !important;
}

.integration-choice-icon--1c svg {
    width: 27px !important;
    height: 27px !important;

    stroke: #0b57d0 !important;
    opacity: 1 !important;
}


/* =========================================================
   OVERVIEW — transferred entities
   ========================================================= */

.integration-entity-visual {
    width: 50px;
    height: 50px;

    margin-bottom: 26px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 15px;

    font-size: 20px;
    font-weight: 600;
}

.entity-catalog,
.entity-order {
    background: #e8f0fe;
    color: #0b57d0;
}

.entity-price,
.entity-payment,
.entity-status {
    background: #e6f4ea;
    color: #188038;
}

.entity-stock {
    background: #fef7e0;
    color: #b06000;
}

.entity-client {
    background: #f3e8fd;
    color: #9334e6;
}

.entity-shipping {
    background: #fce8e6;
    color: #c5221f;
}

.integration-page[data-page-mode="overview"]
.integration-entities-grid article {
    min-height: 210px;

    padding: 26px;

    border: 1px solid #dadce0;
    border-radius: 22px;

    background: #fff;

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        border-color .18s ease;
}

.integration-page[data-page-mode="overview"]
.integration-entities-grid article:hover {
    transform: translateY(-2px);

    border-color: #c5d2e8;

    box-shadow:
        0 7px 22px rgba(60,64,67,.08);
}

.integration-page[data-page-mode="overview"]
.integration-entities-grid h3 {
    margin: 0 0 9px;

    font-size: 19px;
    line-height: 1.2;
    font-weight: 500;
}

.integration-page[data-page-mode="overview"]
.integration-entities-grid p {
    margin: 0;

    color: #5f6368;

    font-size: 13px;
    line-height: 1.55;
}


/* =========================================================
   OVERVIEW — synchronized data
   ========================================================= */

.integration-overview-data-section {
    padding: 104px 0 112px;
    background: #fff;
}

.integration-page:not([data-page-mode="overview"])
.integration-overview-data-section {
    display: none;
}

.integration-overview-data-head {
    max-width: 700px;
    margin-bottom: 42px;
}

.integration-overview-data-head h2 {
    margin: 10px 0 14px;

    color: #202124;

    font-size: clamp(32px, 3vw, 46px);
    line-height: 1.08;
    font-weight: 500;
    letter-spacing: -.025em;
}

.integration-overview-data-head p {
    max-width: 620px;
    margin: 0;

    color: #5f6368;

    font-size: 17px;
    line-height: 1.6;
}

.integration-overview-data-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.integration-data-item {
    min-height: 235px;
    padding: 26px;

    border: 1px solid #e1e4e8;
    border-radius: 24px;

    background: #fff;

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        border-color .18s ease;
}

.integration-data-item:hover {
    transform: translateY(-2px);

    border-color: #c9d3e6;

    box-shadow: 0 8px 24px rgba(60,64,67,.08);
}

.integration-data-icon {
    width: 52px;
    height: 52px;

    margin-bottom: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 16px;
}

.integration-data-icon svg {
    width: 25px;
    height: 25px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.integration-data-icon span {
    font-size: 20px;
    font-weight: 600;
}

.integration-data-icon--blue {
    color: #0b57d0;
    background: #e8f0fe;
}

.integration-data-icon--green {
    color: #188038;
    background: #e6f4ea;
}

.integration-data-icon--yellow {
    color: #a05a00;
    background: #fef7e0;
}

.integration-data-icon--purple {
    color: #8430ce;
    background: #f3e8fd;
}

.integration-data-icon--red {
    color: #c5221f;
    background: #fce8e6;
}

.integration-data-item h3 {
    margin: 0 0 10px;

    color: #202124;

    font-size: 20px;
    line-height: 1.25;
    font-weight: 500;
}

.integration-data-item p {
    margin: 0;

    color: #5f6368;

    font-size: 14px;
    line-height: 1.55;
}

@media (max-width: 1050px) {
    .integration-overview-data-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    .integration-overview-data-section {
        padding: 72px 0 80px;
    }

    .integration-overview-data-grid {
        grid-template-columns: 1fr;
    }

    .integration-data-item {
        min-height: auto;
    }
}


/* =========================================================
   OVERVIEW — exchange flow
   ========================================================= */

.integration-overview-flow {
    padding: 112px 0 120px;
    background: #f8fafd;
}

.integration-page:not([data-page-mode="overview"])
.integration-overview-flow {
    display: none;
}

.integration-overview-flow-head {
    max-width: 720px;
    margin-bottom: 56px;
}

.integration-overview-flow-head h2 {
    margin: 10px 0 14px;

    color: #202124;

    font-size: clamp(34px, 3vw, 48px);
    line-height: 1.08;
    font-weight: 500;
    letter-spacing: -.025em;
}

.integration-overview-flow-head p {
    max-width: 650px;
    margin: 0;

    color: #5f6368;

    font-size: 17px;
    line-height: 1.6;
}

.integration-overview-flow-track {
    display: grid;
    grid-template-columns:
        minmax(0,1fr) 42px
        minmax(0,1fr) 42px
        minmax(0,1fr) 42px
        minmax(0,1fr);

    align-items: center;
}

.integration-flow-step {
    min-height: 300px;
    padding: 28px;

    border: 1px solid #e0e3e7;
    border-radius: 26px;

    background: #fff;
}

.integration-flow-number {
    margin-bottom: 24px;

    color: #9aa0a6;

    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
}

.integration-flow-icon {
    width: 54px;
    height: 54px;

    margin-bottom: 36px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 17px;

    color: #0b57d0;
    background: #e8f0fe;
}

.integration-flow-icon svg {
    width: 27px;
    height: 27px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.integration-flow-step h3 {
    margin: 0 0 12px;

    color: #202124;

    font-size: 20px;
    line-height: 1.3;
    font-weight: 500;
}

.integration-flow-step p {
    margin: 0;

    color: #5f6368;

    font-size: 14px;
    line-height: 1.55;
}

.integration-flow-arrow {
    display: flex;
    align-items: center;
    justify-content: center;

    color: #9aa0a6;
}

.integration-flow-arrow svg {
    width: 34px;
    height: 20px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (max-width: 1100px) {

    .integration-overview-flow-track {
        grid-template-columns: repeat(2, minmax(0,1fr));
        gap: 18px;
    }

    .integration-flow-arrow {
        display: none;
    }

}

@media (max-width: 620px) {

    .integration-overview-flow {
        padding: 78px 0 84px;
    }

    .integration-overview-flow-track {
        grid-template-columns: 1fr;
    }

    .integration-flow-step {
        min-height: auto;
    }

}

/* =========================================================
   OVERVIEW — editorial block
   ========================================================= */

.integration-editorial {
    padding: 118px 0;
    background: #fff;
}

.integration-page:not([data-page-mode="overview"])
.integration-editorial {
    display: none;
}

.integration-editorial-grid {
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    gap: 76px;
    align-items: center;
}

.integration-editorial-visual {
    min-height: 560px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 54px;

    border-radius: 32px;

    background:
        linear-gradient(
            145deg,
            #eef4ff 0%,
            #f8fafd 55%,
            #fff7d6 100%
        );
}

.integration-editorial-window {
    width: 100%;
    max-width: 560px;

    padding: 24px;

    border: 1px solid rgba(60,64,67,.12);
    border-radius: 24px;

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

    box-shadow:
        0 20px 60px rgba(60,64,67,.12);
}

.integration-editorial-window-head {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 24px;
}

.integration-editorial-window-head > div {
    display: flex;
    align-items: center;
    gap: 12px;
}

.integration-editorial-window-head strong,
.integration-editorial-window-head small {
    display: block;
}

.integration-editorial-window-head strong {
    color: #202124;
    font-size: 15px;
}

.integration-editorial-window-head small {
    margin-top: 3px;
    color: #80868b;
    font-size: 12px;
}

.integration-editorial-app-icon {
    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 13px;

    background: #fff1a8;
    color: #202124;

    font-size: 14px;
    font-weight: 700;
}

.integration-editorial-status {
    padding: 7px 10px;

    border-radius: 999px;

    background: #e6f4ea;
    color: #188038;

    font-size: 11px;
    font-weight: 600;
}

.integration-editorial-table {
    overflow: hidden;

    border: 1px solid #e0e3e7;
    border-radius: 16px;
}

.integration-editorial-row {
    display: grid;
    grid-template-columns: minmax(0,1.5fr) .8fr .65fr;
    gap: 16px;

    padding: 15px 16px;

    border-top: 1px solid #eceff1;

    color: #5f6368;

    font-size: 13px;
}

.integration-editorial-row:first-child {
    border-top: 0;
}

.integration-editorial-row--head {
    background: #f8fafd;

    color: #80868b;

    font-size: 11px;
    font-weight: 600;
}

.integration-editorial-row strong {
    color: #202124;
    font-weight: 500;
}

.stock-ok {
    color: #188038;
}

.stock-low {
    color: #b06000;
}

.integration-editorial-sync {
    margin-top: 20px;
    padding: 18px;

    display: flex;
    gap: 14px;
    align-items: center;

    border-radius: 16px;

    background: #e8f0fe;
}

.integration-editorial-sync-icon {
    width: 42px;
    height: 42px;

    flex: 0 0 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 13px;

    background: #fff;
    color: #0b57d0;
}

.integration-editorial-sync-icon svg {
    width: 22px;
    height: 22px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.integration-editorial-sync strong,
.integration-editorial-sync span {
    display: block;
}

.integration-editorial-sync strong {
    margin-bottom: 3px;

    color: #202124;

    font-size: 13px;
    font-weight: 600;
}

.integration-editorial-sync span {
    color: #5f6368;

    font-size: 12px;
    line-height: 1.4;
}

.integration-editorial-copy {
    max-width: 600px;
}

.integration-editorial-copy h2 {
    margin: 14px 0 26px;

    color: #202124;

    font-size: clamp(42px, 4.2vw, 66px);
    line-height: .98;
    font-weight: 500;
    letter-spacing: -.045em;
}

.integration-editorial-copy p {
    max-width: 560px;
    margin: 0 0 18px;

    color: #5f6368;

    font-size: 17px;
    line-height: 1.65;
}

@media (max-width: 980px) {

    .integration-editorial-grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .integration-editorial-copy {
        max-width: 720px;
    }

}

@media (max-width: 620px) {

    .integration-editorial {
        padding: 78px 0;
    }

    .integration-editorial-visual {
        min-height: auto;
        padding: 24px;
        border-radius: 24px;
    }

    .integration-editorial-copy h2 {
        font-size: 42px;
    }

}

/* =========================================================
   OVERVIEW — editorial web / CRM
   ========================================================= */

.integration-editorial-grid--reverse {
    grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr);
}

.integration-editorial-visual--web {
    position: relative;

    min-height: 600px;

    background:
        linear-gradient(
            145deg,
            #eef4ff 0%,
            #f8fbff 48%,
            #edf7ef 100%
        );
}

.integration-editorial-points {
    margin-top: 34px;

    display: grid;
    gap: 12px;
}

.integration-editorial-points > div {
    display: flex;
    align-items: center;
    gap: 11px;

    color: #3c4043;

    font-size: 15px;
}

.integration-editorial-check {
    width: 28px;
    height: 28px;

    flex: 0 0 28px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #e6f4ea;
    color: #188038;

    font-size: 14px;
    font-weight: 700;
}

.integration-web-stack {
    position: relative;

    width: 100%;
    max-width: 610px;

    margin: auto;
}

.integration-browser-window {
    overflow: hidden;

    border: 1px solid rgba(60,64,67,.14);
    border-radius: 24px;

    background: #fff;

    box-shadow:
        0 22px 65px rgba(60,64,67,.13);
}

.integration-browser-head {
    height: 54px;

    display: flex;
    align-items: center;
    gap: 18px;

    padding: 0 18px;

    border-bottom: 1px solid #eceff1;

    background: #f8fafd;
}

.integration-browser-dots {
    display: flex;
    gap: 6px;
}

.integration-browser-dots span {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #bdc1c6;
}

.integration-browser-address {
    flex: 1;

    padding: 8px 14px;

    border-radius: 999px;

    background: #fff;

    color: #80868b;

    font-size: 11px;
}

.integration-browser-body {
    min-height: 355px;

    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 28px;

    padding: 34px;
}

.integration-product-image {
    min-height: 265px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 18px;

    background: #f1f5fb;
}

.integration-product-device {
    position: relative;

    width: 150px;
    height: 102px;

    border: 7px solid #3c4043;
    border-radius: 8px;

    background: #d9e7ff;
}

.integration-product-device::after {
    content: "";

    position: absolute;
    left: -18px;
    right: -18px;
    bottom: -15px;

    height: 9px;

    border-radius: 0 0 12px 12px;

    background: #5f6368;
}

.integration-product-device div {
    position: absolute;
    inset: 12px;

    border-radius: 3px;

    background:
        linear-gradient(
            135deg,
            #c6dafc,
            #e8f0fe
        );
}

.integration-product-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.integration-product-label {
    margin-bottom: 10px;

    color: #80868b;

    font-size: 12px;
}

.integration-product-info > strong {
    color: #202124;

    font-size: 24px;
    font-weight: 500;
}

.integration-product-price {
    margin-top: 20px;

    color: #202124;

    font-size: 27px;
    font-weight: 500;
}

.integration-product-stock {
    margin-top: 12px;

    display: flex;
    align-items: center;
    gap: 8px;

    color: #5f6368;

    font-size: 13px;
}

.integration-product-stock span {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #34a853;
}

.integration-product-info button {
    margin-top: 28px;

    width: fit-content;

    padding: 12px 20px;

    border: 0;
    border-radius: 999px;

    background: #0b57d0;
    color: #fff;

    font-size: 13px;
    font-weight: 600;
}

.integration-crm-card {
    position: absolute;

    right: -34px;
    bottom: -42px;

    width: 250px;

    padding: 20px;

    border: 1px solid rgba(60,64,67,.14);
    border-radius: 20px;

    background: #fff;

    box-shadow:
        0 16px 45px rgba(60,64,67,.15);
}

.integration-crm-card-head {
    display: flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 16px;
}

.integration-crm-icon {
    width: 38px;
    height: 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 12px;

    background: #e8f0fe;
    color: #0b57d0;
}

.integration-crm-icon svg {
    width: 20px;
    height: 20px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.integration-crm-card-head strong,
.integration-crm-card-head span {
    display: block;
}

.integration-crm-card-head strong {
    color: #202124;

    font-size: 13px;
}

.integration-crm-card-head span {
    margin-top: 2px;

    color: #80868b;

    font-size: 11px;
}

.integration-crm-row {
    display: flex;
    justify-content: space-between;
    gap: 14px;

    padding: 9px 0;

    border-top: 1px solid #f1f3f4;

    font-size: 11px;
}

.integration-crm-row span {
    color: #80868b;
}

.integration-crm-row strong {
    color: #3c4043;
    font-weight: 500;
}

.integration-crm-status {
    color: #188038 !important;
}

.integration-sync-badge {
    position: absolute;

    left: -28px;
    bottom: 36px;

    min-width: 225px;

    display: flex;
    align-items: center;
    gap: 12px;

    padding: 15px 17px;

    border-radius: 18px;

    background: #fff;

    box-shadow:
        0 15px 40px rgba(60,64,67,.14);
}

.integration-sync-badge-icon {
    width: 37px;
    height: 37px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 12px;

    background: #e6f4ea;
    color: #188038;
}

.integration-sync-badge-icon svg {
    width: 19px;
    height: 19px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.integration-sync-badge strong,
.integration-sync-badge span {
    display: block;
}

.integration-sync-badge strong {
    color: #202124;

    font-size: 12px;
}

.integration-sync-badge span {
    margin-top: 2px;

    color: #80868b;

    font-size: 10px;
}

@media (max-width: 980px) {

    .integration-editorial-grid--reverse {
        grid-template-columns: 1fr;
    }

    .integration-editorial-visual--web {
        min-height: 570px;
    }

}

@media (max-width: 680px) {

    .integration-browser-body {
        grid-template-columns: 1fr;
    }

    .integration-crm-card,
    .integration-sync-badge {
        position: static;

        width: auto;
        margin-top: 18px;
    }

    .integration-editorial-visual--web {
        min-height: auto;
    }

}

/* =========================================================
   OVERVIEW — workflow editorial
   ========================================================= */

.integration-workflow-editorial {
    padding: 126px 0 130px;
    background: #fff;
}

.integration-page:not([data-page-mode="overview"])
.integration-workflow-editorial {
    display: none;
}

.integration-workflow-copy {
    max-width: 920px;
    margin: 0 auto 72px;
    text-align: center;
}

.integration-workflow-copy h2 {
    margin: 14px auto 24px;
    max-width: 900px;

    color: #202124;

    font-size: clamp(42px, 5vw, 72px);
    line-height: .98;
    font-weight: 500;
    letter-spacing: -.045em;
}

.integration-workflow-copy p {
    max-width: 700px;
    margin: 0 auto;

    color: #5f6368;

    font-size: 18px;
    line-height: 1.6;
}

.integration-workflow-stage {
    position: relative;

    min-height: 620px;

    border-radius: 36px;

    background:
        radial-gradient(
            circle at 50% 50%,
            #eef4ff 0,
            #f8fafd 34%,
            #fff 72%
        );

    overflow: hidden;
}

.integration-workflow-core {
    position: absolute;

    left: 50%;
    top: 50%;

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

    z-index: 3;

    text-align: center;
}

.integration-workflow-core-ring {
    width: 180px;
    height: 180px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background:
        conic-gradient(
            from 0deg,
            #4285f4,
            #34a853,
            #fbbc04,
            #ea4335,
            #4285f4
        );

    box-shadow:
        0 20px 60px rgba(66,133,244,.18);
}

.integration-workflow-core-inner {
    width: 160px;
    height: 160px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #fff;
}

.integration-workflow-core-inner strong {
    color: #0b57d0;

    font-size: 34px;
    line-height: 1;
    font-weight: 600;
}

.integration-workflow-core-inner span {
    margin-top: 8px;

    color: #80868b;

    font-size: 12px;
}

.integration-workflow-core-status {
    margin-top: 14px;

    color: #5f6368;

    font-size: 12px;
    font-weight: 500;
}

.integration-workflow-node {
    position: absolute;
    z-index: 3;

    width: 250px;

    display: flex;
    align-items: center;
    gap: 14px;

    padding: 20px;

    border: 1px solid #e0e3e7;
    border-radius: 22px;

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

    box-shadow:
        0 12px 38px rgba(60,64,67,.09);
}

.integration-workflow-node strong,
.integration-workflow-node span {
    display: block;
}

.integration-workflow-node strong {
    color: #202124;

    font-size: 14px;
    font-weight: 600;
}

.integration-workflow-node > div:last-child span {
    margin-top: 4px;

    color: #80868b;

    font-size: 11px;
    line-height: 1.35;
}

.integration-workflow-node-icon {
    width: 46px;
    height: 46px;

    flex: 0 0 46px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 14px;

    background: #e8f0fe;
    color: #0b57d0;
}

.integration-workflow-node-icon svg {
    width: 23px;
    height: 23px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.integration-workflow-node--onec {
    left: 7%;
    top: 15%;
}

.integration-workflow-node--onec .integration-workflow-node-icon {
    background: #fff1a8;
    color: #202124;

    font-size: 14px;
    font-weight: 700;
}

.integration-workflow-node--crm {
    left: 9%;
    bottom: 14%;
}

.integration-workflow-node--site {
    right: 7%;
    top: 15%;
}

.integration-workflow-node--client {
    right: 9%;
    bottom: 14%;
}

.integration-workflow-line {
    position: absolute;
    z-index: 1;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            rgba(11,87,208,.10),
            rgba(11,87,208,.45),
            rgba(11,87,208,.10)
        );

    transform-origin: left center;
}

.integration-workflow-line--1 {
    left: 26%;
    top: 30%;

    width: 29%;
    transform: rotate(17deg);
}

.integration-workflow-line--2 {
    left: 26%;
    bottom: 29%;

    width: 29%;
    transform: rotate(-17deg);
}

.integration-workflow-line--3 {
    left: 50%;
    top: 50%;

    width: 28%;
    transform: rotate(-17deg);
}

.integration-workflow-line--4 {
    left: 50%;
    top: 50%;

    width: 28%;
    transform: rotate(17deg);
}

@media (max-width: 980px) {

    .integration-workflow-stage {
        min-height: auto;

        padding: 40px;

        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 18px;
    }

    .integration-workflow-core,
    .integration-workflow-node {
        position: static;
        transform: none;

        width: auto;
    }

    .integration-workflow-core {
        grid-column: 1 / -1;

        margin: 20px auto;
    }

    .integration-workflow-line {
        display: none;
    }

}

@media (max-width: 620px) {

    .integration-workflow-editorial {
        padding: 80px 0;
    }

    .integration-workflow-copy {
        margin-bottom: 48px;
    }

    .integration-workflow-stage {
        grid-template-columns: 1fr;
        padding: 22px;
        border-radius: 26px;
    }

    .integration-workflow-core {
        grid-column: auto;
    }

}

/* =========================================================
   OVERVIEW — integration technologies
   ========================================================= */

.integration-info-section {
    padding: 108px 0 116px !important;
    background: #f8fafd !important;
}

.integration-page:not([data-page-mode="overview"])
.integration-info-section {
    display: none;
}

.integration-info-section .integration-section-head {
    margin-bottom: 46px;
}

.integration-info-section .integration-section-head h2 {
    margin-top: 10px;

    font-size: clamp(38px, 4vw, 58px) !important;
    line-height: 1 !important;
    font-weight: 500 !important;
    letter-spacing: -.035em;
}

.integration-info-section .integration-tech-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 18px;
}

.integration-info-section .integration-tech-grid article {
    position: relative;

    min-height: 270px;
    padding: 30px;

    display: flex;
    flex-direction: column;

    border: 1px solid #e0e3e7 !important;
    border-radius: 26px !important;

    background: #fff !important;

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        border-color .18s ease;
}

.integration-info-section .integration-tech-grid article:hover {
    transform: translateY(-2px);

    border-color: #c7d2e6 !important;

    box-shadow:
        0 10px 30px rgba(60,64,67,.08);
}

.integration-tech-icon {
    width: 56px;
    height: 56px;

    margin-bottom: 46px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 17px;

    font-size: 17px;
    font-weight: 600;
    letter-spacing: -.04em;
}

.integration-tech-icon svg {
    width: 27px;
    height: 27px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.integration-tech-icon--api {
    color: #0b57d0;
    background: #e8f0fe;
}

.integration-tech-icon--xml {
    color: #9334e6;
    background: #f3e8fd;
}

.integration-tech-icon--odata {
    color: #188038;
    background: #e6f4ea;
}

.integration-tech-icon--erp {
    color: #b06000;
    background: #fef7e0;
}

.integration-info-section .integration-tech-grid strong {
    display: block;

    margin-bottom: 12px;

    color: #202124;

    font-size: 22px !important;
    line-height: 1.2;
    font-weight: 500 !important;
}

.integration-info-section .integration-tech-grid p {
    max-width: 500px;
    margin: 0;

    color: #5f6368;

    font-size: 14px;
    line-height: 1.6;
}

@media (max-width: 720px) {

    .integration-info-section {
        padding: 78px 0 84px !important;
    }

    .integration-info-section .integration-tech-grid {
        grid-template-columns: 1fr;
    }

    .integration-info-section .integration-tech-grid article {
        min-height: auto;
    }

}

/* =========================================================
   OVERVIEW — integration scenarios
   ========================================================= */

.integration-scenarios-section {
    padding: 108px 0 118px !important;
    background: #fff !important;
}

.integration-page:not([data-page-mode="overview"])
.integration-scenarios-section {
    display: none;
}

.integration-scenarios-section .integration-section-head {
    margin-bottom: 46px;
}

.integration-scenarios-section .integration-section-head h2 {
    margin-top: 10px;

    font-size: clamp(38px, 4vw, 58px) !important;
    line-height: 1 !important;
    font-weight: 500 !important;
    letter-spacing: -.035em;
}

.integration-scenarios-section .integration-scenario-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 18px;
}

.integration-scenarios-section .integration-scenario-grid article {
    position: relative;

    min-height: 260px;
    padding: 30px;

    border: 1px solid #e0e3e7 !important;
    border-radius: 26px !important;

    background: #fff !important;

    transition:
        transform .18s ease,
        border-color .18s ease,
        box-shadow .18s ease;
}

.integration-scenarios-section .integration-scenario-grid article:hover {
    transform: translateY(-2px);

    border-color: #c7d2e6 !important;

    box-shadow:
        0 10px 30px rgba(60,64,67,.08);
}

/* номер сценария */

.integration-scenarios-section
.integration-scenario-grid article > span:first-child {
    position: absolute;

    top: 30px;
    right: 30px;

    color: #9aa0a6;

    font-size: 12px;
    font-weight: 600;
}

/* иконки */

.integration-scenario-icon {
    width: 56px;
    height: 56px;

    margin-bottom: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 17px;
}

.integration-scenario-icon svg {
    width: 27px;
    height: 27px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.integration-scenario-icon--blue {
    color: #0b57d0;
    background: #e8f0fe;
}

.integration-scenario-icon--purple {
    color: #8430ce;
    background: #f3e8fd;
}

.integration-scenario-icon--green {
    color: #188038;
    background: #e6f4ea;
}

.integration-scenario-icon--yellow {
    color: #a05a00;
    background: #fef7e0;
}

.integration-scenarios-section
.integration-scenario-grid h3 {
    margin: 0 0 12px;

    color: #202124;

    font-size: 23px !important;
    line-height: 1.2;
    font-weight: 500 !important;
}

.integration-scenarios-section
.integration-scenario-grid p {
    max-width: 520px;
    margin: 0;

    color: #5f6368;

    font-size: 14px;
    line-height: 1.6;
}

@media (max-width: 720px) {

    .integration-scenarios-section {
        padding: 78px 0 84px !important;
    }

    .integration-scenarios-section .integration-scenario-grid {
        grid-template-columns: 1fr;
    }

    .integration-scenarios-section .integration-scenario-grid article {
        min-height: auto;
    }

}

/* =========================================================
   OVERVIEW — ERP business process
   ========================================================= */

.integration-erp-section {
    padding: 112px 0 122px !important;
    background: #f8fafd !important;
}

.integration-page:not([data-page-mode="overview"])
.integration-erp-section {
    display: none;
}

.integration-erp-section .integration-section-head {
    margin-bottom: 52px;
}

.integration-erp-section .integration-section-head h2 {
    margin-top: 10px;

    max-width: 900px;

    font-size: clamp(40px, 4.2vw, 62px) !important;
    line-height: 1 !important;
    font-weight: 500 !important;
    letter-spacing: -.04em;
}

.integration-erp-map {
    position: relative;

    display: grid !important;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 16px !important;
}

/* тонкая линия процесса */

.integration-erp-map::before {
    content: "";

    position: absolute;

    left: 6%;
    right: 6%;
    top: 48px;

    height: 1px;

    background: #d7e1f3;

    z-index: 0;
}

.integration-erp-map > div {
    position: relative;
    z-index: 1;

    min-height: 228px !important;

    padding: 28px 26px !important;

    border: 1px solid #e0e3e7 !important;
    border-radius: 24px !important;

    background: #fff !important;

    transition:
        transform .18s ease,
        border-color .18s ease,
        box-shadow .18s ease;
}

.integration-erp-map > div:hover {
    transform: translateY(-3px);

    border-color: #c5d2e8 !important;

    box-shadow:
        0 10px 30px rgba(60,64,67,.08);
}

/* номера превращаем в шаги */

.integration-erp-map > div > span:first-child {
    width: 40px;
    height: 40px;

    margin-bottom: 48px;

    display: flex !important;
    align-items: center;
    justify-content: center;

    border-radius: 13px;

    background: #e8f0fe !important;
    color: #0b57d0 !important;

    font-size: 12px !important;
    font-weight: 700 !important;
}

/* разные оттенки, чтобы этапы легче считывались */

.integration-erp-map > div:nth-child(2) > span:first-child,
.integration-erp-map > div:nth-child(6) > span:first-child {
    background: #f3e8fd !important;
    color: #8430ce !important;
}

.integration-erp-map > div:nth-child(3) > span:first-child,
.integration-erp-map > div:nth-child(7) > span:first-child {
    background: #e6f4ea !important;
    color: #188038 !important;
}

.integration-erp-map > div:nth-child(4) > span:first-child,
.integration-erp-map > div:nth-child(8) > span:first-child {
    background: #fef7e0 !important;
    color: #a05a00 !important;
}

.integration-erp-map h3 {
    margin: 0 0 10px !important;

    color: #202124 !important;

    font-size: 20px !important;
    line-height: 1.2 !important;
    font-weight: 500 !important;
}

.integration-erp-map p {
    margin: 0 !important;

    color: #5f6368 !important;

    font-size: 13px !important;
    line-height: 1.55 !important;
}

@media (max-width: 1050px) {

    .integration-erp-map {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }

    .integration-erp-map::before {
        display: none;
    }

}

@media (max-width: 620px) {

    .integration-erp-section {
        padding: 78px 0 84px !important;
    }

    .integration-erp-map {
        grid-template-columns: 1fr;
    }

    .integration-erp-map > div {
        min-height: auto !important;
    }

}

/* =========================================================
   OVERVIEW — integration methods
   ========================================================= */

.integration-methods-section {
    padding: 112px 0 122px !important;
    background: #fff !important;
}

.integration-page:not([data-page-mode="overview"])
.integration-methods-section {
    display: none;
}

.integration-methods-section .integration-section-head {
    margin-bottom: 48px;
}

.integration-methods-section .integration-section-head h2 {
    margin-top: 10px;

    max-width: 900px;

    font-size: clamp(40px, 4.2vw, 62px) !important;
    line-height: 1 !important;
    font-weight: 500 !important;
    letter-spacing: -.04em;
}

.integration-methods-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 16px !important;
}

.integration-methods-grid > article {
    position: relative;

    min-height: 300px !important;
    padding: 28px !important;

    display: flex;
    flex-direction: column;

    overflow: hidden;

    border: 1px solid #e0e3e7 !important;
    border-radius: 26px !important;

    background: #fff !important;

    transition:
        transform .18s ease,
        border-color .18s ease,
        box-shadow .18s ease;
}

.integration-methods-grid > article:hover {
    transform: translateY(-3px);

    border-color: #c5d2e8 !important;

    box-shadow:
        0 10px 30px rgba(60,64,67,.08);
}

/* технологические бейджи */

.integration-methods-grid > article > span:first-child {
    width: fit-content;

    margin-bottom: 52px;

    padding: 9px 12px;

    border-radius: 11px;

    background: #e8f0fe !important;
    color: #0b57d0 !important;

    font-size: 13px !important;
    line-height: 1;
    font-weight: 700 !important;
}

.integration-methods-grid > article:nth-child(2) > span:first-child {
    background: #f3e8fd !important;
    color: #8430ce !important;
}

.integration-methods-grid > article:nth-child(3) > span:first-child {
    background: #e6f4ea !important;
    color: #188038 !important;
}

.integration-methods-grid > article:nth-child(4) > span:first-child {
    background: #fef7e0 !important;
    color: #a05a00 !important;
}

/* лёгкий технический акцент */

.integration-methods-grid > article::after {
    content: "";

    position: absolute;

    right: -26px;
    bottom: -26px;

    width: 110px;
    height: 110px;

    border-radius: 50%;

    background: #e8f0fe;

    opacity: .35;
}

.integration-methods-grid > article:nth-child(2)::after {
    background: #f3e8fd;
}

.integration-methods-grid > article:nth-child(3)::after {
    background: #e6f4ea;
}

.integration-methods-grid > article:nth-child(4)::after {
    background: #fef7e0;
}

.integration-methods-grid h3 {
    position: relative;
    z-index: 1;

    margin: 0 0 12px !important;

    color: #202124 !important;

    font-size: 21px !important;
    line-height: 1.2 !important;
    font-weight: 500 !important;
}

.integration-methods-grid p {
    position: relative;
    z-index: 1;

    margin: 0 !important;

    max-width: 250px;

    color: #5f6368 !important;

    font-size: 13px !important;
    line-height: 1.6 !important;
}

@media (max-width: 1050px) {

    .integration-methods-grid {
        grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    }

}

@media (max-width: 620px) {

    .integration-methods-section {
        padding: 78px 0 84px !important;
    }

    .integration-methods-grid {
        grid-template-columns: 1fr !important;
    }

    .integration-methods-grid > article {
        min-height: auto !important;
    }

}

/* =========================================================
   OVERVIEW — protocols / technologies
   ========================================================= */

.integration-protocols-section {
    padding: 112px 0 122px !important;
    background: #fff !important;
}

.integration-page:not([data-page-mode="overview"])
.integration-protocols-section {
    display: none;
}

.integration-protocols-section .integration-section-head {
    margin-bottom: 48px;
}

.integration-protocols-section .integration-section-head h2 {
    margin-top: 10px;

    max-width: 900px;

    font-size: clamp(40px, 4.2vw, 62px) !important;
    line-height: 1 !important;
    font-weight: 500 !important;
    letter-spacing: -.04em;
}

.integration-protocol-list {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 16px !important;
}

.integration-protocol-list > article {
    position: relative;

    min-height: 300px !important;
    padding: 28px !important;

    display: flex;
    flex-direction: column;

    overflow: hidden;

    border: 1px solid #e0e3e7 !important;
    border-radius: 26px !important;

    background: #fff !important;

    transition:
        transform .18s ease,
        border-color .18s ease,
        box-shadow .18s ease;
}

.integration-protocol-list > article:hover {
    transform: translateY(-3px);

    border-color: #c5d2e8 !important;

    box-shadow:
        0 10px 30px rgba(60,64,67,.08);
}

/* JSON / XML / OData / SOAP */

.integration-protocol-list > article > div:first-child {
    width: fit-content;

    margin-bottom: 50px;

    padding: 9px 12px;

    border-radius: 11px;

    background: #e8f0fe !important;
    color: #0b57d0 !important;

    font-size: 13px !important;
    line-height: 1;
    font-weight: 700 !important;
}

.integration-protocol-list > article:nth-child(2) > div:first-child {
    background: #f3e8fd !important;
    color: #8430ce !important;
}

.integration-protocol-list > article:nth-child(3) > div:first-child {
    background: #e6f4ea !important;
    color: #188038 !important;
}

.integration-protocol-list > article:nth-child(4) > div:first-child {
    background: #fef7e0 !important;
    color: #a05a00 !important;
}

/* мягкий декоративный круг */

.integration-protocol-list > article::after {
    content: "";

    position: absolute;

    right: -34px;
    bottom: -34px;

    width: 125px;
    height: 125px;

    border-radius: 50%;

    background: #e8f0fe;
    opacity: .35;
}

.integration-protocol-list > article:nth-child(2)::after {
    background: #f3e8fd;
}

.integration-protocol-list > article:nth-child(3)::after {
    background: #e6f4ea;
}

.integration-protocol-list > article:nth-child(4)::after {
    background: #fef7e0;
}

.integration-protocol-list strong {
    position: relative;
    z-index: 1;

    display: block;

    margin-bottom: 12px;

    color: #202124 !important;

    font-size: 21px !important;
    line-height: 1.2;
    font-weight: 500 !important;
}

.integration-protocol-list p {
    position: relative;
    z-index: 1;

    max-width: 245px;
    margin: 0 !important;

    color: #5f6368 !important;

    font-size: 13px !important;
    line-height: 1.6 !important;
}

@media (max-width: 1050px) {

    .integration-protocol-list {
        grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    }

}

@media (max-width: 620px) {

    .integration-protocols-section {
        padding: 78px 0 84px !important;
    }

    .integration-protocol-list {
        grid-template-columns: 1fr !important;
    }

    .integration-protocol-list > article {
        min-height: auto !important;
    }

}

/* =========================================================
   OVERVIEW — project CTA
   ========================================================= */

.integration-cta-section {
    padding: 112px 0 126px !important;
    background: #fff !important;
}

.integration-page:not([data-page-mode="overview"])
.integration-cta-section {
    display: none;
}

.integration-cta {
    position: relative;

    min-height: 390px;

    padding: 62px 64px !important;

    display: grid !important;
    grid-template-columns: minmax(0,1fr) auto;
    gap: 70px;
    align-items: end;

    overflow: hidden;

    border: 0 !important;
    border-radius: 34px !important;

    background:
        linear-gradient(
            135deg,
            #f1f5fb 0%,
            #f8fafd 58%,
            #eef4ff 100%
        ) !important;
}

/* мягкая декоративная форма */

.integration-cta::after {
    content: "";

    position: absolute;

    right: -100px;
    top: -150px;

    width: 430px;
    height: 430px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(66,133,244,.12) 0,
            rgba(66,133,244,.04) 48%,
            transparent 70%
        );

    pointer-events: none;
}

.integration-cta > div {
    position: relative;
    z-index: 1;

    max-width: 820px;
}

.integration-cta .integration-kicker {
    margin-bottom: 18px;
}

.integration-cta h2 {
    max-width: 830px;
    margin: 0 0 24px !important;

    color: #202124 !important;

    font-size: clamp(42px, 4.5vw, 68px) !important;
    line-height: .98 !important;
    font-weight: 500 !important;
    letter-spacing: -.045em !important;
}

.integration-cta p {
    max-width: 680px;
    margin: 0 !important;

    color: #5f6368 !important;

    font-size: 16px !important;
    line-height: 1.65 !important;
}

.integration-cta-btn {
    position: relative;
    z-index: 2;

    min-width: 220px;

    padding: 16px 24px !important;

    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    border-radius: 999px !important;

    background: #0b57d0 !important;
    color: #fff !important;

    font-size: 14px !important;
    font-weight: 600 !important;

    box-shadow: none !important;

    transition:
        transform .18s ease,
        background .18s ease !important;
}

.integration-cta-btn:hover {
    transform: translateY(-2px);
    background: #0842a0 !important;
}

@media (max-width: 850px) {

    .integration-cta {
        grid-template-columns: 1fr;
        gap: 38px;

        min-height: auto;

        padding: 44px !important;
    }

    .integration-cta-btn {
        width: fit-content;
    }

}

@media (max-width: 620px) {

    .integration-cta-section {
        padding: 78px 0 88px !important;
    }

    .integration-cta {
        padding: 32px !important;
        border-radius: 26px !important;
    }

    .integration-cta h2 {
        font-size: 40px !important;
    }

}

/* =========================================================
   ISOLATED 1C FOOTER — final polish
   ========================================================= */

.onec-site-footer {
    padding: 74px 0 28px;

    background: #f8fafd;
}

.onec-site-footer__inner {
    width: min(1280px, calc(100% - 48px));
    margin: 0 auto;
}


/* blue final CTA */

.onec-footer-cta {
    position: relative;

    min-height: 360px;

    padding: 58px 62px;

    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 60px;
    align-items: end;

    overflow: hidden;

    border-radius: 34px;

    background:
        linear-gradient(
            135deg,
            #0b57d0 0%,
            #1a5fd4 55%,
            #2167d9 100%
        );
}

.onec-footer-cta::before {
    content: "";

    position: absolute;

    width: 520px;
    height: 520px;

    right: -180px;
    top: -280px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,.14) 0%,
            rgba(255,255,255,.04) 46%,
            transparent 70%
        );

    pointer-events: none;
}

.onec-footer-cta::after {
    content: "";

    position: absolute;

    width: 300px;
    height: 300px;

    left: 42%;
    bottom: -220px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,.08) 0%,
            transparent 70%
        );

    pointer-events: none;
}

.onec-footer-cta > div {
    position: relative;
    z-index: 1;

    max-width: 760px;
}

.onec-footer-cta__label {
    margin-bottom: 24px;

    color: rgba(255,255,255,.7);

    font-size: 13px;
    font-weight: 600;
    letter-spacing: .02em;
}

.onec-footer-cta h2 {
    margin: 0 0 24px;

    color: #fff;

    font-size: clamp(48px, 5.2vw, 76px);
    line-height: .96;
    font-weight: 500;
    letter-spacing: -.05em;
}

.onec-footer-cta p {
    max-width: 680px;
    margin: 0;

    color: rgba(255,255,255,.78);

    font-size: 16px;
    line-height: 1.6;
}


/* CTA button */

.onec-footer-cta__button {
    position: relative;
    z-index: 2;

    min-width: 225px;

    padding: 16px 22px;

    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;

    border: 0;
    border-radius: 999px;

    background: #fff;
    color: #0b57d0;

    font-size: 14px;
    font-weight: 600;

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        background .18s ease;
}

.onec-footer-cta__button:hover {
    transform: translateY(-2px);

    background: #f8fbff;

    box-shadow:
        0 10px 28px rgba(0,0,0,.12);
}

.onec-footer-cta__button svg {
    width: 20px;
    height: 20px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;

    transition: transform .18s ease;
}

.onec-footer-cta__button:hover svg {
    transform: translateX(3px);
}


/* main footer */

.onec-site-footer__main {
    padding: 72px 0 64px;

    display: grid;
    grid-template-columns: 1.55fr .7fr .8fr .8fr;
    gap: 58px;

    align-items: start;
}

.onec-site-footer__brand {
    max-width: 330px;
}

.onec-site-footer__logo {
    display: inline-flex;
    margin-bottom: 26px;
}

.onec-site-footer__logo svg {
    width: 145px;
    height: 40px;
}

.onec-site-footer__brand p {
    margin: 0;

    max-width: 310px;

    color: #5f6368;

    font-size: 14px;
    line-height: 1.65;
}


/* columns */

.onec-site-footer__column {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    gap: 14px;
}

.onec-site-footer__column strong {
    margin-bottom: 8px;

    color: #202124;

    font-size: 13px;
    font-weight: 600;
}

.onec-site-footer__column a {
    position: relative;

    color: #5f6368;

    font-size: 14px;
    line-height: 1.35;

    text-decoration: none;

    transition:
        color .16s ease,
        transform .16s ease;
}

.onec-site-footer__column a:hover {
    color: #0b57d0;
    transform: translateX(2px);
}


/* bottom */

.onec-site-footer__bottom {
    padding: 26px 0 0;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;

    border-top: 1px solid #dadce0;

    color: #80868b;

    font-size: 12px;
}

.onec-site-footer__bottom > div {
    display: flex;
    align-items: center;
    gap: 30px;
}

.onec-site-footer__bottom a {
    color: #80868b;
    text-decoration: none;

    transition: color .16s ease;
}

.onec-site-footer__bottom a:hover {
    color: #0b57d0;
}


/* responsive */

@media (max-width: 980px) {

    .onec-footer-cta {
        grid-template-columns: 1fr;
        gap: 42px;

        min-height: auto;
    }

    .onec-footer-cta__button {
        width: fit-content;
    }

    .onec-site-footer__main {
        grid-template-columns: 1.3fr 1fr 1fr;
    }

    .onec-site-footer__brand {
        grid-column: 1 / -1;
        max-width: 520px;
    }

}

@media (max-width: 680px) {

    .onec-site-footer {
        padding-top: 44px;
    }

    .onec-site-footer__inner {
        width: min(100% - 28px, 1280px);
    }

    .onec-footer-cta {
        padding: 38px 30px;
        border-radius: 26px;
    }

    .onec-footer-cta h2 {
        font-size: 44px;
    }

    .onec-site-footer__main {
        padding: 54px 0 46px;

        grid-template-columns: 1fr 1fr;
        gap: 42px 28px;
    }

    .onec-site-footer__brand {
        grid-column: 1 / -1;
    }

    .onec-site-footer__bottom {
        flex-direction: column;
        align-items: flex-start;
    }

    .onec-site-footer__bottom > div {
        flex-wrap: wrap;
        gap: 14px 24px;
    }

}


/* =========================================================
   FINAL FOOTER SPACING TWEAK
   ========================================================= */

/* CTA чуть компактнее */
.onec-footer-cta {
    min-height: 330px !important;
    padding-top: 52px !important;
    padding-bottom: 52px !important;
}

/* кнопку чуть выше относительно текста */
.onec-footer-cta__button {
    transform: translateY(-8px);
}

.onec-footer-cta__button:hover {
    transform: translateY(-10px);
}

/* меньше воздуха между CTA и основным футером */
.onec-site-footer__main {
    padding-top: 56px !important;
}

@media (max-width: 980px) {

    .onec-footer-cta__button {
        transform: none;
    }

    .onec-footer-cta__button:hover {
        transform: translateY(-2px);
    }

    .onec-site-footer__main {
        padding-top: 48px !important;
    }

}

/* =========================================================
   ORDER FORM — attached file state
   ========================================================= */

.onec-order-file-wrap {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.onec-order-file__selected {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;

    padding: 12px 14px;

    border-radius: 14px;

    background: #f3f8f4;

    color: #188038;

    font-size: 13px;
}

.onec-order-file__selected[hidden] {
    display: none !important;
}

.onec-order-file__name {
    min-width: 0;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.onec-order-file__remove {
    flex: 0 0 auto;

    padding: 0;

    border: 0;

    background: transparent;

    color: #5f6368;

    font-size: 12px;

    cursor: pointer;
}

.onec-order-file__remove:hover {
    color: #c5221f;
}


/* =========================================================
   ORDER FORM — compact attached file UI
   ========================================================= */

.onec-order-file-wrap {
    min-height: 42px;

    display: flex !important;
    align-items: center;
    gap: 16px !important;

    flex-wrap: nowrap;
}

.onec-order-file {
    min-width: 0;

    display: inline-flex !important;
    align-items: center;
    gap: 10px;

    cursor: pointer;
}

.onec-order-file input[type="file"] {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    opacity: 0 !important;
    pointer-events: none;
}

.onec-order-file__icon {
    width: 30px;
    height: 30px;

    flex: 0 0 30px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid #dadce0;
    border-radius: 50%;

    background: #fff;
    color: #0b57d0;
}

.onec-order-file__icon svg {
    width: 16px;
    height: 16px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.onec-order-file__label {
    color: #5f6368;

    font-size: 13px;
    line-height: 1.3;
}

.onec-order-file__selected {
    min-width: 0;
    flex: 1;

    padding: 0 !important;

    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;

    background: transparent !important;
    border-radius: 0 !important;

    color: #188038;

    font-size: 13px;
}

.onec-order-file__selected[hidden] {
    display: none !important;
}

.onec-order-file__name {
    max-width: 340px;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.onec-order-file__name::before {
    content: "✓ ";

    font-weight: 700;
}

.onec-order-file__remove {
    padding: 0 !important;

    border: 0 !important;
    background: none !important;

    color: #80868b !important;

    font-size: 12px !important;
}

.onec-order-file__remove:hover {
    color: #c5221f !important;
}

@media (max-width: 700px) {

    .onec-order-file-wrap {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px !important;
    }

    .onec-order-file__selected {
        width: 100%;
        justify-content: space-between;
    }

}

/* =========================================================
   ORDER FORM — final file row + modal fit
   ========================================================= */

/* убираем старую круглую иконку с плюсом */
.onec-order-file::before,
.onec-order-file::after {
    content: none !important;
    display: none !important;
}

/* оставляем только новую скрепку */
.onec-order-file {
    padding-left: 0 !important;
}

.onec-order-file__icon {
    margin: 0 !important;
}

/* выбранный файл держим в той же строке */
.onec-order-file-wrap {
    min-height: 32px !important;
    gap: 14px !important;
}

.onec-order-file__selected {
    flex: 0 1 auto !important;
    justify-content: flex-start !important;
    gap: 10px !important;
}

/* чуть уплотняем форму, чтобы кнопка полностью вошла */
.onec-order-form__content {
    row-gap: 14px !important;
}

.onec-order-field textarea {
    min-height: 132px !important;
    height: 132px !important;
}

.onec-order-submit {
    min-height: 64px !important;
    height: 64px !important;
}

/* небольшой запас снизу внутри модалки */
.onec-order-modal {
    padding-bottom: 18px !important;
}

@media (max-height: 850px) {

    .onec-order-field textarea {
        min-height: 112px !important;
        height: 112px !important;
    }

    .onec-order-form__content {
        row-gap: 11px !important;
    }

    .onec-order-submit {
        min-height: 58px !important;
        height: 58px !important;
    }

}

/* =========================================================
   ORDER FORM — file left align + safe bottom spacing
   ========================================================= */

/* файл всегда начинается от левого края формы */
.onec-order-file-wrap {
    width: 100% !important;

    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;

    gap: 16px !important;

    margin: 0 !important;
    padding: 0 !important;

    text-align: left !important;
}

.onec-order-file {
    width: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    flex: 0 0 auto !important;
}

.onec-order-file__selected {
    width: auto !important;
    max-width: 420px;

    margin: 0 !important;
    padding: 0 !important;

    flex: 0 1 auto !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    gap: 10px !important;

    text-align: left !important;
}

.onec-order-file__selected[hidden] {
    display: none !important;
}

/* сам контент модалки получает нормальный запас снизу */
html body.onec-design-page
#modal-order.onec-order-modal.fancybox__content {
    max-height: calc(100dvh - 48px) !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;

    padding-bottom: 30px !important;
}

/* кнопка больше не прилипает к нижней кромке */
.onec-order-submit {
    margin-bottom: 18px !important;
}

/* ещё немного уменьшаем вертикальную высоту формы */
.onec-order-field textarea {
    min-height: 118px !important;
    height: 118px !important;
}

.onec-order-form__content {
    row-gap: 11px !important;
}

@media (max-height: 850px) {

    html body.onec-design-page
    #modal-order.onec-order-modal.fancybox__content {
        padding-bottom: 24px !important;
    }

    .onec-order-field textarea {
        min-height: 100px !important;
        height: 100px !important;
    }

    .onec-order-submit {
        height: 56px !important;
        min-height: 56px !important;

        margin-bottom: 14px !important;
    }

}

/* =========================================================
   ORDER FORM — sending state
   ========================================================= */

.onec-order-submit {
    position: relative;
}

.onec-order-submit__arrow,
.onec-order-submit__loader {
    display: flex;
    align-items: center;
    justify-content: center;
}

.onec-order-submit__loader {
    display: none;

    gap: 5px;
}

.onec-order-submit__loader i {
    width: 6px;
    height: 6px;

    border-radius: 50%;

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

    animation: onecSubmitPulse .95s infinite ease-in-out;
}

.onec-order-submit__loader i:nth-child(2) {
    animation-delay: .12s;
}

.onec-order-submit__loader i:nth-child(3) {
    animation-delay: .24s;
}

.onec-order-submit.is-sending {
    cursor: wait !important;

    opacity: .94;
}

.onec-order-submit.is-sending .onec-order-submit__arrow {
    display: none;
}

.onec-order-submit.is-sending .onec-order-submit__loader {
    display: flex;
}

.onec-order-submit:disabled {
    pointer-events: none;
}

@keyframes onecSubmitPulse {

    0%,
    60%,
    100% {
        transform: translateY(0);
        opacity: .45;
    }

    30% {
        transform: translateY(-5px);
        opacity: 1;
    }

}

/* Submit loader — larger and more visible */
.onec-order-submit__loader {
    gap: 8px !important;
}

.onec-order-submit__loader i {
    width: 10px !important;
    height: 10px !important;

    background: #fff !important;

    animation: onecSubmitPulseLarge .9s infinite ease-in-out !important;
}

.onec-order-submit__loader i:nth-child(2) {
    animation-delay: .12s !important;
}

.onec-order-submit__loader i:nth-child(3) {
    animation-delay: .24s !important;
}

@keyframes onecSubmitPulseLarge {

    0%,
    60%,
    100% {
        transform: translateY(0) scale(.8);
        opacity: .45;
    }

    30% {
        transform: translateY(-7px) scale(1.15);
        opacity: 1;
    }

}


/* =========================================================
   ORDER MODAL — mobile layout fix
   ========================================================= */

@media (max-width: 760px) {

    html body.onec-design-page
    #modal-order.onec-order-modal.fancybox__content {
        width: calc(100vw - 20px) !important;
        max-width: none !important;

        max-height: calc(100dvh - 20px) !important;

        margin: 10px !important;
        padding: 28px 22px 24px !important;

        overflow-y: auto !important;
        overflow-x: hidden !important;

        border-radius: 28px !important;
    }

    .onec-order-form {
        width: 100% !important;
        min-width: 0 !important;
    }

    .onec-order-form__layout {
        width: 100% !important;

        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;

        gap: 28px !important;
    }

    .onec-order-form__intro,
    .onec-order-form__content {
        width: 100% !important;
        min-width: 0 !important;

        grid-column: 1 !important;
    }

    .onec-order-form__intro {
        padding: 0 !important;
        margin: 0 !important;
    }

    .onec-order-form__intro h2 {
        margin: 12px 0 14px !important;

        font-size: 48px !important;
        line-height: .98 !important;
    }

    .onec-order-form__intro p {
        max-width: 100% !important;
        margin: 0 !important;

        font-size: 16px !important;
        line-height: 1.45 !important;
    }

    .onec-order-form__content {
        display: block !important;
    }

    .onec-order-form__grid {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;

        gap: 14px !important;
    }

    .onec-order-field,
    .onec-order-field--full {
        width: 100% !important;
        grid-column: 1 !important;
    }

    .onec-order-field input,
    .onec-order-field select,
    .onec-order-field textarea {
        width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .onec-order-field textarea {
        height: 120px !important;
        min-height: 120px !important;
    }

    .onec-order-file-wrap {
        width: 100% !important;

        margin-top: 14px !important;

        flex-wrap: wrap !important;
    }

    .onec-order-form__checks {
        width: 100% !important;

        margin-top: 18px !important;

        display: grid !important;
        grid-template-columns: 1fr !important;

        gap: 14px !important;
    }

    .onec-order-submit {
        width: 100% !important;

        margin-top: 20px !important;
        margin-bottom: 8px !important;
    }

    #modal-order .f-button.is-close-btn,
    #modal-order > .f-button {
        top: 16px !important;
        right: 16px !important;
    }

}

@media (max-width: 430px) {

    .onec-order-form__intro h2 {
        font-size: 44px !important;
    }

}

/* =========================================================
   ORDER MODAL — FINAL MOBILE LAYOUT
   Overrides all previous mobile modal rules
   ========================================================= */

@media (max-width: 760px) {

    /* сама модалка */
    html body.onec-design-page
    #modal-order.onec-order-modal.fancybox__content {
        width: calc(100vw - 16px) !important;
        max-width: calc(100vw - 16px) !important;

        height: auto !important;
        max-height: calc(100dvh - 16px) !important;

        margin: 8px !important;
        padding: 30px 22px 28px !important;

        overflow-x: hidden !important;
        overflow-y: auto !important;

        border-radius: 28px !important;

        box-sizing: border-box !important;
    }

    /* Fancybox не должен добавлять своё пространство */
    .fancybox__slide:has(#modal-order) {
        padding: 0 !important;
    }


    /* вся форма */
    html body.onec-design-page
    #modal-order .onec-order-form {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        box-sizing: border-box !important;
    }


    /* УБИРАЕМ десктопные 2 колонки полностью */
    html body.onec-design-page
    #modal-order .onec-order-form__layout {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;

        display: flex !important;
        flex-direction: column !important;

        gap: 28px !important;

        margin: 0 !important;
        padding: 0 !important;

        box-sizing: border-box !important;
    }


    /* вступление */
    html body.onec-design-page
    #modal-order .onec-order-form__intro {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        min-height: 0 !important;
        height: auto !important;

        margin: 0 !important;
        padding: 0 46px 0 0 !important;

        display: block !important;

        box-sizing: border-box !important;
    }

    html body.onec-design-page
    #modal-order .onec-order-form__eyebrow {
        margin: 0 0 16px !important;

        font-size: 15px !important;
        line-height: 1.2 !important;
    }

    html body.onec-design-page
    #modal-order .onec-order-form__intro h2 {
        width: auto !important;
        max-width: 100% !important;

        margin: 0 0 16px !important;

        font-size: clamp(42px, 12vw, 58px) !important;
        line-height: .96 !important;
        letter-spacing: -.045em !important;

        overflow-wrap: normal !important;
    }

    html body.onec-design-page
    #modal-order .onec-order-form__intro p {
        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;

        font-size: 16px !important;
        line-height: 1.48 !important;

        white-space: normal !important;
        overflow: visible !important;
    }


    /* правая часть формы теперь занимает всю ширину */
    html body.onec-design-page
    #modal-order .onec-order-form__content {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;

        box-sizing: border-box !important;
    }


    /* Имя / телефон / email / компания — одна колонка */
    html body.onec-design-page
    #modal-order .onec-order-form__grid {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;

        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;

        gap: 16px !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    /* каждое поле */
    html body.onec-design-page
    #modal-order .onec-order-field,
    html body.onec-design-page
    #modal-order .onec-order-field--full {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        grid-column: 1 / -1 !important;

        display: block !important;

        box-sizing: border-box !important;
    }

    html body.onec-design-page
    #modal-order .onec-order-field > span {
        display: block !important;

        margin: 0 0 7px !important;

        font-size: 14px !important;
        line-height: 1.25 !important;
    }


    /* реальные controls — строго 100% */
    html body.onec-design-page
    #modal-order .onec-order-field input,
    html body.onec-design-page
    #modal-order .onec-order-field select,
    html body.onec-design-page
    #modal-order .onec-order-field textarea {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;

        margin: 0 !important;

        box-sizing: border-box !important;

        font-size: 16px !important;
    }

    html body.onec-design-page
    #modal-order .onec-order-field input,
    html body.onec-design-page
    #modal-order .onec-order-field select {
        height: 58px !important;
        min-height: 58px !important;

        padding-left: 16px !important;
        padding-right: 16px !important;

        border-radius: 15px !important;
    }

    html body.onec-design-page
    #modal-order .onec-order-field textarea {
        height: 120px !important;
        min-height: 120px !important;

        padding: 15px 16px !important;

        border-radius: 15px !important;

        resize: vertical !important;
    }


    /* файл */
    html body.onec-design-page
    #modal-order .onec-order-file-wrap {
        width: 100% !important;
        max-width: none !important;

        min-height: 0 !important;

        margin: 2px 0 0 !important;
        padding: 0 !important;

        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        flex-wrap: wrap !important;

        gap: 8px 12px !important;

        box-sizing: border-box !important;
    }

    html body.onec-design-page
    #modal-order .onec-order-file {
        width: auto !important;
        max-width: 100% !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: flex-start !important;

        gap: 9px !important;
    }

    html body.onec-design-page
    #modal-order .onec-order-file__label {
        font-size: 13px !important;
    }

    html body.onec-design-page
    #modal-order .onec-order-file__selected {
        width: auto !important;
        max-width: 100% !important;

        flex: 0 1 auto !important;

        justify-content: flex-start !important;

        font-size: 13px !important;
    }


    /* чекбоксы */
    html body.onec-design-page
    #modal-order .onec-order-form__checks {
        width: 100% !important;

        margin: 4px 0 0 !important;
        padding: 0 !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;

        gap: 14px !important;
    }

    html body.onec-design-page
    #modal-order .onec-order-check {
        width: 100% !important;

        display: flex !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;

        gap: 10px !important;

        font-size: 13px !important;
        line-height: 1.4 !important;
    }

    html body.onec-design-page
    #modal-order .onec-order-check input {
        flex: 0 0 20px !important;

        width: 20px !important;
        height: 20px !important;

        margin: 0 !important;
    }


    /* submit */
    html body.onec-design-page
    #modal-order .onec-order-submit {
        width: 100% !important;

        min-height: 58px !important;
        height: 58px !important;

        margin: 6px 0 4px !important;

        padding: 0 20px !important;

        border-radius: 999px !important;

        box-sizing: border-box !important;
    }


    /* close */
    html body.onec-design-page
    #modal-order .f-button.is-close-btn,
    html body.onec-design-page
    #modal-order > .f-button {
        position: absolute !important;

        top: 14px !important;
        right: 14px !important;

        width: 46px !important;
        height: 46px !important;

        z-index: 20 !important;
    }

}


/* совсем узкие iPhone */
@media (max-width: 390px) {

    html body.onec-design-page
    #modal-order.onec-order-modal.fancybox__content {
        padding-left: 18px !important;
        padding-right: 18px !important;
    }

    html body.onec-design-page
    #modal-order .onec-order-form__intro h2 {
        font-size: 42px !important;
    }

    html body.onec-design-page
    #modal-order .onec-order-form__intro p {
        font-size: 15px !important;
    }

}

/* Mobile form — equal bottom spacing */
@media (max-width: 760px) {

    html body.onec-design-page
    #modal-order.onec-order-modal.fancybox__content {
        padding-bottom: 36px !important;
    }

    html body.onec-design-page
    #modal-order .onec-order-submit {
        margin-bottom: 0 !important;
    }

}

/* Mobile form — lift submit button */
@media (max-width: 760px) {

    html body.onec-design-page
    #modal-order .onec-order-submit {
        margin-bottom: 22px !important;
    }

}

/* Mobile form — final submit position */
@media (max-width: 760px) {

    html body.onec-design-page
    #modal-order .onec-order-submit {
        position: relative !important;
        top: -18px !important;
    }

}

/* =========================================================
   DOCS — FINAL MOBILE LAYOUT
   ========================================================= */

@media (max-width: 760px) {

    html,
    body.onec-design-page {
        max-width: 100%;
        overflow-x: hidden !important;
    }

    /* вся документация строго в viewport */
    .integration-docs-section,
    .integration-docs-section .container {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin-left: auto !important;
        margin-right: auto !important;

        box-sizing: border-box !important;
    }

    .integration-docs-section {
        padding: 48px 0 80px !important;
        overflow: hidden !important;
    }

    /* убираем desktop 2-column layout */
    .integration-docs-layout {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        display: flex !important;
        flex-direction: column !important;

        gap: 30px !important;

        grid-template-columns: none !important;
    }

    /* левая навигация превращается в горизонтальную */
    .integration-docs-nav {
        position: relative !important;
        top: auto !important;
        left: auto !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow: visible !important;

        border: 0 !important;
    }

    .integration-docs-nav > strong,
    .integration-docs-nav > h3 {
        display: block !important;
        margin: 0 0 14px !important;
    }

    .integration-docs-nav ul,
    .integration-docs-nav > div {
        width: 100% !important;
        max-width: 100% !important;

        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;

        gap: 8px !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;

        padding: 0 0 8px !important;
        margin: 0 !important;

        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .integration-docs-nav ul::-webkit-scrollbar,
    .integration-docs-nav > div::-webkit-scrollbar {
        display: none;
    }

    .integration-docs-nav li {
        flex: 0 0 auto !important;

        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;

        list-style: none !important;
    }

    .integration-docs-nav a {
        width: auto !important;
        min-width: max-content !important;

        display: inline-flex !important;
        align-items: center !important;

        padding: 9px 13px !important;

        border: 1px solid #dadce0 !important;
        border-radius: 999px !important;

        background: #fff !important;
        color: #5f6368 !important;

        font-size: 12px !important;
        line-height: 1 !important;

        white-space: nowrap !important;
    }

    .integration-docs-nav a.active {
        border-color: #0b57d0 !important;

        background: #e8f0fe !important;
        color: #0b57d0 !important;
    }

    /* основной текст */
    .integration-docs-content {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow: visible !important;

        box-sizing: border-box !important;
    }

    .integration-docs-content > * {
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .integration-docs-content h1,
    .integration-docs-content h2,
    .integration-docs-content h3,
    .integration-docs-content p,
    .integration-docs-content li {
        overflow-wrap: break-word !important;
        word-break: normal !important;
    }

    .integration-docs-content h1 {
        margin: 0 0 20px !important;

        font-size: 38px !important;
        line-height: 1.02 !important;
        letter-spacing: -.035em !important;
    }

    .integration-docs-content h2 {
        margin-top: 46px !important;

        font-size: 28px !important;
        line-height: 1.1 !important;
    }

    .integration-docs-content p,
    .integration-docs-content li {
        font-size: 15px !important;
        line-height: 1.6 !important;
    }

    /* любые схемы и карточки внутри docs */
    .integration-docs-content img,
    .integration-docs-content svg,
    .integration-docs-content pre,
    .integration-docs-content table {
        max-width: 100% !important;
    }

    .integration-docs-content pre,
    .integration-docs-content table {
        overflow-x: auto !important;
    }

    .integration-docs-content [class*="grid"],
    .integration-docs-content [class*="map"] {
        grid-template-columns: 1fr !important;
    }

    /* карточки общей схемы */
    .integration-docs-content article,
    .integration-docs-content [class*="card"] {
        max-width: 100% !important;
        min-width: 0 !important;

        box-sizing: border-box !important;
    }

}