/* Avelune — публичный лендинг (раунд 18 → 19 → 20, панель UI/UX Pro Max).
   Бренд: графит #101216, кость #EFEDE6, киноварь #D2400D; Onest (вариативный,
   кириллица) — маунт /web-static/fonts из вендора hermes-webui. Страница
   самодостаточна (CSP-дружелюбна): без стоковых картинок и чужих скриптов.
   Раунд 20 — по вендорному навыку .claude/skills/ui-ux-pro-max: стиль
   «Modern Dark Cinema» (градиентная сцена вместо плоских заливок, hairline-
   бордеры, лестница elevation, glow за главным CTA, radius 16, expo.out),
   паттерн «Trust & Authority» (доказательства сразу под hero), бенто-сетка
   возможностей с мини-визуализациями, editorial-шаги с ghost-номерами,
   скроллспай навигации. Hero — masthead: гигантский AVELUNE_ во всю ширину
   (градиентный текст, сборка по буквам под .anim), живая canvas-«нейросеть»,
   3D-мокап с чипами. Всё выключается под prefers-reduced-motion.
   Анимируем transform/opacity (+filter только на входных анимациях). */

@font-face{font-family:'Onest';src:url('/web-static/fonts/onest-cyrillic.woff2') format('woff2');unicode-range:U+0400-04FF;font-weight:100 900;font-display:swap;}
@font-face{font-family:'Onest';src:url('/web-static/fonts/onest-cyrillic-ext.woff2') format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;font-weight:100 900;font-display:swap;}
@font-face{font-family:'Onest';src:url('/web-static/fonts/onest-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122;font-weight:100 900;font-display:swap;}

:root{
  /* Лестница elevation (Modern Dark Cinema): deep → base → surface → surface2. */
  --hero-bg:#0B0D11;
  --graphite:#101216;
  --surface:#181B21;
  --surface2:#1E222A;
  --border:#2A2E36;
  --border-lift:#3A3F49;
  --hairline:rgba(239,237,230,.08); /* hairline-бордер поверх тёмных сцен */
  --bone:#EFEDE6;
  --muted:#9AA0AA;
  --cinnabar:#D2400D;
  --cinnabar-hi:#E44E14;   /* верх градиента CTA */
  --cinnabar-press:#B53709;
  --ok:#4C9E64;
  --warn:#D2A00D;
  --maxw:1080px;
  /* Моушен-токены: expo.out для «дорогих» появлений, softer для
     микро-взаимодействий; стаггер — через --i (reveal) и --d (hero). */
  --ease-expo:cubic-bezier(0.16,1,0.3,1);
  --ease-soft:cubic-bezier(0.22,0.61,0.36,1);
  --dur-micro:190ms;
  --dur-reveal:560ms;
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--graphite);
  color:var(--bone);
  font-family:'Onest','Avenir Next',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  /* clip (не hidden) сдерживает glow/чипы, НЕ создавая скролл-контейнер
     (hidden делает body скролл-контейнером и ломает fixed-позиционирование
     на ряде браузеров). */
  overflow-x:clip;
}
a{color:inherit;}
::selection{background:rgba(210,64,13,.45);color:#fff;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px;position:relative;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.skip-link{
  position:fixed;z-index:100;top:12px;left:50%;transform:translate(-50%,-180%);
  padding:9px 14px;border-radius:9px;background:var(--bone);color:var(--graphite);
  font-size:14px;font-weight:700;text-decoration:none;
  transition:transform var(--dur-micro) var(--ease-soft);
}
.skip-link:focus-visible{transform:translate(-50%,0);outline:3px solid var(--cinnabar);outline-offset:3px;}
#mainContent:focus{outline:none;}

/* ── Шапка: плавает НАД hero, у верха прозрачна; после отрыва от верха
      (класс .scrolled, IO-сентинел в скрипте) уплотняется. Навигация по
      центру (SENTINEL-схема), активный раздел подсвечивает скроллспай. ── */
.hdr{
  position:fixed;top:0;left:0;right:0;z-index:50;
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background var(--dur-micro) var(--ease-soft),
             border-color var(--dur-micro) var(--ease-soft),
             backdrop-filter var(--dur-micro) var(--ease-soft),
             box-shadow var(--dur-micro) var(--ease-soft);
}
.hdr.scrolled{
  background:rgba(16,18,22,.975);
  backdrop-filter:blur(13px);
  border-bottom-color:#31353E;
  box-shadow:0 1px 0 rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.24);
}
.hdr-in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;height:62px;}
.logo{font-size:20px;font-weight:800;letter-spacing:-.02em;text-decoration:none;user-select:none;justify-self:start;}
.logo em{font-style:normal;color:var(--cinnabar);}
.nav{display:flex;gap:26px;}
.nav a{
  position:relative;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);text-decoration:none;padding:4px 0;
  transition:color var(--dur-micro) var(--ease-soft);
}
.nav a:hover{color:var(--bone);}
/* Активный раздел (скроллспай): цвет + киноварная точка под пунктом. */
.nav a.active{color:var(--bone);}
.nav a.active::after{
  content:'';position:absolute;left:50%;bottom:-6px;width:3px;height:3px;
  border-radius:50%;background:var(--cinnabar);transform:translateX(-50%);
}
.hdr-cta{justify-self:end;display:flex;gap:10px;align-items:center;}
/* Переключатель языка RU/EN — тихая текстовая кнопка. */
.lang{
  background:none;border:0;padding:6px 8px;cursor:pointer;
  font:inherit;font-size:11.5px;font-weight:700;letter-spacing:.14em;
  color:var(--muted);transition:color var(--dur-micro) var(--ease-soft);
}
.lang:hover{color:var(--bone);}
.cta-label--short{display:none;}
/* Скролл-прогресс: киноварная нить по верхней кромке шапки (scaleX ставит JS). */
.hdr-prog{
  position:absolute;left:0;right:0;top:0;height:2px;z-index:51;
  background:linear-gradient(90deg,var(--cinnabar-hi),var(--cinnabar));
  transform:scaleX(0);transform-origin:left;pointer-events:none;
}
/* Световой курсор-спутник (включает JS: .anim + pointer:fine + desktop). */
.cursor-glow{
  display:none;position:fixed;left:0;top:0;z-index:40;pointer-events:none;
  width:520px;height:520px;border-radius:50%;will-change:transform;
  background:radial-gradient(circle,rgba(210,64,13,.075),transparent 64%);
  transition:transform .22s var(--ease-soft);
}
.btn{
  display:inline-block;padding:9px 18px;border-radius:10px;white-space:nowrap;
  font-size:14px;font-weight:700;text-decoration:none;cursor:pointer;
  border:1px solid var(--border);color:var(--bone);background:transparent;
  transition:background var(--dur-micro) var(--ease-soft),
             border-color var(--dur-micro) var(--ease-soft),
             color var(--dur-micro) var(--ease-soft),
             filter var(--dur-micro) var(--ease-soft),
             box-shadow var(--dur-micro) var(--ease-soft),
             transform var(--dur-micro) var(--ease-soft);
}
.btn:hover{border-color:var(--muted);transform:translateY(-1px);}
.btn:active{transform:scale(.97);}
/* Главный CTA — киноварный градиент + glow (Modern Dark Cinema: accent glow
   behind primary button) + sheen-блик, пробегающий по кнопке на hover. */
