/* ============================================================
   Sentra — AI ассистент-оператор
   Светлая стеклянная тема (+ тёмная по переключателю)
   ============================================================ */

:root {
  /* фон — чистый белый, цвет переносим в блоки */
  --bg-0: #ffffff;
  --bg-1: #ffffff;
  --mesh-1: #5b86ff;
  --mesh-2: #35d6c4;
  --mesh-3: #a97cff;
  --mesh-4: #ff8fc4;
  --mesh-a: .95;

  /* текст */
  --text: #0b1120;
  --text-dim: #3d4759;
  /* приглушённый текст затемнён: на светлом стекле контраст был ~4:1 */
  --text-mute: #55607a;

  /* стекло — минимум заливки, максимум прозрачности */
  --glass: rgba(255, 255, 255, .09);
  --glass-2: rgba(255, 255, 255, .22);
  --glass-3: rgba(255, 255, 255, .06);
  --stroke: rgba(255, 255, 255, .95);
  --stroke-soft: rgba(20, 32, 66, .12);
  --sheen: rgba(255, 255, 255, 1);

  --blur: 14px;
  --blur-lg: 22px;

  --shadow: 0 20px 46px -20px rgba(28, 45, 100, .38), 0 2px 8px -2px rgba(28, 45, 100, .14);
  --shadow-lg: 0 38px 80px -28px rgba(28, 45, 100, .5), 0 4px 12px -2px rgba(28, 45, 100, .16);
  --ring: 0 0 0 1px rgba(255, 255, 255, .6) inset;

  /* акценты */
  --a-blue: #3b7bff;
  --a-cyan: #06b6d4;
  --a-mint: #10b981;
  --a-violet: #7c5cfa;
  --a-rose: #f43f8e;
  --a-amber: #f59e0b;

  --r-sm: 14px;
  --r-md: 20px;
  --r-lg: 26px;
  --r-xl: 36px;

  /* единый градиент иконок */
  --ico-grad: linear-gradient(145deg, #35c6f0 0%, #3b7bff 52%, #7c5cfa 100%);

  --dock-h: 78px;
  --ease: cubic-bezier(.16, 1, .3, 1); /* expo.out */
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --maxw: 1180px;

  color-scheme: light;
}

/* Тёмная тема — та же палитра, что и светлая, только на глубоком фоне */
html[data-theme="dark"] {
  --bg-0: #0a0f1e;
  --bg-1: #0a0f1e;
  --mesh-1: #3b7bff;
  --mesh-2: #22d3ee;
  --mesh-3: #7c5cfa;
  --mesh-4: #10b981;
  --mesh-a: .52;

  --text: #eef3ff;
  --text-dim: rgba(238, 243, 255, .74);
  /* было .45 — контраст на тёмном фоне падал до ~4:1 */
  --text-mute: rgba(238, 243, 255, .60);

  --glass: rgba(255, 255, 255, .022);
  --glass-2: rgba(255, 255, 255, .05);
  --glass-3: rgba(255, 255, 255, .014);
  --stroke: rgba(255, 255, 255, .15);
  --stroke-soft: rgba(255, 255, 255, .09);
  --sheen: rgba(255, 255, 255, .28);

  /* акценты те же, чуть светлее для контраста на тёмном */
  --a-blue: #5b8cff;
  --a-cyan: #2ee0f5;
  --a-mint: #34d399;
  --a-violet: #9d7bff;
  --a-rose: #fb7aa8;
  --a-amber: #fbbf24;

  --shadow: 0 22px 60px -24px rgba(0, 0, 0, .85);
  --shadow-lg: 0 44px 90px -30px rgba(0, 0, 0, .92);

  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI",
    Inter, system-ui, "Helvetica Neue", Arial, sans-serif;
  color: var(--text);
  background: var(--bg-0);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  padding-bottom: calc(var(--dock-h) + 34px);
  transition: background .5s ease, color .5s ease;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
::selection { background: rgba(59, 123, 255, .22); }

/* прокрутка */
::-webkit-scrollbar { width: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  border-radius: 99px;
  border: 3px solid transparent;
  background: rgba(120, 134, 160, .45) content-box;
}

/* ============ Фон: мягкий градиентный мэш ============ */

/* Фон — однотонный. Весь цвет живёт в стеклянных блоках. */
.bg {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  background: var(--bg-0);
}
/* декоративные слои отключены — фон один цвет */
.bg span, .sheen-layer, .grid-layer, .motes, .beams, .hero-glow { display: none !important; }
.bg span {
  position: absolute;
  display: block;
  border-radius: 50%;
  filter: blur(64px);
  opacity: var(--mesh-a);
  will-change: transform;
  transform: translateZ(0);
  /* пятна медленно смещаются при прокрутке — фон переливается по всей длине */
  translate: 0 calc(var(--sy, 0) * -0.035px);
}
.bg .b2, .bg .b4 { translate: 0 calc(var(--sy, 0) * 0.045px); }
.bg .b3 { translate: 0 calc(var(--sy, 0) * -0.06px); }
.sheen-layer { translate: calc(var(--sy, 0) * 0.02px) calc(var(--sy, 0) * -0.02px); }
.bg .b1 { width: 54vw; height: 54vw; left: -12vw; top: -14vw;  background: radial-gradient(circle at 35% 35%, var(--mesh-1), transparent 70%); animation: drift1 28s var(--ease) infinite alternate; }
.bg .b2 { width: 46vw; height: 46vw; right: -10vw; top: 2vw;   background: radial-gradient(circle at 50% 50%, var(--mesh-2), transparent 70%); animation: drift2 34s var(--ease) infinite alternate; }
.bg .b3 { width: 50vw; height: 50vw; left: 16vw; bottom: -22vw; background: radial-gradient(circle at 50% 50%, var(--mesh-3), transparent 70%); animation: drift3 30s var(--ease) infinite alternate; }
.bg .b4 { width: 34vw; height: 34vw; right: 4vw; bottom: -6vw;  background: radial-gradient(circle at 50% 50%, var(--mesh-4), transparent 70%); animation: drift4 26s var(--ease) infinite alternate; opacity: calc(var(--mesh-a) * .7); }
.bg .b5 { width: 28vw; height: 28vw; left: 42vw; top: 22vh;     background: radial-gradient(circle at 50% 50%, var(--mesh-2), transparent 70%); animation: drift2 38s var(--ease) infinite alternate-reverse; opacity: calc(var(--mesh-a) * .55); }

@keyframes drift1 { to { transform: translate3d(11vw, 7vh, 0) scale(1.16); } }
@keyframes drift2 { to { transform: translate3d(-9vw, 11vh, 0) scale(1.1); } }
@keyframes drift3 { to { transform: translate3d(7vw, -9vh, 0) scale(1.2); } }
@keyframes drift4 { to { transform: translate3d(-8vw, -7vh, 0) scale(1.14); } }

.bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.5'/></svg>");
  opacity: .045;
  pointer-events: none;
}

/* курсорный блик */
.spotlight {
  position: fixed;
  z-index: -1;
  width: 520px; height: 520px;
  margin: -260px 0 0 -260px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(255,255,255,.75), rgba(255,255,255,0) 62%);
  opacity: 0;
  transition: opacity .6s ease;
  will-change: transform;
}
html[data-theme="dark"] .spotlight { background: radial-gradient(circle, rgba(120,170,255,.16), rgba(255,255,255,0) 62%); }

/* прогресс прокрутки */
.progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  z-index: 200;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(90deg, var(--a-blue), var(--a-cyan) 45%, var(--a-mint));
  box-shadow: 0 0 14px rgba(59, 123, 255, .55);
}

/* ============ Раскладка ============ */

.wrap { width: min(100% - 40px, var(--maxw)); margin-inline: auto; }
.section {
  padding: 96px 0 8px;
  position: relative;
}

h1, h2, h3 { margin: 0; font-weight: 650; letter-spacing: -.035em; line-height: 1.05; }
h1 { font-size: clamp(36px, 6.2vw, 72px); line-height: 1.06; }
h2 { font-size: clamp(27px, 4.2vw, 46px); line-height: 1.12; }
/* у заголовков карточек интерлиньяж 1.05 «слипался» на двух строках */
h3 { font-size: clamp(17px, 2.1vw, 21px); letter-spacing: -.02em; line-height: 1.28; text-wrap: balance; }

.lead { color: var(--text-dim); font-size: clamp(15px, 1.7vw, 17.5px); line-height: 1.65; max-width: 62ch; }
/* переносы: длинные слова и адреса не выпирают из стеклянных блоков */
p, li, .lead, .say, .v, .sub, .amount { overflow-wrap: break-word; }

/* без зелёного: синий → фиолет → лазурь, тёмные стопы держат контраст */
.grad-text {
  background: linear-gradient(100deg, #1f5fe0 0%, #5646e6 34%, #7c5cfa 62%, #2f7ef0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 15px;
  border-radius: 999px;
  border: 1px solid rgba(110, 135, 220, .40);
  /* градиентная пилюля — как блоки */
  background:
    linear-gradient(145deg, rgba(120, 162, 255, .14), rgba(168, 130, 255, .09) 46%, rgba(78, 216, 226, .11)),
    linear-gradient(160deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, .16)),
    rgba(255, 255, 255, .68);
  backdrop-filter: blur(var(--blur)) saturate(180%);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(180%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 8px 20px -10px rgba(40, 60, 140, .4);
  font-size: 13px;
  color: var(--text-dim);
}
html[data-theme="dark"] .eyebrow {
  border-color: rgba(150, 175, 255, .26);
  background:
    linear-gradient(145deg, rgba(74, 122, 255, .14), rgba(138, 96, 240, .10) 46%, rgba(44, 186, 214, .11)),
    linear-gradient(155deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .012)),
    rgba(14, 20, 40, .5);
  box-shadow: inset 0 1px 0 rgba(190, 210, 255, .2), 0 10px 24px -12px rgba(0, 0, 0, .8);
}
.eyebrow i { width: 7px; height: 7px; border-radius: 50%; background: var(--a-mint); box-shadow: 0 0 10px var(--a-mint); animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .3; transform: scale(.75); } }

/* ============ Супер-стекло ============ */

