/* main.css — стили Coreform. Источник истины: ../brand-guide.md.
   Перфоманс-закон: анимации только transform/opacity/color. Исключения по ТЗ:
   backdrop-filter шапки/шторки и grid-template-rows у FAQ (локальный трюк). */

body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  font-family: "Onest", sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Только вертикальный скролл: горизонтальный вылет за вьюпорт отсекается.
   overflow-x:clip (не hidden) — не создаёт скролл-контейнер, не ломает
   sticky/fixed-шапку и fixed-canvas Ядра, не форсит overflow-y:auto. */
html, body { overflow-x: clip; }

/* Контейнер — единые широкие поля контента по всему сайту (как на hero).
   Без max-width: левый край контента всегда на --content-padding-x от края
   экрана, поэтому лого шапки, Core, тексты секций и © футера — на одной
   вертикали при любой ширине. */
.container {
  width: 100%;
  padding-inline: var(--content-padding-x);
}

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

/* Типографика */
.display, .h1, .h2, .h3 {
  text-align: left;
  font-family: "Onest", sans-serif;
  font-weight: 500;
}
.display { font-size: 96px; letter-spacing: -0.03em; line-height: 1.0; }
.h1 { font-size: 72px; letter-spacing: -0.025em; line-height: 1.05; }
.h2 { font-size: 48px; letter-spacing: -0.02em; line-height: 1.1; }
.h3 { font-size: 32px; letter-spacing: -0.015em; line-height: 1.2; }
.body-lg { font-size: 20px; line-height: 1.5; }
.body { font-size: 16px; line-height: 1.5; }

.mono-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.0;
  color: var(--text-tertiary);
}

/* Мелкие моно-подписи (углы hero, статусы, футер-линейка) */
.mono-tag {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.28);
}

/* ── Line-by-line reveal ──────────────────────────────────────── */
/* JS (js/main.js) разбивает [data-reveal] на строки по фактическому переносу:
   .rl-line (маска overflow:hidden) > .rl-inner (строка). До .is-in строки
   спрятаны под маской. reduced-motion: разбивки нет, всё видно сразу. */
.rl-line {
  display: block;
  overflow: hidden;
}

.rl-inner {
  display: block;
  transform: translateY(112%);
  opacity: 0;
  /* Длительность ×1.5 (0.7→1.05с / 0.55→0.825с), стаггер ×1.5 (75→112мс).
     Прежняя базовая задержка (+20%) убрана — триггер теперь на 4/10 снизу (JS IO). */
  transition:
    transform 1.05s cubic-bezier(0.65, 0, 0.35, 1),
    opacity 0.825s cubic-bezier(0.65, 0, 0.35, 1);
  transition-delay: calc(var(--rl-i, 0) * 112ms);
}

.is-in .rl-inner {
  transform: translateY(0);
  opacity: 1;
}

/* ── Моушн блоков (карточки, плашки, линии, FAQ) ───────────────────
   Классы навешивает JS (setupBlockReveal) и снимает через .av при входе в кадр.
   Time-based: триггер сработал один раз → CSS-переход доигрывает сам по таймеру,
   НЕ привязан к дальнейшему скроллу. Эффекты: fade+slide (up), clip-reveal
   (штора). Всё transform/opacity/clip. reduced-motion: JS не навешивает классы.
   Стаггер — переменная --ad. БЕЗ will-change: он на предке ломал backdrop-filter
   вложенного стекла (кнопка/карточка гарантий, карточки услуг). */
.anim-up {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.85s var(--ease-cinematic), transform 0.85s var(--ease-cinematic);
  transition-delay: var(--ad, 0ms);
}
.anim-pop {
  opacity: 0;
  transform: translateY(24px) scale(0.965);
  transition: opacity 0.8s var(--ease-cinematic), transform 0.8s var(--ease-cinematic);
  transition-delay: var(--ad, 0ms);
}
.anim-clip {
  opacity: 0;
  clip-path: inset(0 0 100% 0);
  transition: opacity 0.55s var(--ease-cinematic), clip-path 0.9s var(--ease-cinematic);
  transition-delay: var(--ad, 0ms);
}

.anim-up.av, .anim-pop.av { opacity: 1; transform: none; }
.anim-clip.av { opacity: 1; clip-path: inset(0 0 0 0); }

/* Появление карточек услуг (rcard со стеклом+tilt): БЕЗ мерцания и БЕЗ конфликта
   с tilt. Сдвиг вкомпонован в тот же transform карточки через переменную --card-y
   (анимируется через @property), поэтому JS-tilt (--rx/--ry) и появление не дерутся
   и не перезаписывают друг друга. Только opacity + свой translateY, time-based. */
@property --card-y {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
.card-in {
  opacity: 0;
  --card-y: 22px;
  transition: opacity 0.8s var(--ease-cinematic), --card-y 0.8s var(--ease-cinematic);
  transition-delay: var(--ad, 0ms);
}
.card-in.av { opacity: 1; --card-y: 0px; }

/* Обёртки читаемости-подложек (мобайл). На десктопе display:contents — их как
   будто нет (нулевое влияние на лейаут), псевдоэлемент-подложка не генерируется.
   На мобиле (медиа-запрос) становятся блоком с одной подложкой на группу. */
.hero__descs, .sgroup, .case__cap { display: contents; }

/* ── Реактивные карточки: 3D-tilt + фонарик ───────────────────────
   Демпфирование ~1с считает JS (setupReactiveCards), пишет CSS-переменные,
   применяются только transform/opacity — без дёрганий. --rx/--ry — наклон,
   --px/--py — центр светового пятна, --glow — его непрозрачность.
   --card-y — сдвиг появления (из .card-in), вкомпонован сюда же, чтобы не
   конфликтовать с наклоном. will-change на самой карточке — не ломает её
   собственный backdrop-filter (страдает только от will-change на ПРЕДКЕ). */
.rcard {
  transform: perspective(1000px) translateY(var(--card-y, 0px)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transform-style: preserve-3d;
  will-change: transform;
}
.rcard__glow {
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  pointer-events: none;
  opacity: var(--glow, 0);
  background: radial-gradient(360px circle at var(--px, 50%) var(--py, 50%),
    rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0) 60%);
}
@media (prefers-reduced-motion: reduce) {
  .rcard { transform: none; }
}

/* ── Кнопки (легаси .btn) ─────────────────────────────────────── */
.btn {
  display: inline-block;
  font-family: "Onest", sans-serif;
  font-weight: 500;
  font-size: 15px;
  color: var(--text-primary);
  background: transparent;
  border: 1.5px solid var(--text-primary);
  border-radius: 8px;
  padding: 12px 24px;
  transition: opacity 200ms var(--ease-snappy);
}
.btn:hover { opacity: 0.8; }

/* ── CTA-капсула ──────────────────────────────────────────────── */
.btn-cta {
  --mx: 0px; --my: 0px;
  --lx: 0px; --ly: 0px;
  --fx: 0px; --fy: 0px; --fs: 0;
  --press: 1;

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 14px 28px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  background: transparent;
  font-family: "Onest", sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.2;
  color: var(--text-primary);
  transform: translate(var(--mx), var(--my)) scale(var(--press));
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.btn-cta.is-magnet { transition: transform 0.2s ease-out; }
.btn-cta.is-press { --press: 0.96; transition: transform 0.12s ease-out; }
.btn-cta.is-release { transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }

.btn-cta__fill {
  position: absolute;
  top: -10px;
  left: -10px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #ffffff;
  transform: translate(var(--fx), var(--fy)) scale(var(--fs));
  transition: transform 0.45s var(--ease-cinematic);
  pointer-events: none;
  will-change: transform;
}

.btn-cta__label {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  overflow: hidden;
  transform: translate(var(--lx), var(--ly));
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.btn-cta.is-magnet .btn-cta__label { transition: transform 0.2s ease-out; }

.btn-cta__roll { position: relative; display: block; overflow: hidden; }

.btn-cta__text {
  display: block;
  transform: translateY(0);
  transition: transform 0.4s var(--ease-cinematic);
}
.btn-cta__text--copy {
  position: absolute;
  inset: 0;
  transform: translateY(110%);
  color: var(--bg-primary);
}
.btn-cta.is-hover .btn-cta__text { transform: translateY(-110%); }
.btn-cta.is-hover .btn-cta__text--copy { transform: translateY(0); }

/* label без .btn-cta__roll (кнопка шапки): маска на самом label */
.btn-cta__label > .btn-cta__text--copy { inset: auto 0 0 0; top: 0; }

.btn-cta__shine {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}
.btn-cta__shine::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 40%;
  background: linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, 0.22) 50%, transparent 100%);
  transform: translateX(-120%);
  will-change: transform;
}
.btn-cta.is-shine .btn-cta__shine::before { animation: cta-shine 0.7s ease-in-out; }
@keyframes cta-shine {
  from { transform: translateX(-120%); }
  to   { transform: translateX(320%); }
}