.btn--accent{
  position:relative;overflow:hidden;
  background:linear-gradient(180deg,var(--cinnabar-hi),var(--cinnabar-press));
  border-color:rgba(228,78,20,.65);color:#fff;
  box-shadow:0 6px 22px rgba(210,64,13,.28),inset 0 1px 0 rgba(255,255,255,.18);
}
.btn--accent::before{
  content:'';position:absolute;top:-2px;bottom:-2px;left:0;width:38%;pointer-events:none;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.30),transparent);
  transform:translateX(-140%) skewX(-18deg);
  transition:transform .65s var(--ease-soft);
}
.btn--accent:hover::before{transform:translateX(390%) skewX(-18deg);}
.btn--accent:hover{filter:brightness(1.07);border-color:rgba(228,78,20,.9);}
/* Второй hero-CTA — сплошной светлый (кость), как «белая» кнопка SENTINEL-схемы. */
.btn--bone{background:var(--bone);border-color:var(--bone);color:var(--graphite);}
.btn--bone:hover{background:#fff;border-color:#fff;}
.btn--big{padding:15px 30px;font-size:16px;border-radius:13px;}
.btn--accent.btn--big{box-shadow:0 12px 38px rgba(210,64,13,.36),inset 0 1px 0 rgba(255,255,255,.18);}
.btn--accent.btn--big:hover{box-shadow:0 16px 48px rgba(210,64,13,.48),inset 0 1px 0 rgba(255,255,255,.18);}
/* Стрелка внутри CTA сдвигается на hover. */
.btn .arr{display:inline-block;transition:transform var(--dur-micro) var(--ease-soft);}
.btn:hover .arr{transform:translateX(4px);}
/* Премиальный клавиатурный фокус (мышиный гасим). */
:focus:not(:focus-visible){outline:none;}
.btn:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(210,64,13,.45);}
a:focus-visible{outline:2px solid var(--cinnabar);outline-offset:3px;}
.lang:focus-visible{outline:2px solid var(--cinnabar);outline-offset:3px;}

/* ── Hero: полный экран, контент по центру по вертикали (раунд 21.2 —
      владелец: «поднять текст вверх, много пространства от шапки»). ── */
