/* ==========================================================
   MOTION LAYER — слой движения сайта (DigitalGrow)
   ----------------------------------------------------------
   Один файл на все страницы с движением: /motion/ (тестовая витрина),
   /motion2/ и главная. ПОДКЛЮЧАЕТСЯ только там, где нужен (через
   $extraCss в header.php), в style.css его нет.
   Ниже два блока: (1) общий движок — правила под body.dg-motion;
   (2) hero-слой варианта новой главной — правила под body.m2.
   Поэтому на страницах без этих классов файл не влияет вообще.

   Принципы:
   • анимируем только transform / opacity / filter (compositor-only);
   • всё, что может «оставить страницу пустой» при JS-сбое,
     спрятано под body.dg-motion, а <noscript>-блок раскрывает;
   • prefers-reduced-motion отключает ВСЁ движение.
   ========================================================== */

.dg-motion {
  --dg-ease-out: cubic-bezier(.16, 1, .3, 1);
  --dg-ease: cubic-bezier(.22, .61, .36, 1);
  --dg-ink: var(--color-accent);
}

/* ---------- 1. Полоса прогресса чтения ---------- */
.dg-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 100%;
  z-index: 400;
  pointer-events: none;
  background: linear-gradient(90deg, var(--color-accent), var(--color-success));
  transform: scaleX(0);
  transform-origin: 0 50%;
  will-change: transform;
}

/* ---------- 2. Живой фон hero (generative canvas) ---------- */
.hero .dg-aurora {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  pointer-events: none;
}

.hero > .container {
  position: relative;
  z-index: 1;
}

/* мягкое «растворение» канвы в белый низ секции */
.hero .dg-aurora-fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 140px;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff);
}

/* ---------- 3. Появление блоков при скролле ---------- */
.dg-motion [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition:
    opacity .7s var(--dg-ease-out),
    transform .9s var(--dg-ease-out);
}

.dg-motion [data-reveal].dg-in {
  opacity: 1;
  transform: none;
}

/* ступенчатая задержка внутри группы */
.dg-motion [data-delay="1"] { transition-delay: .07s; }
.dg-motion [data-delay="2"] { transition-delay: .14s; }
.dg-motion [data-delay="3"] { transition-delay: .21s; }
.dg-motion [data-delay="4"] { transition-delay: .28s; }
.dg-motion [data-delay="5"] { transition-delay: .35s; }
.dg-motion [data-delay="6"] { transition-delay: .42s; }

/* ---------- 4. Кинетическая типографика (по словам) ---------- */
.dg-kw {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: .14em;
  margin-bottom: -.14em;
}

.dg-kw-in {
  display: inline-block;
  opacity: 0;
  transform: translate3d(0, 108%, 0);
  transition:
    transform .85s var(--dg-ease-out),
    opacity .5s ease;
  will-change: transform;
}

.dg-motion [data-split].dg-in .dg-kw-in {
  opacity: 1;
  transform: none;
}

/* нарастающая задержка по словам (хватает на 16 слов в строке) */
.dg-motion .dg-kw:nth-child(1) .dg-kw-in  { transition-delay: .04s; }
.dg-motion .dg-kw:nth-child(2) .dg-kw-in  { transition-delay: .10s; }
.dg-motion .dg-kw:nth-child(3) .dg-kw-in  { transition-delay: .16s; }
.dg-motion .dg-kw:nth-child(4) .dg-kw-in  { transition-delay: .22s; }
.dg-motion .dg-kw:nth-child(5) .dg-kw-in  { transition-delay: .28s; }
.dg-motion .dg-kw:nth-child(6) .dg-kw-in  { transition-delay: .34s; }
.dg-motion .dg-kw:nth-child(7) .dg-kw-in  { transition-delay: .40s; }
.dg-motion .dg-kw:nth-child(8) .dg-kw-in  { transition-delay: .46s; }
.dg-motion .dg-kw:nth-child(9) .dg-kw-in  { transition-delay: .52s; }
.dg-motion .dg-kw:nth-child(10) .dg-kw-in { transition-delay: .58s; }
.dg-motion .dg-kw:nth-child(11) .dg-kw-in { transition-delay: .62s; }
.dg-motion .dg-kw:nth-child(12) .dg-kw-in { transition-delay: .66s; }
.dg-motion .dg-kw:nth-child(13) .dg-kw-in { transition-delay: .70s; }
.dg-motion .dg-kw:nth-child(14) .dg-kw-in { transition-delay: .74s; }
.dg-motion .dg-kw:nth-child(15) .dg-kw-in { transition-delay: .78s; }
.dg-motion .dg-kw:nth-child(16) .dg-kw-in { transition-delay: .82s; }
.dg-motion .dg-kw:nth-child(n+17) .dg-kw-in { transition-delay: .86s; }

