@font-face {
  font-family: InterLocal;
  src: url('assets/fonts/InterVariable.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

@font-face { font-family: Unbounded; src: url('assets/fonts/unbounded-600-cyrillic.woff2') format('woff2'); font-weight: 600; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: Unbounded; src: url('assets/fonts/unbounded-600-latin.woff2') format('woff2'); font-weight: 600; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* основной шрифт текста - Montserrat (SIL OFL), свой файл с нашего сервера. макеты интерфейса внутри телефонов остаются на Inter */
@font-face { font-family: Montserrat; src: url('assets/fonts/montserrat-cyrillic.woff2') format('woff2'); font-weight: 100 900; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: Montserrat; src: url('assets/fonts/montserrat-latin.woff2') format('woff2'); font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* на больших мониторах страница увеличивается целиком: --z ставит скрипт в <head>.
   единицы окна (vh, vw) поделены на --z, чтобы экраны оставались ровно в окно */
html { zoom: var(--z, 1); }
:root {
  --font: Montserrat, 'SF Pro Display', 'SF Pro Text', -apple-system, BlinkMacSystemFont, InterLocal, 'Helvetica Neue', Arial, sans-serif;
  --mono: 'SF Mono', ui-monospace, 'JetBrains Mono', Menlo, Consolas, monospace;
  --black: #000;
  --ink: #1d1d1f;
  --gray: #f5f5f7;
  --muted: #6e6e73;
  --muted-dark: #86868b;
  --line-light: #d2d2d7;
  --blue: #0071e3;
  --blue-hover: #0077ed;
  --link: #0066cc;
  --link-dark: #2997ff;
  --tile: #161617;
  /* токены холста, как в настоящей Studio */
  --st-bg: #101011;
  --st-card: #19191a;
  --st-soft: rgba(255, 255, 255, .07);
  --st-line: rgba(255, 255, 255, .1);
  --st-line-strong: rgba(255, 255, 255, .23);
  --st-text: #efefed;
  --st-muted: #9b9b98;
  --st-muted-strong: #c2c2be;
  --st-success: #79b596;
  --st-danger: #e58a91;
  --st-run: #8ab4ff;
  --ease: cubic-bezier(.28, .11, .32, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --nav-h: 0px;
  --gutter: max(22px, env(safe-area-inset-left));
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--nav-h); }
body {
  margin: 0;
  background: var(--black);
  color: var(--gray);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.47;
  letter-spacing: -.022em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img, svg { display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; letter-spacing: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, p, ol, ul, dl, dd { margin: 0; }
ol, ul { padding: 0; list-style: none; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--link-dark); outline-offset: 3px; border-radius: 6px; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sprite symbol, svg use { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 999px; background: var(--gray); color: var(--ink); font-size: 14px; transition: top .2s; }
.skip:focus { top: 12px; }

.wrap { width: min(980px, 100% - 2 * var(--gutter)); margin-inline: auto; }
.wrap--wide { width: min(1280px, 100% - 2 * var(--gutter)); }
.wrap--mid { width: min(1120px, 100% - 2 * var(--gutter)); }
.br-sm { display: none; }

/* общие элементы */
.pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 11px 22px; border-radius: 980px;
  font-size: 17px; line-height: 1.18; letter-spacing: -.022em; white-space: nowrap;
  transition: background-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.pill svg { width: 18px; height: 18px; }
.pill--blue { background: var(--blue); color: #fff; }
.pill--blue:hover { background: var(--blue-hover); }
.pill--sm { min-height: 28px; padding: 4px 12px; font-size: 12px; letter-spacing: -.01em; }
.pill--light { background: var(--ink); color: #fff; }
.pill--light:hover { background: #000; }
.pill--ghost { border: 1px solid rgba(255, 255, 255, .28); color: var(--gray); }
.pill--ghost:hover { border-color: rgba(255, 255, 255, .6); }
.pill:active { transform: scale(.97); }

.link { display: inline-flex; align-items: center; gap: 4px; color: var(--link-dark); font-size: 17px; }
.link svg { width: 16px; height: 16px; transition: transform .25s var(--ease); }
.link:hover { text-decoration: underline; text-underline-offset: 3px; }
.link:hover svg { transform: translateX(2px); }
.link--light { color: var(--link-dark); }

.section-title { font-size: clamp(40px, calc(6.2vw / var(--z, 1)), 80px); line-height: 1.05; font-weight: 600; letter-spacing: -.028em; }
.section-title span { color: var(--muted-dark); }
.section-title--dark { color: var(--ink); }
.section-title--dark span { color: var(--muted); }

.chip { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; background: var(--st-soft); color: var(--st-muted-strong); font-size: 11px; letter-spacing: .02em; white-space: nowrap; }
.chip--muted { color: var(--st-muted); }

.round-btn { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(66, 66, 69, .72); color: rgba(255, 255, 255, .8); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); transition: background-color .2s; }
.round-btn:hover { background: rgba(80, 80, 84, .82); }
.round-btn svg { width: 18px; height: 18px; }

/* навигация */

/* hero */
.hero__copy { position: relative; z-index: 2; padding-top: clamp(84px, calc(12vh / var(--z, 1)), 124px); text-align: center; }
.hero__eyebrow { color: var(--muted-dark); font-size: 21px; font-weight: 600; letter-spacing: .011em; }
.hero__title { margin-top: 6px; font-size: clamp(56px, calc(8.6vw / var(--z, 1)), 112px); line-height: 1; font-weight: 600; letter-spacing: -.035em; }
.hero__lead {
  margin-top: 10px; font-size: clamp(30px, calc(4vw / var(--z, 1)), 54px); line-height: 1.08; font-weight: 600; letter-spacing: -.03em;
  background: linear-gradient(100deg, #f5f5f7 10%, #9fb6ff 50%, #c6a6ff 80%); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero__cta { display: flex; justify-content: center; align-items: center; gap: 28px; margin-top: 26px; flex-wrap: wrap; }
.hero__meta { margin-top: 14px; color: var(--muted-dark); font-size: 14px; letter-spacing: -.01em; }

/* hero: на экране один объект - заголовок или пара «вопрос - ответ». анимации слов и сетки точек взяты из веб-Докки */
.hero { position: relative; height: calc(100vh / var(--z, 1)); height: calc(100svh / var(--z, 1)); min-height: 600px; background: #000; overflow: hidden; }
.show { position: absolute; inset: 0; color: #f5f5f5; }
/* снизу отступ больше: оптический центр чуть выше геометрического */
.show__item { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; padding: 40px var(--gutter) 110px; animation: show-in .5s var(--ease-out) both; }
.show__item.is-out { animation: show-out .32s cubic-bezier(.4, 0, .7, .2) forwards; }
.hero .hero__copy { padding-top: 0; }
@keyframes show-in { from { opacity: 0; transform: translateY(46px) scale(.96); filter: blur(12px); } }
@keyframes show-out { to { opacity: 0; transform: translateY(-46px) scale(.97); filter: blur(12px); } }
.show__pair { display: grid; gap: clamp(22px, calc(4vh / var(--z, 1)), 40px); width: min(760px, calc(100vw / var(--z, 1)) - 2 * var(--gutter)); }
/* вопрос сначала крупный по центру, когда Докки отвечает - уменьшается и уходит вправо, как в чате */
/* бабл всегда в финальной разметке; крупным его делает только transform из initHero */
.show__bubble { justify-self: end; max-width: min(520px, 86%); padding: 10px 15px; border-radius: 20px; background: #244b75; font-size: clamp(15px, calc(1.35vw / var(--z, 1)), 17px); line-height: 1.45; transform-origin: 50% 50%; will-change: transform; }
.show__answer { display: grid; justify-items: start; gap: 14px; animation: show-in .45s var(--ease-out) both; }
.show__who { display: flex; align-items: center; gap: 8px; color: #a3a3a3; font-family: Unbounded, InterLocal, var(--font); font-size: 14px; font-weight: 600; }
.show__who img { width: 22px; height: 22px; }
.show__text { font-size: clamp(20px, calc(2.4vw / var(--z, 1)), 30px); line-height: 1.34; font-weight: 500; letter-spacing: -.016em; }
.show__answer--media .show__text { font-size: clamp(17px, calc(1.8vw / var(--z, 1)), 22px); color: #d4d4d4; }
.wc-status { display: flex; align-items: center; gap: 10px; color: #a3a3a3; font-size: 17px; animation: wc-status-in .3s var(--ease-out) both; }
.wc-status.is-out { animation: wc-status-out .3s ease forwards; }
@keyframes wc-status-in { from { opacity: 0; transform: translateY(4px); } }
@keyframes wc-status-out { to { opacity: 0; transform: translateY(-6px); } }
.wc-spinner { width: 16px; height: 16px; flex: none; box-sizing: border-box; border: 1.5px solid #777; border-top-color: #fff; border-radius: 50%; animation: spin .8s linear infinite; }
/* слово проявляется из размытия, кривая та же, что в app.js Докки */
.wc-word { display: inline-block; animation: wc-word .52s both; }
@keyframes wc-word {
  0% { opacity: 0; filter: blur(3px); transform: translateY(4px); animation-timing-function: cubic-bezier(.2, .6, .3, 1); }
  38% { opacity: .65; filter: blur(1.5px); transform: translateY(.5px); animation-timing-function: cubic-bezier(.2, .6, .3, 1); }
  70% { opacity: 1; filter: blur(0); transform: translateY(-.65px); animation-timing-function: cubic-bezier(.4, 0, .35, 1); }
  94%, 100% { opacity: 1; filter: blur(0); transform: none; }
}
.wc-image { position: relative; width: clamp(240px, min(calc(30vw / var(--z, 1)), calc(42svh / var(--z, 1))), 400px); aspect-ratio: 3 / 4; overflow: hidden; border-radius: 22px; animation: wc-grow .7s var(--ease-out) both; }
@keyframes wc-grow { from { opacity: 0; transform: translateY(10px) scale(.97); } }
.wc-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; filter: blur(18px); scale: 1.045; transition: opacity .55s ease, filter .7s var(--ease-out), scale .7s var(--ease-out); }
.wc-image.is-ready img { opacity: 1; filter: blur(0); scale: 1; }
.wc-dots { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.wc-file { display: inline-flex; align-items: center; gap: 14px; padding: 16px 22px 16px 18px; border: 1px solid #454545; border-radius: 18px; background: #1c1c1c; font-size: 17px; text-align: left; animation: wc-grow .6s var(--ease-out) both; }
.wc-file svg { width: 28px; height: 28px; color: #6fc99b; }
.wc-file small { color: #a3a3a3; font-size: 13px; }
/* кнопка отправки App как в site-chat.css приложения: серая, синяя при вводе и во время ответа, тогда в ней скруглённый квадрат */
.dx-composer__send { position: relative; display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 50%; background: #575757; color: #dfdfdf; transition: background-color .25s ease, color .25s ease, transform .2s var(--ease); }
.dx-composer__send.is-ready, .dx-composer__send.is-busy { background: #438dff; color: #fff; }
.dx-composer__send > svg { grid-area: 1 / 1; transition: opacity .22s ease, transform .32s var(--ease-out); }
.dx-composer__send .is-stop { opacity: 0; transform: scale(.4) rotate(-45deg); }
.is-busy > .is-up { opacity: 0; transform: scale(.4) translateY(4px); }
.is-busy > .is-stop { opacity: 1; transform: none; }
.dx-composer__send.is-press { transform: scale(.88); }

/* hero: липкая сцена. окно двигается только transform и opacity */
.intro { --win-w: min(1100px, calc(100vw / var(--z, 1)) - 2 * var(--gutter)); --win-h: min(560px, calc(70svh / var(--z, 1))); position: relative; background: #000; }
.intro__stage { position: relative; height: calc(100vh / var(--z, 1)); height: calc(100svh / var(--z, 1)); overflow: hidden; }
/* лишние calc(70vh / var(--z, 1)) - путь прокрутки, на котором окно выпрямляется */
.js .intro { height: calc(calc(100vh / var(--z, 1)) + calc(70vh / var(--z, 1))); height: calc(calc(100svh / var(--z, 1)) + calc(70vh / var(--z, 1))); }
.js .intro__stage { position: sticky; top: 0; }
.js .intro.is-static { height: auto; }
.intro__win {
  position: absolute; left: calc(50% - var(--win-w) / 2); top: calc(var(--nav-h) + (calc(100svh / var(--z, 1)) - var(--nav-h) - var(--win-h)) / 2);
  width: var(--win-w); height: var(--win-h); display: flex; flex-direction: column;
  border-radius: clamp(16px, calc(2vw / var(--z, 1)), 26px); overflow: hidden; background: var(--st-bg); color: var(--st-text);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 40px 100px rgba(0, 0, 0, .7), 0 0 120px rgba(110, 120, 255, .12);
  font-family: InterLocal, var(--font); letter-spacing: -.01em; transform-origin: 50% 0; will-change: transform;
}
.intro__win .studio-app__bar { flex: none; }
.intro__canvas { position: relative; flex: 1; min-height: 0; overflow: hidden; background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .08) 1px, transparent 0); background-size: 24px 24px; }
.intro__scene { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.intro__edges { position: absolute; left: 0; top: 0; overflow: visible; }
/* положение и прозрачность задаёт прокрутка, transition здесь давал бы отставание */
.intro__scene .node { left: 0; top: 0; opacity: 0; will-change: transform, opacity; transition: border-color .3s, box-shadow .3s; }
.iedge { fill: none; stroke: var(--st-line-strong); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke .35s; }
.iedge.is-lit { stroke: var(--st-run); }
.iflow { fill: none; stroke: #fff; stroke-width: 2.5; stroke-dasharray: 2 14; stroke-linecap: round; opacity: 0; transition: opacity .4s; }
.is-live .iflow.is-run { opacity: .55; animation: flow .7s linear infinite; }
@keyframes flow { to { stroke-dashoffset: -16; } }
.intro__empty { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 8px; padding: 20px; text-align: center; will-change: transform, opacity; }
.intro__empty img { width: 44px; height: 44px; border-radius: 12px; margin-bottom: 6px; }
.intro__empty-title { font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
.intro__empty-text { max-width: 320px; color: var(--st-muted); font-size: 14px; line-height: 1.45; }
.intro__create { display: inline-flex; align-items: center; gap: 8px; height: 44px; margin-top: 12px; padding: 0 20px; border-radius: 999px; background: var(--st-text); color: #111; font-size: 15px; font-weight: 600; transition: transform .15s var(--ease), box-shadow .2s; }
.intro__create svg, .intro__run svg { width: 16px; height: 16px; }
.intro__create.is-pressed { transform: scale(.93); box-shadow: 0 0 0 8px rgba(255, 255, 255, .12); }
.intro__run { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 30px; margin-left: 4px; padding: 0 13px; border-radius: 999px; background: var(--blue); color: #fff; font-size: 12px; font-weight: 600; transition: transform .15s var(--ease), box-shadow .2s; }
.intro__run.is-pressed { transform: scale(.9); box-shadow: 0 0 0 6px rgba(0, 113, 227, .3); }
.intro__cursor { position: absolute; left: 0; top: 0; z-index: 5; margin: -3px 0 0 -4px; pointer-events: none; opacity: 0; transition: opacity .25s; transform-origin: 4px 3px; will-change: transform; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .55)); }
.intro__cursor path { fill: #fff; stroke: #111; stroke-width: 1.4; stroke-linejoin: round; }
.intro__title { position: absolute; inset: var(--nav-h) 0 0; display: grid; place-content: center; justify-items: center; padding-inline: var(--gutter); text-align: center; opacity: 0; will-change: transform, opacity; pointer-events: none; }
.intro__brand { display: inline-flex; align-items: center; gap: .26em; font-size: clamp(54px, calc(10vw / var(--z, 1)), 136px); line-height: 1; font-weight: 700; letter-spacing: -.045em; }
.intro__brand img { width: .86em; height: .86em; border-radius: .22em; }
.intro__sub { max-width: 760px; margin-top: 22px; font-size: clamp(21px, calc(2.6vw / var(--z, 1)), 32px); line-height: 1.2; font-weight: 600; letter-spacing: -.022em; }
.intro__sub span { color: var(--muted-dark); }

/* без JS и без анимации: всё стоит друг под другом */
html:not(.js) .intro__stage, .intro.is-static .intro__stage { position: relative; height: auto; display: grid; gap: 48px; padding-bottom: 80px; overflow: visible; }
html:not(.js) .intro__stage > *, .intro.is-static .intro__stage > * { position: relative; inset: auto; left: auto; top: auto; margin-inline: auto; transform: none !important; opacity: 1 !important; visibility: visible !important; }
.intro.is-static { height: auto; }
html:not(.js) .intro__win { display: none; }

/* общий блок сценария: Studio и hero */
.node {
  --k: var(--st-muted-strong);
  position: absolute; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 16px; text-align: left;
  background: var(--st-card); border: 1px solid var(--st-line); box-shadow: 0 3px 12px rgba(0, 0, 0, .14); color: var(--st-text);
  transition: border-color .3s, box-shadow .4s, opacity .4s;
}
.node--start, .node--message { --k: #8ab4ff; }
.node--condition { --k: #f0b37e; }
.node--ai { --k: #c6a6ff; }
.node--knowledge { --k: #6fd3c1; }
.node--crm, .node--sheet { --k: #79b596; }
.node__icon { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: var(--k); background: color-mix(in srgb, var(--k) 16%, transparent); }
.node__icon svg { width: 18px; height: 18px; }
.node__text { flex: 1; min-width: 0; display: grid; gap: 1px; }
.node__title, .node__preview { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.node__title { font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: -.015em; }
.node__preview { color: var(--st-muted); font-size: 12px; line-height: 1.3; }
.node__state { flex: none; display: grid; place-items: center; width: 18px; height: 18px; color: var(--st-run); }
.node__state svg { width: 16px; height: 16px; }
.node.is-done .node__state { color: var(--st-success); }
.node__state:empty { display: none; }
.is-narrow .node { gap: 8px; padding: 9px 10px; }
.is-narrow .node__icon { width: 28px; height: 28px; border-radius: 8px; }
.is-narrow .node__icon svg { width: 15px; height: 15px; }
.is-narrow .node__title { font-size: 13px; }
.is-narrow .node__preview { font-size: 11px; }
/* в узкой Studio название переносится на вторую строку вместо многоточия */
.canvas.is-narrow .node__title { white-space: normal; line-height: 1.2; }
.canvas.is-narrow .node__preview { display: none; }
/* в узком hero галочка съедает место под название, готовность видна по рамке */
.intro__win.is-narrow .node__state { display: none; }
button.node:hover { border-color: var(--st-line-strong); }
.node.is-running { border-color: rgba(138, 180, 255, .75); box-shadow: 0 0 0 4px rgba(138, 180, 255, .16), 0 0 36px rgba(138, 180, 255, .2); }
.node.is-done { border-color: rgba(121, 181, 150, .5); }
.node.is-skipped { opacity: .32; }
.node.is-selected { box-shadow: 0 0 0 3px rgba(239, 239, 237, .2), 0 10px 30px rgba(0, 0, 0, .3); }
.node.is-grabbed { border-color: var(--st-line-strong); box-shadow: 0 22px 44px rgba(0, 0, 0, .55); }
.node.is-editing .node__title { overflow: visible; }
.node.is-editing .node__title::after { content: ''; display: inline-block; width: 1.5px; height: 1.05em; margin-left: 2px; vertical-align: -2px; background: var(--st-run); animation: blink .9s steps(1) infinite; }


/* галерея */
/* галерея */
.highlights { padding: clamp(80px, calc(12vw / var(--z, 1)), 140px) 0 clamp(70px, calc(10vw / var(--z, 1)), 120px); background: #000; }
.highlights .section-title { margin-bottom: 40px; }
.gallery__track {
  display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  padding-inline: max(var(--gutter), calc((calc(100vw / var(--z, 1)) - 980px) / 2));
  scroll-padding-inline: max(var(--gutter), calc((calc(100vw / var(--z, 1)) - 980px) / 2));
}
.gallery__track::-webkit-scrollbar { display: none; }
.tile {
  position: relative; flex: 0 0 auto; width: min(980px, calc(100vw / var(--z, 1)) - 2 * var(--gutter)); height: clamp(480px, calc(62vh / var(--z, 1)), 640px);
  scroll-snap-align: start; border-radius: 28px; overflow: hidden; background: var(--tile);
  padding: clamp(28px, calc(4vw / var(--z, 1)), 52px); display: flex; flex-direction: column; justify-content: space-between;
  transition: opacity .6s var(--ease);
}
.tile:not(.is-active) { opacity: .45; }
.tile__head { max-width: 520px; font-size: clamp(21px, calc(2.4vw / var(--z, 1)), 28px); line-height: 1.16; font-weight: 600; letter-spacing: -.02em; }
.tile__head span { color: var(--muted-dark); }
.tile__big { display: grid; gap: 8px; }
.tile__big small { color: var(--muted-dark); font-size: clamp(17px, calc(1.8vw / var(--z, 1)), 21px); font-weight: 600; letter-spacing: -.015em; }
.grad {
  font-size: clamp(88px, calc(15vw / var(--z, 1)), 200px); line-height: .92; font-weight: 700; letter-spacing: -.05em; font-variant-numeric: tabular-nums;
  background: linear-gradient(120deg, #6ea8ff, #8f7bff 55%, #d48bff); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.grad--warm { background-image: linear-gradient(120deg, #ffb340, #ff6a3d 50%, #ff3d77); }
.grad--green { background-image: linear-gradient(120deg, #4be08a, #3dd6c6 55%, #5ac8fa); }
.tile--calls::after, .tile--human::after, .tile--oss::after { content: ''; position: absolute; right: -10%; bottom: -30%; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(120, 130, 255, .22), transparent); pointer-events: none; }
.tile--human::after { background: radial-gradient(closest-side, rgba(255, 120, 80, .2), transparent); }
.tile--oss::after { background: radial-gradient(closest-side, rgba(70, 220, 160, .18), transparent); }
.agents { display: grid; gap: 10px; width: min(460px, 100%); align-self: flex-end; }
.agents li {
  display: flex; align-items: center; gap: 14px; padding: 16px 20px; border-radius: 16px; background: rgba(255, 255, 255, .05);
  font-size: clamp(16px, calc(1.6vw / var(--z, 1)), 19px); font-weight: 500;
  opacity: 0; transform: translateY(12px); transition: opacity .6s var(--ease), transform .6s var(--ease); transition-delay: calc(var(--i, 0) * 90ms);
}
.agents li i { width: 8px; height: 8px; border-radius: 50%; background: #30d158; box-shadow: 0 0 0 4px rgba(48, 209, 88, .16); animation: pulse 2.4s var(--ease) infinite; animation-delay: calc(var(--i, 0) * 300ms); }
.agents li em { margin-left: auto; color: var(--muted-dark); font-style: normal; font-size: 14px; font-weight: 400; }
.tile.is-active .agents li, .no-gallery .agents li { opacity: 1; transform: none; }
@keyframes pulse { 50% { box-shadow: 0 0 0 7px rgba(48, 209, 88, 0); } }
.bars { display: grid; gap: 18px; }
.bars__row { display: grid; grid-template-columns: 80px 1fr; align-items: center; gap: 16px; color: var(--muted-dark); font-size: 17px; font-weight: 600; }
.bars__row i { height: 26px; width: 0; border-radius: 13px; background: #3a3a3c; transition: width 1.4s var(--ease-out) .2s; }
.bars__row--now { color: var(--gray); }
.bars__row--now i { background: linear-gradient(90deg, #2997ff, #8f7bff); transition-duration: 1s; }
.tile.is-active .bars__row i, .no-gallery .bars__row i { width: var(--w); }
.gallery__controls { display: flex; justify-content: center; align-items: center; gap: 14px; margin-top: 28px; }
.dots { display: flex; align-items: center; gap: 14px; height: 56px; padding: 0 24px; border-radius: 28px; background: rgba(66, 66, 69, .72); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); }
.dots__item { position: relative; width: 8px; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .42); overflow: hidden; transition: width .5s var(--ease), background-color .3s; }
.dots__item::after { content: ''; position: absolute; inset: -18px -6px; }
.dots__item.is-active { width: 48px; background: rgba(255, 255, 255, .3); }
.dots__item i { position: absolute; inset: 0; width: 0; background: #fff; border-radius: inherit; }
.dots__item.is-active i { width: calc(var(--progress, 0) * 100%); }
.dots__item:hover { background: rgba(255, 255, 255, .7); }

/* манифест */
.manifest { padding: clamp(60px, calc(10vw / var(--z, 1)), 130px) 0 clamp(110px, calc(15vw / var(--z, 1)), 190px); background: #000; }
.manifest__text { font-size: clamp(26px, calc(3.8vw / var(--z, 1)), 48px); line-height: 1.2; font-weight: 600; letter-spacing: -.028em; }
.manifest__text span { display: block; }
.manifest__text .dim { margin-top: .35em; color: var(--muted-dark); font-size: .62em; line-height: 1.35; font-weight: 500; letter-spacing: -.02em; }
.manifest__text .dim + .dim { margin-top: .1em; }

/* шапка продукта */
.product-head { text-align: center; padding-bottom: clamp(40px, calc(6vw / var(--z, 1)), 70px); }
.product-head__eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 21px; font-weight: 600; letter-spacing: .011em; color: var(--muted); }
.product-head__eyebrow img { width: 26px; height: 26px; border-radius: 7px; background: #000; padding: 3px; object-fit: contain; }
.product-head__eyebrow--dark img { padding: 0; }
.product-head__title { margin-top: 12px; font-size: clamp(44px, calc(7vw / var(--z, 1)), 96px); line-height: 1.02; font-weight: 600; letter-spacing: -.035em; }
.product-head__lead { max-width: 640px; margin: 22px auto 0; font-size: clamp(19px, calc(2vw / var(--z, 1)), 24px); line-height: 1.35; font-weight: 500; letter-spacing: -.018em; color: var(--muted); }
.product-head--left { text-align: left; }
.product-head--left .product-head__lead { margin-left: 0; }

/* Studio */
.studio { padding: clamp(90px, calc(11vw / var(--z, 1)), 150px) 0 clamp(80px, calc(10vw / var(--z, 1)), 130px); background: #000; color: var(--gray); }
.studio .product-head__lead { color: var(--muted-dark); }
.studio-app {
  position: relative; border-radius: 26px; overflow: hidden; background: var(--st-bg); color: var(--st-text);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 40px 100px rgba(0, 0, 0, .6), 0 0 120px rgba(110, 120, 255, .1);
  font-family: InterLocal, var(--font); letter-spacing: -.01em;
}
.studio-app__bar { display: flex; align-items: center; gap: 10px; height: 54px; padding: 0 18px; border-bottom: 1px solid var(--st-line); background: rgba(25, 25, 26, .93); font-size: 13px; }
.studio-app__dots { display: flex; gap: 7px; margin-right: 8px; }
.studio-app__dots i { width: 12px; height: 12px; border-radius: 50%; background: #3a3a3c; }
.studio-app__name { font-weight: 600; font-size: 14px; letter-spacing: -.02em; margin-right: 4px; }
.studio-app__status { margin-left: auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-flex; align-items: center; gap: 8px; color: var(--st-muted); font-size: 12px; }
.studio-app__status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--st-muted); }
.studio-app__status.is-running::before { background: var(--st-run); box-shadow: 0 0 0 4px rgba(138, 180, 255, .18); animation: blink 1s infinite; }
.studio-app__status.is-done::before { background: var(--st-success); }
@keyframes blink { 50% { opacity: .35; } }
.studio-app__body { display: grid; grid-template-columns: minmax(0, 1fr); }
.canvas__scene { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.canvas__edges { position: absolute; left: 0; top: 0; overflow: visible; }

.node__spin { width: 12px; height: 12px; border-radius: 50%; border: 1.6px solid currentColor; border-right-color: transparent; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }


.bubble { max-width: 92%; padding: 9px 12px; border-radius: 16px; font-size: 13px; line-height: 1.45; animation: bubble-in .35s var(--ease-out); }
.bubble--in { justify-self: start; background: #2c2c2e; border-bottom-left-radius: 5px; }
.bubble--out { justify-self: end; background: #2b5bd6; color: #fff; border-bottom-right-radius: 5px; }
.bubble--voice { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.bubble--voice > svg { width: 16px; height: 16px; flex: none; color: var(--st-muted-strong); }
.bubble--voice .bubble__sub { flex-basis: 100%; margin-top: 0; }
.bubble--voice .wave { display: flex; align-items: center; gap: 2px; height: 18px; }
.bubble--voice .wave i { width: 2.5px; border-radius: 2px; background: var(--st-muted-strong); }
.bubble__sub { display: block; margin-top: 4px; color: var(--st-muted); font-size: 12px; }
@keyframes typing { 50% { opacity: 1; transform: translateY(-2px); } }
@keyframes bubble-in { from { opacity: 0; transform: translateY(6px) scale(.98); } }

.seg { display: grid; grid-template-columns: 1fr 1fr; padding: 3px; border-radius: 12px; background: var(--st-soft); }
.seg button { height: 30px; border-radius: 9px; font-size: 12px; color: var(--st-muted); transition: background-color .2s, color .2s; }
.seg button[aria-selected='true'] { background: #2c2c2e; color: var(--st-text); box-shadow: 0 1px 3px rgba(0, 0, 0, .3); }
.json {
  margin: 0; min-height: 168px; max-height: 230px; overflow: hidden; padding: 14px; border-radius: 14px;
  background: #141415; border: 1px solid var(--st-line); color: var(--st-muted-strong);
  font-family: 'JetBrains Mono', var(--mono); font-size: 12px; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere;
}
.json .k { color: #9cc4ff; }
.json .s { color: #b5dfa8; }
.json .b { color: #f0b37e; }
.json .n { color: #8a8a87; }

/* Studio: холст слева, панель запуска справа */
.studio-app__body { grid-template-columns: minmax(0, 1.15fr) minmax(340px, 1fr); }
.canvas { position: relative; min-width: 0; overflow: hidden; border-right: 1px solid var(--st-line); background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .085) 1px, transparent 0); background-size: 24px 24px; }
.canvas__packets { position: absolute; left: 0; top: 0; }
.canvas__edges .edge { fill: none; stroke: var(--st-line-strong); stroke-width: 2; transition: stroke .3s, opacity .4s; }
.canvas__edges .edge.is-on, .canvas__edges .edge.is-lit { stroke: var(--st-run); }
.canvas__edges .edge.is-lit { opacity: .75; }
.canvas__edges .edge.is-dim { opacity: .22; }
.packet { position: absolute; left: 0; top: 0; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--st-run); box-shadow: 0 0 0 4px rgba(138, 180, 255, .25), 0 0 14px rgba(138, 180, 255, .8); will-change: transform; pointer-events: none; }
.branch-tag { position: absolute; transform: translate(-50%, calc(-100% - 10px)); padding: 3px 10px; border-radius: 999px; background: #2c2c2e; border: 1px solid var(--st-line); font-size: 12px; font-weight: 600; white-space: nowrap; pointer-events: none; animation: tag-in .25s var(--ease-out); transition: opacity .35s; }
.branch-tag--true { color: var(--st-success); }
.branch-tag--false { color: var(--st-danger); }
.branch-tag.is-out { opacity: 0; }
@keyframes tag-in { from { opacity: 0; transform: translate(-50%, calc(-100% - 2px)); } }

.panel { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 18px; background: rgba(25, 25, 26, .93); contain: size; }
.panel__label { color: var(--st-muted); font-size: 11px; letter-spacing: .05em; text-transform: uppercase; }
.picker { display: flex; padding: 3px; border-radius: 12px; background: var(--st-soft); }
.picker button { flex: 1; min-width: 0; height: 36px; padding: 0 8px; border-radius: 9px; color: var(--st-muted-strong); font-size: 13px; white-space: nowrap; transition: background-color .2s, color .2s; }
.picker button[aria-checked='true'] { background: #2c2c2e; color: var(--st-text); box-shadow: 0 1px 3px rgba(0, 0, 0, .3); }
.picker button:hover:not([aria-checked='true']) { color: var(--st-text); }
.panel__row { display: flex; gap: 8px; }
.panel__row .seg { flex: 1; }
.panel__run { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 12px; background: var(--blue); color: #fff; font-size: 13px; font-weight: 600; transition: background-color .2s, transform .2s; }
.panel__run:hover { background: var(--blue-hover); }
.panel__run:active { transform: scale(.97); }
.panel__run svg { width: 15px; height: 15px; }
.seg button { height: 30px; }

/* без overscroll-behavior: contain, иначе колесо застревает в панели, даже когда листать нечего */
.feed, .steps { flex: 1; min-height: 0; overflow: hidden; }
.feed { display: flex; flex-direction: column; gap: 8px; padding: 2px; }
.feed[hidden], .steps[hidden] { display: none; }
.feed__empty { margin: auto; max-width: 280px; color: var(--st-muted); font-size: 13px; text-align: center; }
.feed__who { margin-top: 4px; color: var(--st-muted); font-size: 11px; letter-spacing: .05em; text-transform: uppercase; }
.feed__who--out { align-self: flex-end; }
.feed .bubble--in { align-self: flex-start; }
.feed .bubble--out { align-self: flex-end; }
.feed .bubble { max-width: 88%; }
.typing { display: inline-flex; gap: 4px; padding: 12px 14px; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .5; animation: typing 1s infinite; }
.typing i:nth-child(2) { animation-delay: .15s; }
.typing i:nth-child(3) { animation-delay: .3s; }
.ev { display: flex; align-items: flex-start; gap: 10px; padding: 8px 11px; border-radius: 12px; background: rgba(255, 255, 255, .04); font-size: 13px; line-height: 1.4; animation: bubble-in .3s var(--ease-out); }
.ev__mark { flex: none; display: grid; place-items: center; width: 18px; height: 18px; color: var(--st-success); }
.ev__mark svg { width: 16px; height: 16px; }
.ev.is-running .ev__mark { color: var(--st-run); }
.ev.is-running b { color: var(--st-muted); }
.ev__body { display: grid; gap: 2px; min-width: 0; }
.ev__body b { font-weight: 500; }
.ev__body small { color: var(--st-muted); font-size: 12px; }
.ev__fields { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; margin-top: 4px; font-size: 12px; }
.ev__fields dt { color: var(--st-muted); }
.ev__fields dd { margin: 0; overflow-wrap: anywhere; }
.feed__done { margin-top: 2px; padding: 9px 12px; border-radius: 12px; background: rgba(121, 181, 150, .13); color: #a9dcc0; font-size: 13px; animation: bubble-in .3s var(--ease-out); }

.steps__hint { margin-bottom: 8px; color: var(--st-muted); font-size: 12.5px; line-height: 1.45; }
.steps__list { display: grid; gap: 6px; }
.step { border: 1px solid transparent; border-radius: 12px; background: rgba(255, 255, 255, .04); animation: bubble-in .3s var(--ease-out); }
.step[open] { border-color: var(--st-line); }
.step summary { display: flex; align-items: center; gap: 10px; padding: 7px 10px; font-size: 13px; cursor: pointer; list-style: none; }
.step summary::-webkit-details-marker { display: none; }
.step summary .node__icon { width: 26px; height: 26px; border-radius: 8px; }
.step summary .node__icon svg { width: 15px; height: 15px; }
.step summary b { flex: 1; min-width: 0; font-weight: 500; }
.step__state { display: grid; place-items: center; width: 16px; height: 16px; color: var(--st-success); }
.step__state svg { width: 15px; height: 15px; }
.step__state .node__spin { color: var(--st-run); }
.step__body { display: grid; gap: 6px; padding: 0 10px 10px; }
.step__body p { color: var(--st-muted); font-size: 11px; letter-spacing: .05em; text-transform: uppercase; }
.step .json { min-height: 0; max-height: none; padding: 10px 12px; font-size: 11.5px; }

@media (max-width: 960px) {
  .studio-app__body { grid-template-columns: minmax(0, 1fr); }
  .canvas { border-right: 0; border-bottom: 1px solid var(--st-line); }
  .panel { contain: none; height: 520px; }
}
@media (max-width: 734px) {
  .intro { --win-h: min(500px, calc(62svh / var(--z, 1))); }
  .intro .hero__copy { padding-top: calc(var(--nav-h) + 26px); }
  .intro__empty-title { font-size: 19px; }
  .intro__empty-text { font-size: 13px; }
  .intro__win .studio-app__bar { padding: 0 12px; gap: 8px; }
  .intro__sub { font-size: 19px; }
  .intro__brand { flex-direction: column; gap: 14px; font-size: 52px; white-space: nowrap; }
  .intro__brand img { width: 72px; height: 72px; border-radius: 18px; }
  .panel { padding: 14px; height: 500px; }
  .picker button { font-size: 12px; padding: 0 4px; }
  .panel__run span { display: none; }
  .panel__run { padding: 0 11px; }
}

.footnote-inline { max-width: 720px; margin: 22px auto 0; text-align: center; color: var(--muted); font-size: 12px; line-height: 1.5; letter-spacing: -.005em; }
.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: clamp(60px, calc(8vw / var(--z, 1)), 100px); padding-top: 40px; border-top: 1px solid rgba(255, 255, 255, .1); }
.facts strong { display: block; font-size: 21px; font-weight: 600; letter-spacing: -.02em; margin-bottom: 8px; }
.facts span { color: var(--muted-dark); font-size: 17px; }

/* Докки */
.dokky { position: relative; padding: clamp(100px, calc(13vw / var(--z, 1)), 170px) 0; background: #000; overflow: hidden; }
.dokky::before { content: ''; position: absolute; right: -10%; bottom: -20%; width: calc(80vw / var(--z, 1)); max-width: 1000px; aspect-ratio: 1; background: radial-gradient(closest-side, rgba(120, 80, 255, .24), rgba(60, 90, 255, .08) 55%, transparent); pointer-events: none; }
.dokky__grid { position: relative; display: grid; grid-template-columns: 1fr auto; gap: clamp(40px, calc(7vw / var(--z, 1)), 100px); align-items: center; }
.dokky .product-head__eyebrow { color: var(--muted-dark); }
.dokky .product-head__lead { color: var(--muted-dark); }
.asks { display: grid; gap: 10px; justify-items: start; margin: 34px 0 28px; }
.asks button {
  display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 18px;
  background: #1d1d1f; color: var(--gray); font-size: 16px; text-align: left; border: 1px solid transparent;
  transition: background-color .25s, border-color .25s, transform .25s var(--ease);
}
.asks button::after { content: '↗'; color: var(--muted-dark); font-size: 13px; transition: transform .25s var(--ease); }
.asks button:hover { background: #2a2a2d; }
.asks button:hover::after { transform: translate(2px, -2px); }
.asks button[aria-pressed='true'] { border-color: rgba(255, 255, 255, .3); background: #2a2a2d; }
.phone { display: grid; justify-items: center; gap: 18px; }
.phone__frame {
  width: 360px; height: 740px; padding: 12px; border-radius: 60px; background: linear-gradient(145deg, #3a3a3c, #1c1c1e 40%, #2c2c2e);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .18), 0 50px 100px rgba(0, 0, 0, .6);
}
.phone__screen { position: relative; height: 100%; border-radius: 48px; overflow: hidden; background: #000; display: flex; flex-direction: column; font-family: InterLocal, var(--font); letter-spacing: -.01em; }
.phone__screen::after { content: ''; position: absolute; left: -20%; right: -20%; bottom: -12%; height: 34%; background: radial-gradient(50% 50% at 50% 100%, rgba(130, 90, 255, .32), transparent); pointer-events: none; }
.phone__status { display: flex; justify-content: space-between; align-items: center; height: 54px; padding: 8px 30px 0 36px; font-size: 16px; font-weight: 600; letter-spacing: 0; }
.phone__time { width: 54px; text-align: center; font-variant-numeric: tabular-nums; }
.phone__island { position: absolute; left: 50%; top: 11px; width: 108px; height: 31px; margin-left: -54px; border-radius: 20px; background: #000; }
.phone__icons { display: flex; align-items: center; gap: 6px; width: 66px; justify-content: flex-end; fill: currentColor; color: #fff; }
.phone__icons svg { display: block; }
.dk-top { display: flex; justify-content: space-between; align-items: center; padding: 8px 16px; }
.dk-round { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #1c1c1e; border: 1px solid rgba(255, 255, 255, .08); }
.dk-round svg { width: 18px; height: 18px; }
.dk-seg { display: flex; padding: 3px; border-radius: 999px; background: #1c1c1e; border: 1px solid rgba(255, 255, 255, .08); font-size: 14px; }
.dk-seg b, .dk-seg span { padding: 7px 22px; border-radius: 999px; font-weight: 600; }
.dk-seg b { background: #000; }
.dk-seg span { color: #8e8e93; font-weight: 500; }
.dk-body { position: relative; z-index: 1; flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 14px; padding: 14px 18px; }
.dk-body::-webkit-scrollbar { display: none; }
.dk-empty { margin: auto; display: grid; justify-items: center; gap: 16px; text-align: center; font-size: 15px; font-weight: 500; transition: opacity .3s; }
.dk-empty img { width: 44px; height: 44px; animation: float 4s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-4px); } }
.dk-user { align-self: flex-end; max-width: 86%; padding: 10px 14px; border-radius: 18px 18px 5px 18px; background: #262628; font-size: 14px; line-height: 1.45; animation: bubble-in .35s var(--ease-out); }
.dk-steps { display: grid; gap: 6px; font-size: 12.5px; color: #8e8e93; }
.dk-steps li { display: flex; align-items: center; gap: 8px; animation: bubble-in .3s var(--ease-out); }
.dk-steps li i { display: grid; place-items: center; width: 14px; height: 14px; color: #30d158; }
.dk-steps li i svg { width: 14px; height: 14px; }
.dk-answer { font-size: 14px; line-height: 1.55; color: #f2f2f7; }
.dk-answer .wd { animation: word .3s var(--ease-out) both; }
@keyframes word { from { opacity: 0; filter: blur(3px); } }
.dk-sources { display: flex; flex-wrap: wrap; gap: 6px; animation: bubble-in .4s var(--ease-out); }
.dk-sources a { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: #1c1c1e; border: 1px solid rgba(255, 255, 255, .08); color: #d1d1d6; font-size: 12px; }
.dk-sources a:hover { background: #2c2c2e; }
.dk-sources a::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #8f7bff; }
.dk-composer { position: relative; z-index: 1; display: flex; align-items: center; gap: 8px; margin: 8px 12px 16px; padding: 7px 7px 7px 12px; border-radius: 26px; background: #1c1c1e; border: 1px solid rgba(255, 255, 255, .1); }
.dk-composer svg { width: 18px; height: 18px; }
.dk-composer__plus, .dk-composer__mic { color: #c7c7cc; display: grid; place-items: center; }
.dk-composer__input { flex: 1; min-width: 0; color: #8e8e93; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dk-composer__input.is-typing { color: #f2f2f7; }
.dk-composer__send { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #e5e5ea; color: #000; }
.phone__note { color: var(--muted-dark); font-size: 12px; }

/* Докки App: повторяет режим Code настольного приложения, токены из его tokens.css и glass.css */
.app { padding: clamp(100px, calc(13vw / var(--z, 1)), 170px) 0 clamp(80px, calc(10vw / var(--z, 1)), 130px); background: var(--gray); color: var(--ink); }
.app .product-head__eyebrow img { width: 26px; height: 26px; border-radius: 7px; }
.dx {
  --d-bg: #0e0e0e; --d-side: #141414; --d-panel: #292929; --d-field: #2c2c2c; --d-hover: #343434; --d-line: #454545;
  --d-text: #f5f5f5; --d-muted: #a3a3a3; --d-faint: #777; --d-accent: #438dff; --d-positive: #6fc99b; --d-danger: #ee7b83; --d-user: #244b75;
  --d-edge: rgba(255, 255, 255, .11); --d-fill: color-mix(in srgb, var(--d-side) 55%, rgba(255, 255, 255, .03)); --d-light: rgba(255, 255, 255, .07);
  position: relative; display: grid; grid-template-columns: 268px minmax(0, 1fr) 296px; gap: 8px; height: clamp(500px, calc(calc(100svh / var(--z, 1)) - 190px), 680px); padding: 8px;
  border-radius: 30px; overflow: hidden; color: var(--d-text);
  background: radial-gradient(120% 90% at 0% 0%, #1c1d22, transparent 60%), radial-gradient(90% 80% at 100% 100%, #181a1f, transparent 60%), var(--d-bg);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .35), 0 30px 80px rgba(0, 0, 0, .3);
  font-family: InterLocal, var(--font); font-size: 14px; letter-spacing: -.005em;
}
.dx svg { width: 18px; height: 18px; }
.dx-side, .dx-card { border: 1px solid var(--d-edge); background: var(--d-fill); box-shadow: inset 0 1px 0 var(--d-light); }
.dx-side { display: flex; flex-direction: column; min-height: 0; padding: 14px 10px 10px; border-radius: 24px; }
.dx-side__top { display: flex; align-items: center; gap: 4px; height: 22px; padding: 0 6px; color: var(--d-muted); }
.dx-lights { display: flex; gap: 8px; margin-right: auto; }
.dx-lights i { width: 12px; height: 12px; border-radius: 50%; background: #ff5f57; }
.dx-lights i:nth-child(2) { background: #febc2e; }
.dx-lights i:nth-child(3) { background: #28c840; }
.dx-ico { display: grid; place-items: center; width: 26px; height: 22px; }
.dx-ico svg { width: 17px; height: 17px; }
.dx-ico--flip svg { transform: scaleX(-1); }
.dx-ico--off { color: var(--d-faint); opacity: .6; }
.dx-brand { display: flex; align-items: center; gap: 8px; margin: 18px 8px 14px; }
.dx-brand b { font-family: Unbounded, InterLocal, var(--font); font-size: 17px; font-weight: 600; letter-spacing: 0; }
.dx-brand span { height: 22px; padding: 0 9px; border-radius: 11px; background: color-mix(in srgb, var(--d-accent) 22%, transparent); color: #9cc2ff; font-size: 12px; font-weight: 600; line-height: 22px; }
.dx-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; padding: 0 4px; }
.dx-tiles span { display: grid; place-items: center; aspect-ratio: 1; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--d-text) 13%, transparent); background: color-mix(in srgb, var(--d-text) 7%, transparent); color: var(--d-text); }
.dx-tiles svg { width: 21px; height: 21px; }
.dx-label { margin: 20px 10px 6px; color: var(--d-muted); font-size: 13px; font-weight: 500; }
.dx-list { display: grid; gap: 1px; }
.dx-proj, .dx-chat { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 0 10px; border-radius: 10px; }
.dx-proj { min-height: 36px; font-weight: 500; }
.dx-proj svg { width: 17px; height: 17px; color: var(--d-muted); }
.dx-chat { min-height: 38px; padding-left: 35px; color: #d4d4d4; }
.dx-chat b { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 400; }
.dx-chat small { color: var(--d-faint); font-size: 12px; }
.dx-chat.is-active { background: var(--d-hover); color: var(--d-text); animation: bubble-in .35s var(--ease-out); }
.dx-none { padding: 6px 10px; color: var(--d-faint); font-size: 13px; }
.dx-foot { display: flex; align-items: center; gap: 10px; margin-top: auto; padding: 8px 4px 2px; }
.dx-avatar { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 50%; background: linear-gradient(135deg, #5b8cff, #a77bff); font-weight: 600; font-size: 14px; }
.dx-who { display: grid; min-width: 0; line-height: 1.25; }
.dx-who b { font-size: 14px; font-weight: 500; }
.dx-who small { color: var(--d-muted); font-size: 12px; }
.dx .dx-ring { width: 20px; height: 20px; margin-left: auto; transform: rotate(-90deg); fill: none; stroke-width: 2.6; }
.dx-ring circle:first-child { stroke: var(--d-line); }
.dx-ring circle:last-child { stroke: var(--d-text); stroke-linecap: round; }
.dx-newchat { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 50%; background: var(--d-text); color: #111; }
.dx-newchat svg { width: 17px; height: 17px; }

.dx-main { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.dx-welcome { flex: 1; display: grid; place-content: center; justify-items: center; gap: 18px; padding: 20px; text-align: center; }
.dx-welcome[hidden] { display: none; }
.dx-welcome img { width: 64px; height: 64px; }
.dx-welcome__title { font-size: 26px; font-weight: 600; letter-spacing: -.02em; }
.dx-welcome__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.dx-welcome__chips span { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; border-radius: 17px; border: 1px solid var(--d-edge); color: var(--d-muted); font-size: 13px; }
.dx-welcome__chips span.is-on { background: var(--d-hover); color: var(--d-text); }
.dx-welcome__chips svg { width: 15px; height: 15px; }
.dx-feed { flex: 1; display: flex; flex-direction: column; gap: 14px; min-height: 0; overflow: hidden; padding: 28px clamp(16px, calc(4vw / var(--z, 1)), 48px) 12px; scrollbar-width: none; }
.dx-feed[hidden] { display: none; }
.dx-feed::-webkit-scrollbar { display: none; }
.dx-feed > * { flex: none; }
.dx-bottom { padding: 6px clamp(10px, calc(3vw / var(--z, 1)), 40px) 4px; }
.dx-composer { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 8px 8px 8px 12px; border-radius: 28px; background: var(--d-field); border: 1px solid var(--d-edge); }
.dx-composer__plus, .dx-composer__mic { display: grid; place-items: center; width: 34px; height: 34px; color: var(--d-muted); }
.dx-composer__input { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--d-faint); font-size: 15px; }
.dx-composer__input.is-typing { color: var(--d-text); }
.dx-composer__input.is-typing::after { content: ''; display: inline-block; width: 1.5px; height: 1.05em; margin-left: 1px; vertical-align: -2px; background: var(--d-accent); animation: blink .9s steps(1) infinite; }
.dx-under { display: flex; align-items: center; gap: 14px; height: 34px; padding: 0 12px; color: var(--d-muted); font-size: 12.5px; }
.dx-under span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.dx-under svg { width: 14px; height: 14px; }
.dx-under__right { margin-left: auto; }

.dx-work { display: flex; flex-direction: column; gap: 8px; min-height: 0; overflow: hidden; }
.dx-work__head { display: flex; align-items: center; justify-content: space-between; height: 38px; padding: 0 6px 0 12px; font-size: 15px; font-weight: 600; }
.dx-work__head span { display: grid; place-items: center; width: 30px; height: 30px; color: var(--d-muted); }
.dx-work__head svg { width: 16px; height: 16px; }
.dx-card { flex: none; padding: 0 14px; border-radius: 20px; transition: border-color .3s; }
.dx-card__head { display: flex; align-items: center; gap: 10px; height: 46px; font-weight: 500; }
.dx-card__head > svg:first-child { width: 17px; height: 17px; color: var(--d-muted); }
.dx-card__head small { margin-left: auto; color: var(--d-muted); font-size: 12.5px; font-weight: 400; font-variant-numeric: tabular-nums; }
.dx-card__head small:empty { display: none; }
.dx .dx-card__more { width: 15px; height: 15px; margin-left: auto; color: var(--d-faint); transition: transform .3s var(--ease); }
.dx-card__head small:not(:empty) + .dx-card__more { margin-left: 2px; }
.dx-card.is-open .dx-card__more { transform: rotate(90deg); }
.dx-card__body { display: none; }
.dx-card.is-open .dx-card__body { display: grid; padding-bottom: 12px; animation: bubble-in .35s var(--ease-out); }
.dx-env { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 7px 12px; padding-bottom: 14px; font-size: 12.5px; }
.dx-env dt { color: var(--d-muted); }
.dx-env dd { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align: right; }
.dx-meter { display: block; height: 5px; margin-bottom: 16px; border-radius: 3px; background: var(--d-line); overflow: hidden; }
.dx-meter i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--d-accent); transition: width .6s var(--ease-out); }
.dx-file { display: flex; align-items: baseline; gap: 6px; min-width: 0; padding: 8px 10px; border-radius: 10px; background: var(--d-hover); font-size: 12.5px; }
.dx-file b { font-weight: 500; }
.dx-file small { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--d-faint); }
.dx-file em { font-style: normal; font-variant-numeric: tabular-nums; }
.dx .plus { color: var(--d-positive); }
.dx .minus { color: var(--d-danger); }
.dx-plan { gap: 7px; font-size: 12.5px; color: var(--d-muted); }
.dx-plan li { display: flex; align-items: flex-start; gap: 8px; line-height: 1.35; }
.dx-plan li i { width: 14px; height: 14px; flex: none; display: grid; place-items: center; margin-top: 1px; border-radius: 50%; border: 1.5px solid var(--d-line); color: var(--d-positive); }
.dx-plan li.is-done { color: var(--d-text); }
.dx-plan li.is-done i { border-color: var(--d-positive); }
.dx-plan li.is-done i svg { width: 9px; height: 9px; stroke-width: 3; }
.dx-after { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px 18px; margin-top: 22px; }
.dx-after .footnote-inline { margin: 0; }
.dx-after .pill svg { width: 14px; height: 14px; }

/* лента чата внутри Докки App */
.kd-task { align-self: flex-end; max-width: 80%; padding: 11px 15px; border-radius: 20px 20px 6px 20px; background: var(--d-user); line-height: 1.45; animation: bubble-in .35s var(--ease-out); }
.kd-step { display: flex; align-items: center; gap: 10px; color: #d4d4d4; animation: bubble-in .3s var(--ease-out); }
.kd-step i { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: color-mix(in srgb, var(--d-positive) 16%, transparent); color: var(--d-positive); flex: none; }
.kd-step i svg { width: 12px; height: 12px; stroke-width: 2.4; }
.kd-step.is-running i { background: color-mix(in srgb, var(--d-accent) 18%, transparent); color: var(--d-accent); }
.kd-step.is-running i .node__spin { width: 10px; height: 10px; }
.kd-diff { border: 1px solid var(--d-edge); border-radius: 16px; overflow: hidden; background: #171717; font-family: 'JetBrains Mono', var(--mono); font-size: 12.5px; animation: bubble-in .4s var(--ease-out); }
.kd-diff p { display: flex; gap: 12px; padding: 3px 14px; white-space: pre; overflow: hidden; text-overflow: ellipsis; }
.kd-diff p::before { content: ' '; width: 10px; flex: none; color: var(--d-muted); }
.kd-diff .meta { padding: 9px 14px; background: var(--d-panel); border-bottom: 1px solid var(--d-edge); color: var(--d-text); font-family: InterLocal, var(--font); font-weight: 600; font-size: 12px; }
.kd-diff .meta::before { content: none; }
.kd-diff .meta span { margin-left: auto; font-weight: 500; }
.kd-diff .meta .minus { margin-left: 6px; }
.kd-diff .add { background: color-mix(in srgb, var(--d-positive) 13%, transparent); color: #b5e6cb; }
.kd-diff .add::before { content: '+'; color: var(--d-positive); }
.kd-diff .del { background: color-mix(in srgb, var(--d-danger) 13%, transparent); color: #f6c1c5; }
.kd-diff .del::before { content: '−'; color: var(--d-danger); }
.kd-diff .ctx { color: var(--d-muted); }
.kd-perm { display: grid; gap: 12px; padding: 16px; border-radius: 18px; background: var(--d-panel); border: 1px solid var(--d-edge); animation: bubble-in .4s var(--ease-out); }
.kd-perm p { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.kd-perm p svg { width: 17px; height: 17px; color: #ffc44d; }
.kd-perm code { font-family: 'JetBrains Mono', var(--mono); font-size: 12.5px; padding: 6px 10px; border-radius: 8px; background: rgba(255, 255, 255, .07); width: fit-content; max-width: 100%; overflow-wrap: anywhere; }
.kd-perm__actions { display: flex; gap: 8px; }
.kd-perm__actions button { height: 34px; padding: 0 16px; border-radius: 999px; font-size: 13px; font-weight: 500; }
.kd-allow { background: var(--d-text); color: #111; }
.kd-allow:hover { background: #fff; }
.kd-deny { color: #d4d4d4; background: rgba(255, 255, 255, .08); }
.kd-deny:hover { background: rgba(255, 255, 255, .13); }
.kd-perm.is-answered .kd-perm__actions { display: none; }
.kd-perm__done { color: var(--d-positive); font-size: 12px; font-weight: 600; }
/* четыре кружка из Докки App (journal-dots): сетка 2x2, свет идёт по кругу */
.kd-dots { display: grid; grid-template-columns: repeat(2, 5px); grid-auto-rows: 5px; gap: 3px; flex: none; }
.kd-dots b { border-radius: 50%; background: var(--d-accent); animation: kd-dot 1.2s ease-in-out infinite; }
.kd-dots b:nth-child(2) { animation-delay: .15s; }
.kd-dots b:nth-child(4) { animation-delay: .3s; }
.kd-dots b:nth-child(3) { animation-delay: .45s; }
@keyframes kd-dot { 0%, 100% { opacity: .25; transform: scale(.8); } 50% { opacity: 1; transform: scale(1); } }
.kd-step.is-running i { background: none; }
.kd-status { display: flex; align-items: center; gap: 9px; color: var(--d-muted); font-size: 13.5px; animation: bubble-in .3s var(--ease-out); }
/* пока агент работает, под полем ввода дышит полоска, как в приложении */
.dx-composer { position: relative; }
.dx-composer::after { content: ''; position: absolute; inset: auto 24px -2px; height: 2px; background: linear-gradient(90deg, transparent, #b0b0b0, transparent); opacity: 0; transform: scaleX(.5); pointer-events: none; transition: opacity .18s ease; }
.dx-composer.is-working::after { opacity: .65; animation: kd-breathe 2.4s ease-in-out infinite; }
@keyframes kd-breathe { 0%, 100% { transform: scaleX(.45); opacity: .25; } 50% { transform: scaleX(1); opacity: .7; } }
.dx-composer__send > .is-up { width: 20px; height: 20px; }
.dx-composer__send .is-stop { width: 22px; height: 22px; }
/* фантомный курсор: прилетает, нажимает «Разрешить» и улетает */
.kd-cursor { position: absolute; left: 0; top: 0; z-index: 8; width: 24px; height: 24px; margin: -3px 0 0 -4px; pointer-events: none; opacity: 0; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .55)); transform-origin: 4px 3px; }
.kd-cursor path { fill: #fff; stroke: #111; stroke-width: 1.4; stroke-linejoin: round; }
.kd-allow.is-press { transform: scale(.92); box-shadow: 0 0 0 6px rgba(255, 255, 255, .14); }
.kd-perm__actions .kd-allow { transition: transform .15s var(--ease), box-shadow .2s; }
.kd-result { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; padding: 14px 16px; border-radius: 16px; background: color-mix(in srgb, var(--d-positive) 13%, transparent); color: #b5e6cb; animation: bubble-in .4s var(--ease-out); }
.kd-result b { font-family: 'JetBrains Mono', var(--mono); font-size: 13px; }
.kd-result span { color: #9fd3b6; font-size: 13px; }
.kd-result--muted { background: rgba(255, 255, 255, .07); color: var(--d-text); }
.kd-result--muted span { color: var(--d-muted); }
.footnote-inline--dark { color: var(--muted); }

/* ещё в Докки */
.more { padding: clamp(90px, calc(11vw / var(--z, 1)), 150px) 0; background: #000; color: var(--gray); }
.more .section-title { margin-bottom: clamp(36px, calc(5vw / var(--z, 1)), 60px); }

/* тарифы: тёмные карточки, Plus выделен рамкой */
.plans { padding: clamp(90px, calc(11vw / var(--z, 1)), 150px) 0; background: #000; color: var(--gray); }
.plans__trial { max-width: 680px; margin-top: 22px; color: var(--muted-dark); font-size: clamp(19px, calc(2vw / var(--z, 1)), 24px); line-height: 1.35; font-weight: 500; letter-spacing: -.018em; }
.plans__trial b { color: var(--gray); font-weight: 600; }
.plans__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-top: clamp(40px, calc(6vw / var(--z, 1)), 70px); }
.plan { position: relative; display: flex; flex-direction: column; padding: 26px 20px 28px; border-radius: 24px; background: #141416; border: 1px solid rgba(255, 255, 255, .07); }
.plan--main { background: linear-gradient(180deg, #16203a, #141416 60%); border-color: rgba(67, 141, 255, .55); box-shadow: 0 0 0 1px rgba(67, 141, 255, .2), 0 20px 60px rgba(40, 90, 200, .18); }
.plan__badge { position: absolute; top: -11px; left: 18px; padding: 3px 9px; border-radius: 999px; background: #438dff; color: #fff; font-size: 11px; font-weight: 600; }
.plan__name { font-size: 21px; font-weight: 600; letter-spacing: -.02em; }
.plan__price { margin-top: 14px; font-size: clamp(30px, calc(3vw / var(--z, 1)), 40px); font-weight: 600; letter-spacing: -.03em; white-space: nowrap; }
.plan__price small { display: block; margin-top: 2px; color: var(--muted-dark); font-size: 14px; font-weight: 500; letter-spacing: 0; }
.plan__lead { min-height: 2.7em; margin-top: 8px; color: var(--muted-dark); font-size: 14px; line-height: 1.35; }
.plan__list { display: grid; gap: 7px; margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .1); color: #d2d2d7; font-size: 12.5px; line-height: 1.3; }
.plan__list li { position: relative; padding-left: 18px; }
.plan__list li::before { content: ''; position: absolute; left: 2px; top: .35em; width: 9px; height: 5px; border: solid #30d158; border-width: 0 0 2px 2px; transform: rotate(-45deg); }
.plans__note { margin-top: 26px; color: var(--muted-dark); font-size: 14px; }

/* контакты */
/* последний экран занимает место под шапкой целиком, контент по центру: отступы сверху и снизу равны */
.contact { position: relative; display: grid; align-content: center; min-height: calc(calc(100vh / var(--z, 1)) - var(--nav-h)); min-height: calc(calc(100svh / var(--z, 1)) - var(--nav-h)); padding: clamp(64px, calc(9vw / var(--z, 1)), 120px) 0; background: #000; text-align: center; overflow: hidden; }
.contact::before { content: ''; position: absolute; left: 50%; top: 58%; width: calc(120vw / var(--z, 1)); max-width: 1400px; aspect-ratio: 2 / 1; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(80, 100, 255, .2), rgba(150, 90, 255, .07) 55%, transparent); pointer-events: none; }
.contact .wrap { position: relative; }
.contact__mark { width: 72px; height: auto; margin: 0 auto 30px; border-radius: 18px; }
.contact__cta .pill svg { width: 16px; height: 16px; }
.contact__title { font-size: clamp(44px, calc(7vw / var(--z, 1)), 96px); line-height: 1.02; font-weight: 600; letter-spacing: -.035em; }
.contact__lead { margin-top: 20px; color: var(--muted-dark); font-size: clamp(19px, calc(2vw / var(--z, 1)), 24px); font-weight: 500; }
.contact__cta { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; margin-top: 38px; }
.contact__links { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px 34px; margin-top: 34px; }

/* появление */
.js .reveal { opacity: 0; transform: translateY(30px); transition: opacity 1s var(--ease), transform 1.2s var(--ease-out); transition-delay: var(--delay, 0ms); }
.js .reveal.is-in { opacity: 1; transform: none; }

/* адаптивность */
@media (max-width: 1068px) {
  .dx { grid-template-columns: 236px minmax(0, 1fr); }
  .dx-work { display: none; }
  .plans__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dokky__grid { grid-template-columns: 1fr; justify-items: center; }
  .dokky .product-head--left { text-align: center; }
  .dokky .product-head--left .product-head__lead { margin-inline: auto; }
  .dokky .asks { justify-items: center; }
}


@media (max-width: 734px) {
  body { font-size: 16px; }
  .br-sm { display: inline; }
  .hero__copy { padding-top: 76px; padding-inline: var(--gutter); }
  .hero__eyebrow { font-size: 17px; }
  .hero__cta { gap: 18px; flex-direction: column; }
  .tile { width: calc(calc(100vw / var(--z, 1)) - 2 * var(--gutter)); height: 520px; border-radius: 22px; }
  .agents li { padding: 12px 14px; }
  .dots { height: 48px; padding: 0 18px; gap: 12px; }
  .round-btn { width: 40px; height: 40px; }
  .studio-app__bar .chip { display: none; }
  .studio-app__status::before { flex: none; }
  .studio-app__name { display: none; }
  .facts { grid-template-columns: 1fr; gap: 26px; }
  .phone__frame { width: 300px; height: 620px; border-radius: 54px; padding: 10px; }
  .phone__screen { border-radius: 44px; }
  .asks button { font-size: 15px; }
  .dx { grid-template-columns: minmax(0, 1fr); height: 620px; padding: 6px; border-radius: 26px; font-size: 13px; }
  .dx-side { display: none; }
  .dx-feed { padding: 18px 10px 10px; }
  .dx-bottom { padding: 4px 2px 0; }
  .dx-welcome__title { font-size: 22px; }
  .dx-under { gap: 10px; padding: 0 8px; font-size: 12px; }
  .kd-task { max-width: 90%; }
  .kd-diff { font-size: 11px; }
  .kd-diff p { padding: 3px 10px; gap: 8px; }
  .plans__grid { grid-template-columns: 1fr; }
  .plan__lead { min-height: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .js .reveal { opacity: 1; transform: none; }
}

.dokky .product-head__title { font-size: clamp(44px, calc(5.6vw / var(--z, 1)), 80px); }

/* галерея: соседние карточки кликабельны */
.tile:not(.is-active) { cursor: pointer; }
.round-btn .flip { transform: scaleX(-1); }
.round-btn svg { width: 20px; height: 20px; }
.gallery__track:focus-visible { outline-offset: -4px; }

/* 3D iPhone: экран кладётся на модель через matrix3d, без WebGL остаётся плоская рамка */
.phone__frame.has-webgl { position: relative; background: none; box-shadow: none; padding: 0; border-radius: 0; }
.phone__webgl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.phone__frame.has-webgl .phone__screen { position: absolute; left: 0; top: 0; width: 360px; height: calc(360px / var(--screen-ratio, .4615)); transform-origin: 0 0; will-change: transform; border-radius: 50px; }
.model-credit { color: var(--muted-dark); font-size: 11px; }

/* демо и интерфейсные подписи не выделяются: выделение мешает кликам и перетаскиванию */
body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
img, svg { -webkit-user-drag: none; user-drag: none; }
input, textarea, [contenteditable], .selectable { -webkit-user-select: text; user-select: text; }

/* верхняя полоска: ссылки на три лендинга, не прилипает и не занимает место в hero */
.eco { position: absolute; z-index: 20; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: 22px; width: min(1180px, 100% - 2 * var(--gutter)); height: 56px; margin-inline: auto; font-size: 13px; }
.eco__brand { display: inline-flex; align-items: center; gap: 8px; font-family: Unbounded, InterLocal, var(--font); font-size: 15px; font-weight: 600; }
.eco__brand img { width: 20px; height: 20px; }
.eco__links { display: flex; gap: 4px; margin-left: auto; padding: 3px; border-radius: 999px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .08); }
.eco__links a { padding: 6px 13px; border-radius: 999px; color: rgba(255, 255, 255, .72); transition: color .2s, background-color .2s; }
.eco__links a:hover { color: #fff; }
.eco__links a[aria-current='page'] { background: rgba(255, 255, 255, .12); color: #fff; }
.eco__cta { padding: 7px 14px; border-radius: 999px; background: #438dff; color: #fff; font-weight: 600; }
.eco--light .eco__links { background: rgba(0, 0, 0, .05); border-color: rgba(0, 0, 0, .06); }

/* низ каждой страницы: остальные продукты экосистемы */
.eco-more { padding: clamp(90px, calc(11vw / var(--z, 1)), 150px) 0 clamp(60px, calc(8vw / var(--z, 1)), 100px); background: #0d0d0f; color: var(--gray); }
.eco-more__lead { max-width: 640px; margin-top: 18px; color: var(--muted-dark); font-size: clamp(18px, calc(1.8vw / var(--z, 1)), 22px); line-height: 1.4; }
.eco-more__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: clamp(36px, calc(5vw / var(--z, 1)), 56px); }
.eco-card { position: relative; isolation: isolate; display: grid; gap: 10px; min-height: 260px; padding: 30px; border-radius: 28px; overflow: hidden; background: #18181b; border: 1px solid rgba(255, 255, 255, .07); transition: transform .4s var(--ease-out), border-color .3s; }
.eco-card::before { content: ''; position: absolute; z-index: -1; right: -20%; bottom: -50%; width: 90%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--k) 32%, transparent), transparent); }
.eco-card:hover { transform: translateY(-3px); border-color: rgba(255, 255, 255, .16); }
.eco-card img { width: 48px; height: 48px; border-radius: 13px; margin-bottom: auto; }
.eco-card h3 { margin-top: 22px; font-size: 28px; font-weight: 600; letter-spacing: -.024em; }
.eco-card p { max-width: 440px; color: #a1a1a6; font-size: 16px; line-height: 1.5; }
.eco-card span { color: #6aa6ff; font-size: 16px; }
.foot { padding: 28px 0 40px; background: #0d0d0f; color: var(--muted-dark); font-size: 13px; border-top: 1px solid rgba(255, 255, 255, .06); }
.foot .wrap { display: flex; flex-wrap: wrap; gap: 10px 26px; justify-content: space-between; }
.foot a:hover { color: #fff; }
.foot nav { display: flex; flex-wrap: wrap; gap: 10px 22px; }

/* hero подстраниц App и Studio */
.page-hero { position: relative; display: grid; place-content: center; justify-items: center; min-height: calc(100vh / var(--z, 1)); min-height: calc(100svh / var(--z, 1)); padding: 50px var(--gutter) 130px; background: #000; text-align: center; overflow: hidden; }
.page-hero::before { content: ''; position: absolute; left: 50%; top: 62%; width: calc(110vw / var(--z, 1)); max-width: 1300px; aspect-ratio: 2 / 1; transform: translate(-50%, -50%); background: radial-gradient(closest-side, var(--glow, rgba(67, 141, 255, .22)), transparent); pointer-events: none; }
.page-hero > * { position: relative; }
.page-hero__mark { width: 84px; height: 84px; border-radius: 22px; margin-bottom: 26px; }
.page-hero__title { font-size: clamp(56px, calc(9vw / var(--z, 1)), 120px); line-height: 1; font-weight: 600; letter-spacing: -.04em; }
.page-hero__lead { max-width: 760px; margin-top: 18px; font-size: clamp(24px, calc(3vw / var(--z, 1)), 40px); line-height: 1.12; font-weight: 600; letter-spacing: -.028em; background: linear-gradient(100deg, #f5f5f7 10%, #9fb6ff 55%, #c6a6ff 85%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.page-hero__meta { margin-top: 18px; color: var(--muted-dark); font-size: 15px; }
.page-hero .hero__cta { margin-top: 30px; }

/* инфоблоки App и Studio */
.info { padding: clamp(90px, calc(11vw / var(--z, 1)), 150px) 0; background: #000; color: var(--gray); }
.info--soft { background: #0d0d0f; }
.info__lead { max-width: 680px; margin-top: 20px; color: var(--muted-dark); font-size: clamp(19px, calc(2vw / var(--z, 1)), 24px); line-height: 1.38; font-weight: 500; letter-spacing: -.016em; }
.info__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: clamp(40px, calc(5vw / var(--z, 1)), 60px); }
.info__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.info__card { display: grid; align-content: start; gap: 10px; padding: 28px; border-radius: 26px; background: #141416; border: 1px solid rgba(255, 255, 255, .07); }
.info--soft .info__card { background: #18181b; }
.info__card i { width: 26px; height: 26px; margin-bottom: 14px; background: var(--k, #6aa6ff); -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
.info__card b { display: block; font-size: 21px; font-weight: 600; letter-spacing: -.02em; }
.info__card p { color: #a1a1a6; font-size: 16px; line-height: 1.5; }
.info__card code { padding: 1px 6px; border-radius: 6px; background: rgba(255, 255, 255, .08); font-family: 'JetBrains Mono', var(--mono); font-size: .88em; }
.info__card--accent { background: linear-gradient(180deg, #16203a, #141416 70%); border-color: rgba(67, 141, 255, .4); }
.info__tag { justify-self: start; padding: 3px 10px; border-radius: 999px; background: rgba(255, 255, 255, .08); color: #d2d2d7; font-size: 12px; font-weight: 600; }
.info__steps { counter-reset: s; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: clamp(40px, calc(5vw / var(--z, 1)), 60px); }
.info__steps li { counter-increment: s; display: grid; gap: 8px; padding: 26px; border-radius: 24px; background: #141416; border: 1px solid rgba(255, 255, 255, .07); }
.info__steps li::before { content: counter(s); display: grid; place-items: center; width: 32px; height: 32px; margin-bottom: 10px; border-radius: 50%; background: #438dff; color: #fff; font-size: 15px; font-weight: 600; }
.info__steps b { font-size: 19px; font-weight: 600; letter-spacing: -.018em; }
.info__steps p { color: #a1a1a6; font-size: 15px; line-height: 1.5; }
.status-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: rgba(255, 159, 10, .12); color: #ffb340; font-size: 14px; font-weight: 600; }
.status-pill::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

/* телефон: тёмная карточка, телефон крупно и обрезан снизу, как в CV */
.dokky { padding: clamp(80px, calc(10vw / var(--z, 1)), 130px) 0; }
.dokky .wrap { width: min(1180px, 100% - 2 * var(--gutter)); }
.dokky__card { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 480px; grid-template-rows: minmax(0, 1fr); gap: clamp(30px, calc(5vw / var(--z, 1)), 70px); height: clamp(580px, calc(74svh / var(--z, 1)), 680px); padding: 0 0 0 clamp(28px, calc(5vw / var(--z, 1)), 64px); border-radius: 36px; overflow: hidden; background: linear-gradient(160deg, #18181c, #0f0f12 60%); border: 1px solid rgba(255, 255, 255, .07); }
.dokky__card .product-head { align-self: center; padding: 40px 0; }
.dokky__card .phone { align-self: start; padding-top: 0; }
/* телефон крупный и начинается почти у верхнего края карточки, как в CV */
.dokky__card .phone__frame { width: 500px; height: 1030px; margin-top: -64px; }
.dokky__card .asks { display: flex; flex-wrap: wrap; gap: 8px; margin: 28px 0 22px; }
.dokky .model-credit { position: absolute; left: clamp(28px, calc(5vw / var(--z, 1)), 64px); bottom: 16px; z-index: 2; }
/* поле ввода поднято к середине экрана: низ телефона за краем карточки */
.dk-composer { margin: 8px 18px 66%; padding: 8px 8px 8px 14px; }
.phone__screen::after { content: none; }

@media (max-width: 1068px) {
  .info__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .info__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dokky__card { grid-template-columns: minmax(0, 1fr) 400px; }
  .dokky__card .phone__frame { width: 400px; height: 823px; }
}
@media (max-width: 860px) {
  .eco__brand span { display: none; }
  .dokky__card { grid-template-columns: 1fr; grid-template-rows: auto; height: auto; padding: 40px 24px 0; }
  .dokky__card .product-head { padding: 0; }
  .dokky__card .phone { height: 560px; padding-top: 10px; justify-self: center; }
}
@media (max-width: 734px) {
  .eco { gap: 10px; font-size: 12px; }
  .eco__cta { display: none; }
  .eco__links { margin-left: auto; }
  .eco__links a { padding: 6px 9px; }
  .eco-more__grid, .info__grid, .info__grid--2, .info__steps { grid-template-columns: 1fr; }
  .dokky__card .phone { height: 500px; }
  .dokky__card .phone__frame { width: 300px; height: 620px; }
}
.dokky__card .product-head__title { font-size: clamp(38px, calc(4.4vw / var(--z, 1)), 60px); }
.dokky__card .product-head__lead { font-size: clamp(17px, calc(1.6vw / var(--z, 1)), 20px); }
.show__pair.is-answered { gap: 20px; }
.wc-image--wide { width: clamp(300px, min(calc(54vw / var(--z, 1)), calc(68svh / var(--z, 1))), 640px); border-radius: 18px; }
/* «Ещё в Докки»: крупная панель как на страницах Apple, ниже функции без карточек */
.wrap--more { width: min(1180px, 100% - 2 * var(--gutter)); }
.tg { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, calc(5vw / var(--z, 1)), 70px); align-items: center; padding: clamp(32px, calc(5vw / var(--z, 1)), 64px); border-radius: 32px; overflow: hidden; background: #111113; }
.tg::before { content: ''; position: absolute; z-index: -1; right: -10%; top: -30%; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(42, 171, 238, .2), transparent); }
.tg__eyebrow { display: flex; align-items: center; gap: 10px; color: #2aabee; font-size: 17px; font-weight: 600; }
.tg__eyebrow i, .feat i { display: block; background: linear-gradient(135deg, var(--g1, #5ac8fa), var(--g2, #2a7fff)); -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
.tg__eyebrow i { width: 24px; height: 24px; --g1: #5fd0ff; --g2: #2a8fe0; }
.tg__title { margin-top: 18px; font-size: clamp(34px, calc(4.4vw / var(--z, 1)), 56px); line-height: 1.05; font-weight: 600; letter-spacing: -.03em; }
.tg__text { max-width: 440px; margin-top: 18px; color: #a1a1a6; font-size: clamp(17px, calc(1.6vw / var(--z, 1)), 21px); line-height: 1.42; }
.tg .link { margin-top: 24px; font-size: 17px; }
.tg__chat { display: grid; gap: 8px; padding: 22px 18px; border-radius: 24px; background: #0e1621; font-size: 15px; line-height: 1.4; box-shadow: 0 40px 90px rgba(0, 0, 0, .5); }
.tg__msg { max-width: 82%; padding: 8px 12px; border-radius: 16px; }
.tg__msg--out { justify-self: end; background: #2b5278; color: #fff; border-bottom-right-radius: 5px; }
.tg__msg--in { justify-self: start; background: #182533; color: #e8edf2; border-bottom-left-radius: 5px; }
.tg__voice { display: flex; align-items: center; gap: 10px; }
.tg__voice b { position: relative; flex: none; width: 34px; height: 34px; border-radius: 50%; background: #6ab2f2; }
.tg__voice b::after { content: ''; position: absolute; left: 13px; top: 10px; border-left: 11px solid #2b5278; border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.tg__voice svg { width: 120px; height: 22px; color: #9cc9f2; }
.tg__voice small { color: #9cc9f2; font-size: 12px; }
.feats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(24px, calc(4vw / var(--z, 1)), 56px); margin-top: clamp(50px, calc(7vw / var(--z, 1)), 90px); }
.feat { display: grid; align-content: start; gap: 10px; padding: 34px 0 44px; border-top: 1px solid rgba(255, 255, 255, .12); }
.feat i { width: 44px; height: 44px; margin-bottom: 14px; }
.feat h3 { font-size: 24px; font-weight: 600; letter-spacing: -.022em; }
.feat p { max-width: 340px; color: #a1a1a6; font-size: 17px; line-height: 1.47; }
.more__note { margin-top: 8px; color: var(--muted-dark); font-size: 13px; }
@media (max-width: 860px) {
  .tg { grid-template-columns: 1fr; }
  .feats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .feats { grid-template-columns: 1fr; }
  .feat { padding: 26px 0 30px; }
}

/* ---------- спокойный слой: без кричащих заголовков, свечений и градиентного текста ---------- */
.section-title, .product-head__title, .tg__title, .contact__title, .dokky__card .product-head__title { font-size: clamp(30px, calc(3.3vw / var(--z, 1)), 44px); line-height: 1.12; font-weight: 600; letter-spacing: -.022em; }
.section-title span { color: inherit; }
.hero__title, .page-hero__title { font-size: clamp(48px, calc(6vw / var(--z, 1)), 76px); line-height: 1.02; letter-spacing: -.03em; }
.hero__lead, .page-hero__lead { margin-top: 14px; font-size: clamp(20px, calc(2vw / var(--z, 1)), 26px); line-height: 1.28; font-weight: 500; letter-spacing: -.015em; color: #a1a1a6; background: none; -webkit-text-fill-color: currentColor; }
.hero__meta, .page-hero__meta { color: #6e6e73; font-size: 14px; }
.hero__mark, .page-hero__mark { display: block; width: 64px; height: 64px; margin: 0 auto 22px; border-radius: 16px; }
.page-hero::before, .tg::before, .eco-card::before { display: none; }
.product-head__lead, .info__lead, .eco-more__lead, .plans__trial, .tg__text { font-size: clamp(16px, calc(1.35vw / var(--z, 1)), 19px); line-height: 1.45; font-weight: 400; letter-spacing: -.01em; }
.product-head { padding-bottom: clamp(24px, calc(3.5vh / var(--z, 1)), 40px); }
.info__card b, .info__steps b { font-size: 18px; }
.info__card i, .feat i, .tg__eyebrow i { background: #d2d2d7; }
.info__card--accent { background: #141416; border-color: rgba(67, 141, 255, .45); }
.info--soft .info__card--accent { background: #18181b; }
.feat h3 { font-size: 19px; }
.feat p, .info__card p, .eco-card p { font-size: 15.5px; }
.feat i { width: 30px; height: 30px; }
.eco-card { min-height: 0; padding: 26px; gap: 8px; }
.eco-card h3 { margin-top: 14px; font-size: 21px; }
.eco-card img { width: 40px; height: 40px; border-radius: 10px; }
.dokky__card { background: #141416; }
.plan--main { background: #161619; }
.studio-app, .intro__win { box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 30px 80px rgba(0, 0, 0, .55); }

/* экраны: каждая секция в высоту окна, содержимое по центру */
.screen { min-height: calc(100vh / var(--z, 1)); min-height: calc(100svh / var(--z, 1)); display: grid; align-content: center; }
.screen:not(.hero):not(.intro):not(.page-hero) { padding-block: clamp(48px, calc(7vh / var(--z, 1)), 88px); }
.hero .show__item, .hero .hero__copy { padding: 56px var(--gutter); }
.page-hero { padding: 56px var(--gutter); }
.contact { min-height: calc(100svh / var(--z, 1)); }
.screen.eco-more { grid-template-rows: 1fr auto; align-content: stretch; padding-bottom: 0; }
.eco-more > .wrap { align-self: center; }
.eco-more .foot { margin-top: 40px; }
/* привязка к экранам для тачпада (на Mac сразу, дальше по событиям колеса). мышь ведёт initWheel */
@media (min-width: 861px) and (min-height: 600px) {
  html.is-snap { scroll-snap-type: y mandatory; }
  .is-snap .screen { scroll-snap-align: start; scroll-snap-stop: always; }
}

/* Telegram и функции */
.tgs { background: #000; }
.feats { margin-top: clamp(28px, calc(4vh / var(--z, 1)), 48px); }
.feat { padding: 26px 0 30px; }

/* Докки App: окно влезает в экран вместе с заголовком */
.app .dx { height: clamp(440px, calc(calc(100svh / var(--z, 1)) - 350px), 640px); }

/* интро Studio: обычный экран, сцена играет сама, когда экран показан */
.js .intro, .intro { --win-h: min(540px, calc(64svh / var(--z, 1))); height: auto; }
.js .intro__stage, .intro__stage { position: relative; height: calc(100vh / var(--z, 1)); height: calc(100svh / var(--z, 1)); }
.intro__head { position: absolute; z-index: 2; left: 0; right: 0; top: clamp(48px, calc(8vh / var(--z, 1)), 90px); padding-inline: var(--gutter); text-align: center; }
.intro__head .info__lead { margin: 12px auto 0; }
.intro__win { top: calc(clamp(48px, calc(8vh / var(--z, 1)), 90px) + 150px); }

/* тестер Studio */
.studio .product-head { text-align: center; }
.panel { gap: 14px; padding: 20px; background: #19191b; }
.panel__label { color: var(--st-muted); font-size: 12.5px; letter-spacing: 0; text-transform: none; }
.picker { gap: 6px; padding: 0; background: none; }
.picker button { height: 34px; border: 1px solid var(--st-line); border-radius: 10px; font-size: 13px; }
.picker button[aria-checked='true'] { background: #f5f5f7; border-color: #f5f5f7; color: #111; box-shadow: none; }
.seg { display: flex; gap: 18px; padding: 0; border-radius: 0; background: none; border-bottom: 1px solid var(--st-line); }
.seg button { height: 34px; padding: 0; border-radius: 0; margin-bottom: -1px; border-bottom: 2px solid transparent; font-size: 13px; }
.seg button[aria-selected='true'] { background: none; box-shadow: none; color: var(--st-text); border-bottom-color: var(--st-text); }
.panel__row { align-items: flex-end; gap: 14px; }
.panel__run { height: 34px; border-radius: 10px; }
.feed { gap: 4px; }
.feed__who { margin-top: 8px; font-size: 12px; letter-spacing: 0; text-transform: none; }
.ev { position: relative; gap: 12px; padding: 7px 0; background: none; border-radius: 0; }
.ev::before { content: ''; position: absolute; left: 9.5px; top: 30px; bottom: -6px; width: 1px; background: var(--st-line); }
.ev__mark { width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--st-line); background: #19191b; }
.ev__mark svg { width: 12px; height: 12px; }
.ev:not(.is-running) .ev__mark { border-color: rgba(121, 181, 150, .5); }
.ev__body b { font-weight: 500; }
.ev__fields { padding: 8px 10px; border-radius: 10px; background: rgba(255, 255, 255, .04); }
.feed__done { padding: 8px 0 0; background: none; color: var(--st-success); }
.step__body p { font-size: 12px; letter-spacing: 0; text-transform: none; }
.canvas { background-color: #121213; background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .06) 1px, transparent 0); }
.node { box-shadow: none; }
.node.is-running { box-shadow: 0 0 0 3px rgba(138, 180, 255, .14); }
.facts { margin-top: clamp(32px, calc(5vh / var(--z, 1)), 56px); padding-top: 28px; gap: 28px; }
.facts strong { font-size: 18px; }
.facts span { font-size: 15.5px; }

@media (max-width: 734px) {
  .intro { --win-h: min(440px, calc(56svh / var(--z, 1))); }
  .intro__win { top: calc(clamp(48px, calc(8vh / var(--z, 1)), 90px) + 170px); }
  .facts { grid-template-columns: 1fr; }
}
/* тарифы шире: длинные списки в одну строку, экран не перерастает окно */
.plans .wrap { width: min(1180px, 100% - 2 * var(--gutter)); }
.plans__grid { margin-top: clamp(24px, calc(3.5vh / var(--z, 1)), 40px); }
.plan__price { font-size: clamp(28px, calc(2.6vw / var(--z, 1)), 36px); }
.plans__trial { max-width: 900px; }
/* объём и так первый пункт списка */
.plan__lead { display: none; }
/* шаги без цветных кружков: просто номер */
.info__steps li::before { display: block; width: auto; height: auto; margin-bottom: 6px; border-radius: 0; background: none; color: #6e6e73; font-size: 14px; font-weight: 500; }

/* блоки с интерфейсом не ужимаем под окно: своя высота, экран может быть выше окна */
.screen.app, .screen.studio { align-content: start; padding-block: clamp(96px, calc(12vh / var(--z, 1)), 140px); }
@media (min-width: 861px) {
  .app .dx { height: 720px; }
}

/* светлые блоки, как на странице App */
.studio, .more { background: #fff; color: var(--ink); }
.studio .product-head__lead, .more__note { color: #6e6e73; }
.studio-app { box-shadow: 0 0 0 1px rgba(0, 0, 0, .1), 0 30px 80px rgba(0, 0, 0, .2); }
.more .feat { border-top-color: rgba(0, 0, 0, .1); }
.more .feat p { color: #6e6e73; }
.more .feat i { background: #1d1d1f; }

/* интро Studio: светлый экран, окно крупнее и с мягкой тенью */
.js .intro, .intro { --win-h: min(600px, calc(70svh / var(--z, 1))); background: var(--gray); color: var(--ink); }
.js .intro__stage, .intro__stage { height: max(calc(100svh / var(--z, 1)), 880px); }
.intro__head .info__lead { color: #6e6e73; }
.intro__win { box-shadow: 0 0 0 1px rgba(0, 0, 0, .12), 0 40px 90px rgba(0, 0, 0, .28), 0 12px 30px rgba(0, 0, 0, .12); }
.intro__cursor { filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .35)); }

/* камера тестера: плавно едет за текущим шагом */
.canvas__scene { transition: transform .9s cubic-bezier(.45, 0, .2, 1); }
.canvas.no-anim .canvas__scene { transition: none; }
@media (prefers-reduced-motion: reduce) { .canvas__scene { transition: none; } }
@media (max-width: 734px) {
  .js .intro, .intro { --win-h: min(460px, calc(58svh / var(--z, 1))); }
  .js .intro__stage, .intro__stage { height: calc(100svh / var(--z, 1)); }
}
.intro__head .info__lead { max-width: 640px; }

/* ---------- главная: заголовок отдельно, диалог ниже, светлые блоки ---------- */
.hero { display: grid; place-content: center; height: auto; }
.hero .hero__copy { display: grid; justify-items: center; padding: 56px var(--gutter); }
.convo { position: relative; height: calc(100vh / var(--z, 1)); height: calc(100svh / var(--z, 1)); min-height: 600px; background: #000; overflow: hidden; }
.convo .show__item { padding: 56px var(--gutter); }

/* «Докки расскажет о себе»: белый экран, светлая карточка, чёрный телефон */
.dokky { background: #fff; color: var(--ink); }
.dokky::before { content: none; }
.dokky__card { grid-template-columns: minmax(0, 1fr) 500px; padding-right: clamp(24px, calc(4vw / var(--z, 1)), 64px); background: #f5f5f7; border: 0; }
.dokky .product-head__lead { color: #6e6e73; }
.dokky .link--light { color: #0066cc; }
.dokky .model-credit { color: #86868b; }
.dokky .asks button { background: #fff; color: var(--ink); border-color: rgba(0, 0, 0, .08); }
.dokky .asks button::after { color: #86868b; }
.dokky .asks button:hover, .dokky .asks button[aria-pressed='true'] { background: #fff; border-color: rgba(0, 0, 0, .3); }
.dokky__card .phone__frame:not(.has-webgl) { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .18), 0 24px 40px rgba(0, 0, 0, .12); }
/* у 3D-телефона едва заметная тень по силуэту */
.dokky .phone__webgl { filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .1)); }

/* экран телефона остаётся тёмным: свои цвета, светлая секция на него не влияет */
.dokky .phone__screen { color: #f2f2f7; }
@media (max-width: 1068px) {
  .dokky__card { grid-template-columns: minmax(0, 1fr) 400px; }
}
@media (max-width: 860px) {
  .dokky__card { grid-template-columns: 1fr; padding-right: 24px; }
}

/* «Что ещё есть»: светло-серый */
.more { background: var(--gray); }

/* тарифы: белые */
.plans { background: #fff; color: var(--ink); }
.plans__trial, .plans__note, .plan__price small { color: #6e6e73; }
.plans__trial b { color: var(--ink); }
.plan, .plan--main { background: #f5f5f7; border-color: transparent; box-shadow: none; }
.plan--main { background: #fff; border: 1px solid #0071e3; box-shadow: 0 20px 50px rgba(0, 113, 227, .12); }
.plan__list { border-top-color: rgba(0, 0, 0, .1); color: #1d1d1f; }
.plan__list li::before { border-color: #1a9e47; }

/* App и Studio: цветная подсветка за заголовком */
.page-hero::before { display: block; top: 58%; opacity: .9; }

/* ---------- App: режимы подтверждений ---------- */
.perm__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 540px); gap: clamp(40px, calc(6vw / var(--z, 1)), 96px); align-items: center; }
.perm__modes { display: inline-flex; gap: 4px; margin-top: 34px; padding: 4px; border-radius: 14px; background: rgba(255, 255, 255, .07); }
.perm__modes button { position: relative; overflow: hidden; height: 38px; padding: 0 16px; border-radius: 10px; color: #a1a1a6; font-size: 14px; font-weight: 500; transition: background-color .3s, color .3s; }
.perm__modes button:hover { color: #f5f5f7; }
.perm__modes button[aria-selected='true'] { background: #f5f5f7; color: #111; }
.perm__modes i { position: absolute; left: 10px; right: 10px; bottom: 4px; height: 2px; border-radius: 2px; background: rgba(0, 0, 0, .18); transform: scaleX(0); transform-origin: 0 50%; }
.perm__modes .is-timing i { animation: perm-bar 4.2s linear forwards; }
@keyframes perm-bar { to { transform: scaleX(1); } }
.perm__note { min-height: 3em; max-width: 440px; margin-top: 18px; color: #a1a1a6; font-size: 15.5px; line-height: 1.5; }
.perm__card { padding: 22px; border-radius: 28px; background: #18181b; border: 1px solid rgba(255, 255, 255, .07); box-shadow: 0 30px 80px rgba(0, 0, 0, .5); }
.perm__head { display: flex; align-items: center; gap: 10px; padding: 2px 4px 16px; color: #a1a1a6; font-size: 14px; }
.perm__head img { border-radius: 6px; }
.perm__list { display: grid; gap: 8px; }
.perm__list li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 12px 12px 10px; border-radius: 16px; background: #222225; transition: background-color .35s; }
.perm__ico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: rgba(255, 255, 255, .06); color: #d2d2d7; }
.perm__ico svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.perm__list code { overflow: hidden; color: #f5f5f7; font-family: 'JetBrains Mono', var(--mono); font-size: 13px; white-space: nowrap; text-overflow: ellipsis; }
.perm__st { padding: 5px 10px; border-radius: 999px; font-size: 12.5px; font-style: normal; font-weight: 600; white-space: nowrap; opacity: 0; transform: translateY(5px) scale(.96); transition: opacity .3s, transform .4s var(--ease-out); }
.perm__list li.is-in .perm__st { opacity: 1; transform: none; }
.perm__list li[data-kind='ask'] .perm__st { background: rgba(255, 159, 10, .14); color: #ffb340; }
.perm__list li[data-kind='ok'] .perm__st { background: rgba(48, 209, 88, .14); color: #4cd964; }
.perm__list li[data-kind='block'] .perm__st { background: rgba(255, 69, 58, .14); color: #ff6961; }
.perm__list li[data-kind='block'] { background: #1e1b1c; }
.perm__list li[data-kind='block'] code { color: #a1a1a6; }

/* ---------- App: память проекта, орбита вокруг «мозга» ---------- */
.mem { position: relative; padding-block: clamp(48px, calc(7vh / var(--z, 1)), 88px); background: #fff; color: var(--ink); overflow: hidden; }
.mem .info__lead { color: #6e6e73; }
.mem__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px); gap: clamp(30px, calc(5vw / var(--z, 1)), 80px); align-items: center; }
.mem__facts { display: grid; grid-template-columns: auto 1fr; gap: 14px 22px; margin-top: 34px; padding-top: 26px; border-top: 1px solid rgba(0, 0, 0, .1); font-size: 15.5px; }
.mem__facts dt { font-weight: 600; }
.mem__facts dd { color: #6e6e73; }
.orbit { --size: min(560px, calc(86vw / var(--z, 1))); position: relative; width: var(--size); height: var(--size); margin-inline: auto; }
.orbit__track { position: absolute; inset: 0; margin: auto; border-radius: 50%; border: 1px dashed rgba(0, 0, 0, .12); }
.orbit__track--1 { width: 82%; height: 82%; }
.orbit__track--2 { width: 46%; height: 46%; border-style: solid; border-color: rgba(0, 0, 0, .06); }
.orbit__core { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 22%; aspect-ratio: 1; border-radius: 30%; translate: -50% -50%; background: #1d1d1f; color: #fff; box-shadow: 0 20px 50px rgba(0, 0, 0, .25); }
.orbit__core::after { content: ''; position: absolute; inset: -14px; border-radius: 36%; border: 1px solid rgba(0, 113, 227, .35); opacity: 0; }
.orbit.is-in .orbit__core::after { animation: core-pulse 2.6s 1.6s ease-out infinite; }
@keyframes core-pulse { 0% { opacity: .9; transform: scale(.9); } 100% { opacity: 0; transform: scale(1.35); } }
.orbit__core svg { width: 52%; height: 52%; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.orbit__ring { position: absolute; inset: 0; }
.orbit__ring--outer { --r: calc(var(--size) * .41); }
.orbit__ring--inner { --r: calc(var(--size) * .23); }
.orbit__item { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform: rotate(var(--a)) translateX(var(--r)) rotate(calc(-1 * var(--a))); }
.orbit__item b { position: absolute; translate: -50% -50%; padding: 9px 15px; border-radius: 999px; background: #fff; border: 1px solid rgba(0, 0, 0, .08); box-shadow: 0 8px 24px rgba(0, 0, 0, .08); font-size: 14px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; }
.orbit__ring--inner .orbit__item b { padding: 6px 12px; background: #f5f5f7; box-shadow: none; color: #424245; font-size: 12.5px; font-weight: 500; }
/* сначала резкий разгон, потом плавно медленное вращение; подписи крутятся обратно и остаются ровными */
/* анимацию вешаем только после появления: даже на паузе она держала кольца и подписи в отдельных слоях */
.orbit.is-in .orbit__ring--outer, .orbit.is-in .orbit__ring--outer b { animation: var(--in) 2.4s cubic-bezier(.1, .75, .2, 1) both, var(--spin) 90s linear 2.4s infinite; }
.orbit.is-in .orbit__ring--inner, .orbit.is-in .orbit__ring--inner b { animation: var(--in) 2.4s cubic-bezier(.1, .75, .2, 1) both, var(--spin) 60s linear 2.4s infinite; }
.orbit__ring--outer, .orbit__ring--inner b { --in: orbit-in; --spin: orbit-spin; }
.orbit__ring--inner, .orbit__ring--outer b { --in: orbit-in-rev; --spin: orbit-spin-rev; }
@keyframes orbit-in { from { transform: rotate(-420deg); } to { transform: rotate(0); } }
@keyframes orbit-in-rev { from { transform: rotate(420deg); } to { transform: rotate(0); } }
@keyframes orbit-spin { to { transform: rotate(360deg); } }
@keyframes orbit-spin-rev { to { transform: rotate(-360deg); } }
.orbit .orbit__item b { opacity: 0; transition: opacity .6s; }
.orbit.is-in .orbit__item b { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .orbit__ring, .orbit__ring b { animation: none !important; } }
@media (max-width: 960px) {
  .perm__grid, .mem__grid { grid-template-columns: 1fr; }
  .orbit .orbit__item b { font-size: 12px; padding: 7px 11px; }
}

/* ---------- Studio: как это работает ---------- */
.how { background: #000; color: var(--gray); }
.how__head { text-align: center; }
.how__head .info__lead { margin-inline: auto; }
.how__steps { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, calc(3vw / var(--z, 1)), 40px); margin-top: clamp(44px, calc(6vh / var(--z, 1)), 72px); }
/* линия между шагами заполняется слева направо, когда блок показан */
.how__steps::before, .how__steps::after { content: ''; position: absolute; left: 28px; right: calc(25% - 28px); top: 27px; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, .1); }
.how__steps::after { background: linear-gradient(90deg, #ff9f0a, #ff6a3d 50%, #c86bff); transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.6s cubic-bezier(.3, .7, .2, 1) .3s; }
.how__steps.is-in::after { transform: scaleX(1); }
.how__steps li { position: relative; display: grid; align-content: start; gap: 8px; }
.how__dot { position: relative; z-index: 1; display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 14px; border-radius: 18px; background: #1c1c1e; border: 1px solid rgba(255, 255, 255, .1); color: #f5f5f7; transition: background-color .5s, border-color .5s; }
.how__steps.is-in li:nth-child(1) .how__dot { transition-delay: .3s; }
.how__steps.is-in li:nth-child(2) .how__dot { transition-delay: .75s; }
.how__steps.is-in li:nth-child(3) .how__dot { transition-delay: 1.2s; }
.how__steps.is-in li:nth-child(4) .how__dot { transition-delay: 1.6s; }
.how__steps.is-in .how__dot { background: #2a2a2d; border-color: rgba(255, 159, 10, .5); }
.how__dot svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.how__steps small { color: #ff9f0a; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.how__steps b { font-size: 20px; font-weight: 600; letter-spacing: -.02em; }
.how__steps p { max-width: 260px; color: #a1a1a6; font-size: 15.5px; line-height: 1.5; }
.how__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: clamp(44px, calc(6vh / var(--z, 1)), 72px); }
.how__facts li { display: grid; gap: 8px; padding: 26px 28px; border-radius: 24px; background: #111113; border: 1px solid rgba(255, 255, 255, .07); }
.how__facts b { font-size: 18px; font-weight: 600; letter-spacing: -.015em; }
.how__facts span { color: #a1a1a6; font-size: 15.5px; line-height: 1.5; }

/* ---------- Studio: интеграции ---------- */
.integ { background: #fff; color: var(--ink); }
.integ .info__lead { color: #6e6e73; }
.integ__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: clamp(40px, calc(5vh / var(--z, 1)), 64px); }
.integ__card { display: grid; align-content: start; gap: 8px; padding: 28px; border-radius: 28px; background: #f5f5f7; transition: transform .4s var(--ease-out), box-shadow .4s; }
.integ__card:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(0, 0, 0, .08); }
.integ__card--wide, .integ__card:nth-child(6) { grid-column: span 2; }
.integ__card b { font-size: 20px; font-weight: 600; letter-spacing: -.02em; }
.integ__card p { max-width: 420px; color: #6e6e73; font-size: 15.5px; line-height: 1.5; }
.logos { display: flex; align-items: center; height: 56px; margin-bottom: 18px; }
.logos .logo { flex: none; width: 52px; height: 52px; border-radius: 50%; box-shadow: 0 0 0 3px #f5f5f7, 0 6px 16px rgba(0, 0, 0, .14); }
.logos .logo + .logo { margin-left: -12px; }
.logos svg.logo:nth-child(3) { border-radius: 15px; }
.logos--docs .logo { width: 44px; height: 52px; border-radius: 6px; box-shadow: none; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .14)); }
.logos--docs .logo + .logo { margin-left: -14px; transform: translateY(6px) rotate(6deg); }
.logos--docs .logo:first-child { transform: rotate(-5deg); }
.logo--glyph { display: grid; place-items: center; border-radius: 16px !important; background: linear-gradient(160deg, color-mix(in srgb, var(--c) 88%, #fff), var(--c)); color: #fff; }
.logo--glyph svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 960px) {
  .how__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
  .how__steps::before, .how__steps::after { display: none; }
  .integ__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .how__steps, .how__facts, .integ__grid { grid-template-columns: 1fr; }
  .integ__card--wide, .integ__card:nth-child(6) { grid-column: auto; }
}

/* мягкий блик стекла: широкая диагональ сверху слева, едва заметная */
.dokky .phone__screen::after { content: ''; position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none; background: linear-gradient(118deg, rgba(255, 255, 255, .085) 0%, rgba(255, 255, 255, .03) 26%, transparent 27.5%, transparent 62%, rgba(255, 255, 255, .025) 80%, transparent 100%); left: 0; right: 0; bottom: 0; height: auto; }
.perm__modes button { white-space: nowrap; }
.perm__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 560px); }
.intro__head .info__lead { max-width: 760px; }
@media (max-width: 600px) {
  .perm__modes { display: flex; width: 100%; }
  .perm__modes button { flex: 1; min-width: 0; padding: 0 6px; font-size: 13px; }
  .perm__list li { grid-template-columns: 30px minmax(0, 1fr); }
  .perm__list .perm__st { grid-column: 2; justify-self: start; }
  .perm__ico { width: 30px; height: 30px; }
}
@media (max-width: 960px) {
  .perm__grid, .mem__grid { grid-template-columns: 1fr; }
}

/* ---------- hero: у каждой страницы своя подсветка из двух пятен разного размера, яркости и размытия ---------- */
.hero, .page-hero { position: relative; overflow: hidden; }
.hero::before, .hero::after, .page-hero::before, .page-hero::after {
  content: ''; display: block; position: absolute; left: var(--x); top: var(--y); width: var(--w); aspect-ratio: var(--ar, 2 / 1); pointer-events: none;
  background: radial-gradient(closest-side, var(--c), transparent); filter: blur(var(--blur, 0px)); opacity: 0;
  transform: translate(-50%, -50%) rotate(var(--r, 0deg));
  animation: glow-in 2.4s cubic-bezier(.25, .6, .2, 1) var(--d, .2s) forwards, glow-breathe var(--t, 14s) ease-in-out calc(var(--d, .2s) + 2.4s) infinite;
}
@keyframes glow-in { from { opacity: 0; transform: translate(-50%, -50%) rotate(var(--r, 0deg)) scale(.86); } to { opacity: var(--o, 1); transform: translate(-50%, -50%) rotate(var(--r, 0deg)) scale(1); } }
@keyframes glow-breathe {
  0%, 100% { opacity: var(--o, 1); transform: translate(-50%, -50%) rotate(var(--r, 0deg)) scale(1); }
  50% { opacity: calc(var(--o, 1) * .72); transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, 0px))) rotate(calc(var(--r, 0deg) + var(--dr, 4deg))) scale(var(--s, 1.06)); }
}
/* Докки: белые пятна по бокам, текст по центру остаётся на чёрном */
.hero::before { --x: 4%; --y: 46%; --w: min(calc(54vw / var(--z, 1)), 760px); --ar: 1 / 1.25; --r: -14deg; --c: rgba(255, 255, 255, .11); --blur: 20px; --dx: 24px; --dy: -18px; --dr: 6deg; --t: 15s; }
.hero::after { --x: 97%; --y: 64%; --w: min(calc(40vw / var(--z, 1)), 560px); --ar: 1 / 1.4; --r: 18deg; --c: rgba(225, 230, 255, .08); --blur: 40px; --dx: -20px; --dy: 22px; --dr: -5deg; --t: 19s; --d: .5s; }
/* App: синее пятно чуть ниже и левее, большое бледное справа сверху */
.page-hero--app::before { --x: 42%; --y: 70%; --w: min(calc(70vw / var(--z, 1)), 900px); --r: -9deg; --c: rgba(43, 120, 255, .34); --blur: 10px; --dx: 30px; --dy: -14px; --dr: 5deg; --t: 13s; }
.page-hero--app::after { --x: 70%; --y: 30%; --w: min(calc(60vw / var(--z, 1)), 780px); --ar: 1.4 / 1; --r: 16deg; --c: rgba(110, 150, 255, .13); --blur: 50px; --dx: -26px; --dy: 18px; --dr: -6deg; --t: 18s; --d: .55s; }
/* Studio: тёплое пятно внизу справа и маленькое яркое слева выше */
.page-hero--studio::before { --x: 60%; --y: 76%; --w: min(calc(76vw / var(--z, 1)), 980px); --r: 8deg; --c: rgba(255, 149, 0, .27); --blur: 14px; --dx: -28px; --dy: -12px; --dr: -5deg; --t: 14s; }
.page-hero--studio::after { --x: 28%; --y: 38%; --w: min(calc(34vw / var(--z, 1)), 440px); --ar: 1.3 / 1; --r: -20deg; --c: rgba(255, 112, 60, .16); --blur: 36px; --dx: 22px; --dy: 16px; --dr: 7deg; --t: 17s; --d: .5s; }
.hero > *, .page-hero > * { position: relative; z-index: 1; }
.hero__copy > *, .page-hero > * { animation: blur-in 1.1s cubic-bezier(.2, .7, .2, 1) both; }
.hero__copy > :nth-child(2), .page-hero > :nth-child(2) { animation-delay: .08s; }
.hero__copy > :nth-child(3), .page-hero > :nth-child(3) { animation-delay: .16s; }
.hero__copy > :nth-child(4), .page-hero > :nth-child(4) { animation-delay: .24s; }
.hero__copy > :nth-child(5), .page-hero > :nth-child(5) { animation-delay: .32s; }
@keyframes blur-in { from { opacity: 0; filter: blur(14px); transform: translateY(14px); } to { opacity: 1; filter: none; transform: none; } }
@media (max-width: 734px) {
  .hero::before { --x: -6%; --w: calc(90vw / var(--z, 1)); }
  .hero::after { --x: 106%; --w: calc(80vw / var(--z, 1)); }
}
@media (prefers-reduced-motion: reduce) {
  .hero::before, .hero::after, .page-hero::before, .page-hero::after { animation: none; opacity: var(--o, 1); }
  .hero__copy > *, .page-hero > * { animation: none; }
}

/* память проекта: просто чёрная иконка мозга в центре */
.orbit__core { width: 18%; background: none; box-shadow: none; color: #1d1d1f; border-radius: 0; }
.orbit__core::after { content: none; }
.orbit__core svg { width: 100%; height: 100%; stroke-width: 1.4; }

/* ---------- Studio: сценарий из блоков, плоско и спокойно ---------- */
.intro__canvas { background-color: #111112; background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .06) 1px, transparent 0); background-size: 22px 22px; }
.intro__win { box-shadow: 0 0 0 1px rgba(0, 0, 0, .1), 0 24px 60px rgba(0, 0, 0, .18); }
.intro__scene .node { gap: 10px; padding: 11px 12px; border-radius: 14px; background: #1b1b1d; border-color: rgba(255, 255, 255, .08); box-shadow: none; transition: border-color .35s, background-color .35s; }
.intro__scene .node__icon { width: 32px; height: 32px; border-radius: 9px; color: var(--k); background: rgba(255, 255, 255, .05); }
.intro__scene .node__icon svg { width: 16px; height: 16px; }
.intro__scene .node__title { font-size: 13.5px; font-weight: 500; }
.intro__scene .node__state { width: 14px; color: #a1a1a6; }
.intro__scene .node.is-running { border-color: rgba(255, 255, 255, .4); box-shadow: none; animation: none; }
.intro__scene .node.is-done { border-color: rgba(255, 255, 255, .14); }
.intro__scene .node.is-done .node__state { color: #8fc9a6; }
.iedge { stroke: rgba(255, 255, 255, .16); stroke-width: 1.5; filter: none; transition: stroke .4s; }
.iedge.is-lit { stroke: rgba(255, 255, 255, .55); filter: none; }
.iflow { display: none; }
.intro__cursor { transition: opacity .3s; }

/* ---------- 2D-блоки без теней, обводок, градиентов и ховеров; макеты интерфейсов не трогаем ---------- */
.info__card, .info__card--accent, .info--soft .info__card--accent { border: 0; background: #161618; }
.info--soft .info__card { background: #1a1a1d; }
.eco-card { border: 0; }
.eco-card:hover { transform: none; }
.plan, .plan--main { border: 0; box-shadow: none; }
.plan--main { background: #eef3fd; }
.dokky .asks button, .dokky .asks button:hover { border-color: transparent; }
.dokky .asks button[aria-pressed='true'] { background: #1d1d1f; color: #fff; }
.dokky .asks button[aria-pressed='true']::after { color: #a1a1a6; }

/* орбита: подписи на фоне секции, без рамок и теней - они просто прерывают линию круга */
.orbit__item b, .orbit__ring--inner .orbit__item b { border: 0; box-shadow: none; background: #fff; }
.orbit__ring--inner .orbit__item b { color: #6e6e73; }

/* режимы подтверждений: без общей карточки, только строки действий */
.perm__card { padding: 0; background: none; border: 0; box-shadow: none; }
.perm__head { padding: 0 2px 14px; }
.perm__list li { background: #1c1c1f; }

/* интеграции: настоящие логотипы рядом, без колец, теней и ховера */
.integ__card:hover { transform: none; box-shadow: none; }
.logos { gap: 8px; }
.logos .logo, .logos--docs .logo { width: 44px; height: 44px; border-radius: 0; box-shadow: none; filter: none; transform: none; margin-left: 0; object-fit: contain; }
.logos .logo + .logo, .logos--docs .logo + .logo { margin-left: 0; transform: none; }
.logos--docs .logo:first-child { transform: none; }
.logos img[src$='amocrm.png'] { border-radius: 11px; background: #fff; }
.logo--glyph { border-radius: 12px !important; background: var(--c); }

/* подвал: компактный, в цвет экрана */
.foot { padding: 34px 0 26px; background: none; border-top: 0; color: #86868b; font-size: 13px; }
.foot .wrap.foot__grid { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 1fr)); gap: 28px 40px; align-items: start; padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, .08); }
.foot__logo { display: inline-flex; align-items: center; gap: 10px; color: #f5f5f7; font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.foot__logo img { border-radius: 8px; }
.foot__brand p { max-width: 300px; margin-top: 10px; line-height: 1.5; }
.foot .foot__col { display: grid; flex-wrap: initial; gap: 9px; justify-items: start; }
.foot__col b { margin-bottom: 3px; color: #f5f5f7; font-size: 13px; font-weight: 600; }
.foot a { transition: color .2s; }
.foot a:hover { color: #f5f5f7; }
.foot__copy { grid-column: 1 / -1; color: #6e6e73; font-size: 12px; }
.eco-more .foot { margin-top: clamp(28px, calc(5vh / var(--z, 1)), 56px); }
@media (max-width: 734px) {
  .foot .wrap.foot__grid { grid-template-columns: 1fr 1fr; }
  .foot__brand { grid-column: 1 / -1; }
}

/* intro: точки сетки появляются только после «Создать» */
.intro__canvas { background-image: none; isolation: isolate; }
.intro__canvas::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .06) 1px, transparent 0); background-size: 22px 22px; opacity: var(--grid, 0); }
/* подвал - последний элемент экрана, лишний отступ секции под ним не нужен */
.screen.eco-more:not(.hero):not(.intro):not(.page-hero) { padding-bottom: 0; }

/* «Что ещё есть»: вместо линий - белые плитки на сером фоне */
.more .feats { gap: 14px; }
.more .feat { padding: 28px 28px 32px; border: 0; border-radius: 24px; background: #fff; }
.more .feat i { margin-bottom: 18px; }
@media (max-width: 734px) { .more .feat { padding: 24px 22px 26px; } }

/* интеграции: логотипы внахлёст, каждый следующий под предыдущим; кольцо в цвет карточки разделяет их */
.logos { gap: 0; }
.logos .logo { width: 48px; height: 48px; border-radius: 50%; box-shadow: 0 0 0 3px #f5f5f7; }
.logos .logo + .logo { margin-left: -12px; }
.logos .logo:nth-child(1) { z-index: 3; }
.logos .logo:nth-child(2) { z-index: 2; }
.logos .logo:nth-child(3) { z-index: 1; }
.logos .logo { position: relative; }
.logos img[src$='max.svg'] { border-radius: 25%; }
.logos img[src$='bitrix24.svg'] { border-radius: 31%; }
.logos img[src$='amocrm.png'] { border-radius: 31%; background: #fff; }
.logos .logo--glyph { width: 48px; height: 48px; box-shadow: none; }
/* документы - два листа веером, как раньше, но без тени */
.logos--docs .logo { width: 42px; height: 52px; border-radius: 0; box-shadow: none; filter: drop-shadow(2px 0 0 #f5f5f7) drop-shadow(-2px 0 0 #f5f5f7) drop-shadow(0 2px 0 #f5f5f7) drop-shadow(0 -2px 0 #f5f5f7); }
.logos--docs .logo:first-child { transform: rotate(-6deg); }
.logos--docs .logo + .logo { margin-left: -16px; transform: translateY(5px) rotate(7deg); }

/* ---------- index: демо возможностей (презентация, поиск с расчётом) ---------- */
.feature { background: #fff; color: var(--ink); }
.feature--soft { background: var(--gray); }
.feature__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(36px, calc(6vw / var(--z, 1)), 96px); align-items: center; }
.feature__grid--flip .feature__copy { order: 2; }
.feature__lead { max-width: 440px; margin-top: 18px; color: #6e6e73; font-size: clamp(16px, calc(1.35vw / var(--z, 1)), 19px); line-height: 1.45; letter-spacing: -.01em; }
.feature__note { margin-top: 22px; color: #86868b; font-size: 14px; }

/* слайды: контент, а не интерфейс - своя палитра колоды */
.deck { --deck-ink: #10352c; --deck-cream: #f3ede2; --deck-acc: #e8743b; }
.deck__stage { position: relative; aspect-ratio: 16 / 9; }
.deck__slide { position: absolute; inset: 0; display: grid; align-content: center; padding: 7% 8%; border-radius: 18px; overflow: hidden; opacity: 0; transform: translateX(10%) scale(.94); transition: transform .9s var(--ease-out), opacity .6s; }
.deck__slide.is-current { opacity: 1; transform: none; }
.deck__slide.is-past { opacity: 0; transform: translateX(-12%) scale(.9) rotate(-2deg); }
.deck__slide--cover { background: var(--deck-ink); color: var(--deck-cream); }
.deck__slide--num { background: var(--deck-cream); color: var(--deck-ink); }
.deck__slide--chart { align-content: stretch; grid-template-rows: auto 1fr auto; gap: 6%; background: #faf7f1; color: var(--deck-ink); }
.deck [data-b] { opacity: 0; transform: translateY(10px); transition: opacity .5s, transform .7s var(--ease-out); }
.deck [data-b].is-built { opacity: 1; transform: none; }
.deck__band { position: absolute; left: 0; top: 0; bottom: 0; width: 3.5%; background: var(--deck-acc); }
.deck__band[data-b] { transform: scaleY(0); transform-origin: top; }
.deck__band.is-built { transform: none; }
.deck__kicker { color: var(--deck-acc); font-size: clamp(10px, calc(1vw / var(--z, 1)), 13px); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.deck__h { margin-top: 3%; font-size: clamp(28px, calc(4vw / var(--z, 1)), 58px); line-height: .98; font-weight: 700; letter-spacing: -.035em; }
.deck__sub { max-width: 30ch; margin-top: 4%; font-size: clamp(12px, calc(1.2vw / var(--z, 1)), 16px); line-height: 1.35; opacity: .75; }
.deck__sub.is-built { opacity: .75; }
.deck__big { margin-top: 2%; font-size: clamp(56px, calc(8vw / var(--z, 1)), 118px); line-height: .9; font-weight: 700; letter-spacing: -.05em; }
.deck__dots { display: flex; gap: 2.4%; margin-top: 6%; }
.deck__dots i { width: 7%; aspect-ratio: 1; border-radius: 50%; background: var(--deck-ink); }
.deck__dots i:nth-child(n+4) { background: rgba(16, 53, 44, .15); }
.deck__bars { display: flex; align-items: flex-end; gap: 3.5%; }
.deck__bars i { flex: 1; height: var(--h); border-radius: 6px 6px 2px 2px; background: rgba(16, 53, 44, .14); transform: scaleY(0); transform-origin: bottom; }
.deck__bars i:nth-child(2) { background: var(--deck-acc); }
.deck__bars i.is-built { transform: none; }
.deck__axis { display: flex; justify-content: space-between; color: #86868b; font-size: clamp(10px, calc(.9vw / var(--z, 1)), 12px); }
.deck__bar { display: flex; align-items: center; gap: 14px; margin-top: 18px; }
.deck__thumbs { display: flex; gap: 6px; }
.deck__thumbs i { width: 34px; aspect-ratio: 16 / 9; border-radius: 4px; background: #e8e8ed; transition: background .4s; }
.deck__thumbs i.is-done { background: var(--deck-ink); }
.deck__thumbs i.is-active { background: var(--deck-acc); }
.deck__status { color: #6e6e73; font-size: 14px; }

/* решение задачи: вопрос, шаги, источники, ответ */
.solve { display: grid; gap: 18px; padding: clamp(24px, calc(3vw / var(--z, 1)), 36px); border-radius: 28px; background: #fff; }
.solve [data-s] { opacity: 0; transform: translateY(8px); transition: opacity .5s, transform .6s var(--ease-out); }
.solve [data-s].is-built { opacity: 1; transform: none; }
.solve__q { font-size: clamp(18px, calc(1.6vw / var(--z, 1)), 22px); font-weight: 600; line-height: 1.3; letter-spacing: -.015em; }
.solve__steps { display: grid; gap: 10px; color: #6e6e73; font-size: 15px; }
.solve__steps li { display: flex; align-items: center; gap: 10px; }
.solve__steps li i { flex: none; width: 16px; height: 16px; border: 2px solid #d2d2d7; border-top-color: #0071e3; border-radius: 50%; animation: solve-spin .8s linear infinite; }
.solve__steps li.is-done i { border-color: #34c759; background: #34c759; animation: none; -webkit-mask: none; }
.solve__steps li.is-done i::after { content: ''; display: block; width: 5px; height: 8px; margin: 1px 0 0 4px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.solve__steps li.is-done { color: #1d1d1f; }
@keyframes solve-spin { to { transform: rotate(360deg); } }
.solve__src { display: flex; flex-wrap: wrap; gap: 8px; }
.solve__src span { display: inline-grid; grid-template-columns: auto auto; column-gap: 8px; align-items: center; padding: 8px 14px 8px 8px; border-radius: 14px; background: var(--gray); font-size: 13.5px; font-weight: 500; }
.solve__src b { grid-row: span 2; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: #fff; font-family: Georgia, serif; font-size: 15px; }
.solve__src small { color: #86868b; font-size: 12px; font-weight: 400; }
.solve__a { color: #1d1d1f; font-size: 16px; line-height: 1.55; }
.solve__a sup { margin-left: 2px; color: #0071e3; font-size: 11px; font-weight: 600; }
.solve__a mark { padding: 0 4px; border-radius: 6px; background: #e8f1fd; color: #0058b0; font-weight: 600; }

@media (max-width: 860px) {
  .feature__grid { grid-template-columns: 1fr; }
  .feature__grid--flip .feature__copy { order: 0; }
}

/* ---------- Studio intro v3: без окна, блоки приносят курсоры с краёв экрана ---------- */
.intro__board { position: absolute; left: var(--gutter); right: var(--gutter); top: calc(clamp(48px, calc(8vh / var(--z, 1)), 90px) + 150px); bottom: clamp(32px, calc(6vh / var(--z, 1)), 72px); }
.intro__scene { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.intro__scene .node { --k: #1d1d1f; gap: 10px; padding: 11px 12px; border: 0; border-radius: 14px; background: #fff; color: #1d1d1f; box-shadow: none; opacity: 0; will-change: transform; transition: background-color .35s; }
.intro__scene .node--start, .intro__scene .node--message { --k: #0071e3; }
.intro__scene .node--condition { --k: #c76a00; }
.intro__scene .node--ai { --k: #8e44d6; }
.intro__scene .node--knowledge { --k: #0f8f7a; }
.intro__scene .node--crm { --k: #2f8a55; }
.intro__scene .node__icon { width: 32px; height: 32px; border-radius: 9px; color: var(--k); background: color-mix(in srgb, var(--k) 11%, #fff); }
.intro__scene .node__icon svg { width: 16px; height: 16px; }
.intro__scene .node__title { font-size: 13.5px; font-weight: 600; }
.intro__scene .node__preview { color: #86868b; }
.intro__scene .node__state { width: 14px; color: #0071e3; }
.intro__scene .node.is-held { z-index: 2; }
.intro__scene .node.is-running { background: #e8f1fd; border: 0; box-shadow: none; animation: none; }
.intro__scene .node.is-done .node__state { color: #34c759; }
.iedge { stroke: rgba(0, 0, 0, .2); stroke-width: 1.5; }
.iedge.is-lit { stroke: #0071e3; }
.intro__run { position: absolute; z-index: 3; margin: 0; height: 40px; padding: 0 18px; font-size: 14px; opacity: 0; transform: translate(-50%, -50%); transition: none; box-shadow: none; }
.intro__run.is-pressed { box-shadow: none; }
.intro__cursor { position: absolute; left: 0; top: 0; z-index: 5; margin: -3px 0 0 -4px; opacity: 0; filter: none; transition: opacity .25s; pointer-events: none; }
.intro__cursor path { fill: var(--c, #1d1d1f); stroke: #fff; stroke-width: 1.6; stroke-linejoin: round; }
.intro.is-narrow .node__state { display: none; }
@media (max-width: 734px) {
  .intro__board { top: calc(clamp(48px, calc(8vh / var(--z, 1)), 90px) + 170px); }
}
.feature__grid--flip { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
@media (max-width: 860px) { .feature__grid--flip { grid-template-columns: 1fr; } }
.feature { overflow-x: clip; }
/* узкий экран: блоки компактнее, чтобы названия влезали целиком */
.intro.is-narrow .intro__scene .node { gap: 8px; padding: 9px 10px; }
.intro.is-narrow .intro__scene .node__icon { width: 26px; height: 26px; border-radius: 8px; }
.intro.is-narrow .intro__scene .node__icon svg { width: 14px; height: 14px; }
.intro.is-narrow .intro__scene .node__title { font-size: 12.5px; }
.intro.is-narrow .intro__scene .node__preview { font-size: 11px; }

/* акцентные кнопки - белые с чёрным текстом, всегда справа */
.pill--blue, .eco__cta { background: #fff; color: #1d1d1f; }
.pill--blue:hover, .eco__cta:hover { background: #e8e8ed; }
.link:hover svg use[href='#i-down'], .link:hover svg:has(use[href='#i-down']) { transform: translateY(2px); }
.pill svg use[href='#i-telegram'] { fill: currentColor; }
@media (max-width: 734px) { .hero__cta { flex-direction: row; justify-content: center; gap: 18px 22px; } }
.js .intro__stage, .intro__stage { height: calc(100vh / var(--z, 1)); height: calc(100svh / var(--z, 1)); min-height: 640px; }
.intro__board { top: calc(clamp(48px, calc(8vh / var(--z, 1)), 90px) + 130px); }
@media (max-width: 734px) { .intro__board { top: calc(clamp(48px, calc(8vh / var(--z, 1)), 90px) + 160px); } }

/* логотипы веером: чем их больше, тем меньше наклон */
.logos .logo:first-child:nth-last-child(2) { transform: rotate(-6deg); }
.logos .logo:nth-child(2):last-child { transform: translateY(4px) rotate(7deg); }
.logos .logo:first-child:nth-last-child(3) { transform: rotate(-4deg); }
.logos .logo:nth-child(2):nth-last-child(2) { transform: translateY(3px) rotate(1deg); }
.logos .logo:nth-child(3):last-child { transform: translateY(5px) rotate(5deg); }

/* подписи режимов не меняют высоту секции */
.perm__note { display: grid; min-height: 0; }
.perm__note span { grid-area: 1 / 1; opacity: 0; transition: opacity .35s; }
.perm__note span.is-on { opacity: 1; }
.perm__st { white-space: nowrap; }

/* демо быстрее; шаги раскрываются по высоте и плавно сдвигают источники вниз */
.deck__slide { transition: transform .6s var(--ease-out), opacity .4s; }
.deck [data-b] { transition: opacity .3s, transform .45s var(--ease-out); }
.solve [data-s] { transition: opacity .35s, transform .45s var(--ease-out); }
.solve__steps { gap: 0; margin-bottom: -8px; }
.solve__steps li { max-height: 0; overflow: hidden; transition: max-height .4s var(--ease-out), padding .4s var(--ease-out), opacity .35s, transform .45s var(--ease-out); }
.solve__steps li.is-built { max-height: 52px; padding-bottom: 10px; }
.solve { align-content: start; }
.solve.is-measuring, .solve.is-measuring * { transition: none !important; }

/* статус в шапке Studio: место под пульсирующее кольцо точки, иначе overflow режет его слева */
.studio-app__status { padding: 5px 0 5px 5px; margin-left: auto; }
/* MAX в веере: чуть выше и с наклоном влево */
.logos .logo:nth-child(3):last-child { transform: translateY(-3px) rotate(-6deg); }

/* ---------- прелоадер ---------- */
.preloader { position: fixed; inset: 0; z-index: 1000; display: none; place-content: center; justify-items: center; gap: 26px; background: #000; transition: opacity .5s var(--ease-out), visibility .5s; }
.js .preloader { display: grid; }
.is-ready .preloader { opacity: 0; visibility: hidden; pointer-events: none; }
.preloader__mark { width: 56px; height: 56px; border-radius: 14px; animation: preloader-breathe 1.6s ease-in-out infinite; }
.preloader__bar { width: 120px; height: 2px; overflow: hidden; border-radius: 2px; background: rgba(255, 255, 255, .14); }
.preloader__bar i { display: block; height: 100%; background: #fff; transform-origin: left; transform: scaleX(var(--p, .04)); transition: transform .35s var(--ease-out); }
@keyframes preloader-breathe { 50% { opacity: .55; transform: scale(.94); } }
/* пока идёт загрузка: страница не прокручивается, CSS-анимации стоят на паузе */
html.js:not(.is-ready), html.js:not(.is-ready) body { overflow: hidden; }
html.js:not(.is-ready) body *:not(.preloader):not(.preloader *) { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) { .preloader__mark { animation: none; } }

/* ---------- презентация v2: швейцарская вёрстка, широкий гротеск, три цвета ---------- */
.deck { --sl-ink: #111a16; --sl-cream: #efeae0; --sl-acc: #e8532b; }
.deck__stage { container-type: inline-size; }
.deck .sl { display: flex; flex-direction: column; align-content: initial; gap: 0; padding: 4.6cqw 5.2cqw; border-radius: 1.6cqw; font-family: InterLocal, var(--font); }
.sl--ink { background: var(--sl-ink); color: var(--sl-cream); }
.sl--cream { background: var(--sl-cream); color: var(--sl-ink); }
.sl--acc { background: var(--sl-acc); color: #140d0a; }
.sl__top { display: flex; justify-content: space-between; font-size: 1.25cqw; font-weight: 600; letter-spacing: .02em; opacity: .85; }
.sl__brand { margin-top: auto; font-family: Unbounded, InterLocal, var(--font); font-size: 12.5cqw; font-weight: 600; line-height: .9; letter-spacing: -.04em; }
.sl__h { max-width: 24ch; font-family: Unbounded, InterLocal, var(--font); font-size: 3.5cqw; font-weight: 600; line-height: 1.12; letter-spacing: -.02em; hyphens: manual; }
.sl--acc > .sl__h { margin-top: 3.4cqw; }
.sl__split { display: grid; grid-template-columns: 1.3fr 1fr; gap: 4cqw; align-items: end; margin-top: 4.5cqw; }
.sl__split--top { align-items: start; margin-top: 3.4cqw; }
.sl__note { font-size: 1.45cqw; line-height: 1.45; opacity: .8; }
.sl__rule { padding-top: 1.6cqw; border-top: 1px solid currentColor; }
.sl__num { justify-self: end; display: grid; justify-items: end; color: var(--sl-acc); font-family: Unbounded, InterLocal, var(--font); font-size: 15cqw; font-weight: 600; line-height: .82; letter-spacing: -.05em; }
.sl__num small { margin-top: 1.4cqw; color: currentColor; font-family: InterLocal, var(--font); font-size: 1.35cqw; font-weight: 600; letter-spacing: .02em; }
.sl--cream .sl__num small { color: var(--sl-ink); opacity: .7; }
.sl--ink .sl__num small { color: var(--sl-cream); opacity: .7; }
.sl__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.6cqw; margin-top: auto; }
.sl__cols p { display: grid; gap: .8cqw; padding-top: 1.4cqw; border-top: 1px solid currentColor; font-size: 1.35cqw; line-height: 1.4; }
.sl__cols b { font-size: 1.2cqw; font-weight: 700; letter-spacing: .02em; }
.sl__cols--steps p { border-top-width: 2px; }
.sl__cols--steps i { font-family: Unbounded, InterLocal, var(--font); font-size: 8cqw; font-style: normal; font-weight: 600; line-height: 1; }
.sl__cols--steps b { margin-top: .6cqw; font-size: 1.5cqw; }
.sl__bars { flex: 1; display: flex; align-items: flex-end; gap: 2cqw; margin-top: 3cqw; padding-bottom: 2.4cqw; border-bottom: 1px solid rgba(239, 234, 224, .25); }
.sl__bars i { position: relative; flex: 1; height: var(--h); border-radius: .5cqw .5cqw 0 0; background: rgba(239, 234, 224, .14); transform: scaleY(0); transform-origin: bottom; }
.sl__bars i:last-child { background: var(--sl-acc); }
.sl__bars i.is-built { transform: none; }
.sl__bars span { position: absolute; left: 0; top: 100%; margin-top: .8cqw; font-size: 1.2cqw; font-style: normal; opacity: .7; }
.deck .deck__thumbs i.is-done { background: var(--sl-ink); }
.deck .deck__thumbs i.is-active { background: var(--sl-acc); }

/* заголовки страниц и секций - Unbounded; он шире Inter, поэтому кегль чуть меньше */
.hero__title, .page-hero__title, .section-title, .product-head__title, .contact__title, .dokky__card .product-head__title {
  font-family: Unbounded, InterLocal, var(--font); font-weight: 600; letter-spacing: -.025em;
}
.hero__title, .page-hero__title { font-size: clamp(44px, calc(5.4vw / var(--z, 1)), 70px); line-height: 1.04; }
.section-title, .product-head__title, .contact__title, .dokky__card .product-head__title { font-size: clamp(26px, calc(2.8vw / var(--z, 1)), 38px); line-height: 1.16; }
/* презентация крупнее: она главный герой блока */
.feature__grid:not(.feature__grid--flip) { grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); }
@media (max-width: 860px) { .feature__grid:not(.feature__grid--flip) { grid-template-columns: 1fr; } }

/* окно скачивания. gutter держит место скроллбара, чтобы страница не прыгала при блокировке */
html.dl-lock { overflow: hidden; scrollbar-gutter: stable; }
.dl { width: min(400px, calc(calc(100vw / var(--z, 1)) - 32px)); max-height: calc(calc(100dvh / var(--z, 1)) - 32px); margin: auto; padding: 0; border: 0; border-radius: 24px; background: var(--tile); color: var(--gray); overflow: auto; overscroll-behavior: contain; }
.dl::backdrop { background: rgba(0, 0, 0, .5); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.dl[open] { animation: dl-in .32s var(--ease-out); }
.dl[open]::backdrop { animation: dl-fade .32s var(--ease-out); }
.dl.is-closing { animation: dl-out .2s var(--ease) forwards; }
.dl.is-closing::backdrop { animation: dl-fade .2s var(--ease) reverse forwards; }
@keyframes dl-in { from { opacity: 0; transform: translateY(14px) scale(.97); } }
@keyframes dl-out { to { opacity: 0; transform: translateY(8px) scale(.98); } }
@keyframes dl-fade { from { opacity: 0; } }
.dl__box { position: relative; display: grid; justify-items: center; padding: 36px 28px 24px; text-align: center; }
.dl__close { position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .08); color: var(--gray); cursor: pointer; }
.dl__close svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.dl__mark { width: 56px; height: 56px; border-radius: 14px; }
.dl__title { margin-top: 18px; font-family: Unbounded, InterLocal, var(--font); font-size: 24px; font-weight: 600; letter-spacing: -.02em; line-height: 1.15; }
.dl__lead { margin-top: 6px; color: var(--muted-dark); font-size: 15px; }
.dl__main { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 52px; margin-top: 26px; padding: 12px 20px; border-radius: 999px; background: #fff; color: var(--ink); font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.dl__main svg, .dl__alt svg { width: 20px; height: 20px; flex: none; }
.dl__main:active { transform: scale(.98); }
.dl__meta { margin-top: 12px; color: var(--muted-dark); font-size: 13px; line-height: 1.4; }
.dl__alt { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; margin-top: 24px; padding: 14px 4px 0; border-top: 1px solid rgba(255, 255, 255, .1); color: var(--muted-dark); font-size: 14px; }
.dl__alt button, .dl__second { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 16px; border-radius: 999px; background: rgba(255, 255, 255, .08); color: var(--gray); font-weight: 600; }
.dl__alt svg { width: 16px; height: 16px; }
.dl__alt button { border: 0; font: inherit; cursor: pointer; }
.dl__second { margin-top: 10px; font-size: 14px; }
.dl__second[aria-disabled='true'] { opacity: .45; cursor: default; pointer-events: none; }
.dl :focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .dl[open], .dl[open]::backdrop, .dl.is-closing, .dl.is-closing::backdrop { animation-duration: .01s; }
}

/* узкие телефоны: колонки 1fr растягивались по самому длинному ребёнку и вылезали за поля */
@media (max-width: 860px) {
  .dokky__card, .perm__grid, .mem__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 380px) {
  .dokky__card { padding-inline: 16px; }
  /* телефон 300px не влезает в карточку на 320, уменьшаем его целиком вместе с 3D */
  .dokky__card .phone { zoom: .8; }
  .perm__list code { white-space: normal; overflow-wrap: anywhere; }
}
/* три подписи не влезают в одну строку на узком телефоне - переносим кнопки, а не обрезаем текст */
@media (max-width: 420px) {
  .perm__modes, .picker { flex-wrap: wrap; }
  .perm__modes button, .picker button { flex: 1 1 auto; padding: 0 12px; font-size: 13px; }
  .orbit { zoom: .74; }
}

/* увеличенный бабл рисуется шрифтом, слой под transform ему больше не нужен */
.show__bubble { will-change: auto; }
/* кнопка «Повторить» держит место и проявляется, когда сценарий доиграл */
.dx-after [data-app-replay] { transition: opacity .35s var(--ease), visibility .35s; }
.dx-after [data-app-replay].is-hidden { opacity: 0; visibility: hidden; }

/* светлые подложки: #f5f5f7 на многих мониторах сливается с белым, поэтому серый чуть темнее */
:root { --soft: #ebebef; }
.app, .intro, .js .intro, .more, .feature--soft { background: var(--soft); }
.dokky__card, .plan, .integ__card, .solve__src span, .orbit__ring--inner .orbit__item b { background: var(--soft); }
.plan--main { background: #e2ebfb; }

/* шапка: вход и регистрация или аватар вошедшего */
.eco__auth { display: flex; align-items: center; gap: 8px; transition: opacity .3s var(--ease); }
.eco__auth[data-auth='unknown'] { opacity: 0; }
.eco__auth [hidden] { display: none !important; }
.eco__login { padding: 7px 14px; border-radius: 999px; background: rgba(255, 255, 255, .1); color: #fff; font-weight: 600; transition: background-color .2s; }
.eco__login:hover { background: rgba(255, 255, 255, .16); }
.eco__me { display: flex; align-items: center; gap: 10px; }
/* как .avatar в Докки */
.eco__avatar { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; overflow: hidden; background: #df873f; color: #fff; font-size: 14px; font-weight: 600; }
.eco__avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 734px) {
  .eco__login { padding: 6px 12px; }
  .eco__avatar { width: 30px; height: 30px; font-size: 13px; }
}

/* переход между страницами: шапка стоит, новая страница проявляется с прелоадером под шапкой */
@view-transition { navigation: auto; }
/* имя вешаем на части шапки, а не на саму .eco: элемент с именем перехода отрезает backdrop-filter у переключателя */
.eco__brand { view-transition-name: eco-brand; }
.eco__links { view-transition-name: eco-links; }
.eco__auth { view-transition-name: eco-auth; }
.eco.no-vt > * { view-transition-name: none; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .38s; animation-timing-function: var(--ease); }
/* пока прелоадер на экране (и пока он гаснет), шапка над ним */
body:has(.preloader) .eco { z-index: 1001; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* своя полоса прокрутки не нужна: разделы показывают точки слева */
html { scrollbar-width: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; width: 0; }
.rail { display: none; position: fixed; left: max(12px, env(safe-area-inset-left)); top: 50%; transform: translateY(-50%); width: 28px; height: var(--rail-h); z-index: 90; color: #8e8e93; opacity: 0; pointer-events: none; transition: opacity .6s ease; user-select: none; -webkit-user-select: none; }
.rail.is-on { display: block; }
html:not(.is-ready) .rail { visibility: hidden; }
/* серый на прозрачности: на тёмном фоне выходит тёмно-серым, на светлом - светло-серым */
.rail.is-shown { opacity: .35; pointer-events: auto; transition-duration: .25s; }
.rail.is-shown:hover, .rail:focus-within { opacity: .7; pointer-events: auto; }
.rail__svg { position: absolute; inset: 0; fill: currentColor; overflow: visible; pointer-events: none; }
.rail__stop { position: absolute; left: 0; width: 28px; height: 24px; padding: 0; border: 0; border-radius: 99px; background: none; cursor: pointer; }
.rail__stop:focus-visible { outline: 1px solid currentColor; outline-offset: 1px; }
@media (prefers-reduced-motion: reduce) { .rail { transition: none; } }

/* частые вопросы: карточки как в .info, вопрос - заголовок h3 */
.info__card .faq__q { font-size: 21px; font-weight: 600; letter-spacing: -.02em; line-height: 1.25; }
@media (max-width: 860px) { .info__card .faq__q { font-size: 18px; } }

/* Safari на iOS не обрезает WebGL-слой по скруглённому overflow: hidden - телефон вылезал из карточки. clip-path режет всё */
.dokky__card { clip-path: inset(0 round 36px); }

/* Safari на iOS: нижняя панель висит поверх страницы, и под ней виден следующий экран.
   фон экрана тянем ниже видимой области на величину зазора, а зазор отдаём прозрачной нижней рамке:
   фон под ней рисуется, а содержимое центрируется в видимой части. зазор - большее из lvh - svh и
   --ios-gap (полная высота экрана минус innerHeight, считает скрипт в head только на iPhone и iPad). на компьютере 0 */
:root { --screen-gap: max(calc((100lvh - 100svh) / var(--z, 1)), var(--ios-gap, 0px)); }
/* содержимое центрируем по всей высоте блока вместе с зазором: на iPhone панель Safari прозрачная, и с отступом снизу блок выглядел сдвинутым вверх */
@supports (height: 100lvh) {
  .screen, .page-hero, .contact { min-height: calc(100svh / var(--z, 1) + var(--screen-gap)); }
  .hero, .convo { height: calc(100svh / var(--z, 1) + var(--screen-gap)); }
}


/* шапка без фона, прозрачность при скролле ставит initHeader */
/* на телефоне шапка не закреплена (initHeader ставит eco-pinned только на компьютере) */
.eco-pinned .eco { position: fixed; z-index: 95; }
.eco.is-off { pointer-events: none; }
.eco-shade { display: none; }
.eco-pinned .eco-shade { display: block; position: fixed; z-index: 94; inset: 0 0 auto; height: 64px; pointer-events: none; }
/* переключатель страниц размывает то, что под ним: на тёмном чуть затемняет, на светлом чуть осветляет */
.eco__links { background: rgba(0, 0, 0, .28); -webkit-backdrop-filter: blur(30px) saturate(1.6); backdrop-filter: blur(30px) saturate(1.6); transition: background-color .35s var(--ease), border-color .35s var(--ease); }
/* над светлым блоком цвета задаём явно, а не filter: invert - фильтр на шапке не дал бы размытию видеть страницу */
.eco__brand, .eco__links a, .eco__cta, .eco__login { transition: color .35s var(--ease), background-color .35s var(--ease); }
.eco__brand img { transition: filter .35s var(--ease); }
.eco.is-light .eco__brand { color: #1d1d1f; }
.eco.is-light .eco__brand img { filter: invert(1); }
.eco.is-light .eco__links { background: rgba(255, 255, 255, .5); border-color: rgba(0, 0, 0, .06); }
.eco.is-light .eco__links a { color: rgba(0, 0, 0, .62); }
.eco.is-light .eco__links a:hover { color: #1d1d1f; }
.eco.is-light .eco__links a[aria-current='page'] { background: rgba(0, 0, 0, .08); color: #1d1d1f; }
.eco.is-light .eco__cta { background: #1d1d1f; color: #fff; }
.eco.is-light .eco__cta:hover { background: #333336; }
.eco.is-light .eco__login { background: rgba(0, 0, 0, .06); color: #1d1d1f; }
.eco.is-light .eco__login:hover { background: rgba(0, 0, 0, .1); }

/* прозрачность шапки ставим детям, а не .eco: полупрозрачный родитель выключает backdrop-filter у переключателя */
.eco > * { opacity: var(--eco-o, 1); }
.eco__brand { transition: color .35s var(--ease), background-color .35s var(--ease), opacity .2s linear; }
.eco__links { transition: background-color .35s var(--ease), border-color .35s var(--ease), opacity .2s linear; }
.eco__auth { transition: opacity .2s linear; }

/* Докки: страница проявляется радужной волной. слой чёрный, снизу растёт круг: белый центр пропускает страницу,
   цветное кольцо в multiply окрашивает светлые надписи и кнопки, пока по ним проходит */
.wave { display: none; }
.is-fresh .wave {
  display: block; position: fixed; inset: 0; z-index: 999; pointer-events: none; mix-blend-mode: multiply; background-color: #000;
  background-image: radial-gradient(circle closest-side, #fff 0%, #fff 4.6%, #f384ff 5.9%, #f40 6.9%, #ffcb5c 7.9%, #e1e1fe 8.9%, #0af 9.9%, #00166d 12.1%, #000 14.25%, #000 100%);
  background-repeat: no-repeat; animation: wave-reveal 2s linear both;
}
@keyframes wave-reveal {
  from { background-position: 50% calc(50% + 50vh + 4vmax); background-size: 200vmax 200vmax; }
  to { visibility: hidden; background-position: 50% 50%; background-size: calc(21.8 * hypot(100vw, 100vh) + 44px) calc(21.8 * hypot(100vw, 100vh) + 44px); }
}
/* без hypot() кольцо просто не дорастёт - тогда слой не показываем совсем */
@supports not (width: hypot(1px, 1px)) { .is-fresh .wave { display: none; } }
/* первый заход: шапки нет над прелоадером, потом она проявляется волной. при переходе со страницы на страницу всё как раньше */
.is-fresh:not(.is-ready) .eco { visibility: hidden; }
.is-fresh.is-ready .eco { z-index: 95; }

/* фон Докки: вместо серых пятен радужные, цвета медленно переливаются */
.hero::before, .hero::after {
  background: conic-gradient(from var(--r, 0deg), #f59bff, #ff8c6e, #ffd77f, #86e8a8, #6ccaff, #9a8cff, #f59bff);
  -webkit-mask-image: radial-gradient(closest-side, #000, transparent); mask-image: radial-gradient(closest-side, #000, transparent);
  animation: glow-in 2.4s cubic-bezier(.25, .6, .2, 1) var(--d, .2s) forwards, glow-breathe var(--t, 14s) ease-in-out calc(var(--d, .2s) + 2.4s) infinite, glow-hue 18s linear infinite;
}
/* место пятен выбирает initGlow: каждый раз у разных краёв */
.hero::before { --x: var(--g1x, 4%); --y: var(--g1y, 46%); --o: .42; --blur: 50px; }
.hero::after { --x: var(--g2x, 97%); --y: var(--g2y, 64%); --o: .34; --blur: 60px; }
/* к низу пятна уходят в чёрный, чтобы не было видно, где кончается hero */
.hero > .hero__fade { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to bottom, transparent 45%, #000 96%); }
.hero > .hero__fade, .hero > .hero__copy { animation: none; }
@keyframes glow-hue { from { filter: blur(var(--blur, 0px)) hue-rotate(0deg); } to { filter: blur(var(--blur, 0px)) hue-rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .is-fresh .wave { display: none; }
  .hero::before, .hero::after { animation: none; opacity: var(--o, 1); }
}
/* на главной всё проявляет волна: до неё экран тёмный, своё размытие у надписей не нужно */
.is-fresh .hero__copy > * { animation: none; }

/* на телефоне 3D-телефон в карточке обрезаем сразу под полем ввода, как на компьютере */
@media (max-width: 860px) { .dokky__card .phone { height: 450px; } }
@media (max-width: 734px) { .dokky__card .phone { height: 400px; } }

/* кнопка на GitHub в карточке «Открытый исходный код» */
.info__btn { display: inline-flex; align-items: center; justify-self: start; gap: 8px; margin-top: 8px; padding: 9px 16px; border-radius: 999px; background: rgba(255, 255, 255, .08); color: #f5f5f7; font-size: 15px; font-weight: 600; transition: background-color .2s; }
.info__btn:hover { background: rgba(255, 255, 255, .14); }
.info__btn svg { width: 18px; height: 18px; }

/* текстовые ссылки-кнопки («Тарифы», «Посмотреть в работе») серые вместо синих */
.link, .link--light { color: #a1a1a6; transition: color .2s; }
.link:hover { color: #f5f5f7; }
.dokky .link--light { color: #6e6e73; }
.dokky .link--light:hover { color: #1d1d1f; }

/* свечения в стиле Nothing: точечная матрица и шум. слой .px умножается на фон: чёрные промежутки и серый шум
   гасят только цвет свечения, на чёрном фоне их не видно. размытие у пятен убрано, чтобы точки читались */
.px { position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: multiply;
  background: radial-gradient(circle, transparent 2.6px, #000 3.2px) 0 0 / 9px 9px, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='.33 .33 .33 0 0 .33 .33 .33 0 0 .33 .33 .33 0 0 0 0 0 0 1'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='.9' intercept='.35'/%3E%3CfeFuncG type='linear' slope='.9' intercept='.35'/%3E%3CfeFuncB type='linear' slope='.9' intercept='.35'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 240px 240px; }
.hero > .hero__copy { z-index: 2; }
.page-hero > :not(.px), .contact > .wrap { position: relative; z-index: 2; }
.hero::before, .hero::after, .page-hero::before, .page-hero::after { --blur: 0px; }
.hero::before { --o: .8; }
.hero::after { --o: .7; }
.page-hero--app::before { --c: rgba(43, 120, 255, .75); }
.page-hero--app::after { --c: rgba(110, 150, 255, .4); }
.page-hero--studio::before { --c: rgba(255, 149, 0, .7); }
.page-hero--studio::after { --c: rgba(255, 112, 60, .45); }
.contact::before { background: radial-gradient(closest-side, rgba(80, 100, 255, .6), rgba(150, 90, 255, .25) 55%, transparent); }

/* плашки под заголовком (Studio «скоро», App «Windows и macOS») размывают свечение под собой, иначе текст терялся */
.status-pill { -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.status-pill--plain { background: rgba(255, 255, 255, .08); color: #d2d2d7; }
.status-pill--plain::before { content: none; }
/* кнопки без заливки в блоках «Попробуйте» и «Скачайте» тоже чуть размывают фон */
.pill--ghost { background: rgba(255, 255, 255, .04); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }

/* место пятен задаёт initGlow, значения после запятой - стартовые до скрипта */
.page-hero--app::before { --x: var(--g1x, 42%); --y: var(--g1y, 70%); }
.page-hero--app::after { --x: var(--g2x, 70%); --y: var(--g2y, 30%); }
.page-hero--studio::before { --x: var(--g1x, 60%); --y: var(--g1y, 76%); }
.page-hero--studio::after { --x: var(--g2x, 28%); --y: var(--g2y, 38%); }
.hero::before { --x: var(--g1x, 4%); --y: var(--g1y, 46%); }
.hero::after { --x: var(--g2x, 97%); --y: var(--g2y, 64%); }

/* статичные точечные свечения по краям блоков (только компьютер): цвет фоном, а точки, пятно и шум - маской.
   места и размеры каждый раз случайные, задаёт initDots */
.dots-spot { display: none; }
@media (min-width: 861px) and (hover: hover) and (pointer: fine) {
  [data-dots] { position: relative; overflow-x: clip; }
  [data-dots] > .wrap { position: relative; z-index: 2; }
  .dots-spot {
    display: block; position: absolute; z-index: 1; left: var(--x); top: var(--y); width: var(--s); aspect-ratio: var(--ar, 1); pointer-events: none;
    background: rgba(255, 255, 255, .5); transform: translate(-50%, -50%);
    -webkit-mask: radial-gradient(circle, #000 2.6px, transparent 3.2px) 0 0 / 9px 9px, radial-gradient(closest-side, #000, transparent) 0 0 / 100% 100% no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 2 0 0 0 -.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 240px 240px;
    mask: radial-gradient(circle, #000 2.6px, transparent 3.2px) 0 0 / 9px 9px, radial-gradient(closest-side, #000, transparent) 0 0 / 100% 100% no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 2 0 0 0 -.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 240px 240px;
    -webkit-mask-composite: source-in, source-in; mask-composite: intersect;
    animation: dots-breathe var(--t, 9s) ease-in-out var(--d, 0s) infinite;
  }
  .dots-spot--rainbow { background: conic-gradient(from var(--r, 0deg), #f59bff, #ff8c6e, #ffd77f, #86e8a8, #6ccaff, #9a8cff, #f59bff); }
}
@keyframes dots-breathe { 0%, 100% { opacity: var(--o, .5); } 50% { opacity: calc(var(--o, .5) * .45); } }
@media (prefers-reduced-motion: reduce) { .dots-spot { animation: none; } }

/* края точечных пятен осыпаются зерном: контрастный шум в маске, а спад пятна идёт дольше */
@media (min-width: 861px) and (hover: hover) and (pointer: fine) {
  .dots-spot {
    -webkit-mask: radial-gradient(circle, #000 2.6px, transparent 3.2px) 0 0 / 9px 9px, radial-gradient(closest-side, #000 10%, rgba(0, 0, 0, .5) 45%, transparent) 0 0 / 100% 100% no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 4 0 0 0 -1.3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 240px 240px;
    mask: radial-gradient(circle, #000 2.6px, transparent 3.2px) 0 0 / 9px 9px, radial-gradient(closest-side, #000 10%, rgba(0, 0, 0, .5) 45%, transparent) 0 0 / 100% 100% no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 4 0 0 0 -1.3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 240px 240px;
    -webkit-mask-composite: source-in, source-in; mask-composite: intersect;
  }
}

/* плёночное зерно на всей странице: слой во всю высоту body, поэтому едет вместе со скроллом, а не висит поверх */
body { position: relative; }
body::after { content: ''; position: absolute; inset: 0; z-index: 60; pointer-events: none; opacity: .045; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 300px 300px; }

/* «Докки расскажет о себе»: карточка без своей подложки, всё на общем белом фоне. обрезка телефона остаётся */
.dokky .dokky__card { background: transparent; border-color: transparent; }
/* кнопки вопросов раньше были белыми на серой карточке, теперь серые на белом */
.dokky .asks button, .dokky .asks button:hover { background: #f2f2f4; }
.dokky .asks button[aria-pressed='true'] { background: #1d1d1f; }
@media (min-width: 861px) and (hover: hover) and (pointer: fine) {
  .dots-spot--black { background: rgba(0, 0, 0, .7); }
}

/* «Попробуйте Докки» и «Скачайте»: вместо пятна под текстом два по бокам, медленно плавают (initGlow) */
.contact::before, .contact::after { content: ''; position: absolute; z-index: 0; left: var(--g1x, 2%); top: var(--g1y, 45%); width: min(calc(70vw / var(--z, 1)), 900px); max-width: none; aspect-ratio: 1; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(80, 100, 255, .55), rgba(150, 90, 255, .22) 55%, transparent); pointer-events: none; animation: glow-breathe 16s ease-in-out infinite; }
.contact::after { left: var(--g2x, 98%); top: var(--g2y, 60%); background: radial-gradient(closest-side, rgba(110, 90, 255, .5), rgba(80, 140, 255, .2) 55%, transparent); animation-duration: 19s; }
@media (max-width: 860px) { .contact::before, .contact::after { width: calc(110vw / var(--z, 1)); } }

/* точечные пятна теперь готовые картинки из initDots: без масок, дыхание только на экране */
@media (min-width: 861px) and (hover: hover) and (pointer: fine) {
  /* без анимации и will-change: анимированное пятно становилось отдельным gpu-слоем и тащило в слои весь текст над собой
     (overlap), на скролле при 200 гц видеокарта упиралась в 100% (трейс с windows chrome) */
  .dots-spot, .dots-spot--rainbow, .dots-spot--black { background: center / 100% 100% no-repeat; -webkit-mask: none; mask: none; opacity: var(--o, .5); animation: none; }
}
/* матрица .px - готовая плитка с редкими точками из initPx */
.has-px .px { background: var(--px-tile) 0 0 / 540px 540px; }

/* бесконечные анимации у секций далеко за экраном выключены (initAway). при возврате крутятся дальше без въезда */
.is-away::before, .is-away::after { animation: none !important; opacity: var(--o, 1); }
.is-away *, .is-away *::before, .is-away *::after { animation: none !important; }
.was-away.page-hero::before, .was-away.page-hero::after { animation: glow-breathe var(--t, 14s) ease-in-out infinite; }
.was-away.hero::before, .was-away.hero::after { animation: glow-breathe var(--t, 14s) ease-in-out infinite, glow-hue 18s linear infinite; }
.was-away .orbit.is-in .orbit__ring--outer, .was-away .orbit.is-in .orbit__ring--outer b { animation: var(--spin) 90s linear infinite; }
.was-away .orbit.is-in .orbit__ring--inner, .was-away .orbit.is-in .orbit__ring--inner b { animation: var(--spin) 60s linear infinite; }
/* въезд первого экрана после ухода за край больше не нужен: конечный кадр blur-in совпадает с обычным видом,
   а законченная анимация с fill both держала заголовок, кнопки и .px в отдельных слоях навсегда */
.was-away .hero__copy > *, .was-away.page-hero > * { animation: none; }

/* тарифы собирает mini_app/landing_sync.py из каталога планов, иконки берутся с сайта */
.plans .wrap { width: min(1320px, 100% - 2 * var(--gutter)); }
.plans__grid:has([data-plan]) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.plan[data-plan] { padding: 24px 16px 22px; }
.plan[data-plan] .plan__lead { display: block; min-height: 3.9em; font-size: 13px; color: #6e6e73; }
.plan__name { color: var(--plan-color, inherit); }
.plan__list--icons { gap: 8px; }
.plan__list--icons li { padding-left: 23px; }
.plan__list--icons li::before { content: none; }
.plan__icon { position: absolute; left: 0; top: .08em; width: 16px; height: 16px; background: #6e6e73; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
.plan__more { margin-top: 14px; color: #6e6e73; font-size: 12.5px; font-weight: 500; }
.plan__more summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 28px; cursor: pointer; list-style: none; }
.plan__more summary::-webkit-details-marker { display: none; }
.plan__more summary::after { content: ''; flex: none; width: 7px; height: 7px; margin-right: 3px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: translateY(-2px) rotate(45deg); transition: transform .2s var(--ease); }
.plan__more[open] summary::after { transform: translateY(1px) rotate(225deg); }
.plan__more .plan__list { margin-top: 8px; padding-top: 0; border-top: 0; }
@media (hover: hover) and (pointer: fine) { .plan__more summary:hover { color: #1d1d1f; } }
@media (max-width: 1240px) { .plans__grid:has([data-plan]) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .plans__grid:has([data-plan]) { grid-template-columns: 1fr; }
  .plan[data-plan] .plan__lead { min-height: 0; }
  .eco__links .eco__news { display: none; }
}