/* KVINT в Telegram: мини-апп с голосовыми демо.
   Шрифт Manrope берётся из assets/healthcare/fonts, иконки — SVG-спрайт в index.html,
   внешних CDN нет. */
@font-face { font-family: "Manrope"; src: url("../assets/healthcare/fonts/Manrope-Regular.ttf?v=f79ed84cb5782270aba5ce104e8fa4da19be9d973d6537c20d594e862b544fef") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("../assets/healthcare/fonts/Manrope-Medium.ttf?v=1dd1f79b103ef5dd5756b4cc82b9ce78a9a3ab2e96b9cc847c8568a50f621073") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("../assets/healthcare/fonts/Manrope-Semibold.ttf?v=ad4e12cde4e6cebd2d02c2a682e8c2445322566e465c1f449f8225cc62d8a22c") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("../assets/healthcare/fonts/Manrope-Bold.ttf?v=628a143efc9537d841fb862ea837fb5f3419db5d903f184e9e5b98d91ab4a6dd") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("../assets/healthcare/fonts/Manrope-ExtraBold.ttf?v=31b3424e41c2295977ecd66e9770b19d99ac2892947642b488ad2acefa20fc58") format("truetype"); font-weight: 800; font-style: normal; font-display: swap; }
/* Слои: световые ленты → сетка → зерно → матовые панели поверх тёмной основы. */
:root {
  /* Фон снят пипеткой с оригинала: в пустых местах он около #013359. */
  --void:#07203a;
  --ink:#f2f8ff;
  --ink-dim:#cfe6f5;
  --cy:#7fe9ff;
  --cy-deep:#1fc8ec;
  --vi:#9b8cff;
  --bl:#3f84ff;
  --danger:#ff5f6d;
  --ok:#3ff0a8;

  /* Тело стекла снято с карточек оригинала: слева тёмная бирюза, в середине
     светлее, справа уходит в индиго. */
  --glass-base:linear-gradient(90deg, rgba(12,58,86,.8) 0%, rgba(50,104,134,.84) 44%, rgba(50,112,148,.82) 66%, rgba(38,62,114,.88) 100%);
  --glass:var(--glass-base);
  /* Неоновая линия: голубая слева, бирюзовая в центре, фиолетовая справа. */
  --neon-ring:linear-gradient(180deg, #d9fdff 0, rgba(205,250,255,0) 24%, rgba(170,250,255,0) 76%, #a8f6ff 100%),
    linear-gradient(90deg, #86b6dc 0%, #7cb0d6 34%, #7aa6d8 68%, #bcb4ff 100%);
  /* Заливка кнопки — послойный замер столбца пикселей оригинала. */
  --jelly:linear-gradient(180deg, #fff 0%, #eafdff 4.5%, #b6f7fe 9%, #84e6f5 15%, #6edfef 22%, #60daec 30%, #51d9eb 46%, #4bdaeb 62%, #4adeee 73%, #58e7f6 83%, #8af6fb 91%, #9effff 93%, #66ecf4 95.5%, #90f6f8 98%, #c9ffff 100%);
  --jelly-ink:#0a2a44;
  --ring:linear-gradient(150deg, rgba(190,240,255,.55), rgba(255,255,255,.04) 46%, rgba(155,140,255,.3));
    --lift:0 16px 38px rgba(2,8,20,.5);
  --inner:inset 0 1px 0 rgba(210,245,255,.22);

  --display:"Manrope", system-ui, -apple-system, sans-serif;
  --body:"Manrope", system-ui, -apple-system, sans-serif;
  --mono:ui-monospace, "SF Mono", "Roboto Mono", Menlo, monospace;

  --ease:cubic-bezier(.2,.8,.3,1);
  /* Шар экрана теста вырезан из макета вместе с радужной кромкой и бликами. */
  --km-sphere:url("../assets/tg/sphere.png?v=5533ceb3b0bce8f052b895d021719052c8717e165c73b331212095d16c9f7283");
  /* Медиа форматов взяты из блока «Три формата» страницы клиник. */
  --km-format-portrait:url("../assets/tg/format-operator.jpg?v=6d5bd2a4fd70218dc69934268982d5d943b8e8b3ba7ba1b84c023b5a96c9e3c6");
  --km-callback-poster:url("../assets/tg/callback-poster.jpg?v=1599bb9212d36f47d4e1befaedab34b2c873976da63af95155251445f71ce80d");
  color-scheme: dark;
}
html, body { height: 100%; }
body {
  margin: 0; color: var(--ink); font-family: var(--body);
  background: radial-gradient(ellipse 130% 68% at 50% 0%, #0a2341 0%, #08233f 40%, var(--void) 72%, #051a30 100%) fixed;
  background-color: var(--void);
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

/* ---------- Фон ---------- */
/* Внутренние экраны в оригинале светлее главного: подложка проявляется
   при уходе с главной, а не переключается рывком. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -4; pointer-events: none;
  background: radial-gradient(ellipse 130% 68% at 50% 0%, #0a3356 0%, #053053 38%, #052440 72%, #03182f 100%);
  opacity: 1; transition: opacity .55s var(--ease);
}
body[data-page="home"]::before { opacity: 0; }
/* Лучи главного экрана: тонкое яркое ядро внутри широкого ореола. */
.km-beams { position: fixed; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity .55s var(--ease); }
body[data-page="home"] .km-beams { opacity: 1; }
.km-beams i { position: absolute; display: block; }
.km-beams i:nth-child(1) {
  left: 56vw; top: -9vh; width: 34px; height: 30vh; rotate: 40deg; filter: blur(9px);
  background: linear-gradient(180deg, transparent, rgba(40,205,235,.9) 30%, rgba(30,170,215,.55) 62%, transparent);
  animation: kmBeam 8s ease-in-out infinite;
}
.km-beams i:nth-child(2) {
  left: 62vw; top: -6vh; width: 2px; height: 20vh; rotate: 40deg; filter: blur(.6px);
  background: linear-gradient(180deg, transparent, rgba(190,250,255,.95) 45%, transparent);
  animation: kmBeam 8s ease-in-out infinite;
}
.km-beams i:nth-child(3) {
  left: -13vw; top: 15.5vh; width: 42vw; height: 12px; rotate: -44deg; filter: blur(6px);
  background: linear-gradient(90deg, transparent, rgba(60,225,245,.95) 42%, transparent);
  animation: kmBeam 10s ease-in-out -3s infinite;
}
.km-beams i:nth-child(4) {
  right: -4vw; top: 12vh; width: 16vw; height: 26vh; border-radius: 50%; filter: blur(18px);
  background: radial-gradient(ellipse closest-side, rgba(120,104,240,.8), transparent);
  animation: kmBeam 12s ease-in-out -6s infinite;
}
.km-beams i:nth-child(5) {
  left: -16vw; top: 52vh; width: 46vw; height: 34vh; border-radius: 50%; filter: blur(30px);
  background: radial-gradient(ellipse closest-side, rgba(22,150,200,.55), transparent);
  animation: kmBeam 14s ease-in-out -2s infinite;
}
.km-beams i:nth-child(6) {
  left: 18vw; bottom: -14vh; width: 70vw; height: 26vh; border-radius: 50%; filter: blur(30px);
  background: radial-gradient(ellipse closest-side, rgba(26,120,210,.6), transparent);
  animation: kmBeam 13s ease-in-out -7s infinite;
}
@keyframes kmBeam { 0%, 100% { opacity: .62; } 50% { opacity: 1; } }
body[data-page="home"] .km-aurora { opacity: .12; }
body[data-page="home"] .km-mesh { opacity: 0; }
.km-aurora, .km-mesh { transition: opacity .55s var(--ease); }
.km-aurora { position: fixed; inset: -20%; z-index: -3; pointer-events: none; }
.km-aurora i { position: absolute; display: block; border-radius: 50%; mix-blend-mode: screen; }
/* Широкие заливки света. */
.km-aurora i:nth-child(1) {
  width: 150%; height: 26%; left: -34%; top: 1%; filter: blur(50px);
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(56,226,255,.85), rgba(40,170,230,.3) 46%, transparent 74%);
  transform: rotate(-27deg); animation: kmFlow1 26s ease-in-out infinite;
}
.km-aurora i:nth-child(2) {
  width: 120%; height: 30%; right: -34%; top: 16%; filter: blur(58px);
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(140,112,255,.7), rgba(90,110,255,.26) 48%, transparent 74%);
  transform: rotate(22deg); animation: kmFlow2 31s ease-in-out infinite;
}
.km-aurora i:nth-child(3) {
  width: 140%; height: 32%; left: -26%; bottom: 2%; filter: blur(66px);
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(32,200,236,.6), transparent 74%);
  transform: rotate(-12deg); animation: kmFlow3 28s ease-in-out infinite;
}
/* Тонкие яркие следы — главная примета референса. */
.km-aurora i:nth-child(4) {
  width: 128%; height: 1.5%; left: -18%; top: 9%; filter: blur(5px); border-radius: 100px;
  background: linear-gradient(90deg, transparent, rgba(214,250,255,.95) 34%, rgba(150,235,255,.7) 64%, transparent);
  transform: rotate(-23deg); animation: kmTrail 19s ease-in-out infinite;
}
.km-aurora i:nth-child(5) {
  width: 104%; height: 1.1%; right: -14%; top: 25%; filter: blur(4px); border-radius: 100px;
  background: linear-gradient(90deg, transparent, rgba(198,222,255,.8) 42%, transparent);
  transform: rotate(17deg); animation: kmTrail 23s ease-in-out 2.5s infinite;
}
/* Дуга, уходящая из верхнего правого угла за левый край. */
.km-aurora i:nth-child(6) {
  width: 170%; aspect-ratio: 1; left: -16%; top: -54%; border: 2px solid rgba(166,240,255,.6);
  filter: blur(5px); animation: kmArc 30s ease-in-out infinite;
}
.km-aurora i:nth-child(7) {
  width: 204%; aspect-ratio: 1; left: -38%; top: -68%; border: 16px solid rgba(56,168,230,.22);
  filter: blur(28px); animation: kmArc 38s ease-in-out -9s infinite;
}
@keyframes kmArc { 0%, 100% { rotate: 0deg; } 50% { rotate: 7deg; } }
@keyframes kmFlow1 { 0%,100% { transform: rotate(-26deg) translate3d(0,0,0) scaleX(1); } 50% { transform: rotate(-22deg) translate3d(5%,2%,0) scaleX(1.12); } }
@keyframes kmFlow2 { 0%,100% { transform: rotate(18deg) translate3d(0,0,0) scaleX(1.06); } 50% { transform: rotate(14deg) translate3d(-5%,3%,0) scaleX(.92); } }
@keyframes kmFlow3 { 0%,100% { transform: rotate(-12deg) translate3d(0,0,0) scaleX(.96); } 50% { transform: rotate(-16deg) translate3d(4%,-2%,0) scaleX(1.14); } }
@keyframes kmTrail { 0%,100% { opacity: .5; } 50% { opacity: 1; } }
.km-mesh {
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background-image: linear-gradient(rgba(123,178,255,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(123,178,255,.055) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(ellipse 90% 55% at 50% 0%, #000, transparent 78%);
  mask-image: radial-gradient(ellipse 90% 55% at 50% 0%, #000, transparent 78%);
}
/* Экран отраслей: глубокий тёмно-синий фон, тонкие орбиты из правого верхнего
   угла (по каждой бежит световая искра) и бирюзовое свечение справа внизу. */
.km-orbits {
  position: fixed; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity .6s var(--ease);
  background:
    radial-gradient(70% 45% at -10% -6%, rgba(12,44,76,.55), transparent 70%),
    linear-gradient(180deg, #06101b 0%, #071725 55%, #08202f 100%);
}
body[data-page="segments"] .km-orbits { opacity: 1; }
.km-orbits::before {
  content: ""; position: absolute; right: -30%; bottom: -18%; width: 95%; height: 58%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(22,150,172,.62), rgba(14,96,120,.22) 60%, transparent);
  filter: blur(18px); animation: kmBeam 9s ease-in-out infinite;
}
.km-orbits i {
  position: absolute; width: var(--r); height: var(--r); border-radius: 50%;
  left: calc(100% - var(--r) * .3); top: calc(var(--r) * -.72);
  box-shadow: inset 0 0 0 1px rgba(130,210,240,.085);
}
.km-orbits i::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from var(--o, 0deg), transparent 0 70%, rgba(150,236,255,.08) 80%, rgba(180,244,255,.5) 93%, #e8fdff 94%, transparent 94.6%);
  -webkit-mask-image: radial-gradient(circle closest-side, transparent calc(100% - 2px), #000 calc(100% - 1.4px), #000 calc(100% - .4px), transparent);
  mask-image: radial-gradient(circle closest-side, transparent calc(100% - 2px), #000 calc(100% - 1.4px), #000 calc(100% - .4px), transparent);
  animation: kmSpin var(--t) linear infinite;
}
.km-orbits i:nth-child(1) { --r: 128vw; --t: 34s; --o: 40deg; }
.km-orbits i:nth-child(2) { --r: 182vw; --t: 52s; --o: 160deg; }
.km-orbits i:nth-child(3) { --r: 246vw; --t: 74s; --o: 280deg; }

.km-grain {
  position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .32; mix-blend-mode: overlay;
  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='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url("%23n")' opacity='.45'/%3E%3C/svg%3E");
}

/* ---------- Матовое стекло ---------- */
/* Анатомия снята с референса, она одна на все экраны:
   1. горячая линия по контуру — голубая слева, фиолетовая справа;
   2. вторая тонкая линия на 5 px внутри — толщина стекла;
   3. свечение идёт от верхней и нижней кромки ВНУТРЬ, снаружи край резкий;
   4. в горячих точках кромки — короткие вспышки;
   5. по кромке время от времени пробегает импульс света. */
.glass {
  --bloom: 12px;
  --flare-t: 26%;
  --flare-b: 63%;
  --edge-t: rgba(112,226,250,.44);
  --edge-b: rgba(92,226,250,.52);
  --spark-t: rgba(242,254,255,.95);
  --haze-t: rgba(90,200,235,.16);
  --edge-r: rgba(128,118,245,.4);
  position: relative; isolation: isolate; overflow: hidden; border: 0; border-radius: 20px;
  background:
    radial-gradient(ellipse 24% 5px at var(--flare-t) 0, var(--spark-t), transparent),
    radial-gradient(ellipse 26% 4px at var(--flare-b) 100%, rgba(186,252,255,.92), transparent),
    linear-gradient(180deg, var(--edge-t), transparent calc(var(--bloom) * .6)),
    linear-gradient(0deg, var(--edge-b), transparent calc(var(--bloom) * .6)),
    linear-gradient(180deg, var(--haze-t), transparent calc(var(--bloom) * 1.8)),
    linear-gradient(0deg, rgba(70,190,230,.18), transparent calc(var(--bloom) * 1.8)),
    linear-gradient(270deg, var(--edge-r), transparent 12%),
    linear-gradient(90deg, rgba(120,200,235,.18), transparent 7%),
    var(--glass);
  outline: 1px solid rgba(165,228,255,.11); outline-offset: -5px;
  -webkit-backdrop-filter: blur(24px) saturate(165%); backdrop-filter: blur(24px) saturate(165%);
  box-shadow: 0 -2px 12px rgba(110,225,250,.17), 0 2px 14px rgba(84,210,245,.22), var(--lift);
}
.glass::before {
  content: ""; position: absolute; z-index: 2; inset: 0; border-radius: inherit; padding: 1.25px; background: var(--neon-ring);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude; pointer-events: none; transition: filter .2s;
}
/* Импульс света: двигается только translate, поэтому не перерисовывает стекло. */
.glass::after {
  content: ""; position: absolute; z-index: 3; top: 0; bottom: 0; left: 0; width: 46%; pointer-events: none;
  background:
    linear-gradient(90deg, transparent, #fff 30%, transparent 60%) 0 0 / 100% 2px no-repeat,
    radial-gradient(ellipse 36% 18px at 30% 0, rgba(205,250,255,.98), rgba(120,235,255,.42) 52%, transparent),
    linear-gradient(90deg, transparent 40%, #eafeff 72%, transparent) 0 100% / 100% 2px no-repeat,
    radial-gradient(ellipse 36% 18px at 72% 100%, rgba(170,245,255,.95), rgba(90,225,250,.4) 52%, transparent);
  translate: -101% 0; opacity: 0;
  animation: kmEdgeRun 8.5s cubic-bezier(.45,.05,.55,.95) infinite;
  animation-delay: calc(var(--i, 0) * .62s + .9s);
}
@keyframes kmEdgeRun {
  0% { translate: -101% 0; opacity: 0; }
  5%, 40% { opacity: 1; }
  46%, 100% { translate: 220% 0; opacity: 0; }
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .glass { background: linear-gradient(177deg, rgba(26,40,70,.92), rgba(16,26,48,.92)); }
}

/* ---------- Каркас ---------- */
.km-app {
  width: min(100%, 430px); margin-inline: auto; min-height: 100vh; min-height: 100dvh;
  display: grid; grid-template-rows: auto minmax(0, 1fr); font-size: 16px; line-height: 1.5;
}
.km-app :is(h1, h2, p, figure, blockquote) { margin: 0; }
button { font: inherit; color: inherit; }
:is(button, a, input, textarea):focus-visible { outline: 2px solid var(--cy); outline-offset: 3px; }

/* Шапка лежит прямо на фоне — ни полосы, ни разделителя. */
.km-top {
  position: sticky; top: 0; z-index: 6; min-height: 56px; display: flex; align-items: center; gap: 10px;
  padding: calc(6px + env(safe-area-inset-top, 0px)) 12px 8px 15px; background: none;
}
/* Подложка появляется только при прокрутке: в покое шапка лежит прямо на фоне,
   а заголовок экрана не должен наезжать на кнопку «Назад». */
.km-top::before {
  content: ""; position: absolute; z-index: -1; inset: 0 0 -16px; pointer-events: none; opacity: 0;
  background: linear-gradient(180deg, rgba(4,30,54,.96) 62%, rgba(4,30,54,0));
  transition: opacity .2s;
}
.km-top.is-stuck::before { opacity: 1; }
/* Логотип — кнопка «на главную», как в большинстве мини-аппов. Зона нажатия
   (::before) больше самого знака — около 44 px в высоту, поэтому знак режем
   не overflow, а clip-path: overflow обрезал бы и зону нажатия. */
.km-brand {
  position: relative; display: block; width: 80px; height: 21px; flex: none; margin: 0; padding: 0; border: 0; border-radius: 6px;
  background: none; color: inherit; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent;
  filter: drop-shadow(0 0 7px rgba(70,220,245,.4));
  transition: filter .25s var(--ease), scale .18s var(--ease);
}
.km-brand::before { content: ""; position: absolute; inset: -12px -10px; }
.km-brand img { position: relative; display: block; width: 161px; height: auto; max-width: none; clip-path: inset(0 81px 0 0); }
.km-brand:hover { filter: drop-shadow(0 0 11px rgba(110,232,255,.75)); }
.km-brand:active { scale: .95; }
.km-brand:focus-visible { outline-offset: 5px; }
.km-close { margin-left: auto; }
.km-top-label {
  margin-left: auto; font-family: var(--display); font-size: 10.5px; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase; color: #dce9f6;
}
/* Малые кнопки и иконки — та же анатомия в миниатюре. */
.km-back {
  display: grid; place-items: center; padding: 0; width: 44px; height: 44px;
  border: 0; border-radius: 14px; color: #bff4fb;
  background:
    linear-gradient(180deg, rgba(200,240,255,.42), rgba(100,180,215,.16) 22%, transparent 48%),
    linear-gradient(0deg, rgba(140,245,255,.46), rgba(50,160,200,.2) 16%, transparent 42%),
    linear-gradient(135deg, rgba(20,86,116,.72), rgba(14,72,100,.72));
  box-shadow: inset 0 0 0 1px rgba(170,232,255,.42), inset 0 1px 0 rgba(235,252,255,.72), inset 0 -1px 0 rgba(170,250,255,.72), 0 0 14px rgba(110,230,255,.2);
  transition: transform .15s var(--ease), box-shadow .15s;
}
.km-back svg { filter: drop-shadow(0 0 4px rgba(130,240,255,.7)); }
.km-back:active { transform: scale(.9); box-shadow: inset 0 0 0 1px rgba(205,246,255,.8), inset 0 1px 0 #effdff, inset 0 -1px 0 #c8fbff, 0 0 26px rgba(120,235,255,.55); }
.km-main { padding: 18px max(16px, env(safe-area-inset-left, 0px)) calc(32px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-right, 0px)); }

/* ---------- Главный экран ---------- */
/* Геометрия и цвета сняты с референса 1126×2000 при ширине экрана 390:
   поля 11, карточка 368×305, скругление 24, кнопка 323×46. */
.km-home { margin: -21px -5px 0; }
/* Оля: видео в стеклянной рамке с неоновой кромкой. За рамкой — HUD-кольца
   с бегущими искрами и пылинки; сверху по углам — реплика и статус (лицо
   остаётся открытым), снизу — кнопка звонка, на которую Оля показывает руками.
   Пока длится жест (1,85–3,95 с ролика), кнопка «нажимается» и светится. */
.km-olya {
  position: relative; display: grid; justify-items: center; padding-top: 58px; overflow-x: clip;
}
.km-olya-stage { position: relative; width: min(74%, 300px); aspect-ratio: 3 / 4; }
/* Тень и ореол рамки лежат отдельно: рамку обрезает clip-path. */
.km-olya-stage::before {
  content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 26px; pointer-events: none;
  box-shadow: 0 0 0 1px rgba(170,238,255,.22), 0 0 36px rgba(90,200,255,.4), 0 28px 54px rgba(0,8,24,.66);
  animation: kmOlyaFade .9s var(--ease) .15s backwards;
}
/* Неоновая кромка: голубая сверху слева, фиолетовая снизу справа. */
.km-olya-stage::after {
  content: ""; position: absolute; inset: 0; z-index: 2; border-radius: 26px; padding: 1.5px; pointer-events: none;
  background: linear-gradient(155deg, #effeff, rgba(127,233,255,.6) 20%, rgba(127,233,255,.12) 52%, rgba(160,145,255,.85));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: kmOlyaFade .9s var(--ease) .35s backwards;
}
.km-olya-frame {
  position: absolute; inset: 0; z-index: 1; margin: 0; overflow: hidden; isolation: isolate; background: #c4e6f2;
  clip-path: inset(0 round 26px);
  animation: kmOlyaIn 1s cubic-bezier(.2, .8, .2, 1) .05s backwards;
}
.km-olya-video { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Стекло: блик сверху и мягкая тень книзу, на которой лежит кнопка. */
.km-olya-frame::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(160deg, rgba(255,255,255,.24), rgba(255,255,255,0) 28%),
    linear-gradient(180deg, rgba(4,22,48,0) 64%, rgba(4,22,48,.42) 100%);
}
/* Блик время от времени пробегает по стеклу. */
.km-olya-sweep {
  position: absolute; inset: -10% -70%; z-index: 3; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(105deg, transparent 43%, rgba(190,245,255,.42) 49%, rgba(255,255,255,.16) 52%, transparent 57%);
  translate: -55% 0; animation: kmOlyaSweep 7.5s ease-in-out 1.8s infinite;
}
@keyframes kmOlyaSweep { 0%, 72% { translate: -55% 0; } 94%, 100% { translate: 55% 0; } }
/* Ореол и HUD-кольца с центром на лице. */
.km-olya-glow {
  position: absolute; z-index: 0; inset: -14% -26%; border-radius: 50%; filter: blur(30px); pointer-events: none;
  background: radial-gradient(ellipse 48% 44% at 50% 42%, rgba(70,200,255,.34), rgba(120,105,255,.13) 56%, transparent 76%);
  animation: kmBreathe 6.4s ease-in-out infinite;
}
.km-olya-rings { position: absolute; z-index: 0; inset: 0; pointer-events: none; }
.km-olya-rings i {
  position: absolute; left: 50%; top: 40%; width: calc(var(--k) * 100%); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(140,225,255,var(--a));
  animation: kmOlyaRingIn 1.1s var(--ease) backwards; animation-delay: var(--in);
}
.km-olya-rings i::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from var(--o), transparent 0 72%, rgba(150,236,255,.1) 82%, rgba(190,246,255,.6) 95%, #f2feff 96%, transparent 96.6%);
  -webkit-mask-image: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px), #000 calc(100% - .5px), transparent);
  mask-image: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px), #000 calc(100% - .5px), transparent);
  animation: kmSpin var(--t) linear infinite var(--dir, normal);
}
.km-olya-rings i:nth-child(1) { --k: 1.32; --a: .2; --t: 13s; --o: 30deg; --in: .25s; }
.km-olya-rings i:nth-child(2) {
  --k: 1.68; --a: 0; --t: 46s; --o: 200deg; --in: .4s; --dir: reverse;
  background: repeating-conic-gradient(rgba(140,225,255,.3) 0 1.6deg, transparent 1.6deg 6deg);
  -webkit-mask-image: radial-gradient(farthest-side, transparent calc(100% - 1.5px), #000 calc(100% - 1px));
  mask-image: radial-gradient(farthest-side, transparent calc(100% - 1.5px), #000 calc(100% - 1px));
}
.km-olya-rings i:nth-child(2)::after { display: none; }
.km-olya-rings i:nth-child(2) { animation: kmOlyaRingIn 1.1s var(--ease) .4s backwards, kmSpin 46s linear 1.5s infinite reverse; }
.km-olya-rings i:nth-child(3) { --k: 2.08; --a: .09; --t: 24s; --o: 120deg; --in: .55s; }
@keyframes kmOlyaRingIn { from { opacity: 0; scale: .8; } }
/* Пылинки поднимаются по сторонам рамки. */
.km-olya-dust { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.km-olya-dust i {
  position: absolute; left: var(--x); top: var(--y); width: 3px; height: 3px; border-radius: 50%; opacity: 0;
  background: #e8fdff; box-shadow: 0 0 6px 1px rgba(140,230,255,.8);
  animation: kmOlyaDust var(--t) ease-in-out var(--d) infinite;
}
@keyframes kmOlyaDust { 0% { opacity: 0; translate: 0 10px; } 30% { opacity: .9; } 70% { opacity: .5; } 100% { opacity: 0; translate: 6px -46px; } }
/* Реплика Оли — слева сверху, хвостик смотрит на неё. */
.km-olya-bubble {
  position: absolute; z-index: 3; left: -17%; bottom: calc(100% - 36px);
  display: flex; align-items: center; gap: 9px; max-width: 172px; margin: 0; padding: 10px 13px 10px 11px;
  border-radius: 18px 18px 6px 18px;
  font-size: 12.5px; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; color: #fff;
  background:
    linear-gradient(180deg, rgba(255,255,255,.2), rgba(255,255,255,0) 50%),
    linear-gradient(135deg, #3592ff, #1f66ea 58%, #4256de);
  box-shadow: inset 0 0 0 1px rgba(170,238,255,.55), inset 0 1px 0 rgba(240,253,255,.6), 0 0 22px rgba(70,170,255,.42), 0 12px 26px rgba(0,10,40,.45);
  transform-origin: 88% 100%;
  animation: kmOlyaPop .75s cubic-bezier(.2, .9, .25, 1.25) .55s backwards, kmOlyaBob 6s ease-in-out 1.4s infinite;
}
.km-olya-eq { display: flex; align-items: center; gap: 2.5px; flex: none; height: 20px; }
.km-olya-eq i, .km-olya-wave i {
  display: block; width: 2.5px; height: calc(var(--h) * 1px); border-radius: 2px;
  background: linear-gradient(180deg, #fff, #a6f4ff); box-shadow: 0 0 6px rgba(160,240,255,.8);
  animation: kmSpeak var(--t) ease-in-out infinite; animation-delay: var(--o);
}
@keyframes kmOlyaPop { from { opacity: 0; scale: .5; } 60% { opacity: 1; } }
@keyframes kmOlyaBob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -4px; } }
/* Статус — справа сверху, точка «в сети» расходится кругами. */
.km-olya-status {
  position: absolute; z-index: 3; right: -14%; bottom: calc(100% - 22px);
  display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 8px 13px 8px 11px; border-radius: 999px; white-space: nowrap;
  font-size: 12.5px; font-weight: 700; letter-spacing: -.01em; color: #eafcff;
  background: linear-gradient(180deg, rgba(16,44,78,.84), rgba(8,26,52,.88));
  box-shadow: inset 0 0 0 1px rgba(150,230,255,.3), inset 0 1px 0 rgba(220,250,255,.25), 0 0 18px rgba(80,210,255,.2), 0 10px 22px rgba(0,8,24,.5);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  animation: kmOlyaSlide .6s cubic-bezier(.2, .9, .25, 1.1) .75s backwards;
}
.km-olya-status i { position: relative; flex: none; width: 8px; height: 8px; border-radius: 50%; background: #3ff0a8; box-shadow: 0 0 8px rgba(63,240,168,.9); }
.km-olya-status i::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(63,240,168,.75); animation: kmOlyaPing 2.2s ease-out infinite; }
@keyframes kmOlyaPing { from { scale: .45; opacity: 1; } to { scale: 1.7; opacity: 0; } }
@keyframes kmOlyaSlide { from { opacity: 0; translate: 24px 0; } }
/* Кнопка звонка лежит под пальцами Оли, с наклоном, как в референсе. */
.km-olya-cta-wrap {
  position: relative; z-index: 4; width: min(94%, 360px); margin-top: -40px; rotate: -3deg;
  animation: kmOlyaCtaIn .8s cubic-bezier(.2, .85, .25, 1.1) .9s backwards;
}
@keyframes kmOlyaCtaIn { from { opacity: 0; translate: 0 24px; filter: blur(6px); } }
.km-olya-cta {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 11px;
  width: 100%; min-height: 62px; padding: 8px; border: 0; border-radius: 20px; cursor: pointer; text-align: left; color: #fff; font: inherit;
  background:
    linear-gradient(180deg, rgba(255,255,255,.24), rgba(255,255,255,0) 46%),
    linear-gradient(100deg, #2d8bff 0%, #1e64ea 52%, #3f50dc 100%);
  box-shadow: inset 0 0 0 1px rgba(170,238,255,.6), inset 0 1px 0 rgba(240,253,255,.75), inset 0 -10px 18px rgba(24,40,150,.35),
    0 0 24px rgba(60,160,255,.5), 0 16px 30px rgba(0,8,32,.55);
  transition: box-shadow .4s var(--ease), scale .18s var(--ease);
}
.km-olya-cta:active { scale: .97; }
.km-olya.is-pointing .km-olya-cta {
  animation: kmOlyaPress 2s ease-in-out;
  box-shadow: inset 0 0 0 1px rgba(200,246,255,.85), inset 0 1px 0 #f2feff, inset 0 -10px 18px rgba(24,40,150,.3),
    0 0 40px rgba(90,190,255,.8), 0 16px 30px rgba(0,8,32,.55);
}
/* Два «нажатия» пальцами, затем кнопка успокаивается. */
@keyframes kmOlyaPress {
  0%, 100% { translate: 0 0; scale: 1; }
  12% { translate: 0 3px; scale: .985; }
  26% { translate: 0 0; scale: 1.015; }
  42% { translate: 0 2.5px; scale: .99; }
  58% { translate: 0 0; scale: 1.008; }
  72% { scale: 1; }
}
.km-olya-wave {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,.08));
  box-shadow: inset 0 0 0 1px rgba(214,246,255,.4), inset 0 1px 0 rgba(255,255,255,.45);
}
.km-olya-wave > span { display: flex; align-items: center; gap: 3px; height: 22px; }
.km-olya-cta-text { display: grid; min-width: 0; }
.km-olya-cta strong { font-family: var(--display); font-size: clamp(15px, 4.4vw, 17.5px); font-weight: 800; line-height: 1.15; letter-spacing: -.025em; text-shadow: 0 1px 8px rgba(0,20,80,.35); }
.km-olya-cta small { margin-top: 3px; font-size: 12.5px; font-weight: 500; line-height: 1.2; color: #d8e9ff; }
.km-olya-call {
  position: relative; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 15px; color: #053456;
  background: var(--jelly);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.75), inset 0 -3px 6px rgba(20,150,190,.35), 0 0 16px rgba(130,240,255,.65);
}
.km-olya-call svg { width: 22px; height: 22px; stroke-width: 2.3; animation: kmOlyaRing 3s ease-in-out infinite; }
.km-olya-call::before, .km-olya-call::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 0 1.5px rgba(170,246,255,.85); animation: kmOlyaWave 3s ease-out infinite;
}
.km-olya-call::after { animation-delay: .45s; }
.km-olya.is-pointing .km-olya-call::before, .km-olya.is-pointing .km-olya-call::after { animation-duration: 1.2s; }
@keyframes kmOlyaWave { 0% { opacity: .9; scale: 1; } 60%, 100% { opacity: 0; scale: 1.5; } }
@keyframes kmOlyaRing { 0%, 62%, 100% { rotate: 0deg; } 66% { rotate: -14deg; } 70% { rotate: 12deg; } 74% { rotate: -10deg; } 78% { rotate: 7deg; } 82% { rotate: 0deg; } }
@keyframes kmOlyaIn { from { opacity: 0; clip-path: inset(14% 10% 14% 10% round 60px); } to { opacity: 1; clip-path: inset(0 round 26px); } }
@keyframes kmOlyaFade { from { opacity: 0; } }
/* Узкие экраны: реплика и статус компактнее, чтобы не сталкивались. */
@media (max-width: 374px) {
  .km-olya-bubble { max-width: 134px; padding: 9px 11px; font-size: 11.5px; }
  .km-olya-eq { display: none; }
  .km-olya-status { padding: 7px 10px 7px 9px; gap: 7px; font-size: 11px; }
  .km-olya-cta-wrap { width: 100%; }
  .km-olya-cta { gap: 9px; padding: 7px; }
  .km-olya-wave { width: 38px; height: 38px; border-radius: 12px; }
  .km-olya-call { width: 42px; height: 42px; border-radius: 13px; }
  .km-olya-cta small { font-size: 11px; white-space: nowrap; }
}
/* Общие ключевые кадры (раньше жили в блоке шара). */
@keyframes kmBreathe { 0%, 100% { opacity: .72; scale: .98; } 50% { opacity: 1; scale: 1.07; } }
@keyframes kmSpeak {
  0%, 100% { scale: 1 .66; }
  24% { scale: 1 1.14; }
  46% { scale: 1 .8; }
  72% { scale: 1 1.26; }
}
.km-home-links { display: grid; gap: 10px; margin-top: 15px; }

/* ---------- Строки ---------- */
.km-row {
  --bloom: 11px;
  --flare-t: 16%;
  --flare-b: 62%;
  display: grid; grid-template-columns: 42px minmax(0, 1fr) 8px; align-items: center; gap: 12px; text-align: left;
  width: 100%; min-height: 62px; padding: 9px 16px 9px 17px; border-radius: 15px; color: #fff;
  transition: transform .16s var(--ease), box-shadow .18s;
}
.km-row strong { display: block; font-size: clamp(13.2px, 3.66vw, 15px); font-weight: 800; line-height: 1.26; letter-spacing: -.042em; }
.km-row small { display: block; margin-top: 2px; color: var(--ink-dim); font-size: 12.7px; line-height: 1.28; letter-spacing: -.024em; }
.km-icon {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; color: #a8f6fa;
  background:
    linear-gradient(180deg, rgba(200,240,255,.5), rgba(100,180,215,.2) 20%, transparent 46%),
    linear-gradient(0deg, rgba(140,245,255,.55), rgba(50,160,200,.24) 16%, transparent 40%),
    linear-gradient(135deg, rgba(20,86,116,.76), rgba(14,72,100,.76));
  box-shadow: inset 0 0 0 1px rgba(170,232,255,.42), inset 0 1px 0 rgba(235,252,255,.78), inset 0 -1px 0 rgba(170,250,255,.82), 0 0 14px rgba(110,230,255,.22);
}
.km-icon svg { width: 22px; height: 22px; filter: drop-shadow(0 0 4px rgba(120,240,255,.75)); }
.km-arrow { display: grid; place-items: center; color: #aeeffa; }
.km-arrow svg { width: 17px; height: 17px; stroke-width: 2.4; filter: drop-shadow(0 0 4px rgba(130,240,255,.7)); }

/* ---------- Заголовки ---------- */
.km-heading { padding: 2px 2px 20px; }
.km-overline {
  display: block; font-family: var(--display); font-size: 13px; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase; color: #93ecf8; text-shadow: 0 0 12px rgba(110,235,255,.5);
}
.km-heading h1 {
  margin: 11px 0 9px; font-family: var(--display); font-size: clamp(25px, 7.6vw, 33px); font-weight: 800;
  line-height: 1.1; letter-spacing: -.04em; text-wrap: balance; color: #fff;
  text-shadow: 0 0 20px rgba(175,236,255,.42);
}
.km-heading p { color: #bcd6ea; font-size: 16px; letter-spacing: -.02em; }
/* Крупный заголовок экрана отраслей: штрих перед надзаголовком, вторая строка —
   бирюзовый градиент, по которому медленно проходит блик. */
.km-heading--xl { padding-bottom: 24px; }
.km-heading--xl .km-overline { display: flex; align-items: center; gap: 12px; font-size: 12px; letter-spacing: .2em; color: #8fe3f2; }
.km-heading--xl .km-overline::before {
  content: ""; flex: none; width: 22px; height: 2px; border-radius: 2px; transform-origin: 0 50%;
  background: linear-gradient(90deg, #7fe9ff, #36c4e6); box-shadow: 0 0 8px rgba(127,233,255,.8);
  animation: kmDash .7s var(--ease) .1s backwards;
}
@keyframes kmDash { from { transform: scaleX(0); } }
.km-heading--xl h1 {
  margin: 14px 0 12px; font-size: clamp(36px, 11vw, 46px); line-height: .98; letter-spacing: -.045em;
  text-shadow: 0 0 24px rgba(175,236,255,.26);
}
.km-accent {
  display: block; padding-bottom: .07em; text-shadow: none; color: transparent;
  background: linear-gradient(100deg, #cbf8ff 0%, #74e4f6 28%, #27bfe4 52%, #84ecfb 74%, #dafbff 100%) 0 0 / 260% 100%;
  -webkit-background-clip: text; background-clip: text;
  filter: blur(0) drop-shadow(0 0 16px rgba(70,212,245,.32));
  animation: kmAccentIn .9s var(--ease) .18s backwards, kmShimmer 7s ease-in-out 1.4s infinite;
}
@keyframes kmAccentIn { from { opacity: 0; translate: 0 14px; filter: blur(10px) drop-shadow(0 0 16px rgba(70,212,245,0)); } }
@keyframes kmShimmer { 0%, 100% { background-position: 0% 0; } 50% { background-position: 100% 0; } }
.km-heading--xl p { max-width: 17.5em; color: #8fa9c4; font-size: 16px; line-height: 1.45; }

/* ---------- Сегменты ---------- */
/* Отрасли: стеклянный шар, подпись под ним. */
/* Три шара в ряд, последний неполный ряд — по центру (сетка из 6 долей, шар занимает 2). */
.km-grid {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 26px 0;
  width: 100%; margin-inline: auto; padding-top: 4px;
}
.km-sector {
  grid-column: span 2; display: grid; justify-items: center; align-content: start; gap: 11px; width: 100%; padding: 0; border: 0; background: none;
  text-align: center; color: #fff; cursor: pointer; transition: transform .25s var(--ease);
}
.km-sector:nth-child(3n+1):nth-last-child(2) { grid-column: 2 / span 2; }
/* Появление: шары всплывают диагональной волной из глубины, затем подписи. */
.km-grid > .km-sector { animation: kmSectorIn .8s cubic-bezier(.2,.9,.24,1.12) backwards; animation-delay: calc(.12s + var(--d, 0) * 85ms); }
@keyframes kmSectorIn {
  0% { opacity: 0; transform: translateY(24px) scale(.6); filter: blur(10px); }
  55% { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: none; filter: blur(0); }
}
/* Пузырь. Все радиальные градиенты обязаны быть closest-side: иначе 100%
   уходит в угол квадрата (1,41R) и вся кромка оказывается за краем круга —
   на экране от неё остаётся только широкая серая заливка. */
/* Замеры оригинала (R = 138 px): фото до 0,82R, оболочка 0,82–1,0R,
   светлая кромка всего 0,98–1,0R, наверху #77a1c3, внизу #0e4464. */
.km-ball {
  position: relative; isolation: isolate; display: block; width: 84%; aspect-ratio: 1;
  border-radius: 50%; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(170,236,255,.16), 0 0 26px rgba(90,205,255,.3), 0 14px 28px rgba(0,8,20,.6);
  animation: kmBallFloat 5.6s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * -.72s);
  transition: box-shadow .24s, scale .2s var(--ease);
}
@keyframes kmBallFloat { 0%, 100% { translate: 0 -4px; } 50% { translate: 0 5px; } }
/* Фото занимает 82% шара и медленно «дышит» — стекло работает как линза. */
.km-ball img {
  position: absolute; z-index: 0; inset: 4.5%; width: 91%; height: 91%; border-radius: 50%;
  object-fit: cover; object-position: center 42%; filter: saturate(1.06) brightness(1.06);
  -webkit-mask-image: radial-gradient(circle closest-side, #000 0 84%, rgba(0,0,0,.5) 95%, transparent 100%);
  mask-image: radial-gradient(circle closest-side, #000 0 84%, rgba(0,0,0,.5) 95%, transparent 100%);
  animation: kmLens 9s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * -1.1s);
}
@keyframes kmLens { 0%, 100% { scale: 1; } 50% { scale: 1.045; } }
/* Оболочка: сверху ловит свет, снизу уходит в тень. Она прозрачная —
   это стекло над фоном, а не кольцо поверх него. */
.km-ball::before {
  content: ""; position: absolute; z-index: 1; inset: 0; border-radius: 50%; pointer-events: none;
  background: linear-gradient(176deg,
    rgba(208,236,255,.58) 0%, rgba(158,200,233,.28) 36%,
    rgba(76,136,180,.16) 64%, rgba(104,160,200,.22) 100%);
  -webkit-mask-image: radial-gradient(circle closest-side, transparent 0 86%, #000 94% 100%);
  mask-image: radial-gradient(circle closest-side, transparent 0 86%, #000 94% 100%);
}
/* Блик сверху и бирюзовый полумесяц снизу плывут по стеклу. */
.km-glass {
  position: absolute; z-index: 2; inset: 0; border-radius: 50%; pointer-events: none;
  background:
    radial-gradient(ellipse 24% 13% at 29% 13%, rgba(255,255,255,.95), transparent 72%),
    radial-gradient(ellipse 40% 26% at 33% 19%, rgba(214,242,255,.3), transparent 70%),
    radial-gradient(ellipse 22% 12% at 70% 89%, rgba(148,248,255,.85), transparent 72%);
  mix-blend-mode: screen;
  animation: kmSway 11s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * -1.6s);
}
/* Кромка — тонкая линия в 2% радиуса, по диагонали вспыхивает бирюзой. */
.km-ball::after {
  content: ""; position: absolute; z-index: 3; inset: 0; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 198deg,
    rgba(228,251,255,1), rgba(150,198,230,.62) 52deg,
    rgba(170,255,255,1) 168deg, rgba(150,198,230,.62) 244deg, rgba(228,251,255,1) 360deg);
  -webkit-mask-image: radial-gradient(circle closest-side, transparent 0 95%, #000 97.6% 100%);
  mask-image: radial-gradient(circle closest-side, transparent 0 95%, #000 97.6% 100%);
  transition: filter .24s;
  animation: kmSpin 14s linear infinite;
  animation-delay: calc(var(--i, 0) * -1.9s);
}
@keyframes kmSpin { to { rotate: 360deg; } }
@keyframes kmSway { 0%, 100% { rotate: -9deg; } 50% { rotate: 9deg; } }
.km-sector-name {
  margin-inline: -6px; font-size: clamp(13px, 3.75vw, 15px); font-weight: 700; line-height: 1.22; letter-spacing: -.02em; text-wrap: balance;
  color: #f2f8ff; transition: color .25s; animation: kmNameIn .55s var(--ease) backwards; animation-delay: calc(.42s + var(--d, 0) * 85ms);
}
@keyframes kmNameIn { from { opacity: 0; translate: 0 6px; } }
@media (max-width: 389px) { .km-sector-name { margin-inline: 0; } }
/* Искра один раз обегает кромку, когда шар появляется. */
.km-spark {
  position: absolute; z-index: 4; inset: 0; border-radius: 50%; pointer-events: none; opacity: 0;
  background: conic-gradient(from 0deg, transparent 0 60%, rgba(150,240,255,.35) 80%, #fff 97%, transparent 100%);
  -webkit-mask-image: radial-gradient(circle closest-side, transparent 0 90%, #000 96% 100%);
  mask-image: radial-gradient(circle closest-side, transparent 0 90%, #000 96% 100%);
  animation: kmIgnite 1.2s cubic-bezier(.3,.6,.3,1) backwards; animation-delay: calc(.3s + var(--d, 0) * 85ms);
}
@keyframes kmIgnite { 0% { opacity: 0; rotate: -90deg; } 15%, 78% { opacity: 1; } 100% { opacity: 0; rotate: 270deg; } }
/* Блик время от времени проходит по стеклу наискосок — у каждого шара в свой момент. */
.km-glass::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: linear-gradient(115deg, transparent 36%, rgba(255,255,255,.45) 47%, rgba(190,245,255,.16) 53%, transparent 62%);
  translate: -125% 0; animation: kmGlint 7.5s ease-in-out infinite; animation-delay: calc(2.2s + var(--i, 0) * .85s);
}
@keyframes kmGlint { 0%, 74% { translate: -125% 0; } 92%, 100% { translate: 125% 0; } }
.km-sector:active .km-ball {
  scale: .94;
  box-shadow: 0 0 48px rgba(126,226,255,.62), 0 8px 20px rgba(2,10,26,.5);
}
.km-sector:active .km-ball::after { filter: brightness(1.8) saturate(1.15); }
/* ---------- Панели и кнопки ---------- */
.km-list, .km-form { display: grid; gap: 12px; }
.km-panel { --edge-r: rgba(128,118,245,.24); padding: 18px; border-radius: 20px; }
.km-panel h2 { font-family: var(--display); font-size: 14px; font-weight: 600; letter-spacing: -.01em; margin-bottom: 8px; }
.km-panel p { color: var(--ink-dim); font-size: 15px; }
/* Кнопка — густое стекло: белая полка сверху, бирюзовое тело, двойная
   кромка снизу и вторая линия внутри контура. */
.km-primary {
  position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: 12px;
  width: 100%; min-height: 52px; padding: 13px 18px; border: 0; border-radius: 999px; color: var(--jelly-ink);
  background:
    radial-gradient(ellipse 22% 7px at 15% 0, #fff, transparent),
    radial-gradient(ellipse 24% 5px at 78% 100%, #effeff, transparent),
    var(--jelly);
  outline: 1px solid rgba(240,255,255,.34); outline-offset: -4px;
  box-shadow: 0 0 0 1px rgba(205,250,255,.85), 0 -3px 16px rgba(120,235,255,.5), 0 6px 26px rgba(60,214,240,.38);
  font-size: 16px; font-weight: 800; letter-spacing: -.015em;
  transition: transform .16s var(--ease), box-shadow .18s, filter .18s;
}
.km-primary::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 42%; left: -60%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.6), transparent);
  animation: kmSweep 4.2s ease-in-out infinite; pointer-events: none;
}
@keyframes kmSweep { 0%, 62% { left: -60%; } 92%, 100% { left: 120%; } }
.km-primary--danger {
  background:
    radial-gradient(ellipse 22% 7px at 15% 0, #fff, transparent),
    linear-gradient(180deg, #fff1f2 0%, #ffc0c7 8%, #ff8d98 18%, #f4606f 46%, #ee4f61 74%, #ff8390 91%, #ffc6cc 100%);
  color: #fff; outline-color: rgba(255,235,238,.5); text-shadow: 0 1px 2px rgba(120,10,30,.5);
  box-shadow: 0 0 0 1px rgba(255,205,212,.8), 0 -3px 16px rgba(255,120,135,.42), 0 6px 26px rgba(255,80,100,.34);
}
.km-primary--danger::after { background: linear-gradient(100deg, transparent, rgba(255,255,255,.32), transparent); }
.km-primary svg { width: 21px; height: 21px; stroke-width: 2.3; }
.km-help { color: var(--ink-dim); text-align: center; font-size: 13px; }

:is(.km-row, .km-primary, .km-plans button):active { transform: scale(.975); }
.km-row:active::before { filter: brightness(1.4); }
.km-primary:active { box-shadow: 0 0 0 1px rgba(225,252,255,.95), 0 0 30px rgba(120,235,255,.75); filter: brightness(1.08); }
@media (hover: hover) {
  .km-row:hover { box-shadow: 0 -2px 18px rgba(110,225,250,.34), 0 4px 22px rgba(84,210,245,.4), var(--lift); }
  .km-row:hover::before { filter: brightness(1.2); }
  .km-sector:hover { transform: translateY(-3px); }
  .km-sector:hover .km-sector-name { color: #bff6ff; }
  .km-sector:hover .km-ball { box-shadow: 0 0 0 1px rgba(200,245,255,.4), 0 0 40px rgba(110,225,255,.55), 0 18px 34px rgba(0,8,20,.6); }
  .km-sector:hover .km-ball::after { filter: brightness(1.45) saturate(1.1); }
  .km-primary:hover { filter: brightness(1.07); }
}

/* ---------- Жизнь кнопок ---------- */
/* Волна от точки касания. */
.km-row, .km-ball { overflow: hidden; }
.km-ripple {
  position: absolute; z-index: 4; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, var(--ripple, rgba(170,240,255,.5)), transparent 68%);
  animation: kmRipple .62s var(--ease) forwards;
}
@keyframes kmRipple { from { opacity: .8; scale: 0; } to { opacity: 0; scale: 1; } }
.km-primary { --ripple: rgba(4,46,70,.3); }
.km-primary--danger { --ripple: rgba(255,255,255,.45); }

/* Иконка и шеврон отвечают на нажатие. */
.km-row .km-icon { transition: scale .22s var(--ease), box-shadow .24s; }
.km-row .km-arrow { transition: translate .22s var(--ease), color .24s; }
.km-row:active .km-icon {
  scale: .9;
  box-shadow: inset 0 0 0 1px rgba(190,244,255,.6), inset 0 1px 0 rgba(236,253,255,.6), 0 0 26px rgba(127,233,255,.42);
}
.km-row:active .km-arrow { translate: 4px 0; color: #dffaff; }
@media (hover: hover) {
  .km-row:hover .km-arrow { translate: 4px 0; }
  .km-row:hover .km-icon { box-shadow: inset 0 0 0 1px rgba(168,232,255,.5), inset 0 1px 0 rgba(224,250,255,.5), 0 0 22px rgba(127,233,255,.3); }
}
.km-back :is(i, svg) { transition: translate .2s var(--ease); }
.km-back:active :is(i, svg) { translate: -3px 0; }
.km-plans button { transition: color .24s, scale .18s var(--ease); }


@keyframes kmRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.km-heading { animation: kmRise .38s var(--ease) both; }
:is(.km-list, .km-grid, .km-home-links, .km-form) > * { animation: kmRise .4s var(--ease) both; animation-delay: calc(var(--i, 0) * 48ms); }

/* ---------- Экран тестирования робота ---------- */
/* Фото отрасли раскрывается кругом из того места, где был шар, и остаётся
   под содержимым экрана. Центр и радиусы задаёт скрипт в момент перехода. */
.km-test-photo.is-revealing { animation: kmReveal .76s cubic-bezier(.2, .8, .22, 1) backwards; }
.km-test-photo.is-revealing img { animation: kmRevealZoom .9s cubic-bezier(.2, .8, .22, 1) both, kmDrift 24s ease-in-out .9s infinite alternate; }
@keyframes kmReveal {
  from { clip-path: circle(var(--hr) at var(--hx) var(--hy)); }
  to { clip-path: circle(var(--hend) at var(--hx) var(--hy)); }
}
@keyframes kmRevealZoom { from { scale: 1.34; translate: 2% -1%; } to { scale: 1.1; translate: 2% -1%; } }
/* Композиция из макета: фото отрасли под заголовком, слева шар-собеседник,
   справа живые субтитры, снизу пульт сценариев. Шар и пульт — одно и то же
   управление: состояние звонка видно в обоих местах одновременно. */
.km-app { position: relative; isolation: isolate; }
.km-test { display: grid; }
/* Фото отрасли — заметный фон экрана: светлое, в ледяном голубом тоне, видно
   сквозь HUD-стекло субтитров и уходит в тёмный фон под пультом сценариев.
   Тон даёт умножение на светло-голубой (белое становится ледяным, а не серым).
   Затемнение — только там, где лежит текст: полоса под кнопками шапки и
   мягкое пятно под заголовком. */
.km-test-photo {
  position: absolute; z-index: -1; top: 0; left: 0; right: 0; height: min(88vh, 720px);
  overflow: hidden; pointer-events: none; background: #c4def6;
  -webkit-mask-image: linear-gradient(180deg, #000 0 56%, transparent 97%);
  mask-image: linear-gradient(180deg, #000 0 56%, transparent 97%);
}
.km-test-photo img {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 64% 40%;
  filter: contrast(1.08) brightness(.96) saturate(1.08);
  mix-blend-mode: multiply;
  transform-origin: 68% 38%;
  animation: kmDrift 24s ease-in-out infinite alternate;
}
.km-test-photo::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(4,20,40,.52) 0, rgba(4,20,40,0) 13%),
    radial-gradient(ellipse 100% 23% at 0% 19%, rgba(4,22,44,.74), rgba(4,22,44,.48) 50%, rgba(4,22,44,0) 100%),
    linear-gradient(180deg, rgba(5,30,56,0) 34%, rgba(5,30,56,.4) 60%, rgba(4,26,48,.9) 100%);
}
/* Потолочный световой штрих из макета. */
.km-test-photo::before {
  content: ""; position: absolute; z-index: 1; top: 6%; right: -6%; width: 62%; height: 2px; rotate: -17deg;
  background: linear-gradient(90deg, transparent, rgba(225,250,255,.9) 60%, transparent);
  filter: blur(.6px); box-shadow: 0 0 14px rgba(150,235,255,.6);
}
@keyframes kmDrift { from { scale: 1.1; translate: 2% -1%; } to { scale: 1.02; translate: -2% 1%; } }

.km-test-head { padding: 12px 2px 0; }
.km-test-head h1 {
  font-family: var(--display); font-size: clamp(22px, 6.8vw, 30px); font-weight: 800; line-height: 1.08;
  letter-spacing: -.035em; text-wrap: balance; color: #fff;
  text-shadow: 0 2px 20px rgba(0,12,28,.7), 0 0 24px rgba(175,236,255,.28);
}
.km-test-head p {
  margin-top: 7px; color: #eaf4fb; font-size: 17px; font-weight: 500; letter-spacing: -.01em;
  text-shadow: 0 1px 2px rgba(0,10,24,.75), 0 1px 14px rgba(0,12,28,.8);
}
.km-test-head p.is-swapping { animation: kmSwap .42s var(--ease); }
.km-test-sub { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 7px; }
.km-test-sub p { margin-top: 0; min-width: 0; }
/* Кнопка подсказок: стеклянная пилюля с лампой. Пока её не открывали — мягко зовёт. */
.km-tips-btn {
  position: relative; flex: none; display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 13px 0 10px;
  border: 0; border-radius: 999px; cursor: pointer; color: #eafcff; font-size: 13px; font-weight: 800; letter-spacing: -.01em;
  background: linear-gradient(180deg, rgba(150,236,255,.3), rgba(60,140,200,.22));
  box-shadow: inset 0 0 0 1px rgba(170,238,255,.6), inset 0 1px 0 rgba(240,253,255,.75), 0 0 16px rgba(110,228,255,.22);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: transform .16s var(--ease), box-shadow .25s;
}
.km-tips-btn svg { width: 17px; height: 17px; color: #ffe39a; filter: drop-shadow(0 0 5px rgba(255,214,120,.75)); }
.km-tips-btn::after { content: ""; position: absolute; inset: -4px; border-radius: inherit; }
.km-tips-btn:active { transform: scale(.94); }
.km-tips-btn.is-new { animation: kmTipsCall 2.6s ease-in-out infinite; }
.km-tips-btn.is-new::before {
  content: ""; position: absolute; top: -2px; right: -1px; width: 9px; height: 9px; border-radius: 50%;
  background: #ffd27a; box-shadow: 0 0 0 2px rgba(7,32,58,.9), 0 0 10px rgba(255,210,122,.9);
}
@keyframes kmTipsCall {
  0%, 100% { box-shadow: inset 0 0 0 1px rgba(170,238,255,.6), inset 0 1px 0 rgba(240,253,255,.75), 0 0 14px rgba(110,228,255,.2); }
  50% { box-shadow: inset 0 0 0 1px #d9fbff, inset 0 1px 0 #fff, 0 0 26px rgba(255,214,120,.45); }
}
@media (hover: hover) { .km-tips-btn:hover { box-shadow: inset 0 0 0 1px #d9fbff, inset 0 1px 0 #fff, 0 0 24px rgba(110,228,255,.4); } }

.km-tips { position: fixed; inset: 0; z-index: 30; display: grid; align-items: end; }
.km-tips-scrim {
  position: absolute; inset: 0; border: 0; padding: 0; cursor: default; opacity: 0;
  background: radial-gradient(120% 70% at 50% 100%, rgba(4,22,44,.55), rgba(2,10,24,.78));
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); transition: opacity .3s var(--ease);
}
.km-tips-sheet {
  --bloom: 14px; --flare-t: 26%;
  position: relative; width: min(100%, 430px); max-height: calc(100vh - 28px); max-height: calc(100dvh - 28px); margin-inline: auto; overflow-y: auto; overscroll-behavior: contain;
  padding: 10px max(18px, env(safe-area-inset-right, 0px)) calc(18px + env(safe-area-inset-bottom, 0px)) max(18px, env(safe-area-inset-left, 0px));
  border-radius: 28px 28px 0 0; translate: 0 104%; transition: translate .42s cubic-bezier(.2,.85,.25,1);
}
.km-tips.is-open .km-tips-scrim { opacity: 1; }
.km-tips.is-open .km-tips-sheet { translate: 0 0; }
.km-tips-grip { display: block; width: 42px; height: 4px; margin: 0 auto 12px; border-radius: 4px; background: rgba(205,240,255,.45); }
.km-tips-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 12px; margin-bottom: 14px; }
.km-tips-eyebrow {
  display: inline-flex; align-items: center; gap: 6px; margin-bottom: 4px;
  font-family: var(--display); font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #ffe39a;
}
.km-tips-eyebrow svg { width: 15px; height: 15px; filter: drop-shadow(0 0 5px rgba(255,214,120,.7)); }
.km-tips-head h2 { font-family: var(--display); font-size: 21px; font-weight: 800; line-height: 1.15; letter-spacing: -.035em; color: #fff; text-wrap: balance; outline: none; }
.km-tips-steps { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.km-tips-steps > li {
  display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 11px; padding: 13px 13px 13px 11px; border-radius: 18px;
  background: linear-gradient(180deg, rgba(120,228,250,.16), rgba(20,60,96,.3));
  box-shadow: inset 0 0 0 1px rgba(150,225,255,.26), inset 0 1px 0 rgba(236,252,255,.35);
}
.km-tips.is-open .km-tips-steps > li { animation: kmRise .42s var(--ease) backwards; animation-delay: calc(.16s + var(--i, 0) * 70ms); }
.km-tips-num {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  font-family: var(--mono); font-size: 12px; font-weight: 700; color: #06253f; background: linear-gradient(180deg, #e9fdff, #7fe9ff);
  box-shadow: 0 0 12px rgba(127,233,255,.55);
}
.km-tips-steps h3 { margin: 2px 0 5px; font-family: var(--display); font-size: 14px; font-weight: 800; letter-spacing: -.02em; color: #fff; }
.km-tips-steps p { margin: 0; color: #d5e9f6; font-size: 14px; line-height: 1.42; }
.km-tips-role { color: #fff !important; font-weight: 700; margin-bottom: 3px !important; }
.km-tips-note { color: #a9c6dc !important; font-size: 12.5px !important; margin-bottom: 6px !important; }
.km-tips-steps blockquote {
  margin: 0; padding: 9px 12px; border-radius: 13px; color: #fff; font-size: 15px; font-weight: 600; line-height: 1.38;
  background: linear-gradient(90deg, rgba(127,233,255,.2), rgba(155,140,255,.14)); box-shadow: inset 2px 0 0 #7fe9ff;
}
.km-tips-chips { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.km-tips-chips li {
  position: relative; padding: 7px 11px 7px 26px; border-radius: 12px; color: #e6f5ff; font-size: 13.5px; line-height: 1.35;
  background: rgba(10,40,70,.45); box-shadow: inset 0 0 0 1px rgba(150,225,255,.2);
}
.km-tips-chips li::before { content: "?"; position: absolute; left: 9px; top: 7px; color: var(--cy); font-family: var(--mono); font-weight: 700; }
/* Данные профиля для живого звонка: номер заказа, имя, адрес — подпись слева, значение справа. */
.km-tips-facts { display: grid; gap: 6px; margin: 0; }
.km-tips-facts div {
  display: grid; grid-template-columns: minmax(0, 38%) minmax(0, 1fr); gap: 10px; padding: 7px 11px; border-radius: 12px;
  background: rgba(10,40,70,.45); box-shadow: inset 0 0 0 1px rgba(150,225,255,.2);
}
.km-tips-facts dt { color: #a9c6dc; font-size: 12.5px; line-height: 1.35; }
.km-tips-facts dd { margin: 0; color: #fff; font-size: 13.5px; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.km-tips-foot { margin: 0 2px 12px; padding-top: 22px; color: #a9c6dc; font-size: 12.5px; text-align: center; text-wrap: balance; }
.km-tips .km-primary { width: 100%; }
.km-tips-cta {
  position: sticky; bottom: calc(-18px - env(safe-area-inset-bottom, 0px)); z-index: 2;
  margin: 0 -18px calc(-18px - env(safe-area-inset-bottom, 0px)); padding: 2px 18px calc(18px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, rgba(14,50,82,0), rgba(14,50,82,.94) 34px, rgba(16,48,86,.98));
}
@keyframes kmSwap { from { opacity: 0; translate: 0 6px; filter: blur(4px); } to { opacity: 1; translate: 0 0; filter: blur(0); } }

/* ---------- Сцена: шар + субтитры ---------- */
.km-test-stage {
  display: grid; grid-template-columns: 37% minmax(0, 1fr); gap: 12px; align-items: center; margin-top: 16px;
}
.km-orb-wrap { display: grid; justify-items: center; gap: 9px; }
.km-test-orb {
  position: relative; display: block; width: 100%; max-width: 138px; aspect-ratio: 1; padding: 0; border: 0;
  border-radius: 50%; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: scale .2s var(--ease);
}
.km-test-orb:active { scale: .95; }
/* Ореол: цвет говорит, чья очередь — бирюза у Оли, мята у клиента. */
.km-orb-halo {
  position: absolute; inset: -22%; border-radius: 50%; pointer-events: none; filter: blur(14px);
  background: radial-gradient(circle closest-side, rgba(70,200,255,.55), rgba(120,110,255,.22) 56%, transparent);
  opacity: .55; transition: opacity .5s var(--ease), background .5s;
  animation: kmBreathe 5.6s ease-in-out infinite;
}
.km-orb-body {
  position: absolute; inset: 0; border-radius: 50%; isolation: isolate;
  background: var(--km-sphere) 50% 50% / 106.1% auto no-repeat;
  box-shadow: 0 0 24px rgba(90,200,255,.34), 0 14px 30px rgba(2,12,30,.45);
  transition: filter .5s var(--ease), scale .5s var(--ease);
}
/* Поверх запечённой радуги медленно идёт перелив — шар не выглядит картинкой. */
.km-orb-body::before {
  content: ""; position: absolute; z-index: 1; inset: 0; border-radius: 50%;
  background: conic-gradient(from 210deg, rgba(116,243,255,.9), rgba(154,116,255,.8) 70deg, transparent 130deg, rgba(195,138,255,.8) 230deg, transparent 300deg, rgba(116,243,255,.9));
  -webkit-mask-image: radial-gradient(circle closest-side, transparent 0 84%, #000 93%, transparent 99%);
  mask-image: radial-gradient(circle closest-side, transparent 0 84%, #000 93%, transparent 99%);
  mix-blend-mode: screen; opacity: .32;
  animation: kmSpin 16s linear infinite;
}
.km-orb-bars {
  position: absolute; z-index: 2; top: 48.9%; left: 50.4%; width: 34.8%; height: 26.1%; translate: -50% -50%;
  display: flex; align-items: center; justify-content: space-between;
}
.km-orb-bars i {
  display: block; width: 4.6%; height: calc(var(--h) / 117 * 100%); border-radius: 99px;
  background: linear-gradient(180deg, #fbfeff 0%, #dcfbff 42%, #76f6fc 100%);
  box-shadow: 0 0 6px rgba(130,245,255,.85), 0 0 14px rgba(70,215,250,.45);
  scale: 1 .42; transition: scale .4s var(--ease), opacity .4s;
  animation: kmIdle 3.2s ease-in-out infinite; animation-delay: var(--o, 0s);
}
@keyframes kmIdle { 0%, 100% { scale: 1 .5; } 50% { scale: 1 .78; } }
@keyframes kmListen { 0%, 100% { scale: 1 .22; } 30% { scale: 1 .52; } 62% { scale: 1 .3; } 82% { scale: 1 .46; } }
/* Волны речи расходятся от шара, пока говорит Оля. */
.km-orb-wave {
  position: absolute; inset: 0; border-radius: 50%; pointer-events: none; opacity: 0;
  box-shadow: 0 0 0 1.5px rgba(127,233,255,.7), 0 0 18px rgba(127,233,255,.35);
}
/* Дуга соединения обегает шар. */
.km-orb-ring {
  position: absolute; inset: -7px; border-radius: 50%; pointer-events: none; opacity: 0;
  background: conic-gradient(from 0deg, transparent 0 62%, rgba(127,233,255,.2) 70%, #e6fdff 98%, transparent 100%);
  -webkit-mask-image: radial-gradient(circle closest-side, transparent 0 94%, #000 96% 100%);
  mask-image: radial-gradient(circle closest-side, transparent 0 94%, #000 96% 100%);
  transition: opacity .3s;
}
.km-orb-caption {
  display: inline-flex; align-items: center; gap: 7px; min-height: 18px; white-space: nowrap;
  color: #e2f1fb; font-size: 12.5px; font-weight: 600; letter-spacing: -.01em; text-align: center;
  text-shadow: 0 1px 2px rgba(0,10,24,.9), 0 0 12px rgba(0,14,30,.7);
}
.km-orb-caption::before {
  content: ""; width: 6px; height: 6px; flex: none; border-radius: 50%; background: #7fa6c4; transition: background .3s;
}

/* ---------- Субтитры ---------- */
.km-log {
  --bloom: 9px;
  --glass: linear-gradient(160deg, rgba(8,34,62,.74), rgba(12,44,78,.62));
  --edge-t: rgba(112,226,250,.2);
  --edge-b: rgba(92,226,250,.26);
  --edge-r: rgba(128,118,245,.18);
  --spark-t: rgba(242,254,255,.5);
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); height: clamp(172px, 100svh - 548px, 280px); padding: 11px 6px 2px 12px; border-radius: 18px;
}
/* HUD-стекло: панель почти прозрачная, фото читается насквозь. Фон за ней
   размыт слегка и притемнён — поэтому белый текст остаётся контрастным. */
.km-log {
  --glass: linear-gradient(160deg, rgba(6,28,54,.42), rgba(8,34,64,.26));
  --edge-t: rgba(127,233,255,.12); --edge-b: rgba(127,233,255,.12); --haze-t: rgba(90,200,235,.04);
  --edge-r: rgba(128,118,245,.08); --spark-t: rgba(242,254,255,.6);
  -webkit-backdrop-filter: blur(9px) saturate(140%) brightness(.5); backdrop-filter: blur(9px) saturate(140%) brightness(.5);
  outline: 0;
  box-shadow: inset 0 0 26px rgba(127,233,255,.07), 0 0 18px rgba(84,210,245,.13), 0 12px 30px rgba(2,8,20,.3);
}
.km-log::before { padding: 1px; background: linear-gradient(155deg, rgba(196,247,255,.95), rgba(127,233,255,.24) 26%, rgba(127,233,255,.07) 56%, rgba(155,140,255,.55)); }
.km-log > :not(.km-log-hud) { position: relative; z-index: 1; }
/* Угловые скобки прицела + строки развёртки + полоса сканирования. */
.km-log-hud {
  --c: rgba(170,242,255,.9);
  position: absolute; inset: 0; z-index: 0; overflow: hidden; border-radius: inherit; pointer-events: none;
  background:
    linear-gradient(var(--c) 0 0) 6px 6px / 8px 1.5px no-repeat,
    linear-gradient(var(--c) 0 0) 6px 6px / 1.5px 8px no-repeat,
    linear-gradient(var(--c) 0 0) right 6px top 6px / 8px 1.5px no-repeat,
    linear-gradient(var(--c) 0 0) right 6px top 6px / 1.5px 8px no-repeat,
    linear-gradient(var(--c) 0 0) left 6px bottom 6px / 8px 1.5px no-repeat,
    linear-gradient(var(--c) 0 0) left 6px bottom 6px / 1.5px 8px no-repeat,
    linear-gradient(var(--c) 0 0) right 6px bottom 6px / 8px 1.5px no-repeat,
    linear-gradient(var(--c) 0 0) right 6px bottom 6px / 1.5px 8px no-repeat;
  filter: drop-shadow(0 0 3px rgba(127,233,255,.7));
}
.km-log-hud::after {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(180deg, rgba(150,235,255,.05) 0 1px, transparent 1px 4px);
}
.km-log-hud::before {
  content: ""; position: absolute; inset: 0; translate: 0 -100%; opacity: 0;
  background: linear-gradient(180deg, transparent 0 66%, rgba(127,233,255,.06) 86%, rgba(205,250,255,.2) 99%, rgba(230,253,255,.55) 99.6%, transparent);
}
.km-test:is([data-call="speaking"], [data-call="listening"]) .km-log-hud::before { opacity: 1; animation: kmScan 4.6s cubic-bezier(.45,.05,.55,.95) infinite; }
@keyframes kmScan { from { translate: 0 -100%; } to { translate: 0 100%; } }
.km-log :is(.km-log-state, .km-log-time, .km-log-who, .km-log-item p, .km-log-note) { text-shadow: 0 1px 2px rgba(0,8,20,.85), 0 0 12px rgba(0,12,28,.55); }
.km-log-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 6px 7px 0; margin-bottom: 6px;
  background: linear-gradient(90deg, rgba(127,233,255,.5), rgba(127,233,255,.1) 70%, transparent) 0 100% / 100% 1px no-repeat;
}
.km-log-state {
  display: inline-flex; align-items: center; gap: 7px; min-width: 0;
  font-family: var(--display); font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #a9e9f5;
  white-space: nowrap;
}
.km-log-state > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.km-log-dot { width: 7px; height: 7px; flex: none; border-radius: 50%; background: #6d8fae; }
.km-log-time { flex: none; font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: -.02em; color: #8fe9f6; font-variant-numeric: tabular-nums; }
.km-log-list {
  display: grid; align-content: start; gap: 10px; margin: 0; padding: 4px 8px 10px 0; list-style: none;
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14px, #000 calc(100% - 8px), transparent);
  mask-image: linear-gradient(180deg, transparent 0, #000 14px, #000 calc(100% - 8px), transparent);
}
.km-log-list::-webkit-scrollbar { display: none; }
/* Таймлайн: точка у каждой реплики, тонкая линия связывает их. */
.km-log-item { position: relative; padding-left: 15px; animation: kmRise .34s var(--ease) both; }
.km-log-item::before {
  content: ""; position: absolute; left: 0; top: 4px; width: 7px; height: 7px; border-radius: 50%;
  background: #e6f4fb; box-shadow: 0 0 0 3px rgba(230,244,251,.08);
}
.km-log-item::after {
  content: ""; position: absolute; left: 3px; top: 15px; bottom: -8px; width: 1px;
  background: linear-gradient(180deg, rgba(160,225,250,.4), rgba(160,225,250,.1));
}
.km-log-item:last-child::after { display: none; }
.km-log-item.is-bot::before { background: #7fe9ff; box-shadow: 0 0 8px rgba(127,233,255,.8); }
.km-log-who { display: block; font-size: 11px; font-weight: 800; letter-spacing: .01em; color: #f0f8fd; }
.km-log-item.is-bot .km-log-who { color: #7fe9ff; }
.km-log-item p { margin: 1px 0 0; color: #dbecf7; font-size: 13px; line-height: 1.38; letter-spacing: -.01em; }
.km-log-note { padding: 2px 0 0; color: #cfe6f5; font-size: 13px; line-height: 1.4; }
.km-log-note[data-live-status] { color: #a9c6dc; font-style: italic; }
.km-log-note.is-error {
  margin-top: 6px; padding: 8px 10px; border-radius: 4px 11px 11px 4px; color: #ffe3e6;
  background: linear-gradient(90deg, rgba(255,95,109,.18), rgba(255,95,109,.05)); box-shadow: inset 2px 0 0 var(--danger);
}
.km-log-note q {
  display: block; margin-top: 8px; padding: 8px 10px; border-radius: 4px 11px 11px 4px; quotes: "«" "»";
  color: #f2f8ff; background: linear-gradient(90deg, rgba(79,232,255,.14), rgba(139,124,255,.06));
  box-shadow: inset 2px 0 0 var(--cy);
}
/* Субтитры проявляются по словам — как живая расшифровка речи. */
.km-w { display: inline-block; opacity: 0; translate: 0 3px; animation: kmWord .34s var(--ease) forwards; animation-delay: calc(var(--w) * 70ms); }
@keyframes kmWord { to { opacity: 1; translate: 0 0; } }
.km-log-item.is-interim p { color: #9fe8d5; }
.km-typing { display: inline-flex; align-items: center; gap: 5px; height: 15px; }
.km-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--cy); animation: kmDot 1.15s ease-in-out infinite; }
.km-typing i:nth-child(2) { animation-delay: .16s; }
.km-typing i:nth-child(3) { animation-delay: .32s; }
.is-interim .km-typing i { background: #6ff2cd; }
@keyframes kmDot { 0%, 75%, 100% { opacity: .3; transform: translateY(0); } 35% { opacity: 1; transform: translateY(-4px); } }

/* ---------- Пульт сценариев ---------- */
.km-dock { --bloom: 14px; --flare-t: 30%; margin-top: 18px; padding: 15px 11px 11px; border-radius: 24px; }
.km-dock h2 {
  position: relative; margin: 0 0 13px 2px; padding-bottom: 9px;
  font-family: var(--display); font-size: clamp(14.5px, 4.4vw, 18px); font-weight: 800; line-height: 1.15; letter-spacing: -.035em; color: #fff;
  text-shadow: 0 0 18px rgba(175,236,255,.3);
}
.km-dock h2::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 58%; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--cy), rgba(155,140,255,.9) 60%, transparent);
  box-shadow: 0 0 10px rgba(127,233,255,.55);
}
.km-dock-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.km-case {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 32px; align-items: center; gap: 5px;
  min-height: 58px; padding: 7px 7px 7px 11px; border: 0; border-radius: 17px; text-align: left; color: #fff;
  background:
    linear-gradient(180deg, rgba(120,228,250,.3), transparent 10px),
    linear-gradient(0deg, rgba(90,225,250,.32), transparent 9px),
    linear-gradient(270deg, rgba(128,118,245,.26), transparent 24%),
    linear-gradient(90deg, rgba(10,52,82,.72), rgba(38,90,124,.64) 58%, rgba(32,62,112,.7));
  box-shadow: inset 0 0 0 1px rgba(150,225,255,.34), inset 0 1px 0 rgba(236,252,255,.66), inset 0 -1px 0 rgba(165,250,255,.56);
  transition: transform .16s var(--ease), box-shadow .25s, background .25s, opacity .3s, filter .3s;
  animation: kmRise .4s var(--ease) backwards; animation-delay: calc(.12s + var(--i, 0) * 45ms);
}
.km-case:active { transform: scale(.965); }
/* Нечётный последний сценарий занимает всю строку, без пустой ячейки рядом. */
.km-case:last-child:nth-child(odd) { grid-column: 1 / -1; }
.km-case-name {
  display: block; min-width: 0; font-size: clamp(12px, 3.34vw, 13px); font-weight: 800; line-height: 1.22; letter-spacing: -.035em;
  hyphens: manual; -webkit-hyphens: manual; overflow-wrap: break-word; text-wrap: balance;
}
/* Кнопка-кольцо: треугольник, квадрат «стоп» или дуга соединения. */
.km-case-btn {
  position: relative; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: #fff;
  background: radial-gradient(circle closest-side, rgba(20,80,110,.55), rgba(8,40,66,.35));
  box-shadow: inset 0 0 0 1.5px rgba(108,240,206,.85), 0 0 12px rgba(80,230,200,.3);
  transition: box-shadow .25s, background .25s;
}
.km-case-btn svg { position: absolute; width: 22px; height: 22px; filter: drop-shadow(0 0 4px rgba(170,250,240,.7)); transition: opacity .2s, scale .25s var(--ease); }
.km-case-btn .is-stop { opacity: 0; scale: .5; }
/* «В эфире»: от кнопки-стопа расходится кольцо, текст карточки не сдвигается. */
.km-case-btn::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%; opacity: 0;
  box-shadow: 0 0 0 1.5px rgba(255,170,186,.85), 0 0 10px rgba(255,120,140,.5);
}
.km-case.is-live .km-case-btn::before { animation: kmLivePing 1.7s cubic-bezier(.2,.7,.3,1) infinite; }
@keyframes kmLivePing { 0% { opacity: .9; scale: 1; } 100% { opacity: 0; scale: 1.6; } }
.km-case-btn::after {
  content: ""; position: absolute; inset: -3px; border-radius: 50%; opacity: 0;
  background: conic-gradient(from 0deg, transparent 0 55%, #e6fdff 96%, transparent 100%);
  -webkit-mask-image: radial-gradient(circle closest-side, transparent 0 88%, #000 92% 100%);
  mask-image: radial-gradient(circle closest-side, transparent 0 88%, #000 92% 100%);
}
.km-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* Выбранный, но не запущенный сценарий. */
.km-case.is-picked {
  box-shadow: inset 0 0 0 1px rgba(170,238,255,.62), inset 0 1px 0 #effdff, inset 0 -1px 0 #bff9ff, 0 0 18px rgba(110,228,255,.22);
}
.km-case.is-picked .km-case-btn { animation: kmPlayCall 2.4s ease-in-out infinite; }
@keyframes kmPlayCall {
  0%, 100% { box-shadow: inset 0 0 0 1.5px rgba(108,240,206,.85), 0 0 10px rgba(80,230,200,.3); }
  50% { box-shadow: inset 0 0 0 1.5px #b9fff0, 0 0 22px rgba(90,240,210,.7); }
}
/* Идёт разговор: карточка заливается светом, по контуру бежит неоновое кольцо,
   под названием — статус, кнопка становится красным стопом. Остальные гаснут. */
@property --km-spin { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes kmRingSpin { to { --km-spin: 360deg; } }
.km-case::before {
  content: ""; position: absolute; inset: -2px; border-radius: 19px; padding: 2px; opacity: 0; pointer-events: none;
  background: conic-gradient(from var(--km-spin), #7fe9ff, #9b8cff 22%, #ffffff 38%, #3ff0a8 56%, #7fe9ff 74%, #9b8cff 88%, #7fe9ff);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
  transition: opacity .3s;
}
.km-case.is-live {
  background:
    linear-gradient(180deg, rgba(214,252,255,.55), transparent 13px),
    linear-gradient(0deg, rgba(150,240,255,.4), transparent 11px),
    linear-gradient(115deg, rgba(30,150,200,.95), rgba(48,96,192,.92) 55%, rgba(104,80,222,.94));
  box-shadow: inset 0 1px 0 #f4feff, 0 0 30px rgba(110,228,255,.55), 0 0 64px rgba(155,140,255,.28), 0 12px 26px rgba(2,10,26,.45);
}
.km-case.is-live::before { opacity: 1; animation: kmRingSpin 3.2s linear infinite; }
.km-case.is-live .km-case-name { text-shadow: 0 1px 10px rgba(0,20,50,.55); }
.km-case.is-live .km-case-btn {
  background: radial-gradient(circle at 35% 30%, #ff9aab, #ec4c68 58%, #b8233f);
  box-shadow: inset 0 0 0 1.5px rgba(255,228,233,.95), 0 0 18px rgba(255,90,120,.7);
}
.km-test:is([data-call="connecting"], [data-call="speaking"], [data-call="listening"]) .km-case:not(.is-live) { opacity: .5; filter: saturate(.55) brightness(.82); }
.km-test:is([data-call="connecting"], [data-call="speaking"], [data-call="listening"]) .km-case:not(.is-live):is(:hover, :focus-visible) { opacity: .9; filter: none; }
/* Статус под названием: только у текущего и только что завершённого диалога. */
.km-case-text { display: grid; gap: 4px; min-width: 0; }
.km-case-state {
  display: none; align-items: center; gap: 6px; min-width: 0; white-space: nowrap;
  font-family: var(--display); font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: #b5ffe6;
}
.km-case-state i { width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--ok); box-shadow: 0 0 8px rgba(63,240,168,.9); animation: kmBlink 1.3s ease-in-out infinite; }
.km-case:is(.is-live, .is-done) .km-case-state { display: inline-flex; }
.km-case.is-dialing .km-case-state { color: #ffe1a3; }
.km-case.is-dialing .km-case-state i { background: #ffd27a; box-shadow: 0 0 8px rgba(255,210,122,.9); }
.km-case.is-done .km-case-state { color: #b9cfe2; }
.km-case.is-done .km-case-state i { background: #8fb2cf; box-shadow: none; animation: none; }
.km-case.is-live .km-case-btn .is-play { opacity: 0; scale: .5; }
.km-case.is-live .km-case-btn .is-stop { opacity: 1; scale: 1; }
.km-case.is-dialing .km-case-btn::after { opacity: 1; animation: kmSpin .9s linear infinite; }
@media (hover: hover) {
  .km-case:hover { box-shadow: inset 0 0 0 1px rgba(170,238,255,.6), inset 0 1px 0 #effdff, inset 0 -1px 0 #bff9ff, 0 0 20px rgba(110,228,255,.25); }
  .km-test-orb:hover .km-orb-halo { opacity: .85; }
}
.km-test .km-help { margin-top: 10px; font-size: 12px; }

/* ---------- Состояния звонка ---------- */
.km-test[data-call="connecting"] .km-orb-ring { opacity: 1; animation: kmSpin 1.1s linear infinite; }
.km-test[data-call="connecting"] .km-orb-bars i { animation: none; scale: 1 .14; }
.km-test[data-call="connecting"] .km-orb-caption::before { background: #ffd27a; box-shadow: 0 0 8px rgba(255,210,122,.8); }
.km-test[data-call="speaking"] .km-orb-bars i { animation: kmSpeak var(--t, 1.3s) ease-in-out infinite; animation-delay: var(--o, 0s); }
.km-test[data-call="speaking"] .km-orb-halo { opacity: 1; }
.km-test[data-call="speaking"] .km-orb-body::before { animation-duration: 5s; opacity: .6; }
.km-test[data-call="speaking"] .km-orb-body { scale: 1.03; }
.km-test[data-call="speaking"] .km-orb-wave { animation: kmOrbWave 2.1s var(--ease) infinite; }
.km-test[data-call="speaking"] .km-orb-wave + .km-orb-wave { animation-delay: 1.05s; }
@keyframes kmOrbWave { from { opacity: .9; scale: 1; } to { opacity: 0; scale: 1.42; } }
.km-test[data-call="listening"] .km-orb-bars i { animation: kmListen calc(var(--t, 1.3s) * .6) ease-in-out infinite; animation-delay: var(--o, 0s); }
.km-test[data-call="listening"] .km-orb-halo { opacity: .9; background: radial-gradient(circle closest-side, rgba(90,240,200,.5), rgba(70,190,255,.2) 56%, transparent); }
.km-test:is([data-call="speaking"], [data-call="listening"]) .km-orb-caption::before { background: var(--ok); box-shadow: 0 0 8px rgba(63,240,168,.9); animation: kmBlink 1.4s ease-in-out infinite; }
.km-test:is([data-call="speaking"], [data-call="listening"]) .km-log-dot { background: var(--ok); animation: kmPulse 1.7s ease-in-out infinite; }
.km-test[data-call="connecting"] .km-log-dot { background: #ffd27a; animation: kmBlink .8s ease-in-out infinite; }
.km-test[data-call="ended"] .km-orb-bars i { animation: none; scale: 1 .16; opacity: .7; }
.km-test[data-call="ended"] .km-orb-body { filter: saturate(.7) brightness(.85); }
.km-test[data-call="ended"] .km-log-dot { background: #ff8a96; }

/* 360–389 px: статус и таймер в шапке субтитров должны уместиться без многоточия. */
@media (max-width: 389px) {
  .km-log-head { gap: 6px; padding-right: 2px; padding-bottom: 7px; }
  .km-log-state { font-size: 10px; letter-spacing: .08em; }
}
/* Узкие экраны (320–359 px): сценарии в одну колонку, чтобы названия не рвались переносами. */
@media (max-width: 359px) {
  .km-test-stage { gap: 10px; }
  .km-orb-caption { gap: 5px; font-size: 11px; letter-spacing: -.02em; }
  .km-log { padding-left: 10px; }
  .km-log-dot { display: none; }
  .km-log-state { font-size: 9.5px; letter-spacing: .06em; }
  .km-log-time { font-size: 10.5px; }
  .km-dock-grid { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .km-case { min-height: 48px; padding-left: 13px; }
  .km-case-name { font-size: 13px; }
}
@keyframes kmBlink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes kmPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(63,240,168,.6); } 70% { box-shadow: 0 0 0 7px rgba(63,240,168,0); } }
@media (prefers-reduced-motion: reduce) {
  .km-test-photo img { animation: none; scale: 1.02; }
  .km-orb-wave { display: none; }
  .km-w { opacity: 1; translate: 0 0; }
  .km-case.is-live .km-case-btn::before { animation: none; opacity: .7; scale: 1.18; }
  .km-case.is-live::before, .km-case-state i, .km-tips-btn.is-new { animation: none; }
  .km-test .km-log-hud::before { animation: none; opacity: 0; }
  .km-grid > .km-sector, .km-sector-name, .km-spark, .km-accent, .km-heading--xl .km-overline::before,
  .km-glass::after, .km-orbits::before, .km-orbits i::after { animation: none; }
  .km-tips-sheet, .km-tips-scrim { transition: none; }
}

/* ---------- Форматы ---------- */
/* Карточка продукта: светлый «экран» со сценкой, под ним название, описание,
   три свойства и вход в подробности. Сценки светлые, как фото на экране
   теста: продукт показан так, как его видит клиент. */
.km-product { --bloom: 12px; --edge-r: rgba(128,118,245,.26); padding: 8px; border-radius: 22px; }
.km-story {
  position: relative; z-index: 1; height: 236px; overflow: hidden; isolation: isolate; border-radius: 16px;
  background: linear-gradient(160deg, #f5fbff 0%, #e2effa 52%, #d2e6f5 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.7), 0 0 0 1px rgba(150,220,255,.28), 0 10px 24px rgba(0,12,32,.38);
}
.km-product-body { position: relative; z-index: 1; display: grid; gap: 12px; padding: 16px 10px 10px; }
.km-product-title { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.km-product-title h2 {
  margin: 0; font-family: var(--display); font-size: clamp(16px, 4.7vw, 18.5px); font-weight: 800; line-height: 1.18;
  letter-spacing: -.035em; color: #fff; text-wrap: balance;
}
.km-product-num { align-self: start; padding-top: 3px; font: 700 11px/1 var(--mono); letter-spacing: .08em; color: #7fd6ea; }
.km-product-body > p { margin: 0; color: var(--ink-dim); font-size: 14.5px; line-height: 1.45; letter-spacing: -.01em; }
.km-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.km-tags li {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px 6px 8px; border-radius: 999px;
  font-size: 12.5px; font-weight: 700; line-height: 1.15; letter-spacing: -.01em; color: #e2f7ff;
  background: rgba(120,210,255,.09); box-shadow: inset 0 0 0 1px rgba(140,225,255,.26);
}
.km-tags svg { flex: none; width: 15px; height: 15px; color: var(--cy); filter: drop-shadow(0 0 4px rgba(120,240,255,.6)); }
/* Вторичная кнопка: прозрачное стекло с неоновой кромкой. */
.km-ghost {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 48px; padding: 10px 18px;
  border: 0; border-radius: 999px; cursor: pointer; color: #ecfbff; font-size: 15px; font-weight: 800; letter-spacing: -.015em;
  background: linear-gradient(180deg, rgba(150,235,255,.14), rgba(127,233,255,.04));
  box-shadow: inset 0 0 0 1px rgba(150,235,255,.5), inset 0 1px 0 rgba(225,252,255,.35), 0 0 18px rgba(80,210,255,.14);
  transition: box-shadow .2s, scale .16s var(--ease);
}
.km-ghost svg { width: 19px; height: 19px; stroke-width: 2.3; color: var(--cy); transition: translate .22s var(--ease); }
.km-ghost:active { scale: .975; box-shadow: inset 0 0 0 1px rgba(190,245,255,.8), 0 0 24px rgba(90,220,255,.4); }
@media (hover: hover) { .km-ghost:hover svg { translate: 3px 0; } }

/* Сценки: реплики появляются по очереди, держатся и гаснут — цикл 8 с. */
.km-story-msg {
  position: absolute; z-index: 3; display: flex; align-items: center; gap: 7px; max-width: 64%; margin: 0; padding: 8px 11px;
  border-radius: 14px 14px 14px 5px; font-size: 12px; font-weight: 700; line-height: 1.28; letter-spacing: -.01em;
}
.km-story-msg--you { color: #12304f; background: rgba(255,255,255,.94); box-shadow: 0 6px 16px rgba(20,60,110,.16), inset 0 0 0 1px #fff; }
.km-story-msg--you::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: #3f84ff; box-shadow: 0 0 0 3px rgba(63,132,255,.18); }
.km-story-msg--bot {
  color: #fff; background: linear-gradient(135deg, #3592ff, #1f66ea 60%, #4256de);
  box-shadow: 0 8px 18px rgba(31,102,234,.32), inset 0 1px 0 rgba(255,255,255,.35);
}
.km-story-msg--bot::before {
  content: ""; flex: none; width: 15px; height: 15px; border-radius: 50%;
  background: var(--km-sphere) 50% 50% / 106% auto no-repeat; box-shadow: 0 0 8px rgba(170,240,255,.95);
}
.km-story-done {
  position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 7px; margin: 0; padding: 8px 12px 8px 9px; border-radius: 999px;
  font-size: 12px; font-weight: 800; letter-spacing: -.01em; color: #0b6b47; white-space: nowrap;
  background: linear-gradient(180deg, #f2fff9, #dcfbec); box-shadow: inset 0 0 0 1px rgba(63,220,150,.55), 0 6px 16px rgba(20,140,90,.2);
}
.km-story-done svg { width: 16px; height: 16px; stroke-width: 2.6; color: #16b673; }
.km-story-done--action { color: #fff; background: linear-gradient(135deg, #3592ff, #1f66ea); box-shadow: 0 8px 18px rgba(31,102,234,.32), inset 0 1px 0 rgba(255,255,255,.35); }
.km-story-done--action svg { color: #fff; }
.km-step-1 { animation: kmStep1 8s var(--ease) infinite; }
.km-step-2 { animation: kmStep2 8s var(--ease) infinite; }
.km-step-3 { animation: kmStep3 8s var(--ease) infinite; }
@keyframes kmStep1 { 0%, 4% { opacity: 0; translate: 0 10px; scale: .94; } 10%, 86% { opacity: 1; translate: 0 0; scale: 1; } 93%, 100% { opacity: 0; translate: 0 -4px; scale: 1; } }
@keyframes kmStep2 { 0%, 20% { opacity: 0; translate: 0 10px; scale: .94; } 26%, 86% { opacity: 1; translate: 0 0; scale: 1; } 93%, 100% { opacity: 0; translate: 0 -4px; scale: 1; } }
@keyframes kmStep3 { 0%, 38% { opacity: 0; translate: 0 10px; scale: .9; } 44%, 86% { opacity: 1; translate: 0 0; scale: 1; } 93%, 100% { opacity: 0; translate: 0 -4px; scale: 1; } }

/* 1. Робот на телефоне: портрет справа, белый ворот халата уходит в свет,
   поэтому кадр не читается как медицинский. */
.km-story-portrait {
  position: absolute; z-index: 1; top: 0; right: -6%; bottom: 0; width: 60%;
  background: var(--km-format-portrait) 50% 6% / cover no-repeat;
  -webkit-mask-image: linear-gradient(180deg, #000 52%, transparent 77%), linear-gradient(90deg, transparent, #000 22%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(180deg, #000 52%, transparent 77%), linear-gradient(90deg, transparent, #000 22%);
  mask-composite: intersect;
}
.km-story--phone::after {
  content: ""; position: absolute; z-index: 0; right: 4%; top: 6%; width: 52%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(90,200,255,.32), transparent 66%);
}
.km-story--phone .km-step-1 { left: 12px; top: 18px; }
.km-story--phone .km-step-2 { left: 12px; top: 84px; max-width: 58%; }
.km-story--phone .km-step-3 { left: 12px; bottom: 16px; }
/* Узкие экраны: реплики уже, портрет правее — гарнитура остаётся открытой. */
@media (max-width: 374px) {
  .km-story--phone .km-story-msg { max-width: 55%; font-size: 11.5px; }
  .km-story-portrait { right: -13%; }
}
.km-story-call {
  position: absolute; z-index: 3; right: 12px; bottom: 14px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px;
  border-radius: 999px; font: 700 11px/1 var(--mono); letter-spacing: .02em; color: #1d4f7c;
  background: rgba(255,255,255,.8); box-shadow: inset 0 0 0 1px rgba(255,255,255,.95), 0 4px 12px rgba(20,60,110,.14);
}
.km-story-call i { width: 6px; height: 6px; border-radius: 50%; background: #ff5f6d; box-shadow: 0 0 0 3px rgba(255,95,109,.2); animation: kmBlink 1.4s ease-in-out infinite; }
@keyframes kmBlink { 50% { opacity: .35; } }

/* 2. Виджет обратного звонка: запись настоящего виджета с сайта. */
.km-story--callback { background: #fbfdff; }
.km-story-video {
  position: absolute; inset: 0; z-index: 1; display: block; width: 100%; height: 100%; object-fit: contain;
  background: #fbfdff var(--km-callback-poster) 50% 50% / contain no-repeat;
}

/* 3. Голосовой виджет на сайте: окно браузера, шар слушает, диалог справа. */
.km-story--browser { background: linear-gradient(180deg, #fbfdff 0%, #eaf3fb 100%); }
.km-story-bar {
  position: absolute; z-index: 2; inset: 0 0 auto; display: flex; align-items: center; gap: 5px; height: 32px; padding: 0 10px;
  background: rgba(255,255,255,.9); box-shadow: 0 1px 0 rgba(20,60,110,.08);
}
.km-story-bar > i { width: 7px; height: 7px; border-radius: 50%; background: #f3a6a6; }
.km-story-bar > i + i { background: #f5d48b; }
.km-story-bar > i + i + i { background: #9fdcb5; }
.km-story-bar span {
  display: flex; align-items: center; gap: 5px; min-width: 0; margin-left: 8px; padding: 4px 10px; border-radius: 999px;
  font-size: 10.5px; font-weight: 600; color: #5a738d; background: #edf3f9;
}
.km-story-bar svg { width: 11px; height: 11px; color: #3aa673; }
.km-story-listen { position: absolute; z-index: 2; left: 0; top: 32px; bottom: 0; width: 38%; display: grid; place-content: center; justify-items: center; gap: 12px; }
.km-story-orb { position: relative; width: 66px; height: 66px; border-radius: 50%; background: var(--km-sphere) 50% 50% / 106.1% auto no-repeat; box-shadow: 0 0 22px rgba(80,180,255,.42), 0 8px 18px rgba(20,60,120,.22); }
.km-story-orb::before, .km-story-orb::after {
  content: ""; position: absolute; inset: -2px; border-radius: 50%; box-shadow: 0 0 0 1.5px rgba(60,150,255,.55); animation: kmOlyaWave 2.6s ease-out infinite;
}
.km-story-orb::after { animation-delay: .9s; }
.km-story-listen p { margin: 0; font-size: 11.5px; font-weight: 700; line-height: 1.25; text-align: center; color: #2f5d88; }
.km-story--browser .km-story-msg { max-width: none; }
.km-story--browser .km-step-1 { left: 38%; right: 12px; top: 50px; }
.km-story--browser .km-step-2 { left: 38%; right: 12px; top: 106px; }
.km-story--browser .km-step-3 { right: 12px; bottom: 16px; }

/* ---------- О продукте ---------- */
.km-format-tabs {
  position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 18px; padding: 4px;
  border-radius: 15px; background: rgba(3,22,42,.55); box-shadow: inset 0 0 0 1px rgba(150,220,255,.24), inset 0 2px 8px rgba(0,10,26,.5);
  animation: kmRise .38s var(--ease) both;
}
.km-format-tabs::before {
  content: ""; position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / 3);
  border-radius: 12px; background: var(--jelly); box-shadow: 0 0 0 1px rgba(205,250,255,.75), 0 0 16px rgba(90,225,250,.45);
  transform: translateX(calc(var(--tab, 0) * 100%));
}
.km-format-tabs button {
  position: relative; z-index: 1; min-height: 44px; padding: 5px 4px; border: 0; border-radius: 12px; background: none; cursor: pointer;
  color: var(--ink-dim); font-size: clamp(11.5px, 3.3vw, 13px); font-weight: 600; line-height: 1.15; letter-spacing: -.015em;
}
.km-format-tabs [aria-pressed=true] { color: var(--jelly-ink); font-weight: 800; }
.km-product--hero { padding: 8px; }
.km-product--hero .km-story { height: 252px; }
.km-subhead {
  display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-family: var(--display); font-size: 11.5px; font-weight: 800;
  letter-spacing: .16em; text-transform: uppercase; color: #8fe3f2;
}
.km-subhead::before { content: ""; width: 16px; height: 2px; border-radius: 2px; background: var(--cy); box-shadow: 0 0 8px rgba(127,233,255,.8); }
.km-points { display: grid; gap: 15px; margin: 0; padding: 0; list-style: none; }
.km-points li { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 12px; align-items: start; }
.km-points .km-icon { width: 38px; height: 38px; border-radius: 12px; }
.km-points .km-icon svg { width: 19px; height: 19px; }
.km-points strong { display: block; padding-top: 1px; font-size: 15px; font-weight: 800; line-height: 1.25; letter-spacing: -.025em; color: #fff; }
.km-points small { display: block; margin-top: 3px; font-size: 13.5px; line-height: 1.4; color: var(--ink-dim); }
.km-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 10px; }
.km-stat { --bloom: 10px; padding: 16px 14px 15px; border-radius: 18px; }
.km-stat strong {
  position: relative; z-index: 1; display: block; font-family: var(--display); font-size: clamp(25px, 7.6vw, 31px); font-weight: 800;
  line-height: 1; letter-spacing: -.045em; white-space: nowrap; color: transparent;
  background: linear-gradient(100deg, #e4fcff 0%, #8cebfa 45%, #4fd0ee 100%); -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 0 12px rgba(70,212,245,.35));
}
.km-stat span { position: relative; z-index: 1; display: block; margin-top: 8px; font-size: 13px; line-height: 1.32; letter-spacing: -.01em; color: var(--ink-dim); }
.km-tools { display: flex; flex-wrap: wrap; gap: 7px; margin: 0; padding: 0; list-style: none; }
.km-tools li {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px 7px 8px; border-radius: 12px;
  font-size: 13px; font-weight: 600; line-height: 1.25; color: #e2f5ff; background: rgba(120,210,255,.08); box-shadow: inset 0 0 0 1px rgba(140,225,255,.22);
}
.km-tools svg { flex: none; width: 15px; height: 15px; stroke-width: 2.6; color: var(--ok); }
.km-note { margin: -6px 0 14px; font-size: 13px; color: #9dbad2; }
.km-format-cta { display: grid; gap: 10px; margin-top: 6px; }

/* ---------- Калькулятор ---------- */
.km-price-inputs { display: grid; gap: 20px; }
.km-plans {
  position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 4px;
  border-radius: 15px; background: rgba(3,22,42,.55); box-shadow: inset 0 0 0 1px rgba(150,220,255,.24), inset 0 2px 8px rgba(0,10,26,.5);
}
.km-plans::before {
  content: ""; position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px);
  border-radius: 12px; background: var(--jelly);
  box-shadow: 0 0 0 1px rgba(205,250,255,.75), 0 0 16px rgba(90,225,250,.45);
  transition: transform .3s var(--ease);
}
.km-plans[data-plan="1"]::before { transform: translateX(100%); }
.km-plans button {
  position: relative; z-index: 1; min-height: 44px; padding: 6px 8px; border: 0; background: none; border-radius: 12px;
  color: var(--ink-dim); font-size: 14px; font-weight: 600; transition: color .24s;
}
.km-plans [aria-pressed=true] { color: var(--jelly-ink); font-weight: 800; }
.km-price-slider { display: grid; gap: 10px; font-size: 14px; }
.km-slider-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.km-slider-top span { color: var(--ink-dim); }
.km-price-slider output { font-family: var(--mono); font-size: 19px; font-weight: 700; letter-spacing: -.03em; color: var(--cy); font-variant-numeric: tabular-nums; }
.km-price-slider input { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; margin: 0; background: transparent; }
.km-price-slider input::-webkit-slider-runnable-track {
  height: 6px; border-radius: 3px;
  background: linear-gradient(90deg, #8ff6fb 0%, #64e3f2 var(--p, 27%), rgba(3,22,42,.62) var(--p, 27%));
  box-shadow: inset 0 0 0 1px rgba(150,220,255,.22), 0 0 12px rgba(90,225,250,.36);
}
.km-price-slider input::-moz-range-track { height: 6px; border-radius: 3px; background: rgba(255,255,255,.12); }
.km-price-slider input::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--cy); }
.km-price-slider input::-webkit-slider-thumb {
  -webkit-appearance: none; width: 26px; height: 26px; margin-top: -10px; border-radius: 50%;
  background: radial-gradient(circle at 36% 26%, #fff 0 20%, #b6f7fe 46%, #4fdaeb 100%);
  box-shadow: 0 0 0 1px rgba(205,250,255,.88), 0 0 18px rgba(100,230,255,.78);
  transition: transform .16s var(--ease), box-shadow .16s;
}
.km-price-slider input::-moz-range-thumb { width: 20px; height: 20px; border: 0; border-radius: 50%; background: #fff; }
.km-price-slider input:active::-webkit-slider-thumb { transform: scale(1.14); box-shadow: 0 0 0 1px #e6fdff, 0 0 30px rgba(120,235,255,.95); }
.km-check { display: flex; align-items: center; gap: 11px; min-height: 44px; font-size: 14px; }
.km-check input {
  -webkit-appearance: none; appearance: none; width: 22px; height: 22px; margin: 0; flex: none; border-radius: 7px;
  background: linear-gradient(0deg, rgba(92,226,250,.24), transparent 9px), rgba(3,22,42,.55);
  box-shadow: inset 0 0 0 1px rgba(150,225,255,.42), inset 0 -1px 0 rgba(150,245,255,.7);
  transition: box-shadow .18s, transform .16s var(--ease);
}
.km-check input:active { transform: scale(.88); }
.km-check input:checked {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22' fill='none' stroke='%230a2a44' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 11.5l3.4 3.4L16.2 7.6'/%3E%3C/svg%3E") center / 100% no-repeat, var(--jelly);
  box-shadow: 0 0 0 1px rgba(205,250,255,.85), 0 0 14px rgba(90,225,250,.55);
}
.km-price-result { --glass: radial-gradient(ellipse 70% 80% at 85% 10%, rgba(139,124,255,.3), transparent 70%), var(--glass-base); padding: 20px; border-radius: 22px; }
.km-price-result h2 { position: relative; z-index: 1; color: var(--cy); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; }
.km-price-result strong {
  position: relative; z-index: 1; display: block; font-family: var(--mono); font-size: 32px; font-weight: 700;
  line-height: 1.16; letter-spacing: -.05em; font-variant-numeric: tabular-nums;
  text-shadow: 0 0 22px rgba(130,240,255,.5);
}
.km-price-result p { position: relative; z-index: 1; color: var(--ink-dim); font-size: 14px; margin-top: 4px; }

/* ---------- Форма ---------- */
.km-form > label:not(.km-check) { display: grid; gap: 7px; font-size: 13px; font-weight: 600; color: var(--ink-dim); }
.km-form :is(input:not([type=checkbox]), textarea) {
  width: 100%; min-height: 50px; padding: 13px 15px; border: 0; border-radius: 14px;
  background: linear-gradient(0deg, rgba(92,226,250,.17), transparent 12px), rgba(3,22,42,.5);
  box-shadow: inset 0 0 0 1px rgba(150,220,255,.26), inset 0 -1px 0 rgba(130,240,255,.55);
  color: var(--ink); font: 400 16px/1.35 var(--body);
  transition: box-shadow .2s, background-color .2s;
}
.km-form :is(input, textarea)::placeholder { color: rgba(163,184,216,.55); }
.km-form :is(input, textarea):focus {
  outline: none;
  box-shadow: inset 0 0 0 1px rgba(160,242,255,.9), inset 0 -1px 0 #bff9ff, 0 0 18px rgba(90,225,250,.4);
}
.km-form textarea { min-height: 88px; resize: vertical; }
.km-form a { color: #9df2fa; text-decoration: underline; text-underline-offset: 2px; }
.km-form .km-help { text-align: left; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  :is(.km-row, .km-primary, .km-sector, .km-back, .km-plans button):active { transform: none; }
  .km-row:active .km-icon { scale: 1; }
  .km-row:active .km-arrow, .km-back:active :is(i, svg) { translate: 0; }
  .km-ripple { display: none; }
  .km-aurora i, .km-beams i { animation: none; }
  .km-olya *, .km-olya *::before, .km-olya *::after, .km-olya-stage::before, .km-olya-stage::after { animation: none !important; }
  .km-story *, .km-story *::before, .km-story *::after { animation: none !important; }
  .glass::after { display: none; }
}

/* ---------- Иконки ---------- */
/* Спрайт Lucide (ISC) лежит в index.html; размер и толщину линии задают правила выше. */
.km-i { display: block; flex: none; overflow: visible; }
/* ---------- Старые WebView ---------- */
/* iOS до 16 не знает overflow: clip — горизонтальный выход колец режем на уровне страницы. */
@supports not (overflow-x: clip) { html, body { overflow-x: hidden; } }
/* ---------- Внутри Telegram ---------- */
/* Высота окна — от Telegram: при свёрнутом мини-аппе 100dvh врёт. */
.is-telegram .km-app { min-height: var(--tg-viewport-stable-height, 100vh); }
.is-telegram .km-tips-sheet { max-height: calc(var(--tg-viewport-height, 100vh) - 28px); }
/* В шапке Telegram есть своя кнопка «Назад» — вторую не показываем. */
.tg-native-back .km-top .km-back[data-action="back"] { display: none !important; }