/* ==========================================================================
   Saints Synergy — базовые стили
   ========================================================================== */

:root {
  --bg: #222222;
  --bg-elevated: #2b2b2e;
  --bg-elevated-hover: #323235;
  --accent: #0055ff;
  --accent-hover: #2f6bff;
  --text: #ffffff;
  --text-muted: #a7a7ad;
  --text-faint: #7a7a80;
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.14);
  --danger: #ff4d4d;

  --max-width: 1280px;
  --side-padding: 40px;
  --section-gap: 120px;

  --radius-lg: 20px;
  --radius-md: 5px;
  --radius-sm: 10px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (max-width: 1024px) {
  :root {
    --side-padding: 24px;
    --section-gap: 100px;
  }
}

@media (max-width: 640px) {
  :root {
    --side-padding: 16px;
    --section-gap: 108px; /* расстояние между блоками на телефоне — как на главной */
  }
}

/* ---- reset ---- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* тёмный холст под страницей: при «резиновой» прокрутке, сворачивании адресной строки и быстрой
     перерисовке из-под фона body не проглядывает белый */
  background-color: #06081c;
  color-scheme: dark;
}

/* шары-подсветки выглядывают из-под панелей; по горизонтали обрезаем, чтобы страница не раздвигалась шире экрана */
main,
.site-footer {
  overflow-x: clip;
}

/* ---- скроллбар: тонкий синий ползунок, прозрачная дорожка ---- */
/* Chrome, Edge, Safari */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track,
::-webkit-scrollbar-corner {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  /* прозрачная кайма по краям делает ползунок тоньше и даёт воздух */
  border: 2px solid transparent;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(0, 85, 255, 0.79) 50%, rgba(0, 85, 255, 1) 100%) padding-box;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(47, 107, 255, 0.79) 50%, rgba(47, 107, 255, 1) 100%) padding-box;
}

/* Полоса прокрутки страницы — «плавающая», поверх контента (рисует js/main.js).
   Встроенную скрываем только там, где скрипт её заменил, и только для мыши */
@media (hover: hover) and (pointer: fine) {
  html.has-page-scrollbar {
    scrollbar-width: none;
  }

  html.has-page-scrollbar::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }
}

.page-scrollbar {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 250;
  width: 18px;
  display: none; /* включается скриптом, когда есть что прокручивать */
}

html.has-page-scrollbar .page-scrollbar.is-active {
  display: block;
}

.page-scrollbar__thumb {
  position: absolute;
  top: 0;
  right: 3px;
  width: 8px;
  min-height: 40px;
  border-radius: 8px;
  background: #c4d8ff; /* голубой сайта */
  opacity: 0.75;
  cursor: grab;
  will-change: transform;
  transition: width 150ms var(--ease), right 150ms var(--ease), opacity 150ms var(--ease), background-color 150ms var(--ease);
}

.page-scrollbar:hover .page-scrollbar__thumb,
.page-scrollbar.is-dragging .page-scrollbar__thumb {
  right: 2px;
  width: 10px;
  opacity: 1;
}

.page-scrollbar.is-dragging .page-scrollbar__thumb {
  cursor: grabbing;
}

@media (hover: none), (pointer: coarse) {
  .page-scrollbar {
    display: none !important;
  }
}

/* Firefox (у него нет ::-webkit-scrollbar) */
@supports not selector(::-webkit-scrollbar) {
  * {
    scrollbar-width: thin;
    scrollbar-color: #0055ff transparent;
  }
}

body {
  margin: 0;
  background:
    radial-gradient(ellipse 55% 700px at 82% 100px, rgba(0, 85, 255, 0.32), transparent 60%),
    radial-gradient(ellipse 40% 500px at 8% 800px, rgba(0, 85, 255, 0.14), transparent 65%),
    linear-gradient(160deg, #06081c 0%, #0a0f2e 48%, #050613 100%);
  color: var(--text);
  font-family: 'Inter Tight', 'Segoe UI', Arial, sans-serif;
  font-size: 16px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

@media (max-width: 640px) {
  body {
    font-size: 14px;
  }
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1, h2, h3, h4, p {
  margin: 0;
}

button {
  font-family: inherit;
  cursor: pointer;
}

input, select, textarea {
  font-family: inherit;
}

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding-left: var(--side-padding);
  padding-right: var(--side-padding);
}

.section {
  padding-top: var(--section-gap);
}

.eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #a7a7ad;
  margin-bottom: 16px;
}

h1, .h1 {
  font-size: 40px;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

h2, .h2 {
  font-size: 34px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

h3, .h3 {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--text-muted);
}

@media (max-width: 640px) {
  h1, .h1 { font-size: 28px; }
  h2, .h2 { font-size: 24px; }
  h3, .h3 { font-size: 14px; }
}

.text-muted {
  color: var(--text-muted);
}

.visually-hidden {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  padding: 12px 20px;
  background: var(--accent);
  color: #fff;
  border-radius: 0 0 10px 0;
}

.visually-hidden:focus {
  left: 0;
}

/* ---- buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 28px;
  border-radius: 2px;
  border: 1px solid transparent;
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
  transition: transform 250ms var(--ease), background-color 250ms var(--ease), border-color 250ms var(--ease), color 250ms var(--ease);
}

.btn:active {
  transform: scale(0.97);
}

.btn-primary {
  background: var(--accent);
  color: #ffffff;
  border: none;
  background-clip: padding-box;
}

.btn-primary:hover {
  background: var(--accent-hover);
}

.btn-secondary {
  background: transparent;
  color: var(--text);
  border-color: var(--border-strong);
}

.btn-secondary:hover {
  border-color: var(--accent);
  color: var(--accent-hover);
}

.btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .btn {
    width: 100%;
  }
}

/* ==========================================================================
   Header
   ========================================================================== */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 84px;
}

.header-actions {
  display: none;
  align-items: center;
  gap: 16px;
}

.logo {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  transition: transform 300ms var(--ease);
  transform-origin: left center;
}

.site-header.is-scrolled .logo {
  transform: scale(0.86) translateX(10px);
}

.logo {
  flex-shrink: 0; /* логотип не сжимается, даже если меню широкое */
}

.logo img {
  display: block;
  height: 32px;
  width: auto;
}

/* 901–1199px: меню плотнее, чтобы рядом с полноразмерным логотипом помещалось в одну строку (полное меню — от 1200px) */
@media (min-width: 901px) and (max-width: 1199px) {
  .site-header__inner {
    gap: 16px;
  }
  .site-header .nav {
    gap: 16px;
    padding: 0 12px;
  }
  .site-header .nav-pill {
    gap: 4px;
  }
}

/* 901–1068px: места мало — логотип чуть компактнее, меню ещё плотнее (но логотип не сжимается) */
@media (min-width: 901px) and (max-width: 1068px) {
  .logo img {
    height: 26px;
  }
  .site-header__inner {
    gap: 12px;
  }
  .site-header .nav {
    gap: 10px;
    padding: 0 6px;
  }
  .site-header .nav a,
  .site-header .nav-item__trigger {
    font-size: 11px;
  }
  .site-header .nav-pill .nav-pill__cta {
    font-size: 11px;
    padding: 10px 12px;
  }
}

.nav-pill {
  position: relative;
  z-index: 1;
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 6px;
  border-radius: 5px;
}

.nav-pill::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -1;
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 5px;
  pointer-events: none;
  transition: left 300ms var(--ease);
}

.site-header.is-scrolled .nav-pill::before {
  left: calc(-1 * var(--pill-extend, 0px));
}

.nav {
  display: flex;
  align-items: center;
  gap: 36px;
  padding: 0 22px;
}

.nav a {
  font-size: 12px;
  font-weight: 400;
  color: var(--text-muted);
  white-space: nowrap;
  transition: color 200ms var(--ease);
}

.nav a:hover {
  color: var(--text);
}

.nav-item {
  position: relative;
  display: flex;
}

.nav-item__trigger {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font-family: inherit;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4; /* как у обычных пунктов-ссылок, иначе текст стоит ниже */
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: color 200ms var(--ease);
}

.nav-item:hover .nav-item__trigger,
.nav-item.is-open .nav-item__trigger {
  color: var(--text);
}

.nav-item__caret {
  position: relative;
  top: 1px;
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  transition: transform 200ms var(--ease);
}

.nav-item:hover .nav-item__caret,
.nav-item.is-open .nav-item__caret {
  transform: rotate(180deg);
}

.nav-dropdown {
  position: absolute;
  /* плашка меню ниже основной плашки (её нижний край на 16px ниже пункта), с зазором 8px */
  top: calc(100% + 24px);
  left: -20px;
  transform: translateY(-6px);
  min-width: 270px;
  background: rgba(8, 14, 36, 0.97);
  border: 1px solid rgba(140, 165, 255, 0.16);
  border-radius: 5px;
  padding: 8px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 200ms var(--ease), transform 200ms var(--ease), visibility 200ms;
  z-index: 150;
}

/* невидимый мостик, чтобы меню не закрывалось, пока курсор идёт через зазор */
.nav-dropdown::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -26px;
  height: 26px;
}

.nav-item:hover .nav-dropdown,
.nav-item.is-open .nav-dropdown,
.nav-item:focus-within .nav-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.nav-dropdown a {
  display: block;
  padding: 10px 12px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 400;
  color: var(--text-muted);
  white-space: nowrap;
  transition: background-color 150ms var(--ease), color 150ms var(--ease);
}

.nav-dropdown a:hover {
  background: rgba(140, 165, 255, 0.1);
  color: #c4d8ff;
}

/* пункт текущей страницы — голубым (отмечает main.js) */
.nav-dropdown a[aria-current="page"],
.nav-drawer__sublist a[aria-current="page"] {
  color: #c4d8ff;
}

.site-header .btn,
.nav-drawer__actions .btn {
  font-size: 13px;
  padding: 13px 22px;
}

.site-header .nav-pill__cta {
  font-size: 12px;
  font-weight: 300;
  padding: 10px 16px;
}

.site-header .btn-primary,
.nav-drawer__actions .btn-primary {
  background: linear-gradient(180deg, rgba(0, 85, 255, 0.79) 50%, rgba(0, 85, 255, 1) 100%);
}

.site-header .btn-primary:hover,
.nav-drawer__actions .btn-primary:hover {
  background: linear-gradient(180deg, rgba(47, 107, 255, 0.79) 50%, rgba(47, 107, 255, 1) 100%);
}

.nav-toggle {
  display: none;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  color: var(--text);
}

@media (max-width: 900px) {
  /* в мобильной версии при закреплении шапки по скроллу — полупрозрачная размытая подложка на всю ширину
     (на десктопе то же делает плашка меню) */
  .site-header::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    opacity: 0;
    pointer-events: none;
    transition: opacity 250ms var(--ease);
  }

  .site-header.is-scrolled::before {
    opacity: 1;
  }

  /* на телефоне подложка на всю ширину — логотип не уменьшаем и не сдвигаем, он остаётся по левой линии сетки */
  .site-header.is-scrolled .logo {
    transform: none;
  }

  .nav-pill {
    display: none;
  }
  .header-actions {
    display: flex;
    margin-left: auto; /* бургер — у правого края шапки */
  }
  /* бургер: иконка крупнее, плашка компактная, обводка яркая, как у стрелок слайдеров */
  .nav-toggle {
    display: inline-flex;
    width: 42px;
    height: 42px;
    border-color: rgba(196, 216, 255, 0.55);
  }
  .nav-toggle svg {
    width: 24px;
    height: 24px;
  }
}

@media (max-width: 640px) {
  .site-header__inner {
    height: 68px;
  }
}

/* mobile nav drawer */
.nav-drawer {
  position: fixed;
  inset: 0;
  z-index: 200;
  overflow-y: auto; /* на низких экранах пункты не вылезают из закрытого меню на страницу */
  background: var(--bg);
  display: flex;
  flex-direction: column;
  padding: 24px var(--side-padding) 40px;
  transform: translateY(-100%);
  transition: transform 320ms var(--ease);
}

.nav-drawer.is-open {
  transform: translateY(0);
}

.nav-drawer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
}

.nav-drawer__close {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  color: var(--text);
}

.nav-drawer__links {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 32px;
}

.nav-drawer__links > a {
  display: block;
  font-size: 15px;
  font-weight: 300;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}

.nav-drawer__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  padding: 14px 0;
  margin: 0;
  font-family: inherit;
  font-size: 15px;
  font-weight: 300;
  color: var(--text);
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}

.nav-drawer__trigger .nav-item__caret {
  width: 12px;
  height: 12px;
  color: var(--text-faint);
  transition: transform 200ms var(--ease);
}

.nav-drawer__item.is-open .nav-drawer__trigger .nav-item__caret {
  transform: rotate(180deg);
}

.nav-drawer__sublist {
  max-height: 0;
  overflow: hidden;
  transition: max-height 300ms var(--ease);
}

.nav-drawer__item.is-open .nav-drawer__sublist {
  max-height: 480px;
}

.nav-drawer__sublist a {
  display: block;
  padding: 12px 0 12px 16px;
  font-size: 13px;
  font-weight: 300;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}

/* контакты под пунктами меню */
.nav-drawer__contacts {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 28px;
}

.nav-drawer__contacts a {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  font-weight: 300;
  color: var(--text-muted);
}

.nav-drawer__contacts svg {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--accent-hover);
}

.nav-drawer__contacts a:hover {
  color: var(--text);
}

.nav-drawer__actions {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 32px;
}

/* ==========================================================================
   Hero (Блок 1)
   ========================================================================== */

.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-top: 134px;
  padding-bottom: 40px;
  overflow: hidden;
  border-bottom: 1px solid rgba(140, 165, 255, 0.14);
}

.hero::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: rgba(140, 165, 255, 0.14);
  z-index: 3;
}

.hero > .container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--max-width);
  margin-left: auto;
  margin-right: auto;
}

.hero__glass-scene {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  min-width: 320px;
  height: 100%;
  z-index: 0;
  overflow: visible;
  pointer-events: none;
}

.hero__glass-ball {
  position: absolute;
  width: 260px;
  height: 260px;
  margin-left: -130px;
  margin-top: -130px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 26%, rgba(90, 125, 220, 0.85) 0%, rgba(20, 40, 90, 0.9) 32%, rgba(6, 12, 35, 0.96) 64%, #020409 100%);
  box-shadow: 0 40px 70px rgba(0, 5, 20, 0.5);
  z-index: 1;
}

.hero__glass-ball--1 {
  top: 82%;
  left: 42%;
  animation: hero-ball-1 10s ease-in-out infinite alternate;
}

.hero__glass-ball--2 {
  width: 220px;
  height: 220px;
  margin-left: -110px;
  margin-top: -110px;
  top: 82%;
  left: 20%;
  opacity: 0.85;
  animation: hero-ball-2 10s ease-in-out infinite alternate;
}

@keyframes hero-ball-1 {
  0% {
    top: 82%;
    left: 42%;
  }
  50% {
    top: 34%;
    left: 42%;
  }
  100% {
    top: 34%;
    left: 92%;
  }
}

@keyframes hero-ball-2 {
  0% {
    top: 82%;
    left: 20%;
  }
  50% {
    top: 82%;
    left: 97%;
  }
  100% {
    top: 82%;
    left: 20%;
  }
}

.hero__glass-pane {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(150, 180, 255, 0.08) 0px,
      rgba(150, 180, 255, 0.08) 1px,
      rgba(150, 180, 255, 0) 1px,
      rgba(150, 180, 255, 0) 8px
    ),
    linear-gradient(180deg, rgba(10, 20, 55, 0.55) 0%, rgba(5, 10, 30, 0.7) 100%);
  backdrop-filter: blur(7px) saturate(140%);
  -webkit-backdrop-filter: blur(7px) saturate(140%);
  border: 1px solid rgba(140, 165, 255, 0.14);
  border-right: none;
  border-bottom: none;
}

.hero__glass-pane::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, rgba(150, 180, 255, 0.08) 0%, transparent 30%, transparent 70%, rgba(150, 180, 255, 0.05) 100%);
  pointer-events: none;
}

@media (max-width: 849px) {
  .hero__glass-scene {
    display: none;
  }
  .hero::after {
    display: none;
  }
  .hero-points-break {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__glass-ball--1 {
    animation: none;
    top: 60%;
    left: 42%;
  }
  .hero__glass-ball--2 {
    animation: none;
    top: 82%;
    left: 20%;
  }
}

.hero-flex {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: end;
}

.hero__left {
  max-width: 560px;
  margin-top: -20px;
}

.hero__title {
  max-width: 100%;
  font-size: 38px;
  font-weight: 400;
}

/* на телефоне — меньше десктопного; на самых узких экранах чуть меньше, чтобы заголовок помещался в плашку */
@media (max-width: 640px) {
  .hero__title {
    font-size: clamp(24px, 8.5vw, 30px);
  }
}

.hero__side {
  position: absolute;
  left: calc(min(75vw, calc(50vw + (var(--max-width) * 0.25)), calc(100vw - 450px)) + 60px);
  bottom: 0;
  transform: translateX(-50%);
  width: 820px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 20px;
}

.hero__tagline {
  max-width: 100%;
  font-size: 17.5px;
  font-weight: 300;
  margin-top: 20px;
}

.hero__photo-card {
  position: relative;
  max-width: 600px;
  border-radius: 5px;
  overflow: hidden;
}

.hero__photo-card-img {
  display: block;
  width: auto;
  height: auto;
  max-height: calc(100vh - 124px);
}

.hero__photo-caption {
  flex-shrink: 0;
  white-space: nowrap;
  padding-bottom: 40px;
  font-size: 13px;
  line-height: 1.3;
}

.hero__photo-caption strong {
  display: block;
  font-weight: 400;
}

.hero__photo-caption span span {
  display: block;
  margin-top: 2px;
  color: var(--text-muted);
  font-size: 11px;
}

.hero__points {
  font-size: 13px;
  font-weight: 300;
  color: var(--text-muted);
  line-height: 1.6;
  margin-top: 24px;
  margin-bottom: 28px;
}

.hero__points-dot {
  display: inline-block;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--accent-hover);
  margin: 0 8px;
  vertical-align: middle;
}

.hero__actions,
.founder__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.hero__actions .btn,
.founder__actions .btn {
  border-radius: 2px;
  font-size: 12px;
  padding: 12px 18px;
  white-space: nowrap;
}

/* синий градиент — как у кнопки «Диагностика» в меню */
.hero__actions .btn-primary,
.founder__actions .btn-primary {
  background: linear-gradient(180deg, rgba(0, 85, 255, 0.79) 50%, rgba(0, 85, 255, 1) 100%);
  color: #ffffff;
}

.hero__actions .btn-primary:hover,
.founder__actions .btn-primary:hover {
  background: linear-gradient(180deg, rgba(47, 107, 255, 0.79) 50%, rgba(47, 107, 255, 1) 100%);
}

.hero__actions .btn-secondary:hover,
.founder__actions .btn-secondary:hover {
  border-color: #e4e8f5;
  color: #e4e8f5;
}

/* 850–1100px: фото с подписью прижато к правому краю контейнера, а не стоит по центру.
   Фото уже не по высоте экрана, а по ширине колонки — иначе на этих экранах
   оно упирается в стеклянную плашку слева (или в делитель на 850–900px) */
@media (min-width: 850px) and (max-width: 1100px) {
  .hero__side {
    left: auto;
    right: var(--side-padding);
    transform: none;
    width: auto;
  }
  /* фото заметно уже, чем просто «до делителя» — иначе первая строка заголовка
     («Помогаем собственникам») заезжает под него */
  .hero__photo-card {
    max-width: calc(50vw - 185px);
  }
  /* колонка текста — по ширине, которая нужна самой длинной строке (факты под
     заголовком), но не шире ~505px, иначе заголовок на широком краю диапазона
     складывается в одну длинную строку и опять достаёт до фото. Колонка начинается
     не от края экрана, а с отступом var(--side-padding) — вычитаем его, иначе
     правый край текста оказывается за стеклянным делителем (на его половине) */
  .hero__left {
    max-width: clamp(380px, calc(50vw - var(--side-padding) - 10px), 505px);
  }
  /* ручной перенос перед «системы управления» рассчитан на десктопную ширину
     колонки — здесь при таком переносе «надежную» остаётся одна на строке.
     Без него слово просто подклеивается к следующей строке естественным образом */
  .hero-points-break {
    display: none;
  }
  /* колонка теперь заметно уже desktop-версии — 38px здесь заголовок
     переносит слишком дробно, в 2–3 слова на строку */
  .hero__title {
    font-size: clamp(24px, 3.4vw, 30px);
  }
}

/* 1101–1440px: у правого края контейнера (40px) на 1200 плавно уходит к десктопному отступу 105px на 1440 */
@media (min-width: 1101px) and (max-width: 1440px) {
  .hero__side {
    left: auto;
    right: clamp(40px, calc(40px + (100vw - 1200px) * 0.27), 105px);
    transform: none;
    width: auto;
  }
}

@media (max-width: 849px) {
  .hero-flex {
    grid-template-columns: minmax(0, 1fr); /* колонка не шире экрана, что бы ни лежало внутри */
  }
  .hero__side {
    position: static;
    left: auto;
    bottom: auto;
    transform: none;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 40px;
  }
  .hero__photo-caption {
    padding-bottom: 0;
    white-space: normal;
    text-align: center;
  }
}

@keyframes hero-mobile-ball {
  0% {
    left: 20%;
    top: 10%;
  }
  50% {
    left: 78%;
    top: 46%;
  }
  100% {
    left: 32%;
    top: 90%;
  }
}

/* низкие экраны телефонов: слегка сжимаем промежутки, чтобы плашка от шапки до низа экрана вмещала весь текст */
@media (max-width: 640px) and (max-height: 700px) {
  .hero .hero__left {
    padding-top: 12px;
  }
  .hero .hero__left .hero__tagline {
    margin-top: 12px;
  }
  .hero .hero__left .hero__points {
    margin-top: 16px;
    margin-bottom: 20px;
  }
}

@media (max-width: 849px) and (prefers-reduced-motion: reduce) {
  .hero__left::before {
    animation: none;
    left: 70%;
    top: 40%;
  }
}

@media (max-width: 849px) {
  .hero {
    padding-top: 0;
    padding-bottom: 0; /* нижний край фото — вплотную к линии под первым экраном */
    justify-content: flex-start;
  }
  /* первый экран на телефоне: заголовок и кнопки прижаты к низу экрана, фото начинается уже за его пределами */
  .hero > .container {
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-top: 68px; /* ровно высота шапки: плашка начинается сразу под ней, так что отступ от меню до верха плашки равен отступу от меню до верха экрана */
    padding-bottom: 0; /* нижний край плашки — ровно по нижнему краю экрана */
    padding-left: 0; /* плашка — на всю ширину экрана */
    padding-right: 0;
  }

  /* плашка с рифлёным стеклом под текстом и кнопками, а под плашкой — анимированный шар.
     Стекло и шар — псевдоэлементы блока с текстом, поэтому плашка всегда ровно по его размеру */
  /* плашка занимает всё место между шапкой и низом экрана, текст прижат к низу */
  .hero-flex {
    flex: 1;
    align-items: stretch;
  }

  .hero__left {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    max-width: none; /* на десктопе колонка уже 560px — здесь плашка (это тот же блок) должна быть на всю ширину экрана */
    margin-top: 0; /* на десктопе блок слегка приподнят (-20px) — на телефоне плашка начинается ровно под шапкой */
    /* текст — по полям страницы, как логотип в шапке; нижняя кнопка всегда в 28px от края экрана */
    padding: 28px var(--side-padding);
  }

  /* блок текста прижат к низу плашки; если не помещается — плашка растёт вниз, а не вылезает вверх на шапку */
  .hero__left > :first-child {
    margin-top: auto;
  }

  .hero__left::before {
    content: '';
    position: absolute;
    z-index: -2;
    top: 12%;
    left: 20%;
    width: 170px;
    height: 170px;
    margin: -85px 0 0 -85px;
    border-radius: 50%;
    background:
      radial-gradient(circle at 30% 26%, rgba(90, 125, 220, 0.85) 0%, rgba(20, 40, 90, 0.9) 32%, rgba(6, 12, 35, 0.96) 64%, #020409 100%);
    box-shadow: 0 30px 50px rgba(0, 5, 20, 0.5);
    animation: hero-mobile-ball 11s ease-in-out infinite alternate;
  }

  .hero__left::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    /* на всю ширину экрана: рамка только сверху и снизу, без скруглений;
       цвет и толщина — как у стеклянных панелей на десктопе */
    border-radius: 0;
    border: 1px solid rgba(140, 165, 255, 0.14);
    border-left: 0;
    border-right: 0;
    background:
      repeating-linear-gradient(
        90deg,
        rgba(150, 180, 255, 0.08) 0px,
        rgba(150, 180, 255, 0.08) 1px,
        rgba(150, 180, 255, 0) 1px,
        rgba(150, 180, 255, 0) 8px
      ),
      linear-gradient(180deg, rgba(10, 20, 55, 0.55) 0%, rgba(5, 10, 30, 0.7) 100%);
    backdrop-filter: blur(7px) saturate(140%);
    -webkit-backdrop-filter: blur(7px) saturate(140%);
  }
  /* кнопки на всю ширину плашки: до 460px — одна под другой, шире — рядом, поровну */
  .hero__actions {
    flex-direction: column;
  }
  .hero__side {
    position: relative;
    margin-top: 32px;
  }
  .hero__photo-card {
    margin-left: 0;
  }
  /* подпись к фото — слева, по линии сетки (как остальные элементы), внизу поверх фото */
  .hero__photo-caption {
    position: absolute;
    left: var(--side-padding);
    bottom: 24px;
    padding-bottom: 0;
    white-space: normal;
    text-align: left;
  }
  .hero__photo-card-img {
    max-height: 360px;
  }
}

/* 460–849px: кнопки hero рядом, поровну. Отдельным блоком, а не вложенным @media —
   вложенные медиазапросы понимают не все браузеры */
@media (min-width: 460px) and (max-width: 849px) {
  .hero__actions {
    flex-direction: row;
    flex-wrap: nowrap;
  }
  .hero__actions .btn {
    flex: 1 1 0;
  }
}

/* ---- Факты доверия — под заголовком hero ---- */
.hero-stats {
  position: relative;
  padding: 30px 0;
  border-bottom: 1px solid rgba(140, 165, 255, 0.14);
}

.hero-stats::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: rgba(140, 165, 255, 0.14);
}

.hero-stats__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.fact {
  position: relative;
  padding-left: 0;
}

.fact:not(:first-child) {
  padding-left: 24px;
}

.fact:nth-child(2)::before,
.fact:nth-child(4)::before {
  content: '';
  position: absolute;
  top: -30px;
  bottom: -30px;
  left: 0;
  width: 1px;
  background: rgba(140, 165, 255, 0.14);
}

.fact__value {
  display: block;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: #c4d8ff;
}

.fact__label {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.35;
}

/* планшет и телефон: сетка 2×2; вертикальная линия — ровно по центру экрана,
   горизонтальная — посередине между рядами на всю ширину экрана */
@media (max-width: 1024px) {
  .hero-stats__list {
    grid-template-columns: repeat(2, 1fr);
    gap: 28px 0;
  }
  .fact:not(:first-child) {
    padding-left: 0;
  }
  .fact:nth-child(odd) {
    padding-right: 16px; /* текст не подходит вплотную к центральной линии */
  }
  .fact:nth-child(even) {
    padding-left: 16px;
  }
  /* центральная вертикальная линия рисуется на всю высоту блока (как на десктопе) */
  .hero-stats::after {
    display: block;
  }
  .fact:nth-child(2)::before {
    display: none;
  }
  /* горизонтальная линия между рядами: левая половина — у 3-го факта, правая — у 4-го */
  .fact:nth-child(3)::before,
  .fact:nth-child(4)::before {
    content: '';
    position: absolute;
    top: -14px; /* половина промежутка между рядами (28px) */
    bottom: auto;
    height: 1px;
    width: auto;
    background: rgba(140, 165, 255, 0.14);
  }
  .fact:nth-child(3)::before {
    left: calc(var(--side-padding) * -1);
    right: 0;
  }
  .fact:nth-child(4)::before {
    left: 0;
    right: calc(var(--side-padding) * -1);
  }
}

@media (max-width: 640px) {
  .hero-stats {
    padding: 32px 0;
  }
  /* подписи под цифрами — мельче на телефоне */
  .hero-stats .fact__label {
    font-size: 11px;
  }
}

/* ==========================================================================
   Для кого (Блок 2)
   ========================================================================== */

.signals {
  padding-top: var(--section-gap);
}

.signals__header {
  max-width: 870px;
}

.signals__header h3 {
  margin-top: 18px;
  font-size: 14px;
  font-weight: 300;
  color: #ffffff;
}

/* карточки стыкуются вплотную: у соседей одна общая линия.
   Сетка рисует верх и левый край, каждая карточка — свой правый и нижний */
.signals__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: 48px;
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
  border-radius: 5px;
  overflow: hidden;
}

/* Карточка-признак: сверху значок, внизу заголовок. На устройствах с мышью
   текст скрыт и плавно выезжает при наведении, приподнимая заголовок;
   высота карточки фиксирована, чтобы сетка не прыгала. */
.signal-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  min-height: var(--signal-card-h, 230px);
  background: rgba(10, 20, 55, 0.4);
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 26px 24px;
  outline: none;
}

.signal-card.reveal {
  transition: opacity 500ms var(--ease), transform 500ms var(--ease), background-color 300ms var(--ease);
}

/* верхняя строка карточки: номер слева, значок со стрелкой справа */
.signal-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 28px;
}

.signal-card__num {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: #ffffff;
}

.signal-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(140, 165, 255, 0.22);
  border-radius: 50%;
  color: #a7a7ad;
  transition: transform 400ms var(--ease), color 300ms var(--ease), border-color 300ms var(--ease);
}

.signal-card__icon svg {
  width: 12px;
  height: 12px;
}

.signal-card__title {
  font-size: 15px;
  font-weight: 300;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: #c4d8ff;
}

/* длинный заголовок: заходит в правый паддинг карточки, чтобы уложиться в 2 строки */
.signal-card__title--wide {
  margin-right: -16px;
}

.signal-card__text {
  margin-top: 10px;
  font-size: 12px;
  font-weight: 300;
  color: var(--text-muted);
  line-height: 1.5;
}

@media (hover: hover) and (pointer: fine) {
  .signal-card__text {
    max-height: 0;
    margin-top: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(8px);
    transition: max-height 450ms var(--ease), margin-top 450ms var(--ease), opacity 350ms var(--ease), transform 450ms var(--ease);
  }

  .signal-card:hover,
  .signal-card:focus-visible {
    background: rgba(0, 85, 255, 0.07);
  }

  .signal-card:hover .signal-card__text,
  .signal-card:focus-visible .signal-card__text {
    max-height: 120px;
    margin-top: 10px;
    opacity: 1;
    transform: none;
  }

  .signal-card:hover .signal-card__icon,
  .signal-card:focus-visible .signal-card__icon {
    transform: rotate(180deg);
    color: #ffffff;
    border-color: rgba(0, 85, 255, 0.6);
  }
}

/* без мыши (телефон, планшет) наводить нечем — текст виден сразу, значок не нужен */
@media (hover: none), (pointer: coarse) {
  .signal-card {
    min-height: 0;
  }
  .signal-card__icon {
    display: none;
  }
}

.signals__footer {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 48px;
  padding: 32px;
  overflow: visible;
  border-radius: 5px;
}

.signals__footer-ball {
  position: absolute;
  top: 50%;
  left: 58%;
  width: 120px;
  height: 120px;
  margin-left: -60px;
  margin-top: -60px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 26%, rgba(90, 125, 220, 0.85) 0%, rgba(20, 40, 90, 0.9) 32%, rgba(6, 12, 35, 0.96) 64%, #020409 100%);
  box-shadow: 0 30px 50px rgba(0, 5, 20, 0.5);
  z-index: 1;
  animation: signals-ball-drift 10s ease-in-out infinite alternate;
}

@keyframes signals-ball-drift-mobile {
  0% {
    left: 24%;
    top: 10%;
  }
  50% {
    left: 62%;
    top: 46%;
  }
  100% {
    left: 80%;
    top: 12%;
  }
}

@keyframes signals-ball-drift {
  0% {
    left: 55%;
    top: 30%;
  }
  50% {
    left: 65%;
    top: 55%;
  }
  100% {
    left: 74%;
    top: 30%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .signals__footer-ball {
    animation: none;
    left: 62%;
    top: 50%;
  }
}

@media (max-width: 640px) and (prefers-reduced-motion: reduce) {
  .signals__footer-ball {
    animation: none;
    left: 62%;
    top: 12%;
  }
}

.signals__footer-pane {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: 5px;
  border: 1px solid rgba(140, 165, 255, 0.14);
  background:
    repeating-linear-gradient(
      90deg,
      rgba(150, 180, 255, 0.08) 0px,
      rgba(150, 180, 255, 0.08) 1px,
      rgba(150, 180, 255, 0) 1px,
      rgba(150, 180, 255, 0) 8px
    ),
    linear-gradient(180deg, rgba(10, 20, 55, 0.55) 0%, rgba(5, 10, 30, 0.7) 100%);
  backdrop-filter: blur(7px) saturate(140%);
  -webkit-backdrop-filter: blur(7px) saturate(140%);
}

.signals__footer-pane::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, rgba(150, 180, 255, 0.08) 0%, transparent 30%, transparent 70%, rgba(150, 180, 255, 0.05) 100%);
  pointer-events: none;
}

.signals__footer p {
  position: relative;
  z-index: 3;
  max-width: 620px;
  color: #ffffff;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.5;
}

.signals__footer-highlight {
  color: #c4d8ff;
}

.signals__footer .btn {
  position: relative;
  z-index: 3;
  background: linear-gradient(180deg, rgba(0, 85, 255, 0.79) 50%, rgba(0, 85, 255, 1) 100%);
  color: #ffffff;
  border-color: transparent;
  font-size: 12px;
  padding: 12px 18px;
  border-radius: 2px;
}

.signals__footer .btn:hover {
  background: linear-gradient(180deg, rgba(47, 107, 255, 0.79) 50%, rgba(47, 107, 255, 1) 100%);
  border-color: transparent;
  color: #ffffff;
}

@media (max-width: 1024px) {
  .signals__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .signals {
    padding-top: 100px;
  }
  .signals__grid {
    grid-template-columns: 1fr;
    margin-top: 32px;
  }
  .signals__footer {
    margin-top: 32px;
    padding-top: 28px;
  }
  /* текст на плашках («Для кого», «Этапы», «Продукты») — мельче на телефоне */
  .signals__footer p {
    font-size: 14px;
  }

  /* шар под стеклом на телефоне: в верхних точках пути выглядывает из-под плашки сверху */
  .signals__footer-ball {
    animation-name: signals-ball-drift-mobile;
  }
  .signals__footer .btn {
    width: 100%;
  }
}

/* ==========================================================================
   Причины (Блок 3)
   ========================================================================== */

.reasons {
  padding-top: var(--section-gap);
}

/* ширина подобрана так, чтобы второе предложение заголовка само переносилось на вторую строку:
   первое предложение ~707px, оно же с первым словом второго ~775px, второе предложение ~659px */
.reasons__header h2 {
  max-width: 740px;
}

.reasons__header h3 {
  margin-top: 18px;
  font-size: 14px;
  font-weight: 200;
  color: #ffffff;
}

.reasons__flow {
  position: relative;
  display: grid;
  grid-template-columns: 120px repeat(3, 1fr) 120px;
  max-width: 1220px;
  gap: 40px;
  margin: 48px auto 0;
}

.reasons__flow-lines {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.reasons__flow-connector {
  position: absolute;
  background: rgba(140, 165, 255, 0.45);
}

/* линия над первой карточкой — только на телефоне */
.reasons__flow-connector--9 {
  display: none;
}

/* точные координаты линий задаёт JS по реальным позициям карточек */

.reasons__flow-card {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 28px 22px;
  background: rgba(10, 20, 55, 0.4);
  border: 1px solid rgba(140, 165, 255, 0.14);
  border-radius: var(--radius-md);
}

.reasons__flow-start {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.reasons__flow-start-line {
  position: absolute;
  height: 1px;
  background: rgba(140, 165, 255, 0.45);
}

.reasons__flow-ball {
  position: absolute;
  left: 0;
  top: 0;
  width: 10px;
  height: 10px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #0055ff;
  box-shadow: 0 0 12px rgba(0, 85, 255, 0.8);
  z-index: 2;
  pointer-events: none;
  transition: filter 200ms var(--ease), opacity 200ms var(--ease), transform 200ms var(--ease), box-shadow 200ms var(--ease);
  will-change: left, top;
}

/* шарик проходит под карточкой — размытый, но крупнее и с сильным свечением, чтобы оставался заметным */
.reasons__flow-ball.is-blurred {
  transform: translate(-50%, -50%) scale(1.8);
  filter: blur(2.5px);
  opacity: 0.9;
  background: #2f6bff;
  box-shadow: 0 0 18px 4px rgba(47, 107, 255, 0.85);
}

.reasons__flow-card--1 { grid-column: 2; grid-row: 1; }
.reasons__flow-card--2 { grid-column: 3; grid-row: 1; }
.reasons__flow-card--3 { grid-column: 3; grid-row: 2; }
.reasons__flow-card--4 { grid-column: 4; grid-row: 2; }
.reasons__flow-card--6 { grid-column: 3; grid-row: 3; }
.reasons__flow-card--5 { grid-column: 4; grid-row: 3; }
/* низ схемы: текст → карточка 7 → заголовок; шарик едет по вертикали через них.
   В промежутках между элементами видна линия; над текстом и карточкой 7 они длиннее (100px) */
.reasons__flow-text { grid-column: 2 / 5; grid-row: 4; margin-top: 60px; }
.reasons__flow-card--7 { grid-column: 2 / 5; grid-row: 5; margin-top: 60px; justify-self: center; width: 100%; max-width: 640px; }
.reasons__flow-title { grid-column: 1 / -1; grid-row: 6; margin-top: 40px; }

.reasons__flow-index {
  display: block;
  margin-bottom: 18px;
  font-size: 12px;
  font-weight: 300;
  letter-spacing: 0.04em;
  color: #ffffff;
}

.reasons__flow-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 16px;
}

.reasons__flow-icon svg,
.reasons__flow-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.reasons__flow-card p {
  font-size: 13px;
  font-weight: 200;
  color: var(--text);
  line-height: 1.4;
}

.reasons__flow-text {
  position: relative;
  z-index: 1;
  justify-self: center;
  max-width: 440px;
  text-wrap: balance;
  text-align: center;
  font-size: 13px;
  font-weight: 200;
  line-height: 1.5;
  color: var(--text);
}

.reasons__flow-card.reasons__flow-card--7 {
  align-items: center;
  text-align: center;
  padding: 36px 40px;
}

/* размер как у заголовков блоков (h2) */
.reasons__flow-card--7 .reasons__summary-lead {
  font-size: 34px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--text);
  text-wrap: balance;
}

.reasons__flow-card--7 .reasons__summary-text {
  max-width: 440px;
  text-wrap: balance;
  margin-top: 20px;
}

.reasons__flow-title {
  position: relative;
  z-index: 1;
  justify-self: center;
  max-width: 760px;
  text-align: center;
  font-size: 34px; /* как у заголовков блоков (h2) */
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--text);
}

.reasons__summary-highlight {
  color: #c4d8ff;
}

/* пункты — скруглённые плашки-табы */
.reasons__summary-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  max-width: 460px; /* 2 плашки в первом ряду, 3 во втором */
  margin-top: 16px;
}

.reasons__summary-list li {
  padding: 6px 14px;
  border: 1px solid rgba(140, 165, 255, 0.22);
  border-radius: 999px;
  background: rgba(140, 165, 255, 0.06);
  font-size: 11px;
  font-weight: 300;
  line-height: 1.3;
  color: #a7a7ad;
  white-space: nowrap;
}


@media (max-width: 900px) {
  .reasons__flow {
    grid-template-columns: repeat(2, 1fr);
    max-width: 600px;
    margin-top: 32px;
  }
  .reasons__flow-card--1,
  .reasons__flow-card--2,
  .reasons__flow-card--3,
  .reasons__flow-card--4,
  .reasons__flow-card--5,
  .reasons__flow-card--6 {
    grid-column: auto;
    grid-row: auto;
  }
  .reasons__flow-card--5 {
    order: 1;
  }
  .reasons__flow-card--6 {
    order: 2;
  }
  .reasons__flow-text,
  .reasons__flow-card--7,
  .reasons__flow-title {
    grid-column: 1 / -1;
    grid-row: auto;
    margin-top: 0;
  }
  .reasons__flow-text {
    order: 3;
    margin-top: 8px;
  }
  .reasons__flow-card--7 {
    order: 4;
  }
  .reasons__flow-title {
    order: 5;
    margin-top: 8px;
  }
  .reasons__flow-card.reasons__flow-card--7 {
    padding: 28px 22px;
  }
  .reasons__summary-list li {
    white-space: normal;
  }
  .reasons__flow-lines {
    display: none;
  }
  .reasons__flow-start {
    display: none;
  }
  .reasons__flow-ball {
    display: none;
  }
}

@media (max-width: 640px) {
  /* телефон: линии между карточками и синий шарик, который едет по ним при прокрутке, как на десктопе */
  .reasons__flow-lines,
  .reasons__flow-ball {
    display: block;
  }
  .reasons {
    padding-top: var(--section-gap);
  }
  /* карточки 03, 04 и 06 на телефоне: подпись в две строки, как на десктопе */
  .reasons__flow-card--3 p,
  .reasons__flow-card--4 p,
  .reasons__flow-card--6 p {
    max-width: 200px;
  }
  /* на телефоне заголовки блоков 24px — этот текст вместе с ними */
  .reasons__flow-card--7 .reasons__summary-lead {
    font-size: 24px;
  }
  .reasons__flow-title {
    font-size: 24px;
  }
  .reasons__flow {
    grid-template-columns: 1fr;
    gap: 40px; /* промежутки между карточками, где видны линии (как на десктопе) */
    margin-top: 24px;
    padding-top: 72px; /* свободное место над первой карточкой: здесь линия и старт шарика */
  }
  .reasons__flow-connector--9 {
    display: block;
  }
}

/* ==========================================================================
   Этапы (Блок 4) — вертикальная шкала с линией прогресса
   ========================================================================== */

.stages__header {
  max-width: 870px;
}

.stages__header h3 {
  max-width: 680px;
  margin-top: 18px;
  font-size: 14px;
  font-weight: 200;
  color: #ffffff;
}

.stages__timeline {
  --stages-index-col: 200px;
  --stages-body-gap: 96px;
  position: relative;
  margin-top: 64px;
}

/* дорожка шкалы; синяя заливка растёт при прокрутке (см. main.js) */
.stages__track {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--stages-index-col);
  width: 1px;
  background: rgba(140, 165, 255, 0.14);
  pointer-events: none;
}

.stages__fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  background: linear-gradient(to bottom, rgba(0, 85, 255, 0.25), #0055ff);
}

.stages__fill::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 10px;
  height: 10px;
  transform: translate(-50%, 50%);
  border-radius: 50%;
  background: #0055ff;
  box-shadow: 0 0 12px rgba(0, 85, 255, 0.8);
  opacity: 0;
  transition: opacity 200ms var(--ease);
}

.stages__timeline.is-started .stages__fill::after {
  opacity: 1;
}

.stage {
  display: grid;
  grid-template-columns: var(--stages-index-col) 1fr;
  padding: 36px 0;
}

.stage:first-child {
  padding-top: 0;
}

.stage:last-child {
  padding-bottom: 0;
}

.stage__index {
  font-size: 20px;
  font-weight: 300;
  line-height: 28px;
  color: rgba(255, 255, 255, 0.35);
  transition: color 300ms var(--ease);
}

.stage.is-active .stage__index {
  color: #ffffff;
}

.stage__body {
  padding-left: var(--stages-body-gap);
  max-width: calc(var(--stages-body-gap) + 760px);
}

.stage__title {
  font-size: 22px;
  font-weight: 300;
  line-height: 28px;
  color: #ffffff;
}

.stage__text {
  max-width: 520px;
  margin-top: 10px;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.55;
  color: #a7a7ad;
}

/* ширина подобрана так, чтобы в первом ряду было 4 плашки, во втором — 2 */
.stage__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 600px;
  margin-top: 16px;
}

.stage__tags li {
  padding: 6px 14px;
  border: 1px solid rgba(140, 165, 255, 0.22);
  border-radius: 999px;
  background: rgba(140, 165, 255, 0.06);
  font-size: 11px;
  font-weight: 300;
  line-height: 1.3;
  color: #a7a7ad;
}

.stage__products {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 20px;
}

.product-card {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  min-height: 88px;
  padding: 18px;
  border: 1px solid rgba(140, 165, 255, 0.14);
  border-radius: var(--radius-md);
  background: rgba(10, 20, 55, 0.4);
  font-size: 12px;
  font-weight: 300;
  line-height: 1.4;
  color: #c4d8ff;
  transition: background-color 300ms var(--ease);
}

/* первая строка названия — по центру круглого значка (28px) */
.product-card > span:first-child {
  padding-top: 6px;
}

/* значок и подсветка — как у карточек «Для кого» (.signal-card) */
.product-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(140, 165, 255, 0.22);
  border-radius: 50%;
  color: #a7a7ad;
  transition: color 300ms var(--ease), border-color 300ms var(--ease);
}

.product-card__icon svg {
  width: 12px;
  height: 12px;
}

.product-card:hover,
.product-card:focus-visible {
  background: rgba(0, 85, 255, 0.07);
}

.product-card:hover .product-card__icon,
.product-card:focus-visible .product-card__icon {
  color: #ffffff;
  border-color: rgba(0, 85, 255, 0.6);
}

/* панель под шкалой — тот же компонент, что в блоке «Для кого» (.signals__footer) */
.stages__footer {
  margin-top: 64px;
}

@media (max-width: 900px) {
  .stages__timeline {
    --stages-index-col: 48px;
    --stages-body-gap: 28px;
    margin-top: 40px;
  }
  .stages__footer {
    margin-top: 48px;
  }
  .stage__products {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .stages__timeline {
    --stages-index-col: 36px;
    --stages-body-gap: 20px;
  }
  .stage {
    padding: 28px 0;
  }
  .stage__index {
    font-size: 16px;
  }
  .stage__title {
    font-size: 18px;
  }
  .stage__products {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Продукты (Блок 5) — светлые карточки на тёмном фоне
   ========================================================================== */

.products__header {
  max-width: 900px;
}

/* ширина подобрана так, чтобы заголовок сам переносился на три строки (как раньше с ручными переносами):
   1-е предложение ~696px, оно же со словом «Поэтому» ~833px, вторая строка «…— мы» ~651px, вместе со словом «подбираем» ~828px */
.products__header h2 {
  max-width: 760px;
}

.products__header h3 {
  max-width: 680px;
  margin-top: 18px;
  font-size: 14px;
  font-weight: 200;
  color: #ffffff;
}

/* 5 карточек одного размера в один ряд. Главная (1, «Внешний контур»)
   на десктопе — в центре ряда, на планшете и телефоне — первой. */
.products__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin-top: 36px;
}

.product-tile--2 { grid-column: 1; grid-row: 1; }
.product-tile--3 { grid-column: 2; grid-row: 1; }
.product-tile--1 { grid-column: 3; grid-row: 1; }
.product-tile--4 { grid-column: 4; grid-row: 1; }
.product-tile--5 { grid-column: 5; grid-row: 1; }

.product-tile {
  --tile-ink: #0a0f2e;
  --tile-text: #3c4566;
  --tile-muted: #6b7390;
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  padding: 24px 20px 20px;
  border-radius: var(--radius-md);
  background: #f3f5fb;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  color: var(--tile-ink);
}

/* при наведении карточка слегка темнеет: полупрозрачный слой между фоном и текстом */
.product-tile::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: rgba(5, 10, 35, 0.08);
  opacity: 0;
  transition: opacity 300ms var(--ease);
}

.product-tile:hover::before,
.product-tile:focus-visible::before {
  opacity: 1;
}

.product-tile__title {
  padding-bottom: 14px;
  border-bottom: 1px solid #c4d8ff;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.3;
  color: inherit;
}

/* контент под линией названия — чуть ниже */
.product-tile__title + .product-tile__label {
  margin-top: 20px;
}

/* в одном ряду названия бывают в 1 и 2 строки — резервируем 2,
   чтобы текст под ними во всех карточках начинался на одном уровне */
@media (min-width: 1101px) {
  .product-tile__title {
    min-height: calc(2.6em + 15px); /* 2 строки + отступ и линия снизу */
  }
}

.product-tile__label {
  margin-top: 16px;
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tile-muted);
}

.product-tile__text {
  margin-top: 6px;
  font-size: 11px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--tile-text);
}

.product-tile__list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
}

.product-tile__list li {
  position: relative;
  padding-left: 12px;
  font-size: 11px;
  font-weight: 300;
  line-height: 1.4;
  color: var(--tile-text);
}

.product-tile__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 5.5px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #0055ff;
}

.product-tile__more {
  display: inline-flex;
  align-self: flex-end;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding-top: 22px;
  font-size: 11px;
  font-weight: 400;
  color: #0055ff;
}

.product-tile__more-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(0, 85, 255, 0.3);
  border-radius: 50%;
  transition: background-color 300ms var(--ease), color 300ms var(--ease), border-color 300ms var(--ease);
}

.product-tile__more-icon svg {
  width: 12px;
  height: 12px;
}

.product-tile:hover .product-tile__more-icon,
.product-tile:focus-visible .product-tile__more-icon {
  background: #0055ff;
  border-color: #0055ff;
  color: #ffffff;
}

/* главная карточка — центральная в нижнем ряду: фирменный синий */
.product-tile--main {
  --tile-ink: #ffffff;
  --tile-text: #dbe6ff;
  --tile-muted: #a9c2ff;
  background: linear-gradient(160deg, #2f6bff 0%, #0055ff 50%, #0043cc 100%);
  box-shadow: 0 20px 50px rgba(0, 85, 255, 0.35);
}

.product-tile--main .product-tile__list li::before {
  background: #ffffff;
}

.product-tile--main .product-tile__more {
  color: #ffffff;
}

.product-tile--main .product-tile__more-icon {
  border-color: rgba(255, 255, 255, 0.45);
}

.product-tile--main:hover .product-tile__more-icon,
.product-tile--main:focus-visible .product-tile__more-icon {
  background: #ffffff;
  border-color: #ffffff;
  color: #0055ff;
}

/* панель с кнопкой — тот же компонент, что в «Для кого» и «Этапах» (.signals__footer) */
.products__cta {
  margin-top: 48px;
}

@media (max-width: 1100px) {
  .products__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  .product-tile--1,
  .product-tile--2,
  .product-tile--3,
  .product-tile--4 {
    grid-column: auto;
    grid-row: auto;
  }
  .product-tile--5 {
    grid-column: 1 / -1;
    grid-row: auto;
  }
}

@media (max-width: 640px) {
  .products__grid {
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 32px;
  }
  .product-tile {
    padding: 26px 22px 22px;
  }
}

/* ==========================================================================
   Почему Saints (Блок 6)
   ========================================================================== */

.why__header {
  max-width: 900px;
}

/* ширина подобрана так, чтобы заголовок сам переносился на две строки (как раньше с ручным переносом):
   первая строка ~629px, она же с «а с системой» ~831px, вторая строка ~508px */
.why__header h2 {
  max-width: 740px;
}

.why__header h3 {
  max-width: 680px;
  margin-top: 18px;
  font-size: 14px;
  font-weight: 200;
  color: #ffffff;
}

/* --- сравнительная таблица --- */
.compare {
  margin-top: 56px;
  border: 1px solid var(--border);
  border-radius: 5px;
  overflow: hidden;
  background: rgba(10, 20, 55, 0.4);
}

/* две колонки ровно по 50%; стрелка — в левой колонке, у её правого края */
.compare__head,
.compare__row {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.compare__head .compare__arrow {
  display: none;
}

.compare__head {
  border-bottom: 1px solid var(--border);
}

.compare__row + .compare__row {
  border-top: 1px solid var(--border);
}

.compare__th {
  padding: 18px 28px;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #c4d8ff;
}

/* колонка Saints подсвечена целиком — от заголовка до последней строки */
.compare__th--saints,
.compare__cell--saints {
  background: rgba(0, 85, 255, 0.08);
}

.compare__th--saints {
  color: #c4d8ff;
}

.compare__cell {
  padding: 22px 28px;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.4;
}

.compare__cell--usual {
  color: #a7a7ad;
}

.compare__cell--saints {
  color: #ffffff;
}

.compare__arrow {
  position: absolute;
  top: 50%;
  right: calc(50% + 28px);
  z-index: 1;
  display: flex;
  transform: translateY(-50%);
  color: #5fa8ff;
}

.compare__arrow svg {
  width: 16px;
  height: 16px;
}

/* подписи колонок внутри ячеек нужны только в мобильной версии */
.compare__label {
  display: none;
}

/* --- преимущества: карточка со знаком Saints в центре, по 3 пункта слева и справа.
   Линия под каждым пунктом доходит до края карточки и упирается в неё точкой --- */
/* карточка 360×360 делится на 4 полосы по 90px; линии пунктов лежат на границах
   полос — ровно на 1/4, 1/2 и 3/4 высоты карточки */
.why-scheme {
  display: grid;
  grid-template-columns: 1fr 360px 1fr;
  grid-template-rows: repeat(4, 90px);
  margin-top: 112px;
}

.why-scheme__card {
  position: relative;
  grid-column: 2;
  grid-row: 1 / 5;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(140, 165, 255, 0.2);
  border-radius: 28px;
  /* «решётка» из тонких вертикальных линий — как на первом экране */
  background:
    repeating-linear-gradient(
      90deg,
      rgba(150, 180, 255, 0.08) 0px,
      rgba(150, 180, 255, 0.08) 1px,
      rgba(150, 180, 255, 0) 1px,
      rgba(150, 180, 255, 0) 8px
    ),
    linear-gradient(180deg, rgba(10, 20, 55, 0.55) 0%, rgba(5, 10, 30, 0.7) 100%);
}

.why-scheme__mark {
  width: 132px;
  height: 132px;
  filter: drop-shadow(0 0 24px rgba(0, 85, 255, 0.45));
}

.why-scheme__corner {
  position: absolute;
  font-size: 11px;
  font-weight: 300;
  color: #a7a7ad;
}

.why-scheme__corner--br { bottom: 20px; right: 24px; color: #ffffff; }

.why-scheme__item {
  position: relative;
  z-index: 1; /* точки на краю лежат поверх карточки */
  align-self: end;
  width: min(356px, 100%); /* одинаковая ширина — все линии одной длины */
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(140, 165, 255, 0.22);
}

.why-scheme__item--row1 { grid-row: 1; }
.why-scheme__item--row2 { grid-row: 2; }
.why-scheme__item--row3 { grid-row: 3; }

/* левые пункты прижаты к карточке справа, правые — слева */
.why-scheme__item--left {
  grid-column: 1;
  justify-self: end;
  padding-right: 56px;
}

.why-scheme__item--right {
  grid-column: 3;
  justify-self: start;
  padding-left: 56px;
}

/* точка на краю карточки, где заканчивается линия */
.why-scheme__item::after {
  content: '';
  position: absolute;
  bottom: -4px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #c4d8ff;
  box-shadow: 0 0 8px rgba(196, 216, 255, 0.6);
}

/* изначально точки на дальних концах линий; когда схема доходит до середины
   экрана (класс ставит main.js), они съезжаются к краям карточки */
.why-scheme__item--left::after { right: calc(100% - 3px); }
.why-scheme__item--right::after { left: calc(100% - 3px); }
.why-scheme__item::after {
  transition: left 900ms var(--ease), right 900ms var(--ease);
}

.why-scheme__item--row2::after { transition-delay: 120ms; }
.why-scheme__item--row3::after { transition-delay: 240ms; }

.why-scheme.is-active .why-scheme__item--left::after { right: -4px; }
.why-scheme.is-active .why-scheme__item--right::after { left: -4px; }

.why-scheme__title {
  font-size: 15px;
  font-weight: 300;
  line-height: 1.35;
  color: #c4d8ff;
}

.why-scheme__text {
  max-width: 300px;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--text-muted);
}

/* 901–1100px: боковым колонкам не хватает ширины, подписи переносятся и залезают на строку выше —
   карточка чуть уже, отступ от линии меньше */
@media (min-width: 901px) and (max-width: 1100px) {
  .why-scheme {
    grid-template-columns: 1fr 300px 1fr;
  }
  .why-scheme__item--left {
    padding-right: 40px;
  }
  .why-scheme__item--right {
    padding-left: 40px;
  }
}

@media (min-width: 901px) and (max-width: 940px) {
  .why-scheme__title {
    font-size: 14px;
  }
  .why-scheme__text {
    font-size: 11.5px;
  }
  .why-scheme__item--left {
    padding-right: 28px;
  }
  .why-scheme__item--right {
    padding-left: 28px;
  }
}

/* --- логотипы и кнопка --- */
.why__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px 40px;
  margin-top: 56px;
}

.why__logos {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.why__logo {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 12px 20px;
  border: 1px solid var(--border);
  border-radius: 5px;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: #a7a7ad;
}

.why__logo--brand {
  font-weight: 600;
  letter-spacing: 0.14em;
  color: #ffffff;
}

/* планшет и телефон: карточка сверху, пункты списком под ней, без точек */
@media (max-width: 900px) {
  .why-scheme {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    row-gap: 20px;
    margin-top: 48px;
  }
  .why-scheme__card {
    grid-column: 1;
    grid-row: 1;
    justify-self: center;
    width: 100%;
    max-width: 320px;
    aspect-ratio: 1;
    margin-bottom: 12px;
  }
  .why-scheme__item,
  .why-scheme__item--left,
  .why-scheme__item--right {
    grid-column: 1;
    grid-row: auto;
    justify-self: stretch;
    width: auto;
    max-width: none;
    padding-left: 0;
    padding-right: 0;
  }
  .why-scheme__item::after {
    display: none;
  }
  .why-scheme__text {
    max-width: none;
  }
}

/* на телефоне — та же таблица из двух колонок, что на десктопе; тексты мельче, стрелки убраны */
@media (max-width: 640px) {
  .compare {
    margin-top: 32px;
  }
  .compare__th {
    padding: 14px;
    font-size: 10px;
  }
  .compare__cell {
    padding: 16px 14px;
    font-size: 12px;
    line-height: 1.4;
  }
  .compare__arrow {
    display: none;
  }
  .why__footer {
    margin-top: 32px;
  }
  .why__logo {
    flex: 1 1 calc(50% - 6px);
  }

  /* схема преимуществ на телефоне: справа вертикальная линия с точками, от неё к карточке и к каждому пункту
     уходят горизонтальные линии (как в подобных схемах на других сайтах) */
  .why-scheme {
    --rail: 49px; /* расстояние от вертикальной линии до текста и карточки */
    row-gap: 0;
    padding-right: calc(var(--rail) + 3px);
  }
  .why-scheme__card {
    max-width: none;
    margin-bottom: 0;
  }
  /* от вертикальной линии к правому краю карточки: горизонталь; точка едет по ней от вертикальной линии
     к карточке вместе с прокруткой (--p от 0 до 1 задаёт main.js, без скрипта точка стоит у карточки) */
  .why-scheme__card::before {
    content: '';
    position: absolute;
    top: 50%;
    right: calc(var(--rail) * -1);
    width: var(--rail);
    height: 7px;
    margin-top: -3px;
    background:
      linear-gradient(rgba(140, 165, 255, 0.22), rgba(140, 165, 255, 0.22)) center / 100% 1px no-repeat,
      radial-gradient(circle at 3.5px 3.5px, #c4d8ff 3.5px, transparent 4px) calc((1 - var(--p, 1)) * 100%) 0 / 7px 7px no-repeat;
  }
  /* вертикальная линия: от середины карточки вниз */
  .why-scheme__card::after {
    content: '';
    position: absolute;
    top: 50%;
    bottom: 0;
    right: calc(var(--rail) * -1);
    width: 1px;
    background: rgba(140, 165, 255, 0.22);
  }
  .why-scheme .why-scheme__item,
  .why-scheme .why-scheme__item--left,
  .why-scheme .why-scheme__item--right {
    margin-right: calc(var(--rail) * -1);
    padding: 26px var(--rail) 14px 0;
    text-align: left;
  }
  /* участок вертикальной линии вдоль пункта; вместе они складываются в сплошную линию */
  .why-scheme__item::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 1px;
    background: rgba(140, 165, 255, 0.22);
  }
  /* точка пункта: в начале горизонтальной линии (слева), с прокруткой едет вправо к вертикальной линии */
  .why-scheme .why-scheme__item::after,
  .why-scheme.is-active .why-scheme__item--left::after,
  .why-scheme.is-active .why-scheme__item--right::after {
    display: block;
    left: calc(var(--p, 1) * (100% - 1px) - 3px);
    right: auto;
    bottom: -4px;
    transition: none;
  }
}

/* ==========================================================================
   Об основателе (Блок 7)
   ========================================================================== */

/* плашка на всю ширину сетки — как карточки блока «Почему Saints» */
.founder__plate {
  --plate-pad: 56px;
  padding: 64px var(--plate-pad) 48px;
  background: rgba(10, 20, 55, 0.4);
  border: 1px solid rgba(140, 165, 255, 0.14);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.founder__header {
  max-width: 900px;
}

.founder__header h3 {
  max-width: 680px;
  margin-top: 18px;
  font-size: 14px;
  font-weight: 200;
  color: #ffffff;
}

.founder__layout {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 64px;
  align-items: start;
}

/* фото на прозрачном фоне: синее свечение сзади, низ плавно растворяется */
/* у фото сверху ~20% прозрачного поля — поднимаем картинку на эту высоту,
   чтобы голова была вровень с верхом блока (проценты — от ширины колонки) */
.founder__photo {
  position: relative;
  align-self: end; /* низ фото прилегает к полосе фактов */
  isolation: isolate;
  margin: -26% 0 0;
}

.founder__photo::before {
  content: '';
  position: absolute;
  inset: 12% 5% 20%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 85, 255, 0.45), transparent);
  filter: blur(30px);
}

.founder__photo img {
  width: 100%;
  height: auto;
}

/* подпись к фото — как в hero (.hero__photo-caption) */
.founder__caption {
  position: absolute;
  left: 0; /* по левой линии сетки (край контейнера, как логотип в шапке) */
  bottom: 40px;
  font-size: 13px;
  line-height: 1.3;
  white-space: nowrap;
}

.founder__caption strong {
  display: block;
  font-weight: 400;
}

.founder__caption span {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  color: var(--text-muted);
}

.founder__story {
  margin-top: 40px;
  margin-bottom: 40px; /* отступ от текста до линии фактов (фото прижато к ней через align-self: end) */
}

/* рассказ Андрея — как цитата: мельче, бледнее, курсивом, в «ёлочках» */
.founder__story p {
  font-size: 14px;
  font-weight: 300;
  font-style: italic;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.62);
}

.founder__story p + p {
  margin-top: 14px;
}

/* 4 факта — сетка с линиями на всю ширину плашки, как полоса фактов под фото в hero */
.founder-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 0 calc(var(--plate-pad) * -1); /* фото прижато к верхней линии */
  border-top: 1px solid rgba(140, 165, 255, 0.14);
  border-bottom: 1px solid rgba(140, 165, 255, 0.14);
}

.founder-stats .fact__value {
  font-size: 18px;
}

.founder-stats__item {
  padding: 30px 24px;
  border-left: 1px solid rgba(140, 165, 255, 0.14);
}

.founder-stats__item:first-child {
  padding-left: var(--plate-pad);
  border-left: 0;
}

/* «Помогаю собственнику»: слева заголовок, справа список с тонкими линиями, под списком кнопки */
.founder__after {
  --line: rgba(140, 165, 255, 0.3); /* цвет тонких линий между табами */
  position: relative; /* точка отсчёта для линии от заголовка к первому табу — её считает и рисует JS */
  display: grid;
  grid-template-columns: 5fr 7fr; /* та же сетка, что у фото и цитаты выше — табы по левому краю цитаты */
  column-gap: 64px;
  align-items: start;
  margin-top: 56px;
}

/* размер и начертание — как у всех заголовков h2 (из базовых стилей) */
.founder__help-title {
  grid-column: 1;
  width: fit-content; /* линия должна начинаться сразу после текста, а не у края колонки */
  color: #ffffff;
}

/* пункты — «табы»-пилюли с синим кружком, как теги в блоке «Диагностика» */
.founder__help-list {
  --gx: 10px; /* расстояние между табами по горизонтали и вертикали */
  --gy: 10px;
  position: relative; /* точка отсчёта для линий между табами, которые ниже 1300px считает JS */
  grid-column: 2;
  grid-row: 1 / span 2;
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--gx);
  row-gap: var(--gy);
  margin-right: -28px; /* колонка уже, чем нужно табам, — небольшой вылет в поле плашки */
}

/* линии, которые рисует JS: между табами ниже 1300px и от заголовка к первому табу
   при любой ширине (см. founder__help-line в main.js) */
.founder__help-line {
  position: absolute;
  background: var(--line);
  pointer-events: none;
}

.founder__help-list li {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid rgba(140, 165, 255, 0.22);
  border-radius: 999px;
  background: rgba(140, 165, 255, 0.06);
  font-size: 12px;
  font-weight: 300;
  line-height: 1.3;
  color: #a7a7ad;
}

.founder__help-list li::before {
  content: '';
  flex: none;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent-hover);
}

/* кнопки под заголовком */
.founder__after .founder__actions {
  grid-column: 1;
  grid-row: 2;
  margin: 32px 0 0;
}

/* тонкие линии — цепочка между табами.
   Раскладка табов по рядам (1 / 2 / 2) гарантирована только на широком экране */
@media (min-width: 1300px) {
  .founder__after {
    grid-template-rows: auto 1fr;
  }

  .founder__help-list {
    --gx: 22px;
    --gy: 22px;
    margin-top: 4px; /* центр первого таба — на уровне середины заголовка */
  }

  .founder__help-list li::after {
    content: '';
    position: absolute;
    background: var(--line);
  }

  /* только между соседними в цепочке 1 → 2 → 3 → 5 → 4 */
  .founder__help-list li:nth-child(1)::after,
  .founder__help-list li:nth-child(3)::after {
    top: 100%;
    width: 1px;
    height: var(--gy);
  }
  .founder__help-list li:nth-child(1)::after { left: 40%; }
  .founder__help-list li:nth-child(3)::after { left: 50%; }

  .founder__help-list li:nth-child(2)::after,
  .founder__help-list li:nth-child(4)::after {
    left: 100%;
    top: 50%;
    width: var(--gx);
    height: 1px;
  }

  .founder__help-list li:nth-child(5)::after {
    display: none;
  }
}
/* линия от заголовка к первому табу — ширина колонки с заголовком не фиксирована
   (растёт вместе с экраном, а текст — нет), поэтому расстояние до таба каждый раз
   разное; линию с отступом ~10px от текста и впритык к табу считает и рисует JS
   (.founder__help-title-line, см. main.js) при любой ширине, где заголовок стоит
   слева от табов (901px и шире) */

/* до 1299px: ширина таба — по длине его текста, перенос на новую строку только когда
   таб не помещается в оставшееся место строки. Раз раскладка по рядам «плывёт» вместе
   с шириной экрана и длиной текста, линии между табами здесь считает и рисует JS
   (см. founder__help-line в main.js), а не фиксированные CSS-правила */
@media (max-width: 1299px) {
  .founder__help-list {
    --gy: 16px;
  }
}

/* на узких экранах: заголовок и подзаголовок → фото с подписью (низ фото прижат
   к линии фактов) → факты → цитата → «Помогаю собственнику» и табы → кнопка.
   Порядок задаём через flex + order на .founder__plate, как и на телефоне ниже */
@media (max-width: 900px) {
  .founder__after {
    grid-template-columns: 1fr;
  }
  .founder__help-title,
  .founder__after .founder__actions,
  .founder__help-list {
    grid-column: 1;
    grid-row: auto;
  }
  .founder__help-list {
    margin: 20px 0 0;
  }
  .founder__after .founder__actions {
    margin: 28px 0 0;
  }
  .founder-stats {
    order: 3;
    grid-template-columns: repeat(2, 1fr);
    margin-top: 0; /* фото прилегает к линии фактов */
  }
  .founder-stats__item:nth-child(2n + 1) {
    padding-left: var(--plate-pad);
    border-left: 0;
  }
  .founder-stats__item:nth-child(n + 3) {
    border-top: 1px solid rgba(140, 165, 255, 0.14);
  }
  .founder__plate {
    --plate-pad: 28px;
    padding: 40px var(--plate-pad) 36px;
    display: flex;
    flex-direction: column;
  }
  .founder__layout {
    display: contents;
  }
  .founder__content {
    display: contents;
  }
  .founder__header {
    order: 1;
  }
  .founder__photo {
    order: 2;
    align-self: center;
    width: 100%;
    max-width: 380px;
    /* фото всегда ровно 380px шириной (упирается в max-width), а прозрачное поле
       над головой на этом кадре — фиксированные ~113px при такой ширине; вычитаем
       его, чтобы от подзаголовка до головы (а не до края картинки) было ~50px */
    margin-top: -63px;
  }
  /* фото отцентровано и уже контейнера — подпись съезжает вправо вместе с ним.
     Сдвигаем её обратно к левому краю плашки (там же, где текст фактов ниже).
     50vw − половина зазора между шириной плашки и шириной фото (380px) */
  .founder__caption {
    left: min(0px, calc(242.5px - 50vw));
  }
  .founder__story {
    order: 4;
    margin-top: 32px; /* после фактов, а не сразу после заголовка */
    margin-bottom: 0; /* дальше не линия фактов, а обычный блок — свой отступ у него */
  }
  .founder__after {
    order: 5;
  }
}

@media (max-width: 640px) {
  .founder__plate {
    --plate-pad: 18px;
    padding: 28px var(--plate-pad) 28px;
  }
  /* порядок на телефоне: заголовок → фото → факты → цитата → «Помогаю собственнику» и кнопка */
  .founder__plate {
    display: flex;
    flex-direction: column;
  }
  .founder__layout {
    display: contents;
  }
  .founder__header { order: 1; }
  .founder__photo {
    order: 2;
    align-self: center;
    /* у фото сверху прозрачное поле — почти 30% ширины кадра (113px при максимальных 380px);
       вычитаем его, чтобы от подзаголовка до головы (а не до края картинки) было ~50px */
    margin-top: calc(50px - min(29.8%, 113px));
  }
  /* фото отцентровано — на узких экранах, пока оно уже плашки (примерно до 448px),
     подпись и так у левого края; дальше фото упирается в max-width и подпись
     съезжает вместе с ним вправо — возвращаем её к левому краю плашки */
  .founder__caption {
    left: min(0px, calc(224.5px - 50vw));
  }
  .founder-stats {
    order: 3;
    grid-template-columns: 1fr;
    margin-top: 0; /* фото прилегает к верхней линии фактов, как на десктопе */
  }
  .founder__story {
    order: 4;
    margin-top: 32px;
    margin-bottom: 0; /* здесь после текста не факты, а следующий блок — свой обычный отступ */
  }
  .founder__after { order: 5; }
  .founder-stats__item {
    padding: 22px var(--plate-pad);
    border-left: 0;
  }
  .founder-stats__item:nth-child(n + 2) {
    border-top: 1px solid rgba(140, 165, 255, 0.14);
  }
  .founder__after {
    margin-top: 40px;
  }
}

/* ==========================================================================
   Кейсы (Блок 8)
   ========================================================================== */

/* заголовок слева, кнопка «Посмотреть все кейсы» справа — на уровне подзаголовка */
.cases__head,
.research__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px 32px;
}

.cases__header {
  max-width: 900px;
}

/* ширина подобрана так, чтобы заголовок сам переносился на три строки (как раньше с ручными переносами):
   первое предложение ~697px, оно же со словом «Но» ~842px, вторая строка ~604px, она же с «с понимания» ~803px */
.cases__header h2 {
  max-width: 740px;
}

.cases__header h3 {
  max-width: 680px;
  margin-top: 18px;
  font-size: 14px;
  font-weight: 200;
  color: #ffffff;
}

.cases__slider {
  margin-top: 48px;
}

/* горизонтальный слайдер: нативная прокрутка с привязкой карточек */
.cases__track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.cases__track::-webkit-scrollbar {
  display: none;
}

.cases__track:focus-visible {
  outline: 1px solid rgba(140, 165, 255, 0.4);
  outline-offset: 4px;
}

.case-card {
  position: relative; /* скрытые подписи (dt) позиционируются внутри карточки и обрезаются слайдером, а не растягивают страницу */
  flex: 0 0 calc((100% - 40px) / 3);
  display: flex;
  flex-direction: column;
  padding: 28px;
  scroll-snap-align: start;
  background: #ffffff; /* белые карточки: тексты внутри тёмные */
  border: 1px solid rgba(10, 20, 55, 0.12);
  border-radius: var(--radius-md);
  transition: background-color 250ms var(--ease), border-color 250ms var(--ease);
}

/* лёгкий голубой оттенок и синяя рамка по наведению */
@media (hover: hover) {
  .case-card:hover {
    background: #eef3ff;
    border-color: rgba(0, 85, 255, 0.35);
  }
}

/* в карточке и в попапе: без подписей, значения в строку слева, между ними синие кружки */
.case-card__meta,
.case-modal__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
}

.case-card__meta > div,
.case-modal__meta > div {
  display: flex;
  align-items: center;
  gap: 10px;
}

.case-card__meta > div:not(:last-child)::after,
.case-modal__meta > div:not(:last-child)::after {
  content: '';
  flex: none;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--accent-hover);
}

.case-card__meta > div:not(:last-child)::after {
  background: var(--accent);
}

/* подписи остаются для скринридеров и поисковиков, но не показываются */
.case-card__meta dt,
.case-modal__meta dt {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.case-card__meta dd,
.case-modal__meta dd {
  margin: 0;
  font-size: 12px;
  font-weight: 300;
  color: #a7a7ad; /* как текст в табах блока «Помогаю собственнику» */
}

.case-card__meta dd {
  color: #6b7085; /* на белом фоне карточки */
}


.case-card__result-label {
  margin-top: 28px;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}

.case-card__result {
  margin: 10px 0 28px;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.35;
  color: #0a1437;
}

.case-card__more {
  align-self: flex-start;
  margin-top: auto;
  padding: 12px 18px;
  font: inherit;
  font-size: 12px;
  color: #0a1437;
  background: transparent;
  border: 1px solid rgba(10, 20, 55, 0.25);
  border-radius: 2px;
  cursor: pointer;
  transition: border-color 250ms var(--ease), color 250ms var(--ease);
}

.case-card__more:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.cases__bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 24px;
}

/* контурная кнопка — как «Написать в Telegram» в первом экране */
.cases__all,
.research__all {
  border-radius: 2px;
  font-size: 12px;
  padding: 12px 18px;
}

.cases__all:hover,
.research__all:hover {
  border-color: #e4e8f5;
  color: #e4e8f5;
}

/* стрелки нужны, только когда карточки не помещаются в ряд */
.cases__arrows {
  display: none;
  gap: 10px;
}

.cases__slider.is-scrollable .cases__arrows {
  display: flex;
}

.cases__slider.is-scrollable .cases__bar {
  margin-top: 24px;
}

.cases__arrow {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  cursor: pointer;
  transition: color 200ms var(--ease), border-color 200ms var(--ease), opacity 200ms var(--ease);
}

.cases__arrow svg {
  width: 12px;
  height: 12px;
}

.cases__arrow:hover:not(:disabled) {
  color: var(--text);
  border-color: var(--accent);
}

.cases__arrow:disabled {
  opacity: 0.35;
  cursor: default;
}

/* телефон: стрелки галереи над карточками, кнопка «Все кейсы» под ними */
@media (max-width: 640px) {
  .cases > .container {
    display: flex;
    flex-direction: column;
  }
  .cases__head {
    display: contents;
  }
  .cases__header {
    order: 1;
  }
  .cases__slider {
    order: 2;
    display: flex;
    flex-direction: column;
  }
  .cases__slider .cases__bar,
  .cases__slider.is-scrollable .cases__bar {
    order: -1;
    margin: 0 0 16px;
  }
  .cases__all-wrap {
    order: 3;
    margin-top: 24px;
  }
  /* кнопка «Детали проекта» — у правого края карточки */
  .case-card__more {
    align-self: flex-end;
  }
  /* стрелки ярче, как в «Медиа» и «Отзывах»; неактивная «Назад» не тускнеет — такая же яркая, как «Вперёд» */
  .cases__arrow,
  .cases__arrow:disabled {
    opacity: 1;
    color: #ffffff;
    border-color: rgba(196, 216, 255, 0.55);
  }
}

/* попап с деталями проекта — на базе общего .modal */
.case-modal {
  max-width: 720px;
}

.case-modal__data {
  display: none;
}

.case-modal__eyebrow {
  margin-bottom: 12px;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.case-modal .case-modal__title {
  margin-right: 48px;
  font-size: 24px;
  text-align: left;
}

.case-modal__meta {
  margin-top: 24px;
}

.case-modal__block {
  margin-top: 24px;
}

.case-modal__block h3,
.case-modal__insight h3 {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-hover);
}

/* заголовки разделов — мельче и голубые (#c4d8ff, как значения в фактах) */
.case-modal__block h3 {
  font-size: 10px;
  color: #c4d8ff;
}

.case-modal__block p,
.case-modal__insight p {
  margin-top: 8px;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.8);
}

.case-modal__block ul {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.case-modal__block li {
  position: relative;
  padding-left: 16px;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.8);
}

.case-modal__block li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent-hover);
}

.case-modal__insight {
  margin: 28px 0 8px;
  padding: 18px 20px;
  background: rgba(140, 165, 255, 0.06);
  border-left: 2px solid var(--accent);
}

@media (max-width: 1024px) {
  .case-card {
    flex-basis: calc((100% - 20px) / 2);
  }
}

@media (max-width: 640px) {
  .case-card {
    flex-basis: 100%; /* одна карточка на экране, края следующей не видны */
    padding: 22px;
  }
  .case-modal {
    padding: 28px 20px 20px;
  }
}

/* ==========================================================================
   Исследования (Блок 9)
   ========================================================================== */

.research__header {
  max-width: 900px;
}

.research__header h2 {
  max-width: 900px;
  text-wrap: balance;
}

.research__header h3 {
  max-width: 860px; /* уже прежнего, но всё ещё в две строки; balance выравнивает длину строк */
  text-wrap: balance;
  margin-top: 18px;
  font-size: 14px;
  font-weight: 200;
  color: #ffffff;
}

/* две карточки рядом; на планшете и телефоне — друг под другом */
.research__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 48px;
}

/* карточка исследования: слева «картинка» (крупная цифра на синем фоне), справа название, описание и кнопка */
.research-card {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 28px;
  padding: 10px;
  background: linear-gradient(160deg, #0c1436 0%, #080d28 55%, #060918 100%);
  border: 1px solid rgba(140, 165, 255, 0.14);
  border-radius: var(--radius-md);
  transition: border-color 250ms var(--ease), box-shadow 250ms var(--ease);
}

/* то же по наведению: рамка ярче и лёгкое синее свечение изнутри */
@media (hover: hover) {
  .research-card:hover {
    border-color: rgba(140, 165, 255, 0.3);
    box-shadow: inset 0 0 60px rgba(0, 85, 255, 0.1);
  }
}

/* карточка ещё и .reveal — сохраняем плавное появление и добавляем плавный hover */
.research-card.reveal {
  transition: opacity 500ms var(--ease), transform 500ms var(--ease), border-color 250ms var(--ease), box-shadow 250ms var(--ease);
}

.research-card__main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 20px 24px 20px 0;
}

.research-card__title {
  font-size: 20px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: #c4d8ff; /* голубой сайта, как цифра «100+» */
}

.research-card__text {
  margin-top: 14px;
  font-size: 13px;
  font-weight: 200;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.8);
}

/* круглая кнопка со стрелкой — такая же, как стрелки слайдера кейсов */
.research-card__go {
  align-self: flex-end;
  margin-top: auto;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  transition: color 200ms var(--ease), border-color 200ms var(--ease);
}

.research-card__go svg {
  width: 14px;
  height: 14px;
}

.research-card__go:hover {
  color: var(--text);
  border-color: var(--accent);
}

.research-card__visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 260px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 50%, rgba(0, 85, 255, 0.34) 0%, rgba(0, 85, 255, 0) 66%),
    linear-gradient(160deg, #0a1a5c 0%, #060f38 55%, #040820 100%);
  border-radius: var(--radius-md);
}

.research-card__rings {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.research-card__number {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.research-card__value {
  font-size: 68px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.03em;
  color: #c4d8ff;
}

.research-card__caption {
  margin-top: 10px;
  font-size: 12px;
  font-weight: 300;
  color: var(--text-muted);
}

@media (max-width: 900px) {
  .research__list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  /* кнопка «Все исследования» — под карточками */
  .research > .container {
    display: flex;
    flex-direction: column;
  }
  .research__head {
    display: contents;
  }
  .research__header {
    order: 1;
  }
  .research__list {
    order: 2;
  }
  .research__all-wrap {
    order: 3;
    margin-top: 24px;
  }
  .research-card {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .research-card__visual {
    min-height: 200px;
  }
  .research-card__main {
    padding: 0 12px 16px;
  }
  .research-card__go {
    margin-top: 24px;
  }
}

/* ==========================================================================
   FAQ (Блок 10)
   ========================================================================== */

.faq__cols {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 64px;
  align-items: start; /* колонки независимы: открытый ответ не растягивает соседнюю */
  margin-top: 48px;
}

.faq-item {
  border-bottom: 1px solid rgba(140, 165, 255, 0.14);
}

.faq__col .faq-item:first-child {
  border-top: 1px solid rgba(140, 165, 255, 0.14);
}

.faq-item__q {
  font-size: inherit;
  font-weight: inherit;
}

.faq-item__btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 0;
  font: inherit;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.35;
  text-align: left;
  color: var(--text);
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: color 200ms var(--ease);
}

.faq-item__btn:hover {
  color: #c4d8ff;
}

.faq-item__btn:focus-visible {
  outline: 1px solid rgba(140, 165, 255, 0.5);
  outline-offset: 2px;
}

.faq-item__icon {
  flex: none;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #a7a7ad;
  border: 1px solid rgba(140, 165, 255, 0.22);
  border-radius: 50%;
  transition: transform 300ms var(--ease), color 200ms var(--ease), border-color 200ms var(--ease);
}

.faq-item__icon svg {
  width: 12px;
  height: 12px;
}

.faq-item__btn:hover .faq-item__icon,
.faq-item.is-open .faq-item__icon {
  color: #ffffff;
  border-color: rgba(0, 85, 255, 0.6);
}

.faq-item.is-open .faq-item__icon {
  transform: rotate(180deg);
}

/* плавное раскрытие: высота анимируется через grid-строку 0fr → 1fr */
.faq-item__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 350ms var(--ease);
}

.faq-item.is-open .faq-item__a {
  grid-template-rows: 1fr;
}

.faq-item__a-inner {
  min-height: 0;
  overflow: hidden;
  visibility: hidden; /* закрытый ответ не попадает в табуляцию */
  transition: visibility 0s linear 350ms;
}

.faq-item.is-open .faq-item__a-inner {
  visibility: visible;
  transition-delay: 0s;
}

.faq-item__a-inner p {
  padding: 0 52px 22px 0;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.75);
}

@media (max-width: 900px) {
  .faq__cols {
    grid-template-columns: 1fr;
  }
  .faq__col + .faq__col .faq-item:first-child {
    border-top: 0;
  }
}

@media (max-width: 640px) {
  .faq-item__btn {
    padding: 18px 0;
  }
  .faq-item__a-inner p {
    padding-right: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .faq-item__a,
  .faq-item__icon,
  .faq-item__a-inner {
    transition: none;
  }
}

/* ==========================================================================
   Финальный СТА (Блок 11)
   ========================================================================== */

.cta {
  padding-bottom: var(--section-gap); /* последний блок страницы */
}

.cta__header {
  max-width: 900px;
}

.cta__header h3 {
  max-width: 760px;
  margin-top: 18px;
  font-size: 14px;
  font-weight: 200;
  color: #ffffff;
}

/* одна общая плата: слева 4 карточки (2×2), справа форма; экран делится на две равные части,
   линии между карточками и между карточками и формой — общие, по одной */
.cta__board {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 48px;
  /* без overflow: hidden — шар должен выглядывать из-под карточки; углы скругляют сами дети */
  border: 1px solid rgba(140, 165, 255, 0.14);
  border-radius: var(--radius-md);
}

.cta__cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 1fr;
}

.cta-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  min-height: 200px;
  padding: 28px;
  background: rgba(10, 20, 55, 0.4);
  transition: background-color 250ms var(--ease);
}

.cta-card:nth-child(1) {
  border-top-left-radius: 4px;
}

.cta-card:nth-child(3) {
  border-bottom-left-radius: 4px;
}

.cta-card:nth-child(odd) {
  border-right: 1px solid rgba(140, 165, 255, 0.14);
}

.cta-card:nth-child(-n + 2) {
  border-bottom: 1px solid rgba(140, 165, 255, 0.14);
}

@media (hover: hover) {
  .cta-card:hover {
    background: rgba(0, 85, 255, 0.08);
  }
}

/* маленькие «стальные» иконки в стиле иконок блока «Причины» */
.cta__defs {
  position: absolute;
  width: 0;
  height: 0;
}

.cta-card__icon {
  display: block;
  width: 44px;
  height: 44px;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.35));
}

.cta-card__icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.cta-card__title {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.3;
  color: #ffffff;
}

.cta-card__text {
  margin-top: 10px;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.5;
  color: #a7a7ad;
}

/* форма — на рифлёном стекле (шар и стекло — те же компоненты, что в панелях «Для кого» и «Этапы»);
   рамка стекла — единственная линия между формой и карточками */
.cta__form {
  position: relative;
  padding: 32px;
}

.cta__form .signals__footer-pane {
  border: 0;
  border-left: 1px solid rgba(140, 165, 255, 0.14);
  border-radius: 0 5px 5px 0;
}

/* шар крупнее и дрейфует так, что в верхних точках пути выглядывает из-под карточки */
.cta__form .signals__footer-ball {
  width: 200px;
  height: 200px;
  margin-left: -100px;
  margin-top: -100px;
  animation: cta-ball-drift 12s ease-in-out infinite alternate;
}

@keyframes cta-ball-drift {
  0% {
    left: 28%;
    top: 13%;
  }
  50% {
    left: 62%;
    top: 46%;
  }
  100% {
    left: 78%;
    top: 14%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cta__form .signals__footer-ball {
    animation: none;
    left: 62%;
    top: 14%;
  }
}

.cta__form-inner {
  position: relative;
  z-index: 3;
}

.cta__form-title {
  font-size: 24px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.cta__form .form {
  margin-top: 24px;
}

.cta__form .form-success h2 {
  font-size: 24px;
}

.cta__form.is-submitted .form,
.cta__form.is-submitted .cta__form-title {
  display: none;
}

.cta__form .modal__alt {
  border-top-color: rgba(140, 165, 255, 0.14);
}

@media (max-width: 900px) {
  .cta__board {
    grid-template-columns: 1fr;
  }
  .cta__form .signals__footer-pane {
    border-left: 0;
    border-top: 1px solid rgba(140, 165, 255, 0.14);
    border-radius: 0 0 5px 5px;
  }
  .cta-card:nth-child(2) {
    border-top-right-radius: 4px;
  }
  .cta-card:nth-child(3) {
    border-bottom-left-radius: 0;
  }
}

@media (max-width: 640px) {
  .cta__cards {
    grid-template-columns: 1fr;
  }
  .cta-card {
    min-height: 0;
    gap: 20px;
    padding: 22px 20px;
    border-right: 0;
  }
  .cta-card:nth-child(odd) {
    border-right: 0;
  }
  .cta-card:nth-child(n) {
    border-bottom: 1px solid rgba(140, 165, 255, 0.14);
  }
  .cta__form {
    padding: 24px 20px;
  }
  .cta-card:nth-child(1) {
    border-top-right-radius: 4px;
  }
  .cta-card:nth-child(2) {
    border-top-right-radius: 0;
  }
  /* у последней карточки уже есть нижняя линия — вторую не рисуем */
  .cta__form .signals__footer-pane {
    border-top: 0;
  }
}

/* ==========================================================================
   Footer (подвал)
   ========================================================================== */

.site-footer {
  background: rgba(10, 20, 55, 0.4); /* тот же фон, что у карточек */
  border-top: 1px solid rgba(140, 165, 255, 0.14);
  padding: 64px 0 32px;
}

/* колонки: логотип и копирайт, реквизиты, навигация, контакты */
.site-footer__grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1.1fr 1fr;
  gap: 48px;
}

/* навигация — как в меню шапки: разделы и подпункты, всё в одной колонке */
.site-footer__nav {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.site-footer__nav .site-footer__list {
  gap: 9px;
}

.site-footer__logo {
  display: inline-block;
}

.site-footer__logo img {
  display: block;
  width: 180px;
  height: auto;
}

.site-footer__copy {
  margin-top: 14px;
  font-size: 12px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--text-faint);
}

.site-footer__title + .site-footer__list,
.site-footer__group .site-footer__list {
  margin-top: 12px;
}

/* названия разделов — мельче, тоньше, голубые (#c4d8ff) */
.site-footer__title {
  display: inline-block;
  font-size: 12px;
  font-weight: 300;
  line-height: 1.3;
  color: #c4d8ff;
  transition: color 200ms var(--ease);
}

/* названия-абзацы — блочные, чтобы стоять на одной линии в верху колонок */
p.site-footer__title {
  display: block;
}

a.site-footer__title:hover {
  color: #ffffff;
}

.site-footer__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.site-footer__list a {
  font-size: 13px;
  font-weight: 300;
  line-height: 1.4;
  color: #a7a7ad;
  transition: color 200ms var(--ease);
}

.site-footer__list a:hover {
  color: #ffffff;
}

.site-footer__requisites {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.site-footer__requisites p {
  font-size: 12px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--text-muted);
}

.site-footer__requisites .site-footer__title {
  margin-bottom: 4px;
  line-height: 1.3;
  color: #c4d8ff;
}

.site-footer__legal {
  margin-top: 24px;
  gap: 10px;
}

/* ссылки на документы — с подчёркиванием, как в согласии в формах */
.site-footer__legal a {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(167, 167, 173, 0.5);
  transition: color 200ms var(--ease), text-decoration-color 200ms var(--ease);
}

.site-footer__legal a:hover {
  text-decoration-color: #ffffff;
}

@media (max-width: 1024px) {
  .site-footer__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px 32px;
  }
}

@media (max-width: 640px) {
  .site-footer {
    padding: 48px 0 44px;
  }
  .site-footer__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* ==========================================================================
   Scroll reveal animation
   ========================================================================== */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 500ms var(--ease), transform 500ms var(--ease);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  html {
    scroll-behavior: auto;
  }
}

/* Hero — анимация появления сразу при загрузке, без IntersectionObserver */
@keyframes hero-fade-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-fade {
  opacity: 0;
  animation: hero-fade-up 700ms var(--ease) forwards;
}

.hero-fade-2 {
  animation-delay: 120ms;
}

.hero-fade-3 {
  animation-delay: 220ms;
}

@media (prefers-reduced-motion: reduce) {
  .hero-fade {
    opacity: 1;
    animation: none;
  }
}

/* ==========================================================================
   Modal / contact form
   ========================================================================== */

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: none;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  padding: 40px 16px;
  background: rgba(3, 6, 20, 0.72);
  backdrop-filter: blur(4px);
}

.modal-overlay.is-open {
  display: flex;
}

.modal {
  width: 100%;
  max-width: 560px;
  background: linear-gradient(160deg, #0c1436 0%, #080d28 55%, #060918 100%);
  border: 1px solid rgba(140, 165, 255, 0.16);
  border-radius: 5px;
  padding: 36px 36px 24px;
  position: relative;
  margin: auto 0;
}

.modal-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  color: var(--text-muted);
  transition: color 200ms var(--ease), border-color 200ms var(--ease);
}

.modal-close:hover {
  color: var(--text);
  border-color: var(--accent);
}

.modal h2 {
  font-size: 28px;
  text-align: center;
}

.form {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

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

.field input,
.field textarea {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-strong);
  border-radius: 5px;
  padding: 13px 14px;
  color: var(--text);
  font-size: 13px;
  transition: border-color 200ms var(--ease), background-color 200ms var(--ease);
}

.field input::placeholder,
.field textarea::placeholder {
  color: var(--text-faint);
}

.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(255, 255, 255, 0.06);
}

.field textarea {
  resize: vertical;
  min-height: 84px;
}

.phone-field {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-strong);
  border-radius: 5px;
  transition: border-color 200ms var(--ease), background-color 200ms var(--ease);
}

.phone-field:focus-within {
  border-color: var(--accent);
  background: rgba(255, 255, 255, 0.06);
}

.phone-code {
  position: relative;
  flex: 0 0 auto;
}

.phone-code__trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  outline: none;
  padding: 13px 10px 13px 14px;
  margin: 0;
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
}

.phone-code__caret {
  width: 8px;
  height: 8px;
  color: var(--text-faint);
  transition: transform 200ms var(--ease);
}

.phone-code.is-open .phone-code__caret {
  transform: rotate(180deg);
}

.phone-code__flag {
  display: block;
  width: 20px;
  height: 14px;
  flex-shrink: 0;
  border-radius: 2px;
  background-size: cover;
  background-position: center;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.phone-code__list {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 20;
  min-width: 120px;
  max-height: 260px;
  overflow-y: auto;
  background: rgba(26, 32, 58, 0.97);
  border: 1px solid rgba(140, 165, 255, 0.16);
  border-radius: 5px;
  padding: 6px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity 200ms var(--ease), transform 200ms var(--ease), visibility 200ms;
}

.phone-code.is-open .phone-code__list {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.phone-code__list li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 4px;
  font-size: 13px;
  color: var(--text-muted);
  cursor: pointer;
  transition: background-color 150ms var(--ease), color 150ms var(--ease);
}

.phone-code__list li:hover,
.phone-code__list li[aria-selected="true"] {
  background: rgba(140, 165, 255, 0.1);
  color: var(--text);
}

.flag-ru { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 14'%3E%3Crect width='20' height='14' fill='%23fff'/%3E%3Crect y='4.67' width='20' height='4.66' fill='%230039A6'/%3E%3Crect y='9.33' width='20' height='4.67' fill='%23D52B1E'/%3E%3C/svg%3E"); }
.flag-by { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 14'%3E%3Crect width='20' height='14' fill='%23C8102E'/%3E%3Crect y='9.33' width='20' height='4.67' fill='%23007A3D'/%3E%3C/svg%3E"); }
.flag-ua { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 14'%3E%3Crect width='20' height='7' fill='%230057B7'/%3E%3Crect y='7' width='20' height='7' fill='%23FFD700'/%3E%3C/svg%3E"); }
.flag-kz { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 14'%3E%3Crect width='20' height='14' fill='%2300AFCA'/%3E%3Ccircle cx='6' cy='7' r='3' fill='%23FEC50C'/%3E%3C/svg%3E"); }
.flag-am { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 14'%3E%3Crect width='20' height='4.67' fill='%23D90012'/%3E%3Crect y='4.67' width='20' height='4.66' fill='%230033A0'/%3E%3Crect y='9.33' width='20' height='4.67' fill='%23F2A800'/%3E%3C/svg%3E"); }
.flag-ge { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 14'%3E%3Crect width='20' height='14' fill='%23fff'/%3E%3Crect x='8.5' width='3' height='14' fill='%23FF0000'/%3E%3Crect y='5.5' width='20' height='3' fill='%23FF0000'/%3E%3C/svg%3E"); }
.flag-us { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 14'%3E%3Crect width='20' height='14' fill='%23fff'/%3E%3Cg fill='%23B22234'%3E%3Crect y='0' width='20' height='1.08'/%3E%3Crect y='2.15' width='20' height='1.08'/%3E%3Crect y='4.31' width='20' height='1.08'/%3E%3Crect y='6.46' width='20' height='1.08'/%3E%3Crect y='8.62' width='20' height='1.08'/%3E%3Crect y='10.77' width='20' height='1.08'/%3E%3Crect y='12.92' width='20' height='1.08'/%3E%3C/g%3E%3Crect width='8' height='7.5' fill='%233C3B6E'/%3E%3C/svg%3E"); }

.phone-field input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  padding: 15px 14px 11px 4px;
  font-size: 12px;
}

.phone-field input:focus {
  outline: none;
  border: none;
  background: transparent;
}

.consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.5;
}

.consent input {
  margin-top: 3px;
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  flex-shrink: 0;
}

.consent a {
  color: var(--text-muted);
  font-weight: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.form .btn-primary {
  margin-top: 6px;
  width: 100%;
  font-size: 13px;
}

/* кнопки в формах (попап и форма на странице, в том числе «Перейти в Telegram» после отправки) —
   с тем же градиентом, что у кнопки «Диагностика» в меню */
.form .btn-primary,
.form-success .btn-primary {
  background: linear-gradient(180deg, rgba(0, 85, 255, 0.79) 50%, rgba(0, 85, 255, 1) 100%);
}

.form .btn-primary:hover,
.form-success .btn-primary:hover {
  background: linear-gradient(180deg, rgba(47, 107, 255, 0.79) 50%, rgba(47, 107, 255, 1) 100%);
}

.modal__alt {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.alt-contacts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.alt-contacts a {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 6px;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
  transition: color 200ms var(--ease);
}

.alt-contacts a:hover {
  color: var(--accent-hover);
}

.alt-contacts svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--accent-hover);
}

.form-success {
  display: none;
  text-align: center;
  padding: 20px 0 4px;
}

.form-success.is-visible {
  display: block;
}

.form-success__icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: rgba(0, 85, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-hover);
}

.form-success p {
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1.5;
  margin-top: 10px;
}

.form-success .btn {
  margin-top: 24px;
}

.modal.is-submitted .form {
  display: none;
}

@media (max-width: 640px) {
  .modal {
    padding: 28px 20px;
  }
  .form-row {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Продуктовая страница «Внешний контур» — Блок 1 (hero)
   Слева 3D-абстракция на рифлёном стекле, справа тексты и кнопки
   ========================================================================== */

.hero--product .hero__left {
  max-width: none;
  width: calc(50% - 56px);
  margin-left: 0;
  margin-top: 0;
}

/* шаров под плашкой нет */
.hero--product .hero__left::before {
  display: none;
}

.hero--product .hero__title {
  font-size: 36px;
}

.hero--product .hero__tagline {
  margin-top: 24px;
  margin-bottom: 32px;
  /* «…от 100 до 700 млн ₽,» целиком помещается в первую строку (нужно ~490px) */
  max-width: 520px;
  color: var(--text-muted);
}

/* сцена: стекло с шаром позади и «контур» из трёх колец поверх */
.hero-visual {
  position: absolute;
  top: 0;
  left: 50%;
  width: 50%;
  height: 100%;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1300px;
  pointer-events: none;
}

.hero-visual {
  --size: min(46.8vw, 80.6vh, 676px);
}

/* свечение за шаром — плоский слой вне 3D-сцены: тень внутри сцены перекрывала бы участки колец, и в них появлялись разрывы */
.hero-visual::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--size) * 0.55);
  height: calc(var(--size) * 0.55);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 85, 255, 0.4) 0%, rgba(0, 85, 255, 0.14) 45%, rgba(0, 85, 255, 0) 70%);
}

.orbit {
  position: relative;
  width: var(--size);
  height: var(--size);
  transform-style: preserve-3d;
  transform: rotateX(-18deg) rotateY(0deg);
  animation: orbit-turn 48s linear infinite;
}

.orbit__ring,
.orbit__core {
  position: absolute;
  border-radius: 50%;
}

/* Элемент кольца больше видимой линии на --pad со всех сторон: при flat Chrome рисует
   только то, что внутри рамки элемента, а узел и свечение выходят за линию.
   Сама линия — ::after внутри запаса. */
.orbit__ring {
  --pad: 28px;
  --ring-color: rgba(196, 216, 255, 0.55);
  margin: calc(var(--pad) * -1);
  /* flat, не preserve-3d: при preserve-3d плоскость внешнего кольца вырезала куски
     других колец — кольца выглядели порванными */
  transform-style: flat;
}

.orbit__ring::after {
  content: '';
  position: absolute;
  inset: var(--pad);
  border-radius: 50%;
  border: 1px solid var(--ring-color);
  box-shadow: 0 0 22px rgba(60, 110, 255, 0.28), inset 0 0 22px rgba(60, 110, 255, 0.18);
}

/* внешний контур: крупное кольцо и пунктирный двойник внутри, чтобы читался объём */
.orbit__ring--1 {
  inset: 0;
  transform: rotateX(72deg);
}

.orbit__ring--1::after {
  outline: 1px dashed rgba(140, 165, 255, 0.35);
  outline-offset: -15px;
}

.orbit__ring--2 {
  --ring-color: rgba(196, 216, 255, 0.4);
  inset: 12%;
  transform: rotateY(72deg) rotateZ(30deg);
}

.orbit__ring--3 {
  --ring-color: rgba(196, 216, 255, 0.7);
  inset: 26%;
  transform: rotateX(28deg) rotateY(-28deg);
}

/* Узлы — объёмные шарики на кольцах. Лежат в 3D-сцене, а не внутри кольца (у кольца flat):
   обёртка переносит шарик в точку на кольце — поворот кольца, сдвиг на радиус,
   обратный поворот, — а сам шарик крутится как ядро и всегда смотрит на зрителя */
.orbit__node {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
}

.orbit__node--1 {
  transform: rotateX(72deg) translateY(calc(var(--size) * -0.5)) rotateX(-72deg);
}

.orbit__node--2 {
  transform: rotateY(72deg) rotateZ(30deg) translateY(calc(var(--size) * 0.38)) rotateZ(-30deg) rotateY(-72deg);
}

.orbit__node--3 {
  transform: rotateX(28deg) rotateY(-28deg) translateY(calc(var(--size) * -0.24)) rotateY(28deg) rotateX(-28deg);
}

/* свечение — не box-shadow (в 3D-слое его края обрезаются), а фон в запасе --glow вокруг шарика;
   сам шарик — фон content-box: при border-radius 50% он тоже круглый */
.orbit__ball {
  --ball: clamp(9px, calc(var(--size) * 0.022), 15px);
  --glow: calc(var(--ball) * 1.1);
  position: absolute;
  top: calc(var(--ball) / -2 - var(--glow));
  left: calc(var(--ball) / -2 - var(--glow));
  width: var(--ball);
  height: var(--ball);
  padding: var(--glow);
  box-sizing: content-box;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, #ffffff 0%, #c4d8ff 22%, #5b86f0 55%, #1a3a9a 85%, #0c1f5c 100%) content-box,
    radial-gradient(circle closest-side, rgba(120, 160, 255, 0.7) 30%, rgba(60, 110, 255, 0.28) 55%, rgba(60, 110, 255, 0) 100%) padding-box;
  transform: rotateY(0deg) rotateX(18deg);
  animation: orbit-core 48s linear infinite;
}


.orbit__core {
  inset: 39%;
  background: radial-gradient(circle at 30% 26%, rgba(120, 160, 255, 0.95) 0%, rgba(20, 50, 130, 0.95) 34%, rgba(6, 12, 35, 0.98) 68%, #020409 100%);
  /* против вращения сцены: шар всегда смотрит на зрителя и остаётся круглым */
  transform: rotateY(0deg) rotateX(18deg);
  animation: orbit-core 48s linear infinite;
}

@keyframes orbit-core {
  from {
    transform: rotateY(0deg) rotateX(18deg);
  }
  to {
    transform: rotateY(-360deg) rotateX(18deg);
  }
}

@keyframes orbit-turn {
  to {
    transform: rotateX(-18deg) rotateY(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .orbit {
    animation: none;
    transform: rotateX(-18deg) rotateY(24deg);
  }
  .orbit__core,
  .orbit__ball {
    animation: none;
    transform: rotateY(-24deg) rotateX(18deg);
  }
}

/* 850–1024px: раскладка как на десктопе — абстракция справа, тексты слева
   уменьшены так, чтобы помещались в стеклянную плашку (левая половина экрана) */
@media (min-width: 850px) and (max-width: 1024px) {
  .hero--product .hero__title {
    font-size: clamp(25px, 3.1vw, 32px);
  }
  .hero--product .hero__tagline {
    max-width: none;
    margin-top: 18px;
    margin-bottom: 26px;
    font-size: clamp(14px, 1.6vw, 16px);
  }
  /* кнопки: помещаются — в ряд, нет — одна под другой, обе на всю ширину колонки */
  .hero--product .hero__actions .btn {
    flex: 1 1 auto;
  }
}

/* телефон и узкий планшет: сначала тексты, под ними абстракция на стеклянной плашке */
@media (max-width: 849px) {
  .hero--product {
    min-height: 0;
  }
  .hero--product .hero__left {
    width: auto;
    margin-left: 0;
    max-width: 560px;
  }
  .hero--product .hero__title {
    font-size: clamp(24px, 6.2vw, 32px);
  }
  .hero--product .hero-visual {
    position: relative;
    left: auto;
    order: 2;
    width: 100%;
    /* без рифлёного стекла: плашка — только под текстом и кнопками, анимация — на фоне страницы;
       прижата к плашке сверху, а не по центру блока */
    height: auto;
    margin-top: 0;
    padding: 0;
    align-items: flex-start;
  }
  /* сдвиг сцены подобран пиксельным замером: от нижнего края плашки до видимого верха
     колец ~40px на любой ширине (кольца вращаются, поэтому в движении ±несколько px) */
  .hero--product .hero-visual .orbit {
    margin-top: calc(25px - var(--size) * 0.08);
  }
  /* анимация под плашкой — без линии по нижнему краю первого экрана */
  .hero.hero--product {
    border-bottom: 0;
  }
  /* следующий блок ближе к анимации: от низа колец до блока ~в 2 раза меньше, чем был (~196px → ~98px) */
  .hero--product + .section {
    padding-top: 42px;
  }
  .hero--product .hero-visual {
    --size: min(93.6vw, 390px);
  }
}

/* телефон и узкий планшет (до 849px — как общая мобильная раскладка hero) */
@media (max-width: 849px) {
  .hero--product {
    min-height: 0;
    padding-bottom: 0;
  }
  .hero--product > .container {
    min-height: 0;
    padding-top: 68px;
  }
  .hero--product .hero-flex {
    flex: none;
  }
  .hero--product .hero__left {
    max-width: none;
    padding-top: 116px; /* крошки ~60px под меню — заголовок в 40px под крошками */
  }
  .hero--product .hero__left > :first-child {
    margin-top: 0;
  }
  .hero--product .hero__tagline {
    margin-bottom: 28px;
  }
}

/* телефон: подзаголовок hero мельче */
@media (max-width: 640px) {
  .hero--product .hero__tagline {
    font-size: 15px;
  }
  /* шапка на телефоне 68px — крошки и заголовок на 16px выше, отступ от меню тот же ~60px */
  .hero--product .hero__left {
    padding-top: 100px;
  }
  .hero.hero--product > .hero-crumbs {
    top: 128px;
  }

}

/* голубая часть заголовка — тот же #c4d8ff, что у значений в фактах */
.hero__title-accent {
  color: #c4d8ff;
}

/* хлебные крошки — над заголовком первого экрана, по левой линии сетки */
.hero > .hero-crumbs {
  position: absolute;
  top: 140px;
  left: 0;
  right: 0;
  z-index: 3;
}

.breadcrumbs ol {
  display: flex;
  flex-wrap: nowrap; /* всегда одна строка: иначе на узком экране крошки наезжают на заголовок */
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 300;
  line-height: 1.4;
}

.breadcrumbs li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-muted);
}

.breadcrumbs li + li::before {
  content: '/';
  color: var(--text-faint);
}

.breadcrumbs a {
  color: var(--text);
  transition: color 200ms var(--ease);
}

.breadcrumbs a:hover {
  color: #c4d8ff;
}

.breadcrumbs [aria-current] {
  color: var(--text-muted);
}

/* длинное название текущей страницы — с многоточием */
.breadcrumbs li:last-child {
  min-width: 0;
}

.breadcrumbs [aria-current] {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* планшет: крошки в потоке, между шапкой и заголовком */
@media (max-width: 1024px) {
  .hero > .hero-crumbs {
    position: relative;
    top: auto;
    margin-bottom: 24px;
  }
}

/* телефон и узкий планшет: крошки внутри плашки над заголовком (плашка начинается под шапкой, отступ сверху 64px) */
@media (max-width: 849px) {
  .hero > .hero-crumbs {
    position: absolute;
    top: 144px; /* ~60px под меню (шапка 84px) */
    margin-bottom: 0;
    display: block; /* общее правило .hero > .container на телефоне делает контейнер экранной высоты */
    min-height: 0;
    padding: 0 var(--side-padding);
  }
}

/* ==========================================================================
   Продуктовая страница «Внешний контур» — блоки 2–6
   ========================================================================== */

/* шапка секции — как у блоков главной (.stages__header, .cta__header) */
.section-head {
  max-width: 870px;
}

.section-head h3 {
  max-width: 680px;
  margin-top: 18px;
  font-size: 14px;
  font-weight: 200;
  color: #ffffff;
}

/* ---- Блок 2: две контрастные колонки ---- */
/* «Большинство компаний не упираются в рынок.» — первой строкой, «Они…» — со второй */
.approach .section-head h2 {
  max-width: 740px;
}

.approach__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 48px;
}

.approach__col {
  display: flex;
  flex-direction: column;
  padding: 36px 32px 32px;
  border: 1px solid rgba(140, 165, 255, 0.14);
  border-radius: var(--radius-md);
}

/* левая — приглушённая, красные крестики */
.approach__col--before {
  background: rgba(10, 20, 55, 0.25);
  color: var(--text-muted);
}

/* правая — акцентный фон; обводка одинаковая со всех сторон, чуть ярче левой колонки,
   чтобы читалась и на синем фоне */
.approach__col--after {
  position: relative;
  border-color: rgba(120, 155, 255, 0.34);
  background:
    radial-gradient(ellipse 80% 70% at 0% 0%, rgba(0, 85, 255, 0.22), transparent 70%),
    linear-gradient(180deg, rgba(14, 30, 85, 0.75) 0%, rgba(8, 16, 50, 0.8) 100%);
  color: #ffffff;
}

/* знак Saints с названием компании (.approach__brand, стили — ниже, общие с «Стратегическим наймом»)
   в правом верхнем углу акцентной колонки — заголовок колонки не заходит под него */
.approach__col--after .approach__col-title {
  padding-right: 170px;
}

/* знак с названием — по центру первой строки заголовков колонок (центр строки ~51px от верха колонки) */
.approach__col .approach__brand {
  top: 34px;
}

.approach__col-title {
  font-size: 22px;
  font-weight: 300;
  line-height: 1.3;
  color: #ffffff;
}

.approach__col--before .approach__col-title {
  color: #d2d5de;
}

.approach__list {
  display: grid;
  gap: 20px;
  margin-top: 28px;
}

.approach__list li {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 14px;
  align-items: start;
}

.approach__list p {
  font-size: 14px;
  font-weight: 300;
  line-height: 1.55;
}

.approach__list strong {
  font-weight: 500;
  color: #c4d8ff;
}

.approach__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
}

.approach__mark svg {
  width: 12px;
  height: 12px;
}

.approach__col--before .approach__mark {
  border: 1px solid rgba(255, 77, 77, 0.35);
  background: rgba(255, 77, 77, 0.08);
  color: var(--danger);
}

.approach__col--after .approach__mark {
  border: 1px solid rgba(0, 85, 255, 0.6);
  background: rgba(0, 85, 255, 0.18);
  color: #ffffff;
}

/* итог колонки — прижат к низу, чтобы итоги двух колонок стояли на одной линии */
.approach__result {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid rgba(140, 165, 255, 0.14);
  font-size: 14px;
  font-weight: 300;
  line-height: 1.55;
}

/* список растягивается, итог встаёт внизу колонки */
.approach__col .approach__list {
  flex-grow: 1;
  align-content: start;
}

.approach__result-label {
  font-weight: 500;
}

.approach__col--before .approach__result-label {
  color: var(--danger);
}

.approach__col--after .approach__result-label {
  color: #c4d8ff;
}

@media (max-width: 900px) {
  .approach__grid {
    grid-template-columns: 1fr;
    margin-top: 40px;
  }
}

@media (max-width: 640px) {
  .approach__col {
    padding: 28px 20px 24px;
  }
  /* телефон: знак с названием — над заголовком колонки, а не в углу (колонка узкая) */
  .approach__col .approach__brand {
    position: static;
    display: inline-flex;
    margin-bottom: 18px;
  }
  .approach__col--after .approach__col-title {
    padding-right: 0;
  }
  .approach__col-title {
    font-size: 18px;
  }
  .approach__list {
    margin-top: 22px;
    gap: 28px; /* пункты с крупным текстом — больше воздуха между ними */
  }
  .approach__list p,
  .approach__result {
    font-size: 13px;
  }
}

/* ---- Блок 3: этапы — шкала главной + строка «Результат» и метка точки ---- */
/* «Архитектура трансформации:» — первой строкой, «как мы пересобираем бизнес» — второй */
.stages .section-head h2 {
  max-width: 480px;
}

@media (max-width: 640px) {
  .stages .section-head h2 {
    max-width: 340px;
  }
}

.stage__badge {
  display: inline-block;
  margin-left: 8px;
  padding: 4px 10px;
  border: 1px solid rgba(140, 165, 255, 0.22);
  border-radius: 999px;
  background: rgba(140, 165, 255, 0.06);
  font-size: 11px;
  font-weight: 300;
  line-height: 1.3;
  color: #c4d8ff;
  vertical-align: middle;
  white-space: nowrap;
}

.stage__result {
  max-width: 560px;
  margin-top: 16px;
  padding: 14px 18px;
  border-left: 2px solid var(--accent);
  background: rgba(0, 85, 255, 0.07);
  font-size: 14px;
  font-weight: 300;
  line-height: 1.55;
  color: #ffffff;
}

.stage__result-label {
  display: block;
  margin-bottom: 4px;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #c4d8ff;
}

@media (max-width: 640px) {
  .stage__title {
    font-size: 18px;
    line-height: 24px;
  }
  .stage__badge {
    margin: 6px 0 0;
  }
  .stage__result {
    padding: 12px 14px;
    font-size: 13px;
  }
}

/* ---- Блок 4: крупные цифры — карточки стыкуются вплотную, как в «Для кого» ---- */
.results__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 48px;
  border-top: 1px solid rgba(140, 165, 255, 0.14);
  border-left: 1px solid rgba(140, 165, 255, 0.14);
  border-radius: var(--radius-md);
}

.result-card {
  display: flex;
  flex-direction: column;
  min-height: 260px;
  padding: 28px 24px;
  border-right: 1px solid rgba(140, 165, 255, 0.14);
  border-bottom: 1px solid rgba(140, 165, 255, 0.14);
  background: rgba(10, 20, 55, 0.4);
  transition: background-color 250ms var(--ease);
}

@media (hover: hover) {
  .result-card:hover {
    background: rgba(0, 85, 255, 0.08);
  }
}

.result-card__kicker {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.result-card__value {
  margin-top: 56px;
  font-size: 52px;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #c4d8ff;
  white-space: nowrap;
}

.result-card__text {
  margin-top: 14px;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.5;
  color: #a7a7ad;
}

@media (max-width: 1100px) {
  .result-card__value {
    font-size: 44px;
  }
}

@media (max-width: 1024px) {
  .results__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .result-card {
    min-height: 220px;
  }
}

@media (max-width: 640px) {
  .results__grid {
    margin-top: 36px;
  }
  .result-card {
    min-height: 0;
    padding: 22px 16px;
  }
  .result-card__value {
    margin-top: 28px;
    font-size: 32px;
  }
  .result-card__text {
    font-size: 12px;
  }
}

/* совсем узкие экраны — в одну колонку */
@media (max-width: 359px) {
  .results__grid {
    grid-template-columns: 1fr;
  }
}

/* ---- Блок 5: честный фильтр ---- */
.filter__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 48px;
}

.filter-card {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 24px;
  border: 1px solid rgba(140, 165, 255, 0.14);
  border-radius: var(--radius-md);
  background: rgba(10, 20, 55, 0.4);
}

.filter-card__top {
  display: flex;
  align-items: center;
}

.filter-card__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(255, 77, 77, 0.35);
  border-radius: 50%;
  background: rgba(255, 77, 77, 0.08);
  color: var(--danger);
}

.filter-card__mark svg {
  width: 12px;
  height: 12px;
}

.filter-card__text {
  font-size: 15px;
  font-weight: 300;
  line-height: 1.4;
  color: #ffffff;
}

@media (max-width: 900px) {
  .filter__grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .filter-card {
    flex-direction: row;
    align-items: center;
    gap: 20px;
  }
  .filter-card__top {
    flex-shrink: 0;
  }
}

@media (max-width: 640px) {
  .filter__grid {
    margin-top: 36px;
  }
  .filter-card {
    padding: 18px 16px;
    gap: 14px;
  }
  .filter-card__text {
    font-size: 14px;
  }
}

/* ---- Блок 6: CTA — слева заголовки, справа форма на стекле ---- */
.cta-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}

/* у формы собственная рамка со всех сторон (на главной она часть общей платы) */
.cta--split .cta__form .signals__footer-pane {
  border: 1px solid rgba(140, 165, 255, 0.14);
  border-radius: var(--radius-md);
}

@media (max-width: 900px) {
  .cta-split {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .cta--split .cta__form .signals__footer-pane {
    border: 1px solid rgba(140, 165, 255, 0.14);
    border-radius: var(--radius-md);
  }
}

/* ==========================================================================
   Продуктовая страница «Стратегический найм»
   ========================================================================== */

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

/* ---- Hero: 3D-куб «команда как система» (вращение сцены — как у орбиты) ---- */
.orbit--cube {
  --side: calc(var(--size) * 0.52);
  --side-in: calc(var(--size) * 0.26);
}

.cube {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
}

.cube--inner {
  animation: cube-inner 24s linear infinite;
}

@keyframes cube-inner {
  from { transform: rotateX(0deg) rotateY(0deg); }
  to { transform: rotateX(-360deg) rotateY(-720deg); }
}

.cube__face {
  position: absolute;
  width: var(--side);
  height: var(--side);
  margin: calc(var(--side) / -2) 0 0 calc(var(--side) / -2);
  border: 1px solid rgba(196, 216, 255, 0.5);
  border-radius: 2px;
  background:
    linear-gradient(rgba(140, 165, 255, 0.07) 1px, transparent 1px) 0 0 / 25% 25%,
    linear-gradient(90deg, rgba(140, 165, 255, 0.07) 1px, transparent 1px) 0 0 / 25% 25%,
    rgba(40, 80, 200, 0.05);
  box-shadow: 0 0 22px rgba(60, 110, 255, 0.22), inset 0 0 26px rgba(60, 110, 255, 0.16);
  backface-visibility: visible;
}

.cube__face--front { transform: translateZ(calc(var(--side) / 2)); }
.cube__face--back { transform: rotateY(180deg) translateZ(calc(var(--side) / 2)); }
.cube__face--left { transform: rotateY(-90deg) translateZ(calc(var(--side) / 2)); }
.cube__face--right { transform: rotateY(90deg) translateZ(calc(var(--side) / 2)); }
.cube__face--top { transform: rotateX(90deg) translateZ(calc(var(--side) / 2)); }
.cube__face--bottom { transform: rotateX(-90deg) translateZ(calc(var(--side) / 2)); }

.cube--inner .cube__face {
  --side: var(--side-in);
  border-color: rgba(196, 216, 255, 0.75);
  background: rgba(60, 110, 255, 0.06);
  box-shadow: 0 0 14px rgba(60, 110, 255, 0.3), inset 0 0 14px rgba(60, 110, 255, 0.2);
}

/* ядро меньше, чем на орбите: целиком внутри внутреннего куба */
.orbit--cube .orbit__core {
  inset: 42%;
}

/* шарики — в вершинах внешнего куба */
.cube-node--1 { transform: translate3d(calc(var(--side) / -2), calc(var(--side) / -2), calc(var(--side) / 2)); }
.cube-node--2 { transform: translate3d(calc(var(--side) / 2), calc(var(--side) / -2), calc(var(--side) / 2)); }
.cube-node--3 { transform: translate3d(calc(var(--side) / 2), calc(var(--side) / 2), calc(var(--side) / 2)); }
.cube-node--4 { transform: translate3d(calc(var(--side) / -2), calc(var(--side) / 2), calc(var(--side) / 2)); }
.cube-node--5 { transform: translate3d(calc(var(--side) / -2), calc(var(--side) / -2), calc(var(--side) / -2)); }
.cube-node--6 { transform: translate3d(calc(var(--side) / 2), calc(var(--side) / -2), calc(var(--side) / -2)); }
.cube-node--7 { transform: translate3d(calc(var(--side) / 2), calc(var(--side) / 2), calc(var(--side) / -2)); }
.cube-node--8 { transform: translate3d(calc(var(--side) / -2), calc(var(--side) / 2), calc(var(--side) / -2)); }

@media (prefers-reduced-motion: reduce) {
  .cube--inner {
    animation: none;
    transform: rotateX(-24deg) rotateY(38deg);
  }
}

/* ---- Блок 2: 5 признаков — 3 карточки в ряд ---- */
.signs__grid {
  margin-top: 48px;
}

@media (max-width: 640px) {
  .signs__grid {
    margin-top: 36px;
  }
}

/* ---- Блок 3: три карточки — в центре широкая акцентная Saints, по бокам приглушённые ---- */
/* первое предложение заголовка (~780px) — первой строкой, второе — второй */
.approach .section-head h2.approach__title--wide {
  max-width: 810px;
}

.trio {
  display: grid;
  grid-template-columns: 1fr 1.6fr 1fr;
  gap: 28px;
  align-items: stretch; /* все три карточки одной высоты */
  margin-top: 48px;
}

.trio__card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(140, 165, 255, 0.14);
  border-radius: var(--radius-md);
}

/* боковые — ниже, темнее, текст приглушён */
.trio__card--market {
  min-height: 220px;
  justify-content: space-between;
  gap: 24px;
  padding: 28px 26px;
  background: rgba(10, 20, 55, 0.25);
}

.trio__card--market .trio__text {
  font-size: 15px;
  font-weight: 300;
  line-height: 1.45;
  color: var(--text-muted);
}

/* строка метки той же высоты, что знак Saints (32px), и на том же отступе сверху —
   метки всех трёх карточек выровнены по центру */
.trio__note {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* нейтральная серая иконка — без красного, чтобы не спорить с крестиками «признаков» */
.trio__note-icon {
  display: flex;
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--text-faint);
}

.trio__note-icon svg {
  width: 100%;
  height: 100%;
}

/* центральная — выше, синий фон и свечение */
.trio__card--main {
  min-height: 220px;
  justify-content: flex-end;
  padding: 80px 36px 28px;
  border-color: rgba(120, 155, 255, 0.34);
  background:
    radial-gradient(ellipse 80% 70% at 0% 0%, rgba(0, 85, 255, 0.24), transparent 70%),
    linear-gradient(180deg, rgba(14, 30, 85, 0.85) 0%, rgba(8, 16, 50, 0.9) 100%);
  box-shadow: 0 24px 60px rgba(0, 40, 160, 0.22);
}

.trio__card--main .trio__text {
  font-size: 16px;
  font-weight: 300;
  line-height: 1.4;
  color: #ffffff;
}

.trio .trio__brand {
  top: 28px; /* = верхний отступ боковых карточек */
  left: 36px;
  right: auto;
}

@media (max-width: 1100px) {
  .trio__card--market {
    padding: 24px 20px;
  }
  .trio__card--main {
    padding: 80px 28px 28px;
  }
  .trio__card--main .trio__text {
    font-size: 14.5px;
  }
  .trio .trio__brand {
    top: 24px;
    left: 28px;
  }
}

@media (max-width: 900px) {
  .trio {
    grid-template-columns: 1fr 1fr;
  }
  /* сначала бледные «типичные подходы», под ними — яркая карточка Saints на всю ширину */
  .trio__card--main {
    grid-column: 1 / -1;
    order: 1;
  }
  .trio__card--main,
  .trio__card--market {
    min-height: 160px;
  }
}

@media (max-width: 640px) {
  .trio {
    gap: 12px;
    margin-top: 36px;
  }
  .trio__card--market {
    padding: 20px 18px;
  }
  .trio__card--main {
    padding: 72px 20px 24px;
  }
  .trio__card--main,
  .trio__card--market {
    min-height: 170px;
  }
  .trio__card--main .trio__text {
    font-size: 14px;
  }
  .trio__card--market .trio__text {
    font-size: 13px;
  }
  .trio__note {
    min-height: 26px;
    font-size: 10px;
  }
  .trio .trio__brand {
    top: 20px;
    left: 20px;
  }
}

/* две бледные карточки в ряд помещаются до 500px, уже — все друг под другом */
@media (max-width: 499px) {
  .trio {
    grid-template-columns: 1fr;
  }
}

/* знак Saints с подписью справа — в правом верхнем углу акцентной колонки */
.approach__brand {
  position: absolute;
  top: 28px;
  right: 32px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: #ffffff;
}

.approach__brand img {
  width: 32px;
  height: 32px;
}

@media (max-width: 640px) {
  .approach__brand {
    top: 22px;
    right: 20px;
    font-size: 13px;
  }
  .approach__brand img {
    width: 26px;
    height: 26px;
  }
}

/* ---- Блок 5: таблица сравнения — компонент .compare с главной, критерий подписью над текстом ---- */
.compare--criteria {
  margin-top: 48px;
}

.compare__crit {
  display: block;
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.compare__cell--saints .compare__crit {
  color: #c4d8ff;
}

/* стрелка — по центру текста, а не всей ячейки с подписью */
.compare--criteria .compare__row .compare__arrow {
  top: calc(50% + 9px);
}

@media (max-width: 640px) {
  .compare--criteria {
    margin-top: 32px;
  }
  .compare__crit {
    font-size: 10px;
  }
}

/* ---- Блок 7: бегущая строка логотипов ---- */
.ticker {
  margin-top: 40px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

.ticker__track {
  display: flex;
  width: max-content;
  animation: ticker 40s linear infinite;
}

.ticker:hover .ticker__track {
  animation-play-state: paused;
}

.ticker__list {
  display: flex;
  gap: 16px;
  padding-right: 16px;
}

.ticker__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 80px;
  border: 1px solid rgba(140, 165, 255, 0.14);
  border-radius: var(--radius-md);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--text-faint);
  filter: grayscale(1);
}

.ticker__logo img {
  max-width: 70%;
  max-height: 40px;
  opacity: 0.7;
}

@keyframes ticker {
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .ticker__track {
    animation: none;
  }
}

@media (max-width: 640px) {
  .ticker {
    margin-top: 28px;
  }
  .ticker__logo {
    width: 150px;
    height: 64px;
  }
}

/* ---- Блок 8: плата как в финальном блоке главной; верхняя ячейка слева — заголовок на две колонки ---- */
.cta--head-in-board .cta__board {
  margin-top: 0;
}

.cta__cards--head {
  grid-auto-rows: auto;
  grid-template-rows: auto 1fr;
}

.cta__cards--head .cta-card {
  border-right: 0;
  border-bottom: 0;
  border-radius: 0;
}

/* нижние карточки — как на главной: иконка сверху, текст прижат к низу с отступом 28px;
   иконка сдвинута влево на поле внутри рисунка — её левый край на одной линии с текстом */
.cta__cards--head .cta-card:not(.cta-card--head) .cta-card__icon {
  margin-left: -11px;
}

/* под описание — место на 3 строки: заголовки обеих карточек на одной линии при разной длине текста */
@media (min-width: 641px) {
  .cta__cards--head .cta-card__text {
    min-height: calc(3 * 1.5em);
  }
}

.cta-card--head {
  grid-column: 1 / -1;
  justify-content: flex-start;
  gap: 0;
  min-height: 0;
  padding: 36px 28px 40px; /* левый край — как у карточек ниже */
  border-top-left-radius: 4px !important;
  border-bottom: 1px solid rgba(140, 165, 255, 0.14) !important;
}

@media (hover: hover) {
  .cta-card--head:hover {
    background: rgba(10, 20, 55, 0.4);
  }
}

.cta-card--head h2 {
  /* «Если вы продолжаете нанимать» (~430px) — первой строкой, «просто сотрудников» — всегда со второй */
  max-width: 490px;
  font-size: 30px;
  line-height: 1.2;
}

.cta-card--head h3 {
  margin-top: 16px;
  font-size: 14px;
  font-weight: 200;
  color: #ffffff;
}

.cta__cards--head .cta-card:nth-child(2) {
  border-right: 1px solid rgba(140, 165, 255, 0.14);
  border-bottom-left-radius: 4px;
}

@media (max-width: 900px) {
  .cta__cards--head .cta-card:nth-child(2) {
    border-bottom-left-radius: 0;
  }
  .cta-card--head {
    border-top-right-radius: 4px !important;
  }
}

@media (max-width: 640px) {
  .cta__cards--head {
    grid-template-rows: none;
  }
  .cta-card--head {
    padding: 26px 20px 28px;
  }
  .cta-card--head h2 {
    font-size: 24px;
  }
  .cta__cards--head .cta-card:nth-child(2) {
    border-right: 0;
    border-bottom: 1px solid rgba(140, 165, 255, 0.14);
  }
  .cta__cards--head .cta-card:nth-child(3) {
    border-bottom: 1px solid rgba(140, 165, 255, 0.14);
  }
}

/* узкие экраны: у куба видимый верх выше, чем у колец орбиты — свой сдвиг сцены,
   чтобы от плашки до куба было ~40px, и свой отступ до следующего блока (~90–100px) */
@media (max-width: 849px) {
  .hero--product .hero-visual .orbit--cube {
    margin-top: calc(7px - var(--size) * 0.08);
  }
  .hero--cube + .section {
    padding-top: 48px;
  }
}

/* ==========================================================================
   Продуктовая страница «Аудит системы управления»
   ========================================================================== */

/* ---- Hero: слои организации и кольцо-сканер (вращение сцены — как у орбиты) ---- */
.orbit--scan {
  --layer: calc(var(--size) * 0.5);
  --gap: calc(var(--size) * 0.19);
}

.scan__layer {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--layer);
  height: var(--layer);
  margin: calc(var(--layer) / -2) 0 0 calc(var(--layer) / -2);
  border: 1px solid rgba(196, 216, 255, 0.5);
  border-radius: 4px;
  background:
    linear-gradient(rgba(140, 165, 255, 0.08) 1px, transparent 1px) 0 0 / 20% 20%,
    linear-gradient(90deg, rgba(140, 165, 255, 0.08) 1px, transparent 1px) 0 0 / 20% 20%,
    rgba(40, 80, 200, 0.07);
  box-shadow: 0 0 24px rgba(60, 110, 255, 0.22), inset 0 0 30px rgba(60, 110, 255, 0.18);
}

.scan__layer--1 { transform: translateY(calc(var(--gap) * -1)) rotateX(90deg); }
.scan__layer--2 { transform: rotateX(90deg); width: calc(var(--layer) * 1.15); height: calc(var(--layer) * 1.15); margin: calc(var(--layer) * -0.575) 0 0 calc(var(--layer) * -0.575); }
.scan__layer--3 { transform: translateY(var(--gap)) rotateX(90deg); width: calc(var(--layer) * 1.3); height: calc(var(--layer) * 1.3); margin: calc(var(--layer) * -0.65) 0 0 calc(var(--layer) * -0.65); }

/* кольцо-сканер ходит вверх-вниз сквозь слои */
.scan__ring {
  position: absolute;
  top: 50%;
  left: 50%;
  /* диаметр больше диагонали нижнего слоя (0.65 × √2 ≈ 0.92) — кольцо не задевает углы слоёв */
  width: calc(var(--size) * 1.02);
  height: calc(var(--size) * 1.02);
  margin: calc(var(--size) * -0.51) 0 0 calc(var(--size) * -0.51);
  border-radius: 50%;
  border: 1.5px solid rgba(160, 195, 255, 0.85);
  box-shadow: 0 0 26px rgba(60, 120, 255, 0.55), inset 0 0 26px rgba(60, 120, 255, 0.35);
  transform: translateY(calc(var(--gap) * -1.6)) rotateX(90deg);
  animation: scan-ring 7s ease-in-out infinite alternate;
}

@keyframes scan-ring {
  from { transform: translateY(calc(var(--gap) * -1.6)) rotateX(90deg); }
  to { transform: translateY(calc(var(--gap) * 1.6)) rotateX(90deg); }
}

/* люди-узлы на слоях: x, y (уровень), z */
.scan-node--1 { transform: translate3d(0, calc(var(--gap) * -1), 0); }
.scan-node--2 { transform: translate3d(calc(var(--layer) * -0.3), 0, calc(var(--layer) * 0.2)); }
.scan-node--3 { transform: translate3d(calc(var(--layer) * 0.32), 0, calc(var(--layer) * -0.18)); }
.scan-node--4 { transform: translate3d(calc(var(--layer) * -0.45), var(--gap), calc(var(--layer) * -0.35)); }
.scan-node--5 { transform: translate3d(calc(var(--layer) * 0.05), var(--gap), calc(var(--layer) * 0.45)); }
.scan-node--6 { transform: translate3d(calc(var(--layer) * 0.48), var(--gap), calc(var(--layer) * 0.12)); }
.scan-node--7 { transform: translate3d(calc(var(--layer) * -0.08), var(--gap), calc(var(--layer) * -0.5)); }

@media (prefers-reduced-motion: reduce) {
  .scan__ring {
    animation: none;
  }
}

/* ---- Блок 2: 7 признаков — 4 в ряд, под ними 3 ---- */
/* «Почему масштабирование приводит к хаосу,» (~690px) — первой строкой, «а не к росту прибыли» — второй */
.section-head h2.signs-title--audit {
  max-width: 720px;
}

/* ---- Блок 3: слева заголовок, справа 4 карточки лесенкой; линии и шарик — как в «Причинах» на главной ---- */
/* перенос строки заголовка только на десктопе */
@media (max-width: 1024px) {
  .br-desktop {
    display: none;
  }
}

.zz {
  position: relative;
  display: grid;
  /* как «Причины» на главной: поля под линию слева и хвост справа, карточки в трёх колонках */
  grid-template-columns: 120px repeat(3, minmax(0, 1fr)) 120px;
  column-gap: 40px;
  row-gap: 40px;
}

.zz__aside {
  grid-column: 1 / -1;
  grid-row: 1;
  margin-bottom: 8px;
}

.zz__cards {
  display: contents;
}

/* карточки — как в «Причинах» на главной: цифра сверху, текст по центру */
.zz__card {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 150px;
  padding: 28px 22px;
  text-align: center;
  background: rgba(10, 20, 55, 0.4);
  border: 1px solid rgba(140, 165, 255, 0.14);
  border-radius: var(--radius-md);
}

/* 01 → 02 в ряд, от 02 вниз к 03, 03 → 04 в ряд */
.zz__card--1 { grid-column: 2; grid-row: 2; }
.zz__card--2 { grid-column: 3; grid-row: 2; }
.zz__card--3 { grid-column: 3; grid-row: 3; }
.zz__card--4 { grid-column: 4; grid-row: 3; }

.zz__index {
  display: block;
  margin-bottom: 18px;
  font-size: 12px;
  font-weight: 300;
  letter-spacing: 0.04em;
  color: #ffffff;
}

.zz__card p {
  font-size: 13px;
  font-weight: 200;
  line-height: 1.4;
  color: var(--text);
}

/* 01 — в три строки, как остальные карточки (на схеме в три колонки) */
@media (min-width: 901px) {
  .zz__card--1 p {
    max-width: 160px;
  }
}

/* линии и шарик: координаты задаёт JS по реальным позициям карточек */
.zz__lines {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.zz__line {
  position: absolute;
  background: rgba(140, 165, 255, 0.45);
}

.zz__ball {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #0055ff;
  box-shadow: 0 0 12px rgba(0, 85, 255, 0.8);
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0;
  transition: filter 200ms var(--ease), opacity 200ms var(--ease), transform 200ms var(--ease), box-shadow 200ms var(--ease);
  will-change: left, top;
}

.zz.is-ready .zz__ball {
  opacity: 1;
}

/* под карточкой шарик размыт, крупнее и светится сильнее — как на главной */
.zz .zz__ball.is-blurred {
  transform: translate(-50%, -50%) scale(1.8);
  filter: blur(2.5px);
  opacity: 0.9;
  background: #2f6bff;
  box-shadow: 0 0 18px 4px rgba(47, 107, 255, 0.85);
}

@media (max-width: 1100px) {
  .zz {
    grid-template-columns: 56px repeat(3, minmax(0, 1fr)) 56px;
    column-gap: 24px;
  }
}

/* планшет и телефон: карточки одной колонкой, линии вертикальные, хвост вниз */
@media (max-width: 900px) {
  .zz {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 40px;
    padding-bottom: 64px; /* место под линию после последней карточки */
  }
  .zz__aside {
    margin-bottom: 32px;
  }
  .zz__card--1,
  .zz__card--2,
  .zz__card--3,
  .zz__card--4 {
    grid-column: 1;
    grid-row: auto;
    min-height: 0;
  }
  /* отступ под линией уже даёт воздух — у следующего блока верхний отступ меньше на столько же */
  .zz-section + .section {
    padding-top: calc(var(--section-gap) - 64px);
  }
}

@media (min-width: 641px) and (max-width: 900px) {
  .zz__cards,
  .zz__card {
    max-width: 480px;
  }
  .zz__card {
    justify-self: center;
    width: 100%;
  }
}

/* ---- Блок 4: шапка + плашка, 6 векторов с иконками, теги инструментов ---- */
.vectors__head {
  display: block;
}

/* пояснение под карточками — мелкий приглушённый текст */
/* теги слева и пояснение справа — в одну строку, по центру по вертикали */
.vectors__note {
  margin-left: auto;
  text-align: right;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--text-muted);
}

.vectors__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 48px;
  border-top: 1px solid rgba(140, 165, 255, 0.14);
  border-left: 1px solid rgba(140, 165, 255, 0.14);
  border-radius: var(--radius-md);
}

.vector-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  min-height: 200px;
  padding: 28px;
  border-right: 1px solid rgba(140, 165, 255, 0.14);
  border-bottom: 1px solid rgba(140, 165, 255, 0.14);
  background: rgba(10, 20, 55, 0.4);
  transition: background-color 250ms var(--ease);
}

@media (hover: hover) {
  .vector-card:hover {
    background: rgba(0, 85, 255, 0.08);
  }
}

.vector-card__icon {
  margin-left: -4px;
}

.vector-card__text {
  font-size: 16px;
  font-weight: 300;
  line-height: 1.45;
  color: #ffffff;
}

/* место под 2 строки — тексты всех карточек начинаются на одной линии */
@media (min-width: 641px) {
  .vector-card__text {
    min-height: calc(2 * 1.45em);
  }
}

/* не хватает места на одной строке — переносятся теги, а пояснение остаётся справа,
   на уровне верхнего ряда тегов */
.vectors__tools {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px 24px;
  margin-top: 24px;
}

.vectors__tags {
  flex: 0 1 auto;
  min-width: 0;
  max-width: none;
  margin-top: 0;
}

.vectors__note {
  flex: none;
  padding-top: 5px; /* строка текста — по центру первого ряда тегов (тег ~30px, строка ~20px) */
  white-space: nowrap;
}

/* на узких экранах пояснение уходит под теги */
@media (max-width: 768px) {
  .vectors__tools {
    flex-direction: column;
    align-items: flex-start;
  }
  .vectors__note {
    padding-top: 0;
    margin-left: 0;
    text-align: left;
    white-space: normal;
  }
}

/* текст — того же цвета, что обводка тегов (rgb 140,165,255), но непрозрачный, чтобы читался */
.vectors__tags li {
  font-size: 12px;
  color: rgba(140, 165, 255, 0.7);
}

@media (max-width: 1024px) {
  .vectors__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .vectors__grid {
    margin-top: 36px;
  }
  .vectors__grid {
    grid-template-columns: 1fr;
  }
  .vector-card {
    display: grid;
    grid-template-columns: 38px 1fr;
    align-items: center;
    gap: 18px;
    min-height: 0;
    padding: 20px 16px;
  }
  .vector-card__icon {
    flex: none;
    width: 38px;
    height: 38px;
    margin-left: 0;
  }
  .vector-card__text {
    font-size: 14px;
  }
}

/* ---- Блок 5: слева заголовок, справа список — синий кружок слева, линия под каждым пунктом ---- */
.deliver-split {
  display: grid;
  /* две равные половины без промежутка: список (и линии) начинается ровно с середины экрана */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0;
  align-items: start;
}

/* верх первого пункта — на уровне заголовка (надзаголовок ~15px + отступ 16px) */
.deliver {
  margin-top: 39px;
}

.deliver__item {
  position: relative;
  padding: 40px 0 16px 117px; /* текст ближе к линии под ним; отступ слева — место под кружок */
  border-bottom: 1px solid rgba(140, 165, 255, 0.14);
  font-size: 14px;
  font-weight: 200;
  line-height: 1.45;
  color: #ffffff;
}

.deliver__item::before {
  content: '';
  position: absolute;
  left: 2px;
  top: calc(40px + 0.725em - 3px);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #0055ff;
  box-shadow: 0 0 10px rgba(0, 85, 255, 0.75);
}

/* первый пункт — по верху, на уровне надзаголовка слева */
.deliver-split > .section-head {
  padding-right: 48px;
}

/* «Твердый результат нашей» — первой строкой, «работы для собственника» — второй */
#deliver-title {
  max-width: 440px;
}

/* подзаголовок той же ширины: «…с кем прощаться,» / «и как перестроить систему» */
#deliver-title + h3 {
  max-width: 380px;
}

.deliver__item:first-child {
  padding-top: 0;
}

.deliver__item:first-child::before {
  top: calc(0.725em - 3px);
}

@media (max-width: 900px) {
  .deliver-split {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .deliver-split > .section-head {
    padding-right: 0;
  }
  .deliver {
    margin-top: 0;
    margin-left: 0;
  }
  .deliver__item {
    padding-left: 22px;
  }
}

@media (max-width: 640px) {
  .deliver__item {
    padding: 30px 0 13px 20px;
    font-size: 13px;
  }
  .deliver__item::before {
    top: calc(30px + 0.725em - 3px);
  }
  .deliver__item:first-child::before {
    top: calc(0.725em - 3px);
  }
}

/* ---- Блок 6: изометрическая инфографика + цифры, формат, уровни ---- */
.price__grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 56px;
  align-items: center;
  margin-top: 48px;
}

.price__chart {
  padding: 28px 20px 12px;
  border: 1px solid rgba(140, 165, 255, 0.14);
  border-radius: var(--radius-md);
  background:
    radial-gradient(ellipse 70% 60% at 50% 100%, rgba(0, 85, 255, 0.22), transparent 70%),
    rgba(10, 20, 55, 0.4);
}

.iso-chart {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.iso-floor {
  fill: rgba(140, 165, 255, 0.08);
  stroke: rgba(140, 165, 255, 0.2);
}

.iso-bar {
  filter: drop-shadow(0 10px 18px rgba(0, 30, 120, 0.45));
}

.iso-bar__value {
  font-family: inherit;
  font-size: 22px;
  font-weight: 400;
  fill: #ffffff;
  text-anchor: middle;
}

.iso-bar__cap {
  font-family: inherit;
  font-size: 10px;
  font-weight: 300;
  fill: #a7a7ad;
  text-anchor: middle;
}

.price__group + .price__group {
  margin-top: 28px;
  padding-top: 8px;
  border-top: 1px solid rgba(140, 165, 255, 0.14);
}

.price__title {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.price__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 24px;
}

.price__stats li {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.price__value {
  font-size: 30px;
  font-weight: 300;
  line-height: 1.1;
  color: #c4d8ff;
}

/* негативные показатели — неяркий красный */
.price__value--neg {
  color: #e0949e;
}

/* подписи к цифрам — узкие, в две строки */
.price__label {
  max-width: 190px;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.4;
  color: #a7a7ad;
}

/* без карточек: 2×2, между рядами одна горизонтальная линия */
.price__facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0; /* у dl по умолчанию отступ снизу */
}

.price__facts > div {
  padding: 20px 20px 20px 0;
}

/* второй ряд — на 10px ниже */
.price__facts > div:nth-child(n + 3) {
  padding-top: 30px;
}

.price__facts > div:nth-child(-n + 2) {
  border-bottom: 1px solid rgba(140, 165, 255, 0.14);
}

.price__facts dt {
  font-size: 12px;
  font-weight: 300;
  color: #a7a7ad;
}

.price__facts dd {
  margin: 4px 0 0;
  font-size: 16px;
  font-weight: 400;
  color: #ffffff;
}

@media (max-width: 1024px) {
  .price__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

@media (max-width: 640px) {
  .price__grid {
    margin-top: 36px;
  }
  .price__chart {
    padding: 20px 8px 4px;
  }
  .price__value {
    font-size: 24px;
  }
  .price__facts > div {
    padding: 18px 14px 18px 0;
  }
  .price__facts > div:nth-child(n + 3) {
    padding-top: 26px;
  }
}

/* ---- Блок 7: таблица сравнения (компонент .compare главной) ---- */
.compare--page {
  margin-top: 48px;
}

@media (max-width: 640px) {
  .compare--page {
    margin-top: 32px;
  }
}

/* ---- Блок 8: после аудита / что не входит ---- */
.after__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 48px;
}

.after__col {
  padding: 32px;
  border: 1px solid rgba(140, 165, 255, 0.14);
  border-radius: var(--radius-md);
}

.after__col--flow {
  border-color: rgba(120, 155, 255, 0.34);
  background:
    radial-gradient(ellipse 80% 70% at 0% 0%, rgba(0, 85, 255, 0.2), transparent 70%),
    linear-gradient(180deg, rgba(14, 30, 85, 0.75) 0%, rgba(8, 16, 50, 0.8) 100%);
}

.after__col--out {
  background: rgba(10, 20, 55, 0.25);
}

.after__title {
  font-size: 20px;
  font-weight: 300;
  line-height: 1.3;
  color: #ffffff;
}

.after__col--out .after__title {
  color: var(--text-muted);
}

/* табы — как «Помогаю собственнику» на главной, без линий */
.after__tabs {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.after__tabs li {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid rgba(140, 165, 255, 0.22);
  border-radius: 999px;
  background: rgba(140, 165, 255, 0.06);
  font-size: 12px;
  font-weight: 300;
  line-height: 1.3;
  color: #c9c9cf;
}

.after__tabs li::before {
  content: '';
  flex: none;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent-hover);
}

/* «не входит»: вместо синей точки — красный крестик */
.after__tabs--out li::before {
  content: none;
}

.after__x {
  display: flex;
  flex: none;
  color: var(--danger);
}

.after__x svg {
  width: 9px;
  height: 9px;
}

@media (max-width: 900px) {
  .after__grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .after__grid {
    margin-top: 36px;
    gap: 12px;
  }
  .after__col {
    padding: 24px 18px;
  }
  .after__title {
    font-size: 17px;
  }
  .after__tabs {
    margin-top: 20px;
  }
}

/* ---- Блок 9: заголовок CTA ---- */
/* заголовки нижних карточек — на одной линии: под заголовок место на 2 строки */
@media (min-width: 641px) {
  .cta__cards--head .cta-card__title {
    min-height: calc(2 * 1.3em);
  }
}
.cta-card--head h2.cta-title--audit {
  max-width: 460px;
}

/* узкие экраны: у сцены «слои + сканер» кольцо уходит ниже слоёв — отступ до следующего блока больше */
@media (max-width: 849px) {
  .hero--scan + .section {
    padding-top: 88px;
  }
  .hero--product .hero-visual .orbit--scan {
    margin-top: calc(23px - var(--size) * 0.08);
  }
}

/* Аудит, CTA: подзаголовок — единый абзац, ширина подобрана так, чтобы
   «Если готовы менять систему…» начиналось со второй строки */
.cta .cta__header h3.cta-sub--audit {
  max-width: 515px;
}

/* ==========================================================================
   Продуктовая страница «HRBP на аутсорсе»
   ========================================================================== */

/* ---- Hero: собственник на вершине, уровни команды на кольцах, от вершины вниз бегут импульсы ---- */
.orbit--tree {
  --g: calc(var(--size) * 0.2); /* шаг уровней по высоте и радиус верхнего кольца */
}

.tree__ring {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  border: 1px solid rgba(196, 216, 255, 0.55);
  box-shadow: 0 0 22px rgba(60, 110, 255, 0.28), inset 0 0 22px rgba(60, 110, 255, 0.18);
}

.tree__ring--1 {
  width: calc(var(--g) * 2);
  height: calc(var(--g) * 2);
  margin: calc(var(--g) * -1) 0 0 calc(var(--g) * -1);
  transform: rotateX(90deg);
}

/* нижний уровень — «пол» с лёгкой заливкой и пунктирным двойником для объёма */
.tree__ring--2 {
  width: calc(var(--g) * 4);
  height: calc(var(--g) * 4);
  margin: calc(var(--g) * -2) 0 0 calc(var(--g) * -2);
  border-color: rgba(196, 216, 255, 0.7);
  background: radial-gradient(circle, rgba(47, 107, 255, 0.16) 0%, rgba(47, 107, 255, 0.05) 60%, transparent 72%);
  outline: 1px dashed rgba(140, 165, 255, 0.3);
  outline-offset: calc(var(--g) * -0.5);
  transform: translateY(var(--g)) rotateX(90deg);
}

/* рёбра конуса: от вершины через узел верхнего кольца к узлу нижнего.
   Линия — две перпендикулярные плоскости (::before/::after), чтобы не пропадала,
   когда при вращении встаёт к зрителю ребром */
.tree__edge {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: calc(var(--g) * 2.828); /* 2g·√2 — ребро под 45° */
  transform-style: preserve-3d;
  transform-origin: 0 0;
}

.tree__edge::before,
.tree__edge::after {
  content: '';
  position: absolute;
  inset: 0 -0.75px;
  background:
    linear-gradient(to bottom, transparent 0%, #dfe9ff 50%, transparent 100%) 0 -40% / 100% 30% no-repeat,
    linear-gradient(to bottom, rgba(196, 216, 255, 0.7), rgba(120, 160, 255, 0.25));
  animation: tree-pulse 3.6s linear infinite;
}

.tree__edge::after {
  transform: rotateY(90deg);
}

.tree__edge--1 { transform: translate3d(0, calc(var(--g) * -1), 0) rotateY(-90deg) rotateZ(-45deg); }
.tree__edge--2 { transform: translate3d(0, calc(var(--g) * -1), 0) rotateY(-210deg) rotateZ(-45deg); }
.tree__edge--3 { transform: translate3d(0, calc(var(--g) * -1), 0) rotateY(-330deg) rotateZ(-45deg); }
.tree__edge--2::before, .tree__edge--2::after { animation-delay: -1.2s; }
.tree__edge--3::before, .tree__edge--3::after { animation-delay: -2.4s; }

@keyframes tree-pulse {
  from { background-position: 0 -40%, 0 0; }
  to { background-position: 0 140%, 0 0; }
}

/* узлы: вершина, 3 на верхнем кольце, 6 на нижнем (x, уровень, z) */
.tree-node--1 { transform: translate3d(0, calc(var(--g) * -1), 0); }
.tree-node--2 { transform: translate3d(0, 0, var(--g)); }
.tree-node--3 { transform: translate3d(calc(var(--g) * -0.866), 0, calc(var(--g) * -0.5)); }
.tree-node--4 { transform: translate3d(calc(var(--g) * 0.866), 0, calc(var(--g) * -0.5)); }
.tree-node--5 { transform: translate3d(0, var(--g), calc(var(--g) * 2)); }
.tree-node--6 { transform: translate3d(calc(var(--g) * -1.732), var(--g), calc(var(--g) * -1)); }
.tree-node--7 { transform: translate3d(calc(var(--g) * 1.732), var(--g), calc(var(--g) * -1)); }
.tree-node--8 { transform: translate3d(calc(var(--g) * -1.732), var(--g), var(--g)); }
.tree-node--9 { transform: translate3d(0, var(--g), calc(var(--g) * -2)); }
.tree-node--10 { transform: translate3d(calc(var(--g) * 1.732), var(--g), var(--g)); }

.tree-node--1 .orbit__ball {
  --ball: clamp(15px, calc(var(--size) * 0.04), 26px);
}

.tree-node--8 .orbit__ball,
.tree-node--9 .orbit__ball,
.tree-node--10 .orbit__ball {
  --ball: clamp(7px, calc(var(--size) * 0.016), 11px);
}

@media (prefers-reduced-motion: reduce) {
  .tree__edge::before,
  .tree__edge::after {
    animation: none;
  }
}

@media (max-width: 849px) {
  /* вершина конуса — ~40px под плашкой, от нижнего кольца до следующего блока ~95px */
  .hero--tree + .section {
    padding-top: 26px;
  }
  .hero--product .hero-visual .orbit--tree {
    margin-top: calc(-35px - var(--size) * 0.08);
  }
}

/* ---- Блок 3: слева заголовок и текст, справа изометрия «стратегия → HR-стратегия → команда» ---- */
.hrsys__split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 64px;
}

.hrsys__svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.hrsys__cap {
  font-family: inherit;
  font-size: 13px;
  font-weight: 300;
  fill: #a7a7ad;
}

.hrsys__pulse {
  animation: hrsys-pulse 4s linear infinite;
}

.hrsys__pulse--2 { animation-delay: -1.3s; }
.hrsys__pulse--3 { animation-delay: -2.6s; }

@keyframes hrsys-pulse {
  0% { transform: translateY(0); opacity: 0; }
  12% { opacity: 1; }
  85% { opacity: 1; }
  100% { transform: translateY(220px); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hrsys__pulse {
    animation: none;
  }
}

@media (max-width: 900px) {
  .hrsys__split {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .hrsys__visual {
    max-width: 520px;
  }
}

/* ---- Блок 4: карточки результата с крупными цифрами (сетка — как «Анатомия бизнеса») ---- */
/* размер цифр и текста — как у карточек «Для кого» на главной */
.vector-card__num {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0.04em;
  color: #8fb0ff;
}

/* карточки с цифрами ниже обычных (200px → 165px) */
@media (min-width: 641px) {
  .vectors__grid--nums .vector-card {
    min-height: 165px;
  }
  /* ширина строки подобрана замером: все тексты — ровно в 2 строки (подходит 245–300px) */
  .vectors__grid--nums .vector-card__text {
    max-width: 260px;
  }
}

.vector-card__num + .vector-card__text {
  font-size: 15px;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

/* ---- Блок 7: цифры в 4 колонки, под ними кейс на синей плашке (3 колонки) ---- */
.nums__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  margin-top: 48px;
}

.nums__stats li {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.nums__value {
  font-size: 52px;
  font-weight: 200;
  line-height: 1;
  color: #c4d8ff;
}

.nums__label {
  max-width: 220px;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.45;
  color: var(--text-muted);
}

.nums__case {
  margin-top: 56px;
  padding: 32px;
  border: 1px solid rgba(140, 165, 255, 0.2);
  border-radius: var(--radius-md);
  background:
    radial-gradient(ellipse 80% 70% at 0% 0%, rgba(0, 85, 255, 0.2), transparent 70%),
    linear-gradient(180deg, rgba(14, 30, 85, 0.75) 0%, rgba(8, 16, 50, 0.8) 100%);
  background-clip: padding-box; /* заливка не под обводкой — обводка одинаковая со всех сторон */
}

/* 4 колонки: лого и заголовок кейса, затем «Проблема», «Что сделали», «Результат» */
.nums__case {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}

.nums__case-head {
  padding-right: 32px;
  border-right: 1px solid rgba(140, 165, 255, 0.2); /* тонкая линия между 1-й и 2-й колонкой */
}

.nums__case-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 500;
  color: #ffffff;
}

.nums__case-brand img {
  width: 28px;
  height: 28px;
}

.nums__case-title {
  margin-top: 28px;
  font-size: 18px;
  font-weight: 300;
  line-height: 1.35;
  color: #ffffff;
}

.nums__case-grid {
  display: contents;
}

.nums__case-grid dt {
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8fb0ff;
}

.nums__case-grid dd {
  max-width: 222px; /* тексты трёх колонок — одной ширины (как «Что сделали») */
  margin: 8px 0 0;
  font-size: 12px;
  font-weight: 200;
  line-height: 1.5;
  color: #ffffff;
}

@media (max-width: 1024px) {
  .nums__stats {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 36px;
  }
}

/* планшет: лого и заголовок — строкой сверху, под ними три колонки */
@media (max-width: 1024px) {
  .nums__case {
    grid-template-columns: repeat(3, 1fr);
  }
  .nums__case-head {
    grid-column: 1 / -1;
    padding: 0 0 24px;
    border-right: 0;
    border-bottom: 1px solid rgba(140, 165, 255, 0.2);
  }
}

@media (max-width: 768px) {
  .nums__case {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .nums__case-grid dd {
    max-width: none;
  }
}

@media (max-width: 640px) {
  .nums__stats {
    margin-top: 36px;
    gap: 28px 20px;
  }
  .nums__value {
    font-size: 38px;
  }
  .nums__label {
    font-size: 13px;
  }
  .nums__case {
    margin-top: 40px;
    padding: 24px 18px;
  }

}

/* ---- Блок 8: табы с красными иконками (перечёркнутый человек, минус) ---- */
.after__tabs--soft .after__x {
  color: var(--danger);
}

.after__tabs--soft .after__x svg {
  width: 11px;
  height: 11px;
}

/* HRBP, CTA: единый абзац, «Если вам нужна…» — со второй строки */
.cta .cta__header h3.cta-sub--hrbp {
  max-width: 460px;
}

/* HRBP, блок 8: слева заголовок, справа две карточки — по сетке 3 колонок
   (как карточки «Симптомов»): заголовок в 1-й колонке, карточки во 2-й и 3-й;
   табы — по одному в строке */
@media (min-width: 1281px) {
  .after__side {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: start;
    column-gap: 16px;
  }
  .after__side .after__grid {
    grid-column: 2 / 4;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 40px; /* верх карточек — на уровне заголовка, а не надписи над ним */
  }
  .after__side .after__col {
    padding: 28px 20px;
  }
  .after__side .after__tabs {
    flex-direction: column;
    align-items: flex-start;
  }
  .after__side .after__tabs li {
    white-space: nowrap;
  }
}

/* ==========================================================================
   Продуктовая страница «Тестирование руководителей и сотрудников»
   ========================================================================== */

/* ---- Hero: «ДНК команды» — двойная спираль из узлов-людей, перекладины между ними — связи;
   по перекладинам снизу вверх бежит свечение (идёт замер) ---- */
.orbit--dna {
  --r: calc(var(--size) * 0.17);    /* радиус спирали */
  --step: calc(var(--size) * 0.058); /* шаг по высоте */
  animation-duration: 24s;
}

/* шарики крутятся навстречу сцене с той же скоростью — всегда смотрят на зрителя */
.orbit--dna .orbit__ball {
  animation-duration: 24s;
}

.dna__node {
  transform: translate3d(
    calc(var(--s) * var(--r) * cos(var(--i) * 30deg)),
    calc((var(--i) - 6) * var(--step)),
    calc(var(--s) * var(--r) * sin(var(--i) * 30deg))
  );
}

/* вторая нить — шарики чуть меньше */
.dna__node--b .orbit__ball {
  --ball: clamp(7px, calc(var(--size) * 0.017), 12px);
}

.dna__rung {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--r) * 2);
  height: 1.5px;
  margin: -0.75px 0 0 calc(var(--r) * -1);
  background: linear-gradient(90deg, rgba(143, 176, 255, 0.85), rgba(60, 110, 255, 0.35) 50%, rgba(143, 176, 255, 0.85));
  box-shadow: 0 0 8px rgba(60, 120, 255, 0.45);
  opacity: 0.45;
  transform: translateY(calc((var(--i) - 6) * var(--step))) rotateY(calc(var(--i) * -30deg));
  animation: dna-pulse 3s ease-in-out infinite;
  animation-delay: calc((12 - var(--i)) * 0.2s - 3s);
}

@keyframes dna-pulse {
  0%, 30%, 100% { opacity: 0.45; }
  12% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .dna__rung {
    animation: none;
  }
}

@media (max-width: 849px) {
  /* верхний шарик — ~40px под плашкой, от нижнего до следующего блока ~90–100px */
  .hero--dna + .section {
    padding-top: 18px;
  }
  .hero--product .hero-visual .orbit--dna {
    margin-top: calc(26px - var(--size) * 0.08);
  }
}

/* ---- Блок 2: длинный заголовок — в две строки ---- */
.section-head h2.signs-title--test {
  max-width: 820px;
}

/* ---- Блок 3: на десктопе карточка — в левой половине экрана (правый край по центру,
   как граница в hero), заголовок и подзаголовок — в правой; по центру друг относительно друга ---- */
@media (min-width: 901px) {
  .intuit__split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }
  .intuit__split > .section-head {
    grid-column: 2;
    grid-row: 1;
    padding-left: 64px;
  }
  .intuit__card {
    grid-column: 1;
    grid-row: 1;
    margin-top: 0 !important;
  }
}

/* рифлёное стекло с шаром под ним — как плашки «Для кого» на главной */
.intuit__card {
  position: relative;
  margin-top: 36px;
  padding: 36px;
}

.intuit__card > p {
  position: relative;
  z-index: 3;
}

.intuit__card .signals__footer-ball {
  animation-name: intuit-ball-drift;
}

/* шар ходит в правой части плашки, где нет текста */
@keyframes intuit-ball-drift {
  0% { left: 92%; top: 28%; }
  50% { left: 97%; top: 66%; }
  100% { left: 100%; top: 32%; }
}

/* текст — узкой колонкой слева */
@media (min-width: 901px) {
  .intuit__card > p {
    max-width: min(500px, 100%); /* 4 строки на широком экране, шар — у правого края */
  }
}

.intuit__text {
  margin-top: 24px;
  font-size: 14px;
  font-weight: 200;
  line-height: 1.55;
  color: #ffffff;
}

@media (max-width: 640px) {
  .intuit__card {
    padding: 24px 18px;
  }
  .intuit__text {
    margin-top: 18px;
  }
}

/* ---- Блок 4: карточки с иконкой, заголовком и пояснением ---- */
.vector-card__title {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.35;
  color: #ffffff;
}

.vector-card__desc {
  margin-top: 8px;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--text-muted);
}

/* ---- Блок 5: 5 карточек — 3 в первом ряду, 2 во втором ---- */
@media (min-width: 1025px) {
  .vectors__grid--five {
    grid-template-columns: repeat(6, 1fr);
  }
  .vectors__grid--five > li {
    grid-column: span 2;
  }
  .vectors__grid--five > li:nth-child(n + 4) {
    grid-column: span 3;
  }
}

@media (min-width: 641px) {
  /* подобрано замером: все тексты — в 2 строки (подходит 315–360px) */
  .vectors__grid--five .vector-card__text {
    max-width: 330px;
  }
}

@media (min-width: 641px) and (max-width: 1024px) {
  .vectors__grid--five > li:last-child {
    grid-column: 1 / -1;
  }
}

/* ---- Блок 6: формат — факты и пояснение ---- */
/* без заголовков карточек — содержимое начинается сразу от верхнего отступа */
.proc__facts--first,
.after__tabs--first {
  margin-top: 0 !important;
}

.proc__facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin: 24px 0 0;
}

.proc__facts dt {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8fb0ff;
}

.proc__facts dd {
  margin: 6px 0 0;
  font-size: 15px;
  font-weight: 300;
  color: #ffffff;
}

.proc__text {
  max-width: 440px;
  margin-top: 20px;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--text-muted);
}

/* ---- Блок 7: длинные табы переносятся внутри плашки ---- */
.after__tabs--wrap li,
.after__side .after__tabs--wrap li {
  white-space: normal;
  border-radius: 18px;
}

/* ---- Блок 8: подзаголовок CTA ---- */
.cta .cta__header h3.cta-sub--test {
  max-width: 520px;
}

/* ==========================================================================
   Страница «Об Андрее Лосеве»
   Первый экран — как на главной (тексты слева, фото справа), плюс хлебные крошки
   ========================================================================== */

.text-accent {
  color: #c4d8ff;
}

/* крошки всегда над текстом первого экрана, вне потока (у этого hero контент прижат к низу) */
.hero.hero--person > .hero-crumbs {
  position: absolute;
  top: 140px;
  margin-bottom: 0;
}

.hero--person .hero__tagline {
  margin-bottom: 28px;
}

@media (max-width: 849px) {
  /* как на продуктовых страницах: ~60px под меню */
  .hero.hero--person > .hero-crumbs {
    top: 144px;
  }
  /* место под крошки в верхней части плашки — если текст не помещается и плашка растёт */
  .hero--person .hero__left {
    padding-top: 116px;
  }
}

@media (max-width: 640px) {
  .hero.hero--person > .hero-crumbs {
    top: 128px;
  }
  .hero--person .hero__left {
    padding-top: 100px;
  }
}

/* ---- общие заголовки блоков страницы ---- */
.synth__header,
.principles__header,
.media__header,
.formats__header {
  max-width: 870px;
}

.principles__header h3,
.media__header h3,
.formats__header h3 {
  max-width: 680px;
  margin-top: 18px;
  font-size: 14px;
  font-weight: 200;
  color: #ffffff;
}

/* ---- Блок 2: акцентная фраза и цифры ---- */
.credo__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.credo__quote {
  color: #ffffff;
  font-size: 34px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.credo__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid rgba(140, 165, 255, 0.14);
  border-left: 1px solid rgba(140, 165, 255, 0.14);
}

.credo__stat {
  padding: 28px 28px 32px;
  border-right: 1px solid rgba(140, 165, 255, 0.14);
  border-bottom: 1px solid rgba(140, 165, 255, 0.14);
}

.credo__value {
  display: block;
  font-size: 72px;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #c4d8ff;
}

.credo__label {
  display: block;
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.35;
  color: var(--text-muted);
}

/* десктоп: цифры — от центральной линии экрана до правого края сетки и сразу
   от нижней линии первого экрана (без отступа сверху); фраза — слева, по центру цифр */
@media (min-width: 901px) {
  .credo.section {
    padding-top: 0;
  }
  .credo__grid {
    gap: 0;
  }
  .credo__quote {
    padding-right: 64px;
  }
  .credo__stats {
    border-top: 0; /* верхняя линия — это нижняя граница первого экрана */
  }
  .credo__stat {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 190px;
  }
}

@media (max-width: 900px) {
  .credo__grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

@media (max-width: 640px) {
  .credo__quote {
    font-size: 24px;
  }
  .credo__stat {
    padding: 20px 16px 24px;
  }
  .credo__value {
    font-size: 52px;
  }
  .credo__label {
    font-size: 11px;
  }
}

/* ---- Блок 3: шкала — компонент «Этапы» (.stages); главный вывод выделен ---- */
.stage__text--conclusion {
  font-size: 14px; /* как у текстов остальных этапов */
  font-style: italic;
  line-height: 1.55;
  color: #c4d8ff;
}


/* ---- Блок 4: схема — по центру рифлёная карточка с заголовком и логотипом,
   вокруг три карточки (справа, снизу, слева); от каждой к центру тонкая линия,
   по прокрутке по линии к центру едет белый шарик (см. [data-synth] в main.js) ---- */
.synth-scheme {
  --gap-x: 72px;
  --gap-y: 64px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: var(--gap-x);
  row-gap: var(--gap-y);
  align-items: center; /* карточки — по высоте содержимого, отступы сверху и снизу равные */
}

/* центральная карточка — как в «Почему Saints» на главной */
.synth-scheme__center {
  position: relative;
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 48px 28px; /* центральная — немного выше боковых */
  border: 1px solid rgba(140, 165, 255, 0.2);
  border-radius: 28px;
  text-align: center;
  background:
    repeating-linear-gradient(90deg, rgba(150, 180, 255, 0.08) 0px, rgba(150, 180, 255, 0.08) 1px, rgba(150, 180, 255, 0) 1px, rgba(150, 180, 255, 0) 8px),
    linear-gradient(180deg, rgba(10, 20, 55, 0.55) 0%, rgba(5, 10, 30, 0.7) 100%);
}

.synth-scheme__mark {
  width: 72px;
  height: 72px;
  filter: drop-shadow(0 0 24px rgba(0, 85, 255, 0.45));
}

/* логотип с надписью — как на плашке кейса HRBP */
.synth-scheme__brand {
  justify-content: center;
}

.synth-scheme__title {
  max-width: 300px;
  font-size: 22px;
  font-weight: 400;
  line-height: 1.3;
  color: #ffffff;
}

.synth-scheme__corner {
  position: absolute;
  right: 24px;
  bottom: 20px;
  font-size: 11px;
  font-weight: 300;
  color: #ffffff;
}

.synth-card {
  position: relative;
  width: 100%;
  max-width: 340px;
  padding: 28px 28px 25px; /* снизу чуть меньше: у строки текста свой запас под буквами */
  border: 1px solid rgba(140, 165, 255, 0.14);
  border-radius: var(--radius-md);
  background: rgba(10, 20, 55, 0.4);
}

.synth-card--right { grid-column: 3; grid-row: 1; justify-self: start; }
.synth-card--left { grid-column: 1; grid-row: 1; justify-self: end; }
.synth-card--bottom { grid-column: 2; grid-row: 2; justify-self: center; }

/* линия от карточки к центральной; шарик едет по ней к центру (--p от 0 до 1) */
.synth-card__line {
  position: absolute;
  background: rgba(140, 165, 255, 0.3);
  pointer-events: none;
}

.synth-card__ball {
  position: absolute;
  width: 7px;
  height: 7px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 10px rgba(196, 216, 255, 0.9);
}

.synth-card--right .synth-card__line {
  top: 50%;
  right: 100%;
  width: var(--gap-x);
  height: 1px;
}
.synth-card--right .synth-card__ball { top: 0; left: calc(100% - var(--p, 0) * 100%); }

.synth-card--left .synth-card__line {
  top: 50%;
  left: 100%;
  width: var(--gap-x);
  height: 1px;
}
.synth-card--left .synth-card__ball { top: 0; left: calc(var(--p, 0) * 100%); }

.synth-card--bottom .synth-card__line {
  bottom: 100%;
  left: 50%;
  width: 1px;
  height: var(--gap-y);
}
.synth-card--bottom .synth-card__ball { left: 0; top: calc(100% - var(--p, 0) * 100%); }

.synth-card__icon {
  display: flex;
  color: #c4d8ff;
}

.synth-card__icon svg {
  width: 28px;
  height: 28px;
}

.synth-card__title {
  margin-top: 24px;
  font-size: 18px;
  font-weight: 300;
  line-height: 28px;
  color: #ffffff;
}

.synth-card__text {
  margin-top: 10px;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.55;
  color: #a7a7ad;
}

/* до 1100px — схема уже: центральная карточка и зазоры меньше */
@media (max-width: 1100px) {
  .synth-scheme {
    --gap-x: 40px;
    grid-template-columns: minmax(0, 1fr) 300px minmax(0, 1fr);
  }
  .synth-scheme__center {
    padding: 40px 22px;
  }
  .synth-scheme__title {
    font-size: 19px;
  }
  .synth-card {
    padding: 22px 22px 19px;
  }
}

/* узкие экраны: центральная карточка сверху, под ней карточки цепочкой;
   линия от каждой карточки идёт вверх, к предыдущей, шарик по ней едет вниз */
@media (max-width: 900px) {
  .synth-scheme {
    --gap-y: 48px;
    grid-template-columns: 1fr;
    grid-template-rows: none;
    justify-items: center;
  }
  .synth-scheme__center,
  .synth-card--right,
  .synth-card--left,
  .synth-card--bottom {
    grid-column: 1;
    grid-row: auto;
    justify-self: center;
    width: 100%;
    max-width: 420px;
  }
  /* центральная карточка: логотип и заголовок — по левому краю, как текст в карточках под ней */
  .synth-scheme__center {
    align-items: flex-start;
    text-align: left;
  }
  .synth-scheme__brand {
    justify-content: flex-start;
  }
  .synth-scheme__title {
    max-width: 200px;
  }
  .synth-card--right .synth-card__line,
  .synth-card--left .synth-card__line {
    top: auto;
    right: auto;
    bottom: 100%;
    left: 50%;
    width: 1px;
    height: var(--gap-y);
  }
  /* шарики едут вниз — каждый к своей карточке */
  .synth-card--right .synth-card__ball,
  .synth-card--left .synth-card__ball,
  .synth-card--bottom .synth-card__ball {
    left: 0;
    top: calc(var(--p, 0) * 100%);
  }
}

/* ---- Блок 5: слева «Убеждения» на всю высоту, справа сверху «Личные правила»,
   под ними — вывод на рифлёном стекле с шаром (как плашки «Для кого» на главной) ---- */
.principles__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr;
  margin-top: 48px;
  border: 1px solid rgba(140, 165, 255, 0.14);
  border-radius: var(--radius-md);
}

/* без overflow: hidden — шар должен выглядывать из-под стекла за край блока;
   скругления — у самих карточек в углах */
.principles__col--beliefs { border-radius: var(--radius-md) 0 0 var(--radius-md); }
.principles__col--beliefs + .principles__col { border-radius: 0 var(--radius-md) 0 0; }
.principles__glass,
.principles__glass .signals__footer-pane { border-radius: 0 0 var(--radius-md) 0; }

/* общие линии: одна рамка снаружи, внутри — вертикаль и горизонталь */
.principles__col {
  padding: 32px 36px 36px;
  background: rgba(10, 20, 55, 0.4);
}

.principles__col--beliefs {
  grid-row: 1 / 3;
  border-right: 1px solid rgba(140, 165, 255, 0.14);
}

.principles__col--beliefs + .principles__col {
  border-bottom: 1px solid rgba(140, 165, 255, 0.14);
}

.principles__glass .signals__footer-pane {
  border: 0;
}

.principles__label {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #a7a7ad;
}

.principles__list {
  display: grid;
  gap: 16px;
  margin-top: 22px;
}

.principles__list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.5;
}

.principles__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 21px;
  height: 21px;
  border-radius: 50%;
}

.principles__icon svg {
  width: 11px;
  height: 11px;
}

/* тексты обеих карточек — одного цвета и начертания */
.principles__list li {
  color: rgba(255, 255, 255, 0.86);
}

/* убеждения — пункты чуть свободнее */
.principles__list--beliefs {
  gap: 24px;
}

/* убеждения — голубой плюс в синем круге */

.principles__list--beliefs .principles__icon {
  border: 1px solid rgba(95, 140, 255, 0.6);
  background: rgba(0, 85, 255, 0.18);
  color: #8fb0ff;
}

/* правила — красная галочка */
.principles__list--rules .principles__icon {
  border: 1px solid rgba(255, 77, 77, 0.35);
  background: rgba(255, 77, 77, 0.08);
  color: var(--danger);
}

/* вывод — на рифлёном стекле, под стеклом плавает шар */
.principles__glass {
  position: relative;
  display: flex;
  align-items: center;
  padding: 32px 36px;
}

/* шар крупнее плашки — в нижних точках пути выглядывает из-под стекла снизу */
.principles__glass .signals__footer-ball {
  width: 140px;
  height: 140px;
  margin: -70px 0 0 -70px;
  animation-name: principles-ball-drift;
}

@keyframes principles-ball-drift {
  0% { left: 70%; top: 60%; }
  50% { left: 82%; top: 95%; }
  100% { left: 92%; top: 62%; }
}

.principles__conclusion {
  position: relative;
  z-index: 3;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.35;
  color: #ffffff;
}

@media (max-width: 900px) {
  .principles__cols {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    margin-top: 32px;
  }
  .principles__col--beliefs {
    grid-row: auto;
    border-right: 0;
    border-bottom: 1px solid rgba(140, 165, 255, 0.14);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
  }
  .principles__col--beliefs + .principles__col { border-radius: 0; }
  .principles__glass,
  .principles__glass .signals__footer-pane { border-radius: 0 0 var(--radius-md) var(--radius-md); }
  .principles__col,
  .principles__glass {
    padding: 28px 24px 32px;
  }
}

@media (max-width: 640px) {
  .principles__col,
  .principles__glass {
    padding: 24px 16px 28px;
  }
  .principles__list li {
    font-size: 13px;
  }
  .principles__conclusion {
    font-size: 16px;
  }
}

/* ---- Блок 6: карточки статей (собирает main.js из js/media-config.js) — горизонтальная
   галерея; стрелки справа над карточками, как в кейсах на главной ---- */
.media__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

.media__arrows {
  display: flex;
  flex: none;
}

.media__grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 30px) / 4); /* 4 карточки в ряд, остальные — прокруткой */
  gap: 10px;
  margin-top: 48px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.media__grid::-webkit-scrollbar {
  display: none;
}

.media__grid > * {
  scroll-snap-align: start;
}

.media-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 24px;
  border: 1px solid rgba(140, 165, 255, 0.14);
  border-radius: var(--radius-md);
  background: rgba(10, 20, 55, 0.4);
  transition: background-color 300ms var(--ease);
}

.media-card__logo {
  display: flex;
  align-items: center;
  height: 28px;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: #c4d8ff;
}

.media-card__logo img {
  max-height: 28px;
  max-width: 100%; /* широкие логотипы (Т-Бизнес секреты) — по ширине карточки */
  width: auto;
}

.media-card__title {
  margin-top: 20px;
  margin-bottom: 40px; /* место под кнопкой внизу */
  font-size: 14px;
  font-weight: 300;
  line-height: 1.5;
  color: #ffffff;
}

.media-card__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute; /* стрелка — в правом нижнем углу карточки */
  right: 24px;
  bottom: 24px;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(140, 165, 255, 0.22);
  border-radius: 50%;
  color: #a7a7ad;
  transition: color 300ms var(--ease), border-color 300ms var(--ease);
}

.media-card__arrow svg {
  width: 12px;
  height: 12px;
}

a.media-card:hover,
a.media-card:focus-visible {
  background: rgba(0, 85, 255, 0.07);
}

a.media-card:hover .media-card__arrow,
a.media-card:focus-visible .media-card__arrow {
  color: #ffffff;
  border-color: rgba(0, 85, 255, 0.6);
}

@media (max-width: 1024px) {
  .media__grid {
    grid-auto-columns: calc((100% - 10px) / 2);
  }
}

@media (max-width: 640px) {
  /* на телефоне видна ровно одна карточка на всю ширину, следующая — по стрелке или свайпу */
  .media__grid {
    grid-auto-columns: 100%;
    margin-top: 24px;
  }
  .media__head {
    flex-direction: column;
    align-items: stretch;
  }
  .media__arrows {
    justify-content: flex-end;
    margin-top: 20px;
  }
}

/* ---- Блок 7: «для кого» — карточки по центру друг под другом, иконка слева ---- */
.audience__stack {
  display: grid;
  gap: 16px;
  max-width: 640px;
  margin: 0 auto;
}

.audience-card {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 24px 28px;
  border: 1px solid rgba(140, 165, 255, 0.14);
  border-radius: 20px;
  background: rgba(10, 20, 55, 0.55);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.86);
}

.audience-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(0, 85, 255, 0.14);
  color: #8fb0ff;
}

.audience-card__icon svg {
  width: 24px;
  height: 24px;
}

@media (max-width: 640px) {
  .audience-card {
    gap: 16px;
    padding: 18px 18px;
    font-size: 14px;
  }
  .audience-card__icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
  }
}

/* ---- Блок 8: форматы взаимодействия — три колонки с кнопками, общие линии ---- */
.formats {
  padding-bottom: var(--section-gap);
}

.formats__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 48px;
  border: 1px solid rgba(140, 165, 255, 0.14);
  border-radius: var(--radius-md);
}

/* общие линии: одна рамка вокруг, между карточками — по одной вертикали */
.format-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 200px;
  padding: 28px;
  background: rgba(10, 20, 55, 0.4);
}

.format-card + .format-card {
  border-left: 1px solid rgba(140, 165, 255, 0.14);
}

.format-card:first-child { border-radius: var(--radius-md) 0 0 var(--radius-md); }
.format-card:last-child { border-radius: 0 var(--radius-md) var(--radius-md) 0; }

/* третья — рифлёное стекло с шаром под ним */
.format-card--glass {
  background: none;
}

.format-card--glass .signals__footer-pane {
  border: 0;
  border-radius: inherit;
}

.format-card--glass .signals__footer-ball {
  animation-name: format-ball-drift;
}

@keyframes format-ball-drift {
  0% { left: 62%; top: 34%; }
  50% { left: 76%; top: 60%; }
  100% { left: 86%; top: 36%; }
}

.format-card--glass > :not(.signals__footer-ball):not(.signals__footer-pane) {
  position: relative;
  z-index: 3;
}

.format-card__index {
  font-size: 12px;
  font-weight: 300;
  color: #a7a7ad;
}

.format-card__text {
  max-width: 300px;
  margin: -18px 0 28px;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--text-muted);
}

.format-card__title {
  margin-bottom: 28px;
  font-size: 22px;
  font-weight: 300;
  line-height: 28px;
}

/* кнопки — у левого края карточки */
.format-card .btn {
  align-self: flex-start;
  height: 42px;
  box-sizing: border-box;
  margin-top: auto;
  padding: 12px 18px;
  border: 1px solid var(--border-strong);
  border-radius: 2px;
  font-size: 12px;
  background: transparent;
  color: var(--text);
}

.format-card .btn:hover {
  border-color: var(--accent);
  background: transparent;
  color: var(--accent-hover);
}

@media (max-width: 900px) {
  .formats__grid {
    grid-template-columns: 1fr;
    margin-top: 32px;
  }
  .format-card {
    min-height: 0;
  }
  .format-card + .format-card {
    border-left: 0;
    border-top: 1px solid rgba(140, 165, 255, 0.14);
  }
  .format-card:first-child { border-radius: var(--radius-md) var(--radius-md) 0 0; }
  .format-card:last-child { border-radius: 0 0 var(--radius-md) var(--radius-md); }
}

@media (max-width: 640px) {
  .format-card {
    padding: 48px 16px; /* сверху и снизу больше воздуха */
  }
  .format-card__title {
    font-size: 18px;
  }
}

/* «Об Андрее», hero: фото крупнее. Фото занимает правую половину — от центральной линии
   до подписи; верх кадра прозрачный, поэтому картинка может подниматься под шапку */
@media (min-width: 1101px) {
  .hero--person .hero__side {
    left: calc(50vw + 16px);
    right: calc(max(0px, (100vw - var(--max-width)) / 2) + var(--side-padding)); /* по правому краю сетки */
    width: auto;
    transform: none;
    justify-content: space-between;
  }
  .hero--person .hero__photo-card {
    display: flex;
    justify-content: center;
    flex: 1;
    min-width: 0;
    max-width: none;
    overflow: visible;
  }
  .hero--person .hero__photo-card-img {
    max-width: 100%;
    /* верх головы — ~50px под меню: голова в кадре начинается на ~12.7% высоты снимка,
       низ снимка — у низа первого экрана (высота экрана = 100vh) */
    max-height: min(calc((100vh - 122px) / 0.873), 900px);
  }
  /* подпись — поверх фото, у правого нижнего края (как на телефоне — у левого):
     так фото может занять всю правую половину */
  .hero--person .hero__photo-caption {
    position: absolute;
    right: 0;
    bottom: 40px;
    padding-bottom: 0;
    text-align: right;
    text-shadow: 0 1px 12px rgba(2, 4, 9, 0.8);
  }
}

@media (min-width: 850px) and (max-width: 1100px) {
  /* фото — от центральной линии до правого края, подпись поверх фото */
  .hero--person .hero__photo-card {
    max-width: calc(50vw - var(--side-padding) - 16px);
  }
  .hero--person .hero__photo-card-img {
    max-width: 100%;
    max-height: calc((100vh - 124px) * 1.15);
  }
  .hero--person .hero__photo-caption {
    position: absolute;
    right: 0;
    bottom: 40px;
    padding-bottom: 0;
    text-align: right;
    text-shadow: 0 1px 12px rgba(2, 4, 9, 0.8);
  }
}

@media (max-width: 849px) {
  .hero--person .hero__photo-card-img {
    max-height: 440px;
  }
}

/* «Об Андрее», hero: подзаголовок — не шире заголовка */
.hero--person .hero__tagline--person {
  max-width: 460px;
}

/* «Об Андрее», блок 2: подписи к цифрам — ровно в 2 строки (переносы в разметке);
   на узких ширинах ячейкам уменьшаем боковые поля, чтобы вторая строка помещалась */
@media (min-width: 901px) and (max-width: 1100px) {
  .credo__stat {
    padding-left: 16px;
    padding-right: 10px;
  }
}

@media (max-width: 640px) {
  .credo__stat {
    padding-left: 14px;
    padding-right: 8px;
  }
}

/* узкие телефоны: цифры тоже 2×2, ячейки компактнее, чтобы подписи оставались в 2 строки */
@media (max-width: 400px) {
  .credo__stat {
    padding: 18px 6px 20px 12px;
  }
  .credo__value {
    font-size: 44px;
  }
  .credo__label {
    font-size: 10.5px;
  }
}

/* до 374px подписи с заданными переносами не помещаются — переносим по ширине ячейки */
@media (max-width: 374px) {
  .credo__label br {
    display: none;
  }
}

/* «Об Андрее», блок 2 (десктоп): сетка цифр — от центральной линии до правого края экрана,
   две равные колонки (граница между ними — на 3/4 ширины экрана) */
@media (min-width: 901px) {
  .credo {
    overflow-x: clip;
  }
  .credo__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); /* широкая сетка цифр не раздвигает колонки */
  }
  .credo__stats {
    width: 50vw;
  }
  .credo__stat:nth-child(2n) {
    border-right: 0;
  }
}

/* «Об Андрее», блок 3: заголовок — слева, шкала с этапами — в правой половине экрана,
   верх шкалы — на уровне заголовка */
@media (min-width: 901px) {
  #model > .container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }
  #model .stages__header {
    padding-right: 64px;
  }
  #model .stages__timeline {
    --stages-index-col: 72px;
    --stages-body-gap: 48px;
    margin-top: 61px; /* верх — на уровне заголовка, а не надписи «Путь» над ним */
  }
}

/* «Об Андрее»: больше воздуха между шкалой этапов и схемой синтеза */
.synth.section {
  padding-top: 200px;
}

@media (max-width: 640px) {
  .synth.section {
    padding-top: 160px;
  }
}

/* «Об Андрее», медиа: стрелки галереи ярче и всегда одинаковые — неактивная не тускнеет */
.media__arrows .cases__arrow,
.media__arrows .cases__arrow:disabled {
  opacity: 1;
  color: #ffffff;
  border-color: rgba(196, 216, 255, 0.55);
}

.media__arrows .cases__arrow:disabled {
  cursor: default;
}

.media__arrows .cases__arrow:hover:not(:disabled) {
  color: #ffffff;
  border-color: var(--accent);
}

/* «Об Андрее», медиа: логотипы Т-Бизнес секретов и Lenta.ru — меньше остальных */
.media-card__logo img[src*="t-business-secrets"] {
  width: 146px;
  max-width: 100%;
  height: auto;
}

.media-card__logo img[src*="lenta"] {
  max-height: 14px;
}

/* ForPost (sevastopol.su) — на 10% меньше остальных */
.media-card__logo img[src*="sevastopol"] {
  max-height: 25px;
}

/* «Об Андрее», медиа: светлые плашки, тёмный текст, тёмные логотипы изданий */
.media-card {
  border-color: rgba(10, 20, 55, 0.08);
  background: #eef2fb;
}

.media-card__logo {
  color: #0a1437;
}

.media-card__title {
  color: #0a1437;
}

.media-card__arrow {
  border-color: rgba(10, 20, 55, 0.2);
  color: #4a5578;
}

a.media-card:hover,
a.media-card:focus-visible {
  background: #ffffff;
}

a.media-card:hover .media-card__arrow,
a.media-card:focus-visible .media-card__arrow {
  border-color: #0055ff;
  color: #0055ff;
}

/* «Об Андрее», блок «Для кого»: заголовок по центру над плашкой */
.audience__title {
  text-align: center;
}

.audience__title + .audience__stack {
  margin-top: 40px;
}

@media (max-width: 640px) {
  .audience__title {
    text-align: left;
  }
  .audience__title + .audience__stack {
    margin-top: 28px;
  }
}

/* «Об Андрее», форматы: первая кнопка — синяя, вторая — белая с тёмным текстом и иконкой,
   третья — контурная */
.format-card:nth-child(1) .btn {
  border-color: transparent;
  background: linear-gradient(180deg, rgba(0, 85, 255, 0.79) 50%, rgba(0, 85, 255, 1) 100%);
  color: #ffffff;
}

.format-card:nth-child(1) .btn:hover {
  border-color: transparent;
  background: linear-gradient(180deg, rgba(47, 107, 255, 0.79) 50%, rgba(47, 107, 255, 1) 100%);
  color: #ffffff;
}

.format-card:nth-child(2) .btn {
  border-color: #ffffff;
  background: #ffffff;
  color: #0a1437;
}

.format-card:nth-child(2) .btn:hover {
  border-color: #e4e8f5;
  background: #e4e8f5;
  color: #0a1437;
}

/* «Об Андрее», hero: строка заголовка не шире «Лосев Андрей Валерьевич:» (~12em) —
   иначе на средних ширинах вторая строка («…стратег по управлению,») торчит дальше первой */
.hero--person .hero__title {
  max-width: 12.6em;
}

/* ==========================================================================
   Страница «Кейсы» (keysy.html)
   ========================================================================== */

/* ---- Hero: «картотека прецедентов» — восемь карточек-кейсов по кругу вокруг ядра,
   под ними кольцо-основание; карточки по очереди загораются ---- */
.orbit--deck {
  --r: calc(var(--size) * 0.36);   /* радиус круга карточек */
  --w: calc(var(--size) * 0.204);  /* ширина карточки */
  --h: calc(var(--size) * 0.288);  /* высота карточки */
  animation-duration: 40s;
}

.orbit--deck .orbit__core {
  inset: 40.4%;
  animation-duration: 40s;
}

.deck__panel {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--w);
  height: var(--h);
  margin: calc(var(--h) / -2) 0 0 calc(var(--w) / -2);
  border: 1px solid rgba(196, 216, 255, 0.4);
  border-radius: calc(var(--size) * 0.019);
  background:
    repeating-linear-gradient(90deg, rgba(150, 180, 255, 0.1) 0px, rgba(150, 180, 255, 0.1) 1px, rgba(150, 180, 255, 0) 1px, rgba(150, 180, 255, 0) 6px),
    linear-gradient(180deg, rgba(30, 60, 150, 0.35) 0%, rgba(8, 16, 45, 0.55) 100%);
  box-shadow: 0 0 18px rgba(60, 110, 255, 0.22), inset 0 0 14px rgba(60, 110, 255, 0.15);
  transform: rotateY(calc(var(--i) * 45deg)) translateZ(var(--r));
  animation: deck-glow 8s ease-in-out infinite;
  animation-delay: calc(var(--i) * 1s - 8s);
}

/* «строки» на карточке: короткая — отрасль и размер, длинная — результат */
.deck__panel::before,
.deck__panel::after {
  content: '';
  position: absolute;
  left: 14%;
  height: 2px;
  border-radius: 2px;
  background: rgba(196, 216, 255, 0.55);
}

.deck__panel::before {
  top: 18%;
  width: 40%;
}

.deck__panel::after {
  top: 34%;
  width: 70%;
  box-shadow: 0 calc(var(--size) * 0.026) 0 rgba(196, 216, 255, 0.35);
}

@keyframes deck-glow {
  0%, 22%, 100% {
    border-color: rgba(196, 216, 255, 0.4);
    box-shadow: 0 0 18px rgba(60, 110, 255, 0.22), inset 0 0 14px rgba(60, 110, 255, 0.15);
  }
  10% {
    border-color: rgba(230, 238, 255, 0.95);
    box-shadow: 0 0 34px rgba(80, 130, 255, 0.6), inset 0 0 24px rgba(80, 130, 255, 0.4);
  }
}

/* кольцо-основание под карточками */
.deck__ring {
  position: absolute;
  inset: 2%;
  border: 1px solid rgba(196, 216, 255, 0.45);
  border-radius: 50%;
  box-shadow: 0 0 22px rgba(60, 110, 255, 0.28), inset 0 0 22px rgba(60, 110, 255, 0.18);
  transform: translateY(calc(var(--h) / 2 + var(--size) * 0.06)) rotateX(90deg);
}

@media (prefers-reduced-motion: reduce) {
  .deck__panel {
    animation: none;
  }
}

/* телефон: сцена ~40px под плашкой, от низа сцены до фильтров ~90px
   (у квадратной сцены пустые поля сверху и снизу — их убираем отрицательными отступами) */
@media (max-width: 849px) {
  .hero--product .hero-visual .orbit--deck {
    margin-top: calc(25px - var(--size) * 0.227);
    margin-bottom: calc(var(--size) * -0.013);
  }
}

/* ---- Блоки 2–3: фильтры над сеткой, сетка 3×2, пагинация ---- */
.catalog.section {
  padding-top: 96px;
}

.catalog__bar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

.catalog__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* неактивные теги приглушены; активный — светлый контур с голубым текстом */
.catalog__tag {
  padding: 9px 16px;
  font: inherit;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.3;
  color: rgba(196, 216, 255, 0.5);
  background: transparent;
  border: 1px solid rgba(140, 165, 255, 0.12);
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 250ms var(--ease), border-color 250ms var(--ease), color 250ms var(--ease);
}

.catalog__tag:hover {
  color: rgba(196, 216, 255, 0.8);
  border-color: rgba(140, 165, 255, 0.22);
}

.catalog__tag[aria-pressed="true"] {
  color: #c4d8ff;
  background: rgba(140, 165, 255, 0.06);
  border-color: rgba(140, 165, 255, 0.22);
}

/* выпадающий список отраслей — минималистичный, в тон тегам */
.catalog__select {
  position: relative;
  flex: none;
}

.catalog__select select {
  appearance: none;
  -webkit-appearance: none;
  min-width: 220px;
  padding: 9px 40px 9px 16px;
  font: inherit;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.3;
  color: #ffffff;
  background: transparent;
  border: 1px solid rgba(140, 165, 255, 0.22);
  border-radius: 999px;
  cursor: pointer;
}

.catalog__select select:hover,
.catalog__select select:focus-visible {
  border-color: rgba(196, 216, 255, 0.55);
  outline: none;
}

.catalog__select option {
  color: #0a1437;
  background: #ffffff;
}

.catalog__select svg {
  position: absolute;
  top: 50%;
  right: 16px;
  width: 10px;
  height: 6px;
  margin-top: -3px;
  color: #c4d8ff;
  pointer-events: none;
}

.catalog__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 40px;
}

.catalog__grid > .case-card {
  flex: none;
  cursor: pointer;
}

.catalog__grid > .case-card:focus-visible {
  outline: 1px solid rgba(196, 216, 255, 0.7);
  outline-offset: 3px;
}

/* кнопки нет — у результата не нужен нижний отступ до неё */
.catalog__grid .case-card__result {
  margin-bottom: 0;
}

.catalog__grid > .case-card[hidden] {
  display: none;
}

.catalog__empty {
  margin-top: 40px;
  font-size: 15px;
  color: var(--text-muted);
}

.catalog__pages {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 40px;
}

.catalog__pages[hidden] {
  display: none;
}

/* номера страниц — как теги фильтра: текущая — светлый контур, остальные приглушены */
.catalog__page {
  min-width: 36px;
  height: 36px;
  padding: 0 6px;
  font: inherit;
  font-size: 13px;
  font-weight: 300;
  color: rgba(196, 216, 255, 0.5);
  background: transparent;
  border: 1px solid rgba(140, 165, 255, 0.12);
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 250ms var(--ease), border-color 250ms var(--ease), color 250ms var(--ease);
}

.catalog__page:hover {
  color: rgba(196, 216, 255, 0.8);
  border-color: rgba(140, 165, 255, 0.22);
}

.catalog__page[aria-current="page"] {
  color: #c4d8ff;
  background: rgba(140, 165, 255, 0.06);
  border-color: rgba(140, 165, 255, 0.22);
}

/* стрелки — без кругов, только шеврон */
.catalog__pages .cases__arrow {
  color: #c4d8ff;
  background: transparent;
  border: 0;
}

.catalog__pages .cases__arrow:hover:not(:disabled) {
  color: #ffffff;
  background: transparent;
}

/* на первой странице нет стрелки назад, на последней — вперёд; место под стрелкой
   сохраняется, чтобы номера страниц не сдвигались */
.catalog__pages .cases__arrow:disabled {
  visibility: hidden;
}

@media (max-width: 1024px) {
  .catalog__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .catalog__bar {
    flex-direction: column;
  }
}

@media (max-width: 640px) {
  .catalog.section {
    padding-top: 72px;
  }
  .catalog__grid {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 28px;
  }
  .catalog__select,
  .catalog__select select {
    width: 100%;
  }
  .catalog__grid .case-card__result {
    font-size: 16px;
  }
}

/* «Кейсы», hero на телефоне и узком планшете: заголовок не шире «Практика организационных
   изменений:» — «кейсы…» уходит на следующую строку; подзаголовок уже; кнопка по ширине текста */
@media (max-width: 849px) {
  .hero--deck .hero__title {
    max-width: 19em;
  }
  .hero--deck .hero__tagline {
    max-width: 600px; /* в 2 строки */
  }
}

@media (min-width: 460px) and (max-width: 849px) {
  .hero--deck .hero__actions .btn {
    flex: none;
    width: auto;
  }
}

@media (min-width: 850px) and (max-width: 1024px) {
  .hero--deck .hero__actions .btn {
    flex: none;
  }
}

/* попап кейса — светлый, как карточки кейсов: светлый фон, тёмный текст (на всех страницах) */
.case-modal {
  background: #ffffff;
  border-color: rgba(10, 20, 55, 0.12);
  color: #0a1437;
}

.case-modal .case-modal__title {
  color: #0a1437;
}

.case-modal__eyebrow {
  color: #6b7085;
}

.case-modal__meta dd {
  color: #6b7085;
}

.case-modal__meta > div:not(:last-child)::after {
  background: var(--accent);
}

.case-modal__block h3,
.case-modal__insight h3 {
  color: var(--accent);
}

.case-modal__block p,
.case-modal__insight p,
.case-modal__block li {
  color: #2a3352;
}

.case-modal__block li::before {
  background: var(--accent);
}

.case-modal__insight {
  background: #eef3ff;
}

.case-modal .modal-close {
  color: #4a5578;
  border-color: rgba(10, 20, 55, 0.2);
}

.case-modal .modal-close:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.case-modal .modal-close:focus {
  outline: none;
}

.case-modal .modal-close:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
}

/* ==========================================================================
   Страница «Отзывы» (otzyvy.html)
   ========================================================================== */

/* ---- Hero: «голоса клиентов» — плашки-отзывы с кавычками поднимаются по спирали
   вокруг светящейся оси, по очереди загораются ---- */
.orbit--voices {
  --r: calc(var(--size) * 0.3);    /* радиус спирали */
  --step: calc(var(--size) * 0.08); /* подъём от плашки к плашке */
  --w: calc(var(--size) * 0.21);
  --h: calc(var(--size) * 0.12);
  animation-duration: 36s;
}

/* ось — всегда лицом к зрителю (вращается навстречу сцене) */
.voices__axis {
  position: absolute;
  top: 8%;
  bottom: 8%;
  left: 50%;
  width: 2px;
  margin-left: -1px;
  background: linear-gradient(180deg, rgba(120, 160, 255, 0) 0%, rgba(160, 190, 255, 0.9) 50%, rgba(120, 160, 255, 0) 100%);
  box-shadow: 0 0 18px rgba(80, 130, 255, 0.7);
  animation: orbit-core 36s linear infinite;
}

/* узел — точка на спирали; сама плашка внутри вращается навстречу сцене и всегда
   смотрит на зрителя (как шарики на орбитах), поэтому кавычки не отражаются зеркально */
.voices__node {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  transform: translateY(calc((3.5 - var(--i)) * var(--step))) rotateY(calc(var(--i) * 45deg)) translateZ(var(--r)) rotateY(calc(var(--i) * -45deg));
}

.voices__plate {
  position: absolute;
  top: calc(var(--h) / -2);
  left: calc(var(--w) / -2);
  width: var(--w);
  height: var(--h);
  border: 1px solid rgba(196, 216, 255, 0.4);
  border-radius: calc(var(--size) * 0.018);
  background:
    repeating-linear-gradient(90deg, rgba(150, 180, 255, 0.1) 0px, rgba(150, 180, 255, 0.1) 1px, rgba(150, 180, 255, 0) 1px, rgba(150, 180, 255, 0) 6px),
    linear-gradient(180deg, rgba(22, 44, 115, 0.92) 0%, rgba(8, 16, 45, 0.95) 100%);
  box-shadow: 0 0 18px rgba(60, 110, 255, 0.22), inset 0 0 14px rgba(60, 110, 255, 0.15);
  animation: orbit-core 36s linear infinite, deck-glow 8s ease-in-out infinite;
  animation-delay: 0s, calc(var(--i) * 1s - 8s);
}

/* «строки» отзыва справа от кавычек */
.voices__plate::before,
.voices__plate::after {
  content: '';
  position: absolute;
  left: 34%;
  height: 2px;
  border-radius: 2px;
  background: rgba(196, 216, 255, 0.5);
}

.voices__plate::before {
  top: 34%;
  width: 52%;
}

.voices__plate::after {
  top: 56%;
  width: 40%;
  box-shadow: 0 calc(var(--size) * 0.022) 0 rgba(196, 216, 255, 0.3);
}

.voices__mark {
  position: absolute;
  top: 12%;
  left: 10%;
  font-size: calc(var(--size) * 0.075);
  font-family: Georgia, 'Times New Roman', serif;
  line-height: 1;
  color: #8fb0ff;
  text-shadow: 0 0 12px rgba(80, 130, 255, 0.7);
}

@media (prefers-reduced-motion: reduce) {
  .voices__plate,
  .voices__axis {
    animation: none;
  }
}

/* телефон: сцена ~40px под плашкой, до слайдера ~90px */
@media (max-width: 849px) {
  /* спираль ниже, чем шире: сцена по высоте — только под плашки, без пустых полей */
  .hero--product .hero-visual .orbit--voices {
    height: calc(var(--size) * 0.72);
    /* верхние плашки при вращении поднимаются почти до плашки с текстом — опускаем сцену,
       чтобы в самой высокой точке до плашки оставалось ~40px */
    margin-top: calc(71px - var(--size) * 0.05);
  }
  /* наклон сцены выдвигает нижние плашки вперёд и вниз — запас под ними, чтобы не обрезались */
  .hero--voices .hero-visual {
    padding-bottom: calc(var(--size) * 0.1);
  }
  /* плашки спирали вращаются и нижняя то ближе, то дальше — отступ берём по нижнему положению */
  .hero--voices + .reviews.section {
    padding-top: 12px;
  }
}

/* ---- Блок 2: слайдер отзывов, 3 карточки на экране ---- */
/* заголовка у блока нет — слайдер сразу под первым экраном, без отступа слайдера сверху */
.reviews.section {
  padding-top: 72px;
}

.reviews .cases__slider {
  margin-top: 0;
}

.review-card {
  cursor: default;
}

.review-card__quote {
  display: block;
  width: 20px;
  height: 15px;
  color: var(--accent);
}

.review-card__quote svg {
  display: block;
  width: 100%;
  height: 100%;
}

.review-card__text {
  margin: 16px 0 28px;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.6;
  color: #2a3352;
}

.review-card__foot {
  min-height: 96px; /* линия над автором — на одной высоте в карточках с письмом и без */
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid rgba(10, 20, 55, 0.1);
}

.review-card__name {
  font-size: 16px;
  font-weight: 400;
  color: #0a1437;
}

.review-card__role {
  margin-top: 4px;
  font-size: 12px;
  font-weight: 300;
  line-height: 1.4;
  color: #6b7085;
}

/* миниатюра письма — приглушённая, по наведению проявляется */
.review-card__letter {
  flex: none;
  width: 52px;
  padding: 0;
  background: none;
  border: 1px solid rgba(10, 20, 55, 0.14);
  border-radius: 2px;
  box-shadow: 0 4px 12px rgba(10, 20, 55, 0.12);
  cursor: zoom-in;
  transition: transform 250ms var(--ease), box-shadow 250ms var(--ease);
}

.review-card__letter img {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0.55;
  filter: grayscale(1) sepia(0.15) hue-rotate(190deg);
  transition: opacity 250ms var(--ease), filter 250ms var(--ease);
}

.review-card__letter:hover,
.review-card__letter:focus-visible {
  transform: scale(1.06);
  box-shadow: 0 6px 18px rgba(10, 20, 55, 0.2);
  outline: none;
}

.review-card__letter:hover img,
.review-card__letter:focus-visible img {
  opacity: 1;
  filter: none;
}

/* ---- Лайтбокс письма ---- */
.lightbox {
  align-items: center;
}

.lightbox__frame {
  position: relative;
  margin: auto 0;
  max-width: min(720px, 100%);
}

.lightbox__frame img {
  display: block;
  width: 100%;
  max-height: calc(100vh - 80px);
  object-fit: contain;
  background: #ffffff;
  border-radius: 4px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}

.lightbox__close {
  top: 12px;
  right: 12px;
  z-index: 1;
  color: #4a5578;
  background: #ffffff;
  border-color: rgba(10, 20, 55, 0.2);
}

.lightbox__close:hover {
  color: var(--accent);
  border-color: var(--accent);
}

/* ---- Блок 3: под формой — Telegram ---- */
.cta__tg {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 20px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(140, 165, 255, 0.14);
}

.cta__tg p {
  font-size: 14px;
  font-weight: 300;
  color: var(--text-muted);
}

.cta__tg .btn {
  gap: 8px;
  font-size: 12px;
  padding: 12px 18px;
  border-radius: 2px;
}

.cta__tg .btn svg {
  width: 16px;
  height: 16px;
}

@media (max-width: 640px) {
  .reviews.section {
    padding-top: 72px;
  }
}

/* «Отзывы», hero (десктоп): заголовок не шире «Опыт трансформации:» — «как…» переносится на вторую строку */
.hero--voices .hero__title {
  max-width: 11.2em;
}

/* подзаголовок: «с которыми…» — на второй строке; кнопка на телефоне/планшете — по ширине текста */
.hero--voices .hero__tagline {
  max-width: 24em;
}

@media (min-width: 460px) and (max-width: 849px) {
  .hero--voices .hero__actions .btn {
    flex: none;
    width: auto;
  }
}

/* «Отзывы», стрелки слайдера: яркие и одинаковые, в том числе у края (как в «Медиа») */
.reviews__slider .cases__arrow,
.reviews__slider .cases__arrow:disabled {
  opacity: 1;
  color: #ffffff;
  border-color: rgba(196, 216, 255, 0.55);
}

.reviews__slider .cases__arrow:disabled {
  cursor: default;
}

.reviews__slider .cases__arrow:hover:not(:disabled) {
  color: #ffffff;
  border-color: var(--accent);
}

/* стрелки — над карточками, справа */
.reviews__slider .cases__bar,
.reviews__slider.is-scrollable .cases__bar {
  order: 0;
  margin: 0 0 24px;
}

@media (min-width: 850px) and (max-width: 1024px) {
  .hero--voices .hero__actions .btn {
    flex: none;
  }
}

/* ==========================================================================
   Страница «Диагностика бизнеса» (diagnostika.html)
   ========================================================================== */

/* ---- Hero: «срез системы» — матовый тёмно-синий куб из трёх плит. Сцена плавно
   покачивается (не вращается целиком — освещение граней остаётся правдоподобным),
   средняя плита выдвигается вбок и возвращается. Без свечения и мелких деталей ---- */
.orbit--slabs {
  --w: calc(var(--size) * 0.44);  /* ребро куба */
  --h: calc(var(--w) * 0.3);      /* толщина плиты */
  --gap: calc(var(--w) * 0.035);  /* зазор между плитами */
  animation: slabs-sway 16s ease-in-out infinite alternate;
}

/* свечение за сценой — едва заметное */
.hero--lattice .hero-visual::before {
  opacity: 0.35;
}

@keyframes slabs-sway {
  from { transform: rotateX(-22deg) rotateY(-52deg); }
  to { transform: rotateX(-22deg) rotateY(-22deg); }
}

.slab {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  transform: translateY(calc((var(--i) - 1) * (var(--h) + var(--gap))));
}

.slab--cut {
  animation: slab-cut 7s ease-in-out infinite;
}

/* средняя плита: пауза — выдвигается вперёд-вправо — пауза — возвращается */
@keyframes slab-cut {
  0%, 18% { transform: translate3d(0, 0, 0); }
  42%, 70% { transform: translate3d(calc(var(--w) * 0.42), 0, calc(var(--w) * 0.12)); }
  92%, 100% { transform: translate3d(0, 0, 0); }
}

.slab__face {
  position: absolute;
  border: 1px solid rgba(140, 165, 255, 0.1);
  /* матовая поверхность: лёгкий градиент без бликов */
  background: linear-gradient(160deg, var(--c1), var(--c2));
  backface-visibility: hidden;
}

.slab__face--front,
.slab__face--back,
.slab__face--left,
.slab__face--right {
  width: var(--w);
  height: var(--h);
  margin: calc(var(--h) / -2) 0 0 calc(var(--w) / -2);
}

.slab__face--top,
.slab__face--bottom {
  width: var(--w);
  height: var(--w);
  margin: calc(var(--w) / -2) 0 0 calc(var(--w) / -2);
}

/* свет сверху-слева: верх светлее всего, левая грань — средняя, правая — темнее */
.slab__face--top    { --c1: #2a4590; --c2: #1d3474; transform: rotateX(90deg) translateZ(calc(var(--h) / 2)); }
.slab__face--bottom { --c1: #070e26; --c2: #050a1c; transform: rotateX(-90deg) translateZ(calc(var(--h) / 2)); }
.slab__face--front  { --c1: #162a62; --c2: #0f1f4c; transform: translateZ(calc(var(--w) / 2)); }
.slab__face--back   { --c1: #0b1638; --c2: #08112c; transform: rotateY(180deg) translateZ(calc(var(--w) / 2)); }
.slab__face--left   { --c1: #1b3270; --c2: #132658; transform: rotateY(-90deg) translateZ(calc(var(--w) / 2)); }
.slab__face--right  { --c1: #0e1c46; --c2: #0a1536; transform: rotateY(90deg) translateZ(calc(var(--w) / 2)); }

@media (prefers-reduced-motion: reduce) {
  .orbit--slabs {
    animation: none;
    transform: rotateX(-22deg) rotateY(-38deg);
  }
  .slab--cut {
    animation: none;
    transform: translate3d(calc(var(--w) * 0.42), 0, calc(var(--w) * 0.12));
  }
}

/* телефон: сцена ~40px под плашкой, до следующего блока ~80px */
@media (max-width: 849px) {
  .hero--product .hero-visual .orbit--slabs {
    margin-top: calc(25px - var(--size) * 0.162);
    margin-bottom: calc(var(--size) * -0.1);
  }
  .hero--product .hero-visual .orbit--pyramid {
    --B: calc(var(--size) * 0.5);   /* на телефоне — прежний размер */
    --spread: 0.45;
    /* в разлёте слои уходят выше и ниже собранной пирамиды — запас сверху и снизу */
    margin-top: calc(35px - var(--size) * 0.162);
    margin-bottom: calc(var(--size) * -0.062);
  }
  .hero--lattice + .section {
    padding-top: 50px;
  }
}

/* ---- Блок 2: три шага — номер сверху, заголовок и описание внизу ---- */
.vectors__grid--steps .vector-card {
  min-height: 260px;
}

.vectors__grid--steps .vector-card__title {
  font-size: 18px;
}

.vectors__grid--steps .vector-card__desc {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.55;
}

/* ---- Блок 3: карточки «кому откажем» — крестик, заголовок и пояснение ---- */
.filter-card--titled {
  gap: 28px;
}

.filter-card__title {
  font-size: 17px;
  font-weight: 300;
  line-height: 1.35;
  color: #ffffff;
}

.filter-card--titled .filter-card__text {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-muted);
}

@media (max-width: 1024px) {
  .vectors__grid--steps {
    grid-template-columns: 1fr;
  }
  .vectors__grid--steps .vector-card {
    min-height: 0;
  }
}

@media (max-width: 900px) {
  .filter-card--titled {
    align-items: flex-start;
  }
}

/* ---- «Диагностика», блок 2: три шага лесенкой. Между карточками — тонкие линии
   с изломом, по ним при прокрутке катится шарик (как в блоке «Причины» на главной).
   Линии и путь шарика строятся в main.js ([data-stairs]) по реальным позициям карточек ---- */
.stairs {
  position: relative;
  margin-top: 48px;
}

.stairs__list {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 300px)); /* карточки узкие, как в «Причинах»; слева и справа — линии до краёв сетки */
  justify-content: center;
  column-gap: clamp(24px, 3vw, 40px);
  row-gap: 24px;
}

/* лесенка: каждая следующая карточка — правее и ниже предыдущей */
.stairs__card:nth-child(1) { grid-column: 1; grid-row: 1; }
.stairs__card:nth-child(2) { grid-column: 2; grid-row: 2; }
.stairs__card:nth-child(3) { grid-column: 3; grid-row: 3; }

/* полупрозрачные, как карточки «Причин»: шарик под ними виден размытым */
.stairs__card {
  padding: 24px 22px;
  border: 1px solid rgba(140, 165, 255, 0.14);
  border-radius: var(--radius-md);
  background: rgba(10, 20, 55, 0.4);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.stairs__card .vector-card__num {
  font-size: 12px;
}

.stairs__card .vector-card__title {
  margin-top: 18px;
  font-size: 16px;
}

.stairs__card .vector-card__desc {
  margin-top: 8px;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.5;
}

.stairs__line {
  position: absolute;
  z-index: 0;
  background: rgba(140, 165, 255, 0.45);
  pointer-events: none;
}

/* шарик — как в «Причинах»: над линиями, под карточкой размывается и светится сильнее */
.stairs__ball {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  width: 10px;
  height: 10px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #0055ff;
  box-shadow: 0 0 12px rgba(0, 85, 255, 0.8);
  pointer-events: none;
  transition: filter 200ms var(--ease), opacity 200ms var(--ease), transform 200ms var(--ease), box-shadow 200ms var(--ease);
  will-change: left, top;
}

.stairs__ball.is-blurred {
  transform: translate(-50%, -50%) scale(1.8);
  filter: blur(2.5px);
  opacity: 0.9;
  background: #2f6bff;
  box-shadow: 0 0 18px 4px rgba(47, 107, 255, 0.85);
}

/* планшет и телефон: карточки одним столбцом, линии вертикальные — сверху, между карточками и снизу */
@media (max-width: 900px) {
  /* карточки ниже от шапки блока; линия с шариком начинается в 40px под подзаголовком (main.js) */
  .stairs {
    margin-top: 104px;
  }
  /* «Диагностика»: линия с шариком уходит на 56px под последнюю карточку (main.js) — следующий блок
     начинается в обычных 108px уже от конца линии */
  .page-diag #etapy + .section {
    padding-top: calc(var(--section-gap) + 56px);
  }
  .stairs__list {
    grid-template-columns: 1fr;
    row-gap: 48px;
  }
  .stairs__card:nth-child(n) {
    grid-column: 1;
    grid-row: auto;
  }
}

@media (max-width: 640px) {
  .stairs__card {
    padding: 22px;
  }
  .stairs__card .vector-card__title {
    margin-top: 20px;
  }
}

/* «Диагностика», архитектура: подзаголовок уже — переносится по ширине */
#etapy .section-head h3 {
  max-width: 520px;
}

/* «Диагностика», заявка: шар дрейфует у левого края плашки и выглядывает из-под неё слева */
#anketa .cta__form .signals__footer-ball {
  animation-name: diag-ball-drift;
}

@keyframes diag-ball-drift {
  0% { left: 4%; top: 30%; }
  50% { left: -2%; top: 52%; }
  100% { left: 3%; top: 72%; }
}

@media (prefers-reduced-motion: reduce) {
  #anketa .cta__form .signals__footer-ball {
    animation: none;
    left: 0;
    top: 50%;
  }
}

/* ==========================================================================
   3D «Пирамида»: гладкая тёмно-синяя пирамида, разрезанная на слои (усечённые
   пирамиды + вершина). Слои собираются из разлёта в одну фигуру, держатся и снова
   расходятся. Размеры граней посчитаны скриптом (gen_pyr.py) в долях --B
   ========================================================================== */
.orbit--pyramid {
  --B: calc(var(--size) * 0.62);   /* ширина основания */
  --spread: 0.45;                  /* разлёт слоёв — в пределах правой половины экрана */
  animation: slabs-sway 18s ease-in-out infinite alternate;
}

.pyr2__layer {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  animation: pyr2-gather 9s ease-in-out infinite;
}

/* --spread — насколько далеко разлетаются слои (на телефоне меньше, чтобы не заезжали на текст) */
@keyframes pyr2-gather {
  0%, 12% { transform: translate3d(calc(var(--dx) * var(--spread, 1)), calc(var(--dy) * var(--spread, 1)), calc(var(--dz) * var(--spread, 1))) rotateY(-20deg); }
  40%, 72% { transform: translate3d(0, 0, 0) rotateY(0deg); }
  100% { transform: translate3d(calc(var(--dx) * var(--spread, 1)), calc(var(--dy) * var(--spread, 1)), calc(var(--dz) * var(--spread, 1))) rotateY(-20deg); }
}

.pyr2__side,
.pyr2__top {
  position: absolute;
}

.pyr2__side {
  transform-origin: 50% 100%;
  /* форма трапеции — готовая SVG-картинка, а не clip-path: clip-path на 24 гранях
     в движении заставлял браузер перерисовывать их каждый кадр, и страница тормозила */
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

/* верх слоя — светлая матовая полоса, как на референсе */
.pyr2__top {
  background: linear-gradient(160deg, #2c4894, #213b7e);
  transform: rotateX(90deg);
}

.pyr2__side--front { background: linear-gradient(170deg, #1c3474, #12265a); transform: rotateY(0deg) translateZ(var(--hw)) rotateX(31.37deg); }
.pyr2__side--right { background: linear-gradient(170deg, #10204e, #0b173c); transform: rotateY(90deg) translateZ(var(--hw)) rotateX(31.37deg); }
.pyr2__side--back { background: linear-gradient(170deg, #0b1638, #08112c); transform: rotateY(180deg) translateZ(var(--hw)) rotateX(31.37deg); }
.pyr2__side--left { background: linear-gradient(170deg, #25408a, #1a3070); transform: rotateY(-90deg) translateZ(var(--hw)) rotateX(31.37deg); }

.pyr2__layer--1 { --dx: calc(var(--B) * -0.6200); --dy: calc(var(--B) * 0.3000); --dz: calc(var(--B) * 0.2500); animation-delay: -0.00s; }
.pyr2__layer--1 .pyr2__side { left: calc(var(--B) * -0.5000); top: calc(var(--B) * 0.2928); width: calc(var(--B) * 1.0000); height: calc(var(--B) * 0.1172); --hw: calc(var(--B) * 0.5000); }
.pyr2__layer--1 .pyr2__side--front { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' preserveAspectRatio='none'><defs><linearGradient id='g' x1='0' y1='0' x2='0.18' y2='1'><stop offset='0' stop-color='%231c3474'/><stop offset='1' stop-color='%2312265a'/></linearGradient></defs><polygon points='61.0,0 939.0,0 1000,1000 0,1000' fill='url(%23g)'/></svg>"); }
.pyr2__layer--1 .pyr2__side--right { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' preserveAspectRatio='none'><defs><linearGradient id='g' x1='0' y1='0' x2='0.18' y2='1'><stop offset='0' stop-color='%2310204e'/><stop offset='1' stop-color='%230b173c'/></linearGradient></defs><polygon points='61.0,0 939.0,0 1000,1000 0,1000' fill='url(%23g)'/></svg>"); }
.pyr2__layer--1 .pyr2__side--back { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' preserveAspectRatio='none'><defs><linearGradient id='g' x1='0' y1='0' x2='0.18' y2='1'><stop offset='0' stop-color='%230b1638'/><stop offset='1' stop-color='%2308112c'/></linearGradient></defs><polygon points='61.0,0 939.0,0 1000,1000 0,1000' fill='url(%23g)'/></svg>"); }
.pyr2__layer--1 .pyr2__side--left { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' preserveAspectRatio='none'><defs><linearGradient id='g' x1='0' y1='0' x2='0.18' y2='1'><stop offset='0' stop-color='%2325408a'/><stop offset='1' stop-color='%231a3070'/></linearGradient></defs><polygon points='61.0,0 939.0,0 1000,1000 0,1000' fill='url(%23g)'/></svg>"); }
.pyr2__layer--1 .pyr2__top { left: calc(var(--B) * -0.4390); top: calc(var(--B) * -0.1290); width: calc(var(--B) * 0.8780); height: calc(var(--B) * 0.8780); }
.pyr2__layer--2 { --dx: calc(var(--B) * 0.6600); --dy: calc(var(--B) * 0.1200); --dz: calc(var(--B) * -0.3000); animation-delay: -0.18s; }
.pyr2__layer--2 .pyr2__side { left: calc(var(--B) * -0.4250); top: calc(var(--B) * 0.1698); width: calc(var(--B) * 0.8500); height: calc(var(--B) * 0.1172); --hw: calc(var(--B) * 0.4250); }
.pyr2__layer--2 .pyr2__side--front { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' preserveAspectRatio='none'><defs><linearGradient id='g' x1='0' y1='0' x2='0.18' y2='1'><stop offset='0' stop-color='%231c3474'/><stop offset='1' stop-color='%2312265a'/></linearGradient></defs><polygon points='71.8,0 928.2,0 1000,1000 0,1000' fill='url(%23g)'/></svg>"); }
.pyr2__layer--2 .pyr2__side--right { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' preserveAspectRatio='none'><defs><linearGradient id='g' x1='0' y1='0' x2='0.18' y2='1'><stop offset='0' stop-color='%2310204e'/><stop offset='1' stop-color='%230b173c'/></linearGradient></defs><polygon points='71.8,0 928.2,0 1000,1000 0,1000' fill='url(%23g)'/></svg>"); }
.pyr2__layer--2 .pyr2__side--back { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' preserveAspectRatio='none'><defs><linearGradient id='g' x1='0' y1='0' x2='0.18' y2='1'><stop offset='0' stop-color='%230b1638'/><stop offset='1' stop-color='%2308112c'/></linearGradient></defs><polygon points='71.8,0 928.2,0 1000,1000 0,1000' fill='url(%23g)'/></svg>"); }
.pyr2__layer--2 .pyr2__side--left { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' preserveAspectRatio='none'><defs><linearGradient id='g' x1='0' y1='0' x2='0.18' y2='1'><stop offset='0' stop-color='%2325408a'/><stop offset='1' stop-color='%231a3070'/></linearGradient></defs><polygon points='71.8,0 928.2,0 1000,1000 0,1000' fill='url(%23g)'/></svg>"); }
.pyr2__layer--2 .pyr2__top { left: calc(var(--B) * -0.3640); top: calc(var(--B) * -0.1770); width: calc(var(--B) * 0.7280); height: calc(var(--B) * 0.7280); }
.pyr2__layer--3 { --dx: calc(var(--B) * -0.5500); --dy: calc(var(--B) * -0.0500); --dz: calc(var(--B) * -0.3500); animation-delay: -0.36s; }
.pyr2__layer--3 .pyr2__side { left: calc(var(--B) * -0.3500); top: calc(var(--B) * 0.0468); width: calc(var(--B) * 0.7000); height: calc(var(--B) * 0.1172); --hw: calc(var(--B) * 0.3500); }
.pyr2__layer--3 .pyr2__side--front { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' preserveAspectRatio='none'><defs><linearGradient id='g' x1='0' y1='0' x2='0.18' y2='1'><stop offset='0' stop-color='%231c3474'/><stop offset='1' stop-color='%2312265a'/></linearGradient></defs><polygon points='87.1,0 912.9,0 1000,1000 0,1000' fill='url(%23g)'/></svg>"); }
.pyr2__layer--3 .pyr2__side--right { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' preserveAspectRatio='none'><defs><linearGradient id='g' x1='0' y1='0' x2='0.18' y2='1'><stop offset='0' stop-color='%2310204e'/><stop offset='1' stop-color='%230b173c'/></linearGradient></defs><polygon points='87.1,0 912.9,0 1000,1000 0,1000' fill='url(%23g)'/></svg>"); }
.pyr2__layer--3 .pyr2__side--back { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' preserveAspectRatio='none'><defs><linearGradient id='g' x1='0' y1='0' x2='0.18' y2='1'><stop offset='0' stop-color='%230b1638'/><stop offset='1' stop-color='%2308112c'/></linearGradient></defs><polygon points='87.1,0 912.9,0 1000,1000 0,1000' fill='url(%23g)'/></svg>"); }
.pyr2__layer--3 .pyr2__side--left { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' preserveAspectRatio='none'><defs><linearGradient id='g' x1='0' y1='0' x2='0.18' y2='1'><stop offset='0' stop-color='%2325408a'/><stop offset='1' stop-color='%231a3070'/></linearGradient></defs><polygon points='87.1,0 912.9,0 1000,1000 0,1000' fill='url(%23g)'/></svg>"); }
.pyr2__layer--3 .pyr2__top { left: calc(var(--B) * -0.2890); top: calc(var(--B) * -0.2250); width: calc(var(--B) * 0.5780); height: calc(var(--B) * 0.5780); }
.pyr2__layer--4 { --dx: calc(var(--B) * 0.5800); --dy: calc(var(--B) * -0.2200); --dz: calc(var(--B) * 0.2800); animation-delay: -0.54s; }
.pyr2__layer--4 .pyr2__side { left: calc(var(--B) * -0.2750); top: calc(var(--B) * -0.0762); width: calc(var(--B) * 0.5500); height: calc(var(--B) * 0.1172); --hw: calc(var(--B) * 0.2750); }
.pyr2__layer--4 .pyr2__side--front { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' preserveAspectRatio='none'><defs><linearGradient id='g' x1='0' y1='0' x2='0.18' y2='1'><stop offset='0' stop-color='%231c3474'/><stop offset='1' stop-color='%2312265a'/></linearGradient></defs><polygon points='110.9,0 889.1,0 1000,1000 0,1000' fill='url(%23g)'/></svg>"); }
.pyr2__layer--4 .pyr2__side--right { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' preserveAspectRatio='none'><defs><linearGradient id='g' x1='0' y1='0' x2='0.18' y2='1'><stop offset='0' stop-color='%2310204e'/><stop offset='1' stop-color='%230b173c'/></linearGradient></defs><polygon points='110.9,0 889.1,0 1000,1000 0,1000' fill='url(%23g)'/></svg>"); }
.pyr2__layer--4 .pyr2__side--back { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' preserveAspectRatio='none'><defs><linearGradient id='g' x1='0' y1='0' x2='0.18' y2='1'><stop offset='0' stop-color='%230b1638'/><stop offset='1' stop-color='%2308112c'/></linearGradient></defs><polygon points='110.9,0 889.1,0 1000,1000 0,1000' fill='url(%23g)'/></svg>"); }
.pyr2__layer--4 .pyr2__side--left { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' preserveAspectRatio='none'><defs><linearGradient id='g' x1='0' y1='0' x2='0.18' y2='1'><stop offset='0' stop-color='%2325408a'/><stop offset='1' stop-color='%231a3070'/></linearGradient></defs><polygon points='110.9,0 889.1,0 1000,1000 0,1000' fill='url(%23g)'/></svg>"); }
.pyr2__layer--4 .pyr2__top { left: calc(var(--B) * -0.2140); top: calc(var(--B) * -0.2730); width: calc(var(--B) * 0.4280); height: calc(var(--B) * 0.4280); }
.pyr2__layer--5 { --dx: calc(var(--B) * -0.3500); --dy: calc(var(--B) * -0.4200); --dz: calc(var(--B) * 0.3000); animation-delay: -0.72s; }
.pyr2__layer--5 .pyr2__side { left: calc(var(--B) * -0.2000); top: calc(var(--B) * -0.1992); width: calc(var(--B) * 0.4000); height: calc(var(--B) * 0.1172); --hw: calc(var(--B) * 0.2000); }
.pyr2__layer--5 .pyr2__side--front { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' preserveAspectRatio='none'><defs><linearGradient id='g' x1='0' y1='0' x2='0.18' y2='1'><stop offset='0' stop-color='%231c3474'/><stop offset='1' stop-color='%2312265a'/></linearGradient></defs><polygon points='152.5,0 847.5,0 1000,1000 0,1000' fill='url(%23g)'/></svg>"); }
.pyr2__layer--5 .pyr2__side--right { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' preserveAspectRatio='none'><defs><linearGradient id='g' x1='0' y1='0' x2='0.18' y2='1'><stop offset='0' stop-color='%2310204e'/><stop offset='1' stop-color='%230b173c'/></linearGradient></defs><polygon points='152.5,0 847.5,0 1000,1000 0,1000' fill='url(%23g)'/></svg>"); }
.pyr2__layer--5 .pyr2__side--back { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' preserveAspectRatio='none'><defs><linearGradient id='g' x1='0' y1='0' x2='0.18' y2='1'><stop offset='0' stop-color='%230b1638'/><stop offset='1' stop-color='%2308112c'/></linearGradient></defs><polygon points='152.5,0 847.5,0 1000,1000 0,1000' fill='url(%23g)'/></svg>"); }
.pyr2__layer--5 .pyr2__side--left { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' preserveAspectRatio='none'><defs><linearGradient id='g' x1='0' y1='0' x2='0.18' y2='1'><stop offset='0' stop-color='%2325408a'/><stop offset='1' stop-color='%231a3070'/></linearGradient></defs><polygon points='152.5,0 847.5,0 1000,1000 0,1000' fill='url(%23g)'/></svg>"); }
.pyr2__layer--5 .pyr2__top { left: calc(var(--B) * -0.1390); top: calc(var(--B) * -0.3210); width: calc(var(--B) * 0.2780); height: calc(var(--B) * 0.2780); }
.pyr2__layer--6 { --dx: calc(var(--B) * 0.3000); --dy: calc(var(--B) * -0.6200); --dz: calc(var(--B) * -0.2000); animation-delay: -0.90s; }
.pyr2__layer--6 .pyr2__side { left: calc(var(--B) * -0.1250); top: calc(var(--B) * -0.4451); width: calc(var(--B) * 0.2500); height: calc(var(--B) * 0.2401); --hw: calc(var(--B) * 0.1250); }
.pyr2__layer--6 .pyr2__side--front { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' preserveAspectRatio='none'><defs><linearGradient id='g' x1='0' y1='0' x2='0.18' y2='1'><stop offset='0' stop-color='%231c3474'/><stop offset='1' stop-color='%2312265a'/></linearGradient></defs><polygon points='500.0,0 500.0,0 1000,1000 0,1000' fill='url(%23g)'/></svg>"); }
.pyr2__layer--6 .pyr2__side--right { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' preserveAspectRatio='none'><defs><linearGradient id='g' x1='0' y1='0' x2='0.18' y2='1'><stop offset='0' stop-color='%2310204e'/><stop offset='1' stop-color='%230b173c'/></linearGradient></defs><polygon points='500.0,0 500.0,0 1000,1000 0,1000' fill='url(%23g)'/></svg>"); }
.pyr2__layer--6 .pyr2__side--back { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' preserveAspectRatio='none'><defs><linearGradient id='g' x1='0' y1='0' x2='0.18' y2='1'><stop offset='0' stop-color='%230b1638'/><stop offset='1' stop-color='%2308112c'/></linearGradient></defs><polygon points='500.0,0 500.0,0 1000,1000 0,1000' fill='url(%23g)'/></svg>"); }
.pyr2__layer--6 .pyr2__side--left { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' preserveAspectRatio='none'><defs><linearGradient id='g' x1='0' y1='0' x2='0.18' y2='1'><stop offset='0' stop-color='%2325408a'/><stop offset='1' stop-color='%231a3070'/></linearGradient></defs><polygon points='500.0,0 500.0,0 1000,1000 0,1000' fill='url(%23g)'/></svg>"); }

@media (prefers-reduced-motion: reduce) {
  .orbit--pyramid {
    animation: none;
    transform: rotateX(-22deg) rotateY(-38deg);
  }
  .pyr2__layer {
    animation: none;
    transform: none;
  }
}
/* PYRAMID-END */

/* 3D-сцена ушла за экран — анимации на паузе (класс ставит main.js) */
.hero-visual.is-offscreen,
.hero-visual.is-offscreen * {
  animation-play-state: paused !important;
}

/* продуктовые страницы: под стеклом первого экрана только фон страницы — размытие не видно,
   а пересчитывать его каждый кадр (рядом крутится 3D-сцена) дорого; без него страница не тормозит */
.hero--product .hero__glass-pane {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* «Диагностика», hero (десктоп): заголовок, подзаголовок и кнопка выше, пирамида — чуть ниже */
@media (min-width: 850px) {
  .hero--lattice .hero__left {
    margin-bottom: 72px; /* расстояние от меню до заголовка — как на главной */
  }
  .hero--lattice .hero-visual {
    top: 7vh;
  }
}

/* «Внешний контур», hero: шарики на кольцах светятся слабее */
.hero--contour .orbit__ball {
  background:
    radial-gradient(circle at 32% 28%, #e8efff 0%, #b4c8f5 22%, #4f78dc 55%, #1a3a9a 85%, #0c1f5c 100%) content-box,
    radial-gradient(circle closest-side, rgba(120, 160, 255, 0.28) 30%, rgba(60, 110, 255, 0.1) 55%, rgba(60, 110, 255, 0) 100%) padding-box;
}

.hero--contour .hero-visual::before {
  opacity: 0.55;
}

/* ==========================================================================
   «Стратегический найм», hero: «команда собирается в систему» — матовые тёмно-синие
   кубики разлетелись в стороны, затем по очереди слетаются в гору (3×3, на ней 2×2);
   последний, чуть светлее, встаёт на вершину и вращается вокруг своей оси.
   Держатся собранными и снова разлетаются. Грани — .slab__face
   ========================================================================== */
.orbit--team {
  --w: calc(var(--size) * 0.16);   /* ребро кубика */
  --g: calc(var(--w) * 1.04);      /* шаг сетки (с небольшим зазором) */
  animation: slabs-sway 18s ease-in-out infinite alternate;
}

.team {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  transform: translateY(calc(var(--size) * 0.12));
}

.mtn__cube {
  --h: var(--w);
  position: absolute;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  animation: mtn-gather 10s cubic-bezier(0.5, 0, 0.3, 1) infinite;
  animation-delay: calc(var(--d) - 10s);
}

/* --spread — насколько далеко разлетаются кубики (на телефоне меньше) */
@keyframes mtn-gather {
  0%, 8% {
    transform: translate3d(calc((var(--x) * var(--g)) + var(--dx) * var(--g) * var(--spread, 1)),
                           calc((var(--w) / -2 - var(--y) * var(--w)) + var(--dy) * var(--g) * var(--spread, 1)),
                           calc((var(--z) * var(--g)) + var(--dz) * var(--g) * var(--spread, 1)))
               rotateY(-40deg) rotateX(20deg);
  }
  38%, 80% {
    transform: translate3d(calc(var(--x) * var(--g)), calc(var(--w) / -2 - var(--y) * var(--w)), calc(var(--z) * var(--g)))
               rotateY(0deg) rotateX(0deg);
  }
  100% {
    transform: translate3d(calc((var(--x) * var(--g)) + var(--dx) * var(--g) * var(--spread, 1)),
                           calc((var(--w) / -2 - var(--y) * var(--w)) + var(--dy) * var(--g) * var(--spread, 1)),
                           calc((var(--z) * var(--g)) + var(--dz) * var(--g) * var(--spread, 1)))
               rotateY(-40deg) rotateX(20deg);
  }
}

/* вершина — шар цвета центрального шара «Внешнего контура». Летит без кувырков
   (иначе круг сплющится), всегда повёрнут к зрителю; на вершине блик ходит по кругу — шар вращается */
.mtn__ball {
  animation-name: mtn-ball-gather;
}

@keyframes mtn-ball-gather {
  0%, 8% {
    transform: translate3d(calc((var(--x) * var(--g)) + var(--dx) * var(--g) * var(--spread, 1)),
                           calc((var(--w) / -2 - var(--y) * var(--w)) + var(--dy) * var(--g) * var(--spread, 1)),
                           calc((var(--z) * var(--g)) + var(--dz) * var(--g) * var(--spread, 1)));
  }
  38%, 80% { transform: translate3d(0, calc(var(--w) * -2.5), 0); }
  100% {
    transform: translate3d(calc((var(--x) * var(--g)) + var(--dx) * var(--g) * var(--spread, 1)),
                           calc((var(--w) / -2 - var(--y) * var(--w)) + var(--dy) * var(--g) * var(--spread, 1)),
                           calc((var(--z) * var(--g)) + var(--dz) * var(--g) * var(--spread, 1)));
  }
}

.mtn__ball-face {
  position: absolute;
  left: calc(var(--w) * -0.55);
  top: calc(var(--w) * -0.55);
  width: calc(var(--w) * 1.1);
  height: calc(var(--w) * 1.1);
  border-radius: 50%;
  background: radial-gradient(circle at 30% 26%, rgba(120, 160, 255, 0.95) 0%, rgba(20, 50, 130, 0.95) 34%, rgba(6, 12, 35, 0.98) 68%, #020409 100%);
  /* обратный поворот к slabs-sway — круг смотрит на зрителя */
  animation: mtn-ball-face 18s ease-in-out infinite alternate;
}

@keyframes mtn-ball-face {
  from { transform: rotateY(52deg) rotateX(22deg); }
  to { transform: rotateY(22deg) rotateX(22deg); }
}

.mtn__ball-face::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at var(--hx, 30%) var(--hy, 26%), rgba(160, 195, 255, 0.45) 0%, rgba(160, 195, 255, 0) 32%);
  animation: mtn-ball-spin 3s linear infinite;
}

@keyframes mtn-ball-spin {
  0%   { --hx: 30%; --hy: 18%; }
  25%  { --hx: 42%; --hy: 30%; }
  50%  { --hx: 30%; --hy: 42%; }
  75%  { --hx: 18%; --hy: 30%; }
  100% { --hx: 30%; --hy: 18%; }
}

@media (prefers-reduced-motion: reduce) {
  .orbit--team {
    animation: none;
    transform: rotateX(-22deg) rotateY(-38deg);
  }
  .mtn__cube {
    animation: none;
    transform: translate3d(calc(var(--x) * var(--g)), calc(var(--w) / -2 - var(--y) * var(--w)), calc(var(--z) * var(--g)));
  }
  .mtn__ball-face,
  .mtn__ball-face::before {
    animation: none;
  }
  .mtn__ball-face {
    transform: rotateY(38deg) rotateX(22deg);
  }
}

@media (max-width: 849px) {
  .hero--product .hero-visual .orbit--team {
    --spread: 0.45;
    margin-top: calc(80px - var(--size) * 0.162);
    margin-bottom: calc(var(--size) * -0.19);
  }
  .hero--team + .section {
    padding-top: 48px;
  }
}

/* «Стратегический найм», hero (десктоп): кубики чуть ниже */
@media (min-width: 850px) {
  .hero--team .hero-visual {
    top: 13vh;
  }
}

/* AUDIT-START ==============================================================
   «Аудит системы управления», hero: «ступени роста» — разрозненные матовые тёмно-синие
   блоки слетаются в лестницу из 5 ступеней (лестница повёрнута к зрителю); шар вместе с ними
   прилетает на вершину и вращается вокруг своей оси. Держится и снова распадается. Блоки — .slab__face;
   позиция шара посчитана скриптом (gen_audit.py) в долях --s
   ========================================================================== */
.orbit--stairs {
  --s: calc(var(--size) * 0.18);   /* сторона ступени */
  --spread: 0.7;                   /* разлёт блоков — в пределах правой половины экрана */
  animation: stairs-sway 16s ease-in-out infinite alternate;
}

/* лестница повёрнута к зрителю: видны ступени спереди, лёгкое покачивание */
@keyframes stairs-sway {
  from { transform: rotateX(-20deg) rotateY(-22deg); }
  to { transform: rotateX(-20deg) rotateY(-6deg); }
}

.stairs-wrap {
  position: relative;
  flex: none;
  width: var(--size);
  height: var(--size);
  perspective: 1300px; /* перспектива — как у .hero-visual, на обе сцены */
}

.hero--product .hero-visual .stairs-wrap > .orbit {
  position: absolute;
  inset: 0;
  margin: 0;
}

.stair {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  transform: translateY(calc(var(--s) * 1.3));
}

.stair__step {
  --w: var(--s);
  --h: calc(var(--s) * var(--k));
  position: absolute;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  animation: stair-gather 12s cubic-bezier(0.5, 0, 0.3, 1) infinite;
  animation-delay: calc(var(--d) - 12s);
}

/* --spread — насколько далеко разлетаются блоки (на телефоне меньше) */
@keyframes stair-gather {
  0%, 8% {
    transform: translate3d(calc(var(--s) * (var(--x) + var(--dx) * var(--spread, 1))),
                           calc(var(--h) / -2 + var(--s) * var(--dy) * var(--spread, 1)),
                           calc(var(--s) * var(--dz) * var(--spread, 1)))
               rotateY(-35deg) rotateX(18deg);
  }
  32%, 86% { transform: translate3d(calc(var(--s) * var(--x)), calc(var(--h) / -2), 0) rotateY(0deg) rotateX(0deg); }
  100% {
    transform: translate3d(calc(var(--s) * (var(--x) + var(--dx) * var(--spread, 1))),
                           calc(var(--h) / -2 + var(--s) * var(--dy) * var(--spread, 1)),
                           calc(var(--s) * var(--dz) * var(--spread, 1)))
               rotateY(-35deg) rotateX(18deg);
  }
}

/* шар: вместе с блоками висит в разлёте и последним прилетает на вершину лестницы
   (без кувырков — круг всегда повёрнут к зрителю обратным поворотом сцены) */
.stair__ball {
  --top: translate3d(calc(var(--s) * 2.000), calc(var(--s) * -3.050), 0);
  position: absolute;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  animation: stair-ball 12s cubic-bezier(0.5, 0, 0.3, 1) infinite;
  animation-delay: calc(var(--d) - 12s);
}

@keyframes stair-ball {
  0%, 8% { transform: var(--top) translate3d(calc(var(--s) * var(--dx) * var(--spread, 1)), calc(var(--s) * var(--dy) * var(--spread, 1)), calc(var(--s) * var(--dz) * var(--spread, 1))); }
  32%, 86% { transform: var(--top); }
  100% { transform: var(--top) translate3d(calc(var(--s) * var(--dx) * var(--spread, 1)), calc(var(--s) * var(--dy) * var(--spread, 1)), calc(var(--s) * var(--dz) * var(--spread, 1))); }
}

.stair__ball-face {
  position: absolute;
  left: calc(var(--s) * -0.55);
  top: calc(var(--s) * -0.55);
  width: calc(var(--s) * 1.10);
  height: calc(var(--s) * 1.10);
  border-radius: 50%;
  /* цвет — как у центрального шара на «Внешнем контуре» (.orbit__core) */
  background: radial-gradient(circle at 30% 26%, rgba(120, 160, 255, 0.95) 0%, rgba(20, 50, 130, 0.95) 34%, rgba(6, 12, 35, 0.98) 68%, #020409 100%);
  animation: stair-face 16s ease-in-out infinite alternate;
}


/* вращение шара на вершине — без полос: блик медленно ходит по кругу, шар «поворачивается» к свету */
.stair__ball-face {
  visibility: hidden; /* 3D-диск — только «метка» положения: в перспективе он вытягивается в овал */
}

/* видимый шар — плоский круг поверх сцены; main.js каждый кадр ставит его туда,
   где находится 3D-метка, поэтому он всегда идеально круглый */
.stair__ball-2d {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 4;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle at 30% 26%, rgba(120, 160, 255, 0.95) 0%, rgba(20, 50, 130, 0.95) 34%, rgba(6, 12, 35, 0.98) 68%, #020409 100%);
  will-change: transform;
}

.stair__ball-2d::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at var(--hx, 30%) var(--hy, 26%), rgba(170, 200, 255, 0.55) 0%, rgba(170, 200, 255, 0) 34%);
  animation: stair-spin 4s ease-in-out infinite;
}

@property --hx { syntax: '<percentage>'; inherits: false; initial-value: 30%; }
@property --hy { syntax: '<percentage>'; inherits: false; initial-value: 26%; }

@keyframes stair-spin {
  0%   { --hx: 22%; --hy: 24%; }
  25%  { --hx: 50%; --hy: 18%; }
  50%  { --hx: 72%; --hy: 30%; }
  75%  { --hx: 48%; --hy: 40%; }
  100% { --hx: 22%; --hy: 24%; }
}
}
  39.42% { --hx: 36.0%; --hy: 19.6%; }
  40.83% { --hx: 40.4%; --hy: 24.0%; }
  42.25% { --hx: 42.0%; --hy: 30.0%; }
  43.67% { --hx: 40.4%; --hy: 36.0%; }
  45.08% { --hx: 36.0%; --hy: 40.4%; }
  46.50% { --hx: 30.0%; --hy: 42.0%; }
  47.92% { --hx: 24.0%; --hy: 40.4%; }
  49.33% { --hx: 19.6%; --hy: 36.0%; }
  50.75% { --hx: 18.0%; --hy: 30.0%; }
  52.17% { --hx: 19.6%; --hy: 24.0%; }
  53.58% { --hx: 24.0%; --hy: 19.6%; }
  55.00% { --hx: 30.0%; --hy: 18.0%; }
  56.42% { --hx: 36.0%; --hy: 19.6%; }
  57.83% { --hx: 40.4%; --hy: 24.0%; }
  59.25% { --hx: 42.0%; --hy: 30.0%; }
  60.67% { --hx: 40.4%; --hy: 36.0%; }
  62.08% { --hx: 36.0%; --hy: 40.4%; }
  63.50% { --hx: 30.0%; --hy: 42.0%; }
  64.92% { --hx: 24.0%; --hy: 40.4%; }
  66.33% { --hx: 19.6%; --hy: 36.0%; }
  67.75% { --hx: 18.0%; --hy: 30.0%; }
  69.17% { --hx: 19.6%; --hy: 24.0%; }
  70.58% { --hx: 24.0%; --hy: 19.6%; }
  72.00% { --hx: 30.0%; --hy: 18.0%; }
  73.42% { --hx: 36.0%; --hy: 19.6%; }
  74.83% { --hx: 40.4%; --hy: 24.0%; }
  76.25% { --hx: 42.0%; --hy: 30.0%; }
  77.67% { --hx: 40.4%; --hy: 36.0%; }
  79.08% { --hx: 36.0%; --hy: 40.4%; }
  80.50% { --hx: 30.0%; --hy: 42.0%; }
  81.92% { --hx: 24.0%; --hy: 40.4%; }
  83.33% { --hx: 19.6%; --hy: 36.0%; }
  84.75% { --hx: 18.0%; --hy: 30.0%; }
  86.17% { --hx: 19.6%; --hy: 24.0%; }
  87.58% { --hx: 24.0%; --hy: 19.6%; }
  89.00% { --hx: 30.0%; --hy: 18.0%; }
  100% { --hx: 30%; --hy: 18%; }
}

/* обратный поворот к stairs-sway, чтобы круг смотрел на зрителя */
/* translateZ — диск шара выдвинут к зрителю на полступени: его плоскость всегда перед
   верхней ступенью и не пересекается с ней ни при каком повороте сцены */
@keyframes stair-face {
  from { transform: rotateY(22deg) rotateX(20deg); }
  to { transform: rotateY(6deg) rotateX(20deg); }
}

@media (prefers-reduced-motion: reduce) {
  .orbit--stairs {
    animation: none;
    transform: rotateX(-20deg) rotateY(-14deg);
  }
  .stair__step {
    animation: none;
    transform: translate3d(calc(var(--s) * var(--x)), calc(var(--h) / -2), 0);
  }
  .stair__ball {
    animation: none;
    transform: var(--top);
  }
  .stair__ball-face,
  .stair__ball-face::before {
    animation: none;
    transform: rotateY(14deg) rotateX(20deg);
  }
}

@media (min-width: 850px) {
  .hero--audit .hero-visual {
    top: 13vh;
  }
}

@media (max-width: 849px) {
  .hero--product .hero-visual .stairs-wrap {
    margin-top: calc(60px - var(--size) * 0.162);
    margin-bottom: calc(var(--size) * -0.12);
  }
  .hero--product .hero-visual .stairs-wrap > .orbit--stairs {
    --spread: 0.45;
  }
  .hero--audit + .section {
    padding-top: 30px;
  }
}
/* AUDIT-END */

@media (min-width: 850px) and (max-width: 1024px) {
  .hero--lattice .hero__left {
    margin-bottom: 112px;
  }
}

/* «HRBP», hero: «связующее звено» — стиль между «Внешним контуром» и «Стратегическим наймом»:
   три матовых тёмно-синих блока (собственник, бизнес, команда) стоят треугольником и соединены
   тонкими светлыми линиями, как кольца «Контура»; шар по очереди переходит с блока на блок.
   Сцена медленно вращается (orbit-turn), шар всегда смотрит на зрителя */
.orbit--link {
  --R: calc(var(--size) * 0.3);     /* радиус треугольника */
  --w: calc(var(--size) * 0.18);    /* ребро блока */
  --lift: calc(var(--w) / -2 - var(--size) * 0.04);  /* высота центра шара над верхом блока */
  animation-duration: 44s;
}

.hero--link .hero-visual::before {
  opacity: 0.5;
}

/* кольцо вокруг треугольника — как у «Внешнего контура», на уровне низа блоков */
.orbit--link .orbit__ring--1 {
  inset: 2%;
  transform: translateY(calc(var(--w) / 2)) rotateX(90deg);
}

.link__cube {
  --h: var(--w);
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
}

.link__cube--a { transform: translate3d(0, 0, calc(var(--R) * -1)); }
.link__cube--b { transform: translate3d(calc(var(--R) * 0.866), 0, calc(var(--R) * 0.5)); }
.link__cube--c { transform: translate3d(calc(var(--R) * -0.866), 0, calc(var(--R) * 0.5)); }

/* линии — по верху блоков, между ними */
.link__line {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--R) * 1.732);
  height: 1px;
  margin-left: calc(var(--R) * -0.866);
  background: rgba(196, 216, 255, 0.55);
  box-shadow: 0 0 10px rgba(60, 110, 255, 0.35);
}

.link__line--ab { transform: translate3d(calc(var(--R) * 0.433), calc(var(--w) / -2), calc(var(--R) * -0.25)) rotateY(-60deg); }
.link__line--bc { transform: translate3d(0, calc(var(--w) / -2), calc(var(--R) * 0.5)); }
.link__line--ca { transform: translate3d(calc(var(--R) * -0.433), calc(var(--w) / -2), calc(var(--R) * -0.25)) rotateY(60deg); }

/* шар: стоит над блоком, катится по линии к следующему, держится и идёт дальше */
.link__ball {
  animation: link-ball 9s cubic-bezier(0.55, 0, 0.35, 1) infinite;
}

@keyframes link-ball {
  0%, 18%   { transform: translate3d(0, var(--lift), calc(var(--R) * -1)); }
  33%, 51%  { transform: translate3d(calc(var(--R) * 0.866), var(--lift), calc(var(--R) * 0.5)); }
  66%, 84%  { transform: translate3d(calc(var(--R) * -0.866), var(--lift), calc(var(--R) * 0.5)); }
  100%      { transform: translate3d(0, var(--lift), calc(var(--R) * -1)); }
}

.orbit--link .orbit__ball {
  --ball: calc(var(--size) * 0.07);
  --glow: calc(var(--ball) * 0.35);
  animation-duration: 44s;
  background:
    radial-gradient(circle at 30% 26%, rgba(120, 160, 255, 0.95) 0%, rgba(20, 50, 130, 0.95) 34%, rgba(6, 12, 35, 0.98) 68%, #020409 100%) content-box,
    radial-gradient(circle closest-side, rgba(120, 160, 255, 0.22) 40%, rgba(60, 110, 255, 0) 100%) padding-box;
}

@media (prefers-reduced-motion: reduce) {
  .link__ball {
    animation: none;
    transform: translate3d(0, var(--lift), calc(var(--R) * -1));
  }
}

@media (min-width: 850px) {
  .hero--link .hero-visual {
    top: 5vh;
  }
}

/* «HRBP», телефон: сцена плоская — убираем пустые поля сверху и снизу */
@media (max-width: 849px) {
  .hero--product .hero-visual .orbit--link {
    margin-top: calc(-10px - var(--size) * 0.08);
    margin-bottom: calc(var(--size) * -0.2);
  }
  .hero--link + .section {
    padding-top: 42px;
  }
}

/* METER-START =============================================================
   «Тестирование руководителей», hero: «замер потенциала» — ряд матовых тёмно-синих столбиков
   одинаковой высоты; по очереди каждый вырастает до своей реальной высоты. На лидере (светлее)
   появляется шар и вращается.
   Сгенерировано скриптом gen_meter.py
   ========================================================================== */
@property --k { syntax: '<number>'; inherits: true; initial-value: 0.80; }

.orbit--meter {
  --w: calc(var(--size) * 0.17);   /* сторона столбика */
  --g: calc(var(--w) * 1.35);      /* шаг ряда */
  animation: slabs-sway 18s ease-in-out infinite alternate;
}

.meter__col {
  --k: 0.80;
  --h: calc(var(--w) * var(--k));
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  /* низ всех столбиков — на одной линии */
  transform: translate3d(calc((var(--i) - 2) * var(--g)), calc(var(--w) * 1.2 - var(--h) / 2), 0);
  animation: none 9s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes meter-1 {
  0%, 8.0% { --k: 0.80; }
  12.0%, 90% { --k: 1.50; }
  97%, 100% { --k: 0.80; }
}
.meter__col--1 { animation-name: meter-1; }

@keyframes meter-2 {
  0%, 14.5% { --k: 0.80; }
  18.5%, 90% { --k: 2.30; }
  97%, 100% { --k: 0.80; }
}
.meter__col--2 { animation-name: meter-2; }

@keyframes meter-3 {
  0%, 21.0% { --k: 0.80; }
  25.0%, 90% { --k: 1.10; }
  97%, 100% { --k: 0.80; }
}
.meter__col--3 { animation-name: meter-3; }

@keyframes meter-4 {
  0%, 27.5% { --k: 0.80; }
  31.5%, 90% { --k: 3.10; }
  97%, 100% { --k: 0.80; }
}
.meter__col--4 { animation-name: meter-4; }

@keyframes meter-5 {
  0%, 34.0% { --k: 0.80; }
  38.0%, 90% { --k: 1.90; }
  97%, 100% { --k: 0.80; }
}
.meter__col--5 { animation-name: meter-5; }

/* лидер — светлее остальных */
.meter__col--lead .slab__face--top   { --c1: #3d5fb8; --c2: #2f4f9e; }
.meter__col--lead .slab__face--front { --c1: #2a4a98; --c2: #203c80; }
.meter__col--lead .slab__face--left  { --c1: #2c4c9c; --c2: #213d82; }
.meter__col--lead .slab__face--right { --c1: #1b3474; --c2: #152b62; }

/* метка шара на вершине лидера: позиция — по высоте столбика, поворот — навстречу покачиванию сцены
   (видимый круглый шар рисует main.js поверх сцены по этой метке) */
.meter__ball-pos {
  position: absolute;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  transform: translateY(calc(var(--h) / -2 - var(--w) * 0.52));
}

.meter__ball {
  position: absolute;
  left: calc(var(--w) * -0.52);
  top: calc(var(--w) * -0.52);
  width: calc(var(--w) * 1.04);
  height: calc(var(--w) * 1.04);
  border-radius: 50%;
  visibility: hidden;
  animation: mtn-ball-face 18s ease-in-out infinite alternate, meter-ball-fade 9s linear infinite;
}

/* шар появляется, когда лидер вырос, и исчезает перед тем, как столбики снова выровняются */
@keyframes meter-ball-fade {
  0%, 31.5% { opacity: 0; }
  35.5%, 89% { opacity: 1; }
  92%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .orbit--meter {
    animation: none;
    transform: rotateX(-22deg) rotateY(-38deg);
  }
  .meter__col { animation: none; }
  .meter__ball { animation: none; opacity: 1; }
}

@media (min-width: 850px) {
  .hero--meter .hero-visual {
    top: 13vh;
  }
}

@media (max-width: 849px) {
  .hero--product .hero-visual .orbit--meter {
    margin-top: calc(82px - var(--size) * 0.162);
    margin-bottom: calc(var(--size) * -0.02);
  }
  .hero--meter + .section {
    padding-top: 25px;
  }
}
/* METER-END */

/* «Тестирование», hero: свечение за сценой — крупнее и мягче, без видимой границы круга */
.hero--meter .hero-visual::before {
  width: calc(var(--size) * 1.3);
  height: calc(var(--size) * 1.3);
  background: radial-gradient(circle closest-side, rgba(0, 85, 255, 0.2) 0%, rgba(0, 85, 255, 0.13) 25%, rgba(0, 85, 255, 0.06) 55%, rgba(0, 85, 255, 0.02) 80%, rgba(0, 85, 255, 0) 100%);
}

/* BAL-START ===============================================================
   «HRBP», hero: «баланс» — на опоре лежит матовая тёмно-синяя балка, на её концах бизнес
   (два блока) и люди (высокий блок). Балка покачивается и выравнивается, в центре появляется шар
   и вращается (видимый круглый шар рисует main.js по метке [data-ball-mark]). Генератор gen_bal.py
   ========================================================================== */
.orbit--bal {
  --w: calc(var(--size) * 0.16);
  animation: slabs-sway 18s ease-in-out infinite alternate;
}

.bal {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  transform: translateY(calc(var(--w) * 0.2));
}

.bal__box {
  --h: calc(var(--w) * var(--k));
  position: absolute;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  transform: translate3d(calc(var(--x) * var(--w)), calc(var(--y) * var(--w)), 0);
}

/* балка — точка поворота на верху опоры */
.bal__beam {
  position: absolute;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  animation: bal-tilt 10s ease-in-out infinite;
}

@keyframes bal-tilt {
  0%   { transform: rotateZ(-13deg); }
  16%  { transform: rotateZ(9deg); }
  28%  { transform: rotateZ(-5deg); }
  38%  { transform: rotateZ(2deg); }
  46%, 84% { transform: rotateZ(0deg); }
  100% { transform: rotateZ(-13deg); }
}

/* метка шара в центре балки, навстречу покачиванию сцены */
.bal__ball-pos {
  position: absolute;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  transform: translateY(calc(var(--w) * -0.85));
}

.bal__ball {
  position: absolute;
  left: calc(var(--w) * -0.55);
  top: calc(var(--w) * -0.55);
  width: calc(var(--w) * 1.1);
  height: calc(var(--w) * 1.1);
  border-radius: 50%;
  visibility: hidden;
  animation: mtn-ball-face 18s ease-in-out infinite alternate, bal-ball-fade 10s linear infinite;
}

@keyframes bal-ball-fade {
  0%, 46% { opacity: 0; }
  51%, 84% { opacity: 1; }
  89%, 100% { opacity: 0; }
}

/* свечение за сценой — мягкий градиент без видимого круга (как на «Тестировании») */
.hero--bal .hero-visual::before {
  width: calc(var(--size) * 1.3);
  height: calc(var(--size) * 1.3);
  background: radial-gradient(circle closest-side, rgba(0, 85, 255, 0.2) 0%, rgba(0, 85, 255, 0.13) 25%, rgba(0, 85, 255, 0.06) 55%, rgba(0, 85, 255, 0.02) 80%, rgba(0, 85, 255, 0) 100%);
}

/* опора — чуть темнее, балка — чуть светлее */
.bal__box--pivot .slab__face--top   { --c1: #1d3474; --c2: #162a62; }
.bal__box--beam .slab__face--top    { --c1: #34539f; --c2: #2a4890; }
.bal__box--beam .slab__face--front  { --c1: #213d82; --c2: #1a3270; }

@media (prefers-reduced-motion: reduce) {
  .orbit--bal { animation: none; transform: rotateX(-22deg) rotateY(-38deg); }
  .bal__beam { animation: none; }
  .bal__ball { animation: none; opacity: 1; transform: rotateY(38deg) rotateX(22deg); }
}

@media (min-width: 850px) {
  .hero--bal .hero-visual {
    top: 9vh;
  }
}

@media (max-width: 849px) {
  .hero--product .hero-visual .orbit--bal {
    margin-top: calc(65px - var(--size) * 0.162);
    margin-bottom: calc(var(--size) * -0.12);
  }
  .hero--bal + .section {
    padding-top: 25px;
  }
}
/* BAL-END */

/* WF-START ================================================================
   «HRBP», hero: «из хаоса — в систему» — тонкие контурные (wireframe) кубы. Из россыпного облака
   они выстраиваются в упорядоченную матрицу 3×3×3, перетекают в график из столбиков и снова
   рассыпаются. Позиции трёх состояний — в переменных каждого кубика (генератор gen_wf.py)
   ========================================================================== */
.orbit--wf {
  --w: calc(var(--size) * 0.095);   /* ребро кубика */
  --g: calc(var(--w) * 1.12);       /* шаг сетки */
  /* лёгкое покачивание вместо полного оборота — график всегда виден спереди */
  animation: wf-sway 16s ease-in-out infinite alternate;
}

@keyframes wf-sway {
  from { transform: rotateX(-18deg) rotateY(-30deg); }
  to { transform: rotateX(-18deg) rotateY(10deg); }
}

.hero--wf .hero-visual::before {
  width: calc(var(--size) * 1.3);
  height: calc(var(--size) * 1.3);
  background: radial-gradient(circle closest-side, rgba(0, 85, 255, 0.18) 0%, rgba(0, 85, 255, 0.11) 25%, rgba(0, 85, 255, 0.05) 55%, rgba(0, 85, 255, 0.015) 80%, rgba(0, 85, 255, 0) 100%);
}

.wf {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
}

.wf__cube {
  --h: var(--w);
  position: absolute;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  animation: wf-morph 20s cubic-bezier(0.45, 0, 0.25, 1) infinite;
  animation-delay: calc(var(--d) - 20s);
}

/* контур: грани прозрачные, видны только тонкие рёбра, в том числе задние */
.wf__cube .slab__face {
  background: none;
  border: 1px solid rgba(196, 216, 255, 0.55);
  backface-visibility: visible;
}

/* облако → матрица → график → облако */
@keyframes wf-morph {
  0%, 8%, 94%, 100% {
    transform: translate3d(calc(var(--ax) * var(--g)), calc(var(--ay) * var(--g)), calc(var(--az) * var(--g))) rotateX(var(--arx)) rotateY(var(--ary));
  }
  26%, 44% {
    transform: translate3d(calc(var(--bx) * var(--g)), calc(var(--by) * var(--g)), calc(var(--bz) * var(--g)));
  }
  58%, 78% {
    transform: translate3d(calc(var(--cx) * var(--g)), calc(var(--cy) * var(--g)), calc(var(--cz) * var(--g)));
  }
}

@media (prefers-reduced-motion: reduce) {
  .orbit--wf { animation: none; transform: rotateX(-18deg) rotateY(-10deg); }
  .wf__cube {
    animation: none;
    transform: translate3d(calc(var(--bx) * var(--g)), calc(var(--by) * var(--g)), calc(var(--bz) * var(--g)));
  }
}

@media (min-width: 850px) {
  .hero--wf .hero-visual {
    top: 5vh;
  }
}

@media (max-width: 849px) {
  .hero--product .hero-visual .orbit--wf {
    margin-top: calc(40px - var(--size) * 0.08);
  }
  .hero--wf + .section {
    padding-top: 40px;
  }
}
/* WF-END */

/* PZ-START ================================================================
   «HRBP», hero: «недостающий элемент» — матовые тёмно-синие кусочки пазла (объём — стопка слоёв
   с формой кусочка в SVG) слетаются из разлёта в единый квадрат 3×3; в центре остаётся пустое место,
   в конце сверху опускается последний, чуть более светлый кусочек. Генератор gen_pz.py
   ========================================================================== */
.orbit--pz {
  --c: calc(var(--size) * 0.19);    /* сторона ячейки пазла */
  --t: calc(var(--c) * 0.16);       /* толщина кусочка */
  animation: pz-sway 18s ease-in-out infinite alternate;
}

/* вид сверху под углом — пазл лежит «на столе» */
@keyframes pz-sway {
  from { transform: rotateX(-46deg) rotateY(-28deg); }
  to { transform: rotateX(-46deg) rotateY(8deg); }
}

.hero--pz .hero-visual::before {
  width: calc(var(--size) * 1.3);
  height: calc(var(--size) * 1.3);
  background: radial-gradient(circle closest-side, rgba(0, 85, 255, 0.2) 0%, rgba(0, 85, 255, 0.13) 25%, rgba(0, 85, 255, 0.06) 55%, rgba(0, 85, 255, 0.02) 80%, rgba(0, 85, 255, 0) 100%);
}

/* доска лежит горизонтально: локальная ось Z смотрит вверх */
.pz {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  transform: rotateX(90deg) translate3d(calc(var(--c) * -1.5), calc(var(--c) * -1.5), 0);
}

.pz__piece {
  position: absolute;
  left: calc(var(--x) * var(--c) - var(--c) * 0.25);
  top: calc(var(--y) * var(--c) - var(--c) * 0.25);
  width: calc(var(--c) * 1.5);
  height: calc(var(--c) * 1.5);
  transform-style: preserve-3d;
  animation: pz-gather 12s cubic-bezier(0.5, 0, 0.3, 1) infinite;
  animation-delay: calc(var(--d, 0s) - 12s);
}

.pz__layer {
  position: absolute;
  inset: 0;
  background: var(--side) center / 100% 100% no-repeat;
  transform: translateZ(calc(var(--t) * var(--l) / 3));
}

.pz__layer:last-child {
  background-image: var(--top);
}

@keyframes pz-gather {
  0%, 8% {
    transform: translate3d(calc(var(--dx) * var(--c) * var(--spread, 1)), calc(var(--dy) * var(--c) * var(--spread, 1)), calc(var(--dz) * var(--c))) rotateZ(var(--rz));
  }
  34%, 86% { transform: translate3d(0, 0, 0) rotateZ(0deg); }
  100% {
    transform: translate3d(calc(var(--dx) * var(--c) * var(--spread, 1)), calc(var(--dy) * var(--c) * var(--spread, 1)), calc(var(--dz) * var(--c))) rotateZ(var(--rz));
  }
}

/* последний кусочек: висит над пустым местом, медленно поворачиваясь, затем опускается в него */
.pz__piece--last {
  animation: pz-last 12s cubic-bezier(0.55, 0, 0.35, 1) infinite;
}

@keyframes pz-last {
  0%, 44% { transform: translate3d(0, 0, calc(var(--c) * 2.2)) rotateZ(-90deg); }
  58%, 86% { transform: translate3d(0, 0, 0) rotateZ(0deg); }
  100% { transform: translate3d(0, 0, calc(var(--c) * 2.2)) rotateZ(-90deg); }
}

@media (prefers-reduced-motion: reduce) {
  .orbit--pz { animation: none; transform: rotateX(-46deg) rotateY(-10deg); }
  .pz__piece, .pz__piece--last { animation: none; }
}

@media (min-width: 850px) {
  .hero--pz .hero-visual {
    top: 8vh;
  }
}

@media (max-width: 849px) {
  .hero--product .hero-visual .orbit--pz {
    --spread: 0.6;
    margin-top: calc(60px - var(--size) * 0.08);
    margin-bottom: calc(var(--size) * -0.12);
  }
  .hero--pz + .section {
    padding-top: 30px;
  }
}

.pz__piece--00 { --side: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-25 -25 150 150'><defs><linearGradient id='g' x1='0' y1='0' x2='0.3' y2='1'><stop offset='0' stop-color='%23162a62'/><stop offset='1' stop-color='%230b1a44'/></linearGradient></defs><path d='M0,0 L 35.0,0.0 C 40.0,0.0 42.0,0.0 38.0,0.0 C 33.0,0.0 40.0,0.0 50.0,0.0 C 60.0,0.0 67.0,0.0 62.0,0.0 C 58.0,0.0 60.0,0.0 65.0,0.0 L 100.0,0.0 L 100.0,35.0 C 100.0,40.0 106.0,42.0 112.0,38.0 C 120.0,33.0 126.0,40.0 126.0,50.0 C 126.0,60.0 120.0,67.0 112.0,62.0 C 106.0,58.0 100.0,60.0 100.0,65.0 L 100.0,100.0 L 65.0,100.0 C 60.0,100.0 58.0,106.0 62.0,112.0 C 67.0,120.0 60.0,126.0 50.0,126.0 C 40.0,126.0 33.0,120.0 38.0,112.0 C 42.0,106.0 40.0,100.0 35.0,100.0 L 0.0,100.0 L 0.0,65.0 C 0.0,60.0 0.0,58.0 0.0,62.0 C 0.0,67.0 0.0,60.0 0.0,50.0 C 0.0,40.0 0.0,33.0 0.0,38.0 C 0.0,42.0 0.0,40.0 0.0,35.0 L 0.0,0.0 Z' fill='url(%23g)'/></svg>"); --top: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-25 -25 150 150'><defs><linearGradient id='g' x1='0' y1='0' x2='0.3' y2='1'><stop offset='0' stop-color='%232a4590'/><stop offset='1' stop-color='%231d3474'/></linearGradient></defs><path d='M0,0 L 35.0,0.0 C 40.0,0.0 42.0,0.0 38.0,0.0 C 33.0,0.0 40.0,0.0 50.0,0.0 C 60.0,0.0 67.0,0.0 62.0,0.0 C 58.0,0.0 60.0,0.0 65.0,0.0 L 100.0,0.0 L 100.0,35.0 C 100.0,40.0 106.0,42.0 112.0,38.0 C 120.0,33.0 126.0,40.0 126.0,50.0 C 126.0,60.0 120.0,67.0 112.0,62.0 C 106.0,58.0 100.0,60.0 100.0,65.0 L 100.0,100.0 L 65.0,100.0 C 60.0,100.0 58.0,106.0 62.0,112.0 C 67.0,120.0 60.0,126.0 50.0,126.0 C 40.0,126.0 33.0,120.0 38.0,112.0 C 42.0,106.0 40.0,100.0 35.0,100.0 L 0.0,100.0 L 0.0,65.0 C 0.0,60.0 0.0,58.0 0.0,62.0 C 0.0,67.0 0.0,60.0 0.0,50.0 C 0.0,40.0 0.0,33.0 0.0,38.0 C 0.0,42.0 0.0,40.0 0.0,35.0 L 0.0,0.0 Z' fill='url(%23g)' stroke='rgba(160,185,255,0.35)' stroke-width='0.8'/></svg>"); }
.pz__piece--01 { --side: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-25 -25 150 150'><defs><linearGradient id='g' x1='0' y1='0' x2='0.3' y2='1'><stop offset='0' stop-color='%23162a62'/><stop offset='1' stop-color='%230b1a44'/></linearGradient></defs><path d='M0,0 L 35.0,0.0 C 40.0,0.0 42.0,0.0 38.0,0.0 C 33.0,0.0 40.0,0.0 50.0,0.0 C 60.0,0.0 67.0,0.0 62.0,0.0 C 58.0,0.0 60.0,0.0 65.0,0.0 L 100.0,0.0 L 100.0,35.0 C 100.0,40.0 94.0,42.0 88.0,38.0 C 80.0,33.0 74.0,40.0 74.0,50.0 C 74.0,60.0 80.0,67.0 88.0,62.0 C 94.0,58.0 100.0,60.0 100.0,65.0 L 100.0,100.0 L 65.0,100.0 C 60.0,100.0 58.0,106.0 62.0,112.0 C 67.0,120.0 60.0,126.0 50.0,126.0 C 40.0,126.0 33.0,120.0 38.0,112.0 C 42.0,106.0 40.0,100.0 35.0,100.0 L 0.0,100.0 L 0.0,65.0 C 0.0,60.0 6.0,58.0 12.0,62.0 C 20.0,67.0 26.0,60.0 26.0,50.0 C 26.0,40.0 20.0,33.0 12.0,38.0 C 6.0,42.0 0.0,40.0 0.0,35.0 L 0.0,0.0 Z' fill='url(%23g)'/></svg>"); --top: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-25 -25 150 150'><defs><linearGradient id='g' x1='0' y1='0' x2='0.3' y2='1'><stop offset='0' stop-color='%232a4590'/><stop offset='1' stop-color='%231d3474'/></linearGradient></defs><path d='M0,0 L 35.0,0.0 C 40.0,0.0 42.0,0.0 38.0,0.0 C 33.0,0.0 40.0,0.0 50.0,0.0 C 60.0,0.0 67.0,0.0 62.0,0.0 C 58.0,0.0 60.0,0.0 65.0,0.0 L 100.0,0.0 L 100.0,35.0 C 100.0,40.0 94.0,42.0 88.0,38.0 C 80.0,33.0 74.0,40.0 74.0,50.0 C 74.0,60.0 80.0,67.0 88.0,62.0 C 94.0,58.0 100.0,60.0 100.0,65.0 L 100.0,100.0 L 65.0,100.0 C 60.0,100.0 58.0,106.0 62.0,112.0 C 67.0,120.0 60.0,126.0 50.0,126.0 C 40.0,126.0 33.0,120.0 38.0,112.0 C 42.0,106.0 40.0,100.0 35.0,100.0 L 0.0,100.0 L 0.0,65.0 C 0.0,60.0 6.0,58.0 12.0,62.0 C 20.0,67.0 26.0,60.0 26.0,50.0 C 26.0,40.0 20.0,33.0 12.0,38.0 C 6.0,42.0 0.0,40.0 0.0,35.0 L 0.0,0.0 Z' fill='url(%23g)' stroke='rgba(160,185,255,0.35)' stroke-width='0.8'/></svg>"); }
.pz__piece--02 { --side: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-25 -25 150 150'><defs><linearGradient id='g' x1='0' y1='0' x2='0.3' y2='1'><stop offset='0' stop-color='%23162a62'/><stop offset='1' stop-color='%230b1a44'/></linearGradient></defs><path d='M0,0 L 35.0,0.0 C 40.0,0.0 42.0,0.0 38.0,0.0 C 33.0,0.0 40.0,0.0 50.0,0.0 C 60.0,0.0 67.0,0.0 62.0,0.0 C 58.0,0.0 60.0,0.0 65.0,0.0 L 100.0,0.0 L 100.0,35.0 C 100.0,40.0 100.0,42.0 100.0,38.0 C 100.0,33.0 100.0,40.0 100.0,50.0 C 100.0,60.0 100.0,67.0 100.0,62.0 C 100.0,58.0 100.0,60.0 100.0,65.0 L 100.0,100.0 L 65.0,100.0 C 60.0,100.0 58.0,106.0 62.0,112.0 C 67.0,120.0 60.0,126.0 50.0,126.0 C 40.0,126.0 33.0,120.0 38.0,112.0 C 42.0,106.0 40.0,100.0 35.0,100.0 L 0.0,100.0 L 0.0,65.0 C 0.0,60.0 -6.0,58.0 -12.0,62.0 C -20.0,67.0 -26.0,60.0 -26.0,50.0 C -26.0,40.0 -20.0,33.0 -12.0,38.0 C -6.0,42.0 0.0,40.0 0.0,35.0 L 0.0,0.0 Z' fill='url(%23g)'/></svg>"); --top: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-25 -25 150 150'><defs><linearGradient id='g' x1='0' y1='0' x2='0.3' y2='1'><stop offset='0' stop-color='%232a4590'/><stop offset='1' stop-color='%231d3474'/></linearGradient></defs><path d='M0,0 L 35.0,0.0 C 40.0,0.0 42.0,0.0 38.0,0.0 C 33.0,0.0 40.0,0.0 50.0,0.0 C 60.0,0.0 67.0,0.0 62.0,0.0 C 58.0,0.0 60.0,0.0 65.0,0.0 L 100.0,0.0 L 100.0,35.0 C 100.0,40.0 100.0,42.0 100.0,38.0 C 100.0,33.0 100.0,40.0 100.0,50.0 C 100.0,60.0 100.0,67.0 100.0,62.0 C 100.0,58.0 100.0,60.0 100.0,65.0 L 100.0,100.0 L 65.0,100.0 C 60.0,100.0 58.0,106.0 62.0,112.0 C 67.0,120.0 60.0,126.0 50.0,126.0 C 40.0,126.0 33.0,120.0 38.0,112.0 C 42.0,106.0 40.0,100.0 35.0,100.0 L 0.0,100.0 L 0.0,65.0 C 0.0,60.0 -6.0,58.0 -12.0,62.0 C -20.0,67.0 -26.0,60.0 -26.0,50.0 C -26.0,40.0 -20.0,33.0 -12.0,38.0 C -6.0,42.0 0.0,40.0 0.0,35.0 L 0.0,0.0 Z' fill='url(%23g)' stroke='rgba(160,185,255,0.35)' stroke-width='0.8'/></svg>"); }
.pz__piece--10 { --side: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-25 -25 150 150'><defs><linearGradient id='g' x1='0' y1='0' x2='0.3' y2='1'><stop offset='0' stop-color='%23162a62'/><stop offset='1' stop-color='%230b1a44'/></linearGradient></defs><path d='M0,0 L 35.0,0.0 C 40.0,0.0 42.0,6.0 38.0,12.0 C 33.0,20.0 40.0,26.0 50.0,26.0 C 60.0,26.0 67.0,20.0 62.0,12.0 C 58.0,6.0 60.0,0.0 65.0,0.0 L 100.0,0.0 L 100.0,35.0 C 100.0,40.0 94.0,42.0 88.0,38.0 C 80.0,33.0 74.0,40.0 74.0,50.0 C 74.0,60.0 80.0,67.0 88.0,62.0 C 94.0,58.0 100.0,60.0 100.0,65.0 L 100.0,100.0 L 65.0,100.0 C 60.0,100.0 58.0,106.0 62.0,112.0 C 67.0,120.0 60.0,126.0 50.0,126.0 C 40.0,126.0 33.0,120.0 38.0,112.0 C 42.0,106.0 40.0,100.0 35.0,100.0 L 0.0,100.0 L 0.0,65.0 C 0.0,60.0 0.0,58.0 0.0,62.0 C 0.0,67.0 0.0,60.0 0.0,50.0 C 0.0,40.0 0.0,33.0 0.0,38.0 C 0.0,42.0 0.0,40.0 0.0,35.0 L 0.0,0.0 Z' fill='url(%23g)'/></svg>"); --top: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-25 -25 150 150'><defs><linearGradient id='g' x1='0' y1='0' x2='0.3' y2='1'><stop offset='0' stop-color='%232a4590'/><stop offset='1' stop-color='%231d3474'/></linearGradient></defs><path d='M0,0 L 35.0,0.0 C 40.0,0.0 42.0,6.0 38.0,12.0 C 33.0,20.0 40.0,26.0 50.0,26.0 C 60.0,26.0 67.0,20.0 62.0,12.0 C 58.0,6.0 60.0,0.0 65.0,0.0 L 100.0,0.0 L 100.0,35.0 C 100.0,40.0 94.0,42.0 88.0,38.0 C 80.0,33.0 74.0,40.0 74.0,50.0 C 74.0,60.0 80.0,67.0 88.0,62.0 C 94.0,58.0 100.0,60.0 100.0,65.0 L 100.0,100.0 L 65.0,100.0 C 60.0,100.0 58.0,106.0 62.0,112.0 C 67.0,120.0 60.0,126.0 50.0,126.0 C 40.0,126.0 33.0,120.0 38.0,112.0 C 42.0,106.0 40.0,100.0 35.0,100.0 L 0.0,100.0 L 0.0,65.0 C 0.0,60.0 0.0,58.0 0.0,62.0 C 0.0,67.0 0.0,60.0 0.0,50.0 C 0.0,40.0 0.0,33.0 0.0,38.0 C 0.0,42.0 0.0,40.0 0.0,35.0 L 0.0,0.0 Z' fill='url(%23g)' stroke='rgba(160,185,255,0.35)' stroke-width='0.8'/></svg>"); }
.pz__piece--12 { --side: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-25 -25 150 150'><defs><linearGradient id='g' x1='0' y1='0' x2='0.3' y2='1'><stop offset='0' stop-color='%23162a62'/><stop offset='1' stop-color='%230b1a44'/></linearGradient></defs><path d='M0,0 L 35.0,0.0 C 40.0,0.0 42.0,6.0 38.0,12.0 C 33.0,20.0 40.0,26.0 50.0,26.0 C 60.0,26.0 67.0,20.0 62.0,12.0 C 58.0,6.0 60.0,0.0 65.0,0.0 L 100.0,0.0 L 100.0,35.0 C 100.0,40.0 100.0,42.0 100.0,38.0 C 100.0,33.0 100.0,40.0 100.0,50.0 C 100.0,60.0 100.0,67.0 100.0,62.0 C 100.0,58.0 100.0,60.0 100.0,65.0 L 100.0,100.0 L 65.0,100.0 C 60.0,100.0 58.0,106.0 62.0,112.0 C 67.0,120.0 60.0,126.0 50.0,126.0 C 40.0,126.0 33.0,120.0 38.0,112.0 C 42.0,106.0 40.0,100.0 35.0,100.0 L 0.0,100.0 L 0.0,65.0 C 0.0,60.0 6.0,58.0 12.0,62.0 C 20.0,67.0 26.0,60.0 26.0,50.0 C 26.0,40.0 20.0,33.0 12.0,38.0 C 6.0,42.0 0.0,40.0 0.0,35.0 L 0.0,0.0 Z' fill='url(%23g)'/></svg>"); --top: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-25 -25 150 150'><defs><linearGradient id='g' x1='0' y1='0' x2='0.3' y2='1'><stop offset='0' stop-color='%232a4590'/><stop offset='1' stop-color='%231d3474'/></linearGradient></defs><path d='M0,0 L 35.0,0.0 C 40.0,0.0 42.0,6.0 38.0,12.0 C 33.0,20.0 40.0,26.0 50.0,26.0 C 60.0,26.0 67.0,20.0 62.0,12.0 C 58.0,6.0 60.0,0.0 65.0,0.0 L 100.0,0.0 L 100.0,35.0 C 100.0,40.0 100.0,42.0 100.0,38.0 C 100.0,33.0 100.0,40.0 100.0,50.0 C 100.0,60.0 100.0,67.0 100.0,62.0 C 100.0,58.0 100.0,60.0 100.0,65.0 L 100.0,100.0 L 65.0,100.0 C 60.0,100.0 58.0,106.0 62.0,112.0 C 67.0,120.0 60.0,126.0 50.0,126.0 C 40.0,126.0 33.0,120.0 38.0,112.0 C 42.0,106.0 40.0,100.0 35.0,100.0 L 0.0,100.0 L 0.0,65.0 C 0.0,60.0 6.0,58.0 12.0,62.0 C 20.0,67.0 26.0,60.0 26.0,50.0 C 26.0,40.0 20.0,33.0 12.0,38.0 C 6.0,42.0 0.0,40.0 0.0,35.0 L 0.0,0.0 Z' fill='url(%23g)' stroke='rgba(160,185,255,0.35)' stroke-width='0.8'/></svg>"); }
.pz__piece--20 { --side: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-25 -25 150 150'><defs><linearGradient id='g' x1='0' y1='0' x2='0.3' y2='1'><stop offset='0' stop-color='%23162a62'/><stop offset='1' stop-color='%230b1a44'/></linearGradient></defs><path d='M0,0 L 35.0,0.0 C 40.0,0.0 42.0,6.0 38.0,12.0 C 33.0,20.0 40.0,26.0 50.0,26.0 C 60.0,26.0 67.0,20.0 62.0,12.0 C 58.0,6.0 60.0,0.0 65.0,0.0 L 100.0,0.0 L 100.0,35.0 C 100.0,40.0 106.0,42.0 112.0,38.0 C 120.0,33.0 126.0,40.0 126.0,50.0 C 126.0,60.0 120.0,67.0 112.0,62.0 C 106.0,58.0 100.0,60.0 100.0,65.0 L 100.0,100.0 L 65.0,100.0 C 60.0,100.0 58.0,100.0 62.0,100.0 C 67.0,100.0 60.0,100.0 50.0,100.0 C 40.0,100.0 33.0,100.0 38.0,100.0 C 42.0,100.0 40.0,100.0 35.0,100.0 L 0.0,100.0 L 0.0,65.0 C 0.0,60.0 0.0,58.0 0.0,62.0 C 0.0,67.0 0.0,60.0 0.0,50.0 C 0.0,40.0 0.0,33.0 0.0,38.0 C 0.0,42.0 0.0,40.0 0.0,35.0 L 0.0,0.0 Z' fill='url(%23g)'/></svg>"); --top: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-25 -25 150 150'><defs><linearGradient id='g' x1='0' y1='0' x2='0.3' y2='1'><stop offset='0' stop-color='%232a4590'/><stop offset='1' stop-color='%231d3474'/></linearGradient></defs><path d='M0,0 L 35.0,0.0 C 40.0,0.0 42.0,6.0 38.0,12.0 C 33.0,20.0 40.0,26.0 50.0,26.0 C 60.0,26.0 67.0,20.0 62.0,12.0 C 58.0,6.0 60.0,0.0 65.0,0.0 L 100.0,0.0 L 100.0,35.0 C 100.0,40.0 106.0,42.0 112.0,38.0 C 120.0,33.0 126.0,40.0 126.0,50.0 C 126.0,60.0 120.0,67.0 112.0,62.0 C 106.0,58.0 100.0,60.0 100.0,65.0 L 100.0,100.0 L 65.0,100.0 C 60.0,100.0 58.0,100.0 62.0,100.0 C 67.0,100.0 60.0,100.0 50.0,100.0 C 40.0,100.0 33.0,100.0 38.0,100.0 C 42.0,100.0 40.0,100.0 35.0,100.0 L 0.0,100.0 L 0.0,65.0 C 0.0,60.0 0.0,58.0 0.0,62.0 C 0.0,67.0 0.0,60.0 0.0,50.0 C 0.0,40.0 0.0,33.0 0.0,38.0 C 0.0,42.0 0.0,40.0 0.0,35.0 L 0.0,0.0 Z' fill='url(%23g)' stroke='rgba(160,185,255,0.35)' stroke-width='0.8'/></svg>"); }
.pz__piece--21 { --side: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-25 -25 150 150'><defs><linearGradient id='g' x1='0' y1='0' x2='0.3' y2='1'><stop offset='0' stop-color='%23162a62'/><stop offset='1' stop-color='%230b1a44'/></linearGradient></defs><path d='M0,0 L 35.0,0.0 C 40.0,0.0 42.0,-6.0 38.0,-12.0 C 33.0,-20.0 40.0,-26.0 50.0,-26.0 C 60.0,-26.0 67.0,-20.0 62.0,-12.0 C 58.0,-6.0 60.0,0.0 65.0,0.0 L 100.0,0.0 L 100.0,35.0 C 100.0,40.0 106.0,42.0 112.0,38.0 C 120.0,33.0 126.0,40.0 126.0,50.0 C 126.0,60.0 120.0,67.0 112.0,62.0 C 106.0,58.0 100.0,60.0 100.0,65.0 L 100.0,100.0 L 65.0,100.0 C 60.0,100.0 58.0,100.0 62.0,100.0 C 67.0,100.0 60.0,100.0 50.0,100.0 C 40.0,100.0 33.0,100.0 38.0,100.0 C 42.0,100.0 40.0,100.0 35.0,100.0 L 0.0,100.0 L 0.0,65.0 C 0.0,60.0 6.0,58.0 12.0,62.0 C 20.0,67.0 26.0,60.0 26.0,50.0 C 26.0,40.0 20.0,33.0 12.0,38.0 C 6.0,42.0 0.0,40.0 0.0,35.0 L 0.0,0.0 Z' fill='url(%23g)'/></svg>"); --top: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-25 -25 150 150'><defs><linearGradient id='g' x1='0' y1='0' x2='0.3' y2='1'><stop offset='0' stop-color='%232a4590'/><stop offset='1' stop-color='%231d3474'/></linearGradient></defs><path d='M0,0 L 35.0,0.0 C 40.0,0.0 42.0,-6.0 38.0,-12.0 C 33.0,-20.0 40.0,-26.0 50.0,-26.0 C 60.0,-26.0 67.0,-20.0 62.0,-12.0 C 58.0,-6.0 60.0,0.0 65.0,0.0 L 100.0,0.0 L 100.0,35.0 C 100.0,40.0 106.0,42.0 112.0,38.0 C 120.0,33.0 126.0,40.0 126.0,50.0 C 126.0,60.0 120.0,67.0 112.0,62.0 C 106.0,58.0 100.0,60.0 100.0,65.0 L 100.0,100.0 L 65.0,100.0 C 60.0,100.0 58.0,100.0 62.0,100.0 C 67.0,100.0 60.0,100.0 50.0,100.0 C 40.0,100.0 33.0,100.0 38.0,100.0 C 42.0,100.0 40.0,100.0 35.0,100.0 L 0.0,100.0 L 0.0,65.0 C 0.0,60.0 6.0,58.0 12.0,62.0 C 20.0,67.0 26.0,60.0 26.0,50.0 C 26.0,40.0 20.0,33.0 12.0,38.0 C 6.0,42.0 0.0,40.0 0.0,35.0 L 0.0,0.0 Z' fill='url(%23g)' stroke='rgba(160,185,255,0.35)' stroke-width='0.8'/></svg>"); }
.pz__piece--22 { --side: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-25 -25 150 150'><defs><linearGradient id='g' x1='0' y1='0' x2='0.3' y2='1'><stop offset='0' stop-color='%23162a62'/><stop offset='1' stop-color='%230b1a44'/></linearGradient></defs><path d='M0,0 L 35.0,0.0 C 40.0,0.0 42.0,6.0 38.0,12.0 C 33.0,20.0 40.0,26.0 50.0,26.0 C 60.0,26.0 67.0,20.0 62.0,12.0 C 58.0,6.0 60.0,0.0 65.0,0.0 L 100.0,0.0 L 100.0,35.0 C 100.0,40.0 100.0,42.0 100.0,38.0 C 100.0,33.0 100.0,40.0 100.0,50.0 C 100.0,60.0 100.0,67.0 100.0,62.0 C 100.0,58.0 100.0,60.0 100.0,65.0 L 100.0,100.0 L 65.0,100.0 C 60.0,100.0 58.0,100.0 62.0,100.0 C 67.0,100.0 60.0,100.0 50.0,100.0 C 40.0,100.0 33.0,100.0 38.0,100.0 C 42.0,100.0 40.0,100.0 35.0,100.0 L 0.0,100.0 L 0.0,65.0 C 0.0,60.0 6.0,58.0 12.0,62.0 C 20.0,67.0 26.0,60.0 26.0,50.0 C 26.0,40.0 20.0,33.0 12.0,38.0 C 6.0,42.0 0.0,40.0 0.0,35.0 L 0.0,0.0 Z' fill='url(%23g)'/></svg>"); --top: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-25 -25 150 150'><defs><linearGradient id='g' x1='0' y1='0' x2='0.3' y2='1'><stop offset='0' stop-color='%232a4590'/><stop offset='1' stop-color='%231d3474'/></linearGradient></defs><path d='M0,0 L 35.0,0.0 C 40.0,0.0 42.0,6.0 38.0,12.0 C 33.0,20.0 40.0,26.0 50.0,26.0 C 60.0,26.0 67.0,20.0 62.0,12.0 C 58.0,6.0 60.0,0.0 65.0,0.0 L 100.0,0.0 L 100.0,35.0 C 100.0,40.0 100.0,42.0 100.0,38.0 C 100.0,33.0 100.0,40.0 100.0,50.0 C 100.0,60.0 100.0,67.0 100.0,62.0 C 100.0,58.0 100.0,60.0 100.0,65.0 L 100.0,100.0 L 65.0,100.0 C 60.0,100.0 58.0,100.0 62.0,100.0 C 67.0,100.0 60.0,100.0 50.0,100.0 C 40.0,100.0 33.0,100.0 38.0,100.0 C 42.0,100.0 40.0,100.0 35.0,100.0 L 0.0,100.0 L 0.0,65.0 C 0.0,60.0 6.0,58.0 12.0,62.0 C 20.0,67.0 26.0,60.0 26.0,50.0 C 26.0,40.0 20.0,33.0 12.0,38.0 C 6.0,42.0 0.0,40.0 0.0,35.0 L 0.0,0.0 Z' fill='url(%23g)' stroke='rgba(160,185,255,0.35)' stroke-width='0.8'/></svg>"); }
.pz__piece--11 { --side: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-25 -25 150 150'><defs><linearGradient id='g' x1='0' y1='0' x2='0.3' y2='1'><stop offset='0' stop-color='%2321408a'/><stop offset='1' stop-color='%2314306e'/></linearGradient></defs><path d='M0,0 L 35.0,0.0 C 40.0,0.0 42.0,6.0 38.0,12.0 C 33.0,20.0 40.0,26.0 50.0,26.0 C 60.0,26.0 67.0,20.0 62.0,12.0 C 58.0,6.0 60.0,0.0 65.0,0.0 L 100.0,0.0 L 100.0,35.0 C 100.0,40.0 106.0,42.0 112.0,38.0 C 120.0,33.0 126.0,40.0 126.0,50.0 C 126.0,60.0 120.0,67.0 112.0,62.0 C 106.0,58.0 100.0,60.0 100.0,65.0 L 100.0,100.0 L 65.0,100.0 C 60.0,100.0 58.0,94.0 62.0,88.0 C 67.0,80.0 60.0,74.0 50.0,74.0 C 40.0,74.0 33.0,80.0 38.0,88.0 C 42.0,94.0 40.0,100.0 35.0,100.0 L 0.0,100.0 L 0.0,65.0 C 0.0,60.0 -6.0,58.0 -12.0,62.0 C -20.0,67.0 -26.0,60.0 -26.0,50.0 C -26.0,40.0 -20.0,33.0 -12.0,38.0 C -6.0,42.0 0.0,40.0 0.0,35.0 L 0.0,0.0 Z' fill='url(%23g)'/></svg>"); --top: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-25 -25 150 150'><defs><linearGradient id='g' x1='0' y1='0' x2='0.3' y2='1'><stop offset='0' stop-color='%233d5fb8'/><stop offset='1' stop-color='%232f4f9e'/></linearGradient></defs><path d='M0,0 L 35.0,0.0 C 40.0,0.0 42.0,6.0 38.0,12.0 C 33.0,20.0 40.0,26.0 50.0,26.0 C 60.0,26.0 67.0,20.0 62.0,12.0 C 58.0,6.0 60.0,0.0 65.0,0.0 L 100.0,0.0 L 100.0,35.0 C 100.0,40.0 106.0,42.0 112.0,38.0 C 120.0,33.0 126.0,40.0 126.0,50.0 C 126.0,60.0 120.0,67.0 112.0,62.0 C 106.0,58.0 100.0,60.0 100.0,65.0 L 100.0,100.0 L 65.0,100.0 C 60.0,100.0 58.0,94.0 62.0,88.0 C 67.0,80.0 60.0,74.0 50.0,74.0 C 40.0,74.0 33.0,80.0 38.0,88.0 C 42.0,94.0 40.0,100.0 35.0,100.0 L 0.0,100.0 L 0.0,65.0 C 0.0,60.0 -6.0,58.0 -12.0,62.0 C -20.0,67.0 -26.0,60.0 -26.0,50.0 C -26.0,40.0 -20.0,33.0 -12.0,38.0 C -6.0,42.0 0.0,40.0 0.0,35.0 L 0.0,0.0 Z' fill='url(%23g)' stroke='rgba(196,216,255,0.5)' stroke-width='0.8'/></svg>"); }
/* PZ-END */

/* ==========================================================================
   «Библиотека знаний» (biblioteka-znaniy.html) и страница статьи (statya.html)
   ========================================================================== */

/* ---- Hero: «полка знаний» — матовые блоки-книги разной высоты из разлёта встают в ряд на полку ---- */
.orbit--lib {
  --w: calc(var(--size) * 0.09);    /* толщина книги */
  --g: calc(var(--w) * 1.12);       /* шаг ряда */
  --spread: 0.7;                    /* разлёт — в пределах правой половины экрана */
  animation: slabs-sway 18s ease-in-out infinite alternate;
}

.hero--lib .hero-visual::before {
  width: calc(var(--size) * 1.3);
  height: calc(var(--size) * 1.3);
  background: radial-gradient(circle closest-side, rgba(0, 85, 255, 0.2) 0%, rgba(0, 85, 255, 0.13) 25%, rgba(0, 85, 255, 0.06) 55%, rgba(0, 85, 255, 0.02) 80%, rgba(0, 85, 255, 0) 100%);
}

.shelf {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  transform: translateY(calc(var(--w) * 2.8));
}

/* книга: узкая (--w), глубокая (2.6·--w), высота --k·--w; низ — на полке */
.book {
  --h: calc(var(--w) * var(--k));
  position: absolute;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  animation: book-gather 11s cubic-bezier(0.5, 0, 0.3, 1) infinite;
  animation-delay: calc(var(--d) - 11s);
}

.book .slab__face--front,
.book .slab__face--back,
.book .slab__face--left,
.book .slab__face--right,
.book .slab__face--top,
.book .slab__face--bottom {
  --wx: var(--w);
  --dz: calc(var(--w) * 3.2);
}

.book .slab__face--front,
.book .slab__face--back { width: var(--wx); margin: calc(var(--h) / -2) 0 0 calc(var(--wx) / -2); }
.book .slab__face--left,
.book .slab__face--right { width: var(--dz); margin: calc(var(--h) / -2) 0 0 calc(var(--dz) / -2); }
.book .slab__face--top,
.book .slab__face--bottom { width: var(--wx); height: var(--dz); margin: calc(var(--dz) / -2) 0 0 calc(var(--wx) / -2); }
.book .slab__face--front  { transform: translateZ(calc(var(--dz) / 2)); }
.book .slab__face--back   { transform: rotateY(180deg) translateZ(calc(var(--dz) / 2)); }
.book .slab__face--left   { transform: rotateY(-90deg) translateZ(calc(var(--wx) / 2)); }
.book .slab__face--right  { transform: rotateY(90deg) translateZ(calc(var(--wx) / 2)); }

@keyframes book-gather {
  0%, 8% {
    transform: translate3d(calc((var(--i) - 3) * var(--g) + var(--dx) * var(--g) * var(--spread, 1)),
                           calc(var(--h) / -2 + var(--dy) * var(--g) * var(--spread, 1)),
                           calc(var(--dz) * var(--g) * var(--spread, 1)))
               rotateZ(var(--rz)) rotateY(-30deg);
  }
  34%, 86% { transform: translate3d(calc((var(--i) - 3) * var(--g)), calc(var(--h) / -2), 0); }
  100% {
    transform: translate3d(calc((var(--i) - 3) * var(--g) + var(--dx) * var(--g) * var(--spread, 1)),
                           calc(var(--h) / -2 + var(--dy) * var(--g) * var(--spread, 1)),
                           calc(var(--dz) * var(--g) * var(--spread, 1)))
               rotateZ(var(--rz)) rotateY(-30deg);
  }
}

/* полка под книгами — неподвижна */
.book--shelf {
  --k: 0.35;
  animation: none;
  transform: translateY(calc(var(--h) / 2));
}

.book.book--shelf .slab__face--front,
.book.book--shelf .slab__face--back,
.book.book--shelf .slab__face--top,
.book.book--shelf .slab__face--bottom { --wx: calc(var(--g) * 8); }
.book.book--shelf .slab__face--left,
.book.book--shelf .slab__face--right,
.book.book--shelf .slab__face--top,
.book.book--shelf .slab__face--bottom { --dz: calc(var(--w) * 4); }

.book--lead .slab__face--top   { --c1: #3d5fb8; --c2: #2f4f9e; }
.book--lead .slab__face--front { --c1: #2a4a98; --c2: #203c80; }
.book--lead .slab__face--left  { --c1: #2c4c9c; --c2: #213d82; }
.book--lead .slab__face--right { --c1: #1b3474; --c2: #152b62; }

@media (prefers-reduced-motion: reduce) {
  .orbit--lib { animation: none; transform: rotateX(-22deg) rotateY(-38deg); }
  .book { animation: none; transform: translate3d(calc((var(--i) - 3) * var(--g)), calc(var(--h) / -2), 0); }
}

@media (min-width: 850px) {
  .hero--lib .hero-visual { top: 7vh; }
}

@media (max-width: 849px) {
  .hero--product .hero-visual .orbit--lib {
    --spread: 0.4;
    margin-top: calc(70px - var(--size) * 0.162);
    margin-bottom: calc(var(--size) * 0.02);
  }
  .hero--lib + .section { padding-top: 0; }
}

/* ---- Каталог: список статей в одну колонку, строка целиком — ссылка ---- */
.library.section {
  padding-top: 96px;
}

.lib-list {
  margin-top: 40px;
  border-top: 1px solid rgba(140, 165, 255, 0.14);
}

.lib-row[hidden] {
  display: none;
}

.lib-row__link {
  position: relative;
  display: block;
  padding: 32px 96px 32px 24px;
  border-bottom: 1px solid rgba(140, 165, 255, 0.14);
  color: inherit;
  text-decoration: none;
  transition: background-color 250ms var(--ease);
}

.lib-row__link:hover,
.lib-row__link:focus-visible {
  background: rgba(0, 85, 255, 0.07);
  outline: none;
}

.lib-row__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  font-size: 12px;
  font-weight: 300;
  color: var(--text-muted);
}

.lib-row__cat {
  color: #c4d8ff;
}

.lib-row__title {
  max-width: 820px;
  margin-top: 12px;
  font-size: 22px;
  font-weight: 400;
  line-height: 1.3;
  color: #ffffff;
}

.lib-row__summary {
  max-width: 820px;
  margin-top: 10px;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--text-muted);
}

.lib-row__time {
  margin-top: 14px;
  font-size: 12px;
  font-weight: 300;
  color: #8fa0c8;
}

/* стрелка справа: по наведению проявляется и сдвигается */
.lib-row__arrow {
  position: absolute;
  top: 50%;
  right: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-top: -20px;
  border: 1px solid rgba(196, 216, 255, 0.3);
  border-radius: 50%;
  color: #c4d8ff;
  opacity: 0.35;
  transition: opacity 250ms var(--ease), transform 250ms var(--ease), border-color 250ms var(--ease);
}

.lib-row__arrow svg {
  width: 14px;
  height: 14px;
}

.lib-row__link:hover .lib-row__arrow,
.lib-row__link:focus-visible .lib-row__arrow {
  opacity: 1;
  border-color: rgba(196, 216, 255, 0.7);
  /* стрелка «↗» поворачивается по часовой на 45° и смотрит вправо */
  transform: rotate(45deg);
}

@media (max-width: 640px) {
  .library.section { padding-top: 72px; }
  .lib-list { margin-top: 28px; }
  .lib-row__title { font-size: 18px; }
}

/* ---- Страница статьи ---- */
.article.section {
  padding-top: 150px;
}

.article__inner {
  max-width: 760px;
  margin-top: 40px;
}

.article__title {
  margin-top: 16px;
  font-size: 40px;
  font-weight: 400;
  line-height: 1.2;
}

.article__body {
  margin-top: 32px;
}

.article__body p {
  margin-top: 18px;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.85);
}

.article__body .article__lead {
  margin-top: 0;
  font-size: 19px;
  line-height: 1.6;
  color: #c4d8ff;
}

.article__body h2 {
  margin-top: 40px;
  font-size: 24px;
  font-weight: 400;
}

.article__back {
  margin-top: 48px;
  padding: 12px 18px;
  font-size: 12px;
  border-radius: 2px;
}

@media (max-width: 640px) {
  .article.section { padding-top: 110px; }
  .article__title { font-size: 28px; }
  .article__body .article__lead { font-size: 17px; }
}

/* ---- Политика конфиденциальности (politika.html): длинный юридический текст на основе страницы статьи ---- */
.article--legal {
  padding-bottom: var(--section-gap); /* последний блок страницы — без формы под ним */
}

/* текст документа — на всю ширину контейнера (по сетке), а не узкой колонкой статьи */
.article--legal .article__inner {
  max-width: none;
}

.article__meta--legal {
  margin-top: 16px;
  font-size: 14px;
  font-weight: 300;
  color: var(--text-muted);
}

.article--legal .article__body {
  margin-top: 8px;
}

.article--legal .article__body p {
  margin-top: 14px;
  font-size: 15px;
  line-height: 1.7;
}

/* вступление согласия — тем же размером, что и остальной текст документа */
.article--legal .article__body .article__lead {
  margin-top: 24px;
  font-size: 15px;
  line-height: 1.7;
}

@media (max-width: 640px) {
  .article--legal .article__body .article__lead { font-size: 14px; }
}

.article__body ul {
  margin-top: 12px;
  padding: 0;
  list-style: none;
}

.article__body li {
  position: relative;
  margin-top: 8px;
  padding-left: 22px;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.85);
}

.article__body li::before {
  content: '';
  position: absolute;
  top: 0.8em;
  left: 4px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #8fb0ff;
}

.article__body a {
  color: #c4d8ff;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.article__body a:hover {
  color: #ffffff;
}

@media (max-width: 640px) {
  .article--legal .article__body p,
  .article__body li { font-size: 14px; }
}

/* «Библиотека знаний», hero (десктоп): заголовок уже — «аналитика и методология» целиком на второй строке */
@media (min-width: 850px) {
  .hero--lib .hero__title {
    max-width: 11.5em;
  }
}

/* «Библиотека знаний»: статьи — полноценные карточки с линиями со всех сторон
   (десктоп — в 2 колонки, планшет и телефон — в одну); время чтения слева внизу, стрелка справа внизу */
.lib-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border-top: 0;
  border-left: 1px solid rgba(140, 165, 255, 0.14);
  padding-top: 1px;
}

/* верхняя линия — у каждой карточки (а не у всего списка), чтобы при фильтре не торчала;
   -1px — общие линии между рядами не удваиваются */
.lib-row {
  display: flex;
  margin-top: -1px;
}

.lib-row__link {
  flex: 1;
  display: flex;
  flex-direction: column;
  border-top: 1px solid rgba(140, 165, 255, 0.14);
  border-right: 1px solid rgba(140, 165, 255, 0.14);
  padding: 32px 32px 88px;
}

.lib-row__time {
  margin-top: auto;
  padding-top: 14px;
}

.lib-row__arrow {
  top: auto;
  bottom: 28px;
  margin-top: 0;
}

.lib-row__link .lib-row__time {
  position: absolute;
  left: 32px;
  bottom: 38px;
}

@media (min-width: 901px) {
  .lib-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .lib-row__link {
    padding: 24px 20px 80px;
  }
  /* дата, под ней раздел; от раздела до заголовка — больше воздуха */
  .lib-row .lib-row__meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .lib-row .lib-row__title {
    margin-top: 20px;
  }
  .lib-row__arrow {
    right: 20px;
    bottom: 22px;
    opacity: 0.6;
  }
  .lib-row__link .lib-row__time {
    left: 20px;
    bottom: 32px;
  }
}

/* ==========================================================================
   «Исследования Saints» (issledovaniya.html) и страница исследования
   ========================================================================== */

/* ---- Hero: «срез рынка» — радиальная диаграмма из матовых столбиков (два кольца) вырастает
   по кругу; в центре колонна с шаром, который вращается (круглый шар рисует main.js) ---- */
@property --rs { syntax: '<number>'; inherits: false; initial-value: 0.08; }

.orbit--radial {
  animation: radial-sway 18s ease-in-out infinite alternate;
}

@keyframes radial-sway {
  from { transform: rotateX(-30deg) rotateY(-30deg); }
  to { transform: rotateX(-30deg) rotateY(15deg); }
}

.hero--radial .hero-visual::before {
  width: calc(var(--size) * 1.3);
  height: calc(var(--size) * 1.3);
  background: radial-gradient(circle closest-side, rgba(0, 85, 255, 0.2) 0%, rgba(0, 85, 255, 0.13) 25%, rgba(0, 85, 255, 0.06) 55%, rgba(0, 85, 255, 0.02) 80%, rgba(0, 85, 255, 0) 100%);
}

.radial {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  transform: translateY(calc(var(--size) * 0.14));
}

.rseg {
  --w: calc(var(--size) * var(--w0));
  --h: calc(var(--w) * var(--k));
  position: absolute;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  transform: rotateY(var(--a)) translateZ(calc(var(--size) * var(--r))) scaleY(var(--rs)) translateY(calc(var(--h) / -2));
  animation: rseg-grow 10s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  animation-delay: calc(var(--d) - 10s);
}

/* столбик вырастает от основания, держится и опускается */
@keyframes rseg-grow {
  0%, 6% { --rs: 0.08; }
  24%, 84% { --rs: 1; }
  96%, 100% { --rs: 0.08; }
}

.rseg--core .slab__face--top   { --c1: #3d5fb8; --c2: #2f4f9e; }
.rseg--core .slab__face--front { --c1: #2a4a98; --c2: #203c80; }
.rseg--core .slab__face--left  { --c1: #2c4c9c; --c2: #213d82; }
.rseg--core .slab__face--right { --c1: #1b3474; --c2: #152b62; }

/* метка шара над центральной колонной */
.rseg__ball-pos {
  position: absolute;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  transform: translateY(calc(var(--h) / -2 - var(--w) * 0.75));
}

.rseg__ball {
  position: absolute;
  left: calc(var(--w) * -0.75);
  top: calc(var(--w) * -0.75);
  width: calc(var(--w) * 1.5);
  height: calc(var(--w) * 1.5);
  border-radius: 50%;
  visibility: hidden;
  animation: radial-ball-face 18s ease-in-out infinite alternate, radial-ball-fade 10s linear infinite;
  animation-delay: 0s, -9.1s;
}

@keyframes radial-ball-face {
  from { transform: rotateY(30deg) rotateX(30deg); }
  to { transform: rotateY(-15deg) rotateX(30deg); }
}

@keyframes radial-ball-fade {
  0%, 26% { opacity: 0; }
  31%, 82% { opacity: 1; }
  86%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .orbit--radial { animation: none; transform: rotateX(-30deg) rotateY(-10deg); }
  .rseg { animation: none; --rs: 1; }
  .rseg__ball { animation: none; opacity: 1; }
}

@media (min-width: 850px) {
  .hero--radial .hero-visual { top: 6vh; }
}

@media (max-width: 849px) {
  .hero--product .hero-visual .orbit--radial {
    margin-top: calc(18px - var(--size) * 0.16);
    margin-bottom: calc(var(--size) * -0.11);
  }
}

/* ---- Список исследований: большая карточка ---- */
.research--page.section {
  padding-top: 80px;
}

.research--page .research__list {
  margin-top: 0;
}

.research-feature {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 40px;
  padding: 12px;
  background: linear-gradient(160deg, #0c1436 0%, #080d28 55%, #060918 100%);
  border: 1px solid rgba(140, 165, 255, 0.14);
  border-radius: var(--radius-md);
}

.research-feature__visual {
  min-height: 380px;
}

.research-feature__main {
  padding: 36px 36px 36px 0;
}

.research-feature__title {
  margin-top: 14px;
  font-size: 30px;
  font-weight: 400;
  line-height: 1.2;
}

.research-feature__text {
  margin-top: 16px;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--text-muted);
}

.research-feature__list {
  margin-top: 14px;
  padding-left: 20px;
  list-style: decimal;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.7;
  color: #ffffff;
}

.research-feature__list li::marker {
  color: #8fb0ff;
}

.research-feature__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 28px;
  padding: 12px 18px;
  font-size: 12px;
  border-radius: 2px;
}

.research-feature__btn svg {
  width: 14px;
  height: 14px;
}

.research__soon {
  margin-top: 28px;
  font-size: 14px;
  font-weight: 300;
  color: var(--text-muted);
}

.research__soon a {
  color: #c4d8ff;
}

@media (max-width: 900px) {
  .research-feature { grid-template-columns: 1fr; gap: 0; }
  .research-feature__visual { min-height: 260px; }
  .research-feature__main { padding: 24px 20px 28px; }
  .research-feature__title { font-size: 24px; }
}

/* ---- Страница исследования ---- */
.report-method.section {
  padding-top: 96px;
}

.report-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid rgba(140, 165, 255, 0.14);
  border-left: 1px solid rgba(140, 165, 255, 0.14);
}

.report-stats li {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 28px;
  border-right: 1px solid rgba(140, 165, 255, 0.14);
  border-bottom: 1px solid rgba(140, 165, 255, 0.14);
  background: rgba(10, 20, 55, 0.4);
}

.report-stats__value {
  font-size: 40px;
  font-weight: 300;
  line-height: 1.1;
  color: #c4d8ff;
}

.report-stats__label {
  font-size: 13px;
  font-weight: 300;
  color: var(--text-muted);
}

.report-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
  margin-top: 72px;
}

.report-limits .report-split {
  margin-top: 0;
}

.report-method__text p {
  font-size: 15px;
  font-weight: 300;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.85);
}

.report-method__text p + p {
  margin-top: 14px;
}

.report-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  gap: 20px;
  margin-top: 48px;
}

.report-panel {
  padding: 32px;
  border: 1px solid rgba(140, 165, 255, 0.14);
  border-radius: var(--radius-md);
  background: rgba(10, 20, 55, 0.4);
}

.report-panel__title {
  font-size: 16px;
  font-weight: 400;
  color: #ffffff;
}

/* кольцевая диаграмма */
.donut {
  display: flex;
  align-items: center;
  gap: 32px;
  margin-top: 24px;
}

.donut__chart {
  position: relative;
  flex: none;
  width: 180px;
  height: 180px;
  border-radius: 50%;
}

.donut__chart::before {
  content: '';
  position: absolute;
  inset: 26px;
  border-radius: 50%;
  background: #0a1233;
}

.donut__chart span {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 300;
  color: #ffffff;
}

.donut__chart small {
  font-size: 11px;
  color: var(--text-muted);
}

.donut__legend {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 14px;
  font-weight: 300;
  color: var(--text-muted);
}

.donut__legend b {
  font-weight: 400;
  color: #ffffff;
}

.donut__dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 10px;
  border-radius: 50%;
  vertical-align: middle;
}

/* горизонтальные столбики */
.rbars {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 24px;
}

.rbars--wide {
  margin-top: 0;
}

.rbar {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 44px;
  align-items: center;
  gap: 16px;
  font-size: 14px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.85);
}

.rbar__track {
  height: 8px;
  border-radius: 4px;
  background: rgba(140, 165, 255, 0.1);
  overflow: hidden;
}

.rbar__fill {
  display: block;
  width: var(--v);
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, #1d3c9e, #2f6bff);
}

.rbar__value {
  text-align: right;
  color: #c4d8ff;
}

/* ключевые выводы — сетка «Анатомии» в 2 колонки */
.rfind {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.rfind__value {
  font-size: 44px;
  font-weight: 300;
  line-height: 1;
  color: #c4d8ff;
}

.rfind__text {
  max-width: 440px;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.85);
}

/* комментарии Андрея */
.rquotes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 48px;
}

.rquote {
  display: flex;
  flex-direction: column;
  padding: 28px;
  border: 1px solid rgba(140, 165, 255, 0.14);
  border-radius: var(--radius-md);
  background: rgba(10, 20, 55, 0.4);
}

.rquote__topic {
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #8fb0ff;
}

.rquote__text {
  margin: 16px 0 28px;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.6;
  color: #ffffff;
}

.rquote__author {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: auto;
  font-size: 12px;
  font-weight: 300;
  line-height: 1.4;
  color: var(--text-muted);
}

.rquote__author b {
  font-size: 14px;
  font-weight: 400;
  color: #ffffff;
}

.rquote__author img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  object-position: top;
  background: #0f1d4a;
}

@media (max-width: 1024px) {
  .report-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rquotes { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .report-split,
  .report-grid { grid-template-columns: 1fr; gap: 24px; }
  .rfind { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .report-method.section { padding-top: 72px; }
  .report-stats li { padding: 20px 16px; }
  .report-stats__value { font-size: 28px; }
  .report-panel { padding: 22px 18px; }
  .donut { flex-direction: column; align-items: flex-start; }
  .rbar { grid-template-columns: 1fr 44px; gap: 6px 12px; }
  .rbar__label { grid-column: 1 / -1; }
  .rfind__value { font-size: 34px; }
}

@media (max-width: 849px) {
  .hero--radial + .research--page.section,
  .hero--radial + .report-method.section { padding-top: 40px; }
}

/* LENS-START ==============================================================
   «Исследования», hero: «под лупой» — матовая лупа (кольцо из сегментов и ручка) медленно ходит
   по кругу над сеткой 5×5 матовых блоков; блоки под линзой поднимаются. Высоты блоков посчитаны
   под путь лупы скриптом gen_lens.py
   ========================================================================== */
.orbit--lens {
  --g: calc(var(--size) * 0.13);   /* шаг сетки */
  animation: radial-sway 18s ease-in-out infinite alternate;
}

.hero--lens .hero-visual::before {
  width: calc(var(--size) * 1.3);
  height: calc(var(--size) * 1.3);
  background: radial-gradient(circle closest-side, rgba(0, 85, 255, 0.2) 0%, rgba(0, 85, 255, 0.13) 25%, rgba(0, 85, 255, 0.06) 55%, rgba(0, 85, 255, 0.02) 80%, rgba(0, 85, 255, 0) 100%);
}

.lens-grid {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  transform: translateY(calc(var(--g) * 0.9));
}

.lens-cell {
  --w: calc(var(--g) * 0.84);
  --h: var(--w);
  position: absolute;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  transform: translate3d(calc(var(--x) * var(--g)), 0, calc(var(--z) * var(--g))) scaleY(var(--s)) translateY(calc(var(--h) / -2));
  animation: none 12s linear infinite;
}

/* лупа: позиция по кругу над сеткой, наклон — линза смотрит вниз под углом */
.lens {
  position: absolute;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  animation: lens-path 12s linear infinite;
}

@keyframes lens-path { 0.0% { transform: translate3d(calc(var(--g) * 0.000), calc(var(--g) * -1.5), calc(var(--g) * -0.977)); } 2.5% { transform: translate3d(calc(var(--g) * 0.180), calc(var(--g) * -1.5), calc(var(--g) * -0.965)); } 5.0% { transform: translate3d(calc(var(--g) * 0.355), calc(var(--g) * -1.5), calc(var(--g) * -0.930)); } 7.5% { transform: translate3d(calc(var(--g) * 0.522), calc(var(--g) * -1.5), calc(var(--g) * -0.871)); } 10.0% { transform: translate3d(calc(var(--g) * 0.676), calc(var(--g) * -1.5), calc(var(--g) * -0.791)); } 12.5% { transform: translate3d(calc(var(--g) * 0.813), calc(var(--g) * -1.5), calc(var(--g) * -0.691)); } 15.0% { transform: translate3d(calc(var(--g) * 0.930), calc(var(--g) * -1.5), calc(var(--g) * -0.575)); } 17.5% { transform: translate3d(calc(var(--g) * 1.025), calc(var(--g) * -1.5), calc(var(--g) * -0.444)); } 20.0% { transform: translate3d(calc(var(--g) * 1.094), calc(var(--g) * -1.5), calc(var(--g) * -0.302)); } 22.5% { transform: translate3d(calc(var(--g) * 1.136), calc(var(--g) * -1.5), calc(var(--g) * -0.153)); } 25.0% { transform: translate3d(calc(var(--g) * 1.150), calc(var(--g) * -1.5), calc(var(--g) * 0.000)); } 27.5% { transform: translate3d(calc(var(--g) * 1.136), calc(var(--g) * -1.5), calc(var(--g) * 0.153)); } 30.0% { transform: translate3d(calc(var(--g) * 1.094), calc(var(--g) * -1.5), calc(var(--g) * 0.302)); } 32.5% { transform: translate3d(calc(var(--g) * 1.025), calc(var(--g) * -1.5), calc(var(--g) * 0.444)); } 35.0% { transform: translate3d(calc(var(--g) * 0.930), calc(var(--g) * -1.5), calc(var(--g) * 0.575)); } 37.5% { transform: translate3d(calc(var(--g) * 0.813), calc(var(--g) * -1.5), calc(var(--g) * 0.691)); } 40.0% { transform: translate3d(calc(var(--g) * 0.676), calc(var(--g) * -1.5), calc(var(--g) * 0.791)); } 42.5% { transform: translate3d(calc(var(--g) * 0.522), calc(var(--g) * -1.5), calc(var(--g) * 0.871)); } 45.0% { transform: translate3d(calc(var(--g) * 0.355), calc(var(--g) * -1.5), calc(var(--g) * 0.930)); } 47.5% { transform: translate3d(calc(var(--g) * 0.180), calc(var(--g) * -1.5), calc(var(--g) * 0.965)); } 50.0% { transform: translate3d(calc(var(--g) * 0.000), calc(var(--g) * -1.5), calc(var(--g) * 0.977)); } 52.5% { transform: translate3d(calc(var(--g) * -0.180), calc(var(--g) * -1.5), calc(var(--g) * 0.965)); } 55.0% { transform: translate3d(calc(var(--g) * -0.355), calc(var(--g) * -1.5), calc(var(--g) * 0.930)); } 57.5% { transform: translate3d(calc(var(--g) * -0.522), calc(var(--g) * -1.5), calc(var(--g) * 0.871)); } 60.0% { transform: translate3d(calc(var(--g) * -0.676), calc(var(--g) * -1.5), calc(var(--g) * 0.791)); } 62.5% { transform: translate3d(calc(var(--g) * -0.813), calc(var(--g) * -1.5), calc(var(--g) * 0.691)); } 65.0% { transform: translate3d(calc(var(--g) * -0.930), calc(var(--g) * -1.5), calc(var(--g) * 0.575)); } 67.5% { transform: translate3d(calc(var(--g) * -1.025), calc(var(--g) * -1.5), calc(var(--g) * 0.444)); } 70.0% { transform: translate3d(calc(var(--g) * -1.094), calc(var(--g) * -1.5), calc(var(--g) * 0.302)); } 72.5% { transform: translate3d(calc(var(--g) * -1.136), calc(var(--g) * -1.5), calc(var(--g) * 0.153)); } 75.0% { transform: translate3d(calc(var(--g) * -1.150), calc(var(--g) * -1.5), calc(var(--g) * 0.000)); } 77.5% { transform: translate3d(calc(var(--g) * -1.136), calc(var(--g) * -1.5), calc(var(--g) * -0.153)); } 80.0% { transform: translate3d(calc(var(--g) * -1.094), calc(var(--g) * -1.5), calc(var(--g) * -0.302)); } 82.5% { transform: translate3d(calc(var(--g) * -1.025), calc(var(--g) * -1.5), calc(var(--g) * -0.444)); } 85.0% { transform: translate3d(calc(var(--g) * -0.930), calc(var(--g) * -1.5), calc(var(--g) * -0.575)); } 87.5% { transform: translate3d(calc(var(--g) * -0.813), calc(var(--g) * -1.5), calc(var(--g) * -0.691)); } 90.0% { transform: translate3d(calc(var(--g) * -0.676), calc(var(--g) * -1.5), calc(var(--g) * -0.791)); } 92.5% { transform: translate3d(calc(var(--g) * -0.522), calc(var(--g) * -1.5), calc(var(--g) * -0.871)); } 95.0% { transform: translate3d(calc(var(--g) * -0.355), calc(var(--g) * -1.5), calc(var(--g) * -0.930)); } 97.5% { transform: translate3d(calc(var(--g) * -0.180), calc(var(--g) * -1.5), calc(var(--g) * -0.965)); } 100.0% { transform: translate3d(calc(var(--g) * -0.000), calc(var(--g) * -1.5), calc(var(--g) * -0.977)); } }

.lens__tilt {
  position: absolute;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  transform: rotateX(78deg);
}

.lens__seg {
  --w: calc(var(--g) * 0.46);
  --h: calc(var(--g) * 0.16);
  position: absolute;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  transform: rotateZ(var(--a)) translateY(calc(var(--g) * -1.2)) rotateX(90deg);
}

.lens__seg .slab__face--front,
.lens__seg .slab__face--back,
.lens__seg .slab__face--left,
.lens__seg .slab__face--right {
  height: var(--h);
}

.lens__handle {
  --w: calc(var(--g) * 0.22);
  --h: calc(var(--g) * 1.3);
  position: absolute;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  transform: rotateZ(135deg) translateY(calc(var(--g) * 1.95)) rotateX(90deg);
}

.lens__seg .slab__face,
.lens__handle .slab__face { --c1: #3a5bb2; --c2: #2a4890; backface-visibility: visible; }

@media (prefers-reduced-motion: reduce) {
  .orbit--lens { animation: none; transform: rotateX(-30deg) rotateY(-10deg); }
  .lens-cell, .lens { animation-play-state: paused; }
}

@media (min-width: 850px) {
  .hero--lens .hero-visual { top: 6vh; }
}

@media (max-width: 849px) {
  .hero--product .hero-visual .orbit--lens {
    margin-top: calc(-10px - var(--size) * 0.12);
    margin-bottom: calc(var(--size) * -0.12);
  }
  .hero--lens + .research--page.section { padding-top: 70px; }
  .hero--lens + .report-method.section { padding-top: 70px; }
}

@keyframes lc00 { 0.0% { --s: 0.35; } 2.5% { --s: 0.35; } 5.0% { --s: 0.35; } 7.5% { --s: 0.35; } 10.0% { --s: 0.35; } 12.5% { --s: 0.35; } 15.0% { --s: 0.35; } 17.5% { --s: 0.35; } 20.0% { --s: 0.35; } 22.5% { --s: 0.35; } 25.0% { --s: 0.35; } 27.5% { --s: 0.35; } 30.0% { --s: 0.35; } 32.5% { --s: 0.35; } 35.0% { --s: 0.35; } 37.5% { --s: 0.35; } 40.0% { --s: 0.35; } 42.5% { --s: 0.35; } 45.0% { --s: 0.35; } 47.5% { --s: 0.35; } 50.0% { --s: 0.35; } 52.5% { --s: 0.35; } 55.0% { --s: 0.35; } 57.5% { --s: 0.35; } 60.0% { --s: 0.35; } 62.5% { --s: 0.35; } 65.0% { --s: 0.35; } 67.5% { --s: 0.35; } 70.0% { --s: 0.35; } 72.5% { --s: 0.35; } 75.0% { --s: 0.35; } 77.5% { --s: 0.35; } 80.0% { --s: 0.35; } 82.5% { --s: 0.35; } 85.0% { --s: 0.35; } 87.5% { --s: 0.35; } 90.0% { --s: 0.35; } 92.5% { --s: 0.35; } 95.0% { --s: 0.35; } 97.5% { --s: 0.35; } 100.0% { --s: 0.35; } }
.lens-cell--00 { animation-name: lc00; }
@keyframes lc10 { 0.0% { --s: 0.35; } 2.5% { --s: 0.35; } 5.0% { --s: 0.35; } 7.5% { --s: 0.35; } 10.0% { --s: 0.35; } 12.5% { --s: 0.35; } 15.0% { --s: 0.35; } 17.5% { --s: 0.35; } 20.0% { --s: 0.35; } 22.5% { --s: 0.35; } 25.0% { --s: 0.35; } 27.5% { --s: 0.35; } 30.0% { --s: 0.35; } 32.5% { --s: 0.35; } 35.0% { --s: 0.35; } 37.5% { --s: 0.35; } 40.0% { --s: 0.35; } 42.5% { --s: 0.35; } 45.0% { --s: 0.35; } 47.5% { --s: 0.35; } 50.0% { --s: 0.35; } 52.5% { --s: 0.35; } 55.0% { --s: 0.35; } 57.5% { --s: 0.35; } 60.0% { --s: 0.35; } 62.5% { --s: 0.35; } 65.0% { --s: 0.35; } 67.5% { --s: 0.35; } 70.0% { --s: 0.35; } 72.5% { --s: 0.35; } 75.0% { --s: 0.35; } 77.5% { --s: 0.35; } 80.0% { --s: 0.35; } 82.5% { --s: 0.35; } 85.0% { --s: 0.35; } 87.5% { --s: 0.35; } 90.0% { --s: 0.35; } 92.5% { --s: 0.36; } 95.0% { --s: 0.35; } 97.5% { --s: 0.35; } 100.0% { --s: 0.35; } }
.lens-cell--10 { animation-name: lc10; }
@keyframes lc20 { 0.0% { --s: 0.50; } 2.5% { --s: 0.47; } 5.0% { --s: 0.41; } 7.5% { --s: 0.35; } 10.0% { --s: 0.35; } 12.5% { --s: 0.35; } 15.0% { --s: 0.35; } 17.5% { --s: 0.35; } 20.0% { --s: 0.35; } 22.5% { --s: 0.35; } 25.0% { --s: 0.35; } 27.5% { --s: 0.35; } 30.0% { --s: 0.35; } 32.5% { --s: 0.35; } 35.0% { --s: 0.35; } 37.5% { --s: 0.35; } 40.0% { --s: 0.35; } 42.5% { --s: 0.35; } 45.0% { --s: 0.35; } 47.5% { --s: 0.35; } 50.0% { --s: 0.35; } 52.5% { --s: 0.35; } 55.0% { --s: 0.35; } 57.5% { --s: 0.35; } 60.0% { --s: 0.35; } 62.5% { --s: 0.35; } 65.0% { --s: 0.35; } 67.5% { --s: 0.35; } 70.0% { --s: 0.35; } 72.5% { --s: 0.35; } 75.0% { --s: 0.35; } 77.5% { --s: 0.35; } 80.0% { --s: 0.35; } 82.5% { --s: 0.35; } 85.0% { --s: 0.35; } 87.5% { --s: 0.35; } 90.0% { --s: 0.35; } 92.5% { --s: 0.35; } 95.0% { --s: 0.41; } 97.5% { --s: 0.47; } 100.0% { --s: 0.50; } }
.lens-cell--20 { animation-name: lc20; }
@keyframes lc30 { 0.0% { --s: 0.35; } 2.5% { --s: 0.35; } 5.0% { --s: 0.35; } 7.5% { --s: 0.36; } 10.0% { --s: 0.35; } 12.5% { --s: 0.35; } 15.0% { --s: 0.35; } 17.5% { --s: 0.35; } 20.0% { --s: 0.35; } 22.5% { --s: 0.35; } 25.0% { --s: 0.35; } 27.5% { --s: 0.35; } 30.0% { --s: 0.35; } 32.5% { --s: 0.35; } 35.0% { --s: 0.35; } 37.5% { --s: 0.35; } 40.0% { --s: 0.35; } 42.5% { --s: 0.35; } 45.0% { --s: 0.35; } 47.5% { --s: 0.35; } 50.0% { --s: 0.35; } 52.5% { --s: 0.35; } 55.0% { --s: 0.35; } 57.5% { --s: 0.35; } 60.0% { --s: 0.35; } 62.5% { --s: 0.35; } 65.0% { --s: 0.35; } 67.5% { --s: 0.35; } 70.0% { --s: 0.35; } 72.5% { --s: 0.35; } 75.0% { --s: 0.35; } 77.5% { --s: 0.35; } 80.0% { --s: 0.35; } 82.5% { --s: 0.35; } 85.0% { --s: 0.35; } 87.5% { --s: 0.35; } 90.0% { --s: 0.35; } 92.5% { --s: 0.35; } 95.0% { --s: 0.35; } 97.5% { --s: 0.35; } 100.0% { --s: 0.35; } }
.lens-cell--30 { animation-name: lc30; }
@keyframes lc40 { 0.0% { --s: 0.35; } 2.5% { --s: 0.35; } 5.0% { --s: 0.35; } 7.5% { --s: 0.35; } 10.0% { --s: 0.35; } 12.5% { --s: 0.35; } 15.0% { --s: 0.35; } 17.5% { --s: 0.35; } 20.0% { --s: 0.35; } 22.5% { --s: 0.35; } 25.0% { --s: 0.35; } 27.5% { --s: 0.35; } 30.0% { --s: 0.35; } 32.5% { --s: 0.35; } 35.0% { --s: 0.35; } 37.5% { --s: 0.35; } 40.0% { --s: 0.35; } 42.5% { --s: 0.35; } 45.0% { --s: 0.35; } 47.5% { --s: 0.35; } 50.0% { --s: 0.35; } 52.5% { --s: 0.35; } 55.0% { --s: 0.35; } 57.5% { --s: 0.35; } 60.0% { --s: 0.35; } 62.5% { --s: 0.35; } 65.0% { --s: 0.35; } 67.5% { --s: 0.35; } 70.0% { --s: 0.35; } 72.5% { --s: 0.35; } 75.0% { --s: 0.35; } 77.5% { --s: 0.35; } 80.0% { --s: 0.35; } 82.5% { --s: 0.35; } 85.0% { --s: 0.35; } 87.5% { --s: 0.35; } 90.0% { --s: 0.35; } 92.5% { --s: 0.35; } 95.0% { --s: 0.35; } 97.5% { --s: 0.35; } 100.0% { --s: 0.35; } }
.lens-cell--40 { animation-name: lc40; }
@keyframes lc01 { 0.0% { --s: 0.35; } 2.5% { --s: 0.35; } 5.0% { --s: 0.35; } 7.5% { --s: 0.35; } 10.0% { --s: 0.35; } 12.5% { --s: 0.35; } 15.0% { --s: 0.35; } 17.5% { --s: 0.35; } 20.0% { --s: 0.35; } 22.5% { --s: 0.35; } 25.0% { --s: 0.35; } 27.5% { --s: 0.35; } 30.0% { --s: 0.35; } 32.5% { --s: 0.35; } 35.0% { --s: 0.35; } 37.5% { --s: 0.35; } 40.0% { --s: 0.35; } 42.5% { --s: 0.35; } 45.0% { --s: 0.35; } 47.5% { --s: 0.35; } 50.0% { --s: 0.35; } 52.5% { --s: 0.35; } 55.0% { --s: 0.35; } 57.5% { --s: 0.35; } 60.0% { --s: 0.35; } 62.5% { --s: 0.35; } 65.0% { --s: 0.35; } 67.5% { --s: 0.35; } 70.0% { --s: 0.35; } 72.5% { --s: 0.35; } 75.0% { --s: 0.35; } 77.5% { --s: 0.36; } 80.0% { --s: 0.40; } 82.5% { --s: 0.41; } 85.0% { --s: 0.39; } 87.5% { --s: 0.35; } 90.0% { --s: 0.35; } 92.5% { --s: 0.35; } 95.0% { --s: 0.35; } 97.5% { --s: 0.35; } 100.0% { --s: 0.35; } }
.lens-cell--01 { animation-name: lc01; }
@keyframes lc11 { 0.0% { --s: 0.52; } 2.5% { --s: 0.37; } 5.0% { --s: 0.35; } 7.5% { --s: 0.35; } 10.0% { --s: 0.35; } 12.5% { --s: 0.35; } 15.0% { --s: 0.35; } 17.5% { --s: 0.35; } 20.0% { --s: 0.35; } 22.5% { --s: 0.35; } 25.0% { --s: 0.35; } 27.5% { --s: 0.35; } 30.0% { --s: 0.35; } 32.5% { --s: 0.35; } 35.0% { --s: 0.35; } 37.5% { --s: 0.35; } 40.0% { --s: 0.35; } 42.5% { --s: 0.35; } 45.0% { --s: 0.35; } 47.5% { --s: 0.35; } 50.0% { --s: 0.35; } 52.5% { --s: 0.35; } 55.0% { --s: 0.35; } 57.5% { --s: 0.35; } 60.0% { --s: 0.35; } 62.5% { --s: 0.35; } 65.0% { --s: 0.35; } 67.5% { --s: 0.35; } 70.0% { --s: 0.35; } 72.5% { --s: 0.39; } 75.0% { --s: 0.51; } 77.5% { --s: 0.68; } 80.0% { --s: 0.90; } 82.5% { --s: 1.13; } 85.0% { --s: 1.36; } 87.5% { --s: 1.49; } 90.0% { --s: 1.44; } 92.5% { --s: 1.24; } 95.0% { --s: 0.98; } 97.5% { --s: 0.73; } 100.0% { --s: 0.52; } }
.lens-cell--11 { animation-name: lc11; }
@keyframes lc21 { 0.0% { --s: 2.20; } 2.5% { --s: 1.85; } 5.0% { --s: 1.49; } 7.5% { --s: 1.17; } 10.0% { --s: 0.89; } 12.5% { --s: 0.67; } 15.0% { --s: 0.50; } 17.5% { --s: 0.38; } 20.0% { --s: 0.35; } 22.5% { --s: 0.35; } 25.0% { --s: 0.35; } 27.5% { --s: 0.35; } 30.0% { --s: 0.35; } 32.5% { --s: 0.35; } 35.0% { --s: 0.35; } 37.5% { --s: 0.35; } 40.0% { --s: 0.35; } 42.5% { --s: 0.35; } 45.0% { --s: 0.35; } 47.5% { --s: 0.35; } 50.0% { --s: 0.35; } 52.5% { --s: 0.35; } 55.0% { --s: 0.35; } 57.5% { --s: 0.35; } 60.0% { --s: 0.35; } 62.5% { --s: 0.35; } 65.0% { --s: 0.35; } 67.5% { --s: 0.35; } 70.0% { --s: 0.35; } 72.5% { --s: 0.35; } 75.0% { --s: 0.35; } 77.5% { --s: 0.35; } 80.0% { --s: 0.35; } 82.5% { --s: 0.38; } 85.0% { --s: 0.50; } 87.5% { --s: 0.67; } 90.0% { --s: 0.89; } 92.5% { --s: 1.17; } 95.0% { --s: 1.49; } 97.5% { --s: 1.85; } 100.0% { --s: 2.20; } }
.lens-cell--21 { animation-name: lc21; }
@keyframes lc31 { 0.0% { --s: 0.52; } 2.5% { --s: 0.73; } 5.0% { --s: 0.98; } 7.5% { --s: 1.24; } 10.0% { --s: 1.44; } 12.5% { --s: 1.49; } 15.0% { --s: 1.36; } 17.5% { --s: 1.13; } 20.0% { --s: 0.90; } 22.5% { --s: 0.68; } 25.0% { --s: 0.51; } 27.5% { --s: 0.39; } 30.0% { --s: 0.35; } 32.5% { --s: 0.35; } 35.0% { --s: 0.35; } 37.5% { --s: 0.35; } 40.0% { --s: 0.35; } 42.5% { --s: 0.35; } 45.0% { --s: 0.35; } 47.5% { --s: 0.35; } 50.0% { --s: 0.35; } 52.5% { --s: 0.35; } 55.0% { --s: 0.35; } 57.5% { --s: 0.35; } 60.0% { --s: 0.35; } 62.5% { --s: 0.35; } 65.0% { --s: 0.35; } 67.5% { --s: 0.35; } 70.0% { --s: 0.35; } 72.5% { --s: 0.35; } 75.0% { --s: 0.35; } 77.5% { --s: 0.35; } 80.0% { --s: 0.35; } 82.5% { --s: 0.35; } 85.0% { --s: 0.35; } 87.5% { --s: 0.35; } 90.0% { --s: 0.35; } 92.5% { --s: 0.35; } 95.0% { --s: 0.35; } 97.5% { --s: 0.37; } 100.0% { --s: 0.52; } }
.lens-cell--31 { animation-name: lc31; }
@keyframes lc41 { 0.0% { --s: 0.35; } 2.5% { --s: 0.35; } 5.0% { --s: 0.35; } 7.5% { --s: 0.35; } 10.0% { --s: 0.35; } 12.5% { --s: 0.35; } 15.0% { --s: 0.39; } 17.5% { --s: 0.41; } 20.0% { --s: 0.40; } 22.5% { --s: 0.36; } 25.0% { --s: 0.35; } 27.5% { --s: 0.35; } 30.0% { --s: 0.35; } 32.5% { --s: 0.35; } 35.0% { --s: 0.35; } 37.5% { --s: 0.35; } 40.0% { --s: 0.35; } 42.5% { --s: 0.35; } 45.0% { --s: 0.35; } 47.5% { --s: 0.35; } 50.0% { --s: 0.35; } 52.5% { --s: 0.35; } 55.0% { --s: 0.35; } 57.5% { --s: 0.35; } 60.0% { --s: 0.35; } 62.5% { --s: 0.35; } 65.0% { --s: 0.35; } 67.5% { --s: 0.35; } 70.0% { --s: 0.35; } 72.5% { --s: 0.35; } 75.0% { --s: 0.35; } 77.5% { --s: 0.35; } 80.0% { --s: 0.35; } 82.5% { --s: 0.35; } 85.0% { --s: 0.35; } 87.5% { --s: 0.35; } 90.0% { --s: 0.35; } 92.5% { --s: 0.35; } 95.0% { --s: 0.35; } 97.5% { --s: 0.35; } 100.0% { --s: 0.35; } }
.lens-cell--41 { animation-name: lc41; }
@keyframes lc02 { 0.0% { --s: 0.35; } 2.5% { --s: 0.35; } 5.0% { --s: 0.35; } 7.5% { --s: 0.35; } 10.0% { --s: 0.35; } 12.5% { --s: 0.35; } 15.0% { --s: 0.35; } 17.5% { --s: 0.35; } 20.0% { --s: 0.35; } 22.5% { --s: 0.35; } 25.0% { --s: 0.35; } 27.5% { --s: 0.35; } 30.0% { --s: 0.35; } 32.5% { --s: 0.35; } 35.0% { --s: 0.35; } 37.5% { --s: 0.35; } 40.0% { --s: 0.35; } 42.5% { --s: 0.35; } 45.0% { --s: 0.35; } 47.5% { --s: 0.35; } 50.0% { --s: 0.35; } 52.5% { --s: 0.35; } 55.0% { --s: 0.35; } 57.5% { --s: 0.35; } 60.0% { --s: 0.35; } 62.5% { --s: 0.35; } 65.0% { --s: 0.36; } 67.5% { --s: 0.45; } 70.0% { --s: 0.57; } 72.5% { --s: 0.66; } 75.0% { --s: 0.69; } 77.5% { --s: 0.66; } 80.0% { --s: 0.57; } 82.5% { --s: 0.45; } 85.0% { --s: 0.36; } 87.5% { --s: 0.35; } 90.0% { --s: 0.35; } 92.5% { --s: 0.35; } 95.0% { --s: 0.35; } 97.5% { --s: 0.35; } 100.0% { --s: 0.35; } }
.lens-cell--02 { animation-name: lc02; }
@keyframes lc12 { 0.0% { --s: 0.35; } 2.5% { --s: 0.35; } 5.0% { --s: 0.35; } 7.5% { --s: 0.35; } 10.0% { --s: 0.35; } 12.5% { --s: 0.35; } 15.0% { --s: 0.35; } 17.5% { --s: 0.35; } 20.0% { --s: 0.35; } 22.5% { --s: 0.35; } 25.0% { --s: 0.35; } 27.5% { --s: 0.35; } 30.0% { --s: 0.35; } 32.5% { --s: 0.35; } 35.0% { --s: 0.35; } 37.5% { --s: 0.35; } 40.0% { --s: 0.35; } 42.5% { --s: 0.35; } 45.0% { --s: 0.35; } 47.5% { --s: 0.35; } 50.0% { --s: 0.35; } 52.5% { --s: 0.35; } 55.0% { --s: 0.41; } 57.5% { --s: 0.53; } 60.0% { --s: 0.69; } 62.5% { --s: 0.88; } 65.0% { --s: 1.10; } 67.5% { --s: 1.33; } 70.0% { --s: 1.58; } 72.5% { --s: 1.80; } 75.0% { --s: 1.92; } 77.5% { --s: 1.80; } 80.0% { --s: 1.58; } 82.5% { --s: 1.33; } 85.0% { --s: 1.10; } 87.5% { --s: 0.88; } 90.0% { --s: 0.69; } 92.5% { --s: 0.53; } 95.0% { --s: 0.41; } 97.5% { --s: 0.35; } 100.0% { --s: 0.35; } }
.lens-cell--12 { animation-name: lc12; }
@keyframes lc22 { 0.0% { --s: 0.54; } 2.5% { --s: 0.54; } 5.0% { --s: 0.52; } 7.5% { --s: 0.50; } 10.0% { --s: 0.48; } 12.5% { --s: 0.46; } 15.0% { --s: 0.43; } 17.5% { --s: 0.42; } 20.0% { --s: 0.40; } 22.5% { --s: 0.40; } 25.0% { --s: 0.39; } 27.5% { --s: 0.40; } 30.0% { --s: 0.40; } 32.5% { --s: 0.42; } 35.0% { --s: 0.43; } 37.5% { --s: 0.46; } 40.0% { --s: 0.48; } 42.5% { --s: 0.50; } 45.0% { --s: 0.52; } 47.5% { --s: 0.54; } 50.0% { --s: 0.54; } 52.5% { --s: 0.54; } 55.0% { --s: 0.52; } 57.5% { --s: 0.50; } 60.0% { --s: 0.48; } 62.5% { --s: 0.46; } 65.0% { --s: 0.43; } 67.5% { --s: 0.42; } 70.0% { --s: 0.40; } 72.5% { --s: 0.40; } 75.0% { --s: 0.39; } 77.5% { --s: 0.40; } 80.0% { --s: 0.40; } 82.5% { --s: 0.42; } 85.0% { --s: 0.43; } 87.5% { --s: 0.46; } 90.0% { --s: 0.48; } 92.5% { --s: 0.50; } 95.0% { --s: 0.52; } 97.5% { --s: 0.54; } 100.0% { --s: 0.54; } }
.lens-cell--22 { animation-name: lc22; }
@keyframes lc32 { 0.0% { --s: 0.35; } 2.5% { --s: 0.35; } 5.0% { --s: 0.41; } 7.5% { --s: 0.53; } 10.0% { --s: 0.69; } 12.5% { --s: 0.88; } 15.0% { --s: 1.10; } 17.5% { --s: 1.33; } 20.0% { --s: 1.58; } 22.5% { --s: 1.80; } 25.0% { --s: 1.92; } 27.5% { --s: 1.80; } 30.0% { --s: 1.58; } 32.5% { --s: 1.33; } 35.0% { --s: 1.10; } 37.5% { --s: 0.88; } 40.0% { --s: 0.69; } 42.5% { --s: 0.53; } 45.0% { --s: 0.41; } 47.5% { --s: 0.35; } 50.0% { --s: 0.35; } 52.5% { --s: 0.35; } 55.0% { --s: 0.35; } 57.5% { --s: 0.35; } 60.0% { --s: 0.35; } 62.5% { --s: 0.35; } 65.0% { --s: 0.35; } 67.5% { --s: 0.35; } 70.0% { --s: 0.35; } 72.5% { --s: 0.35; } 75.0% { --s: 0.35; } 77.5% { --s: 0.35; } 80.0% { --s: 0.35; } 82.5% { --s: 0.35; } 85.0% { --s: 0.35; } 87.5% { --s: 0.35; } 90.0% { --s: 0.35; } 92.5% { --s: 0.35; } 95.0% { --s: 0.35; } 97.5% { --s: 0.35; } 100.0% { --s: 0.35; } }
.lens-cell--32 { animation-name: lc32; }
@keyframes lc42 { 0.0% { --s: 0.35; } 2.5% { --s: 0.35; } 5.0% { --s: 0.35; } 7.5% { --s: 0.35; } 10.0% { --s: 0.35; } 12.5% { --s: 0.35; } 15.0% { --s: 0.36; } 17.5% { --s: 0.45; } 20.0% { --s: 0.57; } 22.5% { --s: 0.66; } 25.0% { --s: 0.69; } 27.5% { --s: 0.66; } 30.0% { --s: 0.57; } 32.5% { --s: 0.45; } 35.0% { --s: 0.36; } 37.5% { --s: 0.35; } 40.0% { --s: 0.35; } 42.5% { --s: 0.35; } 45.0% { --s: 0.35; } 47.5% { --s: 0.35; } 50.0% { --s: 0.35; } 52.5% { --s: 0.35; } 55.0% { --s: 0.35; } 57.5% { --s: 0.35; } 60.0% { --s: 0.35; } 62.5% { --s: 0.35; } 65.0% { --s: 0.35; } 67.5% { --s: 0.35; } 70.0% { --s: 0.35; } 72.5% { --s: 0.35; } 75.0% { --s: 0.35; } 77.5% { --s: 0.35; } 80.0% { --s: 0.35; } 82.5% { --s: 0.35; } 85.0% { --s: 0.35; } 87.5% { --s: 0.35; } 90.0% { --s: 0.35; } 92.5% { --s: 0.35; } 95.0% { --s: 0.35; } 97.5% { --s: 0.35; } 100.0% { --s: 0.35; } }
.lens-cell--42 { animation-name: lc42; }
@keyframes lc03 { 0.0% { --s: 0.35; } 2.5% { --s: 0.35; } 5.0% { --s: 0.35; } 7.5% { --s: 0.35; } 10.0% { --s: 0.35; } 12.5% { --s: 0.35; } 15.0% { --s: 0.35; } 17.5% { --s: 0.35; } 20.0% { --s: 0.35; } 22.5% { --s: 0.35; } 25.0% { --s: 0.35; } 27.5% { --s: 0.35; } 30.0% { --s: 0.35; } 32.5% { --s: 0.35; } 35.0% { --s: 0.35; } 37.5% { --s: 0.35; } 40.0% { --s: 0.35; } 42.5% { --s: 0.35; } 45.0% { --s: 0.35; } 47.5% { --s: 0.35; } 50.0% { --s: 0.35; } 52.5% { --s: 0.35; } 55.0% { --s: 0.35; } 57.5% { --s: 0.35; } 60.0% { --s: 0.35; } 62.5% { --s: 0.35; } 65.0% { --s: 0.39; } 67.5% { --s: 0.41; } 70.0% { --s: 0.40; } 72.5% { --s: 0.36; } 75.0% { --s: 0.35; } 77.5% { --s: 0.35; } 80.0% { --s: 0.35; } 82.5% { --s: 0.35; } 85.0% { --s: 0.35; } 87.5% { --s: 0.35; } 90.0% { --s: 0.35; } 92.5% { --s: 0.35; } 95.0% { --s: 0.35; } 97.5% { --s: 0.35; } 100.0% { --s: 0.35; } }
.lens-cell--03 { animation-name: lc03; }
@keyframes lc13 { 0.0% { --s: 0.35; } 2.5% { --s: 0.35; } 5.0% { --s: 0.35; } 7.5% { --s: 0.35; } 10.0% { --s: 0.35; } 12.5% { --s: 0.35; } 15.0% { --s: 0.35; } 17.5% { --s: 0.35; } 20.0% { --s: 0.35; } 22.5% { --s: 0.35; } 25.0% { --s: 0.35; } 27.5% { --s: 0.35; } 30.0% { --s: 0.35; } 32.5% { --s: 0.35; } 35.0% { --s: 0.35; } 37.5% { --s: 0.35; } 40.0% { --s: 0.35; } 42.5% { --s: 0.35; } 45.0% { --s: 0.35; } 47.5% { --s: 0.37; } 50.0% { --s: 0.52; } 52.5% { --s: 0.73; } 55.0% { --s: 0.98; } 57.5% { --s: 1.24; } 60.0% { --s: 1.44; } 62.5% { --s: 1.49; } 65.0% { --s: 1.36; } 67.5% { --s: 1.13; } 70.0% { --s: 0.90; } 72.5% { --s: 0.68; } 75.0% { --s: 0.51; } 77.5% { --s: 0.39; } 80.0% { --s: 0.35; } 82.5% { --s: 0.35; } 85.0% { --s: 0.35; } 87.5% { --s: 0.35; } 90.0% { --s: 0.35; } 92.5% { --s: 0.35; } 95.0% { --s: 0.35; } 97.5% { --s: 0.35; } 100.0% { --s: 0.35; } }
.lens-cell--13 { animation-name: lc13; }
@keyframes lc23 { 0.0% { --s: 0.35; } 2.5% { --s: 0.35; } 5.0% { --s: 0.35; } 7.5% { --s: 0.35; } 10.0% { --s: 0.35; } 12.5% { --s: 0.35; } 15.0% { --s: 0.35; } 17.5% { --s: 0.35; } 20.0% { --s: 0.35; } 22.5% { --s: 0.35; } 25.0% { --s: 0.35; } 27.5% { --s: 0.35; } 30.0% { --s: 0.35; } 32.5% { --s: 0.38; } 35.0% { --s: 0.50; } 37.5% { --s: 0.67; } 40.0% { --s: 0.89; } 42.5% { --s: 1.17; } 45.0% { --s: 1.49; } 47.5% { --s: 1.85; } 50.0% { --s: 2.20; } 52.5% { --s: 1.85; } 55.0% { --s: 1.49; } 57.5% { --s: 1.17; } 60.0% { --s: 0.89; } 62.5% { --s: 0.67; } 65.0% { --s: 0.50; } 67.5% { --s: 0.38; } 70.0% { --s: 0.35; } 72.5% { --s: 0.35; } 75.0% { --s: 0.35; } 77.5% { --s: 0.35; } 80.0% { --s: 0.35; } 82.5% { --s: 0.35; } 85.0% { --s: 0.35; } 87.5% { --s: 0.35; } 90.0% { --s: 0.35; } 92.5% { --s: 0.35; } 95.0% { --s: 0.35; } 97.5% { --s: 0.35; } 100.0% { --s: 0.35; } }
.lens-cell--23 { animation-name: lc23; }
@keyframes lc33 { 0.0% { --s: 0.35; } 2.5% { --s: 0.35; } 5.0% { --s: 0.35; } 7.5% { --s: 0.35; } 10.0% { --s: 0.35; } 12.5% { --s: 0.35; } 15.0% { --s: 0.35; } 17.5% { --s: 0.35; } 20.0% { --s: 0.35; } 22.5% { --s: 0.39; } 25.0% { --s: 0.51; } 27.5% { --s: 0.68; } 30.0% { --s: 0.90; } 32.5% { --s: 1.13; } 35.0% { --s: 1.36; } 37.5% { --s: 1.49; } 40.0% { --s: 1.44; } 42.5% { --s: 1.24; } 45.0% { --s: 0.98; } 47.5% { --s: 0.73; } 50.0% { --s: 0.52; } 52.5% { --s: 0.37; } 55.0% { --s: 0.35; } 57.5% { --s: 0.35; } 60.0% { --s: 0.35; } 62.5% { --s: 0.35; } 65.0% { --s: 0.35; } 67.5% { --s: 0.35; } 70.0% { --s: 0.35; } 72.5% { --s: 0.35; } 75.0% { --s: 0.35; } 77.5% { --s: 0.35; } 80.0% { --s: 0.35; } 82.5% { --s: 0.35; } 85.0% { --s: 0.35; } 87.5% { --s: 0.35; } 90.0% { --s: 0.35; } 92.5% { --s: 0.35; } 95.0% { --s: 0.35; } 97.5% { --s: 0.35; } 100.0% { --s: 0.35; } }
.lens-cell--33 { animation-name: lc33; }
@keyframes lc43 { 0.0% { --s: 0.35; } 2.5% { --s: 0.35; } 5.0% { --s: 0.35; } 7.5% { --s: 0.35; } 10.0% { --s: 0.35; } 12.5% { --s: 0.35; } 15.0% { --s: 0.35; } 17.5% { --s: 0.35; } 20.0% { --s: 0.35; } 22.5% { --s: 0.35; } 25.0% { --s: 0.35; } 27.5% { --s: 0.36; } 30.0% { --s: 0.40; } 32.5% { --s: 0.41; } 35.0% { --s: 0.39; } 37.5% { --s: 0.35; } 40.0% { --s: 0.35; } 42.5% { --s: 0.35; } 45.0% { --s: 0.35; } 47.5% { --s: 0.35; } 50.0% { --s: 0.35; } 52.5% { --s: 0.35; } 55.0% { --s: 0.35; } 57.5% { --s: 0.35; } 60.0% { --s: 0.35; } 62.5% { --s: 0.35; } 65.0% { --s: 0.35; } 67.5% { --s: 0.35; } 70.0% { --s: 0.35; } 72.5% { --s: 0.35; } 75.0% { --s: 0.35; } 77.5% { --s: 0.35; } 80.0% { --s: 0.35; } 82.5% { --s: 0.35; } 85.0% { --s: 0.35; } 87.5% { --s: 0.35; } 90.0% { --s: 0.35; } 92.5% { --s: 0.35; } 95.0% { --s: 0.35; } 97.5% { --s: 0.35; } 100.0% { --s: 0.35; } }
.lens-cell--43 { animation-name: lc43; }
@keyframes lc04 { 0.0% { --s: 0.35; } 2.5% { --s: 0.35; } 5.0% { --s: 0.35; } 7.5% { --s: 0.35; } 10.0% { --s: 0.35; } 12.5% { --s: 0.35; } 15.0% { --s: 0.35; } 17.5% { --s: 0.35; } 20.0% { --s: 0.35; } 22.5% { --s: 0.35; } 25.0% { --s: 0.35; } 27.5% { --s: 0.35; } 30.0% { --s: 0.35; } 32.5% { --s: 0.35; } 35.0% { --s: 0.35; } 37.5% { --s: 0.35; } 40.0% { --s: 0.35; } 42.5% { --s: 0.35; } 45.0% { --s: 0.35; } 47.5% { --s: 0.35; } 50.0% { --s: 0.35; } 52.5% { --s: 0.35; } 55.0% { --s: 0.35; } 57.5% { --s: 0.35; } 60.0% { --s: 0.35; } 62.5% { --s: 0.35; } 65.0% { --s: 0.35; } 67.5% { --s: 0.35; } 70.0% { --s: 0.35; } 72.5% { --s: 0.35; } 75.0% { --s: 0.35; } 77.5% { --s: 0.35; } 80.0% { --s: 0.35; } 82.5% { --s: 0.35; } 85.0% { --s: 0.35; } 87.5% { --s: 0.35; } 90.0% { --s: 0.35; } 92.5% { --s: 0.35; } 95.0% { --s: 0.35; } 97.5% { --s: 0.35; } 100.0% { --s: 0.35; } }
.lens-cell--04 { animation-name: lc04; }
@keyframes lc14 { 0.0% { --s: 0.35; } 2.5% { --s: 0.35; } 5.0% { --s: 0.35; } 7.5% { --s: 0.35; } 10.0% { --s: 0.35; } 12.5% { --s: 0.35; } 15.0% { --s: 0.35; } 17.5% { --s: 0.35; } 20.0% { --s: 0.35; } 22.5% { --s: 0.35; } 25.0% { --s: 0.35; } 27.5% { --s: 0.35; } 30.0% { --s: 0.35; } 32.5% { --s: 0.35; } 35.0% { --s: 0.35; } 37.5% { --s: 0.35; } 40.0% { --s: 0.35; } 42.5% { --s: 0.35; } 45.0% { --s: 0.35; } 47.5% { --s: 0.35; } 50.0% { --s: 0.35; } 52.5% { --s: 0.35; } 55.0% { --s: 0.35; } 57.5% { --s: 0.36; } 60.0% { --s: 0.35; } 62.5% { --s: 0.35; } 65.0% { --s: 0.35; } 67.5% { --s: 0.35; } 70.0% { --s: 0.35; } 72.5% { --s: 0.35; } 75.0% { --s: 0.35; } 77.5% { --s: 0.35; } 80.0% { --s: 0.35; } 82.5% { --s: 0.35; } 85.0% { --s: 0.35; } 87.5% { --s: 0.35; } 90.0% { --s: 0.35; } 92.5% { --s: 0.35; } 95.0% { --s: 0.35; } 97.5% { --s: 0.35; } 100.0% { --s: 0.35; } }
.lens-cell--14 { animation-name: lc14; }
@keyframes lc24 { 0.0% { --s: 0.35; } 2.5% { --s: 0.35; } 5.0% { --s: 0.35; } 7.5% { --s: 0.35; } 10.0% { --s: 0.35; } 12.5% { --s: 0.35; } 15.0% { --s: 0.35; } 17.5% { --s: 0.35; } 20.0% { --s: 0.35; } 22.5% { --s: 0.35; } 25.0% { --s: 0.35; } 27.5% { --s: 0.35; } 30.0% { --s: 0.35; } 32.5% { --s: 0.35; } 35.0% { --s: 0.35; } 37.5% { --s: 0.35; } 40.0% { --s: 0.35; } 42.5% { --s: 0.35; } 45.0% { --s: 0.41; } 47.5% { --s: 0.47; } 50.0% { --s: 0.50; } 52.5% { --s: 0.47; } 55.0% { --s: 0.41; } 57.5% { --s: 0.35; } 60.0% { --s: 0.35; } 62.5% { --s: 0.35; } 65.0% { --s: 0.35; } 67.5% { --s: 0.35; } 70.0% { --s: 0.35; } 72.5% { --s: 0.35; } 75.0% { --s: 0.35; } 77.5% { --s: 0.35; } 80.0% { --s: 0.35; } 82.5% { --s: 0.35; } 85.0% { --s: 0.35; } 87.5% { --s: 0.35; } 90.0% { --s: 0.35; } 92.5% { --s: 0.35; } 95.0% { --s: 0.35; } 97.5% { --s: 0.35; } 100.0% { --s: 0.35; } }
.lens-cell--24 { animation-name: lc24; }
@keyframes lc34 { 0.0% { --s: 0.35; } 2.5% { --s: 0.35; } 5.0% { --s: 0.35; } 7.5% { --s: 0.35; } 10.0% { --s: 0.35; } 12.5% { --s: 0.35; } 15.0% { --s: 0.35; } 17.5% { --s: 0.35; } 20.0% { --s: 0.35; } 22.5% { --s: 0.35; } 25.0% { --s: 0.35; } 27.5% { --s: 0.35; } 30.0% { --s: 0.35; } 32.5% { --s: 0.35; } 35.0% { --s: 0.35; } 37.5% { --s: 0.35; } 40.0% { --s: 0.35; } 42.5% { --s: 0.36; } 45.0% { --s: 0.35; } 47.5% { --s: 0.35; } 50.0% { --s: 0.35; } 52.5% { --s: 0.35; } 55.0% { --s: 0.35; } 57.5% { --s: 0.35; } 60.0% { --s: 0.35; } 62.5% { --s: 0.35; } 65.0% { --s: 0.35; } 67.5% { --s: 0.35; } 70.0% { --s: 0.35; } 72.5% { --s: 0.35; } 75.0% { --s: 0.35; } 77.5% { --s: 0.35; } 80.0% { --s: 0.35; } 82.5% { --s: 0.35; } 85.0% { --s: 0.35; } 87.5% { --s: 0.35; } 90.0% { --s: 0.35; } 92.5% { --s: 0.35; } 95.0% { --s: 0.35; } 97.5% { --s: 0.35; } 100.0% { --s: 0.35; } }
.lens-cell--34 { animation-name: lc34; }
@keyframes lc44 { 0.0% { --s: 0.35; } 2.5% { --s: 0.35; } 5.0% { --s: 0.35; } 7.5% { --s: 0.35; } 10.0% { --s: 0.35; } 12.5% { --s: 0.35; } 15.0% { --s: 0.35; } 17.5% { --s: 0.35; } 20.0% { --s: 0.35; } 22.5% { --s: 0.35; } 25.0% { --s: 0.35; } 27.5% { --s: 0.35; } 30.0% { --s: 0.35; } 32.5% { --s: 0.35; } 35.0% { --s: 0.35; } 37.5% { --s: 0.35; } 40.0% { --s: 0.35; } 42.5% { --s: 0.35; } 45.0% { --s: 0.35; } 47.5% { --s: 0.35; } 50.0% { --s: 0.35; } 52.5% { --s: 0.35; } 55.0% { --s: 0.35; } 57.5% { --s: 0.35; } 60.0% { --s: 0.35; } 62.5% { --s: 0.35; } 65.0% { --s: 0.35; } 67.5% { --s: 0.35; } 70.0% { --s: 0.35; } 72.5% { --s: 0.35; } 75.0% { --s: 0.35; } 77.5% { --s: 0.35; } 80.0% { --s: 0.35; } 82.5% { --s: 0.35; } 85.0% { --s: 0.35; } 87.5% { --s: 0.35; } 90.0% { --s: 0.35; } 92.5% { --s: 0.35; } 95.0% { --s: 0.35; } 97.5% { --s: 0.35; } 100.0% { --s: 0.35; } }
.lens-cell--44 { animation-name: lc44; }
/* LENS-END */

/* «Исследования»: на телефоне подпись «Следующие исследования…» — под карточками, карточки — сразу под первым экраном */
@media (max-width: 640px) {
  .research--page .research__list { order: 2; margin-top: 0; }
  .research--page .research__soon { order: 3; }
}

/* PIE-START ===============================================================
   «Исследования», hero: «доли рынка» — объёмная круговая диаграмма. Толщина — стопка дисков
   с conic-gradient (верхний — светлее, с тонкими разделителями); границы секторов (--p1..--p3)
   плавно меняются, диаграмма медленно вращается. Генератор gen_pie.py
   ========================================================================== */
@property --p1 { syntax: '<percentage>'; inherits: true; initial-value: 22%; }
@property --p2 { syntax: '<percentage>'; inherits: true; initial-value: 38%; }
@property --p3 { syntax: '<percentage>'; inherits: true; initial-value: 55%; }
@property --p4 { syntax: '<percentage>'; inherits: true; initial-value: 70%; }
@property --p5 { syntax: '<percentage>'; inherits: true; initial-value: 86%; }

.orbit--pie {
  --D: calc(var(--size) * 0.66);   /* диаметр */
  --t: calc(var(--D) * 0.14);      /* толщина */
  animation: pie-sway 16s ease-in-out infinite alternate;
}

/* диаграмма стоит вертикально, лицом к зрителю, под небольшим углом */
@keyframes pie-sway {
  from { transform: rotateX(-8deg) rotateY(-32deg); }
  to { transform: rotateX(-8deg) rotateY(-14deg); }
}

.hero--pie .hero-visual::before {
  width: calc(var(--size) * 1.3);
  height: calc(var(--size) * 1.3);
  background: radial-gradient(circle closest-side, rgba(0, 85, 255, 0.2) 0%, rgba(0, 85, 255, 0.13) 25%, rgba(0, 85, 255, 0.06) 55%, rgba(0, 85, 255, 0.02) 80%, rgba(0, 85, 255, 0) 100%);
}

/* диаграмма лежит горизонтально и медленно поворачивается вокруг своей оси */
.pie {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  transform: translateZ(calc(var(--t) / -2));
  animation: pie-change 14s ease-in-out infinite;
}

/* шесть долей плавно перетекают из одного состояния в другое и обратно */
@keyframes pie-change {
  0%, 12%   { --p1: 22%; --p2: 38%; --p3: 55%; --p4: 70%; --p5: 86%; }
  33%, 45%  { --p1: 14%; --p2: 36%; --p3: 47%; --p4: 69%; --p5: 81%; }
  66%, 78%  { --p1: 28%; --p2: 41%; --p3: 63%; --p4: 74%; --p5: 90%; }
  100%      { --p1: 22%; --p2: 38%; --p3: 55%; --p4: 70%; --p5: 86%; }
}

.pie__layer {
  --c1: #1d3576; --c2: #122660; --c3: #1a316e; --c4: #0f2152; --c5: #172d68; --c6: #0d1d4a;
  position: absolute;
  left: calc(var(--D) / -2);
  top: calc(var(--D) / -2);
  width: var(--D);
  height: var(--D);
  border-radius: 50%;
  background: conic-gradient(var(--c1) 0 var(--p1), var(--c2) 0 var(--p2), var(--c3) 0 var(--p3), var(--c4) 0 var(--p4), var(--c5) 0 var(--p5), var(--c6) 0 100%);
  transform: translateZ(calc(var(--t) * var(--l) / 9));
}

/* верх: светлее, между секторами — тонкие тёмные разделители */
.pie__layer--top {
  --c1: #3d5fb8; --c2: #2a4a98; --c3: #36579f; --c4: #22408a; --c5: #2f4f9e; --c6: #1d3a80;
  --sep: rgba(6, 12, 35, 0.9);
  background:
    conic-gradient(from -0.5deg, var(--sep) 0 1deg, transparent 0 var(--p1), var(--sep) 0 calc(var(--p1) + 0.3%), transparent 0 var(--p2), var(--sep) 0 calc(var(--p2) + 0.3%), transparent 0 var(--p3), var(--sep) 0 calc(var(--p3) + 0.3%), transparent 0 var(--p4), var(--sep) 0 calc(var(--p4) + 0.3%), transparent 0 var(--p5), var(--sep) 0 calc(var(--p5) + 0.3%), transparent 0),
    conic-gradient(var(--c1) 0 var(--p1), var(--c2) 0 var(--p2), var(--c3) 0 var(--p3), var(--c4) 0 var(--p4), var(--c5) 0 var(--p5), var(--c6) 0 100%);
  box-shadow: inset 0 0 0 1px rgba(160, 185, 255, 0.25);
}

@media (prefers-reduced-motion: reduce) {
  .orbit--pie, .pie { animation: none; }
  .orbit--pie { transform: rotateX(-8deg) rotateY(-22deg); }
}

@media (min-width: 850px) {
  .hero--pie .hero-visual { top: 6vh; }
}

@media (max-width: 849px) {
  .hero--product .hero-visual .orbit--pie {
    margin-top: calc(44px - var(--size) * 0.17);
    margin-bottom: calc(var(--size) * -0.1);
  }
  .hero--pie + .research--page.section { padding-top: 75px; }
  .hero--pie + .report-method.section { padding-top: 50px; }
}
/* PIE-END */

/* ==========================================================================
   «Контакты» (kontakty.html)
   ========================================================================== */

/* ---- Блок 1: слева тексты на рифлёном стекле с шарами под ним, справа — каналы связи ---- */
.hero--contacts .hero-flex {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 112px;
  align-items: end;
}

.hero--contacts .hero__left {
  width: auto;
}

/* список каналов: строки с общими линиями, иконка слева, стрелка справа */
.hero-contacts {
  position: relative;
  z-index: 4;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(140, 165, 255, 0.14);
}

.hero-contacts > li {
  display: flex;
}

.contact-card {
  position: relative;
  flex: 1;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  column-gap: 20px;
  row-gap: 4px;
  align-content: center;
  padding: 22px 64px 22px 0;
  border-bottom: 1px solid rgba(140, 165, 255, 0.14);
  color: inherit;
  text-decoration: none;
}

.contact-card:focus-visible {
  outline: none;
}

.contact-card__icon {
  grid-row: 1 / span 3;
  align-self: center;
  display: inline-flex;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(196, 216, 255, 0.3);
  border-radius: 50%;
  color: #c4d8ff;
  transition: border-color 250ms var(--ease), background-color 250ms var(--ease);
}

.contact-card__icon svg {
  width: 20px;
  height: 20px;
}

.contact-card__label {
  font-size: 12px;
  font-weight: 300;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #8fb0ff;
}

.contact-card__value {
  font-size: 22px;
  font-weight: 400;
  line-height: 1.25;
  color: #ffffff;
  overflow-wrap: anywhere;
  transition: color 250ms var(--ease);
}

.contact-card__note {
  font-size: 13px;
  font-weight: 300;
  color: var(--text-muted);
}

.contact-card__arrow {
  position: absolute;
  top: 50%;
  right: 0;
  display: inline-flex;
  width: 40px;
  height: 40px;
  margin-top: -20px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(196, 216, 255, 0.3);
  border-radius: 50%;
  color: #c4d8ff;
  opacity: 0.4;
  transition: opacity 250ms var(--ease), transform 250ms var(--ease), border-color 250ms var(--ease);
}

.contact-card__arrow svg {
  width: 14px;
  height: 14px;
}

.contact-card:hover .contact-card__value,
.contact-card:focus-visible .contact-card__value {
  color: #c4d8ff;
}

.contact-card:hover .contact-card__icon,
.contact-card:focus-visible .contact-card__icon {
  border-color: rgba(196, 216, 255, 0.7);
  background: rgba(0, 85, 255, 0.12);
}

.contact-card:hover .contact-card__arrow,
.contact-card:focus-visible .contact-card__arrow {
  opacity: 1;
  border-color: rgba(196, 216, 255, 0.7);
  transform: translate(3px, -3px);
}

/* второй шар под плашкой — только на телефоне */
.hero__mobile-ball {
  display: none;
}

/* 850–1024px: колонка уже — значения мельче, промежуток между колонками меньше */
@media (min-width: 850px) and (max-width: 1024px) {
  .hero--contacts .hero-flex { position: relative; column-gap: 80px; }
  /* крошки здесь в потоке над текстом — список не должен растягивать блок вверх, иначе они уезжают от заголовка */
  .hero-contacts { position: absolute; right: 0; bottom: 0; width: calc(50% - 40px); }
  .contact-card { column-gap: 14px; padding: 16px 48px 16px 0; }
  .contact-card__value { font-size: 18px; }
  .contact-card__arrow { width: 34px; height: 34px; margin-top: -17px; }
}

/* телефон: каналы списком под плашкой, под плашкой — два шара */
@media (max-width: 849px) {
  .hero--contacts .hero-flex {
    grid-template-columns: minmax(0, 1fr);
  }
  .hero-contacts {
    margin: 40px var(--side-padding) 0;
  }
  /* шары светлее, чем на главной, и не заходят под шапку: плашка здесь невысокая */
  .hero--contacts .hero__left::before,
  .hero__mobile-ball {
    background:
      radial-gradient(circle at 30% 26%, rgba(120, 155, 245, 0.95) 0%, rgba(35, 65, 150, 0.92) 34%, rgba(10, 22, 62, 0.96) 66%, #03060f 100%);
  }
  .hero--contacts .hero__left::before {
    display: block;
    width: 150px;
    height: 150px;
    margin: -75px 0 0 -75px;
    animation: contacts-ball-1 11s ease-in-out infinite alternate;
  }
  .hero__mobile-ball {
    display: block;
    position: absolute;
    z-index: -2;
    top: 78%;
    left: 86%;
    width: 110px;
    height: 110px;
    margin: -55px 0 0 -55px;
    border-radius: 50%;
    box-shadow: 0 24px 40px rgba(0, 5, 20, 0.5);
    animation: contacts-ball-2 9s ease-in-out infinite alternate;
  }
  /* от списка каналов до формы ~80px */
  .hero--contacts + .lead.section {
    padding-top: 80px;
  }
}

@keyframes contacts-ball-1 {
  0% { left: 18%; top: 42%; }
  50% { left: 70%; top: 70%; }
  100% { left: 40%; top: 82%; }
}

@keyframes contacts-ball-2 {
  0% { left: 86%; top: 78%; }
  50% { left: 34%; top: 60%; }
  100% { left: 74%; top: 40%; }
}

@media (max-width: 640px) {
  .contact-card { column-gap: 16px; padding: 18px 52px 18px 0; }
  .contact-card__value { font-size: 19px; }
  .contact-card__arrow { width: 36px; height: 36px; margin-top: -18px; }
}

@media (max-width: 849px) and (prefers-reduced-motion: reduce) {
  .hero--contacts .hero__left::before,
  .hero__mobile-ball {
    animation: none;
  }
}

/* ---- Блок 2: форма на всю ширину на рифлёном стекле ---- */
.lead {
  padding-bottom: var(--section-gap); /* последний блок страницы */
}

.lead__box {
  position: relative;
  padding: 48px;
  border: 1px solid rgba(140, 165, 255, 0.14);
  border-radius: var(--radius-md);
}

/* шар и стекло без обрезки: шар выглядывает из-под плашки у краёв (как в блоке с сигналами на главной),
   а выпадающий список кодов телефона не обрезается рамкой блока */
.lead__bg {
  position: absolute;
  inset: 0;
}

.lead__box .signals__footer-ball {
  width: 220px;
  height: 220px;
  margin: -110px 0 0 -110px;
  animation: lead-ball 14s ease-in-out infinite alternate;
}

@keyframes lead-ball {
  0% { left: 8%; top: 20%; }
  50% { left: 50%; top: 105%; }
  100% { left: 92%; top: 15%; }
}

.lead__inner {
  position: relative;
  z-index: 3;
}

.lead__head h3 {
  margin-top: 12px;
  font-size: 16px;
  font-weight: 300;
  color: var(--text-muted);
}

.lead__form {
  margin-top: 32px;
}

.lead__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.lead__wide {
  grid-column: span 2;
}

.lead__grid .lead__wide:last-child {
  grid-column: span 2;
}

.lead__grid textarea {
  min-height: 46px;
  height: 46px;
}

/* выпадающий список — в стиле полей формы */
.field--select {
  position: relative;
}

.field--select select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  padding: 13px 40px 13px 14px;
  font: inherit;
  font-size: 13px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-strong);
  border-radius: 5px;
  cursor: pointer;
}

.field--select select:invalid {
  color: var(--text-faint);
}

.field--select select:focus {
  outline: none;
  border-color: var(--accent);
}

.field--select option {
  color: #0a1437;
  background: #ffffff;
}

.field--select svg {
  position: absolute;
  right: 16px;
  bottom: 20px;
  width: 10px;
  height: 6px;
  color: #c4d8ff;
  pointer-events: none;
}

.lead__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 20px;
}

.lead__bottom .consent {
  flex: 1 1 auto;
  max-width: 560px;
}

.lead__bottom .btn {
  flex: none;
  width: auto;
  min-width: 260px;
  margin-top: 0;
}

.lead__box.is-submitted .lead__form,
.lead__box.is-submitted .lead__head {
  display: none;
}

@media (max-width: 1024px) {
  .lead__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lead__grid textarea { height: auto; min-height: 96px; }
}

@media (max-width: 640px) {
  .lead__box { padding: 28px 18px; }
  .lead__grid { grid-template-columns: 1fr; }
  .lead__wide, .lead__grid .lead__wide:last-child { grid-column: auto; }
  .lead__bottom { flex-direction: column; align-items: stretch; }
  .lead__bottom .consent { max-width: none; }
  .lead__bottom .btn { width: 100%; min-width: 0; }
}


/* ==========================================================================
   Страница 404 (404.html): слева тексты на рифлёном стекле с шарами,
   справа «404», где ноль — матовый шар, который парит над тенью
   ========================================================================== */
.e404 {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--size) * 0.03);
  font-size: calc(var(--size) * 0.42);
  font-weight: 200;
  line-height: 1;
  letter-spacing: -0.04em;
}

/* цифры — матовые, светлее сверху, как грани блоков на других страницах */
.e404__digit {
  background: linear-gradient(180deg, #c4d8ff 0%, #5d7fd6 55%, #1e3478 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.e404__zero {
  position: relative;
  width: calc(var(--size) * 0.28);
  height: calc(var(--size) * 0.42);
}

.e404__ball {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--size) * 0.06);
  height: calc(var(--size) * 0.28);
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, rgba(120, 155, 245, 0.95) 0%, rgba(35, 65, 150, 0.92) 34%, rgba(10, 22, 62, 0.96) 66%, #03060f 100%);
  box-shadow: inset -10px -14px 30px rgba(0, 4, 18, 0.55);
  animation: e404-float 3.6s ease-in-out infinite alternate;
}

/* тень на «полу»: шар выше — тень меньше и прозрачнее */
.e404__shadow {
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 0;
  height: calc(var(--size) * 0.03);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0, 4, 18, 0.8) 0%, rgba(0, 4, 18, 0) 70%);
  animation: e404-shadow 3.6s ease-in-out infinite alternate;
}

@keyframes e404-float {
  0% { transform: translateY(calc(var(--size) * 0.04)); }
  100% { transform: translateY(calc(var(--size) * -0.05)); }
}

@keyframes e404-shadow {
  0% { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(0.7); opacity: 0.45; }
}

.hero.is-offscreen .e404__ball,
.hero-visual.is-offscreen .e404__ball,
.hero-visual.is-offscreen .e404__shadow {
  animation-play-state: paused;
}

/* десктоп: тексты по центру плашки по вертикали (на одной высоте с «404»), а не прижаты к низу */
@media (min-width: 850px) {
  .hero.hero--404 {
    justify-content: center;
    padding-top: 0;
    padding-bottom: 0;
  }
  .hero--404 .hero__left {
    margin-top: 0;
  }
}

/* телефон: под плашкой, в 40px от неё */
@media (max-width: 849px) {
  .hero--404 .e404 {
    padding: 40px 0 72px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .e404__ball,
  .e404__shadow {
    animation: none;
  }
}

/* ==========================================================================
   Главная, телефон: все тексты, кроме заголовков, на 2px крупнее.
   Значения — исходный размер на телефоне + 2px; заголовки (h1–h6), крупные
   выводы в «Причинах» и цифры фактов/исследования не меняются.
   ========================================================================== */
@media (max-width: 640px) {
  .page-home .hero__left .hero__points { font-size: 15px; }
  .page-home .hero__actions .btn { font-size: 14px; }
  .page-home .hero__photo-caption strong { font-size: 15px; }
  .page-home .hero__photo-caption span { font-size: 13px; }
  .page-home .fact .fact__label { font-size: 13px; }
  .page-home .signals__header .eyebrow { font-size: 13px; }
  .page-home .signal-card__top .signal-card__num { font-size: 17px; }
  .page-home .signal-card__content .signal-card__title { font-size: 17px; }
  .page-home .signal-card__content .signal-card__text { font-size: 14px; }
  .page-home .signals__footer p { font-size: 16px; }
  .page-home .signals__footer .signals__footer-highlight { font-size: 16px; }
  .page-home .signals__footer .btn { font-size: 14px; }
  .page-home .reasons__header .eyebrow { font-size: 13px; }
  .page-home .reasons__flow-card .reasons__flow-index { font-size: 14px; }
  .page-home .reasons__flow-card p:not(.reasons__summary-lead) { font-size: 15px; }
  .page-home .reasons__flow .reasons__flow-text { font-size: 15px; }
  .page-home .reasons__summary-list li { font-size: 13px; }
  .page-home .reasons__flow-card .reasons__summary-text { font-size: 15px; }
  .page-home .stages__header .eyebrow { font-size: 13px; }
  .page-home .stage .stage__index { font-size: 18px; }
  .page-home .stage__body .stage__text { font-size: 16px; }
  .page-home .stage__tags li { font-size: 13px; }
  .page-home .product-card span { font-size: 14px; }
  .page-home .products__header .eyebrow { font-size: 13px; }
  /* карточки решений (тарифов) — ещё на 2px крупнее остального текста */
  .page-home .product-tile .product-tile__title { font-size: 19px; }
  .page-home .product-tile .product-tile__label { font-size: 13px; }
  .page-home .product-tile .product-tile__text { font-size: 15px; }
  .page-home .product-tile__list li { font-size: 15px; }
  .page-home .product-tile .product-tile__more { font-size: 15px; }
  .page-home .why__header .eyebrow { font-size: 13px; }
  .page-home .compare__head .compare__th { font-size: 12px; }
  .page-home .compare__row .compare__cell { font-size: 14px; }
  .page-home .compare__cell .compare__label { font-size: 14px; }
  .page-home .why-scheme__item .why-scheme__text { font-size: 14px; }
  .page-home .why-scheme__card .why-scheme__corner { font-size: 13px; }
  .page-home .founder__caption strong { font-size: 15px; }
  .page-home .founder__caption span { font-size: 13px; }
  .page-home .founder__header .eyebrow { font-size: 13px; }
  .page-home .founder__story p { font-size: 16px; }
  .page-home .founder-stats__item .fact__label { font-size: 15px; }
  .page-home .founder__help-list li { font-size: 14px; }
  .page-home .founder__actions .btn { font-size: 14px; }
  .page-home .cases__header .eyebrow { font-size: 13px; }
  .page-home .cases__all-wrap .btn { font-size: 14px; }
  .page-home .case-card__meta dt { font-size: 16px; }
  .page-home .case-card__meta dd { font-size: 14px; }
  .page-home .case-card .case-card__result-label { font-size: 13px; }
  .page-home .case-card .case-card__result { font-size: 20px; }
  .page-home .case-card .case-card__more { font-size: 14px; }
  .page-home .case-card__more span { font-size: 14px; }
  .page-home .research__header .eyebrow { font-size: 13px; }
  .page-home .research__all-wrap .btn { font-size: 14px; }
  .page-home .research-card__number .research-card__caption { font-size: 14px; }
  .page-home .research-card__main .research-card__text { font-size: 15px; }
  .page-home .faq__header .eyebrow { font-size: 13px; }
  .page-home .faq-item__a-inner p { font-size: 16px; }
  .page-home .cta__header .eyebrow { font-size: 13px; }
  .page-home .cta-card__body .cta-card__text { font-size: 15px; }
  .page-home .field label { font-size: 16px; }
  .page-home .field input { font-size: 15px; }
  .page-home .field textarea { font-size: 15px; }
  .page-home .phone-code .phone-code__trigger { font-size: 15px; }
  .page-home .phone-code__trigger span { font-size: 15px; }
  .page-home .phone-code__list li { font-size: 15px; }
  .page-home .phone-field input { font-size: 14px; }
  .page-home .consent span { font-size: 13px; }
  .page-home .consent a { font-size: 13px; }
  .page-home .form .btn { font-size: 15px; }
  .page-home .form-success p { font-size: 17px; }
  .page-home .form-success .btn { font-size: 18px; }
  .page-home .alt-contacts a { font-size: 13px; }
}

/* Главная, телефон: в части блоков тексты ещё на 2px крупнее
   (заголовки блоков и кнопки не меняются) */
@media (max-width: 640px) {
  /* «Для кого»: карточки и текст под ними */
  .page-home .signal-card__top .signal-card__num { font-size: 19px; }
  .page-home .signal-card__content .signal-card__title { font-size: 19px; }
  .page-home .signal-card__content .signal-card__text { font-size: 16px; }
  .page-home .signals__footer p,
  .page-home .signals__footer .signals__footer-highlight { font-size: 18px; }
  /* «Причины»: табы */
  .page-home .reasons__summary-list li { font-size: 15px; }
  /* «Этапы»: табы и названия решений */
  .page-home .stage__tags li { font-size: 15px; }
  .page-home .product-card span { font-size: 16px; }
  /* «Почему Saints»: пункты под плашкой с логотипом */
  .page-home .why-scheme__item .why-scheme__title { font-size: 17px; }
  .page-home .why-scheme__item .why-scheme__text { font-size: 16px; }
  /* «Об основателе»: табы */
  .page-home .founder__help-list li { font-size: 16px; }
  /* FAQ: вопросы (ответы без изменений) */
  .page-home .faq-item__q,
  .page-home .faq-item__btn { font-size: 16px; }
}

/* Главная, телефон: заголовки (28px) и подзаголовки (16px) блоков крупнее прежних 24 / 14px */
@media (max-width: 640px) {
  .page-home main [class*="__header"] > h2 {
    font-size: 28px;
    line-height: 1.2;
  }
  .page-home main [class*="__header"] > h3 {
    font-size: 16px;
    line-height: 1.5;
  }
  /* «Причины»: второе предложение подзаголовка — без принудительного переноса (на десктопе перенос остаётся) */
  .page-home .reasons__header h3 br {
    display: none;
  }
}

/* Главная, телефон: перед «Для кого» 120px (расстояние между блоками 108px задано в :root) */
@media (max-width: 640px) {
  .page-home .signals {
    padding-top: 120px;
  }
}

/* Телефон и узкий планшет: на страницах с плашкой заголовок стоит на том же расстоянии от меню,
   что и на главной. Там плашка во весь экран и текст прижат к низу, поэтому отступ растёт с высотой
   экрана: ≈ высота экрана − 542px (замер на 390–412px ширины). Не меньше прежних 116/100px —
   крошки остаются вверху, в ~60px под меню */
@media (max-width: 849px) {
  .hero.hero--product .hero__left {
    padding-top: max(116px, calc(100vh - 542px));
    padding-top: max(116px, calc(100svh - 542px));
  }
}

@media (max-width: 640px) {
  .hero.hero--product .hero__left {
    padding-top: max(100px, calc(100vh - 542px));
    padding-top: max(100px, calc(100svh - 542px));
  }
}

/* ==========================================================================
   «Внешний контур», телефон: размеры текстов как на главной —
   тексты (кроме заголовков, крупных цифр результатов и хлебных крошек) на 2px крупнее,
   заголовки блоков 28px, подзаголовки 16px, первый экран — как у главной (30 / 17.5px)
   ========================================================================== */
@media (max-width: 640px) {
  .page-vk .hero__actions .btn { font-size: 14px; }
  .page-vk .section-head .eyebrow { font-size: 13px; }
  .page-vk .approach__col .approach__col-title { font-size: 20px; }
  .page-vk .approach__list p { font-size: 15px; }
  .page-vk .approach__col .approach__result { font-size: 15px; }
  .page-vk .approach__result .approach__result-label { font-size: 15px; }
  .page-vk .approach__list strong { font-size: 15px; }
  .page-vk .stage .stage__index { font-size: 18px; }
  .page-vk .stage__body .stage__text { font-size: 16px; }
  .page-vk .stage__body .stage__result { font-size: 15px; }
  .page-vk .stage__result .stage__result-label { font-size: 13px; }
  .page-vk .result-card .result-card__kicker { font-size: 13px; }
  .page-vk .result-card .result-card__text { font-size: 14px; }
  .page-vk .filter-card .filter-card__text { font-size: 16px; }
  .page-vk .cta__header .eyebrow { font-size: 13px; }
  .page-vk .field label { font-size: 16px; }
  .page-vk .field input { font-size: 15px; }
  .page-vk .field textarea { font-size: 15px; }
  .page-vk .phone-code .phone-code__trigger { font-size: 15px; }
  .page-vk .phone-code__trigger span { font-size: 15px; }
  .page-vk .phone-code__list li { font-size: 15px; }
  .page-vk .phone-field input { font-size: 14px; }
  .page-vk .consent span { font-size: 13px; }
  .page-vk .consent a { font-size: 13px; }
  .page-vk .form .btn { font-size: 15px; }
  .page-vk .form-success p { font-size: 17px; }
  .page-vk .form-success .btn { font-size: 18px; }
  .page-vk .alt-contacts a { font-size: 13px; }
  .page-vk .hero--product .hero__title {
    font-size: clamp(24px, 8.5vw, 30px);
  }
  .page-vk .hero--product .hero__tagline {
    font-size: 17.5px;
  }
  .page-vk main .section-head > h2,
  .page-vk main [class*="__header"] > h2 {
    font-size: 28px;
    line-height: 1.2;
  }
  .page-vk main .section-head > h3,
  .page-vk main [class*="__header"] > h3 {
    font-size: 16px;
    line-height: 1.5;
  }
  /* «Кому не подходит»: подзаголовок без принудительного переноса (на десктопе перенос остаётся) */
  .page-vk .filter .section-head > h3 br {
    display: none;
  }
}

/* ==========================================================================
   Все страницы, телефон: размеры текстов как на главной.
   1) Обычные тексты — на 2px крупнее исходных (правила сгенерированы по замеру каждой страницы
      на 390px; не меняются заголовки h1–h6, крупные цифры/показатели, хлебные крошки, стрелки).
   2) Заголовки блоков 28px, подзаголовки 16px, первый экран 30 / 17.5px — как на главной.
   ========================================================================== */
@media (max-width: 640px) {
  /* strategicheskiy-naem.html */
  .page-naem .hero__actions .btn { font-size: 14px; }
  .page-naem .section-head .eyebrow { font-size: 13px; }
  .page-naem .filter-card .filter-card__text { font-size: 16px; }
  .page-naem .trio__card .trio__note { font-size: 12px; }
  .page-naem .trio__card .trio__text { font-size: 15px; }
  .page-naem .trio__card--main .trio__text { font-size: 16px; }
  .page-naem .trio__card .approach__brand { font-size: 15px; }
  .page-naem .stage .stage__index { font-size: 18px; }
  .page-naem .stage__body .stage__text { font-size: 16px; }
  .page-naem .compare__head .compare__th { font-size: 12px; }
  .page-naem .compare__row .compare__cell { font-size: 14px; }
  .page-naem .compare__cell .compare__crit { font-size: 12px; }
  .page-naem .cases__header .eyebrow { font-size: 13px; }
  .page-naem .cases__all-wrap .btn { font-size: 14px; }
  .page-naem .case-card__meta dt { font-size: 16px; }
  .page-naem .case-card__meta dd { font-size: 14px; }
  .page-naem .case-card .case-card__result-label { font-size: 13px; }
  .page-naem .case-card .case-card__result { font-size: 20px; }
  .page-naem .case-card .case-card__more { font-size: 14px; }
  .page-naem .case-card__more span { font-size: 14px; }
  .page-naem .ticker__list .ticker__logo { font-size: 14px; }
  .page-naem .cta-card .eyebrow { font-size: 13px; }
  .page-naem .cta-card__body .cta-card__text { font-size: 15px; }
  .page-naem .field label { font-size: 16px; }
  .page-naem .field input { font-size: 15px; }
  .page-naem .field textarea { font-size: 15px; }
  .page-naem .phone-code .phone-code__trigger { font-size: 15px; }
  .page-naem .phone-code__trigger span { font-size: 15px; }
  .page-naem .phone-code__list li { font-size: 15px; }
  .page-naem .phone-field input { font-size: 14px; }
  .page-naem .consent span { font-size: 13px; }
  .page-naem .consent a { font-size: 13px; }
  .page-naem .form .btn { font-size: 15px; }
  .page-naem .form-success p { font-size: 17px; }
  .page-naem .form-success .btn { font-size: 18px; }
  .page-naem .alt-contacts a { font-size: 13px; }
  /* audit-sistemy-upravleniya.html */
  .page-audit .hero__actions .btn { font-size: 14px; }
  .page-audit .section-head .eyebrow { font-size: 13px; }
  .page-audit .filter-card .filter-card__text { font-size: 16px; }
  .page-audit .zz__card .zz__index { font-size: 14px; }
  .page-audit .zz__card p { font-size: 15px; }
  .page-audit .vector-card .vector-card__text { font-size: 16px; }
  .page-audit .stage__tags li { font-size: 14px; }
  .page-audit .vectors__tools .vectors__note { font-size: 15px; }
  .page-audit .deliver .deliver__item { font-size: 15px; }
  .page-audit .price__stats .price__label { font-size: 15px; }
  .page-audit .price__facts dt { font-size: 14px; }
  .page-audit .price__facts dd { font-size: 18px; }
  .page-audit .compare__head .compare__th { font-size: 12px; }
  .page-audit .compare__row .compare__cell { font-size: 14px; }
  .page-audit .compare__cell .compare__label { font-size: 14px; }
  .page-audit .after__col .after__title { font-size: 19px; }
  .page-audit .after__tabs li { font-size: 14px; }
  .page-audit .cta__header .eyebrow { font-size: 13px; }
  .page-audit .field label { font-size: 16px; }
  .page-audit .field input { font-size: 15px; }
  .page-audit .field textarea { font-size: 15px; }
  .page-audit .phone-code .phone-code__trigger { font-size: 15px; }
  .page-audit .phone-code__trigger span { font-size: 15px; }
  .page-audit .phone-code__list li { font-size: 15px; }
  .page-audit .phone-field input { font-size: 14px; }
  .page-audit .consent span { font-size: 13px; }
  .page-audit .consent a { font-size: 13px; }
  .page-audit .form .btn { font-size: 15px; }
  .page-audit .form-success p { font-size: 17px; }
  .page-audit .form-success .btn { font-size: 18px; }
  .page-audit .alt-contacts a { font-size: 13px; }
  /* hrbp.html */
  .page-hrbp .hero__actions .btn { font-size: 14px; }
  .page-hrbp .section-head .eyebrow { font-size: 13px; }
  .page-hrbp .filter-card .filter-card__text { font-size: 16px; }
  .page-hrbp .vector-card .vector-card__num { font-size: 17px; }
  .page-hrbp .vector-card .vector-card__text { font-size: 17px; }
  .page-hrbp .compare__head .compare__th { font-size: 12px; }
  .page-hrbp .compare__row .compare__cell { font-size: 14px; }
  .page-hrbp .compare__cell .compare__label { font-size: 14px; }
  .page-hrbp .stage .stage__index { font-size: 18px; }
  .page-hrbp .stage__body .stage__text { font-size: 16px; }
  .page-hrbp .nums__stats .nums__label { font-size: 15px; }
  .page-hrbp .nums__case-head .nums__case-brand { font-size: 15px; }
  .page-hrbp .nums__case-head .nums__case-title { font-size: 20px; }
  .page-hrbp .nums__case-grid dt { font-size: 12px; }
  .page-hrbp .nums__case-grid dd { font-size: 14px; }
  .page-hrbp .after__col .after__title { font-size: 19px; }
  .page-hrbp .after__tabs li { font-size: 14px; }
  .page-hrbp .cta__header .eyebrow { font-size: 13px; }
  .page-hrbp .field label { font-size: 16px; }
  .page-hrbp .field input { font-size: 15px; }
  .page-hrbp .field textarea { font-size: 15px; }
  .page-hrbp .phone-code .phone-code__trigger { font-size: 15px; }
  .page-hrbp .phone-code__trigger span { font-size: 15px; }
  .page-hrbp .phone-code__list li { font-size: 15px; }
  .page-hrbp .phone-field input { font-size: 14px; }
  .page-hrbp .consent span { font-size: 13px; }
  .page-hrbp .consent a { font-size: 13px; }
  .page-hrbp .form .btn { font-size: 15px; }
  .page-hrbp .form-success p { font-size: 17px; }
  .page-hrbp .form-success .btn { font-size: 18px; }
  .page-hrbp .alt-contacts a { font-size: 13px; }
  /* testirovanie-rukovoditeley.html */
  .page-test .hero__actions .btn { font-size: 14px; }
  .page-test .section-head .eyebrow { font-size: 13px; }
  .page-test .filter-card .filter-card__text { font-size: 16px; }
  .page-test .intuit__card .nums__case-brand { font-size: 15px; }
  .page-test .intuit__card .intuit__text { font-size: 16px; }
  .page-test .vector-card__body .vector-card__title { font-size: 18px; }
  .page-test .vector-card__body .vector-card__desc { font-size: 15px; }
  .page-test .deliver .deliver__item { font-size: 15px; }
  .page-test .proc__facts dt { font-size: 13px; }
  .page-test .proc__facts dd { font-size: 17px; }
  .page-test .after__col .proc__text { font-size: 16px; }
  .page-test .after__tabs li { font-size: 14px; }
  .page-test .after__col .after__title { font-size: 19px; }
  .page-test .cta__header .eyebrow { font-size: 13px; }
  .page-test .field label { font-size: 16px; }
  .page-test .field input { font-size: 15px; }
  .page-test .field textarea { font-size: 15px; }
  .page-test .phone-code .phone-code__trigger { font-size: 15px; }
  .page-test .phone-code__trigger span { font-size: 15px; }
  .page-test .phone-code__list li { font-size: 15px; }
  .page-test .phone-field input { font-size: 14px; }
  .page-test .consent span { font-size: 13px; }
  .page-test .consent a { font-size: 13px; }
  .page-test .form .btn { font-size: 15px; }
  .page-test .form-success p { font-size: 17px; }
  .page-test .form-success .btn { font-size: 18px; }
  .page-test .alt-contacts a { font-size: 13px; }
  /* diagnostika.html */
  .page-diag .hero__actions .btn { font-size: 14px; }
  .page-diag .section-head .eyebrow { font-size: 13px; }
  .page-diag .stairs__card .vector-card__num { font-size: 14px; }
  .page-diag .stairs__card .vector-card__title { font-size: 18px; }
  .page-diag .stairs__card .vector-card__desc { font-size: 15px; }
  .page-diag .filter-card .filter-card__title { font-size: 19px; }
  .page-diag .filter-card .filter-card__text { font-size: 16px; }
  .page-diag .cta__header .eyebrow { font-size: 13px; }
  .page-diag .field label { font-size: 16px; }
  .page-diag .field input { font-size: 15px; }
  .page-diag .field textarea { font-size: 15px; }
  .page-diag .phone-code .phone-code__trigger { font-size: 15px; }
  .page-diag .phone-code__trigger span { font-size: 15px; }
  .page-diag .phone-code__list li { font-size: 15px; }
  .page-diag .phone-field input { font-size: 14px; }
  .page-diag .consent span { font-size: 13px; }
  .page-diag .consent a { font-size: 13px; }
  .page-diag .form .btn { font-size: 15px; }
  .page-diag .form-success p { font-size: 17px; }
  .page-diag .form-success .btn { font-size: 18px; }
  .page-diag .alt-contacts a { font-size: 13px; }
  /* ob-andree.html */
  .page-about .hero__actions .btn { font-size: 14px; }
  .page-about .hero__photo-caption strong { font-size: 15px; }
  .page-about .hero__photo-caption span { font-size: 13px; }
  .page-about .credo__stat .credo__label { font-size: 12.5px; }
  .page-about .stages__header .eyebrow { font-size: 13px; }
  .page-about .stage .stage__index { font-size: 18px; }
  .page-about .stage__body .stage__text { font-size: 16px; }
  .page-about .synth-scheme__center .nums__case-brand { font-size: 15px; }
  .page-about .synth-card .synth-card__text { font-size: 16px; }
  .page-about .principles__header .eyebrow { font-size: 13px; }
  .page-about .principles__col .principles__label { font-size: 13px; }
  .page-about .principles__list li { font-size: 15px; }
  .page-about .principles__glass .principles__conclusion { font-size: 18px; }
  .page-about .principles__conclusion .text-accent { font-size: 18px; }
  .page-about .media__header .eyebrow { font-size: 13px; }
  .page-about .media-card .media-card__title { font-size: 16px; }
  .page-about .audience-card .audience-card__text { font-size: 16px; }
  .page-about .formats__header .eyebrow { font-size: 13px; }
  .page-about .format-card .format-card__title { font-size: 20px; }
  .page-about .format-card .format-card__text { font-size: 16px; }
  .page-about .format-card .btn { font-size: 14px; }
  /* keysy.html */
  .page-cases .hero__actions .btn { font-size: 14px; }
  .page-cases .catalog__tags .catalog__tag { font-size: 15px; }
  .page-cases .catalog__select .visually-hidden { font-size: 16px; }
  .page-cases .catalog__select select { font-size: 15px; }
  .page-cases .catalog__select option { font-size: 15px; }
  .page-cases .case-card__meta dt { font-size: 16px; }
  .page-cases .case-card__meta dd { font-size: 14px; }
  .page-cases .case-card .case-card__result-label { font-size: 13px; }
  .page-cases .case-card .case-card__result { font-size: 18px; }
  .page-cases .catalog__pages .catalog__page { font-size: 15px; }
  .page-cases .cta__header .eyebrow { font-size: 13px; }
  .page-cases .field label { font-size: 16px; }
  .page-cases .field input { font-size: 15px; }
  .page-cases .field textarea { font-size: 15px; }
  .page-cases .phone-code .phone-code__trigger { font-size: 15px; }
  .page-cases .phone-code__trigger span { font-size: 15px; }
  .page-cases .phone-code__list li { font-size: 15px; }
  .page-cases .phone-field input { font-size: 14px; }
  .page-cases .consent span { font-size: 13px; }
  .page-cases .consent a { font-size: 13px; }
  .page-cases .form .btn { font-size: 15px; }
  .page-cases .form-success p { font-size: 17px; }
  .page-cases .form-success .btn { font-size: 18px; }
  .page-cases .alt-contacts a { font-size: 13px; }
  /* otzyvy.html */
  .page-reviews .hero__actions .btn { font-size: 14px; }
  .page-reviews .case-card .review-card__text { font-size: 15px; }
  .page-reviews .review-card__author .review-card__name { font-size: 18px; }
  .page-reviews .review-card__author .review-card__role { font-size: 14px; }
  .page-reviews .review-card__foot .review-card__letter { font-size: 15.3333px; }
  .page-reviews .cta__header .eyebrow { font-size: 13px; }
  .page-reviews .field label { font-size: 16px; }
  .page-reviews .field input { font-size: 15px; }
  .page-reviews .field textarea { font-size: 15px; }
  .page-reviews .consent span { font-size: 13px; }
  .page-reviews .consent a { font-size: 13px; }
  .page-reviews .form .btn { font-size: 15px; }
  .page-reviews .form-success p { font-size: 17px; }
  .page-reviews .form-success .btn { font-size: 18px; }
  .page-reviews .cta__tg p { font-size: 16px; }
  .page-reviews .cta__tg .btn { font-size: 14px; }
  /* biblioteka-znaniy.html */
  .page-library .hero__actions .btn { font-size: 14px; }
  .page-library .catalog__tags .catalog__tag { font-size: 15px; }
  .page-library .lib-row__meta time { font-size: 14px; }
  .page-library .lib-row__meta .lib-row__cat { font-size: 14px; }
  .page-library .lib-row__link .lib-row__summary { font-size: 16px; }
  .page-library .lib-row__link .lib-row__time { font-size: 14px; }
  .page-library .cta__header .eyebrow { font-size: 13px; }
  .page-library .field label { font-size: 16px; }
  .page-library .field input { font-size: 15px; }
  .page-library .field textarea { font-size: 15px; }
  .page-library .consent span { font-size: 13px; }
  .page-library .consent a { font-size: 13px; }
  .page-library .form .btn { font-size: 15px; }
  .page-library .form-success p { font-size: 17px; }
  .page-library .form-success .btn { font-size: 18px; }
  .page-library .cta__tg p { font-size: 16px; }
  .page-library .cta__tg .btn { font-size: 14px; }
  /* statya.html?id=vyhod-iz-operacionki */
  .page-article .lib-row__meta time { font-size: 14px; }
  .page-article .lib-row__meta .lib-row__cat { font-size: 14px; }
  .page-article .lib-row__meta span { font-size: 14px; }
  .page-article .article__body .article__lead { font-size: 19px; }
  .page-article .article__body p { font-size: 18px; }
  .page-article .article__inner .btn { font-size: 14px; }
  .page-article .cta__header .eyebrow { font-size: 13px; }
  .page-article .field label { font-size: 16px; }
  .page-article .field input { font-size: 15px; }
  .page-article .field textarea { font-size: 15px; }
  .page-article .consent span { font-size: 13px; }
  .page-article .consent a { font-size: 13px; }
  .page-article .form .btn { font-size: 15px; }
  .page-article .form-success p { font-size: 17px; }
  .page-article .form-success .btn { font-size: 18px; }
  .page-article .cta__tg p { font-size: 16px; }
  .page-article .cta__tg .btn { font-size: 14px; }
  /* issledovaniya.html */
  .page-research .hero__actions .btn { font-size: 14px; }
  .page-research .research-card__number .research-card__caption { font-size: 14px; }
  .page-research .research-card__main .research-card__text { font-size: 15px; }
  .page-research .container .research__soon { font-size: 16px; }
  .page-research .research__soon a { font-size: 16px; }
  .page-research .cta__header .eyebrow { font-size: 13px; }
  .page-research .field label { font-size: 16px; }
  .page-research .field input { font-size: 15px; }
  .page-research .field textarea { font-size: 15px; }
  .page-research .consent span { font-size: 13px; }
  .page-research .consent a { font-size: 13px; }
  .page-research .form .btn { font-size: 15px; }
  .page-research .form-success p { font-size: 17px; }
  .page-research .form-success .btn { font-size: 18px; }
  .page-research .cta__tg p { font-size: 16px; }
  .page-research .cta__tg .btn { font-size: 14px; }
  /* issledovanie-predprinimateley-2026.html */
  .page-report .hero__actions .btn { font-size: 14px; }
  .page-report .report-stats .report-stats__label { font-size: 15px; }
  .page-report .section-head .eyebrow { font-size: 13px; }
  .page-report .report-method__text p { font-size: 17px; }
  .page-report .donut__legend li { font-size: 16px; }
  .page-report .donut__legend b { font-size: 16px; }
  .page-report .rbar .rbar__label { font-size: 16px; }
  .page-report .rbar .rbar__value { font-size: 16px; }
  .page-report .vector-card .vector-card__desc { font-size: 17px; }
  .page-report .rquote .rquote__topic { font-size: 14px; }
  .page-report .rquote .rquote__text { font-size: 17px; }
  .page-report .rquote__author span { font-size: 14px; }
  .page-report .rquote__author b { font-size: 16px; }
  .page-report .cta__header .eyebrow { font-size: 13px; }
  .page-report .field label { font-size: 16px; }
  .page-report .field input { font-size: 15px; }
  .page-report .field textarea { font-size: 15px; }
  .page-report .consent span { font-size: 13px; }
  .page-report .consent a { font-size: 13px; }
  .page-report .form .btn { font-size: 15px; }
  .page-report .form-success p { font-size: 17px; }
  .page-report .form-success .btn { font-size: 18px; }
  .page-report .cta__tg p { font-size: 16px; }
  .page-report .cta__tg .btn { font-size: 14px; }
  /* kontakty.html */
  .page-contacts .hero__actions .btn { font-size: 14px; }
  .page-contacts .contact-card .contact-card__label { font-size: 14px; }
  .page-contacts .contact-card .contact-card__value { font-size: 21px; }
  .page-contacts .contact-card .contact-card__note { font-size: 15px; }
  .page-contacts .field label { font-size: 16px; }
  .page-contacts .field input { font-size: 15px; }
  .page-contacts .phone-code .phone-code__trigger { font-size: 15px; }
  .page-contacts .phone-code__trigger span { font-size: 15px; }
  .page-contacts .phone-code__list li { font-size: 15px; }
  .page-contacts .phone-field input { font-size: 14px; }
  .page-contacts .field select { font-size: 15px; }
  .page-contacts .field option { font-size: 15px; }
  .page-contacts .field textarea { font-size: 15px; }
  .page-contacts .consent span { font-size: 13px; }
  .page-contacts .consent a { font-size: 13px; }
  .page-contacts .lead__bottom .btn { font-size: 15px; }
  .page-contacts .form-success p { font-size: 17px; }
  .page-contacts .form-success .btn { font-size: 18px; }
  /* politika.html */
  .page-policy .article__inner .article__meta { font-size: 16px; }
  .page-policy .article__body p { font-size: 16px; }
  .page-policy .article__body li { font-size: 16px; }
  .page-policy .article__body strong { font-size: 16px; }
  .page-policy .article__body a { font-size: 16px; }
  /* soglasie.html */
  .page-consent .article__inner .article__meta { font-size: 16px; }
  .page-consent .article__body .article__lead { font-size: 16px; }
  .page-consent .article__body p { font-size: 16px; }
  .page-consent .article__body li { font-size: 16px; }
  .page-consent .article__body a { font-size: 16px; }
  /* 404.html */
  .page-404 .hero__left .eyebrow { font-size: 13px; }
  .page-404 .hero__actions .btn { font-size: 14px; }

  /* заголовки и подзаголовки блоков */
  main .section-head > h2,
  main [class*="__header"] > h2,
  main .cta-card > h2,
  main .lead__head > h2,
  main .audience__title {
    font-size: 28px;
    line-height: 1.2;
  }
  main .section-head > h3,
  main [class*="__header"] > h3,
  main .cta-card > h3,
  main .lead__head > h3 {
    font-size: 16px;
    line-height: 1.5;
  }
  /* первый экран и заголовок страниц-документов */
  .hero.hero--product .hero__title {
    font-size: clamp(24px, 8.5vw, 30px);
  }
  .hero.hero--product .hero__tagline {
    font-size: 17.5px;
  }
  .article .article__title {
    font-size: 30px;
  }
}

/* Подвал: текст на 2px крупнее (на всех ширинах) */
.site-footer .site-footer__title,
.site-footer .site-footer__copy,
.site-footer .site-footer__requisites p {
  font-size: 14px;
}

.site-footer .site-footer__list a {
  font-size: 15px;
}