.hero{
  min-height:100vh;min-height:100svh;
  display:flex;align-items:center;
  padding:92px 0 56px;position:relative;isolation:isolate;
  /* Градиентная сцена (не плоская заливка): deep сверху → графит страницы. */
  background:linear-gradient(180deg,#090B0E 0%,var(--hero-bg) 46%,var(--graphite) 100%);
}
/* Один тихий ambient-glow киновари — СВЕТ (низкая альфа), не заливка. */
.hero::before{
  content:'';position:absolute;z-index:-1;pointer-events:none;
  top:4%;left:60%;width:min(720px,92vw);height:min(720px,92vw);
  transform:translate(-50%,0);
  background:radial-gradient(circle,rgba(210,64,13,.13),rgba(210,64,13,.05) 34%,transparent 68%);
  animation:heroGlow 19s var(--ease-soft) infinite alternate;
}
@keyframes heroGlow{
  from{transform:translate(-50%,0) scale(1);}
  to{transform:translate(calc(-50% + 26px),-22px) scale(1.08);}
}
/* Тонкая техно-сетка с радиальной маской — статичный слой «сцены». */
.hero::after{
  content:'';position:absolute;inset:0;z-index:-2;pointer-events:none;
  background-image:linear-gradient(var(--hairline) 1px,transparent 1px),
                   linear-gradient(90deg,var(--hairline) 1px,transparent 1px);
  background-size:56px 56px;
  opacity:.6;
  -webkit-mask-image:radial-gradient(ellipse 85% 70% at 62% 38%,#000 25%,transparent 74%);
  mask-image:radial-gradient(ellipse 85% 70% at 62% 38%,#000 25%,transparent 74%);
}
/* Живая «нейросеть»: canvas-декорация, рисует скрипт (только .anim+desktop).
   Гаснет книзу, чтобы не мешать чтению контента. */
.hero canvas{
  position:absolute;inset:0;z-index:0;width:100%;height:100%;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 58%,transparent 97%);
  mask-image:linear-gradient(180deg,#000 0%,#000 58%,transparent 97%);
}
/* Плёночное зерно — премиальная текстура поверх света (5% альфы). */
.hero .grain{
  position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero .wrap{z-index:2;}
/* Бейдж над заголовком. */
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);border:1px solid var(--border);border-radius:999px;
  padding:7px 14px;margin-bottom:26px;background:rgba(24,27,33,.55);
}
.eyebrow i{width:6px;height:6px;border-radius:50%;background:var(--cinnabar);flex:none;
  animation:livePulse 2.4s var(--ease-soft) infinite;}
/* Бренд-строка — оригинальным начертанием ЛОГОТИПА (раунд 21.2, владелец:
   «avelune пусть будет фирменным маленьким, а не гигантским капсом»). */
.wordmark{
  font-size:clamp(1.55rem,2.5vw,2.05rem);
  font-weight:800;letter-spacing:-.02em;line-height:1;
  margin:0 0 14px;user-select:none;
}
.wordmark em{font-style:normal;color:var(--cinnabar);}
/* Сборка бренд-строки по буквам: спаны .ltr создаёт скрипт ТОЛЬКО в
   .anim-режиме. До сплита .anim прячет её (класс .split возвращает), при
   сбое скрипта try/catch снимает .anim — статичный текст виден всегда. */
.anim .wordmark{opacity:0;}
.anim .wordmark.split{opacity:1;}
.wordmark .ltr{display:inline-block;transition:transform .3s var(--ease-soft);} /* подъём к курсору */
.anim .wordmark .ltr{animation:ltrUp .55s var(--ease-expo) calc(.06s + var(--li,0) * .035s) backwards;}
@keyframes ltrUp{
  from{opacity:0;transform:translateY(.38em) rotate(5deg) scale(.9);filter:blur(6px);}
  to{opacity:1;transform:none;filter:blur(0);}
}
/* Бренд-андерскор: входит после букв и мигает терминальным курсором. */
.anim .wordmark em{
  animation:fadeUp .4s var(--ease-expo) .32s backwards,
            cursorBlink 1.1s steps(2,start) .85s infinite;
}
@keyframes cursorBlink{to{visibility:hidden;}}
/* Смысловой заголовок — теперь главный размер hero; слова появляются
   каскадом (пословный стаггер --w из HTML, только под .anim). */
.hero h1{
  font-size:clamp(2.15rem,4.5vw,3.8rem);
  line-height:1.08;font-weight:800;letter-spacing:-.035em;
  margin:0 0 18px;
}
.hero h1 em{font-style:normal;color:var(--cinnabar);}
/* Градиентный металл по тексту заголовка (кость → тень); акцентное слово
   остаётся киноварным. Только там, где поддержан clip:text — иначе кость. */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .hero h1{
    background:linear-gradient(180deg,#FFFEF9 6%,var(--bone) 52%,#A6A192 100%);
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;
  }
  .hero h1 em{-webkit-text-fill-color:var(--cinnabar);}
}
.hero h1 .hw{display:inline-block;}
.anim .hero h1 .hw{animation:wordUp .55s var(--ease-expo) calc(.18s + var(--w,0) * .07s) backwards;}
@keyframes wordUp{
  from{opacity:0;transform:translateY(.55em);filter:blur(5px);}
  to{opacity:1;transform:translateY(0);filter:blur(0);}
}
.hero-grid{
  display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;
  perspective:1400px;
}
.hero .lead{font-size:clamp(.95rem,1.4vw,1.15rem);color:var(--muted);margin-bottom:30px;max-width:560px;}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;align-items:center;}
.hero-cta .btn--bone{background:transparent;border-color:var(--border-lift);color:var(--bone);}
.hero-cta .btn--bone:hover{background:rgba(239,237,230,.08);border-color:var(--muted);}
.hero-note{margin-top:18px;font-size:12.5px;color:var(--muted);max-width:560px;}
/* Магнитный главный CTA — единственный магнитный элемент страницы.
   Под кнопкой медленно «дышит» киноварный свет (opacity-пульс на подслое —
   box-shadow в цикле не анимируем). */
.magnet{display:inline-block;position:relative;will-change:transform;transition:transform 260ms var(--ease-expo);}
.magnet::before{
  content:'';position:absolute;inset:8px -6px -10px;z-index:-1;border-radius:16px;
  background:radial-gradient(60% 80% at 50% 60%,rgba(210,64,13,.5),transparent 75%);
  filter:blur(14px);opacity:.35;pointer-events:none;
}
.anim .magnet::before{animation:ctaBreath 4.4s var(--ease-soft) 2.2s infinite alternate;}
@keyframes ctaBreath{from{opacity:.3;}to{opacity:.75;}}

/* Стаггер-вход hero-контента: fade-up с блюром (SENTINEL-схема), задержка --d
   из HTML. Только под .anim; fill-mode backwards держит from-состояние во время
   задержки и отпускает элемент после — hover-transition'ы не блокируются. */
.anim .fu{animation:fadeUp .7s var(--ease-expo) var(--d,0s) backwards;}
.anim .hero .fu{animation-duration:.5s;}
@keyframes fadeUp{
  from{opacity:0;transform:translateY(20px);filter:blur(4px);}
  to{opacity:1;transform:translateY(0);filter:blur(0);}
}

/* Сцена карточки: перспектива от .hero-grid, наклон к курсору ставит скрипт.
   Вход — кинематографичный (подъём + масштаб + blur), перекрывает общий .fu. */
.card-scene{position:relative;align-self:center;}
.anim .card-scene.fu{animation:cardIn .6s var(--ease-expo) var(--d,0s) backwards;}
@keyframes cardIn{
  from{opacity:0;transform:translateY(36px) scale(.955);filter:blur(9px);}
  to{opacity:1;transform:translateY(0) scale(1);filter:blur(0);}
}
/* Киноварный свет из-за карточки. */
.card-scene::before{
  content:'';position:absolute;inset:-10% -8%;z-index:-1;pointer-events:none;
  background:radial-gradient(52% 52% at 58% 42%,rgba(210,64,13,.17),transparent 72%);
}
/* Покойная 3D-поза (только .anim+desktop; статикой карточка плоская). */
.anim .card-scene .chatcard{transform:rotateY(-8deg) rotateX(3deg);}

/* Мокап чата — честная иллюстрация продукта на чистом CSS/SVG.
   z-index:2 — под парящими чипами (z4). Орбиту логотипов вокруг карточки
   убрали по решению владельца 2026-07-11. */
.chatcard{
  position:relative;z-index:2;
  background:linear-gradient(180deg,#1A1D24,#15181E);
  border:1px solid var(--hairline);border-radius:16px;
  padding:16px;box-shadow:0 28px 70px rgba(0,0,0,.42),inset 0 1px 0 rgba(239,237,230,.06);
  transition:transform .38s var(--ease-soft),
             box-shadow var(--dur-reveal) var(--ease-expo),
             border-color var(--dur-micro) var(--ease-soft);
}
/* Спекулярный блик «стекла»: позицию света двигает тот же наклон (--lx/--ly). */
.anim .chatcard::after{
  content:'';position:absolute;inset:0;border-radius:16px;pointer-events:none;
  background:radial-gradient(340px circle at var(--lx,72%) var(--ly,16%),rgba(255,255,255,.075),transparent 62%);
  opacity:0;transition:opacity .35s var(--ease-soft);
}
.anim .card-scene:hover .chatcard::after{opacity:1;}
.chatcard:hover{border-color:rgba(239,237,230,.14);
  box-shadow:0 36px 90px rgba(0,0,0,.5),inset 0 1px 0 rgba(239,237,230,.07);}
.chatcard-head{display:flex;align-items:center;gap:10px;padding-bottom:12px;border-bottom:1px solid var(--border);margin-bottom:13px;}
.chatcard-ava{width:30px;height:30px;border-radius:8px;background:linear-gradient(180deg,var(--cinnabar-hi),var(--cinnabar-press));color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;font-size:15px;}
.chatcard-t{font-size:13px;font-weight:700;}
.chatcard-s{font-size:11px;color:var(--ok);display:flex;align-items:center;gap:5px;}
.chatcard-s::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--ok);animation:livePulse 2.4s var(--ease-soft) infinite;}
@keyframes livePulse{0%,100%{opacity:1;}50%{opacity:.35;}}
/* Подключённые системы в шапке мокапа. */
.chatcard-conns{margin-left:auto;display:flex;gap:6px;}
.chatcard-conns span{font-size:10px;font-weight:600;color:var(--muted);border:1px solid var(--border);border-radius:6px;padding:3px 7px;}
.msg{max-width:88%;padding:10px 13px;border-radius:12px;font-size:13.5px;line-height:1.5;margin-bottom:9px;}
.msg--user{background:linear-gradient(180deg,var(--cinnabar-hi),var(--cinnabar));color:#fff;margin-left:auto;border-bottom-right-radius:4px;}
.msg--bot{background:var(--surface2);border:1px solid var(--border);border-bottom-left-radius:4px;}
.msg--bot .num{font-weight:800;color:var(--bone);font-variant-numeric:tabular-nums;}
.msg-chart{margin-top:8px;}
.msg-chart svg{display:block;width:100%;height:auto;}
.msg-chart .bar{transform-box:fill-box;transform-origin:bottom;}
/* Typing-индикатор (3 точки) — виден только во время сценария. */
.typing{display:none;align-items:center;gap:4px;width:max-content;padding:11px 13px;margin-bottom:9px;
  background:var(--surface2);border:1px solid var(--border);border-radius:12px;border-bottom-left-radius:4px;}
.typing span{width:6px;height:6px;border-radius:50%;background:var(--muted);animation:typeDot 1.1s var(--ease-soft) infinite;}
.typing span:nth-child(2){animation-delay:.16s;}
.typing span:nth-child(3){animation-delay:.32s;}
@keyframes typeDot{0%,60%,100%{transform:translateY(0);opacity:.5;}30%{transform:translateY(-4px);opacity:1;}}
/* Строка ввода мокапа — «это настоящий интерфейс». */
.chatcard-in{
  display:flex;align-items:center;gap:10px;margin-top:12px;
  border:1px solid var(--border);border-radius:11px;padding:9px 9px 9px 13px;
  background:rgba(16,18,22,.55);
}
.chatcard-in span{font-size:12.5px;color:var(--muted);flex:1;white-space:nowrap;overflow:hidden;}
/* Каретка typewriter'а — только в .anim (там же работает сам typewriter). */
.anim .chatcard-in span::after{
  content:'';display:inline-block;width:1px;height:1em;background:var(--muted);
  margin-left:2px;vertical-align:-.15em;
  animation:cursorBlink 1.05s steps(2,start) infinite;
}
.chatcard-in b{
  width:28px;height:28px;border-radius:8px;flex:none;color:#fff;
  background:linear-gradient(180deg,var(--cinnabar-hi),var(--cinnabar-press));
  display:flex;align-items:center;justify-content:center;
}
.chatcard-in b svg{width:14px;height:14px;}

/* Парящие чипы уведомлений вокруг карточки — «система живёт»; тексты
   событий сменяет скрипт (fade внутри <u>, парение чипа не прерывается). */
.chip{
  position:absolute;z-index:4;display:flex;align-items:center;gap:8px;white-space:nowrap;
  padding:9px 14px;border-radius:12px;font-size:12.5px;font-weight:600;
  background:rgba(24,27,33,.88);border:1px solid var(--border-lift);
  backdrop-filter:blur(6px);box-shadow:0 14px 34px rgba(0,0,0,.4);
}
.chip u{text-decoration:none;display:inline-block;
  transition:opacity .3s var(--ease-soft),transform .3s var(--ease-soft);}
.chip .dot{width:8px;height:8px;border-radius:50%;flex:none;}
.dot--ok{background:var(--ok);}
.dot--tm{background:var(--cinnabar);}
.dot--wr{background:var(--warn);}
.chip--a{top:-18px;right:-8px;}
.chip--b{bottom:236px;left:-44px;} /* садится на зону графика, не на текст реплик */
.chip--c{bottom:-44px;right:28px;} /* парит под карточкой, не накрывая строку ввода */
/* Вход (fadeUp по --d) + бесконечное лёгкое парение после — одним списком,
   чтобы вторая анимация не перетирала первую. */
.anim .card-scene .chip{
  animation:fadeUp .7s var(--ease-expo) var(--d,0s) backwards,
            chipFloat 6.5s var(--ease-soft) calc(var(--d,0s) + .8s) infinite alternate;
}
.anim .card-scene .chip--b{animation-duration:.7s,8.2s;}
.anim .card-scene .chip--c{animation-duration:.7s,7.3s;}
@keyframes chipFloat{
  from{transform:translateY(0);}
  to{transform:translateY(-9px);}
}

/* Скролл-индикатор внизу hero. */
.scrolldn{
  position:absolute;left:50%;bottom:16px;z-index:2;transform:translateX(-50%);
  width:24px;height:38px;border:1.5px solid var(--border-lift);border-radius:12px;
  display:flex;justify-content:center;padding-top:7px;
  transition:border-color var(--dur-micro) var(--ease-soft);
}
.scrolldn:hover{border-color:var(--muted);}
.scrolldn span{width:3px;height:7px;border-radius:2px;background:var(--muted);}
.anim .scrolldn span{animation:scrollDot 1.9s var(--ease-soft) infinite;}
@keyframes scrollDot{0%{transform:translateY(0);opacity:1;}70%{transform:translateY(13px);opacity:0;}100%{transform:translateY(0);opacity:0;}}

/* ── Полоса цифр (доказательства, count-up при появлении) ── */
.stats{padding:0;background:var(--surface);border-block:1px solid var(--border);}
.stats-in{display:grid;grid-template-columns:repeat(4,1fr);}
.stat{padding:30px 22px 26px;position:relative;}
.stat + .stat{border-left:1px solid var(--border);}
.stat::before{content:'';position:absolute;top:0;left:22px;width:26px;height:2px;background:var(--cinnabar);}
.stat-n{font-size:clamp(28px,3.2vw,40px);font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1.15;}
.stat-l{font-size:12.5px;color:var(--muted);margin-top:3px;}

/* ── Секции ── */
section{padding:96px 0;scroll-margin-top:62px;} /* якоря не ныряют под fixed-шапку */
.kick{
  display:flex;align-items:center;gap:14px;
  font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--cinnabar);margin-bottom:14px;
}
.kick::after{content:'';flex:0 0 46px;height:1px;background:linear-gradient(90deg,rgba(210,64,13,.6),transparent);}
.sec-title{font-size:clamp(28px,3.8vw,42px);font-weight:800;letter-spacing:-.03em;line-height:1.12;margin-bottom:10px;}
.sec-title em{font-style:normal;color:var(--cinnabar);}
.sec-sub{color:var(--muted);margin-bottom:40px;max-width:640px;}