/* ---------- 5. Hero: лёгкий параллакс-наклон ---------- */
.dg-motion .dg-parallax {
  transition: transform .35s var(--dg-ease-out);
  will-change: transform;
}

/* ---------- 6. Карточки: подсветка под курсором + микронаклон ---------- */
.dg-motion .dg-tilt {
  position: relative;
  transform-style: preserve-3d;
  transition:
    transform .35s var(--dg-ease-out),
    box-shadow .35s var(--dg-ease);
}

.dg-motion .dg-tilt::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s ease;
  background: radial-gradient(
    340px circle at var(--dg-mx, 50%) var(--dg-my, 50%),
    rgba(83, 58, 253, .10),
    transparent 62%
  );
}

.dg-motion .dg-tilt:hover::after { opacity: 1; }

/* иконка услуги «оживает» при наведении на карточку */
.dg-motion .service-card .card-icon { transition: transform .45s var(--dg-ease-out); }
.dg-motion .service-card:hover .card-icon { transform: translateY(-3px) scale(1.06); }

/* у логотипа в кейсе — мягкий проезд блика */
.dg-motion .case-card .case-card-logo { overflow: hidden; }
.dg-motion .case-card .card-logo-img { transition: transform .5s var(--dg-ease-out); }
.dg-motion .case-card:hover .card-logo-img { transform: scale(1.04); }

/* ---------- 7. Шаги процесса: рельс прогресса ---------- */
.dg-steps {
  position: relative;
  padding-top: 26px;
}

.dg-steps-rail {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: rgba(83, 58, 253, .14);
  border-radius: 2px;
  overflow: hidden;
}

.dg-steps-fill {
  display: block;
  height: 100%;
  width: 100%;
  transform: scaleX(var(--dg-progress, 0));
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--color-accent), var(--color-success));
}

.dg-motion .step-card .step-number {
  transition:
    background .45s var(--dg-ease),
    color .45s var(--dg-ease),
    transform .55s var(--dg-ease-out);
}

.dg-motion .step-card.is-active .step-number {
  background: var(--color-accent);
  color: #fff;
  transform: translateY(-2px) scale(1.06);
}

/* ---------- 8. Кинетическая бегущая строка ---------- */
.dg-marquee {
  position: relative;
  overflow: hidden;
  padding: 20px 0;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.dg-marquee-track {
  display: flex;
  gap: 56px;
  width: max-content;
  animation: dg-marquee 38s linear infinite;
  will-change: transform;
}

.dg-marquee:hover .dg-marquee-track { animation-play-state: paused; }

.dg-marquee-item {
  display: flex;
  align-items: center;
  gap: 56px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .2px;
  color: var(--color-secondary);
  white-space: nowrap;
}

.dg-marquee-item::after {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
  opacity: .45;
}

@keyframes dg-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* ---------- 9. Кнопка с бегущим бликом ---------- */
.dg-motion .dg-shine {
  position: relative;
  overflow: hidden;
}

.dg-motion .dg-shine::before {
  content: '';
  position: absolute;
  top: 0;
  left: -60%;
  width: 45%;
  height: 100%;
  pointer-events: none;
  transform: skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .42), transparent);
  transition: left .7s var(--dg-ease-out);
}

.dg-motion .dg-shine:hover::before { left: 130%; }

/* ---------- 10. Тёмная полоса статистики: проезд градиента ---------- */
.dg-motion .section-dark .stats-banner {
  position: relative;
}

.dg-motion .section-dark .stats-banner::before {
  content: '';
  position: absolute;
  inset: -40px -10% -40px -10%;
  pointer-events: none;
  opacity: .5;
  background: linear-gradient(
    100deg,
    transparent 20%,
    rgba(83, 58, 253, .35) 45%,
    rgba(16, 185, 129, .22) 55%,
    transparent 80%
  );
  background-size: 260% 100%;
  animation: dg-sweep 9s ease-in-out infinite;
}

@keyframes dg-sweep {
  0%   { background-position: 130% 0; }
  100% { background-position: -30% 0; }
}

.dg-motion .stat-item .hero-stat-value { position: relative; }

/* ---------- 11. Служебная плашка «тестовый вариант» ---------- */
.dg-flag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  padding: 6px 12px;
  border: 1px dashed var(--color-ghost-border);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .3px;
  text-transform: uppercase;
  color: var(--color-accent);
  background: rgba(83, 58, 253, .05);
}

