/* ============================================================
   pages/index.css — Главная страница
   Секции: .hero, .problem, .feature, .startup
   Mobile-first; брейкпойнты 768 / 1025.
   Горизонтальный паддинг приходит из .container (base.css);
   здесь — только вертикальные ритмы и компоновка.
   ============================================================ */

/* ============================================================
   1. Hero
   ============================================================ */
.hero {
  position: relative;
  background: linear-gradient(135deg, #F5F9FF 0%, #E8F0FB 50%, #D8E5F4 100%);
  padding: 40px 0;              /* mobile */
  overflow: hidden;             /* обязательно — blur у glow выходит за пределы */
  isolation: isolate;
}

/* Glow Effect — мягкое синее свечение в правой части hero.
   Размер увеличен (~1200px), opacity усилена; CSS-blur 900px по ТЗ. */
.hero__glow {
  position: absolute;
  z-index: -1;
  width: 1200px;
  height: 800px;
  right: -200px;
  top: 50%;
  transform: translateY(-50%);
  background-color: var(--color-primary);
  filter: blur(900px);
  pointer-events: none;
  opacity: 0.55;
}

.hero__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: center;
}

.hero__image {
  width: 100%;
  height: auto;
  border-radius: 12px;
  object-fit: cover;
  aspect-ratio: 4 / 3;            /* mobile/tablet: фото в рамке 4:3 */
  display: block;
}

@media (min-width: 1025px) {
  /* Desktop: фото без обрезки, упирается в правый край viewport.
     max-height и object-fit убраны намеренно — на широком viewport они
     раздували невидимую «коробку» вокруг картинки и тащили нижнюю
     границу hero вниз. С width:100% + height:auto картинка ровно своей
     натуральной высоты, без лишнего вертикального воздуха. */
  .hero__image {
    aspect-ratio: auto;
    width: 100%;
    height: auto;
    max-width: none;
    border-radius: 0;             /* full-bleed, hard edge справа */
  }
}

.hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.hero__badge {
  display: inline-flex;
  align-items: center;
  padding: 10px 22px;
  background-color: #fff;
  border: 1px solid rgba(2, 83, 145, 0.15);
  border-radius: 999px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  font-size: 16px;
  font-weight: var(--fw-semibold);
  color: var(--color-primary);
  line-height: 1.2;
}
@media (min-width: 1025px) {
  .hero__badge {
    font-size: 18px;
    padding: 11px 24px;
  }
}
@media (max-width: 767px) {
  .hero__badge {
    font-size: 14px;
    padding: 8px 16px;
  }
}
.hero__badge-sep {
  display: inline-block;
  margin: 0 12px;
  color: var(--color-primary);
  opacity: 0.4;
  font-weight: var(--fw-regular);
}

.hero__title {
  color: var(--color-primary);
  margin: 0;
}

.hero__lead {
  color: var(--color-text-main);
  font-size: 20px;
  font-weight: var(--fw-regular);
  line-height: 1.5;
  max-width: 460px;
  margin: 0;
}
@media (max-width: 767px) {
  .hero__lead {
    font-size: 17px;
  }
}
/* Два .hero__lead подряд — слипаются плотнее, чем общий flex-gap родителя */
.hero__lead + .hero__lead {
  margin-top: -12px;
}

.hero__stats {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;                      /* отступ от лида задаёт flex-gap у .hero__content */
}
.hero__stat {
  margin: 0;
  font-size: 18px;
  font-weight: var(--fw-regular);
  color: var(--color-text-main);
  line-height: 1.4;
}
.hero__stat strong {
  font-size: 22px;
  font-weight: var(--fw-bold);
  color: var(--color-primary);
  margin-right: 8px;
}
@media (max-width: 767px) {
  .hero__stats {
    gap: 12px;
  }
  .hero__stat {
    font-size: 16px;
  }
  .hero__stat strong {
    font-size: 22px;
  }
}
@media (min-width: 768px) {
  .hero__stats {
    flex-direction: row;
    flex-wrap: wrap;              /* tablet: при необходимости перенесёт во вторую строку */
    gap: 24px;
  }
  .hero__stat {
    font-size: 17px;
  }
  .hero__stat strong {
    font-size: 24px;
  }
}
@media (min-width: 1025px) {
  .hero__stats {
    flex-wrap: nowrap;            /* desktop: все три гарантированно в одну строку */
    gap: 32px;
  }
  .hero__stat {
    font-size: 18px;
    white-space: nowrap;          /* каждый стат не разбивается на 2 строки */
  }
  .hero__stat strong {
    font-size: 26px;
  }
}