/* Возможности — бенто-сетка: 6 колонок, пролёты 4/2 · 2/4 · 3/3. */
.feats{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;}
.feat{
  grid-column:span 2;display:flex;flex-direction:column;
  background:linear-gradient(180deg,#191C23,#15181D);
  border:1px solid var(--hairline);border-radius:16px;padding:24px;position:relative;
  box-shadow:inset 0 1px 0 rgba(239,237,230,.05);
  transition:transform var(--dur-micro) var(--ease-soft),border-color var(--dur-micro) var(--ease-soft);
}
.feat--3{grid-column:span 3;}
.feat--4{grid-column:span 4;}
/* Hover-слой: тень + spotlight под курсором (--mx/--my ставит скрипт) —
   на псевдослое через opacity (не анимируем box-shadow). */
.feat::after{content:'';position:absolute;inset:0;border-radius:16px;pointer-events:none;
  box-shadow:0 16px 38px rgba(0,0,0,.42);opacity:0;transition:opacity var(--dur-micro) var(--ease-soft);
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(210,64,13,.10),transparent 72%);}
.feat:hover{transform:translateY(-3px);border-color:rgba(210,64,13,.38);}
.feat:hover::after{opacity:1;}
.feat-ico{width:38px;height:38px;border-radius:11px;background:rgba(210,64,13,.12);color:var(--cinnabar);display:flex;align-items:center;justify-content:center;margin-bottom:16px;
  transition:background var(--dur-micro) var(--ease-soft),transform var(--dur-micro) var(--ease-soft);}