/* ==========================================================
   12. Без движения (a11y) — полное отключение анимаций
   ========================================================== */
@media (prefers-reduced-motion: reduce) {
  .dg-motion [data-reveal],
  .dg-motion [data-split] .dg-kw-in {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .dg-motion .dg-aurora,
  .dg-motion .dg-aurora-fade,
  .dg-progress {
    display: none !important;
  }

  .dg-motion .dg-marquee-track,
  .dg-motion .section-dark .stats-banner::before,
  .dg-motion .vis-dots {
    animation: none !important;
  }

  .dg-motion .dg-shine::before { display: none; }

  .dg-motion .dg-tilt,
  .dg-motion .dg-parallax,
  .dg-motion .service-card .card-icon,
  .dg-motion .case-card .card-logo-img {
    transform: none !important;
  }
}

/* ---------- 13. Мобильная адаптация motion-слоя ---------- */
@media (max-width: 980px) {
  .dg-marquee-track { animation-duration: 26s; }
  .hero .dg-aurora-fade { height: 90px; }
}

@media (max-width: 640px) {
  .dg-motion .dg-tilt::after { background: none; }
  .dg-marquee { padding: 16px 0; }
  .dg-marquee-item { font-size: 13px; gap: 32px; }
  .dg-marquee-track { gap: 32px; }
}

/* ==========================================================
   14. Адаптация слоя под /motion2/ (только body.m2)
   ----------------------------------------------------------
   Движок общий с /motion/, поэтому отклонения для площадки варианта
   собраны здесь и заперты под body.m2 — на /motion/ и остальные
   страницы эти правила не влияют.
   ========================================================== */

/* Карточки тарифов на /motion2/ приходят из общего партиала
   (www/partials/tariff-cards.php). У них есть CSS-анимация загрузки
   .animate-in — она перебивает появление по скроллу (animation важнее
   обычных объявлений). Снимаем её только на этой странице, а data-reveal
   карточкам ставит motion.js селектором body.m2 #pricing .tariff-card.
   На /tariffs/ и главной .animate-in остаётся как был. */
.m2 #pricing .tariff-card {
  animation: none;
}

/* ==========================================================
   HERO-СЛОЙ (раньше — отдельный файл motion2.css)
   ----------------------------------------------------------
   Первый экран варианта новой главной: живая сцена (аврора + частицы),
   SVG-ядро с орбитами, кинетический заголовок, скрэмбл-строка, магнитная
   CTA, счётчики, «Разлом → сборка» (.m2-seam) и «Точка» (.m2-point).
   ВСЁ заперто под body.m2 — на /motion/ и других страницах не действует.

   Файлы слоя слиты в одну пару (motion.css + motion.js) ради LCP:
   каждая render-blocking CSS — отдельный round-trip (~360 мс на мобильном
   профиле), поэтому 2 CSS + 2 JS сведены к 1 CSS + 1 JS.
   ========================================================== */

body.m2 {
  --m2-ease: cubic-bezier(.16, 1, .3, 1);
  --m2-ink: var(--color-accent);
  background: #fff;
}

/* ---------- 1. Каркас первого экрана ---------- */
.m2-hero {
  position: relative;
  min-height: calc(100vh - 68px);
  display: flex;
  align-items: center;
  padding: 34px 0 30px;
  overflow: hidden;
}

.m2-aurora {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  pointer-events: none;
}

.m2-fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 120px;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff);
}

.m2-hero > .container {
  position: relative;
  z-index: 1;
  width: 100%;
}

.m2-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 64px;
  align-items: center;
}

/* ---------- 2. Левая колонка: текст ---------- */
.m2-flag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  padding: 6px 12px;
  border: 1px dashed var(--color-ghost-border);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--m2-ink);
  background: rgba(83, 58, 253, .05);
}

.m2-title {
  margin: 0 0 14px;
  font-size: clamp(28px, 3.2vw, 46px);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -1.2px;
  color: var(--color-heading);
}

.m2-title .m2-w {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: .12em;
  margin-bottom: -.12em;
}

.m2-title .m2-wi {
  display: inline-block;
  opacity: 0;
  transform: translate3d(0, 105%, 0);
  transition: transform .9s var(--m2-ease), opacity .5s ease;
  will-change: transform;
}

.m2-title.is-in .m2-wi {
  opacity: 1;
  transform: none;
}

