/* =========================================================================
   tradeium.ru — стили секций главной поверх дизайн-системы main.css.
   Токены, шапка, кнопки, карточки, форма, футер, ленты логотипов — в main.css
   (общая с dev.tradeium.ru). Здесь — герой с баннерами, навигация, группы
   направлений, «О компании», кейсы, партнёры, контакты.
   ========================================================================= */

/* ------------------------------ герой ------------------------------ */
:root {
  --hero-bg: 238, 243, 248;
  --hero-ink: #152438;
  --hero-muted: #42566e;
  --hero-accent: #0066cc;
  --hero-accent-hi: #004f9f;
  --hero-divider: #62768c;
  --hero-light-display: block;
  --hero-dark-display: none;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --hero-bg: 5, 14, 27;
    --hero-ink: #f5f5f7;
    --hero-muted: #becbdc;
    --hero-accent: #87bdf5;
    --hero-accent-hi: #a2d0ff;
    --hero-divider: #7a90aa;
    --hero-light-display: none;
    --hero-dark-display: block;
  }
}
:root[data-theme="dark"] {
  --hero-bg: 5, 14, 27;
  --hero-ink: #f5f5f7;
  --hero-muted: #becbdc;
  --hero-accent: #87bdf5;
  --hero-accent-hi: #a2d0ff;
  --hero-divider: #7a90aa;
  --hero-light-display: none;
  --hero-dark-display: block;
}
.hero { padding: 24px 24px 64px; }
.hero > .wrap { max-width: 1440px; padding: 0; }
.slides { border-radius: 28px; overflow: hidden; isolation: isolate; }
.slide[data-active] { animation: none; }
.slide {
  position: relative; min-height: 600px; display: flex; align-items: center;
  padding: 64px; overflow: hidden; text-align: left;
  background: rgb(var(--hero-bg)); color: var(--hero-ink);
  --accent: var(--hero-accent); --accent-hi: var(--hero-accent-hi);
}
.slide__art {
  position: absolute; right: 0; top: 0; width: auto; height: 100%; max-width: none;
  pointer-events: none; user-select: none;
}
.slide__art--light { display: var(--hero-light-display); }
.slide__art--dark { display: var(--hero-dark-display); }
.slide::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgb(var(--hero-bg)) 0%, rgb(var(--hero-bg)) 25%, rgba(var(--hero-bg),.92) 36%, rgba(var(--hero-bg),0) 63%);
}
.slide__copy { position: relative; z-index: 1; width: 49%; max-width: 560px; }
.slide .eyebrow { color: var(--hero-accent); font-size: 13px; letter-spacing: .04em; margin-bottom: 24px; }
/* В первом баннере надпись — часть <h1> (слова «Системный интегратор» в заголовке для поиска), а выглядит
   как прежде: шрифт, межстрочный и перенос — обычного текста, не заголовка */