.hero__media {
  order: 2;                     /* mobile: фото снизу под текстом */
}

@media (min-width: 768px) {
  .hero {
    padding: 60px 0;
  }
  .hero__inner {
    grid-template-columns: 1fr 1fr;
    gap: 60px;
  }
  .hero__content {
    gap: 20px;
  }
  .hero__media {
    order: 0;
  }
}

@media (min-width: 1025px) {
  .hero {
    padding: 60px 0 0;            /* нижний padding=0: фото упирается в синюю секцию вплотную */
    overflow: hidden;             /* страховка: blur у glow выходит за пределы */
  }
  .hero__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: 48px;
    /* align-items НЕ задаём здесь — индивидуальное align-self ниже */
  }
  .hero__content {
    gap: 20px;
    align-self: start;            /* текст к верху строки */
  }
  /* Полный bleed справа: одновременно расширяем width и компенсируем margin-right. */
  .hero__media {
    width: calc(100% + 100px + max(0px, (100vw - 1440px) / 2));
    margin-right: calc(-1 * (100px + max(0px, (100vw - 1440px) / 2)));
    margin-bottom: 0;             /* страховка от наследованных margin */
    align-self: end;              /* фото к низу строки */
  }
  .hero__media .hero__image {
    margin-bottom: 0;
    vertical-align: bottom;       /* убирает baseline-щель под inline-img на всякий */
  }
}

/* .problem не должен добавлять свой margin-top сверху — синяя секция начинается
   ровно от нижнего края hero. */
.problem {
  margin-top: 0;
}

/* ============================================================
   Hero — многослойные анимации
   Слои: 1) парение фото 2) пульс свечения 3) сканлайн на дисплее
          4) дыхание Glow Effect 5) counter-up (в counter.js)
          6) дрейфующие частицы.
   Все таймеры разные (3s / 4s / 6s / 7s / 8s ...), цвета — холодно-голубые.
   ============================================================ */

/* Слой 1: парение фото — обёртка вокруг <img>, не ломает align-self: end */
.hero__media-float {
  position: relative;
  animation: heroFloat 6s ease-in-out infinite;
  will-change: transform;
}
@keyframes heroFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}

/* Слой 2: мощный пульс свечения позади фото (аура).
   Реализация через ::before на .hero__media-float — работает независимо от
   прозрачности PNG; даёт выраженное «дыхание» с большим контрастом
   opacity 0.25 ↔ 1.0 и scale 0.85 ↔ 1.15, цикл 2.8s. */
.hero__media-float::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 70%;
  height: 70%;
  background: radial-gradient(circle at center,
              rgba(100, 180, 255, 0.85) 0%,
              rgba(80, 150, 255, 0.50) 30%,
              rgba(50, 120, 255, 0.20) 55%,
              transparent 75%);
  filter: blur(40px);
  z-index: 0;
  pointer-events: none;
  animation: heroHandGlow 2.8s ease-in-out infinite;
  will-change: opacity, transform;
}
.hero__image {
  position: relative;             /* фото поверх ауры (выше z-index: 0 у ::before) */
  z-index: 1;
}
@keyframes heroHandGlow {
  0%, 100% {
    opacity: 0.25;
    transform: translate(-50%, -50%) scale(0.85);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.15);
  }
}

/* Слой 4: дыхание Glow Effect.
   ВАЖНО: сохраняем существующий transform: translateY(-50%) для центрирования. */
.hero__glow {
  animation: heroGlowBreathe 8s ease-in-out infinite;
  will-change: opacity, transform;
}
@keyframes heroGlowBreathe {
  0%, 100% {
    opacity: 0.5;
    transform: translateY(-50%) scale(1);
  }
  50% {
    opacity: 0.7;
    transform: translateY(-50%) scale(1.08);
  }
}

