/* 10 October visual direction: black typography, colour, soft grey.
   Native scroll drives the illustrated file scene and the business system.
   Raster screenshots retain the pixel budget in landing.js. */
:root { --ink: #202023; --muted: #75757c; --panel: #f5f5f7; --ease: cubic-bezier(.16,1,.3,1); }
h1,h2 { font-weight: 750; letter-spacing: -.055em; }
h2 { font-size: clamp(42px,5.3vw,72px); }
main h2 .accent-text,main h2 .muted-text,.hero h1>span,.company-hero h1>span {
  background: var(--brand-gradient); background-size: 130% 100%;
  background-position: var(--gradient-position,0%) center;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.section-lead,.intro-head>p,.knowledge-head>p,.developer-heading>div>p { color: #75757c; }
.hero {
  --hero-header-height: 72px;
  /* Один и тот же шаг используют и промежутки между блоками, и поля экрана. */
  --hero-gap: clamp(10px, 1.7svh, 20px);
  min-height: 0; max-width: none; isolation: isolate;
}
.hero-grid { display: none; }
/* Первый экран делит свободную высоту поровну между всеми блоками.
   space-evenly в сочетании с вертикальным padding, равным gap, даёт
   одинаковые промежутки и между блоками, и над первым, и под последним:
   ни один блок не «забирает» воздух себе. */
.hero-content { display: flex; flex-direction: column; align-items: center; justify-content: space-evenly; gap: var(--hero-gap); width: 100%; max-width: 1360px; min-height: calc(100svh - var(--hero-header-height)); margin: auto; text-align: center; padding: var(--hero-gap) 32px; }
.hero h1 { font-size: clamp(48px,6.4vw,80px); line-height: 1.08; white-space: normal; text-wrap: balance; }
.hero-lead { font-size: 23px; margin: 14px auto 0; max-width: 680px; }
.hero .eyebrow { justify-content: center; margin-top: 16px; }
.hero .hero-badge { margin-top: 16px; }
.button-hero { min-width: 340px; font-size: 18px; padding: 21px 34px; margin-top: 28px; }
.hero-meta { font-size: 11px; margin-top: 19px; }
/* Расстояния между блоками задаёт только контейнер: собственные margin
   элементов обнулены, иначе промежутки перестают быть равными. Селекторы
   нарочно специфичнее мобильных правил из landing.css. */
.hero .hero-content>*,
.hero .hero-content>.hero-lead,
.hero .hero-content>.hero-meta,
.hero .hero-content>.hero-badge,
.hero .hero-content>.hero-badge.hero-intro,
.hero .hero-content>.button-hero { flex: 0 0 auto; margin-block: 0; }
/* Пилюли не растягиваются: высоту делят промежутки, а не зона навыков. */
.hero .hero-content>.skill-cloud { align-items: center; min-height: 0; }
/* Ключевые навыки: облако пилюль в первом экране. Список читается сразу.
   Пилюля — белая плашка с иконкой; при наведении она окрашивается в свой
   градиент, а над ней появляется белый тултип с полным описанием навыка.
   Тултип — псевдоэлемент на data-skill-note: нет лишней разметки и скрипта
   для текста, только корректировка положения у краёв окна. */
/* Облако читается одним компактным блоком: малый вертикальный зазор между
   строками, без распределения свободной высоты внутри набора. Тултип —
   абсолютный слой, поэтому он всплывает поверх и не сдвигает композицию.
   Масштаб задаёт единственная величина — шрифт облака: остальные размеры
   пилюли, иконки, пометки и тултипа считаются от него в em.
   Размер растёт вместе с окном линейно (1.15vw), но у него есть жёсткий
   потолок 16 px текста. Потолок достигается на 1440 px и дальше не растёт:
   на широком мониторе облако остаётся аккуратным набором пилюль высотой
   35 px, а не расползается в конский размер и не вылезает за экран. Ниже
   1440 px размер плавно уменьшается до 12 px на небольших ноутбуках. */
.hero .skill-cloud {
  font-size: clamp(12px, 1.15vw, 16px);
  display: flex; justify-content: center;
  width: 100%;
}
/* Первый экран не ограничивает облако своей шириной: иначе набор упирался
   бы в прежние 1360 px и сжимался бы раньше, чем нужно. */
.hero-content { max-width: 1700px; }
/* Ширина в em фиксирует ритм переноса: в ряд встают четыре навыка, остальные
   три идут второй строкой. Так набор никогда не распадается на 6 + 1
   с одинокой пилюлей на конце. */
.hero .skill-cloud { max-width: 60em; }
/* На телефоне облако чуть плотнее, чтобы пары пилюль вставали в строку,
   а на самых узких экранах не оставалось по одной пилюле в ряду. */
@media (max-width: 480px) {
  .hero .skill-cloud { font-size: 11px; }
}
@media (max-width: 360px) {
  .hero .skill-cloud { font-size: 10.4px; }
}
@media (hover: hover) {
  .hero .skill-cloud { padding-top: 4px; }
}
/* На узком окне с мышью тултип всплывает над первым рядом, поэтому нужен
   небольшой запас, чтобы подпись не накрывала подстрочник. */
@media (hover: hover) and (max-width: 560px) {
  .hero .skill-cloud { padding-top: 12px; }
}
.skill-cloud-list { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; column-gap: .5em; row-gap: .5em; margin: 0; padding: 0; list-style: none; }
.skill-cloud-list>li { position: relative; display: flex; }
/* Стрелка тултипа к пилюле: живёт на элементе списка, поэтому не мешает
   градиенту и тексту самой пилюли. */
.skill-cloud-list>li::after {
  content: ""; position: absolute; bottom: calc(100% + 5px); left: 50%; z-index: 31;
  width: 10px; height: 10px; border-radius: 2px; background: #fff;
  border-right: 1px solid #eceff4; border-bottom: 1px solid #eceff4;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translate(calc(-50% + var(--tip-shift,0px)), 6px) rotate(45deg);
  transition: opacity .18s cubic-bezier(.4,0,1,1), transform .2s cubic-bezier(.4,0,1,1), visibility 0s linear .2s;
}
.skill-cloud-list>li:hover::after {
  opacity: 1; visibility: visible;
  transform: translate(calc(-50% + var(--tip-shift,0px)), 0) rotate(45deg);
  transition: opacity .26s cubic-bezier(.2,.7,.2,1) .08s, transform .34s cubic-bezier(.16,1,.3,1) .08s, visibility 0s linear .08s;
}

.skill-tag {
  --tag-a: #0ea5c9; --tag-b: #3b6ef0; --tag-c: #7a5cf5; --tag-shadow: #0ea5c959;
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; gap: .4167em;
  height: 2.1667em; padding: 0 .75em;
  border: 1px solid #e4e9f1; border-radius: 999px;
  background: #fff; color: #262b33;
  font-size: 1em; font-weight: 650; letter-spacing: -.01em; line-height: 1;
  white-space: nowrap; cursor: default;
  box-shadow: 0 1px 2px #1018280d, 0 6px 16px -12px #16324f33;
  transition: color .18s var(--ease), border-color .18s var(--ease), background-color .18s var(--ease), box-shadow .18s var(--ease);
}
a.skill-tag { cursor: pointer; }
/* Иконка в фиксированном боксе: все знаки стоят на одной линии независимо
   от собственных пропорций рисунка. */
.skill-tag-icon { display: grid; place-items: center; flex: 0 0 1.0833em; width: 1.0833em; height: 1.0833em; color: var(--tag-a); transition: color .18s var(--ease); }
.skill-tag-icon svg { width: 1.0833em; height: 1.0833em; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.skill-tag-label { line-height: 1; }
/* Пометка «бета» меньше текста пилюли, поэтому её собственные em считаются
   от собственного кегля: 13 px высоты и 5 px отступа при 9 px текста. */
.skill-tag-flag { display: inline-flex; align-items: center; height: 1.4444em; padding: 0 .5556em; border-radius: 999px; background: #eff1f5; color: #7c828c; font-size: .75em; font-weight: 600; letter-spacing: .02em; line-height: 1; transition: background-color .18s var(--ease), color .18s var(--ease); }

/* Градиент навыка: отдельный слой под содержимым пилюли. Проявляется
   плавно и не трогает текст, иконку и тень. */
.skill-tag::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: linear-gradient(115deg, var(--tag-a), var(--tag-b) 56%, var(--tag-c));
  opacity: 0; transition: opacity .3s cubic-bezier(.4,0,.2,1);
}
/* Тултип: белая карточка над пилюлей, текст с заглавной буквы, с точкой.
   Появление мягкое и неторопливое: короткая пауза после наведения, подъём
   с едва заметным увеличением, плавное проявление. Уход короче и без
   задержки, чтобы подпись не «висела» при переводе курсора. */
.skill-tag::after {
  content: attr(data-skill-note);
  position: absolute; bottom: calc(100% + .8333em); left: 50%;
  z-index: 30; width: max-content; max-width: min(17em, 30vw); padding: .75em 1em;
  border-radius: 12px; border: 1px solid #eceff4; background: #fff; color: #1d1d1f;
  font-size: 1em; font-weight: 500; letter-spacing: 0; line-height: 1.4;
  text-align: left; white-space: normal;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translate(calc(-50% + var(--tip-shift,0px)), 10px) scale(.97);
  transform-origin: 50% 100%;
  box-shadow: 0 26px 48px -14px #10182847, 0 10px 22px -10px #1018282e;
  transition:
    opacity .22s cubic-bezier(.4,0,.6,1),
    transform .26s cubic-bezier(.4,0,.6,1),
    visibility 0s linear .26s;
}
.skill-cloud-list>li:hover>.skill-tag,
.skill-tag:focus-visible {
  color: #fff; border-color: transparent;
  box-shadow: 0 18px 32px -14px var(--tag-shadow), 0 8px 18px -10px #1018282e;
}
.skill-cloud-list>li:hover>.skill-tag::before,
.skill-tag:focus-visible::before { opacity: 1; }
.skill-cloud-list>li:hover>.skill-tag .skill-tag-icon,
.skill-tag:focus-visible .skill-tag-icon { color: #fff; }
.skill-cloud-list>li:hover>.skill-tag .skill-tag-flag,
.skill-tag:focus-visible .skill-tag-flag { background: #ffffff3d; color: #fff; }
/* Видимое состояние: плавный подъём с лёгким увеличением. */
.skill-cloud-list>li:hover>.skill-tag::after,
.skill-tag:focus-visible::after {
  opacity: 1; visibility: visible;
  transform: translate(calc(-50% + var(--tip-shift,0px)), 0) scale(1);
  transition:
    opacity .26s cubic-bezier(.2,.7,.2,1) .06s,
    transform .34s cubic-bezier(.16,1,.3,1) .06s,
    visibility 0s linear .06s;
}
.skill-cloud-list>li:hover { z-index: 40; }
.skill-tag:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; }
/* На сенсорных экранах наведения нет: описания остаются для скринридера. */
@media (hover: none) {
  .skill-tag::after,.skill-cloud-list>li::after { display: none; }
}
/* Prompt plate: a clean white surface raised by a deep shadow.
   The light comes from the pointer. A white glow sits under the cursor, and the cast
   shadow slides to the opposite side, so the plate reads as an object under a lamp.
   All light values are driven from JavaScript one frame at a time; CSS only maps them,
   so no CSS transition competes with the pointer and nothing snaps. */
.prompt-card {
  --light-x: 0; --light-y: 0; --light-depth: 0; --pointer-x: 50%; --pointer-y: 0%;
  position: relative; isolation: isolate;
  border: 1px solid #eef2f9; border-radius: 22px; padding: 22px 26px 20px;
  background-color: #fdfdff;
  background-image: linear-gradient(180deg,#fdfeff 0%,#f8fafd 100%);
  color: #314a70;
  box-shadow:
    0 1px 2px #1018280d,
    0 6px 14px -8px #10182814,
    0 16px 30px -24px #16233c26;
  transition: box-shadow .3s var(--ease),border-color .3s var(--ease);
}
/* The glow is white, never blue: a neutral light spot that lifts the plate to clean white.
   The radius is written into the gradient itself, so the centre stays exactly under the
   pointer: background-size would shift the whole paint area and the spot would drift. */
.prompt-card:before {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(340px 260px at var(--pointer-x) var(--pointer-y),#ffffff 0%,#ffffff 40%,#ffffff00 100%);
  opacity: var(--light-depth);
}
/* The deep shadow appears only around the viewport: off-screen plates keep the light
   version, so scrolling never paints dozens of layered shadows. */
.prompt-card.is-near {
  box-shadow:
    0 1px 2px #1018280f,
    calc(0px) calc(8px + var(--light-depth) * 8px) calc(16px + var(--light-depth) * 12px) calc(-8px - var(--light-depth) * 5px) #1018281c,
    0 calc(22px + var(--light-depth) * 14px) calc(40px + var(--light-depth) * 22px) calc(-26px - var(--light-depth) * 4px) #16233c38,
    calc(var(--light-x) * -30px) calc(14px + var(--light-y) * -7px + var(--light-depth) * 12px) calc(26px + var(--light-depth) * 16px) -10px #16233c4d,
    calc(var(--light-x) * -64px) calc(38px + var(--light-y) * -14px + var(--light-depth) * 30px) calc(72px + var(--light-depth) * 44px) -20px #16233c8a;
}
.prompt-text { font-size: 15px; line-height: 1.62; letter-spacing: -.002em; color: #2f4568; }
/* The role label stays, but quietly; the copy action is supporting detail that appears
   on approach, so the plate stays clean at rest. Keyboard focus reveals it as well.
   The button keeps its place, so nothing jumps when it fades in. */
.prompt-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 22px; margin-bottom: 6px;
}
.prompt-head>span { font: 9.5px/1.2 ui-monospace,SFMono-Regular,monospace; letter-spacing: .07em; text-transform: uppercase; color: #a3b1c4; display: flex; align-items: center; gap: 8px; transition: color .3s var(--ease); }
.prompt-head>span:before { content: none; }
.prompt-card:hover .prompt-head>span,
.prompt-card:focus-within .prompt-head>span { color: #7d90ab; }
.copy-prompt {
  display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0;
  padding: 5px 9px 5px 8px; border: 0; border-radius: 999px; min-height: 0;
  background: #f2f6fc; color: #7b8ea9; font-size: 10px; font-weight: 550; line-height: 1;
  opacity: 0; transform: translateY(-3px); pointer-events: none;
  transition: opacity .26s var(--ease),transform .26s var(--ease),background-color .2s,color .2s;
}
.prompt-card:hover .copy-prompt,
.prompt-card:focus-within .copy-prompt { opacity: 1; transform: none; pointer-events: auto; }
.copy-prompt:before { content: '⧉'; font-size: 12px; margin: 0; }
.copy-prompt:hover { background: #e7eefb; color: #3f6fc4; }
.copy-prompt:focus-visible { outline: 2px solid #4a7cf3; outline-offset: 2px; }
.prompt-choices { border-top-color: #eef2f9; }
.prompt-choices button { color: #8597b0; }
.prompt-choices button[aria-pressed=true] { color: #3f6fc4; background: #eaf0fd; }
/* Position dots instead of a counter, with arrows kept for stepping through examples.
   The dots show where you are in the set; the arrows are the familiar control. */
.prompt-pager { border-top-color: #eef2f9; padding-top: 14px; margin-top: 16px; gap: 16px; }
.prompt-example-title { font-size: 10.5px; color: #8697ae; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prompt-nav { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.prompt-nav>button {
  display: grid; place-items: center; width: 26px; height: 26px; padding: 0;
  border: 1px solid #e7edf7; border-radius: 50%; background: #f7fafe; color: #62809f;
  font-size: 13px; line-height: 1;
  transition: background-color .2s,border-color .2s,color .2s,transform .2s var(--ease);
}
.prompt-nav>button:hover { background: #eef4fd; border-color: #cfdcef; color: #3f6fc4; }
.prompt-nav>button:active { transform: scale(.94); }
.prompt-nav>button:focus-visible { outline: 2px solid #4a7cf3; outline-offset: 2px; }
.prompt-dots { display: flex; align-items: center; gap: 7px; }
.prompt-dot { position: relative; width: 6px; height: 6px; padding: 0; border: 0; border-radius: 999px; background: #d3dcea; cursor: pointer; transition: width .32s var(--ease),background-color .24s var(--ease); }
.prompt-dot:before { content: ''; position: absolute; inset: -9px; }
.prompt-dot:hover { background: #a9bcd6; }
.prompt-dot[aria-pressed=true] { width: 20px; background: linear-gradient(90deg,#4a7cf3,#8f63ff); }
.prompt-dot:focus-visible { outline: 2px solid #4a7cf3; outline-offset: 6px; }
@media (hover: none) {
  .copy-prompt { opacity: 1; transform: none; pointer-events: auto; }
}
.button-accent { position: relative; overflow: hidden; isolation: isolate; }
.button-accent:before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg,transparent 25%,#ffffff38 49%,transparent 72%); transform: translateX(-120%); transition: transform .8s var(--ease); }
.button-accent:hover:before { transform: translateX(120%); }
/* Primary actions carry the strongest accent on both product stories. */
.button.button-primary-action {
  max-width: 100%; min-height: 84px; padding: 22px 32px; gap: 18px;
  font-size: 24px; font-weight: 750; line-height: 1.25; letter-spacing: -.015em;
  color: #fff; border: 0;
  background: linear-gradient(110deg,#159fc1 0%,#3f74f3 52%,#8758f8 100%);
  box-shadow: 0 0 0 6px #4a7cf30b,0 18px 46px #4a7cf33d,inset 0 1px 0 #ffffff50;
}
.button-primary-action>span {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 40px; height: 40px; border-radius: 50%; background: #ffffff24;
  font-size: 27px; font-weight: 600;
}
.button.button-primary-action:hover {
  background: linear-gradient(110deg,#159fc1 0%,#3f74f3 52%,#8758f8 100%);
  box-shadow: 0 0 0 8px #4a7cf312,0 24px 58px #4a7cf350,inset 0 1px 0 #ffffff60;
}
.button-primary-action:focus-visible { outline: 3px solid #3f74f3; outline-offset: 8px; }
.hero .button.button-primary-action,.final-cta>.button.button-primary-action,.company-hero .button.button-primary-action {
  font-size: 28px; min-height: 96px; padding: 24px 40px; gap: 24px;
}
.hero .button-primary-action,.final-cta:not(.company-final)>.button-primary-action { min-width: 480px; }
.company-hero .button-primary-action { width: 100%; max-width: 480px; }
.individual-install-action>.button.button-primary-action,.company-license .button.button-primary-action {
  font-size: 22px; padding: 18px 24px; min-height: 76px;
}
.individual-install-action>.button-primary-action>span,.company-license .button-primary-action>span { width: 32px; height: 32px; font-size: 24px; }
.site-header .button.button-primary-action {
  min-height: 44px; padding: 10px 18px; gap: 10px; font-size: 15px; white-space: nowrap;
  box-shadow: 0 5px 18px #4a7cf32b;
}
.site-header .button.button-primary-action:hover {
  background: linear-gradient(110deg,#159fc1 0%,#3f74f3 52%,#8758f8 100%);
  box-shadow: 0 7px 24px #4a7cf34d;
}
.site-header .button-primary-action>span { width: auto; height: auto; background: none; font-size: 20px; }
@media(max-width:700px) {
  .hero { --hero-header-height: 104px; }
  .site-header .button.button-primary-action { min-height: 34px; font-size: 11px; padding: 8px 10px; gap: 0; }
  .site-header .button-primary-action>span { display: none; }
}
@media(max-width:560px) {
  .hero .button.button-primary-action,.final-cta>.button.button-primary-action,.company-hero .button.button-primary-action {
    min-width: 0; width: 100%; min-height: 78px; padding: 20px 16px; gap: 14px;
    font-size: clamp(19px,5.3vw,22px);
  }
  .button-primary-action>span { width: 36px; height: 36px; font-size: 25px; }
  .individual-install-action>.button.button-primary-action,.company-license .button.button-primary-action { font-size: 20px; padding: 18px 16px; gap: 12px; }
}
.site-header { transition: background .4s,color .4s,border-color .4s; }
.site-header.scrolled { box-shadow: 0 2px 22px #00000005; }
/* Верхняя кнопка установки не спорит с главной кнопкой первого экрана.
   Пока большая кнопка на виду, в шапке стоит тихая белая кнопка с тонкой рамкой:
   белая плёнка ::after гасит фирменный градиент и блик, текст становится приглушённым.
   Когда главная кнопка уходит под шапку, класс is-quiet снимается и кнопка плавно
   возвращается к своему яркому виду. Бизнес-шапку с «Консультацией» не трогаем. */
body[data-audience=product] .site-header .header-download {
  position: relative; isolation: isolate;
  transition: transform .25s,color .38s var(--ease),box-shadow .38s var(--ease),background-color .38s var(--ease);
}
body[data-audience=product] .site-header .header-download:after {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: #ffffff; opacity: 0;
  transition: opacity .38s var(--ease),background-color .22s;
}
body[data-audience=product] .site-header .header-download.is-quiet {
  color: #6e6e73; box-shadow: inset 0 0 0 1px #e5e7eb;
}
body[data-audience=product] .site-header .header-download.is-quiet:after { opacity: 1; }
body[data-audience=product] .site-header .header-download.is-quiet:hover,
body[data-audience=product] .site-header .header-download.is-quiet:focus-visible {
  color: #3d3d42; transform: none;
  box-shadow: inset 0 0 0 1px #d7dbe2,0 6px 18px #1d1d1f0f;
}
body[data-audience=product] .site-header .header-download.is-quiet:hover:after,
body[data-audience=product] .site-header .header-download.is-quiet:focus-visible:after { background: #f6f8fc; }
.final-cta { padding-block: 100px 120px; }
.final-cta h2 { font-size: clamp(64px,9vw,124px); line-height: 1.08; }
.final-cta .section-lead { font-size: 25px; }
.final-cta .prompt-card { max-width: 660px; margin-block: 40px; }
.final-cta .button { padding: 22px 38px; font-size: 18px; min-width: 370px; }
.intro { padding-top: 105px; }
.story-heading h2 { font-size: clamp(42px,5vw,68px); }
.story-media,.wide-media,.showcase>.carousel,.kb-image,.analytics-media,.dev-screenshot { border-radius: 24px; }
.story-media { box-shadow: 0 30px 70px #00000006; }
.role-links a { font-weight: 600; font-size: 15px; transition: color .3s; }
.role-links span { transition: transform .4s var(--ease); }
.role-links a:hover span { transform: translate(4px,4px); }

/* The scene uses real HTML/CSS documents, so large travel and zoom stay crisp. */
.file-flight { position: relative; height: 195svh; min-height: 1380px; background: #f5f5f7; isolation: isolate; }
.flight-sticky { position: sticky; top: 72px; height: calc(100svh - 72px); min-height: 620px; overflow: hidden; }
.flight-sticky:before { content: ''; position: absolute; width: 820px; height: 550px; top: 110px; left: calc(50% - 410px); border-radius: 50%; background: radial-gradient(ellipse,#d7e7ff 0%,#ece5ff55 40%,transparent 70%); transform: translate3d(var(--glow-x,0px),var(--glow-y,0px),0) scale(var(--glow-scale,1)); z-index: -1; }
.flight-heading { text-align: left; width: 52%; padding: 65px 0 0 max(48px,calc((100vw - 1120px)/2)); position: relative; z-index: 3; transform: translateY(var(--title-y,0px)); }
.flight-heading h2 { font-size: clamp(44px,4.9vw,68px); line-height: 1.06; }
.flight-heading .section-lead { margin: 22px 0 0; font-size: 18px; max-width: 450px; }
.flight-heading .eyebrow { margin-top: 15px; }
.flight-prompt { position: relative; z-index: 5; width: 430px; max-width: 43%; margin: 28px 0 0 max(48px,calc((100vw - 1120px)/2)); background-color: #fffffff2; }
.flight-rail { position: absolute; left: 32px; right: 32px; bottom: 26px; display: flex; align-items: center; gap: 17px; font-size: 10px; color: #8b8b92; z-index: 6; }
.flight-rail>span { flex: 1; height: 1px; background: #d9dce3; position: relative; }
.flight-rail>span:before { content: ''; position: absolute; inset: 0; background: var(--brand-gradient); transform: scaleX(var(--flight-progress,0)); transform-origin: left; }
.flight-rail b { font-size: 11px; font-weight: 500; color: #62708a; }
.file-flight .paper-orbit { inset: 0; width: 100%; height: 100%; transform: none; perspective: 1000px; }
.file-flight .orbit-line { width: 840px; height: 420px; left: calc(50% - 420px); top: 300px; border-color: #a9badc35; transform: rotateX(65deg) rotateZ(var(--orbit-angle,0deg)); }
.file-flight .orbit-two { width: 1080px; height: 570px; left: calc(50% - 540px); top: 220px; opacity: .5; }
.file-flight .paper { left: calc(75% - 100px); top: 140px; width: 200px; border-radius: 12px; box-shadow: 0 24px 55px #24304718; transform: translate3d(var(--file-x,0px),var(--file-y,0px),0) rotate(var(--file-angle,0deg)) rotateY(var(--file-tilt,0deg)) scale(var(--file-scale,1)); will-change: transform; }
.file-flight .paper-sheet { --file-x: -390px; --file-y: 55px; --file-angle: -22deg; }
.file-flight .paper-report { --file-x: 20px; --file-y: 10px; --file-angle: 8deg; z-index: 3; }
.file-flight .paper-pdf { --file-x: 390px; --file-y: 85px; --file-angle: 22deg; }
.file-flight .paper-report h3 { font-size: 20px; }
.file-flight .paper-pdf h3 { font-size: 17px; }
.file-flight .paper .mini-chart { height: 40px; margin-block: 14px; }
.file-flight .paper-lines { margin-block: 14px; }
.file-flight .orbit-result { left: max(48px,calc((100vw - 1120px)/2)); top: auto; bottom: 72px; transform: translateY(var(--result-y,20px)); opacity: var(--result-opacity,0); box-shadow: 0 15px 45px #4a7cf315; }

/* Business alternates full dark bands with white inset chapters. */
body[data-audience=business] { background: #090a0d; }
body[data-audience=business] .site-header { background: #090a0ded; border-color: #ffffff17; color: #f5f5f7; }
/* Подложка остаётся чёрной и в бизнес-шапке: тонкая рамка держит форму на тёмном фоне. */
body[data-audience=business] .audience-switch { background: #111113; border: 1px solid #ffffff1f; transition: background-color .34s var(--ease),border-color .34s var(--ease); }
body[data-audience=business] .audience-switch button { color: #e8e9ef; font-weight: 700; }
body[data-audience=business] .audience-switch button:not([aria-pressed=true]):hover { color: #ffffff; }
body[data-audience=business] .audience-switch button[aria-pressed=true] { background: #f5f5f7; color: #111113; font-weight: 750; box-shadow: 0 1px 6px #00000059; }
body[data-audience=business] .header-download { border-color: #ffffff29; }
body[data-audience=business] .header-download:hover { background: #25262e; }
body[data-audience=business] .menu-button span { background: #fff; }
body[data-audience=business] .mobile-nav { background: #111218; border-color: #ffffff20; color: #fff; }
.company-band { position: relative; isolation: isolate; overflow: clip; }
.company-band.is-dark { --ink: #f5f5f7; --muted: #93959f; --line: #ffffff1c; --panel: #16171e; --link: #89a7ff; color: var(--ink); background: #090a0d; }
.company-band.is-light { background: #fff; color: #202023; border-radius: 32px; width: calc(100% - 40px); max-width: 1440px; margin: 20px auto; }
.company-band .company-section { border-top: 0; padding-block: 105px; }
.company-band .section-shell { width: min(1120px,calc(100% - 96px)); }
.company-hero { padding-block: 100px 110px; gap: 65px; grid-template-columns: 1.15fr 1fr; }
.company-hero h1 { font-size: clamp(44px,5vw,72px); }
.company-hero .section-lead { font-size: 19px; color: #a0a2ae; }
.company-hero .eyebrow { color: #777b8b; }
.company-price-preview { color: #e1e3ef; }
.company-price-preview>span { color: #838694; }
.company-hero:before { content: ''; width: 640px; height: 640px; position: absolute; top: 30px; right: -80px; z-index: -1; background: radial-gradient(ellipse,#3869d21c,transparent 65%); pointer-events: none; }
/* On the dark bands the same plate works by light, not by shadow: the pointer carries
   a soft near-white glow inside the card and a faint halo outside it. No shadow offset
   here — the light source moves instead of the cast shadow, so the two themes stay
   related but behave differently. The same frame-driven depth keeps it snap-free. */
.company-band.is-dark .prompt-card {
  border-color: #ffffff16; color: #d3e0fb;
  background-color: #0f141e;
  background-image: linear-gradient(180deg,#161c28 0%,#0d121b 100%);
  box-shadow:
    inset 0 1px 0 #ffffff1a,
    0 24px 60px -40px #000000b8;
}
/* A wide, low-contrast pool of light. On a dark plate a small bright spot reads as a
   lamp glare; a large soft field reads as ambient lighting. Radius is generous, the
   peak opacity stays low, and the falloff is gradual. */
.company-band.is-dark .prompt-card:before {
  background: radial-gradient(620px 440px at var(--pointer-x) var(--pointer-y),#f4f7ff 0%,#dfe7ff 28%,#b6c6ff24 60%,#ffffff00 100%);
  opacity: calc(var(--light-depth) * .1);
}
/* The halo is wider and weaker than in the light theme, and it travels less: on black
   a large offset reads as a hard directional lamp, while soft ambient light barely shifts. */
.company-band.is-dark .prompt-card.is-near {
  box-shadow:
    inset 0 1px 0 #ffffff1a,
    0 26px 66px -42px #000000c4,
    calc(var(--light-x) * -7px) calc(var(--light-y) * -4px + 4px) calc(58px + var(--light-depth) * 34px) calc(-38px + var(--light-depth) * 12px) #7d9bff33,
    calc(var(--light-x) * -13px) calc(var(--light-y) * -7px + 10px) calc(96px + var(--light-depth) * 54px) calc(-58px + var(--light-depth) * 16px) #6f8dff1f;
}
.company-band.is-dark .prompt-head>span { color: #7f93b7; }
.company-band.is-dark .copy-prompt { background: #ffffff0f; color: #9db0d2; }
.company-band.is-dark .copy-prompt:hover { background: #ffffff1c; color: #cfdcff; }
.company-band.is-dark .prompt-text { color: #d3e0fb; }
.company-band.is-dark .prompt-choices,.company-band.is-dark .prompt-pager { border-color: #ffffff12; }
.company-band.is-dark .prompt-choices button[aria-pressed=true] { background: #3e5e9638; color: #aac5ff; }
.company-band.is-dark .prompt-example-title { color: #8796b1; }
.company-band.is-dark .prompt-nav>button { background: #ffffff0d; border-color: #ffffff1a; color: #9db0d2; }
.company-band.is-dark .prompt-nav>button:hover { background: #ffffff1c; border-color: #ffffff2e; color: #d6e2ff; }
.company-band.is-dark .prompt-nav>button:focus-visible { outline-color: #8fa8ff; }
.company-band.is-dark .prompt-dot { background: #ffffff2b; }
.company-band.is-dark .prompt-dot:hover { background: #ffffff4d; }
.company-band.is-dark .prompt-dot[aria-pressed=true] { background: linear-gradient(90deg,#5f8bff,#a07dff); box-shadow: 0 0 12px #6f8dff66; }
.company-band.is-dark .section-lead { color: #9699a5; }
.company-band.is-dark .company-role-copy .company-role-value { color: #d6dded; }
.company-band.is-dark .company-card { background: #14151b; border-color: #ffffff16; }
.company-band.is-dark .company-role-visual { background: #1b1d25; border: 1px solid #ffffff15; }
.company-band.is-dark .tech-tags span { background: #1d2331; color: #98a7c5; border-color: #ffffff13; }
.company-band.is-dark .module-status { background: #283855; color: #afc9ff; }
.company-band.is-dark .company-rollout-grid article { border-color: #38476f; }
.company-band.is-dark .company-individual-note button { color: #91b1ff; }
.company-system { position: relative; border-color: #9aaffb29; background: linear-gradient(155deg,#1d2233,#101117 60%); border-radius: 28px; box-shadow: 0 45px 110px #00000080; transform: perspective(1200px) translateY(var(--system-y,0px)) rotateY(var(--system-rotate,-7deg)) rotateX(var(--system-tilt,3deg)); transform-origin: center; }
.company-system:before { content: ''; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; border: 1px solid #8ca3ff35; }
.system-company div>span,.system-inputs span,.system-agent>span:last-child,.system-result div>span { color: #8a90a7; }
.system-inputs>div { background: #1b1f2c; border-color: #ffffff14; }
.system-agent { background: linear-gradient(110deg,#172538,#242039); border-color: #829eff6b; box-shadow: 0 0 45px #6274fc15; }
.system-agent:before,.system-agent:after { width: 2px; background: linear-gradient(#38bdd9,#6b7dff); transform: scaleY(var(--system-flow,1)); transform-origin: center; }
.system-teams span { background: #222b40; color: #a7b9df; }
.system-result { background: #171b26; border-color: #ffffff16; }
.company-system .result-check { background: #263754; border-color: #6286c66b; color: #a3c3ff; }
.company-system .diagram-caption { color: #696d80; }
.company-system .system-inputs>div { transform: translateY(var(--input-y,0px)); }
.company-system .system-result { transform: translateY(var(--output-y,0px)); }
.company-card { border-radius: 23px; padding: 32px; background: #f5f5f7; border-color: transparent; transition: border-color .4s,background .4s,transform .8s var(--ease); }
.company-card h3 { font-size: 25px; }
.company-card:hover { border-color: #829cff55; }
.module-count { display: block; font-size: 80px; font-weight: 700; line-height: 1; letter-spacing: -.065em; margin-bottom: 20px; background: var(--brand-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
.company-module-grid .company-card:nth-child(3) { background: linear-gradient(135deg,#202742,#221d33); border-color: #7b8bff40; }
.company-license { background: #f5f5f7; border: 0; border-radius: 26px; padding: 50px; }
.company-license .price { font-size: 69px; letter-spacing: -.05em; }
.company-final h2 { font-size: clamp(46px,6.6vw,90px); }
body[data-audience=business] .site-footer { color: #edeef4; border-color: #ffffff1c; padding-top: 55px; }
body[data-audience=business] .site-footer>.footer-company { color: #a6a9b6; }
body[data-audience=business] .site-footer>.footer-company h2 { color: #d8dae3; }
body[data-audience=business] .site-footer>.footer-company a:hover { color: #ffffff; }

/* Staggered reveals and modest depth on content; large motion stays in illustrations. */
.motion-ready .reveal { transform: translate3d(0,calc(48px + var(--depth-y,0px)),0); transition: opacity .9s var(--ease),transform 1.1s var(--ease); transition-delay: var(--reveal-delay,0ms); }
.motion-ready .reveal.is-visible { transform: translate3d(0,var(--depth-y,0px),0); }
.scroll-media,.motion-ready .scroll-media.reveal.is-visible { transform: perspective(1500px) translateY(var(--media-y,0px)) rotateX(var(--media-angle,0deg)) scale(var(--media-scale,1)); transform-origin: center; }
.motion-ready .scroll-media.reveal { transform: perspective(1500px) translateY(48px) rotateX(4deg) scale(.96); }
.motion-ready .hero h1,.motion-ready .hero-lead,.motion-ready .hero-badge,.motion-ready .button-hero,.motion-ready .company-hero h1 { animation: opening-reveal 1.1s var(--ease) both; }
.motion-ready .hero-lead { animation-delay: .1s; }
.motion-ready .hero-badge { animation-delay: .15s; }
.motion-ready .button-hero { animation-delay: .3s; }
@keyframes opening-reveal { from { opacity: 0; transform: translateY(34px); } to { opacity: 1; transform: none; } }
@media(min-width:901px) and (max-height:800px) {
  .hero h1 { font-size: clamp(52px,5.9vw,76px); }
  .hero-lead { margin-top: 20px; font-size: 18px; }
  .hero .eyebrow { margin-top: 12px; }
  .hero .hero-badge { margin-top: 14px; }
  .company-hero .prompt-text { min-height: 3.2em; }
  .button-hero { margin-top: 18px; padding-block: 18px; font-size: 17px; }
  .hero-meta { margin-top: 15px; }
  .company-hero { padding-block: 55px 75px; }
  .company-hero h1 { font-size: 60px; }
  .company-hero .section-lead { margin-top: 20px; font-size: 17px; }
  .company-hero .eyebrow { margin-top: 14px; }
  .company-hero .prompt-card { margin-top: 20px; padding: 18px 22px; }
  .company-hero-cta { margin-top: 20px; padding-block: 16px; }
  .company-price-preview { margin-top: 14px; }
  .flight-heading { padding-top: 45px; }
  .flight-heading h2 { font-size: 56px; }
  .story-sticky { top: 88px; }
  .story-heading { margin-bottom: 25px; }
  .story-heading h2 { font-size: 46px; }
  .story-heading .section-lead { margin-top: 14px; font-size: 16px; }
  .story-heading .eyebrow { margin-top: 12px; }
  .story-step .prompt-text { min-height: 3.2em; }
  .screenshot-caption { margin-top: 18px; }
}
@media(max-width:900px) {
  .hero { min-height: 0; }
  .hero-content { padding-inline: 24px; }
  .hero h1 { font-size: clamp(42px,6.6vw,60px); }
  .hero-lead { font-size: 20px; }
  /* На сенсорных экранах наведения нет: описание остаётся для скринридера,
     а облако собирается плотно, без пустот под раскрытие. */
  .file-flight { height: auto; min-height: 0; }
  .flight-sticky { position: relative; top: auto; height: 800px; }
  .flight-heading { width: 100%; text-align: center; padding: 55px 32px 0; }
  .flight-heading .section-lead { margin: 18px auto 0; max-width: 640px; }
  .flight-heading h2 { font-size: 54px; }
  .flight-prompt { width: calc(100% - 64px); max-width: 620px; margin: 25px auto 0; }
  .file-flight .paper { top: 420px; width: 170px; left: calc(50% - 85px); padding: 17px; }
  .file-flight .paper-sheet { --file-x: -215px; --file-y: 25px; --file-angle: -12deg; }
  .file-flight .paper-report { --file-x: 0px; --file-y: 0px; --file-angle: 4deg; }
  .file-flight .paper-pdf { --file-x: 215px; --file-y: 30px; --file-angle: 12deg; }
  .file-flight .orbit-result { left: 50%; --result-opacity: 1; --result-y: 0px; transform: translate(-50%,var(--result-y,0px)); }
  .flight-rail>span:before { transform: scaleX(1); }
  .story-step { display: block; margin-bottom: 28px; }
  .company-band .section-shell { width: calc(100% - 64px); }
  .company-band .company-section { padding-block: 75px; }
  .company-hero { grid-template-columns: 1fr; gap: 55px; padding-block: 65px 85px; }
  .company-hero-copy { max-width: 650px; }
  .company-hero h1 { font-size: 62px; }
  .company-system { transform: none; max-width: 580px; }
  .company-license .price { font-size: 59px; }
  .final-cta .section-lead { font-size: 22px; }
  .motion-ready .reveal,.motion-ready .reveal.is-visible { transform: none; }
  .scroll-media,.motion-ready .scroll-media.reveal,.motion-ready .scroll-media.reveal.is-visible { transform: none; }
}
@media(max-width:560px) {
  h2 { font-size: 39px; }
  .company-heading h2 { overflow-wrap: anywhere; }
  .hero-content { padding: clamp(24px,4svh,40px) 20px; }
  .hero h1 { font-size: clamp(32px,8.2vw,46px); }
  .hero-lead { font-size: 17px; }
  .prompt-card { padding: 18px; border-radius: 15px; }
  .prompt-text { font-size: 13px; }
  .button-hero { min-width: 0; font-size: 16px; padding: 20px 25px; }
  .hero-meta { font-size: 9px; }
  .hero-platforms { font-size: 10px; }
  .skill-tag::after { max-width: 220px; font-size: 11.5px; }
  .hero .skill-cloud { padding-top: 0; }
  .flight-sticky { height: 820px; }
  .flight-heading { padding: 45px 20px 0; }
  .flight-heading h2 { font-size: 32px; }
  .flight-heading .section-lead { font-size: 16px; }
  .flight-prompt { width: calc(100% - 40px); margin-top: 24px; }
  .file-flight .paper-orbit { top: 145px; width: 640px; left: calc(50% - 320px); transform: scale(.67); transform-origin: center 400px; }
  .file-flight .paper { top: 385px; }
  .file-flight .paper-sheet { --file-x: -170px; }
  .file-flight .paper-pdf { --file-x: 170px; }
  .file-flight .orbit-result { bottom: 145px; }
  .flight-rail { left: 20px; right: 20px; bottom: 27px; gap: 10px; }
  .flight-rail b { font-size: 9px; }
  .story-heading h2 { font-size: 39px; }
  .company-band.is-light { width: calc(100% - 16px); border-radius: 23px; margin-block: 8px; }
  .company-band .section-shell { width: calc(100% - 40px); }
  .company-band .company-section { padding-block: 58px; }
  .company-hero { padding-block: 45px 65px; gap: 40px; }
  .company-hero h1 { font-size: 43px; }
  .company-hero .section-lead { font-size: 17px; }
  .company-system { padding: 20px; border-radius: 22px; }
  .company-card { padding: 26px; }
  .company-license { padding: 27px; }
  .company-license .price { font-size: 53px; }
  .company-final h2 { font-size: 43px; }
  .final-cta { padding: 65px 0 75px; }
  .final-cta h2 { font-size: 56px; }
  .final-cta .section-lead { font-size: 19px; }
  .final-cta .prompt-card { margin-block: 30px; }
  .final-cta .button { min-width: 0; font-size: 15px; padding-inline: 18px; }
}
/* Keep the primary action in the first viewport on short screens. */
@media(max-height:740px) {
  /* Шаг промежутков и полей меньше, но остаётся единым для всего экрана. */
  .hero { --hero-gap: clamp(8px,1.4svh,13px); }
  .hero .hero-badge.hero-intro { padding: 6px 13px; font-size: 12px; }
  .hero-platforms { font-size: 10px; }
  .hero h1 { font-size: clamp(30px,4.5vw,54px); }
  .hero-lead { font-size: clamp(15px,1.5vw,18px); }
  .hero .button.button-primary-action { min-height: 56px; padding: 11px 20px; gap: 12px; font-size: clamp(16px,1.7vw,20px); }
  /* Облако остаётся плотным блоком и на низких окнах: запас нужен только
     под тултип, который всплывает поверх и не сдвигает композицию. */
  .hero .hero-content>.skill-cloud { padding-top: 4px; }
  .skill-tag::after { bottom: calc(100% + .6667em); padding: .6667em .9167em; font-size: 11.5px; max-width: 240px; }
  .skill-cloud-list>li::after { bottom: calc(100% + 3px); }
}
@media(max-height:520px) {
  .hero { --hero-gap: 8px; }
  .hero .hero-badge.hero-intro { padding: 5px 11px; font-size: 11.5px; }
  .hero-platforms { font-size: 9px; }
  .hero h1 { font-size: clamp(26px,6.6svh,38px); }
  .hero-lead { font-size: 14px; }
  /* На очень низких окнах тултип отключён: места на подпись нет. Пилюли
     ужимаются через шрифт облака, чтобы набор не отнимал высоту. */
  .hero .hero-content>.skill-cloud { font-size: 11px; padding-top: 0; }
  .skill-tag::after,.skill-cloud-list>li::after { display: none; }
  .hero .button.button-primary-action { min-height: 56px; padding: 12px 20px; font-size: 19px; }
}
@media(prefers-reduced-motion:reduce) {
  .audience-switch.is-switching button[aria-pressed=true] { animation: none; }
  .audience-switch button { transition: none; }
  .motion-ready .reveal,.motion-ready .reveal.is-visible { opacity: 1; transform: none; transition: none; }
  .motion-ready .hero h1,.motion-ready .hero-lead,.motion-ready .hero-badge,.motion-ready .button-hero,.motion-ready .company-hero h1 { animation: none; }
  .file-flight { height: auto; min-height: 0; }
  .flight-sticky { position: relative; top: auto; height: 820px; }
  .story-sticky { top: auto; }
  .story-copy { height: auto; }
  .flight-heading,.company-system,.system-inputs>div,.system-result { transform: none !important; }
  .scroll-media,.motion-ready .scroll-media.reveal,.motion-ready .scroll-media.reveal.is-visible { transform: none; }
  .file-flight .paper-sheet { --static-x: -150px; --static-y: 55px; --static-angle: -10deg; }
  .file-flight .paper-report { --static-x: 135px; --static-y: 160px; --static-angle: 8deg; }
  .file-flight .paper-pdf { --static-x: -35px; --static-y: 225px; --static-angle: -4deg; }
  .file-flight .paper { transform: translate(var(--static-x),var(--static-y)) rotate(var(--static-angle)) !important; }
  .file-flight .orbit-result { opacity: 1; transform: none !important; }
  .button-accent:before { display: none; }
  body[data-audience=product] .site-header .header-download,
  body[data-audience=product] .site-header .header-download:after { transition: none; }
}
@media(prefers-reduced-motion:reduce) and (max-width:900px) {
  .file-flight .orbit-result { transform: translateX(-50%) !important; }
  .file-flight .paper-sheet { --static-x: -215px; --static-y: 25px; --static-angle: -12deg; }
  .file-flight .paper-report { --static-x: 0px; --static-y: 0px; --static-angle: 4deg; }
  .file-flight .paper-pdf { --static-x: 215px; --static-y: 30px; --static-angle: 12deg; }
}
@media(prefers-reduced-motion:reduce) and (max-width:560px) {
  .file-flight .paper-sheet { --static-x: -170px; }
  .file-flight .paper-pdf { --static-x: 170px; }
}