/* Telegram-вариант: единственное цветное исключение сайта. В покое монохром,
   на ховере заливка — фирменный градиент, въезжающий текст белый. */
.btn-cta--tg { width: 100%; padding: 16px 28px; }
.btn-cta--tg .btn-cta__fill { background: linear-gradient(135deg, #2AABEE 0%, #229ED9 100%); }
.btn-cta--tg .btn-cta__text--tg { color: #ffffff; }

.btn-cta__ava {
  display: inline-flex;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: var(--bg-primary);
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.btn-cta__ava img { width: 18px; height: 18px; }

.btn-cta--wide { width: 100%; }

/* XL-вариант (гарантии): та же механика (магнит, заливка, roll, блик, клик),
   в ~3 раза крупнее обычной капсулы. Лёгкая стеклянная подложка (blur) —
   кнопка не теряется на гранях Ядра. */
.btn-cta--xl {
  padding: 40px 80px;
  font-size: 30px;
  letter-spacing: -0.01em;
  border-width: 1.5px;
  background: rgba(10, 10, 11, 0.32);
  -webkit-backdrop-filter: blur(10px) saturate(1.05);
  backdrop-filter: blur(10px) saturate(1.05);
}
.btn-cta--xl .btn-cta__fill {
  top: -20px;
  left: -20px;
  width: 40px;
  height: 40px;
}

/* ── Кнопка звука ─────────────────────────────────────────────── */
.snd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--text-secondary);
  background: transparent;
  cursor: pointer;
  transition: color 0.25s var(--ease-snappy), transform 0.25s var(--ease-snappy);
}
.snd-btn:hover { color: var(--text-primary); }
.snd-btn:active { transform: scale(0.92); }

.snd-wave { opacity: 1; transform: none; transform-origin: left center; transition: opacity 0.25s, transform 0.25s var(--ease-snappy); }
.snd-cross { opacity: 0; transform: scale(0); transform-origin: center; transition: opacity 0.25s, transform 0.25s var(--ease-snappy); }
html.snd-off .snd-wave { opacity: 0; transform: scaleX(0.4); }
html.snd-off .snd-cross { opacity: 1; transform: scale(1); }
html.snd-off .snd-btn { color: var(--text-tertiary); }

/* ── Навигация: стекло ────────────────────────────────────────── */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: 72px;
  background: rgba(10, 10, 11, 0.55);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  backdrop-filter: blur(10px) saturate(1.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

.nav__logo {
  display: flex;
  align-items: center;
  gap: 13px;
  font-family: "Onest", sans-serif;
  font-weight: 600;
  font-size: 25px;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}
/* Иконка лого уменьшена на ~20% (42px → 34px); название не трогаем */
.nav__logo img { height: 34px; width: auto; }

.nav__actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

.nav__menu {
  display: flex;
  align-items: center;
  gap: 40px;
}

.nav__menu a {
  position: relative;
  padding: 6px 0;
  font-size: 16px;
  color: var(--text-secondary);
  transition: color 200ms var(--ease-snappy);
}
.nav__menu a:hover { color: var(--text-primary); }

/* Бегущее подчёркивание: приходит слева, уходит вправо. Только scaleX. */
.nav__menu a::after,
.footer__nav a::after,
.contact__mail::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1.5px;
  background: #ffffff;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1);
}
.nav__menu a:hover::after,
.footer__nav a:hover::after,
.contact__mail:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}
.nav__menu a.active { color: var(--text-primary); }
.nav__menu a.active::after { transform: scaleX(1); transform-origin: left; }

/* Бургер (только мобила) */
.burger {
  display: none;
  position: relative;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.burger__line {
  position: absolute;
  left: 10px;
  width: 24px;
  height: 1.5px;
  background: var(--text-primary);
  transition: transform 0.35s var(--ease-cinematic);
}
.burger__line:nth-child(1) { top: 18px; }
.burger__line:nth-child(2) { top: 26px; }
html.menu-open .burger__line:nth-child(1) { transform: translateY(4px) rotate(45deg); }
html.menu-open .burger__line:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }

/* Мобильная шторка */
.mmenu {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: none;
  flex-direction: column;
  justify-content: space-between;
  padding: 120px var(--pad-x) 40px;
  background: rgba(10, 10, 11, 0.97);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s var(--ease-cinematic);
}
html.menu-open .mmenu { opacity: 1; pointer-events: auto; }
html.menu-open { overflow: hidden; }

.mmenu__nav { display: flex; flex-direction: column; gap: 8px; }
.mmenu__nav a {
  display: block;
  overflow: hidden;
  font-size: 38px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  padding: 6px 0;
}
.mmenu__nav a > span {
  display: block;
  transform: translateY(115%);
  transition: transform 0.6s var(--ease-cinematic);
  transition-delay: calc(var(--mi, 0) * 70ms);
}
html.menu-open .mmenu__nav a > span { transform: translateY(0); }

.mmenu__foot { display: flex; flex-direction: column; gap: 20px; }
.mmenu__row { display: flex; align-items: center; justify-content: space-between; }
.mmenu__tg { font-size: 13px; color: var(--text-secondary); }

/* ── Сцена «Ядро»: сквозной fixed-canvas за всем контентом ────── */
#core-mount {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

main, footer { position: relative; z-index: 1; }

/* ── Hero ─────────────────────────────────────────────────────── */
#hero { min-height: 100vh; }

.hero__content {
  position: relative;
  min-height: 100vh;
  padding-top: 72px;
}

.hero__grid {
  position: absolute;
  top: 72px; left: 0; right: 0;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-top: 17vh;
  padding-inline: var(--pad-x);
  pointer-events: none;
}

.hero__col { width: clamp(260px, 24vw, 380px); }
.hero__col--right { text-align: right; }

.hero__word {
  display: inline-block;
  font-weight: 600;
  font-size: clamp(64px, 8vw, 120px);
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--text-primary);
  pointer-events: auto;
  /* Тень НА самих буквах: градиентная заливка текста — вверху светло (#FAFAFA),
     книзу темнеет. Усилено на ~50% (тёмная точка выше и темнее: #A3A3AC вместо
     #C0C0C6). Монохром, не акцент — в рамках бренда (это не цветной градиент). */
  background: linear-gradient(to bottom, #FAFAFA 44%, #A3A3AC 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.hero__rule {
  height: 1px;
  background: rgba(255, 255, 255, 0.12);
  margin: 28px 0 20px;
}

.hero__desc {
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 400px;
  pointer-events: auto;
}
.hero__col--right .hero__desc { margin-left: auto; }

/* Второй абзац — подописание: заметно тусклее, с моно-префиксом «//». */
.hero__desc--sub {
  margin-top: 14px;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.45);
}
.hero__desc-pre {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.32);
  margin-right: 2px;
}