/* Слой 6: дрейфующие частицы (8 точек, разная позиция / длительность / задержка) */
.hero__particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: -1;                   /* позади контента .hero__inner, но поверх .hero__glow (DOM-порядок) */
}
.hero__particles span {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(120, 180, 255, 0.6);
  box-shadow: 0 0 8px rgba(120, 180, 255, 0.5);
  will-change: transform, opacity;
}
.hero__particles span:nth-child(1) { left: 10%; top: 20%; animation: heroParticle 7s   ease-in-out infinite; }
.hero__particles span:nth-child(2) { left: 25%; top: 60%; animation: heroParticle 9s   ease-in-out infinite 1s; }
.hero__particles span:nth-child(3) { left: 40%; top: 30%; animation: heroParticle 8s   ease-in-out infinite 2s; }
.hero__particles span:nth-child(4) { left: 55%; top: 75%; animation: heroParticle 10s  ease-in-out infinite 0.5s; }
.hero__particles span:nth-child(5) { left: 70%; top: 40%; animation: heroParticle 7.5s ease-in-out infinite 1.5s; }
.hero__particles span:nth-child(6) { left: 80%; top: 65%; animation: heroParticle 9s   ease-in-out infinite 3s; }
.hero__particles span:nth-child(7) { left: 15%; top: 80%; animation: heroParticle 11s  ease-in-out infinite 2.5s; }
.hero__particles span:nth-child(8) { left: 90%; top: 25%; animation: heroParticle 8s   ease-in-out infinite 0.8s; }
@keyframes heroParticle {
  0%, 100% { transform: translate(0, 0);     opacity: 0.4; }
  50%      { transform: translate(15px, -25px); opacity: 0.8; }
}

/* Tablet/mobile — отключаем частицы (визуальный шум на узких) и
   уменьшаем амплитуду парения */
@media (max-width: 1024px) {
  .hero__particles {
    display: none;
  }
  @keyframes heroFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
  }
}

/* Reduced motion — отключаем все hero-анимации.
   Аура остаётся, но фиксируется в средней опасности для статичного эффекта. */
@media (prefers-reduced-motion: reduce) {
  .hero__media-float,
  .hero__media-float::before,
  .hero__glow,
  .hero__particles span {
    animation: none !important;
  }
  .hero__media-float::before {
    opacity: 0.5;
    transform: translate(-50%, -50%) scale(1);
  }
}

/* ============================================================
   2. Problem (синяя плашка во всю ширину)
   ============================================================ */
.problem {
  background-color: var(--color-primary);
  color: #fff;
  padding: 40px 0;
}

.problem__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: center;
}

.problem__content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.problem__title {
  color: #fff;
  margin: 0;
}

.problem__lead {
  color: rgba(255, 255, 255, 0.9);
  max-width: 480px;
}

.problem__stats {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  display: flex;
  flex-direction: column;
}
.problem__stats li {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
.problem__stats li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.problem__stats li strong {
  font-size: 32px;
  font-weight: var(--fw-bold);
  line-height: 1;
}
.problem__stats li span {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: rgba(255, 255, 255, 0.85);
}

.problem__media {
  order: 2;                     /* mobile: фото снизу */
}

/* Обёртка-«поплавок» — анимация translateY (парение).
   Отдельный элемент, чтобы не конфликтовать с rotation у самой картинки. */
.problem__media-float {
  animation: problemFloat 6s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  will-change: transform;
}

.problem__image {
  width: 100%;
  height: auto;
  display: block;
  /* Микро-поворот + пульсация свечения (drop-shadow для прозрачного PNG). */
  animation:
    problemRotate 8s ease-in-out infinite,
    problemGlow   4s ease-in-out infinite;
  will-change: transform, filter;
}

@keyframes problemFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-16px); }
}

@keyframes problemRotate {
  0%, 100% { transform: rotate(-2deg); }
  50%      { transform: rotate(2deg); }
}

@keyframes problemGlow {
  0%, 100% {
    filter: drop-shadow(0 0 30px rgba(80, 150, 255, 0.35))
            drop-shadow(0 0 60px rgba(80, 150, 255, 0.25));
  }
  50% {
    filter: drop-shadow(0 0 50px rgba(120, 180, 255, 0.55))
            drop-shadow(0 0 100px rgba(120, 180, 255, 0.35));
  }
}

@media (prefers-reduced-motion: reduce) {
  .problem__media-float,
  .problem__image {
    animation: none !important;
  }
  .problem__image {
    /* Статичное свечение — даже при отключённой анимации кристалл «светится» */
    filter: drop-shadow(0 0 40px rgba(80, 150, 255, 0.35));
  }
}