.m2-title .m2-w:nth-child(1) .m2-wi  { transition-delay: .05s; }
.m2-title .m2-w:nth-child(2) .m2-wi  { transition-delay: .11s; }
.m2-title .m2-w:nth-child(3) .m2-wi  { transition-delay: .17s; }
.m2-title .m2-w:nth-child(4) .m2-wi  { transition-delay: .23s; }
.m2-title .m2-w:nth-child(5) .m2-wi  { transition-delay: .29s; }
.m2-title .m2-w:nth-child(6) .m2-wi  { transition-delay: .35s; }
.m2-title .m2-w:nth-child(7) .m2-wi  { transition-delay: .41s; }
.m2-title .m2-w:nth-child(8) .m2-wi  { transition-delay: .47s; }
.m2-title .m2-w:nth-child(9) .m2-wi  { transition-delay: .53s; }
.m2-title .m2-w:nth-child(10) .m2-wi { transition-delay: .59s; }
.m2-title .m2-w:nth-child(11) .m2-wi { transition-delay: .65s; }
.m2-title .m2-w:nth-child(12) .m2-wi { transition-delay: .71s; }
.m2-title .m2-w:nth-child(n+13) .m2-wi { transition-delay: .77s; }

/* mono-строка со скрэмблом */
.m2-ticker {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-height: 24px;
  margin-bottom: 22px;
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: .2px;
  color: var(--color-accent);
}

.m2-ticker-label {
  color: var(--color-secondary);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .8px;
}

.m2-ticker-value {
  min-width: 1px;
  white-space: nowrap;
}

.m2-ticker-value::after {
  content: '';
  display: inline-block;
  width: 7px;
  height: 15px;
  margin-left: 3px;
  vertical-align: -2px;
  background: var(--color-accent);
  opacity: .75;
  animation: m2-caret 1.1s steps(1) infinite;
}

@keyframes m2-caret {
  0%, 49% { opacity: .75; }
  50%, 100% { opacity: 0; }
}

.m2-desc {
  max-width: 560px;
  margin-bottom: 24px;
  font-size: 17px;
  line-height: 1.55;
  color: var(--color-body);
}

.m2-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 28px;
}

/* магнитная кнопка */
.m2-magnet {
  display: inline-block;
  will-change: transform;
  transition: transform .35s var(--m2-ease);
}

/* ---------- 3. Статистика ---------- */
.m2-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 28px;
  max-width: 520px;
}

.m2-stat {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.m2-stat-value {
  font-size: clamp(20px, 1.9vw, 27px);
  font-weight: 500;
  letter-spacing: -.4px;
  color: var(--color-accent);
}

.m2-stat-label {
  font-size: 13px;
  color: var(--color-secondary);
}

/* ---------- 4. Правая колонка: ядро ---------- */
.m2-core-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.m2-core {
  width: 100%;
  max-width: 560px;
  will-change: transform;
  transition: transform .4s var(--m2-ease);
}

.m2-core svg {
  width: 100%;
  height: auto;
  overflow: visible;
}

/* вращение орбит */
.m2-orbit {
  transform-box: view-box;
  transform-origin: 260px 260px;
}

.m2-orbit-a { animation: m2-spin 72s linear infinite; }
.m2-orbit-b { animation: m2-spin 47s linear infinite reverse; }
.m2-orbit-c { animation: m2-spin 31s linear infinite; }

@keyframes m2-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.m2-node {
  animation: m2-node-pulse 5.2s ease-in-out infinite;
}

.m2-node:nth-of-type(2) { animation-delay: 1.3s; }
.m2-node:nth-of-type(3) { animation-delay: 2.6s; }

@keyframes m2-node-pulse {
  0%, 100% { opacity: .45; }
  50%      { opacity: 1; }
}

.m2-hex-glow {
  animation: m2-hex 6.4s ease-in-out infinite;
  transform-box: view-box;
  transform-origin: 260px 260px;
}

@keyframes m2-hex {
  0%, 100% { transform: scale(1);     opacity: .95; }
  50%      { transform: scale(1.035); opacity: .75; }
}

.m2-core-link {
  stroke-dasharray: 4 7;
  animation: m2-dash 2.6s linear infinite;
}

@keyframes m2-dash {
  to { stroke-dashoffset: -22; }
}

/* мягкий halo под ядром */
.m2-core-wrap::before {
  content: '';
  position: absolute;
  width: 62%;
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(83, 58, 253, .10), transparent 68%);
  filter: blur(6px);
}