.slide h1 .eyebrow { font-family: var(--f); line-height: 1.47; text-wrap: wrap; }
.slide h1, .slide h2 {
  max-width: none; margin: 0; font-size: clamp(38px, 3.75vw, 56px);
  line-height: 1.06; letter-spacing: -.035em; text-wrap: balance;
}
.slide .lead { margin: 24px 0 0; max-width: 43ch; color: var(--hero-muted); font-size: 18px; line-height: 1.5; letter-spacing: -.012em; }
.slide .actions { justify-content: flex-start; gap: 16px 24px; margin-top: 30px; }
.slide .btn { background: #0875df; color: #fff; }
.slide .btn:hover { background: #0066cc; }
.slide .link { font-size: 15px; }
.slide__list { margin: 20px 0 0; font-size: 13px; line-height: 1.8; color: var(--hero-muted); }
.slide__list li + li::before { content: ' / '; color: var(--hero-divider); padding: 0 3px; }
.hero__controls { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 22px; }
.hero .switch { margin-top: 0; }
.hero .switch__tabs { padding: 4px; border-radius: 100px; }
.hero .switch__tabs button { padding: 11px 20px; border-radius: 100px; }
.hero .switch__bar { border-radius: 100px; }
.hero__pause {
  flex: none; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%;
  display: grid; place-items: center; color: var(--ink); background: var(--seg-track); cursor: pointer;
}
.hero__pause svg { width: 16px; height: 16px; fill: currentColor; }
.hero__pause .play-icon, .hero__pause[data-paused] .pause-icon { display: none; }
.hero__pause[data-paused] .play-icon { display: block; }

/* шесть показателей вместо четырёх */
.hero .stats { max-width: 1140px; margin: 56px auto 0; gap: 32px 16px; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.hero .stats dd { font-size: clamp(1.75rem, 2.6vw, 2.75rem); }
.hero .stats dt { font-size: 13px; }

/* ------------------------------ шапка: навигация ------------------------------ */
.top__in { gap: 24px; }
.nav { display: flex; gap: 22px; margin-right: auto; }
.nav a { text-decoration: none; color: var(--ink-2); font-size: 14px; letter-spacing: -.016em; white-space: nowrap; }
.nav a:hover { color: var(--ink); }
.menu { display: none; position: relative; }
.menu summary { list-style: none; cursor: pointer; font-size: 14px; color: var(--ink-2); padding: 6px 0; }
.menu summary::-webkit-details-marker { display: none; }
.menu[open] summary { color: var(--ink); }
.menu__list {
  position: absolute; right: 0; top: calc(100% + 10px); min-width: 220px;
  background: var(--bg); border: 1px solid var(--rule); border-radius: var(--r-card);
  padding: 8px; display: grid; gap: 2px;
}
.menu__list a { display: block; padding: 10px 12px; border-radius: 10px; text-decoration: none; color: var(--ink); font-size: 15px; }
.menu__list a:hover { background: var(--bg-alt); }
/* main.css на ≤700 px прячет ссылки шапки (.top__contacts a) — и меню открывалось пустым */
.top__contacts .menu__list a { display: block; }
/* на телефоне «Меню» стоит левее середины, и список шириной 220 px уходил за левый край
   экрана — там он привязан к правому краю шапки */
@media (max-width: 700px) {
  .menu { position: static; }
  .menu__list { top: calc(100% + 4px); right: var(--pad); }
}
/* Почта zapros@ рядом с телефоном. Навигации, телефону и почте вместе нужно ~1190 px (в Inter),
   поэтому навигация уходит в «Меню» уже с 1240 px; на 860 px и меньше почта остаётся только в меню. */
@media (max-width: 1240px) {
  .nav { display: none; }
  .menu { display: block; }
}
@media (max-width: 860px) { .top__contacts .top__mail { display: none; } }

/* лид под заголовком раздела — ровными строками, как сами заголовки (у h1–h4 в main.css balance):
   иначе последней строкой повисает одно-два слова, как «под заказ.» в направлениях */
.sec__head .lead { text-wrap: balance; }
/* ссылки внутри лида — строчные, а не inline-flex: у inline-flex перенос разрешён и перед запятой,
   и строка в «Заявке» начиналась с «, позвоните»; номер телефона при этом не рвётся */
.sec__head .lead .link { display: inline; white-space: nowrap; }

/* ------------------------------ направления бизнеса ------------------------------ */
/* идёт сразу за героем (тот уже даёт 64 px снизу) — свой верхний отступ не нужен */
.biz { padding-top: 0; }

/* ------------------------------ направления ------------------------------ */
.dirs { margin-top: clamp(40px, 5vw, 64px); display: grid; gap: clamp(40px, 5vw, 56px); }
.dirs__group h3 { font-size: 1.0625rem; font-weight: 600; letter-spacing: -.014em; color: var(--ink-3); margin-bottom: 18px; }
.dirs__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.dir { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.dir img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
/* Светлые версии картинок карточек (tools/apply-images.py ставит двойника с class="art-light");
   без светлой версии карточка показывает тёмную в обеих темах. Переключатели — те же, что у баннеров. */
.card img.art-light, .about__art img.art-light { display: var(--hero-light-display); }
.card img.art-dark, .about__art img.art-dark { display: var(--hero-dark-display); }
.dir__body { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 8px; }
.dir h4 { font-size: 1.125rem; line-height: 1.25; letter-spacing: -.014em; }
.dir p { font-size: .9375rem; line-height: 1.5; letter-spacing: -.016em; color: var(--ink-2); }
.dir .link { margin-top: auto; padding-top: 8px; font-size: .9375rem; }

/* ------------------------------ о компании ------------------------------ */
.about { margin-top: clamp(40px, 5vw, 64px); display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr); gap: clamp(32px, 4vw, 64px); align-items: center; }
.about p + p { margin-top: 16px; }
.about__art { border-radius: var(--r-card-lg); overflow: hidden; }
.about__art img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.about__facts { margin-top: 28px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.about__facts div { background: var(--bg-card); border-radius: var(--r-card); padding: 16px 18px; }
.sec--alt .about__facts div { background: var(--bg); }
.about__facts b { display: block; font-family: var(--f-display); font-size: 1.5rem; letter-spacing: -.02em; }
.about__facts > div > span { display: block; margin-top: 4px; font-size: .8125rem; color: var(--ink-2); }   /* только подпись: span.nobr внутри не трогаем */

/* ------------------------------ видео ------------------------------ */
/* Обложки RuTube яркие и с надписями — подписи идут под обложкой. Плей — матовое стекло, без тени. */
.podcast {
  margin-top: clamp(32px, 4vw, 48px);
  display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); align-items: center;
  gap: clamp(24px, 3.2vw, 48px);
  padding: 14px clamp(28px, 3.2vw, 48px) 14px 14px;
}
.podcast__art, .ep__art { position: relative; display: block; overflow: hidden; background: #000; }
.podcast__art { border-radius: calc(var(--r-card-lg) - 14px); }
.podcast__art img, .ep__art img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.podcast__body { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.podcast h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.12; letter-spacing: -.02em; }
.podcast__meta { font-size: .875rem; line-height: 1.43; letter-spacing: -.016em; color: var(--ink-3); }
.podcast .btn { margin-top: 8px; }
.podcast:hover .btn { background: var(--accent-hi); }
.play {
  position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; transform: translate(-50%, -50%);
  border-radius: 50%; background: rgba(0, 0, 0, .45);
  -webkit-backdrop-filter: blur(14px) saturate(1.5); backdrop-filter: blur(14px) saturate(1.5);
  transition: background-color .2s var(--ease);
}
.play::before {
  content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-38%, -50%);
  border-style: solid; border-width: 14px 0 14px 23px; border-color: transparent transparent transparent #FFFFFF;
}
.card--link:hover .play { background: var(--accent-hi); }
.ep .play { width: 52px; height: 52px; }
.ep .play::before { border-width: 10px 0 10px 16px; }
.episodes { margin-top: 20px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.ep { padding: 0; gap: 0; overflow: hidden; }
.ep__body { padding: 18px 22px 22px; display: flex; flex-direction: column; gap: 6px; }
.ep h3 { font-size: 1.0625rem; line-height: 1.29; letter-spacing: -.016em; }
.ep p { font-size: .875rem; line-height: 1.43; }

/* плеер поверх страницы */
.player { width: min(1068px, calc(100vw - 2 * var(--pad))); max-width: none; max-height: none; padding: 0; border: 0; background: transparent; overflow: visible; }
.player::backdrop { background: rgba(0, 0, 0, .86); }
.player__frame { aspect-ratio: 16 / 9; border-radius: var(--r-card); overflow: hidden; background: #000; }
.player__frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.player__close {
  position: absolute; right: 0; bottom: calc(100% + 12px); width: 40px; height: 40px; padding: 0; border: 0;
  border-radius: 50%; background: rgba(255, 255, 255, .16); color: #FFFFFF; cursor: pointer;
  display: grid; place-items: center; transition: background-color .2s var(--ease);
}
.player__close:hover { background: rgba(255, 255, 255, .28); }
.player__close svg { width: 14px; height: 14px; }
html:has(.player[open]) { overflow: hidden; }

@media (max-width: 1100px) { .podcast { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); } }
@media (max-width: 860px) {
  .podcast { grid-template-columns: 1fr; padding: 12px 12px 28px; }
  .podcast__art { border-radius: calc(var(--r-card-lg) - 12px); }
  .podcast__body { padding-inline: 16px; }
  .episodes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* на телефоне выпуски — лента с прокруткой вбок, как полка в Apple TV */
@media (max-width: 560px) {
  .episodes {
    display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(var(--pad) * -1); padding-inline: var(--pad); scroll-padding-inline: var(--pad);
  }
  .episodes::-webkit-scrollbar { display: none; }
  .ep { flex: 0 0 80%; scroll-snap-align: start; }
}

/* ------------------------------ кейсы ------------------------------ */
.case { padding: 0; overflow: hidden; }
.case img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.case__body { padding: 22px 24px 26px; }
.case__body h3 { font-size: 1.1875rem; }
.case__body p { margin-top: 8px; }
/* кейсов девять: на двух колонках последний растянут на всю ширину (правило 6, main.css) —
   там картинка слева и текст справа, иначе карточка вдвое выше соседних */
@media (min-width: 701px) and (max-width: 860px) {
  .case:last-child:nth-child(odd) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; align-items: center; }
}

/* ------------------------------ партнёры ------------------------------ */
.vendors__key { margin-top: 20px; max-width: 72ch; margin-inline: auto; text-align: center; font-size: 1rem; line-height: 1.6; color: var(--ink-2); }
.vendors__all { margin-top: 32px; max-width: 900px; margin-inline: auto; }
.vendors__all summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 8px; color: var(--accent); font-weight: 500; font-size: .9375rem; }
.vendors__all summary::-webkit-details-marker { display: none; }
.vendors__all summary::after { content: "\203A"; font-size: 1.25em; line-height: 1; transform: rotate(90deg); transition: transform .2s var(--ease); }
.vendors__all[open] summary::after { transform: rotate(-90deg); }
.vendors__all p { margin-top: 16px; font-size: .875rem; line-height: 1.7; color: var(--ink-2); letter-spacing: -.01em; }

/* ------------------------------ медиа ------------------------------ */
.media { margin-top: clamp(32px, 4vw, 48px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }

/* ------------------------------ контакты ------------------------------ */
.offices { margin-top: clamp(40px, 5vw, 64px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.office { padding: 0; overflow: hidden; }
.office img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.office__map { display: block; }
.office .office__map--light { display: var(--hero-light-display); }  /* переключатели темы — те же, что у баннеров */
.office .office__map--dark { display: var(--hero-dark-display); }
.office__body { padding: 22px 24px 26px; }
.office__body h3 { font-size: 1.1875rem; }
.office__body p { margin-top: 8px; }
.office__body a { color: var(--accent); text-decoration: none; }
.office__body .link { font-size: 1rem; }
/* четыре почты: сетка 4 → 2 → 1, а не flex-wrap — тот давал 3 + 1 на планшете */
.contacts__lines { margin-top: 28px; display: grid; grid-template-columns: repeat(4, auto); gap: 12px 32px; justify-content: center; font-size: 1.0625rem; }
.contacts__lines a { color: var(--ink); text-decoration: none; }
.contacts__lines a:hover { color: var(--accent); }
.contacts__lines span { color: var(--ink-3); font-size: .8125rem; display: block; }
.requisites { margin-top: 32px; max-width: 760px; margin-inline: auto; text-align: center; }
.requisites dl { text-align: left; }
.requisites summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 8px; color: var(--accent); font-weight: 500; font-size: .9375rem; }
.requisites summary::-webkit-details-marker { display: none; }
.requisites dl { margin-top: 16px; display: grid; grid-template-columns: max-content 1fr; gap: 6px 20px; font-size: .875rem; line-height: 1.5; }
.requisites dt { color: var(--ink-3); }
.requisites dd { color: var(--ink-2); overflow-wrap: anywhere; }

/* ------------------------------ адаптив ------------------------------ */
@media (min-width: 1600px) { .slide { min-height: 650px; } }
@media (max-width: 1100px) {
  .hero { padding-inline: 20px; }
  .slide { padding: 44px; min-height: 590px; }
  .slide__copy { width: 52%; }
  .slide h1, .slide h2 { font-size: 42px; }
  .slide .lead { font-size: 17px; }
  .slide__art { right: -16px; }
  .slide::after { background: linear-gradient(90deg,rgb(var(--hero-bg)) 0%,rgb(var(--hero-bg)) 25%,rgba(var(--hero-bg),.92) 41%,rgba(var(--hero-bg),0) 75%); }
  .dirs__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .about { grid-template-columns: 1fr; }
  .media { grid-template-columns: 1fr; }
  .offices { grid-template-columns: 1fr; }
  .contacts__lines { grid-template-columns: repeat(2, auto); }
}
@media (max-width: 760px) {
  .hero { padding: 12px 12px 44px; }
  .slides { border-radius: 22px; }
  .slide { display: block; min-height: 0; padding: 32px 28px 305px; }
  .slide__copy { width: 100%; max-width: 560px; }
  .slide h1, .slide h2 { font-size: clamp(32px, 6.2vw, 44px); max-width: 20ch; }
  .slide .eyebrow { font-size: 12px; margin-bottom: 18px; }
  .slide .lead { margin-top: 18px; font-size: 16px; max-width: 49ch; }
  .slide .actions { margin-top: 22px; gap: 14px 22px; }
  .slide .btn { min-height: 44px; padding: 12px 22px; font-size: 15px; }
  .slide__list { margin-top: 16px; font-size: 12px; line-height: 1.8; }
  .slide__art { top: auto; bottom: -24px; right: 0; width: 100%; height: 360px; object-fit: cover; object-position: right center; }
  .slide::after { background: linear-gradient(180deg,rgb(var(--hero-bg)) 0%,rgb(var(--hero-bg)) calc(100% - 310px),rgba(var(--hero-bg),0) calc(100% - 220px)); }
  .hero__controls { margin-top: 16px; gap: 8px; }
  .hero .switch { flex: 1; max-width: 520px; min-width: 0; }
  .hero .switch__tabs { display: grid; grid-template-columns: 1fr 1fr 1fr; width: 100%; gap: 0; padding: 3px; }
  .hero .switch__tabs button { padding: 10px 6px; font-size: 11px; line-height: 1.2; }
  .hero__pause { width: 34px; height: 34px; }
  .hero .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 36px; gap: 28px 12px; }
  .about__facts { grid-template-columns: 1fr; }
  .requisites dl { grid-template-columns: 1fr; gap: 2px; }
  .requisites dt { margin-top: 10px; }
}
@media (max-width: 600px) {
  .dirs__grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .contacts__lines { grid-template-columns: auto; }
  .top .brand { --logo-w: 106px; }
  .top__in { gap: 10px; }
  .top__contacts { gap: 8px; }
  .top__contacts .btn { font-size: 12px; padding-inline: 10px; }
}
@media (max-width: 380px) {
  .slide { padding-inline: 22px; }
  .slide h1, .slide h2 { font-size: 31px; }
  .top__in { padding-inline: 16px; gap: 6px; }
  .top .brand { --logo-w: 92px; }
  .top__contacts { gap: 4px; }
  .top__contacts .btn { font-size: 11px; padding-inline: 8px; }
  .menu__list { right: 16px; }
}
@media (prefers-reduced-motion: reduce) { .hero__pause { display: none; } }

/* лента вендоров в четыре раза длиннее ленты заказчиков — та же скорость */
.logos__track--long { animation-duration: 480s; }
/* лента ждёт, пока её увидят (data-wait и data-run ставит скрипт); пауза по наведению — как в main.css */
.logos[data-wait] .logos__track { animation-play-state: paused; }
.logos[data-wait][data-run] .logos__track { animation-play-state: running; }
.logos[data-wait][data-run]:hover .logos__track { animation-play-state: paused; }

/* ------------------------------ виджет Битрикс24 ------------------------------ */
/* Форма «Трейдиум - умные решения» из плавающей кнопки: в портале у неё тёмный стиль с
   прозрачным фоном — рисовали под синий блок старого сайта, — и поверх нашей страницы панель
   просвечивала насквозь. Тёмным формам даём непрозрачную подложку и заметные поля, светлые
   (обратный звонок) не трогаем. Второй селектор — окна той же формы (согласие и т. п.), они
   монтируются отдельно и класса тёмного стиля не несут. Переменные формы заданы через id,
   поэтому !important. Цвета тёмной темы сайта — форма тёмная в обеих темах. */
.b24-form .b24-form-dark,
.b24-window-mounts #b24-window-mount-b24-site-button-form-4 {
  --b24-background-color: #1D1D1F !important;
  --b24-popup-background-color: #1D1D1F !important;
  --b24-field-background-color: #000000 !important;
  --b24-field-focus-background-color: #000000 !important;
  --b24-field-border-color: #424245 !important;
}

/* hero-fx */
/* hero-fx — анимация первого баннера; собирается tools/hero-fx.py, руками не править.
   Слой SVG в координатах картинки 1536×1024, коробка — как у .slide__art на всех брейкпоинтах.
   Сюжет 8 с по кругу; идёт на активном баннере, пока герой в кадре (data-fx-* ставит скрипт
   карусели); кнопка паузы останавливает и его; при reduced motion слоя нет. */
.slide__fx{position:absolute;right:0;top:0;height:100%;width:auto;aspect-ratio:1536/1024;pointer-events:none;mix-blend-mode:screen;overflow:hidden;contain:paint;will-change:transform;fill:none;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:1100px){.slide__fx{right:-16px}}
@media(max-width:760px){.slide__fx{top:auto;bottom:-24px;right:0;width:100%;height:360px}}
:root{--fx-core:#eaf6ff;--fx-halo:#5aa9ff;--fx-halo-alpha:.245;--fx-led-on:.85;--fx-led-idle:.7}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--fx-halo-alpha:.35;--fx-led-on:1;--fx-led-idle:.8}}
:root[data-theme="dark"]{--fx-halo-alpha:.35;--fx-led-on:1;--fx-led-idle:.8}
.fx-core{stroke:var(--fx-core);stroke-width:3}
.fx-halo{stroke:var(--fx-halo);stroke-width:9;opacity:var(--fx-halo-alpha)}
.fx-comet{stroke-dasharray:var(--tail) 1200}
.fx-switch{fill:var(--fx-core);stroke:var(--fx-core);stroke-width:2}
.fx-led-on,.fx-led-idle{fill:url(#fx-led);stroke:none}
.fx-led-on{opacity:var(--fx-led-on)}
.fx-led-idle{opacity:var(--fx-led-idle)}
.fx-anim{opacity:0;animation:none}
.hero[data-fx-ready] .slide[data-active] .fx-anim{animation-name:var(--anim);animation-duration:8s;animation-timing-function:linear;animation-fill-mode:both;animation-iteration-count:infinite}
.hero[data-fx-ready] .slide[data-active] .fx-flow{--anim:fx-flow;stroke-dasharray:9 23;animation-duration:.457143s;animation-timing-function:steps(6,end)}
.hero[data-fx-ready] .slide[data-active] .fx-blink{animation-timing-function:step-end}
.hero[data-fx-paused] .slide .fx-anim,.hero:not([data-fx-visible]) .slide .fx-anim,.hero[data-fx-hidden] .slide .fx-anim{animation-play-state:paused}
.hero:not([data-fx-visible]) .switch__bar,.hero[data-fx-hidden] .switch__bar{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){.slide__fx{display:none}}
@keyframes fx-cometB-80{0%{opacity:0;stroke-dashoffset:80}7.5%{opacity:0;stroke-dashoffset:80}10%{opacity:1}38.346%{opacity:1}39.846%{opacity:0;stroke-dashoffset:-463.42}100%{opacity:0;stroke-dashoffset:-463.42}}
@keyframes fx-cometA-80{0%{opacity:0;stroke-dashoffset:80}13.75%{opacity:0;stroke-dashoffset:80}16.25%{opacity:1}24.414%{opacity:1}25.914%{opacity:0;stroke-dashoffset:-124.36}100%{opacity:0;stroke-dashoffset:-124.36}}
@keyframes fx-cometB-42{0%{opacity:0;stroke-dashoffset:42}7.5%{opacity:0;stroke-dashoffset:42}10%{opacity:1}38.346%{opacity:1}39.846%{opacity:0;stroke-dashoffset:-501.42}100%{opacity:0;stroke-dashoffset:-501.42}}
@keyframes fx-cometA-42{0%{opacity:0;stroke-dashoffset:42}13.75%{opacity:0;stroke-dashoffset:42}16.25%{opacity:1}24.414%{opacity:1}25.914%{opacity:0;stroke-dashoffset:-162.36}100%{opacity:0;stroke-dashoffset:-162.36}}
@keyframes fx-cometB-10{0%{opacity:0;stroke-dashoffset:10}7.5%{opacity:0;stroke-dashoffset:10}10%{opacity:1}38.346%{opacity:1}39.846%{opacity:0;stroke-dashoffset:-533.42}100%{opacity:0;stroke-dashoffset:-533.42}}
@keyframes fx-cometA-10{0%{opacity:0;stroke-dashoffset:10}13.75%{opacity:0;stroke-dashoffset:10}16.25%{opacity:1}24.414%{opacity:1}25.914%{opacity:0;stroke-dashoffset:-194.36}100%{opacity:0;stroke-dashoffset:-194.36}}
@keyframes fx-flash-A{0%{opacity:0}25.914%{opacity:0;animation-timing-function:ease-out}26.852%{opacity:.9;animation-timing-function:ease-out}32.164%{opacity:0}100%{opacity:0}}
@keyframes fx-wave-A{0%{opacity:0;transform:scale(1)}25.904%{opacity:0;transform:scale(1)}25.914%{opacity:.65;transform:scale(1);animation-timing-function:ease-out}32.164%{opacity:0;transform:scale(1.3)}100%{opacity:0;transform:scale(1.3)}}
@keyframes fx-switch-A{0%{opacity:0}26.914%{opacity:0}27.914%{opacity:.85}29.164%{opacity:.85}30.039%{opacity:0}31.914%{opacity:0}32.914%{opacity:.85}34.164%{opacity:.85}35.039%{opacity:0}39.414%{opacity:0}100%{opacity:0}}
@keyframes fx-flash-B{0%{opacity:0}39.846%{opacity:0;animation-timing-function:ease-out}40.784%{opacity:.9;animation-timing-function:ease-out}46.096%{opacity:0}100%{opacity:0}}
@keyframes fx-wave-B{0%{opacity:0;transform:scale(1)}39.836%{opacity:0;transform:scale(1)}39.846%{opacity:.65;transform:scale(1);animation-timing-function:ease-out}46.096%{opacity:0;transform:scale(1.3)}100%{opacity:0;transform:scale(1.3)}}
@keyframes fx-switch-B{0%{opacity:0}40.846%{opacity:0}41.846%{opacity:.85}43.096%{opacity:.85}43.971%{opacity:0}45.846%{opacity:0}46.846%{opacity:.85}48.096%{opacity:.85}48.971%{opacity:0}53.346%{opacity:0}100%{opacity:0}}
@keyframes fx-cascade-1{0%{opacity:0}3.75%{opacity:0}4.8%{opacity:1}6.75%{opacity:0}100%{opacity:0}}
@keyframes fx-cascade-2{0%{opacity:0}4.75%{opacity:0}5.8%{opacity:1}7.75%{opacity:0}100%{opacity:0}}
@keyframes fx-cascade-3{0%{opacity:0}5.75%{opacity:0}6.8%{opacity:1}8.75%{opacity:0}100%{opacity:0}}
@keyframes fx-cascade-4{0%{opacity:0}6.75%{opacity:0}7.8%{opacity:1}9.75%{opacity:0}100%{opacity:0}}
@keyframes fx-cascade-5{0%{opacity:0}7.75%{opacity:0}8.8%{opacity:1}10.75%{opacity:0}100%{opacity:0}}
@keyframes fx-cascade-6{0%{opacity:0}8.75%{opacity:0}9.8%{opacity:1}11.75%{opacity:0}100%{opacity:0}}
@keyframes fx-blink-1{0%{opacity:0}10%{opacity:1}14%{opacity:0}100%{opacity:0}}
@keyframes fx-blink-2{0%{opacity:0}40%{opacity:1}42.5%{opacity:0}46%{opacity:1}48.5%{opacity:0}100%{opacity:0}}
@keyframes fx-blink-3{0%{opacity:0}60%{opacity:1}63%{opacity:0}100%{opacity:0}}
@keyframes fx-blink-4{0%{opacity:0}25%{opacity:1}28%{opacity:0}100%{opacity:0}}
@keyframes fx-blink-5{0%{opacity:0}75%{opacity:1}77.5%{opacity:0}100%{opacity:0}}
@keyframes fx-flow{from{opacity:.3;stroke-dashoffset:0}to{opacity:.3;stroke-dashoffset:-32}}
/* /hero-fx */

/* hero-mirror */
/* hero-mirror — «зеркало» на экране монитора первого баннера; собирается tools/hero-mirror.py,
   руками не править. Коробка .slide__screen — как у .slide__art и слоя анимации на всех
   брейкпоинтах; .mirror — «окно браузера» 16:9 внутри монитора, натягивается на экран по четырём
   углам (matrix3d из скрипта). --mu — его ширина в долях 1440 px (не --u: тот занят ноутбуком
   второго баннера, hero-lap.py регистрирует его как <length>, и calc(60px * число) ломался). */
.slide__screen{position:absolute;right:0;top:0;height:100%;width:auto;aspect-ratio:1536/1024;overflow:hidden;pointer-events:none}
@media(max-width:1100px){.slide__screen{right:-16px}}
@media(max-width:760px){.slide__screen{top:auto;bottom:-24px;right:0;width:100%;height:360px}}
.mirror{position:absolute;left:0;top:0;width:1440px;height:810px;transform-origin:0 0;overflow:hidden;background:var(--bg);opacity:0;transition:opacity .4s}
.mirror[data-on]{opacity:1}
.mirror__static{position:absolute;left:0;top:0;width:1440px;height:810px;overflow:hidden;transform-origin:0 0;transform:scale(var(--mu,1))}
.mirror__page,.mirror__head{position:absolute;left:0;top:0;width:1440px}
.mirror__page{height:1400px;will-change:transform}
.mirror__head{height:52px}
.mirror__img{position:absolute;left:0;top:0;width:100%;height:100%}
.mirror__img--light{display:var(--hero-light-display)}
.mirror__img--dark{display:var(--hero-dark-display)}
/* сглаживание перед уменьшением: копия шириной с окно сжимается на мониторе в ~5–6 раз, и без
   размытия мелкий текст рассыпается «лесенкой» (браузер уменьшает слой без сглаживания). Радиус
   --mblur считает скрипт от степени уменьшения, по умолчанию 1.2px (окно 1440). */
.mirror__live{position:absolute;left:0;top:0;border:0;background:var(--bg);opacity:0;transition:opacity .4s;filter:blur(var(--mblur,1.2px))}
.mirror[data-live] .mirror__live{opacity:1}
.mirror__cursor{position:absolute;left:0;top:0;width:calc(60px * var(--mu,1));height:calc(60px * var(--mu,1));opacity:0;transition:opacity .2s;will-change:transform}
.mirror[data-live][data-cursor] .mirror__cursor{opacity:1}
.mirror__ripple{position:absolute;width:calc(110px * var(--mu,1));height:calc(110px * var(--mu,1));margin:calc(-55px * var(--mu,1)) 0 0 calc(-55px * var(--mu,1));border-radius:50%;border:calc(6px * var(--mu,1)) solid rgba(255,255,255,.85);opacity:0}
.mirror__ripple[data-go]{animation:mirror-ripple .5s ease-out}
@keyframes mirror-ripple{from{opacity:.9;transform:scale(.25)}to{opacity:0;transform:scale(1.3)}}
/* стекло: мягкий блик и синее свечение экрана, чтобы сайт не выглядел наклейкой */
.mirror__glass{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;
  background:linear-gradient(118deg,rgba(255,255,255,.12) 0%,rgba(255,255,255,0) 36%),
             radial-gradient(120% 95% at 72% 42%,rgba(47,123,255,.22),rgba(47,123,255,0) 72%)}
@media(prefers-reduced-motion:reduce){.mirror__cursor,.mirror__ripple{display:none}}
/* /hero-mirror */

/* hero-fx-ai */
/* Generated by tools/hero-fx-ai.py. Geometry and playback use the shared hero-fx contract. */
:root{--fxai-blend:normal;--fxai-core:#ffffff;--fxai-ink:#1f6feb;--fxai-glow:#ffffff;--fxai-halo:#2f7bff;--fxai-outer:#2f7bff;--fxai-halo-alpha:.3;--fxai-outer-alpha:.035;--fxai-node-scale:1.45}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--fxai-blend:screen;--fxai-core:#eaf6ff;--fxai-ink:#eaf6ff;--fxai-glow:#5aa9ff;--fxai-halo:#5aa9ff;--fxai-outer:#2f7bff;--fxai-halo-alpha:.35;--fxai-outer-alpha:.12;--fxai-node-scale:1}}
:root[data-theme="dark"]{--fxai-blend:screen;--fxai-core:#eaf6ff;--fxai-ink:#eaf6ff;--fxai-glow:#5aa9ff;--fxai-halo:#5aa9ff;--fxai-outer:#2f7bff;--fxai-halo-alpha:.35;--fxai-outer-alpha:.12;--fxai-node-scale:1}
.slide__fx--ai{mix-blend-mode:var(--fxai-blend)}
.fxai-line{stroke:var(--fxai-core);stroke-width:3}
.fxai-halo{stroke:var(--fxai-halo);stroke-width:10;opacity:var(--fxai-halo-alpha)}
.fxai-outer{stroke:var(--fxai-outer);stroke-width:22;opacity:var(--fxai-outer-alpha)}
.fxai-row{stroke:var(--fxai-ink);stroke-width:3}
.fxai-flow .fxai-line{stroke:var(--fxai-ink)}
.fxai-edge{stroke:var(--fxai-core);stroke-width:2}
.fxai-fill{fill:var(--fxai-ink)}
.fxai-stop{stop-color:var(--fxai-glow)}
.fxai-node{transform-box:fill-box;transform-origin:center;transform:scale(var(--fxai-node-scale))}
.hero[data-fx-ready] .slide[data-active] .fxai-flow{stroke-dasharray:9 23;animation-timing-function:steps(96,end)}
@keyframes fxai-flow{0.000%{opacity:.27;stroke-dashoffset:0}100.000%{opacity:.27;stroke-dashoffset:-512}}
@keyframes fxai-left-80{0.000%{opacity:0;stroke-dashoffset:80}7.500%{opacity:0;stroke-dashoffset:80}10.000%{opacity:1}17.821%{opacity:1}18.571%{opacity:0;stroke-dashoffset:-105.994}100.000%{opacity:0;stroke-dashoffset:-105.994}}
@keyframes fxai-left-40{0.000%{opacity:0;stroke-dashoffset:40}7.500%{opacity:0;stroke-dashoffset:40}10.000%{opacity:1}17.821%{opacity:1}18.571%{opacity:0;stroke-dashoffset:-145.994}100.000%{opacity:0;stroke-dashoffset:-145.994}}
@keyframes fxai-left-9{0.000%{opacity:0;stroke-dashoffset:9}7.500%{opacity:0;stroke-dashoffset:9}10.000%{opacity:1}17.821%{opacity:1}18.571%{opacity:0;stroke-dashoffset:-176.994}100.000%{opacity:0;stroke-dashoffset:-176.994}}
@keyframes fxai-up-80{0.000%{opacity:0;stroke-dashoffset:80}30.000%{opacity:0;stroke-dashoffset:80}32.500%{opacity:1}38.536%{opacity:1}39.286%{opacity:0;stroke-dashoffset:-76.000}100.000%{opacity:0;stroke-dashoffset:-76.000}}
@keyframes fxai-up-40{0.000%{opacity:0;stroke-dashoffset:40}30.000%{opacity:0;stroke-dashoffset:40}32.500%{opacity:1}38.536%{opacity:1}39.286%{opacity:0;stroke-dashoffset:-116.000}100.000%{opacity:0;stroke-dashoffset:-116.000}}
@keyframes fxai-up-9{0.000%{opacity:0;stroke-dashoffset:9}30.000%{opacity:0;stroke-dashoffset:9}32.500%{opacity:1}38.536%{opacity:1}39.286%{opacity:0;stroke-dashoffset:-147.000}100.000%{opacity:0;stroke-dashoffset:-147.000}}
@keyframes fxai-right-80{0.000%{opacity:0;stroke-dashoffset:80}37.500%{opacity:0;stroke-dashoffset:80}40.000%{opacity:1}47.524%{opacity:1}48.274%{opacity:0;stroke-dashoffset:-101.005}100.000%{opacity:0;stroke-dashoffset:-101.005}}
@keyframes fxai-right-40{0.000%{opacity:0;stroke-dashoffset:40}37.500%{opacity:0;stroke-dashoffset:40}40.000%{opacity:1}47.524%{opacity:1}48.274%{opacity:0;stroke-dashoffset:-141.005}100.000%{opacity:0;stroke-dashoffset:-141.005}}
@keyframes fxai-right-9{0.000%{opacity:0;stroke-dashoffset:9}37.500%{opacity:0;stroke-dashoffset:9}40.000%{opacity:1}47.524%{opacity:1}48.274%{opacity:0;stroke-dashoffset:-172.005}100.000%{opacity:0;stroke-dashoffset:-172.005}}
@keyframes fxai-send{0.000%{opacity:0}7.500%{opacity:0}9.500%{opacity:0.65}13.500%{opacity:0}100.000%{opacity:0}}
@keyframes fxai-receive{0.000%{opacity:0}18.571%{opacity:0}20.571%{opacity:0.65}24.571%{opacity:0}100.000%{opacity:0}}
@keyframes fxai-row-0{0.000%{opacity:0}2.500%{opacity:0}4.500%{opacity:0.58}7.500%{opacity:0}100.000%{opacity:0}}
@keyframes fxai-row-1{0.000%{opacity:0}3.625%{opacity:0}5.625%{opacity:0.58}8.625%{opacity:0}100.000%{opacity:0}}
@keyframes fxai-row-2{0.000%{opacity:0}4.750%{opacity:0}6.750%{opacity:0.58}9.750%{opacity:0}100.000%{opacity:0}}
@keyframes fxai-row-3{0.000%{opacity:0}5.875%{opacity:0}7.875%{opacity:0.58}10.875%{opacity:0}100.000%{opacity:0}}
@keyframes fxai-scan{0.000%{opacity:0;transform:translateY(0)}19.375%{opacity:0;transform:translateY(0)}20.875%{opacity:.24}27.875%{opacity:.24}29.375%{opacity:0;transform:translateY(-252px)}100.000%{opacity:0;transform:translateY(-252px)}}
@keyframes fxai-breathe{0.000%{opacity:.08}19.375%{opacity:.084}23.125%{opacity:.096}29.375%{opacity:.0864}50.000%{opacity:.0864}75.000%{opacity:.0736}100.000%{opacity:.08}}
@keyframes fxai-bar-0{0.000%{opacity:0;transform:scaleY(0)}39.286%{opacity:0;transform:scaleY(0)}43.036%{opacity:.6;transform:scaleY(1)}60.000%{opacity:.6;transform:scaleY(1)}67.500%{opacity:0;transform:scaleY(1)}100.000%{opacity:0;transform:scaleY(1)}}
@keyframes fxai-bar-1{0.000%{opacity:0;transform:scaleY(0)}40.786%{opacity:0;transform:scaleY(0)}44.536%{opacity:.6;transform:scaleY(1)}60.000%{opacity:.6;transform:scaleY(1)}67.500%{opacity:0;transform:scaleY(1)}100.000%{opacity:0;transform:scaleY(1)}}
@keyframes fxai-bar-2{0.000%{opacity:0;transform:scaleY(0)}42.286%{opacity:0;transform:scaleY(0)}46.036%{opacity:.6;transform:scaleY(1)}60.000%{opacity:.6;transform:scaleY(1)}67.500%{opacity:0;transform:scaleY(1)}100.000%{opacity:0;transform:scaleY(1)}}
@keyframes fxai-bar-3{0.000%{opacity:0;transform:scaleY(0)}43.786%{opacity:0;transform:scaleY(0)}47.536%{opacity:.6;transform:scaleY(1)}60.000%{opacity:.6;transform:scaleY(1)}67.500%{opacity:0;transform:scaleY(1)}100.000%{opacity:0;transform:scaleY(1)}}
@keyframes fxai-node-0{0.000%{opacity:0}48.274%{opacity:0}51.024%{opacity:.65}60.000%{opacity:.65}67.500%{opacity:0}100.000%{opacity:0}}
@keyframes fxai-node-1{0.000%{opacity:0}49.774%{opacity:0}52.524%{opacity:.65}60.000%{opacity:.65}67.500%{opacity:0}100.000%{opacity:0}}
@keyframes fxai-node-2{0.000%{opacity:0}51.274%{opacity:0}54.024%{opacity:.65}60.000%{opacity:.65}67.500%{opacity:0}100.000%{opacity:0}}
@keyframes fxai-node-3{0.000%{opacity:0}52.774%{opacity:0}55.524%{opacity:.65}60.000%{opacity:.65}67.500%{opacity:0}100.000%{opacity:0}}
@keyframes fxai-node-4{0.000%{opacity:0}54.274%{opacity:0}57.024%{opacity:.65}60.000%{opacity:.65}67.500%{opacity:0}100.000%{opacity:0}}
@keyframes fxai-node-5{0.000%{opacity:0}55.774%{opacity:0}58.524%{opacity:.65}60.000%{opacity:.65}67.500%{opacity:0}100.000%{opacity:0}}
@keyframes fxai-edge-0{0.000%{opacity:0;stroke-dashoffset:70}48.274%{opacity:0;stroke-dashoffset:70}49.524%{opacity:.50}52.524%{opacity:0;stroke-dashoffset:-100}100.000%{opacity:0;stroke-dashoffset:-100}}
@keyframes fxai-edge-1{0.000%{opacity:0;stroke-dashoffset:70}49.774%{opacity:0;stroke-dashoffset:70}51.024%{opacity:.50}54.024%{opacity:0;stroke-dashoffset:-100}100.000%{opacity:0;stroke-dashoffset:-100}}
@keyframes fxai-edge-2{0.000%{opacity:0;stroke-dashoffset:70}51.274%{opacity:0;stroke-dashoffset:70}52.524%{opacity:.50}55.524%{opacity:0;stroke-dashoffset:-100}100.000%{opacity:0;stroke-dashoffset:-100}}
@keyframes fxai-edge-3{0.000%{opacity:0;stroke-dashoffset:70}52.774%{opacity:0;stroke-dashoffset:70}54.024%{opacity:.50}57.024%{opacity:0;stroke-dashoffset:-100}100.000%{opacity:0;stroke-dashoffset:-100}}
@keyframes fxai-edge-4{0.000%{opacity:0;stroke-dashoffset:70}54.274%{opacity:0;stroke-dashoffset:70}55.524%{opacity:.50}58.524%{opacity:0;stroke-dashoffset:-100}100.000%{opacity:0;stroke-dashoffset:-100}}
.fxai-lev--left-card{--lev:fxai-float-left-card;--phase:0s;transform-origin:820px 463px}
@keyframes fxai-float-left-card{0%,100%{transform:translateY(-9px)}50%{transform:translateY(9px)}}
.slide__lev .fxai-lev--left-card{transform-origin:53.385416667% 45.214843750%}
.slide__lev .fxai-lev--left-card{--lev:fxai-float-html}
.fxai-lev--left-wire{--lev:fxai-float-left-wire;--phase:0s;transform-origin:820px 463px}
@keyframes fxai-float-left-wire{0%,100%{transform:skewY(9.462322208deg)}50%{transform:skewY(-9.462322208deg)}}
.slide__lev .fxai-lev--left-wire{transform-origin:53.385416667% 45.214843750%}
.fxai-lev--up-card{--lev:fxai-float-up-card;--phase:-1.333333s;transform-origin:1076px 246px}
@keyframes fxai-float-up-card{0%,100%{transform:translateY(-9px)}50%{transform:translateY(9px)}}
.slide__lev .fxai-lev--up-card{transform-origin:70.052083333% 24.023437500%}
.slide__lev .fxai-lev--up-card{--lev:fxai-float-html}
.fxai-lev--up-wire{--lev:fxai-float-up-wire;--phase:-1.333333s;transform-origin:1076px 246px}
@keyframes fxai-float-up-wire{0%,100%{transform:scaleY(1.264705882)}50%{transform:scaleY(0.735294118)}}
.slide__lev .fxai-lev--up-wire{transform-origin:70.052083333% 24.023437500%}
.fxai-lev--right-card{--lev:fxai-float-right-card;--phase:-2.666667s;transform-origin:1288px 477px}
@keyframes fxai-float-right-card{0%,100%{transform:translateY(-9px)}50%{transform:translateY(9px)}}
.slide__lev .fxai-lev--right-card{transform-origin:83.854166667% 46.582031250%}
.slide__lev .fxai-lev--right-card{--lev:fxai-float-html}
.fxai-lev--right-wire{--lev:fxai-float-right-wire;--phase:-2.666667s;transform-origin:1288px 477px}
@keyframes fxai-float-right-wire{0%,100%{transform:skewY(-11.070202578deg)}50%{transform:skewY(11.070202578deg)}}
.slide__lev .fxai-lev--right-wire{transform-origin:83.854166667% 46.582031250%}
@keyframes fxai-float-html{0%,100%{transform:translateY(-.87890625%)}50%{transform:translateY(.87890625%)}}
.slide__lev{position:absolute;right:0;top:0;height:100%;width:auto;aspect-ratio:1536/1024;pointer-events:none;overflow:hidden;contain:paint;container-type:size}
@media(max-width:1100px){.slide__lev{right:-16px}}
@media(max-width:760px){.slide__lev{top:auto;bottom:-24px;right:0;width:100%;height:360px}}
.fxai-frame{position:absolute;right:0;top:50%;transform:translateY(-50%);width:max(100cqw,150cqh);height:max(100cqh,66.666666667cqw)}
.slide__lev .fxai-lev,.fxai-backdrop{position:absolute;inset:0;width:100%;height:100%}
.slide__lev .fxai-lev{will-change:transform}
.slide__lev .fxai-lev img{position:absolute;max-width:none}
.fxai-object-light{position:absolute;overflow:visible;fill:none;stroke-linecap:round;stroke-linejoin:round;mix-blend-mode:var(--fxai-blend)}
.fxai-objects,.fxai-rest{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:right center}
.fxai-objects{visibility:hidden}
.hero[data-fx-ready] .slide[data-active] .fxai-objects{visibility:visible}
.hero[data-fx-ready] .slide[data-active] .fxai-rest{visibility:hidden}
@media(prefers-reduced-motion:reduce){.hero[data-fx-ready] .slide[data-active] .fxai-objects{display:none}.hero[data-fx-ready] .slide[data-active] .fxai-rest{visibility:visible}}
.fxai-theme--light{display:var(--hero-light-display)}
.fxai-theme--dark{display:var(--hero-dark-display)}
.hero[data-fx-ready] .slide[data-active] .fxai-lev{animation-name:var(--lev);animation-duration:4s;animation-timing-function:ease-in-out;animation-delay:var(--phase);animation-iteration-count:infinite;animation-fill-mode:both}
.hero[data-fx-paused] .slide .fxai-lev,.hero:not([data-fx-visible]) .slide .fxai-lev,.hero[data-fx-hidden] .slide .fxai-lev{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.hero[data-fx-ready] .slide[data-active] .fxai-lev{animation:none}}
/* /hero-fx-ai */

/* boss — пасхалка (скрипт в конце index.html). Карточка-фото одинакова в обеих темах: фото
   чёрно-белое и тёмное, текст поверх него светлый. Слева, чтобы не спорить с кнопкой Битрикс24 */
.boss { position: fixed; left: 24px; bottom: 24px; z-index: 900; width: 260px; aspect-ratio: 4 / 5; border-radius: var(--r-card-lg); overflow: hidden; background: #111; color: #C7C7CC; transform: translateY(calc(100% + 48px)); transition: transform .8s var(--ease); }
.boss[data-open] { transform: none; }
.boss__img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 18%; }
.boss::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: linear-gradient(180deg, rgba(0,0,0,0) 34%, rgba(0,0,0,.72) 62%, rgba(0,0,0,.9) 100%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.boss__text { position: absolute; left: 20px; right: 20px; bottom: 18px; z-index: 1; font-size: 14px; line-height: 1.43; letter-spacing: -.016em; }
.boss__text p { margin: 4px 0 0; }
.boss__text .boss__title { margin: 0; color: #F5F5F7; font-size: 19px; font-weight: 600; line-height: 1.21; letter-spacing: -.012em; }
.boss__go { margin-top: 10px; font-size: 15px; color: var(--accent-dark); }
.boss__go:hover { color: #5AB0FF; }
.boss__close { position: absolute; top: 12px; right: 12px; z-index: 1; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: rgba(0,0,0,.5); color: #F5F5F7; font: 400 20px/32px var(--f); cursor: pointer; }
.boss__close:hover { background: rgba(0,0,0,.7); }
@media (max-width: 700px) { .boss { left: 12px; bottom: 12px; width: 220px; } }
@media (prefers-reduced-motion: reduce) { .boss { transition: none; } }

/* hero-lap */
/* Generated by tools/hero-lap.py: крышка ноутбука второго баннера (CSS 3D, камера подобрана по картинке). */
@property --u{syntax:"<length>";inherits:true;initial-value:0px}
:root{--lap-glass:#0a0d12;--lap-sheen:rgba(255,255,255,.10);--lap-edge-a:#bfc3cc;--lap-edge-b:#cfd2da;--lap-edge-c:#b9bdc9;--lap-edge-d:#aeb2be;--lap-side-a:#7e8696;--lap-side-b:#646b79;--lap-ao:#1b2230}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--lap-glass:#05070a;--lap-sheen:rgba(255,255,255,.05);--lap-edge-a:#a6aab6;--lap-edge-b:#b8bbc4;--lap-edge-c:#7f8594;--lap-edge-d:#6d7282;--lap-side-a:#353d4f;--lap-side-b:#262c3a;--lap-ao:#000}}
:root[data-theme="dark"]{--lap-glass:#05070a;--lap-sheen:rgba(255,255,255,.05);--lap-edge-a:#a6aab6;--lap-edge-b:#b8bbc4;--lap-edge-c:#7f8594;--lap-edge-d:#6d7282;--lap-side-a:#353d4f;--lap-side-b:#262c3a;--lap-ao:#000}
.slide__lap{position:absolute;right:0;top:0;height:100%;width:auto;aspect-ratio:1536/1024;pointer-events:none;overflow:hidden;contain:paint;container-type:size;visibility:hidden}
@media(max-width:1100px){.slide__lap{right:-16px}}
@media(max-width:760px){.slide__lap{top:auto;bottom:-24px;right:0;width:100%;height:360px}}
.hero[data-fx-ready] .slide[data-active] .slide__lap{visibility:visible}
@media(prefers-reduced-motion:reduce){.slide__lap{display:none}}
.lap-frame{position:absolute;right:0;top:50%;transform:translateY(-50%);width:max(100cqw,150cqh);height:max(100cqh,66.666666667cqw);--u:calc(max(100cqw,150cqh)/1536)}
.lap-th--light{display:var(--hero-light-display)}.lap-th--dark{display:var(--hero-dark-display)}
.lap-patch{position:absolute;left:calc(835.000*var(--u));top:calc(240.000*var(--u));width:calc(283.000*var(--u));height:calc(210.000*var(--u));max-width:none}
.lap-shade{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.lap-shade polygon{color:var(--lap-ao);stop-color:var(--lap-ao);opacity:0}
.lap-shade stop{stop-color:var(--lap-ao)}
.lap-stage{position:absolute;inset:0;perspective:calc(1604.143*var(--u));perspective-origin:79.9007% 15.1091%}
.lap-lid{position:absolute;left:0;top:0;width:calc(272.819*var(--u));height:calc(177.558*var(--u));transform-origin:0 100%;transform-style:preserve-3d;transform:translate3d(calc(840.988*var(--u)),calc(242.558*var(--u)),0) matrix3d(0.928099,0.031811,0.370973,0.000000,-0.123140,0.966501,0.225193,0.000000,-0.351382,-0.254683,0.900925,0.000000,0.000000,0.000000,0.000000,1.000000) rotateX(-108.5896deg)}
.lap-face{position:absolute;inset:0;overflow:hidden}
.lap-tex{position:absolute;inset:0;width:100%;height:100%;max-width:none}
.lap-out{transform:translateZ(calc(-2.00*var(--u))) rotateY(180deg)}
.lap-dim{position:absolute;inset:0;background:#000;opacity:.42}
.lap-edge{position:absolute;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.lap-edge--front{left:calc(4.547*var(--u));top:calc(-2.00*var(--u));width:calc(100% - 9.094*var(--u));height:calc(2.00*var(--u));transform-origin:50% 100%;transform:rotateX(90deg);background:linear-gradient(180deg,transparent 60%,rgba(0,0,0,.45)),linear-gradient(90deg,var(--lap-edge-a),var(--lap-edge-b) 45%,var(--lap-edge-c) 70%,var(--lap-edge-d))}
.lap-edge--right{left:100%;top:calc(4.547*var(--u));width:calc(2.00*var(--u));height:calc(100% - 4.547*var(--u));transform-origin:0 50%;transform:rotateY(90deg);background:linear-gradient(90deg,rgba(0,0,0,.45),transparent 40%),linear-gradient(180deg,var(--lap-side-a),var(--lap-side-b))}
.lap-screen{position:absolute;overflow:hidden}
.lap-glow{position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 45%,rgba(90,169,255,.10),transparent 70%);opacity:0}
.lap-off{position:absolute;inset:-1px;background:linear-gradient(118deg,var(--lap-sheen) 0,transparent 38%,transparent 62%,var(--lap-sheen) 100%),var(--lap-glass)}
.lap-win{position:absolute;left:6%;top:8%;width:88%;height:84%;border-radius:4% / 6%;background:rgba(10,14,24,.9);overflow:hidden;opacity:0;transform-origin:50% 60%}
.lap-bar{height:9%;display:flex;align-items:center;gap:1.4%;padding-left:3%;background:rgba(255,255,255,.05)}
.lap-bar i{width:2.2%;aspect-ratio:1;border-radius:50%;background:#e0625b}.lap-bar i:nth-child(2){background:#e3b048}.lap-bar i:nth-child(3){background:#56b96b}
.lap-code{position:absolute;left:4%;top:15%;width:92%;height:81%;overflow:hidden}
.lap-scroll{position:absolute;left:0;right:0;top:0}
.lap-ln{position:absolute;left:0;right:0;height:5.0000%;transform-origin:0 50%;transform:scaleX(0)}
.lap-ln i{position:absolute;top:27%;height:46%;border-radius:999px}
.lap-no{background:#3a4658}.lap-kw{background:#4c9eff}.lap-fn{background:#a8c8ff}.lap-tx{background:#c3cddc}.lap-st{background:#78d3b9}.lap-cm{background:#4b5a70}.lap-nm{background:#b9a6ff}.lap-ty{background:#6fd3ff}
.lap-a{animation:none}
.hero[data-fx-ready] .slide[data-active] .lap-a{animation-name:var(--a);animation-duration:8s;animation-timing-function:linear;animation-fill-mode:both;animation-iteration-count:infinite}
.hero[data-fx-paused] .slide .lap-a,.hero:not([data-fx-visible]) .slide .lap-a,.hero[data-fx-hidden] .slide .lap-a{animation-play-state:paused}
@keyframes lap-vin{0.000%{opacity:0}12.228%{opacity:0}12.240%{opacity:1}90.060%{opacity:1}90.072%{opacity:0}100.000%{opacity:0}}
@keyframes lap-vout{0.000%{opacity:1}12.228%{opacity:1}12.240%{opacity:0}90.060%{opacity:0}90.072%{opacity:1}100.000%{opacity:1}}
@keyframes lap-lid{0.000%,7.500%{transform:translate3d(calc(840.988*var(--u)),calc(242.558*var(--u)),0) matrix3d(0.928099,0.031811,0.370973,0.000000,-0.123140,0.966501,0.225193,0.000000,-0.351382,-0.254683,0.900925,0.000000,0.000000,0.000000,0.000000,1.000000) rotateX(-108.5896deg);animation-timing-function:cubic-bezier(.45,0,.25,1)}27.500%,78.750%{transform:translate3d(calc(840.988*var(--u)),calc(242.558*var(--u)),0) matrix3d(0.928099,0.031811,0.370973,0.000000,-0.123140,0.966501,0.225193,0.000000,-0.351382,-0.254683,0.900925,0.000000,0.000000,0.000000,0.000000,1.000000) rotateX(0deg);animation-timing-function:cubic-bezier(.5,0,.35,1)}96.250%,100%{transform:translate3d(calc(840.988*var(--u)),calc(242.558*var(--u)),0) matrix3d(0.928099,0.031811,0.370973,0.000000,-0.123140,0.966501,0.225193,0.000000,-0.351382,-0.254683,0.900925,0.000000,0.000000,0.000000,0.000000,1.000000) rotateX(-108.5896deg)}}
@keyframes lap-dim{0.000%,7.500%{opacity:.42;animation-timing-function:cubic-bezier(.45,0,.25,1)}27.500%,78.750%{opacity:0;animation-timing-function:cubic-bezier(.5,0,.35,1)}96.250%,100%{opacity:.42}}
@keyframes lap-ao{0.000%,7.500%{opacity:.55;animation-timing-function:cubic-bezier(.45,0,.25,1)}27.500%,78.750%{opacity:0;animation-timing-function:cubic-bezier(.5,0,.35,1)}96.250%,100%{opacity:.55}}
@keyframes lap-off{0.000%{opacity:1}23.125%{opacity:1}28.125%{opacity:0}75.625%{opacity:0}80.000%{opacity:1}100.000%{opacity:1}}
@keyframes lap-glow{0.000%{opacity:0}23.125%{opacity:0}28.125%{opacity:1}75.625%{opacity:1}80.000%{opacity:0}100.000%{opacity:0}}
@keyframes lap-win{0.000%{opacity:0;transform:scale(.96)}25.625%{opacity:0;transform:scale(.96)}30.000%{opacity:1;transform:scale(1)}74.375%{opacity:1;transform:scale(1)}77.500%{opacity:0;transform:scale(1)}100.000%{opacity:0;transform:scale(1)}}
@keyframes lap-ln-0{0.000%{transform:scaleX(0)}30.625%{transform:scaleX(0)}32.625%{transform:scaleX(1)}77.500%{transform:scaleX(1)}77.625%{transform:scaleX(0)}100.000%{transform:scaleX(0)}}
@keyframes lap-ln-1{0.000%{transform:scaleX(0)}33.125%{transform:scaleX(0)}35.125%{transform:scaleX(1)}77.500%{transform:scaleX(1)}77.625%{transform:scaleX(0)}100.000%{transform:scaleX(0)}}
@keyframes lap-ln-2{0.000%{transform:scaleX(0)}35.625%{transform:scaleX(0)}37.625%{transform:scaleX(1)}77.500%{transform:scaleX(1)}77.625%{transform:scaleX(0)}100.000%{transform:scaleX(0)}}
@keyframes lap-ln-3{0.000%{transform:scaleX(0)}38.125%{transform:scaleX(0)}40.125%{transform:scaleX(1)}77.500%{transform:scaleX(1)}77.625%{transform:scaleX(0)}100.000%{transform:scaleX(0)}}
@keyframes lap-ln-4{0.000%{transform:scaleX(0)}40.625%{transform:scaleX(0)}42.625%{transform:scaleX(1)}77.500%{transform:scaleX(1)}77.625%{transform:scaleX(0)}100.000%{transform:scaleX(0)}}
@keyframes lap-ln-5{0.000%{transform:scaleX(0)}43.125%{transform:scaleX(0)}45.125%{transform:scaleX(1)}77.500%{transform:scaleX(1)}77.625%{transform:scaleX(0)}100.000%{transform:scaleX(0)}}
@keyframes lap-ln-6{0.000%{transform:scaleX(0)}45.625%{transform:scaleX(0)}47.625%{transform:scaleX(1)}77.500%{transform:scaleX(1)}77.625%{transform:scaleX(0)}100.000%{transform:scaleX(0)}}
@keyframes lap-ln-7{0.000%{transform:scaleX(0)}48.125%{transform:scaleX(0)}50.125%{transform:scaleX(1)}77.500%{transform:scaleX(1)}77.625%{transform:scaleX(0)}100.000%{transform:scaleX(0)}}
@keyframes lap-ln-8{0.000%{transform:scaleX(0)}50.625%{transform:scaleX(0)}52.625%{transform:scaleX(1)}77.500%{transform:scaleX(1)}77.625%{transform:scaleX(0)}100.000%{transform:scaleX(0)}}
@keyframes lap-ln-9{0.000%{transform:scaleX(0)}53.125%{transform:scaleX(0)}55.125%{transform:scaleX(1)}77.500%{transform:scaleX(1)}77.625%{transform:scaleX(0)}100.000%{transform:scaleX(0)}}
@keyframes lap-ln-10{0.000%{transform:scaleX(0)}55.625%{transform:scaleX(0)}57.625%{transform:scaleX(1)}77.500%{transform:scaleX(1)}77.625%{transform:scaleX(0)}100.000%{transform:scaleX(0)}}
@keyframes lap-ln-11{0.000%{transform:scaleX(0)}58.125%{transform:scaleX(0)}60.125%{transform:scaleX(1)}77.500%{transform:scaleX(1)}77.625%{transform:scaleX(0)}100.000%{transform:scaleX(0)}}
@keyframes lap-ln-12{0.000%{transform:scaleX(0)}60.625%{transform:scaleX(0)}62.625%{transform:scaleX(1)}77.500%{transform:scaleX(1)}77.625%{transform:scaleX(0)}100.000%{transform:scaleX(0)}}
@keyframes lap-ln-13{0.000%{transform:scaleX(0)}63.125%{transform:scaleX(0)}65.125%{transform:scaleX(1)}77.500%{transform:scaleX(1)}77.625%{transform:scaleX(0)}100.000%{transform:scaleX(0)}}
@keyframes lap-ln-14{0.000%{transform:scaleX(0)}65.625%{transform:scaleX(0)}67.625%{transform:scaleX(1)}77.500%{transform:scaleX(1)}77.625%{transform:scaleX(0)}100.000%{transform:scaleX(0)}}
@keyframes lap-ln-15{0.000%{transform:scaleX(0)}68.125%{transform:scaleX(0)}70.125%{transform:scaleX(1)}77.500%{transform:scaleX(1)}77.625%{transform:scaleX(0)}100.000%{transform:scaleX(0)}}
@keyframes lap-ln-16{0.000%{transform:scaleX(0)}70.625%{transform:scaleX(0)}72.625%{transform:scaleX(1)}77.500%{transform:scaleX(1)}77.625%{transform:scaleX(0)}100.000%{transform:scaleX(0)}}
@keyframes lap-ln-17{0.000%{transform:scaleX(0)}73.125%{transform:scaleX(0)}75.125%{transform:scaleX(1)}77.500%{transform:scaleX(1)}77.625%{transform:scaleX(0)}100.000%{transform:scaleX(0)}}
@keyframes lap-ln-18{0.000%{transform:scaleX(0)}75.625%{transform:scaleX(0)}77.625%{transform:scaleX(1)}77.500%{transform:scaleX(1)}77.625%{transform:scaleX(0)}100.000%{transform:scaleX(0)}}
@keyframes lap-ln-19{0.000%{transform:scaleX(0)}78.125%{transform:scaleX(0)}80.125%{transform:scaleX(1)}77.500%{transform:scaleX(1)}77.625%{transform:scaleX(0)}100.000%{transform:scaleX(0)}}
@keyframes lap-scroll{0.000%{transform:translateY(0)}57.875%{transform:translateY(-0.0000%)}59.875%{transform:translateY(-5.0000%)}60.375%{transform:translateY(-5.0000%)}62.375%{transform:translateY(-10.0000%)}62.875%{transform:translateY(-10.0000%)}64.875%{transform:translateY(-15.0000%)}65.375%{transform:translateY(-15.0000%)}67.375%{transform:translateY(-20.0000%)}67.875%{transform:translateY(-20.0000%)}69.875%{transform:translateY(-25.0000%)}70.375%{transform:translateY(-25.0000%)}72.375%{transform:translateY(-30.0000%)}72.875%{transform:translateY(-30.0000%)}74.875%{transform:translateY(-35.0000%)}75.375%{transform:translateY(-35.0000%)}77.375%{transform:translateY(-40.0000%)}77.875%{transform:translateY(-40.0000%)}79.875%{transform:translateY(-45.0000%)}77.500%{transform:translateY(-45.0000%)}77.625%{transform:translateY(0)}100.000%{transform:translateY(0)}}
/* /hero-lap */