@media (min-width: 768px) {
  .problem {
    padding: 60px 0;
  }
  .problem__inner {
    grid-template-columns: 1fr 1fr;
    gap: 60px;
  }
  .problem__media {
    order: 0;
  }
}

@media (min-width: 1025px) {
  .problem {
    padding: 80px 0;
  }
}

/* ============================================================
   3. Feature (белая, текст слева, фото справа)
   ============================================================ */
.feature {
  background-color: #fff;
  padding: 40px 0;
}

.feature__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: center;
}

.feature__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.feature__title {
  color: var(--color-primary);             /* синий заголовок по макету */
  margin: 0;
  font-size: 28px;                          /* mobile */
  font-weight: var(--fw-semibold);
  line-height: 1.2;
}

.feature__text {
  color: var(--color-text-main);
  font-size: 18px;
  line-height: 1.6;
  max-width: 480px;
}

/* Кнопка «Узнать больше» внутри feature — чуть компактнее общей .btn */
.feature__content .btn {
  padding: 12px 24px;
  font-size: 16px;
}

.feature__media {
  order: 2;                                 /* mobile: фото снизу */
  position: relative;                       /* база для абс-позиционирования SVG-оверлея */
  border-radius: 12px;
  overflow: hidden;                         /* анимации не вылезают за фото */
}
.feature__image {
  position: relative;
  z-index: 0;
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  aspect-ratio: 4 / 3;
}

/* ============================================================
   SVG-оверлей: змейка на дисплее + импульсы по кабелям.
   viewBox 0..100 + preserveAspectRatio="none" — координаты как % фото.
   ============================================================ */
.feature__overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

/* Рамка дисплея — статическая подсветка */
.feature__display-frame {
  opacity: 0.6;
  filter: drop-shadow(0 0 0.3px rgba(120, 200, 255, 0.4));
}

/* Змейка-сигнал: 12-unit-длинный сегмент бежит по pathLength=100 */
.feature__snake {
  stroke-dasharray: 12 88;
  stroke-dashoffset: 100;
  filter: drop-shadow(0 0 0.4px rgba(120, 220, 255, 0.9))
          drop-shadow(0 0 1px   rgba(120, 220, 255, 0.6));
  animation: featureSnake 2.2s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  will-change: stroke-dashoffset, opacity;
}
@keyframes featureSnake {
  0%   { stroke-dashoffset: 100; opacity: 0; }
  10%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { stroke-dashoffset: 0;   opacity: 0; }
}

/* Импульсы по проводам — короткая «капля света» (4 units) бегает по pathLength=100.
   Все 4 — с разной длительностью и delay, чтобы не звучало синхронно. */
.feature__wire {
  stroke: url(#featureWireGradient);
  stroke-linecap: round;
  stroke-dasharray: 4 96;
  stroke-dashoffset: 100;
  filter: drop-shadow(0 0 0.5px rgba(120, 200, 255, 0.8));
  will-change: stroke-dashoffset, opacity;
}
.feature__wire--1 { animation: featureWireFlow 3.2s linear infinite; }
.feature__wire--2 { animation: featureWireFlow 4.1s linear infinite 0.6s; }
.feature__wire--3 { animation: featureWireFlow 3.7s linear infinite 1.2s; }
.feature__wire--4 { animation: featureWireFlow 3.4s linear infinite 1.8s; }
@keyframes featureWireFlow {
  0%   { stroke-dashoffset: 100; opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { stroke-dashoffset: 0;   opacity: 0; }
}

/* Reduced motion: анимации стоп, оставляем тонкую статичную подсветку */
@media (prefers-reduced-motion: reduce) {
  .feature__snake,
  .feature__wire {
    animation: none !important;
    stroke-dasharray: none;
    opacity: 0.3;
  }
}

/* Mobile: SVG-детали почти неразличимы при маленьком фото — отключаем оверлей */
@media (max-width: 767px) {
  .feature__overlay {
    display: none;
  }
}

@media (min-width: 768px) {
  .feature {
    padding: 60px 0;
  }
  .feature__inner {
    grid-template-columns: 1fr 1fr;
    gap: 60px;
  }
  .feature__content {
    gap: 20px;
  }
  .feature__title {
    font-size: 32px;
  }
  .feature__media {
    order: 0;
  }
}

@media (min-width: 1025px) {
  .feature {
    padding: 80px 0;                       /* 80px воздуха сверху/снизу от синих секций */
  }
  .feature__content {
    gap: 24px;
  }
  .feature__title {
    font-size: 36px;
  }
}

/* ============================================================
   4. Startup (синяя плашка; фото слева, текст справа)
   ============================================================ */
.startup {
  position: relative;            /* база для абс-позиционирования фоновых слоёв */
  background-color: var(--color-primary);
  color: #fff;
  padding: 40px 0;
  overflow: hidden;              /* анимации не выходят за пределы секции */
}

.startup__inner {
  position: relative;
  z-index: 1;                    /* контент всегда поверх фоновых анимаций */
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: center;
}

.startup__media {
  position: relative;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 12px;
}

.startup__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.5);
  transform-origin: center center;
}