/* ---------- 5. «Разлом → сборка»: полоса-связка hero → тарифы ---------- */
.m2-seam {
  position: relative;
  height: 220px;
  overflow: hidden;
  background: linear-gradient(to bottom, #fff, rgba(83, 58, 253, .022) 50%, #fff);
}

/* статичная «нить» — остаётся и без JS; движение рисует canvas поверх неё */
.m2-seam-line {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: 1px;
  transform: translate(-50%, -50%);
  background: linear-gradient(90deg,
    rgba(83, 58, 253, 0) 6%,
    rgba(83, 58, 253, .20) 38%,
    rgba(83, 58, 253, .28) 50%,
    rgba(83, 58, 253, .20) 62%,
    rgba(83, 58, 253, 0) 94%);
}

.m2-seam-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

/* ---------- 6. «Точка»: финальный CTA сжимается к одному призыву ---------- */
.m2-point { position: relative; }

.m2-point > .cta-section { position: relative; z-index: 1; }

/* слой эффекта включается только когда движок стартовал (класс ставит JS) */
.m2-point-fx {
  position: absolute;
  inset: -70px -40px;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity .9s var(--m2-ease);
}

.m2-point.is-live .m2-point-fx { opacity: 1; }

/* ореол: широкое пустое поле сжимается к центру */
.m2-point-halo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(calc(1.9 - .95 * var(--m2-p, 0)));
  background: radial-gradient(circle, rgba(83, 58, 253, .11), rgba(83, 58, 253, 0) 62%);
}

/* лучи: сходятся с боков к блоку, на концах — точки.
   Ширина = 50% минус половина текстовой колонки (640/2) и зазор 20px —
   поэтому луч обрывается в пустом поле и НИКОГДА не идёт сквозь текст. */
.m2-point-ray {
  position: absolute;
  height: 1px;
  width: max(0px, calc(50% - 340px));
  opacity: calc(.10 + .90 * var(--m2-p, 0));
  transform: translateY(-50%) translateX(calc(var(--m2-ray-dir, 0) * (1 - var(--m2-p, 0)) * 34%));
}

.m2-point-ray::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 4px;
  height: 4px;
  margin-top: -2px;
  border-radius: 50%;
  background: var(--color-accent);
  opacity: .85;
}

.m2-ray-l { left: 0; --m2-ray-dir: -1; background: linear-gradient(90deg, rgba(83, 58, 253, 0), rgba(83, 58, 253, .30)); }
.m2-ray-l::after { right: 0; }
.m2-ray-r { right: 0; --m2-ray-dir: 1; background: linear-gradient(270deg, rgba(83, 58, 253, 0), rgba(83, 58, 253, .30)); }
.m2-ray-r::after { left: 0; }

.m2-ray-y1 { top: calc(50% - 54px); }
.m2-ray-y2 { top: 50%; }
.m2-ray-y3 { top: calc(50% + 54px); }

/* рамка замыкается вокруг блока — «точка» фокуса */
.m2-point-frame {
  position: absolute;
  inset: 14px 8%;
  border: 1px solid rgba(83, 58, 253, .26);
  border-radius: 26px;
  transform: scale(calc(1.34 - .34 * var(--m2-p, 0)));
  opacity: min(1, calc(var(--m2-p, 0) * 1.6));
}

/* ---------- 7. Отключение движения ---------- */
@media (prefers-reduced-motion: reduce) {
  .m2-title .m2-wi {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .m2-aurora,
  .m2-fade,
  .m2-core-wrap::before,
  .m2-seam-canvas,
  .m2-point-fx {
    display: none !important;
  }

  .m2-orbit,
  .m2-node,
  .m2-hex-glow,
  .m2-core-link,
  .m2-ticker-value::after {
    animation: none !important;
  }

  .m2-core-link { stroke-dasharray: none; }
  .m2-magnet,
  .m2-core { transform: none !important; transition: none !important; }
}

/* ---------- 8. Адаптив ---------- */
@media (max-width: 1024px) {
  .m2-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .m2-core-wrap { order: -1; }
  .m2-core { max-width: 380px; }

  .m2-hero {
    min-height: 0;
    padding: 32px 0 40px;
  }
}

@media (max-width: 640px) {
  .m2-title { letter-spacing: -.8px; }
  .m2-core { max-width: 300px; }
  .m2-stats { gap: 22px; }
  .m2-stat-value { font-size: 24px; }
  .m2-ticker { font-size: 13px; }
  .m2-actions .btn { width: 100%; text-align: center; }

  .m2-seam { height: 150px; }
  .m2-point-fx { inset: -50px -22px; }
  .m2-point-halo { width: 320px; height: 320px; }
  /* на узком экране текст занимает всю ширину — лучей нет (иначе лезли бы в текст) */
  .m2-point-ray { display: none; }
  .m2-ray-y1 { top: calc(50% - 44px); }
  .m2-ray-y3 { top: calc(50% + 44px); }
  .m2-point-frame { inset: 10px 4%; border-radius: 20px; }
}