.feat:hover .feat-ico{background:rgba(210,64,13,.20);transform:translateY(-1px);}
.feat-ico svg{width:18px;height:18px;}
.feat h3{font-size:16.5px;font-weight:700;margin-bottom:6px;}
.feat p{font-size:13.5px;color:var(--muted);}

/* Мини-визуализации внутри бенто-карточек (чистый CSS/SVG, aria-hidden). */
.feat-vis{margin-top:auto;padding-top:18px;}
/* Документ-мок: заголовок, строки, итог. */
.vis-doc{
  background:rgba(16,18,22,.5);border:1px solid var(--border);border-radius:11px;
  padding:13px 15px;max-width:300px;
}
.vis-doc b{display:block;font-size:12px;font-weight:700;margin-bottom:9px;}
.vis-doc span{display:block;height:5px;border-radius:3px;background:var(--border);margin-bottom:6px;width:92%;}
.vis-doc em{display:block;font-style:normal;font-size:12px;font-weight:800;color:var(--bone);margin-top:9px;font-variant-numeric:tabular-nums;}
/* Спарклайн-бары. */
.vis-spark{display:flex;align-items:flex-end;gap:6px;height:56px;}
.vis-spark i{flex:1;height:var(--h,40%);border-radius:3px 3px 2px 2px;background:var(--border);}
.vis-spark i.hot{background:var(--cinnabar);}
/* Пилюли (роли, рутины). */
.feat-tags{margin-top:auto;padding-top:18px;display:flex;flex-wrap:wrap;gap:7px;}
.feat-tags span{
  font-size:11.5px;font-weight:600;color:var(--muted);
  border:1px solid var(--border);border-radius:999px;padding:5px 11px;
  transition:color var(--dur-micro) var(--ease-soft),border-color var(--dur-micro) var(--ease-soft);
}
.feat:hover .feat-tags span{color:var(--bone);border-color:var(--border-lift);}
/* Мини-диалог Telegram. */
.vis-tg{display:flex;flex-direction:column;gap:6px;}
.vis-tg span{font-size:11.5px;padding:7px 11px;border-radius:10px;max-width:88%;}
.vis-tg .tg-in{background:var(--surface2);border:1px solid var(--border);border-bottom-left-radius:3px;}
.vis-tg .tg-out{background:rgba(210,64,13,.16);color:var(--bone);margin-left:auto;border-bottom-right-radius:3px;}
/* Мок подтверждения действия. */
.vis-ok{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.vis-ok .ok-q{font-size:11.5px;color:var(--muted);}
.vis-ok .ok-btn{
  font-size:11.5px;font-weight:700;color:#fff;border-radius:8px;padding:6px 12px;
  background:linear-gradient(180deg,var(--cinnabar-hi),var(--cinnabar-press));
}

/* ── Мини-визуализации оживают при появлении бенто-сетки (.rv-group получает
      .on от IO — тот же механизм, что и reveal карточек; без .anim всё
      статично видно). ── */
.vis-spark i:nth-child(1){--sj:0;}.vis-spark i:nth-child(2){--sj:1;}
.vis-spark i:nth-child(3){--sj:2;}.vis-spark i:nth-child(4){--sj:3;}
.vis-spark i:nth-child(5){--sj:4;}.vis-spark i:nth-child(6){--sj:5;}
.vis-spark i:nth-child(7){--sj:6;}
.anim .feats .vis-spark i{transform:scaleY(0);transform-origin:bottom;}
.anim .feats.on .vis-spark i{animation:growY .7s var(--ease-expo) calc(.4s + var(--sj,0) * 70ms) forwards;}
.anim .feats .vis-doc span{transform:scaleX(0);transform-origin:left;}
.anim .feats.on .vis-doc span{animation:growX .8s var(--ease-expo) calc(.45s + var(--sj,0) * 90ms) forwards;}
.vis-doc span:nth-of-type(1){--sj:0;}.vis-doc span:nth-of-type(2){--sj:1;}.vis-doc span:nth-of-type(3){--sj:2;}
.anim .feats .vis-doc em{opacity:0;}
.anim .feats.on .vis-doc em{animation:popIn .5s var(--ease-expo) .85s forwards;}
.feat-tags span:nth-child(1){--sj:0;}.feat-tags span:nth-child(2){--sj:1;}
.feat-tags span:nth-child(3){--sj:2;}.feat-tags span:nth-child(4){--sj:3;}
.feat-tags span:nth-child(5){--sj:4;}
.anim .feats .feat-tags span{opacity:0;transform:translateY(6px);}
.anim .feats.on .feat-tags span{animation:popIn .5s var(--ease-expo) calc(.45s + var(--sj,0) * 60ms) forwards;}
.anim .feats .vis-tg span,.anim .feats .vis-ok .ok-q,.anim .feats .vis-ok .ok-btn{opacity:0;transform:translateY(6px);}
.anim .feats.on .vis-tg .tg-in{animation:popIn .5s var(--ease-expo) .5s forwards;}
.anim .feats.on .vis-tg .tg-out{animation:popIn .5s var(--ease-expo) .85s forwards;}
.anim .feats.on .vis-ok .ok-q{animation:popIn .5s var(--ease-expo) .5s forwards;}
.anim .feats.on .vis-ok .ok-btn{animation:popIn .55s var(--ease-expo) .8s forwards;}
@keyframes growY{to{transform:scaleY(1);}}
@keyframes growX{to{transform:scaleX(1);}}
@keyframes popIn{to{opacity:1;transform:none;}}
@keyframes lineDraw{from{transform:scaleX(0);}to{transform:scaleX(1);}}

/* Коннекторы — бегущие ленты (дубль контента для петли добавляет скрипт;
   без .anim лента статична и просто показывает начало ряда). */
.mq{overflow:hidden;padding:6px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);}
.mq + .mq{margin-top:12px;}
.mq-track{display:flex;width:max-content;}
.mq-run{animation:mqScroll 44s linear infinite;}
.mq--rev .mq-run{animation-duration:56s;animation-direction:reverse;}
.mq:hover .mq-track{animation-play-state:paused;}
@keyframes mqScroll{to{transform:translateX(-50%);}}
.conn{
  display:flex;align-items:center;gap:9px;margin-right:12px;
  background:linear-gradient(180deg,#191C23,#15181D);border:1px solid var(--hairline);border-radius:11px;
  padding:9px 14px 9px 9px;font-size:13px;font-weight:600;
  transition:transform 200ms var(--ease-expo),border-color 200ms var(--ease-soft);
}
.conn:hover{transform:translateY(-2px);border-color:rgba(210,64,13,.34);}
.conn i{
  font-style:normal;width:26px;height:26px;border-radius:7px;
  display:flex;align-items:center;justify-content:center;
  font-size:10.5px;font-weight:800;color:#fff;flex-shrink:0;letter-spacing:0;
}
.conns-note{margin-top:24px;font-size:13px;color:var(--muted);}

/* Как это работает — editorial-шаги: ghost-номера, киноварная насечка на линии.
   Линия ::after прорисовывается слева направо при появлении группы (.on). */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;}