/* ============================================================
   Фоновые анимации секции «стартап» — звёзды + метеоры + свечение
   ============================================================ */
.startup__stars,
.startup__meteors {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.startup__meteors {
  overflow: hidden;
}

/* === Звёзды: 20 точек разного размера, мерцают через opacity + scale === */
.startup__stars span {
  position: absolute;
  width: 2px;
  height: 2px;
  background: rgba(180, 220, 255, 0.8);
  border-radius: 50%;
  box-shadow: 0 0 4px rgba(180, 220, 255, 0.6);
  animation: startupTwinkle 3s ease-in-out infinite;
  will-change: opacity, transform;
}
.startup__stars span:nth-child(1)  { left: 5%;  top: 12%; animation-delay: 0s;   animation-duration: 3s;   }
.startup__stars span:nth-child(2)  { left: 12%; top: 35%; animation-delay: 0.5s; animation-duration: 4s;   width: 3px; height: 3px; }
.startup__stars span:nth-child(3)  { left: 18%; top: 78%; animation-delay: 1.2s; animation-duration: 3.5s; }
.startup__stars span:nth-child(4)  { left: 25%; top: 22%; animation-delay: 0.3s; animation-duration: 5s;   }
.startup__stars span:nth-child(5)  { left: 32%; top: 60%; animation-delay: 1.8s; animation-duration: 3s;   width: 1px; height: 1px; }
.startup__stars span:nth-child(6)  { left: 42%; top: 15%; animation-delay: 0.8s; animation-duration: 4.2s; }
.startup__stars span:nth-child(7)  { left: 48%; top: 50%; animation-delay: 2.1s; animation-duration: 3s;   }
.startup__stars span:nth-child(8)  { left: 55%; top: 85%; animation-delay: 0.6s; animation-duration: 3.8s; width: 3px; height: 3px; }
.startup__stars span:nth-child(9)  { left: 62%; top: 28%; animation-delay: 1.5s; animation-duration: 4.5s; }
.startup__stars span:nth-child(10) { left: 70%; top: 70%; animation-delay: 0.2s; animation-duration: 3s;   }
.startup__stars span:nth-child(11) { left: 78%; top: 18%; animation-delay: 1.9s; animation-duration: 4s;   width: 1px; height: 1px; }
.startup__stars span:nth-child(12) { left: 85%; top: 45%; animation-delay: 0.7s; animation-duration: 3.5s; }
.startup__stars span:nth-child(13) { left: 92%; top: 75%; animation-delay: 2.3s; animation-duration: 4.8s; }
.startup__stars span:nth-child(14) { left: 8%;  top: 92%; animation-delay: 1.1s; animation-duration: 3.2s; }
.startup__stars span:nth-child(15) { left: 38%; top: 88%; animation-delay: 0.4s; animation-duration: 4s;   }
.startup__stars span:nth-child(16) { left: 88%; top: 10%; animation-delay: 1.7s; animation-duration: 3.5s; width: 3px; height: 3px; }
.startup__stars span:nth-child(17) { left: 15%; top: 55%; animation-delay: 2.5s; animation-duration: 4s;   }
.startup__stars span:nth-child(18) { left: 65%; top: 6%;  animation-delay: 0.9s; animation-duration: 3.8s; }
.startup__stars span:nth-child(19) { left: 95%; top: 30%; animation-delay: 1.3s; animation-duration: 4.5s; }
.startup__stars span:nth-child(20) { left: 50%; top: 95%; animation-delay: 0.1s; animation-duration: 3s;   }
@keyframes startupTwinkle {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.4); }
}