/* Моно-подписи по углам hero */
.hero__tag { position: absolute; z-index: 1; }
.hero__tag--bl { left: var(--pad-x); bottom: 36px; }
.hero__tag--br { right: var(--pad-x); bottom: 36px; }
.hero__tag--tr { right: var(--pad-x); top: 100px; }

.hero__blink {
  display: inline-block;
  width: 5px;
  height: 10px;
  margin-left: 8px;
  background: #ffffff;
  opacity: 0.2;
  animation: hero-blink 1.2s ease-in-out infinite alternate;
}
@keyframes hero-blink {
  from { opacity: 0.2; }
  to   { opacity: 0.7; }
}

#hero-index { transition: opacity 0.18s ease; }
#hero-index.swap { opacity: 0; }

/* Scroll-индикатор */
.scroll-hint {
  position: absolute;
  left: 50%;
  bottom: 28px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  transform: translateX(-50%);
  transition: opacity 0.5s var(--ease-cinematic);
}
.scroll-hint__label {
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.3);
}
.scroll-hint__track {
  position: relative;
  width: 1px;
  height: 24px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}
.scroll-hint__dot {
  position: absolute;
  left: -0.5px;
  top: 0;
  width: 2px;
  height: 6px;
  background: rgba(255, 255, 255, 0.7);
  animation: scroll-dot 2s ease-in-out infinite;
}
@keyframes scroll-dot {
  0%   { transform: translateY(-8px); opacity: 0; }
  30%  { opacity: 1; }
  70%  { opacity: 1; }
  100% { transform: translateY(26px); opacity: 0; }
}
html.scrolled .scroll-hint { opacity: 0; }

/* ── Секции: общее ────────────────────────────────────────────── */
.section {
  position: relative;
  padding: 22vh 0;
  min-height: 100vh;
}

.section__label { margin-bottom: 28px; }

.section__title {
  font-size: clamp(36px, 4vw, 56px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.08;
  max-width: 720px;
}

.section__lead {
  margin-top: 28px;
  font-size: 19px;
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 560px;
}

/* ── Подход: процесс ──────────────────────────────────────────── */
.process {
  margin-top: 110px;
  display: flex;
  flex-direction: column;
}

.process__step {
  position: relative;
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 32px;
  padding: 44px 0;
}

.process__num {
  font-family: "JetBrains Mono", monospace;
  font-size: 44px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.16);
  line-height: 1;
}

.process__name {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.process__desc {
  margin-top: 14px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--text-secondary);
  max-width: 520px;   /* уже: держим текст левее, не наезжает на Ядро */
}

/* Линия-коннектор к следующему этапу: дорисовывается при входе (scaleY) */
.process__line {
  position: absolute;
  left: 24px;
  bottom: -22px;
  width: 1px;
  height: 44px;
  background: rgba(255, 255, 255, 0.16);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.9s var(--ease-cinematic) 0.35s;
}
.process__step.is-in .process__line { transform: scaleY(1); }

/* Полоса фактов — бегущая строка на морфиновом стекле (marquee, справа налево).
   Track = 3 идентичных набора (2 клонирует JS); сдвиг на −1/3 ширины даёт
   бесшовный цикл. Движение только transform (CSS linear, GPU). */
.ticker {
  margin-top: 120px;
  margin-inline: calc(-1 * var(--content-padding-x)); /* full-bleed до краёв экрана */
  overflow: hidden;
  background: rgba(10, 10, 11, 0.5);
  -webkit-backdrop-filter: blur(12px) saturate(1.1);
  backdrop-filter: blur(12px) saturate(1.1);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.ticker__track {
  display: flex;
  width: max-content;
  animation: ticker-scroll 34s linear infinite;
  will-change: transform;
}
.ticker__set { display: flex; flex-shrink: 0; }
.ticker__fact {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 30px 0;
  margin: 0 48px;
}
/* Разделитель — тонкая вертикальная линия в разрыве между фактами */
.ticker__fact::before {
  content: "";
  position: absolute;
  left: -48px;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 34px;
  background: rgba(255, 255, 255, 0.12);
}
.ticker__num {
  font-family: "JetBrains Mono", monospace;
  font-size: clamp(30px, 3vw, 44px);
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ticker__cap {
  font-size: 14px;
  line-height: 1.4;
  color: var(--text-secondary);
  white-space: nowrap;
}
@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-33.3333%); }
}
@media (prefers-reduced-motion: reduce) {
  .ticker__track { animation: none; }
}

/* ── Услуги: узкие премиум-карточки из морфинового стекла ──────────
   Стек справа от Ядра (Ядро уходит за левый край). Реактивность (tilt +
   фонарик) — класс rcard, считает JS. Контент виден всегда (ничего не
   прячется на ховере). */
#services .section__label,
#services .section__title {
  width: min(480px, 100%);
  margin-left: auto;   /* заголовок справа от Ядра, на тёмном фоне — читаем */
  margin-right: 2%;
}

.plans {
  margin-top: 90px;
  width: min(480px, 100%);   /* узкие карточки (~−60% от прежней ширины) */
  margin-left: auto;
  margin-right: 2%;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.plan {
  position: relative;
  overflow: hidden;
  padding: 30px 34px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.03);
  -webkit-backdrop-filter: blur(12px) saturate(1.1);
  backdrop-filter: blur(12px) saturate(1.1);
  border: 1px solid rgba(255, 255, 255, 0.10);
  cursor: default;
}

.plan__head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
}
.plan__index { color: rgba(255, 255, 255, 0.42); }  /* моно-акцент номера */

.plan__name {
  font-size: clamp(38px, 3.4vw, 52px);   /* иерархия: название — самое крупное */
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1;
  text-transform: uppercase;
}
.plan__name--sm { font-size: 30px; }

.plan__meta {
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
}
.plan__price {
  font-family: "JetBrains Mono", monospace;
  font-size: 30px;                        /* цена крупная (было 22) */
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
}
.plan__price--sm { font-size: 22px; }
.plan__term { font-size: 13px; color: rgba(255, 255, 255, 0.42); } /* срок мельче цены */

.plan__body { margin-top: 18px; }
.plan__desc { font-size: 15px; line-height: 1.6; color: var(--text-secondary); }
.plan__for {
  margin-top: 10px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-tertiary);
}
.plan__for b { color: var(--text-secondary); font-weight: 500; }

/* SYSTEM — флагман: чуть сильнее рамка и фон */
.plan--system {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--border-strong);
}
.plan--system .plan__name { font-size: clamp(42px, 3.8vw, 58px); }

.plan--pulse { padding: 26px 34px; }

/* Полоса гарантий */
.guarantee {
  margin-top: 140px;
  padding-top: 48px;
  border-top: 1px solid var(--border-subtle);
}

.guarantee__text {
  margin-top: 28px;
  font-size: clamp(24px, 2.6vw, 36px);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.01em;
  max-width: 1060px;
}

/* Мягкое затемнение под манифестом гарантий — текст читается поверх Ядра.
   Радиальный градиент с растушёванными краями (не резкий прямоугольник). */
.guarantee__lead { position: relative; }
.guarantee__lead::before {
  content: "";
  position: absolute;
  inset: -48px -80px -36px -60px;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(115% 100% at 32% 50%,
    rgba(10, 10, 11, 0.72) 0%,
    rgba(10, 10, 11, 0.5) 42%,
    rgba(10, 10, 11, 0) 78%);
}