.step{position:relative;padding-top:24px;}
.step::after{
  content:'';position:absolute;top:0;left:0;width:100%;height:1px;
  background:var(--border);transform-origin:left;
}
.anim .rv-group.on .step::after{animation:lineDraw .9s var(--ease-expo) calc(var(--i,0) * 130ms) backwards;}
.step::before{
  content:'';position:absolute;top:-1px;left:0;width:52px;height:2px;z-index:1;
  background:var(--cinnabar);
  transition:width .35s var(--ease-expo);
}
.step:hover::before{width:100px;}
.step-n{
  display:block;font-style:normal;font-size:58px;font-weight:800;line-height:1;
  letter-spacing:-.04em;color:rgba(239,237,230,.13);margin-bottom:16px;
  font-variant-numeric:tabular-nums;
  transition:color var(--dur-micro) var(--ease-soft);
}
.step:hover .step-n{color:rgba(210,64,13,.5);}
.step h3{font-size:17px;font-weight:700;margin-bottom:7px;}
.step p{font-size:13.5px;color:var(--muted);}

/* Безопасность — полоса доверия с вертикальными разделителями. */
.sec--sec{background:var(--surface);border-block:1px solid var(--border);}
.secs{display:grid;grid-template-columns:repeat(3,1fr);}
.secitem{padding:4px 26px 0 0;}
.secitem + .secitem{border-left:1px solid var(--border);padding-left:26px;}
.secitem h3{font-size:15px;font-weight:700;margin-bottom:6px;display:flex;align-items:center;gap:9px;}
.secitem h3 svg{width:16px;height:16px;color:var(--cinnabar);flex-shrink:0;transition:transform var(--dur-micro) var(--ease-soft);}
.secitem:hover h3 svg{transform:translateY(-1px) scale(1.08);}
.secitem p{font-size:13.5px;color:var(--muted);}
/* Контур данных — наглядное доказательство изоляции вместо неподтверждённых
   логотипов или отзывов. CSS-схема не добавляет внешних ассетов. */