/* === Метеоры: 4 тонких наклонных линии, периодически пролетают === */
.startup__meteors span {
  position: absolute;
  width: 80px;
  height: 1px;
  background: linear-gradient(90deg,
              transparent,
              rgba(180, 220, 255, 0.9),
              transparent);
  filter: blur(0.5px);
  transform: rotate(-25deg);
  opacity: 0;
  will-change: transform, opacity;
}
.startup__meteors span:nth-child(1) {
  top: 15%; left: -10%;
  animation: startupMeteor 6s linear infinite;
}
.startup__meteors span:nth-child(2) {
  top: 45%; left: -10%;
  animation: startupMeteor 8s linear infinite 2.5s;
}
.startup__meteors span:nth-child(3) {
  top: 70%; left: -10%;
  width: 60px;
  animation: startupMeteor 7s linear infinite 1.2s;
}
.startup__meteors span:nth-child(4) {
  top: 28%; left: -10%;
  width: 100px;
  animation: startupMeteor 9s linear infinite 4.8s;
}
@keyframes startupMeteor {
  0%   { transform: translate(0, 0) rotate(-25deg);             opacity: 0; }
  5%   { opacity: 1; }
  60%  { opacity: 1; }
  100% { transform: translate(120vw, 60vh) rotate(-25deg);      opacity: 0; }
}

/* === Свечение под видео — «след от двигателя» === */
.startup__glow {
  position: absolute;
  left: 5%;
  bottom: -200px;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle,
              rgba(120, 180, 255, 0.25) 0%,
              rgba(80, 140, 255, 0.10) 40%,
              transparent 70%);
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
  animation: startupGlowBreath 5s ease-in-out infinite;
  will-change: opacity, transform;
}
@keyframes startupGlowBreath {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.15); }
}

/* === Reduced motion === */
@media (prefers-reduced-motion: reduce) {
  .startup__stars span,
  .startup__meteors span,
  .startup__glow {
    animation: none !important;
  }
  .startup__stars span { opacity: 0.5; transform: scale(1); }
  .startup__meteors span { display: none; }
}

/* === Mobile: отключаем метеоры (визуальный шум на узком фрейме) === */
@media (max-width: 767px) {
  .startup__meteors {
    display: none;
  }
}

.startup__content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.startup__title {
  color: #fff;
  margin: 0;
  max-width: 480px;
}

.startup__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin: 8px 0 0;
  padding: 0;
}
.startup__list dt {
  font-weight: var(--fw-semibold);
  color: rgba(255, 255, 255, 0.7);
  font-size: 16px;
}
.startup__list dd {
  margin: 0;
  color: #fff;
  font-weight: var(--fw-regular);
  font-size: 16px;
  line-height: 1.5;
}

@media (min-width: 768px) {
  .startup {
    padding: 60px 0;
  }
  .startup__inner {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }
  .startup__media {
    margin: 0;
    max-width: 100%;
  }
}

@media (min-width: 1025px) {
  .startup {
    padding: 80px 0;
  }
  .startup__inner {
    grid-template-columns: 1fr 1.1fr;
    gap: 48px;
  }
  .startup__media {
    max-width: 560px;
  }
  .startup__list {
    gap: 18px;
  }
  .startup__list dt,
  .startup__list dd {
    font-size: 17px;
  }
}

/* ============================================================
   Contact — декоративные орбы на фоне (только index.html).
   Два мягких голубых пятна по углам, медленно дрейфующие.
   ============================================================ */
.contact__decor {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* ---------- Орбы — три цветных пятна по углам и в центре ---------- */
.contact__decor-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.7;
  will-change: transform;
}
.contact__decor-orb--1 {
  width: 400px;
  height: 400px;
  top: -100px;
  left: -100px;
  background: radial-gradient(circle, rgba(80, 150, 255, 0.55), transparent 65%);
  animation: contactOrbFloat 12s ease-in-out infinite;
}
.contact__decor-orb--2 {
  width: 500px;
  height: 500px;
  bottom: -150px;
  right: -150px;
  background: radial-gradient(circle, rgba(2, 83, 145, 0.45), transparent 65%);
  animation: contactOrbFloat 14s ease-in-out infinite reverse;
}
.contact__decor-orb--3 {
  width: 350px;
  height: 350px;
  /* Центрируем через calc вместо transform — чтобы animation transform не конфликтовал */
  top: calc(50% - 175px);
  left: calc(35% - 175px);
  background: radial-gradient(circle, rgba(120, 180, 255, 0.4), transparent 70%);
  filter: blur(60px);
  opacity: 0.6;
  animation: contactOrbFloat 10s ease-in-out infinite 2s;
}
@keyframes contactOrbFloat {
  0%, 100% { transform: translate(0, 0)      scale(1); }
  33%      { transform: translate(60px, -40px) scale(1.15); }
  66%      { transform: translate(-30px, 50px) scale(0.95); }
}

