/*! src: 02072a839f4db3249ac73f3cec48d451 */

  @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&family=Ubuntu+Sans:wght@400;500;700&display=swap");
  

  :root {
    --red: #ff4d4d;
    --red-2: #ff6a61;
    --red-deep: #e63e3e;
    --red-soft: #fff1f0;
    --red-hair: #ffd9d6;
    --ink: #1d2333;
    --muted: #5b6273;
    --line: #e6e9f2;
    --surface: #f7f9fd;
    --dark: #1b1f2c;

    --title: "Ubuntu Sans", sans-serif;
    --body: Roboto, sans-serif;

    --pad: 100px;
    --inner: 1200px;
    --gap: 24px;
    --r-lg: 28px;
    --r-md: 20px;
    --shadow-sm: 0 10px 28px rgba(20, 26, 45, .08);
  }
  @media (max-width: 991px) { :root { --pad: 72px; --gap: 20px; } }
  @media (max-width: 640px) { :root { --pad: 56px; --gap: 14px; } }

  .bx-root, .bx-root *, .bx-root *::before, .bx-root *::after { box-sizing: border-box; }
  .bx-root { font-family: var(--body); color: var(--ink); background: #fff; overflow-x: clip; }
  .bx-root img { max-width: 100%; }

  .bx-section { padding: var(--pad) 0; position: relative;
    background:
      radial-gradient(42% 34% at 88% 0%, rgba(255, 77, 77, .05), transparent 70%),
      radial-gradient(36% 30% at 2% 100%, rgba(255, 77, 77, .035), transparent 70%),
      #fff;
  }
  .bx-section--tint { background: linear-gradient(180deg, #f7f9fd 0%, #eef2f9 100%); }
  .bx-section--dark { background: var(--dark); }
  .bx-inner { width: 100%; max-width: var(--inner); margin: 0 auto; padding: 0 24px; }

  .bx-head { max-width: 820px; margin: 0 auto 56px; text-align: center; }
  .bx-h2 { margin: 0; font: 700 42px/1.1 var(--title); color: var(--ink); text-wrap: balance; }
  .bx-section--dark .bx-h2 { color: #fff; }

  .bx-crumbs { max-width: var(--inner); margin: 0 auto; padding: 18px 24px 0; font: 14px/1.4 var(--body); color: var(--muted); }
  .bx-crumbs ol { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
  .bx-crumbs li + li::before { content: "→"; margin-right: 8px; color: var(--line); }
  .bx-crumbs a { color: var(--muted); text-decoration: none; }
  .bx-crumbs a:hover { color: var(--red); }
  .bx-crumbs [aria-current] { color: var(--ink); }

  .bx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 15px 30px; border-radius: 12px; font: 600 16px var(--body); text-decoration: none; border: 0; cursor: pointer; transition: transform .15s, box-shadow .15s, background .15s, color .15s; }
  .bx-btn--primary { background: var(--red); color: #fff; }
  .bx-btn--primary:hover { background: var(--red-deep); transform: translateY(-2px); box-shadow: 0 12px 28px rgba(255, 77, 77, .32); color: #fff; }
  .bx-btn--ghost { background: #fff; color: var(--ink); border: 1px solid var(--line); }
  .bx-btn--ghost:hover { border-color: var(--red-hair); color: var(--red-deep); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
  .bx-cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 20px; margin-top: 36px; }
  .bx-cta-row--center { justify-content: center; }
  .bx-cta-note { width: 100%; margin: 0; font: 14px var(--body); color: var(--muted); }
  .bx-cta-row--center .bx-cta-note { text-align: center; }

  /* margin: 0 — у <figure> дефолтные 40px по бокам, иначе картинка вылезает за контейнер */
  .bx-shot { display: block; width: 100%; margin: 0; }
  .bx-shot__img { display: block; width: 100%; height: auto; border-radius: 16px; border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
  .bx-shot__img--plain { border: 0; box-shadow: none; }

  .bx-hero { position: relative; overflow: hidden; background: radial-gradient(56% 58% at 82% 34%, rgba(255, 77, 77, .12), transparent 70%), #fff; }
  .bx-hero__in { max-width: var(--inner); margin: 0 auto; padding: 72px 24px; display: grid; grid-template-columns: .92fr 1.08fr; gap: 48px; align-items: center; }
  .bx-hero__text > * { min-width: 0; }
  .bx-hero__badge { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 18px; padding: 7px 14px 7px 11px; border-radius: 999px; background: var(--red-soft); font: 700 13px var(--title); color: var(--red-deep); }
  .bx-hero__badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--red); }
  .bx-hero__title { margin: 0; max-width: 560px; font: 700 46px/1.08 var(--title); letter-spacing: -.4px; color: var(--ink); text-wrap: balance; }
  .bx-hero__lead { margin: 18px 0 0; max-width: 520px; font: 400 18px/1.55 var(--body); color: var(--muted); text-wrap: pretty; }
  .bx-hero__lead + .bx-hero__lead { margin-top: 12px; font-size: 15.5px; line-height: 1.5; color: #77809a; }
  .bx-hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 26px; }
  .bx-hero__cta .bx-btn { min-height: 48px; padding: 13px 26px; }
  .bx-hero__micro { margin: 14px 0 0; font: 13.5px var(--body); color: var(--muted); }
  .bx-hero__visual { position: relative; min-width: 0; }

  .bx-flow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 56px; align-items: start; }
  .bx-flow > * { min-width: 0; }
  .bx-flow--rev { grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); }
  .bx-flow--rev .bx-flow__steps { order: 2; }
  .bx-flow__visual { position: sticky; top: 96px; }

  .bx-steplist { position: relative; display: flex; flex-direction: column; gap: 22px; }
  .bx-steplist__i { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 16px; }
  .bx-steplist__i:not(:last-child)::before { content: ""; position: absolute; left: 17px; top: 38px; bottom: -22px; width: 2px; background: linear-gradient(180deg, var(--red-hair), rgba(255, 217, 214, .25)); }
  .bx-step__n { position: relative; z-index: 1; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--red); color: #fff; font: 700 15px var(--title); }
  .bx-step__t { margin: 0 0 6px; font: 700 17px/1.3 var(--title); color: var(--ink); }
  .bx-step__d { margin: 0; font: 15px/1.55 var(--body); color: var(--muted); text-wrap: pretty; }
  .bx-step__d + .bx-step__d { margin-top: 8px; }
  .bx-step__list { margin: 8px 0 0; padding-left: 20px; font: 15px/1.6 var(--body); color: var(--muted); }
  .bx-step__list + .bx-step__d { margin-top: 8px; }
  .bx-plate { margin: 48px auto 0; max-width: 940px; padding: 24px 30px; border-radius: var(--r-lg); background: var(--ink); color: #fff; text-align: center; font: 700 19px/1.45 var(--title); text-wrap: balance; }
  .bx-plate strong { color: var(--red-2); }

  .bx-rows { display: flex; flex-direction: column; gap: 72px; }
  .bx-row { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
  .bx-row > * { min-width: 0; }
  .bx-row:nth-child(even) .bx-row__text { order: 2; }
  .bx-row__ic { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 18px; border-radius: 14px; background: var(--red-soft); }
  .bx-row__ic img { width: 28px; height: 28px; }
  .bx-row__t { margin: 0 0 14px; font: 700 30px/1.2 var(--title); color: var(--ink); text-wrap: balance; }
  .bx-row__d { margin: 0 0 14px; font: 17px/1.6 var(--body); color: var(--muted); text-wrap: pretty; }
  .bx-row__d:last-child { margin-bottom: 0; }
  .bx-k { display: inline-block; padding: 1px 10px 2px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-size: .88em; line-height: 1.5; color: var(--ink); white-space: nowrap; }

  .bx-pillars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
  .bx-pillar { padding: 26px; border-radius: var(--r-md); background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); min-width: 0; }
  .bx-pillar__ic { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: rgba(255, 77, 77, .16); margin-bottom: 14px; }
  .bx-pillar__ic img { width: 24px; height: 24px; }
  .bx-pillar__t { margin: 0 0 6px; font: 700 18px/1.3 var(--title); color: #fff; }
  .bx-pillar__d { margin: 0; font: 14px/1.5 var(--body); color: rgba(255, 255, 255, .62); }
  .bx-ai__visual { margin-top: 44px; }

  .bx-tbl { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; font-family: var(--body); background: #fff; }
  /* display:block — иначе caption режется скруглением overflow:hidden у таблицы */
  .bx-tbl caption { display: block; padding-bottom: 16px; text-align: left; font-size: 15px; color: var(--muted); }
  .bx-tbl th, .bx-tbl td { padding: 18px 22px; text-align: left; font-size: 16px; line-height: 1.55; vertical-align: top; border-bottom: 1px solid var(--line); }
  .bx-tbl thead th { background: var(--surface); font: 700 17px var(--title); color: var(--ink); }
  .bx-tbl tbody th { font: 700 16px var(--title); color: var(--ink); width: 30%; }
  .bx-tbl tbody td { color: var(--muted); }
  .bx-tbl tbody tr:last-child th, .bx-tbl tbody tr:last-child td { border-bottom: 0; }
  .bx-tbl__col { display: none; }
  .bx-callout { margin: 24px auto 0; max-width: 940px; padding: 20px 24px; border-radius: var(--r-md); background: var(--red-soft); border: 1px solid var(--red-hair); font: 16px/1.55 var(--body); color: var(--ink); }
  .bx-callout strong { font-family: var(--title); }

  /* штатный блок темы: гасим .screen{margin-bottom:120px}, вертикаль даёт .bx-section */
  .bx-root .bh-landing-section { margin-bottom: 0; }

  .bx-final { position: relative; overflow: visible; border-radius: var(--r-lg); background: linear-gradient(135deg, #fff 0%, #fff5f4 55%, #ffecea 100%); border: 3px solid var(--red); color: var(--ink); }
  .bx-final__in { position: relative; z-index: 1; display: grid; grid-template-columns: 1.15fr .85fr; gap: 32px; align-items: center; padding: 56px 56px 0; }
  .bx-final__in > * { min-width: 0; }
  .bx-final__t { margin: 0 0 20px; font: 700 44px/1.08 var(--title); color: var(--ink); text-wrap: balance; }
  .bx-final__p { margin: 0 0 16px; font: 18px/1.55 var(--body); color: var(--muted); text-wrap: pretty; }
  .bx-final__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 20px; margin-top: 12px; }
  .bx-final__micro { margin: 16px 0 40px; font: 14px var(--body); color: var(--muted); }
  .bx-final__robot { align-self: start; display: flex; justify-content: center; }
  .bx-final__robot img { width: 100%; max-width: 360px; height: auto; margin-top: -48px; }

  .bx-faq { max-width: 880px; margin: 0 auto; }
  .bx-faq__i { border-bottom: 1px solid var(--line); }
  .bx-faq__q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px 4px; background: transparent; border: 0; cursor: pointer; text-align: left; }
  .bx-faq__q h3 { margin: 0; font: 700 19px/1.35 var(--title); color: var(--ink); }
  .bx-faq__ic { flex: 0 0 auto; color: var(--muted); transition: transform .2s, color .2s; }
  .bx-faq__i--open .bx-faq__ic { transform: rotate(180deg); color: var(--red); }
  .bx-faq__i--open .bx-faq__q h3 { color: var(--red); }
  .bx-faq__a { display: none; padding: 0 4px 24px; font: 16px/1.6 var(--body); color: var(--muted); animation: bx-reveal .22s ease; }
  .bx-faq__a p { margin: 0 0 12px; }
  .bx-faq__a p:last-child { margin-bottom: 0; }
  .bx-faq__i--open .bx-faq__a { display: block; }
  @keyframes bx-reveal { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }

  .bx-root a:focus-visible, .bx-root button:focus-visible { outline: 3px solid #2f6bff; outline-offset: 3px; border-radius: 6px; }
  .bx-section--dark a:focus-visible { outline-color: #fff; }
  @media (prefers-reduced-motion: reduce) { .bx-root * { animation: none !important; transition: none !important; } }

  @media (max-width: 991px) {
    .bx-h2 { font-size: 32px; }
    .bx-head { margin-bottom: 40px; }
    .bx-hero__in { grid-template-columns: 1fr; gap: 28px; padding: 32px 24px 56px; }
    .bx-hero__title { font-size: 38px; }
    .bx-row { grid-template-columns: 1fr; gap: 28px; }
    .bx-row:nth-child(even) .bx-row__text { order: 0; }
    .bx-row__t { font-size: 26px; }
    .bx-rows { gap: 56px; }
    .bx-pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* картинка идёт первой, шаги — под ней: связка «визуал → подпись» сохраняется */
    .bx-flow { grid-template-columns: 1fr; gap: 32px; }
    .bx-flow__visual { position: static; order: -1; }
    .bx-flow--rev .bx-flow__steps { order: 0; }
    .bx-final__in { grid-template-columns: 1fr; padding: 48px 40px 0; }
    .bx-final__robot img { max-width: 240px; margin-top: 0; }
  }
  @media (max-width: 640px) {
    .bx-h2 { font-size: 28px; }
    .bx-head { margin-bottom: 32px; }
    .bx-inner { padding: 0 16px; }
    .bx-crumbs { padding: 14px 16px 0; }
    .bx-hero__in { padding: 24px 16px 48px; }
    .bx-hero__title { font-size: 31px; }
    .bx-hero__lead { font-size: 17px; }
    .bx-hero__cta { flex-direction: column; align-items: stretch; }
    .bx-hero__cta .bx-btn { width: 100%; }
    .bx-pillars { grid-template-columns: 1fr; }
    .bx-plate { padding: 22px; font-size: 18px; }
    .bx-final__in { padding: 36px 20px 0; }
    .bx-final__t { font-size: 30px; }
    .bx-final__cta { flex-direction: column; align-items: stretch; }
    .bx-final__cta .bx-btn { width: 100%; }
    .bx-cta-row .bx-btn { width: 100%; }
    /* картинки идут во всю ширину экрана, без контейнера, рамки и тени */
    .bx-shot { margin: 0 -16px; width: calc(100% + 32px); }
    .bx-root .bx-shot__img { width: 100%; border: 0; border-radius: 0; box-shadow: none; }
    /* --pan: диаграмма слишком плотная, чтобы её сжимать — листаем по горизонтали.
       Отступ перед картинкой даёт ::before, а не padding: у скроллящегося
       контейнера padding обрезал бы прокрутку (как .bh-cards-grid в bothelp-pages.css) */
    .bx-shot--pan { display: flex; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
    .bx-shot--pan::before, .bx-shot--pan::after { content: ""; flex: 0 0 16px; }
    .bx-shot--pan::-webkit-scrollbar { display: none; }
    .bx-root .bx-shot--pan .bx-shot__img { flex: 0 0 auto; width: 780px; max-width: none; }
    .bx-faq__q { padding: 20px 0; gap: 12px; }
    .bx-faq__q h3 { font-size: 17px; }
    .bx-faq__a { padding: 0 0 20px; font-size: 15px; }
    .bx-tbl { display: block; border: 0; border-radius: 0; background: transparent; }
    .bx-tbl caption { padding: 0 0 14px; }
    .bx-tbl thead { display: none; }
    .bx-tbl tbody, .bx-tbl tr, .bx-tbl th, .bx-tbl td { display: block; width: auto; }
    .bx-tbl tr { margin-bottom: 14px; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: #fff; }
    .bx-tbl tbody th { width: auto; background: var(--surface); font-size: 17px; }
    .bx-tbl th, .bx-tbl td { padding: 14px 16px; }
    .bx-tbl tbody tr td:last-child { border-bottom: 0; }
    .bx-tbl__col { display: block; margin-bottom: 4px; font: 700 12px var(--title); text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
    .bx-callout { padding: 18px 16px; font-size: 15px; }
  }