/* Главная leadagram.pro — оформление «Галактика» (решение владельца 09.10.2026, работа
   glavnaya-sajta; макет tmp/prototypy/sajt/galaktika.html). Общее для всех страниц
   (шрифты, шапка, кнопки, подвал) — в site.css; здесь — небо, разделы главной, карточка
   из Telegram-группы и живые образцы кабинета (vitrina.js).

   Небо (glavnaya.js) — холст под страницей. Пока оно не запустилось, страница — обычный
   тёмный сайт со статичным звёздным фоном: класс `nebo-est` на <html> ставит скрипт, когда
   небо действительно рисуется, и только тогда включаются приёмы, рассчитанные на него
   (высокие отступы глав на телефоне). */
body.glavnaya {
  background:
    radial-gradient(1px 1px at 12% 18%, rgba(255, 255, 255, .5), transparent 60%),
    radial-gradient(1.5px 1.5px at 41% 63%, rgba(201, 211, 255, .5), transparent 60%),
    radial-gradient(1px 1px at 88% 44%, rgba(255, 255, 255, .4), transparent 60%),
    radial-gradient(1px 1px at 63% 31%, rgba(169, 182, 255, .45), transparent 60%),
    radial-gradient(70% 50% at 75% 20%, rgba(79, 107, 255, .14), transparent 70%),
    var(--void);
  background-attachment: fixed;
}
.nebo-est body.glavnaya { background: var(--void); }
#kosmos { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; display: none; }
.nebo-est #kosmos { display: block; }
.metki { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.metka { position: absolute; left: 0; top: 0; font-size: 12.5px; color: var(--ink-2); white-space: nowrap; opacity: 0; transition: opacity .3s; display: flex; align-items: center; gap: 8px; text-shadow: 0 1px 8px #02030A; }
.metka::before { content: ''; flex: none; width: 18px; height: 1px; background: currentColor; opacity: .6; }
.metka.vy { font-family: var(--disp); font-size: 15px; font-weight: 500; color: #02030A; background: var(--accent); width: 54px; height: 54px; border-radius: 50%; justify-content: center; box-shadow: 0 0 60px 20px rgba(110, 134, 255, .45); margin: -27px 0 0 -27px; text-shadow: none; }
.metka.vy::before { display: none; }
.metka.tep { color: var(--warm); }
.gl-str { position: relative; z-index: 2; flex: 1; }
.gl-str .wrap { max-width: 1240px; margin: 0 auto; padding: 0 32px; }
.gl-str [hidden] { display: none !important; }

/* Главы */
.gl { min-height: 100vh; display: flex; align-items: center; padding: 120px 0; position: relative; }
.gl > .wrap { width: 100%; }
.h1 { font-family: var(--disp); font-weight: 300; font-size: clamp(34px, 4.5vw, 70px); line-height: 1.06; letter-spacing: -.035em; margin: 0; max-width: 11.5em; text-wrap: balance; }
.h2 { font-family: var(--disp); font-weight: 300; font-size: clamp(27px, 3.1vw, 48px); line-height: 1.1; letter-spacing: -.03em; margin: 0; text-wrap: balance; }
.kol { max-width: 600px; }
.sub { font-size: clamp(16.5px, 1.3vw, 19px); color: var(--ink-2); margin: 28px 0 0; max-width: 52ch; }
.sub b { color: var(--ink); font-weight: 500; }
.cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 36px; }
.dov { margin-top: 30px; display: grid; gap: 6px; font-size: 14.5px; color: var(--ink-2); }
.dov p { margin: 0; }
.lead { font-size: 18px; color: var(--ink-2); margin: 22px 0 0; max-width: 60ch; }
.prim { font-size: 13px; color: var(--ink-3); margin-top: 14px; }
.ten { text-shadow: 0 1px 24px rgba(2, 3, 10, .9), 0 0 2px rgba(2, 3, 10, .8); }

/* Отличие */
.para { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 44px; max-width: 900px; }
.okno { background: rgba(4, 6, 20, .8); border: 1px solid var(--line); border-radius: 22px; padding: 26px; }
.okno h3 { margin: 0; font-family: var(--disp); font-weight: 400; font-size: 17px; letter-spacing: -.01em; }
.okno > p { margin: 8px 0 14px; color: var(--ink-2); font-size: 15px; }
.okno .st { padding: 12px 0; border-top: 1px solid var(--line); font-size: 14.5px; }
.okno .st small { display: block; color: var(--ink-3); font-size: 12.5px; }
.okno.holod .st span { color: #7880A6; }
.okno.teplo { border-color: rgba(255, 201, 138, .35); box-shadow: 0 0 80px -30px rgba(255, 201, 138, .35) inset; }
.okno.teplo .st span { color: #FFE6C7; }
.okno.teplo .st small { color: var(--warm); }

/* Подбор под каждого: 15 % */
.cit { font-family: var(--disp); font-weight: 300; font-size: clamp(21px, 2.1vw, 32px); line-height: 1.32; letter-spacing: -.02em; margin: 0; max-width: 23em; }
.cit b { display: block; font-weight: 500; margin-top: 26px; color: #fff; font-size: clamp(25px, 2.6vw, 40px); line-height: 1.15; }

/* Отбор */
.chisla { display: grid; gap: 28px; margin-top: 40px; }
.chisla div { display: grid; grid-template-columns: 290px 1fr; align-items: baseline; gap: 20px; border-top: 1px solid var(--line-2); padding-top: 16px; }
.chisla b { white-space: nowrap; font-family: var(--disp); font-weight: 300; font-size: clamp(36px, 4vw, 60px); letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.chisla div:last-child b { color: var(--warm); text-shadow: 0 0 40px rgba(255, 201, 138, .55); }
.chisla span { color: var(--ink-2); }
.otsev { display: grid; gap: 18px; margin-top: 26px; }
.otsev-r { display: flex; flex-wrap: wrap; gap: 8px; }
.otsev-r b { flex: 0 0 100%; font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.otsev span { font-size: 13px; color: #8189AF; border: 1px solid var(--line-2); padding: 5px 13px; border-radius: 999px; background: rgba(4, 6, 20, .6); }
.otsev .da span { color: var(--warm); border-color: rgba(255, 201, 138, .4); background: rgba(255, 201, 138, .07); box-shadow: 0 0 22px -8px rgba(255, 201, 138, .6); }
.otsev .net span { color: #666D92; text-decoration: line-through; text-decoration-thickness: 1.5px; text-decoration-color: rgba(129, 137, 175, .85); }

/* Блоки кабинета */
.lk-z { max-width: 640px; }
.lk-pl { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 10px; }
.lk-pl li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; color: var(--ink-2); font-size: 15.5px; }
.lk-pl li::before { content: ''; width: 9px; height: 9px; margin: 8px 0 0 5px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px 2px rgba(110, 134, 255, .9); }
.lk-pl b { color: var(--ink); font-weight: 500; }
.vit { margin-top: 52px; }
.vozm { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 40px; border-top: 1px solid var(--line-2); }
.vozm div { padding: 18px 22px 0 0; }
.vozm b { display: block; font-family: var(--disp); font-weight: 400; font-size: 15.5px; letter-spacing: -.01em; color: #fff; }
.vozm span { display: block; color: var(--ink-2); font-size: 14.5px; margin-top: 6px; }
.kab-kn { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 30px; }
.kab-kn span { font-size: 14.5px; color: var(--ink-2); }

/* Карточка из Telegram-группы — когда кабинет выключен. Тексты кнопок — дословно бота */
.demo-g { display: grid; grid-template-columns: 500px minmax(0, 1fr); gap: 64px; margin-top: 52px; align-items: start; }
.phone { background: rgba(6, 9, 28, .88); border: 1px solid var(--line-2); border-radius: 26px; padding: 26px 24px; box-shadow: 0 40px 120px -40px rgba(79, 107, 255, .55); }
.phone .note { font-size: 13px; color: var(--ink-3); }
.bub { background: #10163A; border-radius: 16px 16px 16px 4px; padding: 14px 16px 12px; font-size: 15px; line-height: 1.5; color: var(--ink); }
.kb { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.kb button { flex: 1 1 45%; min-height: 40px; border-radius: 10px; background: #182051; color: var(--ink); font-size: 14px; font-weight: 500; border: 0; cursor: pointer; font-family: inherit; transition: background .15s; }
.kb button:hover { background: #22306F; }
.kb .alt { background: #1A2036; box-shadow: inset 0 0 0 1px #3B4270; }
.reset { margin-top: 14px; background: none; border: 0; color: var(--link); font-family: inherit; font-size: 14px; cursor: pointer; padding: 6px 0; text-decoration: underline; text-underline-offset: 3px; }
.appear { animation: gl-appear .45s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes gl-appear { from { opacity: 0; transform: translateY(6px); } }
.anns { background: rgba(4, 6, 20, .74); border-radius: 22px; padding: 6px 28px; border: 1px solid var(--line); }
.ann { padding: 20px 0; border-top: 1px solid var(--line); }
.ann:first-child { border-top: 0; }
.ann h3 { margin: 0 0 6px; font-family: var(--disp); font-weight: 400; font-size: 16.5px; color: #fff; }
.ann p { margin: 0; font-size: 15px; color: var(--ink-2); }

/* Шаги — вдоль светящейся реки */
.shagi { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; margin-top: 64px; align-items: start; }
.sg { background: rgba(4, 6, 20, .74); border: 1px solid var(--line); border-radius: 20px; padding: 24px; }
.sg .nm { font-family: var(--disp); font-weight: 300; font-size: 44px; color: var(--accent); line-height: 1; }
.sg h3 { font-family: var(--disp); font-weight: 400; font-size: 17px; margin: 18px 0 10px; letter-spacing: -.01em; }
.sg p { margin: 0; color: var(--ink-2); font-size: 15px; }
.sg:nth-child(2) { margin-top: 48px; } .sg:nth-child(3) { margin-top: 96px; } .sg:nth-child(4) { margin-top: 144px; }

/* Тариф — слева текст, справа звёздная монета */
.tar { max-width: 620px; margin-top: 44px; display: grid; gap: 18px; }
.orb { position: relative; border-radius: 28px; padding: 40px; background: radial-gradient(90% 70% at 20% 0%, rgba(79, 107, 255, .35), rgba(4, 6, 20, .9) 65%); border: 1px solid var(--line-2); overflow: clip; }
.orb-z { font-size: 17px; color: #C3CBF2; }
.orb-pr { margin-top: 14px; font-size: 14px; color: var(--ink-2); }
.cena { font-family: var(--disp); font-weight: 300; font-size: clamp(54px, 6.4vw, 96px); letter-spacing: -.05em; line-height: 1; margin-top: 12px; }
.cena small { font-family: var(--font); font-size: 19px; letter-spacing: 0; color: var(--ink-2); margin-left: 10px; }
.vkl { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 11px; font-size: 16px; }
.vkl li { display: flex; gap: 14px; align-items: baseline; }
.vkl li::before { content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px 2px rgba(110, 134, 255, .9); transform: translateY(-2px); }
.usl-b { background: rgba(4, 6, 20, .8); border: 1px solid var(--line); border-radius: 28px; padding: 12px 32px; }
.usl { padding: 18px 0; border-bottom: 1px solid var(--line); }
.usl h3 { margin: 0 0 6px; font-family: var(--disp); font-weight: 400; font-size: 16px; letter-spacing: -.01em; }
.usl p { margin: 0; color: var(--ink-2); font-size: 15px; }
.usl-of { padding: 14px 0 8px; font-size: 14px; color: var(--ink-3); }

/* Вопросы */
.faq { display: grid; grid-template-columns: 1fr 1.7fr; gap: 64px; width: 100%; }
.faq-sp { background: rgba(4, 6, 20, .78); border-radius: 22px; padding: 4px 28px; border: 1px solid var(--line); }
.faq-sp details { border-top: 1px solid var(--line); }
.faq-sp details:first-child { border-top: 0; }
.faq-sp summary { list-style: none; cursor: pointer; padding: 20px 40px 20px 0; font-size: 17.5px; font-weight: 500; position: relative; }
.faq-sp summary::-webkit-details-marker { display: none; }
.faq-sp summary::after { content: ''; position: absolute; right: 6px; top: 50%; width: 11px; height: 11px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-70%) rotate(45deg); transition: transform .3s; opacity: .6; }
.faq-sp details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq-sp p { margin: 0 0 20px; color: var(--ink-2); max-width: 68ch; }

.fin { text-align: center; justify-content: center; }
.fin .wrap { display: flex; flex-direction: column; align-items: center; gap: 38px; }
.fin .h2 { font-size: clamp(30px, 3.8vw, 58px); max-width: 15em; }

@media (max-width: 1000px) {
  .para, .faq, .demo-g { grid-template-columns: 1fr; }
  .demo-g { gap: 28px; }
  .shagi { grid-template-columns: 1fr 1fr; }
  .sg:nth-child(n) { margin-top: 0; }
  .chisla div { grid-template-columns: 1fr; gap: 6px; }
  .vozm { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  body { font-size: 16px; }
  .gl-str .wrap { padding-left: 16px; padding-right: 16px; }
  .gl { display: block; min-height: 0; padding: 96px 0 64px; }
  .hero { padding-top: calc(var(--shapka) + 48px); }
  .hero .h1 { font-size: 29px; }
  .h2 { font-size: 24px; }
  .fin .h2 { font-size: 26px; }
  .cit { font-size: 19px; }
  .cit b { font-size: 22px; }
  .sub { margin-top: 18px; }
  .cta { margin-top: 24px; }
  .cta .knopka { flex: 1 1 100%; }
  .lead { font-size: 16.5px; }
  .okno { padding: 20px; }
  .cit b { margin-top: 18px; }
  .shagi { grid-template-columns: 1fr; gap: 14px; margin-top: 36px; }
  .vozm { grid-template-columns: 1fr; }
  .vozm div { padding-top: 14px; }
  .orb, .usl-b { padding: 26px 20px; border-radius: 22px; }
  .cena small { display: block; margin: 8px 0 0; }
  .vit { margin-top: 34px; margin-left: -6px; margin-right: -6px; }
  .phone { padding: 20px 16px; }
  .anns { padding: 2px 18px; }
  .metka { font-size: 11px; white-space: normal; max-width: 46vw; line-height: 1.3; }
  .metka::before { width: 10px; }
  .faq { gap: 24px; }
  .faq-sp { padding: 2px 18px; }
  .faq-sp summary { font-size: 16px; padding-right: 30px; }
  /* Когда небо есть, каждая глава открывается своей сценой в просвете над заголовком,
     а текст поднимается ниже на тёмной подложке — небо остаётся главным героем. Сцена
     сама опускается в просвет между главами (glavnaya.js, kadr); просвет ужат 10.10.2026
     с 50vh — владелец: «расстояние между анимацией и заголовками очень большое» */
  .nebo-est .gl { padding: 42vh 0 72px; }
  .nebo-est .gl::before { content: ''; position: absolute; left: 0; right: 0; top: 36vh; bottom: 0; z-index: -1; pointer-events: none; background: linear-gradient(rgba(2, 3, 10, 0), rgba(2, 3, 10, .86) 16vh, rgba(2, 3, 10, .86) calc(100% - 14vh), rgba(2, 3, 10, 0)); }
  .nebo-est .hero { padding-top: 54vh; }
  .nebo-est .hero::before { top: 44vh; }
  .nebo-est .fin { padding-top: 48vh; }
  /* Сцены глав «Чем мы отличаемся» и «15 %» по высоте ниже прочих — просвет перед ними
     ужат отдельно (владелец, 10.10.2026, по снимкам) */
  .nebo-est #otlichie, .nebo-est .gl[data-sc="2"] { padding-top: 30vh; }
  .nebo-est #otlichie::before, .nebo-est .gl[data-sc="2"]::before { top: 24vh; }
}
@media (prefers-reduced-motion: reduce) {
  .appear { animation: none; }
}

/* ===== Живые образцы личного кабинета (vitrina.js) — только при включённом выключателе
   кабинета. Цвета — тёмная тема кабинета, чтобы образец выглядел как настоящий кабинет. ===== */
.vit { --v-bg: #0F1216; --v-pn: #13171D; --v-vidy: #12161C; --v-kos: #07090E; --v-rail: #0B0E12; --v-ln: #272D36; --v-ln2: #39414D;
  --v-ink: #E9ECF1; --v-i2: #98A1AE; --v-i3: #6B7480; --v-akc: #7C86E8; --v-akc-s: #1D2233;
  font-family: 'Geologica', system-ui, sans-serif; color: var(--v-ink); font-size: 13px; line-height: 1.45; }
.vit button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
.v-ok { border-radius: 18px; overflow: clip; background: var(--v-bg); border: 1px solid var(--v-ln); box-shadow: 0 0 0 1px rgba(110, 134, 255, .18), 0 50px 160px -40px rgba(79, 107, 255, .6); }
.v-bar { display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; padding: 14px 18px 12px 70px; border-bottom: 1px solid var(--v-ln); background: var(--v-bg); }
.v-bz { display: flex; align-items: center; gap: 10px; }
.v-bz b { font-size: 15px; }
.v-kl { font-size: 12px; color: #A9B0F2; background: var(--v-akc-s); border-radius: 6px; padding: 2px 8px; }
.v-bar p { grid-column: 1; margin: 0; font-size: 12px; color: var(--v-i3); }
.v-seg { grid-column: 2; grid-row: 1 / span 2; align-self: center; display: flex; border: 1px solid var(--v-ln2); border-radius: 8px; overflow: hidden; font-size: 12px; }
.v-seg span { padding: 6px 12px; color: var(--v-i2); }
.v-seg span.on { background: #1C222B; color: var(--v-ink); }
.v-tl { display: grid; grid-template-columns: 52px 1fr; height: 560px; }
.v-rail { background: var(--v-rail); border-right: 1px solid var(--v-ln); display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 0; margin-top: -58px; position: relative; z-index: 1; }
.v-lg { width: 30px; height: 30px; border-radius: 8px; background: var(--v-akc); color: #0F1216; display: grid; place-items: center; font-weight: 700; font-size: 14px; margin-bottom: 14px; }
.v-ri { position: relative; width: 38px; height: 38px; border-radius: 10px; display: grid !important; place-items: center; color: var(--v-i3); text-align: center !important; transition: background .2s, color .2s; }
.v-ri svg { width: 19px; height: 19px; }
button.v-ri:hover { color: var(--v-ink); background: #161A21; }
.v-ri.on { background: #1C2230; color: var(--v-ink); box-shadow: inset 2px 0 0 var(--v-akc); }
.v-ri b { position: absolute; top: 1px; right: -2px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: #3A4250; color: #D5DAE2; font-size: 9.5px; font-weight: 600; display: grid; place-items: center; }
.v-ri:first-of-type b, .v-ri:nth-of-type(4) b { background: var(--v-akc); color: #0F1216; }

.v-telo { display: grid; grid-template-columns: 30% 21% 1fr; min-height: 0; }
.v-telo.poyav > * { animation: v-poyav .5s cubic-bezier(.16, 1, .3, 1) both; }
.v-telo.poyav > *:nth-child(2) { animation-delay: .06s; } .v-telo.poyav > *:nth-child(3) { animation-delay: .12s; }
@keyframes v-poyav { from { opacity: 0; transform: translateY(8px); } }
.v-kos { position: relative; background: radial-gradient(120% 80% at 40% 40%, #0B0F1E, var(--v-kos)); border-right: 1px solid var(--v-ln); overflow: hidden; }
.v-kos canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.v-kn { position: absolute; left: 18px; top: 16px; right: 18px; pointer-events: none; }
.v-kn b { font-size: 34px; font-weight: 600; letter-spacing: -0.02em; }
.v-kn span { font-size: 17px; color: var(--v-akc); font-weight: 600; }
.v-kn p { margin: 2px 0 0; font-size: 11.5px; color: var(--v-i2); max-width: 26ch; }
.v-kzum { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); font-size: 11px; color: var(--v-i2); border: 1px solid var(--v-ln2); border-radius: 10px; padding: 6px 12px; background: rgba(15, 18, 22, .8); white-space: nowrap; }
.v-vidy { background: var(--v-vidy); border-right: 1px solid var(--v-ln); padding: 14px 10px; overflow: hidden; }
.v-vz { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--v-ink); padding: 0 6px; }
.v-vz span { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--v-i3); margin-left: 6px; }
.v-poisk { margin: 10px 4px 12px; border: 1px solid var(--v-ln2); border-radius: 8px; padding: 6px 10px; font-size: 11.5px; color: var(--v-i3); }
.v-fz { font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--v-i3); padding: 6px 6px 4px; }
.v-f { display: grid !important; grid-template-columns: 14px 1fr auto; gap: 8px; align-items: start; width: 100%; padding: 6px 6px; border-radius: 7px; color: var(--v-ink); transition: background .25s; }
.v-f i { width: 8px; height: 8px; border-radius: 50%; margin-top: 5px; }
.v-f i.o { border: 1.5px solid var(--v-i2); width: 9px; height: 9px; }
.v-f small { display: block; font-size: 10px; color: var(--v-i3); line-height: 1.3; }
.v-f b { font-weight: 500; font-size: 11.5px; color: var(--v-i2); font-variant-numeric: tabular-nums; }
.v-f:hover { background: #171C24; }
.v-f.on { background: var(--v-akc-s); box-shadow: inset 0 0 0 1px #3B4270; }
.v-f.on b { color: #A9B0F2; }
.v-spisok { padding: 0; overflow: hidden; display: flex; flex-direction: column; min-width: 0; }
.v-sch { padding: 10px 16px; font-size: 11.5px; color: var(--v-i3); border-bottom: 1px solid var(--v-ln); font-variant-numeric: tabular-nums; }
.v-sv { margin: 10px 12px 4px; border: 1px solid var(--v-ln); border-radius: 10px; padding: 10px 12px; background: var(--v-pn); }
.v-svz { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 4px; }
.v-svz span { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--v-i3); margin-left: 6px; }
.v-svs { display: grid; grid-template-columns: 14px 1fr; gap: 6px; font-size: 11.5px; color: var(--v-i2); padding: 1px 0; }
.v-svs i { font-style: normal; color: var(--v-i3); }
.v-svs b { color: var(--v-ink); }
.v-svs u { color: #A9B0F2; text-decoration-color: rgba(169, 176, 242, .5); }
.v-str { overflow: hidden; flex: 1; }
.v-r { display: grid; grid-template-columns: 14px 12px 1fr; gap: 10px; padding: 9px 16px; border-bottom: 1px solid #1B2028; align-items: start; transition: opacity .35s, max-height .45s, padding .45s; max-height: 140px; animation: v-poyav .5s cubic-bezier(.16, 1, .3, 1) both; animation-delay: calc(var(--n) * .05s); }
.v-r.skr { opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; border-bottom-color: transparent; overflow: hidden; }
.v-cb { width: 12px; height: 12px; border: 1.5px solid var(--v-ln2); border-radius: 3px; margin-top: 3px; }
.v-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--c); margin-top: 4px; box-shadow: 0 0 8px var(--c); }
.v-dot.kv { border-radius: 2px; }
.v-tx { min-width: 0; }
.v-zg { display: flex; align-items: baseline; gap: 8px; }
.v-zg b { font-size: 13px; }
.v-zg em { margin-left: auto; font-style: normal; font-size: 11px; color: var(--v-i3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.v-nov { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: #A9B0F2; background: #262E5A; border-radius: 4px; padding: 0 5px; }
.v-tx > span { display: block; color: var(--v-i2); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.v-chs { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.v-ch { font-size: 10.5px; border-radius: 6px; padding: 1px 7px; border: 1px solid var(--v-ln2); color: var(--v-i2); white-space: nowrap; }
.v-p { border-color: #C98A2E; color: #F0C27A; }
.v-k { border-color: #3E8E66; color: #7FD0A3; }
.v-ct { border-color: #B65443; color: #F08A78; }
.v-b { background: #E9ECF1; color: #0F1216; border-color: #E9ECF1; font-weight: 600; }
.v-cat { border-style: dashed; color: #8A93A6; }
.v-rol { display: inline-flex; align-items: center; gap: 5px; background: #1C222B; border-color: #2E3540; color: #C7CDD8; }
.v-rol i { font-style: normal; width: 12px; height: 12px; border-radius: 50%; background: #39414D; color: #E9ECF1; font-size: 7.5px; display: grid; place-items: center; text-transform: uppercase; }
.v-vak { display: inline-flex; align-items: center; gap: 5px; }
.v-vak i { width: 7px; height: 7px; background: #8C95A8; border-radius: 1px; }
.v-st { font-size: 11px; color: var(--v-i2); white-space: nowrap; }
.v-r-lpr { grid-template-columns: 14px 32px 1fr auto; align-items: center; }
.v-av { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 600; color: #0F1216; background: var(--c); box-shadow: 0 0 0 3px rgba(255, 255, 255, .04); }
.v-r-lpr .v-tx b { font-size: 13px; }
.v-pr { display: flex; align-items: center; gap: 8px; }
.v-pr em { font-style: normal; font-size: 11px; color: var(--v-i3); }
.v-toch { display: flex; gap: 3px; }
.v-toch i { width: 8px; height: 8px; border-radius: 2px; background: var(--c); }

/* Сводка */
.v-telo-sv { display: block; overflow: hidden; padding: 14px; }
.v-kpi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.v-kpi div { background: var(--v-pn); border: 1px solid var(--v-ln); border-radius: 10px; padding: 12px 14px; }
.v-kpi b { display: block; font-size: 24px; font-weight: 600; letter-spacing: -0.02em; }
.v-kpi b em { font-style: normal; font-size: 11px; font-weight: 500; color: #7FD0A3; margin-left: 4px; }
.v-kpi span { font-size: 11.5px; color: var(--v-i2); }
.v-sv2g { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.v-pn { background: var(--v-pn); border: 1px solid var(--v-ln); border-radius: 10px; padding: 12px 14px; }
.v-pnz { font-weight: 600; font-size: 12.5px; }
.v-pnz span { display: block; font-weight: 400; font-size: 11px; color: var(--v-i3); }
.v-orb { display: block; width: 100%; height: 330px; margin-top: 4px; }
.v-puz { position: relative; height: 170px; margin-top: 6px; }
.v-pz { position: absolute; width: calc(var(--r) * 1.25); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; border: 1px solid rgba(124, 134, 232, .4); background: radial-gradient(circle, #1A2036, #13171D 70%); display: grid; place-content: center; text-align: center; padding: 6px; animation: v-dyh 5s ease-in-out infinite; animation-delay: var(--z); }
.v-pz.ch { border-color: #7C86E8; box-shadow: 0 0 22px -6px rgba(124, 134, 232, .7); }
.v-pz b { font-size: 10.5px; line-height: 1.15; }
.v-pz small { font-size: 9px; color: var(--v-i3); }
@keyframes v-dyh { 50% { transform: translate(-50%, -50%) scale(1.04); } }
.v-vr { display: grid; grid-template-columns: 46% 1fr; gap: 8px; align-items: center; font-size: 11px; color: var(--v-i2); margin: 4px 0; }
.v-vr div { display: flex; align-items: center; gap: 6px; }
.v-vr i { height: 9px; border-radius: 3px; background: linear-gradient(90deg, #5D68B8, #9BA3F4); width: calc(var(--w) * .72); animation: v-ros 1.2s cubic-bezier(.16, 1, .3, 1) both; animation-delay: var(--z); }
.v-vr em { font-style: normal; color: var(--v-ink); white-space: nowrap; }
@keyframes v-ros { from { width: 0; } }
.v-prim2 { font-size: 11px; color: var(--v-i3); margin-top: 8px; }
.v-hint { margin-top: 12px; font-size: 13px; color: #8F98C2; text-align: center; }

@media (max-width: 1100px) {
  .v-telo { grid-template-columns: 34% 1fr; }
  .v-vidy { display: none; }
}
@media (max-width: 760px) {
  .v-bar { padding: 12px 14px; grid-template-columns: 1fr; }
  .v-seg { display: none; }
  .v-tl { display: block; height: auto; }
  .v-rail { display: none; }
  .v-telo { display: block; }
  .v-kos { height: 230px; border-right: 0; border-bottom: 1px solid var(--v-ln); }
  .v-vidy { display: block; border-right: 0; padding: 8px 0 8px 12px; border-bottom: 1px solid var(--v-ln); }
  .v-vz, .v-poisk, .v-fz { display: none; }
  .v-fg { display: contents; }
  .v-vidy { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
  .v-vidy::-webkit-scrollbar { display: none; }
  .v-f { flex: none; width: auto; grid-template-columns: 10px auto auto; align-items: center; border: 1px solid var(--v-ln2); border-radius: 999px; padding: 6px 12px; }
  .v-f i { margin-top: 0; }
  .v-f small { display: none; }
  .v-f span { white-space: nowrap; }
  .v-spisok { display: block; }
  .v-str { max-height: none; }
  .v-r { padding: 9px 12px; }
  .v-r-lpr { grid-template-columns: 32px 1fr; }
  .v-r-lpr .v-cb { display: none; }
  .v-r-lpr .v-pr { grid-column: 2; flex-wrap: wrap; }
  .v-cb { display: none; }
  .v-r { grid-template-columns: 12px 1fr; }
  .v-tx > span { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .v-telo-sv { padding: 10px; }
  .v-kpi { gap: 6px; }
  .v-kpi div { padding: 10px; }
  .v-kpi b { font-size: 20px; }
  .v-sv2g { grid-template-columns: 1fr; }
  .v-orb { height: 260px; }
}

/* --- образцы: появление окна, инсайты, досье запроса --- */

/* Окно встаёт на место плавно, когда попадает в экран */
.vit .v-ok { opacity: .001; transform: translateY(26px) scale(.985); transition: opacity .9s, transform 1.1s cubic-bezier(.16, 1, .3, 1); }
.vit.v-vid .v-ok, .vit .v-zap { opacity: 1; transform: none; }
.v-lin { display: block; width: 100%; height: 56px; margin-top: 4px; }

/* Инсайты */
.v-telo-in { display: block; padding: 14px 16px; overflow: hidden; }
.v-in-vv { margin: 0 0 12px; font-size: 12px; color: var(--v-i2); }
.v-in-g { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.v-in p { font-size: 12px; color: var(--v-i2); margin: 6px 0 10px; }
.v-inz { display: flex; align-items: center; gap: 8px; }
.v-inz b { font-size: 13.5px; }
.vit .v-btn { background: var(--v-akc); color: #0F1216; font-weight: 500; font-size: 12px; padding: 7px 12px; border-radius: 8px; transition: filter .2s, background .3s; text-align: center; }
.vit .v-btn:hover { filter: brightness(1.1); }
.vit .v-btn.on { background: #4FA97A; }
.vit .v-btn2 { border: 1px solid var(--v-ln2); font-size: 12px; padding: 6px 11px; border-radius: 8px; color: var(--v-ink); display: inline-flex; align-items: center; gap: 6px; text-align: center; }
.vit .v-btn2:hover { background: #1A1F28; }
.v-btn2 .kr { width: 8px; height: 8px; border-radius: 50%; background: #DE6A55; }
.v-ch24 { display: grid; grid-template-columns: repeat(24, 1fr); gap: 3px; height: 150px; align-items: end; margin-top: 12px; }
.v-ch24 i { height: var(--v); background: #39414D; border-radius: 2px 2px 0 0; animation: v-ros-v 1s cubic-bezier(.16, 1, .3, 1) both; animation-delay: var(--z); position: relative; transition: background .4s; }
.v-ch24 i:nth-child(n+11):nth-child(-n+20) { background: #4FA97A; }
.v-ch24.shire i:nth-child(9), .v-ch24.shire i:nth-child(10), .v-ch24.shire i:nth-child(21), .v-ch24.shire i:nth-child(22) { background: #4FA97A; }
.v-ch24 i::after { content: ""; position: absolute; inset: -4px -1px 0; border: 1.5px solid transparent; border-radius: 3px; transition: border-color .4s; }
.v-ch24.shire i:nth-child(9)::after, .v-ch24.shire i:nth-child(10)::after, .v-ch24.shire i:nth-child(21)::after, .v-ch24.shire i:nth-child(22)::after { border-color: #7C86E8; }
@keyframes v-ros-v { from { height: 0; } }
.v-ch24o { display: flex; justify-content: space-between; font-size: 10px; color: var(--v-i3); margin-top: 3px; }
.v-in-leg { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; font-size: 11px; color: var(--v-i2); margin-top: 8px; }
.v-in-leg i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.v-in-leg i.z { background: #4FA97A; }
.v-in-leg i.o { border: 1.5px solid #7C86E8; margin-left: 8px; }
.v-in-leg i.pk { border: 1.5px solid #E8A84A; }
.v-in-leg b { color: var(--v-ink); font-weight: 600; }
.v-hm { display: grid; grid-template-columns: 22px repeat(24, 1fr); gap: 2px; margin-top: 12px; }
.v-hd { font-size: 9.5px; color: var(--v-i3); line-height: 12px; }
.v-hd.sr { color: #E8A84A; font-weight: 600; }
.v-hm i { aspect-ratio: 1; border-radius: 2px; background: #7C86E8; opacity: calc(.1 + var(--o) * .85); animation: v-poyav-i .6s both; animation-delay: var(--z); }
.v-hm i.pik { box-shadow: inset 0 0 0 1.5px #E8A84A; }
@keyframes v-poyav-i { from { opacity: 0; transform: scale(.4); } }

/* Запрос лида и досье */
.v-zap-g { display: grid; grid-template-columns: 40% 1fr; min-height: 640px; }
.v-zap-sp { border-right: 1px solid var(--v-ln); overflow: hidden; }
.vit .v-zr { display: grid; grid-template-columns: 12px 1fr; gap: 10px; padding: 11px 16px 11px 14px; width: 100%; border-bottom: 1px solid #1B2028; border-left: 2px solid transparent; }
.v-zap .v-bar { padding-left: 18px; }
.vit .v-zr:hover { background: #141920; }
.vit .v-zr.vyb { background: #161C2C; border-left-color: var(--v-akc); }
.v-zr .v-tx > span { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.v-ds { padding: 16px 20px; overflow: hidden; background: var(--v-pn); }
.v-ds.poyav { animation: v-poyav .45s cubic-bezier(.16, 1, .3, 1); }
.v-ds-sh { display: grid; grid-template-columns: 14px 1fr; gap: 10px; }
.v-ds-sh .v-dot { width: 14px; height: 14px; margin-top: 4px; }
.v-ds-sh b { display: block; font-size: 17px; line-height: 1.25; }
.v-ds-sh span { display: block; font-size: 12.5px; color: var(--v-i2); }
.v-ds-sh small { display: block; font-size: 11px; color: var(--v-i3); margin-top: 2px; }
.v-ds-st { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 10px; }
.vit .v-ds-st button { font-size: 11.5px; border: 1px solid var(--v-ln2); border-radius: 999px; padding: 3px 10px; display: inline-flex; align-items: center; gap: 6px; color: var(--v-i2); transition: all .2s; }
.v-ds-st button i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.v-ds-st button i.o { border: 1.5px solid currentColor; }
.v-ds-st button i.d { background: var(--v-akc); }
.v-ds-st button i.z { width: auto; height: auto; font-style: normal; }
.v-ds-st button i.z::before { content: "\2606"; }
.vit .v-ds-st button.on { border-color: var(--v-akc); background: var(--v-akc-s); color: var(--v-ink); }
.v-ds-kn { display: flex; flex-wrap: wrap; gap: 6px; }
.v-ds-pr { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; animation: v-poyav .35s both; }
.vit .v-ds-pr button { font-size: 11px; border: 1px solid #3B4270; background: #1A2036; border-radius: 7px; padding: 4px 9px; color: var(--v-ink); }
.v-ds-pr .v-ds-z { width: 100%; margin: 0 0 2px; }
.v-ds-otm { font-size: 12px; color: #F08A78; }
.v-ds-z { font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--v-i3); margin: 14px 0 6px; }
.v-ds-tx { margin: 0; font-size: 13px; line-height: 1.5; }
.v-ds-poch { display: grid; grid-template-columns: 42% 1fr; gap: 4px 10px; font-size: 12px; }
.v-ds-poch > span { color: var(--v-i3); }
.v-ds-poch div { display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: center; }
.v-ds-poch .d { width: 9px; height: 9px; border-radius: 50%; display: inline-block; margin-right: 6px; }
.v-ds-poch .ok { color: #7FD0A3; }
.v-ds-poch .sila { display: inline-flex; gap: 3px; margin-right: 6px; }
.v-ds-poch .sila i { width: 14px; height: 6px; border-radius: 2px; background: #2E3540; }
.v-ds-poch .sila i.on { background: #E8A84A; box-shadow: 0 0 6px rgba(232, 168, 74, .6); }
.v-ds-ut { margin: 0; padding-left: 18px; font-size: 12.5px; }
.v-ds-ut li { margin: 2px 0; }
.v-ds-av { display: grid; grid-template-columns: 36px 1fr; gap: 10px; align-items: start; border: 1px solid var(--v-ln); border-radius: 10px; padding: 10px; background: var(--v-bg); }
.v-ds-av .v-av { width: 36px; height: 36px; display: grid; place-items: center; color: #0F1216; font-size: 12px; font-weight: 600; }
.v-ds-av b { display: block; font-size: 13px; }
.v-ds-av span { display: block; font-size: 12px; color: var(--v-i2); }
.v-ds-av small { display: block; font-size: 11px; color: var(--v-i3); }
.v-ds-zam { font-size: 11.5px; color: var(--v-i3); margin-top: 6px; }
.v-ds-kont { font-size: 12px; margin-top: 6px; color: #A9B0F2; }
.v-ds-kont.poyav { animation: v-poyav .4s both; }
.v-ds-kont u { text-underline-offset: 2px; }

@media (max-width: 1000px) {
  .v-in-g { grid-template-columns: 1fr; }
  .v-zap-g { grid-template-columns: 1fr; height: auto; }
  .v-zap-sp { border-right: 0; border-bottom: 1px solid var(--v-ln); }
}
@media (max-width: 760px) {
  .v-telo-in { padding: 10px; }
  .v-ch24 { height: 110px; gap: 2px; }
  .v-hm { gap: 1px; grid-template-columns: 18px repeat(24, 1fr); }
  .v-ds { padding: 14px; }
  .v-ds-poch { grid-template-columns: 1fr; gap: 0; }
  .v-ds-poch > span { margin-top: 6px; }
  .v-zr .v-tx > span { -webkit-line-clamp: 1; }
}
.v-tl:has(.v-telo-in), .v-tl:has(.v-telo-sv) { height: auto; }