/* Раскрытие гарантий: XL-кнопка → широкая стеклянная карточка на её месте */
.guarantee__reveal { position: relative; margin-top: 52px; }

#guarantee-toggle {
  transition: opacity 0.45s var(--ease-cinematic), transform 0.45s var(--ease-cinematic);
}
/* Открыто: кнопка уезжает в absolute — не оставляет пустого места под карточкой */
.guarantee__reveal.open #guarantee-toggle {
  position: absolute;
  top: 0; left: 0;
  opacity: 0;
  transform: scale(0.94);
  pointer-events: none;
}

/* Панель: grid-rows 0fr→1fr + opacity/translate — плавно, без layout-скачка */
.guarantee__panel {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transform: translateY(14px);
  transition:
    grid-template-rows 0.6s var(--ease-cinematic),
    opacity 0.5s var(--ease-cinematic),
    transform 0.6s var(--ease-cinematic);
}
/* overflow:hidden нужен только на время разворота (маска grid-rows). После
   открытия — visible, иначе 3D-tilt карточки срезается по краям инера.
   transition на overflow (нетранзишенное св-во) переключает его дискретно
   с задержкой = длительность разворота. */
.guarantee__panel-inner { overflow: hidden; min-height: 0; }
.guarantee__reveal.open .guarantee__panel {
  grid-template-rows: 1fr;
  opacity: 1;
  transform: translateY(0);
}
.guarantee__reveal.open .guarantee__panel-inner {
  overflow: visible;
  transition: overflow 0s 0.62s;
}

/* Карточка гарантий — морфиновое стекло, широкая, реактивная (класс rcard).
   БЕЗ overflow:hidden — иначе tilt срезает углы. Фонарик (.rcard__glow)
   самоклипится по border-radius. Запас padding, чтобы наклон не резался. */
.guarantee__card {
  position: relative;
  padding: 46px 48px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.03);
  -webkit-backdrop-filter: blur(12px) saturate(1.1);
  backdrop-filter: blur(12px) saturate(1.1);
  border: 1px solid rgba(255, 255, 255, 0.10);
}
.guarantee__close {
  position: absolute;
  top: 20px; right: 20px;
  z-index: 4;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.16);
  transition: border-color 0.25s var(--ease-snappy), transform 0.25s var(--ease-snappy);
}
.guarantee__close:hover { border-color: rgba(255, 255, 255, 0.4); }
.guarantee__close:active { transform: scale(0.9); }
.guarantee__close::before,
.guarantee__close::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 13px; height: 1.5px;
  background: rgba(255, 255, 255, 0.6);
}
.guarantee__close::before { transform: translate(-50%, -50%) rotate(45deg); }
.guarantee__close::after  { transform: translate(-50%, -50%) rotate(-45deg); }

.guarantee__card .mono-label { color: var(--text-tertiary); }
.guarantee__grid {
  margin-top: 30px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 34px 56px;
}
.guarantee__pt-h { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }
.guarantee__pt-p {
  margin-top: 10px;
  font-size: 15.5px;
  line-height: 1.62;
  color: var(--text-secondary);
}

/* ── Кейсы: две строки по 3 карточки, монохром в покое ──────────
   Палитры кейсов (--ca/--cb) и панель раскрытия — в блоке «Кейсы 2.0»
   в конце файла. Здесь — сетка и карточка. */
.cases-group { margin-top: 90px; }
.cases-group + .cases-group { margin-top: 72px; }

.cases {
  margin-top: 26px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;   /* крупнее: используем новую широкую контентную зону */
}

.case { position: relative; }

/* Подъём карточки на hover — на внутренней обёртке, НЕ на .case:
   transform-транзишен .case занят появлением anim-pop (со стаггером --ad),
   иначе ховер отвечал бы с задержкой. */
.cases-lift { transition: transform 0.4s var(--ease-snappy); }

/* .case__ph — реактивная карточка (rcard): tilt + фонарик задаёт JS.
   Собственный transform тут не ставим, чтобы не конфликтовать с наклоном. */
.case__ph {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 16px;
  overflow: hidden;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  transition: border-color 0.35s var(--ease-organic), box-shadow 0.35s var(--ease-organic);
}

/* Медиа-слой превью: плейсхолдер-градиент в палитре кейса + моно-подпись.
   Реальный скриншот assets/img/cases/case-NN.jpg накроет плейсхолдер сам
   (js/cases.js прячет битые img, пока файлов нет). В покое слой обесцвечен —
   монохром сайта; палитра проявляется на hover/раскрытии (снимаем grayscale —
   локальное исключение из закона transform/opacity: ≤0.45с, малая область). */