.security-flow{
  display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:34px;
  padding:14px;border:1px solid var(--hairline);border-radius:14px;
  background:rgba(11,13,17,.42);
}
.security-node{position:relative;min-width:0;display:flex;align-items:center;gap:9px;padding:9px 12px;color:var(--muted);font-size:12px;font-weight:600;line-height:1.35;}
.security-node b{display:grid;place-items:center;width:23px;height:23px;flex:none;border:1px solid rgba(210,64,13,.5);border-radius:7px;color:var(--cinnabar);font-size:10px;font-variant-numeric:tabular-nums;}
.security-node + .security-node::before{content:'→';position:absolute;left:-12px;color:var(--cinnabar);font-size:16px;font-weight:400;}

/* FAQ — отработка возражений (CRO-ресёрч: утечка данных, ошибки ИИ, оплата
   ключа — главные барьеры МСБ). Аккордеон: нативный details, под .anim
   раскрытие едет плавно через grid-template-rows (.op ставит скрипт). */
.faqs{max-width:760px;}
details.faq{border-bottom:1px solid var(--border);}
.faq summary{
  display:flex;align-items:center;gap:16px;list-style:none;cursor:pointer;
  padding:19px 2px;font-size:16px;font-weight:700;
  transition:color var(--dur-micro) var(--ease-soft);
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary:hover{color:#fff;}
.faq summary span{flex:1;}
/* Плюс в рамке → крест при раскрытии. */
.faq summary i{
  position:relative;width:24px;height:24px;flex:none;
  border:1px solid var(--border-lift);border-radius:8px;
  transition:transform .45s var(--ease-expo),border-color var(--dur-micro) var(--ease-soft);
}
.faq summary i::before,.faq summary i::after{
  content:'';position:absolute;left:50%;top:50%;background:var(--muted);
  transform:translate(-50%,-50%);transition:background var(--dur-micro) var(--ease-soft);
}
.faq summary i::before{width:10px;height:1.5px;}
.faq summary i::after{width:1.5px;height:10px;}
/* Крест: в .anim-режиме управляется классом .op (иначе при анимированном
   закрытии [open] ещё висит и иконка не возвращалась бы), без .anim — нативным [open]. */
details.faq.op summary i,
html:not(.anim) details.faq[open] summary i{transform:rotate(45deg);border-color:rgba(210,64,13,.5);}
.faq summary:hover i{border-color:var(--muted);}
.faq-a p{padding:0 42px 19px 2px;font-size:14px;color:var(--muted);}
/* Плавная высота — только под .anim; без .anim details работает нативно. */
.anim details.faq .faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease-expo);}
.anim details.faq .faq-a p{overflow:hidden;min-height:0;}
.anim details.faq.op .faq-a{grid-template-rows:1fr;}