/* ---------- Декоративная сетка-grid на фоне (медленный дрейф) ---------- */
.contact__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(2, 83, 145, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(2, 83, 145, 0.06) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
  opacity: 0.5;
  animation: contactGridDrift 30s linear infinite;
  pointer-events: none;
  will-change: background-position;
}
@keyframes contactGridDrift {
  from { background-position: 0 0,       0 0; }
  to   { background-position: 60px 60px, 60px 60px; }
}

/* ---------- 8 мерцающих частиц по краям секции ---------- */
.contact__particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.contact__particles span {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(80, 150, 255, 0.7);
  box-shadow: 0 0 8px rgba(80, 150, 255, 0.5);
  will-change: transform, opacity;
}
.contact__particles span:nth-child(1) { top: 15%; left: 8%;  animation: contactParticle 8s   ease-in-out infinite;       }
.contact__particles span:nth-child(2) { top: 75%; left: 12%; animation: contactParticle 9s   ease-in-out infinite 1s;    }
.contact__particles span:nth-child(3) { top: 30%; left: 25%; animation: contactParticle 7s   ease-in-out infinite 2.5s;  }
.contact__particles span:nth-child(4) { top: 60%; left: 32%; animation: contactParticle 10s  ease-in-out infinite 0.5s;  }
.contact__particles span:nth-child(5) { top: 20%; left: 88%; animation: contactParticle 8s   ease-in-out infinite 3s;    }
.contact__particles span:nth-child(6) { top: 80%; left: 92%; animation: contactParticle 9s   ease-in-out infinite 1.5s;  }
.contact__particles span:nth-child(7) { top: 50%; left: 5%;  animation: contactParticle 7.5s ease-in-out infinite 4s;    }
.contact__particles span:nth-child(8) { top: 45%; left: 95%; animation: contactParticle 8.5s ease-in-out infinite 2s;    }
@keyframes contactParticle {
  0%, 100% { transform: translate(0, 0)        scale(1);   opacity: 0.3; }
  50%      { transform: translate(20px, -30px) scale(1.5); opacity: 1;   }
}