.cases-media {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(120% 90% at 30% 20%, color-mix(in srgb, var(--ca, #fff) 13%, transparent) 0%, transparent 60%),
    linear-gradient(135deg, color-mix(in srgb, var(--ca, #fff) 11%, transparent) 0%, color-mix(in srgb, var(--cb, #fff) 6%, transparent) 60%, transparent 100%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.012) 0 1px, transparent 1px 9px),
    linear-gradient(160deg, var(--bg-surface) 0%, var(--bg-elevated) 100%);
  filter: grayscale(1) brightness(0.82);
  transition: filter 0.45s var(--ease-organic);
}
.cases-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cases-img.is-missing { display: none; }
.cases-media.has-img .cases-ph-name { display: none; }
.cases-ph-name {
  position: relative;
  font-size: 13px;
  letter-spacing: 0.22em;
  color: rgba(255, 255, 255, 0.34);
}

/* Кликабельность: невидимая кнопка поверх всей карточки (валидная семантика:
   заголовок/абзацы не внутри button). z-index 4 — выше фонарика rcard (3). */
.cases-hit {
  position: absolute;
  inset: 0;
  z-index: 4;
  border-radius: 16px;
  cursor: pointer;
}
.cases-hit:focus-visible {
  outline: 1.5px solid color-mix(in srgb, var(--ca, #fff) 65%, transparent);
  outline-offset: 4px;
}

/* Подпись карточки */
.case__tag { display: block; margin-top: 24px; transition: color 0.35s var(--ease-organic); }
.case__name { margin-top: 10px; font-size: 25px; font-weight: 600; letter-spacing: -0.01em; transition: color 0.35s var(--ease-organic); }
.cases-niche { margin-top: 8px; font-size: 11px; letter-spacing: 0.09em; }
.cases-essence { margin-top: 10px; font-size: 14.5px; line-height: 1.55; color: var(--text-secondary); }

/* HOVER / focus-visible: проявление палитры кейса. Уходит курсор — монохром. */
.case:hover .cases-lift,
.case:has(.cases-hit:focus-visible) .cases-lift { transform: translateY(-4px); }

.case:hover .case__ph,
.case:has(.cases-hit:focus-visible) .case__ph {
  border-color: color-mix(in srgb, var(--ca, #fff) 55%, rgba(255, 255, 255, 0.10));
  box-shadow:
    0 24px 48px -22px color-mix(in srgb, var(--ca, #fff) 50%, transparent),
    0 0 0 1px color-mix(in srgb, var(--ca, #fff) 20%, transparent);
}

.case:hover .cases-media,
.case:has(.cases-hit:focus-visible) .cases-media { filter: grayscale(0) brightness(1); }

.case:hover .case__tag,
.case:has(.cases-hit:focus-visible) .case__tag { color: color-mix(in srgb, var(--ca, #fff) 80%, #ffffff); }

.case:hover .case__name,
.case:has(.cases-hit:focus-visible) .case__name { color: color-mix(in srgb, var(--ca, #fff) 45%, #ffffff); }

/* Фонарик rcard внутри кейса — в палитре наведённой карточки */
.case .rcard__glow {
  background: radial-gradient(360px circle at var(--px, 50%) var(--py, 50%),
    color-mix(in srgb, var(--ca, #fff) 16%, rgba(255, 255, 255, 0.03)), transparent 60%);
}

@media (prefers-reduced-motion: reduce) {
  .cases-lift, .case__ph, .cases-media, .case__tag, .case__name { transition: none; }
}

/* ── Контакт: FAQ + карточка связи ────────────────────────────── */
.contact {
  margin-top: 12px;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 80px;
  align-items: start;
}

.faq { margin-top: 64px; border-top: 1px solid var(--border-subtle); }

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

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  padding: 26px 4px;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: "Onest", sans-serif;
  font-size: 18px;
  font-weight: 500;
  color: var(--text-primary);
  transition: color 0.25s var(--ease-snappy);
}
.faq__q:hover { color: #ffffff; }

/* Плюс → крестик */
.faq__icon {
  position: relative;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  transform: rotate(0deg);
  transition: transform 0.45s var(--ease-cinematic);
}
.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  background: rgba(255, 255, 255, 0.55);
}
.faq__icon::before { left: 0; right: 0; top: 7.25px; height: 1.5px; }
.faq__icon::after { top: 0; bottom: 0; left: 7.25px; width: 1.5px; }
.faq__item.open .faq__icon { transform: rotate(135deg); }

/* Раскрытие: grid-rows 0fr→1fr (без анимации height) */
.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s var(--ease-cinematic);
}
.faq__a-inner { overflow: hidden; min-height: 0; }
.faq__a-inner p {
  padding: 2px 4px 28px;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--text-secondary);
  max-width: 560px;
}
.faq__item.open .faq__a { grid-template-rows: 1fr; }

/* Карточка связи (sticky) */
.contact__card {
  position: sticky;
  top: 120px;
  margin-top: 64px;
  padding: 44px 40px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
}

.contact__h { font-size: 30px; font-weight: 600; letter-spacing: -0.015em; }
.contact__p { margin: 16px 0 32px; font-size: 15.5px; line-height: 1.6; color: var(--text-secondary); }

.contact__mail {
  position: relative;
  display: inline-block;
  margin-top: 22px;
  font-family: "JetBrains Mono", monospace;
  font-size: 14px;
  color: var(--text-secondary);
  padding-bottom: 3px;
  transition: color 0.25s var(--ease-snappy);
}
.contact__mail:hover { color: var(--text-primary); }

/* ── Футер ────────────────────────────────────────────────────── */
#footer {
  min-height: 66vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-top: 18vh;
  /* Морфиновое стекло — «шапка снизу»: полупрозрачный фон + blur + верхняя грань */
  background: rgba(10, 10, 11, 0.55);
  -webkit-backdrop-filter: blur(12px) saturate(1.1);
  backdrop-filter: blur(12px) saturate(1.1);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footer__cta {
  position: relative;
  align-self: center;
  margin-bottom: auto;
  font-size: clamp(48px, 7vw, 96px);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--text-primary);
  text-align: center;
}

/* Ховер: заливка Telegram-градиентом слева направо (clip-path, компонуется) */
.footer__cta-fill {
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, #2AABEE 0%, #229ED9 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.7s var(--ease-cinematic);
  pointer-events: none;
}
.footer__cta:hover .footer__cta-fill { clip-path: inset(0 0 0 0); }

/* Верхняя линейка: © слева, CORE // FORM // FUNCTION справа, одна горизонталь */
.footer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 16vh;
  padding-top: 28px;
  padding-bottom: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.footer__copy { color: rgba(255, 255, 255, 0.35); }
.footer__dim { color: rgba(255, 255, 255, 0.3); letter-spacing: 0.1em; }

/* Навигация — строго по центру */
.footer__nav {
  display: flex;
  justify-content: center;
  gap: 28px;
  padding-top: 6px;
  padding-bottom: 16px;
}
.footer__nav a {
  position: relative;
  padding: 4px 0;
  font-size: 14px;
  color: var(--text-secondary);
  transition: color 0.25s var(--ease-snappy);
}
.footer__nav a:hover { color: var(--text-primary); }

/* Контакты + звук — по центру, симметрично навигации */
.footer__right {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding-bottom: 26px;
}
.footer__right a {
  position: relative;
  padding: 4px 0;
  color: rgba(255, 255, 255, 0.35);
  transition: color 0.25s var(--ease-snappy);
}
.footer__right a:hover { color: var(--text-primary); }
.footer__right .snd-btn { width: 38px; height: 38px; }

.footer__sub {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  /* Единые поля контента — надписи прижаты к полям, не вылезают за края */
  padding: 18px var(--content-padding-x) 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.footer__joke { font-size: 10px; color: rgba(255, 255, 255, 0.3); min-width: 0; }
/* Перенос только между группами: «NO TEMPLATES WERE HARMED» держится целиком */
.footer__nb { white-space: nowrap; }
.footer__joke--r { white-space: nowrap; text-align: right; }

/* ── Интро ────────────────────────────────────────────────────── */
#intro {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 300;
  cursor: pointer;
}

html.intro { overflow: hidden; }
html.intro #intro { display: block; }

/* Чёрный фон-оверлей интро. Держит сплошной фон, пока лого/название на месте
   и пока Ядро не проявилось. Управляется инлайн из JS (opacity/transition) —
   при пропуске растворяется за 0.5с ПОСЛЕ ухода элементов, чтобы за ним не было
   видно «телепорта». z-index ниже лого. */
.intro__veil {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--bg-primary);
  will-change: opacity;
}
.intro__lockup { z-index: 1; }

.intro__lockup {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
}

.intro__mark {
  height: clamp(96px, 11vh, 120px);
  width: auto;
  transform-origin: left top;
  will-change: transform, opacity;
}

.intro__name {
  position: relative;
  font-weight: 600;
  font-size: clamp(48px, 4vw, 56px);
  letter-spacing: -0.02em; /* строго как .hero__word — иначе FLIP не сойдётся */
  line-height: 1;
  color: var(--text-primary);
  white-space: nowrap;
}

.intro__half { display: inline-block; will-change: transform; }
#intro-core { transform-origin: left top; }
#intro-form { transform-origin: right top; }

/* Буквы: спрятаны до «набора» (печатание видимостью, мгновенно — как клавиши) */
.intro__ch { opacity: 0; }
.intro__ch.on { opacity: 1; }

/* Каретка печати: тонкая палка, мигает, двигается transform-ом (JS) */
.intro__caret {
  position: absolute;
  left: 0;
  top: 50%;
  width: 3px;
  height: 1.06em;
  background: #fafafa;
  opacity: 0;
  transform: translate(var(--cx, 0px), -50%);
}
.intro__caret.blink { animation: caret-blink 0.8s steps(2, jump-none) infinite; }
@keyframes caret-blink {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

/* Этап 0: всё скрыто */
html.intro .intro__mark {
  opacity: 0;
  transform: scale(0.92);
  transform-origin: center;
  transition: opacity 1s var(--ease-cinematic) 0.2s, transform 1s var(--ease-cinematic) 0.2s;
}

html.intro .nav {
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
}

html.intro .hero__word { opacity: 0; }
html.intro .hero__rule {
  opacity: 0;
  transform: translateY(-12px);
}
html.intro .hero__tag,
html.intro .scroll-hint { opacity: 0; }

html.intro #core-mount { opacity: 0; }

/* Этап 1: большое лого */
html.intro.intro-s1 .intro__mark {
  opacity: 1;
  transform: scale(1);
}

/* Этап 3 (разлёт): transform задаёт JS (FLIP) */
html.intro.intro--flip .intro__mark {
  transform-origin: left top;
  transition: transform 0.9s var(--ease-cinematic);
}
html.intro.intro--flip .intro__half {
  transition: transform 0.9s var(--ease-cinematic);
}

/* Прилетели: подмена спанов настоящими заголовками */
html.intro.intro-arrived .intro__name { visibility: hidden; }
html.intro.intro-arrived .hero__word { opacity: 1; }

/* Этап 4: контур Ядра */
html.intro.intro-s4 #core-mount {
  opacity: 1;
  transition: opacity 0.7s var(--ease-cinematic);
}

/* Этап 6: шапка, линии, подписи, scroll-hint */
html.intro.intro-s6 .nav {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  transition: opacity 0.6s var(--ease-cinematic), transform 0.6s var(--ease-cinematic);
}
html.intro.intro-s6 .intro__mark {
  opacity: 0;
  transition: opacity 0.25s ease;
}
html.intro.intro-s6 .hero__rule {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.6s var(--ease-cinematic), transform 0.6s var(--ease-cinematic);
}
html.intro.intro-s6 .hero__tag,
html.intro.intro-s6 .scroll-hint {
  opacity: 1;
  transition: opacity 0.8s var(--ease-cinematic) 0.2s;
}

/* Пропуск интро: всё доигрывает за 0.3с. Веил исключён — им управляет JS инлайн
   (fade 0.5с ПОСЛЕ ухода элементов). */
html.intro.intro-skip #intro *:not(.intro__veil),
html.intro.intro-skip .nav,
html.intro.intro-skip .hero__word,
html.intro.intro-skip .hero__rule,
html.intro.intro-skip .hero__tag,
html.intro.intro-skip .scroll-hint,
html.intro.intro-skip #core-mount {
  transition-duration: 0.3s !important;
  transition-delay: 0s !important;
}

/* ── Reduced motion ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .scroll-hint__dot, .hero__blink { animation: none; }
  .rl-inner { transition: none; }
  .process__line { transform: scaleY(1); transition: none; }
}

/* ── Адаптив ──────────────────────────────────────────────────── */
@media (max-width: 1279px) {
  :root { --pad-x: 48px; }
  .contact { gap: 48px; }
}

@media (max-width: 1023px) {
  .hero__col { width: clamp(220px, 27vw, 320px); }
  .hero__word { font-size: clamp(52px, 7vw, 96px); }
  .hero__desc { font-size: 15px; }

  /* Услуги: Ядро уезжает (margin-left:0 у сцены), карточки и заголовок по центру */
  #services .section__label,
  #services .section__title {
    width: auto;
    margin-left: 0;
    margin-right: 0;
  }
  .plans { width: 100%; max-width: 560px; margin-left: 0; margin-right: 0; }

  .cases { grid-template-columns: 1fr; max-width: 560px; }
  .contact { grid-template-columns: 1fr; }
  .contact__card { position: static; }

  .guarantee__grid { grid-template-columns: 1fr; gap: 26px; }
}

@media (max-width: 767px) {
  :root { --pad-x: 20px; }

  /* Шапка: лого слева — «Обсудить проект» по центру — бургер справа.
     Переключатель звука уезжает в бургер-меню (в шапке на мобиле его нет). */
  .nav__inner { position: relative; }
  .burger { display: block; order: 3; margin-left: auto; }   /* справа */
  .nav__menu { display: none; }
  .nav__logo { order: 1; position: static; transform: none; gap: 0; }  /* слева */
  .nav__logo span { display: none; }
  .nav__logo img { height: 36px; }
  /* CTA строго по центру шапки, между лого и бургером */
  .nav__actions {
    order: 2;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    gap: 0;
  }
  .nav__actions .snd-btn { display: none; }
  .btn-cta { padding: 11px 18px; font-size: 14px; }

  .mmenu { display: flex; }

  /* Hero: Core над Ядром, form под Ядром — СИММЕТРИЧНО относительно центра Ядра
     при любой высоте экрана. Слова позиционируются абсолютно вокруг --core-cy
     (вертикальный центр Ядра): нижний край Core = cy − gap/2, верхний край form =
     cy + gap/2 → равные отступы. Тексты идут в потоке ниже form. */
  .hero__content { padding-top: 0; padding-bottom: 90px; }
  .hero__grid {
    position: relative;
    top: 0;
    flex-direction: column;
    align-items: center;
    padding-top: 0;
    min-height: 100vh;
    --core-cy: 50vh;                 /* центр Ядра (core.js центрирует его в 50vh на мобиле) */
    --sphere-gap: min(92vw, 54vh);   /* зона Ядра между Core и form — слова обходят сферу */
  }
  .hero__col { display: contents; }
  .hero__word { font-size: clamp(56px, 17vw, 72px); text-align: center; }

  #hero-word-core,
  #hero-word-form {
    position: absolute;
    left: 50%;
    z-index: 2;
    margin: 0;
  }
  #hero-word-core {
    order: 1;
    top: calc(var(--core-cy) - var(--sphere-gap) / 2);
    transform: translate(-50%, -100%);   /* нижний край Core = cy − gap/2 */
  }
  #hero-word-form {
    order: 2;
    top: calc(var(--core-cy) + var(--sphere-gap) / 2);
    transform: translate(-50%, 0);        /* верхний край form = cy + gap/2 */
  }

  /* Тексты — в потоке, ниже абсолютного form */
  .hero__col--left .hero__rule {
    order: 3;
    margin-top: calc(var(--core-cy) + var(--sphere-gap) / 2 + 21vw + 44px);
  }
  .hero__col--left .hero__descs { order: 4; }
  .hero__col--right .hero__rule { order: 5; margin-top: 32px; }
  .hero__col--right .hero__descs { order: 6; }
  .hero__col--right .hero__desc { text-align: left; margin-left: 0; }
  .hero__rule { width: min(86vw, 400px); }
  .hero__desc { max-width: min(86vw, 400px); }

  .hero__tag--tr { display: none; }
  .hero__tag--bl, .hero__tag--br { bottom: 20px; font-size: 9px; }

  .section { padding: 15vh 0; }
  .section__title { font-size: clamp(30px, 8.5vw, 40px); }

  .process { margin-top: 64px; }
  .process__step { grid-template-columns: 1fr; gap: 10px; padding: 32px 0; }
  .process__num { font-size: 30px; }
  .process__line { display: none; }

  .ticker__fact { margin: 0 32px; padding: 24px 0; }
  .ticker__fact::before { left: -32px; }

  .plans { margin-top: 64px; }
  .plan { padding: 26px 24px; }
  .guarantee { margin-top: 90px; }
  .btn-cta--xl { padding: 24px 30px; font-size: 19px; }
  .guarantee__card { padding: 32px 26px; }

  .cases { gap: 24px; }

  /* ── 5.1 Читаемость поверх Ядра: ОДНА подложка на смысловую группу ──────
     (ТОЛЬКО мобайл). Обёртки .hero__descs / .sgroup / .case__cap становятся
     блоком, у каждой — одна общая тёмная подложка с растушёванными краями (mask),
     без наложений и разрывов. process__body и guarantee__text стоят особняком —
     свои единичные подложки. z-index:-1 — позади текста, но поверх canvas. */
  .hero__descs, .sgroup, .case__cap { display: block; position: relative; }
  .process__body, .guarantee__text { position: relative; }

  .hero__descs::before, .sgroup::before, .case__cap::before,
  .process__body::before, .guarantee__text::before,
  #contact .section__title::before {
    content: "";
    position: absolute;
    inset: -14px -18px;
    z-index: -1;
    pointer-events: none;
    border-radius: 18px;
    background: rgba(10, 10, 11, 0.72);
    -webkit-mask-image: radial-gradient(125% 130% at 50% 50%, #000 58%, transparent 100%);
    mask-image: radial-gradient(125% 130% at 50% 50%, #000 58%, transparent 100%);
  }

  /* Контакт: ярлык [04//КОНТАКТ] и H2 в разных родителях — одна подложка на H2,
     расширенная вверх, чтобы накрыть ярлык. */
  #contact .section__title { position: relative; }
  #contact .section__title::before { inset: -70px -18px -14px -18px; }

  /* FAQ поверх Ядра — одна подложка на весь блок вопросов/ответов */
  .faq { position: relative; }
  .faq::before {
    content: "";
    position: absolute;
    inset: 0 -14px;
    z-index: -1;
    pointer-events: none;
    border-radius: 14px;
    background: linear-gradient(90deg,
      rgba(10, 10, 11, 0) 0%, rgba(10, 10, 11, 0.7) 8%,
      rgba(10, 10, 11, 0.7) 92%, rgba(10, 10, 11, 0) 100%);
  }

  /* ── 5.2 Карточки услуг темнее — контент читается чётко ──────────
     Светлое стекло + Ядро за ним = каша. Тёмный полупрозрачный фон, blur ≤8px. */
  .plan {
    background: rgba(19, 19, 22, 0.85);
    -webkit-backdrop-filter: blur(8px) saturate(1.05);
    backdrop-filter: blur(8px) saturate(1.05);
    border-color: rgba(255, 255, 255, 0.12);
  }
  .plan--system { background: rgba(24, 24, 28, 0.88); }
  .guarantee__card {
    background: rgba(19, 19, 22, 0.85);
    -webkit-backdrop-filter: blur(8px) saturate(1.05);
    backdrop-filter: blur(8px) saturate(1.05);
  }

  /* ── Перфоманс: все blur ≤ 8px на мобиле ── */
  .nav { -webkit-backdrop-filter: blur(8px) saturate(1.1); backdrop-filter: blur(8px) saturate(1.1); }
  .mmenu { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
  .ticker { -webkit-backdrop-filter: blur(8px) saturate(1.1); backdrop-filter: blur(8px) saturate(1.1); }
  .btn-cta--xl { -webkit-backdrop-filter: blur(8px) saturate(1.05); backdrop-filter: blur(8px) saturate(1.05); }
  #footer { -webkit-backdrop-filter: blur(8px) saturate(1.1); backdrop-filter: blur(8px) saturate(1.1); }

  .faq__q { font-size: 16px; }
  .contact__card { padding: 32px 24px; }

  .footer__top { gap: 12px; }
  /* Нижняя моно-строка — сетка 2×2: слева «DESIGNED…//» / «NO TEMPLATES…»,
     справа «BUILT WITH» / «PRECISION». Столбцы по полям, межстрочье как было. */
  .footer__sub { flex-direction: row; align-items: flex-start; gap: 12px; }
  .footer__joke { display: block; }
  .footer__nb { display: block; }
  .footer__joke--r { text-align: right; }
  .footer__cta { font-size: clamp(38px, 11vw, 56px); }
}

/* ═══════════════════════════════════════════════════════════════════
   ── Кейсы 2.0: сетка 2×3 + панель раскрытия (новые классы .cases-*) ──
   Философия: в покое — монохром сайта, палитра кейса проявляется на
   hover (десктоп) и при раскрытии панели. Карточки переиспользуют
   каркас .case / .case__ph / .case__cap (reveal, звук и мобильная
   подложка из main.js/main.css работают без правок чужого кода).
   Анимации — transform/opacity/color. Локальные исключения секции:
   короткий transition grayscale-фильтра превью (≤0.45с, малая область)
   и backdrop-filter стекла панели (как у шапки/шторки по ТЗ).
   ═══════════════════════════════════════════════════════════════════ */

/* Палитры кейсов. --ca — основной акцент, --cb — второй цвет градиентных
   вселенных (у одноцветных равен --ca). В покое переменные не применяются
   ни к чему видимому — только на hover/focus и в открытой панели. */
.case[data-case="01"], .cases-modal[data-case="01"] { --ca: #C39A8E; --cb: #C39A8E; } /* Вера Линден — пыльная роза */
.case[data-case="02"], .cases-modal[data-case="02"] { --ca: #A6543A; --cb: #A6543A; } /* ОСТОВ — охра */
.case[data-case="03"], .cases-modal[data-case="03"] { --ca: #6E7FC7; --cb: #6E7FC7; } /* Полина Керн — индиго */
.case[data-case="04"], .cases-modal[data-case="04"] { --ca: #8B5CF6; --cb: #22D3EE; } /* ТЯГА — aurora violet→cyan */
.case[data-case="05"], .cases-modal[data-case="05"] { --ca: #FB5B12; --cb: #FB5B12; } /* APEX — papaya */
.case[data-case="06"], .cases-modal[data-case="06"] { --ca: #FF7A45; --cb: #FF7A45; } /* AXON — ember */

/* ── Панель раскрытия кейса ─────────────────────────────────────
   Оверлей поверх всего сайта (z 200: выше шапки 100, ниже интро 300).
   Вертикальная композиция как в карточке машины APEX: hero-превью по
   центру, описание вниз. Здесь палитра кейса раскрыта полностью. */
.cases-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 20px;
}
.cases-modal[hidden] { display: none; }

.cases-modal__veil {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 11, 0.62);
  -webkit-backdrop-filter: blur(12px) saturate(1.05);
  backdrop-filter: blur(12px) saturate(1.05);
  opacity: 0;
  transition: opacity 0.45s var(--ease-cinematic);
  cursor: pointer;
}
.cases-modal.open .cases-modal__veil { opacity: 1; }

.cases-modal__panel {
  position: relative;
  width: min(720px, 100%);
  max-height: min(920px, calc(100vh - 48px));
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;               /* как у страницы: полосы нет */
  border-radius: 24px;
  border: 1px solid color-mix(in srgb, var(--ca, #fff) 26%, rgba(255, 255, 255, 0.10));
  background: rgba(19, 19, 22, 0.94);
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.8);
  transform: translateY(26px) scale(0.97);
  opacity: 0;
  transition: transform 0.55s var(--ease-cinematic), opacity 0.45s var(--ease-cinematic);
}
.cases-modal__panel::-webkit-scrollbar { display: none; }
.cases-modal.open .cases-modal__panel { transform: none; opacity: 1; }

.cases-modal__close {
  position: sticky;                    /* остаётся в углу при скролле панели */
  top: 18px;
  margin-left: calc(100% - 54px);
  z-index: 5;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(10, 10, 11, 0.6);
  transition: border-color 0.25s var(--ease-snappy), transform 0.25s var(--ease-snappy);
}
.cases-modal__close:hover { border-color: rgba(255, 255, 255, 0.5); transform: scale(1.06); }
.cases-modal__close::before,
.cases-modal__close::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 14px; height: 1.5px;
  background: rgba(255, 255, 255, 0.75);
}
.cases-modal__close::before { transform: translate(-50%, -50%) rotate(45deg); }
.cases-modal__close::after  { transform: translate(-50%, -50%) rotate(-45deg); }

/* HERO-превью: по центру, крупно, в палитре кейса (цвет уже раскрыт).
   Плейсхолдер — тот же градиент, что в карточке, но БЕЗ grayscale. */
.cases-modal__hero {
  position: relative;
  aspect-ratio: 16 / 9;
  margin: -54px 0 0;                   /* под sticky-крестик */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-bottom: 1px solid color-mix(in srgb, var(--ca, #fff) 18%, rgba(255, 255, 255, 0.06));
  background:
    radial-gradient(130% 100% at 28% 18%, color-mix(in srgb, var(--ca, #fff) 22%, transparent) 0%, transparent 62%),
    linear-gradient(135deg, color-mix(in srgb, var(--ca, #fff) 16%, transparent) 0%, color-mix(in srgb, var(--cb, #fff) 10%, transparent) 60%, transparent 100%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.014) 0 1px, transparent 1px 9px),
    linear-gradient(160deg, var(--bg-surface) 0%, var(--bg-elevated) 100%);
}
.cases-modal__hero.has-img .cases-modal__ph { display: none; }
.cases-modal__ph { position: relative; font-size: 15px; letter-spacing: 0.24em; color: rgba(255, 255, 255, 0.4); }

.cases-modal__body { padding: 34px 44px 44px; }

.cases-modal__tag { color: color-mix(in srgb, var(--ca, #fff) 75%, rgba(255, 255, 255, 0.55)); }
.cases-modal__title {
  margin-top: 14px;
  font-size: clamp(30px, 4.5vw, 42px);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.05;
}
.cases-modal__desc {
  margin-top: 16px;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--text-secondary);
  max-width: 56ch;
}

.cases-modal__block { margin-top: 34px; }
.cases-modal__block-label { color: var(--text-tertiary); }

/* Теги-пилюли: стек и фишки кейса */
.cases-modal__tags {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.cases-pill {
  display: inline-block;
  padding: 8px 15px;
  border: 1px solid color-mix(in srgb, var(--ca, #fff) 32%, rgba(255, 255, 255, 0.08));
  border-radius: 999px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  background: color-mix(in srgb, var(--ca, #fff) 6%, transparent);
}

/* Цена-якорь: перечёркнутый «аналог на рынке» → крупная цена Coreform */
.cases-price__row {
  margin-top: 18px;
  display: flex;
  align-items: flex-end;
  gap: 34px;
  flex-wrap: wrap;
}
.cases-price__old, .cases-price__new { display: flex; flex-direction: column; gap: 6px; }
.cases-price__old s {
  font-family: "JetBrains Mono", monospace;
  font-size: 19px;
  color: var(--text-tertiary);
  text-decoration-color: color-mix(in srgb, var(--ca, #fff) 65%, transparent);
  text-decoration-thickness: 1.5px;
  white-space: nowrap;
}
.cases-price__new b {
  font-family: "JetBrains Mono", monospace;
  font-size: 38px;
  font-weight: 500;
  line-height: 1;
  color: color-mix(in srgb, var(--ca, #fff) 55%, #ffffff);
  white-space: nowrap;
}
.cases-price__old em, .cases-price__new em {
  font-style: normal;
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
}

/* CTA «Открыть демо»: капсула сайта, заливка — в палитре кейса */
.cases-modal__cta {
  width: 100%;
  margin-top: 40px;
  padding: 20px 32px;
  font-size: 18px;
}
.cases-modal__cta .btn-cta__fill { background: linear-gradient(135deg, var(--ca, #fff) 0%, var(--cb, #fff) 100%); }

/* Микро-моушн контента панели: блоки всплывают каскадом после открытия */
.cases-modal__body > * {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s var(--ease-cinematic), transform 0.6s var(--ease-cinematic);
}
.cases-modal.open .cases-modal__body > * { opacity: 1; transform: none; }
.cases-modal.open .cases-modal__body > *:nth-child(1) { transition-delay: 0.10s; }
.cases-modal.open .cases-modal__body > *:nth-child(2) { transition-delay: 0.16s; }
.cases-modal.open .cases-modal__body > *:nth-child(3) { transition-delay: 0.22s; }
.cases-modal.open .cases-modal__body > *:nth-child(4) { transition-delay: 0.30s; }
.cases-modal.open .cases-modal__body > *:nth-child(5) { transition-delay: 0.38s; }
.cases-modal.open .cases-modal__body > *:nth-child(6) { transition-delay: 0.46s; }
.cases-modal.open .cases-modal__body > *:nth-child(7) { transition-delay: 0.54s; }

/* Блок скролла фона при открытой панели (класс на <html> ставит cases.js;
   плавный wheel-скролл в main.js при этом классе отдаёт колесо браузеру) */
html.cases-open body { overflow: hidden; }

@media (max-width: 767px) {
  .cases-modal { padding: 10px; }
  .cases-modal__veil {                 /* мобайл: blur ≤ 8px, как по закону сайта */
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }
  .cases-modal__panel { max-height: calc(100dvh - 20px); border-radius: 18px; }
  .cases-modal__hero { aspect-ratio: 16 / 10; }
  .cases-modal__body { padding: 26px 20px 30px; }
  .cases-price__row { gap: 22px; }
  .cases-price__new b { font-size: 32px; }
  .cases-modal__cta { padding: 17px 24px; font-size: 16px; }
}

/* ── Дата-виз панели: кольца-счётчики + бары цены ───────────────
   Кольца — SVG stroke-dashoffset (транзишен при открытии), значения —
   rAF-счётчики (cases.js). Бары цены — transform: scaleX. */
.cases-viz { margin-top: 34px; }
.cases-viz__type {
  margin-top: 14px;
  font-size: 12px;
  color: color-mix(in srgb, var(--ca, #fff) 62%, rgba(255, 255, 255, 0.5));
}

.cases-viz__rings {
  margin-top: 22px;
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
}
.cases-ring {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.cases-ring__wrap { position: relative; width: 96px; height: 96px; }
.cases-ring__svg { width: 96px; height: 96px; transform: rotate(-90deg); }
.cases-ring__track { stroke: rgba(255, 255, 255, 0.08); }
.cases-ring__bar {
  stroke: url(#cases-ring-grad);
  stroke-dasharray: 264;
  stroke-dashoffset: 264;               /* пусто; цель ставит cases.js */
  transition: stroke-dashoffset 1.1s var(--ease-cinematic);
}
.cases-modal.open .cases-ring__bar { transition-delay: 0.45s; }
.cases-ring__val {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "JetBrains Mono", monospace;
  font-size: 21px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}
.cases-ring__cap {
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--text-tertiary);
  text-align: center;
}

/* Бары цены: рынок (серый, во всю длину) против Coreform (акцент, доля) */
.cases-price__bars { margin-top: 24px; display: grid; gap: 12px; max-width: 460px; }
.cases-price__brow {
  display: grid;
  grid-template-columns: 84px 1fr;
  align-items: center;
  gap: 14px;
}
.cases-price__bar {
  position: relative;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}
.cases-price__bar i {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 1.1s var(--ease-cinematic);
}
.cases-price__bar--old i { background: rgba(255, 255, 255, 0.26); transition-delay: 0.55s; }
.cases-price__bar--new i { background: linear-gradient(90deg, var(--ca, #fff), var(--cb, #fff)); transition-delay: 0.7s; }
.cases-modal.open .cases-price__bar--old i { transform: scaleX(1); }
.cases-modal.open .cases-price__bar--new i { transform: scaleX(var(--w, 0.6)); }

@media (max-width: 767px) {
  .cases-viz__rings { gap: 22px; justify-content: space-between; }
  .cases-ring__wrap, .cases-ring__svg { width: 84px; height: 84px; }
  .cases-ring__val { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .cases-modal__veil, .cases-modal__panel, .cases-modal__body > *,
  .cases-ring__bar, .cases-price__bar i { transition: none; }
  .cases-modal__panel { transform: none; opacity: 1; }
  .cases-modal__body > * { opacity: 1; transform: none; }
}