/* Финальный CTA — панель-сцена: тёмный колодец, сетка, свет, ватермарка. */
.cta-fin{padding:96px 0 110px;}
.fin-panel{
  position:relative;text-align:center;overflow:hidden;isolation:isolate;
  padding:88px 32px 76px;border:1px solid var(--border-lift);border-radius:26px;
  background:linear-gradient(180deg,#0A0C10,var(--hero-bg));
  box-shadow:0 30px 80px rgba(0,0,0,.35),inset 0 1px 0 rgba(239,237,230,.05);
}
.fin-panel::before{
  content:'';position:absolute;z-index:-1;pointer-events:none;
  top:-40%;left:50%;width:70%;height:120%;transform:translateX(-50%);
  background:radial-gradient(50% 50% at 50% 50%,rgba(210,64,13,.16),transparent 70%);
}
.fin-panel::after{
  content:'';position:absolute;inset:0;z-index:-2;pointer-events:none;
  background-image:linear-gradient(var(--hairline) 1px,transparent 1px),
                   linear-gradient(90deg,var(--hairline) 1px,transparent 1px);
  background-size:48px 48px;opacity:.55;
  -webkit-mask-image:radial-gradient(ellipse 80% 90% at 50% 0%,#000 20%,transparent 78%);
  mask-image:radial-gradient(ellipse 80% 90% at 50% 0%,#000 20%,transparent 78%);
}
/* Гигантская ватермарка бренда за контентом панели. */
.fin-wm{
  position:absolute;left:50%;bottom:-.24em;transform:translateX(-50%);
  font-style:normal;font-weight:800;white-space:nowrap;pointer-events:none;
  font-size:clamp(96px,17vw,210px);letter-spacing:-.05em;line-height:1;
  color:rgba(239,237,230,.04);user-select:none;
}
/* Ватермарка и свет панели медленно «дышат» (только .anim). */
.anim .fin-wm{animation:wmFloat 14s var(--ease-soft) infinite alternate;}
@keyframes wmFloat{
  from{transform:translateX(-50%) translateY(0);}
  to{transform:translateX(calc(-50% + 14px)) translateY(-10px);}
}
.anim .fin-panel::before{animation:finGlow 11s var(--ease-soft) infinite alternate;}
@keyframes finGlow{
  from{transform:translateX(-50%) scale(1);opacity:1;}
  to{transform:translateX(-50%) scale(1.14);opacity:.72;}
}
.fin-panel h2{font-size:clamp(30px,4.4vw,46px);font-weight:800;letter-spacing:-.03em;margin-bottom:12px;position:relative;}
.fin-panel h2 em{font-style:normal;color:var(--cinnabar);}
.fin-panel p{color:var(--muted);margin-bottom:30px;position:relative;}
.fin-note{margin-top:22px;margin-bottom:0!important;font-size:12.5px;color:var(--muted);}

/* Футер */
.ftr{border-top:1px solid var(--border);padding:40px 0 28px;}
.ftr-top{display:flex;align-items:flex-start;gap:40px;flex-wrap:wrap;}
.ftr-brand p{margin-top:8px;font-size:12.5px;color:var(--muted);}
.ftr-nav{display:flex;gap:20px;flex-wrap:wrap;margin-left:auto;padding-top:5px;}
.ftr-nav a{font-size:13px;color:var(--muted);text-decoration:none;transition:color var(--dur-micro) var(--ease-soft);}
.ftr-nav a:hover{color:var(--bone);}
.ftr-auth{display:flex;gap:14px;align-items:center;padding-top:0;}
.ftr-auth a{font-size:13px;color:var(--muted);text-decoration:none;transition:color var(--dur-micro) var(--ease-soft);}
.ftr-auth a:hover{color:var(--bone);}
.ftr-auth .btn{font-size:13px;padding:8px 14px;color:#fff;}
.ftr-bot{margin-top:26px;padding-top:18px;border-top:1px solid var(--border);font-size:12.5px;color:var(--muted);}

/* ── Появление при скролле (только в .anim-режиме; иначе всё видно сразу) ── */
/* Одиночные (заголовки, подписи, финальный блок). */
.anim .rv{opacity:0;transform:translateY(9px);transition:opacity var(--dur-reveal) var(--ease-expo),transform var(--dur-reveal) var(--ease-expo);}
.anim .rv.on{opacity:1;transform:none;}
/* Стаггер-каскад детей внутри сетки: индекс --i раздаёт JS, шаг 45ms, кап 8. */
.anim .rv-item{opacity:0;transform:translateY(9px);
  transition:opacity var(--dur-reveal) var(--ease-expo),transform var(--dur-reveal) var(--ease-expo);
  transition-delay:calc(var(--i,0) * 45ms);}
.anim .rv-group.on .rv-item{opacity:1;transform:none;}
/* Заголовки секций раскрываются «шторкой» снизу вверх (wipe) — clip живёт на
   ВНУТРЕННЕМ .tw, а не на самом .rv: IntersectionObserver учитывает clip-path
   цели, полностью обрезанный h2 имел нулевую видимую площадь и .on не ставился
   (поймано живой отладкой). Kick-линия прорисовывается. */
.anim .sec-title.rv .tw{
  display:inline-block;clip-path:inset(0 0 100% 0);
  transform:translateY(14px);
  transition:transform .8s var(--ease-expo),clip-path .85s var(--ease-expo);
}
.anim .sec-title.rv.on .tw{clip-path:inset(0 0 0 0);transform:none;}
.anim .kick.rv::after{transform:scaleX(0);transform-origin:left;transition:transform .8s var(--ease-expo) .12s;}
.anim .kick.rv.on::after{transform:scaleX(1);}

@media (max-width:900px){
  /* Мокап встаёт в поток под контентом — экран не резиновый, min-height не душим.
     Canvas/чипы/скролл-индикатор — только desktop. */
  .hero{min-height:0;padding:88px 0 44px;}
  .hero::before{display:none;} /* glow — только desktop */
  .hero canvas,.chip,.scrolldn{display:none;}
  .hero-grid{grid-template-columns:1fr;gap:36px;}
  .card-scene{align-self:stretch;}
  .anim .card-scene .chatcard{transform:none;} /* 3D-поза — только desktop */
  .chatcard-conns{display:none;}
  .stats-in{grid-template-columns:1fr 1fr;}
  .stat{padding:22px 16px 18px;}
  .stat::before{left:16px;}
  .stat:nth-child(3){border-left:none;}
  .stat:nth-child(n+3){border-top:1px solid var(--border);}
  .feats{grid-template-columns:1fr;}
  .feat,.feat--3,.feat--4{grid-column:auto;}
  .steps{grid-template-columns:1fr;gap:26px;}
  .secs{grid-template-columns:1fr;gap:22px;}
  .secitem{padding-right:0;}
  .secitem + .secitem{border-left:none;padding-left:0;border-top:1px solid var(--border);padding-top:22px;}
  .security-flow{grid-template-columns:1fr 1fr;gap:4px;margin-top:26px;}
  .security-node + .security-node::before{display:none;}
  .nav{display:none;}
  section{padding:56px 0;}
  .cta-fin{padding:56px 0 64px;}
  .fin-panel{padding:56px 20px 50px;}
  .ftr-top{gap:22px;}
  .ftr-nav{margin-left:0;width:100%;}
  .hdr-in{grid-template-columns:auto 1fr;}
  .hdr-cta{grid-column:2;}
  .hdr .btn,.lang{min-height:44px;touch-action:manipulation;}
  .hdr .btn{display:inline-flex;align-items:center;justify-content:center;padding:8px 13px;font-size:13px;white-space:nowrap;}
  /* .lang тоже flex — иначе justify-content на кнопке не действует (фикс ревью). */
  .lang{display:inline-flex;align-items:center;justify-content:center;min-width:44px;}
  .hdr-cta{gap:8px;}
}

@media (max-width:400px){
  .cta-label--full{display:none;}
  .cta-label--short{display:inline;}
  .hdr-in{gap:12px;}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .rv,.rv-item{opacity:1;transform:none;transition:none;}
  .fu,.wordmark,.wordmark .ltr,.wordmark em,.hero h1 .hw,.chip{animation:none;opacity:1;filter:none;}
  .hero::before{animation:none;}
  .mq-track{animation:none;}
  .scrolldn span{animation:none;}
  .eyebrow i,.chatcard-s::before,.typing span{animation:none;}
  *{animation-duration:.01ms!important;transition-duration:.01ms!important;}
}

/* Рост баров из нуля — только там, где корректно работает transform-box:fill-box
   (иначе на старом WebKit бар масштабируется от базовой линии всего SVG). */
@supports (transform-box:fill-box){
  .anim .chatcard .bar{transform:scaleY(0);}
  .anim .chatcard .bar.grow{transform:scaleY(1);transition:transform .6s var(--ease-expo);}
}

/* ── Анимированный режим мокапа (класс .anim на <html> из head-скрипта —
      ставится ТОЛЬКО когда есть IntersectionObserver И не включён
      reduced-motion). Без .anim — всё видно сразу, статично. ── */
.anim .chatcard .msg{opacity:0;transform:translateY(7px);}
.anim .chatcard .msg.in{opacity:1;transform:none;transition:opacity .38s var(--ease-expo),transform .38s var(--ease-expo);}
.anim .chatcard .typing.in{display:flex;}