/* ---------- Mobile: облегчаем фон ---------- */
@media (max-width: 767px) {
  .contact__decor-orb--1 {
    width: 200px; height: 200px;
    top: -60px; left: -60px;
  }
  .contact__decor-orb--2 {
    width: 240px; height: 240px;
    bottom: -80px; right: -80px;
  }
  .contact__decor-orb--3 {
    display: none;
  }
  .contact__grid,
  .contact__particles {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .contact__decor-orb,
  .contact__grid,
  .contact__particles span {
    animation: none !important;
    transform: none !important;
  }
}

/* ============================================================
   Mobile performance: уменьшаем тяжёлые blur'ы.
   Все анимации сохраняются, просто кадрам нужно меньше GPU-памяти.
   ============================================================ */
@media (max-width: 767px) {
  /* Hero glow: blur(900px) обходился очень дорого на мобильных GPU */
  .hero__glow {
    width: 600px;
    height: 400px;
    filter: blur(200px);
    opacity: 0.4;
  }
  /* Аура за фото руки — меньше блюра, меньше пиксельбэг */
  .hero__media-float::before {
    filter: blur(28px);
  }
  /* Декор-орбы в .contact: уже уменьшены до 200/240, blur тоже снизим */
  .contact__decor-orb {
    filter: blur(50px);
  }
}

/* ============================================================
   Дополнительные анимации поверх существующих (по запросу финала)
   ============================================================ */

/* Hero badge — лёгкий bounce при загрузке страницы */
.hero__badge {
  animation: heroBadgeBounce 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s both;
}
@keyframes heroBadgeBounce {
  0%   { opacity: 0; transform: scale(0.85) translateY(-8px); }
  60%  { opacity: 1; transform: scale(1.04) translateY(0); }
  100% { opacity: 1; transform: scale(1)    translateY(0); }
}

/* Hero CTA «Узнать больше» — периодический «нудж» раз в 5 сек */
.hero__content .btn--primary {
  animation: heroCtaNudge 5s ease-in-out 2s infinite;
  will-change: transform;
}
@keyframes heroCtaNudge {
  0%, 88%, 100% { transform: scale(1); }
  92%           { transform: scale(1.03); }
  96%           { transform: scale(0.99); }
}

/* Problem stats — разделители прорисовываются слева направо при появлении секции */
.problem__stats li::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.25);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.problem__media.fade-in-up.is-visible ~ .problem__content .problem__stats li::after,
.problem.is-visible .problem__stats li::after,
.problem__stats li.fade-in-up.is-visible::after {
  transform: scaleX(1);
}
/* Делегируем через is-visible на родителе .problem или на самих li */
.problem__stats li {
  position: relative;
  /* убираем существующий border-bottom — заменили на animated ::after */
  border-bottom-color: transparent !important;
}
.problem__stats li:last-child::after {
  display: none;
}
/* Каскад задержек для разделителей */
.problem__content.fade-in-up.is-visible ~ .problem__media .problem__stats li:nth-child(1)::after,
.problem.fade-in-up.is-visible .problem__stats li:nth-child(1)::after { transition-delay: 0.2s; transform: scaleX(1); }
.problem.fade-in-up.is-visible .problem__stats li:nth-child(2)::after { transition-delay: 0.4s; transform: scaleX(1); }
/* Без триггера через JS — сразу через CSS-loaded анимацию на ::after.
   IntersectionObserver уже триггерит .is-visible на .fade-in-up элементах,
   поэтому проще навесить класс fade-in-up на сами li через HTML — пропустим. */

/* Feature: фото справа slide-in, текст слева slide-in (через fade-in-up + custom transform) */
.feature__content.fade-in-up {
  transform: translateY(40px) translateX(-15px);
  transition: opacity 0.7s ease-out, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.feature__content.fade-in-up.is-visible {
  transform: translateY(0) translateX(0);
}
.feature__media.fade-in-up {
  transform: translateY(40px) translateX(20px);
  transition: opacity 0.7s ease-out, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.feature__media.fade-in-up.is-visible {
  transform: translateY(0) translateX(0);
  transition-delay: 0.15s;
}
.feature__image {
  transition: transform 0.35s ease-out;
}
@media (hover: hover) and (pointer: fine) {
  .feature__media:hover .feature__image {
    transform: scale(1.03);
  }
}

/* Startup list — каждый пункт «Сейчас/Скоро/В планах» появляется по очереди */
.startup__list dt,
.startup__list dd {
  opacity: 0;
  transform: translateY(15px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.startup__content.fade-in-up.is-visible .startup__list dt,
.startup__content.fade-in-up.is-visible .startup__list dd {
  opacity: 1;
  transform: translateY(0);
}
.startup__content.fade-in-up.is-visible .startup__list dt:nth-of-type(1),
.startup__content.fade-in-up.is-visible .startup__list dd:nth-of-type(1) { transition-delay: 0.10s; }
.startup__content.fade-in-up.is-visible .startup__list dt:nth-of-type(2),
.startup__content.fade-in-up.is-visible .startup__list dd:nth-of-type(2) { transition-delay: 0.25s; }
.startup__content.fade-in-up.is-visible .startup__list dt:nth-of-type(3),
.startup__content.fade-in-up.is-visible .startup__list dd:nth-of-type(3) { transition-delay: 0.40s; }
/* Лейбл-«линия» под каждым dt — прорисовка слева направо */
.startup__list dt {
  position: relative;
  padding-bottom: 4px;
}
.startup__list dt::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 32px;
  height: 2px;
  background: rgba(255, 255, 255, 0.6);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.5s ease-out 0.3s;
}
.startup__content.fade-in-up.is-visible .startup__list dt::after {
  transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
  .hero__badge,
  .hero__content .btn--primary {
    animation: none !important;
  }
  .feature__content.fade-in-up,
  .feature__media.fade-in-up,
  .feature__media:hover .feature__image,
  .startup__list dt,
  .startup__list dd,
  .startup__list dt::after {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}