.glass {
  position: relative;
  isolation: isolate;
  /* стекло как объёмная пластина: свет сверху, тень снизу */
  /* выраженная градиентная заливка (голубой → фиолет → лазурь) поверх стекла */
  background:
    linear-gradient(145deg, rgba(120, 162, 255, .17) 0%, rgba(168, 130, 255, .10) 46%, rgba(78, 216, 226, .14) 100%),
    linear-gradient(160deg, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, .16) 100%),
    rgba(255, 255, 255, .68);
  border: 1px solid rgba(110, 135, 220, .40);
  border-radius: var(--r-lg);
  backdrop-filter: blur(var(--blur-lg)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--blur-lg)) saturate(150%);
  box-shadow:
    var(--shadow),
    inset 0 1.5px 0 var(--sheen),           /* верхняя фаска */
    inset 0 -1.5px 0 rgba(255, 255, 255, .3), /* нижняя кромка */
    inset 2px 0 3px -2px rgba(255, 255, 255, .6),
    inset -2px 0 3px -2px rgba(255, 255, 255, .45);
  overflow: hidden;
}
html[data-theme="dark"] .glass {
  /* выраженная градиентная заливка на тёмном стекле */
  background:
    linear-gradient(145deg, rgba(74, 122, 255, .16) 0%, rgba(138, 96, 240, .11) 46%, rgba(44, 186, 214, .12) 100%),
    linear-gradient(155deg, rgba(255, 255, 255, .06) 0%, rgba(255, 255, 255, .012) 100%),
    rgba(14, 20, 40, .35);
  border-color: rgba(150, 175, 255, .26);
  box-shadow:
    inset 0 1px 0 rgba(190, 210, 255, .18),
    0 0 0 1px rgba(120, 150, 255, .1),
    0 18px 40px -18px rgba(0, 0, 0, .8),
    0 0 34px -14px rgba(90, 130, 255, .4);
}
html[data-theme="dark"] .glass:hover {
  box-shadow:
    inset 0 1px 0 rgba(190, 210, 255, .22),
    0 0 0 1px rgba(120, 150, 255, .16),
    0 26px 50px -20px rgba(0, 0, 0, .85),
    0 0 44px -12px rgba(90, 130, 255, .55);
  box-shadow:
    var(--shadow),
    inset 0 1.5px 0 var(--sheen),
    inset 0 -1.5px 0 rgba(255, 255, 255, .07),
    inset 2px 0 3px -2px rgba(255, 255, 255, .16),
    inset -2px 0 3px -2px rgba(255, 255, 255, .1);
}

/* преломляющая кромка */
.glass::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(140deg, rgba(255,255,255,1), rgba(255,255,255,.1) 38%, rgba(255,255,255,.65) 78%, rgba(255,255,255,.15));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: .9;
}
html[data-theme="dark"] .glass::before { opacity: .5; }

/* переливающийся блик: диагональный цветной свет медленно ходит по стеклу */
.glass::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    115deg,
    transparent 22%,
    rgba(150, 200, 255, .16) 42%,
    rgba(200, 175, 255, .13) 52%,
    transparent 78%
  );
  background-size: 260% 260%;
  opacity: .35;
  /* в покое статичный кадр (без непрерывной перерисовки поверх blur),
     перелив запускается при наведении — так сайт заметно легче */
  animation: glassSheen 14s linear infinite;
  animation-play-state: paused;
}
.glass:hover::after { animation-play-state: running; }
@media (hover: none) { .glass::after { animation-play-state: running; } }
@keyframes glassSheen {
  0%   { background-position: 0% 0%; }
  100% { background-position: 200% 200%; }
}
html[data-theme="dark"] .glass::after { mix-blend-mode: screen; opacity: .8; }

.glass > * { position: relative; z-index: 3; }

.card {
  padding: 26px;
  transition: transform .55s var(--ease), box-shadow .55s var(--ease), border-color .4s ease;
  transform-style: preserve-3d;
}
.card:hover { box-shadow: var(--shadow-lg), inset 0 1px 0 var(--sheen); }
.card h3 { margin-bottom: 8px; }
.card p { margin: 0; color: var(--text-dim); font-size: 14.8px; line-height: 1.62; }

/* ============ Флэт-иконки ============ */

.icon3d, .ico {
  position: relative;
  width: 60px; height: 60px;
  border-radius: 19px;
  display: grid;
  place-items: center;
  margin-bottom: 18px;
  flex: none;
  overflow: hidden;

  /* единый фирменный градиент: бирюза → синий → фиолет */
  background: var(--ico-grad);
  /* минималистичный объём: мягкая фаска сверху, глубина снизу, тёплое свечение */
  box-shadow:
    inset 0 2px 1px rgba(255, 255, 255, .6),
    inset 0 -10px 18px rgba(4, 10, 40, .28),
    0 6px 14px -6px rgba(20, 40, 100, .5),
    0 16px 30px -14px rgba(59, 123, 255, .58);
  transition: transform .55s var(--spring), box-shadow .5s var(--ease), border-radius .5s var(--ease);
}
/* стеклянный купол-блик сверху */
.icon3d::after, .ico::after {
  content: "";
  position: absolute;
  left: 8%; right: 8%; top: 5%;
  height: 42%;
  border-radius: 50% 50% 42% 42% / 60% 60% 40% 40%;
  background: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .06));
  pointer-events: none;
}
/* отражённый свет снизу */
.icon3d::before, .ico::before {
  content: "";
  position: absolute;
  left: 14%; right: 14%; bottom: 6%;
  height: 26%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 100%, rgba(255, 255, 255, .3), transparent 70%);
  pointer-events: none;
}
.icon3d svg, .ico svg {
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 1px 1px rgba(10, 20, 60, .35));
  width: 27px; height: 27px;
  stroke: #fff;
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.card:hover .icon3d, .card:hover .ico {
  transform: perspective(560px) rotateX(16deg) rotateY(-18deg) translateY(-6px) scale(1.08);
  border-radius: 23px;
}

/* Оттенки задают лишь лёгкий сдвиг фирменного градиента,
   чтобы иконки различались, но читались как один набор. */
