/* Start:/css/ui-kit.css?178515786762383*/
/* ui-kit / SEO-landing blocks — извлечено из ui-kit/index.html */
body.ui-kit-page {
      background: #fff;
    }

    .ui-kit-shell {
      padding: 32px 0 96px;
    }

    .ui-kit-cover {
      padding: clamp(28px, 4vw, 64px) 0 clamp(24px, 4vw, 56px);
    }

    .ui-kit-cover__title {
      max-width: 10em;
      margin: 0;
      font-size: clamp(42px, 7vw, 96px);
      font-weight: var(--type-display-font-weight);
      line-height: var(--type-display-line-height);
      letter-spacing: var(--type-display-letter-spacing);
      color: var(--color-black);
    }

    .ui-kit-cover__text {
      max-width: 54em;
      margin: 24px 0 0;
      font-size: var(--font-size-md);
      line-height: 1.5;
      color: var(--color-text-muted);
    }

    .ui-kit-section {
      margin: clamp(44px, 6vw, 92px) 0;
    }

    .ui-kit-typography {
      margin: clamp(42px, 6vw, 92px) 0 clamp(52px, 7vw, 112px);
    }

    .ui-kit-typography__line {
      width: 100%;
      height: 0;
      border-top: 1px dashed rgba(0, 0, 0, .35);
      background: transparent;
    }

    .ui-kit-typography__head {
      padding: 18px 0 0;
    }

    .ui-kit-typography__eyebrow {
      margin: 0 0 8px;
      color: rgba(0, 0, 0, .48);
      font-size: 12px;
      font-weight: 800;
      line-height: 1;
      text-transform: uppercase;
      letter-spacing: .08em;
    }

    .ui-kit-typography__title {
      margin: 0;
      color: #000;
      font-size: clamp(28px, 4.2vw, 56px);
      font-weight: var(--type-display-font-weight);
      line-height: var(--type-display-line-height);
      letter-spacing: var(--type-display-letter-spacing);
    }

    .ui-kit-typography__text {
      max-width: 760px;
      margin: 12px 0 0;
      color: rgba(0, 0, 0, .62);
      font-size: clamp(16px, 1.3vw, 19px);
      font-weight: 600;
      line-height: 1.45;
    }

    .ui-kit-type-board {
      margin-top: clamp(26px, 4vw, 48px);
      border-top: 4px solid #000;
    }

    .ui-kit-type-group {
      display: grid;
      grid-template-columns: minmax(140px, .22fr) minmax(0, 1fr);
      gap: clamp(18px, 3vw, 44px);
      padding: 14px 0;
      border-bottom: 1px dashed rgba(0, 0, 0, .35);
    }

    .ui-kit-type-group__title {
      margin: 0;
      color: rgba(0, 0, 0, .45);
      font-size: 13px;
      font-weight: 800;
      line-height: 1;
      text-transform: uppercase;
      letter-spacing: .08em;
    }

    .ui-kit-type-row {
      display: grid;
      grid-template-columns: minmax(140px, .22fr) minmax(0, 1fr);
      gap: clamp(18px, 3vw, 44px);
      align-items: start;
      padding: clamp(18px, 3vw, 34px) 0;
      border-bottom: 1px dashed rgba(0, 0, 0, .22);
    }

    .ui-kit-type-row--super {
      grid-template-columns: 1fr;
    }

    .ui-kit-type-name {
      display: grid;
      gap: 8px;
      align-content: start;
      color: rgba(0, 0, 0, .45);
      font-size: 13px;
      font-weight: 800;
      line-height: 1.15;
    }

    .ui-kit-type-name span {
      color: rgba(0, 0, 0, .5);
      font-size: 12px;
      font-weight: 700;
      line-height: 1.25;
    }

    .ui-kit-type-sample {
      min-width: 0;
      color: #000;
    }

    .ui-kit-type-sample > * {
      margin: 0;
    }

    .ui-kit-type-sample .hero__title {
      max-width: 11em;
    }

    .ui-kit-type-sample .lp-card--type-sample {
      min-height: 0;
      padding: 0;
      background: transparent;
    }

    .ui-kit-type-sample.article-prose {
      margin-top: 0;
    }

    .ui-kit-type-sample.article-prose h2,
    .ui-kit-type-sample.article-prose h3 {
      margin-top: 0;
    }

    .ui-kit-type-sample .article-lead,
    .ui-kit-type-sample .article-quote {
      max-width: 760px;
    }

    .ui-kit-status {
      margin: clamp(52px, 7vw, 112px) 0 clamp(28px, 4vw, 56px);
    }

    .ui-kit-status__line {
      width: 100%;
      height: 0;
      border-top: 1px dashed rgba(0, 0, 0, .35);
      background: transparent;
    }

    .ui-kit-status__body {
      padding: 18px 0 0;
    }

    .ui-kit-status__eyebrow {
      margin: 0 0 8px;
      color: rgba(0, 0, 0, .48);
      font-size: 12px;
      font-weight: 800;
      line-height: 1;
      text-transform: uppercase;
      letter-spacing: .08em;
    }

    .ui-kit-status__title {
      margin: 0;
      color: #000;
      font-size: clamp(28px, 4.2vw, 56px);
      font-weight: var(--type-display-font-weight);
      line-height: var(--type-display-line-height);
      letter-spacing: var(--type-display-letter-spacing);
    }

    .ui-kit-status__text {
      max-width: 760px;
      margin: 12px 0 0;
      color: rgba(0, 0, 0, .62);
      font-size: clamp(16px, 1.3vw, 19px);
      font-weight: 600;
      line-height: 1.45;
    }

    .ui-kit-label {
      display: flex;
      align-items: baseline;
      gap: 10px;
      width: 100%;
      margin: 0 0 18px;
      padding: 12px 12px 0;
      border-top: 1px dashed rgba(0, 0, 0, .35);
      background: transparent;
      color: rgba(0, 0, 0, .45);
      box-sizing: border-box;
      font-size: 12px;
      font-weight: 800;
      line-height: 1.3;
      text-transform: uppercase;
      letter-spacing: .06em;
    }

    .ui-kit-label__code {
      color: rgba(0, 0, 0, .35);
      font-weight: 700;
      text-transform: none;
      letter-spacing: 0;
    }

    .ui-kit-frame {
      background: var(--color-bg);
      border: 1px solid rgba(0, 0, 0, .08);
      border-radius: 14px;
      padding: clamp(18px, 2.4vw, 34px);
      overflow: hidden;
    }

    .ui-kit-frame--plain {
      background: transparent;
      border: 0;
      border-radius: 0;
      padding: 0;
    }

    .ui-kit-frame--dark {
      background: var(--color-black);
    }

    .ui-kit-note {
      margin: 10px 0 0;
      color: var(--color-gray-400);
      font-size: 13px;
      line-height: 1.45;
    }

    .ui-kit-mini-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--grid-gap);
    }

    .ui-kit-mini-grid--3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .ui-kit-hero-contained .hero {
      padding: 0;
    }

    .ui-kit-hero-contained .hero.hero--left:has(.hero__grid),
    .ui-kit-hero-contained .hero.hero--left {
      padding-top: 0;
      padding-bottom: 0;
    }

    .ui-kit-video {
      border-radius: 10px;
    }

    .ui-kit-review-sample .reviews-track {
      overflow: visible;
      margin-inline: 0;
      padding-inline: 0;
      padding-inline-start: 0;
      scroll-padding-inline-start: 0;
    }

    .ui-kit-review-sample .review {
      width: min(100%, 620px);
    }

    .ui-kit-footer-sample .footer {
      padding: 0;
      background: transparent;
    }

    .ui-kit-footer-sample .footer .container {
      width: 100%;
    }

    .ui-kit-blog-sample .article-layout,
    .ui-kit-blog-sample .blog-index-layout {
      grid-template-columns: minmax(0, 1fr);
      padding: 0;
    }

    .ui-kit-blog-sample .offer {
      display: block;
    }

    .ui-kit-blog-sample .offer__sticky {
      position: relative;
      top: auto;
      height: 520px;
    }

    .ui-kit-offer-sample .article-layout {
      grid-template-columns: minmax(0, 1fr) 410px;
      gap: 48px;
      padding: 0;
    }

    .ui-kit-offer-sample .article-prose {
      margin-top: 24px;
    }

    .ui-kit-offer-sample .offer__sticky {
      position: relative;
      top: auto;
      height: 80vh;
      min-height: 640px;
    }

    .ui-kit-blog-sample .blog-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .ui-kit-rent-sample .rent-hero {
      padding: 0;
    }

    .ui-kit-rent-sample .rent-hero__container {
      width: 100%;
      padding-inline: var(--container-margin-x);
    }

    .ui-kit-rent-sample .rent-hero__frame {
      --rent-hero-pad-y: clamp(28px, 4vw, 54px);
      --rent-hero-pad-x: clamp(28px, 4vw, 54px);
      --rent-hero-caption-pad-bottom: clamp(24px, 3.4vw, 46px);
      min-height: 560px;
    }

    .ui-kit-service-sample .service-plate {
      min-height: 420px;
      border-radius: 8px;
    }

    .ui-kit-service-sample .service-plate__title {
      font-weight: 800;
    }

    .ui-kit-service-sample .service-plate__rule {
      border-top-width: 4px;
    }

    .ui-kit-service-sample .rent-plan__price {
      font-size: clamp(32px, 3vw, 54px);
      font-weight: 800;
      letter-spacing: -0.03em;
    }

    .ui-kit-service-sample .rent-plan__price span {
      font-size: clamp(14px, 1.1vw, 18px);
      font-weight: 800;
    }

    .ui-kit-service-sample .service-plate__desc > p:not(.rent-plan__price),
    .ui-kit-use-sample .rent-use-item p,
    .ui-kit-scope-sample .rent-scope-card p {
      color: #000;
      font-size: var(--type-copy-font-size);
      font-weight: var(--type-copy-font-weight);
      line-height: var(--type-copy-line-height);
    }

    .ui-kit-frame .case-card__desc,
    .ui-kit-frame .project-list__desc-primary,
    .ui-kit-frame .project-tile__desc,
    .ui-kit-frame .blog-card__excerpt,
    .ui-kit-frame .article-proof__text,
    .ui-kit-frame .article-faq__a,
    .ui-kit-frame .review__quote-mini {
      color: #000;
      font-size: var(--type-copy-font-size);
      font-weight: var(--type-copy-font-weight);
      line-height: var(--type-copy-line-height);
    }

    .ui-kit-blog-sample .blog-card[data-rubric="podderzhka"] .blog-card__tag,
    .ui-kit-blog-sample .blog-card[data-rubric="autstaff"] .blog-card__tag,
    .ui-kit-blog-sample .blog-card[data-rubric="magaziny"] .blog-card__tag {
      background: var(--color-black);
      color: var(--color-white);
    }

    .ui-kit-use-sample .rent-use-item h3,
    .ui-kit-use-sample .rent-use-item p {
      font-weight: 600;
    }

    .ui-kit-scope-sample .rent-scope-card {
      justify-content: space-between;
    }

    .ui-kit-scope-sample .rent-scope-card h3 {
      order: 2;
      margin-top: auto;
      font-size: clamp(28px, 3vw, 46px);
      font-weight: 700;
      line-height: 1;
    }

    .ui-kit-scope-sample .rent-scope-card p {
      order: 1;
    }

    .ui-kit-case-screen {
      min-height: min(78vh, 720px);
    }

    .ui-kit-case-screen .case-screen__frame {
      height: min(64vh, 620px);
    }

    .ui-kit-swatches {
      display: grid;
      grid-template-columns: repeat(8, minmax(0, 1fr));
      gap: 12px;
    }

    .ui-kit-swatch {
      min-height: 92px;
      border-radius: 8px;
      padding: 10px;
      display: flex;
      align-items: flex-end;
      color: var(--color-black);
      font-size: 12px;
      font-weight: 800;
      line-height: 1.15;
    }

    /* Foundations (основы дизайн-системы) */
    .ui-kit-foundations {
      margin: clamp(42px, 6vw, 92px) 0 clamp(52px, 7vw, 112px);
    }

    /* Справочные секции гайда (не блоки сайта): dashed-бокс + свои интро-стили.
       Всё внутри dashed-рамок — служебный справочник; блоки сайта идут на чистом белом. */
    .ui-kit-foundations,
    .ui-kit-typography {
      border-block: 1px dashed rgba(0, 0, 0, .35);
      padding-block: clamp(20px, 2.6vw, 36px) clamp(28px, 3.4vw, 48px);
    }

    .ui-kit-foundations .ui-kit-typography__line,
    .ui-kit-typography .ui-kit-typography__line {
      display: none;
    }

    .ui-kit-foundations .ui-kit-typography__head,
    .ui-kit-typography .ui-kit-typography__head {
      padding-top: 0;
    }

    .ui-kit-fnd {
      margin-top: clamp(28px, 4vw, 52px);
      padding-top: clamp(16px, 2.2vw, 26px);
      border-top: 1px dashed rgba(0, 0, 0, .35);
    }

    .ui-kit-fnd__head {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: clamp(16px, 2vw, 26px);
    }

    .ui-kit-fnd__title {
      margin: 0;
      color: rgba(0, 0, 0, .45);
      font-size: 13px;
      font-weight: 800;
      line-height: 1;
      text-transform: uppercase;
      letter-spacing: .08em;
    }

    .ui-kit-fnd__note {
      margin: 0;
      color: rgba(0, 0, 0, .5);
      font-size: 12px;
      font-weight: 700;
      line-height: 1.2;
      text-align: right;
    }

    .ui-kit-fnd-grid {
      display: grid;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      gap: 14px;
    }

    .ui-kit-fnd-swatch {
      display: flex;
      flex-direction: column;
      gap: 8px;
      min-width: 0;
    }

    .ui-kit-fnd-swatch__chip {
      height: 72px;
      border-radius: 8px;
      border: 1px solid rgba(0, 0, 0, .12);
    }

    .ui-kit-fnd-swatch__name {
      color: #000;
      font-size: 12px;
      font-weight: 800;
      line-height: 1.15;
      overflow-wrap: anywhere;
      word-break: normal;
    }

    .ui-kit-fnd-swatch__hex {
      color: rgba(0, 0, 0, .5);
      font-size: 11px;
      font-weight: 700;
      line-height: 1;
      text-transform: uppercase;
    }

    .ui-kit-fnd-btns {
      display: flex;
      flex-wrap: wrap;
      align-items: flex-start;
      gap: clamp(18px, 2.4vw, 32px);
    }

    .ui-kit-fnd-btn {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 12px;
    }

    .ui-kit-fnd-btn__code {
      color: rgba(0, 0, 0, .5);
      font-size: 12px;
      font-weight: 800;
      line-height: 1;
    }

    .ui-kit-scale {
      display: grid;
      gap: 12px;
    }

    .ui-kit-scale__row {
      display: grid;
      grid-template-columns: minmax(120px, 160px) 1fr;
      align-items: center;
      gap: 18px;
    }

    .ui-kit-scale__label {
      color: #000;
      font-size: 12px;
      font-weight: 800;
      line-height: 1;
    }

    .ui-kit-scale__bar {
      height: 16px;
      border-radius: 4px;
      background: var(--color-brand-orange);
    }

    .ui-kit-radius {
      display: flex;
      flex-wrap: wrap;
      gap: clamp(18px, 2.4vw, 32px);
    }

    .ui-kit-radius__item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
    }

    .ui-kit-radius__box {
      width: 96px;
      height: 96px;
      background: var(--color-gray-100);
      border: 2px solid #000;
    }

    .ui-kit-radius__name {
      color: rgba(0, 0, 0, .5);
      font-size: 12px;
      font-weight: 800;
      text-align: center;
    }

    @media (max-width: 640px) {
      .ui-kit-fnd-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .ui-kit-scale__row {
        grid-template-columns: 108px 1fr;
      }
    }


    /* ═══════════════════════════════════════════════════════════════
       LP-СЛОЙ ДИЗАЙН-СИСТЕМЫ — блоки посадочных страниц
       Один источник правды: каждая поверхность красится токенами темы.

       Темы (класс на поверхности, наследуется детьми):
         (без класса)      светлая плашка #faf8f5 — базовая
         .lp-theme--white  белая (для карточек на светлом/цветном)
         .lp-theme--dark   чёрная
         .lp-theme--accent оранжевая (бренд)
         .lp-theme--bitrix красная (тематические страницы Битрикс)
         .lp-theme--b24    бирюзовая (тематические страницы Битрикс24)

       Токены поверхности:
         --s-bg     фон поверхности
         --s-ink    основной текст
         --s-muted  вторичный текст (кикеры, подписи)
         --s-soft   вложенная мягкая поверхность (чипы, панели)
         --s-line   разделители/рамки
         --s-accent акцент внутри поверхности (цифры, маркеры)
       ═══════════════════════════════════════════════════════════════ */

    .lp-canvas {
      /* тема по умолчанию — светлые плашки на белой странице */
      --s-bg: var(--color-gray-100);
      --s-ink: #000;
      --s-muted: rgba(0, 0, 0, .58);
      --s-soft: #fff;
      --s-line: rgba(0, 0, 0, .08);
      --s-accent: var(--color-brand-orange);
      color: var(--s-ink);
      font-family: inherit;
      overflow-wrap: anywhere;
    }

    .lp-theme--white {
      --s-bg: #fff;
      --s-ink: #000;
      --s-muted: rgba(0, 0, 0, .58);
      --s-soft: var(--color-gray-100);
      --s-line: rgba(0, 0, 0, .08);
      --s-accent: var(--color-brand-orange);
    }

    .lp-theme--dark {
      --s-bg: #000;
      --s-ink: #fff;
      --s-muted: rgba(255, 255, 255, .64);
      --s-soft: rgba(255, 255, 255, .08);
      --s-line: rgba(255, 255, 255, .16);
      --s-accent: var(--color-brand-orange);
    }

    .lp-theme--accent {
      --s-bg: var(--color-brand-orange);
      --s-ink: #000;
      --s-muted: rgba(0, 0, 0, .72);
      --s-soft: rgba(255, 255, 255, .38);
      --s-line: rgba(0, 0, 0, .16);
      --s-accent: #000;
    }

    .lp-theme--bitrix {
      --s-bg: var(--color-bitrix-red);
      --s-ink: #fff;
      --s-muted: rgba(255, 255, 255, .78);
      --s-soft: rgba(255, 255, 255, .14);
      --s-line: rgba(255, 255, 255, .22);
      --s-accent: #fff;
    }

    .lp-theme--b24 {
      --s-bg: var(--color-b24-teal);
      --s-ink: #fff;
      --s-muted: rgba(255, 255, 255, .78);
      --s-soft: rgba(255, 255, 255, .16);
      --s-line: rgba(255, 255, 255, .22);
      --s-accent: #fff;
    }

    .lp-canvas *,
    .lp-canvas *::before,
    .lp-canvas *::after {
      box-sizing: border-box;
    }

    .lp-canvas a:not(.btn) {
      color: inherit;
      text-decoration: none;
    }

    /* Текстовые роли внутри lp-блоков следуют теме поверхности */
    .lp-canvas .type-kicker {
      color: var(--s-muted);
    }

    .lp-canvas .type-heading,
    .lp-canvas .type-card-title {
      color: var(--s-ink);
    }

    .lp-canvas .type-copy,
    .lp-canvas .type-small {
      color: var(--s-ink);
      font-size: var(--type-copy-font-size);
      font-weight: var(--type-copy-font-weight);
      line-height: var(--type-copy-line-height);
    }

    /* ── Базовые поверхности ─────────────────────────────────────── */

    .lp-surface {
      position: relative;
      overflow: hidden;
      border-radius: 8px;
      background: var(--s-bg);
      color: var(--s-ink);
    }

    .lp-inner {
      padding: clamp(22px, 3.8vw, 56px);
    }

    .lp-grid-1,
    .lp-grid-2,
    .lp-grid-3,
    .lp-grid-4 {
      display: grid;
      gap: 12px;
    }

    .lp-grid-1 { grid-template-columns: 1fr; }
    .lp-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lp-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .lp-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

    /* ── Карточка — универсальная плашка ─────────────────────────── */

    .lp-card {
      min-height: 140px;
      padding: clamp(18px, 2.4vw, 28px);
      border-radius: 8px;
      background: var(--s-bg);
      color: var(--s-ink);
    }

    .lp-card h3,
    .lp-card h4 {
      margin: 0;
      color: var(--s-ink);
      font-size: var(--type-card-heading-font-size);
      font-weight: var(--type-card-heading-font-weight);
      line-height: var(--type-card-heading-line-height);
      letter-spacing: var(--type-card-heading-letter-spacing);
    }

    .lp-card p:not(.type-kicker) {
      margin: 14px 0 0;
      color: var(--s-ink);
      font-size: var(--type-copy-font-size);
      font-weight: var(--type-copy-font-weight);
      line-height: var(--type-copy-line-height);
    }

    .lp-card .type-kicker {
      margin-bottom: 12px;
    }

    /* ── Чипы и списки ───────────────────────────────────────────── */

    .lp-chip-row {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .lp-chip {
      display: inline-flex;
      align-items: center;
      min-height: 34px;
      padding: 8px 12px;
      border-radius: 999px;
      background: var(--s-soft);
      color: var(--s-ink);
      font-size: 13px;
      font-weight: 800;
      line-height: 1;
    }

    /* Вариант без плашек: пункты разделены вертикальной линией */
    .lp-chip-row--divided {
      gap: 0;
    }

    .lp-chip-row--divided .lp-chip {
      position: relative;
      background: transparent;
      border-radius: 0;
      padding: 4px 18px;
    }

    .lp-chip-row--divided .lp-chip::before {
      content: "";
      position: absolute;
      left: 0;
      top: 50%;
      width: 1px;
      height: 1.1em;
      transform: translateY(-50%);
      background: var(--color-gray-400);
    }

    .lp-chip-row--divided .lp-chip:first-child {
      padding-left: 0;
    }

    .lp-chip-row--divided .lp-chip:first-child::before {
      display: none;
    }

    .lp-list {
      display: grid;
      gap: 10px;
      margin: 22px 0 0;
      padding: 0;
      list-style: none;
    }

    .lp-list li {
      display: grid;
      grid-template-columns: 18px 1fr;
      gap: 10px;
      align-items: start;
      color: var(--s-ink);
      font-size: var(--type-copy-font-size);
      font-weight: var(--type-copy-font-weight);
      line-height: var(--type-copy-line-height);
    }

    .lp-list li::before {
      content: "";
      width: 8px;
      height: 8px;
      margin-top: 6px;
      border-radius: 50%;
      background: var(--s-accent);
    }

    .lp-media {
      display: block;
      width: 100%;
      height: 100%;
      min-height: 280px;
      object-fit: cover;
      border-radius: 8px;
      background: #d9d9d4;
    }

    /* ── AI-hero с промпт-баром (тёмная поверхность) ─────────────── */

    .lp-ai-hero {
      display: grid;
      grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
      gap: clamp(22px, 4vw, 56px);
      align-items: stretch;
      min-height: 660px;
    }

    .lp-ai-hero.lp-theme--dark {
      background:
        linear-gradient(90deg, rgba(255, 174, 79, .22), transparent 48%),
        #000;
    }

    .lp-ai-hero .hero__title {
      max-width: 12em;
      color: inherit;
    }

    .lp-ai-hero__left {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 36px;
      padding: clamp(26px, 5vw, 72px);
    }

    .lp-ai-hero__prompt {
      align-self: stretch;
      padding: 14px;
      border: 1px solid var(--s-line);
      border-radius: 8px;
      background: var(--s-soft);
      backdrop-filter: blur(18px);
    }

    .lp-ai-hero__prompt-top {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 12px;
      align-items: center;
      min-height: 58px;
      padding: 14px 16px;
      border-radius: 6px;
      background: #fff;
      color: #000;
      font-size: 16px;
      line-height: 1.35;
    }

    .lp-ai-hero__send {
      display: grid;
      place-items: center;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: var(--color-brand-orange);
      color: #000;
      font-weight: 900;
      transition: transform var(--dur-fast) var(--ease-out);
    }

    .lp-ai-hero__prompt:hover .lp-ai-hero__send {
      transform: translate(2px, -2px);
    }

    .lp-ai-hero__feed {
      display: grid;
      gap: 10px;
      padding: clamp(18px, 2.6vw, 32px);
      background: var(--color-gray-100);
      color: #000;
    }

    .lp-ai-hero__feed-card {
      padding: 18px;
      border-radius: 8px;
      background: #fff;
      color: #000;
    }

    .lp-ai-hero__feed-card strong {
      display: block;
      margin-bottom: 8px;
      font-size: 18px;
      line-height: 1.1;
    }

    .lp-ai-hero__feed-card .type-small {
      color: rgba(0, 0, 0, .58);
    }

    .lp-ai-hero__feed .lp-chip {
      background: #fff;
    }

    /* ── Bento-сетка ─────────────────────────────────────────────── */

    .lp-bento {
      display: grid;
      grid-template-columns: 1.15fr .85fr 1fr;
      grid-auto-rows: minmax(190px, auto);
      gap: 12px;
    }

    .lp-bento .lp-card--feature {
      --s-bg: var(--plate-neutral);
      --s-ink: var(--color-black);
      --s-muted: rgba(0, 0, 0, .58);
      --s-accent: var(--color-black);
      grid-row: span 2;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      min-height: 420px;
      background: var(--plate-neutral);
    }

    .lp-bento .lp-card:not(.lp-card--feature) {
      --s-bg: var(--plate-neutral);
      --s-ink: var(--color-black);
      --s-muted: rgba(0, 0, 0, .58);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 24px;
      background: var(--plate-neutral);
    }

    .lp-bento .lp-card:not(.lp-card--feature) p:not(.type-kicker) {
      order: 1;
      margin: 0;
      color: var(--s-muted);
    }

    .lp-bento .lp-card:not(.lp-card--feature) h3 {
      order: 2;
      margin-top: auto;
    }

    .lp-bento__number {
      display: block;
      margin: 0 0 48px;
      color: var(--s-muted);
      font-size: clamp(64px, 10vw, 148px);
      font-weight: 650;
      line-height: .8;
      letter-spacing: 0;
    }

    /* ── Метрическая полоса ──────────────────────────────────────── */

    .lp-metric-strip {
      display: grid;
      grid-template-columns: 1.3fr repeat(3, 1fr);
      gap: 12px;
      background: transparent;
    }

    .lp-metric-strip > div {
      display: flex;
      flex-direction: column;
      min-height: 220px;
      padding: clamp(20px, 3vw, 36px);
      border-radius: 8px;
      background: var(--s-bg);
      color: var(--s-ink);
    }

    /* Текст сверху серым, цифра прижата к низу чёрным */
    .lp-metric-strip strong {
      display: block;
      order: 2;
      margin-top: auto;
      color: var(--s-ink);
      font-size: clamp(38px, 5vw, 72px);
      font-weight: 650;
      line-height: .88;
      letter-spacing: 0;
    }

    .lp-metric-strip span {
      display: block;
      order: 1;
      margin-bottom: 14px;
      color: var(--s-muted);
      font-size: var(--type-copy-font-size);
      font-weight: var(--type-copy-font-weight);
      line-height: var(--type-copy-line-height);
    }

    /* ── Сравнение до/после ──────────────────────────────────────── */

    .lp-compare {
      display: grid;
      grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
      gap: 12px;
    }

    .lp-compare__summary {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 24px;
      min-height: 480px;
      padding: clamp(24px, 3.8vw, 48px);
      border-radius: 8px;
      background: var(--s-bg);
      color: var(--s-ink);
    }

    .lp-compare__panes {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }

    .lp-compare__pane {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 24px;
      min-height: 480px;
      padding: clamp(20px, 3vw, 36px);
      border-radius: 8px;
      background: var(--s-bg);
      color: var(--s-ink);
    }

    /* Заметные плашки-лейблы «До» / «После» */
    .lp-compare__pane .type-kicker {
      display: inline-flex;
      align-items: center;
      width: fit-content;
      min-height: 34px;
      margin-bottom: 18px;
      padding: 8px 16px;
      border-radius: 999px;
      background: var(--color-black);
      color: var(--color-white);
    }






    .lp-tabs__nav span.is-active,


    /* ── Калькулятор ─────────────────────────────────────────────── */

    .lp-calculator {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(280px, .72fr);
      gap: 12px;
    }

    .lp-calc-field {
      display: grid;
      gap: 10px;
      padding: 18px;
      border-radius: 8px;
      background: var(--s-bg);
      color: var(--s-ink);
    }

    .lp-calc-field span {
      color: var(--s-muted);
      font-size: 13px;
      font-weight: 800;
    }

    .lp-calc-field strong {
      font-size: clamp(38px, 5vw, 72px);
      font-weight: 650;
      line-height: .9;
      letter-spacing: 0;
    }

    .lp-slider {
      height: 8px;
      border-radius: 999px;
      background: linear-gradient(90deg, var(--color-brand-orange) 0 62%, #e8e8e8 62% 100%);
    }

    .lp-calculator__result {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 24px;
      min-height: 100%;
      padding: clamp(22px, 3vw, 36px);
      border-radius: 8px;
      background: var(--s-bg);
      color: var(--s-ink);
    }

    .lp-calculator__result strong {
      display: block;
      margin-top: 18px;
      color: var(--s-accent);
      font-size: clamp(38px, 5vw, 72px);
      font-weight: 650;
      line-height: .9;
      letter-spacing: 0;
    }

    /* ── Горизонтальный процесс (таймлайн) ───────────────────────── */

    .lp-timeline {
      position: relative;
      --lp-timeline-pad: clamp(18px, 2.4vw, 28px);
      --lp-timeline-gap: clamp(10px, 1vw, 14px);
      --lp-process-dash: 16px;
      --lp-process-dash-gap: 8px;
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 12px;
    }

    .lp-timeline__item {
      position: relative;
      min-height: 280px;
      padding: var(--lp-timeline-pad) 0;
      background: transparent;
      color: var(--s-ink);
    }

    .lp-timeline__item:not(:last-child)::after {
      content: "";
      position: absolute;
      top: calc(var(--lp-timeline-pad) + 21px);
      left: calc(42px + var(--lp-timeline-gap));
      right: calc(0px - var(--lp-timeline-gap) - 1px);
      height: 3px;
      background: repeating-linear-gradient(90deg, var(--color-gray-400) 0 var(--lp-process-dash), transparent var(--lp-process-dash) calc(var(--lp-process-dash) + var(--lp-process-dash-gap)));
      transform: translateY(-50%);
      z-index: 1;
      pointer-events: none;
    }

    .lp-timeline__item strong {
      position: relative;
      z-index: 2;
      display: block;
      width: 42px;
      height: 42px;
      margin-bottom: 36px;
      border-radius: 50%;
      background: var(--color-brand-orange);
      color: #000;
      font-size: 14px;
      line-height: 42px;
      text-align: center;
    }

    .lp-timeline__item h3 {
      margin: 0;
      color: var(--s-ink);
      font-size: var(--type-card-heading-font-size);
      font-weight: var(--type-card-heading-font-weight);
      line-height: var(--type-card-heading-line-height);
      letter-spacing: var(--type-card-heading-letter-spacing);
    }

    .lp-timeline__item p {
      margin-top: 14px;
    }

    /* ── Вертикальный процесс ────────────────────────────────────── */

    .lp-steps-vertical {
      --lp-step-v-pad: clamp(18px, 2.4vw, 28px);
      --lp-step-v-gap: clamp(10px, 1vw, 14px);
      --lp-process-dash: 16px;
      --lp-process-dash-gap: 8px;
      display: grid;
      gap: 0;
      padding: 0;
      background: transparent;
    }

    .lp-step-v {
      position: relative;
      display: grid;
      grid-template-columns: 42px minmax(0, 1fr);
      gap: clamp(18px, 3vw, 40px);
      align-items: start;
      min-height: 168px;
      padding: var(--lp-step-v-pad) 0;
    }

    .lp-step-v:not(:last-child)::after {
      content: "";
      position: absolute;
      top: calc(var(--lp-step-v-pad) + 42px + var(--lp-step-v-gap));
      bottom: calc(var(--lp-step-v-gap) - var(--lp-step-v-pad) - 1px);
      left: 21px;
      width: 3px;
      background: repeating-linear-gradient(180deg, var(--color-gray-400) 0 var(--lp-process-dash), transparent var(--lp-process-dash) calc(var(--lp-process-dash) + var(--lp-process-dash-gap)));
      transform: translateX(-50%);
      z-index: 1;
      pointer-events: none;
    }

    .lp-step-v__num {
      position: relative;
      z-index: 2;
      display: grid;
      place-items: center;
      width: 42px;
      height: 42px;
      border-radius: 50%;
      background: #000;
      color: #fff;
      font-size: 14px;
      font-weight: 900;
      line-height: 1;
    }

    .lp-step-v h3 {
      margin: 0;
      color: var(--s-ink);
      font-size: var(--type-card-heading-font-size);
      font-weight: var(--type-card-heading-font-weight);
      line-height: var(--type-card-heading-line-height);
      letter-spacing: var(--type-card-heading-letter-spacing);
    }

    .lp-step-v p {
      max-width: 680px;
      margin: 12px 0 0;
      color: var(--s-muted);
      font-size: var(--type-copy-font-size);
      font-weight: var(--type-copy-font-weight);
      line-height: var(--type-copy-line-height);
    }

    /* ── FAQ-аккордеон ───────────────────────────────────────────── */

    .lp-faq {
      display: grid;
      gap: 0;
    }

    .lp-faq details {
      border-top: 4px solid #000;
      background: transparent;
    }

    .lp-faq details:last-child {
      border-bottom: 4px solid #000;
    }

    .lp-faq summary {
      display: grid;
      grid-template-columns: minmax(0, 1fr) clamp(32px, 3.6vw, 48px);
      align-items: center;
      gap: 24px;
      cursor: pointer;
      padding: clamp(22px, 3vw, 36px) 0;
      color: #000;
      font-size: clamp(20px, 2.4vw, 34px);
      font-weight: 650;
      line-height: 1.05;
      list-style: none;
    }

    .lp-faq summary::-webkit-details-marker {
      display: none;
    }

    .lp-faq summary::before,
    .lp-faq summary::after {
      content: "";
      grid-column: 2;
      grid-row: 1;
      align-self: center;
      justify-self: center;
      width: clamp(20px, 2.6vw, 34px);
      height: 4px;
      border-radius: 999px;
      background: #000;
      transform-origin: center;
      transition: transform .26s var(--ease-out), opacity .2s ease;
    }

    .lp-faq summary::before {
      transform: rotate(90deg) scaleX(1);
    }

    .lp-faq details[open] summary::before {
      opacity: 0;
      transform: rotate(0deg) scaleX(.2);
    }

    .lp-faq p {
      margin: 0;
      max-width: 780px;
      padding: 0 0 clamp(24px, 3vw, 40px);
      color: #000;
      font-size: var(--type-copy-font-size);
      font-weight: var(--type-copy-font-weight);
      line-height: var(--type-copy-line-height);
    }

    /* ── Сценарии клиента (personas) ─────────────────────────────── */

    .lp-personas {
      display: grid;
      grid-template-columns: .72fr 1.28fr;
      gap: 12px;
    }

    .lp-personas__rail {
      display: grid;
      gap: 8px;
    }

    .lp-personas__rail span {
      display: flex;
      align-items: center;
      min-height: 62px;
      padding: 16px;
      border-radius: 8px;
      background: var(--s-bg);
      color: var(--s-muted);
      font-size: 15px;
      font-weight: 850;
      transition: color var(--dur-fast) ease;
    }

    .lp-personas__rail span:hover {
      color: var(--s-ink);
    }

    .lp-personas__rail span:first-child {
      background: #000;
      color: #fff;
    }



    .lp-badge {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      min-height: 170px;
      padding: 18px;
      border: 1px solid var(--s-line);
      border-radius: 8px;
      background: var(--s-soft);
      color: var(--s-ink);
    }

    .lp-badge small {
      color: var(--s-muted);
      font-size: 12px;
      font-weight: 800;
      text-transform: uppercase;
    }




    /* ── Матрица функций ─────────────────────────────────────────── */

    .lp-matrix-scroll {
      max-width: 100%;
      overflow-x: auto;
      border-radius: 0;
      background: transparent;
    }

    .lp-matrix {
      width: 100%;
      min-width: 560px;
      border-collapse: collapse;
      overflow: visible;
      border-radius: 0;
      font-size: 16px;
    }

    .lp-matrix th,
    .lp-matrix td {
      padding: 14px;
      border: 0;
      text-align: left;
      vertical-align: top;
      font-size: 16px;
      line-height: 1.35;
    }

    .lp-matrix th {
      background: var(--color-black);
      color: var(--color-white);
      font-weight: 700;
    }

    .lp-matrix th + th {
      border-left: 4px solid var(--color-white);
    }

    .lp-matrix td + td {
      border-left: 4px solid var(--color-black);
    }

    .lp-matrix td:not(:first-child) {
      text-align: center;
      vertical-align: middle;
    }

    .lp-matrix__dot {
      display: inline-block;
      width: 14px;
      height: 14px;
      border-radius: var(--radius-full);
      background: var(--color-brand-orange);
      vertical-align: middle;
    }

    .lp-matrix__dash {
      color: var(--color-gray-400);
      font-weight: 700;
    }

    /* Матрица «что входит» на посадочных: без чёрной шапки, 3/4 ширины, крупнее текст */
    .lp-matrix-scroll--plain {
      max-width: 75%;
    }

    .lp-matrix-scroll--plain .lp-matrix {
      min-width: 0;
      font-size: 18px;
    }

    .lp-matrix-scroll--plain .lp-matrix th,
    .lp-matrix-scroll--plain .lp-matrix td {
      font-size: 18px;
    }

    .lp-matrix-scroll--plain .lp-matrix th {
      background: transparent;
      color: var(--color-black);
      font-weight: 700;
    }

    .lp-matrix-scroll--plain .lp-matrix th + th {
      border-left-color: var(--color-black);
    }

    @media (max-width: 767px) {
      .lp-matrix-scroll--plain {
        max-width: 100%;
      }
    }

    /* ── Посадочные: ритм секций и заголовков ────────────────────── */

    /* секции с lp-блоками: умеренные вертикальные отступы */
    .section:has(> .container.lp-canvas) {
      padding-block: clamp(44px, 5vw, 64px);
    }

    /* лид «со стеклом» перед lp-секцией: убрать гигантский нижний зазор */
    .section--lead-glass:has(+ .section > .container.lp-canvas) {
      padding-bottom: clamp(44px, 5vw, 64px);
    }

    .lp-page .section--lead-glass.section--sm:has(+ .section--cta-line > .container) {
      padding-bottom: clamp(24px, 2.5vw, 32px);
    }

    /* заголовок секции: прижат к верху секции, чёткий отступ до блока */
    .lp-canvas .section-title {
      margin-top: clamp(28px, 4.5vw, 56px);
      margin-bottom: 0;
    }

    .lp-canvas .section-title .section-title__heading {
      margin: 0 0 clamp(36px, 4.5vw, 56px);
      font-weight: var(--font-weight-semibold);
    }

    .lp-canvas .section-title .section-title__heading.type-super,
    .section--reviews .reviews-head__title.type-super {
      font-size: var(--type-super-font-size);
      font-weight: var(--type-super-font-weight);
      line-height: var(--type-super-line-height);
      letter-spacing: var(--type-super-letter-spacing);
    }

    .support-hero .rent-hero__caption--full {
      width: 75%;
      justify-self: start;
    }

    /* вводный абзац секции: после заголовка, перед компонентом */
    .lp-canvas .section-title:has(+ .section-intro) .section-title__heading {
      margin-bottom: clamp(64px, 7vw, 96px);
    }

    .lp-canvas .section-title:has(+ .support-prose) .section-title__heading {
      margin-bottom: clamp(64px, 7vw, 96px);
    }

    .lp-canvas .section-intro,
    .support-prose {
      max-width: 64ch;
      margin: 0 0 clamp(48px, 5vw, 72px);
      font-size: clamp(18px, 1.55vw, 22px);
      font-weight: 500;
      line-height: 1.45;
    }

    .support-prose:last-child {
      margin-bottom: 0;
    }

    .support-prose p {
      margin: 0;
    }

    .support-prose p + p {
      margin-top: clamp(16px, 1.4vw, 18px);
    }

    .support-prose > p + .lp-steps-vertical {
      margin-top: clamp(48px, 5vw, 72px);
    }

    .support-prose .lp-steps-vertical + p {
      margin-top: clamp(80px, 8vw, 112px);
    }

    /* ── Ценовая таблица-вилка проектов ──────────────────────────── */

    .lp-price-table td:first-child {
      font-weight: 700;
    }

    .lp-price-table td:not(:first-child) {
      text-align: left;
      vertical-align: top;
    }

    .lp-price-table td:nth-child(3),
    .lp-price-table th:nth-child(3),
    .lp-price-table td:nth-child(4),
    .lp-price-table th:nth-child(4) {
      white-space: nowrap;
    }

    .lp-price-table__sum {
      font-weight: 700;
    }

    .lp-price-table__note {
      margin-top: var(--space-4);
      color: var(--color-text-muted);
    }

    /* ── Сравнение альтернатив (матрица с выделенной колонкой) ───── */

    .lp-matrix--alt th.is-us {
      background: var(--color-brand-orange);
      color: var(--color-black);
    }

    .lp-matrix--alt td.is-us {
      background: var(--color-gray-100);
      font-weight: 600;
    }

    /* ── Стек проблем ────────────────────────────────────────────── */

    .lp-stack {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 12px;
    }

    .lp-stack .lp-card {
      display: flex;
      flex-direction: column;
      min-height: 310px;
    }

    .lp-stack .lp-card h3 {
      margin-top: auto;
      font-size: clamp(20px, 2vw, 30px);
      font-weight: 800;
      line-height: 1.05;
    }

    .lp-stack .lp-card p:not(.type-kicker) {
      margin: 14px 0 24px;
    }









    /* ── Цитата-плашка ───────────────────────────────────────────── */

    .lp-quote-plaque {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      gap: clamp(22px, 4vw, 64px);
      align-items: center;
      min-height: 440px;
      padding: clamp(28px, 5vw, 72px);
      padding-right: clamp(48px, 10vw, 200px);
      border-radius: 8px;
      background: var(--s-bg);
      color: var(--s-ink);
    }

    /* Кавычка — узкий столбец сверху, без подписи */
    .lp-quote-plaque__col {
      align-self: start;
    }

    .lp-quote-plaque__mark {
      color: var(--s-accent);
      font-size: clamp(80px, 12vw, 180px);
      font-weight: 650;
      line-height: .7;
    }

    .lp-quote-plaque blockquote {
      margin: 0;
      font-size: clamp(30px, 4.4vw, 70px);
      font-weight: 650;
      line-height: .98;
      letter-spacing: var(--type-section-letter-spacing);
    }

    .lp-quote-plaque figcaption {
      margin-top: 28px;
    }

    /* ── Вопрос-ответ ────────────────────────────────────────────── */

    .lp-qa-board {
      display: grid;
      grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
      gap: 12px;
    }

    .lp-qa-board__intro,
    .lp-qa-board__list {
      padding: clamp(24px, 4vw, 52px);
      border-radius: 8px;
      background: var(--s-bg);
      color: var(--s-ink);
    }

    .lp-qa-board__list {
      display: grid;
      gap: 10px;
    }

    .lp-qa-item {
      display: grid;
      grid-template-columns: 52px 1fr;
      gap: 18px;
      padding: 20px;
      border-radius: 8px;
      background: var(--s-soft);
    }

    .lp-qa-item__letter {
      display: grid;
      place-items: center;
      width: 42px;
      height: 42px;
      border-radius: 50%;
      background: var(--s-accent);
      color: #000;
      font-size: 14px;
      font-weight: 900;
      line-height: 1;
    }

    .lp-qa-item h3 {
      margin: 0;
      font-size: var(--type-card-heading-font-size);
      font-weight: var(--type-card-heading-font-weight);
      line-height: var(--type-card-heading-line-height);
      letter-spacing: var(--type-card-heading-letter-spacing);
    }

    .lp-qa-item p {
      margin: 10px 0 0;
      color: var(--s-muted);
      font-size: var(--type-copy-font-size);
      font-weight: var(--type-copy-font-weight);
      line-height: var(--type-copy-line-height);
    }



    /* ── Тарифы ──────────────────────────────────────────────────── */

    .lp-pricing {
      align-items: stretch;
    }

    .lp-price {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 24px;
      min-height: 460px;
      background: var(--color-gray-100);
      border-radius: 20px;
    }

    .lp-price--neutral {
      background: var(--plate-neutral, #e5e3de);
    }

    /* Разделительные линии в тарифе — как в плашках услуг (блок 08) */
    .lp-price__rule {
      border: 0;
      border-top: 4px solid var(--color-black);
      margin: var(--space-6) 0 0;
      width: 100%;
    }

    .lp-price__bottom .lp-price__rule {
      margin: 0;
    }

    /* Низ тарифной карточки: часы (канонический стиль цены) + текст + кнопка, прижаты к низу */
    .lp-price__bottom {
      display: grid;
      gap: 16px;
      justify-items: stretch;
      margin-top: auto;
    }

    .lp-price__bottom .lp-price__sum,
    .lp-price__bottom .type-small {
      justify-self: start;
    }

    /* Кнопка в тарифе — на всю ширину карточки, текст канонического размера .btn--sm */
    .lp-price__bottom .btn.btn--sm {
      width: 100%;
      justify-content: center;
      padding: 6px 18px;
      gap: 12px;
      white-space: nowrap;
    }

    .lp-price__bottom .lp-price__sum {
      display: block;
      margin: 0 0 var(--space-6);
      color: var(--color-black);
      font-size: clamp(34px, 4.6vw, 64px);
      font-weight: 650;
      line-height: .9;
      letter-spacing: -0.03em;
    }

    /* ── Инпут формы (элемент) ───────────────────────────────────── */

    .lp-input {
      width: 100%;
      min-height: 56px;
      padding: 16px;
      border: 4px solid var(--plate-neutral);
      border-radius: 8px;
      background: var(--s-soft);
      color: var(--s-ink);
      font: inherit;
      font-weight: 600;
      transition: border-color var(--dur-fast) ease;
    }

    .lp-input::placeholder {
      transition: opacity var(--dur-fast) ease;
    }

    .lp-input:hover,
    .lp-input:focus {
      outline: none;
      border-color: var(--color-black);
    }

    .lp-input:focus::placeholder {
      opacity: 0;
    }

    .lp-input--area {
      min-height: 136px;
      resize: vertical;
    }

    /* ═══ Служебный слой страницы ui-kit: full-bleed и адаптив ═══ */

    body.ui-kit-page {
      overflow-x: hidden;
    }

    .ui-kit-shell {
      padding-top: 0;
    }

    .ui-kit-cover {
      padding-inline: var(--container-margin-x);
    }

    .ui-kit-cover > .container,
    .ui-kit-section > .container {
      width: 100%;
      max-width: none;
    }

    .ui-kit-section > .container > .ui-kit-label {
      max-width: none;
      margin-left: 0;
      padding-inline: var(--container-margin-x);
      flex-wrap: wrap;
    }

    .ui-kit-frame {
      box-sizing: border-box;
      padding: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      overflow: visible;
    }

    .ui-kit-frame:not(.ui-kit-frame--plain):not(:has(> .header)):not(:has(> .hero)) {
      width: calc(100% - var(--container-margin-x) * 2);
      max-width: var(--container-max);
      margin-inline: auto;
    }

    .ui-kit-frame--dark {
      background: var(--color-black);
    }

    .ui-kit-video {
      border-radius: 0;
    }

    .ui-kit-footer-sample .ui-kit-frame {
      width: 100%;
      max-width: none;
    }

    /* Оглавление дизайн-системы */
    .ui-kit-toc {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 28px;
    }

    .ui-kit-toc a {
      display: inline-flex;
      align-items: center;
      min-height: 36px;
      padding: 8px 14px;
      border: 1px dashed rgba(0, 0, 0, .35);
      border-radius: 999px;
      color: rgba(0, 0, 0, .55);
      font-size: 13px;
      font-weight: 800;
      line-height: 1;
      text-decoration: none;
      transition: color var(--dur-fast) ease, border-color var(--dur-fast) ease;
    }

    .ui-kit-toc a:hover {
      color: #000;
      border-color: #000;
    }

    /* Стенд вариаций тем (CTA и др.) */
    .ui-kit-theme-stack {
      display: grid;
      gap: 18px;
    }

    .ui-kit-theme-stack > * {
      min-width: 0;
    }

    .ui-kit-theme-caption {
      margin: 0 0 8px;
      color: rgba(0, 0, 0, .5);
      font-size: 12px;
      font-weight: 800;
      line-height: 1;
      text-transform: uppercase;
      letter-spacing: .06em;
    }

    /* Стенд элементов */
    .ui-kit-el-row {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: clamp(14px, 2vw, 28px);
    }

    .ui-kit-el-stack {
      display: grid;
      gap: 18px;
    }

    .ui-kit-icon-tile {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
      min-width: 120px;
      padding: 18px;
      border: 1px dashed rgba(0, 0, 0, .35);
      border-radius: 8px;
    }

    .ui-kit-icon-tile img,
    .ui-kit-icon-tile svg {
      height: 28px;
      max-width: 120px;
    }

    .ui-kit-icon-tile span {
      color: rgba(0, 0, 0, .5);
      font-size: 11px;
      font-weight: 800;
    }

    @media (max-width: 1023px) {
      .ui-kit-cover {
        padding-inline: var(--container-margin-x-mobile);
      }

      .ui-kit-section > .container > .ui-kit-label {
        max-width: none;
        margin-left: 0;
        padding-inline: var(--container-margin-x-mobile);
      }

      .ui-kit-frame:not(.ui-kit-frame--plain):not(:has(> .header)):not(:has(> .hero)) {
        width: calc(100% - var(--container-margin-x-mobile) * 2);
      }

      .ui-kit-mini-grid,
      .ui-kit-mini-grid--3,
      .ui-kit-blog-sample .blog-grid,
      .ui-kit-swatches {
        grid-template-columns: 1fr;
      }

      .ui-kit-rent-sample .rent-hero__frame {
        min-height: 0;
      }

      .ui-kit-rent-sample .rent-hero__content {
        min-height: min(72svh, 520px);
      }

      .ui-kit-scope-sample .rent-scope-card h3,
      .lp-faq summary,
      .lp-stack .lp-card h3 {
        font-size: var(--type-card-heading-font-size);
        line-height: var(--type-card-heading-line-height);
      }

      .lp-grid-2,
      .lp-grid-3,
      .lp-grid-4,
      .lp-bento,
      .lp-stack,
      .lp-metric-strip,
      .lp-compare__panes,
      .lp-timeline,
      .lp-availability__board {
        gap: clamp(18px, 5vw, 28px);
      }

      .lp-card,
      .lp-price,
      .lp-stack .lp-card,
      .lp-qa-item {
        padding: clamp(28px, 7.5vw, 42px);
      }

      .lp-card {
        min-height: clamp(220px, 56vw, 320px);
      }

      .lp-price {
        gap: clamp(28px, 7vw, 42px);
        min-height: clamp(520px, 132vw, 640px);
      }

      .lp-price__bottom {
        gap: clamp(18px, 5vw, 28px);
      }

      .ui-kit-hero-contained .hero--projects .hero__title-wrap {
        order: 1;
      }

      .ui-kit-hero-contained .hero--projects .projects-tabs {
        order: 2;
        gap: var(--space-2) var(--space-4);
      }

      .lp-ai-hero,
      .lp-calculator,
      .lp-compare,
      .lp-personas,
      .lp-quote-plaque,
      .lp-qa-board {
        grid-template-columns: 1fr;
      }

      .lp-grid-2,
      .lp-grid-3,
      .lp-grid-4,
      .lp-bento,
      .lp-metric-strip,
      .lp-compare__panes,
      .lp-timeline,
      .lp-stack,
      .lp-availability__board {
        grid-template-columns: 1fr;
      }

      .lp-ai-hero,
      .lp-compare__summary,
      .lp-compare__pane,
      .lp-metric-strip > div,
      .lp-stack .lp-card,
      .lp-price {
        min-height: 0;
      }

      .lp-bento .lp-card--feature {
        min-height: 280px;
      }

      .lp-timeline__item {
        display: grid;
        grid-template-columns: 42px minmax(0, 1fr);
        column-gap: clamp(18px, 5vw, 28px);
        min-height: 0;
        padding-block: clamp(18px, 5vw, 28px);
      }

      .lp-timeline__item:not(:last-child)::after {
        display: block;
        top: calc(clamp(18px, 5vw, 28px) + 42px + 10px);
        bottom: calc(-1 * clamp(18px, 5vw, 28px) - 10px);
        left: 21px;
        right: auto;
        width: 3px;
        height: auto;
        background: repeating-linear-gradient(180deg, var(--color-gray-400) 0 var(--lp-process-dash), transparent var(--lp-process-dash) calc(var(--lp-process-dash) + var(--lp-process-dash-gap)));
        transform: translateX(-50%);
      }

      .lp-timeline__item strong {
        grid-column: 1;
        grid-row: 1 / span 2;
        margin-bottom: 0;
      }

      .lp-timeline__item h3,
      .lp-timeline__item p {
        grid-column: 2;
      }

      .lp-article-card {
        grid-template-columns: 104px 1fr;
      }
    }

    @media (max-width: 900px) {
      .ui-kit-offer-sample .article-layout {
        grid-template-columns: 1fr;
        gap: 0;
      }

      .ui-kit-offer-sample .offer__sticky {
        height: 620px;
        min-height: 520px;
      }

      .ui-kit-review-sample .reviews-track {
        flex-direction: column;
        gap: 18px;
        overflow: visible;
      }

      .ui-kit-review-sample .review {
        width: 100%;
        max-width: none;
      }
    }

    @media (max-width: 640px) {
      .ui-kit-type-group,
      .ui-kit-type-row {
        grid-template-columns: 1fr;
        gap: 10px;
      }

      .lp-qa-item {
        grid-template-columns: 1fr;
      }

      .lp-step-v {
        grid-template-columns: 42px minmax(0, 1fr);
        gap: clamp(18px, 5vw, 28px);
      }

      .lp-matrix {
        display: table;
        width: 100%;
        min-width: 560px;
      }

      .lp-matrix th,
      .lp-matrix td {
        min-width: 140px;
      }

    }

    /* ── Горизонтальный ритм посадочной ────────────────────────────
       Десктоп: плашка 25px от края + 25px внутри = линия текста 50px.
       На узких экранах та же схема плавно уменьшается до 16 + 16 = 32px. */

    .lp-page .container {
      width: calc(100% - var(--layout-text-gutter) * 2);
    }

    .lp-page .rent-hero__container {
      width: 100%;
      padding-inline: var(--layout-plate-gutter);
    }

    .lp-page .rent-hero__frame {
      --rent-hero-pad-x: var(--layout-plate-padding-inline);
    }

    /* Секции, явно перенесённые с главной, сохраняют её исходную геометрию. */
    .lp-page .section--portfolio-v2 .container,
    .lp-page .section--home-clients .container,
    .lp-page .section--faq-split .container {
      width: calc(100% - var(--container-margin-x) * 2);
    }

    .faq-split {
      display: flex;
      flex-direction: column;
      gap: var(--space-10);
    }

    .faq-split__right {
      min-width: 0;
    }

    @media (min-width: 1024px) {
      .faq-split {
        display: grid;
        grid-template-columns: repeat(9, minmax(0, 1fr));
        column-gap: var(--grid-gap);
        row-gap: var(--grid-gap);
        align-items: start;
      }

      .faq-split__left {
        grid-column: 1 / span 3;
        position: sticky;
        top: var(--space-8);
        height: calc(100vh - var(--space-8));
      }

      .faq-split__right {
        grid-column: 4 / span 6;
      }
    }

    /* Ряды и крупные плашки выступают за линию обычного текста. */
    .lp-page .container.lp-canvas > :is(
      .lp-grid-1,
      .lp-grid-2,
      .lp-grid-3,
      .lp-grid-4,
      .lp-bento,
      .lp-stack,
      .lp-metric-strip,
      .lp-compare,
      .lp-calculator,
      .lp-personas,
      .lp-quote-plaque,
      .lp-qa-board,
      .lp-availability__board,
      .lp-matrix-scroll,
      .rent-scope-grid,
      .rent-role-grid,
      .rent-process,
      .service-plates,
      .projects-grid
    ) {
      width: calc(100% + var(--layout-plate-padding-inline) * 2);
      margin-inline: calc(var(--layout-plate-padding-inline) * -1);
    }

    /* Боковой внутренний отступ текстовых плашек един для всех компонентов. */
    .lp-page :is(
      .lp-inner,
      .lp-card,
      .rent-scope-card,
      .rent-role,
      .service-plate,
      .lp-compare__summary,
      .lp-compare__pane,
      .lp-calc-field,
      .lp-calculator__result,
      .lp-personas__rail span,
      .lp-quote-plaque,
      .lp-qa-board__intro,
      .lp-qa-board__list,
      .lp-qa-item,
      .lp-badge,
      .review__quote-card,
      .review__caption,
      .cta-card
    ),
    .lp-page .lp-metric-strip > div,
    .lp-page .lp-matrix th,
    .lp-page .lp-matrix td {
      padding-inline: var(--layout-plate-padding-inline);
    }

    /* У медиаплашек подписи остаются на общей линии текста. */
    .lp-page .project-tile__title,
    .lp-page .project-tile__desc {
      margin-inline: var(--layout-plate-padding-inline);
    }

    .lp-page .container.lp-canvas > .lp-matrix-scroll {
      max-width: none;
    }

    /* Карусель начинается краем первой плашки, а не отдельным отступом. */
    .lp-page .reviews-track {
      margin-inline: calc(var(--layout-plate-padding-inline) * -1);
      padding-inline: 0;
      scroll-padding-inline-start: 0;
    }

    /* Неполноширинная CTA-плашка также выступает влево до линии плашек. */
    .lp-page .section--cta .cta-card {
      margin-left: calc(var(--layout-plate-padding-inline) * -1);
    }

    @media (min-width: 1024px) {
      .lp-page .section--cta-line > .container {
        display: grid;
        grid-template-columns: repeat(8, minmax(0, 1fr));
        column-gap: var(--grid-gap);
      }

      .lp-page .section--cta-line .cta-card--minimal {
        grid-column: 2 / span 6;
        width: 100%;
      }
    }

    @media (max-width: 1023px) {
      .lp-page .section--portfolio-v2 .container,
      .lp-page .section--home-clients .container,
      .lp-page .section--faq-split .container {
        width: calc(100% - var(--container-margin-x-mobile) * 2);
      }

      .lp-page .section--cta .cta-card {
        width: calc(100% + var(--layout-plate-padding-inline) * 2);
      }
    }

    @media (max-width: 767px) {
      .lp-page .lp-matrix-scroll:has(.lp-price-table) {
        overflow: visible;
      }

      .lp-page .lp-price-table {
        display: block;
        min-width: 0;
      }

      .lp-page .lp-price-table thead {
        display: none;
      }

      .lp-page .lp-price-table tbody {
        display: grid;
        gap: 16px;
      }

      .lp-page .lp-price-table tr {
        display: block;
        overflow: hidden;
        border-radius: 18px;
        background: var(--color-gray-100);
      }

      .lp-page .lp-price-table td {
        display: grid;
        grid-template-columns: minmax(92px, 0.65fr) minmax(0, 1fr);
        gap: 14px;
        min-width: 0;
        padding: 14px 16px !important;
        border: 0;
        border-top: 1px solid var(--color-black);
        white-space: normal;
        overflow-wrap: anywhere;
      }

      .lp-page .lp-price-table td::before {
        content: attr(data-label);
        color: var(--color-text-muted);
        font-size: 12px;
        font-weight: 700;
        line-height: 1.25;
        text-transform: uppercase;
      }

      .lp-page .lp-price-table td:first-child {
        border-top: 0;
        background: var(--color-black);
        color: var(--color-white);
        font-size: 18px;
      }

      .lp-page .lp-price-table td:first-child::before {
        color: var(--color-gray-400);
      }

      .lp-page .lp-price-table td:last-child {
        align-items: center;
        background: var(--color-brand-orange);
        font-size: 20px;
      }

      .lp-page .lp-price-table td:last-child::before {
        color: var(--color-black);
      }
    }

/* End */


/* Start:/css/support.css?17902520577085*/
/* Support page: the same section heading sizes as on the home page. */
.support-page {
  --type-super-font-size: clamp(28px, 7.25vw, 72px);
}

@media (max-width: 1023px) {
  .support-page {
    --type-super-font-size: clamp(38px, 11.5vw, 58px);
  }
}

@media (max-width: 479px) {
  .support-page {
    --type-super-font-size: clamp(36px, 12vw, 54px);
  }
}

/* Fit the FAQ title to its own column without breaking the word. */
@media (min-width: 1024px) {
  .support-page .faq-split__left {
    min-width: 0;
    container-type: inline-size;
  }

  .support-page .faq-split__left .portfolio-split__heading {
    font-size: clamp(36px, 4.5vw, 72px);
    font-size: min(var(--type-super-font-size), 16cqi);
  }
}

/* Case studies from the approved prototype, with the next card in view. */
.support-cases .section-title__heading { max-width: 18em; }
.support-case-toolbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-6); margin-bottom: var(--space-6); }
.support-case-controls { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; }
.support-case-counter { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; margin-right: var(--space-4); color: var(--color-text-subtle); }
.support-case-arrow { width: 52px; height: 52px; display: grid; place-items: center; border: 2px solid var(--color-black); border-radius: var(--radius-full); font-size: 28px; line-height: 1; transition: background var(--dur-fast); }
.support-case-arrow:hover:not(:disabled) { background: var(--color-brand-orange); }
.support-case-arrow:disabled { opacity: .3; cursor: default; }
.support-case-viewport { position: relative; isolation: isolate; }
.support-case-viewport::before,.support-case-viewport::after { content: ''; position: absolute; top: 0; bottom: 0; width: clamp(64px,16vw,288px); z-index: 2; pointer-events: none; transition: opacity var(--dur-fast); }
.support-case-viewport::before { left: 0; background: linear-gradient(to right,var(--color-white) 14%,rgba(255,255,255,.85) 48%,rgba(255,255,255,0) 100%); }
.support-case-viewport::after { right: 0; background: linear-gradient(to right,rgba(255,255,255,0) 0%,rgba(255,255,255,.85) 52%,var(--color-white) 86%); }
.support-case-viewport[data-at-start=true]::before,.support-case-viewport[data-at-end=true]::after { opacity: 0; }
.support-case-track { display: flex; position: relative; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--layout-plate-gutter); scrollbar-width: none; gap: var(--space-6); padding-inline: var(--layout-plate-gutter); }
.support-case-track::-webkit-scrollbar { display: none; }
.support-case-slide { flex: 0 0 75%; min-width: 0; padding: var(--space-8) var(--layout-plate-padding-inline); border-radius: var(--radius-lg); scroll-snap-align: start; scroll-snap-stop: always; display: flex; flex-direction: column; overflow-wrap: break-word; }
.support-case-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-8); margin-bottom: var(--space-8); }
.support-case-head > div { min-width: 0; }
.support-case-name { font-size: clamp(32px,3.2vw,46px); font-weight: 750; line-height: 1.1; letter-spacing: -.03em; }
.support-case-caption { margin-top: var(--space-4); font-size: 16px; font-weight: 500; line-height: 1.4; max-width: 40em; }
.support-case-head .btn { margin-top: var(--space-2); flex-shrink: 0; max-width: 100%; }
.support-case-body { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.15fr); gap: var(--space-8); }
.support-case-screen { border-radius: var(--radius-md); overflow: hidden; margin: 0 0 var(--space-8); background: var(--color-white); border: 1px solid var(--plate-neutral); }
.support-browser-bar { display: flex; gap: 4px; align-items: center; height: 28px; padding-inline: 12px; background: var(--plate-neutral); }
.support-browser-bar i { width: 5px; height: 5px; flex-shrink: 0; background: var(--color-text-subtle); border-radius: var(--radius-full); }
.support-browser-bar span { font-size: 9px; margin-left: var(--space-2); color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.support-case-screen > img { display: block; width: 100%; height: auto; aspect-ratio: 1.85; object-fit: cover; object-position: top; }
.support-case-column { min-width: 0; }
.support-case-column > p { font-size: var(--type-copy-font-size); line-height: 1.5; font-weight: 500; margin-top: var(--space-4); }
.support-case-column ul { margin-top: var(--space-6); }
.support-case-column li { position: relative; padding: var(--space-6) 0 var(--space-6) 38px; border-top: 1px solid var(--plate-neutral); font-size: var(--type-copy-font-size); font-weight: 500; line-height: 1.45; }
.support-work-number { position: absolute; left: 0; top: var(--space-6); font-size: 12px; font-weight: 750; }
.support-case-stats { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--space-8); padding-top: var(--space-8); margin-top: auto; }
.support-case-stat { border-top: 4px solid var(--color-black); padding-top: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); }
.support-case-stat strong { font-size: clamp(32px,4.5vw,64px); line-height: 1; letter-spacing: -.04em; font-weight: 500; white-space: nowrap; }
.support-case-stat .type-caption { color: var(--color-text-subtle); }
.support-case-swipe-hint { display: none; }
.support-case-source { margin-top: var(--space-6); max-width: 70em; color: var(--color-text-subtle); line-height: 1.4; }
.support-case-live { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.support-case-carousel :is(button,a,[tabindex]):focus-visible { outline: 3px solid var(--color-black); outline-offset: 4px; }
.support-case-track:focus-visible { outline-offset: -4px; }
@media (max-width:1023px) {
  .support-case-body { grid-template-columns: minmax(0,1fr); }
  .support-case-head { flex-direction: column; gap: var(--space-4); }
}
@media (max-width:767px) {
  .support-cases .section-title__heading br { display: none; }
  .support-case-toolbar { gap: var(--space-4); }
  .support-case-counter { margin-right: var(--space-2); }
  .support-case-arrow { width: 44px; height: 44px; font-size: 24px; }
  .support-case-track { gap: var(--space-4); }
  .support-case-head .btn { padding-inline: var(--space-4); white-space: normal; }
  .support-case-column li { padding-left: 24px; }
  .support-case-stats { grid-template-columns: 1fr; gap: var(--space-6); }
  .support-case-stat { gap: var(--space-2); }
  .support-case-stat strong { font-size: 42px; }
  .support-case-stat .type-caption { font-size: 14px; }
  .support-case-swipe-hint { display: block; font-size: 12px; color: var(--color-text-subtle); margin-top: var(--space-4); }
  .support-case-source { font-size: 12px; }
}
@media (prefers-reduced-motion:reduce) {
  .support-case-viewport::before,.support-case-viewport::after { transition: none; }
}

/* End */


/* Start:/css/service-hub.css?17902553022809*/
/* Service landing pages: the same section heading sizes as on the home page. */
.service-hub {
  --type-super-font-size: clamp(28px, 7.25vw, 72px);
}

/* Five stages form one connected row, then switch to the vertical timeline. */
@media (min-width: 1200px) {
  .service-hub--bitrix24 .lp-timeline {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) and (max-width: 1199px) {
  .service-hub--bitrix24 .lp-timeline {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .service-hub--bitrix24 .lp-timeline__item {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    column-gap: var(--space-6);
    min-height: 0;
    padding-block: var(--space-6);
  }

  .service-hub--bitrix24 .lp-timeline__item:not(:last-child)::after {
    top: calc(var(--space-6) + 42px + var(--space-2));
    bottom: calc(-2 * var(--space-6) + var(--space-2));
    left: 21px;
    right: auto;
    width: 3px;
    height: auto;
    background: repeating-linear-gradient(180deg, var(--color-gray-400) 0 var(--lp-process-dash), transparent var(--lp-process-dash) calc(var(--lp-process-dash) + var(--lp-process-dash-gap)));
    transform: translateX(-50%);
  }

  .service-hub--bitrix24 .lp-timeline__item strong {
    grid-column: 1;
    grid-row: 1 / span 2;
    margin-bottom: 0;
  }

  .service-hub--bitrix24 .lp-timeline__item h3,
  .service-hub--bitrix24 .lp-timeline__item p {
    grid-column: 2;
  }
}

/* Keep metric values whole at the existing size, shrinking to fit the card. */
.service-hub--bitrix24 .lp-metric-strip > div:not(.lp-theme--dark) {
  min-width: 0;
  container-type: inline-size;
}

.service-hub--bitrix24 .lp-metric-strip strong {
  font-size: clamp(28px, 4vw, 64px);
  font-size: min(clamp(38px, 5vw, 72px), 25cqi);
  white-space: nowrap;
}

.service-hub--bitrix24 .lp-pricing + .section-intro {
  margin-top: var(--space-6);
}

@media (max-width: 1023px) {
  .service-hub {
    --type-super-font-size: clamp(38px, 11.5vw, 58px);
  }
}

@media (max-width: 479px) {
  .service-hub {
    --type-super-font-size: clamp(36px, 12vw, 54px);
  }
}

/* Fit the FAQ title to its own column without breaking the word. */
@media (min-width: 1024px) {
  .service-hub .faq-split__left {
    min-width: 0;
    container-type: inline-size;
  }

  .service-hub .faq-split__left .portfolio-split__heading {
    font-size: clamp(36px, 4.5vw, 72px);
    font-size: min(var(--type-super-font-size), 16cqi);
  }
}

/* Keep case names and links readable inside the narrow mobile slide. */
.service-hub .support-case-head > div {
  max-width: 100%;
}

@media (max-width: 479px) {
  .service-hub .support-case-name {
    font-size: clamp(24px, 8vw, 32px);
  }

  .service-hub .support-case-head .btn {
    font-size: var(--font-size-lg);
    min-height: 44px;
  }
}

/* End */
/* /css/ui-kit.css?178515786762383 */
/* /css/support.css?17902520577085 */
/* /css/service-hub.css?17902553022809 */