.i-azure  { --ico-grad: linear-gradient(145deg, #45d8ff 0%, #3b7bff 52%, #6d5cf7 100%); }
.i-cyan   { --ico-grad: linear-gradient(145deg, #4fd2ff 0%, #2f8ff0 52%, #5b6ff0 100%); }
.i-mint   { --ico-grad: linear-gradient(145deg, #56d8ff 0%, #2f9ef0 52%, #4f7bf5 100%); }
.i-violet { --ico-grad: linear-gradient(145deg, #6ad2ff 0%, #6d6cf7 52%, #9b5cf7 100%); }
.i-rose   { --ico-grad: linear-gradient(145deg, #7ad6ff 0%, #7b6cf7 52%, #c05cf0 100%); }
.i-gold   { --ico-grad: linear-gradient(145deg, #7cc9ff 0%, #4f9df5 52%, #8a5cf7 100%); }

/* ============ Кнопки ============ */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: var(--glass-2);
  backdrop-filter: blur(var(--blur)) saturate(180%);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(180%);
  box-shadow: var(--shadow);
  font-size: 15px;
  font-weight: 550;
  cursor: pointer;
  overflow: hidden;
  transition: transform .35s var(--spring), box-shadow .35s ease, background .3s ease;
  will-change: transform;
}
.btn:hover { box-shadow: var(--shadow-lg); }
.btn:active { transform: scale(.97); }

.btn-primary {
  border: 0;
  color: #fff;
  font-weight: 600;
  background: linear-gradient(100deg, #3b7bff, #6d5cf7 55%, #06b6d4);
  box-shadow: 0 16px 32px -14px rgba(59, 123, 255, .8);
}
.btn-primary:hover { box-shadow: 0 22px 44px -14px rgba(59, 123, 255, .95); }

.btn .ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  background: rgba(255, 255, 255, .45);
  animation: ripple .65s var(--ease) forwards;
  pointer-events: none;
}
@keyframes ripple { to { transform: scale(3.2); opacity: 0; } }

/* ============ Шапка ============ */

.head {
  position: sticky;
  top: 0;
  z-index: 60;
  padding: 14px 0;
  transition: padding .4s var(--ease);
}
.head-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 10px 9px 16px;
  border-radius: 999px;
  border: 1px solid rgba(110, 135, 220, .40);
  /* градиентная стеклянная панель — как блоки и док */
  background:
    linear-gradient(145deg, rgba(120, 162, 255, .14) 0%, rgba(168, 130, 255, .09) 46%, rgba(78, 216, 226, .11) 100%),
    linear-gradient(160deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, .16)),
    rgba(255, 255, 255, .68);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    0 0 0 1px rgba(70, 100, 190, .12),
    0 16px 36px -18px rgba(40, 60, 140, .4);
  backdrop-filter: blur(var(--blur-lg)) saturate(190%);
  -webkit-backdrop-filter: blur(var(--blur-lg)) saturate(190%);
  transition: box-shadow .45s ease;
}
html[data-theme="dark"] .head-in {
  border-color: rgba(150, 175, 255, .26);
  background:
    linear-gradient(145deg, rgba(74, 122, 255, .14) 0%, rgba(138, 96, 240, .10) 46%, rgba(44, 186, 214, .11) 100%),
    linear-gradient(155deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .012)),
    rgba(14, 20, 40, .5);
  box-shadow:
    inset 0 1px 0 rgba(190, 210, 255, .2),
    0 0 0 1px rgba(120, 150, 255, .12),
    0 20px 44px -18px rgba(0, 0, 0, .85),
    0 0 34px -14px rgba(90, 130, 255, .4);
}

.brand { display: flex; align-items: center; gap: 11px; font-weight: 650; font-size: 18px; letter-spacing: -.03em; }
.brand .mark {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  transition: transform .5s var(--spring);
}
.brand:hover .mark { transform: rotate(-8deg) scale(1.08); }
.brand .mark svg {
  width: 34px; height: 34px;
  filter: drop-shadow(0 4px 8px rgba(24, 60, 160, .45));
}
html[data-theme="dark"] .brand .mark svg { filter: drop-shadow(0 0 12px rgba(70, 130, 255, .7)); }

.nav-links { display: flex; gap: 2px; }
.nav-links a {
  padding: 9px 15px;
  border-radius: 999px;
  font-size: 14px;
  color: var(--text-dim);
  transition: color .25s ease, background .25s ease;
}
.nav-links a:hover { color: var(--text); background: var(--glass-3); }
.nav-links a.active { color: var(--text); background: var(--glass-2); box-shadow: var(--ring); }

.head-tools { display: flex; align-items: center; gap: 10px; }

/* компактная кнопка-призыв в шапке */
.head-cta {
  padding: 10px 20px;
  font-size: 14px;
  box-shadow: 0 10px 22px -12px rgba(59, 123, 255, .8);
}
@media (max-width: 560px) {
  .head-cta { display: none; }   /* на узких экранах не тесним язык/тему */
}

.icon-btn {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--stroke);
  background: var(--glass-2);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  cursor: pointer;
  transition: transform .35s var(--spring), background .3s ease;
}
.icon-btn:hover { transform: rotate(-15deg) scale(1.08); }
.icon-btn svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* переключатель языка */
.lang {
  position: relative;
  display: flex;
  padding: 4px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: var(--glass-2);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
}
.lang button {
  position: relative; z-index: 1;
  border: 0; background: none; cursor: pointer;
  padding: 6px 13px;
  border-radius: 999px;
  font-size: 12.5px; font-weight: 650; letter-spacing: .05em;
  color: var(--text-mute);
  transition: color .3s ease;
}
.lang button.on { color: #fff; }
.lang .pill {
  position: absolute; z-index: 0;
  top: 4px; bottom: 4px;
  border-radius: 999px;
  background: linear-gradient(100deg, #3b7bff, #7c5cfa);
  box-shadow: 0 6px 14px -6px rgba(59, 123, 255, .9);
  transition: transform .45s var(--spring), width .45s var(--ease);
}

/* мобильное меню */
.burger { display: none; }

/* ============ Герой ============ */

.hero { padding: 40px 0 0; }
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 34px; align-items: center; }
.hero h1 { margin: 20px 0 18px; }
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 30px; }
.hero-cta .circle-badge { margin-left: 6px; }

.typed { border-right: 2px solid var(--a-blue); padding-right: 3px; animation: caret 1s step-end infinite; }
@keyframes caret { 50% { border-color: transparent; } }

.hero-visual { position: relative; min-height: 470px; }

/* свечение в центре сцены — держит композицию без центрального объекта */
.hero-glow {
  position: absolute;
  left: 50%; top: 50%;
  width: 340px; height: 340px;
  margin: -170px 0 0 -170px;
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(circle at 42% 38%, rgba(120, 170, 255, .45), transparent 58%),
    radial-gradient(circle at 62% 66%, rgba(150, 130, 255, .35), transparent 62%);
  filter: blur(28px);
  animation: glowPulse 7s ease-in-out infinite;
}
html[data-theme="dark"] .hero-glow {
  background:
    radial-gradient(circle at 42% 38%, rgba(90, 150, 255, .4), transparent 58%),
    radial-gradient(circle at 62% 66%, rgba(140, 110, 255, .32), transparent 62%);
}

.float { position: absolute; padding: 14px 16px; border-radius: var(--r-md); animation: float 7s ease-in-out infinite; }
.float.f1 { top: 4%; left: 0; width: 226px; }
/* поднята выше, чтобы не перекрывать «голову» логотипа */
.float.f2 { top: 0; right: 0; width: 246px; animation-delay: -2.2s; }
.float.f3 { bottom: 4%; left: 2%; width: 240px; animation-delay: -4s; }
.float.f4 { bottom: 14%; right: 0; width: 250px; animation-delay: -1.2s; }

/* Карточки сцены выстроены в ровную сетку 2x2, без разброса */
.hero-visual {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-content: center;
  min-height: 0;
}
@media (max-width: 760px) {
  .hero-visual { grid-template-columns: 1fr; }
}
.hero-visual .float {
  position: static;
  width: auto;
  animation: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@keyframes float { 50% { transform: translateY(-14px); } }

/* Промежуточные ширины (981–1180): колонка сцены сужается и виджеты
   f3/f4 начинали налезать друг на друга — уменьшаем плитки и ядро. */
@media (min-width: 981px) and (max-width: 1180px) {




  .float .val { font-size: 18px; }
  .ai-core { transform: translate(-50%, -52%) scale(.88); }
}

.float .lbl { font-size: 11px; color: var(--text-mute); letter-spacing: .05em; text-transform: uppercase; }
.float .val { font-size: 20px; font-weight: 650; margin-top: 2px; letter-spacing: -.02em; }
.float .sub { font-size: 12.5px; color: var(--text-dim); line-height: 1.45; }

.bars { display: flex; align-items: flex-end; gap: 4px; height: 30px; }
.bars i { width: 5px; border-radius: 3px; display: block; background: linear-gradient(180deg, var(--a-cyan), var(--a-blue)); animation: eq 1.3s ease-in-out infinite; }
.bars i:nth-child(1) { height: 40%; }
.bars i:nth-child(2) { height: 78%; animation-delay: .16s; }
.bars i:nth-child(3) { height: 55%; animation-delay: .32s; }
.bars i:nth-child(4) { height: 95%; animation-delay: .48s; }
.bars i:nth-child(5) { height: 62%; animation-delay: .64s; }
@keyframes eq { 50% { transform: scaleY(.42); } }

/* сфера-ассистент */
.orb {
  position: absolute;
  left: 50%; top: 50%;
  width: 290px; height: 290px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, #ffffff 0%, #cfe2ff 16%, #6d9dff 46%, #7c5cfa 72%, #4c1d95 100%);
  box-shadow: 0 40px 90px -26px rgba(76, 29, 149, .55), inset -14px -18px 50px rgba(30, 20, 80, .35), inset 12px 14px 34px rgba(255,255,255,.5);
  animation: orbFloat 9s ease-in-out infinite;
}
.orb .ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(90, 120, 200, .25);
}
.orb .r1 { inset: -14%; animation: spin 18s linear infinite; }
.orb .r2 { inset: -30%; border-style: dashed; animation: spin 34s linear infinite reverse; }
.orb .sat {
  position: absolute;
  top: 50%; left: 50%;
  width: 12px; height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: linear-gradient(135deg, #06b6d4, #10b981);
  box-shadow: 0 0 14px rgba(6, 182, 212, .9);
}
@keyframes orbFloat { 50% { transform: translate(-50%, -56%) scale(1.02); } }
@keyframes spin { to { transform: rotate(360deg); } }

/* ============ Статистика / счётчики ============ */

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 60px; }
/* контент от верха: индикатор и число на одной линии во всех карточках,
   разная длина подписи уходит вниз и не сдвигает число */
.stat {
  padding: 26px 20px;
  text-align: center;
  border-radius: var(--r-md);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}
.stat b { min-height: 1em; }
.stat span { margin-top: 6px; }
.stat b { display: block; font-size: clamp(26px, 3.4vw, 38px); font-weight: 650; letter-spacing: -.04em; }
.stat span { font-size: 13px; color: var(--text-dim); }

/* ---- живые мини-индикаторы над числом ---- */
.stat-fx {
  height: 22px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

/* 24/7 — пульсирующая точка «онлайн» */
.stat-fx.live i {
  position: relative;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--a-mint);
  box-shadow: 0 0 10px var(--a-mint);
}
.stat-fx.live i::after {
  content: "";
  position: absolute; inset: -5px;
  border-radius: 50%;
  border: 2px solid var(--a-mint);
  animation: statPing 1.9s ease-out infinite;
}
@keyframes statPing { 0% { transform: scale(.6); opacity: .8; } 100% { transform: scale(1.6); opacity: 0; } }

/* 98% — заполняющаяся шкала (строка 22px, сам бар 6px по центру) */
.stat-fx.meter {
  width: 66px;
  display: flex;
  align-items: center;
  /* трек рисуем фоном — 6px по центру строки */
  background:
    linear-gradient(rgba(120, 140, 190, .22), rgba(120, 140, 190, .22))
    center / 100% 6px no-repeat;
  border-radius: 999px;
}
.stat-fx.meter s {
  display: block; height: 6px; width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--a-cyan), var(--a-blue), var(--a-violet));
}
.stat.in .stat-fx.meter s { animation: statFill 1.4s .2s var(--ease) forwards; }
@keyframes statFill { to { width: var(--to, 100%); } }

/* 0.4s — эквалайзер скорости */
.stat-fx.eq { align-items: flex-end; height: 22px; }
.stat-fx.eq i {
  width: 5px; border-radius: 3px;
  background: linear-gradient(180deg, var(--a-cyan), var(--a-blue));
  animation: statEq 1s ease-in-out infinite;
}
.stat-fx.eq i:nth-child(1) { height: 40%; }
.stat-fx.eq i:nth-child(2) { height: 78%; animation-delay: .12s; }
.stat-fx.eq i:nth-child(3) { height: 58%; animation-delay: .24s; }
.stat-fx.eq i:nth-child(4) { height: 90%; animation-delay: .36s; }
@keyframes statEq { 50% { transform: scaleY(.45); } }

/* 2 — чипы языков */
.stat-fx.chips em {
  font-style: normal;
  font-size: 10.5px; font-weight: 700; letter-spacing: .05em;
  padding: 3px 8px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, var(--a-blue), var(--a-violet));
  box-shadow: 0 4px 10px -4px rgba(59, 123, 255, .8);
  animation: statChip .5s var(--spring) both;
}
.stat-fx.chips em:nth-child(2) { animation-delay: .12s; background: linear-gradient(135deg, var(--a-cyan), var(--a-blue)); }
.stat-fx.chips em:nth-child(3) { animation-delay: .24s; background: linear-gradient(135deg, var(--a-violet), var(--a-cyan)); }
@keyframes statChip { from { opacity: 0; transform: translateY(6px) scale(.8); } }

/* ============ Сетки ============ */

.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.section-head { margin-bottom: 32px; }
/* h1 в шапке раздела раньше не имел отступа и прилипал к «бровке» */
.section-head h1, .section-head h2 { margin: 16px 0 14px; }
.section-head > .eyebrow + h1,
.section-head > .eyebrow + h2 { margin-top: 18px; }

/* ============ Живое демо-диалога ============ */

.demo { padding: 0; overflow: hidden; }
.demo-head {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--stroke-soft);
}
.demo-head .dot3 { display: flex; gap: 6px; }
.demo-head .dot3 i { width: 10px; height: 10px; border-radius: 50%; display: block; }
.demo-head .dot3 i:nth-child(1) { background: #ff5f57; }
.demo-head .dot3 i:nth-child(2) { background: #febc2e; }
.demo-head .dot3 i:nth-child(3) { background: #28c840; }
.demo-head .t { font-size: 14px; font-weight: 600; }
.demo-head .live {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; color: var(--text-mute);
}
.demo-head .live i { width: 7px; height: 7px; border-radius: 50%; background: var(--a-mint); box-shadow: 0 0 10px var(--a-mint); animation: pulse 1.8s infinite; }

/* фиксированная высота — страница не «прыгает» при перезапуске диалога */
.chat {
  position: relative;
  padding: 18px 22px 22px;
  display: flex;
  flex-direction: column;
  /* лента прижата к низу: свежие реплики всегда видны,
     старые уезжают за верхний край и скрываются градиентом */
  justify-content: flex-end;
  gap: 10px;
  height: 360px;
  overflow: hidden;
}
/* мягкое затухание сверху, чтобы лента не обрывалась резко */
.chat::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 34px;
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(180deg, var(--glass-2), transparent);
}

/* строка сообщения: аватар + пузырь */
.msg-row {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  max-width: 86%;
  animation: msgIn .5s var(--spring) both;
}
.msg-row.bot { flex-direction: row-reverse; align-self: flex-end; }

.msg-av {
  flex: none;
  width: 34px; height: 34px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(140deg, #94a3b8, #64748b);
  box-shadow: 0 8px 16px -8px rgba(20, 30, 70, .7);
}
.msg-row.bot .msg-av { background: linear-gradient(140deg, var(--a-blue), var(--a-violet)); }
.msg-av svg { width: 17px; height: 17px; stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.msg-body { min-width: 0; }
.msg-name { font-size: 11px; color: var(--text-mute); margin: 0 0 4px 4px; letter-spacing: .02em; }
.msg-row.bot .msg-name { text-align: right; margin: 0 4px 4px 0; }
.msg-time { font-size: 10.5px; color: var(--text-mute); margin: 4px 0 0 6px; font-variant-numeric: tabular-nums; }
.msg-row.bot .msg-time { text-align: right; margin: 4px 6px 0 0; }

/* системная плашка по центру */
.sys-chip {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 13px;
  border-radius: 999px;
  font-size: 11.5px;
  color: var(--text-mute);
  background: var(--glass-3);
  border: 1px solid var(--stroke-soft);
  animation: msgIn .5s var(--spring) both;
}
.sys-chip i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--a-mint);
  box-shadow: 0 0 8px var(--a-mint);
}

/* итоговая плашка «заказ оформлен» */
.done-chip {
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 14px;
  font-size: 12.5px;
  font-weight: 600;
  color: #067a55;
  background: rgba(16, 185, 129, .16);
  border: 1px solid rgba(16, 185, 129, .38);
  animation: msgIn .5s var(--spring) both;
}
html[data-theme="dark"] .done-chip { color: #6ee7b7; }
.done-chip svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

/* таймер звонка в шапке панели */
.call-timer {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--text-mute);
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--stroke-soft);
  background: var(--glass-3);
}
/* ширину теперь задаёт .msg-row, иначе текст переносился раньше времени */
.msg-row .msg { max-width: 100%; }
.msg {
  max-width: 78%;
  padding: 12px 16px;
  border-radius: 18px;
  font-size: 14.5px;
  line-height: 1.5;
  animation: msgIn .5s var(--spring) both;
  box-shadow: var(--shadow);
}
@keyframes msgIn { from { opacity: 0; transform: translateY(14px) scale(.96); } }
.msg.user {
  align-self: flex-start;
  background: var(--glass-2);
  border: 1px solid var(--stroke);
  border-bottom-left-radius: 6px;
}
.msg.bot {
  align-self: flex-end;
  color: #fff;
  background: linear-gradient(100deg, #3b7bff, #7c5cfa);
  border-bottom-right-radius: 6px;
}
.msg .who { font-size: 11px; opacity: .7; margin-bottom: 3px; }
.typing { display: inline-flex; gap: 4px; align-items: center; height: 10px; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .5; animation: dotJump 1.1s infinite; }
.typing i:nth-child(2) { animation-delay: .15s; }
.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes dotJump { 0%,60%,100% { transform: translateY(0); opacity: .35; } 30% { transform: translateY(-5px); opacity: 1; } }

.demo-foot { display: flex; align-items: center; gap: 10px; padding: 16px 22px; border-top: 1px solid var(--stroke-soft); }
.demo-foot .fake-input {
  flex: 1;
  padding: 11px 16px;
  border-radius: 999px;
  background: var(--glass-3);
  border: 1px solid var(--stroke);
  color: var(--text-mute);
  font-size: 13.5px;
}

/* ============ Бегущая строка интеграций ============ */

.marquee {
  position: relative;
  overflow: hidden;
  padding: 18px 0;
  border-radius: var(--r-md);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-row { display: flex; width: max-content; gap: 12px; animation: slide 32s linear infinite; }
.marquee:hover .marquee-row { animation-play-state: paused; }
@keyframes slide { to { transform: translateX(-50%); } }

.chips { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.chip {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 20px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: var(--glass-2);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  box-shadow: var(--shadow);
  font-size: 14px;
  color: var(--text-dim);
  white-space: nowrap;
  transition: transform .4s var(--spring), color .3s ease;
}
.chip:hover { transform: translateY(-4px) scale(1.03); color: var(--text); }
.chip .dot { width: 9px; height: 9px; border-radius: 50%; background: linear-gradient(135deg, var(--a-cyan), var(--a-mint)); }

/* ============ Шаги ============ */

.steps { display: grid; gap: 14px; }
.step { display: flex; gap: 18px; align-items: flex-start; padding: 22px 24px; border-radius: var(--r-md); }
.step .num {
  flex: none;
  width: 42px; height: 42px;
  border-radius: 14px;
  display: grid; place-items: center;
  font-weight: 650;
  color: #fff;
  background: linear-gradient(135deg, var(--a-blue), var(--a-violet));
  box-shadow: 0 10px 20px -10px rgba(59, 123, 255, .9);
}

/* ============ Плеер ============ */

.player { padding: 28px; border-radius: var(--r-lg); }
.player-top { display: flex; align-items: center; gap: 18px; }
.play-btn {
  position: relative; /* без этого кольцо ::after цеплялось за .player и уезжало */
  flex: none;
  width: 66px; height: 66px;
  border-radius: 50%;
  border: 0;
  cursor: pointer;
  display: grid; place-items: center;
  background: linear-gradient(135deg, #3b7bff, #7c5cfa 55%, #06b6d4);
  box-shadow: 0 18px 34px -14px rgba(59, 123, 255, .9);
  transition: transform .35s var(--spring);
}
.play-btn::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  border: 2px solid rgba(59, 123, 255, .5);
  opacity: 0;
  pointer-events: none;
}
.play-btn.playing::after { animation: pingRing 1.8s ease-out infinite; }
@keyframes pingRing { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.55); opacity: 0; } }
.play-btn:hover { transform: scale(1.07); }
.play-btn:active { transform: scale(.95); }
.play-btn svg { width: 24px; height: 24px; fill: #fff; }

.player-meta { flex: 1; min-width: 0; }
.player-meta .t { font-weight: 650; font-size: 17px; letter-spacing: -.02em; }
.player-meta .s { font-size: 13px; color: var(--text-dim); margin-top: 2px; }
.time { font-variant-numeric: tabular-nums; font-size: 13px; color: var(--text-mute); }

.track { position: relative; height: 6px; margin-top: 20px; border-radius: 999px; background: rgba(120, 134, 160, .22); cursor: pointer; }
.track .fill { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--a-blue), var(--a-cyan), var(--a-mint)); }
.track .knob { position: absolute; top: 50%; left: 0; width: 15px; height: 15px; margin-left: -7.5px; border-radius: 50%; background: #fff; transform: translateY(-50%); box-shadow: 0 3px 10px rgba(16, 26, 51, .35), 0 0 0 1px rgba(16,26,51,.06); }

.wave { display: flex; align-items: center; gap: 3px; height: 62px; margin-top: 22px; }
.wave i {
  flex: 1; min-width: 2px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--a-cyan), var(--a-blue));
  height: 12%;
  opacity: .35;
  transition: height .12s linear, opacity .3s ease;
}
.wave.on i { opacity: 1; }

.speeds { display: flex; gap: 8px; margin-top: 20px; flex-wrap: wrap; }
.speed {
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: var(--glass-3);
  font-size: 13px;
  cursor: pointer;
  transition: transform .3s var(--spring), background .3s ease, color .3s ease;
}
.speed:hover { transform: translateY(-2px); }
.speed.on { color: #fff; background: linear-gradient(100deg, var(--a-blue), var(--a-violet)); border-color: transparent; }

/* ============ Тарифы ============ */

.price { padding: 30px 26px; border-radius: var(--r-lg); display: flex; flex-direction: column; }
.price .amount { font-size: 38px; font-weight: 650; letter-spacing: -.04em; margin: 14px 0 4px; }
.price .per { font-size: 13px; color: var(--text-mute); }
.price ul { list-style: none; padding: 0; margin: 22px 0 26px; display: grid; gap: 11px; }
.price li { display: flex; gap: 10px; font-size: 14.5px; color: var(--text-dim); line-height: 1.45; }
.price li svg { flex: none; width: 18px; height: 18px; margin-top: 1px; stroke: var(--a-mint); fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.price .btn { margin-top: auto; }
.price.featured { border-color: rgba(59, 123, 255, .35); box-shadow: 0 40px 80px -30px rgba(59, 123, 255, .55), inset 0 1px 0 var(--sheen); }
.badge {
  position: absolute;
  top: 18px; right: 18px;
  z-index: 4;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 11.5px; font-weight: 650;
  color: #fff;
  background: linear-gradient(100deg, var(--a-blue), var(--a-violet));
}

/* ============ Калькулятор ============ */

.calc { padding: 30px; border-radius: var(--r-lg); }
.calc-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 28px; align-items: center; }
.slider-row { margin-bottom: 22px; }
.slider-row .top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.slider-row .top span { font-size: 14px; color: var(--text-dim); }
.slider-row .top b { font-size: 18px; font-weight: 650; }

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: rgba(120, 134, 160, .22);
  outline: none;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #fff;
  border: 0;
  cursor: pointer;
  box-shadow: 0 3px 12px rgba(16,26,51,.3), 0 0 0 4px rgba(59,123,255,.9) inset;
  transition: transform .25s var(--spring);
}
input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.15); }
input[type="range"]::-moz-range-thumb {
  width: 22px; height: 22px; border: 0; border-radius: 50%;
  background: #3b7bff; cursor: pointer;
}

.calc-out { text-align: center; padding: 26px 20px; border-radius: var(--r-md); }
.calc-out .k { font-size: 13px; color: var(--text-mute); }
.calc-out .big {
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 650;
  letter-spacing: -.04em;
  margin: 6px 0 2px;
  font-variant-numeric: tabular-nums;
}
.calc-out .sub { font-size: 13.5px; color: var(--text-dim); margin-top: 12px; line-height: 1.5; }

/* ============ FAQ ============ */

.faq { border-radius: var(--r-md); }
.faq + .faq { margin-top: 12px; }
.faq-q {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 24px;
  background: none; border: 0; cursor: pointer;
  text-align: left;
  font-size: 16px; font-weight: 550;
}
/* только внешний span: у вложенного svg тоже класс .chev,
   из-за чего поворот применялся дважды и стрелка не переворачивалась */
.faq-q > .chev { display: flex; flex: none; transition: transform .45s var(--spring); }
.faq-q .chev svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.faq.open .faq-q > .chev { transform: rotate(180deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .5s var(--ease); }
.faq-a p { margin: 0; padding: 0 24px 22px; color: var(--text-dim); font-size: 14.5px; line-height: 1.65; }

/* ============ Формы ============ */

.field { display: grid; gap: 8px; }
.field label { font-size: 13px; color: var(--text-dim); }
.field input, .field textarea, .field select {
  width: 100%;
  padding: 14px 16px;
  border-radius: var(--r-sm);
  border: 1px solid var(--stroke);
  background: var(--glass-3);
  color: var(--text);
  font: inherit; font-size: 15px;
  outline: none;
  transition: border-color .3s ease, background .3s ease, box-shadow .3s ease;
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus {
  border-color: rgba(59, 123, 255, .55);
  background: var(--glass-2);
  box-shadow: 0 0 0 4px rgba(59, 123, 255, .12);
}
.field input::placeholder, .field textarea::placeholder { color: var(--text-mute); }
.field select option { background: var(--bg-1); color: var(--text); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-note {
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: var(--r-sm);
  border: 1px solid rgba(16, 185, 129, .35);
  background: rgba(16, 185, 129, .12);
  font-size: 14px;
  display: none;
}
.form-note.show { display: block; animation: fadeUp .5s var(--ease) both; }

/* ============ Контакты ============ */

.info { display: grid; gap: 14px; }
.info-row { display: flex; gap: 14px; align-items: flex-start; }
.info-row .ico { width: 42px; height: 42px; border-radius: 14px; margin: 0; }
.info-row .ico svg { width: 20px; height: 20px; }
.info-row .k { font-size: 12.5px; color: var(--text-mute); }
.info-row .v { font-size: 15px; line-height: 1.5; margin-top: 2px; }

.bubble { padding: 22px 24px; border-radius: var(--r-md); }
.bubble .who { font-size: 13px; color: var(--text-mute); margin-bottom: 8px; }
.bubble .say { font-size: 15.5px; line-height: 1.6; margin: 0; }

/* ---- логотипы клиентов ---- */
.logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px 30px;
  padding: 4px 0 2px;
}
.logo-mark {
  font-size: 20px;
  font-weight: 650;
  letter-spacing: -.02em;
  color: var(--text-mute);
  opacity: .8;
  transition: opacity .3s ease, transform .3s var(--ease);
}
.logo-mark b { color: var(--text-dim); font-weight: 800; }
.logo-mark:hover { opacity: 1; transform: translateY(-2px); }

/* ---- подпись под отзывом ---- */
.quote-by { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.quote-by .qav {
  flex: none;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 50%;
  font-size: 13px; font-weight: 700; color: #fff;
  background: linear-gradient(140deg, var(--a-blue), var(--a-violet));
  box-shadow: 0 8px 16px -8px rgba(59, 123, 255, .8);
}
.quote-by b { display: block; font-size: 14.5px; font-weight: 650; }
.quote-by i { display: block; font-size: 12.5px; font-style: normal; color: var(--text-mute); margin-top: 1px; }

/* ============ CTA-полоса ============ */

.cta-band { margin-top: 30px; padding: 46px 40px; border-radius: var(--r-xl); text-align: center; }
.cta-band .lead { margin: 14px auto 0; }
.cta-band .row { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

/* ============ Футер (iOS) ============ */

.footer { margin-top: 96px; padding: 40px 34px 30px; border-radius: var(--r-xl); }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 30px; }
.footer h4 { margin: 0 0 14px; font-size: 12px; font-weight: 650; letter-spacing: .09em; text-transform: uppercase; color: var(--text-mute); }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer ul a { font-size: 14.5px; color: var(--text-dim); transition: color .25s ease, transform .3s var(--ease); display: inline-block; }
.footer ul a:hover { color: var(--text); transform: translateX(3px); }
.footer .about p { color: var(--text-dim); font-size: 14.5px; line-height: 1.6; margin: 12px 0 0; max-width: 34ch; }

.socials { display: flex; gap: 10px; margin-top: 20px; }
.socials a {
  width: 40px; height: 40px;
  border-radius: 13px;
  display: grid; place-items: center;
  border: 1px solid var(--stroke);
  background: var(--glass-2);
  transition: transform .4s var(--spring), background .3s ease;
}
.socials a:hover { transform: translateY(-4px) rotate(-8deg); }
.socials svg { width: 18px; height: 18px; stroke: var(--text); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.footer-bottom {
  margin-top: 32px; padding-top: 22px;
  border-top: 1px solid var(--stroke-soft);
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  font-size: 13px; color: var(--text-mute);
}
.home-ind { width: 136px; height: 5px; border-radius: 999px; background: rgba(120, 134, 160, .35); margin: 24px auto 0; }

/* ============ Док ============ */

.dock-wrap {
  position: fixed;
  left: 0; right: 0;
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 90;
  display: flex; justify-content: center;
  pointer-events: none;
}
/* Тёмная тема: док заметнее — плотнее подложка, светлая кромка, внутренний свет */
html[data-theme="dark"] .dock {
  background: rgba(20, 28, 52, .62);
  border-color: rgba(150, 180, 255, .22);
  box-shadow:
    0 26px 60px -20px rgba(0, 0, 0, .95),
    inset 0 1px 0 rgba(190, 210, 255, .3),
    inset 0 -14px 26px -18px rgba(90, 140, 255, .55);
}
html[data-theme="dark"] .dock-item { color: rgba(226, 234, 255, .62); }
html[data-theme="dark"] .dock-item:hover { color: #fff; }
html[data-theme="dark"] .dock-item:hover .dock-ico { background: rgba(140, 175, 255, .16); }
html[data-theme="dark"] .dock-item.active { color: #fff; }
html[data-theme="dark"] .dock-item.active .dock-ico {
  background: linear-gradient(140deg, #4f83ff, #8b6cff);
  box-shadow: 0 10px 22px -8px rgba(79, 131, 255, .95), 0 0 20px -4px rgba(139, 108, 255, .7),
              inset 0 1px 0 rgba(255, 255, 255, .5);
}
html[data-theme="dark"] .dock-item.active .dotmark { background: #7fd4ff; box-shadow: 0 0 10px #7fd4ff; }

.dock {
  pointer-events: auto;
  display: flex; align-items: stretch; gap: 4px;
  padding: 8px 10px;
  border-radius: 24px;
  border: 1px solid rgba(110, 135, 220, .40);
  /* градиентная стеклянная панель — как у блоков */
  background:
    linear-gradient(145deg, rgba(120, 162, 255, .16) 0%, rgba(168, 130, 255, .10) 46%, rgba(78, 216, 226, .13) 100%),
    linear-gradient(160deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, .16)),
    rgba(255, 255, 255, .68);
  backdrop-filter: blur(var(--blur-lg)) saturate(190%);
  -webkit-backdrop-filter: blur(var(--blur-lg)) saturate(190%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    0 0 0 1px rgba(70, 100, 190, .14),
    0 24px 50px -20px rgba(40, 60, 140, .45);
}
html[data-theme="dark"] .dock {
  border-color: rgba(150, 175, 255, .26);
  background:
    linear-gradient(145deg, rgba(74, 122, 255, .16) 0%, rgba(138, 96, 240, .11) 46%, rgba(44, 186, 214, .12) 100%),
    linear-gradient(155deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .012)),
    rgba(14, 20, 40, .55);
  box-shadow:
    inset 0 1px 0 rgba(190, 210, 255, .2),
    0 0 0 1px rgba(120, 150, 255, .12),
    0 26px 54px -20px rgba(0, 0, 0, .9),
    0 0 40px -14px rgba(90, 130, 255, .45);
}
/* Док: монохромные иконки с подписями, активный пункт — цветная плитка */
.dock-item {
  position: relative;
  padding: 5px;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--text-mute);
  transition: color .3s ease, background .3s ease, transform .35s var(--spring);
}
.dock-item .dock-ico {
  position: relative;
  z-index: 1;
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  transition: background .35s var(--ease), box-shadow .35s var(--ease);
}
/* подписи скрыты — док только из иконок, но текст остаётся для скринридеров */
.dock-item .dock-label {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.dock-item:hover { color: var(--text); transform: translateY(-3px); }
.dock-item:hover .dock-ico { background: var(--glass-3); }

.dock-item.active { color: var(--text); }
.dock-item.active .dock-ico {
  background: linear-gradient(140deg, var(--a-blue), var(--a-violet));
  box-shadow: 0 8px 18px -8px var(--a-blue), inset 0 1px 0 rgba(255, 255, 255, .45);
}
.dock-item.active svg { stroke: #fff; }
.dock-item svg {
  position: relative;
  z-index: 2;
  width: 22px; height: 22px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.dock-item.active .dotmark {
  position: absolute;
  bottom: 1px; left: 50%;
  width: 5px; height: 5px;
  margin-left: -2.5px;
  border-radius: 50%;
  background: var(--a-cyan);
  box-shadow: 0 0 8px var(--a-cyan);
}

/* кнопка «наверх» */
.to-top {
  position: fixed;
  right: 22px;
  bottom: calc(var(--dock-h) + 26px);
  z-index: 80;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--stroke);
  background: var(--glass-2);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  box-shadow: var(--shadow);
  cursor: pointer;
  opacity: 0;
  transform: translateY(14px) scale(.9);
  pointer-events: none;
  transition: opacity .4s ease, transform .4s var(--spring);
}
.to-top.show { opacity: 1; transform: none; pointer-events: auto; }
.to-top svg { width: 18px; height: 18px; stroke: var(--text); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ============ Анимации появления ============ */

.reveal { opacity: 0; transform: translateY(28px); }
.reveal.in { animation: fadeUp .9s var(--ease) forwards; }
@keyframes fadeUp { to { opacity: 1; transform: none; } }

.lang-swap [data-i18n] { animation: langIn .34s var(--ease) both; }
@keyframes langIn { from { opacity: .2; filter: blur(4px); } to { opacity: 1; filter: none; } }

/* Переход между страницами.
   ВАЖНО: никаких animation/transform на <body> — иначе body становится
   containing block для position:fixed и док с фоном «отклеиваются». */
.veil {
  position: fixed;
  inset: 0;
  z-index: 999;
  pointer-events: none;
  background: var(--bg-0);
  opacity: 1;
  transition: opacity .45s var(--ease);
}
.veil.gone { opacity: 0; }
.veil.leaving { opacity: 1; transition-duration: .1s; }

/* ============ Адаптив ============ */

@media (max-width: 980px) {
  .hero-grid, .calc-grid { grid-template-columns: 1fr; }
  .hero-visual { min-height: 420px; margin-top: 20px; }
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .nav-links { display: none; }
}

@media (max-width: 640px) {
  /* на мобильных размываем слабее и убираем лишние слои — так плавнее */
  :root { --blur: 9px; --blur-lg: 13px; }
  .bg .b4, .bg .b5 { display: none; }
  .bg span { filter: blur(48px); }
  .bg::after { display: none; }
  .glass::after { display: none; }
  .chat { height: 420px; }

  .section { padding: 62px 0 4px; }
  .grid-2, .grid-3, .grid-4, .form-grid { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr; }
  .footer { padding: 30px 22px 26px; }
  .cta-band { padding: 34px 22px; }
  .orb { width: 210px; height: 210px; }
  /* Раньше виджеты налезали друг на друга: f1 и f2 пересекались по горизонтали,
     а f4 держал инлайновую ширину. Теперь строгая сетка 2×2 по углам сцены. */


    padding: 12px 14px;
  }




  .float .val { font-size: 18px; }
  .float .sub { font-size: 12px; }
  .hero-visual { min-height: 480px; }
  .dock { gap: 2px; padding: 7px 8px; border-radius: 22px; }
  .dock-item { padding: 4px; }
  .dock-item .dock-ico { width: 40px; height: 40px; border-radius: 13px; }
  .dock-item svg { width: 19px; height: 19px; }
  .dock-item:hover { transform: translateY(-2px); }
  .to-top { right: 14px; }
  .player-top { flex-wrap: wrap; }
  .mic3d { display: none; }
  .ai-core { transform: translate(-50%, -52%) scale(.66); }
  .beams, .grid-layer, .motes { display: none; }
  .spotlight { display: none; }
  .head-in { padding: 8px; }
}

/* ============ Доступность и указатель ============ */

a, button, .chip, .dock-item, .faq-q, .speed, input[type="range"] { cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--a-blue);
  outline-offset: 3px;
  border-radius: 6px;
}
html[data-theme="dark"] :focus-visible { outline-color: var(--a-cyan); }

/* .glass режет overflow — внешний контур фокуса внутри стекла обрезался.
   Для вложенных элементов уводим обводку внутрь. */
.glass :focus-visible { outline-offset: -3px; }
.glass .btn:focus-visible,
.glass .chip:focus-visible,
.glass .speed:focus-visible { outline-offset: 2px; }

/* ============ Состояния интерактивных элементов ============ */

.btn:focus-visible { box-shadow: var(--shadow-lg); }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: scale(.97) translateY(0); }
.btn:disabled,
.btn[aria-disabled="true"],
.btn.is-disabled {
  opacity: .5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
  filter: grayscale(.35);
  pointer-events: none;
}

.nav-links a:active { transform: scale(.96); }
.icon-btn:active { transform: rotate(-15deg) scale(.94); }
.lang button:hover:not(.on) { color: var(--text); }
.dock-item:active { transform: translateY(-8px) scale(1.06); }
.chip:active { transform: translateY(-1px) scale(.99); }
.speed:active { transform: translateY(0) scale(.96); }
.socials a:active { transform: translateY(-1px) rotate(-4deg); }

/* FAQ: до правки строка вопроса никак не откликалась на курсор */
.faq-q { transition: background .25s ease, color .25s ease; }
.faq-q:hover { background: var(--glass-3); }
.faq-q:hover > .chev { transform: translateY(2px); }
.faq.open .faq-q:hover > .chev { transform: rotate(180deg) translateY(2px); }
.faq-q:active { background: var(--glass-2); }

/* Плеер: дорожка перемотки теперь доступна с клавиатуры */
.track:hover .knob, .track:focus-visible .knob { transform: translateY(-50%) scale(1.2); }
.track .knob { transition: transform .25s var(--spring); }
.play-btn:disabled,
.player.is-error .play-btn { opacity: .45; cursor: not-allowed; box-shadow: none; }
.player.is-error .play-btn:hover { transform: none; }
.player.is-loading .wave i { animation: waveIdle 1.4s ease-in-out infinite; }
@keyframes waveIdle { 50% { height: 26%; opacity: .55; } }

/* Формы: заблокированные поля и подсветка ошибки */
.field input:disabled, .field textarea:disabled, .field select:disabled {
  opacity: .55;
  cursor: not-allowed;
}
.field input:hover:not(:disabled),
.field textarea:hover:not(:disabled),
.field select:hover:not(:disabled) { border-color: rgba(59, 123, 255, .35); }
.field.invalid input, .field.invalid textarea {
  border-color: rgba(244, 63, 142, .6);
  box-shadow: 0 0 0 4px rgba(244, 63, 142, .12);
}

/* Кнопка отправки: состояние «отправляем» */
.btn.is-sending { color: transparent; pointer-events: none; }
.btn.is-sending::before {
  content: "";
  position: absolute;
  z-index: 4;
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .35);
  border-top-color: #fff;
  animation: spin .7s linear infinite;
}

/* Ссылки в контактах читаются как ссылки */
.info-row .v a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color .25s ease; }
.info-row .v a:hover { color: var(--a-blue); }

/* минимальная зона касания */
.dock-item, .icon-btn, .to-top, .play-btn, .lang button { min-width: 38px; min-height: 38px; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ============ Круглый вращающийся бейдж ============ */

.circle-badge {
  position: relative;
  width: 132px; height: 132px;
  display: grid;
  place-items: center;
}
.circle-badge .spin-text {
  position: absolute;
  inset: 0;
  animation: spin 16s linear infinite;
}
.circle-badge .spin-text text {
  font-size: 10.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  fill: var(--text-dim);
}
.circle-badge .core {
  width: 46px; height: 46px;
  border-radius: 50%;
  display: grid; place-items: center;
  color: #fff;
  background: linear-gradient(135deg, var(--a-blue), var(--a-violet));
  box-shadow: 0 12px 26px -10px var(--a-violet);
  transition: transform .4s var(--spring);
}
.circle-badge:hover .core { transform: scale(1.12) rotate(90deg); }
.circle-badge .core svg { width: 20px; height: 20px; stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; }

/* ============ Метка-пилюля ============ */

.pill-label {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 13px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: var(--glass-2);
  font-size: 11.5px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* ============ Слои сцены: лучи, сетка, частицы ============ */

.beams {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    conic-gradient(from 200deg at 22% 8%, rgba(255,255,255,.85) 0deg, transparent 26deg, transparent 340deg, rgba(255,255,255,.5) 360deg),
    conic-gradient(from 20deg at 82% 4%, rgba(190, 215, 255, .7) 0deg, transparent 22deg);
  filter: blur(24px);
  opacity: .5;
  animation: beamShift 22s ease-in-out infinite alternate;
}
@keyframes beamShift { to { transform: translate3d(2%, 1.5%, 0) rotate(2deg); opacity: .34; } }
html[data-theme="dark"] .beams {
  background:
    conic-gradient(from 200deg at 22% 8%, rgba(80, 130, 255, .34) 0deg, transparent 24deg),
    conic-gradient(from 20deg at 82% 4%, rgba(124, 92, 250, .3) 0deg, transparent 20deg);
  opacity: .75;
}

/* переливающаяся плёнка: медленно вращается, даёт «нефтяной» отлив */
.sheen-layer {
  position: fixed;
  inset: -30%;
  z-index: -2;
  pointer-events: none;
  background: conic-gradient(
    from 0deg,
    rgba(120, 170, 255, .55) 0deg,
    rgba(140, 240, 220, .45) 60deg,
    rgba(255, 200, 240, .5) 130deg,
    rgba(190, 170, 255, .5) 200deg,
    rgba(255, 225, 180, .45) 270deg,
    rgba(120, 170, 255, .55) 360deg
  );
  filter: blur(90px);
  opacity: .5;
  mix-blend-mode: soft-light;
  animation: sheenSpin 40s linear infinite;
}
@keyframes sheenSpin { to { transform: rotate(360deg); } }
html[data-theme="dark"] .sheen-layer { opacity: .42; mix-blend-mode: screen; filter: blur(110px); }

.grid-layer {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(50, 80, 160, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(50, 80, 160, .07) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(72% 60% at 50% 34%, #000 0%, transparent 78%);
  -webkit-mask-image: radial-gradient(72% 60% at 50% 34%, #000 0%, transparent 78%);
}
html[data-theme="dark"] .grid-layer {
  background-image:
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
}

.motes { position: fixed; inset: 0; z-index: -2; pointer-events: none; overflow: hidden; }
.motes i {
  position: absolute;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff, rgba(255,255,255,0) 70%);
  box-shadow: 0 0 10px rgba(120, 160, 255, .8);
  opacity: .55;
  animation: mote 18s linear infinite;
}
@keyframes mote {
  0% { transform: translateY(20px) scale(.7); opacity: 0; }
  15% { opacity: .7; }
  85% { opacity: .55; }
  100% { transform: translateY(-180px) scale(1.1); opacity: 0; }
}
html[data-theme="dark"] .motes i { box-shadow: 0 0 12px rgba(80, 130, 255, .9); }

/* ============ Подсветка карточки за курсором ============ */

.card, .price, .bubble, .step, .demo, .player, .calc { --mx: 50%; --my: 0%; }
.card::after, .price::after, .calc::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity .45s ease;
  background: radial-gradient(340px circle at var(--mx) var(--my), rgba(255, 255, 255, .55), transparent 62%);
}
.card:hover::after, .price:hover::after, .calc:hover::after { opacity: 1; }
html[data-theme="dark"] .card::after,
html[data-theme="dark"] .price::after,
html[data-theme="dark"] .calc::after {
  background: radial-gradient(340px circle at var(--mx) var(--my), rgba(120, 160, 255, .22), transparent 62%);
}

/* ============ 3D-стопка карт (тарифы) ============ */

.stack3d {
  position: relative;
  width: 230px; height: 150px;
  margin: 0 auto 34px;
  perspective: 900px;
}
.stack3d .plate {
  position: absolute;
  inset: 0;
  border-radius: 18px;
  border: 1px solid var(--stroke);
  background: linear-gradient(140deg, rgba(255,255,255,.6), rgba(255,255,255,.18));
  box-shadow: var(--shadow);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  transform-style: preserve-3d;
  animation: plateFloat 7s ease-in-out infinite;
}
.stack3d .p1 { transform: rotateX(52deg) rotateZ(-18deg) translateZ(0px); opacity: .5; }
.stack3d .p2 { transform: rotateX(52deg) rotateZ(-18deg) translateZ(22px); opacity: .75; animation-delay: -1.2s; }
.stack3d .p3 {
  transform: rotateX(52deg) rotateZ(-18deg) translateZ(44px);
  animation-delay: -2.4s;
  background: linear-gradient(140deg, var(--a-blue), var(--a-violet));
  border-color: transparent;
  display: grid;
  place-items: center;
  color: #fff;
}
.stack3d .p3 svg { width: 40px; height: 40px; stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@keyframes plateFloat { 50% { translate: 0 -10px; } }
html[data-theme="dark"] .stack3d .plate { background: linear-gradient(140deg, rgba(255,255,255,.09), rgba(255,255,255,.02)); }
html[data-theme="dark"] .stack3d .p3 { background: linear-gradient(140deg, var(--a-blue), var(--a-violet)); }

/* ============ Проявление заголовков «шторкой» ============
   Маска не ломает градиентный текст (background-clip: text),
   в отличие от разбивки на span-ы с трансформом. */

/* Маску к градиентному тексту применять нельзя — ломается background-clip.
   Анимируем сам заголовок: сдвиг + сжатие трекинга. */
.reveal.in h1, .reveal.in h2 { animation: headIn .95s var(--ease) .08s both; }
@keyframes headIn {
  from { opacity: 0; transform: translateY(18px); letter-spacing: .01em; filter: blur(6px); }
  to   { opacity: 1; transform: none; letter-spacing: -.035em; filter: none; }
}

/* ============ 3D-ядро ИИ-оператора ============ */

.ai-core {
  position: absolute;
  left: 50%; top: 50%;
  width: 330px; height: 330px;
  transform: translate(-50%, -52%);
  perspective: 1100px;
}

.core-glow {
  position: absolute;
  inset: -26%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(110, 150, 255, .5), transparent 62%);
  filter: blur(26px);
  animation: glowPulse 5.5s ease-in-out infinite;
}
@keyframes glowPulse { 50% { transform: scale(1.12); opacity: .75; } }
html[data-theme="dark"] .core-glow { background: radial-gradient(circle, rgba(80, 130, 255, .5), transparent 62%); }

/* ============ Объёмный логотип в центре сцены ============ */

.logo3d {
  position: absolute;
  left: 50%; top: 50%;
  width: 216px; height: 216px;
  margin: -108px 0 0 -108px;
  display: grid;
  place-items: center;
  transform-style: preserve-3d;
  animation: coreFloat 8s ease-in-out infinite;
}
.logo3d .lg-inner {
  position: relative;
  width: 100%; height: 100%;
  display: grid;
  place-items: center;
  animation: logoTilt 9s ease-in-out infinite alternate;
  transform-style: preserve-3d;
}
@keyframes logoTilt {
  from { transform: rotateY(-13deg) rotateX(6deg); }
  to   { transform: rotateY(13deg) rotateX(-4deg); }
}

.logo3d svg {
  width: 80%; height: 80%;
  overflow: visible;
  /* послойная «экструзия»: каждая тень наслаивается на предыдущую */
  filter:
    drop-shadow(1.4px 1.6px 0 #1c46b8)
    drop-shadow(1.4px 1.6px 0 #1a40aa)
    drop-shadow(1.4px 1.6px 0 #17399b)
    drop-shadow(1.4px 1.6px 0 #14328c)
    drop-shadow(1.4px 1.6px 0 #122c7d)
    drop-shadow(0 26px 34px rgba(18, 38, 110, .55));
}
html[data-theme="dark"] .logo3d svg {
  filter:
    drop-shadow(1.4px 1.6px 0 #1b3ea8)
    drop-shadow(1.4px 1.6px 0 #18379a)
    drop-shadow(1.4px 1.6px 0 #15308b)
    drop-shadow(1.4px 1.6px 0 #12297c)
    drop-shadow(1.4px 1.6px 0 #0f226d)
    drop-shadow(0 0 42px rgba(70, 130, 255, .65));
}

/* блик по стеклу логотипа */
.logo3d .shine {
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle at 30% 24%, rgba(255, 255, 255, .55), transparent 46%);
  mix-blend-mode: screen;
  animation: shineDrift 7s ease-in-out infinite alternate;
}
@keyframes shineDrift { to { transform: translate(10px, 8px) scale(1.05); } }

/* эквалайзер под логотипом — «оператор говорит» */
.logo3d .eq {
  position: absolute;
  left: 50%; bottom: 4%;
  transform: translateX(-50%);
  display: flex; align-items: flex-end; gap: 4px;
  height: 24px;
}
.logo3d .eq i {
  width: 4px; border-radius: 3px; display: block;
  background: linear-gradient(180deg, var(--a-cyan), var(--a-blue));
  box-shadow: 0 0 10px rgba(59, 123, 255, .7);
  animation: eq 1.2s ease-in-out infinite;
}
.logo3d .eq i:nth-child(1) { height: 34%; }
.logo3d .eq i:nth-child(2) { height: 72%; animation-delay: .12s; }
.logo3d .eq i:nth-child(3) { height: 100%; animation-delay: .24s; }
.logo3d .eq i:nth-child(4) { height: 60%; animation-delay: .36s; }
.logo3d .eq i:nth-child(5) { height: 40%; animation-delay: .48s; }

/* сама сфера */
.orb3d {
  position: absolute;
  left: 50%; top: 50%;
  width: 214px; height: 214px;
  margin: -107px 0 0 -107px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 31% 22%, #ffffff 0%, #dbe9ff 7%, #86b4ff 28%, #3f63ec 54%, #2b1f96 76%, #120b45 100%);
  box-shadow:
    inset -18px -22px 48px rgba(14, 10, 55, .6),
    inset 16px 18px 38px rgba(255, 255, 255, .55),
    0 34px 70px -20px rgba(40, 50, 150, .65),
    0 0 60px -14px rgba(90, 140, 255, .5);
  animation: coreFloat 8s ease-in-out infinite;
  overflow: hidden;
}
@keyframes coreFloat { 50% { transform: translateY(-12px); } }

/* переливающийся «поток данных» внутри сферы */
.orb3d .swirl {
  position: absolute;
  inset: -30%;
  background: conic-gradient(from 0deg, transparent 0deg, rgba(120, 235, 255, .55) 70deg, transparent 150deg, rgba(255, 130, 220, .5) 240deg, transparent 320deg);
  filter: blur(14px);
  mix-blend-mode: screen;
  animation: spin 9s linear infinite;
}
.orb3d .gloss {
  position: absolute;
  left: 14%; top: 7%;
  width: 46%; height: 32%;
  border-radius: 50%;
  background: linear-gradient(160deg, rgba(255, 255, 255, .98), rgba(255, 255, 255, 0) 72%);
  filter: blur(2px);
}
/* контровой свет по нижней кромке — сфера отрывается от фона */
.orb3d .rim {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(120% 90% at 78% 92%, rgba(120, 200, 255, .65), transparent 46%),
    radial-gradient(90% 70% at 20% 88%, rgba(160, 130, 255, .45), transparent 52%);
  mix-blend-mode: screen;
}
/* «дыхание» голосовой волны на сфере */
.orb3d .eq { position: absolute; left: 50%; bottom: 26%; transform: translateX(-50%); display: flex; align-items: flex-end; gap: 3px; height: 26px; }
.orb3d .eq i {
  width: 4px; border-radius: 3px; display: block;
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 0 8px rgba(255, 255, 255, .8);
  animation: eq 1.2s ease-in-out infinite;
}
.orb3d .eq i:nth-child(1) { height: 34%; }
.orb3d .eq i:nth-child(2) { height: 72%; animation-delay: .12s; }
.orb3d .eq i:nth-child(3) { height: 100%; animation-delay: .24s; }
.orb3d .eq i:nth-child(4) { height: 60%; animation-delay: .36s; }
.orb3d .eq i:nth-child(5) { height: 40%; animation-delay: .48s; }

html[data-theme="dark"] .orb3d {
  background: radial-gradient(circle at 30% 24%, #e8f0ff 0%, #a8c8ff 12%, #3b7bff 42%, #4f46e5 68%, #1e1b6b 90%, #0b0a33 100%);
  box-shadow:
    inset -16px -20px 44px rgba(10, 14, 50, .6),
    inset 14px 16px 34px rgba(255, 255, 255, .35),
    0 0 80px -14px rgba(80, 130, 255, .75);
}

/* тень-подставка: объект «стоит» в пространстве */
.core-shadow {
  position: absolute;
  left: 50%; bottom: 2%;
  width: 210px; height: 34px;
  margin-left: -105px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(40, 50, 120, .35), transparent 70%);
  filter: blur(8px);
  animation: shadowPulse 8s ease-in-out infinite;
}
@keyframes shadowPulse { 50% { transform: scale(.86); opacity: .7; } }
html[data-theme="dark"] .core-shadow { background: radial-gradient(ellipse, rgba(80, 130, 255, .35), transparent 70%); }

/* кольца-орбиты с узлами каналов связи */
.orbit {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: rotateX(70deg);
  animation: spin 26s linear infinite;
}
.orbit::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(90, 120, 220, .35);
}
.orbit.o2 { inset: 16%; animation-duration: 17s; animation-direction: reverse; transform: rotateX(70deg) rotateY(16deg); }
.orbit.o2::before { border-style: dashed; }
html[data-theme="dark"] .orbit::before { border-color: rgba(80, 130, 255, .32); }

.orbit .node {
  position: absolute;
  left: 50%; top: 50%;
  width: 44px; height: 44px;
  margin: -22px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: var(--ico-grad);
  box-shadow:
    0 10px 18px -8px rgba(20, 30, 90, .8),
    inset 0 1.5px 0 rgba(255, 255, 255, .5),
    inset 0 -6px 12px rgba(4, 10, 40, .3),
    0 0 18px -6px rgba(70, 150, 255, .5);
  /* компенсируем наклон орбиты — плитка развёрнута к зрителю */
  transform: var(--pos) rotateX(-70deg);
}
.orbit .node svg { width: 20px; height: 20px; stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* волны голоса */
.pulse {
  position: absolute;
  left: 50%; top: 50%;
  width: 208px; height: 208px;
  margin: -104px 0 0 -104px;
  border-radius: 50%;
  border: 1.5px solid rgba(110, 150, 255, .45);
  animation: pulseOut 3.4s ease-out infinite;
}
.pulse.p2 { animation-delay: 1.1s; }
.pulse.p3 { animation-delay: 2.2s; }
@keyframes pulseOut {
  0% { transform: scale(1); opacity: .65; }
  100% { transform: scale(1.75); opacity: 0; }
}
html[data-theme="dark"] .pulse { border-color: rgba(80, 130, 255, .45); }

/* ============ Виджет-график (как SpO₂) ============ */

.spark { position: relative; }
.spark svg { width: 100%; height: 62px; overflow: visible; }
.spark .line {
  fill: none;
  stroke: url(#sparkGrad);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 460;
  stroke-dashoffset: 460;
  animation: draw 2.6s var(--ease) forwards;
}
@keyframes draw { to { stroke-dashoffset: 0; } }
.spark .pt { fill: #fff; stroke: var(--a-blue); stroke-width: 3; animation: ptIn .5s 2.2s var(--spring) both; }
@keyframes ptIn { from { opacity: 0; transform: scale(0); transform-origin: center; } }
.spark .tag {
  position: absolute;
  right: 6%;
  top: -6px;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 650;
  background: var(--glass-2);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  animation: fadeUp .6s 2.3s var(--ease) both;
}
.spark .tag b { color: var(--a-blue); }
html[data-theme="dark"] .spark .tag b { color: var(--a-cyan); }

/* ============ 3D-микрофон ============ */

.mic3d {
  position: relative;
  width: 150px; height: 200px;
  flex: none;
  perspective: 800px;
}
.mic3d .cap {
  position: absolute;
  left: 50%; top: 8px;
  width: 62px; height: 104px;
  margin-left: -31px;
  border-radius: 34px;
  background: linear-gradient(145deg, #ffffff 0%, #cdd9ff 18%, #6d8bff 52%, #3b3ec9 82%, #241a6b 100%);
  box-shadow:
    inset -6px -8px 18px rgba(20, 15, 70, .5),
    inset 5px 6px 14px rgba(255, 255, 255, .55),
    0 22px 36px -16px rgba(40, 40, 130, .75);
  animation: micFloat 6s ease-in-out infinite;
  overflow: hidden;
}
.mic3d .cap::after {
  content: "";
  position: absolute;
  inset: 12px 10px;
  border-radius: 26px;
  background-image: radial-gradient(circle, rgba(255,255,255,.5) 1px, transparent 1.6px);
  background-size: 8px 8px;
  opacity: .7;
}
.mic3d .stand {
  position: absolute;
  left: 50%; top: 104px;
  width: 84px; height: 62px;
  margin-left: -42px;
  border: 7px solid rgba(120, 140, 230, .75);
  border-top: 0;
  border-radius: 0 0 44px 44px;
}
.mic3d .pole { position: absolute; left: 50%; top: 160px; width: 7px; height: 26px; margin-left: -3.5px; border-radius: 4px; background: rgba(120, 140, 230, .75); }
.mic3d .base { position: absolute; left: 50%; bottom: 4px; width: 96px; height: 18px; margin-left: -48px; border-radius: 50%; background: radial-gradient(ellipse, rgba(60, 70, 160, .3), transparent 70%); filter: blur(3px); }
.mic3d .ring {
  position: absolute;
  left: 50%; top: 60px;
  width: 62px; height: 62px;
  margin-left: -31px;
  border-radius: 50%;
  border: 1.5px solid rgba(110, 150, 255, .5);
  animation: pulseOut 3s ease-out infinite;
}
.mic3d .ring.r2 { animation-delay: 1s; }
.mic3d .ring.r3 { animation-delay: 2s; }
@keyframes micFloat { 50% { transform: translateY(-10px) rotate(-3deg); } }

html[data-theme="dark"] .mic3d .cap {
  background: linear-gradient(145deg, #ffe6f3 0%, #a8c8ff 16%, #3b7bff 50%, #4f46e5 80%, #141043 100%);
  box-shadow: inset -6px -8px 18px rgba(10, 14, 50, .55), inset 5px 6px 14px rgba(255,255,255,.4), 0 0 50px -10px rgba(80, 130, 255, .8);
}
html[data-theme="dark"] .mic3d .stand,
html[data-theme="dark"] .mic3d .pole { border-color: rgba(80, 130, 255, .6); background-color: rgba(80, 130, 255, .6); }
html[data-theme="dark"] .mic3d .ring { border-color: rgba(80, 130, 255, .5); }

/* ============ Уточнения светлой темы ============ */

/* тонкая внешняя грань — стекло читается на любом фоне */
/* блок чётко отрывается от белого: контурный кант + мягкая цветная тень */
html:not([data-theme="dark"]) .glass {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .9) inset,
    0 0 0 1px rgba(70, 100, 190, .14),
    0 10px 24px -10px rgba(40, 60, 140, .30),
    0 24px 50px -22px rgba(40, 60, 140, .35);
}
html:not([data-theme="dark"]) .glass:hover {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .9) inset,
    0 0 0 1px rgba(70, 100, 190, .2),
    0 16px 32px -12px rgba(40, 60, 140, .38),
    0 34px 64px -24px rgba(40, 60, 140, .42);
}

/* вложенное стекло (плитка внутри карточки) — чуть плотнее */
html:not([data-theme="dark"]) .glass .glass { background: rgba(255, 255, 255, .5); }

html:not([data-theme="dark"]) .chip,
html:not([data-theme="dark"]) .eyebrow,
html:not([data-theme="dark"]) .btn:not(.btn-primary) {
  box-shadow: var(--shadow), 0 0 0 1px rgba(28, 45, 100, .06);
}

html:not([data-theme="dark"]) .msg.user { background: rgba(255, 255, 255, .72); }
html:not([data-theme="dark"]) .demo-foot .fake-input { background: rgba(255, 255, 255, .5); }
html:not([data-theme="dark"]) .track { background: rgba(40, 60, 120, .18); }
html:not([data-theme="dark"]) input[type="range"] { background: rgba(40, 60, 120, .18); }
html:not([data-theme="dark"]) .home-ind { background: rgba(40, 60, 120, .28); }

/* ============ Неоновая тёмная тема ============ */

html[data-theme="dark"] body { background: #08080c; }

html[data-theme="dark"] .bg {
  background:
    radial-gradient(115% 75% at 50% -8%, #1a1024 0%, transparent 60%),
    linear-gradient(180deg, #0c0c13 0%, #08080c 60%, #08080c 100%);
}
html[data-theme="dark"] .bg::after { opacity: .07; }

html[data-theme="dark"] .grad-text {
  background: linear-gradient(100deg, #3b7bff 0%, #5b8cff 42%, #7c5cfa 78%, #8b7bff 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

/* Свечение — только для иконочных плиток. Пункты дока сюда не входят:
   иначе вокруг каждого появлялась рамка, которой нет в светлой теме. */
html[data-theme="dark"] .icon3d,
html[data-theme="dark"] .ico {
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, .45),
    inset 0 -8px 16px rgba(4, 10, 40, .4),
    0 10px 26px -8px rgba(59, 123, 255, .7),
    0 0 22px -6px rgba(70, 150, 255, .55);
}
html[data-theme="dark"] .dock-item { box-shadow: none; }

html[data-theme="dark"] .btn-primary {
  background: linear-gradient(100deg, #3b7bff, #7c5cfa);
  box-shadow: 0 0 26px -6px rgba(80, 130, 255, .75), 0 16px 34px -16px rgba(124, 92, 250, .9);
}
html[data-theme="dark"] .btn-primary:hover { box-shadow: 0 0 40px -6px rgba(80, 130, 255, .95), 0 22px 44px -16px rgba(124, 92, 250, 1); }

html[data-theme="dark"] .lang .pill,
html[data-theme="dark"] .step .num,
html[data-theme="dark"] .badge,
html[data-theme="dark"] .speed.on,
html[data-theme="dark"] .circle-badge .core,
html[data-theme="dark"] .play-btn { background: linear-gradient(135deg, #3b7bff, #7c5cfa); }

/* у логотипа-марка НЕТ плитки-фона — только сам знак (свечение задаёт svg-фильтр) */
html[data-theme="dark"] .play-btn { box-shadow: 0 0 30px -6px rgba(80, 130, 255, .8); }
html[data-theme="dark"] .play-btn::after { border-color: rgba(80, 130, 255, .6); }

html[data-theme="dark"] .orb {
  background: radial-gradient(circle at 32% 28%, #ffe3f1 0%, #ff9fd2 13%, #3b7bff 44%, #8b2be2 72%, #1a0a24 100%);
  box-shadow: 0 0 90px -18px rgba(80, 130, 255, .75), inset -14px -18px 50px rgba(20, 5, 30, .6), inset 12px 14px 34px rgba(255, 255, 255, .35);
}
html[data-theme="dark"] .orb .ring { border-color: rgba(80, 130, 255, .28); }
html[data-theme="dark"] .orb .sat { background: linear-gradient(135deg, #3b7bff, #7c5cfa); box-shadow: 0 0 16px rgba(80, 130, 255, .95); }

html[data-theme="dark"] .msg.bot { background: linear-gradient(100deg, #3b7bff, #7c5cfa); }
html[data-theme="dark"] .track .fill,
html[data-theme="dark"] .progress { background: linear-gradient(90deg, #3b7bff, #7c5cfa, #8b7bff); }
html[data-theme="dark"] .wave i { background: linear-gradient(180deg, #3b7bff, #7c5cfa); }
html[data-theme="dark"] .price.featured { border-color: rgba(80, 130, 255, .38); box-shadow: 0 0 50px -18px rgba(80, 130, 255, .6), var(--shadow); }
html[data-theme="dark"] .chip .dot { background: linear-gradient(135deg, #3b7bff, #7c5cfa); }
html[data-theme="dark"] .eyebrow i { background: #3b7bff; box-shadow: 0 0 12px #3b7bff; }
html[data-theme="dark"] .price li svg { stroke: #3b7bff; }
html[data-theme="dark"] .form-note { border-color: rgba(80, 130, 255, .35); background: rgba(80, 130, 255, .12); }
html[data-theme="dark"] input[type="range"]::-webkit-slider-thumb { box-shadow: 0 3px 12px rgba(0,0,0,.6), 0 0 0 4px #3b7bff inset; }
html[data-theme="dark"] ::selection { background: rgba(80, 130, 255, .35); }
html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .18) content-box; }

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